<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="功能组件">
        <el-collapse v-model="functionComponent" class="collapse-class">
          <el-collapse-item title="权限按钮" name="1">
            <auth-button type="primary" size="small" label="权限按钮"></auth-button>
            <el-row>
              <span>说明：所有按钮需要继承的基础组件，用于控制按钮显示权限，默认关闭了按钮权限，需要使用权限时设置参数openPerms为true，传入menuCode（菜单Code）和perms（操作Code），对应base_resource_operation表的主键和操作编码两个字段。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="基础下拉框" name="2">
            <base-select></base-select>
            <el-row>
              <span>说明：下拉框需要继承的基础组件，传入api和loadList（api的查询方法名）两个参数，loadList默认是getList方法，以及selectedField参数，值是字段数组，对应显示的字段和主键字段，支持多选。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="上传按钮" name="3">
            <btn-upload type="primary" :uploadApi="uploadApi" @uploadSuccess="uploadSuccess"></btn-upload>
            <btn-upload :classType="true" :uploadApi="uploadApi" @uploadSuccess="uploadSuccess"></btn-upload>
            <el-row>
              <span>说明：提供上传文件功能，上传按钮目前有两种样式，一种是操作列里面的上传按钮，一种是非操作列的上传按钮，通过classType参数根据实际情况使用不同的样式。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="批量上传按钮" name="4">
            <btn-batch-upload :btnDisplay="true" :uploadApi="batchUploadApi" @uploadSuccess="batchUploadSuccess"></btn-batch-upload>
            <el-row>
              <span>说明：提供上传压缩包，对压缩包里面的文件批量上传功能；上传成功后返回压缩包里面的已经有文件ID的文件列表，根据实际需求进行处理。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="下载按钮" name="5">
            <btn-download fileID="2001031119322940001" type="primary" size="small" downloadButtonMsg="下 载" :classType="true"></btn-download>
            <btn-download fileID="2001031119322940001"></btn-download>
            <el-row>
              <span>说明：提供通过文件ID下载文件功能，下载按钮目前有两种样式，一种是操作列里面的下载按钮，一种是非操作列的下载按钮，通过classType参数根据实际情况使用不同的样式。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="批量下载按钮" name="6">
            <btn-batch-download :fileID="['2001031119322940001']" type="primary" size="small" downloadButtonMsg="批量下载" :classType="true"></btn-batch-download>
            <btn-batch-download :fileID="['2001031119322940001']"></btn-batch-download>
            <el-row>
              <span>说明：传入文件ID数组，点击批量下载按钮会把多个文件以压缩包的形式下载下来；批量下载按钮目前有两种样式，一种是操作列里面的批量下载按钮，一种是非操作列的批量下载按钮，通过classType参数根据实际情况使用不同的样式。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="导入按钮" name="7">
            <btn-import :uploadApi="importApi" btnSize="small" @importSuccess="importSuccess"></btn-import>
            <el-row>
              <span>说明：提供导入文件解析内容的功能，只支持xlsx文件导入并解析文件内容，内容以二维数组的方式返回回来，可根据实际情况对内容数据进行操作。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="导入按钮（自定义）" name="8">
            <btn-auto-import size="small" @upload="autoImportSuccess"></btn-auto-import>
            <el-row>
              <span>说明：导入按钮，针对于不调用文件服务，调用当前系统写的导入接口，该组件只提供选择文件功能，可根据实际情况进行接口调用。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="字典下拉框" name="9">
            <select-dictionary v-model="dictionaryId" dictTypeCode="ZD0031"></select-dictionary>
            <el-row>
              <span>说明：传入字典CODE就会显示对应的字典下拉数据。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="对话框" name="10">
            <auth-button type="primary" size="small" label="打开对话框" @click="visible = !visible"></auth-button>
            <el-row>
              <span>说明：对话框组件，自带保存关闭按钮，自带表单验证。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="表单" name="11">
            <el-form :model="dymForm" class="dymForm-class">
              <dym-form :componentList="componentList" :formValue="dymForm"></dym-form>
            </el-form>
            <el-row>
              <span>说明：表单组件，支持响应式布局，一般用于对话框里面有表单的情况，对话框自带el-form。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="主页面整体样式" name="12">
            <up-down-layout :handleFlag="true" class="upDownLayout-class"></up-down-layout>
            <el-row>
              <span>说明：主页面整体样式组件，针对于查询表格数据类画面。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="检索栏" name="13">
            <search-form :componentList="searchList" :formValue.sync="searchFormQueryParas"
                         @handleFilter="handleFilter" @clearParam="clearParam"></search-form>
            <el-row>
              <span>说明：主页面整体样式组件，针对于查询表格数据类画面。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="表格" name="14">
            <data-table :sourceData.sync="sourceData" :columns="columns" :api="tableApi" operateBtnLayout="" :queryParas="searchFormQueryParas" :menuFlag="true"></data-table>
            <el-row>
              <span>说明：表格组件，自带分页显示。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="更多收起按钮" name="15">
            <data-table :sourceData.sync="sourceData1" :columns="columns1" :api="tableApi" operateBtnLayout="" :queryParas="searchFormQueryParas" :menuFlag="true">
              <template slot="supplierName" slot-scope="scope">
                <span-plus :index="scope.data.$index" :text="scope.data.row.supplierName"></span-plus>
              </template>
              <template slot="receiverName" slot-scope="scope">
                <expand-collapse :sourceData="sourceData1" colProp="receiverName" valueProp="names" :rowIndex="scope.data.$index"></expand-collapse>
              </template>
            </data-table>
            <el-row>
              <span>说明：目前列表有两种手气更多按钮，一种是用于当前列展示内容是数组形式的数据，换行展示；一种是用于当前列文字内容过多。</span>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="共通方法组件">
        <el-collapse v-model="commonMethodComponent" class="collapse-class">
          <el-collapse-item title="合同编号验证方法" name="1">
            <el-form :model="form" :rules="rules">
              <el-form-item label="合同编号" label-width="100px" prop="contractNum">
                <el-input v-model="form.contractNum" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：中文、英文、阿拉伯数字、罗马数字及其他特殊符号（包括但不限于例如“中英文括号”、“中英文冒号”、“-”、“#”、“【”、“】”、“/”等）均可。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="发票编号/发票号码验证方法" name="2">
            <el-form :model="form" :rules="rules">
              <el-form-item label="发票编号/发票号码" label-width="150px" prop="invoiceNum">
                <el-input v-model="form.invoiceNum" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：8位数字。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="发票代码验证方法" name="3">
            <el-form :model="form" :rules="rules">
              <el-form-item label="发票代码" label-width="100px" prop="invoiceCode">
                <el-input v-model="form.invoiceCode" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：10位或12位数字。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="区域编号验证方法" name="4">
            <el-form :model="form" :rules="rules">
              <el-form-item label="区域编号" label-width="100px" prop="areaNum">
                <el-input v-model="form.areaNum" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：中文、英文及数字。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="资产编号验证方法" name="5">
            <el-form :model="form" :rules="rules">
              <el-form-item label="资产编号" label-width="100px" prop="assetNum">
                <el-input v-model="form.assetNum" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：英文、数字及"-"。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="付款确认书编号验证方法" name="6">
            <el-form :model="form" :rules="rules">
              <el-form-item label="付款确认书编号" label-width="110px" prop="payNum">
                <el-input v-model="form.payNum" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：英文、数字及"-"。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="合同名称验证方法" name="7">
            <el-form :model="form" :rules="rules">
              <el-form-item label="合同名称" label-width="100px" prop="contractName">
                <el-input v-model="form.contractName" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：中文、英文、数字及其他特殊符号（包括但不限于例如“中英文括号”、“中英文冒号”、“-”、“#”、“~”、“/”等）均可。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="企业名称验证方法" name="8">
            <el-form :model="form" :rules="rules">
              <el-form-item label="企业名称" label-width="100px" prop="enterpriseName">
                <el-input v-model="form.enterpriseName" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：中文、英文、中英文括号。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="开户行名称验证方法" name="9">
            <el-form :model="form" :rules="rules">
              <el-form-item label="开户行名称" label-width="100px" prop="openingBankName">
                <el-input v-model="form.openingBankName" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：中文。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="开户行账号验证方法" name="10">
            <el-form :model="form" :rules="rules">
              <el-form-item label="开户行账号" label-width="100px" prop="openingBankAccount">
                <el-input v-model="form.openingBankAccount" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：数字。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="姓名/人名验证方法" name="11">
            <el-form :model="form" :rules="rules">
              <el-form-item label="姓名/人名" label-width="100px" prop="name">
                <el-input v-model="form.name" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：中文。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="票据名称验证方法" name="12">
            <el-form :model="form" :rules="rules">
              <el-form-item label="票据名称" label-width="100px" prop="billName">
                <el-input v-model="form.billName" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：中文、中英文括号。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="机构名称验证方法" name="13">
            <el-form :model="form" :rules="rules">
              <el-form-item label="机构名称" label-width="100px" prop="mechanismName">
                <el-input v-model="form.mechanismName" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：中文、英文、数字、特殊字符（包括但不限于中英文括号、"/"等）。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="银行账号验证方法" name="14">
            <el-form :model="form" :rules="rules">
              <el-form-item label="银行账号" label-width="100px" prop="bankAccount">
                <el-input v-model="form.bankAccount" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：数字。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="发票效验码验证方法" name="15">
            <el-form :model="form" :rules="rules">
              <el-form-item label="发票效验码" label-width="100px" prop="invoiceValidationCode">
                <el-input v-model="form.invoiceValidationCode" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：6位数字。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="账户号码验证方法" name="16">
            <el-form :model="form" :rules="rules">
              <el-form-item label="账户号码" label-width="100px" prop="accountNum">
                <el-input v-model="form.accountNum" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：数字。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="企业证件号码验证方法" name="17">
            <el-form :model="form" :rules="rules">
              <el-form-item label="企业证件号码" label-width="100px" prop="enterpriseCredentialsNum">
                <el-input v-model="form.enterpriseCredentialsNum" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：英文、数字。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="经办人证件号码验证方法" name="18">
            <el-form :model="form" :rules="rules">
              <el-form-item label="经办人证件号码" label-width="110px" prop="operatorCredentialsNum">
                <el-input v-model="form.operatorCredentialsNum" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：身份证格式。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="电话/座机验证方法" name="19">
            <el-form :model="form" :rules="rules">
              <el-form-item label="电话/座机" label-width="100px" prop="telephone">
                <el-input v-model="form.telephone" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：座机通用规则。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="手机号验证方法" name="20">
            <el-form :model="form" :rules="rules">
              <el-form-item label="手机号" label-width="100px" prop="mobilePhone">
                <el-input v-model="form.mobilePhone" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：10位或12位数字。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="微信号验证方法" name="21">
            <el-form :model="form" :rules="rules">
              <el-form-item label="微信号" label-width="100px" prop="weChat">
                <el-input v-model="form.weChat" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：微信号通用规则。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="QQ号验证方法" name="22">
            <el-form :model="form" :rules="rules">
              <el-form-item label="QQ号" label-width="100px" prop="QQ">
                <el-input v-model="form.QQ" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：QQ号通用规则。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="邮箱验证方法" name="23">
            <el-form :model="form" :rules="rules">
              <el-form-item label="邮箱" label-width="100px" prop="email">
                <el-input v-model="form.email" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：邮箱通用规则。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="银行联行号验证方法" name="24">
            <el-form :model="form" :rules="rules">
              <el-form-item label="银行联行号" label-width="100px" prop="bankNumber">
                <el-input v-model="form.bankNumber" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：12位数字。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="职务验证方法" name="25">
            <el-form :model="form" :rules="rules">
              <el-form-item label="职务" label-width="100px" prop="job">
                <el-input v-model="form.job" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：中文、英文、数字、特殊字符（包括但不限于中英文括号等）。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="部门验证方法" name="26">
            <el-form :model="form" :rules="rules">
              <el-form-item label="部门" label-width="100px" prop="department">
                <el-input v-model="form.department" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：中文、英文、数字、特殊字符（包括但不限于中英文括号、"/"等）。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="年龄验证方法" name="27">
            <el-form :model="form" :rules="rules">
              <el-form-item label="年龄" label-width="100px" prop="age">
                <el-input v-model="form.age" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：1到3位数字。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="提单规模验证方法" name="28">
            <el-form :model="form" :rules="rules">
              <el-form-item label="提单规模" label-width="100px" prop="ladingBillScale">
                <el-input v-model="form.ladingBillScale" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：数字。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="快递单号验证方法" name="29">
            <el-form :model="form" :rules="rules">
              <el-form-item label="快递单号" label-width="100px" prop="expressNum">
                <el-input v-model="form.expressNum" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：英文、数字。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="统一社会信用代码验证方法" name="30">
            <el-form :model="form" :rules="rules">
              <el-form-item label="统一社会信用代码" label-width="130px" prop="creditCode">
                <el-input v-model="form.creditCode" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：数字、大写英文字母，限制18位。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="企业简码验证方法" name="31">
            <el-form :model="form" :rules="rules">
              <el-form-item label="企业简码" label-width="100px" prop="enterpriseCode">
                <el-input v-model="form.enterpriseCode" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：中英文或数字。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="大额行名验证方法" name="32">
            <el-form :model="form" :rules="rules">
              <el-form-item label="大额行名" label-width="100px" prop="largeBankName">
                <el-input v-model="form.largeBankName" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：中文、中英文括号。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="大额行号验证方法" name="33">
            <el-form :model="form" :rules="rules">
              <el-form-item label="大额行号" label-width="100px" prop="largeBankNum">
                <el-input v-model="form.largeBankNum" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：12位数字。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="地址验证方法" name="34">
            <el-form :model="form" :rules="rules">
              <el-form-item label="地址" label-width="100px" prop="address">
                <el-input v-model="form.address" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：中文、英文、数字、特殊字符（包括但不限于中英文括号、"-"等）。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="法人验证方法" name="35">
            <el-form :model="form" :rules="rules">
              <el-form-item label="法人" label-width="100px" prop="legalPerson">
                <el-input v-model="form.legalPerson" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：中文、英文。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="区域验证方法" name="36">
            <el-form :model="form" :rules="rules">
              <el-form-item label="区域" label-width="100px" prop="area">
                <el-input v-model="form.area" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：中文。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="营业执照号码验证方法" name="37">
            <el-form :model="form" :rules="rules">
              <el-form-item label="营业执照号码" label-width="100px" prop="businessLicenseNum">
                <el-input v-model="form.businessLicenseNum" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：数字、大写英文字母，限制18位。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="组织机构名称验证方法" name="38">
            <el-form :model="form" :rules="rules">
              <el-form-item label="组织机构名称" label-width="100px" prop="organizationNameNum">
                <el-input v-model="form.organizationNameNum" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：中文、英文、数字、特殊字符（包括但不限于中英文括号等）。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="天数验证方法" name="39">
            <el-form :model="form" :rules="rules">
              <el-form-item label="天数" label-width="100px" prop="dayNum">
                <el-input v-model="form.dayNum" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：数字。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="金额单位元验证方法" name="40">
            <el-form :model="form" :rules="rules">
              <el-form-item label="金额单位元" label-width="100px" prop="yuan">
                <el-input v-model="form.yuan" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：整数或两位小数。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="金额单位千万验证方法" name="41">
            <el-form :model="form" :rules="rules">
              <el-form-item label="金额单位千万" label-width="100px" prop="tenMillion">
                <el-input v-model="form.tenMillion" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：整数或四位小数。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="利率验证方法" name="42">
            <el-form :model="form" :rules="rules">
              <el-form-item label="利率" label-width="100px" prop="interestRate">
                <el-input v-model="form.interestRate" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：整数或两位小数。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="费率验证方法" name="43">
            <el-form :model="form" :rules="rules">
              <el-form-item label="费率" label-width="100px" prop="rate">
                <el-input v-model="form.rate" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：整数或两位小数。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="税率验证方法" name="44">
            <el-form :model="form" :rules="rules">
              <el-form-item label="税率" label-width="100px" prop="taxRate">
                <el-input v-model="form.taxRate" class="form-item-class"></el-input>
              </el-form-item>
            </el-form>
            <el-row>
              <span>验证规则：整数或两位小数。</span>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="业务组件">
        <el-collapse v-model="businessComponent" class="collapse-class">
          <el-collapse-item title="区域专员保理专员状态选择" name="0">
            <select-commissioner-status v-model="commissionerStatusId" :queryParas="{sysStatuCode:'2001,2002,2003'}"></select-commissioner-status>
            <el-row>
              <span>说明：参数sysStatuCode可以传多个值，比如2001,2002,2003等</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="产品名称下拉框" name="1">
            <select-product-name v-model="productId"></select-product-name>
            <el-row>
              <span>说明：显示产品名称列表，数据来源产品服务，需要启动对应的产品服务。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="产品名称下拉框（级联）" name="2">
            <el-form :model="productNameCascadeForm" class="dymForm-class">
              <dym-form :componentList="componentList1" :formValue="productNameCascadeForm"></dym-form>
            </el-form>
            <el-row>
              <span>说明：级联产品类型（productType）显示产品名称列表，数据来源产品服务，需要启动对应的产品服务。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="账户名称下拉框" name="3">
            <select-account-name v-model="accountId"></select-account-name>
            <el-row>
              <span>说明：查询当前租户下的所有用户列表，数据来源权限中心。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="来源人下拉框" name="4">
            <select-source-person v-model="sourcePersonId"></select-source-person>
            <el-row>
              <span>说明：显示来源人列表，数据来源权限中心，角色编号是单证，业务助理，客服统筹人。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="接收人下拉框" name="5">
            <select-receiver v-model="receiverId"></select-receiver>
            <el-row>
              <span>说明：显示接收人列表，数据来源权限中心，角色编号是单证，业务助理，客服统筹人。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="核心企业下拉框" name="6">
            <select-core-enterprise v-model="coreEnterpriseId"></select-core-enterprise>
            <el-row>
              <span>说明：显示核心企业下拉列表，数据来源CRM服务，需要启动对应的CRM服务。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="核心企业下拉框（级联）" name="7">
            <el-form :model="coreEnterpriseCascadeForm" class="dymForm-class">
              <dym-form :componentList="componentList2" :formValue="coreEnterpriseCascadeForm"></dym-form>
            </el-form>
            <el-row>
              <span>说明：级联产品名称（projectId）显示核心企业列表，数据来源产品服务，需要启动对应的产品服务。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="计划管理人下拉框" name="8">
            <select-plan-manager v-model="planManagerId"></select-plan-manager>
            <el-row>
              <span>说明：显示计划管理人列表，数据来源CRM服务，需要启动对应的CRM服务。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="再保理银行下拉框" name="9">
            <select-re-factoring-bank v-model="reFactoringBankId"></select-re-factoring-bank>
            <el-row>
              <span>说明：显示再保理银行列表，数据来源CRM服务，需要启动对应的CRM服务。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="计划管理人/再保理银行下拉框" name="10">
            <select-financial-institutions v-model="financialInstitutionsId"></select-financial-institutions>
            <el-row>
              <span>说明：显示计划管理人和再保理银行列表，数据来源CRM服务，需要启动对应的CRM服务。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="计划管理人/再保理银行下拉框（级联）" name="11">
            <el-form :model="financialInstitutionsCascadeForm" class="dymForm-class">
              <dym-form :componentList="componentList3" :formValue="financialInstitutionsCascadeForm"></dym-form>
            </el-form>
            <el-row>
              <span>说明：级联产品名称（projectId）显示计划管理人或再保理银行列表，数据来源产品服务，需要启动对应的产品服务。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="资产服务机构下拉框" name="12">
            <select-assets-service v-model="assetsServiceId"></select-assets-service>
            <el-row>
              <span>说明：显示资产服务机构列表，数据来源CRM服务，需要启动对应的CRM服务。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="资产服务机构下拉框（级联）" name="13">
            <el-form :model="assetsServiceCascadeForm" class="dymForm-class">
              <dym-form :componentList="componentList4" :formValue="assetsServiceCascadeForm"></dym-form>
            </el-form>
            <el-row>
              <span>说明：级联产品名称（projectId）显示资产服务机构列表，数据来源产品服务，需要启动对应的产品服务。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="原始权益人下拉框" name="14">
            <select-primitive-rights-holder v-model="primitiveRightsHolderId"></select-primitive-rights-holder>
            <el-row>
              <span>说明：显示原始权益人列表，数据来源CRM服务，需要启动对应的CRM服务。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="原始权益人下拉框（级联）" name="15">
            <el-form :model="primitiveRightsHolderCascadeForm" class="dymForm-class">
              <dym-form :componentList="componentList5" :formValue="primitiveRightsHolderCascadeForm"></dym-form>
            </el-form>
            <el-row>
              <span>说明：级联产品名称（projectId）显示原始权益人列表，数据来源产品服务，需要启动对应的产品服务。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="供应商下拉框" name="16">
            <select-supplier v-model="supplierId"></select-supplier>
            <el-row>
              <span>说明：显示供应商列表，数据来源CRM服务，需要启动对应的CRM服务。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="项目公司下拉框" name="17">
            <select-project-company-name v-model="projectCompanyId"></select-project-company-name>
            <el-row>
              <span>说明：显示项目公司列表，数据来源CRM服务，需要启动对应的CRM服务。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="期数下拉框（级联）" name="18">
            <el-form :model="periodsCascadeForm" class="dymForm-class">
              <dym-form :componentList="componentList6" :formValue="periodsCascadeForm"></dym-form>
            </el-form>
            <el-row>
              <span>说明：级联产品名称（projectId）显示期数列表，数据来源产品服务，需要启动对应的产品服务。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="大区域下拉框（级联）" name="19">
            <el-form :model="bigAreaForm" class="dymForm-class">
              <dym-form :componentList="componentList7" :formValue="bigAreaForm"></dym-form>
            </el-form>
            <el-row>
              <span>说明：级联核心企业（coreCompanyId）显示大区域列表，数据来源CRM服务，需要启动对应的CRM服务。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="小区域下拉框（级联）" name="20">
            <el-form :model="smallAreaForm" class="dymForm-class">
              <dym-form :componentList="componentList8" :formValue="smallAreaForm"></dym-form>
            </el-form>
            <el-row>
              <span>说明：级联核心企业（coreCompanyId）显示小区域列表，数据来源CRM服务，需要启动对应的CRM服务。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="部门下拉框（级联）" name="21">
            <el-form :model="departmentForm" class="dymForm-class">
              <dym-form :componentList="componentList9" :formValue="departmentForm"></dym-form>
            </el-form>
            <el-row>
              <span>说明：级联企业名称（keyId）显示部门列表，数据来源CRM服务，需要启动对应的CRM服务。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="区域专员下拉框" name="22">
            <select-area-commissioner v-model="areaCommissionerId"></select-area-commissioner>
            <el-row>
              <span>说明：目前显示为当前租户下的所有账户，后续业务确认可能会修改角色范围。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="保理专员下拉框" name="23">
            <select-factoring-commissioner v-model="factoringCommissionerId"></select-factoring-commissioner>
            <el-row>
              <span>说明：目前显示为当前租户下的所有账户，后续业务确认可能会修改角色范围。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="业务专员下拉框" name="24">
            <select-business-commissioner v-model="businessCommissionerId"></select-business-commissioner>
            <el-row>
              <span>说明：目前显示为当前租户下的所有账户，后续业务确认可能会修改角色范围。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="省市区下拉框" name="25">
            <select-address v-model="addressArray"></select-address>
            <el-row>
              <span>说明：树结构形式，绑定数据为数组，依次为省市区字典ID。</span>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="省市区街道选择输入框" name="26">
            <address-picker v-model="addressPicker"></address-picker>
            <el-row>
              <span>说明：省市区互相级联下拉选择结合输入框的形式，绑定数据为对象，字段province对应省，字段city对应市，字段region对应区，字段street对应街道。</span>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="数据查询">
        <el-collapse v-model="businessComponent" class="collapse-class">
          <el-collapse-item title="sql语句" name="0">
            <el-row style="margin-bottom: 10px">
              <el-col :span="24" class="btn-right">
                <auth-button type="primary" label='执行'  size="small" @click="execute"></auth-button>
                <auth-button type="primary" label='重置'  size="small" @click="resetQuery" ></auth-button>
              </el-col>
            </el-row>
            <el-input type="textarea" v-model="sqlText" aria-placeholder="请填写正确的sql"></el-input>
            <el-row>
              <span style="color: red">请填写正确的sql查询语句</span>
            </el-row>
          </el-collapse-item>

          <el-collapse-item title="sql执行结果" name="0">
            <pre-view>{{resData}}</pre-view>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="客服跟单">
        <el-collapse class="collapse-class" v-model="businessComponent">
          <el-collapse-item title="调试按钮启用后，所有的任务办理按钮可见（忽略任务状态）" name="0">
            <el-button   type="button" size="mini"  @click="startDebugger()">{{isDebug?'关闭调试':'启用调试'}}</el-button>
          </el-collapse-item>
          <el-collapse-item title="客服跟单外部接口调用日志" name="1">
            <log-list :name="23"/>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
    </el-tabs>
    <dialog-edit :visible.sync="visible" :form="dialogForm" :api="dialogApi" editModel="E" title="对话框标题"></dialog-edit>
  </div>
