对账单

src/views/group/finance/check-bill/index.vue

@@ -0,0 +1,461 @@
+<template>
+  <div>
+    <el-card class="box-card">
+      <byTable
+        :source="sourceList.data"
+        :pagination="sourceList.pagination"
+        :config="config"
+        :loading="loading"
+        :searchConfig="searchConfig"
+        highlight-current-row
+        :action-list="[
+          {
+            text: '登记对账',
+            action: () => clickModal(),
+          },
+        ]"
+        @get-list="getList"
+        @clickReset="clickReset">
+        <template #timePeriod="{ item }">
+          <div>
+            <el-row>
+              <el-col :span="11">{{ item.timePeriodBegin }}</el-col>
+              <el-col :span="2" style="text-align: center">-</el-col>
+              <el-col :span="11">{{ item.timePeriodEnd }}</el-col>
+            </el-row>
+          </div>
+        </template>
+        <template #receiptFileList="{ item }">
+          <div>
+            <el-button type="primary" @click="clickReceiptFile(item)" v-if="item.receiptFileList && item.receiptFileList.length > 0" text>查看</el-button>
+            <el-button type="danger" @click="clickReceiptFile(item)" v-else text>上传</el-button>
+          </div>
+        </template>
+        <template #proofFileList="{ item }">
+          <div>
+            <el-button type="primary" @click="clickProofFile(item)" v-if="item.proofFileList && item.proofFileList.length > 0" text>查看</el-button>
+            <el-button type="danger" @click="clickProofFile(item)" v-else text>上传</el-button>
+          </div>
+        </template>
+      </byTable>
+    </el-card>
+
+    <el-dialog :title="modalType == 'add' ? '登记对账' : '编辑对账'" v-if="openDialog" v-model="openDialog" width="80%">
+      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data">
+        <template #orderIdList>
+          <div style="width: 100%">
+            <div style="margin-bottom: 10px">
+              <el-button type="primary" size="small" @click="clickAddContract()">选择合同</el-button>
+            </div>
+          </div>
+        </template>
+      </byForm>
+      <template #footer>
+        <el-button @click="openDialog = false" size="large">取 消</el-button>
+        <el-button type="primary" @click="submitForm()" size="large" v-preReClick>确 定</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog title="上传对账单" v-if="openReceiptFile" v-model="openReceiptFile" width="600">
+      <el-upload
+        v-model:fileList="formReceiptData.data.fileList"
+        action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
+        :data="uploadReceiptData"
+        multiple
+        :before-upload="uploadReceiptFile"
+        :on-success="handleReceiptSuccess"
+        :on-preview="onPreviewFile">
+        <el-button type="primary">上传</el-button>
+      </el-upload>
+      <template #footer>
+        <el-button @click="openReceiptFile = false" size="large">取 消</el-button>
+        <el-button type="primary" @click="submitReceiptFile()" size="large" v-preReClick>确 定</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog title="上传转账凭证" v-if="openProofFile" v-model="openProofFile" width="600">
+      <el-upload
+        v-model:fileList="formProofData.data.fileList"
+        action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
+        :data="uploadProofData"
+        multiple
+        :before-upload="uploadProofFile"
+        :on-success="handleProofSuccess"
+        :on-preview="onPreviewFile">
+        <el-button type="primary">上传</el-button>
+      </el-upload>
+      <template #footer>
+        <el-button @click="openProofFile = false" size="large">取 消</el-button>
+        <el-button type="primary" @click="submitProofFile()" size="large" v-preReClick>确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import byTable from "@/components/byTable/index";
+import byForm from "@/components/byForm/index";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { ref } from "vue";
+
+const { proxy } = getCurrentInstance();
+const departmentList = ref([{ dictKey: "0", dictValue: "胜德体育" }]);
+const sourceList = ref({
+  data: [],
+  pagination: {
+    total: 0,
+    pageNum: 1,
+    pageSize: 10,
+    code: "",
+    departmentId: "",
+    beginTime: "",
+    endTime: "",
+  },
+});
+const loading = ref(false);
+const searchConfig = computed(() => {
+  return [
+    {
+      type: "input",
+      prop: "code",
+      label: "对账单号",
+    },
+    {
+      type: "select",
+      prop: "departmentId",
+      data: departmentList.value,
+      label: "事业部",
+    },
+    {
+      type: "date",
+      propList: ["beginTime", "endTime"],
+      label: "对账日期",
+    },
+  ];
+});
+const config = computed(() => {
+  return [
+    {
+      attrs: {
+        label: "对账单号",
+        prop: "code",
+      },
+    },
+    {
+      attrs: {
+        label: "创建时间",
+        prop: "createTime",
+        width: 160,
+      },
+    },
+    {
+      attrs: {
+        label: "客户",
+        prop: "departmentName",
+      },
+    },
+    {
+      attrs: {
+        label: "对账金额",
+        prop: "amount",
+        align: "right",
+        width: 180,
+      },
+    },
+    {
+      attrs: {
+        label: "对账时间",
+        slot: "timePeriod",
+        align: "center",
+        width: 260,
+      },
+    },
+    {
+      attrs: {
+        label: "对账单",
+        slot: "receiptFileList",
+        align: "center",
+        width: 120,
+      },
+    },
+    {
+      attrs: {
+        label: "转账凭证",
+        slot: "proofFileList",
+        align: "center",
+        width: 120,
+      },
+    },
+    {
+      attrs: {
+        label: "操作",
+        width: 180,
+        align: "center",
+        fixed: "right",
+      },
+      renderHTML(row) {
+        return [
+          {
+            attrs: {
+              label: "下载",
+              type: "primary",
+              text: true,
+            },
+            el: "button",
+            click() {
+              clickUpdate(row);
+            },
+          },
+          {
+            attrs: {
+              label: "编辑",
+              type: "primary",
+              text: true,
+            },
+            el: "button",
+            click() {
+              clickUpdate(row);
+            },
+          },
+          {
+            attrs: {
+              label: "删除",
+              type: "danger",
+              text: true,
+            },
+            el: "button",
+            click() {
+              clickDelete(row);
+            },
+          },
+        ];
+      },
+    },
+  ];
+});
+const getDemandData = () => {
+  proxy.post("/department/page", { pageNum: 1, pageSize: 999 }).then((res) => {
+    if (res.rows && res.rows.length > 0) {
+      departmentList.value = departmentList.value.concat(
+        res.rows.map((item) => {
+          return {
+            dictKey: item.id,
+            dictValue: item.name,
+          };
+        })
+      );
+    }
+  });
+};
+getDemandData();
+const getList = async (req, status) => {
+  if (status) {
+    sourceList.value.pagination = {
+      pageNum: sourceList.value.pagination.pageNum,
+      pageSize: sourceList.value.pagination.pageSize,
+    };
+  } else {
+    sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
+  }
+  loading.value = true;
+  proxy.post("/statementOfAccount/page", sourceList.value.pagination).then((res) => {
+    sourceList.value.data = res.rows;
+    sourceList.value.pagination.total = res.total;
+    setTimeout(() => {
+      loading.value = false;
+    }, 200);
+  });
+};
+getList();
+const clickReset = () => {
+  getList("", true);
+};
+const modalType = ref("add");
+const openDialog = ref(false);
+const formOption = reactive({
+  inline: true,
+  labelWidth: "120px",
+  itemWidth: 100,
+  rules: [],
+  labelPosition: "right",
+});
+const formData = reactive({
+  data: {},
+});
+const formConfig = computed(() => {
+  return [
+    {
+      type: "title",
+      title: "对账合同",
+      label: "",
+    },
+    {
+      type: "slot",
+      slotName: "orderIdList",
+      label: "",
+    },
+  ];
+});
+const clickModal = () => {
+  modalType.value = "add";
+  formData.data = {
+    departmentId: "",
+    amount: "",
+    orderIdList: [],
+  };
+  openDialog.value = true;
+};
+const submitForm = () => {
+  // submit.value.handleSubmit(() => {
+  //   proxy.post("/statementOfAccount/" + modalType.value, formData.data).then(() => {
+  //     ElMessage({
+  //       message: modalType.value == "add" ? "添加成功" : "编辑成功",
+  //       type: "success",
+  //     });
+  //     openDialog.value = false;
+  //     getList();
+  //   });
+  // });
+};
+const clickUpdate = (row) => {
+  modalType.value = "edit";
+  proxy.post("/statementOfAccount/detail", { id: row.id }).then((res) => {
+    formData.data = res;
+    openDialog.value = true;
+  });
+};
+const clickDelete = (row) => {
+  ElMessageBox.confirm("你是否确认此操作", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      proxy.post("/statementOfAccount/delete", { id: row.id }).then(() => {
+        ElMessage({ message: "删除成功", type: "success" });
+        getList();
+      });
+    })
+    .catch(() => {});
+};
+const openReceiptFile = ref(false);
+const formReceiptData = reactive({
+  data: {
+    id: "",
+    fileList: [],
+  },
+});
+const clickReceiptFile = (row) => {
+  if (row.receiptFileList && row.receiptFileList.length > 0) {
+    formReceiptData.data = {
+      id: row.id,
+      fileList: proxy.deepClone(
+        row.receiptFileList.map((item) => {
+          return {
+            raw: item,
+            name: item.fileName,
+            url: item.fileUrl,
+          };
+        })
+      ),
+    };
+  } else {
+    formReceiptData.data = {
+      id: row.id,
+      fileList: [],
+    };
+  }
+  openReceiptFile.value = true;
+};
+const uploadReceiptData = ref({});
+const uploadReceiptFile = async (file) => {
+  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
+  uploadReceiptData.value = res.uploadBody;
+  file.id = res.id;
+  file.fileName = res.fileName;
+  file.fileUrl = res.fileUrl;
+  file.uploadState = true;
+  return true;
+};
+const handleReceiptSuccess = (any, UploadFile) => {
+  UploadFile.raw.uploadState = false;
+};
+const onPreviewFile = (file) => {
+  window.open(file.raw.fileUrl, "_blank");
+};
+const submitReceiptFile = () => {
+  if (formReceiptData.data.fileList && formReceiptData.data.fileList.length > 0) {
+    for (let i = 0; i < formReceiptData.data.fileList.length; i++) {
+      if (formReceiptData.data.fileList[i].raw.uploadState) {
+        return ElMessage("文件上传中,请稍后提交");
+      }
+    }
+  }
+  proxy.post("/statementOfAccount/editReceiptFile", formReceiptData.data).then(() => {
+    openReceiptFile.value = false;
+    getList();
+  });
+};
+const openProofFile = ref(false);
+const formProofData = reactive({
+  data: {
+    id: "",
+    fileList: [],
+  },
+});
+const clickProofFile = (row) => {
+  if (row.proofFileList && row.proofFileList.length > 0) {
+    formProofData.data = {
+      id: row.id,
+      fileList: proxy.deepClone(
+        row.proofFileList.map((item) => {
+          return {
+            raw: item,
+            name: item.fileName,
+            url: item.fileUrl,
+          };
+        })
+      ),
+    };
+  } else {
+    formProofData.data = {
+      id: row.id,
+      fileList: [],
+    };
+  }
+  openProofFile.value = true;
+};
+const uploadProofData = ref({});
+const uploadProofFile = async (file) => {
+  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
+  uploadProofData.value = res.uploadBody;
+  file.id = res.id;
+  file.fileName = res.fileName;
+  file.fileUrl = res.fileUrl;
+  file.uploadState = true;
+  return true;
+};
+const handleProofSuccess = (any, UploadFile) => {
+  UploadFile.raw.uploadState = false;
+};
+const submitProofFile = () => {
+  if (formProofData.data.fileList && formProofData.data.fileList.length > 0) {
+    for (let i = 0; i < formProofData.data.fileList.length; i++) {
+      if (formProofData.data.fileList[i].raw.uploadState) {
+        return ElMessage("文件上传中,请稍后提交");
+      }
+    }
+  }
+  proxy.post("/statementOfAccount/editProofFile", formProofData.data).then(() => {
+    openProofFile.value = false;
+    getList();
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-dialog) {
+  margin-top: 10px !important;
+  margin-bottom: 10px !important;
+}
+</style>