新增关联凭证

src/views/accounting/bankSlip/index.vue

@@ -156,6 +156,17 @@
           >下载元数据</el-button
         >
       </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-document"
+          size="mini"
+          :disabled="multiple"
+          @click="handleGLPZ"
+          >关联凭证</el-button
+        >
+      </el-col>
       <right-toolbar
         :showSearch.sync="showSearch"
         @queryTable="getList"
@@ -163,8 +174,12 @@
     </el-row>
 
     <!-- 列表 -->
-    <el-table v-loading="loading" :data="list">
-      <!-- <el-table-column label="凭证id" align="center" prop="voucherId" /> -->
+    <el-table
+      v-loading="loading"
+      :data="list"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="OA/ERP流程编号" align="center" prop="flowCode" />
       <el-table-column
         label="交易日期"
@@ -607,6 +622,47 @@
         <el-button @click="cancel2">取 消</el-button>
       </div>
     </el-dialog>
+
+    <!-- 会计凭证选择框-->
+    <el-dialog
+      title="关联凭证"
+      :visible.sync="open2"
+      width="800px"
+      append-to-body
+    >
+      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
+        <el-row>
+          <el-col :span="14">
+            <el-form-item label="会计凭证" prop="voucherId">
+              <el-input
+                v-model="form.voucherId"
+                placeholder="请选择凭证"
+                readonly
+              >
+                <el-button
+                  slot="append"
+                  @click="handleSelectVoucher"
+                  icon="el-icon-search"
+                  style="
+                    border-color: #46a6ff;
+                    background-color: #46a6ff;
+                    color: white;
+                  "
+                ></el-button>
+              </el-input>
+              <VoucherSelect
+                ref="VoucherSelect"
+                @onSelected="onVoucherSelected"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm2">确 定</el-button>
+        <el-button @click="cancel2">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -623,14 +679,20 @@ import {
 } from "@/api/accounting/bankSlip";
 import { getAccessToken, getTenantId } from "@/utils/auth";
 import { listUser } from "@/api/system/user";
+import VoucherSelect from "@/components/VoucherSelect/single.vue";
 
 export default {
   name: "BankSlip",
-  components: { UploadBankSlip: () => import("@/components/UploadBankSlip") },
+  components: {
+    UploadBankSlip: () => import("@/components/UploadBankSlip"),
+    VoucherSelect,
+  },
   data() {
     return {
       // 遮罩层
       loading: true,
+      // 多个禁用
+      multiple: true,
       // 导出遮罩层
       exportLoading: false,
       // 显示搜索条件
@@ -989,6 +1051,45 @@ export default {
         })
         .catch(() => {});
     },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      console.log(selection);
+      this.ids = selection.map((item) => item.id);
+      if (selection.length == 1) {
+        this.multiple = false;
+        this.form = selection[0];
+      } else {
+        this.multiple = true;
+      }
+    },
+    //关联凭证
+    handleGLPZ() {
+      this.form.voucherId = null;
+      this.open2 = true;
+      console.log(this.form);
+    },
+    submitForm2() {
+      this.$refs["form"].validate((valid) => {
+        if (!valid) {
+          return;
+        }
+        updateBankSlip(this.form).then((response) => {
+          this.$modal.msgSuccess("关联成功");
+          this.open2 = false;
+          this.multiple = true;
+          this.getList();
+        });
+      });
+    },
+    handleSelectVoucher() {
+      this.$refs.VoucherSelect.showFlag = true;
+    },
+    onVoucherSelected(obj) {
+      console.log(obj);
+      if (obj != undefined && obj != null) {
+        this.form.voucherId = obj.id;
+      }
+    },
   },
 };
 </script>