部门费用BUG

src/views/finance/fundManage/depExpenses/index.vue

@@ -13,164 +13,119 @@
           select: select,
         }"
         :action-list="[]"
-        @get-list="getList"
-      >
+        @get-list="getList">
         <template #amount="{ item }">
           <div :style="`color: ${item.amount <= 0 ? 'red' : '#39C55A'}`">
-            {{dictDataEcho(item.currency,dictsData.account_currency) + ' ' + item.amount}}
+            {{ item.currency + item.amount }}
           </div>
         </template>
-        
       </byTable>
     </div>
-    <el-dialog
-      title="拆分"
-      v-model="dialogVisible"
-      width="600"
-      v-loading="loading"
-    >
-      <byForm
-        :formConfig="formConfig"
-        :formOption="formOption"
-        v-model="formData.data"
-        :rules="rules"
-        ref="byform"
-      >
+    <el-dialog title="拆分" v-model="dialogVisible" width="800" v-loading="loading">
+      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
+        <template #money>
+          <div style="width: 100%">
+            <el-row :gutter="10">
+              <el-col :span="6">
+                <el-form-item>
+                  <el-select v-model="formData.data.status" style="width: 100%" disabled>
+                    <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-input v-model="formData.data.amount" placeholder="请输入金额" class="input-with-select" disabled>
+                    <template #prepend>
+                      <el-select v-model="formData.data.currency" placeholder="请选择币种" style="width: 100px" disabled>
+                        <el-option v-for="item in accountCurrency" :key="item.value" :label="item.value" :value="item.value" />
+                      </el-select>
+                    </template>
+                  </el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+        </template>
         <template #slot>
           <div style="width: 100%">
             <el-button type="primary" @click="addRow"> 添加 </el-button>
-            <el-form
-              ref="tableForm"
-              :model="formData.data"
-              :rules="rules"
-              label-width="0px"
-              style="margin-top: 15px"
-            >
-              <el-table :data="formData.data.accountDeptRunningWaterDetailList">
-                <el-table-column prop="deptId" label="部门">
-                  <template #default="{ row, $index }">
-                    <el-form-item
-                      :prop="'accountDeptRunningWaterDetailList.' + $index + '.deptId'"
-                      :rules="rules.deptId"
-                      :inline-message="true"
-                    >
-                      <el-cascader
-                        v-model="row.deptId"
-                        :options="deptTreeData"
-                        :props="{
-                          value: 'deptId',
-                        }"
-                        clearable
-                        filterable
-                        style="width: 100%"
-                      />
-                    </el-form-item>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="amount"
-                  label="分拆金额"
-                  
-                >
-                  <template #default="{ row, $index }">
-                    <el-form-item
-                      :prop="
-                        'accountDeptRunningWaterDetailList.' + $index + '.amount'
-                      "
-                      :rules="rules.amount"
-                      :inline-message="true"
-                    >
-                      <el-input
-                        v-model="row.amount"
-                        placeholder="请输入"
-                        type="number"
-                      />
-                    </el-form-item>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="remarks"
-                  label="备注"
-                  
-                >
-                  <template #default="{ row, $index }">
-                    <el-form-item
-                      :prop="
-                        'accountDeptRunningWaterDetailList.' + $index + '.remarks'
-                      "
-                      :rules="rules.remarks"
-                      :inline-message="true"
-                    >
-                      <el-input
-                        v-model="row.remarks"
-                        placeholder="请输入"
-                      />
-                    </el-form-item>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="zip" label="操作" width="100">
-                  <template #default="{ $index }">
-                    <el-button type="primary" link @click="handleRemove($index)"
-                      >删除</el-button
-                    >
-                  </template>
-                </el-table-column>
-              </el-table>
-            </el-form>
+            <br />
+            <el-table :data="formData.data.accountDeptRunningWaterDetailList">
+              <el-table-column prop="deptId" label="部门">
+                <template #default="{ row, $index }">
+                  <el-form-item :prop="'accountDeptRunningWaterDetailList.' + $index + '.deptId'" :rules="rules.deptId" :inline-message="true">
+                    <el-cascader
+                      v-model="row.deptId"
+                      :options="deptTreeData"
+                      :props="{
+                        value: 'deptId',
+                      }"
+                      clearable
+                      filterable
+                      style="width: 100%" />
+                  </el-form-item>
+                </template>
+              </el-table-column>
+              <el-table-column prop="amount" label="分拆金额">
+                <template #default="{ row, $index }">
+                  <el-form-item :prop="'accountDeptRunningWaterDetailList.' + $index + '.amount'" :rules="rules.amount" :inline-message="true">
+                    <el-input-number
+                      onmousewheel="return false;"
+                      v-model="row.amount"
+                      placeholder="请输入金额"
+                      style="width: 100%"
+                      :precision="2"
+                      :controls="false"
+                      :min="0" />
+                  </el-form-item>
+                </template>
+              </el-table-column>
+              <el-table-column prop="remarks" label="备注">
+                <template #default="{ row, $index }">
+                  <el-form-item :prop="'accountDeptRunningWaterDetailList.' + $index + '.remarks'" :rules="rules.remarks" :inline-message="true">
+                    <el-input v-model="row.remarks" placeholder="请输入" />
+                  </el-form-item>
+                </template>
+              </el-table-column>
+              <el-table-column prop="zip" align="center" label="操作" width="80">
+                <template #default="{ $index }">
+                  <el-button type="primary" link @click="handleRemove($index)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
           </div>
         </template>
       </byForm>
       <template #footer>
         <el-button @click="dialogVisible = false" size="large">取 消</el-button>
