kd-aiot-frontend-eom/src/views/saleManage/contact/components/contactDetailDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    v-if="visible"
    :visible.sync="visible"
    :title="title"
    :close-on-click-modal="false"
    width="70%"
    @close="cancel"
    :maxable="true"
    :resizable="true"
  >

    <el-tabs v-model="activeName" type="card" @tab-click="handleActive">
      <el-tab-pane label="基本信息" name="base">
        <headerTitle title="基本信息" style="margin-top: 30px"></headerTitle>
        <el-form
          label-width="120px"
          class="el-form-box"
          ref="formRef"
          :model="form">
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="客户分类："
                prop="categoryId">
                <el-input v-model="form.categoryName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="分管部门："
                prop="fgDeptId"

              >
                <el-input v-model="form.fgDeptName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员：" prop="salesmanId">
                <el-input v-model="form.salesmanName" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="客户名称：" prop="name">
                <el-input v-model="form.name" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户代号：" prop="serialNo">
                <el-input v-model="form.serialNo" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户简称：" prop="simpleName">
                <el-input v-model="form.simpleName" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="法定代表人：" prop="legalPerson">
                <el-input v-model="form.legalPerson" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="注册资金：" prop="registeredCapital">
                <el-input v-model="form.registeredCapital" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="授信额度：" prop="authorizationLimit">
                <el-input v-model="form.authorizationLimit" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="单位电话：" prop="phone">
                <el-input v-model="form.phone" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="地址：" prop="addressId">
                <el-input v-model="form.addressName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="详细地址：" prop="address">
                <el-input v-model="form.address" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item
                class="form_item_label"
                label="统一社会信用代码："
                prop="unifiedSocialCreditCode"
              >
                <el-input v-model="form.unifiedSocialCreditCode" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属行业：" prop="industry">
                <el-input v-model="form.industryFullName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="营业类型：" prop="companyCategoryId">
                <el-input v-model="form.companyCategoryName" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="企业类型：" prop="companyCategoryId">
                <el-input v-model="form.enterpriseTypeName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="登记日期：" prop="registerDate">
                <el-input v-model="form.registerDate" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经营范围：" prop="businessScope">
                <el-input v-model="form.businessScope" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="主营产品：" prop="mainProduct">
                <el-input v-model="form.mainProduct" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="上级单位："
                prop="hasParentGroup"
              >
                <el-input v-model="form.parentName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="级别：" >
                <DictSelection dictName="供应商级别" disabled clearable v-model="form.level">
                </DictSelection>
              </el-form-item>

            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="经营范围" prop="businessScope">
                <el-input
                  disabled
                  type="textarea"
                  maxlength="500"
                  placeholder="请输入"
                  v-model="form.businessScope"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="businessLicenseFile" label="营业执照附件：">
                <el-link v-if="form.businessLicenseFile && form.businessLicenseFile !== ''"
                         type="primary" :underline="false"
                         @click="downloadFile(form.businessLicenseFile)"> {{ form.businessLicenseFile.name }}
                </el-link>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="备注：" prop="remark">
                <el-input type="textarea" v-model="form.remark" disabled></el-input>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
        <headerTitle title="银行信息" style="margin-top: 30px"></headerTitle>
        <ele-pro-table
          ref="table"
          :columns="bankColumns"
          :datasource="tableBankData"
          height="350px"
          :toolkit="[]"
          :need-page="false"
        >
          <template v-slot:accountNameHeader="{ column }">
            <span>{{ column.label }}</span><span style="color:red">*</span>
          </template>

          <template v-slot:accountName="{ row }">
            {{ row.accountName }}
          </template>
          <template v-slot:accountNo="{ row }">
            {{ row.accountNo }}
          </template>
          <template v-slot:bankName="{ row }">
            {{ row.bankName }}
          </template>
          <template v-slot:interbankNo="{ row }">
            {{ row.interbankNo }}
          </template>
        </ele-pro-table>
        <headerTitle title="联系人信息" style="margin-top: 30px"></headerTitle>
        <ele-pro-table
          ref="linkTable"
          :columns="linkColumns"
          :datasource="tableLinkData"
          :toolkit="[]"
          height="350px"
          :need-page="false"
        >
          <template v-slot:linkNameHeader="{ column }">
            <span>{{ column.label }}</span><span style="color:red">*</span>
          </template>
          <template v-slot:mobilePhoneHeader="{ column }">
            <span>{{ column.label }}</span><span style="color:red">*</span>
          </template>
          <template v-slot:statusHeader="{ column }">
            <span>{{ column.label }}</span><span style="color:red">*</span>
          </template>

          <template v-slot:linkName="{ row }">
            {{ row.linkName }}
          </template>
          <template v-slot:mobilePhone="{ row }">
            {{ row.mobilePhone }}
          </template>
          <template v-slot:phone="{ row }">
            {{ row.phone }}
          </template>
          <template v-slot:email="{ row }">
            {{ row.email }}
          </template>
          <template v-slot:deptName="{ row }">
            {{ row.deptName }}
          </template>
          <template v-slot:post="{ row }">
            {{ row.post }}
          </template>
          <template v-slot:ifChief="{ row, $index }">
            <el-select v-model="row.ifChief" class="w100" disabled>
              <el-option
                v-for="item in ifChiefList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
          <template v-slot:status="{ row }">
            <DictSelection
              dictName="联系人状态"
              v-model="row.status"
              :disabled="true"
            ></DictSelection>
          </template>
          <template v-slot:remark="{ row }">
            {{ row.remark }}
          </template>
        </ele-pro-table>
        <headerTitle title="其他信息" style="margin-top: 30px"></headerTitle>
        <el-form
          label-width="120px"
          class="el-form-box"
          ref="otherFormRef"
          :model="otherForm"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="结算方式：" prop="settlementMode">
                <el-input v-model="otherForm.settlementModeName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="税率：" prop="taxRate">
                <el-input v-model="otherForm.taxRate" disabled>
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="折扣率：" prop="discount">
                <el-input v-model="otherForm.discount" disabled>
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="收件人：" prop="sender">
                <el-input v-model="otherForm.sender" disabled>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收件人电话：" prop="senderPhone">
                <el-input v-model="otherForm.senderPhone" disabled>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收件人地址：" prop="addressId">
                <el-input v-model="otherForm.addressName" disabled>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="收件人详细地址：" class="form_item_label" prop="address">
                <el-input v-model="otherForm.address" disabled>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
