index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472
  1. <template>
  2. <div class="pageIndexClass">
  3. <!-- <Banner /> -->
  4. <div class="content">
  5. <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" highlight-current-row
  6. :selectConfig="selectConfig" :table-events="{
  7. select: select,
  8. }" :action-list="[]" @get-list="getList">
  9. <template #amount="{ item }">
  10. <div :style="'color: ' + (item.status === '10' ? '#04cb04;' : 'red;')">
  11. <span style="padding-right: 4px">{{ item.currency }}</span>
  12. <span v-if="item.status === '20'">-</span>
  13. <span>{{ moneyFormat(item.amount, 2) }}</span>
  14. </div>
  15. </template>
  16. </byTable>
  17. </div>
  18. <el-dialog title="拆分" v-if="dialogVisible" v-model="dialogVisible" width="800" v-loading="loading">
  19. <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
  20. <template #money>
  21. <div style="width: 100%">
  22. <el-row :gutter="10">
  23. <el-col :span="6">
  24. <el-form-item>
  25. <el-select v-model="formData.data.status" style="width: 100%" disabled>
  26. <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value" />
  27. </el-select>
  28. </el-form-item>
  29. </el-col>
  30. <el-col :span="12">
  31. <el-form-item>
  32. <el-input v-model="formData.data.amount" placeholder="请输入金额" class="input-with-select" disabled>
  33. <template #prepend>
  34. <el-select v-model="formData.data.currency" placeholder="请选择币种" style="width: 100px" disabled>
  35. <el-option v-for="item in accountCurrency" :key="item.value" :label="item.value" :value="item.value" />
  36. </el-select>
  37. </template>
  38. </el-input>
  39. </el-form-item>
  40. </el-col>
  41. </el-row>
  42. </div>
  43. </template>
  44. <template #slot>
  45. <div style="width: 100%">
  46. <el-button type="primary" @click="addRow"> 添加 </el-button>
  47. <br />
  48. <el-table :data="formData.data.accountDeptRunningWaterDetailList">
  49. <el-table-column prop="deptId" label="部门">
  50. <template #default="{ row, $index }">
  51. <el-form-item :prop="'accountDeptRunningWaterDetailList.' + $index + '.deptId'" :rules="rules.deptId" :inline-message="true">
  52. <el-cascader v-model="row.deptId" :options="deptTreeData" :props="{
  53. value: 'deptId',
  54. }" clearable filterable style="width: 100%" />
  55. </el-form-item>
  56. </template>
  57. </el-table-column>
  58. <el-table-column prop="amount" label="分拆金额">
  59. <template #default="{ row, $index }">
  60. <el-form-item :prop="'accountDeptRunningWaterDetailList.' + $index + '.amount'" :rules="rules.amount" :inline-message="true">
  61. <el-input-number onmousewheel="return false;" v-model="row.amount" placeholder="请输入金额" style="width: 100%" :precision="2"
  62. :controls="false" :min="0" />
  63. </el-form-item>
  64. </template>
  65. </el-table-column>
  66. <el-table-column prop="remarks" label="备注">
  67. <template #default="{ row, $index }">
  68. <el-form-item :prop="'accountDeptRunningWaterDetailList.' + $index + '.remarks'" :rules="rules.remarks" :inline-message="true">
  69. <el-input v-model="row.remarks" placeholder="请输入" />
  70. </el-form-item>
  71. </template>
  72. </el-table-column>
  73. <el-table-column prop="zip" align="center" label="操作" width="80">
  74. <template #default="{ $index }">
  75. <el-button type="primary" link @click="handleRemove($index)">删除</el-button>
  76. </template>
  77. </el-table-column>
  78. </el-table>
  79. </div>
  80. </template>
  81. </byForm>
  82. <template #footer>
  83. <el-button @click="dialogVisible = false" size="default">取 消</el-button>
  84. <el-button type="primary" @click="submitForm()" size="default" :loading="submitLoading"> 确 定 </el-button>
  85. </template>
  86. </el-dialog>
  87. <el-dialog title="调整部门" v-if="depModal" v-model="depModal" width="600" v-loading="loading">
  88. <p>部门名称</p>
  89. <el-cascader v-model="departmentId" :options="deptTreeData" :props="{
  90. value: 'deptId',
  91. }" clearable filterable style="width: 100%" />
  92. <template #footer>
  93. <el-button @click="depModal = false" size="default">取 消</el-button>
  94. <el-button type="primary" @click="submitDeptForm(departmentId)" size="default" :loading="submitLoading"> 确 定 </el-button>
  95. </template>
  96. </el-dialog>
  97. </div>
  98. </template>
  99. <script setup>
  100. import { ElMessage } from "element-plus";
  101. import byTable from "@/components/byTable/index";
  102. import byForm from "@/components/byForm/index";
  103. import { computed, ref } from "vue";
  104. const loading = ref(false);
  105. const submitLoading = ref(false);
  106. const sourceList = ref({
  107. data: [],
  108. pagination: {
  109. total: 3,
  110. pageNum: 1,
  111. pageSize: 10,
  112. },
  113. });
  114. let dialogVisible = ref(false);
  115. let modalType = ref("add");
  116. let rules = ref({
  117. type: [{ required: true, message: "请选择类型", trigger: "change" }],
  118. contactNumber: [
  119. { required: true, message: "请输入联系号码", trigger: "blur" },
  120. ],
  121. amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
  122. });
  123. const status = ref([
  124. {
  125. label: "收入",
  126. value: "10",
  127. },
  128. {
  129. label: "支出",
  130. value: "20",
  131. },
  132. ]);
  133. const accountCurrency = ref([]);
  134. import Cookies from "js-cookie";
  135. const { proxy } = getCurrentInstance();
  136. const selectConfig = [];
  137. const config = computed(() => {
  138. return [
  139. {
  140. attrs: {
  141. label: "资金账户",
  142. prop: "accountManagementName",
  143. },
  144. },
  145. {
  146. attrs: {
  147. label: "交易时间",
  148. prop: "transactionTime",
  149. },
  150. },
  151. {
  152. attrs: {
  153. label: "交易金额",
  154. slot: "amount",
  155. },
  156. },
  157. {
  158. attrs: {
  159. prop: "accountOpening",
  160. label: "对方账户",
  161. },
  162. },
  163. {
  164. attrs: {
  165. prop: "openingBank",
  166. label: "对方银行",
  167. },
  168. },
  169. {
  170. attrs: {
  171. prop: "name",
  172. label: "对方账号",
  173. },
  174. },
  175. {
  176. attrs: {
  177. prop: "remarks",
  178. label: "摘要",
  179. },
  180. },
  181. {
  182. attrs: {
  183. label: "操作",
  184. width: "200",
  185. align: "right",
  186. },
  187. renderHTML(row) {
  188. return [
  189. {
  190. attrs: {
  191. label: "调整部门",
  192. type: "primary",
  193. text: true,
  194. },
  195. el: "button",
  196. click() {
  197. depModal.value = true;
  198. runningWaterId = row.id;
  199. dtlData.value = row;
  200. departmentId.value = [];
  201. },
  202. },
  203. {
  204. attrs: {
  205. label: "分拆",
  206. type: "primary",
  207. text: true,
  208. },
  209. el: "button",
  210. click() {
  211. getDtl(row);
  212. },
  213. },
  214. ];
  215. },
  216. },
  217. ];
  218. });
  219. const dtlData = ref({});
  220. let formData = reactive({
  221. data: {
  222. type: "1",
  223. },
  224. treeData: [],
  225. });
  226. const formOption = reactive({
  227. inline: true,
  228. labelWidth: 100,
  229. itemWidth: 100,
  230. rules: [],
  231. });
  232. const submit = ref(null);
  233. const depModal = ref(false);
  234. let deptTreeData = ref([]);
  235. let departmentId = ref([]);
  236. const getDept = async () => {
  237. // 部门树
  238. proxy
  239. .get("/tenantDept/list", {
  240. pageNum: 1,
  241. pageSize: 9999,
  242. tenantId: Cookies.get("tenantId"),
  243. })
  244. .then((message) => {
  245. recursive(message.data);
  246. deptTreeData.value = proxy.handleTree(message.data, "corporationId");
  247. });
  248. };
  249. getDept();
  250. const submitDeptForm = async (departmentId) => {
  251. if (departmentId.length == 0) {
  252. ElMessage.error("请选择部门");
  253. return;
  254. }
  255. const params = {
  256. deptId: departmentId[departmentId.length - 1],
  257. accountDeptRunningWaterId: dtlData.value.accountDeptRunningWaterId,
  258. id: dtlData.value.id,
  259. amount: dtlData.value.amount,
  260. };
  261. proxy
  262. .post("/accountDeptRunningWaterDetail/add", params)
  263. .then(() => {
  264. ElMessage.success("调整部门成功");
  265. depModal.value = false;
  266. getList();
  267. })
  268. .catch((error) => {
  269. ElMessage.error(error);
  270. });
  271. };
  272. const recursive = (data) => {
  273. data.map((item) => {
  274. item.label = item.deptName;
  275. item.id = item.corporationId;
  276. if (item.children) {
  277. recursive(item.children);
  278. } else {
  279. item.children = [];
  280. }
  281. });
  282. };
  283. const formConfig = computed(() => {
  284. return [
  285. {
  286. type: "select",
  287. prop: "accountManagementId",
  288. label: "付款账户",
  289. required: true,
  290. disabled: true,
  291. isLoad: {
  292. url: "/accountManagement/page",
  293. req: {
  294. pageNum: 1,
  295. pageSize: 9999,
  296. },
  297. labelKey: "name",
  298. labelVal: "id",
  299. method: "post",
  300. resUrl: "rows",
  301. },
  302. },
  303. {
  304. type: "date",
  305. prop: "transactionTime",
  306. label: "交易时间",
  307. disabled: true,
  308. },
  309. // {
  310. // type: "selectInput",
  311. // label: "交易金额",
  312. // itemWidth: 60,
  313. // data: accountCurrency.value,
  314. // placeholder: "请输入",
  315. // selectPlaceholder: "币种",
  316. // selectProp: "currency",
  317. // prop: "amount",
  318. // disabled: true,
  319. // },
  320. {
  321. type: "slot",
  322. prop: "money",
  323. slotName: "money",
  324. label: "交易金额",
  325. },
  326. {
  327. type: "input",
  328. prop: "remarks",
  329. label: "摘要",
  330. disabled: true,
  331. itemType: "textarea",
  332. disabled: true,
  333. },
  334. {
  335. type: "slot",
  336. label: "拆分明细",
  337. slotName: "slot",
  338. },
  339. ];
  340. });
  341. const getList = async (req) => {
  342. sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  343. loading.value = true;
  344. proxy
  345. .post("/accountDeptRunningWater/page", sourceList.value.pagination)
  346. .then((message) => {
  347. sourceList.value.data = message.rows;
  348. sourceList.value.pagination.total = message.total;
  349. setTimeout(() => {
  350. loading.value = false;
  351. }, 200);
  352. });
  353. };
  354. proxy.getDict(["account_currency"]).then((res) => {
  355. accountCurrency.value = res.account_currency.map((item) => {
  356. return {
  357. label: item.dictValue,
  358. value: item.dictKey,
  359. };
  360. });
  361. });
  362. const submitForm = async () => {
  363. submit.value.handleSubmit(() => {
  364. if (
  365. !(
  366. formData.data.accountDeptRunningWaterDetailList &&
  367. formData.data.accountDeptRunningWaterDetailList.length > 0
  368. )
  369. ) {
  370. return ElMessage("请添加拆分明细!");
  371. }
  372. let money = 0;
  373. for (
  374. let i = 0;
  375. i < formData.data.accountDeptRunningWaterDetailList.length;
  376. i++
  377. ) {
  378. if (
  379. formData.data.accountDeptRunningWaterDetailList[i].amount &&
  380. Number(formData.data.accountDeptRunningWaterDetailList[i].amount) !== 0
  381. ) {
  382. money = Number(
  383. parseFloat(
  384. Number(money) +
  385. Number(formData.data.accountDeptRunningWaterDetailList[i].amount)
  386. )
  387. );
  388. } else {
  389. return ElMessage("金额不能为0");
  390. }
  391. }
  392. if (Number(money) !== Number(formData.data.amount)) {
  393. return ElMessage("分拆总金额需等于交易金额");
  394. }
  395. submitLoading.value = true;
  396. const params = {
  397. id: formData.data.id,
  398. deptRunningWaterDetailList:
  399. formData.data.accountDeptRunningWaterDetailList,
  400. accountDeptRunningWaterId: formData.data.accountDeptRunningWaterId,
  401. };
  402. params.deptRunningWaterDetailList.map((item) => {
  403. item.deptId = item.deptId[item.deptId.length - 1];
  404. });
  405. proxy
  406. .post("/accountDeptRunningWaterDetail/add", {
  407. ...params,
  408. })
  409. .then(
  410. () => {
  411. ElMessage({
  412. message: "拆分成功",
  413. type: "success",
  414. });
  415. dialogVisible.value = false;
  416. submitLoading.value = false;
  417. getList();
  418. },
  419. (err) => (submitLoading.value = false)
  420. );
  421. });
  422. };
  423. const getDtl = (row) => {
  424. modalType.value = "edit";
  425. dialogVisible.value = true;
  426. proxy
  427. .post("/accountDeptRunningWaterDetail/detail", { id: row.id })
  428. .then((res) => {
  429. if (
  430. res.deptRunningWaterDetailList &&
  431. res.deptRunningWaterDetailList.length > 0
  432. ) {
  433. res.accountDeptRunningWaterDetailList =
  434. res.deptRunningWaterDetailList.map((item) => {
  435. item.deptId = [item.deptId];
  436. return item;
  437. });
  438. } else {
  439. res.accountDeptRunningWaterDetailList = [];
  440. }
  441. formData.data = res;
  442. dialogVisible.value = true;
  443. });
  444. };
  445. const addRow = () => {
  446. formData.data.accountDeptRunningWaterDetailList.push({
  447. remarks: "",
  448. amount: null,
  449. deptId: [],
  450. });
  451. };
  452. const handleRemove = (index) => {
  453. formData.data.accountDeptRunningWaterDetailList.splice(index, 1);
  454. return ElMessage({
  455. message: "删除成功!",
  456. type: "success",
  457. });
  458. };
  459. getList();
  460. </script>
  461. <style lang="scss" scoped>
  462. .tenant {
  463. padding: 20px;
  464. }
  465. ::v-deep(.el-input-number .el-input__inner) {
  466. text-align: left;
  467. }
  468. </style>