-        <el-button
-          type="primary"
-          @click="submitForm('byform')"
-          size="large"
-          :loading="submitLoading"
-        >
-          确 定
-        </el-button>
+        <el-button type="primary" @click="submitForm()" size="large" :loading="submitLoading"> 确 定 </el-button>
       </template>
     </el-dialog>
-    <el-dialog
-      title="调整部门"
-      v-model="depModal"
-      width="600"
-      v-loading="loading"
-    >
+    <el-dialog title="调整部门" v-model="depModal" width="600" v-loading="loading">
       <p>部门名称</p>
       <el-cascader
-          v-model="departmentId"
-          :options="deptTreeData"
-          :props="{
-            value: 'deptId',
-          }"
-          clearable
-          filterable
-          style="width: 100%"
-        />
+        v-model="departmentId"
+        :options="deptTreeData"
+        :props="{
+          value: 'deptId',
+        }"
+        clearable
+        filterable
+        style="width: 100%" />
       <template #footer>
         <el-button @click="depModal = false" size="large">取 消</el-button>
-        <el-button
-          type="primary"
-          @click="submitDeptForm(departmentId)"
-          size="large"
-          :loading="submitLoading"
-        >
-          确 定
-        </el-button>
+        <el-button type="primary" @click="submitDeptForm(departmentId)" size="large" :loading="submitLoading"> 确 定 </el-button>
       </template>
     </el-dialog>
   </div>
 </template>
-  
+
 <script setup>
-/* eslint-disable vue/no-unused-components */
-import { ElMessage, ElMessageBox } from "element-plus";
+import { ElMessage } from "element-plus";
 import byTable from "@/components/byTable/index";
 import byForm from "@/components/byForm/index";
-import { computed, defineComponent, ref } from "vue";
-import useUserStore from "@/store/modules/user";
+import { computed, ref } from "vue";
 
 const loading = ref(false);
 const submitLoading = ref(false);
@@ -183,16 +138,24 @@ const sourceList = ref({
   },
 });
 let dialogVisible = ref(false);
-let roomDialogVisible = ref(false);
 let modalType = ref("add");
 let rules = ref({
   type: [{ required: true, message: "请选择类型", trigger: "change" }],
-  contactNumber: [
-    { required: true, message: "请输入联系号码", trigger: "blur" },
-  ],
+  contactNumber: [{ required: true, message: "请输入联系号码", trigger: "blur" }],
+  amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
 });
