货款账单

src/components/process/PurchasePayment.vue

@@ -1,31 +1,14 @@
 <template>
   <div style="width: 100%; padding: 0px 15px">
-    <byForm
-      :formConfig="formConfig"
-      :formOption="formOption"
-      v-model="formData.data"
-      :rules="rules"
-      ref="submit"
-    >
+    <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
       <template #deadline>
         <div>
-          <el-date-picker
-            v-model="formData.data.deadline"
-            type="date"
-            placeholder="请选择付款期限"
-            value-format="YYYY-MM-DD"
-          />
+          <el-date-picker v-model="formData.data.deadline" type="date" placeholder="请选择付款期限" value-format="YYYY-MM-DD" />
         </div>
       </template>
       <template #receiptsNum>
         <div>
-          <el-input-number
-            v-model="formData.data.receiptsNum"
-            placeholder="请输入单据数量"
-            :min="0"
-            :precision="0"
-            :controls="false"
-          />
+          <el-input-number v-model="formData.data.receiptsNum" placeholder="请输入单据数量" :min="0" :precision="0" :controls="false" />
         </div>
       </template>
       <template #fileList>
@@ -36,8 +19,7 @@
             multiple
             :data="uploadData"
             :before-upload="uploadFile"
-            :on-preview="onPreviewFile"
-          >
+            :on-preview="onPreviewFile">
             <el-button>选择</el-button>
           </el-upload>
         </div>
@@ -45,54 +27,25 @@
       <template #payDetailList>
         <div style="width: 100%">
           <el-button type="primary" @click="clickAdd()">添加行</el-button>
-          <el-table
-            :data="formData.data.payDetailList"
-            style="width: 100%; margin-top: 16px"
-          >
+          <el-table :data="formData.data.payDetailList" style="width: 100%; margin-top: 16px">
             <el-table-column label="采购合同" width="220">
               <template #default="{ row, $index }">
                 <div style="width: 100%">
-                  <el-form-item
-                    :prop="'payDetailList.' + $index + '.purchaseId'"
-                    :rules="rules.purchaseId"
-                    :inline-message="true"
-                  >
-                    <el-select
-                      v-model="row.purchaseId"
-                      placeholder="请选择采购合同"
-                      style="width: 100%"
-                      @change="changePurchaseId(row)"
-                    >
-                      <el-option
-                        v-for="item in contractList"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      />
+                  <el-form-item :prop="'payDetailList.' + $index + '.purchaseId'" :rules="rules.purchaseId" :inline-message="true">
+                    <el-select v-model="row.purchaseId" placeholder="请选择采购合同" style="width: 100%" @change="changePurchaseId(row)">
+                      <el-option v-for="item in contractList" :key="item.value" :label="item.label" :value="item.value" />
                     </el-select>
                   </el-form-item>
                 </div>
               </template>
             </el-table-column>
             <el-table-column prop="amount" label="合同金额" width="140" />
-            <el-table-column
-              prop="sumPayMoney"
-              label="已收发票金额"
-              width="140"
-            />
+            <el-table-column prop="sumPayMoney" label="已收发票金额" width="140" />
             <el-table-column label="款项说明">
               <template #default="{ row, $index }">
                 <div style="width: 100%">
-                  <el-form-item
-                    :prop="'payDetailList.' + $index + '.remark'"
-                    :rules="rules.remark"
-                    :inline-message="true"
-                  >
-                    <el-input
-                      v-model="row.remark"
-                      placeholder="请输入款项说明"
-                      style="width: 100%"
-                    />
+                  <el-form-item :prop="'payDetailList.' + $index + '.remark'" :rules="rules.remark" :inline-message="true">
+                    <el-input v-model="row.remark" placeholder="请输入款项说明" style="width: 100%" />
                   </el-form-item>
                 </div>
               </template>
@@ -100,11 +53,7 @@
             <el-table-column label="付款金额" width="180">
               <template #default="{ row, $index }">
                 <div style="width: 100%">