<!--      <el-tab-pane label="银行信息" name="bank">-->
<!--       -->
<!--      </el-tab-pane>-->
<!--      <el-tab-pane label="联系人信息" name="link">-->
<!--       -->
<!--      </el-tab-pane>-->
<!--      <el-tab-pane label="其他信息" name="other">-->
<!--       -->
<!--      </el-tab-pane>-->
      <el-tab-pane label="证书资质" name="certificate">
        <headerTitle title="证书资质信息" style="margin-top: 30px"></headerTitle>
        <ele-pro-table ref="certificateTable" :columns="certificateColumns"  :needPage="false"  :datasource="tableCertificateData"
                       :toolkit="[]" height="350px">
          <!-- 操作栏 -->
          <template v-slot:action="scope">
            <el-link
              v-if="[1,2].includes(scope.row.approvalStatus)"
              type="primary"
              :underline="false"
              icon="el-icon-edit"
              @click="addCertificate('view',scope.row)">
              详情
            </el-link>
          </template>
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane label="订单记录"  name="order">
        <headerTitle title="订单记录" style="margin-top: 30px"></headerTitle>
        <div class="ele-border-lighter form-content">
          <!-- 数据表格 -->
          <ele-pro-table
            ref="table"
            :columns="orderColumns"
            :datasource="orderDatasource"
            height="calc(100vh - 520px)"
            style="margin-bottom: 10px"
            full-height="calc(100vh - 116px)"
            tool-class="ele-toolbar-form"
            cache-key="eomContactPageTable">
            <!-- 查看详情列 -->
            <template v-slot:contractNo="{ row }">
              <el-link
                type="primary"
                :underline="false"
                @click="opencontractDetail(row)"
              >
                {{ row.contractNo }}
              </el-link
              >
            </template>
            <template v-slot:orderNo="{ row }">
              <el-link
                type="primary"
                :underline="false"
                @click="openorderDetail(row)"
              >
                {{ row.orderNo }}
              </el-link
              >
            </template>
          </ele-pro-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="发货记录" name="send">
        <headerTitle title="发货记录" style="margin-top: 30px"></headerTitle>
        <div class="ele-border-lighter form-content" >
          <!-- 数据表格 -->
          <ele-pro-table
            ref="table"
            :columns="sendColumns"
            :datasource="sendDatasource"
            height="calc(100vh - 520px)"
            style="margin-bottom: 10px"

            full-height="calc(100vh - 116px)"
            tool-class="ele-toolbar-form"
            cache-key="eomContactPageTable"
          >
            <!-- 查看详情列 -->

            <template v-slot:docNo="{ row }">
              <el-link
                type="primary"
                :underline="false"
                @click="openorderDetail(row, 'docNo')"
              >
                {{ row.docNo }}</el-link
              >
            </template>
            <template v-slot:orderNo="{ row }">
              <el-link
                type="primary"
                :underline="false"
                @click="openorderDetail(row, 'orderNo')"
              >
                {{ row.orderNo }}</el-link
              >
            </template>
            <!-- 操作列 -->
            <template v-slot:action="{ row }">
              <el-link
                type="primary"
                :underline="false"
                icon="el-icon-edit"
                @click="openEdit('edit', row)"
                v-if="(isNeed_process_is_close&&[0, 3].includes(row.reviewStatus))||isNeed_process_is_close"
              >
                修改
              </el-link>
              <el-link
                type="primary"
                :underline="false"
                icon="el-icon-plus"

                @click="sendSubmit(row)"
                v-if="isNeed_process_is_close&&[0, 3].includes(row.reviewStatus)"
              >
                提交
              </el-link>

              <el-popconfirm
                class="ele-action"
                title="确定要删除此信息吗？"
                @confirm="remove([row.id])"
                v-if="(isNeed_process_is_close&&[0, 3].includes(row.reviewStatus))||!isNeed_process_is_close"
              >
                <template v-slot:reference>
                  <el-link type="danger" :underline="false" icon="el-icon-delete">
                    删除
                  </el-link>
                </template>
              </el-popconfirm>
              <el-link
                type="primary"
                :underline="false"
                icon="el-icon-edit"
                @click="creatReturnGoods('add', row)"
                v-if="[2].includes(row.reviewStatus)"
              >
                创建退货单
              </el-link>
            </template>
          </ele-pro-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="退货记录" name="return">
        <headerTitle title="退货记录" style="margin-top: 30px"></headerTitle>
        <div class="ele-border-lighter form-content">
          <!-- 数据表格 -->
          <ele-pro-table
            ref="table"
            :columns="returnColumns"
            :datasource="returnDatasource"
            height="calc(100vh - 520px)"
            style="margin-bottom: 10px"
            full-height="calc(100vh - 116px)"
            tool-class="ele-toolbar-form"
            cache-key="eomContactPageTable">
            <!-- 查看详情列 -->
            <template v-slot:returnNo="{ row }">
              <el-link
                type="primary"
                :underline="false"
                @click="openorderDetail(row, 'returnNo')"
              >
                {{ row.returnNo }}
              </el-link
              >
            </template>
            <template v-slot:sendNo="{ row }">
              <el-link
                type="primary"
                :underline="false"
                @click="openorderDetail(row, 'sendNo')"
              >
                {{ row.sendNo }}
              </el-link
              >
            </template>
            <template v-slot:orderNo="{ row }">
              <el-link
                type="primary"
                :underline="false"
                @click="openorderDetail(row, 'orderNo')"
              >
                {{ row.orderNo }}
              </el-link
              >
            </template>
            <!-- 操作列 -->
            <template v-slot:action="{ row }">
              <el-link
                type="primary"
                :underline="false"
                icon="el-icon-edit"
                @click="handleCreateCROrder('add', row)"
                v-if="[1].includes(row.canCreateHandleReceipt)&&!row.handleReceiptId">
                退货处理
              </el-link>
              <el-link
                type="primary"
                :underline="false"
                icon="el-icon-edit"
                @click="handleCreateCROrder('update', row)"
                v-if="row.handleReceiptId&&row.canCreateHandleReceipt=='0'&&[0,3].includes(row.handleReceiptApproveStatus)">
                退货处理
              </el-link>
              <el-link
                type="primary"
                :underline="false"
                icon="el-icon-edit"
                @click="openEdit('edit', row)"
                v-if="(isNeed_process_is_close&&[0, 3].includes(row.reviewStatus))||!isNeed_process_is_close"
              >
                修改
              </el-link>
              <el-link
                type="primary"
                :underline="false"
                icon="el-icon-plus"
                @click="returnSubmit(row)"
                v-if="(isNeed_process_is_close&&[0, 3].includes(row.reviewStatus))"
              >
                提交
              </el-link>

              <el-popconfirm
                class="ele-action"
                title="确定要删除此信息吗？"
                v-if="(isNeed_process_is_close&&[0, 3].includes(row.reviewStatus))||!isNeed_process_is_close"
                @confirm="remove([row.id])"
              >
                <template v-slot:reference>
                  <el-link type="danger" :underline="false" icon="el-icon-delete">
                    删除
                  </el-link>
                </template>
              </el-popconfirm>
            </template>
          </ele-pro-table>
        </div>

      </el-tab-pane>
      <el-tab-pane label="对账记录" name="reconciliation">
        <headerTitle title="对账记录" style="margin-top: 30px"></headerTitle>
        <div class="ele-border-lighter form-content">
          <!-- 数据表格 -->
          <ele-pro-table
            ref="table"
            :columns="reconciliationColumns"
            :datasource="reconciliationDatasource"
            height="calc(100vh - 520px)"
            style="margin-bottom: 10px"
            full-height="calc(100vh - 116px)"
            tool-class="ele-toolbar-form"
            cache-key="eomContactPageTable">
            <!-- 查看详情列 -->

            <template v-slot:statementNo="{ row }">
              <el-link
                type="primary"
                :underline="false"
                @click="openorderDetail(row, 'statementNo')"
              >
                {{ row.statementNo }}
              </el-link
              >
            </template>
            <template v-slot:orderNo="{ row }">
              <el-link
                type="primary"
                :underline="false"
                @click="openorderDetail(row, 'orderNo')"
              >
                {{ row.orderNo }}
              </el-link
              >
            </template>
            <!-- 操作列 -->
            <template v-slot:action="{ row }">
              <el-link
                type="primary"
                :underline="false"
                icon="el-icon-edit"
                @click="handleAddOrEditAccount('update',row)"
                v-if="(isNeed_process_is_close&&[0, 3].includes(row.reviewStatus))||!isNeed_process_is_close"
              >
                修改
              </el-link>
              <el-link
                type="primary"
                :underline="false"
                icon="el-icon-plus"
                @click="accountstatementSubmit(row)"
                v-if="(isNeed_process_is_close&&[0, 3].includes(row.reviewStatus))||!isNeed_process_is_close"
              >
                提交
              </el-link>

              <el-popconfirm
                class="ele-action"
                title="确定要删除此信息吗？"
                @confirm="remove([row.id])"
                v-if="(isNeed_process_is_close&&[0, 3].includes(row.reviewStatus))||!isNeed_process_is_close"
              >
                <template v-slot:reference>
                  <el-link type="danger" :underline="false" icon="el-icon-delete">
                    删除
                  </el-link>
                </template>
              </el-popconfirm>
              <!--            <el-link-->
              <!--              type="primary"-->
              <!--              :underline="false"-->
              <!--              icon="el-icon-download"-->
              <!--              @click="handleExport(row)"-->
              <!--              v-if="[2].includes(row.reviewStatus)">-->
              <!--              导出-->
              <!--            </el-link>-->
              <el-link
                size="small"
                type="primary"
                :underline="false"
                icon="el-icon-plus"
                class="ele-btn-icon"
                v-if="[2].includes(row.reviewStatus)"
                @click="handleAddInvoice(row)"
              >
                新增发票
              </el-link>
            </template>
          </ele-pro-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="开票记录" name="invoice">
        <headerTitle title="开票记录" style="margin-top: 30px"></headerTitle>
        <el-card shadow="never" >
          <!-- 数据表格 -->
          <ele-pro-table
            ref="table"
            :columns="invoiceColumns"
            :datasource="invoiceDatasource"
            height="calc(100vh - 520px)"
            tool-class="ele-toolbar-form"
            cache-key="eomContactPageTable"
          >
            <!-- 收款信息 -->
            <template v-slot:code="{row}">

              <el-link
                type="primary"
                :underline="false"
                @click="handleDetail(row,'view')">
                {{ row.code }}
              </el-link>
            </template>
            <!-- 开票信息 -->
            <template v-slot:invoiceCode="{row}">

              <el-link
                type="primary"
                :underline="false"
                @click="handleInvoiceDetail(row,'view')">
                {{ row.invoiceCode }}
              </el-link>
            </template>
          </ele-pro-table>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="审批流程" name="bpm">
        <bpmDetail
          v-if="activeName === 'bpm' && form.processInstanceId"
          :id="form.processInstanceId"
        ></bpmDetail>
      </el-tab-pane>
    </el-tabs>

    <div slot="footer" class="footer">
      <el-button @click="cancel">返回</el-button>
    </div>
    <!-- 资质证书弹窗   -->
    <certificate-qualifications-dialog
      :certificate-qualifications-dialog-flag.sync="certificateQualificationsDialogFlag"
      v-if="certificateQualificationsDialogFlag"
      ref="certificateQualificationsDialogRef"
      :contactId="form.id"
      @reload="reload">

    </certificate-qualifications-dialog>
  </ele-modal>