-import Cookies from 'js-cookie'
-
+const status = ref([
+  {
+    label: "收入",
+    value: "10",
+  },
+  {
+    label: "支出",
+    value: "20",
+  },
+]);
+const accountCurrency = ref([]);
+import Cookies from "js-cookie";
 const { proxy } = getCurrentInstance();
 const selectConfig = [];
 const config = computed(() => {
@@ -212,8 +175,7 @@ const config = computed(() => {
     {
       attrs: {
         label: "交易金额",
-        prop: "amount",
-        slot:'amount'
+        slot: "amount",
       },
     },
     {
@@ -246,7 +208,6 @@ const config = computed(() => {
         width: "200",
         align: "right",
       },
-      // 渲染 el-button，一般用在最后一列。
       renderHTML(row) {
         return [
           {
@@ -258,9 +219,9 @@ const config = computed(() => {
             el: "button",
             click() {
               depModal.value = true;
-              runningWaterId = row.id
-              dtlData.value = row
-              departmentId.value = []
+              runningWaterId = row.id;
+              dtlData.value = row;
+              departmentId.value = [];
             },
           },
           {
@@ -279,7 +240,7 @@ const config = computed(() => {
     },
   ];
 });
-const  dtlData = ref({})
+const dtlData = ref({});
 let formData = reactive({
   data: {
     type: "1",
@@ -292,42 +253,38 @@ const formOption = reactive({
   itemWidth: 100,
   rules: [],
 });
-const byform = ref(null);
-const treeData = ref([]);
+const submit = ref(null);
 const depModal = ref(false);
 let deptTreeData = ref([]);
-let departmentId = ref([])
-let runningWaterId = ''
-const getDept = async (row) => {
+let departmentId = ref([]);
+const getDept = async () => {
   // 部门树
   proxy
     .get("/tenantDept/list", {
       pageNum: 1,
       pageSize: 9999,
-      tenantId: Cookies.get('tenantId')
+      tenantId: Cookies.get("tenantId"),
     })
     .then((message) => {
       recursive(message.data);
       deptTreeData.value = proxy.handleTree(message.data, "corporationId");
     });
 };
-getDept()
-
+getDept();
 const submitDeptForm = async (departmentId) => {
-  
   if (departmentId.length == 0) {
     ElMessage.error("请选择部门");
     return;
   }
   const params = {
     deptId: departmentId[departmentId.length - 1],
-    accountDeptRunningWaterId:  dtlData.value.accountDeptRunningWaterId,
+    accountDeptRunningWaterId: dtlData.value.accountDeptRunningWaterId,
     id: dtlData.value.id,
     amount: dtlData.value.amount,
   };
   proxy
     .post("/accountDeptRunningWaterDetail/add", params)
-    .then((message) => {
+    .then(() => {
       ElMessage.success("调整部门成功");
       depModal.value = false;
       getList();
@@ -336,7 +293,6 @@ const submitDeptForm = async (departmentId) => {
       ElMessage.error(error);
     });
 };
-
 const recursive = (data) => {
   data.map((item) => {
     item.label = item.deptName;
@@ -348,43 +304,48 @@ const recursive = (data) => {
     }
   });
 };
-
 const formConfig = computed(() => {
   return [
     {
-			type: 'select',
-			prop: 'accountManagementId',
-			label: '付款账户',
-			required: true,
+      type: "select",
+      prop: "accountManagementId",
+      label: "付款账户",
+      required: true,
       disabled: true,
-			isLoad: {
-				url: '/accountManagement/page',
-				req: {
-					pageNum: 1,
-					pageSize: 9999,
-				},
-				labelKey: 'name',
-				labelVal: 'id',
-				method: 'post',
-				resUrl: 'rows',
-			},
-		},
+      isLoad: {
+        url: "/accountManagement/page",
+        req: {
+          pageNum: 1,
+          pageSize: 9999,
+        },
+        labelKey: "name",
+        labelVal: "id",
+        method: "post",
+        resUrl: "rows",
+      },
+    },
     {
       type: "date",
       prop: "transactionTime",
       label: "交易时间",
       disabled: true,
     },
+    // {
+    //   type: "selectInput",
+    //   label: "交易金额",
+    //   itemWidth: 60,
+    //   data: accountCurrency.value,
+    //   placeholder: "请输入",
+    //   selectPlaceholder: "币种",
+    //   selectProp: "currency",
+    //   prop: "amount",
+    //   disabled: true,
+    // },
     {
-      type: "selectInput",
+      type: "slot",
+      prop: "money",
+      slotName: "money",
       label: "交易金额",
-      itemWidth: 60,
-      data:[],
-      placeholder: "请输入",
-      selectPlaceholder: "币种",
-      selectProp: "currency",
-      prop: "amount",
-      disabled: true,
     },
     {
       type: "input",
@@ -395,50 +356,47 @@ const formConfig = computed(() => {
       disabled: true,
     },
     {
-      type:'slot',
-      label:'拆分明细',
+      type: "slot",
+      label: "拆分明细",
       slotName: "slot",
-    }
+    },
   ];
 });
-
 const getList = async (req) => {
   sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
   loading.value = true;
-  proxy
-    .post("/accountDeptRunningWater/page", sourceList.value.pagination)
-    .then((message) => {
-      console.log(message)
-      sourceList.value.data = message.rows;
-      sourceList.value.pagination.total = message.total;
-      setTimeout(() => {
-        loading.value = false;
-      }, 200);
-    });
-};
-let dictsData = reactive({})
-proxy
-	.getDict(['payment_status','account_currency'])
-	.then((res) => {
-		dictsData = res
-		formConfig.value[2].data = res.account_currency.map(item => {
-			return {
-				label: item.dictValue,
-				value: item.dictKey,
-			}
-		})
-	})
-
-
-const openModal = () => {
-  dialogVisible.value = true;
-  modalType.value = "add";
-  formData.data = {};
+  proxy.post("/accountDeptRunningWater/page", sourceList.value.pagination).then((message) => {
+    sourceList.value.data = message.rows;
+    sourceList.value.pagination.total = message.total;
+    setTimeout(() => {
+      loading.value = false;
+    }, 200);
+  });
 };
-
-
-const submitForm = () => {
-  byform.value.handleSubmit((valid) => {
+proxy.getDict(["payment_status", "account_currency"]).then((res) => {
+  accountCurrency.value = res.account_currency.map((item) => {
+    return {
+      label: item.dictValue,
+      value: item.dictKey,
+    };
+  });
+});
+const submitForm = async () => {
+  submit.value.handleSubmit(() => {
+    if (!(formData.data.accountDeptRunningWaterDetailList && formData.data.accountDeptRunningWaterDetailList.length > 0)) {
+      return ElMessage("请添加拆分明细!");
+    }
+    let money = 0;
+    for (let i = 0; i < formData.data.accountDeptRunningWaterDetailList.length; i++) {
+      if (formData.data.accountDeptRunningWaterDetailList[i].amount && Number(formData.data.accountDeptRunningWaterDetailList[i].amount) !== 0) {
+        money = Number(parseFloat(Number(money) + Number(formData.data.accountDeptRunningWaterDetailList[i].amount)));
+      } else {
+        return ElMessage("金额不能为0");
+      }
+    }
+    if (Number(money) !== Number(formData.data.amount)) {
+      return ElMessage("分拆总金额需等于交易金额");
+    }
     submitLoading.value = true;
     const params = {
       id: formData.data.id,
@@ -447,40 +405,37 @@ const submitForm = () => {
     };
     params.deptRunningWaterDetailList.map((item) => {
       item.deptId = item.deptId[item.deptId.length - 1];
-    })
-    proxy.post("/accountDeptRunningWaterDetail/add", {
-      ...params
-    }).then(
-      (res) => {
-        ElMessage({
-          message: "拆分成功",
-          type: "success",
-        });
-        dialogVisible.value = false;
-        submitLoading.value = false;
-        getList();
-      },
-      (err) => (submitLoading.value = false)
-    );
+    });
+    proxy
+      .post("/accountDeptRunningWaterDetail/add", {
+        ...params,
+      })
+      .then(
+        () => {
+          ElMessage({
+            message: "拆分成功",
+            type: "success",
+          });
+          dialogVisible.value = false;
+          submitLoading.value = false;
+          getList();
+        },
+        (err) => (submitLoading.value = false)
+      );
   });
 };
-
 const getDtl = (row) => {
   modalType.value = "edit";
   dialogVisible.value = true;
-  proxy
-    .post("/accountDeptRunningWaterDetail/detail", { id: row.id })
-    .then((res) => {
-      console.log(res)
-      res.accountDeptRunningWaterDetailList = res.deptRunningWaterDetailList.map((item) => {
-        item.deptId = [item.deptId];
-        return item;
-      });
-      formData.data = res
-      dialogVisible.value = true;
+  proxy.post("/accountDeptRunningWaterDetail/detail", { id: row.id }).then((res) => {
+    res.accountDeptRunningWaterDetailList = res.deptRunningWaterDetailList.map((item) => {
+      item.deptId = [item.deptId];
+      return item;
     });
+    formData.data = res;
+    dialogVisible.value = true;
+  });
 };
-
 const addRow = () => {
   formData.data.accountDeptRunningWaterDetailList.push({
     remarks: "",
@@ -488,7 +443,6 @@ const addRow = () => {
     deptId: [],
   });
 };
-
 const handleRemove = (index) => {
   formData.data.accountDeptRunningWaterDetailList.splice(index, 1);
   return ElMessage({
@@ -496,20 +450,14 @@ const handleRemove = (index) => {
     type: "success",
   });
 };
-
-const contactInformationType = ref([]);
-
-const getTypeData = (item, type) => {
-  if (item.accountDeptRunningWaterDetailList)
-    return item.accountDeptRunningWaterDetailList.filter((x) => x.type === type) || [];
-};
-
 getList();
-
 </script>
-  
+
 <style lang="scss" scoped>
 .tenant {
   padding: 20px;
 }
-</style>
+::v-deep(.el-input-number .el-input__inner) {
+  text-align: left;
+}
+</style>