-                  <el-form-item
-                    :prop="'payDetailList.' + $index + '.money'"
-                    :rules="rules.money"
-                    :inline-message="true"
-                  >
+                  <el-form-item :prop="'payDetailList.' + $index + '.money'" :rules="rules.money" :inline-message="true">
                     <el-input-number
                       v-model="row.money"
                       placeholder="请输入金额"
@@ -113,17 +62,14 @@
                       :controls="false"
                       :min="0"
                       :disabled="row.id"
-                      @change="changeMoney()"
-                    />
+                      @change="changeMoney()" />
                   </el-form-item>
                 </div>
               </template>
             </el-table-column>
             <el-table-column label="操作" width="80">
               <template #default="{ row, $index }">
-                <el-button type="primary" link @click="handleRemove($index)"
-                  >删除</el-button
-                >
+                <el-button type="primary" link @click="handleRemove($index)">删除</el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -284,16 +230,10 @@ const formConfig = computed(() => {
 });
 const rules = ref({
   supplyId: [{ required: true, message: "请选择供应商", trigger: "change" }],
-  invoiceType: [
-    { required: true, message: "请选择发票类型", trigger: "change" },
-  ],
+  invoiceType: [{ required: true, message: "请选择发票类型", trigger: "change" }],
   payType: [{ required: true, message: "请选择付款方式", trigger: "change" }],
-  accountManagementId: [
-    { required: true, message: "请选择付款账户", trigger: "change" },
-  ],
-  purchaseId: [
-    { required: true, message: "请选择采购合同", trigger: "change" },
-  ],
+  accountManagementId: [{ required: true, message: "请选择付款账户", trigger: "change" }],
+  purchaseId: [{ required: true, message: "请选择采购合同", trigger: "change" }],
   money: [{ required: true, message: "请输入付款金额", trigger: "blur" }],
 });
 const fileList = ref([]);
@@ -333,32 +273,28 @@ const getDict = () => {
         });
       }
     });
