详情页面修改

src/views/accounting/other/index.vue

@@ -324,7 +324,7 @@ export default {
       rules: {},
       fileList: [], // 文件列表
       uploadUrl:
-        process.env.VUE_APP_BASE_API + "/admin-api//accounting/other/upload", // 上传地址地址
+        process.env.VUE_APP_BASE_API + "/admin-api/accounting/other/upload", // 上传地址地址
       headers: {
         Authorization: "Bearer " + getAccessToken(),
         "tenant-id": getTenantId(),

src/views/accounting/voucher/index.vue

@@ -270,7 +270,7 @@
           />
         </el-form-item>
       </el-form>
-      <el-table :data="tableData" style="width: 100%">
+      <el-table :data="tableData" style="width: 100%" v-if="optType == 'edit'">
         <el-table-column prop="digest" label="摘要" width="180">
         </el-table-column>
         <el-table-column prop="subjectCode" label="科目代码" width="180">
@@ -280,6 +280,131 @@
         <el-table-column prop="creditorMoney" label="贷方金额">
         </el-table-column>
       </el-table>
+      <el-tabs
+        style="margin-top: 20px"
+        v-if="optType == 'edit'"
+        v-model="activeName"
+        type="card"
+        @tab-click="handleClick"
+      >
+        <el-tab-pane label="附件" name="first">
+          <el-upload
+            class="upload-demo"
+            drag
+            multiple
+            :action="uploadUrl1"
+            :file-list="fileList1"
+            :headers="headers"
+            name="multipartFile"
+            :on-success="handleSuccess1"
+            :show-file-list="false"
+          >
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">
+              将文件拖到此处，或<em>点击上传</em>
+            </div>
+          </el-upload>
+          <el-divider>已上传附件</el-divider>
+          <div v-if="showNull" class="null1">空</div>
+          <div v-for="(item, index) in fjList1">
+            <el-image :src="item.fileUrl"> </el-image>
+          </div>
+          <div v-for="(item, index) in fjList2" @click="handleClickPdf(item)">
+            <img
+              src="~@/assets/images/pdf.png"
+              style="
+                object-fit: cover;
+                width: 240px;
+                height: 220px;
+                cursor: pointer;
+              "
+            />
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="审批流程" name="second">
+          <el-upload
+            class="upload-demo"
+            drag
+            action="https://jsonplaceholder.typicode.com/posts/"
+            multiple
+          >
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">
+              将文件拖到此处，或<em>点击上传</em>
+            </div>
+          </el-upload>
+          <el-divider>已上传审批流程</el-divider>
+          <div v-if="showNul2" class="null1">空</div>
+        </el-tab-pane>
+        <el-tab-pane label="电子发票" name="third">
+          <el-upload
+            class="upload-demo"
+            drag
+            multiple
+            :action="uploadUrl3"
+            :file-list="fileList3"
+            :headers="headers"
+            name="multipartFile"
+            :on-success="handleSuccess3"
+            :show-file-list="false"
+            :accept="imgType1"
+          >
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">
+              将文件拖到此处，或<em>点击上传</em>
+            </div>
+            <div class="el-upload__tip" slot="tip">
+              支持图片、pdf、ofd格式上传
+            </div>
+          </el-upload>
+          <el-divider>已上传电子发票</el-divider>
+          <div v-if="showNul3" class="null1">空</div>
+          <div v-for="(item, index) in dzfpList1">
+            <el-image :src="item.fileUrl"> </el-image>
+          </div>
+          <div v-for="(item, index) in dzfpList2" @click="handleClickPdf(item)">
+            <img
+              src="~@/assets/images/pdf.png"
+              style="
+                object-fit: cover;
+                width: 240px;
+                height: 220px;
+                cursor: pointer;
+              "
+            />
+          </div>
+          <div v-for="(item, index) in dzfpList3" @click="handleClickOfd(item)">
+            <img
+              src="~@/assets/flieImg/ofd.jpg"
+              style="
+                object-fit: cover;
+                width: 240px;
+                height: 220px;
+                cursor: pointer;
+              "
+            />
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="银行回单" name="fourth">
+          <el-upload
+            class="upload-demo"
+            drag
+            action="https://jsonplaceholder.typicode.com/posts/"
+            multiple
+            :accept="imgType2"
+          >
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">
+              将文件拖到此处，或<em>点击上传</em>
+            </div>
+            <div class="el-upload__tip" slot="tip">
+              支持pdf、jpg、png格式上传
+            </div>
+          </el-upload>
+          <el-divider>已上传银行回单</el-divider>
+          <div v-if="showNul4" class="null1">空</div>
+        </el-tab-pane>
+      </el-tabs>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
@@ -301,6 +426,10 @@ import {
 import { listUser } from "@/api/system/user";
 import { getSiteTree } from "@/api/setting/organization";
 import { listData } from "@/api/system/dict/data";
+import { getAttachmentPage } from "@/api/accounting/attachment";
+import { getFlowPage } from "@/api/accounting/flow";
+import { getInvoicesPage } from "@/api/accounting/invoices";
+import { getAccessToken, getTenantId } from "@/utils/auth";
 
 export default {
   name: "Voucher",
@@ -312,8 +441,11 @@ export default {
         value: "pId",
         multiple: false,
       },
+      imgType1: ".jpeg, .jpg, .png, .pdf ,.ofd",
+      imgType2: ".jpeg, .jpg, .png, .pdf",
       // 遮罩层
       loading: true,
+      optType: undefined,
       // 导出遮罩层
       exportLoading: false,
       // 显示搜索条件
@@ -328,6 +460,7 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      activeName: "first",
       // 查询参数
       queryParams: {
         pageNo: 1,
@@ -363,6 +496,29 @@ export default {
         depotId: null,
         cabinetId: null,
       },
+      fileList1: [], // 文件列表
+      fileList2: [],
+      fileList3: [],
+      fjList1: [],
+      fjList2: [],
+      dzfpList1: [],
+      dzfpList2: [],
+      dzfpList3: [],
+      uploadUrl1:
+        process.env.VUE_APP_BASE_API +
+        "/admin-api/accounting/attachment/upload", // 附件上传地址
+      uploadUrl2:
+        process.env.VUE_APP_BASE_API + "/admin-api//archives/flow/upload", // 审批流程上传地址
+      uploadUrl3:
+        process.env.VUE_APP_BASE_API +
+        "/admin-api/accounting/invoices/identify", // 电子发票上传地址
+      uploadUrl4:
+        process.env.VUE_APP_BASE_API +
+        "/admin-api/accounting/attachment/upload", // 银行回单上传地址
+      headers: {
+        Authorization: "Bearer " + getAccessToken(),
+        "tenant-id": getTenantId(),
+      }, // 设置上传的请求头
       // 表单参数
       form: {},
       // 表单校验
@@ -371,6 +527,11 @@ export default {
       siteOptions: [], //归档位置数据
       siteArray: [], //归档位置选中值
       typeOptions: [], //凭证类别
+      url: "",
+      showNull: "",
+      showNul2: "",
+      showNul3: true,
+      showNul4: true,
     };
   },
   created() {
@@ -397,6 +558,57 @@ export default {
         this.tableData = response.data.list;
       });
     },
+    /** 查询附件 */
+    getFJ(val) {
+      // 执行查询
+      getAttachmentPage({ voucherNum: val }).then((response) => {
+        if (response.data.total == 0) {
+          this.showNull = true;
+        } else {
+          this.showNull = false;
+        }
+        this.fjList2 = response.data.list.filter(function (item) {
+          return item.suffix == "pdf";
+        });
+      });
+    },
+    handleClickPdf(val) {
+      window.open(val.fileUrl);
+    },
+    handleSuccess1(response, file, fileList) {
+      console.log(response, file, fileList);
+      this.getFJ();
+    },
+    /** 查询审批流程 */
+    getSPLC(val) {
+      // 执行查询
+      getFlowPage({ voucherId: val }).then((response) => {
+        if (response.data.total == 0) {
+          this.showNul2 = true;
+        } else {
+          this.showNul2 = false;
+        }
+      });
+    },
+    /** 查询电子发票 */
+    getDZFP(val) {
+      // 执行查询
+      getInvoicesPage({ voucherId: val }).then((response) => {
+        if (response.data.total == 0) {
+          this.showNul3 = true;
+        } else {
+          this.showNul3 = false;
+        }
+        this.dzfpList2 = response.data.list.filter(function (item) {
+          return item.suffix == "pdf";
+        });
+        this.dzfpList3 = response.data.list.filter(function (item) {
+          return item.suffix == "ofd";
+        });
+      });
+    },
+    handleClickOfd() {},
+    handleSuccess3() {},
     //获取字典数据
     handleInitList() {
       // 获取凭证类别
@@ -431,7 +643,7 @@ export default {
           .replace(/organizationId/g, "pId")
           .replace(/organizationName/g, "pName");
         this.siteOptions = JSON.parse(ostr);
-        console.log(this.siteOptions);
+        // console.log(this.siteOptions);
       });
     },
     //选择默认的归档位置
@@ -513,6 +725,7 @@ export default {
       this.reset();
       this.open = true;
       this.title = "添加会计凭证";
+      this.optType = "add";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -522,9 +735,14 @@ export default {
         this.form = response.data;
         this.open = true;
         this.title = "修改会计凭证";
+        this.optType = "edit";
       });
       this.getLineList(row.id);
+      this.getFJ(row.voucherNum);
+      this.getSPLC(row.id);
+      this.getDZFP(row.id);
     },
+    handleClick(tab) {},
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate((valid) => {
@@ -583,3 +801,11 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.null1 {
+  display: flex;
+  font-size: large;
+  justify-content: center;
+}
+</style>