</template>

<script>
import {contactDetail, contactQcPackPageAPI} from '@/api/saleManage/contact';
import {getFile} from '@/api/system/file';
import {getInfoById as getCategoryInfo, getInfoByIds} from '@/api/classifyManage/index';
import fileUpload from '@/components/upload/fileUpload';
import dictMixins from '@/mixins/dictMixins';
import deptSelect from '@/components/CommomSelect/dept-select.vue';
import personSelect from '@/components/CommomSelect/person-select.vue';
import {copyObj} from '@/utils/util';
import certificateQualificationsDialog
  from "@/views/purchasingManage/supplierManage/components/certificateQualificationsDialog.vue";
import {reviewStatus} from "@/enum/dict";
import searchTable from "@/views/saleManage/saleOrder/components/searchTable.vue";
import {getTableList} from "@/api/saleManage/saleorder";
import {getSendTableList} from "@/api/saleManage/saleordersendrecord";
import {getReturnTableList} from "@/api/saleManage/returnGoods";
import {getAccountstatementList} from "@/api/saleManage/accountstatement";
import {finPayablePageListAPI} from "@/api/financialManage/payableManage";
import bpmDetail from "@/views/bpm/processInstance/detail.vue";


export default {
  props: {
    categoryTreeList: Array
  },
  mixins: [dictMixins],
  components: {
    bpmDetail,
    searchTable,
    certificateQualificationsDialog,
    fileUpload,
    deptSelect,
    personSelect
  },
  data() {
    let formDef = {
      address: '',
      addressId: 0,
      addressName: '',
      authorizationLimit: 0,
      businessLicenseFile: {},
      businessScope: '',
      categoryId: '',
      categoryName: '',
      companyCategoryId: '',
      companyCategoryName: '',
      enterpriseTypeName: '',
      enterpriseTypeId: '',
      hasParentGroup: 0,
      industry: '',
      industryCode: '',
      industryFullName: '',
      mainProduct: '',
      name: '',
      officialIndustry: '',
      phone: '',
      registerDate: '',
      remark: '',
      serialNo: '',
      simpleName: '',
      legalPerson: '',
      registeredCapital: '',
      type: 1,
      unifiedSocialCreditCode: ''
    };
    let otherFormDef = {
      settlementMode: '',
      settlementModeName: '',
      taxRate: 0,
      address: '',
      addressId: '',
      deptId: '',
      deptName: '',
      discount: 0,
      salesmanId: '',
      salesmanName: '',
      sender: '',
      senderPhone: ''
    };
    return {
      visible: false,
      certificateQualificationsDialogFlag: false,
      title: '客户详情',
      row: {},
      activeName: 'base',
      formDef,
      otherFormDef,
      form: copyObj(formDef),
      otherForm: copyObj(otherFormDef),
      tableBankData: [],
      tableLinkData: [],
      ifChiefList: [
        {
          value: 0,
          label: '否'
        },
        {
          value: 1,
          label: '是'
        }
      ],
      statusList: [
          {
            label: '未收款',
            value: 0
          },
          {
            label: '部分收款',
            value: 1
          },
          {
            label: '已收全款',
            value: 2
          }
        ],
      bankColumns: [
        {
          type: 'index',
          width: 55,
          align: 'center'
        },
        {
          label: '单位名称',
          prop: 'accountName',
          slot: 'accountName',
          action: 'accountName',
          headerSlot: 'accountNameHeader',
          align: 'center'
        },
        {
          label: '银行账号',
          prop: 'accountNo',
          slot: 'accountNo',
          action: 'accountNo',
          align: 'center'
        },
        {
          label: '开户行',
          prop: 'bankName',
          slot: 'bankName',
          action: 'bankName',
          align: 'center'
        },
        {
          label: '银行银联号',
          prop: 'interbankNo',
          slot: 'interbankNo',
          action: 'interbankNo',
          align: 'center'
        },
      ],
      linkColumns: [
        {
          type: 'index',
          width: 55,
          align: 'center'
        },
        {
          label: '姓名',
          prop: 'linkName',
          slot: 'linkName',
          action: 'linkName',
          headerSlot: 'linkNameHeader',
          align: 'center'
        },
        {
          label: '手机',
          prop: 'mobilePhone',
          slot: 'mobilePhone',
          action: 'mobilePhone',
          headerSlot: 'mobilePhoneHeader',
          align: 'center'
        },
        {
          label: '电话',
          prop: 'phone',
          slot: 'phone',
          action: 'phone',
          align: 'center'
        },
        {
          label: '微信号',
          prop: 'wechat',
          slot: 'wechat',
          action: 'wechat',
          align: 'center'
        },
        {
          label: '邮箱',
          prop: 'email',
          slot: 'email',
          action: 'email',
          align: 'center'
        },
        {
          label: '部门',
          prop: 'deptName',
          slot: 'deptName',
          action: 'deptName',
          align: 'center'
        },
        {
          label: '职务',
          prop: 'post',
          slot: 'post',
          action: 'post',
          align: 'center'
        },
        {
          label: '状态',
          prop: 'status',
          slot: 'status',
          action: 'status',
          headerSlot: 'statusHeader',
          align: 'center'
        },
        {
          label: '是否首要',
          prop: 'ifChief',
          slot: 'ifChief',
          action: 'ifChief',
          align: 'center'
        },
        {
          label: '备注',
          prop: 'remark',
          slot: 'remark',
          action: 'remark',
          align: 'center'
        },
      ],
      certificateColumns: [
        {
          type: 'index',
          width: 55,
          align: 'center'
        },
        {
          label: '编码',
          prop: 'code',
          slot: 'code',
          align: "center",
          minWidth: 120
        },
        {
          label: '名称',
          prop: 'name',
          slot: 'name',
          align: "center",
          minWidth: 120
        },


        {
          label: '创建人',
          prop: 'createUserName',
          slot: 'createUserName',
          align: "center",
          width: 120
        },
        {
          label: '创建时间',
          prop: 'createTime',
          slot: 'createTime',
          align: "center",
          minWidth: 120
        },
        {
          label: '状态',
          prop: 'approvalStatus',
          slot: 'approvalStatus',
          align: "center",
          width: 120,
          formatter: (_row, _column, cellValue) => {
            return reviewStatus[_row.approvalStatus];
          }
        },
        {
          label: '备注',
          prop: 'remark',
          slot: 'remark',
          align: "center",
          minWidth: 120
        },
        {
          action: 'action',
          slot: 'action',
          label: '操作',
          align: "center",
        }
      ],
      orderColumns: [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'orderNo',
          label: '订单编码',
          align: 'center',
          sortable: true,
          slot: 'orderNo',
          showOverflowTooltip: true,
          minWidth: 160
        },
        {
          prop: 'contractNo',
          label: '合同编码',
          sortable: true,
          align: 'center',
          slot: 'contractNo',
          showOverflowTooltip: true,
          minWidth: 160
        },
        {
          prop: 'contractNumber',
          label: '合同编号',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 160
        },
        // {
        //   prop: 'deliveryDate',
        //   label: '交货日期',
        //   align: 'center',
        //   showOverflowTooltip: true,
        //   minWidth: 200
        // },
        {
          prop: 'saleTypeName',
          label: '销售类型',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 140
        },
        // {
        //   prop: 'partaName',
        //   label: '客户名称',
        //   align: 'center',
        //   showOverflowTooltip: true,
        //   minWidth: 180
        // },
        {
          prop: 'partaLinkName',
          label: '联系人',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 130
        },

        {
          prop: 'partaTel',
          label: '联系电话',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 130
        },
        {
          prop: 'partbName',
          label: '售出方名称',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 130
        },
        {
          prop: 'partbLinkName',
          label: '售出方联系人',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 130
        },
        {
          prop: 'partbTel',
          label: '售出方联系电话',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 130
        },
        {
          prop: 'payAmount',
          label: '金额(元)',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 170
        },

        {
          prop: 'orderStatus',
          label: '审核状态',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
          formatter: (_row, _column, cellValue) => {
            return reviewStatus[_row.orderStatus];
          }
        },
        {
          prop: 'createTime',
          label: '创建时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 170
        },
        // {
        //   columnKey: 'action',
        //   label: '操作',
        //   width: 230,
        //   align: 'center',
        //   resizable: false,
        //   slot: 'action',
        //   showOverflowTooltip: true,
        //   fixed: 'right'
        // }
      ],
      sendColumns: [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'docNo',
          label: '发货单编码',
          sortable: true,
          align: 'center',
          slot: 'docNo',
          showOverflowTooltip: true,
          minWidth: 200
        },

        {
          prop: 'orderNo',
          label: '销售订单编码',
          sortable: true,
          align: 'center',
          slot: 'orderNo',
          showOverflowTooltip: true,
          minWidth: 200
        },
        {
          prop: 'contactName',
          label: '客户名称',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 180
        },
        {
          prop: 'replied',
          label: '是否回执',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200,
          formatter: (_row, _column, cellValue) => {
            return _row.replied == 1 ? '是' : '否';
          }
        },
        {
          prop: 'reviewStatus',
          label: '状态',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200,
          formatter: (_row, _column, cellValue) => {
            return reviewStatus[_row.reviewStatus];
          }
        },
        {
          prop: 'createTime',
          label: '创建时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 170
        }
      ],
      returnColumns: [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
        },
        {
          prop: 'returnNo',
          label: '退货单编码',
          sortable: true,
          align: 'center',
          slot: 'returnNo',
          showOverflowTooltip: true,
          minWidth: 200
        },
        {
          prop: 'sendNo',
          label: '发货单编码',
          sortable: true,
          align: 'center',
          slot: 'sendNo',
          showOverflowTooltip: true,
          minWidth: 200
        },
        {
          prop: 'orderNo',
          label: '销售订单编码',
          sortable: true,
          align: 'center',
          slot: 'orderNo',
          showOverflowTooltip: true,
          minWidth: 200
        },
        {
          prop: 'contactName',
          label: '客户名称',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 180
        },
        {
          prop: 'payAmount',
          label: '应付金额',
          align: 'center',
          slot: 'payAmount',
          showOverflowTooltip: true,
          minWidth: 200
        },
        {
          prop: 'returnSourceType',
          label: '退货类型',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200,
          formatter: (_row, _column, cellValue) => {
            return _row.returnSourceType == 2? '受托收货退货':'销售发货退货'
          }
        },
        {
          prop: 'reviewStatus',
          label: '状态',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200,
          formatter: (_row, _column, cellValue) => {
            return reviewStatus[_row.reviewStatus];
          }
        },
        {
          prop: 'createTime',
          label: '创建时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 170
        }
      ],
      reconciliationColumns: [
        {
          width: 45,
          type: 'selection',
          columnKey: 'selection',
          align: 'center'
        },
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'statementNo',
          label: '对账单编码',
          align: 'center',
          slot: 'statementNo',
          showOverflowTooltip: true,
          minWidth: 200
        },
        {
          prop: 'contactName',
          label: '客户名称',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 180
        },
        {
          prop: 'startDate',
          label: '对账开始日期',
          align: 'center',
          slot: 'startDate',
          showOverflowTooltip: true,
          minWidth: 200
        },
        {
          prop: 'endDate',
          label: '对账结束日期',
          align: 'center',
          slot: 'endDate',
          showOverflowTooltip: true,
          minWidth: 200
        },
        {
          prop: 'amountTotalPrice',
          label: '总金额',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 130
        },
        {
          prop: 'amountReceivablePrice',
          label: '应收金额',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 130
        },
        {
          prop: 'amountPayablePrice',
          label: '应付金额',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 130
        },
        {
          prop: 'reviewStatus',
          label: '状态',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200,
          formatter: (_row, _column, cellValue) => {
            return reviewStatus[_row.reviewStatus];
          }
        },
        {
          prop: 'replied',
          label: '是否回执',
          align: 'center',
          slot: 'replied',
          showOverflowTooltip: true,
          minWidth: 200,
          formatter: (_row, _column, cellValue) => {
            return _row.replied ? '是' : '否';
          }
        },

        {
          prop: 'createTime',
          label: '创建时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 170
        },

        {
          columnKey: 'action',
          label: '操作',
          width: 230,
          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true,
          fixed: 'right'
        }
      ],
      invoiceColumns: [
        {
          width: 60,
          label: '序号',
          type: 'index',
          columnKey: 'index',
          align: 'center',
        },
        {
          minWidth: 130,
          prop: 'code',
          label: '应付编码',
          align: 'center',
          slot: 'code',
          showOverflowTooltip: true
        },
        {
          minWidth: 120,
          prop: 'invoiceCode',
          label: '发票编码',
          slot: 'invoiceCode',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          minWidth: 130,
          prop: 'contactName',
          label: '单位名称',
          align: 'center',
          slot: 'contactName',
          showOverflowTooltip: true
        },
        {
          minWidth: 140,
          prop: 'payableDate',
          label: '应付日期',
          slot: 'payableDate',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          minWidth: 100,
          prop: 'payableTotalPrice',
          label: '应付金额',
          align: 'center',
          slot: 'payableTotalPrice',
          showOverflowTooltip: true
        },
        {
          minWidth: 100,
          prop: 'paidTotalPrice',
          label: '已付金额',
          align: 'center',
          slot: 'paidTotalPrice',
          showOverflowTooltip: true
        },
        {
          minWidth: 100,
          prop: 'unpaidTotalPrice',
          label: '未付金额',
          align: 'center',
          slot: 'unpaidTotalPrice',
          showOverflowTooltip: true
        },
        {
          minWidth: 100,
          prop: 'sourceCode',
          label: '来源编码',
          align: 'center',
          slot: 'sourceCode',
          showOverflowTooltip: true
        },
        {
          minWidth: 100,
          prop: 'accountingSubjectName',
          label: '会计科目',
          align: 'center',
          slot: 'accountingSubjectName',
          showOverflowTooltip: true
        },
        {
          minWidth: 100,
          prop: 'status',
          label: '收款状态',
          align: 'center',
          slot: 'status',
          showOverflowTooltip: true,
          formatter: (_row, _column, cellValue) => {
            return this.statusList.find(item => item.value === cellValue).label
          }
        },
        {
          minWidth: 100,
          prop: 'approvalStatus',
          label: '审核状态',
          align: 'center',
          slot: 'approvalStatus',
          formatter: (_row, _column, cellValue) => {
            return reviewStatus[_row.approvalStatus];
          }
        }
      ]
    };
  },
  methods: {
    async open(row) {
      this.row = row;
      this.visible = true;
      await this._getById(row.id);
    },
    /* 订单记录表格数据源 */
    orderDatasource({page, limit, where, order}) {
      return  getTableList({
        pageNum: page,
        size: limit,
        ...where,
        partaName:this.row.name
      })
    },
    /* 发货记录表格数据源 */
    sendDatasource({ page, limit, where, order }) {
      return getSendTableList({
        pageNum: page,
        size: limit,
        ...where,
        contactName:this.row.name
      });
    },
    /* 退货表格数据源 */
    returnDatasource({page, limit, where, order}) {
      return getReturnTableList({
        pageNum: page,
        size: limit,
        ...where,
        contactName:this.row.name
      });
    },
    /* 对账单记录表格数据源 */
    reconciliationDatasource({page, limit, where, order}) {
      return getAccountstatementList({
        pageNum: page,
        size: limit,
        type: 1,
        ...where,
        contactName:this.row.name
      });
    },
    /* 开票记录表格数据源 */
    invoiceDatasource({page, limit, where, order}) {
      return finPayablePageListAPI({
        pageNum: page,
        size: limit,
        ...where,
        contactName:this.row.name
      });
    },
    cancel() {
      this.$nextTick(() => {
        // 关闭后，销毁所有的表单数据
        this.form = copyObj(this.formDef),
          this.otherForm = copyObj(this.otherFormDef),
          this.tableBankData = []
        this.tableLinkData = []
        this.visible = false;
      })
    },

    async _getById(id) {
      const data = await contactDetail(id);
      this.form = data.base;
      this.otherForm = data.other;
      this.tableBankData = data.bankList;
      this.tableLinkData = data.linkList;
      if (this.tableLinkData && this.tableLinkData.length > 0) {
        this.tableLinkData.forEach(e => e.status = e.status + "");
      }
      if (this.form.level) {
        this.form.level = this.form.level + "";
      }
      await getInfoByIds(this.form.categoryId).then((res) => {
        let categoryName = res.data.map(item=>item.name)?.join(',')
        this.$set(this.form, 'categoryName', categoryName)
      });
    },
    handleActive(val) {
      if (val.name == 'certificate') {
        this.reload()
      }
    },
    //新增/查看/修改资质
    addCertificate(type, row) {
      this.certificateQualificationsDialogFlag = true
      this.$nextTick(() => {
        this.$refs.certificateQualificationsDialogRef.init(type, row)
      })
    },
    /* 证书资质表格数据源 */
    tableCertificateData({page, limit, where}) {
      if (!this.form.id) return []
      return contactQcPackPageAPI({
        pageNum: page,
        size: limit,
        ...where,
        contactId: this.form.id
      });
    },
    /* 刷新表格 */
    reload(where) {
      where = {
        ...where,
        contactId: this.form.id
      }
      this.$refs.certificateTable.reload({page: 1, where});
    },

    downloadFile(file) {
      getFile({objectName: file.storePath}, file.name);
    },

  }
};
</script>