nsgk_mobile/src/views/yinnong/bankAgriculture/paymentApproval/approvalModify.vue

<template>
  <div class="app-container">
    <van-nav-bar
      left-arrow
      fixed
      placeholder
      @click-left="goBack"
    >
      <template #title>
        <p style="font-weight: bold;">修改银行卡转账申请</p>
      </template>
      <template #right>
        <van-icon name="../../../static/images/icon/icon_flow.png" size="20" @click="goFlow"/>
      </template>
    </van-nav-bar>
    <van-form @submit="getChange" @failed="getError" :show-error-message="false" scroll-to-error validate-first>
      <p class="main_title">基础信息</p>
      <div class="main_box">
        <van-field
          readonly
          clickable
          required
          :rules="[{ required: true , message:'请选择申请时间' }]"
          v-model="form.applyDate"
          label="申请时间"
          placeholder="请选择申请时间"
          @click="showlasj = true"
          input-align="right"
          right-icon="arrow-down"
        />
        <van-popup v-model="showlasj" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirmLasj"
            @cancel="showlasj = false"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          required
          :rules="[{ required: true , message:'请选择资金支出类别' }]"
          label="资金支出类别"
          placeholder="请选择"
          v-model="capitalExpenditureType"
          @click="showcapital = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
        />
        <van-popup v-model="showcapital" position="bottom">
          <van-picker
            show-toolbar
            :columns="capitalExpenditureTypeOptions"
            @confirm="onConfirmCapital"
            @cancel="showcapital = false"
          />
        </van-popup>
        <van-field
          readonly
          required
          label="支出总金额"
          v-model="form.expenditureAmount"
          placeholder="根据下方收款金额自动核算"
          input-align="right"
          label-width="auto"
        />
        <van-field name="radio" label="审批模式" input-align="right" autocomplete="off" required
                   :rules="[{ required: true , message:'请选择审批模式' }]">
          <template #input>
            <van-radio-group v-model="form.approvalMode" direction="horizontal">
              <van-radio name="1">线上审批</van-radio>
              <van-radio name="2">线下审批</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-if="form.approvalMode==1"
          readonly
          clickable
          label="审批流程"
          placeholder="请选择"
          v-model="form.approvalTemplateName"
          @click="showtemplate = true"
          input-align="right"
          right-icon="arrow-down"
          required
          :rules="[{ required: true , message:'请选择项目流程' }]"
        />
        <van-popup v-model="showtemplate" position="bottom">
          <van-picker
            show-toolbar
            value-key="name"
            :columns="templateList"
            @confirm="onConfirmTemplate"
            @cancel="showtemplate = false"
          />
        </van-popup>
      </div>

      <div class="main_box" style="margin-top: 10px;">
        <van-field
          label="转账附言"
          v-model="form.remark"
          type="textarea"
          placeholder="附言请尽量简洁并减少标点符号的使用，详情可在‘说明情况’中描述。"
          input-align="right"
          rows="3"
          label-width="auto"
          maxlength="10"
          required
          show-word-limit
          v-if="form.bankType == '5'"
          :rules="[{ required: true , message:'请输入转账附言' }]"
        />
        <van-field
          label="转账附言"
          v-model="form.remark"
          type="textarea"
          placeholder="附言请尽量简洁并减少标点符号的使用，详情可在‘说明情况’中描述。"
          input-align="right"
          rows="3"
          label-width="auto"
          maxlength="20"
          required
          show-word-limit
          v-if="form.bankType == '6'"
          :rules="[{ required: true , message:'请输入转账附言' }]"
        />
        <van-field
          label="转账附言"
          v-model="form.remark"
          type="textarea"
          placeholder="附言请尽量简洁并减少标点符号的使用，详情可在‘说明情况’中描述。"
          input-align="right"
          rows="3"
          label-width="auto"
          maxlength="30"
          required
          show-word-limit
          v-if="form.bankType != '5' && form.bankType != '6'"
          :rules="[{ required: true , message:'请输入转账附言' }]"
        />
      </div>

      <div class="main_box" style="margin-top: 10px;">
        <van-field label="说明情况" v-model="form.explainSituation" type="textarea" placeholder="请输入说明情况"
                   input-align="right" rows="3" label-width="auto"/>
      </div>

      <p class="main_title" v-if="capitalExpenditureOpen">关联项目</p>
      <div class="main_box" v-if="capitalExpenditureOpen"
           style="margin-bottom: 10px;margin-top: 10px;position:relative;">
        <van-field
          readonly
          clickable
          label="项目名称"
          placeholder="请选择"
          v-model="projectForm.projectName"
          @click="showproject = true"
          input-align="right"
          right-icon="arrow-down"
          required
          :rules="[{ required: true , message:'请选择项目名称' }]"
        />
        <van-popup v-model="showproject" position="bottom">
          <van-picker
            show-toolbar
            :columns="projectList"
            @confirm="onConfirmProject"
            @cancel="showproject = false"
          />
        </van-popup>
        <van-field required :rules="[{ required: true , message:'请输入承建单位' }]" v-model="projectForm.projectContractor"
                   label="承建单位" placeholder="请输入承建单位" input-align="right" label-width="auto"/>
        <van-field required :rules="[{ required: true , message:'请输入合同价款（元）' }]" v-model="projectForm.projectAmount"
                   label="合同价款（元）" placeholder="请输入合同价款（元）" input-align="right" label-width="auto"/>
        <van-field
          readonly
          clickable
          label="工程款类型"
          placeholder="请选择"
          v-model="projectFundType"
          @click="showFundType = true"
          input-align="right"
          right-icon="arrow-down"
          required
          :rules="[{ required: true , message:'请选择工程款类型' }]"
        />
        <van-popup v-model="showFundType" position="bottom">
          <van-picker
            show-toolbar
            :columns="projectFundTypeOptions"
            @confirm="onConfirmFundType"
            @cancel="showFundType = false"
          />
        </van-popup>
        <van-field required :rules="[{ required: true , message:'请输入工程发票号' }]" v-model="projectForm.projectBillNum"
                   label="工程发票号" placeholder="请输入工程发票号" input-align="right" label-width="auto"/>
      </div>
      <p class="main_title" v-if="contractOpen">关联合同</p>
      <div class="main_box" v-if="contractOpen" style="margin-bottom: 10px;margin-top: 10px;position:relative;">
        <van-field
          readonly
          clickable
          label="合同"
          placeholder="请选择"
          v-model="infoForm.name"
          @click="showcontract = true"
          input-align="right"
          right-icon="arrow-down"
          required
          :rules="[{ required: true , message:'请选择项目名称' }]"
        />
        <van-popup v-model="showcontract" position="bottom">
          <van-picker
            show-toolbar
            :columns="infoList"
            @confirm="onConfirmContract"
            @cancel="showcontract = false"
          />
        </van-popup>
        <van-field required :rules="[{ required: true , message:'请输入合同编码' }]" v-model="infoForm.code" label="合同编码"
                   placeholder="请输入合同编码" input-align="right" label-width="auto"/>
        <van-field required :rules="[{ required: true , message:'请输入合同价款' }]" v-model="infoForm.totalAmount"
                   label="合同价款（元）" placeholder="请输入合同价款（元）" input-align="right" label-width="auto"/>
      </div>
      <p class="main_title">付款方信息</p>
      <div class="main_box">
        <!--      <van-field label="付款方" v-model="form.payer" placeholder="请输入付款方" input-align="right" label-width="auto"/>-->
        <van-field
          readonly
          clickable
          label="付款方"
          placeholder="请选择付款方"
          v-model="form.payer"
          @click="showpayer = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
          required
          :rules="[{ required: true , message:'请选择付款方' }]"
        />
        <van-popup v-model="showpayer" position="bottom">
          <van-picker
            show-toolbar
            :columns="payerOptions"
            @confirm="onConfirmPayer($event)"
            @cancel="showpayer = false"
          />
        </van-popup>
        <van-field :rules="[{ required: true , message:'请输入账户' }]" required label="付款方账户" v-model="form.payerAccount"
                   placeholder="请输入账户" input-align="right" label-width="auto"/>
      </div>

      <p class="main_title">收款方信息
        <van-button icon="plus" @click="addChargeItme(chargeItme.length)" size="mini" type="info" native-type="button"
                    class="addFamily"/>
      </p>
      <!--      <div class="main_title main_title_box">-->
      <!--        <p>收款方信息</p>-->
      <!--        <router-link :to="{name:'collectionApprovalAdd', params: {accountType:form.accountType,isPeers:form.isPeers,bankType:form.bankType,option:form}}">添加收款方</router-link>-->
      <!--        <van-button icon="plus" @click="addChargeItme(chargeItme.length)" size="mini" type="info" native-type="button" class="addFamily"/>-->
      <!--      </div>-->
      <div class="main_box" style="margin-bottom: 15px;">
        <van-cell title="收款账户类型" v-if="form.bankType==1">
          <template #right-icon>
            <van-radio-group direction="horizontal" v-model="form.accountType" @change="accountTypeChange">
              <van-radio name="1">公户</van-radio>
              <van-radio name="2">私户</van-radio>
            </van-radio-group>
          </template>
        </van-cell>
        <van-cell title="行内转账" v-if="form.bankType==2||form.bankType==3">
          <template #right-icon>
            <van-radio-group direction="horizontal" v-model="form.isPeers" @change="accountTypeChange1">
              <van-radio name="Y">是</van-radio>
              <van-radio name="N">否</van-radio>
            </van-radio-group>
          </template>
        </van-cell>
      </div>
      <div :style="{position:'relative',padding: index == 0 ? '':'10px 0 0 0'}" v-for="(item, index) in chargeItme"
           :key="index">
        <van-button icon="minus" size="mini" type="danger" class="deleteFamily" native-type="button" v-if="index!=0"
                    @click="deleteChargeItme(index)"/>
        <div class="main_box" style="margin-bottom: 10px;position:relative;">
          <van-field
            readonly
            clickable
            label="收款方"
            placeholder="请选择"
            v-model="item.payee"
            @click="item.showPayee = true"
            input-align="right"
            right-icon="arrow-down"
            required
            :rules="[{ required: true , message:'请选择收款方' }]"
          />
          <van-popup v-model="item.showPayee" position="bottom" @close="payeeSearchValue = ''" @closed="payeeSearch">
            <van-search v-model="payeeSearchValue" show-action placeholder="请输入收款方名称搜索" >
              <template #action>
                <div @click="payeeSearch">搜索</div>
              </template>
            </van-search>
            <van-picker
              show-toolbar
              :columns="payeeList"
              @confirm="onConfirmPayee($event,index)"
              @cancel="item.showPayee = false"
            />
          </van-popup>
          <van-field readonly required :rules="[{ required: true , message:'请输入账户' }]" v-model="item.payeeAccount" label="收款账户"
                     placeholder="请输入账户" input-align="right" label-width="auto"/>
          <van-field readonly required :rules="[{ required: true , message:'请输入银行' }]" v-model="item.bankDeposit" label="开户银行"
                     placeholder="请输入银行" input-align="right" label-width="auto"/>
          <van-field required :rules="[{ required: true , message:'请输入金额' }]" v-model="item.incomeAmount" label="收入金额"
                     placeholder="请输入金额" input-align="right" label-width="auto" @change="moneyChange"/>
          <van-field
            readonly
            label="所属银行"
            placeholder="请选择"
            v-model="item.bankTypeText"
            input-align="right"
            required
            :rules="[{ required: true , message:'请选择所属银行' }]"
          />
          <van-popup v-model="item.showbankType" position="bottom">
            <van-picker
              show-toolbar
              :columns="bankTypeDictionaries"
              @confirm="onConfirmBankType($event,index)"
              @cancel="item.showbankType = false"
            />
          </van-popup>
        </div>
      </div>
      <p class="main_title" style="margin: 0.2rem 3%;">上传附件<i style="margin-right: 0.5em;"></i><span
        style="font-size: 12px;color: red;">（若申请单未变动可不必点击底部的修改按钮）</span></p>
      <div class="main_box" style="padding: 5px 0 0 0;">
        <van-cell value="收据"/>
        <van-uploader v-model="fileList1" :after-read="beforeRead('1')" @click-preview="previewPreview"
                      @delete="deleteFile" style="margin-left:8px;">
          <template #preview-cover="file">
                <div class="preview-cover">
                  <img src="../../../../assets/images/sunVillage_info/WORD.png" width="75" v-if="file.type == 'docx' || file.type == 'doc'"/>
                  <img src="../../../../assets/images/sunVillage_info/ECEL.png" width="75" v-if="file.type == 'xlsx' || file.type == 'xls'" />
                  <img src="../../../../assets/images/sunVillage_info/PDF.png" width="75" v-if="file.type == 'pdf'" />
                  <img src="../../../../assets/images/sunVillage_info/PPT.png" width="75" v-if="file.type == 'ppt'" />
                  <img src="../../../../assets/images/sunVillage_info/RAR.png" width="75" v-if="file.type == 'zip' || file.type == 'rar'" />
                </div>
          </template>

        </van-uploader>
        <van-cell title="发票"/>
        <van-uploader v-model="fileList2" :after-read="beforeRead('2')" @click-preview="previewPreview"
                      @delete="deleteFile" style="margin-left:8px;">
          <template #preview-cover="file">
            <div class="preview-cover">

              <img src="../../../../assets/images/sunVillage_info/WORD.png" width="75" v-if="file.type == 'docx' || file.type == 'doc'"/>
              <img src="../../../../assets/images/sunVillage_info/ECEL.png" width="75" v-if="file.type == 'xlsx' || file.type == 'xls'" />
              <img src="../../../../assets/images/sunVillage_info/PDF.png" width="75" v-if="file.type == 'pdf'" />
              <img src="../../../../assets/images/sunVillage_info/PPT.png" width="75" v-if="file.type == 'ppt'" />
              <img src="../../../../assets/images/sunVillage_info/RAR.png" width="75" v-if="file.type == 'zip' || file.type == 'rar'" />
            </div>
          </template>
        </van-uploader>
        <van-cell title="其他"/>
        <van-uploader v-model="fileList3" :after-read="beforeRead('3')" @click-preview="previewPreview"
                      @delete="deleteFile" style="margin-left:8px;">
          <template #preview-cover="file">
            <div class="preview-cover">
              <img src="../../../../assets/images/sunVillage_info/WORD.png" width="75" v-if="file.type == 'docx' || file.type == 'doc'"/>
              <img src="../../../../assets/images/sunVillage_info/ECEL.png" width="75" v-if="file.type == 'xlsx' || file.type == 'xls'" />
              <img src="../../../../assets/images/sunVillage_info/PDF.png" width="75" v-if="file.type == 'pdf'" />
              <img src="../../../../assets/images/sunVillage_info/PPT.png" width="75" v-if="file.type == 'ppt'" />
              <img src="../../../../assets/images/sunVillage_info/RAR.png" width="75" v-if="file.type == 'zip' || file.type == 'rar'" />
            </div>
          </template>
        </van-uploader>
      </div>
      <div style="padding: 16px 0;">
        <van-row>
          <van-col span="12" align="center">
            <van-button type="info" native-type="submit" @click="buttonType='update'" class="submitButton">修<i
              style="margin-right: 1em;"></i>改
            </van-button>
          </van-col>
          <van-col span="12" align="center">
            <van-button type="info" native-type="submit" @click="buttonType='add'" class="submitButton">提<i
              style="margin-right: 1em;"></i>交
            </van-button>
          </van-col>
        </van-row>
        <div class="clear"></div>
      </div>
    </van-form>
  </div>
