vue-insagent-pc/src/views/AgreementManage/CarInsurance/AgreementEntry.vue

<template>
  <div>
    <el-main ref="elMain" style="padding: 0px">
      <!-- 右侧列表页面Start -->
      <!-- 工具区域Start -->
      <el-form class="queryForm p-2" ref="queryFormRef" :model="queryForm" :inline="true" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-input :size="overSize" clearable v-model.trim="queryForm.creator" placeholder="请输入录入人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="修改人">
              <el-input :size="overSize" clearable v-model.trim="queryForm.modifiedBy" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="供应商类型">
              <el-select :size="overSize" v-model="supplierType" placeholder="请选择供应商" clearable>
                <el-option v-for="(item, index) in supplierTypeEnumoptions" :key="index" :label="item.dictTag"
                  :value="item.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="保险公司">
              <el-cascader v-model="agreement.partnerCompaniesId" :size="overSize" :show-all-levels="false"
                :options="ztreeNodes" :props="optionProps" @change="handleChange" clearable filterable></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="是否有效">
              <el-select :size="overSize" v-model="queryForm.validStatus" placeholder="请选择" clearable>
                <el-option label="无效" :value="0"></el-option>
                <el-option label="有效" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="协议类型">
              <el-select :size="overSize" v-model="queryForm.agreementType" placeholder="请选择" clearable
                style="width: 100%">
                <el-option v-for="val in agreementTypeoptions" :key="val.dictValue" :label="val.dictTag"
                  :value="val.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="省市区" prop="areaCode">
              <el-cascader :size="overSize" v-model="queryForm.areaCode" :options="areaOptions"
                :props="{ label: 'areaCname', value: 'areaCode', children: 'child', checkStrictly: true }" clearable
                ref="area"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="费用描述">
              <el-input :size="overSize" clearable v-model.trim="queryForm.costsDescription" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="录入时间">
              <el-date-picker value-format="yyyy-MM-dd" v-model="queryForm.date" style="width: 215px" :size="overSize"
                type="daterange" align="left" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="修改时间">
              <el-date-picker value-format="yyyy-MM-dd" v-model="queryForm.updateData" style="width: 215px"
                :size="overSize" type="daterange" align="left" @change="dateUpdateChange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="协议有限时间">
              <el-date-picker value-format="yyyy-MM-dd" v-model="queryForm.agreemenData" style="width: 215px"
                :size="overSize" type="daterange" align="left" @change="agreemenChange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <kt-button label="查询" :size="overSize" type="primary" perms="agreement:input:query" @click="queryEsmInfo" />
              <kt-button label="添加协议" :size="overSize" type="success" perms="agreement:input:add" @click="handleAdd" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :size="overSize" :data="pageResult" height="680" border v-loading="loading" highlight-current-row stripe
        :header-cell-style="{
          background: '#F2F7FC',
          fontWeight: '700',
          color: '#606266',
        }">
        <el-table-column prop="id" label="编号" width="50" align="center"></el-table-column>
        <el-table-column prop="agreementCode" label="协议代码" align="center" width="180"></el-table-column>
        <el-table-column prop="agreementName" label="协议名称" align="center"></el-table-column>
        <el-table-column prop="agreementType" label="协议类型" align="center" width="150"
          :formatter="agreementtypeFormatter"></el-table-column>
        <el-table-column prop="startDate" label="协议生效日期" align="center"></el-table-column>
        <el-table-column prop="endDate" label="协议失效日期" align="center"></el-table-column>
        <el-table-column prop="matchType" label="匹配日期类型" align="center" :formatter="matchtypeFormatter"></el-table-column>
        <el-table-column prop="moneyTime" label="结算周期" align="center" :formatter="moneytimeFormatter"></el-table-column>
        <!-- <el-table-column prop="auditStatus" label="状态" align="center">
          <template slot-scope="scope">
            <span :style="'color:' + agreestatusStyle(scope.row.auditStatus)">
              {{ auditstatusFormatter(scope.row) }}
            </span>
          </template>
        </el-table-column> -->
        <el-table-column prop="updateTime" label="修改时间" align="center" :formatter="updatetimeFormatter"></el-table-column>
        <el-table-column prop="validStatus" label="是否有效" align="center">
          <template slot-scope="scope">
            <span :style="{ color: scope.row.validStatus == '1' ? '#67c23a' : '#909399' }">{{
              scope.row.validStatus == 1 ? "有效":"无效" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="modifiedBy" label="修改人" align="center" width="130"></el-table-column>
        <el-table-column label="操作" align="center" width="200" fixed="right">
          <template slot-scope="scope">
            <kt-button label="编辑" :size="overSize" type="text" perms="agreement:input:update"
              @click="uplatequery(scope.$index, scope.row)" style="color: #e6a23c !important " />
            <kt-button label="删除" :size="overSize" type="text" perms="agreement:input:delete"
              @click="deletequery(scope.$index, scope.row)" style="color: #f56c6c !important " />
            <el-button type="text" size="mini">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link" style="font-size: 12px">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <kt-button label="协议历史记录" :size="overSize" type="text" perms="agreement:input:historyRecord"
                      @click="historyRecord(scope.$index, scope.row)" />
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <kt-button label="产品费用" :size="overSize" type="text" perms="agreement:input:productCost"
                      @click="productCost(scope.$index, scope.row)" />
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <kt-button label="承保规则" :size="overSize" type="text" perms="agreement:input:underwritingRules"
                      @click="underwritingRulesButton(scope.$index, scope.row)" />
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
        :page-sizes="[20, 50, 100, 200]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize">
      </el-pagination>
    </el-main>
    <!-- 新增协议的对话框 -->
    <el-dialog :title="dialogTitle" v-dialogDrag :visible.sync="agreementdialogVisible" width="70%"
      :close-on-click-modal="false" :close-on-press-escape="false" style="margin-top: -8vh" @close="closeDialog">
      <el-row style="margin-bottom: 10px" v-if="agreement.agreestatuButtonSizes == '2'">
        <el-col :span="4" style="text-align: right"><label style="margin-right: 10px">退回修改原因：</label></el-col>
        <el-col :span="20" style="color: red">
          {{ agreement.remark }}
        </el-col>
      </el-row>
      <!-- 内容主体区域 -->
      <el-tabs v-model="activeTabs" type="card" @tab-click="handleClickTab">
        <el-tab-pane label="协议信息" name="first">
          <el-form :size="overSize" :model="agreement" :rules="addAgreementRules" ref="addAgreementRef"
            label-width="130px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="协议代码">
                  <el-input v-model="agreement.agreementCode" disabled placeholder="请输入协议代码"
                    style="width: 100%"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="协议名称" prop="agreementName">
                  <el-input v-model="agreement.agreementName" placeholder="请输入协议名称" style="width: 100%"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="协议简称" prop="agreementAbbreviation">
                  <el-input v-model="agreement.agreementAbbreviation" placeholder="请输入协议简称"
                    style="width: 100%"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="协议类型" prop="agreementType">
                  <el-select v-model="agreement.agreementType" placeholder="请选择协议类型" style="width: 100%"
                    @change="agreementTypeChange">
                    <el-option v-for="item in agreementTypeoptions" :key="item.dictValue" :label="item.dictTag"
                      :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="保险公司" :prop="supplierType == '1' ? '' : 'insuranceCompanyId'">
                  <el-cascader style="width: 100%" :disabled="supplierType == '1' || operType == 'EDIT'"
                    v-model="agreement.insuranceCompanyId" :show-all-levels="false" :options="prodInsurance"
                    :props="optionProps" @change="prodhandleChange" clearable filterable></el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合作公司" prop="partnerCompaniesId">
                  <el-cascader :disabled="operType == 'EDIT'" style="width: 100%" v-model="agreement.partnerCompaniesId"
                    :show-all-levels="false" :options="ztreeNodes" :props="optionProps" @change="handleChange" clearable
                    filterable></el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="对接人" prop="dockingPerson">
                  <el-input v-model="agreement.dockingPerson" placeholder="请添加对接人" style="width: 100%"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系方式" prop="dockingPhone">
                  <el-input maxlength="11" show-word-limit v-model="agreement.dockingPhone" placeholder="请输入联系方式"
                    style="width: 100%" type="text"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="含增值税结算" prop="withTax">
                  <el-select v-model="agreement.withTax" placeholder="请选择是否含增值税结算" style="width: 100%">
                    <el-option label="是" value="是"></el-option>
                    <el-option label="否" value="否"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="保单日期类型" prop="matchType">
                  <el-select v-model="agreement.matchType" placeholder="请选择保单日期类型" style="width: 100%">
                    <el-option v-for="item in matchTypeoptions" :key="item.dictValue" :label="item.dictTag"
                      :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="协议生效日期" prop="startDate">
                  <el-date-picker style="width: 100%" v-model="agreement.startDate" type="date" placeholder="选择协议生效日期"
                    format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="协议失效日期" prop="endDate">
                  <el-date-picker style="width: 100%" v-model="agreement.endDate" type="date" placeholder="选择失效日期"
                    value-format="yyyy-MM-dd" format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="佣金发放方式" prop="moneyType">
                  <el-select v-model="agreement.moneyType" placeholder="请选择佣金发放方式" style="width: 100%">
                    <el-option v-for="item in moneyTypeoptions" :key="item.dictValue" :label="item.dictTag"
                      :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="有效状态" prop="validStatus">
                  <el-select v-model="agreement.validStatus" placeholder="请选择有效状态" style="width: 100%">
                    <el-option label="无效" value="0"></el-option>
                    <el-option label="有效" value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="结算周期" prop="moneyTime">
                  <el-select v-model="agreement.moneyTime" placeholder="请选择结算周期" style="width: 100%">
                    <el-option :label="'T+' + item" :value="item" v-for="item of 60" :key="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="审核方式">
                  <el-select v-model="agreement.auditType" placeholder="请选择审核方式" style="width: 100%">
                    <el-option label="人工审核" :value="1"></el-option>
                    <el-option label="自动审核" :value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="险种配置">
                  <el-select v-model="productFilterList" multiple placeholder="选择险种" style="width: 100%"
                    @change="productFilterListChange">
                    <el-option v-for="item in InsInsuranceKindoptions" :key="item.dictValue" :label="item.dictTag"
                      :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="序号" prop="serialNumber">
                  <el-input-number :min="0" v-model="agreement.serialNumber"></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="描述" prop="underwritingDescription">
                  <el-input type="textarea" :rows="2" placeholder="请输入内容"
                    v-model="agreement.underwritingDescription"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="保险公司账号配置" name="inscommany">
          <el-form class="demo-ruleForm wrap-scrollbar scroll-style" :model="attributionform" ref="attributionform"
            :label-width="labelWidth" size="small">
            <el-row>
              <el-col :span="12">
                <el-form-item class="apistyle" label="api类型：">
                  <el-select class="widths1" v-model="attributionform.apiType" @change="apiChange">
                    <el-option label="API" :value="1"></el-option>
                    <el-option label="python" :value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <div v-if="attributionform.apiType == 2">
                <el-col :span="24">
                  <div>
                    <h4>账号配置</h4>
                  </div>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="用户名：" prop="username">
                    <el-input v-model="attributionform.username" placeholder="请输入用户名"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="密码：" prop="password">
                    <el-input v-model="attributionform.password" placeholder="请输入密码"></el-input>
                  </el-form-item>
                </el-col>
              </div>
              <template v-if="attributionform.fields.length > 0">
                <el-col :span="24">
                  <div>
                    <h4>配置参数</h4>
                  </div>
                </el-col>
                <el-col :span="11" v-for="(domain, index) in attributionform.fields" :key="domain.index">
                  <el-form-item :label="domain.label + ':'" :prop="'fields.' + index + '.value'" :rules="{
                    required: domain.isEdit,
                    message: domain.label + '不能为空',
                    trigger: 'blur',
                  }">
                    <el-input class="widths1" v-model="domain.value" :type="domain.type"></el-input>
                  </el-form-item>
                </el-col>
              </template>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="授权" name="authorize">
          <el-tree class="filter-tree" :data="treedata" accordion :props="defaultProps" show-checkbox node-key="id"
            :filter-node-method="filterNode" :default-checked-keys="treekeys" ref="trees" @check="treechange"
            :default-expand-all="expandshow">
          </el-tree>
        </el-tab-pane>
      </el-tabs>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button :size="overSize" @click="agreementdialogVisible = false">取 消</el-button>
        <el-button :size="overSize" v-show="agreement.agreestatus != '0'" type="primary"
          @click="submitForm">提交</el-button>
      </span>
    </el-dialog>
    <el-dialog title="产品录入" :visible.sync="productCostVehicleFactorVisible" width="60%" :fullscreen="true">
      <div class="flex a-c" style="margin-bottom: 20px">
        <el-radio-group v-model="roductList1">
          <el-radio v-for="item in productsTypeoptions" :label="item.dictValue" :key="item.dictValue"
            @change="(event) => pruductChange(event, item)">{{ item.dictTag }}</el-radio>
        </el-radio-group>
        <el-button type="success" size="small" style="margin-left: 20px" @click="productHistory">历史记录</el-button>
      </div>
      <el-form :inline="true" :model="productpageRequest" class="demo-form-inline" size="small">
        <el-form-item label="产品">
          <el-select v-model="productpageRequest.productCode" placeholder="选择产品" clearable>
            <el-option v-for="item in productsTypeoptions" :key="item.dictValue" :label="item.dictTag"
              :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="productpageRequest.isAudit" clearable>
            <el-option v-for="(item, index) in expenseAuditlist" :key="index" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="费用起期">
          <el-date-picker style="width: 100%" v-model="productpageRequest.costStartDate" type="date"
            placeholder="选择费用开始日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="费用止期">
          <el-date-picker style="width: 100%" v-model="productpageRequest.costsEndDate" type="date" placeholder="选择费用结束日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="productExpenseSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="expenseCopy">费用复制</el-button>
        </el-form-item>
      </el-form>
      <kt-common-table :tableHeights="700" :SerialShow="false" :operationWidth="250" :showOperation="true"
        :showBatchDelete="false" :showBatchSettled="false" :showBatchPrint="false" :data="productPageResult"
        :columns="productColumns" @findPage="productCostFindPage" button2Name="编辑"
        permsButton2="agreement:input:productCost" @handleButton2="productUpdate" button3Name="删除"
        permsButton3="agreement:input:productCost" @handleButton3="productDelete" button5Name="轨迹"
        @handleButton5="trajectory" button3Icon="">
      </kt-common-table>
    </el-dialog>
    <!-- 订单轨迹 -->
    <el-dialog :visible.sync="ddgjdialogVisible" width="430px">
      <div slot="title" class=" dialog-title">
        <span>订单轨迹</span>
      </div>
      <div style="height: 300px; overflow-y: auto">
        <el-steps direction="vertical" :active="trajectoryTable.length - 1">
          <el-step :title="item.readme" :key="item.id" v-for="item in trajectoryTable">
            <template slot="description">
              <span>提交人：{{ item.createBy }}</span>
              <div>创建时间：{{ item.createTime }}</div>
            </template>
          </el-step>
        </el-steps>
      </div>
    </el-dialog>
    <el-dialog :title="productCostAddDialogTitle" :visible.sync="productCostAddVehicleFactorVisible" width="80%" top="6vh"
      @close="productcloseDialog">
      <el-collapse accordion>
        <div class="productstitle flex j-s" style="margin-top: 10px">
          <div>
            <span>{{ productCostForm.productName }}费用</span>
          </div>
        </div>
        <el-button class="mrgin-1" size="small" type="warning"
          @click="productCostFactorDialogVisible = true">产品费用因子</el-button>
        <el-form ref="productCostForm" :model="productCostForm" label-width="130px" :size="overSize"
          :rules="costformRules">
          <el-row>
            <el-col :span="20" :offset="2">
              <el-form-item label="费用描述">
                <el-input type="textarea" v-model="productCostForm.costsDescription" placeholder="输入费用描述内容"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="2">
              <el-form-item label="费用起期" prop="costsStartDate">
                <el-date-picker style="width: 100%" v-model="productCostForm.costsStartDate" type="datetime"
                  placeholder="选择费用开始日期" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions"
                  @change="cleanEndDate">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="费用止期" prop="costsEndDate">
                <el-date-picker style="width: 100%" v-model="productCostForm.costsEndDate" type="datetime"
                  placeholder="选择费用结束日期" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions1"
                  @change="checkStartDate">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="2">
              <el-form-item label="优先级">
                <el-input style="width: 100%" v-model="productCostForm.priorityLevel"
                  onkeyup="value=value.replace(/\D/g,'')" placeholder="输入数字"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="['单交', '交三', '交商', '兜底配置'].includes(
            productCostForm.productName
          )
            ">
            <h4 style="color: tomato">交强险费用</h4>
            <el-col :span="5" :offset="1">
              <el-form-item label="费用比例" prop="jqCarCostsProportion">
                <el-input v-model="productCostForm.jqCarCostsProportion"
                  @blur="costRatioInput('jqCostsProportion', 'jqCarCostsProportion', 'jqCarOtherCostsProportion')"
                  placeholder="请输入费用比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1" v-if="permissions">
              <el-form-item label="其他费用比例">
                <el-input disabled v-model="productCostForm.jqCarOtherCostsProportion" placeholder="请输入其他费用比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1" v-if="permissions">
              <el-form-item label="总费用比例" prop="jqCostsProportion">
                <el-input v-model="productCostForm.jqCostsProportion"
                  @blur="totalCostRatioInput('jqCostsProportion', 'jqCarCostsProportion', 'jqCarOtherCostsProportion')"
                  placeholder="请输入总费用比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="交强管理比例一级	" prop="jqExportRadioLevel1">
                <el-input v-model="productCostForm.jqExportRadioLevel1" placeholder="请输入管理费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="交强管理比例二级	" prop="jqExportRadioLevel2">
                <el-input v-model="productCostForm.jqExportRadioLevel2" placeholder="请输入管理费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="交强管理比例三级	" prop="jqExportRadioLevel3">
                <el-input v-model="productCostForm.jqExportRadioLevel3" placeholder="请输入管理费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="交强管理比例四级	" prop="jqExportRadioLevel4">
                <el-input v-model="productCostForm.jqExportRadioLevel4" placeholder="请输入管理费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="交强管理比例五级	" prop="jqExportRadioLevel5">
                <el-input v-model="productCostForm.jqExportRadioLevel5" placeholder="请输入管理费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="交强出口手续比例" prop="jqCostsExportProportion">
                <el-input v-model="productCostForm.jqCostsExportProportion" placeholder="请输入出口手续费比例"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="['单商', '单三', '交商', '交三', '兜底配置'].includes(
            productCostForm.productName
          )
            ">
            <h4 style="color: tomato">商业险费用</h4>

            <el-col :span="5" :offset="1">
              <el-form-item label="费用比例" prop="syCarCostsProportion">
                <el-input v-model="productCostForm.syCarCostsProportion"
                  @blur="totalCostRatioInput('syCostsProportion', 'syCarCostsProportion', 'syCarOtherCostsProportion')"
                  placeholder="请输入费用比例"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="5" :offset="1" v-if="permissions">
              <el-form-item label="其他费用比例">
                <el-input v-model="productCostForm.syCarOtherCostsProportion" placeholder="请输入其他费用比例" disabled></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="5" :offset="1" v-if="permissions">
              <el-form-item label="总费用比例" prop="syCostsProportion">
                <el-input v-model="productCostForm.syCostsProportion" placeholder="请输入总费用比例"
                  @blur="totalCostRatioInput('syCostsProportion', 'syCarCostsProportion', 'syCarOtherCostsProportion')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="商业手续比例一级	" prop="syExportRadioLevel1">
                <el-input v-model="productCostForm.syExportRadioLevel1" placeholder="请输入手续费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="商业手续比例二级	" prop="syExportRadioLevel2">
                <el-input v-model="productCostForm.syExportRadioLevel2" placeholder="请输入手续费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="商业手续比例三级	" prop="syExportRadioLevel3">
                <el-input v-model="productCostForm.syExportRadioLevel3" placeholder="请输入手续费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="商业手续比例四级	" prop="syExportRadioLevel4">
                <el-input v-model="productCostForm.syExportRadioLevel4" placeholder="请输入手续费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="商业手续比例五级	" prop="syExportRadioLevel5">
                <el-input v-model="productCostForm.syExportRadioLevel5" placeholder="请输入手续费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="商业出口手续比例" prop="syCostsExportProportion">
                <el-input v-model="productCostForm.syCostsExportProportion" placeholder="请输入出口手续费比例"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <h4 style="color: tomato">非车费用</h4>
            <el-col :span="5" :offset="1">
              <el-form-item label="费用比例" prop="noCarCostsProportion">
                <el-input v-model="productCostForm.noCarCostsProportion"
                  @blur="totalCostRatioInput('noCostsProportion', 'noCarCostsProportion', 'noCarOtherCostsProportion')"
                  placeholder="请输入费用比例"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="5" :offset="1" v-if="permissions">
              <el-form-item label="其他费用比例">
                <el-input v-model="productCostForm.noCarOtherCostsProportion" placeholder="请输入其他费用比例" disabled></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="5" :offset="1" v-if="permissions">
              <el-form-item label="总费用比例" prop="noCostsProportion">
                <el-input v-model="productCostForm.noCostsProportion" placeholder="请输入总费用比例"
                  @blur="totalCostRatioInput('noCostsProportion', 'noCarCostsProportion', 'noCarOtherCostsProportion')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="非车手续比例一级	" prop="noCarExportRadioLevel1">
                <el-input v-model="productCostForm.noCarExportRadioLevel1" placeholder="请输入手续费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="非车手续比例二级	" prop="noCarExportRadioLevel2">
                <el-input v-model="productCostForm.noCarExportRadioLevel2" placeholder="请输入手续费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="非车手续比例三级	" prop="noCarExportRadioLevel3">
                <el-input v-model="productCostForm.noCarExportRadioLevel3" placeholder="请输入手续费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="非车手续比例四级	" prop="noCarExportRadioLevel4">
                <el-input v-model="productCostForm.noCarExportRadioLevel4" placeholder="请输入手续费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="非车手续比例五级	" prop="noCarExportRadioLevel5">
                <el-input v-model="productCostForm.noCarExportRadioLevel5" placeholder="请输入手续费比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item label="非车出口手续比例" prop="noCostsExportProportion">
                <el-input v-model="productCostForm.noCostsExportProportion" placeholder="请输入出口手续费比例"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse>
      <span slot="footer" class="dialog-footer">
        <el-button :size="overSize" @click="productCostAddVehicleFactorVisible = false">取 消</el-button>
        <el-button :size="overSize" type="primary" @click="productCostAddSubmit('productCostForm')">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="承保规则" :visible.sync="underwritingRulesVehicleFactorVisible" width="60%" :fullscreen="true">
      <div class="flex a-c p-2">
        <el-button type="warning " style="background-color: #52c578; border: #52c578" size="small"
          @click="addUnderwritingRule">添加规则</el-button>
        <el-button type="warning " style="background-color: #52c578; border: #52c578" size="small"
          @click="underwritingRulesHistory">历史记录</el-button>
      </div>
      <kt-common-table :tableHeights="700" :SerialShow="false" :operationWidth="200" :showOperation="true"
        :showBatchDelete="false" :showBatchSettled="false" :showBatchPrint="false" :data="underwritingRulesResult"
        :columns="underwritingRulesColumns" @findPage="underwritingRulesFindPage" button2Name="编辑"
        permsButton2="agreement:input:underwritingRules" permsButton3="agreement:input:underwritingRules"
        button2Background="#E6A23C" @handleButton2="underwritingRulesUpdate" button2Icon="" button3Name="删除"
        button3Background="#F56C6C" @handleButton3="underwritingRulesDelete" button3Icon="">
      </kt-common-table>
    </el-dialog>
    <el-dialog :title="underwritingRulesAddDialogTitle" :visible.sync="underwritingRulesAddVehicleFactorVisible"
      :close-on-click-modal="false" :fullscreen="true" width="70%" top="6vh" @close="underwritingRulescloseDialog">
      <el-form ref="form" :model="underwritingRulesForm" label-width="80px" size="small">
        <el-form-item label="是否有效">
          <el-select v-model="underwritingRulesForm.validInd" placeholder="请选择活动区域">
            <el-option label="有效" value="1"></el-option>
            <el-option label="无效" value="0"></el-option>
            <el-option label="待审核" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规则描述">
          <el-input type="textarea" v-model="underwritingRulesForm.ruleDescription" placeholder="请输入承保规则描述"
            maxlength="100" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <Product-Cost-Form v-if="underwritingRulesAddVehicleFactorVisible" :form="dynamicFormArray" :operator="operatorlist"
        over-size="small" @saveForm="underwritingRulesSaveForm"
        @cancelForm="underwritingRulesCancelForm"></Product-Cost-Form>
    </el-dialog>

    <el-dialog title="产品历史记录" :visible.sync="productHistoryRecordDialogVisible" width="70%" :fullscreen="true">
      <el-row class="queryFrom">
        <el-form ref="queryFormRef" :model="productHistoryRecordForm" label-width="80px">
          <el-col :span="5">
            <el-form-item label="操作人">
              <el-input clearable style="width:220px" size="small" placeholder="操作人"
                v-model="productHistoryRecordForm.modifier"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="操作类型">
              <el-select clearable size="small" v-model="productHistoryRecordForm.operatorType" placeholder="请选择">
                <el-option v-for="item in operationTypeOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="操作时间">
              <el-date-picker clearable v-model="productHistoryRecordForm.operatorTime" type="date" size="small"
                value-format="yyyy-MM-dd" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="">
              <el-button size="small" type="primary" @click="productHistoryCostFindPage">查询</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <kt-common-table :tableHeights="700" :SerialShow="false" :operationWidth="200" :showOperation="true"
        button2Name="详情" @handleButton2="productHistoryDetails" :showBatchDelete="false" :showBatchSettled="false"
        :showBatchPrint="false" :data="productHistoryRecordResult" :columns="productHistoryRecordColumns"
        @findPage="productHistoryCostFindPage">
      </kt-common-table>
    </el-dialog>
    <el-dialog title="承保规则历史记录" :visible.sync="underwritingRulesHistoryRecordDialogVisible" width="70%"
      :fullscreen="true">
      <el-row class="queryFrom">
        <el-form ref="queryFormRef" :model="underwritingRulesHistoryCostFindForm" label-width="80px">
          <el-col :span="5">
            <el-form-item label="操作人">
              <el-input clearable style="width:220px" size="small" placeholder="操作人"
                v-model="underwritingRulesHistoryCostFindForm.modifier"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="操作类型">
              <el-select clearable size="small" v-model="underwritingRulesHistoryCostFindForm.operatorType"
                placeholder="请选择">
                <el-option v-for="item in operationTypeOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="操作时间">
              <el-date-picker clearable v-model="underwritingRulesHistoryCostFindForm.operatorTime" type="date"
                size="small" value-format="yyyy-MM-dd" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="">
              <el-button size="small" type="primary" @click="underwritingRulesHistoryCostFindPage">查询</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <kt-common-table :tableHeights="700" :SerialShow="false" :operationWidth="200" :showOperation="true"
        :showBatchDelete="false" :showBatchSettled="false" :showBatchPrint="false" button2Name="详情"
        @handleButton2="underwritingRulesHistoryDetails" :data="underwritingRulesHistoryRecordResult"
        :columns="underwritingRulesHistoryRecordColumns" @findPage="underwritingRulesHistoryCostFindPage">
      </kt-common-table>
    </el-dialog>
    <el-dialog title="协议历史记录" :visible.sync="agreementHistoryRecordDialogVisible" width="70%" :fullscreen="true">
      <el-row class="queryFrom">
        <el-form ref="queryFormRef" :model="productpageRequestForm" label-width="80px">
          <el-col :span="5">
            <el-form-item label="操作人">
              <el-input clearable style="width:220px" size="small" placeholder="操作人"
                v-model="productpageRequestForm.modifier"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="操作类型">
              <el-select clearable size="small" v-model="productpageRequestForm.operatorType" placeholder="请选择">
                <el-option v-for="item in operationTypeOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="操作时间">
              <el-date-picker clearable v-model="productpageRequestForm.operatorTime" type="date" size="small"
                value-format="yyyy-MM-dd" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="">
              <el-button size="small" type="primary" @click="agreementHistoryCostFindPage">查询</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <kt-common-table :tableHeights="700" :SerialShow="false" :operationWidth="200" :showOperation="true"
        button2Name="详情" @handleButton2="agreementsHistory" :showBatchDelete="false" :showBatchSettled="false"
        :showBatchPrint="false" :data="agreementHistoryRecordResult" :columns="agreementHistoryRecordColumns"
        @findPage="agreementHistoryCostFindPage">
      </kt-common-table>
    </el-dialog>
    <el-dialog title="产品因子录入" :visible.sync="productCostFactorDialogVisible" :close-on-click-modal="false" width="70%"
      top="6vh" :fullscreen="true" @close="productCostFactoropenDialog">
      <Product-Cost-Form v-if="productCostFactorDialogVisible" :form="dynamicFormArray" :operator="operatorlist"
        over-size="small" @saveForm="productCostFactorSaveForm"
        @cancelForm="productCostFactorCancelForm"></Product-Cost-Form>
    </el-dialog>
    <el-dialog title="费用复制窗口" :visible.sync="productCostCopyDialogVisible" :close-on-click-modal="false"
      :fullscreen="true">
      <el-form :inline="true" :model="productcopyItemPageRequest" class="demo-form-inline" size="small"
        label-width="80px">
        <el-form-item label="选择协议">
          <el-select v-model="productcopyItemPageRequest.agreementId" placeholder="请选择协议">
            <el-option v-for="(item, index) in pageResult" :key="index" :label="item.agreementAbbreviation"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品">
          <el-select v-model="productcopyItemPageRequest.productCode" placeholder="选择产品">
            <el-option v-for="item in productsTypeoptions" :key="item.dictValue" :label="item.dictTag"
              :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="productcopyItemQuery">查询</el-button>
        </el-form-item>
      </el-form>
      <kt-common-table :tableHeights="700" :SerialShow="false" :operationWidth="250" :showOperation="false"
        :customToolseletted="true" customToolName="批量复制" permscustomTool="agreement:input:productCost"
        @customTool="customTool" :showBatchDelete="false" :showBatchSettled="false" :showBatchPrint="false"
        :data="productcopyItemResult" :columns="productcopyItemColumns" @findPage="productcopyItemFindPage">
      </kt-common-table>
    </el-dialog>
    <el-dialog title="协议历史记录详情" :visible.sync="agreementsHistoryDialogVisible" width="70%"
      @close="agreementsHistorycloseDialog">
      <el-tabs v-model="activeTabs" type="card" @tab-click="handleClickTab">
        <el-tab-pane label="协议信息" name="first">
          <el-form :size="overSize" :model="agreementsHistoryInfo.agreement" ref="addAgreementRef" disabled
            label-width="130px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="协议代码">
                  <el-input v-model="agreementsHistoryInfo.agreement.agreementCode" disabled placeholder="请输入协议代码"
                    style="width: 100%"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="协议名称" prop="agreementName">
                  <el-input v-model="agreementsHistoryInfo.agreement.agreementName" placeholder="请输入协议名称"
                    style="width: 100%"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="协议简称" prop="agreementAbbreviation">
                  <el-input v-model="agreementsHistoryInfo.agreement.agreementAbbreviation" placeholder="请输入协议简称"
                    style="width: 100%"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="协议类型" prop="agreementType">
                  <el-select v-model="agreementsHistoryInfo.agreement.agreementType" placeholder="请选择协议类型"
                    style="width: 100%" @change="agreementTypeChange">
                    <el-option v-for="item in agreementTypeoptions" :key="item.dictValue" :label="item.dictTag"
                      :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="保险公司" :prop="supplierType == '1' ? '' : 'insuranceCompanyId'">
                  <el-cascader :disabled="supplierType == '1' || operType == 'EDIT'" style="width: 100%"
                    v-model="agreementsHistoryInfo.agreement.insuranceCompanyId" :show-all-levels="false"
                    :options="prodInsurance" :props="optionProps" @change="prodhandleChange" clearable
                    filterable></el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合作公司" prop="partnerCompaniesId">
                  <el-cascader :disabled="operType == 'EDIT'" style="width: 100%"
                    v-model="agreementsHistoryInfo.agreement.partnerCompaniesId" :show-all-levels="false"
                    :options="ztreeNodes" :props="optionProps" @change="handleChange" clearable filterable></el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="对接人" prop="dockingPerson">
                  <el-input v-model="agreementsHistoryInfo.agreement.dockingPerson" placeholder="请添加对接人"
                    style="width: 100%"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系方式" prop="dockingPhone">
                  <el-input maxlength="11" show-word-limit v-model="agreementsHistoryInfo.agreement.dockingPhone"
                    placeholder="请输入联系方式" style="width: 100%" type="text"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="含增值税结算" prop="withTax">
                  <el-select v-model="agreementsHistoryInfo.agreement.withTax" placeholder="请选择是否含增值税结算"
                    style="width: 100%">
                    <el-option label="是" value="是"></el-option>
                    <el-option label="否" value="否"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="保单日期类型" prop="matchType">
                  <el-select v-model="agreementsHistoryInfo.agreement.matchType" placeholder="请选择保单日期类型"
                    style="width: 100%">
                    <el-option v-for="item in matchTypeoptions" :key="item.dictValue" :label="item.dictTag"
                      :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="协议生效日期" prop="startDate">
                  <el-date-picker style="width: 100%" v-model="agreementsHistoryInfo.agreement.startDate" type="date"
                    placeholder="选择协议生效日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="协议失效日期" prop="endDate">
                  <el-date-picker style="width: 100%" v-model="agreementsHistoryInfo.agreement.endDate" type="date"
                    placeholder="选择失效日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="佣金发放方式" prop="moneyType">
                  <el-select v-model="agreementsHistoryInfo.agreement.moneyType" placeholder="请选择佣金发放方式"
                    style="width: 100%">
                    <el-option v-for="item in moneyTypeoptions" :key="item.dictValue" :label="item.dictTag"
                      :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="有效状态" prop="validStatus">
                  <el-select v-model="agreementsHistoryInfo.agreement.validStatus" placeholder="请选择有效状态"
                    style="width: 100%">
                    <el-option label="有效" value="1"></el-option>
                    <el-option label="无效" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="结算周期" prop="moneyTime">
                  <el-select v-model="agreementsHistoryInfo.agreement.moneyTime" placeholder="请选择结算周期"
                    style="width: 100%">
                    <el-option :label="'T+' + item" :value="item" v-for="item of 60" :key="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="审核方式">
                  <el-select v-model="agreementsHistoryInfo.agreement.auditType" placeholder="请选择审核方式"
                    style="width: 100%">
                    <el-option label="人工审核" value="1"></el-option>
                    <el-option label="自动审核" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="险种配置">
                  <el-select v-model="productFilterList" multiple placeholder="选择险种" style="width: 100%"
                    @change="productFilterListChange">
                    <el-option v-for="item in InsInsuranceKindoptions" :key="item.dictValue" :label="item.dictTag"
                      :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="序号" prop="serialNumber">
                  <el-input-number :min="0" v-model="agreementsHistoryInfo.agreement.serialNumber"></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="描述" prop="underwritingDescription">
                  <el-input type="textarea" :rows="2" placeholder="请输入内容"
                    v-model="agreementsHistoryInfo.agreement.underwritingDescription"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="保险公司账号配置" name="inscommany">
          <el-form class="demo-ruleForm wrap-scrollbar scroll-style" :model="agreementsHistoryInfo.attributionform"
            ref="attributionform" :label-width="labelWidth" size="small">
            <el-row>
              <el-col :span="12">
                <el-form-item class="apistyle" label="api类型：">
                  <el-select class="widths1" v-model="agreementsHistoryInfo.attributionform.apiType" @change="apiChange">
                    <el-option label="API" :value="1"></el-option>
                    <el-option label="python" :value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <div v-if="attributionform.apiType == 2">
                <el-col :span="24">
                  <div>
                    <h4>账号配置</h4>
                  </div>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="用户名：" prop="username">
                    <el-input v-model="attributionform.username" placeholder="请输入用户名"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="密码：" prop="password">
                    <el-input v-model="attributionform.password" placeholder="请输入密码"></el-input>
                  </el-form-item>
                </el-col>
              </div>
              <template v-if="attributionform.fields.length > 0">
                <el-col :span="24">
                  <div>
                    <h4>配置参数</h4>
                  </div>
                </el-col>
                <el-col :span="11" v-for="(domain, index) in attributionform.fields" :key="domain.index">
                  <el-form-item :label="domain.label + ':'" :prop="'fields.' + index + '.value'" :rules="{
                    required: domain.isEdit,
                    message: domain.label + '不能为空',
                    trigger: 'blur',
                  }">
                    <el-input class="widths1" v-model="domain.value" :type="domain.type"></el-input>
                  </el-form-item>
                </el-col>
              </template>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="授权" name="authorize">
          <el-tree class="filter-tree" :data="treedata" accordion :props="defaultProps" show-checkbox node-key="id"
            :filter-node-method="filterNode" :default-checked-keys="treekeys" ref="trees" @check="treechange"
            :default-expand-all="expandshow">
          </el-tree>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <el-dialog title="产品费用历史记录详情" :visible.sync="productHistoryDetailsDialogVisible" width="70%" :fullscreen="true">
      <Product-Cost-Form v-if="productHistoryDetailsDialogVisible" :form="dynamicFormArray" :operator="operatorlist"
        over-size="small" @cancelForm="productHistoryDetailsDialogVisible = false" :disabled="true"></Product-Cost-Form>
    </el-dialog>
    <el-dialog title="产品费用历史记录详情" :visible.sync="underwritingRulesHistoryDetailsDialogVisible" width="70%"
      :fullscreen="true">
      <Product-Cost-Form v-if="underwritingRulesHistoryDetailsDialogVisible" :form="dynamicFormArray"
        :operator="operatorlist" over-size="small" @cancelForm="underwritingRulesHistoryDetailsDialogVisible = false"
        :disabled="true"></Product-Cost-Form>
    </el-dialog>
  </div>