</template>

<script>
import { UPLOAD_API, BATCH_UPLOAD_API, IMPORT_API } from '@/constant.js'
import { authButton, BaseSelect, btnUpload, btnBatchUpload, btnDownload, btnBatchDownload,
  btnImport, btnAutoImport, SelectDictionary, DialogEdit, dymForm, SelectProductName,
  upDownLayout, searchForm, DataTable, ExpandCollapse, SpanPlus, validate, SelectProductNameCascade,
  SelectAccountName, SelectSourcePerson, SelectReceiver, SelectCoreEnterprise, SelectCoreEnterpriseCascade,
  SelectPlanManager, SelectReFactoringBank, SelectFinancialInstitutions, SelectFinancialInstitutionsCascade,
  SelectAssetsService, SelectAssetsServiceCascade, SelectPrimitiveRightsHolder, SelectPrimitiveRightsHolderCascade,
  SelectSupplier, SelectProjectCompanyName, SelectPeriodsCascade, SelectBigArea, SelectSmallArea, SelectDepartment,
  SelectAreaCommissioner, SelectFactoringCommissioner, SelectBusinessCommissioner, SelectAddress, addressPicker } from 'newepoch-components'
import SelectCommissionerStatus from '@/components/tracemgr/common/SelectCommissionerStatus'
import logList from '@/pages/tracemgr/demo/loglist'
import tracemgrApi from '@/api/tracemgrApi'