</template>

<script>
  import {
    getAccount,
    getTransfer,
    queryTransferDetail,
    listPayee,
    updateTransfer,
    getProjectto,
    listProject,
    addProjectto,
    customSubmit,
    offlineCustomSubmit,
    getQmyeFlow,
    listInfo,
    getInfoto,
    addInfoto,
    listTemplate,
    selectApprovalByTemplateId
  } from "@/api/onlineHome/bankAgriculture/paymentApproval";
  import {
    attachmentList,
    commonAttach,
    systemAttachment
  } from "../../../../api/onlineHome/bankAgriculture/paymentApproval";
  import request from '@/utils/request';
  import Dialog from "vant/lib/dialog";

  export default {
    name: "approvalModify",
    data() {
      return {
        showtemplate: false,
        showcontract: false,
        showcapital: false,
        showpayee: false,
        showlasj: false,
        showbankType: false,
        showproject: false,
        showFundType: false,
        showpayer: false,

        minDate: new Date(2000, 1, 1),
        maxDate: new Date(2050, 12, 31),
        currentDate: new Date(),
        form: {},

        capitalExpenditureType: '',
        payee: '',
        bankType: '',

        buttonType: 'a',
        fileType:"",
        wfydlxDictionaries: [],
        jglxDictionaries: [],
        sysDictionaries: [],
        capitalExpenditureTypeOptions: [],
        bankTypeDictionaries: [],
        infoList: [],
        projectList: [],
        projectFundTypeOptions: [],
        projectFundTypeDictionaries: [],
        payerOptions: [],

        chargeItme: [],
        chargeItmeShow: [],

        payeeList: [],

        payeeSearchValue:'',

        bankTypeList:[],
        // 查询参数
        queryParams: {
          transferType: "",
          orderByColumn: "id",
          isAsc: "desc",
        },
        capitalExpenditureOpen: false,
        contractOpen: false,
        projectForm: {
          projectId: null,
          projectName: null,
          projectContractor: null,
          projectAmount: null,
          projectBillNum: null,
          projectFundType: '1',
          outId: null,
          ynType: '1'
        },
        infoForm: {
          infoId: null,
          name: null,
          code: null,
          totalAmount: null,
          contractionId: null,
          transferId: null
        },
        // 合同信息查询参数
        queryContractionParams: {
          pageNum: 1,
          pageSize: 100,
          contractionStatus: '1',
          orderByColumn: "endTime",
          isAsc: "desc",
        },
        projectFundType: '',
        fileList1: [],
        fileList2: [],
        fileList3: [],
        templateList: [],
      };
    },
    activated: function () {
      this.getDictionaries();
    },
    created() {
      let queryParams = {
        pageNum: 1,
        pageSize: 100,
      }
      this.getFileList();
      listProject(queryParams).then(response => {
        this.projectList = response.rows;
        for (let i = 0; i < response.rows.length; i++) {
          this.$set(this.projectList[i], "text", response.rows[i].projectName)
          this.$set(this.projectList[i], "value", response.rows[i].id)
        }
      });
      listInfo(this.queryContractionParams).then(response => {
        this.infoList = response.rows;
        for (let i = 0; i < response.rows.length; i++) {
          this.$set(this.infoList[i], "text", response.rows[i].name)
          this.$set(this.infoList[i], "value", response.rows[i].code)
        }
      });
      this.getDicts("project_fund_type").then((response) => {
        for (var i = 0; i < response.data.length; i++) {
          this.projectFundTypeOptions.push({text: response.data[i].dictLabel, value: response.data[i].dictValue});
        }
        this.projectFundTypeDictionaries = response.data;
      });
      this.getDicts("bank_type").then((response) => {
        for (var i = 0; i < response.data.length; i++) {
          this.bankTypeList.push({text: response.data[i].dictLabel, value: response.data[i].dictValue});
        }
      });
      let params1 = {
        accountType: "102",
        // "params":{townAccountType:'0'},
        status: "N",
      }
      getAccount(params1).then((response) => {
        this.payerOptions = response.rows;
        response.rows.map((res, index) => {
          res['payerFrom'] = '1'
          this.payerOptions[index].text = res.accountName;
          this.payerOptions[index].value = res.id;
        })
      });
      this.getDictionaries();
    },

    methods: {
      payeeSearch(val){
        console.log(val);
        this.payeeList = [];
        this.queryParams.payee = this.payeeSearchValue;
        listPayee(this.queryParams).then((response) => {
          response.rows.map((res,index) => {
            if(res.payeeType==1||res.payeeType==2){
              response.rows[index].text = res.payee;
              response.rows[index].value = res.id;
              this.payeeList.push(res)
            }
          })
        });
      },
      goFlow() {
        if (this.form.approvalMode == '1' && this.form.approvalTemplateId != undefined && this.form.approvalTemplateId != "undefined") {
          window.location = 'approvalProcess3?approvalTemplateId=' + this.form.approvalTemplateId + '&approvalMode=' + this.form.approvalMode;
        } else {
          this.$notify({type: 'danger', message: '无审批流程！'});
        }
      },
      onConfirmTemplate(data) {
        selectApprovalByTemplateId(data.id).then(res => {
          this.showtemplate = false;
          if (res.approvalDetails.length > 0) {
            this.form.approvalTemplateName = data.name
            this.form.approvalTemplateId = data.id
          } else {
            this.form.approvalTemplateName = null
            this.form.approvalTemplateId = null
            this.$notify({type: 'danger', message: '此流程无节点，无法选择！'});
          }
        })
      },
      getDictionaries() {
        getTransfer(this.$route.query.id).then((response) => {
          this.getDicts("capital_expenditure_type").then((res) => {
            for (var i = 0; i < res.data.length; i++) {
              this.capitalExpenditureTypeOptions.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
            }
            this.capitalExpenditureType = this.selectDictLabel(res.data, response.data.capitalExpenditureType);
          });
          if (response.data.capitalExpenditureType == 2) {
            this.capitalExpenditureOpen = true
            let param = {
              'outId': response.data.id,
              'ynType': '1'
            }
            getProjectto(param).then(res => {
              this.projectFundType = this.selectDictLabel(this.projectFundTypeDictionaries, res.data.projectFundType);
              this.projectForm = res.data
            })
          } else if (response.data.capitalExpenditureType == 4) {
            this.contractOpen = true
            let param = {
              'transferId': response.data.id
            }
            getInfoto(param).then(res => {
              this.infoForm = res.data
            })
          } else {
            this.showproject = false
          }
          this.form = response.data;
          this.getPayeeList();
          let _this = this
          let templateQueryParams = {
            // 分页
            pageNum: 1,
            pageSize: 999,
            type: '1'
          };
          listTemplate(templateQueryParams).then(rrr => {
            this.templateList = rrr.rows;
            this.templateList.map(ra => {
              if (ra.id == response.data.approvalTemplateId) {
                _this.form.approvalTemplateName = ra.name
              }
            })
          });
        });
        queryTransferDetail(this.$route.query.id).then((response) => {
          this.getDicts("bank_type_all").then(res => {
            for (var i = 0; i < res.data.length; i++) {
              this.bankTypeDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
            }
            for (var j = 0; j < response.rows.length; j++) {
              // response.rows[j].payeeText = response.rows[j].payee;
              response.rows[j].bankTypeText = this.selectDictLabel(res.data, response.rows[j].bankType);
              response.rows[j].showPayee = false;
            }
            this.chargeItme = response.rows;
          });
        });
      },
      getChange() {
        if (this.buttonType == 'update') {
          this.goUpdate();
        } else if (this.buttonType == 'add') {
          this.goAdd();
        }
      },
      getError(e) {
        this.$notify({type: 'danger', message: e.errors[0].message});
      },
      addChargeItme(index) {
        if (this.chargeItme.length > 0 && this.chargeItme[this.chargeItme.length - 1].payee == '') {
          this.$notify({type: 'danger', message: '请勿添加多个空列表信息'});
          return;
        } else if (this.chargeItme.length > 0 && this.chargeItme[index - 1].incomeAmount == '') {
          this.$notify({type: 'danger', message: '请输入收入金额！'});
          return;
        } else if (this.chargeItme.length > 0 && this.chargeItme[index - 1].payeeAccount == '') {
          this.$notify({type: 'danger', message: '请输入收款账户！'});
          return;
        } else if (this.chargeItme.length > 0 && this.chargeItme[index - 1].bankDeposit == '') {
          this.$notify({type: 'danger', message: '请输入开户银行！'});
          return;
        } else if (this.chargeItme.length > 0 && this.chargeItme[index - 1].bankType == '') {
          this.$notify({type: 'danger', message: '请选择所属银行！'});
          return;
        }
        // if(this.form.bankType == '2' && this.form.isPeers == 'N' && this.chargeItme.length==1){
        //   this.$notify({ type: 'danger', message: '目前农商行仅支持单笔跨行转账，即仅能有一个收款方！' });
        // }else
        var heilongjiang = false;
        this.bankTypeList.map(res => {
          if(res.value == 7 && res.text.includes("黑龙江")){
            heilongjiang = true;
          }
        });
        if(heilongjiang && this.form.bankType == '7' && this.chargeItme.length==1){
          this.$notify({ type: 'danger', message: '目前黑龙江农商行仅支持单笔转账，即仅能有一个收款方！' });
        }else{
          this.getDicts("bank_type_all").then(res => {
            this.chargeItme.splice(index + 1, 0, {
              payeeId: "", //收款方ID
              payee: "", //收款方
              payeeAccount: "", //收款账户
              bankDeposit: "", //开户银行
              incomeAmount: "", //收入金额
              bankType: null, //所属银行
              bankTypeText: "", //所属银行
              showPayee: false,
              showbankType: false
            });
          });
        }
      },
      getPayeeList() {
        //普通转账
        this.queryParams.isPeers = this.form.isPeers ? this.form.isPeers : null
        this.queryParams.accountType = this.form.accountType ? this.form.accountType : null
        this.queryParams.bankType = this.form.bankType
        this.queryParams.status = "0"
        listPayee(this.queryParams).then((response) => {
          response.rows.map((res, index) => {
            if (res.payeeType == 1 || res.payeeType == 2) {
              res.text = res.payee;
              res.value = res.id;
              this.payeeList.push(res)
            }
          })
        });
      },
      payeeDictLabel(datas, value) {
        var actions = [];
        Object.keys(datas).some((key) => {
          if (datas[key].payeeId == ('' + value)) {
            actions.push(datas[key].payee);
            return true;
          }
        })
        return actions.join('');
      },
      previewPreview(file, index, len) {
        const baseImgUrl = this.$store.getters.baseRoutingUrl;
        if (file.url) {
          //已上传文件
          let fileName = file.file.name || file.url;
          let subIndex = fileName.lastIndexOf(".");
          let ext = fileName.substring(subIndex + 1, fileName.length);
          this.fileType = ext;
          let imgi = file.listIndex
          //console.log(ext)
          let allUrl = file.url;
          if(ext  !== 'jpg' && ext  !== 'png' && ext  !== 'gif' && ext  !== 'svg' && ext  !== 'ico' && ext  !== 'bmp'){
            const link = document.createElement("a");
            link.style.display = "none";
            link.target = "_blank"
            link.href = allUrl;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          }

        } else {
          //新上传文件
          let fileName = file.file.name;
          // console.info(file.file.name)
          let subIndex = fileName.lastIndexOf(".");
          let ext = fileName.substring(subIndex + 1, fileName.length);
          this.fileType = ext;
          if(ext  !== 'jpg' && ext  !== 'png' && ext  !== 'gif' && ext  !== 'svg' && ext  !== 'ico' && ext  !== 'bmp'){
            let type = this.getfileType(ext);
            // 将文件转换为base64编码
            this.fileToBase64(file.file, ext).then(res => {
              this.downloadFile(res, fileName, ext, type);
            })
          }
        }
      },
      getfileType(type) {
        switch (type) {
          case 'txt':
            return 'text/plain';
          case 'doc':
            return 'application/msword';
          case 'docx':
            return 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
          case 'xls':
            return 'application/vnd.ms-excel';
          case 'xlsx':
            return 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
          case 'pdf':
            return 'application/pdf';
          case 'pptx':
            return 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
          case 'png':
            return 'image/png';
          case 'jpg':
            return 'image/jpeg';
          case 'gif':
            return 'image/gif';
          case 'svg':
            return 'image/svg+xml';
          case 'ico':
            return 'image/x-icon';
          case 'gif':
            return 'image/gif';
          case 'svg':
            return 'image/svg+xml';
          case 'ico':
            return 'image/x-icon';
          case 'bmp':
            return 'image/bmp,';
        }
      },
      downloadFile(base64, fileName, fileType, mimetype) {
        const typeHeader = 'data:application/' + fileType + ';base64,';
        const blob = this.base64ToBlob(base64, mimetype);
        this.downloadFileDownload(blob, fileName, fileType);
      },
      base64ToBlob(base64, mime) {
        //解码base64得到二进制字符串

        let raw = window.atob(base64.substring(base64.indexOf(',') + 1));
        let rawLength = raw.length
        //创建8位无符号整数值的类型化数组
        let uInt8Array = new Uint8Array(rawLength)
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {type: mime})
      },
      downloadFileDownload(blob, fileName, fileType) {
        const downloadElement = document.createElement('a');
        let href = blob;
        if (typeof blob === 'string') {
          downloadElement.target = '_blank'
        } else {
          href = window.URL.createObjectURL(blob)
        }
        downloadElement.href = href;
        downloadElement.download = fileName + '.' + fileType;//下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click();
        document.body.removeChild(downloadElement)
        if (typeof blob !== 'string') {
          window.URL.revokeObjectURL(href)
        }
      },
      fileToBase64(file, fileType) {
        return new Promise((resolve, reject) => {
          //创建一个新的FileReader 对象
          const reader = new FileReader();
          //读取file对象
          reader.readAsDataURL(file);
          reader.onload = function () {
            const base64String = reader.result.split(",")[1];
            resolve('data:application/' + fileType + ';base64,' + base64String);
          }
          reader.onerror = function () {
            reject(new Error("Failed to load file"))
          }
        })
      },
      onConfirmCapital(data) {
        if (data.value == 2) {
          this.capitalExpenditureOpen = true;
          this.contractOpen = false
          this.infoForm = {};
        } else if (data.value == 4) {
          this.capitalExpenditureOpen = false;
          this.contractOpen = true
          this.projectForm = {};
        } else {
          this.capitalExpenditureOpen = false;
          this.contractOpen = false
          this.projectForm = {};
          this.infoForm = {};
        }
        this.capitalExpenditureType = data.text;
        this.form.capitalExpenditureType = data.value;
        this.showcapital = false;
      },
      onConfirmFundType(data) {
        this.projectForm.projectFundType = data.value;
        this.projectFundType = data.text;
        this.showFundType = false;
      },
      onConfirmProject(data) {
        this.projectList.map(res => {
          if (res.projectName == data.text) {
            this.projectForm.projectId = res.id
            this.projectForm.projectName = res.projectName
            this.projectForm.projectContractor = res.projectContractor
            this.projectForm.projectAmount = res.projectAmount
          }
        })
        this.showproject = false;
      },
      onConfirmContract(data) {
        this.infoList.map(res => {
          if (res.name == data.text) {
            this.infoForm.contractionId = res.id;
            this.infoForm.name = res.name;
            this.infoForm.code = res.code;
            this.infoForm.totalAmount = res.totalAmount;
          }
        })
        this.showcontract = false;
      },
      onConfirmPayee(data, index) {
        for (var i = 0; i < this.chargeItme.length; i++) {
          this.chargeItme[i].showPayee = false;
        }
        this.chargeItme[index].payee = data.text;
        this.chargeItme[index].payeeId = data.value;
        this.payeeSelectChange(data.value, index)
      },
      onConfirmBankType(data, index) {
        for (var i = 0; i < this.chargeItme.length; i++) {
          this.chargeItme[i].showbankType = false;
        }
        this.chargeItme[index].bankTypeText = data.text;
        this.chargeItme[index].bankType = data.value;
        this.chargeItme[index].showbankType = false;
      },
      onConfirmPayer(data) {
        this.form.payer = data.text;
        this.form.cashierId = data.value;
        this.showpayer = false;
        this.selectChange(data.value)
      },
      onConfirmLasj(data) {
        this.form.applyDate = this.getNowFormatDate(data).substr(0, 10);
        this.showlasj = false;
      },
      accountTypeChange(e) {
        this.payeeList = [];
        this.chargeItme = [];
        this.queryParams.accountType = this.form.accountType
        this.queryParams.isPeers = this.form.isPeers
        this.queryParams.bankType = this.form.bankType
        this.queryParams.status = "0"
        listPayee(this.queryParams).then((response) => {
          response.rows.map((res, index) => {
            if (res.payeeType == 1 || res.payeeType == 2) {
              response.rows[index].text = res.payee;
              response.rows[index].value = res.id;
              this.payeeList.push(res)
            }
          })
        });
      },
      accountTypeChange1(e) {
        this.payeeList = [];
        this.chargeItme = [];
        this.queryParams.accountType = this.form.accountType
        this.queryParams.isPeers = this.form.isPeers
        this.queryParams.bankType = this.form.bankType
        this.queryParams.status = "0"
        listPayee(this.queryParams).then((response) => {
          response.rows.map((res, index) => {
            if (res.payeeType == 1 || res.payeeType == 2) {
              response.rows[index].text = res.payee;
              response.rows[index].value = res.id;
              this.payeeList.push(res)
            }
          })
        });
      },
      // 钱计算
      moneyChange(input) {
        let obj = {};
        obj = this.chargeItme.find((account) => {
          //model就是上面的数据源
          return parseFloat(account.incomeAmount).toFixed(2) === input; //筛选出匹配数据
        });
        let total = 0;
        this.chargeItme.forEach((money) => {
          total = (parseFloat(total) + parseFloat(money.incomeAmount)).toFixed(2)
        });
        this.$set(this.form, "expenditureAmount", total);
      },
      goAdd() {
        let _this = this
        if (this.chargeItme.length < 1) {
          this.$notify({type: 'danger', message: '请添加收款方信息'});
          return;
        }
        if (this.form.remark != null && this.form.remark.indexOf("|") != -1) {
          this.$notify({type: 'danger', message: '转账附言禁止包含！'});
          return;
        }
        if (this.form.capitalExpenditureType == 2) {
          if (this.projectForm.projectName == "" || this.projectForm.projectName == null) {
            this.$notify({type: 'danger', message: '请选择项目名称！'});
            return;
          }
          if (this.projectForm.projectBillNum == "" || this.projectForm.projectBillNum == null) {
            this.$notify({type: 'danger', message: '请输入工程发票号！'});
            return;
          }
        }
        if (this.form.capitalExpenditureType == 4) {
          if (this.infoForm.name == "" || this.infoForm.name == null) {
            this.$notify({type: 'danger', message: '请选择合同名称！'});
            return;
          }
          if (this.infoForm.code == "" || this.infoForm.code == null) {
            this.$notify({type: 'danger', message: '请输入合同编码！'});
            return;
          }
          if (this.infoForm.totalAmount == "" || this.infoForm.totalAmount == null) {
            this.$notify({type: 'danger', message: '请输入合同价款！'});
            return;
          }
        }
        if (
          this.fileList1.length == 0 &&
          this.fileList2.length == 0 &&
          this.fileList3.length == 0) {
          Dialog.confirm({
            title: '提示',
            message: '此申请单中未上传任何附件，是否确认提交？',
          })
            .then(() => {
              this.saveRelease()
            })
            .catch(() => {
              return false;
            });
        } else {
          this.saveRelease()
        }
      },
      saveRelease() {
        let _this = this;
        this.$set(this.form, "payeeList", this.chargeItme);
        this.$set(this.form, "bankTypeList", this.chargeItme);
        this.$set(this.form, "accountTypeList", this.chargeItme);
        this.$set(this.form, "transferStatusList", this.chargeItme);

        updateTransfer(this.form).then(response => {
          this.projectForm.outId = this.form.id
          this.infoForm.transferId = this.form.id
          this.$set(this.projectForm, "ynType", '1');
          if (this.form.capitalExpenditureType == 2) {
            addProjectto(this.projectForm).then(res => {
              offlineCustomSubmit(this.form.id).then(res => {
                this.$toast.success('提交成功');
                setTimeout(function () {
                  _this.$router.push('/yinnong/approvalList')
                }, 1000)
              })
            })
          } else if (this.form.capitalExpenditureType == 4) {
            addInfoto(this.infoForm).then(res => {
              offlineCustomSubmit(this.form.id).then(res => {
                this.$toast.success('提交成功');
                setTimeout(function () {
                  _this.$router.push('/yinnong/approvalList')
                }, 1000)
              })
            })
          } else {
            offlineCustomSubmit(this.form.id).then(res => {
              this.$toast.success('提交成功');
              setTimeout(function () {
                _this.$router.push('/yinnong/approvalList')
              }, 1000)
            })
          }
        });
      },
      goUpdate() {
        let _this = this
        if (this.chargeItme.length < 1) {
          this.$notify({type: 'danger', message: '请添加收款方信息'});
          return;
        }
        if (this.form.remark != null && this.form.remark.indexOf("|") != -1) {
          this.$notify({type: 'danger', message: '转账附言禁止包含！'});
          return;
        }
        if (this.form.capitalExpenditureType == 2) {
          if (this.projectForm.projectName == "" || this.projectForm.projectName == null) {
            this.$notify({type: 'danger', message: '请选择项目名称！'});
            return;
          }
          if (this.projectForm.projectBillNum == "" || this.projectForm.projectBillNum == null) {
            this.$notify({type: 'danger', message: '请输入工程发票号！'});
            return;
          }
        }
        if (this.form.capitalExpenditureType == 4) {
          if (this.infoForm.name == "" || this.infoForm.name == null) {
            this.$notify({type: 'danger', message: '请选择合同名称！'});
            return;
          }
          if (this.infoForm.code == "" || this.infoForm.code == null) {
            this.$notify({type: 'danger', message: '请输入合同编码！'});
            return;
          }
          if (this.infoForm.totalAmount == "" || this.infoForm.totalAmount == null) {
            this.$notify({type: 'danger', message: '请输入合同价款！'});
            return;
          }
        }
        this.$set(this.form, "payeeList", this.chargeItme);
        this.$set(this.form, "bankTypeList", this.chargeItme);
        this.$set(this.form, "accountTypeList", this.chargeItme);
        this.$set(this.form, "transferStatusList", this.chargeItme);
        updateTransfer(this.form).then(response => {
          this.projectForm.outId = this.form.id
          this.infoForm.transferId = this.form.id
          this.$set(this.projectForm, "ynType", '1');

          if (this.form.capitalExpenditureType == 2) {
            addProjectto(this.projectForm).then(res => {
              this.$toast.success('保存成功');
              setTimeout(function () {
                _this.$router.push('/yinnong/approvalList')
              }, 1000)
            })
          } else if (this.form.capitalExpenditureType == 4) {
            addInfoto(this.infoForm).then(res => {
              this.$toast.success('保存成功');
              setTimeout(function () {
                _this.$router.push('/yinnong/approvalList')
              }, 1000)
            })
          } else {
            this.$toast.success('保存成功');
            setTimeout(function () {
              _this.$router.push('/yinnong/approvalList')
            }, 1000)
          }

        });
      },
      payeeSelectChange(select, i) {
        let obj = {};
        let fuzhitype = 0;
        let _this = this
        obj = this.payeeList.find((account) => {
          //model就是上面的数据源
          return account.id === select; //筛选出匹配数据
        });
        if (this.chargeItme != [] && this.chargeItme.length > 1) {
          this.chargeItme.some((value, index) => {
            if (value.payeeAccount != undefined && value.payeeAccount != '' && obj.payeeAccount == value.payeeAccount && index != i) {
              fuzhitype = 2;
              return true;
            }
            if (_this.form.isPeers != undefined && _this.form.isPeers != null && _this.form.isPeers == 'N') {

            } else {
              if (obj.bankType == 1 && value.accountType != undefined && value.accountType != '' && obj.accountType != value.accountType && index != i) {
                fuzhitype = 1;
                return true;
              }
            }
          });
        }
        if (fuzhitype == 0) {
          this.$set(this.chargeItme[i], "payee", obj.payee)
          this.$set(this.chargeItme[i], "bankType", obj.bankType)
          this.$set(this.chargeItme[i], "payeeId", obj.id);
          this.$set(this.chargeItme[i], "payeeAccount", obj.payeeAccount);
          this.$set(this.chargeItme[i], "bankDeposit", obj.bankDeposit);
          this.$set(this.chargeItme[i], "accountType", obj.accountType);
          this.$set(this.chargeItme[i], "payeePaymentLines", obj.payeePaymentLines);
          _this.bankTypeDictionaries.map(rr => {
            if (rr.value == obj.bankType) {
              this.$set(this.chargeItme[i], "bankTypeText", rr.text);
            }
          })
        } else if (fuzhitype == 1) {
          this.$set(this.chargeItme[i], "payee", '')
          this.$set(this.chargeItme[i], "bankType", '')
          this.$set(this.chargeItme[i], "payeeId", '');
          this.$set(this.chargeItme[i], "payeeAccount", '');
          this.$set(this.chargeItme[i], "bankDeposit", '');
          this.$set(this.chargeItme[i], "accountType", '');
          this.$set(this.chargeItme[i], "payeePaymentLines", '');
          this.$set(this.chargeItme[i], "bankTypeText", '');
          this.$notify({type: 'danger', message: '请选择账户类型相同的收款方！'});
        } else if (fuzhitype == 2) {
          this.$set(this.chargeItme[i], "payee", '')
          this.$set(this.chargeItme[i], "bankType", '')
          this.$set(this.chargeItme[i], "payeeId", '');
          this.$set(this.chargeItme[i], "payeeAccount", '');
          this.$set(this.chargeItme[i], "bankDeposit", '');
          this.$set(this.chargeItme[i], "accountType", '');
          this.$set(this.chargeItme[i], "payeePaymentLines", '');
          this.$set(this.chargeItme[i], "bankTypeText", '');
          this.$notify({type: 'danger', message: '收款方已存在！'});
        }
      },
      selectChange(select) {
        let obj = {};
        obj = this.payerOptions.find((account) => {
          //model就是上面的数据源
          return account.id === select; //筛选出匹配数据
        });
        if (obj.accountPassword != null && obj.accountPassword != "" &&
          obj.bankType != null && obj.bankType != "") {
          this.$set(this.form, "bookId", obj.bookId);
          this.$set(this.form, "deptId", obj.deptId);
          this.$set(this.form, "cashierId", obj.id);
          this.$set(this.form, "payer", obj.accountName);
          this.$set(this.form, "payerAccount", obj.bankAccountNumber);
          this.$set(this.form, "operatorCode", obj.operatorCode);
          this.$set(this.form, "enterpriseCode", obj.enterpriseCode);
          this.$set(this.form, "bankType", obj.bankType);
          this.$set(this.form, "payerFrom", '1');
          if (obj.bankType == 1) {
            this.form.accountType = "1"
            this.form.isPeers = null
            this.accountTypeChange();
          } else if (obj.bankType == 2 || obj.bankType == 3) {
            this.form.accountType = null
            this.form.isPeers = "Y"
            this.accountTypeChange1();
          }
        } else {
          if (obj.payerFrom == 1) {
            this.diglogStatus = false;
            this.$notify({type: 'danger', message: "请完善付款方“操作员代码”、“企业编码”、“支付口令”等信息！"});
            this.$set(this.form, "payer", "")
            this.$set(this.form, "payerAccount", "")
          } else {
            this.$set(this.form, "payerFrom", obj.parerFrom);
            if (obj.operatorCode != null && obj.operatorCode != '') {
              this.$set(this.form, "operatorCode", obj.operatorCode);
            } else {
              this.$set(this.form, "operatorCode", '');
            }
            if (obj.enterpriseCode != null && obj.enterpriseCode != '') {
              this.$set(this.form, "enterpriseCode", obj.enterpriseCode);
            } else {
              this.$set(this.form, "enterpriseCode", '');
            }
            if (obj.accountPassword != null && obj.accountPassword != '') {
              this.$set(this.form, "accountPassword", obj.accountPassword);
            } else {
              this.$set(this.form, "accountPassword", '');
            }
            this.$set(this.form, "bookId", '');
            this.$set(this.form, "deptId", '');
            this.$set(this.form, "cashierId", obj.id);
            this.$set(this.form, "payer", obj.accountName);
            if (obj.payerFrom == 6) {
              getQmyeFlow(obj.bankAccountNumber).then((response) => {
                this.$set(this.form, "payerAccount", response.data);
              });
            } else {
              this.$set(this.form, "payerAccount", obj.bankAccountNumber);
            }
          }
        }
      },
      beforeRead(obj) {
        return (file) => {
          let params1 = new FormData();
          params1.append("tableId", this.form.id);
          params1.append("tableName", "t_yinnong_transfer");
          params1.append("bizPath", "transfer");
          params1.append("fileType", obj);
          params1.append("file", file.file);
          commonAttach(params1).then((r1) => {
            file.id = r1.id;
            file.fileUrl = r1.fileUrl;
            let subIndex = r1.fileUrl.lastIndexOf(".");
            let ext =  r1.fileUrl.substring(subIndex + 1, r1.fileUrl.length);
            let baseUrl = location.protocol + "//" + location.host + request.defaults.baseURL;
            let fileData =  {"url": baseUrl + r1.fileUrl, "file": new File([], "name", {}), "id": r1.id,"type":ext};
            if(obj === '1'){
              this.fileList1.splice(-1, 1);
              this.fileList1.push(fileData);
            }else if(obj === '2'){
              this.fileList2.splice(-1, 1);
              this.fileList2.push(fileData);
            }else{
              this.fileList3.splice(-1, 1);
              this.fileList3.push(fileData);
            }
          })
        }
      },
      deleteFile(file) {
        systemAttachment(file.id).then((res) => {
        });
      },

      getFileList() {
        let oData1 = {
          tableId: this.$route.query.id,
          tableName: "t_yinnong_transfer",
          bizPath: "transfer",
          fileType: "1",
        }
        attachmentList(oData1).then(res => {
          let arr = [];
          res.rows.map(r => {
            let baseUrl = location.protocol + "//" + location.host + request.defaults.baseURL;
            let subIndex = r.fileName.lastIndexOf(".");
            let ext =  r.fileName.substring(subIndex + 1, r.fileName.length);
            arr.push({"url": baseUrl + r.fileUrl, "file": new File([], r.fileName, {}), "id": r.id,"type":ext})
          })
          this.fileList1 = arr;
          this.$forceUpdate()
        })
        let oData2 = {
          tableId: this.$route.query.id,
          tableName: "t_yinnong_transfer",
          bizPath: "transfer",
          fileType: "2",
        }
        attachmentList(oData2).then(res => {
          let arr = [];
          res.rows.map(r => {
            let baseUrl = location.protocol + "//" + location.host + request.defaults.baseURL
            let subIndex = r.fileName.lastIndexOf(".");
            let ext =  r.fileName.substring(subIndex + 1, r.fileName.length);
            arr.push({"url": baseUrl + r.fileUrl, "file": new File([], r.fileName, {}), "id": r.id,"type":ext})
          })
          this.fileList2 = arr;
          this.$forceUpdate()
        })
        let oData3 = {
          tableId: this.$route.query.id,
          tableName: "t_yinnong_transfer",
          bizPath: "transfer",
          fileType: "3",
        }
        attachmentList(oData3).then(res => {
          let arr = [];
          res.rows.map(r => {
            let baseUrl = location.protocol + "//" + location.host + request.defaults.baseURL
            let subIndex = r.fileName.lastIndexOf(".");
            let ext =  r.fileName.substring(subIndex + 1, r.fileName.length);
            arr.push({"url": baseUrl + r.fileUrl, "file": new File([], r.fileName, {}), "id": r.id,"type":ext})
          })
          this.fileList3 = arr;
          this.$forceUpdate()
        })
      },
      goBack() {
        this.$router.push({path: '/yinnong/approvalList'})
      },
      //删除家庭成员
      deleteChargeItme(index) {
        this.chargeItme.splice(index, 1)
      },
    },
    watch: {
      $route(to, from) {
        // 监听路由变化, 实现类似 小程序的 onShow 事件
        if (to.path === '/yinnong/approvalModify') {
          // do anything you want
          if (this.$route.params.payeeForm) {
            this.chargeItme.push(this.$route.params.payeeForm)
          }
        }
      }
    },
  }
</script>

<style scoped lang="scss">
  .app-container {
    padding: 2% 0;
  }

  .main_title_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .main_title {
    font-size: 0.4rem;
    color: #1D6FE9;
    margin: 0.2rem 6%;
    position: relative;
    /*a{*/
    /*  background: #1989fa;*/
    /*  color: #ffffff;*/
    /*  padding: 0.05rem 0.3rem;*/
    /*  border-radius: 5PX;*/
    /*}*/
  }

  .main_box {
    width: 96%;
    margin: 0 auto;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    background-color: #FFF;
  }

  .submitButton {
    width: 80%;
    margin: 0 auto;
    background-color: #1D6FE9;
  }

  .addFamily {
    position: absolute;
    top: -2px;
    right: 0;
    border-radius: 50%;
  }

  .deleteFamily {
    position: absolute;
    top: 0rem;
    right: 6%;
    z-index: 9;
    border-radius: 50%;
  }
</style>