-  proxy
-    .post("/supplierInfo/page", { pageNum: 1, pageSize: 999 })
-    .then((res) => {
-      if (res.rows && res.rows.length > 0) {
-        supplierList.value = res.rows.map((item) => {
-          return {
-            label: item.name,
-            value: item.id,
-          };
-        });
-      }
-    });
-  proxy
-    .post("/accountManagement/page", { pageNum: 1, pageSize: 999 })
-    .then((res) => {
-      accountList.value = res.rows.map((item) => {
+  proxy.post("/supplierInfo/page", { pageNum: 1, pageSize: 999 }).then((res) => {
+    if (res.rows && res.rows.length > 0) {
+      supplierList.value = res.rows.map((item) => {
         return {
-          bankName: item.name,
-          accountOpening: item.accountOpening,
-          openingBank: item.openingBank,
-          interbankNumber: item.interbankNumber,
-          label: item.alias,
+          label: item.name,
           value: item.id,
         };
       });
+    }
+  });
+  proxy.post("/accountManagement/page", { pageNum: 1, pageSize: 999 }).then((res) => {
+    accountList.value = res.rows.map((item) => {
+      return {
+        bankName: item.name,
+        accountOpening: item.accountOpening,
+        openingBank: item.openingBank,
+        interbankNumber: item.interbankNumber,
+        label: item.alias,
+        value: item.id,
+      };
     });
+  });
 };
 getDict();
 const uploadFile = async (file) => {
@@ -372,9 +308,9 @@ const uploadFile = async (file) => {
 const onPreviewFile = (file) => {
   window.open(file.raw.fileUrl, "_blank");
 };
-const changeSupply = (val) => {
+const changeSupply = async (val) => {
   if (val) {
-    proxy.get("/purchase/getListBySupplyId", { supplyId: val }).then((res) => {
+    await proxy.get("/purchase/getListBySupplyId", { supplyId: val }).then((res) => {
       if (res.data && res.data.length > 0) {
         contractList.value = res.data.map((item) => {
           return {
@@ -400,9 +336,7 @@ const clickAdd = () => {
       remark: "",
     });
   } else {
-    formData.data.payDetailList = [
-      { purchaseId: "", money: undefined, remark: "" },
-    ];
+    formData.data.payDetailList = [{ purchaseId: "", money: undefined, remark: "" }];
   }
 };
 const handleRemove = (index) => {
@@ -433,9 +367,7 @@ const changeMoney = () => {
   let money = 0;
   for (let i = 0; i < formData.data.payDetailList.length; i++) {
     if (formData.data.payDetailList[i].money) {
-      money = parseFloat(
-        Number(money) + Number(formData.data.payDetailList[i].money)
-      ).toFixed(2);
+      money = parseFloat(Number(money) + Number(formData.data.payDetailList[i].money)).toFixed(2);
     }
   }
   formData.data.amount = money;
@@ -460,6 +392,38 @@ const handleSubmit = async () => {
   }
   return status;
 };
+// 接收父组件的传值
+const props = defineProps({
+  queryData: Object,
+});
+onMounted(async () => {
+  if (props.queryData.supplyId) {
+    formData.data.supplyId = props.queryData.supplyId;
+    await changeSupply(formData.data.supplyId);
+    if (props.queryData.ids) {
+      let ids = props.queryData.ids.split(",");
+      if (ids && ids.length > 0) {
+        for (let i = 0; i < ids.length; i++) {
+          if (contractList.value && contractList.value.length > 0) {
+            let data = contractList.value.filter((item) => item.value === ids[i]);
+            if (data && data.length > 0) {
+              if (formData.data.payDetailList && formData.data.payDetailList.length > 0) {
+                formData.data.payDetailList.push({
+                  purchaseId: ids[i],
+                  money: undefined,
+                  remark: "",
+                });
+              } else {
+                formData.data.payDetailList = [{ purchaseId: ids[i], money: undefined, remark: "" }];
+              }
+              changePurchaseId({ purchaseId: ids[i] });
+            }
+          }
+        }
+      }
+    }
+  }
+});
 // 向父组件暴露
 defineExpose({
   submitData: formData.data,

src/views/purchaseManage/purchasePayment/paymentBill/index.vue

@@ -0,0 +1,262 @@
+<template>
+  <div class="tenant">
+    <byTable
+      :source="sourceList.data"
+      :pagination="sourceList.pagination"
+      :config="config"
+      :loading="loading"
+      :selectConfig="selectConfig"
+      highlight-current-row
+      :table-events="{
+        select: selectRow,
+        // 'select-all': selectRow,
+      }"
+      :action-list="[
+        {
+          text: '合并付款',
+          disabled: selectData.length === 0,
+          action: () => start(),
+        },
+      ]"
+      @get-list="getList">
+      <template #amount="{ item }">
+        <div style="width: 100%">
+          <span style="padding-right: 4px">{{ item.currency }}</span>
+          <span>{{ moneyFormat(item.amount, 2) }}</span>
+        </div>
+      </template>
+      <template #arrivalAmount="{ item }">
+        <div style="width: 100%">
+          <span style="padding-right: 4px">{{ item.currency }}</span>
+          <span>{{ moneyFormat(item.arrivalAmount, 2) }}</span>
+        </div>
+      </template>
+      <template #paidAmount="{ item }">
+        <div style="width: 100%">
+          <span style="padding-right: 4px">{{ item.currency }}</span>
+          <span>{{ moneyFormat(item.paidAmount, 2) }}</span>
+        </div>
+      </template>
+      <template #invoiceAmount="{ item }">
+        <div style="width: 100%">
+          <span style="padding-right: 4px">{{ item.currency }}</span>
+          <span>{{ moneyFormat(item.invoiceAmount, 2) }}</span>
+        </div>
+      </template>
+    </byTable>
+  </div>
+</template>
+
+<script setup>
+import byTable from "@/components/byTable/index";
+import { computed, ref } from "vue";
+import { ElMessage } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const loading = ref(false);
+const supplierList = ref([]);
+const payStatus = ref([
+  {
+    label: "未付款",
+    value: 0,
+  },
+  {
+    label: "部分付款",
+    value: 10,
+  },
+  {
+    label: "已付款",
+    value: 20,
+  },
+]);
+const sourceList = ref({
+  data: [],
+  pagination: {
+    total: 0,
+    pageNum: 1,
+    pageSize: 10,
+    keyword: "",
+    supplyId: "",
+    payStatus: "",
+  },
+});
+const selectConfig = computed(() => {
+  return [
+    {
+      label: "供应商",
+      prop: "supplyId",
+      data: supplierList.value,
+    },
+    {
+      label: "付款状态",
+      prop: "type",
+      data: payStatus.value,
+    },
+  ];
+});
+const config = computed(() => {
+  return [
+    {
+      type: "selection",
+      attrs: {
+        checkAtt: "isCheck",
+      },
+    },
+    {
+      attrs: {
+        label: "采购合同号",
+        prop: "code",
+        width: 200,
+      },
+    },
+    {
+      attrs: {
+        label: "供应商名称",
+        prop: "supplyName",
+        "min-width": 200,
+      },
+    },
+    {
+      attrs: {
+        label: "合同金额",
+        slot: "amount",
+        width: 140,
+      },
+    },
+    {
+      attrs: {
+        label: "到货金额",
+        slot: "arrivalAmount",
+        width: 140,
+      },
+    },
+    {
+      attrs: {
+        label: "已付款",
+        slot: "paidAmount",
+        width: 140,
+      },
+    },
+    {
+      attrs: {
+        label: "已收发票",
+        slot: "invoiceAmount",
+        width: 140,
+      },
+    },
+    {
+      attrs: {
+        label: "付款状态",
+        prop: "payStatus",
+        width: 120,
+      },
+      render(type) {
+        return proxy.dictValueLabel(type, payStatus.value);
+      },
+    },
+    {
+      attrs: {
+        label: "操作",
+        width: 120,
+        align: "center",
+        fixed: "right",
+      },
+      renderHTML(row) {
+        return [
+          {
+            attrs: {
+              label: "申请付款",
+              type: "primary",
+              text: true,
+            },
+            el: "button",
+            click() {
+              selectData.value = [row];
+              start();
+            },
+          },
+        ];
+      },
+    },
+  ];
+});
+const getDict = () => {
+  proxy.post("/supplierInfo/page", { pageNum: 1, pageSize: 999 }).then((res) => {
+    if (res.rows && res.rows.length > 0) {
+      supplierList.value = res.rows.map((item) => {
+        return {
+          label: item.name,
+          value: item.id,
+        };
+      });
+    }
+  });
+};
+const getList = async (req) => {
+  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
+  loading.value = true;
+  proxy.post("/purchase/paymentBill", sourceList.value.pagination).then((message) => {
+    message.rows.forEach((x) => {
+      x.isCheck = true;
+    });
+    sourceList.value.data = message.rows;
+    sourceList.value.pagination.total = message.total;
+    setTimeout(() => {
+      loading.value = false;
+    }, 200);
+  });
+};
+getDict();
+getList();
+const selectData = ref([]);
+const selectRow = (data) => {
+  selectData.value = data;
+};
+const start = () => {
+  if (selectData.value.length > 0) {
+    let ids = selectData.value.map((x) => x.id).join();
+    proxy.$router.replace({
+      path: "/platform_manage/process/processApproval",
+      query: {
+        flowKey: "pay_flow",
+        flowName: "采购付款申请",
+        supplyId: selectData.value[0].supplyId,
+        ids,
+        random: proxy.random(),
+      },
+    });
+  } else {
+    return ElMessage({
+      message: "请勾选数据！",
+      type: "info",
+    });
+  }
+};
+
+watch(selectData, (newVal) => {
+  if (newVal.length == 0) {
+    sourceList.value.data.forEach((x) => {
+      x.isCheck = true;
+    });
+  } else if (newVal.length == 1) {
+    const current = newVal[0];
+    sourceList.value.data.forEach((x) => {
+      if (x.supplyId !== current.supplyId) {
+        x.isCheck = false;
+      }
+    });
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.tenant {
+  margin: 20px;
+}
+::v-deep(.el-input-number .el-input__inner) {
+  text-align: left;
+}
+:deep(.el-table__header-wrapper .el-checkbox) {
+  display: none;
+}
+</style>