zhangzl
/
nsgk_mobile
2
0
Fork 0
Código Issues 0 Pull requests 0 Versões 0 Wiki Atividade
移动端
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
846 Commits
7 Branches
18 GiB
 
 
Tag: 7a073c3a30
Branches Tags
${ item.name }
Criar branch ${ searchTerm }
de 7a073c3a30
${ noResults }
nsgk_mobile/src/views/yinnong/bankAgriculture/paymentApproval/approvalModify.vue

1165 linhas
44 KiB
Original Anotar Histórico 

  1. <template>

  2.   <div class="app-container">

  3.     <van-nav-bar

  4.       left-arrow

  5.       fixed

  6.       placeholder

  7.       @click-left="goBack"

  8.     >

  9.       <template #title>

  10.         <p style="font-weight: bold;">修改银行卡转账申请</p>

  11.       </template>

  12.       <template #right>

  13.         <van-icon name="../../../static/images/icon/icon_flow.png" size="20" @click="goFlow"/>

  14.       </template>

  15.     </van-nav-bar>

  16.     <van-form @submit="getChange" @failed="getError" :show-error-message="false" scroll-to-error validate-first>

  17.       <p class="main_title">基础信息</p>

  18.       <div class="main_box">

  19.         <van-field

  20.           readonly

  21.           clickable

  22.           required

  23.           :rules="[{ required: true , message:'请选择申请时间' }]"

  24.           v-model="form.applyDate"

  25.           label="申请时间"

  26.           placeholder="请选择申请时间"

  27.           @click="showlasj = true"

  28.           input-align="right"

  29.           right-icon="arrow-down"

  30.         />

  31.         <van-popup v-model="showlasj" position="bottom">

  32.           <van-datetime-picker

  33.             v-model="currentDate"

  34.             type="date"

  35.             title="选择年月日"

  36.             :min-date="minDate"

  37.             :max-date="maxDate"

  38.             @confirm="onConfirmLasj"

  39.             @cancel="showlasj = false"

  40.           />

  41.         </van-popup>

  42.         <van-field

  43.           readonly

  44.           clickable

  45.           required

  46.           :rules="[{ required: true , message:'请选择资金支出类别' }]"

  47.           label="资金支出类别"

  48.           placeholder="请选择"

  49.           v-model="capitalExpenditureType"

  50.           @click="showcapital = true"

  51.           input-align="right"

  52.           right-icon="arrow-down"

  53.           label-width="auto"

  54.         />

  55.         <van-popup v-model="showcapital" position="bottom">

  56.           <van-picker

  57.             show-toolbar

  58.             :columns="capitalExpenditureTypeOptions"

  59.             @confirm="onConfirmCapital"

  60.             @cancel="showcapital = false"

  61.           />

  62.         </van-popup>

  63.         <van-field

  64.           readonly

  65.           required

  66.           label="支出总金额"

  67.           v-model="form.expenditureAmount"

  68.           placeholder="根据下方收款金额自动核算"

  69.           input-align="right"

  70.           label-width="auto"

  71.         />

  72.         <van-field name="radio" label="审批模式" input-align="right" autocomplete="off" required

  73.                    :rules="[{ required: true , message:'请选择审批模式' }]">

  74.           <template #input>

  75.             <van-radio-group v-model="form.approvalMode" direction="horizontal">

  76.               <van-radio name="1">线上审批</van-radio>

  77.               <van-radio name="2">线下审批</van-radio>

  78.             </van-radio-group>

  79.           </template>

  80.         </van-field>

  81.         <van-field

  82.           v-if="form.approvalMode==1"

  83.           readonly

  84.           clickable

  85.           label="审批流程"

  86.           placeholder="请选择"

  87.           v-model="form.approvalTemplateName"

  88.           @click="showtemplate = true"

  89.           input-align="right"

  90.           right-icon="arrow-down"

  91.           required

  92.           :rules="[{ required: true , message:'请选择项目流程' }]"

  93.         />

  94.         <van-popup v-model="showtemplate" position="bottom">

  95.           <van-picker

  96.             show-toolbar

  97.             value-key="name"

  98.             :columns="templateList"

  99.             @confirm="onConfirmTemplate"

  100.             @cancel="showtemplate = false"

  101.           />

  102.         </van-popup>

  103.       </div>

  104. 

  105.       <div class="main_box" style="margin-top: 10px;">

  106.         <van-field

  107.           label="转账附言"

  108.           v-model="form.remark"

  109.           type="textarea"

  110.           placeholder="请输入转账附言"

  111.           input-align="right"

  112.           rows="3"

  113.           label-width="auto"

  114.           required

  115.           :rules="[{ required: true , message:'请输入转账附言' }]"

  116.         />

  117.       </div>

  118. 

  119.       <div class="main_box" style="margin-top: 10px;">

  120.         <van-field label="说明情况" v-model="form.explainSituation" type="textarea" placeholder="请输入说明情况" input-align="right" rows="3" label-width="auto"/>

  121.       </div>

  122. 

  123.       <p class="main_title" v-if="capitalExpenditureOpen">关联项目</p>

  124.       <div class="main_box" v-if="capitalExpenditureOpen" style="margin-bottom: 10px;margin-top: 10px;position:relative;">

  125.         <van-field

  126.           readonly

  127.           clickable

  128.           label="项目名称"

  129.           placeholder="请选择"

  130.           v-model="projectForm.projectName"

  131.           @click="showproject = true"

  132.           input-align="right"

  133.           right-icon="arrow-down"

  134.           required

  135.           :rules="[{ required: true , message:'请选择项目名称' }]"

  136.         />

  137.         <van-popup v-model="showproject" position="bottom">

  138.           <van-picker

  139.             show-toolbar

  140.             :columns="projectList"

  141.             @confirm="onConfirmProject"

  142.             @cancel="showproject = false"

  143.           />

  144.         </van-popup>

  145.         <van-field required :rules="[{ required: true , message:'请输入承建单位' }]" v-model="projectForm.projectContractor" label="承建单位" placeholder="请输入承建单位" input-align="right" label-width="auto"/>

  146.         <van-field required :rules="[{ required: true , message:'请输入合同价款（元）' }]" v-model="projectForm.projectAmount" label="合同价款（元）" placeholder="请输入合同价款（元）" input-align="right" label-width="auto"/>

  147.         <van-field

  148.           readonly

  149.           clickable

  150.           label="工程款类型"

  151.           placeholder="请选择"

  152.           v-model="projectFundType"

  153.           @click="showFundType = true"

  154.           input-align="right"

  155.           right-icon="arrow-down"

  156.           required

  157.           :rules="[{ required: true , message:'请选择工程款类型' }]"

  158.         />

  159.         <van-popup v-model="showFundType" position="bottom">

  160.           <van-picker

  161.             show-toolbar

  162.             :columns="projectFundTypeOptions"

  163.             @confirm="onConfirmFundType"

  164.             @cancel="showFundType = false"

  165.           />

  166.         </van-popup>

  167.         <van-field required :rules="[{ required: true , message:'请输入工程发票号' }]" v-model="projectForm.projectBillNum" label="工程发票号" placeholder="请输入工程发票号" input-align="right" label-width="auto"/>

  168.       </div>

  169.       <p class="main_title" v-if="contractOpen">关联合同</p>

  170.       <div class="main_box" v-if="contractOpen" style="margin-bottom: 10px;margin-top: 10px;position:relative;">

  171.         <van-field

  172.           readonly

  173.           clickable

  174.           label="合同"

  175.           placeholder="请选择"

  176.           v-model="infoForm.name"

  177.           @click="showcontract = true"

  178.           input-align="right"

  179.           right-icon="arrow-down"

  180.           required

  181.           :rules="[{ required: true , message:'请选择项目名称' }]"

  182.         />

  183.         <van-popup v-model="showcontract" position="bottom">

  184.           <van-picker

  185.             show-toolbar

  186.             :columns="infoList"

  187.             @confirm="onConfirmContract"

  188.             @cancel="showcontract = false"

  189.           />

  190.         </van-popup>

  191.         <van-field required :rules="[{ required: true , message:'请输入合同编码' }]" v-model="infoForm.code" label="合同编码" placeholder="请输入合同编码" input-align="right" label-width="auto"/>

  192.         <van-field required :rules="[{ required: true , message:'请输入合同价款' }]" v-model="infoForm.totalAmount" label="合同价款（元）" placeholder="请输入合同价款（元）" input-align="right" label-width="auto"/>

  193.       </div>

  194.       <p class="main_title">付款方信息</p>

  195.       <div class="main_box">

  196.         <!--      <van-field label="付款方" v-model="form.payer" placeholder="请输入付款方" input-align="right" label-width="auto"/>-->

  197.         <van-field

  198.           readonly

  199.           clickable

  200.           label="付款方"

  201.           placeholder="请选择付款方"

  202.           v-model="form.payer"

  203.           @click="showpayer = true"

  204.           input-align="right"

  205.           right-icon="arrow-down"

  206.           label-width="auto"

  207.           required

  208.           :rules="[{ required: true , message:'请选择付款方' }]"

  209.         />

  210.         <van-popup v-model="showpayer" position="bottom">

  211.           <van-picker

  212.             show-toolbar

  213.             :columns="payerOptions"

  214.             @confirm="onConfirmPayer($event)"

  215.             @cancel="showpayer = false"

  216.           />

  217.         </van-popup>

  218.         <van-field :rules="[{ required: true , message:'请输入账户' }]" required label="付款方账户" v-model="form.payerAccount" placeholder="请输入账户" input-align="right" label-width="auto"/>

  219.       </div>

  220. 

  221.       <p class="main_title">收款方信息<van-button icon="plus" @click="addChargeItme(chargeItme.length)" size="mini" type="info" native-type="button" class="addFamily"/></p>

  222. <!--      <div class="main_title main_title_box">-->

  223. <!--        <p>收款方信息</p>-->

  224. <!--        <router-link :to="{name:'collectionApprovalAdd', params: {accountType:form.accountType,isPeers:form.isPeers,bankType:form.bankType,option:form}}">添加收款方</router-link>-->

  225. <!--        <van-button icon="plus" @click="addChargeItme(chargeItme.length)" size="mini" type="info" native-type="button" class="addFamily"/>-->

  226. <!--      </div>-->

  227.       <div class="main_box" style="margin-bottom: 15px;">

  228.         <van-cell title="收款账户类型" v-if="form.bankType==1">

  229.           <template #right-icon>

  230.             <van-radio-group direction="horizontal" v-model="form.accountType" @change="accountTypeChange" >

  231.               <van-radio name="1">公户</van-radio>

  232.               <van-radio name="2">私户</van-radio>

  233.             </van-radio-group>

  234.           </template>

  235.         </van-cell>

  236.         <van-cell title="是否与付款方同行" v-if="form.bankType==2||form.bankType==3||form.bankType==4" >

  237.           <template #right-icon>

  238.             <van-radio-group direction="horizontal" v-model="form.isPeers" @change="accountTypeChange1">

  239.               <van-radio name="Y">是</van-radio>

  240.               <van-radio name="N">否</van-radio>

  241.             </van-radio-group>

  242.           </template>

  243.         </van-cell>

  244.       </div>

  245.       <div :style="{position:'relative',padding: index == 0 ? '':'10px 0 0 0'}" v-for="(item, index) in chargeItme" :key="index">

  246.         <van-button icon="minus" size="mini" type="danger" class="deleteFamily" native-type="button" v-if="index!=0" @click="deleteChargeItme(index)" />

  247.         <div class="main_box" style="margin-bottom: 10px;position:relative;">

  248.           <van-field

  249.             readonly

  250.             clickable

  251.             label="收款方"

  252.             placeholder="请选择"

  253.             v-model="item.payee"

  254.             @click="item.showPayee = true"

  255.             input-align="right"

  256.             right-icon="arrow-down"

  257.             required

  258.             :rules="[{ required: true , message:'请选择收款方' }]"

  259.           />

  260.           <van-popup v-model="item.showPayee" position="bottom">

  261.             <van-picker

  262.               show-toolbar

  263.               :columns="payeeList"

  264.               @confirm="onConfirmPayee($event,index)"

  265.               @cancel="item.showPayee = false"

  266.             />

  267.           </van-popup>

  268.           <van-field required :rules="[{ required: true , message:'请输入账户' }]" v-model="item.payeeAccount" label="收款账户" placeholder="请输入账户" input-align="right" label-width="auto"/>

  269.           <van-field required :rules="[{ required: true , message:'请输入银行' }]" v-model="item.bankDeposit" label="开户银行" placeholder="请输入银行" input-align="right" label-width="auto"/>

  270.           <van-field required :rules="[{ required: true , message:'请输入金额' }]" v-model="item.incomeAmount" label="收入金额" placeholder="请输入金额" input-align="right" label-width="auto" @change="moneyChange"/>

  271.           <van-field

  272.             readonly

  273.             clickable

  274.             label="所属银行"

  275.             placeholder="请选择"

  276.             v-model="item.bankTypeText"

  277.             input-align="right"

  278.             required

  279.             :rules="[{ required: true , message:'请选择所属银行' }]"

  280.           />

  281.           <van-popup v-model="item.showbankType" position="bottom">

  282.             <van-picker

  283.               show-toolbar

  284.               :columns="bankTypeDictionaries"

  285.               @confirm="onConfirmBankType($event,index)"

  286.               @cancel="item.showbankType = false"

  287.             />

  288.           </van-popup>

  289.         </div>

  290.       </div>

  291.       <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>

  292.       <div class="main_box" style="padding: 5px 0 0 0;">

  293.         <van-cell value="收据" />

  294.         <van-uploader v-model="fileList1" :after-read="beforeRead('1')" @delete="deleteFile" style="margin-left:8px;"></van-uploader>

  295.         <van-cell title="发票" />

  296.         <van-uploader v-model="fileList2" :after-read="beforeRead('2')" @delete="deleteFile" style="margin-left:8px;"></van-uploader>

  297.         <van-cell title="其他" />

  298.         <van-uploader v-model="fileList3" :after-read="beforeRead('3')" @delete="deleteFile" style="margin-left:8px;"></van-uploader>

  299.       </div>

  300.       <div style="padding: 16px 0;">

  301.         <van-row>

  302.           <van-col span="12" align="center">

  303.             <van-button type="info" native-type="submit" @click="buttonType='update'" class="submitButton">修<i style="margin-right: 1em;"></i>改</van-button>

  304.           </van-col>

  305.           <van-col span="12" align="center">

  306.             <van-button type="info" native-type="submit" @click="buttonType='add'" class="submitButton">提<i style="margin-right: 1em;"></i>交</van-button>

  307.           </van-col>

  308.         </van-row>

  309.         <div class="clear"></div>

  310.       </div>

  311.     </van-form>

  312.   </div>

  313. </template>

  314. 

  315. <script>

  316.   import { getAccount , getTransfer , queryTransferDetail , listPayee , updateTransfer , getProjectto , listProject , addProjectto ,

  317.     customSubmit ,offlineCustomSubmit, getQmyeFlow ,listInfo ,getInfoto ,addInfoto,listTemplate,selectApprovalByTemplateId} from "@/api/onlineHome/bankAgriculture/paymentApproval";

  318.   import {

  319.     attachmentList,

  320.     commonAttach,

  321.     systemAttachment

  322.   } from "../../../../api/onlineHome/bankAgriculture/paymentApproval";

  323.   import request from '@/utils/request';

  324.   import Dialog from "vant/lib/dialog";

  325.   export default {

  326.     name: "approvalModify",

  327.     data() {

  328.       return {

  329.         showtemplate:false,

  330.         showcontract:false,

  331.         showcapital:false,

  332.         showpayee:false,

  333.         showlasj:false,

  334.         showbankType:false,

  335.         showproject:false,

  336.         showFundType:false,

  337.         showpayer:false,

  338. 

  339.         minDate: new Date(2000, 1, 1),

  340.         maxDate: new Date(2050, 12, 31),

  341.         currentDate: new Date(),

  342.         form:{},

  343. 

  344.         capitalExpenditureType:'',

  345.         payee:'',

  346.         bankType:'',

  347. 

  348.         buttonType:'a',

  349. 

  350.         wfydlxDictionaries:[],

  351.         jglxDictionaries:[],

  352.         sysDictionaries:[],

  353.         capitalExpenditureTypeOptions:[],

  354.         bankTypeDictionaries:[],

  355.         infoList:[],

  356.         projectList:[],

  357.         projectFundTypeOptions:[],

  358.         projectFundTypeDictionaries:[],

  359.         payerOptions:[],

  360. 

  361.         chargeItme:[],

  362.         chargeItmeShow:[],

  363. 

  364.         payeeList:[],

  365.         // 查询参数

  366.         queryParams: {

  367.           transferType:"",

  368.           orderByColumn: "id",

  369.           isAsc: "desc",

  370.         },

  371.         capitalExpenditureOpen:false,

  372.         contractOpen:false,

  373.         projectForm:{

  374.           projectId:null,

  375.           projectName:null,

  376.           projectContractor:null,

  377.           projectAmount:null,

  378.           projectBillNum:null,

  379.           projectFundType:'1',

  380.           outId:null,

  381.           ynType:'1'

  382.         },

  383.         infoForm:{

  384.           infoId:null,

  385.           name:null,

  386.           code:null,

  387.           totalAmount:null,

  388.           contractionId:null,

  389.           transferId:null

  390.         },

  391.         // 合同信息查询参数

  392.         queryContractionParams: {

  393.           pageNum: 1,

  394.           pageSize: 100,

  395.           contractionStatus: '1',

  396.           orderByColumn: "endTime",

  397.           isAsc: "desc",

  398.         },

  399.         projectFundType:'',

  400.         fileList1:[],

  401.         fileList2:[],

  402.         fileList3:[],

  403.         templateList:[],

  404.       };

  405.     },

  406.     activated:function(){

  407.       this.getDictionaries();

  408.     },

  409.     created() {

  410.       let queryParams={

  411.         pageNum: 1,

  412.         pageSize: 100,

  413.       }

  414.       this.getFileList();

  415.       listProject(queryParams).then(response => {

  416.         this.projectList = response.rows;

  417.         for (let i = 0; i < response.rows.length; i++) {

  418.           this.$set(this.projectList[i],"text",response.rows[i].projectName)

  419.           this.$set(this.projectList[i],"value",response.rows[i].id)

  420.         }

  421.       });

  422.       listInfo(this.queryContractionParams).then(response => {

  423.         this.infoList = response.rows;

  424.         for (let i = 0; i < response.rows.length; i++) {

  425.           this.$set(this.infoList[i],"text",response.rows[i].name)

  426.           this.$set(this.infoList[i],"value",response.rows[i].code)

  427.         }

  428.       });

  429.       this.getDicts("project_fund_type").then((response) => {

  430.         for (var i = 0; i < response.data.length; i++) {

  431.           this.projectFundTypeOptions.push({text: response.data[i].dictLabel, value: response.data[i].dictValue});

  432.         }

  433.         this.projectFundTypeDictionaries = response.data;

  434.       });

  435.       let params1={

  436.         accountType: "102",

  437.        // "params":{townAccountType:'0'},

  438.         status: "N",

  439.       }

  440.       getAccount(params1).then((response) => {

  441.         this.payerOptions = response.rows;

  442.         response.rows.map((res,index) => {

  443.           res['payerFrom'] = '1'

  444.           this.payerOptions[index].text = res.accountName;

  445.           this.payerOptions[index].value = res.id;

  446.         })

  447.       });

  448.       this.getDictionaries();

  449.     },

  450. 

  451.     methods: {

  452. 

  453.       goFlow(){

  454.         if(this.form.approvalMode == '1' && this.form.approvalTemplateId != undefined && this.form.approvalTemplateId != "undefined"){

  455.           window.location='approvalProcess3?approvalTemplateId='+this.form.approvalTemplateId+'&approvalMode='+this.form.approvalMode;

  456.         }else{

  457.             this.$notify({ type: 'danger', message: '无审批流程！' });

  458.         }

  459.       },

  460.       onConfirmTemplate(data){

  461.         selectApprovalByTemplateId(data.id).then(res => {

  462.           this.showtemplate = false;

  463.           if(res.approvalDetails.length>0){

  464.             this.form.approvalTemplateName = data.name

  465.             this.form.approvalTemplateId = data.id

  466.           }else{

  467.             this.form.approvalTemplateName = null

  468.             this.form.approvalTemplateId = null

  469.             this.$notify({ type: 'danger', message: '此流程无节点，无法选择！' });

  470.           }

  471.         })

  472.       },

  473.       getDictionaries(){

  474.         getTransfer(this.$route.query.id).then((response) => {

  475.           this.getDicts("capital_expenditure_type").then((res) => {

  476.             for (var i = 0; i < res.data.length; i++) {

  477.               this.capitalExpenditureTypeOptions.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});

  478.             }

  479.             this.capitalExpenditureType = this.selectDictLabel(res.data, response.data.capitalExpenditureType);

  480.           });

  481.           if(response.data.capitalExpenditureType==2){

  482.             this.capitalExpenditureOpen = true

  483.             let param={

  484.               'outId' : response.data.id,

  485.               'ynType' : '1'

  486.             }

  487.             getProjectto(param).then(res => {

  488.               this.projectFundType = this.selectDictLabel(this.projectFundTypeDictionaries, res.data.projectFundType);

  489.               this.projectForm = res.data

  490.             })

  491.           }else if(response.data.capitalExpenditureType==4){

  492.             this.contractOpen = true

  493.             let param={

  494.               'transferId' : response.data.id

  495.             }

  496.             getInfoto(param).then(res => {

  497.               this.infoForm = res.data

  498.             })

  499.           }else{

  500.             this.showproject = false

  501.           }

  502.           this.form = response.data;

  503.           this.getPayeeList();

  504.           let _this = this

  505.           let templateQueryParams = {

  506.             // 分页

  507.             pageNum: 1,

  508.             pageSize: 999,

  509.             type:'1'

  510.           };

  511.           listTemplate(templateQueryParams).then(rrr => {

  512.             this.templateList = rrr.rows;

  513.             this.templateList.map(ra => {

  514.               if(ra.id == response.data.approvalTemplateId){

  515.                 _this.form.approvalTemplateName = ra.name

  516.               }

  517.             })

  518.           });

  519.         });

  520.         queryTransferDetail(this.$route.query.id).then((response) => {

  521.           this.getDicts("bank_type_all").then(res => {

  522.             for (var i = 0; i < res.data.length; i++) {

  523.               this.bankTypeDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});

  524.             }

  525.             for (var j = 0 ; j < response.rows.length ; j++){

  526.               // response.rows[j].payeeText = response.rows[j].payee;

  527.               response.rows[j].bankTypeText = this.selectDictLabel(res.data, response.rows[j].bankType);

  528.               response.rows[j].showPayee = false;

  529.             }

  530.             this.chargeItme = response.rows;

  531.           });

  532.         });

  533.       },

  534.       getChange(){

  535.         if(this.buttonType == 'update'){

  536.           this.goUpdate();

  537.         }else if(this.buttonType == 'add'){

  538.           this.goAdd();

  539.         }

  540.       },

  541.       getError(e){

  542.         this.$notify({ type: 'danger', message: e.errors[0].message });

  543.       },

  544.       addChargeItme(index){

  545.         if(this.chargeItme.length>0&&this.chargeItme[this.chargeItme.length-1].payee == ''){

  546.           this.$notify({ type: 'danger', message: '请勿添加多个空列表信息' });

  547.           return;

  548.         }else if(this.chargeItme.length>0&&this.chargeItme[index-1].incomeAmount == ''){

  549.           this.$notify({ type: 'danger', message: '请输入收入金额！' });

  550.           return;

  551.         }else if(this.chargeItme.length>0&&this.chargeItme[index-1].payeeAccount == ''){

  552.           this.$notify({ type: 'danger', message: '请输入收款账户！' });

  553.           return;

  554.         }else if(this.chargeItme.length>0&&this.chargeItme[index-1].bankDeposit == ''){

  555.           this.$notify({ type: 'danger', message: '请输入开户银行！' });

  556.           return;

  557.         }else if(this.chargeItme.length>0&&this.chargeItme[index-1].bankType == ''){

  558.           this.$notify({ type: 'danger', message: '请选择所属银行！' });

  559.           return;

  560.         }

  561.         if(this.form.bankType == '2' && this.form.isPeers == 'N' && this.chargeItme.length>1){

  562.           this.$notify({ type: 'danger', message: '目前农商行仅支持单笔跨行转账，即仅能有一个收款方！' });

  563.         }else{

  564.         this.getDicts("bank_type_all").then(res => {

  565.           this.chargeItme.splice(index + 1, 0, {

  566.             payeeId: "", //收款方ID

  567.             payee: "", //收款方

  568.             payeeAccount: "", //收款账户

  569.             bankDeposit: "", //开户银行

  570.             incomeAmount: "", //收入金额

  571.             bankType: null, //所属银行

  572.             bankTypeText:"", //所属银行

  573.             showPayee:false,

  574.             showbankType:false

  575.           });

  576.         });}

  577.       },

  578.       getPayeeList() {

  579.         //普通转账

  580.         this.queryParams.isPeers = this.form.isPeers?this.form.isPeers:null

  581.         this.queryParams.accountType = this.form.accountType?this.form.accountType:null

  582.         this.queryParams.bankType = this.form.bankType

  583.         this.queryParams.status = "0"

  584.         listPayee(this.queryParams).then((response) => {

  585.           response.rows.map((res,index) => {

  586.             if(res.payeeType==1||res.payeeType==2){

  587.               res.text = res.payee;

  588.               res.value = res.id;

  589.               this.payeeList.push(res)

  590.             }

  591.           })

  592.         });

  593.       },

  594.       payeeDictLabel(datas, value) {

  595.         var actions = [];

  596.         Object.keys(datas).some((key) => {

  597.           if (datas[key].payeeId == ('' + value)) {

  598.             actions.push(datas[key].payee);

  599.             return true;

  600.           }

  601.         })

  602.         return actions.join('');

  603.       },

  604.       onConfirmCapital(data){

  605.         if (data.value == 2){

  606.           this.capitalExpenditureOpen = true;

  607.           this.contractOpen = false

  608.           this.infoForm = {};

  609.         }else if(data.value == 4){

  610.           this.capitalExpenditureOpen = false;

  611.           this.contractOpen = true

  612.           this.projectForm = {};

  613.         }else{

  614.           this.capitalExpenditureOpen = false;

  615.           this.contractOpen = false

  616.           this.projectForm = {};

  617.           this.infoForm = {};

  618.         }

  619.         this.capitalExpenditureType = data.text;

  620.         this.form.capitalExpenditureType = data.value;

  621.         this.showcapital = false;

  622.       },

  623.       onConfirmFundType(data){

  624.         this.projectForm.projectFundType = data.value;

  625.         this.projectFundType = data.text;

  626.         this.showFundType = false;

  627.       },

  628.       onConfirmProject(data){

  629.         this.projectList.map(res => {

  630.           if(res.projectName==data.text){

  631.             this.projectForm.projectId = res.id

  632.             this.projectForm.projectName = res.projectName

  633.             this.projectForm.projectContractor = res.projectContractor

  634.             this.projectForm.projectAmount = res.projectAmount

  635.           }

  636.         })

  637.         this.showproject = false;

  638.       },

  639.       onConfirmContract(data){

  640.         this.infoList.map(res => {

  641.           if(res.name==data.text){

  642.             this.infoForm.contractionId = res.id;

  643.             this.infoForm.name = res.name;

  644.             this.infoForm.code = res.code;

  645.             this.infoForm.totalAmount = res.totalAmount;

  646.           }

  647.         })

  648.         this.showcontract = false;

  649.       },

  650.       onConfirmPayee(data,index){

  651.         for (var i = 0 ; i < this.chargeItme.length ; i++){

  652.           this.chargeItme[i].showPayee = false;

  653.         }

  654.         this.chargeItme[index].payee = data.text;

  655.         this.chargeItme[index].payeeId = data.value;

  656.         this.payeeSelectChange(data.value , index)

  657.       },

  658.       onConfirmBankType(data,index){

  659.         for (var i = 0 ; i < this.chargeItme.length ; i++){

  660.           this.chargeItme[i].showbankType = false;

  661.         }

  662.         this.chargeItme[index].bankTypeText = data.text;

  663.         this.chargeItme[index].bankType = data.value;

  664.         this.chargeItme[index].showbankType = false;

  665.       },

  666.       onConfirmPayer(data){

  667.         this.form.payer = data.text;

  668.         this.form.cashierId = data.value;

  669.         this.showpayer = false;

  670.         this.selectChange(data.value)

  671.       },

  672.       onConfirmLasj(data){

  673.         this.form.applyDate = this.getNowFormatDate(data).substr(0,10);

  674.         this.showlasj = false;

  675.       },

  676.       accountTypeChange(e){

  677.         this.payeeList = [];

  678.         this.chargeItme = [];

  679.         this.queryParams.accountType = this.form.accountType

  680.         this.queryParams.isPeers = this.form.isPeers

  681.         this.queryParams.bankType = this.form.bankType

  682.         this.queryParams.status = "0"

  683.         listPayee(this.queryParams).then((response) => {

  684.           response.rows.map((res,index) => {

  685.             if(res.payeeType==1||res.payeeType==2){

  686.               response.rows[index].text = res.payee;

  687.               response.rows[index].value = res.id;

  688.               this.payeeList.push(res)

  689.             }

  690.           })

  691.         });

  692.       },

  693.       accountTypeChange1(e){

  694.         this.payeeList = [];

  695.         this.chargeItme = [];

  696.         this.queryParams.accountType = this.form.accountType

  697.         this.queryParams.isPeers = this.form.isPeers

  698.         this.queryParams.bankType = this.form.bankType

  699.         this.queryParams.status = "0"

  700.         listPayee(this.queryParams).then((response) => {

  701.           response.rows.map((res,index) => {

  702.             if(res.payeeType==1||res.payeeType==2){

  703.               response.rows[index].text = res.payee;

  704.               response.rows[index].value = res.id;

  705.               this.payeeList.push(res)

  706.             }

  707.           })

  708.         });

  709.       },

  710.       // 钱计算

  711.       moneyChange(input) {

  712.         let obj = {};

  713.         obj = this.chargeItme.find((account) => {

  714.           //model就是上面的数据源

  715.           return parseFloat(account.incomeAmount).toFixed(2) === input; //筛选出匹配数据

  716.         });

  717.         let total = 0;

  718.         this.chargeItme.forEach((money) => {

  719.           total = (parseFloat(total) + parseFloat(money.incomeAmount)).toFixed(2)

  720.         });

  721.         this.$set(this.form, "expenditureAmount", total);

  722.       },

  723.       goAdd(){

  724.         let _this = this

  725.         if(this.chargeItme.length<1){

  726.           this.$notify({ type: 'danger', message: '请添加收款方信息' });

  727.           return;

  728.         }

  729.         if(this.form.remark != null && this.form.remark.indexOf("|")!=-1){

  730.           this.$notify({ type: 'danger', message: '转账附言禁止包含！' });

  731.           return;

  732.         }

  733.         if(this.form.capitalExpenditureType==2){

  734.           if(this.projectForm.projectName==""||this.projectForm.projectName==null){

  735.             this.$notify({ type: 'danger', message: '请选择项目名称！' });

  736.             return;

  737.           }

  738.           if(this.projectForm.projectBillNum==""||this.projectForm.projectBillNum==null){

  739.             this.$notify({ type: 'danger', message: '请输入工程发票号！' });

  740.             return;

  741.           }

  742.         }

  743.         if(this.form.capitalExpenditureType==4){

  744.           if(this.infoForm.name==""||this.infoForm.name==null){

  745.             this.$notify({ type: 'danger', message: '请选择合同名称！' });

  746.             return;

  747.           }

  748.           if(this.infoForm.code==""||this.infoForm.code==null){

  749.             this.$notify({ type: 'danger', message: '请输入合同编码！' });

  750.             return;

  751.           }

  752.           if(this.infoForm.totalAmount==""||this.infoForm.totalAmount==null){

  753.             this.$notify({ type: 'danger', message: '请输入合同价款！' });

  754.             return;

  755.           }

  756.         }

  757.         if(

  758.           this.fileList1.length==0&&

  759.           this.fileList2.length==0&&

  760.           this.fileList3.length==0){

  761.           Dialog.confirm({

  762.             title: '提示',

  763.             message: '此申请单中未上传任何附件，是否确认提交？',

  764.           })

  765.             .then(() => {

  766.                 this.saveRelease()

  767.             })

  768.             .catch(() => {

  769.               return false;

  770.             });

  771.         }else{

  772.           this.saveRelease()

  773.         }

  774.       },

  775.       saveRelease(){

  776.         let _this = this;

  777.         this.$set(this.form, "payeeList", this.chargeItme);

  778.         this.$set(this.form, "bankTypeList", this.chargeItme);

  779.         this.$set(this.form, "accountTypeList", this.chargeItme);

  780.         this.$set(this.form, "transferStatusList", this.chargeItme);

  781. 

  782.         updateTransfer(this.form).then(response => {

  783.           this.projectForm.outId = this.form.id

  784.           this.infoForm.transferId = this.form.id

  785.           this.$set(this.projectForm, "ynType", '1');

  786.           if(this.form.capitalExpenditureType==2){

  787.             addProjectto(this.projectForm).then(res => {

  788.               if(this.form.approvalMode === '1'){

  789.                 customSubmit(this.form.id).then(res => {

  790.                   this.$toast.success('提交成功');

  791.                   setTimeout(function(){

  792.                     _this.$router.push('/yinnong/approvalList')

  793.                   },1000)

  794.                 })

  795.               }else{

  796.                 offlineCustomSubmit(this.form.id).then(res => {

  797.                   this.$toast.success('提交成功');

  798.                   setTimeout(function(){

  799.                     _this.$router.push('/yinnong/approvalList')

  800.                   },1000)

  801.                 })

  802.               }

  803.             })

  804.           }else if(this.form.capitalExpenditureType==4){

  805.             addInfoto(this.infoForm).then(res => {

  806.               if(this.form.approvalMode === '1'){

  807.                 customSubmit(this.form.id).then(res => {

  808.                   this.$toast.success('提交成功');

  809.                   setTimeout(function(){

  810.                   _this.$router.push('/yinnong/approvalList')

  811.                 },1000)

  812.                 })

  813.               }else{

  814.                 offlineCustomSubmit(this.form.id).then(res => {

  815.                   this.$toast.success('提交成功');

  816.                   setTimeout(function(){

  817.                     _this.$router.push('/yinnong/approvalList')

  818.                   },1000)

  819.                 })

  820.               }

  821.             })

  822.           }else{

  823.             if(this.form.approvalMode === '1'){

  824.               customSubmit(this.form.id).then(res => {

  825.                 this.$toast.success('提交成功');

  826.                 setTimeout(function(){

  827.                   _this.$router.push('/yinnong/approvalList')

  828.                 },1000)

  829.               })

  830.             }else{

  831.               offlineCustomSubmit(this.form.id).then(res => {

  832.                 this.$toast.success('提交成功');

  833.                 setTimeout(function(){

  834.                   _this.$router.push('/yinnong/approvalList')

  835.                 },1000)

  836.               })

  837.             }

  838.           }

  839.         });

  840.       },

  841.       goUpdate(){

  842.         let _this = this

  843.         if(this.chargeItme.length<1){

  844.           this.$notify({ type: 'danger', message: '请添加收款方信息' });

  845.           return;

  846.         }

  847.         if(this.form.remark != null && this.form.remark.indexOf("|")!=-1){

  848.           this.$notify({ type: 'danger', message: '转账附言禁止包含！' });

  849.           return;

  850.         }

  851.         if(this.form.capitalExpenditureType==2){

  852.           if(this.projectForm.projectName==""||this.projectForm.projectName==null){

  853.             this.$notify({ type: 'danger', message: '请选择项目名称！' });

  854.             return;

  855.           }

  856.           if(this.projectForm.projectBillNum==""||this.projectForm.projectBillNum==null){

  857.             this.$notify({ type: 'danger', message: '请输入工程发票号！' });

  858.             return;

  859.           }

  860.         }

  861.         if(this.form.capitalExpenditureType==4){

  862.           if(this.infoForm.name==""||this.infoForm.name==null){

  863.             this.$notify({ type: 'danger', message: '请选择合同名称！' });

  864.             return;

  865.           }

  866.           if(this.infoForm.code==""||this.infoForm.code==null){

  867.             this.$notify({ type: 'danger', message: '请输入合同编码！' });

  868.             return;

  869.           }

  870.           if(this.infoForm.totalAmount==""||this.infoForm.totalAmount==null){

  871.             this.$notify({ type: 'danger', message: '请输入合同价款！' });

  872.             return;

  873.           }

  874.         }

  875.         this.$set(this.form, "payeeList", this.chargeItme);

  876.         this.$set(this.form, "bankTypeList", this.chargeItme);

  877.         this.$set(this.form, "accountTypeList", this.chargeItme);

  878.         this.$set(this.form, "transferStatusList", this.chargeItme);

  879.         updateTransfer(this.form).then(response => {

  880.           this.projectForm.outId = this.form.id

  881.           this.infoForm.transferId = this.form.id

  882.           this.$set(this.projectForm, "ynType", '1');

  883. 

  884.           if(this.form.capitalExpenditureType==2){

  885.             addProjectto(this.projectForm).then(res => {

  886.               this.$toast.success('保存成功');

  887.               setTimeout(function(){

  888.                  _this.$router.push('/yinnong/approvalList')

  889.               },1000)

  890.             })

  891.           } else if(this.form.capitalExpenditureType==4){

  892.             addInfoto(this.infoForm).then(res => {

  893.               this.$toast.success('保存成功');

  894.               setTimeout(function(){

  895.                  _this.$router.push('/yinnong/approvalList')

  896.               },1000)

  897.             })

  898.           }else{

  899.             this.$toast.success('保存成功');

  900.             setTimeout(function(){

  901.                _this.$router.push('/yinnong/approvalList')

  902.             },1000)

  903.           }

  904. 

  905.         });

  906.       },

  907.       payeeSelectChange(select, i) {

  908.         let obj = {};

  909.         let fuzhitype = 0;

  910.         let _this = this

  911.         obj = this.payeeList.find((account) => {

  912.           //model就是上面的数据源

  913.           return account.id === select ; //筛选出匹配数据

  914.         });

  915.         if(this.chargeItme != [] && this.chargeItme.length>1){

  916.           this.chargeItme.some((value, index) => {

  917.             if(value.payeeAccount != undefined &&value.payeeAccount != '' && obj.payeeAccount == value.payeeAccount&&index!=i){

  918.               fuzhitype = 2;

  919.               return true;

  920.             }

  921.             if(_this.form.isPeers!=undefined&&_this.form.isPeers!=null&&_this.form.isPeers=='N'){

  922. 

  923.             }else{

  924.               if(obj.bankType==1&&value.accountType != undefined &&value.accountType != '' && obj.accountType != value.accountType&&index!=i){

  925.                 fuzhitype = 1;

  926.                 return true;

  927.               }

  928.             }

  929.           });

  930.         }

  931.         if(fuzhitype == 0){

  932.           this.$set(this.chargeItme[i], "payee",obj.payee)

  933.           this.$set(this.chargeItme[i], "bankType", obj.bankType)

  934.           this.$set(this.chargeItme[i], "payeeId", obj.id);

  935.           this.$set(this.chargeItme[i], "payeeAccount", obj.payeeAccount);

  936.           this.$set(this.chargeItme[i], "bankDeposit", obj.bankDeposit);

  937.           this.$set(this.chargeItme[i], "accountType", obj.accountType);

  938.           this.$set(this.chargeItme[i], "payeePaymentLines", obj.payeePaymentLines);

  939.           _this.bankTypeDictionaries.map(rr => {

  940.             if(rr.value==obj.bankType){

  941.               this.$set(this.chargeItme[i], "bankTypeText", rr.text);

  942.             }

  943.           })

  944.         }else if(fuzhitype == 1){

  945.           this.$set(this.chargeItme[i], "payee",'')

  946.           this.$set(this.chargeItme[i], "bankType",'')

  947.           this.$set(this.chargeItme[i], "payeeId", '');

  948.           this.$set(this.chargeItme[i], "payeeAccount", '');

  949.           this.$set(this.chargeItme[i], "bankDeposit", '');

  950.           this.$set(this.chargeItme[i], "accountType", '');

  951.           this.$set(this.chargeItme[i], "payeePaymentLines", '');

  952.           this.$set(this.chargeItme[i], "bankTypeText", '');

  953.           this.$notify({ type: 'danger', message: '请选择账户类型相同的收款方！' });

  954.         }else if(fuzhitype == 2){

  955.           this.$set(this.chargeItme[i], "payee",'')

  956.           this.$set(this.chargeItme[i], "bankType",'')

  957.           this.$set(this.chargeItme[i], "payeeId", '');

  958.           this.$set(this.chargeItme[i], "payeeAccount", '');

  959.           this.$set(this.chargeItme[i], "bankDeposit", '');

  960.           this.$set(this.chargeItme[i], "accountType", '');

  961.           this.$set(this.chargeItme[i], "payeePaymentLines", '');

  962.           this.$set(this.chargeItme[i], "bankTypeText", '');

  963.           this.$notify({ type: 'danger', message: '收款方已存在！' });

  964.         }

  965.       },

  966.       selectChange(select) {

  967.         let obj = {};

  968.         obj = this.payerOptions.find((account) => {

  969.           //model就是上面的数据源

  970.           return account.id === select; //筛选出匹配数据

  971.         });

  972.         if(obj.accountPassword != null && obj.accountPassword != "" &&

  973.           obj.bankType != null && obj.bankType != ""){

  974.           this.$set(this.form, "bookId", obj.bookId);

  975.           this.$set(this.form, "deptId", obj.deptId);

  976.           this.$set(this.form, "cashierId", obj.id);

  977.           this.$set(this.form, "payer", obj.accountName);

  978.           this.$set(this.form, "payerAccount", obj.bankAccountNumber);

  979.           this.$set(this.form, "operatorCode", obj.operatorCode);

  980.           this.$set(this.form, "enterpriseCode", obj.enterpriseCode);

  981.           this.$set(this.form, "bankType", obj.bankType);

  982.           this.$set(this.form, "payerFrom", '1');

  983.           if(obj.bankType==1){

  984.             this.form.accountType = "1"

  985.             this.form.isPeers = null

  986.             this.accountTypeChange();

  987.           }else if(obj.bankType==2||obj.bankType==4){

  988.             this.form.accountType = null

  989.             this.form.isPeers = "Y"

  990.             this.accountTypeChange1();

  991.           }

  992.         }else{

  993.           if(obj.payerFrom==1){

  994.             this.diglogStatus = false;

  995.             this.$notify({ type: 'danger', message: "请完善付款方“操作员代码”、“企业编码”、“支付口令”等信息！" });

  996.             this.$set(this.form,"payer","")

  997.             this.$set(this.form,"payerAccount","")

  998.           }else{

  999.             this.$set(this.form, "payerFrom", obj.parerFrom);

  1000.             if(obj.operatorCode!=null&&obj.operatorCode!=''){

  1001.               this.$set(this.form, "operatorCode", obj.operatorCode);

  1002.             }else{

  1003.               this.$set(this.form, "operatorCode", '');

  1004.             }

  1005.             if(obj.enterpriseCode!=null&&obj.enterpriseCode!=''){

  1006.               this.$set(this.form, "enterpriseCode", obj.enterpriseCode);

  1007.             }else{

  1008.               this.$set(this.form, "enterpriseCode", '');

  1009.             }

  1010.             if(obj.accountPassword!=null&&obj.accountPassword!=''){

  1011.               this.$set(this.form, "accountPassword", obj.accountPassword);

  1012.             }else{

  1013.               this.$set(this.form, "accountPassword", '');

  1014.             }

  1015.             this.$set(this.form, "bookId",'');

  1016.             this.$set(this.form, "deptId", '');

  1017.             this.$set(this.form, "cashierId", obj.id);

  1018.             this.$set(this.form, "payer", obj.accountName);

  1019.             if(obj.payerFrom==6){

  1020.               getQmyeFlow(obj.bankAccountNumber).then((response) => {

  1021.                 this.$set(this.form, "payerAccount", response.data);

  1022.               });

  1023.             }else {

  1024.               this.$set(this.form, "payerAccount", obj.bankAccountNumber);

  1025.             }

  1026.           }

  1027.         }

  1028.       },

  1029.       beforeRead(obj) {

  1030.         return (file) =>{

  1031.           let params1 = new FormData();

  1032.           params1.append("tableId", this.form.id);

  1033.           params1.append("tableName", "t_yinnong_transfer");

  1034.           params1.append("bizPath", "transfer");

  1035.           params1.append("fileType", obj);

  1036.           params1.append("file", file.file);

  1037.           commonAttach(params1).then((r1) => {

  1038.             file.id=r1.id;

  1039.             file.fileUrl = r1.fileUrl;

  1040.           })

  1041.         }

  1042.       },

  1043.       deleteFile(file){

  1044.         systemAttachment(file.id).then((res) => {});

  1045.       },

  1046.     

  1047.       getFileList(){

  1048.         let oData1= {

  1049.           tableId: this.$route.query.id,

  1050.           tableName: "t_yinnong_transfer",

  1051.           bizPath: "transfer",

  1052.           fileType: "1",

  1053.         }

  1054.         attachmentList(oData1).then(res => {

  1055.           let arr = [];

  1056.           res.rows.map(r => {

  1057.             let baseUrl = location.protocol+"//"+location.host+request.defaults.baseURL;

  1058.             arr.push({"url":baseUrl + r.fileUrl,"file":new File([],r.fileName,{}),"id":r.id})

  1059.           })

  1060.           this.fileList1 = arr;

  1061.           this.$forceUpdate()

  1062.         })

  1063.         let oData2= {

  1064.           tableId: this.$route.query.id,

  1065.           tableName: "t_yinnong_transfer",

  1066.           bizPath: "transfer",

  1067.           fileType: "2",

  1068.         }

  1069.         attachmentList(oData2).then(res => {

  1070.           let arr = [];

  1071.           res.rows.map(r => {

  1072.             let baseUrl = location.protocol+"//"+location.host+request.defaults.baseURL

  1073.             arr.push({"url":baseUrl + r.fileUrl,"file":new File([],r.fileName,{}),"id":r.id})

  1074.           })

  1075.           this.fileList2 = arr;

  1076.           this.$forceUpdate()

  1077.         })

  1078.         let oData3= {

  1079.           tableId: this.$route.query.id,

  1080.           tableName: "t_yinnong_transfer",

  1081.           bizPath: "transfer",

  1082.           fileType: "3",

  1083.         }

  1084.         attachmentList(oData3).then(res => {

  1085.           let arr = [];

  1086.           res.rows.map(r => {

  1087.             let baseUrl = location.protocol+"//"+location.host+request.defaults.baseURL

  1088.             arr.push({"url":baseUrl + r.fileUrl,"file":new File([],r.fileName,{}),"id":r.id})

  1089.           })

  1090.           this.fileList3 = arr;

  1091.           this.$forceUpdate()

  1092.         })

  1093.       },

  1094.       goBack(){

  1095.         this.$router.push({path:'/yinnong/approvalList'})

  1096.       },

  1097.       //删除家庭成员

  1098.       deleteChargeItme(index){

  1099.         this.chargeItme.splice(index,1)

  1100.       },

  1101.     },

  1102.     watch: {

  1103.       $route (to, from ) {

  1104.         // 监听路由变化, 实现类似 小程序的 onShow 事件

  1105.         if (to.path === '/yinnong/approvalModify') {

  1106.           // do anything you want

  1107.           if (this.$route.params.payeeForm){

  1108.             this.chargeItme.push(this.$route.params.payeeForm)

  1109.           }

  1110.         }

  1111.       }

  1112.     },

  1113.   }

  1114. </script>

  1115. 

  1116. <style scoped lang="scss">

  1117.   .app-container {

  1118.     padding: 2% 0;

  1119.   }

  1120.   .main_title_box{

  1121.     display: flex;

  1122.     justify-content: space-between;

  1123.     align-items: center;

  1124.   }

  1125.   .main_title{

  1126.     font-size: 0.4rem;

  1127.     color: #1D6FE9;

  1128.     margin: 0.2rem 6%;

  1129.     position: relative;

  1130.     /*a{*/

  1131.     /*  background: #1989fa;*/

  1132.     /*  color: #ffffff;*/

  1133.     /*  padding: 0.05rem 0.3rem;*/

  1134.     /*  border-radius: 5PX;*/

  1135.     /*}*/

  1136.   }

  1137.   .main_box{

  1138.     width: 96%;

  1139.     margin: 0 auto;

  1140.     border-radius: 6px;

  1141.     box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);

  1142.     overflow: hidden;

  1143.     background-color: #FFF;

  1144.   }

  1145.   .submitButton{

  1146.     width: 80%;

  1147.     margin: 0 auto;

  1148.     background-color: #1D6FE9;

  1149.   }

  1150. 

  1151.   .addFamily{

  1152.     position: absolute;

  1153.     top: -2px;

  1154.     right: 0;

  1155.     border-radius: 50%;

  1156.   }

  1157.   .deleteFamily{

  1158.     position: absolute;

  1159.     top: 0rem;

  1160.     right: 6%;

  1161.     z-index: 9;

  1162.     border-radius: 50%;

  1163.   }

  1164. </style>