</template>
<script>
import Cookies from "js-cookie";
import tree from "@/components/ztree.vue";
import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
import ProductCostForm from '@/components/Form/ProductCostForm.vue';//表单组件
import KtButton from "@/views/Core/KtButton";
import CommonUtil from "@/utils/comutil.js";
import citydata from "@/assets/js/citydata.js";
import { formatWithSeperator, format } from "@/utils/datetime.js";
export default {
  components: {
    tree,
    KtCommonTable,
    KtButton,
    ProductCostForm
  },
  data() {
    return {
      operationTypeOption: [
        {
          label: '新增',
          value: 'add'
        }, {
          label: '修改',
          value: 'update'
        }, {
          label: '删除',
          value: 'delete'
        },
      ],
      areaOptions: [],
      productCostCopyInfo: {},
      agreementHistoryRecordColumns: [
        { prop: "agreementCode", label: "协议代码", minWidth: 180 },
        { prop: "agreementName", label: "协议名称", minWidth: 160 },
        { prop: "agreementAbbreviation", label: "协议简称", minWidth: 120 },
        {
          prop: "agreementType",
          label: "协议类型",
          minWidth: 160,
          formatter: this.agreementtypeFormatter,
        },
        { prop: "insuranceCompany", label: "合作公司", minWidth: 160 },
        { prop: "dockingPerson", label: "对接人", minWidth: 160 },
        { prop: "dockingPhone", label: "联系方式（对接人）", minWidth: 160 },
        { prop: "withTax", label: "含增值税结算", minWidth: 160 },
        {
          prop: "matchType",
          label: "保单日期类型",
          minWidth: 160,
          formatter: this.matchtypeFormatter,
        },
        { prop: "startDate", label: "协议起期", minWidth: 160 },
        { prop: "endDate", label: "协议止期", minWidth: 160 },
        {
          prop: "moneyType",
          label: "佣金发放方式",
          minWidth: 160,
          formatter: this.moneyTypeFormatter,
        },
        {
          prop: "validStatus",
          label: "有效状态",
          minWidth: 160,
          formatter: this.agreestatusFormatter,
        },
        {
          prop: "moneyTime",
          label: "结算周期",
          minWidth: 160,
          formatter: this.moneytimeFormatter,
        },
        {
          prop: "ptlAgreementAttribution",
          label: " 保险公司账号配置",
          minWidth: 1060,
        },
        { prop: "operator", label: "操作人", minWidth: 160 },
        { prop: "operatorType", label: "操作类型", formatter: this.operatorTypeFormatter },
        { prop: "operatorTime", label: "操作时间", minWidth: 160 },
      ],
      underwritingRulesHistoryRecordColumns: [
        { prop: "modifier", label: "操作人", minWidth: 120 },
        { prop: "operatorTime", label: "操作时间", minWidth: 160 },
        { prop: "operatorType", label: "操作类型", minWidth: 120, formatter: this.operatorTypeFormatter },
        { prop: "validInd", label: " 是否有效", minWidth: 160, formatter: this.validIndFormatter, },
        { prop: "ruleDescription", label: " 规则描述", minWidth: 160 },
        {
          prop: "costsAttrLinks",
          label: "规则因子描述",
          minWidth: 660,
        },
      ],
      underwritingRulesColumns: [
        { prop: "validInd", label: " 是否有效", minWidth: 160, formatter: this.validIndFormatter, },
        { prop: "ruleDescription", label: " 规则描述", minWidth: 160 },
        { prop: "desc", label: " 规则因子描述", minWidth: 660 },
      ],
      productHistoryRecordColumns: [
        //数据列
        { prop: "productName", label: " 产品名称", minWidth: 160 },
        { prop: "costsDescription", label: "费用描述", minWidth: 120 },
        { prop: "modifier", label: "操作人", minWidth: 120 },
        { prop: "operatorTime", label: "操作时间", minWidth: 160 },
        { prop: "operatorType", label: "操作类型", minWidth: 120, formatter: this.operatorTypeFormatter },
        {
          prop: "jqCarCostsProportion",
          label: "费用比例（交强）",
          minWidth: 120,
        },
        {
          prop: "jqCarOtherCostsProportion",
          label: "其他费用比例（交强）",
          minWidth: 160,
        },
        {
          prop: "jqCostsProportion",
          label: "总费用比例（交强）",
          minWidth: 160,
        },
        {
          prop: "jqExportRadioLevel1",
          label: "交强出口比例一级",
          minWidth: 160,
        },
        {
          prop: "jqExportRadioLevel2",
          label: "交强出口比例二级",
          minWidth: 160,
        },
        {
          prop: "jqExportRadioLevel3",
          label: "交强出口比例三级",
          minWidth: 160,
        },
        {
          prop: "jqExportRadioLevel4",
          label: "交强出口比例四级",
          minWidth: 160,
        },
        {
          prop: "jqExportRadioLevel5",
          label: "交强出口比例五级",
          minWidth: 160,
        },
        {
          prop: "jqExportInvestmentRadio",
          label: "交强出口加投比例",
          minWidth: 160,
        },
        {
          prop: "syCarCostsProportion",
          label: "费用比例（商业）",
          minWidth: 120,
        },
        {
          prop: "syCarOtherCostsProportion",
          label: "其他费用比例（商业）",
          minWidth: 160,
        },
        {
          prop: "syCostsProportion",
          label: "总费用比例（商业）",
          minWidth: 160,
        },
        {
          prop: "syExportRadioLevel1",
          label: "商业出口比例一级",
          minWidth: 160,
        },
        {
          prop: "syExportRadioLevel2",
          label: "商业出口比例二级",
          minWidth: 160,
        },
        {
          prop: "syExportRadioLevel3",
          label: "商业出口比例三级",
          minWidth: 160,
        },
        {
          prop: "syExportRadioLevel4",
          label: "商业出口比例四级",
          minWidth: 160,
        },
        {
          prop: "syExportRadioLevel5",
          label: "商业出口比例五级",
          minWidth: 160,
        },
        {
          prop: "syExportInvestmentRadio",
          label: "商业出口加投比例",
          minWidth: 160,
        },
        {
          prop: "noCarCostsProportion",
          label: "费用比例（非车）",
          minWidth: 120,
        },
        {
          prop: "noCarOtherCostsProportion",
          label: "其他费用比例（非车）",
          minWidth: 160,
        },
        {
          prop: "noCostsProportion",
          label: "总费用比例（非车）",
          minWidth: 160,
        },
        {
          prop: "noCarExportRadioLevel1",
          label: "非车出口比例一级",
          minWidth: 160,
        },
        {
          prop: "noCarExportRadioLevel2",
          label: "非车出口比例二级",
          minWidth: 160,
        },
        {
          prop: "noCarExportRadioLevel3",
          label: "非车出口比例三级",
          minWidth: 160,
        },
        {
          prop: "noCarExportRadioLevel4",
          label: "非车出口比例四级",
          minWidth: 160,
        },
        {
          prop: "noCarExportRadioLevel5",
          label: "非车出口比例五级",
          minWidth: 160,
        },
        { prop: "costsAttrLinks", label: "费用因子描述", minWidth: 680 },
        { prop: "costsStartDate", label: "费用起期", minWidth: 180 },
        { prop: "costsEndDate", label: "费用止期", minWidth: 180 },
        { prop: "priorityLevel", label: "方案优先级", minWidth: 180 },
      ],
      productColumns: [
        //数据列
        { prop: "productName", label: " 产品名称", minWidth: 160 },
        { prop: "costsStartDate", label: "费用起期", minWidth: 160 },
        { prop: "costsEndDate", label: "费用止期", minWidth: 160 },
        { prop: "costsDescription", label: "费用描述", minWidth: 220 },
        { prop: "desc", label: "费用因子描述", minWidth: 520 },
        { prop: "isAudit", label: "审核状态", minWidth: 160, formatter: this.auditTypeFormation },
        {
          prop: "jqCarCostsProportion",
          label: "费用比例（交强）",
          minWidth: 120,
        },
        {
          prop: "jqCarOtherCostsProportion",
          label: "其他费用比例（交强）",
          minWidth: 160,
        },
        {
          prop: "jqCostsProportion",
          label: "总费用比例（交强）",
          minWidth: 160,
        },
        {
          prop: "jqExportRadioLevel1",
          label: "交强出口比例一级",
          minWidth: 160,
        },
        {
          prop: "jqExportRadioLevel2",
          label: "交强出口比例二级",
          minWidth: 160,
        },
        {
          prop: "jqExportRadioLevel3",
          label: "交强出口比例三级",
          minWidth: 160,
        },
        {
          prop: "jqExportRadioLevel4",
          label: "交强出口比例四级",
          minWidth: 160,
        },
        {
          prop: "jqExportRadioLevel5",
          label: "交强出口比例五级",
          minWidth: 160,
        },
        {
          prop: "jqExportInvestmentRadio",
          label: "交强出口加投比例",
          minWidth: 160,
        },
        {
          prop: "syCarCostsProportion",
          label: "费用比例（商业）",
          minWidth: 120,
        },
        {
          prop: "syCarOtherCostsProportion",
          label: "其他费用比例（商业）",
          minWidth: 160,
        },
        {
          prop: "syCostsProportion",
          label: "总费用比例（商业）",
          minWidth: 160,
        },
        {
          prop: "syExportRadioLevel1",
          label: "商业出口比例一级",
          minWidth: 160,
        },
        {
          prop: "syExportRadioLevel2",
          label: "商业出口比例二级",
          minWidth: 160,
        },
        {
          prop: "syExportRadioLevel3",
          label: "商业出口比例三级",
          minWidth: 160,
        },
        {
          prop: "syExportRadioLevel4",
          label: "商业出口比例四级",
          minWidth: 160,
        },
        {
          prop: "syExportRadioLevel5",
          label: "商业出口比例五级",
          minWidth: 160,
        },
        {
          prop: "syExportInvestmentRadio",
          label: "商业出口加投比例",
          minWidth: 160,
        },
        {
          prop: "noCarCostsProportion",
          label: "费用比例（非车）",
          minWidth: 120,
        },
        {
          prop: "noCarOtherCostsProportion",
          label: "其他费用比例（非车）",
          minWidth: 160,
        },
        {
          prop: "noCostsProportion",
          label: "总费用比例（非车）",
          minWidth: 160,
        },
        {
          prop: "noCarExportRadioLevel1",
          label: "非车出口比例一级",
          minWidth: 160,
        },
        {
          prop: "noCarExportRadioLevel2",
          label: "非车出口比例二级",
          minWidth: 160,
        },
        {
          prop: "noCarExportRadioLevel3",
          label: "非车出口比例三级",
          minWidth: 160,
        },
        {
          prop: "noCarExportRadioLevel4",
          label: "非车出口比例四级",
          minWidth: 160,
        },
        {
          prop: "noCarExportRadioLevel5",
          label: "非车出口比例五级",
          minWidth: 160,
        },

        { prop: "priorityLevel", label: "方案优先级", minWidth: 120 },
      ],
      productcopyItemColumns: [
        //数据列
        { prop: "productName", label: " 产品名称", minWidth: 160 },
        { prop: "costsStartDate", label: "费用起期", minWidth: 160 },
        { prop: "costsEndDate", label: "费用止期", minWidth: 160 },
        { prop: "desc", label: "费用因子描述", minWidth: 520 },
        {
          prop: "jqCarCostsProportion",
          label: "费用比例（交强）",
          minWidth: 120,
        },
        {
          prop: "jqCarOtherCostsProportion",
          label: "其他费用比例（交强）",
          minWidth: 160,
        },
        {
          prop: "jqCostsProportion",
          label: "总费用比例（交强）",
          minWidth: 160,
        },
        {
          prop: "jqExportRadioLevel1",
          label: "交强出口比例一级",
          minWidth: 160,
        },
        {
          prop: "jqExportRadioLevel2",
          label: "交强出口比例二级",
          minWidth: 160,
        },
        {
          prop: "jqExportRadioLevel3",
          label: "交强出口比例三级",
          minWidth: 160,
        },
        {
          prop: "jqExportRadioLevel4",
          label: "交强出口比例四级",
          minWidth: 160,
        },
        {
          prop: "jqExportRadioLevel5",
          label: "交强出口比例五级",
          minWidth: 160,
        },
        {
          prop: "jqExportInvestmentRadio",
          label: "交强出口加投比例",
          minWidth: 160,
        },
        {
          prop: "syCarCostsProportion",
          label: "费用比例（商业）",
          minWidth: 120,
        },
        {
          prop: "syCarOtherCostsProportion",
          label: "其他费用比例（商业）",
          minWidth: 160,
        },
        {
          prop: "syCostsProportion",
          label: "总费用比例（商业）",
          minWidth: 160,
        },
        {
          prop: "syExportRadioLevel1",
          label: "商业出口比例一级",
          minWidth: 160,
        },
        {
          prop: "syExportRadioLevel2",
          label: "商业出口比例二级",
          minWidth: 160,
        },
        {
          prop: "syExportRadioLevel3",
          label: "商业出口比例三级",
          minWidth: 160,
        },
        {
          prop: "syExportRadioLevel4",
          label: "商业出口比例四级",
          minWidth: 160,
        },
        {
          prop: "syExportRadioLevel5",
          label: "商业出口比例五级",
          minWidth: 160,
        },
        {
          prop: "syExportInvestmentRadio",
          label: "商业出口加投比例",
          minWidth: 160,
        },
        {
          prop: "noCarCostsProportion",
          label: "费用比例（非车）",
          minWidth: 120,
        },
        {
          prop: "noCarOtherCostsProportion",
          label: "其他费用比例（非车）",
          minWidth: 160,
        },
        {
          prop: "noCostsProportion",
          label: "总费用比例（非车）",
          minWidth: 160,
        },
        {
          prop: "noCarExportRadioLevel1",
          label: "非车出口比例一级",
          minWidth: 160,
        },
        {
          prop: "noCarExportRadioLevel2",
          label: "非车出口比例二级",
          minWidth: 160,
        },
        {
          prop: "noCarExportRadioLevel3",
          label: "非车出口比例三级",
          minWidth: 160,
        },
        {
          prop: "noCarExportRadioLevel4",
          label: "非车出口比例四级",
          minWidth: 160,
        },
        {
          prop: "noCarExportRadioLevel5",
          label: "非车出口比例五级",
          minWidth: 160,
        },
        { prop: "costsDescription", label: "费用描述", minWidth: 220 },

        { prop: "priorityLevel", label: "方案优先级", minWidth: 120 },
      ],
      productFilterList: [],
      labelWidth: "160px",
      factorDialogTitle: "承保规则录入", //配置因子弹框标题
      factorType: "1", //1 费用因子  2 核保因子
      validAgreementList: [], //非车费用复制同步时，可选协议列表
      syncNonCarCostDesfFlag: false,
      copyAgreementId: "", //复制选中的协议ID
      syncAgreementIds: [], //同步选中的协议ID列表
      copyProductCostIds: [],//复制追加的协议列表
      copyProductCostInfo: {
        orgCostsId: "",//复制产品费用id
        newAgreementId: "",
      },
      //调整使用性质联动勾选-starting
      supplierType: "1", //协议类型
      agreementId: "",
      overSize: "small",
      pageNum: 1,
      pageSize: 20,
      totalSize: null,
      agreementdialogVisible: false, //控制协议对话框显示
      agreementsHistoryDialogVisible: false,
      productHistoryDetailsDialogVisible: false,
      underwritingRulesHistoryDetailsDialogVisible: false,
      VehicleFactorVisible: false, //费用车辆因子    显示/隐藏
      productCostVehicleFactorVisible: false, //产品费用    显示/隐藏
      productCostAddVehicleFactorVisible: false, //产品费用录入    显示/隐藏
      productCostFactorDialogVisible: false,//产品费用因子录入  显示/隐藏
      underwritingRulesVehicleFactorVisible: false, //承保规则    显示/隐藏
      underwritingRulesAddVehicleFactorVisible: false, //承保规则录入    显示/隐藏
      productCostCopyDialogVisible: false,//费用复制弹窗
      //产品list获取
      roductList1: "", //产品绑定list
      treedata: [], //授权结构树
      defaultProps: {
        //自定义参数
        children: "children",
        label: "name",
      },
      treekeys: [],
      expandshow: false,
      dept: [], //授权id数据
      attributionform: {
        fields: [],
        apiType: "", //接口类型
        templateId: "", //保险公司id
        password: "",
        username: "",
      },
      productCostAddDialogTitle: "产品录入",
      productCostAddDialogType: "add",
      underwritingRulesAddDialogTitle: "承保规则录入",
      underwritingRulesAddDialogType: "add",
      //协议json
      agreementsHistoryInfo: {
        agreement: {},
        attributionform: {},
        dept: [],
      },

      agreement: {
        agreementAbbreviation: "", //协议简称
        agreementCode: "", //协议代码
        agreementName: "", //	协议名称
        agreementType: "2", //协议类型
        cooperationChannels: "", //合作渠道
        dockingPerson: "", //对接人
        dockingPhone: "", //联系方式（对接人）
        endDate: "", //协议止期
        fileId: "", //	附件id
        insuranceCompanyId: "", //保险公司id
        matchType: "", //保单日期类型
        moneyTime: 0, //结算周期
        moneyType: "", //佣金发放方式
        startDate: "", //协议起期
        validStatus: "", //有效状态
        withTax: "", //含增值税结算
        partnerCompaniesId: "", //合作公司
        serialNumber: 0, //序号
        auditType: "",
        productsCode: "",//险种匹配
      },
      //产品费用
      productCostForm: {
        agreementId: "",
        productName: "",
        productId: "",
        costsDescription: "", //费用描述
        costsStartDate: "", //费用起期
        costsEndDate: "", //费用止期
        priorityLevel: "", //方案优先级
        jqCarCostsProportion: 4, //费用比例（交强）
        jqCarOtherCostsProportion: "", //其他费用比例（交强）
        jqCostsProportion: "", //总费用比例（交强）
        jqExportRadioLevel1: "",//交强出口比例1级
        jqExportRadioLevel2: "",//交强出口比例2级
        jqExportRadioLevel3: "",//交强出口比例3级
        jqExportRadioLevel4: "",//交强出口比例4级
        jqExportRadioLevel5: "",//交强出口比例5级
        syCarCostsProportion: "", //费用比例（商业）
        syCarOtherCostsProportion: "", //其他费用比例（商业）
        syCostsProportion: "", //总费用比例（商业）
        syExportRadioLevel1: "",//商业出口比例1级
        syExportRadioLevel2: "",//商业出口比例2级
        syExportRadioLevel3: "",//商业出口比例3级
        syExportRadioLevel4: "",//商业出口比例4级
        syExportRadioLevel5: "",//商业出口比例5级
        noCarExportRadioLevel1: "",//非车出口比例1级
        noCarExportRadioLevel2: "",//非车出口比例2级
        noCarExportRadioLevel3: "",//非车出口比例3级
        noCarExportRadioLevel4: "",//非车出口比例4级
        noCarExportRadioLevel5: "",//非车出口比例5级
        jqExportInvestmentRadio: "",//交强出口加投比例
        syExportInvestmentRadio: "",//商业出口加投比例
        noCarExportInvestmentRadio: "",//非车出口加投比例
        noCarCostsProportion: "",//费用比例（非车）
        noCarOtherCostsProportion: "",//其他费用比例（非车）
        noCostsProportion: "",//总费用比例（非车）
        costsAttrLinks: [],//费用因子
      },
      //承保规则
      underwritingRulesForm: {
        //承保因子表单项
        agreementId: "", //协议id
        ruleDescription: "", //规则描述
        validInd: "1", //是否有效
        rulesAttrList: [],//规则属性
      },
      //规则数据集
      dynamicFormArray: [],

      //分页数据
      productpageRequest: {
        isAudit: null,
        productCode: "",
        costStartDate: "",
        costsEndDate: "",
        pageNum: 1,
        pageSize: 20,
      },
      productcopyItemPageRequest: {
        productCode: "",
        agreementId: "",
        pageNum: 1,
        pageSize: 20,
      },
      value1: [],
      vehicleCategoryList: [], //费用因子-车辆大类
      areanumberplateList: [], //费用因子-车牌号
      productTypeList: [], //核保因子-业务类型
      //===========================================
      form: {},
      loading: "",
      UnderwritingRules: [], //承保规则
      peopleid: "",
      peopledeptid: "",
      permissions: null,
      // 授权公司列表Start
      companyList: [],
      // 授权公司列表End

      /**Split 开始 */
      leftSplitWidth: 30,
      rightSplitWidth: 70,
      /**Split 结束 */

      //----ztree begin---------
      ztreeObj: null,
      ztreeSetting: {
        check: {
          enable: false,
        },
        data: {
          simpleData: {
            enable: true,
            pIdKey: "parentId",
          },
        },
        view: {
          showIcon: false,
        },
      },
      ztreeNodes: [],
      currentTreeNode: null,
      //----ztree end---------

      // 右侧列表查询数据Start
      queryForm: {
        // status: "1",
        startDate: "", //开始时间
        endDate: "", //结束时间
        validStatus: "",
      },
      pageResult: [],
      productPageResult: [], //产品费用集合
      underwritingRulesResult: [], //承保规则集合
      agreementhistoryRecordResult: [], //协议历史
      productcopyItemResult: [],//协议费用列表
      pageRequest: {
        //查询的默认条件
        pageNum: 1,
        pageSize: 20,
        // columnFilters: {
        //   inscode: {
        //     name: "inscode",
        //     value: "",
        //   },
        //   startdate: {
        //     name: "startdate",
        //     value: "",
        //   },
        //   enddate: {
        //     name: "enddate",
        //     value: "",
        //   },
        //   status: {
        //     name: "status",
        //     value: "1",
        //   },
        // },
      },
      // 右侧列表查询数据End
      optionProps: {
        //公司下拉列表配置
        checkStrictly: true,
        value: "id",
        label: "name",
        children: "children",
      },
      options: [], //保险公司下拉列表
      activeTabs: "first",
      operType: "ADD", //'ADD','EDIT'
      dialogTitle: "新增协议",
      addAgreementRules: {
        //新增协议的表单验证规则对象

        agreementCode: [
          { required: true, message: "请输入协议代码", trigger: "blur" },
        ],
        agreementName: [
          { required: true, message: "请输入协议名称", trigger: "blur" },
        ],
        agreementAbbreviation: [
          { required: true, message: "请输入协议简称", trigger: "blur" },
        ],
        agreementType: [
          { required: true, message: "请选择协议类型", trigger: "blur" },
        ],
        insuranceCompanyId: [
          { required: true, message: "请选择保险公司", trigger: "change" },
        ],
        partnerCompaniesId: [
          { required: true, message: "请选择合作公司", trigger: "change" },
        ],
        cooperationChannels: [
          { required: true, message: "请选择合作渠道", trigger: "blur" },
        ],
        dockingPerson: [
          { required: true, message: "请添加对接人", trigger: "blur" },
        ],
        dockingPhone: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
        ],
        withTax: [
          { required: true, message: "请选择含增值税结算", trigger: "change" },
        ],
        startDate: [
          { required: true, message: "请输入协议生效日期", trigger: "blur" },
        ],
        endDate: [
          { required: true, message: "请输入协议失效日期", trigger: "blur" },
        ],
        matchType: [
          { required: true, message: "请输入保单日期类型", trigger: "change" },
        ],
        moneytype: [
          { required: true, message: "请选择佣金发放方式", trigger: "blur" },
        ],
        moneyTime: [
          { required: true, message: "请选择结算周期", trigger: "blur" },
        ],
        validStatus: [{ required: true, message: "请选择", trigger: "change" }],
      },
      costformRules: {
        costsStartDate: [
          { required: true, message: "请选择费用起期", trigger: "change" },
        ],
        costsEndDate: [
          { required: true, message: "请选择费用止期", trigger: "change" },
        ],

        jqNewCarCostsProportion: [
          { required: true, message: "请输入新车费用比例", trigger: "blur" },
          {
            pattern: /^([0-4])$/,
            message: "请输入0-4的整数",
            trigger: "blur",
          },
        ],
        jqOldCarCostsProportion: [
          { required: true, message: "请输入旧车费用比例", trigger: "blur" },
          {
            pattern: /^([0-4])$/,
            message: "请输入0-4的整数",
            trigger: "blur",
          },
        ],
        jqCostsProportion: [
          { required: true, message: "请输入总费用比例", trigger: "blur" },
          {
            pattern: /^100$|^[1-9]?\d(\.\d+)?$|^0(\.\d+)?$/,
            message: "请输入0-100数",
            trigger: "blur",
          },
        ],

        syNewCarCostsProportion: [
          { required: true, message: "请输入新车费用比例", trigger: "blur" },
          {
            pattern: /^([0-9]{1,2}|100)$/,
            message: "请输入0-100的整数",
            trigger: "blur",
          },
        ],
        syOldCarCostsProportion: [
          { required: true, message: "请输入旧车费用比例", trigger: "blur" },
          {
            pattern: /^([0-9]{1,2}|100)$/,
            message: "请输入0-100的整数",
            trigger: "blur",
          },
        ],
        syCostsProportion: [
          { required: true, message: "请输入总费用比例", trigger: "blur" },
          {
            pattern: /^100$|^[1-9]?\d(\.\d+)?$|^0(\.\d+)?$/,
            message: "请输入0-100的数",
            trigger: "blur",
          },
        ],
      },

      underwritingRules: {
        ruleDescription: [
          { required: true, message: "清填写规则描述", trigger: "blur" },
        ],
      },
      NoncarformRules: {
        costsProportion: [
          { required: true, message: "请输入总共费用比例", trigger: "blur" },
          {
            pattern: /^100$|^[1-9]?\d(\.\d+)?$|^0(\.\d+)?$/,
            message: "请输入0-100的数",
            trigger: "blur",
          },
        ],
      },
      //------------协议下拉框数据   begin-----------------
      agreementTypeoptions: [], //协议类型
      matchTypeoptions: [], //保单匹配协议日期类型
      moneyTypeoptions: [], //佣金发放方式
      supplierTypeEnumoptions: [], //供应商类型
      approvalStatusoptions: [], //审批状态
      productsTypeoptions: [], //车险产品字典
      productsTypeRuleoptions: [], //车险产品字典(不含费用的兜底配置)
      InsInsuranceKindoptions: [],//险种配置
      //操作符字典
      operator: { "pageNum": 1, "pageSize": 10, "columnFilters": { "label": { "name": "label", "value": "agreement_operator" } } },
      operatorlist: [],
      //操作符字典
      //费用审核状态
      expenseAudit: { "pageNum": 1, "pageSize": 10, "columnFilters": { "label": { "name": "label", "value": "agreement_audit_status" } } },
      expenseAuditlist: [],
      //费用审核状态

      //------------协议下拉框数据  ，。end-----------------
      statusalloptions: [
        { value: "0", label: "待审核" },
        { value: "1", label: "审核通过" },
        { value: "2", label: "退回修改" },
        { value: "99", label: "已失效" },
      ],
      auditstatusoptions: [
        { value: "0", label: "申请审核" },
        { value: "1", label: "审核通过" },
        { value: "2", label: "审核不通过" },
      ],
      prodInsurance: [],
      schemeindex: "",
      productCostsindex: "",
      agreementHistoryRecordDialogVisible: false,//协议历史
      agreementHistoryRecordResult: [],

      productHistoryRecordDialogVisible: false,
      productHistoryRecordResult: [],
      underwritingRulesHistoryRecordDialogVisible: false,
      underwritingRulesHistoryRecordResult: [],
      productpageRequestForm: {},
      productHistoryRecordForm: {},
      underwritingRulesHistoryCostFindForm: {},
      // 轨迹
      ddgjdialogVisible: false,
      trajectoryTable: []
    };
  },
  computed: {
    // 机构列表转属性数据
    companyListTree() {
      let cloneData = JSON.parse(JSON.stringify(this.companyList)); // 对源数据深度克隆
      return cloneData.filter((father) => {
        // 循环所有项，并添加children属性
        let branchArr = cloneData.filter(
          (child) => father.id == child.parentId
        ); // 返回每一项的子级数组
        branchArr.length > 0 ? (father.children = branchArr) : ""; //给父级添加一个children属性，并赋值
        if (this.peopleid == "admin" || this.peopledeptid == "99") {
          return father.parentId == 0; //返回第一层
        } else {
          return father.id == this.peopledeptid; //返回第一层
        }
      });
    },
    pickerOptions() {
      return {
        disabledDate: this.disabledDate,
      };
    },

    pickerOptions1() {
      return {
        disabledDate: this.disabledDate1,
      };
    },
  },
  created() {
    this.peopleid = Cookies.get("user");
    if (this.peopleid != "admin") {
      this.peopledeptid = Cookies.get("user").split("D")[0];
    } else {
      this.peopledeptid = "9";
    }
    //获取操作符
    this.$api.dict.findPage(this.operator).then(res => {
      this.operatorlist = res.data.content;
    })
    this.$api.dict.findPage(this.expenseAudit).then(res => {
      this.expenseAuditlist = res.data.content;
    })
    this.$api.dept.queryTree().then((res) => {
      if (res.code == 200) {
        this.areaOptions = res.data
      }
    })
    this.agreement.partnerCompaniesId = "";

    this.getDicType("InsInsuranceKind"); //险种类型
    this.getDicType("agreementType"); //协议类型
    this.getDicType("matchType"); //保单日期类型
    this.getDicType("moneyType"); //佣金发放方式
    this.getDicType("supplierTypeEnum"); //供应商类型
    this.getDicType("approvalStatus"); //审批状态
    this.getDicType("productsType"); //车险产品
    this.findPage();
    this.$api.insCompany.gainTopList("1").then((res) => {
      this.prodInsurance = res.data;
    });
    this.$api.dept.findDeptTree().then((res) => {
      this.treedata = res.data;
    });
    this.$api.insCompany.shutdown().then((res) => {
      this.permissions = res.data;
    });
    this.$api.insCompany.getAreaLicense("14").then((res) => {
      let data = [];
      res.data.map(val => {
        data.push({
          code: val.areaNumber,
          name: val.license,
        })
        return val;
      })
      this.areanumberplateList = data;
    });
    this.getFactorTemplate();
    this.defaultattributionform = JSON.parse(
      JSON.stringify(this.attributionform)
    );

  },
  mounted() {
    this.labelWidth = "auto";
    this.findLeftTreeData();
  },
  methods: {
    agreestatusStyle(val) {
      switch (val) {
        case 0:
          return '#409eff'
        case 1:
          return '#67c23a'
        case 2:
          return '#f56c6c'
        default:
          break;
      }
    },
    // 费用因子轨迹
    trajectory(item) {
      this.$api.insCompany.trajectoryGet({ costsId: item.row.id }).then((res) => {
        if (res.code == 200 && res.data.length > 0) {
          this.ddgjdialogVisible = true;
          this.trajectoryTable = res.data;
        } else {
          this.$message({
            message: res.msg || "暂无数据！",
            type: "warning",
          });
        }
      });
    },
    productFilterListChange(e) {
      let productstring = e.join(",")
      this.agreement.productsCode = productstring;
    },
    customTool(ids) {
      this.$confirm('是否确认提交?', '提示', {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          newAgreementId: this.agreementId,
          orgCostsIds: ids,
        }
        this.$api.insCompany.productContbatchCopy(params).then((res) => {
          if (res.code == '200') {
            this.$message({
              type: 'success',
              message: "批量复制成功",
            });
            this.productCostCopyDialogVisible = false;
          } else {
            this.$message({
              type: 'error',
              message: res.msg,
            });
          }
        });
      }).catch(() => {

      });


    },
    productcopyItemQuery() {
      this.productcopyItemFindPage();
    },
    productExpenseSearch() {
      this.productCostFindPage();
    },
    dateUpdateChange(e) {
      if (e == null) {
        this.queryForm.updateStarTime = ''
        this.queryForm.updateEndTime = ''
      } else {
        this.queryForm.updateStarTime = e[0];
        this.queryForm.updateEndTime = e[1];
      }
    },
    agreemenChange(e) {
      if (e == null) {
        this.queryForm.agreementStartDate = ''
        this.queryForm.agreementEndDate = ''
      } else {
        this.queryForm.agreementStartDate = e[0];
        this.queryForm.agreementEndDate = e[1];
      }
    },
    // 协议历史记录详情
    agreementsHistory({ row, column }) {
      this.dept = [];
      this.treekeys = [];
      this.$api.insCompany.agreementhistoryGetDetail(row.batch).then((res) => {
        if (res.code == '200') {
          this.agreementsHistoryDialogVisible = true;
          if (res.data.ptlAgreementHistory.productsCode) {
            let productsCodeList = res.data.ptlAgreementHistory.productsCode.split(",");
            this.productFilterList = productsCodeList;
          }
          this.agreementsHistoryInfo.agreement = res.data.ptlAgreementHistory;
          this.agreementsHistoryInfo.attributionform = res.data.ptlAgreementAttributionHistory ? res.data.ptlAgreementAttributionHistory : '{}';
          if (res.data.deptHistories.length > 0) {
            res.data.deptHistories.map((ele, index) => {
              this.dept.push(ele.deptId);
              return ele;
            });
          }
          this.treekeys = this.dept;
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          });
        }
      });
    },
    //产品历史记录详情
    productHistoryDetails({ row, column }) {
      this.$api.insCompany.productCostHistoryDetails(row.batch).then((res) => {
        if (res.code == '200') {
          let obj = Object.assign({}, res.data.agreementProductCostsNewHistory);
          obj.costsAttrLinkList.map(val => {
            switch (val.attrType) {
              case 'inputNumber':
                if (!val.operator) {
                  val.operator = '1';
                }
                break;
            }
            if (val.attrCode == 'LicenseNo') {
              val.dictLabal = this.areanumberplateList;
            }
            return val;
          })
          this.$nextTick(() => {
            this.dynamicFormArray = obj.costsAttrLinkList;
            this.productCostForm = obj;
          });
          this.productHistoryDetailsDialogVisible = true;
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          });
        }
      });
      // this.productHistoryDetailsDialogVisible = true;

    },
    //承保规则历史记录详情
    underwritingRulesHistoryDetails({ row, column }) {
      this.$api.insCompany.undwrtRulesHistoryPageDetails(row.batch).then((res) => {
        if (res.code == '200') {
          let obj = Object.assign({}, res.data.agreementUndwrtRulesNewHistory);
          obj.costsAttrLinkList.map(val => {
            switch (val.attrType) {
              case 'inputNumber':
                if (!val.operator) {
                  val.operator = '1';
                }
                break;
            }
            if (val.attrCode == 'LicenseNo') {
              val.dictLabal = this.areanumberplateList;
            }
            return val;
          })
          this.$nextTick(() => {
            this.dynamicFormArray = obj.costsAttrLinkList;
            this.underwritingRulesForm = {
              id: obj.id,
              agreementId: obj.agreementId, //协议id
              ruleDescription: obj.ruleDescription, //规则描述
              validInd: obj.validInd, //是否有效
              rulesAttrList: [],//规则属性
            };
          });
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          });
        }
      });
      this.underwritingRulesHistoryDetailsDialogVisible = true;

    },
    getFactorTemplate() {
      this.$api.insCompany.productConfigItem().then(res => {
        if (res.code == '200') {
          let data = res.data;
          data.map(ele => {
            switch (ele.attrType) {
              case 'inputNumber':
                ele.operator = '1';
                break;
            }
            if (ele.attrName == '车牌号') {
              ele.dictLabal = this.areanumberplateList;
            }
          })
          // this.productCostForm.costsAttrLinks = data;
          this.dynamicFormArray = data;
        }
      })
    },
    productCostFactorCancelForm(data) {
      this.productCostFactorDialogVisible = data;
    },
    productCostFactorSaveForm(data) {
      this.productCostForm.costsAttrLinks = data;
      this.productCostFactorDialogVisible = false;
    },
    underwritingRulesCancelForm(data) {
      this.underwritingRulesAddVehicleFactorVisible = data;
    },
    underwritingRulesSaveForm(data) {
      this.underwritingRulesForm.rulesAttrList = data;
      if (this.underwritingRulesAddDialogType == "add") {
        this.$api.insCompany
          .undwrtRulesSaveCostSave(this.underwritingRulesForm)
          .then((res) => {
            if (res.code == "200") {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.underwritingRulesAddVehicleFactorVisible = false;
              this.underwritingRulesFindPage();
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
      } else {
        this.$api.insCompany
          .undwrtRulesUpdate(this.underwritingRulesForm)
          .then((res) => {
            if (res.code == "200") {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.underwritingRulesAddVehicleFactorVisible = false;
              this.underwritingRulesFindPage();
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
      }
    },
    //协议历史
    historyRecord(index, row) {
      this.agreementId = row.id;
      this.agreementHistoryCostFindPage();
      this.agreementHistoryRecordDialogVisible = true;
    },
    agreementHistoryCostFindPage(data) {
      if (data && data.pageRequest) {
        this.productpageRequest.pageNum = data.pageRequest.pageNum;
        this.productpageRequest.pageSize = data.pageRequest.pageSize;
      }
      this.productpageRequest["agreementId"] = this.agreementId;
      this.$api.insCompany
        .agreementHistory({ ...this.productpageRequest, ...this.productpageRequestForm })
        .then((res) => {
          this.agreementHistoryRecordResult = res.data;
        });
    },
    //产品分页json
    productCostFindPage(data) {
      if (data && data.pageRequest) {
        this.productpageRequest.pageNum = data.pageRequest.pageNum;
        this.productpageRequest.pageSize = data.pageRequest.pageSize;
      }
      this.productpageRequest["agreementId"] = this.agreementId;
      this.$api.insCompany
        .productCostQuery(this.productpageRequest)
        .then((res) => {
          this.productPageResult = res;
        });
    },
    productHistoryCostFindPage(data) {
      if (data && data.pageRequest) {
        this.productpageRequest.pageNum = data.pageRequest.pageNum;
        this.productpageRequest.pageSize = data.pageRequest.pageSize;
      }
      this.productpageRequest["agreementId"] = this.agreementId;
      this.$api.insCompany
        .productCostHistory({ ...this.productpageRequest, ...this.productHistoryRecordForm })
        .then((res) => {
          this.productHistoryRecordResult = res.data;
        });
    },
    productcopyItemFindPage(data) {
      if (data && data.pageRequest) {
        this.productcopyItemPageRequest.pageNum = data.pageRequest.pageNum;
        this.productcopyItemPageRequest.pageSize = data.pageRequest.pageSize;
      }
      this.$api.insCompany
        .productCostQuery(this.productcopyItemPageRequest)
        .then((res) => {
          this.productcopyItemResult = res;
        });
    },
    underwritingRulesFindPage(data) {
      if (data && data.pageRequest) {
        this.productpageRequest.pageNum = data.pageRequest.pageNum;
        this.productpageRequest.pageSize = data.pageRequest.pageSize;
      }
      this.productpageRequest["agreementId"] = this.agreementId;
      this.$api.insCompany
        .getUndwrtRulesQuery(this.productpageRequest)
        .then((res) => {
          this.underwritingRulesResult = res;
        });
    },
    underwritingRulesHistoryCostFindPage(data) {
      if (data && data.pageRequest) {
        this.productpageRequest.pageNum = data.pageRequest.pageNum;
        this.productpageRequest.pageSize = data.pageRequest.pageSize;
      }
      this.productpageRequest["agreementId"] = this.agreementId;
      this.$api.insCompany
        .undwrtRulesHistoryPage({ ...this.productpageRequest, ...this.underwritingRulesHistoryCostFindForm })
        .then((res) => {
          this.underwritingRulesHistoryRecordResult = res.data;
        });
    },
    //产品费用
    productCost(index, row) {
      this.agreementId = row.id;
      this.productCostForm.agreementId = row.id;
      this.productCostVehicleFactorVisible = true;
      this.productCostFindPage();
    },
    //产品历史记录
    productHistory() {
      this.productHistoryCostFindPage();
      this.productHistoryRecordDialogVisible = true;
    },
    underwritingRulesHistory() {
      this.underwritingRulesHistoryCostFindPage();
      this.underwritingRulesHistoryRecordDialogVisible = true;
    },
    //承保规则
    underwritingRulesButton(index, row) {
      this.agreementId = row.id;
      this.underwritingRulesForm.agreementId = row.id;
      this.underwritingRulesVehicleFactorVisible = true;
      this.underwritingRulesFindPage();
    },
    //添加承保规则
    addUnderwritingRule() {
      this.underwritingRulesAddDialogType = "add";
      this.underwritingRulesAddDialogTitle = "承保规则录入";
      this.underwritingRulesAddVehicleFactorVisible = true;
    },
    //产品删除
    productDelete({ row, column }) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.insCompany.productCostDelete(row.id).then((res) => {
            if (res.code == "200") {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.productCostFindPage();
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //产品费用复制
    expenseCopy() {
      this.productCostCopyDialogVisible = true;
      this.productcopyItemPageRequest.agreementId = "";
      this.productcopyItemPageRequest.productCode = "";
      this.productcopyItemResult = [];

    },
    //产品编辑
    productUpdate({ row, column }) {
      this.$api.insCompany.productcostFactorQuery(row.id).then((res) => {
        if (res.code == '200') {
          let obj = Object.assign({}, res.data);
          obj.costsAttrLinks.map(val => {
            switch (val.attrType) {
              case 'inputNumber':
                if (!val.operator) {
                  val.operator = '1';
                }
                break;
            }
            if (val.attrCode == 'LicenseNo') {
              val.dictLabal = this.areanumberplateList;
            }
            return val;
          })
          this.$nextTick(() => {
            this.dynamicFormArray = obj.costsAttrLinks;
            this.productCostForm = obj;
          });
          this.productCostAddDialogType = "edit";
          this.productCostAddDialogTitle = "产品编辑";
          this.productCostAddVehicleFactorVisible = true;
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          });
        }
      });
    },
    //承保规则编辑
    underwritingRulesUpdate({ row, column }) {
      this.$api.insCompany.getUndwrtRulesFactorQuery(row.id).then((res) => {
        if (res.code == '200') {
          let obj = Object.assign({}, res.data);
          obj.costsAttrLinks.map(val => {
            switch (val.attrType) {
              case 'inputNumber':
                if (!val.operator) {
                  val.operator = '1';
                }
                break;
            }
            if (val.attrCode == 'LicenseNo') {
              val.dictLabal = this.areanumberplateList;
            }
            return val;
          })
          this.$nextTick(() => {
            this.dynamicFormArray = obj.costsAttrLinks;
            this.underwritingRulesForm = {
              id: obj.id,
              agreementId: obj.agreementId, //协议id
              ruleDescription: obj.ruleDescription, //规则描述
              validInd: obj.validInd, //是否有效
              rulesAttrList: [],//规则属性
            };
          });
          this.underwritingRulesAddDialogType = "edit";
          this.underwritingRulesAddDialogTitle = "承保规则编辑";
          this.underwritingRulesAddVehicleFactorVisible = true;
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          });
        }
      });
    },
    //承保规则删除
    underwritingRulesDelete({ row, column }) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.insCompany.undwrtRulesDelete(row.id).then((res) => {
            if (res.code == "200") {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.underwritingRulesFindPage();
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          })

        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //切换tab页
    handleClickTab(tab, event) {
      if (tab.name == "Noncarproductcost") {
      }
    },
    //改变费用起期时，同步清空对应费用止期，重新填写
    cleanEndDate() {
      this.productCostForm.costsEndDate = null;
    },
    //改变费用止期时，校验必须先填费用起期
    checkStartDate() {
      let tempStartDate = this.productCostForm.costsStartDate;
      if (!tempStartDate) {
        this.productCostForm.costsEndDate = null;
        this.$message({
          message: "请先选择费用起期！",
          type: "error",
        });
      }
    },

    disabledDate(time) {
      if (this.operType == "EDIT") {
        return time.getTime() < Date.now() - 8.64e7;
      }
    },
    disabledDate1(time) {
      let datetime = this.productCostForm.costsStartDate;
      const disabledTime = new Date(datetime).getTime() + 8.64e7;
      return time.getTime() < disabledTime;
    },

    //请求类型change
    apiChange(e) {
      let params = {
        insCompanyId: this.agreement.partnerCompaniesId,
        apiType: e,
      };
      this.$api.insCompany.getPtlInsAttributionTemplate(params).then((res) => {
        if (res.code == "200") {
          this.attributionform.templateId = res.data.id;
          this.attributionform.fields = res.data.fields;
        } else {
          this.attributionform.fields = [];
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    agreementTypeChange(value) {
      console.log(value)
      this.agreement.agreementType = value;
    },
    //授权树节点过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //获取选中节点
    treechange(data, node) {
      this.dept = [];
      node.checkedKeys.map((ele) => {
        this.dept.push(ele);
      });
    },
    //编辑事件
    uplatequery(index, row) {
      //每次修改时，先把变量清空，解决累加存储问题
      this.dept = [];
      this.copyAgreementId = "";
      this.syncAgreementIds = [];
      this.treekeys = [];
      //编辑进来，tab页指向第一个
      this.activeTabs = "first";
      this.agreementId = row.id;
      this.operType = "EDIT";
      this.dialogTitle = "协议编辑";
      this.$api.insCompany.agreementId(row.id).then((res) => {
        if (res.code == "200") {
          let scheme = res.data.scheme;
          if (res.data.agreement.productsCode) {
            let productsCodeList = res.data.agreement.productsCode.split(",");
            this.productFilterList = productsCodeList;
          }
          this.agreement = res.data.agreement; //协议信息
          this.attributionform = res.data.ptlAgreementAttribution;
          if (res.data.dept.length > 0) {
            res.data.dept.map((ele, index) => {
              this.dept.push(ele.deptId);
              return ele;
            });
          }
          // this.treekeys = [];
          this.treekeys = this.dept;
          this.agreementdialogVisible = true;
        }
      });
    },
    //删除方法
    deletequery(index, row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.insCompany.deleteagreement(row.id).then((res) => {
            if (res.code == "200") {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.findPage();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //添加产品
    pruductChange(event, item) {
      this.productCostForm.productName = item.dictTag;
      this.productCostForm.productId = item.dictValue;
      this.productCostAddDialogTitle = "产品录入";
      this.productCostAddDialogType = "add";
      this.productCostAddVehicleFactorVisible = true;
    },
    //产品费用提交
    productCostAddSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.productCostAddDialogType == "add") {
            this.$api.insCompany
              .productCostSave(this.productCostForm)
              .then((res) => {
                if (res.code == "200") {
                  this.$message({
                    type: "success",
                    message: res.msg,
                  });
                  this.productCostAddVehicleFactorVisible = false;
                  this.productCostFindPage();
                } else {
                  this.$message({
                    type: "error",
                    message: res.msg,
                  });
                }
              });
          } else {
            this.$api.insCompany
              .productCostUpdate(this.productCostForm)
              .then((res) => {
                if (res.code == "200") {
                  this.$message({
                    type: "success",
                    message: res.msg,
                  });
                  this.productCostAddVehicleFactorVisible = false;
                  this.productCostFindPage();
                } else {
                  this.$message({
                    type: "error",
                    message: res.msg,
                  });
                }
              });
          }
        }
      });
    },
    productCostFactoropenDialog() {
      if (this.productCostAddDialogType == 'add') {
        this.getFactorTemplate();
      }
    },
    //弹框关闭事件
    productcloseDialog() {
      for (const key in this.productCostForm) {
        if (key !== "agreementId" && key !== "costsAttrLinks") {
          this.productCostForm[key] = "";
        }
      }
      this.getFactorTemplate();
      this.roductList1 = null;
    },
    underwritingRulescloseDialog() {
      for (let key in this.underwritingRulesForm) {
        if (key !== "agreementId" && key !== "rulesAttrList") {
          this.underwritingRulesForm[key] = "";
        }
      }
      if (this.underwritingRulesAddDialogType == 'edit') {
        this.getFactorTemplate();
      }
    },
    //弹框打开事件，清空表单
    closeDialog() {
      //不管新增，还是编辑  关闭窗口后，都清空临时数据 以免编辑后新增默认带出上一次打开协议中信息
      for (let key in this.agreement) {
        // if (key != "partnerCompaniesId") {
        this.agreement[key] = "";
        // }
      }
      this.attributionform = JSON.parse(
        JSON.stringify(this.defaultattributionform)
      );
      if (this.treekeys.length) {
        this.$refs.trees.setCheckedKeys([]);
        this.expandshow = false;
        this.parentkeys = [];
      }
    },
    agreementsHistorycloseDialog() {
      if (this.treekeys.length) {
        this.$refs.trees.setCheckedKeys([]);
        this.expandshow = false;
        this.parentkeys = [];
      }
    },
    totalCostRatioInput(total, partial, other) {
      //参数1为总费用，参数2为费用
      let pay1 = this.productCostForm[total]; //总
      let pay2 = this.productCostForm[partial]; //费用
      if (pay1) {
        if (Number(pay1) >= Number(pay2)) {
          var otherPay = pay1 - pay2;
          this.productCostForm[other] = Math.round(otherPay * 100) / 100;
        } else {
          //如果总比例不够扣减，则置空重新填
          this.productCostForm[total] = null;
          this.productCostForm[partial] = null;
          this.$message({
            message: "总费用比例必须大于费用比例",
            type: "error",
          });
        }
      }
    },
    costRatioInput(total, partial, other) {
      //参数1为总费用，参数2为费用
      let pay1 = this.productCostForm[total]; //总
      let pay2 = this.productCostForm[partial]; //费用
      if (pay1) {
        if (Number(pay2) <= Number(pay1)) {
          var otherPay = pay1 - pay2;
          this.productCostForm[other] = Math.round(otherPay * 100) / 100;
        } else {
          //如果总比例不够扣减，则置空重新填
          this.productCostForm[total] = null;
          this.productCostForm[partial] = null;
          this.$message({
            message: "费用比例必须小于总费用比例",
            type: "error",
          });
        }
      }
    },
    // 获取树数据
    findLeftTreeData: function () {
      let params = {
        classname: "",
        type: this.supplierType,
      };
      this.$api.insCompany.findLeftInsTree(params).then((res) => {
        this.ztreeNodes = res.data;
      });
    },

    supplierChange(e) {
      let params = {
        classname: "",
        type: e,
      };
      this.$api.insCompany.findLeftInsTree(params).then((res) => {
        this.ztreeNodes = res.data;
      });
    },
    // onZTreeClick: function (evt, treeId, treeNode) {
    //   // 点击事件
    //   this.containsSubChecked = false;
    //   this.agreement.partnerCompaniesId = treeNode.id;

    //   this.findPage();
    // },
    // onZTreeCreated: function (ztreeObj) {
    //   this.ztreeObj = ztreeObj;
    //   // onCreated 中操作ztreeObj对象展开第一个节点
    //   ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
    //   this.currentTreeNode = ztreeObj.getNodes()[0];
    //   this.options = ztreeObj.getNodes();
    // },
    //-- tree end-------
    //--数据字典 begin --
    getDicType(type) {
      this.$api.insCompany.dicType(type).then((res) => {
        if (res.code == 200) {
          this[type + "options"] = res.data.ddList;
          //如果是产品编码，费用方案用的，单独塞进去一个兜底配置other
          if (type == "productsType") {
            for (let item of this.productsTypeoptions) {
              this.productsTypeRuleoptions.push(item);
            }
            let productItem = {};
            productItem.dictTag = "兜底配置";
            productItem.dictValue = "039999";
            productItem.sort = 5;
            this.productsTypeoptions.push(productItem);
          }
        }
      });
    },
    //--数据字典 end --
    //通过查询条件查询分页数据Start
    queryEsmInfo() {
      if (this.queryForm.date != null) {
        this.queryForm.startDate = this.queryForm.date[0];
        this.queryForm.endDate = this.queryForm.date[1];
      } else {
        this.queryForm.startDate = "";
        this.queryForm.endDate = "";
      }
      // this.pageRequest.columnFilters.status.value = this.queryForm.status;
      this.pageRequest.pageNum = 1;
      this.findPage();
    },
    //通过查询条件查询分页数据End

    // 右侧列表的方法Start
    findPage() {
      let areaCode = ''
      if (this.queryForm.areaCode && this.queryForm.areaCode.length > 0) {
        this.queryForm.level = this.$refs['area'].getCheckedNodes()[0].level
        areaCode = this.queryForm.areaCode[this.queryForm.areaCode.length - 1]
      }
      else {
        this.queryForm.areaCode = ''
        this.queryForm.level = ''
      }
      let parmas = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        partnerCompaniesId: this.agreement.partnerCompaniesId,
        companiesType: this.supplierType,
        startDate: this.queryForm.startDate,
        endDate: this.queryForm.endDate,
        validStatus: this.queryForm.validStatus,
        ...this.queryForm,
        areaCode,
        // auditStatus:this.queryForm.status
      };

      this.$api.insCompany.agreementPage(parmas).then((res) => {
        if (res.code == 200) {
          this.pageResult = res.data.content;
          this.pageNum = res.data.pageNum;
          this.pageSize = res.data.pageSize;
          this.totalSize = res.data.totalSize;
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    // 右侧列表的方法End
    //-- formatter begin--
    operatorTypeFormatter(row, column) {
      let operatorType = row.operatorType;
      switch (operatorType) {
        case "add":
          return '新增'
        case "update":
          return '修改'
        case "delete":
          return '删除'
      }
    },
    auditTypeFormation(row) {
      for (var i = 0; i < this.expenseAuditlist.length; i++) {
        if (row.isAudit == parseInt(this.expenseAuditlist[i].value)) {
          return this.expenseAuditlist[i].label;
        }
      }
    },
    agreementtypeFormatter(row, column) {
      //协议类型
      let agreementType = row.agreementType;
      return CommonUtil.getDataName({
        dataList: this.agreementTypeoptions,
        value: "dictValue",
        label: "dictTag",
        data: agreementType,
      });
    },
    matchtypeFormatter(row, column) {
      //匹配日期类型
      let matchType = row.matchType;
      return CommonUtil.getDataName({
        dataList: this.matchTypeoptions,
        value: "dictValue",
        label: "dictTag",
        data: matchType,
      });
    },
    moneytimeFormatter(row, column) {
      //结算周期
      return "T+" + row.moneyTime;
    },
    moneyTypeFormatter(row, column) {
      let moneyType = row.moneyType;
      return CommonUtil.getDataName({
        dataList: this.moneyTypeoptions,
        value: "dictValue",
        label: "dictTag",
        data: moneyType,
      });
    },
    agreestatusFormatter(row, column) {
      //状态
      let endTime = new Date(row.endDate + " 23:59:59").getTime();
      let currentTime = new Date().getTime();
      if (currentTime > endTime) {
        return "已失效";
      } else {
        let agreestatus = row.validStatus;
        return CommonUtil.getDataName({
          dataList: this.statusalloptions,
          value: "value",
          label: "label",
          data: agreestatus,
        });
      }
    },
    auditstatusFormatter(row, column) {
      let status = row.auditStatus;
      return CommonUtil.getDataName({
        dataList: this.auditstatusoptions,
        value: "value",
        label: "label",
        data: status,
      });
    },
    validIndFormatter(row, column) {
      let validInd = row.validInd;
      if (validInd == 1) {
        return '有效'
      } else {
        return '无效'
      }
    },
    updatetimeFormatter(row, column) {
      let updateTime = row.updateTime;
      return format(updateTime);
    },
    //-- formatter end--
    // 选择合作公司Start
    handleChange(value, selectedData) {
      if (!value) {
        //没数
        return;
      }
      this.attributionform.apiType = ""; //每次更改公司选择后清除保险公司账号配置
      this.attributionform.fields = []; //每次更改公司选择后清除保险公司账号配置参数
      this.agreement.partnerCompaniesId = value[value.length - 1];
      this.agreement.insuranceCompanyId = value[0];
      if (this.supplierType == "1") {
        this.agreement.agreementType = "1";
      } else if (this.supplierType == "0") {
        this.agreement.agreementType = "2";
      }
      //协议编码，新增时可能为空
      // let agreementId = this.agreementId;
      // //保险公司代码  协议归属渠道时，取保险公司代码   协议归属财险时，取合作机构代码
      // let compangId = this.agreement.insuranceCompanyId
      //   ? this.agreement.insuranceCompanyId
      //   : this.agreement.partnerCompaniesId;
      // this.queryNonCarCostList(agreementId, compangId);
    },
    prodhandleChange(value) {
      this.agreement.insuranceCompanyId = value[value.length - 1];
      //协议编码，新增时可能为空
      // let agreementId = this.agreementId;
      //保险公司代码  协议归属渠道时，取保险公司代码   协议归属财险时，取合作机构代码
      // let compangId = this.agreement.insuranceCompanyId
      //   ? this.agreement.insuranceCompanyId
      //   : this.agreement.partnerCompaniesId;
      // this.queryNonCarCostList(agreementId, compangId);
    },
    // 选择合作公司end
    handleAdd() {
      //新增进来，tab页指向第一个
      this.activeTabs = "first";
      this.operType = "ADD";
      this.dialogTitle = "新增协议";
      this.agreementdialogVisible = true;
      //清空页面历史选择数据
      this.agreementId = "";
      this.copyAgreementId = "";
      this.syncAgreementIds = [];
      if (this.supplierType == "1") {
        this.agreement.agreementType = "1";
      } else if (this.supplierType == "0") {
        this.agreement.agreementType = "2";
      }
    },
    //提交
    submitForm() {
      let agreementCheckFlag = true; //协议信息校验标志
      this.$refs["addAgreementRef"].validate((valid) => {
        if (!valid) {
          agreementCheckFlag = false;
          //校验有错误，滚动到校验处
          this.$nextTick(() => {
            let isError = document.getElementsByClassName("is-error");
            isError[0].scrollIntoView({
              block: "center",
              behavior: "smooth",
            });
          });
        }
      });
      let accountCheckFlag = true; //保险公司账号配置信息校验标志
      this.$refs["attributionform"].validate((valid) => {
        if (!valid) {
          accountCheckFlag = false;
          //校验有错误，滚动到校验处
          this.$nextTick(() => {
            let isError = document.getElementsByClassName("is-error");
            isError[0].scrollIntoView({
              block: "center",
              behavior: "smooth",
            });
          });
        }
      });
      //如果校验通过，则进行提交
      if (agreementCheckFlag && accountCheckFlag) {
        if (this.operType == "ADD") {
          let params = {
            agreement: this.agreement,
            attribution: this.attributionform,
            dept: this.dept,
          };
          this.$api.insCompany.addagreement(params).then((res) => {
            if (res.code == "200") {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.agreementdialogVisible = false;
              this.agreement.partnerCompaniesId = "";
              this.findPage();
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
        } else {
          let upparams = {
            agreement: this.agreement,
            attribution: this.attributionform,
            dept: this.dept,
          };
          this.$api.insCompany
            .updateagreement(this.agreementId, upparams)
            .then((res) => {
              if (res.code == "200") {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.agreementdialogVisible = false;
                this.agreement.partnerCompaniesId = "";
                this.findPage();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            });
        }
      } else {
        this.$message({
          message: "请检查页面必填信息！",
          type: "error",
        });
        if (!agreementCheckFlag) {
          this.activeTabs = "first";
        } else {
          if (!accountCheckFlag) {
            this.activeTabs = "inscommany";
          } else {
          }
        }
      }
    },
    //分页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.findPage();
    },
    //分页页数
    handleCurrentChange(val) {
      this.pageNum = val;
      this.findPage();
    },
  },
};
</script>
<style scoped lang="scss">
/* 图二 */
.el-divider {
  margin: 10px 0px 15px !important;
}

.queryForm .el-row {
  margin: 0px;
}

.queryForm .el-form-item {
  margin-bottom: 5px;
  display: flex;
}

.products {

  // margin: 20px;
  .productCosts {
    text-align: center;

    span {
      font-weight: bold;
    }
  }
}

.ruleStyle {
  /deep/ .el-divider__text {
    color: red;
  }
}

.products>div {
  margin: 5px;
}

.productstitle {
  width: 100%;
  border-bottom: 2px solid #409eff;
  text-align: center;
}

.productstitle>div {
  width: 100px;
  height: 26px;
  line-height: 30px;
  background: #409eff;
  color: #fff;
  border-top-right-radius: 15px;
  padding: 2px;
  font-size: 12px;
}

/deep/ {
  .el-button--warning {
    color: #fff;
    background-color: #ee7000;
    border-color: #ee7000;

    &:hover {
      color: #fff;
      background-color: #ee6f00ce;
      border-color: #ee6f00ce;
    }
  }

  .el-step__title,
  .el-step__icon-inner {
    color: var(--themeColor)
  }

  .el-step__description.is-finish,
  .el-step__head.is-finish {
    color: #333;
    border: none
  }

  .el-step__icon.is-text {
    border: none;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
  }

  .el-step__icon.is-text {
    font-size: 22px;
  }

  .el-step__icon {
    width: 28px;
    height: 28px;
  }

  .el-step.is-vertical .el-step__main {
    padding-left: 20px
  }

  .el-step__line,
  .el-step.is-vertical .el-step__line {
    left: 14px;
    background-color: #E2E5EB;
    width: 1px
  }

  .el-step__line-inner {
    height: 0;
    display: none
  }

  .is-flex {

    .el-step__icon {
      background: var(--themeColor)
    }

    .el-step__icon-inner {
      color: #fff;
    }
  }

}

.apistyle /deep/ .el-form-item__label {
  min-width: 180px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>