打款页面增加“冲销”功能 打款增加上传附件

src/components/byTable/index.vue

@@ -499,7 +499,6 @@ export default defineComponent({
     //下拉搜索相关
 
     const searchItemSelct = (item, i, index) => {
-      console.log(item, i, index, "www");
       if (item == "all") {
         i.label = { ...props.selectConfig[index] }.labelCopy;
         proxy.$emit(
@@ -527,16 +526,6 @@ export default defineComponent({
       }
     };
     const hocElTable = ref();
-    // const sortableInit = () => {
-    // 	console.log(hocElTable)
-    // 	const el = hocElTable.value.$el.querySelector('.el-table__body tbody')
-    // 	Sortable.create(el, {
-    // 		ghostClass: "sortableActive",
-    // 		onEnd(evt) {
-    // 			console.log(evt,proxy.source)
-    // 		}
-    // 	})
-    // }
 
     return {
       getParent,

src/utils/util.js

@@ -1,8 +1,5 @@
 import moment from "moment";
-import {
-  post,
-  get
-} from "@/utils/request";
+import { post, get } from "@/utils/request";
 import Cookies from "js-cookie";
 import html2Canvas from "html2canvas";
 import JsPDF from "jspdf";
@@ -38,11 +35,6 @@ export function getDict(key) {
     let dictObj = {};
     let arr = {};
     let num = 0;
-    // if (!sessionStorage.getItem("dict")) {
-    //   sessionStorage.setItem("dict", JSON.stringify(dictObj));
-    // } else {
-    //   dictObj = JSON.parse(sessionStorage.getItem("dict"));
-    // }
     for (let i = 0; i < key.length; i++) {
       const element = key[i];
       if (dictObj[element]) {
@@ -62,7 +54,6 @@ export function getDict(key) {
           arr[element] = res.rows;
           sessionStorage.setItem("dict", JSON.stringify(dictObj));
           num++;
-          console.log(num);
           if (num === key.length) {
             resolve(arr);
           }
@@ -360,14 +351,14 @@ export function timeInterval(smallTime, largeTime) {
       days: days,
       hours: hours,
       minutes: minutes,
-      seconds: seconds
+      seconds: seconds,
     };
   }
   return {
     days: 0,
     hours: 0,
     minutes: 0,
-    seconds: 0
+    seconds: 0,
   };
 }
 
@@ -405,8 +396,7 @@ export function toDx(n) {
     case "9":
       return "玖";
   }
-};
-
+}
 
 // 金额转大写
 export function NumberToChinese(m) {
@@ -434,4 +424,4 @@ export function NumberToChinese(m) {
   }
   result += result.charAt(result.length - 1) == "元" ? "整" : "";
   return result;
-};
+}

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

@@ -9,7 +9,6 @@
         highlight-current-row
         :selectConfig="selectConfig"
         :table-events="{
-          //element talbe事件都能传
           select: select,
         }"
         :action-list="[]"
@@ -22,30 +21,30 @@
         </template>
       </byTable>
     </div>
-    <el-dialog :title="modalType == 'add' ? '打款' : '打款'" v-if="dialogVisible" v-model="dialogVisible" width="500" v-loading="loading">
+    <el-dialog title="打款" v-if="dialogVisible" v-model="dialogVisible" width="500" v-loading="loading">
       <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="byform">
-        <template #productPic>
-          <div>
+        <template #fileSlot>
+          <div style="width: 100%">
             <el-upload
               v-model:fileList="fileList"
               action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
               :data="uploadData"
-              list-type="picture-card"
-              :on-remove="handleRemove"
-              :before-upload="handleBeforeUpload">
-              <el-icon><Plus /></el-icon>
+              multiple
+              :before-upload="uploadFile"
+              :on-preview="onPreviewFile">
+              <el-button type="primary">文件上传</el-button>
             </el-upload>
           </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-if="openSearch" v-model="openSearch" width="600" :before-close="cancelSearch">
-      <byForm :formConfig="formSearchConfig" :formOption="formOption" v-model="sourceList.pagination">
+      <byForm :formConfig="formSearchConfig" :formOption="formOptionTwo" v-model="sourceList.pagination">
         <template #departmentId>
           <div>
             <el-tree-select
@@ -147,11 +146,30 @@
         <el-button type="primary" @click="clickDownload()" size="large">下载PDF</el-button>
       </template>
     </el-dialog>
+
+    <el-dialog title="冲销" v-if="openCancelledOut" v-model="openCancelledOut" width="500">
+      <byForm
+        :formConfig="formCancelledOutConfig"
+        :formOption="formOptionTwo"
+        v-model="formCancelledOutData.data"
+        :rules="rulesCancelledOut"
+        ref="cancelledOut">
+        <template #detail>
+          <div style="width: 100%">
+            <el-button type="primary" style="margin-left: -15px" @click="clickDetail" text>查看详情</el-button>
+          </div>
+        </template>
+      </byForm>
+      <template #footer>
+        <el-button @click="openCancelledOut = false" size="large">取 消</el-button>
+        <el-button type="danger" @click="submitCancelledOutForm()" size="large" :loading="submitCancelledOutLoading">冲 销</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { ElMessage } from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
 import byTable from "@/components/byTable/index";
 import byForm from "@/components/byForm/index";
 import { computed, ref } from "vue";
@@ -185,7 +203,6 @@ const sourceList = ref({
   },
 });
 let dialogVisible = ref(false);
-let modalType = ref("add");
 let rules = ref({
   productClassifyId: [{ required: true, message: "请选择物料分类", trigger: "change" }],
   type: [{ required: true, message: "请选择物料类型", trigger: "change" }],
@@ -292,6 +309,43 @@ const config = computed(() => {
       },
       renderHTML(row) {
         return [
+          row.status == "20"
+            ? {
+                attrs: {
+                  label: "打款",
+                  type: "primary",
+                  text: true,
+                },
+                el: "button",
+                click() {
+                  formOption.disabled = false;
+                  getDtl(row);
+                },
+              }
+            : {
+                attrs: {
+                  label: "冲销",
+                  type: "danger",
+                  text: true,
+                },
+                el: "button",
+                click(item) {
+                  ElMessageBox.confirm("冲销后，已生成的资金流水数据会被删除，且关联的数据状态会由“已打款”退回至“未打款”，并支持重新打款。是否继续?", "提示", {
+                    confirmButtonText: "继续",
+                    cancelButtonText: "取消",
+                    type: "warning",
+                  })
+                    .then(() => {
+                      rowData.value = item;
+                      formCancelledOutData.data = {
+                        accountPaymentId: item.id,
+                        remark: "",
+                      };
+                      openCancelledOut.value = true;
+                    })
+                    .catch(() => {});
+                },
+              },
           {
             attrs: {
               label: "打印",
@@ -305,18 +359,6 @@ const config = computed(() => {
           },
           {
             attrs: {
-              label: "打款",
-              type: "primary",
-              text: true,
-            },
-            el: "button",
-            click() {
-              formOption.disabled = false;
-              getDtl(row);
-            },
-          },
-          {
-            attrs: {
               label: "查看",
               type: "primary",
               text: true,
@@ -334,7 +376,9 @@ const config = computed(() => {
 });
 
 let formData = reactive({
-  data: {},
+  data: {
+    fileList: [],
+  },
 });
 const formOption = reactive({
   inline: true,
@@ -343,6 +387,13 @@ const formOption = reactive({
   rules: [],
   disabled: false,
 });
+const formOptionTwo = reactive({
+  inline: true,
+  labelWidth: 100,
+  itemWidth: 100,
+  rules: [],
+  disabled: false,
+});
 const byform = ref(null);
 const treeListData = ref([]);
 const formConfig = computed(() => {
@@ -436,8 +487,27 @@ const formConfig = computed(() => {
       label: "摘要",
       itemType: "textarea",
     },
+    {
+      type: "slot",
+      label: "上传附件",
+      prop: "fileList",
+      slotName: "fileSlot",
+    },
   ];
 });
+const fileList = ref([]);
+const uploadData = ref({});
+const uploadFile = async (file) => {
+  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
+  uploadData.value = res.uploadBody;
+  file.id = res.id;
+  file.fileName = res.fileName;
+  file.fileUrl = res.fileUrl;
+  return true;
+};
+const onPreviewFile = (file) => {
+  window.open(file.raw.fileUrl, "_blank");
+};
 const recursive = (data) => {
   data.map((item) => {
     item.label = item.deptName;
@@ -538,8 +608,6 @@ const getList = async (req) => {
     }, 200);
   });
 };
-const uploadData = ref({});
-const fileList = ref([]);
 const paymentType = ref([
   {
     label: "已打款",
@@ -550,19 +618,28 @@ const paymentType = ref([
     value: 20,
   },
 ]);
-const fileListCopy = ref([]);
 const selection = ref({
   data: [],
 });
 const select = (_selection, row) => {
   selection.value.data = _selection;
 };
-
 const submitForm = () => {
-  byform.value.handleSubmit((valid) => {
+  byform.value.handleSubmit(() => {
+    if (fileList.value && fileList.value.length > 0) {
+      formData.data.fileList = fileList.value.map((item) => {
+        return {
+          id: item.raw.id,
+          fileName: item.raw.fileName,
+          fileUrl: item.raw.fileUrl,
+        };
+      });
+    } else {
+      formData.data.fileList = [];
+    }
     submitLoading.value = true;
     proxy.post("/accountPayment/add", formData.data).then(
-      (res) => {
+      () => {
         ElMessage({
           message: "打款成功",
           type: "success",
@@ -571,13 +648,12 @@ const submitForm = () => {
         submitLoading.value = false;
         getList();
       },
-      (err) => {
+      () => {
         submitLoading.value = false;
       }
     );
   });
 };
-
 const getTreeList = () => {
   proxy
     .post("/productClassify/tree", {
@@ -590,35 +666,29 @@ const getTreeList = () => {
       formConfig.value[0].data = message;
     });
 };
-
 const getDtl = (row) => {
-  modalType.value = "edit";
   proxy.post("/accountPayment/detail", { id: row.id }).then((res) => {
     formData.data = res;
     formData.data.expensesTime = moment().format("yyyy-MM-DD HH:mm:ss");
+    proxy.post("/fileInfo/getList", { businessIdList: [row.id] }).then((fileObj) => {
+      formData.data.fileList = fileObj[row.id] || [];
+      if (formData.data.fileList && formData.data.fileList.length > 0) {
+        fileList.value = formData.data.fileList.map((item) => {
+          return {
+            raw: item,
+            name: item.fileName,
+            url: item.fileUrl,
+          };
+        });
+      } else {
+        fileList.value = [];
+      }
+    });
     dialogVisible.value = true;
   });
 };
 getTreeList();
 getList();
-const handleBeforeUpload = async (file) => {
-  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
-  uploadData.value = res.uploadBody;
-  fileListCopy.value.push({
-    id: res.id,
-    fileName: res.fileName,
-    path: res.fileUrl,
-    url: res.fileUrl,
-    uid: file.uid,
-  });
-};
-const handleRemove = (file) => {
-  const index = fileListCopy.value.findIndex((x) => x.uid === file.uid || x.id === file.id);
-  fileListCopy.value.splice(index, 1);
-};
-const handleClickFile = (file) => {
-  window.open(file.fileUrl, "_blank");
-};
 const openSearch = ref(false);
 const formSearchConfig = computed(() => {
   return [
@@ -717,7 +787,7 @@ const submitSearch = () => {
     return ElMessage("开始时间不能大于结束时间");
   }
   openSearch.value = false;
-  sourceList.value.pagination.keyword = '';
+  sourceList.value.pagination.keyword = "";
   sourceList.value.pagination.pageNum = 1;
   getList();
 };
@@ -737,6 +807,53 @@ const clickDownload = () => {
     proxy.getPdf("采购付款PDF文件");
   }
 };
+let formCancelledOutData = reactive({
+  data: {},
+});
+const cancelledOut = ref(null);
+const formCancelledOutConfig = computed(() => {
+  return [
+    {
+      type: "slot",
+      label: "打款明细",
+      slotName: "detail",
+    },
+    {
+      type: "input",
+      itemType: "textarea",
+      prop: "remark",
+      label: "冲销原因",
+    },
+  ];
+});
+let rulesCancelledOut = ref({
+  remark: [{ required: true, message: "请输入冲销原因", trigger: "blur" }],
+});
+const openCancelledOut = ref(false);
+const submitCancelledOutLoading = ref(false);
+const submitCancelledOutForm = () => {
+  cancelledOut.value.handleSubmit(() => {
+    submitCancelledOutLoading.value = true;
+    proxy.post("/writeOffRecords/add", formCancelledOutData.data).then(
+      () => {
+        ElMessage({
+          message: "冲销完成",
+          type: "success",
+        });
+        openCancelledOut.value = false;
+        submitCancelledOutLoading.value = false;
+        getList();
+      },
+      () => {
+        submitCancelledOutLoading.value = false;
+      }
+    );
+  });
+};
+const clickDetail = () => {
+  formOption.disabled = true;
+  getDtl(rowData.value);
+};
 </script>
 
 <style lang="scss" scoped>