tire-platform-ui/src/views/iosBasicData/bcorps/detailsPage.vue

<template>
  <dev>
    <el-card class="box-card">
      <el-form ref="userDataForm" :rules="rules" :model="formData" size="medium" label-width="100px">
        <div class="head">
          <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
            @click="backToList">返回列表
          </el-button>
          <h4 style="margin: 0">往来单位</h4>
          <dev>
            <el-button type="primary" @click="submitForm">保存</el-button>
          </dev>
        </div>
        <el-row style="display: flex; flex-direction: row; align-items: center;">
          <div style="width: 8px; height: 20px; border-radius: 2px; background-color: #bd3124; margin-right: 6px;"></div>
          <h4>客户资料（必填）</h4>
        </el-row>
        <el-row gutter="15">
          <el-col :span="8">
            <el-form-item label="客户分类" prop="corpType">
              <!-- <el-select v-model="formData.corpType" placeholder="请选择客户分类" clearable :style="{ width: '100%' }">
              <el-option v-for="(item, index) in field102Options" :key="index" :label="item.label" :value="item.value"
                :disabled="item.disabled"></el-option>
            </el-select> -->
              <avue-input-tree :check-strictly="true" @change="corpTypeChange" multiple v-model="formData.corpTypeList"
                placeholder="请选择内容" :props="{ label: 'cnName', value: 'id' }" :dic="customTypeData"
                :style="{ width: '100%' }"></avue-input-tree>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户编号" prop="code">
              <!-- <el-select v-model="formData.code" placeholder="请选择客户编号" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in field103Options" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select> -->
              <el-input v-model="formData.code" placeholder="请选择客户编号" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户简称" prop="shortName">
              <!-- <el-select v-model="formData.shortName" placeholder="请选择客户简称" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in field104Options" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select> -->
              <el-input v-model="formData.shortName" placeholder="请选择客户简称" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="客户名称" prop="cnName">
              <el-input v-model="formData.cnName" placeholder="请输入英文名称" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="信用代码" prop="enName">
              <el-input v-model="formData.uscc" placeholder="请输入统一社会信用代码" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="中文地址" prop="cnAddr">
              <el-input v-model="formData.cnAddr" placeholder="请输入中文地址" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!-- <el-form-item label="英文地址" prop="enAddr">
              <el-input v-model="formData.enAddr" placeholder="请输入英文地址" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item> -->
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="formData.email" placeholder="请输入邮箱" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row gutter="15">
          <el-col :span="8">
            <el-form-item label="英文名称" prop="enName">
              <el-input v-model="formData.enName" placeholder="请输入英文名称" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="英文地址" prop="enAddr">
              <el-input v-model="formData.enAddr" placeholder="请输入英文地址" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>
    </el-card>



    <el-card class="box-card">
      <el-form :model="formData" size="medium" label-width="100px">
        <el-row gutter="15">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="客户详情" name="kgxq">
              <el-col :span="8">
                <el-form-item label="企业类型" prop="enterpriseType">
                  <el-select v-model="formData.enterpriseType" placeholder="请输入信用等级" clearable :style="{ width: '100%' }">
                    <el-option v-for="(item, index) in enterpriseTypeDict" :key="index" :label="item.dictValue"
                      :value="item.dictKey" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户来源" prop="sourceType">
                  <el-input v-model="formData.sourceType" placeholder="请输入客户来源" clearable :style="{ width: '100%' }">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="国家" prop="cntyCode">
                  <search-query ref="SearchQuery" :datalist="cntyOptions" title="国家" :filterable="true" :clearable="true"
                    :remote="true" :forParameter="{ key: 'id', label: 'cnName', value: 'code', disabled: 'status' }"
                    :disabledStatus="1":selectValue="formData.cntyCode" @remoteMethod="bcountrysListfun" @corpChange="bcountrysChange">
                    <bcountrys></bcountrys>
                  </search-query>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="优势航线" prop="advantageRoute">
                  <el-input v-model="formData.advantageRoute" placeholder="请输入优势航线" clearable :style="{ width: '100%' }">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="海关号" prop="customsCode">
                  <el-input v-model="formData.customsCode" placeholder="请输入海关号" clearable :style="{ width: '100%' }">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="状态" prop="status">
                  <el-select v-model="formData.status" placeholder="请选择状态" clearable :style="{ width: '100%' }">
                    <el-option v-for="(item, index) in statusOptions" :key="index" :label="item.label" :value="item.value"
                      :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="负责人" prop="mgrName">
                  <el-input v-model="formData.mgrName" placeholder="请输入负责人" clearable :style="{ width: '100%' }">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="联系人电话" prop="tel">
                  <el-input v-model="formData.tel" placeholder="请输入联系人电话" clearable :style="{ width: '100%' }">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="传真" prop="fax">
                  <el-input v-model="formData.fax" placeholder="请输入传真" clearable :style="{ width: '100%' }">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="SCAC码" prop="scacCode">
                  <el-input v-model="formData.scacCode" placeholder="请输入SCAC码" clearable :style="{ width: '100%' }">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="维护人员" prop="maintenanceStaffName">
                  <el-input v-model="formData.maintenanceStaffName" placeholder="请输入维护人员" clearable
                    :style="{ width: '100%' }">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="业务员" prop="salesId">
                  <!-- <el-input v-model="formData.salesId" placeholder="请输入业务员" clearable :style="{ width: '100%' }"> -->
                  <el-select v-model="formData.salesId" filterable @change="salesChange" placeholder="请选择业务员" clearable
                    :style="{ width: '100%' }">
                    <el-option v-for="(item, index) in userOptions" :key="index" :label="item.realName" :value="item.id"
                      :disabled="item.disabled"></el-option>
                  </el-select>
                  </el-input>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
              <el-form-item label="所属单位编号" prop="field125">
                <el-input v-model="formData.field125" placeholder="请输入所属单位编号" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col> -->
              <el-col :span="8">
                <el-form-item label="所属单位名称" prop="corpName">
                  <el-input v-model="formData.corpName" placeholder="请输入名称" clearable :style="{ width: '100%' }">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="信用等级" prop="creditLevel">
                  <el-select v-model="formData.creditLevel" placeholder="请输入信用等级" clearable :style="{ width: '100%' }">
                    <el-option v-for="(item, index) in creditLevelDict" :key="index" :label="item.dictValue"
                      :value="item.dictKey" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="PS规则" prop="psRate">
                  <!-- <el-input v-model="formData.psRate" placeholder="请输入PS规则" clearable :style="{ width: '100%' }"> -->
                  <el-input-number v-model="formData.psRate" controls-position="right" @change="handleChange" :min="0"
                    :precision="2" :step="1" :style="{ width: '100%' }"></el-input-number>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="存在HP/S" prop="isPs">
                  <el-switch v-model="formData.isPs" :active-value="1" :inactive-value="0" active-text="开启"
                    inactive-text="关闭"></el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="允许负大于收" prop="psAllowLargeCredit">
                  <el-switch v-model="formData.psAllowLargeCredit" :active-value="1" :inactive-value="0" active-text="开启"
                    inactive-text="关闭"></el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="详情信息" prop="details">
                  <el-input v-model="formData.details" type="textarea" placeholder="请输入详情信息"
                    :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
                </el-form-item>
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="财务信息" name="cwxx">
              <!-- <el-row style="display: flex; flex-direction: row; align-items: center;">
              <div style="width: 8px; height: 20px; border-radius: 2px; background-color: #bd3124; margin-right: 6px;"></div>
              <h4>人民币（RMB）</h4>
            </el-row>
            <el-row gutter="15">
              <el-col :span="8">
                <el-form-item label="账号名称" prop="field136">
                  <el-input v-model="formData.field136" placeholder="请输入账号名称" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="开户银行" prop="field137">
                  <el-input v-model="formData.field137" placeholder="请输入开户银行" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="银行账号" prop="field138">
                  <el-input v-model="formData.field138" placeholder="请输入银行账号" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="CNAPS" prop="field139">
                  <el-input v-model="formData.field139" placeholder="请输入CNAPS" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="银行地址" prop="field140">
                  <el-input v-model="formData.field140" placeholder="请输入银行地址" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="display: flex; flex-direction: row; align-items: center;">
              <div style="width: 8px; height: 20px; border-radius: 2px; background-color: #bd3124; margin-right: 6px;"></div>
              <h4>外币银行信息</h4>
            </el-row>
            <el-row gutter="15">
              <el-col :span="8">
                <el-form-item label="账号名称" prop="accountName">
                  <el-input v-model="formData.accountName" placeholder="请输入账号名称" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="开户银行" prop="accountBank">
                  <el-input v-model="formData.accountBank" placeholder="请输入开户银行" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="银行账号" prop="accountNo">
                  <el-input v-model="formData.accountNo" placeholder="请输入银行账号" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="Swift Code" prop="swiftCode">
                  <el-input v-model="formData.swiftCode" placeholder="请输入Swift Code" clearable
                    :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="银行地址" prop="address">
                  <el-input v-model="formData.address" placeholder="请输入银行地址" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row> -->
              <el-row style="display: flex; flex-direction: row; align-items: center;">
                <div style="width: 8px; height: 20px; border-radius: 2px; background-color: #bd3124; margin-right: 6px;">
                </div>
                <h4>授信信息</h4>
                <el-form-item label="授信状态" prop="creditStatus">
                  <el-switch style="margin-bottom = 0" :active-value="1" :inactive-value="0"
                    v-model="formData.creditStatus" active-text="开启" inactive-text="关闭"></el-switch>
                </el-form-item>
              </el-row>
              <el-row gutter="15">
                <el-col :span="8">
                  <el-form-item label="授信额度" prop="creditGrant">
                    <el-input v-model="formData.creditGrant" placeholder="请输入授信额度" clearable :style="{ width: '100%' }">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="授信天数" prop="creditDay">
                    <el-input v-model="formData.creditDay" placeholder="请输入授信天数" clearable :style="{ width: '100%' }">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="授信利率" prop="creditRate">
                    <el-input v-model="formData.creditRate" placeholder="请输入授信利率" clearable :style="{ width: '100%' }">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- <el-row style="display: flex; flex-direction: row; align-items: center;">
              <div style="width: 8px; height: 20px; border-radius: 2px; background-color: #bd3124; margin-right: 6px;"></div>
              <h4>财务联系人</h4>
            </el-row>
            <el-row gutter="15">
              <el-col :span="8">
                <el-form-item label="联系人" prop="field155">
                  <el-input v-model="formData.field155" placeholder="请输入联系人" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="联系电话" prop="field156">
                  <el-input v-model="formData.field156" placeholder="请输入联系电话" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="部门职务" prop="field157">
                  <el-input v-model="formData.field157" placeholder="请输入部门职务" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row> -->
            </el-tab-pane>
            <el-tab-pane label="客户联系人" name="khlxk">
              <el-button type="primary" @click="corpsAttnAdd">新建</el-button>
              <el-table :data="formData.corpsAttnList"
                :header-cell-style="{ background: '#ecf5ff', color: '#232526', fontSize: '12px' }" stripe
                style="width: 100%">
                <el-table-column prop="code" label="编号" width="180" />
                <el-table-column prop="cname" label="名称" width="180" />
                <el-table-column prop="attn" label="联系方式" width="180" />
                <el-table-column prop="tel" label="电话" width="180" />
                <el-table-column prop="position" label="岗位" width="180" />
                <el-table-column prop="addr" label="公司地址" width="180" />
                <el-table-column prop="sex" label="性别" width="180" />
                <el-table-column prop="email" label="邮箱地址" width="180" />
                <el-table-column prop="status" label="状态" width="180">
                  <template slot-scope="scope">
                    <span v-if="scope.row.status == 0">正常</span>
                    <span v-if="scope.row.status == 1">启用</span>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="180">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="corpsAttnHandle(scope)">编辑</el-button>
                    <el-button type="text" size="small" @click="corpsAttnDelete(scope)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="银行信息" name="yhxx">
              <el-button type="primary" @click="corpsAttnAdd">新建</el-button>
              <el-table :data="formData.corpsBankList"
                :header-cell-style="{ background: '#ecf5ff', color: '#232526', fontSize: '12px' }" stripe
                style="width: 100%">
                <!-- <el-table-column prop="uscc" label="统一社会信用代码" width="180" /> -->
                <el-table-column prop="accountName" label="账户名称" width="180" />
                <el-table-column prop="accountBank" label="开户银行" width="180" />
                <el-table-column prop="accountNo" label="银行账号" width="180" />
                <el-table-column prop="curId" label="币别" width="180" />
                <el-table-column prop="subjectNumber" label="科目编码" width="180" />
                <el-table-column prop="address" label="地址" width="180" />
                <el-table-column prop="swiftCode" label="Swift Code" width="180" />
                <el-table-column prop="cnapsCode" label="CNAPS" width="180" />
                <el-table-column prop="status" label="状态">
                  <template slot-scope="scope">
                    <span v-if="scope.row.status == 0">正常</span>
                    <span v-if="scope.row.status == 1">启用</span>
                  </template>
                </el-table-column>
                <el-table-column prop="remarks" label="备注" width="180" />
                <el-table-column fixed="right" label="操作" width="180">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="corpsAttnHandle(scope)">编辑</el-button>
                    <el-button type="text" size="small" @click="corpsAttnDelete(scope)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="附件" name="fj">
              <el-button type="primary" @click="corpsAttnAdd">新建</el-button>
              <el-table :data="formData.corpsFilesList"
                :header-cell-style="{ background: '#ecf5ff', color: '#232526', fontSize: '12px' }" stripe
                style="width: 100%">
                <el-table-column prop="sort" label="排序" />
                <el-table-column prop="fileName" label="文件名" />
                <el-table-column prop="url" label="文件地址" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <el-link type="primary" :href="scope.row.url">{{ scope.row.url }}</el-link>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态">
                  <template slot-scope="scope">
                    <span v-if="scope.row.status == 0">正常</span>
                    <span v-if="scope.row.status == 1">启用</span>
                  </template>
                </el-table-column>
                <el-table-column prop="remarks" label="备注" />
                <el-table-column fixed="right" label="操作" width="180">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="corpsAttnHandle(scope)">编辑</el-button>
                    <el-button type="text" size="small" @click="corpsAttnDelete(scope)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="更名记录" name="gmjl">
              <el-table :data="formData.corpsRenameList"
                :header-cell-style="{ background: '#ecf5ff', color: '#232526', fontSize: '12px' }" stripe
                style="width: 100%">
                <el-table-column prop="oldCnName" label="原中文名称" width="180" />
                <el-table-column prop="newCnName" label="新中文名称" width="180" />
                <el-table-column prop="oldEnName" label="原英文名称" width="180" />
                <el-table-column prop="newEnName" label="新英文名称" width="180" />
                <!-- <el-table-column prop="byId" label="操作人" width="180"/> -->
                <el-table-column prop="byTime" label="操作时间" width="180" />
                <el-table-column prop="remarks" label="备注" width="180" />
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="发票抬头" name="fptt">
              <el-button type="primary" @click="corpsAttnAdd">新建</el-button>
              <el-table :data="formData.corpsInvoiceHeaderList"
                :header-cell-style="{ background: '#ecf5ff', color: '#232526', fontSize: '12px' }" stripe
                style="width: 100%">
                <!-- <el-table-column prop="pid" label="主表id" width="180" /> -->
                <el-table-column prop="invoiceHeader" label="发票抬头" width="180" />
                <el-table-column prop="uscc" label="税号" width="180" />
                <el-table-column prop="address" label="地址" width="180" />
                <el-table-column prop="attnName" label="联系人姓名" width="180" />
                <el-table-column prop="attnTel" label="联系人电话" width="180" />
                <el-table-column prop="email" label="电子邮箱" width="180" />
                <el-table-column prop="taxpayerNature" label="纳税人性质" width="180" />
                <el-table-column prop="taxRate" label="增值税税率" width="180" />
                <el-table-column prop="invoiceType" label="发票类型" width="180" />
                <el-table-column prop="accountBankCny" label="人民币账户银行" width="180" />
                <el-table-column prop="accountBankUsd" label="美元账户银行" width="180" />
                <el-table-column prop="accountNoUsd" label="美元银行账号" width="180" />
                <el-table-column prop="guaranteeNo" label="保函号码" width="180" />
                <el-table-column prop="guaranteeDate" label="保函日期" width="180" />
                <el-table-column prop="version" label="版本" width="180" />
                <el-table-column prop="status" label="状态" width="180">
                  <template slot-scope="scope">
                    <span v-if="scope.row.status == 0">正常</span>
                    <span v-if="scope.row.status == 1">启用</span>
                  </template>
                </el-table-column>
                <el-table-column prop="remarks" label="备注" width="180" />
                <el-table-column fixed="right" label="操作" width="180">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="corpsAttnHandle(scope)">编辑</el-button>
                    <el-button type="text" size="small" @click="corpsAttnDelete(scope)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="不良记录" name="bljl">
              <el-table :data="formData.corpsBadrecordList"
                :header-cell-style="{ background: '#ecf5ff', color: '#232526', fontSize: '12px' }" stripe
                style="width: 100%">
                <el-table-column prop="pid" label="主表客户id" width="180" />
                <el-table-column prop="oldCreditLevel" label="原授信等级" width="180" />
                <el-table-column prop="newCreditLevel" label="新授信等级" width="180" />
                <el-table-column prop="version" label="版本" width="180" />
                <el-table-column prop="status" label="状态" width="180">
                  <template slot-scope="scope">
                    <span v-if="scope.row.status == 0">正常</span>
                    <span v-if="scope.row.status == 1">启用</span>
                  </template>
                </el-table-column>
                <el-table-column prop="remarks" label="备注" width="180" />
              </el-table>
            </el-tab-pane>
            <!-- <el-tab-pane label="增值税开票" name="zzskp">
              定时任务补偿
            </el-tab-pane>
            <el-tab-pane label="匹配编号" name="ppbh">
              定时任务补偿
            </el-tab-pane>kai -->
          </el-tabs>

        </el-row>
      </el-form>
    </el-card>

    <el-dialog :title="dialogTitle" :visible.sync="corpsAttnDialogVisible" :append-to-body="true" width="40%"
      :before-close="handleClose">

      <el-form ref="corpsAttnForm" :rules="corpsAttnRules" :model="corpsAttnForm" label-width="120px">
        <div v-if="activeName == 'khlxk'">
          <el-form-item label="编号" prop="code" width="180">
            <el-input v-model="corpsAttnForm.code"></el-input>
          </el-form-item>
          <el-form-item label="名称" prop="cname">
            <el-input v-model="corpsAttnForm.cname"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="attn">
            <el-input v-model="corpsAttnForm.attn"></el-input>
          </el-form-item>
          <el-form-item label="邮箱地址" prop="email">
            <el-input v-model="corpsAttnForm.email"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="tel">
            <el-input v-model="corpsAttnForm.tel"></el-input>
          </el-form-item>
          <el-form-item label="岗位" prop="position">
            <el-input v-model="corpsAttnForm.position"></el-input>
          </el-form-item>
          <el-form-item label="公司地址" prop="addr">
            <el-input v-model="corpsAttnForm.addr"></el-input>
          </el-form-item>
          <!-- <el-form-item label="用户" prop="userId">
            <search-query ref="SearchQuery" :datalist="userOptions" title="用户" :filterable="true" :clearable="true"
              :remote="true" :forParameter="{ key: 'id', label: 'realName', value: 'id', disabled: 'workingStatus' }"
              :disabledStatus="1" @remoteMethod="userListfun" @corpChange="userChange">
              <user></user>
            </search-query>
          </el-form-item> -->
          <el-form-item label="性别" prop="sex">
            <el-select v-model="corpsAttnForm.sex" placeholder="请选择性别" :style="{ width: '100%' }">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="corpsAttnForm.status" placeholder="请选择状态" :style="{ width: '100%' }">
              <el-option label="正常" :value="0"></el-option>
              <el-option label="停用" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-if="activeName == 'yhxx'">
          <!-- <el-form-item label="统一社会信用代码" prop="uscc">
            <el-input v-model="corpsAttnForm.uscc"></el-input>
          </el-form-item> -->
          <el-form-item label="账户名称" prop="accountName">
            <el-input v-model="corpsAttnForm.accountName"></el-input>
          </el-form-item>
          <el-form-item label="开户银行" prop="accountBank">
            <el-input v-model="corpsAttnForm.accountBank"></el-input>
          </el-form-item>
          <el-form-item label="银行账号" prop="accountNo">
            <el-input v-model="corpsAttnForm.accountNo"></el-input>
          </el-form-item>
          <el-form-item label="币别" prop="curId">
            <!-- <el-input v-model="corpsAttnForm.curId"></el-input> -->
            <search-query ref="SearchQuery" :datalist="rateOptions" title="币别" :filterable="true" :clearable="true"
              :remote="true" :forParameter="{ key: 'id', label: 'cnName', value: 'code', disabled: 'status' }"
              :disabledStatus="1" @remoteMethod="rateListfun" @corpChange="rateChange">
              <rateManagement></rateManagement>
            </search-query>
          </el-form-item>
          <el-form-item label="科目编码" prop="subjectNumber">
            <el-input v-model="corpsAttnForm.subjectNumber"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="corpsAttnForm.address"></el-input>
          </el-form-item>
          <el-form-item label="Swift Code" prop="swiftCode">
            <el-input v-model="corpsAttnForm.swiftCode"></el-input>
          </el-form-item>
          <el-form-item label="CNAPS" prop="cnapsCode">
            <el-input v-model="corpsAttnForm.cnapsCode"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="corpsAttnForm.status" placeholder="请选择状态" :style="{ width: '100%' }">
              <el-option label="正常" :value="0"></el-option>
              <el-option label="停用" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="corpsAttnForm.remarks"></el-input>
          </el-form-item>
        </div>
        <div v-if="activeName == 'fj'">
          <el-form-item label="排序" prop="sort">
            <el-input-number v-model="corpsAttnForm.sort" controls-position="right" @change="handleChange" :min="0"
              :precision="0" :step="1" :style="{ width: '100%' }"></el-input-number>
          </el-form-item>
          <el-form-item label="文件上传" prop="url">
            <el-upload class="upload-demo"
              :action="incomingAction ? incomingAction : '/api/blade-resource/oss/endpoint/put-file'"
              :on-remove="handleRemove" :headers="headers" :on-success="handleSuccess" :before-remove="beforeRemove"
              :on-progress="handleProgress" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="corpsAttnForm.status" placeholder="请选择状态" :style="{ width: '100%' }">
              <el-option label="正常" :value="0"></el-option>
              <el-option label="停用" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="corpsAttnForm.remarks"></el-input>
          </el-form-item>
        </div>
        <div v-if="activeName == 'fptt'">
          
          <el-form-item label="发票抬头" prop="invoiceHeader">
            <el-input v-model="corpsAttnForm.invoiceHeader"></el-input>
          </el-form-item>
          <el-form-item label="税号" prop="uscc">
            <el-input v-model="corpsAttnForm.uscc"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="corpsAttnForm.address"></el-input>
          </el-form-item>
          <el-form-item label="联系人姓名" prop="attnName">
            <el-input v-model="corpsAttnForm.attnName"></el-input>
          </el-form-item>
          <el-form-item label="联系人电话" prop="attnTel">
            <el-input v-model="corpsAttnForm.attnTel"></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="corpsAttnForm.email"></el-input>
          </el-form-item>
          <el-form-item label="纳税人性质" prop="taxpayerNature">
            <el-input v-model="corpsAttnForm.taxpayerNature"></el-input>
          </el-form-item>
          <el-form-item label="增值税税率" prop="taxRate">
            <el-input v-model="corpsAttnForm.taxRate"></el-input>
          </el-form-item>
          <el-form-item label="发票类型" prop="invoiceType">
            <el-input v-model="corpsAttnForm.invoiceType"></el-input>
          </el-form-item>
          <el-form-item label="人民币账户银行" prop="accountBankCny">
            <el-input v-model="corpsAttnForm.accountBankCny"></el-input>
          </el-form-item>
          <el-form-item label="人民币银行账号" prop="accountNoCny">
            <el-input v-model="corpsAttnForm.accountNoCny"></el-input>
          </el-form-item>
          <el-form-item label="美元账户银行" prop="accountBankUsd">
            <el-input v-model="corpsAttnForm.accountBankUsd"></el-input>
          </el-form-item>
          <el-form-item label="美元银行账号" prop="accountNoUsd">
            <el-input v-model="corpsAttnForm.accountNoUsd"></el-input>
          </el-form-item>

          <el-form-item label="保函号码" prop="guaranteeNo">
            <el-input v-model="corpsAttnForm.guaranteeNo"></el-input>
          </el-form-item>
          <el-form-item label="保函日期" prop="guaranteeDate">
            <el-date-picker v-model="corpsAttnForm.guaranteeDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
              :style="{ width: '100%' }">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="状态" prop="status">
            <el-select v-model="corpsAttnForm.status" placeholder="请选择状态" :style="{ width: '100%' }">
              <el-option label="正常" :value="0"></el-option>
              <el-option label="停用" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="corpsAttnForm.remarks"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="corpsAttnAddClose">取 消</el-button>
        <el-button type="primary" @click="corpsAttnAddConfirm">确 定</el-button>
      </span>
    </el-dialog>


  </dev>