export default {
  components: {
    authButton,
    BaseSelect,
    btnUpload,
    btnBatchUpload,
    btnDownload,
    btnBatchDownload,
    btnImport,
    btnAutoImport,
    SelectDictionary,
    DialogEdit,
    dymForm,
    SelectProductName,
    upDownLayout,
    searchForm,
    DataTable,
    ExpandCollapse,
    SpanPlus,
    SelectProductNameCascade,
    SelectAccountName,
    SelectSourcePerson,
    SelectReceiver,
    SelectCoreEnterprise,
    SelectCoreEnterpriseCascade,
    SelectPlanManager,
    SelectReFactoringBank,
    SelectFinancialInstitutions,
    SelectFinancialInstitutionsCascade,
    SelectAssetsService,
    SelectAssetsServiceCascade,
    SelectPrimitiveRightsHolder,
    SelectPrimitiveRightsHolderCascade,
    SelectSupplier,
    SelectProjectCompanyName,
    SelectPeriodsCascade,
    SelectBigArea,
    SelectSmallArea,
    SelectDepartment,
    SelectAreaCommissioner,
    SelectFactoringCommissioner,
    SelectBusinessCommissioner,
    SelectAddress,
    addressPicker,
    SelectCommissionerStatus,
    tracemgrApi,
    logList
  },
  data () {
    return {
      sqlText: '',
      resData: '',
      isDebug: false,
      functionComponent: [],
      commonMethodComponent: [],
      businessComponent: [],
      uploadApi: UPLOAD_API,
      batchUploadApi: BATCH_UPLOAD_API,
      importApi: IMPORT_API,
      dictionaryId: '',
      visible: false,
      dialogForm: {},
      dialogApi: {},
      tableApi: {},
      dymForm: {
        productType: '',
        productId: ''
      },
      searchFormQueryParas: {
        productType: '',
        productId: ''
      },
      form: {},
      rules: {
        contractNum: [{ validator: validate.contractNumValidate, trigger: 'blur' }],
        invoiceNum: [{ validator: validate.invoiceNumValidate, trigger: 'blur' }],
        invoiceCode: [{ validator: validate.invoiceCodeValidate, trigger: 'blur' }],
        areaNum: [{ validator: validate.areaNumValidate, trigger: 'blur' }],
        assetNum: [{ validator: validate.assetNumValidate, trigger: 'blur' }],
        payNum: [{ validator: validate.payNumValidate, trigger: 'blur' }],
        contractName: [{ validator: validate.contractNameValidate, trigger: 'blur' }],
        enterpriseName: [{ validator: validate.enterpriseNameValidate, trigger: 'blur' }],
        openingBankName: [{ validator: validate.openingBankNameValidate, trigger: 'blur' }],
        openingBankAccount: [{ validator: validate.openingBankAccountValidate, trigger: 'blur' }],
        name: [{ validator: validate.nameValidate, trigger: 'blur' }],
        billName: [{ validator: validate.billNameValidate, trigger: 'blur' }],
        mechanismName: [{ validator: validate.mechanismNameValidate, trigger: 'blur' }],
        bankAccount: [{ validator: validate.bankAccountValidate, trigger: 'blur' }],
        invoiceValidationCode: [{ validator: validate.invoiceValidationCodeValidate, trigger: 'blur' }],
        accountNum: [{ validator: validate.accountNumValidate, trigger: 'blur' }],
        enterpriseCredentialsNum: [{ validator: validate.enterpriseCredentialsNumValidate, trigger: 'blur' }],
        operatorCredentialsNum: [{ validator: validate.operatorCredentialsNumValidate, trigger: 'blur' }],
        telephone: [{ validator: validate.telephoneValidate, trigger: 'blur' }],
        mobilePhone: [{ validator: validate.mobilePhoneValidate, trigger: 'blur' }],
        weChat: [{ validator: validate.weChatValidate, trigger: 'blur' }],
        QQ: [{ validator: validate.QQValidate, trigger: 'blur' }],
        email: [{ validator: validate.emailValidate, trigger: 'blur' }],
        bankNumber: [{ validator: validate.bankNumberValidate, trigger: 'blur' }],
        job: [{ validator: validate.jobValidate, trigger: 'blur' }],
        department: [{ validator: validate.departmentValidate, trigger: 'blur' }],
        age: [{ validator: validate.ageValidate, trigger: 'blur' }],
        ladingBillScale: [{ validator: validate.ladingBillScaleValidate, trigger: 'blur' }],
        expressNum: [{ validator: validate.expressNumValidate, trigger: 'blur' }],
        creditCode: [{ validator: validate.creditCodeValidate, trigger: 'blur' }],
        enterpriseCode: [{ validator: validate.enterpriseCodeValidate, trigger: 'blur' }],
        largeBankName: [{ validator: validate.largeBankNameValidate, trigger: 'blur' }],
        largeBankNum: [{ validator: validate.largeBankNumValidate, trigger: 'blur' }],
        address: [{ validator: validate.addressValidate, trigger: 'blur' }],
        legalPerson: [{ validator: validate.legalPersonValidate, trigger: 'blur' }],
        area: [{ validator: validate.areaValidate, trigger: 'blur' }],
        businessLicenseNum: [{ validator: validate.businessLicenseNumValidate, trigger: 'blur' }],
        organizationNameNum: [{ validator: validate.organizationNameNumValidate, trigger: 'blur' }],
        dayNum: [{ validator: validate.dayNumValidate, trigger: 'blur' }],
        yuan: [{ validator: validate.yuanValidate, trigger: 'blur' }],
        tenMillion: [{ validator: validate.tenMillionValidate, trigger: 'blur' }],
        interestRate: [{ validator: validate.interestRateValidate, trigger: 'blur' }],
        rate: [{ validator: validate.rateValidate, trigger: 'blur' }],
        taxRate: [{ validator: validate.taxRateValidate, trigger: 'blur' }]
      },
      sourceData: [],
      sourceData1: [
        {
          supplierName: '测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据测试企业数据企业数据企业数据企业数据企业数据企业数据企业数据企业数据企业数据企业数据企业数据',
          receiverName: [
            { names: '收款人1' },
            { names: '收款人1' },
            { names: '收款人1' },
            { names: '收款人1' }
          ]
        }
      ],
      columns: [
        // 供应商名称
        {
          prop: 'supplierName',
          align: 'left',
          label: '供应商名称',
          width: '200px'
        },
        // 收款人名称
        {
          prop: 'receiverName',
          align: 'left',
          label: '收款人名称',
          width: '200px'
        }
      ],
      columns1: [
        // 供应商名称
        {
          prop: 'supplierName',
          align: 'left',
          label: '供应商名称',
          width: '200px',
          slot: true
        },
        // 收款人名称
        {
          prop: 'receiverName',
          align: 'center',
          label: '收款人名称',
          width: '200px',
          slot: true
        }
      ],
      componentList: [
        // 产品类型
        {
          value: 'productType',
          disabled: false,
          componentName: 'SelectDictionary',
          dictTypeCode: 'ZD0087',
          name: 'productType',
          label: '产品类型',
          cols: [24, 24, 24, 24],
          prop: 'productType',
          labelWidth: '100px'
        },
        // 产品名称
        {
          value: 'productId',
          disabled: false,
          componentName: SelectProductName,
          name: 'product',
          queryName: 'productType',
          queryValue: 'productType',
          label: '产品名称',
          cols: [24, 24, 24, 24],
          prop: 'productId',
          labelWidth: '100px'
        }
      ],
      searchList: [
        // 产品类型
        {
          value: 'productType',
          disabled: false,
          componentName: 'SelectDictionary',
          dictTypeCode: 'ZD0087',
          name: 'productType',
          label: '产品类型',
          cols: [24, 24, 24, 24],
          prop: 'productType',
          labelWidth: '100px'
        },
        // 产品名称
        {
          value: 'productId',
          disabled: false,
          componentName: SelectProductName,
          name: 'product',
          label: '产品名称',
          cols: [24, 24, 24, 24],
          prop: 'productId',
          labelWidth: '100px'
        }
      ],
      productId: '',
      commissionerStatusId: '',
      productNameCascadeForm: {},
      componentList1: [
        // 产品类型
        {
          value: 'productType',
          disabled: false,
          componentName: 'SelectDictionary',
          dictTypeCode: 'ZD0087',
          name: 'productType',
          label: '产品类型',
          cols: [24, 24, 24, 24],
          prop: 'productType',
          labelWidth: '100px'
        },
        // 产品名称
        {
          value: 'productId',
          disabled: false,
          componentName: SelectProductNameCascade,
          name: 'product',
          queryName: 'productType',
          queryValue: 'productType',
          label: '产品名称',
          cols: [24, 24, 24, 24],
          prop: 'productId',
          labelWidth: '100px'
        }
      ],
      accountId: '',
      sourcePersonId: '',
      receiverId: '',
      coreEnterpriseId: '',
      coreEnterpriseCascadeForm: {},
      componentList2: [
        // 产品名称
        {
          value: 'productId',
          disabled: false,
          componentName: SelectProductName,
          label: '产品名称',
          cols: [24, 24, 24, 24],
          prop: 'productId',
          labelWidth: '100px'
        },
        // 核心企业
        {
          value: 'coreEnterpriseCascadeId',
          disabled: false,
          componentName: SelectCoreEnterpriseCascade,
          name: 'coreEnterpriseCascade',
          queryName: 'projectId',
          queryValue: 'productId',
          label: '核心企业',
          cols: [24, 24, 24, 24],
          prop: 'coreEnterpriseCascadeId',
          labelWidth: '100px'
        }
      ],
      planManagerId: '',
      reFactoringBankId: '',
      financialInstitutionsId: '',
      financialInstitutionsCascadeForm: {},
      componentList3: [
        // 产品名称
        {
          value: 'productId',
          disabled: false,
          componentName: SelectProductName,
          label: '产品名称',
          cols: [24, 24, 24, 24],
          prop: 'productId',
          labelWidth: '200px'
        },
        // 核心企业
        {
          value: 'financialInstitutionsCascadeId',
          disabled: false,
          componentName: SelectFinancialInstitutionsCascade,
          name: 'financialInstitutionsCascade',
          queryName: 'projectId',
          queryValue: 'productId',
          label: '计划管理人/再保理银行',
          cols: [24, 24, 24, 24],
          prop: 'financialInstitutionsCascadeId',
          labelWidth: '200px'
        }
      ],
      assetsServiceId: '',
      assetsServiceCascadeForm: {},
      componentList4: [
        // 产品名称
        {
          value: 'productId',
          disabled: false,
          componentName: SelectProductName,
          label: '产品名称',
          cols: [24, 24, 24, 24],
          prop: 'productId',
          labelWidth: '100px'
        },
        // 核心企业
        {
          value: 'assetsServiceCascadeId',
          disabled: false,
          componentName: SelectAssetsServiceCascade,
          name: 'assetsServiceCascade',
          queryName: 'projectId',
          queryValue: 'productId',
          label: '资产服务机构',
          cols: [24, 24, 24, 24],
          prop: 'assetsServiceCascadeId',
          labelWidth: '100px'
        }
      ],
      primitiveRightsHolderId: '',
      primitiveRightsHolderCascadeForm: {},
      componentList5: [
        // 产品名称
        {
          value: 'productId',
          disabled: false,
          componentName: SelectProductName,
          label: '产品名称',
          cols: [24, 24, 24, 24],
          prop: 'productId',
          labelWidth: '100px'
        },
        // 原始权益人
        {
          value: 'primitiveRightsHolderCascadeId',
          disabled: false,
          componentName: SelectPrimitiveRightsHolderCascade,
          name: 'primitiveRightsHolderCascade',
          queryName: 'projectId',
          queryValue: 'productId',
          label: '原始权益人',
          cols: [24, 24, 24, 24],
          prop: 'primitiveRightsHolderCascadeId',
          labelWidth: '100px'
        }
      ],
      supplierId: '',
      projectCompanyId: '',
      periodsCascadeForm: {},
      componentList6: [
        // 产品名称
        {
          value: 'productId',
          disabled: false,
          componentName: SelectProductName,
          label: '产品名称',
          cols: [24, 24, 24, 24],
          prop: 'productId',
          labelWidth: '100px'
        },
        // 期数
        {
          value: 'periodsCascadeId',
          disabled: false,
          componentName: SelectPeriodsCascade,
          name: 'periodsCascade',
          queryName: 'projectId',
          queryValue: 'productId',
          label: '期数',
          cols: [24, 24, 24, 24],
          prop: 'periodsCascadeId',
          labelWidth: '100px'
        }
      ],
      bigAreaForm: {},
      componentList7: [
        // 核心企业
        {
          value: 'coreCompanyId',
          disabled: false,
          componentName: SelectCoreEnterprise,
          label: '核心企业',
          cols: [24, 24, 24, 24],
          prop: 'coreCompanyId',
          labelWidth: '100px'
        },
        // 大区域
        {
          value: 'bigAreaId',
          disabled: false,
          componentName: SelectBigArea,
          name: 'bigArea',
          queryName: 'coreCompanyId',
          queryValue: 'coreCompanyId',
          label: '大区域',
          cols: [24, 24, 24, 24],
          prop: 'bigAreaId',
          labelWidth: '100px'
        }
      ],
      smallAreaForm: {},
      componentList8: [
        // 核心企业
        {
          value: 'coreCompanyId',
          disabled: false,
          componentName: SelectCoreEnterprise,
          label: '核心企业',
          cols: [24, 24, 24, 24],
          prop: 'coreCompanyId',
          labelWidth: '100px'
        },
        // 小区域
        {
          value: 'smallAreaId',
          disabled: false,
          componentName: SelectSmallArea,
          name: 'smallArea',
          queryName: 'coreCompanyId',
          queryValue: 'coreCompanyId',
          label: '小区域',
          cols: [24, 24, 24, 24],
          prop: 'smallAreaId',
          labelWidth: '100px'
        }
      ],
      departmentForm: {},
      componentList9: [
        // 核心企业
        {
          value: 'coreCompanyId',
          disabled: false,
          componentName: SelectCoreEnterprise,
          label: '核心企业',
          cols: [24, 24, 24, 24],
          prop: 'coreCompanyId',
          labelWidth: '100px'
        },
        // 部门
        {
          value: 'departmentId',
          disabled: false,
          componentName: SelectDepartment,
          name: 'department',
          queryName: 'keyId',
          queryValue: 'coreCompanyId',
          label: '部门',
          cols: [24, 24, 24, 24],
          prop: 'departmentId',
          labelWidth: '100px'
        }
      ],
      areaCommissionerId: '',
      factoringCommissionerId: '',
      businessCommissionerId: '',
      addressArray: [],
      addressPicker: {
        province: '',
        city: '',
        region: '',
        street: ''
      }
    }
  },
  methods: {
    uploadSuccess (returnData) {
      this.success('文件' + returnData.fileName + '上传成功，文件ID是' + returnData.fileID)
    },
    batchUploadSuccess (returnData) {
      console.log(returnData.fileList)
      this.success('压缩包' + returnData.fileName + '里面的文件已经解压上传成功，返回上传文件列表查看控制台输出')
    },
    importSuccess (returnData) {
      console.log(returnData)
      this.success('文件导入成功，返回xlsx文件内容查看控制台输出')
    },
    autoImportSuccess (file) {
      console.log(file)
      this.success('文件导入成功，返回文件内容查看控制台输出')
    },
    handleFilter () {
      console.log('查询数据')
    },
    clearParam () {
      for (let key in this.searchFormQueryParas) {
        this.searchFormQueryParas[key] = ''
      }
    },
    resetQuery () {
      this.sqlText = ''
    },
    execute () {
      if (this.sqlText === '') {
        return this.error('请正确填写sql!')
      }
      tracemgrApi['formalOrderList'].executeSql({ sqlText: this.sqlText }).then(res => {
        if (res.data.length > 0) {
          this.resData = JSON.stringify(res)
        } else {
          this.resData = '暂无数据'
        }
      }).catch(() => {

      })
    },
    startDebugger () {
      this.isDebug = !this.isDebug
      document.getElementById('app').setAttribute('tracemgrDebugger', this.isDebug)
    }
  }
}
</script>

<style>
  .collapse-class {
    padding: 10px;
    background-color: white;
  }

  .el-collapse-item__header {
    font-weight: bold;
  }

  .dymForm-class {
    width: 400px;
  }

  .upDownLayout-class {
    height: 150px!important;
  }

  .form-item-class {
    width: 300px;
  }
</style>
