doctor-admin-components 1.0.13-beta.6 → 1.0.13-beta.60

package/packages/src/views/biz/contractTracing/companyBanks.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="bank-view-container">
+    <!-- 收款账户信息-展示（业务场景：生成收付款、收付款票据） -->
+    <el-row style="padding-top: 15px; padding-left: 10px">
+      <div style="font-size: 16px; color: #222222">收款账号信息</div>
+      <div style="padding-left: 30px; padding-top: 2px">
+        选择的收款账户信息会提供给财务进行打款/对账
+      </div>
+    </el-row>
+    <!-- 列表数据 -->
+    <div
+      v-for="(bankData, i) in bankList"
+      :key="i"
+      class="bank-container"
+      :class="{ 'bank-container-select': !disableSelect && sellectIndex == i, 'bank-container-unselect': disableSelect || sellectIndex != i }"
+      @click="clickSelct(i)"
+    >
+      <el-row style="padding-bottom: 20px">
+        <el-col :span="24">
+          <div class="bank-item" style="padding-top: 5px">Swift Code：{{ bankData.swiftCode }}</div>
+        </el-col>
+        <el-col :span="24">
+          <div class="bank-item">Bank Name：{{ bankData.bankName }}</div>
+        </el-col>
+        <el-col :span="24">
+          <div class="bank-item" style="padding-bottom: 20px">Bank Address：{{ bankData.bankAddress }}</div>
+        </el-col>
+        <el-col :span="24">
+          <div class="bank-item">Beneficiary Account：{{ bankData.beneficiaryAccount }}</div>
+        </el-col>
+        <el-col :span="24">
+          <div class="bank-item">Beneficiary：{{ bankData.beneficiary }}</div>
+        </el-col>
+        <el-col :span="24">
+          <div class="bank-item">Beneficiary Address：{{ bankData.beneficiaryAddress }}</div>
+        </el-col>
+      </el-row>
+    </div>
+    <!-- 添加入口 -->
+    <div v-if="!bankList || bankList.length == 0" style="padding-left: 30px; padding-top: 10px">
+      <span>未添加收款账户信息，</span>
+      <el-button type="text" size="mini" @click="clickAdd">去添加</el-button>
+    </div>
+    <div v-else-if="bankList && bankList.length < 3" style="padding-left: 30px; padding-top: 10px">
+      <el-button type="text" size="mini" @click="clickAdd">去添加</el-button>
+      <span>收款账户信息</span>
+    </div>
+    <!-- 添加收款账户弹框 -->
+    <el-dialog title="添加收款账户" :visible.sync="open" width="800px" append-to-body :close-on-click-modal="false">
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-row>
+          <el-col :span="18">
+            <el-form-item label="Swift Code" label-width="150px">
+              <el-input maxlength="500" v-model="form.swiftCode" placeholder="请输入内容" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="18">
+            <el-form-item label="Bank Name" label-width="150px">
+              <el-input maxlength="500" v-model="form.bankName" placeholder="请输入内容" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="18">
+            <el-form-item label="Bank Address" label-width="150px">
+              <el-input maxlength="500" v-model="form.bankAddress" placeholder="请输入内容" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="18">
+            <el-form-item label="Beneficiary Account" label-width="150px">
+              <el-input maxlength="500" v-model="form.beneficiaryAccount" placeholder="请输入内容" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="18">
+            <el-form-item label="Beneficiary" label-width="150px">
+              <el-input maxlength="500" v-model="form.beneficiary" placeholder="请输入内容" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="18">
+            <el-form-item label="Beneficiary Address" label-width="150px">
+              <el-input maxlength="500" v-model="form.beneficiaryAddress" placeholder="请输入内容" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="clickCancel">取 消</el-button>
+        <el-button type="primary" @click="clickConfirm">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { insertCompanyBank, getCompanyBanks } from '../../../api/biz/bizContract'
+
+export default {
+  name: 'CompanyBanks',
+  props: {
+    // 收款账户的公司id（目前是合同contractId）
+    companyId: {
+      type: String | Number,
+      default: null
+    },
+    // 是否禁止选择功能
+    disableSelect: {
+      type: Boolean,
+      default: false
+    },
+    // 之前选择的id
+    accountId: {
+      type: String | Number,
+      default: null
+    }
+  },
+  watch: {
+    companyId: {
+      handler(newVal, oldVal) {
+        console.log('companyId changed:', newVal)
+        this.sellectIndex = -1
+        this.getBankList()
+      }
+    },
+    accountId: {
+      handler(newVal, oldVal) {
+        console.log('accountId changed:', newVal)
+        this.handleCaclSelectIndex()
+      }
+    }
+  },
+  data() {
+    return {
+      open: false,
+      sellectIndex: -1,
+      bankList: null,
+      form: {
+        swiftCode: null,
+        bankName: null,
+        bankAddress: null,
+        beneficiaryAccount: null,
+        beneficiary: null,
+        beneficiaryAddress: null
+      },
+      rules: {}
+    }
+  },
+  created() {
+    // 获取收款账户信息
+    this.getBankList()
+  },
+  methods: {
+    restForm() {
+      this.form = {
+        swiftCode: null,
+        bankName: null,
+        bankAddress: null,
+        beneficiaryAccount: null,
+        beneficiary: null,
+        beneficiaryAddress: null
+      }
+    },
+    handleCaclSelectIndex() {
+      if (!this.disableSelect && this.accountId) {
+        this.sellectIndex = this.bankList.findIndex((item) => item.accountId == this.accountId)
+      }
+    },
+    getBankList() {
+      if (!this.companyId) {
+        return
+      }
+      getCompanyBanks(this.companyId).then((res) => {
+        this.bankList = res.data?.paymentAccountList
+        this.handleCaclSelectIndex()
+      })
+    },
+    clickAdd() {
+      this.restForm()
+      this.open = true
+    },
+    clickSelct(index) {
+      if (this.disableSelect) {
+        console.log('disableSelect')
+        return
+      }
+      this.sellectIndex = index
+      let data = this.bankList[index]
+      console.log('select data', data)
+      this.$emit('selectBank', data)
+    },
+    clickCancel() {
+      this.open = false
+    },
+    clickConfirm() {
+      let e = this.form
+      if (!(e.swiftCode || e.bankName || e.bankAddress || e.beneficiaryAccount || e.beneficiary || e.beneficiaryAddress)) {
+        this.$modal.msgError('请输入内容')
+        return
+      }
+      insertCompanyBank({
+        contractId: this.companyId,
+        paymentAccountList: [e]
+      }).then((res) => {
+        this.getBankList()
+        this.open = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.bank-container {
+  background-color: rgb(240, 240, 240);
+  padding: 20px 10px 5px;
+  margin-top: 10px;
+}
+.bank-container-select {
+  border: 1px solid blue;
+}
+.bank-container-unselect {
+  border: 1px solid rgb(240, 240, 240);
+}
+.bank-item {
+  padding: 2px 40px 2px;
+}
+</style>