</template>
<script>
import { getToken } from "@/util/auth";
import { addBcorps, updateBcorps, getBcorpsDetail } from "@/api/iosBasicData/bcorps";
import { bcountrysList } from "@/api/iosBasicData/bcountrys";
import { userList } from "@/api/system/user";
import { getRateList } from "@/api/iosBasicData/rateManagement";
import { bcorpstypedefineList } from "@/api/iosBasicData/bcorpstypedefine"

import { getWorkDicts } from "@/api/system/dictbiz"

// import { getBcorpsattnList, getBcorpsattnDetail, removevBcorpsattn, addBcorpsattn, updateBcorpsattn } from "@/api/iosBasicData/bcorpsattn";
import bcountrys from '@/views/iosBasicData/bcountrys/index.vue'
import user from '@/views/system/user.vue'
import rateManagement from '@/views/iosBasicData/rateManagement/index.vue'
import SearchQuery from '@/components/iosbasic-data/searchquery.vue'
export default {
  props: {
    incomingAction: {
      type: String
    },
  },
  components: {
    SearchQuery, bcountrys, user, rateManagement
  },
  props: {
    detailData: {
      type: Object
    }
  },
  data() {
    return {
      // tab标签
      activeName: 'kgxq',
      // 远程搜索
      loading: false,
      headers: { "Blade-Auth": "Bearer " + getToken() },
      // 文件list
      fileList: [],
      // 国家list
      cntyOptions: [],
      // 币别list
      rateOptions: [],
      // 用户list
      userOptions: [],
      // 客户类别数据
      customTypeData: [],
      // 用户联系人form
      corpsAttnForm: {},
      // 字典
      creditLevelDict: [],
      enterpriseTypeDict: [],
      // 对话框
      // 客户联系人对话框
      dialogTitle: '窗口',
      corpsAttnDialogVisible: false,
      corpsAttnDialogIndex: null,
      formData: {
        status: 0,
        corpsAttnList: [],
        corpsBankList: [],
        corpsFilesList: [],
      },
      // rules: {
      //   corpType: [{
      //     required: true,
      //     message: '请选择客户分类',
      //     trigger: 'change'
      //   }],
      //   code: [{
      //     required: true,
      //     message: '请选择客户编号',
      //     trigger: 'change'
      //   }],
      //   shortName: [{
      //     required: true,
      //     message: '请选择客户简称',
      //     trigger: 'change'
      //   }],
      //   cnName: [{
      //     required: true,
      //     message: '请选择客户名称',
      //     trigger: 'change'
      //   }],
      //   enName: [{
      //     required: true,
      //     message: '请选择英文名称',
      //     trigger: 'change'
      //   }],
      //   cnAddr: [{
      //     required: true,
      //     message: '请选择中文地址',
      //     trigger: 'change'
      //   }],
      //   enAddr: [{
      //     required: true,
      //     message: '请选择英文地址',
      //     trigger: 'change'
      //   }],
      // },
      rules: {
        corpType: [{
          required: true,
          message: ' ',
          trigger: 'change'
        }],
        code: [{
          required: true,
          message: ' ',
          trigger: 'change'
        }],
        shortName: [{
          required: true,
          message: ' ',
          trigger: 'change'
        }],
        cnName: [{
          required: true,
          message: ' ',
          trigger: 'change'
        }],
        enName: [{
          required: true,
          message: ' ',
          trigger: 'change'
        }],
        cnAddr: [{
          required: true,
          message: ' ',
          trigger: 'change'
        }],
        enAddr: [{
          required: true,
          message: ' ',
          trigger: 'change'
        }],
      },
      // 客户联系人表单校验
      // corpsAttnRules: {
      //   code: [
      //     { required: true, message: '请输入编号', trigger: 'change' }
      //   ],
      //   cname: [
      //     { required: true, message: '请输入名称', trigger: 'change' }
      //   ],
      //   accountName: [
      //     { required: true, message: '请输入账号名称', trigger: 'change' }
      //   ],
      //   accountBank: [
      //     { required: true, message: '请输入账号银行', trigger: 'change' }
      //   ],
      //   accountNo: [
      //     { required: true, message: '请输入银行账号', trigger: 'change' }
      //   ],
      //   curId: [
      //     { required: true, message: '请输入币别', trigger: 'change' }
      //   ],
      //   sort: [
      //     { required: true, message: '请输入排序', trigger: 'change' }
      //   ],
      //   invoiceHeader: [
      //     { required: true, message: '请输入发票抬头', trigger: 'change' }
      //   ],
      // },
      corpsAttnRules: {
        code: [
          { required: true, message: ' ', trigger: 'change' }
        ],
        cname: [
          { required: true, message: ' ', trigger: 'change' }
        ],
        accountName: [
          { required: true, message: ' ', trigger: 'change' }
        ],
        accountBank: [
          { required: true, message: ' ', trigger: 'change' }
        ],
        accountNo: [
          { required: true, message: ' ', trigger: 'change' }
        ],
        curId: [
          { required: true, message: ' ', trigger: 'change' }
        ],
        sort: [
          { required: true, message: ' ', trigger: 'change' }
        ],
        invoiceHeader: [
          { required: true, message: ' ', trigger: 'change' }
        ],
      },
      statusOptions: [{
        "label": "正常",
        "value": 0
      }, {
        "label": "停用",
        "value": 1
      }],
    }
  },
  computed: {},
  watch: {},
  created() {
    if (this.detailData.id) {
      getBcorpsDetail(this.detailData.id).then(res => {
        this.formData = res.data.data
        this.formData.corpTypeList = res.data.data.corpType.split(',')
      })
    }
    // 查询国家下拉
    bcountrysList(1, 10).then(res => {
      this.cntyOptions = res.data.data.records
    })
    // 查询币别下拉
    getRateList(1, 10).then(res => {
      this.rateOptions = res.data.data.records
    })
    // 获取客户类别
    bcorpstypedefineList().then(res => {
      this.customTypeData = res.data.data.records
    })
    // 查询用户信息
    userList().then((res) => {
      this.userOptions = res.data.data
    });
    // 查询字典
    getWorkDicts('bcorps-credit-level').then((res) => {
      this.creditLevelDict = res.data.data
    });
    getWorkDicts('bcorps-enterprise-type').then((res) => {
      this.enterpriseTypeDict = res.data.data
    });

  },
  mounted() { },
  methods: {
    corpTypeChange(ids) {
      // console.log(ids);
      this.formData.corpType = ids.join(",")
      // console.log(this.formData.corpType);
    },
    salesChange(id) {
      if (id == null) {
        this.formData.salesName = null
      }
      for (const user of this.userOptions) {
        if (user.id == id) {
          this.formData.salesName = user.realName;
        }
      }
    },
    // 查询国家下拉
    bcountrysListfun(cnName) {
      bcountrysList(1, 10, { cnName }).then(res => {
        this.cntyOptions = res.data.data.records
      })
    },
    // 查询币别下拉
    rateListfun(cnName) {
      getRateList(1, 10, { cnName }).then(res => {
        this.rateOptions = res.data.data.records
      })
    },
    bcountrysChange(value) {
      this.formData.cntyCode = value
      // for(let item of this.unitNoData) {
      //     if (item.id == value) {
      //         this.formData.cntyCode = item.code
      //     }
      // }
    },
    rateChange(value) {
      this.corpsAttnForm.curId = value
      for (let item of this.unitNoData) {
        if (item.id == value) {
          this.corpsAttnForm.curNo = item.cnName
        }
      }
    },
    submitForm() {
      this.$refs['userDataForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        // 联系电话赋值
        if (this.formData.id != null) {
          updateBcorps(this.formData).then(_ => {
            this.$message({
              type: "success",
              message: "修改成功!"
            });
          })
        } else {
          this.formData.attnTel = this.formData.tel
          addBcorps(this.formData).then(() => {
            this.$message({
              type: "success",
              message: "添加成功!"
            });
          });
        }

      })
    },
    resetForm() {
      this.$refs['userDataForm'].resetFields()
    },
    // -------------------------------------- 弹窗相关 ---------------------------------
    // 客户联系人新建
    corpsAttnAdd() {
      this.corpsAttnDialogVisible = true

      if (this.activeName == 'khlxk') {
        this.dialogTitle = "客户联系人"
      } else if (this.activeName == 'yhxx') {
        this.dialogTitle = "银行信息"
      } else if (this.activeName == 'fj') {
        this.dialogTitle = "附件"
      } else if (this.activeName == 'fptt') {
        this.dialogTitle = "发票抬头"
      }
    },
    // 确认
    corpsAttnAddConfirm() {
      if (this.corpsAttnDialogIndex == null) {
        this.corpsAttnForm.pid = this.formData.id
        // 新建
        this.$refs['corpsAttnForm'].validate(valid => {
          if (!valid) return
          // TODO 提交表单
          // if (this.formData.id != null) {
          //   // 调用新建接口
          //   if (this.activeName == 'khlxk') {
          //     addBcorpsattn(this.corpsAttnForm).then(() => {
          //       this.$message({
          //         type: "success",
          //         message: "添加成功!"
          //       });
          //     });
          //   } else if (this.activeName == 'yhxx') {
          //     // this.formData.corpsBankList.push(this.corpsAttnForm);
          //   } else if (this.activeName == 'fj') {
          //     // this.formData.corpsFilesList.push(this.corpsAttnForm);
          //   }
          // } else {
          if (this.activeName == 'khlxk') {
            this.formData.corpsAttnList.push(this.corpsAttnForm);
          } else if (this.activeName == 'yhxx') {
            this.formData.corpsBankList.push(this.corpsAttnForm);
          } else if (this.activeName == 'fj') {
            this.formData.corpsFilesList.push(this.corpsAttnForm);
          } else if (this.activeName == 'fptt') {
            this.formData.corpsInvoiceHeaderList.push(this.corpsAttnForm);
          }
          // }
          this.corpsAttnForm = {};
          this.corpsAttnDialogVisible = false;
        })
      } else {
        // 修改
        // if (this.corpsAttnForm.id != null) {
        //   // 调用修改接口

        //   if (this.activeName == 'khlxk') {
        //     updateBcorpsattn(this.corpsAttnForm).then(_ => {
        //       this.$message({
        //         type: "success",
        //         message: "修改成功!"
        //       });
        //     })
        //   } else if (this.activeName == 'yhxx') {
        //     // this.formData.corpsBankList.push(this.corpsAttnForm);
        //   } else if (this.activeName == 'fj') {
        //     // this.formData.corpsFilesList.push(this.corpsAttnForm);
        //   }
        // } else {
        if (this.activeName == 'khlxk') {
          this.formData.corpsAttnList[this.corpsAttnDialogIndex] = this.corpsAttnForm
        } else if (this.activeName == 'yhxx') {
          this.formData.corpsBankList[this.corpsAttnDialogIndex] = this.corpsAttnForm
        } else if (this.activeName == 'fj') {
          this.formData.corpsFilesList[this.corpsAttnDialogIndex] = this.corpsAttnForm
        } else if (this.activeName == 'fptt') {
          this.formData.corpsInvoiceHeaderList[this.corpsAttnDialogIndex] = this.corpsAttnForm
        }
        // }
        this.corpsAttnForm = {};
        this.corpsAttnDialogIndex = null
        this.corpsAttnDialogVisible = false;
      }
    },
    // 编辑
    corpsAttnHandle(scope) {
      this.corpsAttnDialogIndex = scope.$index
      this.corpsAttnForm = scope.row;
      this.corpsAttnDialogVisible = true
    },
    // 删除
    corpsAttnDelete(scope) {
      this.$confirm('确认要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        // if (scope.row.id != null) {
        //   // 调用删除接口
        //   if (this.activeName == 'khlxk') {
        //     removevBcorpsattn(scope.row.id);
        //   } else if (this.activeName == 'yhxx') {
        //     this.formData.corpsBankList.splice(scope.$index, 1)
        //   } else if (this.activeName == 'fj') {
        //     this.formData.corpsFilesList.splice(scope.$index, 1)
        //   }
        // } else {
        if (this.activeName == 'khlxk') {
          this.formData.corpsAttnList.splice(scope.$index, 1)
        } else if (this.activeName == 'yhxx') {
          this.formData.corpsBankList.splice(scope.$index, 1)
        } else if (this.activeName == 'fj') {
          this.formData.corpsFilesList.splice(scope.$index, 1)
        } else if (this.activeName == 'fptt') {
          this.formData.corpsInvoiceHeaderList.splice(scope.$index, 1)
        }
        // }
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // });
      });
    },
    // 关闭窗口
    corpsAttnAddClose() {
      this.corpsAttnForm = {};
      this.corpsAttnDialogVisible = false;
    },
    // 文件上传成功
    handleSuccess(response, file, fileList) {
      this.corpsAttnForm.fileName = response.data.originalName;
      this.corpsAttnForm.url = response.data.link;
    },
    // 删除文件
    handleRemove(file, fileList) {
      this.$confirm(`确定移除 ${file.name}？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.corpsAttnForm.fileName = null
        this.corpsAttnForm.url = null
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // ---------------------------------------------------------------------------------
    //返回列表
    backToList() {
      // if (this.formData.id) {
      //   this.unLock({
      //     moduleName: "xxb",
      //     tableName: "primary_school",
      //     billId: this.form.id,
      //     billNo: this.form.exrateYear + "-" + this.form.moon
      //   });
      // }
      this.formData = {
        status: 0,
        corpsAttnList: [],
        corpsBankList: [],
        corpsFilesList: [],
      }
      this.corpsAttnForm = {}
      this.corpsAttnDialogVisible = false,
        this.corpsAttnDialogIndex = null,
        this.$emit("goBack");
      // this.leaveDetailsKey(this.$route.name);
    },
  }
}

</script>
<style lang="scss" scoped>
/deep/ .el-form-item {
  margin-bottom: 8px;
  // margin-top: 8px;
}

.head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  margin: 10px;
  margin-bottom: 0;
  box-shadow: 0 0 0 red;
}
</style>