5/15

src/assets/css/global.css

@@ -33,4 +33,50 @@ html, body, #app {
 .el-upload-list__item {
   transition: none !important;
 }
+/* 字典页面样式处理 */
+.block-col .el-tree-node__label {
+  font-size: 15px !important;
+}
+.block-col .el-tree-node__content {
+  height: 32px !important;
+}
+.block-col .is-leaf {
+  padding: 6px;
+  color: #606060 !important;
+}
+.block-col .el-tree {
+  color: #424242;
+}
+.block-col .el-tree-node__expand-icon.is-leaf{
+  font-size: 16px !important;
+  color: #9d9d9d !important;
+}
+.table .el-table__empty-text {
+  line-height: 700px;
+  height: 700px;
+  width: 50%;
+  color: #909399;
+}
+.table .el-table tr {
+  background-color: #fff;
+  height: 50px;
+  font-size: 14px;
+}
+/* 树形图标间隙修改 */
+.ztree[data-v-72902738] .button {
+  width: 16px !important;
+}
+.tablestyle .el-table__cell {
+  padding: 6px 0 !important;
+}
 
+.tablestyle .cell {
+  font-weight: 500 !important;
+  font-size: 13px !important;
+}
+/* .treeicon .el-tree-node__expand-icon {
+  cursor: pointer;
+  color: #8b8b8b !important;
+  font-size: 17px !important;
+  padding-right: 2px;
+} */

src/config/global.js

@@ -7,16 +7,16 @@
 // 后台管理系统服务器地址
 // export const baseUrl = 'http://192.168.1.7:8080'
 // export const h5BaseUrl = 'http://192.168.1.7:8091'
-// export const baseUrl = 'http://192.168.1.111:8080'
-// export const h5BaseUrl = 'http://192.168.1.111:8091'
+export const baseUrl = 'http://192.168.1.111:8080'
+export const h5BaseUrl = 'http://192.168.1.111:8091'
 //旧服务器
 // export const baseUrl = 'http://test.baoxianzhanggui.com:8080'  
-export const h5BaseUrl = 'http://test.baoxianzhanggui.com:8091'   // h5测试
+// export const h5BaseUrl = 'http://test.baoxianzhanggui.com:8091'   // h5测试
 // export const baseUrl = 'http://www.baoxianzhanggui.com:8080'   
 // export const h5BaseUrl = 'http://www.baoxianzhanggui.com:8091'  //h5正式
 // 新服务器
 // export const baseUrl = 'http://sxzgkj.baoxianzhanggui.com/web-api' //正式服务器
-export const baseUrl = 'http://39.98.239.48/web-api' //测试服务器
+// export const baseUrl = 'http://39.98.239.48/web-api' //测试服务器
 export const backupBaseUrl = 'http://localhost:8002'
 //保险公司名称
 export const insCompanyList = [

src/http/moudules/dict.js

@@ -74,3 +74,18 @@ export const savetype = (data) => {
         data
     })
 }
+//获取系统字典列表
+export const dictList = () => {
+    return axios({
+        url: '/dict/dictList',
+        method: 'get',
+    })
+}
+//根据多个字典类型查询字典数据
+export const listAllDataByTypes = (data) => {
+    return axios({
+        url: '/dict/listAllDataByTypes?dictTypeList='+data,
+        method: 'get',
+        data
+    })
+}

src/http/moudules/letter.js

@@ -306,6 +306,23 @@ export const getAccidentalDriving=(data)=>{
         data
     })
 }
+//意外险列表
+export const gainAccidentList= (data) => {
+    return axios({
+        url: "/api/yongCheng/gainAccidentList",
+        method: "post",
+        data
+    })
+}
+// 意外险列表-方案
+
+export const gainAccidentSchemeList= (data) => {
+    return axios({
+        url: "/api/yongCheng/gainAccidentSchemeList",
+        method: "post",
+        data
+    })
+}
 //获取允许报价的保险公司列表
 export const gainAllowQuoteList=()=>{
     return axios({

src/http/moudules/user.js

@@ -7,7 +7,7 @@ import axios from '../axios'
 // 管理页面分页查询
 export const findPage = (data) => {
   return axios({
-    url: '/esmUserInternal/findPage',
+    url: '/user/findPage',
     method: 'post',
     data
   })
@@ -24,7 +24,7 @@ export const findById = (data) => {
 // 管理页面实现人员的存储
 export const saveUser = (data) => {
     return axios({
-        url: '/esmUserInternalcheck/saveUser',
+        url: '/user/saveEditUserInternal',
         method: 'post',
         data
     })
@@ -33,7 +33,7 @@ export const saveUser = (data) => {
 // 管理页面提交审核
 export const checkUser = (data) => {
     return axios({
-        url: '/esmUserInternalcheck/check?checkid='+data.checkid+'&remark='+data.remark+'&status='+data.status,
+        url: '/user/approval?userId='+data.userId+'&status='+data.status,
         method: 'get'
     })
 }
@@ -197,4 +197,10 @@ export const updatePwd = (params) => {
         method: 'post'
     })
 }
-
+//获取用户综合信息
+export const gainUserSynthesisInfo = (params) => {
+    return axios({
+        url: '/user/gainUserSynthesisInfo/'+params,
+        method: 'post'
+    })
+}

src/views/AuthorizeManage/CarInsurance/FeeAuthorize.vue

@@ -1,77 +1,152 @@
 <template>
-	<div>
-
-		<el-main ref="elMain" style="padding: 0px;">
-		  <Split :gutterSize="2" style="height: calc(100vh - 120px);">
-		    <!-- 左侧树Start -->
-		    <SplitArea :size="leftSplitWidth" :minSize="200">
-		        <el-checkbox v-model="containsSubChecked">显示全部协议</el-checkbox>
-		        <el-divider></el-divider>
-		        <tree :setting="ztreeSetting" :nodes="ztreeNodes" @onClick="onZTreeClick" @onCreated="onZTreeCreated"/>
-		    </SplitArea>
-		    <!-- 左侧树End -->
-
-		    <!-- 右侧列表页面Start -->
-		    <SplitArea :size="rightSplitWidth">
-		      <!-- 工具区域Start -->
-          <el-form class="queryForm" ref="queryFormRef" :model="queryForm" label-width="80px">
-            <el-row style="margin-bottom: 15px;">
+  <div>
+    <el-main ref="elMain" style="padding: 0px">
+      <Split :gutterSize="2" style="height: calc(100vh - 120px)">
+        <!-- 左侧树Start -->
+        <SplitArea :size="leftSplitWidth" :minSize="200">
+          <el-checkbox v-model="containsSubChecked">显示全部协议</el-checkbox>
+          <el-divider></el-divider>
+          <tree
+            :setting="ztreeSetting"
+            :nodes="ztreeNodes"
+            @onClick="onZTreeClick"
+            @onCreated="onZTreeCreated"
+          />
+        </SplitArea>
+        <!-- 左侧树End -->
+
+        <!-- 右侧列表页面Start -->
+        <SplitArea :size="rightSplitWidth">
+          <!-- 工具区域Start -->
+          <el-form
+            class="queryForm"
+            ref="queryFormRef"
+            :model="queryForm"
+            label-width="80px"
+          >
+            <el-row style="margin-bottom: 15px">
               <el-col :span="8">
                 <el-form-item label="录入时间">
-                  <el-date-picker v-model="queryForm.date" style="margin-left: 20px;width:90%" size="small" type="daterange" align="left"
-                     range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
+                  <el-date-picker
+                    v-model="queryForm.date"
+                    style="margin-left: 20px; width: 90%"
+                    size="small"
+                    type="daterange"
+                    align="left"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                  >
+                  </el-date-picker>
                 </el-form-item>
               </el-col>
-              <el-col :span="4" style="display: flex;align-items: center;justify-content: center;">
+              <el-col
+                :span="4"
+                style="
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                "
+              >
                 <el-form-item>
                   <el-button size="small" @click="queryEsmInfo">查询</el-button>
                 </el-form-item>
               </el-col>
             </el-row>
-           </el-form>
-		     <kt-common-table permsEdit="sys:user:edit"  :data="pageResult" :columns="columns" :editButtonName="(pageRequest.columnFilters.status.value == '0')?'费用审核':'查看'"   :showBatchDelete="false" @findPage="findPage" @handleEdit="handleTableEdit"  >
-		      </kt-common-table>
-		    </SplitArea>
-		   </Split>
-		</el-main>
+          </el-form>
+          <kt-common-table
+            permsEdit="sys:user:edit"
+            :data="pageResult"
+            :columns="columns"
+            :editButtonName="
+              pageRequest.columnFilters.status.value == '0'
+                ? '费用审核'
+                : '查看'
+            "
+            :showBatchDelete="false"
+            @findPage="findPage"
+            @handleEdit="handleTableEdit"
+          >
+          </kt-common-table>
+        </SplitArea>
+      </Split>
+    </el-main>
 
     <!-- 新增协议的对话框 -->
-    <el-dialog :title="dialogTitle"  v-dialogDrag :visible.sync="dialogVisible" width="840px" :before-close="handleClose" @close="closeVisible">
-
-      <el-row style="margin-bottom: 10px;" v-if="addAgreementForm.agreestatus =='3'">
-        <el-col :span="4" style="text-align: right"><label style="margin-right: 10px;">退回修改原因：</label></el-col>
-        <el-col :span="20" style="color: red;">
-          {{addAgreementForm.remark}}
+    <el-dialog
+      :title="dialogTitle"
+      v-dialogDrag
+      :visible.sync="dialogVisible"
+      width="840px"
+      :before-close="handleClose"
+      @close="closeVisible"
+    >
+      <el-row
+        style="margin-bottom: 10px"
+        v-if="addAgreementForm.agreestatus == '3'"
+      >
+        <el-col :span="4" style="text-align: right"
+          ><label style="margin-right: 10px">退回修改原因：</label></el-col
+        >
+        <el-col :span="20" style="color: red">
+          {{ addAgreementForm.remark }}
         </el-col>
       </el-row>
 
       <!-- 内容主体区域 -->
-      <el-tabs  v-model="activeTabs" type="card">
+      <el-tabs v-model="activeTabs" type="card">
         <!-- 协议基本信息 -->
         <el-tab-pane label="协议信息" name="first">
-          <el-form disabled size="mini" :model="addAgreementForm" ref="addAgreementRef" label-width="130px">
+          <el-form
+            disabled
+            size="mini"
+            :model="addAgreementForm"
+            ref="addAgreementRef"
+            label-width="130px"
+          >
             <el-row>
               <el-col :span="12">
                 <el-form-item label="协议代码">
-                  <el-input v-model="addAgreementForm.agreementcode" placeholder="请输入协议代码" style="width: 100%;"></el-input>
+                  <el-input
+                    v-model="addAgreementForm.agreementcode"
+                    placeholder="请输入协议代码"
+                    style="width: 100%"
+                  ></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item label="协议名称" >
-                  <el-input v-model="addAgreementForm.agreementname" placeholder="请输入协议名称" style="width: 100%;"></el-input>
+                <el-form-item label="协议名称">
+                  <el-input
+                    v-model="addAgreementForm.agreementname"
+                    placeholder="请输入协议名称"
+                    style="width: 100%"
+                  ></el-input>
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row>
               <el-col :span="12">
                 <el-form-item label="协议简称">
-                  <el-input v-model="addAgreementForm.agreementshort" placeholder="请输入协议简称" style="width: 100%;"></el-input>
+                  <el-input
+                    v-model="addAgreementForm.agreementshort"
+                    placeholder="请输入协议简称"
+                    style="width: 100%"
+                  ></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="协议类型">
-                  <el-select v-model="addAgreementForm.agreementtype" placeholder="请选择协议类型" style="width: 100%;">
-                    <el-option v-for="item in agreementtypeoptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                  <el-select
+                    v-model="addAgreementForm.agreementtype"
+                    placeholder="请选择协议类型"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      v-for="item in agreementtypeoptions"
+                      :key="item.label"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
@@ -79,33 +154,61 @@
             <el-row>
               <el-col :span="12">
                 <el-form-item label="合作公司">
-                  <el-cascader style="width: 100%;" v-model="addAgreementForm.insure1" :show-all-levels="false" :options="options" :props="optionProps"  clearable></el-cascader>
+                  <el-cascader
+                    style="width: 100%"
+                    v-model="addAgreementForm.insure1"
+                    :show-all-levels="false"
+                    :options="options"
+                    :props="optionProps"
+                    clearable
+                  ></el-cascader>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="合作保险简称">
-                  <el-input v-model="addAgreementForm.insureshort" style="width: 100%;" disabled></el-input>
+                  <el-input
+                    v-model="addAgreementForm.insureshort"
+                    style="width: 100%"
+                    disabled
+                  ></el-input>
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row>
               <el-col :span="12">
                 <el-form-item label="合作渠道">
-                  <el-select v-model="addAgreementForm.channel" placeholder="请选择投保渠道" style="width: 100%;">
-                    <el-option v-for="item in channeloptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                  <el-select
+                    v-model="addAgreementForm.channel"
+                    placeholder="请选择投保渠道"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      v-for="item in channeloptions"
+                      :key="item.label"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="对接人">
-                  <el-input v-model="addAgreementForm.account" placeholder="请添加负责人" style="width: 100%;"></el-input>
+                  <el-input
+                    v-model="addAgreementForm.account"
+                    placeholder="请添加负责人"
+                    style="width: 100%"
+                  ></el-input>
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row>
               <el-col :span="12">
                 <el-form-item label="含增值税结算">
-                  <el-select v-model="addAgreementForm.withtax" placeholder="请选择是否含增值税结算" style="width: 100%;">
+                  <el-select
+                    v-model="addAgreementForm.withtax"
+                    placeholder="请选择是否含增值税结算"
+                    style="width: 100%"
+                  >
                     <el-option label="是" value="是"></el-option>
                     <el-option label="否" value="否"></el-option>
                   </el-select>
@@ -113,8 +216,17 @@
               </el-col>
               <el-col :span="12">
                 <el-form-item label="保单日期类型">
-                  <el-select v-model="addAgreementForm.matchtype" placeholder="请选择保单日期类型" style="width: 100%;">
-                    <el-option v-for="item in matchtypeoptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                  <el-select
+                    v-model="addAgreementForm.matchtype"
+                    placeholder="请选择保单日期类型"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      v-for="item in matchtypeoptions"
+                      :key="item.label"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
@@ -122,15 +234,27 @@
             <el-row>
               <el-col :span="12">
                 <el-form-item label="协议生效日期">
-                  <el-date-picker style="width: 100%;" v-model="addAgreementForm.startdate" type="date" placeholder="选择协议生效日期"
-                    format="yyyy-MM-dd" value-format="yyyy-MM-dd">
+                  <el-date-picker
+                    style="width: 100%"
+                    v-model="addAgreementForm.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="协议失效日期">
-                  <el-date-picker style="width: 100%;" v-model="addAgreementForm.enddate" type="date" placeholder="选择失效日期"
-                    format="yyyy-MM-dd" value-format="yyyy-MM-dd">
+                  <el-date-picker
+                    style="width: 100%"
+                    v-model="addAgreementForm.enddate"
+                    type="date"
+                    placeholder="选择失效日期"
+                    format="yyyy-MM-dd"
+                    value-format="yyyy-MM-dd"
+                  >
                   </el-date-picker>
                 </el-form-item>
               </el-col>
@@ -138,34 +262,71 @@
             <el-row>
               <el-col :span="12">
                 <el-form-item label="佣金发放方式">
-                  <el-select v-model="addAgreementForm.moneytype" placeholder="请选择佣金发放方式" style="width: 100%;">
-                    <el-option v-for="item in moneytypeoptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                  <el-select
+                    v-model="addAgreementForm.moneytype"
+                    placeholder="请选择佣金发放方式"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      v-for="item in moneytypeoptions"
+                      :key="item.label"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="结算周期">
-                  <el-select v-model="addAgreementForm.moneytime" placeholder="请选择结算周期" style="width: 100%;">
-                    <el-option :label="'T+'+item"  :value="item" v-for="item of 60" :key="item"></el-option>
+                  <el-select
+                    v-model="addAgreementForm.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-row>
           </el-form>
         </el-tab-pane>
-        <el-tab-pane label="承保规则"  name="second">
-          <el-form disabled size="mini" :model="rulesForm" ref="rulesForm" label-width="120px">
+        <el-tab-pane label="承保规则" name="second">
+          <el-form
+            disabled
+            size="mini"
+            :model="rulesForm"
+            ref="rulesForm"
+            label-width="120px"
+          >
             <el-row>
               <el-col :span="12">
-                <el-form-item label="费率类型" >
-                  <el-select v-model="rulesForm.feetype" placeholder="请选择费率类型" style="width: 100%;">
-                    <el-option v-for="item in feetypeoptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                <el-form-item label="费率类型">
+                  <el-select
+                    v-model="rulesForm.feetype"
+                    placeholder="请选择费率类型"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      v-for="item in feetypeoptions"
+                      :key="item.label"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item label="所属性质" >
-                  <el-select v-model="rulesForm.feetype" placeholder="请选择所属性质" style="width: 100%;">
+                <el-form-item label="所属性质">
+                  <el-select
+                    v-model="rulesForm.feetype"
+                    placeholder="请选择所属性质"
+                    style="width: 100%"
+                  >
                     <el-option label="个人" value="个人"></el-option>
                     <el-option label="企业" value="企业"></el-option>
                     <el-option label="机关" value="机关"></el-option>
@@ -176,644 +337,836 @@
             <el-row>
               <el-col :span="12">
                 <el-form-item label="使用性质">
-                  <el-select v-model="rulesForm.canusenature" placeholder="请选择使用性质" style="width: 100%;">
-                    <el-option v-for="item in canusenatureoptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                  <el-select
+                    v-model="rulesForm.canusenature"
+                    placeholder="请选择使用性质"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      v-for="item in canusenatureoptions"
+                      :key="item.label"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="车辆种类">
-                  <el-select v-model="rulesForm.cancarkind" placeholder="请选择车辆种类" style="width: 100%;">
-                    <el-option v-for="item in cancarkindoptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                  <el-select
+                    v-model="rulesForm.cancarkind"
+                    placeholder="请选择车辆种类"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      v-for="item in cancarkindoptions"
+                      :key="item.label"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row>
-              <el-col :span="24" v-if="carareaoptions.length>0">
+              <el-col :span="24" v-if="carareaoptions.length > 0">
                 <el-form-item label="可承保地区" prop="cancity">
-                  <el-select style="width: 100%;" v-model="rulesForm.cancity" multiple clearable placeholder="请选择可承保地区">
-                    <el-option v-for="item in carareaoptions" :key="item.code" :label="item.name" :value="item.code"></el-option>
+                  <el-select
+                    style="width: 100%"
+                    v-model="rulesForm.cancity"
+                    multiple
+                    clearable
+                    placeholder="请选择可承保地区"
+                  >
+                    <el-option
+                      v-for="item in carareaoptions"
+                      :key="item.code"
+                      :label="item.name"
+                      :value="item.code"
+                    ></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
             </el-row>
           </el-form>
         </el-tab-pane>
-        <el-tab-pane :key="item.productid" v-for="(item, index) in productTabs" :label="item.product" :name="item.productid" >
-            <el-form size="mini" :model="item"  ref="productRef" label-width="120px">
-              <el-row>
-                <el-col :span="12">
-                  <el-form-item label="产品佣金比例">
-                    <el-input disabled v-model="item.productrate" placeholder="请输入产品佣金比例" style="width: 100%;"></el-input>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                  <el-form-item label="费用形式">
-                    <el-select disabled v-model="item.feestyle" placeholder="请选择费用形式" style="width: 100%;">
-                      <el-option label="百分比" value="百分比"></el-option>
-                      <el-option label="差价" value="差价"></el-option>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-
+        <el-tab-pane
+          :key="item.productid"
+          v-for="(item, index) in productTabs"
+          :label="item.product"
+          :name="item.productid"
+        >
+          <el-form
+            size="mini"
+            :model="item"
+            ref="productRef"
+            label-width="120px"
+          >
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="产品佣金比例">
+                  <el-input
+                    disabled
+                    v-model="item.productrate"
+                    placeholder="请输入产品佣金比例"
+                    style="width: 100%"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="费用形式">
+                  <el-select
+                    disabled
+                    v-model="item.feestyle"
+                    placeholder="请选择费用形式"
+                    style="width: 100%"
+                  >
+                    <el-option label="百分比" value="百分比"></el-option>
+                    <el-option label="差价" value="差价"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
 
-            <el-row style="border-top: 1px solid #eee;margin-top: 0px;padding: 10px 0px;">
-              <el-row style="margin-bottom: 10px;">
-                <label style="margin-right: 15px;font-size: 16px;">管理费用设置</label>
+            <el-row
+              style="
+                border-top: 1px solid #eee;
+                margin-top: 0px;
+                padding: 10px 0px;
+              "
+            >
+              <el-row style="margin-bottom: 10px">
+                <label style="margin-right: 15px; font-size: 16px"
+                  >管理费用设置</label
+                >
               </el-row>
-              <el-row style="margin: 10px 0px;background-color: #E4E7ED;padding: 8px 0;">
-                <el-col :span="8" class="u-f-ajc">佣金入口：{{item.productrate}}</el-col>
-                <el-col :span="8" class="u-f-ajc">公司预留佣金：{{item.keeprate}}</el-col>
-                <el-col :span="8" class="u-f-ajc">佣金出口：{{item.feerate}}</el-col>
+              <el-row
+                style="
+                  margin: 10px 0px;
+                  background-color: #e4e7ed;
+                  padding: 8px 0;
+                "
+              >
+                <el-col :span="8" class="u-f-ajc"
+                  >佣金入口：{{ item.productrate }}</el-col
+                >
+                <el-col :span="8" class="u-f-ajc"
+                  >公司预留佣金：{{ item.keeprate }}</el-col
+                >
+                <el-col :span="8" class="u-f-ajc"
+                  >佣金出口：{{ item.feerate }}</el-col
+                >
               </el-row>
-              <el-row >
-                <el-row style="margin: 5px 0px;" type="flex" justify="center">
+              <el-row>
+                <el-row style="margin: 5px 0px" type="flex" justify="center">
                   <el-col :span="4">机构等级</el-col>
                   <el-col :span="8">管理费用</el-col>
                   <el-col :span="8">追加费用</el-col>
                 </el-row>
-                <el-row style="margin: 5px 0px;" type="flex" justify="center" v-for="prodfeesItem in item.prodfees" :key="prodfeesItem.comlevel">
+                <el-row
+                  style="margin: 5px 0px"
+                  type="flex"
+                  justify="center"
+                  v-for="prodfeesItem in item.prodfees"
+                  :key="prodfeesItem.comlevel"
+                >
                   <el-col :span="4">
-                    <label>{{prodfeesItem.comlevel}}</label>
+                    <label>{{ prodfeesItem.comlevel }}</label>
                   </el-col>
                   <el-col :span="8">
-                    <el-input disabled size="mini" style="width:60%" type="number" @change="changeProdFee(index)" v-model="prodfeesItem.keeprate" ></el-input>
+                    <el-input
+                      disabled
+                      size="mini"
+                      style="width: 60%"
+                      type="number"
+                      @change="changeProdFee(index)"
+                      v-model="prodfeesItem.keeprate"
+                    ></el-input>
                   </el-col>
                   <el-col :span="8">
-                    <el-input disabled size="mini" type="number" style="width:60%" @change="changeProdFee(index)" v-model="prodfeesItem.addrate"></el-input>
+                    <el-input
+                      disabled
+                      size="mini"
+                      type="number"
+                      style="width: 60%"
+                      @change="changeProdFee(index)"
+                      v-model="prodfeesItem.addrate"
+                    ></el-input>
                   </el-col>
                 </el-row>
               </el-row>
             </el-row>
 
-            <el-row style="border-top: 1px solid #eee;margin-top: 20px;padding: 10px 0px;">
-              <el-row style="margin-bottom: 10px;">
-                <label style="margin-right: 15px;font-size: 16px;">管理费用授权</label>
+            <el-row
+              style="
+                border-top: 1px solid #eee;
+                margin-top: 20px;
+                padding: 10px 0px;
+              "
+            >
+              <el-row style="margin-bottom: 10px">
+                <label style="margin-right: 15px; font-size: 16px"
+                  >管理费用授权</label
+                >
               </el-row>
               <el-row>
-                <el-tree :ref="item.id" :data="companyListTree" :props="companyProps" show-checkbox  node-key="id" :accordion="true" :default-checked-keys="item.authcomcode" ></el-tree>
+                <el-tree
+                  :ref="item.id"
+                  :data="companyListTree"
+                  :props="companyProps"
+                  show-checkbox
+                  node-key="id"
+                  :accordion="true"
+                  :default-checked-keys="item.authcomcode"
+                ></el-tree>
               </el-row>
             </el-row>
           </el-form>
-          </el-tab-pane>
+        </el-tab-pane>
       </el-tabs>
       <!-- 底部区域 -->
       <span slot="footer" class="dialog-footer">
         <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
-        <el-button size="mini" type="primary" @click="submitForm">提交</el-button>
+        <el-button size="mini" type="primary" @click="submitForm"
+          >提交</el-button
+        >
       </span>
     </el-dialog>
-	</div>
+  </div>
 </template>
 <script>
-  import Cookies from "js-cookie"
-	import tree from "@/components/ztree.vue";
-	import KtCommonTable from "@/views/Core/KtCommonTable.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
-		},
-		data() {
-			return {
-        peopleid:"",
-        peopledeptid:"",
-
-        // 授权公司列表Start
-        companyList:[],
-        companyProps: {
-          label: 'name',
-          children: 'children'
-        },
-        companyDefKeys:[],// 默认选中的节点id值
-        // 授权公司列表End
+import Cookies from "js-cookie";
+import tree from "@/components/ztree.vue";
+import KtCommonTable from "@/views/Core/KtCommonTable.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,
+  },
+  data() {
+    return {
+      peopleid: "",
+      peopledeptid: "",
 
+      // 授权公司列表Start
+      companyList: [],
+      companyProps: {
+        label: "name",
+        children: "children",
+      },
+      companyDefKeys: [], // 默认选中的节点id值
+      // 授权公司列表End
 
-        /**Split 开始 */
-        leftSplitWidth: 20,
-        rightSplitWidth: 80,
-        /**Split 结束 */
-
-        //----ztree begin---------
-        ztreeObj: null,
-        ztreeSetting: {
-          check: {
-            enable: false
-          },
-          data: {
-            simpleData: {
-              enable: true,
-              pIdKey: "parentId"
-            }
-          },
-          view: {
-            showIcon: false
-          }
-        },
-        ztreeNodes: [],
-        currentTreeNode: null,
-        //----ztree end---------
+      /**Split 开始 */
+      leftSplitWidth: 20,
+      rightSplitWidth: 80,
+      /**Split 结束 */
 
-        // 右侧列表查询数据Start
-        queryForm:{
-          "status":"1"
+      //----ztree begin---------
+      ztreeObj: null,
+      ztreeSetting: {
+        check: {
+          enable: false,
         },
-        containsSubChecked:true,
-        pageResult: {},
-        pageRequest: {  //查询的默认条件
-          pageNum: 1,
-          pageSize: 20,
-          columnFilters: {
-            "inscode": {
-              "name": "inscode",
-              "value": ""
-            },
-            "startdate": {
-              "name": "startdate",
-              "value": ""
-            },
-            "enddate": {
-              "name": "enddate",
-              "value": ""
-            },
-            "status": {
-              "name": "status",
-              "value": "1"
-            }
-          }
-        },
-        columns:[ //数据列
-          {prop: "id",label: "编号",minWidth: 180},
-          {prop: "agreementcode",label: "协议代码",minWidth: 130},
-          {prop: "agreementname",label: "协议名称",minWidth: 200},
-          {prop: "agreementtype",label: "协议类型",minWidth: 160,formatter: this.agreementtypeFormatter},
-          {prop: "startdate",label: "协议生效日期",minWidth: 130},
-          {prop: "enddate",label: "协议失效日期",minWidth: 130},
-          {prop: "matchtype",label: "匹配日期类型",minWidth: 130,formatter: this.matchtypeFormatter},
-          {prop: "moneytime",label: "结算周期",minWidth: 100,formatter: this.moneytimeFormatter},
-          {prop: "updatetime",label: "修改时间",minWidth: 150,formatter: this.updatetimeFormatter},
-          {prop: "updateby",label: "修改人",minWidth: 120},
-        ],
-        // 右侧列表查询数据End
-
-        optionProps: {  //公司下拉列表配置
-          checkStrictly: true,
-          value: "id",
-          label: "name",
-          children: "children"
+        data: {
+          simpleData: {
+            enable: true,
+            pIdKey: "parentId",
+          },
         },
-        options:[],  //保险公司下拉列表
-
-				activeTabs:'first',
-        operType: "ADD", //'ADD','EDIT'
-        dialogTitle: "设置协议费用",
-        dialogVisible: false, //控制对话框显示
-
-        addAgreementForm: { //新增协议的表单数据
-          id: "", //主键（用来标识是新增还是修改）
-          checkid:"",
-          agreementcode: "", //协议代码
-          agreementname: "", //协议名称
-          agreementshort: "", //协议简称
-          agreementtype: "", //协议类型
-          insure1: "", //保险公司
-          insureshort: "", //合作保险简称
-          isvalid: "", //是否上线
-          channel: "", //投保渠道
-          withtax: "", //含增值税结算
-          startdate: "", //协议生效日期
-          enddate: "", //协议失效日期
-          matchtype: "", //保单匹配协议日期类型
-          moneytype: "", //佣金发放方式
-          cmpprice: "", //支持比价
-          moneytime: "", //结算周期
-          account:"",
-          password:"",
-          agreestatus: "1", //协议状态（1表示审核中）
-          comcode: "", //所属机构
-          agreementProds: [], //协议产品
-          remark:"" //备注
-        },
-
-
-        //------------协议下拉框数据   begin-----------------
-        agreementtypeoptions: [], //协议类型
-        channeloptions: [], //合作渠道
-        matchtypeoptions: [], //保单匹配协议日期类型
-        moneytypeoptions: [], //佣金发放方式
-        feetypeoptions: [], //费率类型
-        cancarkindoptions:[],//可承保车辆种类
-        canusenatureoptions:[],//可承保使用性质
-        carareaoptions:[],//可承保地区
-        //------------协议下拉框数据   end-----------------
-
-        statusalloptions:[
-          {value:'0',label:"待审核"},
-          {value:'1',label:"审核通过"},
-          {value:'2',label:"退回修改"},
-        ],
-
-        //承保规则表单
-        rulesForm:{
-          feetype: "", //费率类型
-          cancity: "", //可承保市
-          cancarkind: "", //车辆种类
-          canusenature: "", //使用性质
+        view: {
+          showIcon: false,
         },
+      },
+      ztreeNodes: [],
+      currentTreeNode: null,
+      //----ztree end---------
 
-        productTabs:[],
-
-
-        // 协议产品费用
-        prodfees:[
-          {
-            agreeprodid: "",
-            comlevel: "一级",
-            addrate: 0,//追加费用比例
-            agreementcode: "",
-            feestatus: "",
-            id: "",
-            checkid:"",
-            keeprate: 0,//管理费用比例
-            producname: "",
+      // 右侧列表查询数据Start
+      queryForm: {
+        status: "1",
+      },
+      containsSubChecked: true,
+      pageResult: {},
+      pageRequest: {
+        //查询的默认条件
+        pageNum: 1,
+        pageSize: 20,
+        columnFilters: {
+          inscode: {
+            name: "inscode",
+            value: "",
           },
-          {
-            agreeprodid: "",
-            comlevel: "二级",
-            addrate: 0,//追加费用比例
-            agreementcode: "",
-            feestatus: "",
-            id: "",
-            checkid:"",
-            keeprate: 0,//管理费用比例
-            producname: "",
+          startdate: {
+            name: "startdate",
+            value: "",
           },
-          {
-            agreeprodid: "",
-            comlevel: "三级",
-            addrate: 0,//追加费用比例
-            agreementcode: "",
-            feestatus: "",
-            id: "",
-            checkid:"",
-            keeprate: 0,//管理费用比例
-            producname: "",
+          enddate: {
+            name: "enddate",
+            value: "",
           },
-          {
-            agreeprodid: "",
-            comlevel: "四级",
-            addrate: 0,//追加费用比例
-            agreementcode: "",
-            feestatus: "",
-            id: "",
-            checkid:"",
-            keeprate: 0,//管理费用比例
-            producname: "",
+          status: {
+            name: "status",
+            value: "1",
           },
-          {
-            agreeprodid: "",
-            comlevel: "五级",
-            addrate: 0,//追加费用比例
-            agreementcode: "",
-            feestatus: "",
-            id: "",
-            checkid:"",
-            keeprate: 0,//管理费用比例
-            producname: '',
-          }
-        ]
-
-			};
-		},
-    watch:{
-      containsSubChecked(val){
-        if(val){
-          this.pageRequest.columnFilters.inscode.value = '';
-          this.findPage();
-        }else{
-          this.pageRequest.columnFilters.inscode.value = this.currentTreeNode.id;
-          this.findPage();
-        }
-      }
-    },
-		created() {
-        this.peopleid = Cookies.get('user');
-        if(this.peopleid!='admin'){
-          this.peopledeptid = Cookies.get('user').split('D')[0];
-        }else{
-          this.peopledeptid = '9';
-        }
+        },
+      },
+      columns: [
+        //数据列
+        { prop: "id", label: "编号", minWidth: 180 },
+        { prop: "agreementcode", label: "协议代码", minWidth: 130 },
+        { prop: "agreementname", label: "协议名称", minWidth: 200 },
+        {
+          prop: "agreementtype",
+          label: "协议类型",
+          minWidth: 160,
+          formatter: this.agreementtypeFormatter,
+        },
+        { prop: "startdate", label: "协议生效日期", minWidth: 130 },
+        { prop: "enddate", label: "协议失效日期", minWidth: 130 },
+        {
+          prop: "matchtype",
+          label: "匹配日期类型",
+          minWidth: 130,
+          formatter: this.matchtypeFormatter,
+        },
+        {
+          prop: "moneytime",
+          label: "结算周期",
+          minWidth: 100,
+          formatter: this.moneytimeFormatter,
+        },
+        {
+          prop: "updatetime",
+          label: "修改时间",
+          minWidth: 150,
+          formatter: this.updatetimeFormatter,
+        },
+        { prop: "updateby", label: "修改人", minWidth: 120 },
+      ],
+      // 右侧列表查询数据End
 
-        //获取所有下拉框数据
-        this.getDictItems("agreementtype");
-        this.getDictItems("channel");
-        this.getDictItems("matchtype");
-        this.getDictItems("moneytype");
-        this.getDictItems("feetype");
-        this.getDictItems("cancarkind");
-        this.getDictItems("canusenature");
-		},
-    computed: {
-      // 机构列表转属性数据
-      companyListTree(){
-        console.log(this.companyList)
-        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; //返回第一层
-          }
-        });
-      }
-    },
-		mounted() {
-      this.findLeftTreeData();
-      this.getAllCompany();
-      //用像素初始化左边的split的宽度
-      this.changeTreeWidth(200);// 初始化树的宽度
-
-		},
-		methods: {
-
-      //获取所有机构列表Start
-      getAllCompany(){
-        this.companyList = [];
-        console.log(this.peopledeptid)
-         this.$api.dept.findLeftDeptTree(this.peopledeptid).then(res => {
-           console.log(res.data)
-          for(let i=0;i<res.data.length;i++){
-            if((res.data[i].id.indexOf('D') < 0) ||((res.data[i].id.indexOf('D') > 0) && (res.data[i].id.indexOf('M') > 0) )){
-              this.companyList.push(res.data[i]);
-            }
-          }
-        });
+      optionProps: {
+        //公司下拉列表配置
+        checkStrictly: true,
+        value: "id",
+        label: "name",
+        children: "children",
       },
-      //获取所有机构列表End
+      options: [], //保险公司下拉列表
 
-      /**Split 开始 */
-      changeTreeWidth(widthVal){
-        // 初始化树的宽度
-        this.leftSplitWidth = Math.ceil(widthVal/this.$refs.elMain.$el.clientWidth*100);
-        this.rightSplitWidth = 100-(this.leftSplitWidth)
+      activeTabs: "first",
+      operType: "ADD", //'ADD','EDIT'
+      dialogTitle: "设置协议费用",
+      dialogVisible: false, //控制对话框显示
+
+      addAgreementForm: {
+        //新增协议的表单数据
+        id: "", //主键（用来标识是新增还是修改）
+        checkid: "",
+        agreementcode: "", //协议代码
+        agreementname: "", //协议名称
+        agreementshort: "", //协议简称
+        agreementtype: "", //协议类型
+        insure1: "", //保险公司
+        insureshort: "", //合作保险简称
+        isvalid: "", //是否上线
+        channel: "", //投保渠道
+        withtax: "", //含增值税结算
+        startdate: "", //协议生效日期
+        enddate: "", //协议失效日期
+        matchtype: "", //保单匹配协议日期类型
+        moneytype: "", //佣金发放方式
+        cmpprice: "", //支持比价
+        moneytime: "", //结算周期
+        account: "",
+        password: "",
+        agreestatus: "1", //协议状态（1表示审核中）
+        comcode: "", //所属机构
+        agreementProds: [], //协议产品
+        remark: "", //备注
       },
-      /**Split 结束 */
 
-      //--tree begin-------
-      // 获取树数据
-      findLeftTreeData: function() {
-        this.$api.dept.findLeftDeptTree(this.peopledeptid).then(res => {
-          this.ztreeNodes = res.data;
-        });
+      //------------协议下拉框数据   begin-----------------
+      agreementtypeoptions: [], //协议类型
+      channeloptions: [], //合作渠道
+      matchtypeoptions: [], //保单匹配协议日期类型
+      moneytypeoptions: [], //佣金发放方式
+      feetypeoptions: [], //费率类型
+      cancarkindoptions: [], //可承保车辆种类
+      canusenatureoptions: [], //可承保使用性质
+      carareaoptions: [], //可承保地区
+      //------------协议下拉框数据   end-----------------
+
+      statusalloptions: [
+        { value: "0", label: "待审核" },
+        { value: "1", label: "审核通过" },
+        { value: "2", label: "退回修改" },
+      ],
+
+      //承保规则表单
+      rulesForm: {
+        feetype: "", //费率类型
+        cancity: "", //可承保市
+        cancarkind: "", //车辆种类
+        canusenature: "", //使用性质
       },
-      onZTreeClick: function(evt, treeId, treeNode) {
-        // 点击事件
-        this.containsSubChecked=false;
-        this.currentTreeNode = treeNode;
+
+      productTabs: [],
+
+      // 协议产品费用
+      prodfees: [
+        {
+          agreeprodid: "",
+          comlevel: "一级",
+          addrate: 0, //追加费用比例
+          agreementcode: "",
+          feestatus: "",
+          id: "",
+          checkid: "",
+          keeprate: 0, //管理费用比例
+          producname: "",
+        },
+        {
+          agreeprodid: "",
+          comlevel: "二级",
+          addrate: 0, //追加费用比例
+          agreementcode: "",
+          feestatus: "",
+          id: "",
+          checkid: "",
+          keeprate: 0, //管理费用比例
+          producname: "",
+        },
+        {
+          agreeprodid: "",
+          comlevel: "三级",
+          addrate: 0, //追加费用比例
+          agreementcode: "",
+          feestatus: "",
+          id: "",
+          checkid: "",
+          keeprate: 0, //管理费用比例
+          producname: "",
+        },
+        {
+          agreeprodid: "",
+          comlevel: "四级",
+          addrate: 0, //追加费用比例
+          agreementcode: "",
+          feestatus: "",
+          id: "",
+          checkid: "",
+          keeprate: 0, //管理费用比例
+          producname: "",
+        },
+        {
+          agreeprodid: "",
+          comlevel: "五级",
+          addrate: 0, //追加费用比例
+          agreementcode: "",
+          feestatus: "",
+          id: "",
+          checkid: "",
+          keeprate: 0, //管理费用比例
+          producname: "",
+        },
+      ],
+    };
+  },
+  watch: {
+    containsSubChecked(val) {
+      console.log(111);
+      if (val) {
+        console.log(this.pageRequest);
+        this.pageRequest.columnFilters.inscode.value = "";
+        this.findPage();
+      } else {
         this.pageRequest.columnFilters.inscode.value = this.currentTreeNode.id;
         this.findPage();
-      },
-      onZTreeCreated: function(ztreeObj) {
-        this.ztreeObj = ztreeObj;
-        // onCreated 中操作ztreeObj对象展开第一个节点
-        ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
-        this.currentTreeNode=ztreeObj.getNodes()[0];
+      }
+    },
+  },
+  created() {
+    this.peopleid = Cookies.get("user");
+    if (this.peopleid != "admin") {
+      this.peopledeptid = Cookies.get("user").split("D")[0];
+    } else {
+      this.peopledeptid = "9";
+    }
 
-        this.options=ztreeObj.getNodes();
-      },
-      //-- tree end-------
-
-      //--数据字典 begin --
-      getDictItems: function(typeName) {
-        let that = this;
-        that.$api.dict.findByLableName(typeName)
-          .then(function(res) {
-            that[typeName + "options"] = res.data; // 把获取到的数据赋给this.data
-          })
-          .catch(function(error) {
-            that[typeName + "options"] = [];
-          });
-      },
-      //--数据字典 end --
-
-      //通过查询条件查询分页数据Start
-      queryEsmInfo(){
-        if(this.queryForm.date != null ){
-          var startdate =formatWithSeperator(this.queryForm.date[0],'-',':').split(' ')[0];
-          var enddate = formatWithSeperator(this.queryForm.date[1],'-',':').split(' ')[0];
-          this.pageRequest.columnFilters.startdate.value = startdate;
-          this.pageRequest.columnFilters.enddate.value = enddate;
-        }else{
-          this.pageRequest.columnFilters.startdate.value = '';
-          this.pageRequest.columnFilters.enddate.value = '';
+    //获取所有下拉框数据
+    this.getDictItems("agreementtype");
+    this.getDictItems("channel");
+    this.getDictItems("matchtype");
+    this.getDictItems("moneytype");
+    this.getDictItems("feetype");
+    this.getDictItems("cancarkind");
+    this.getDictItems("canusenature");
+  },
+  computed: {
+    // 机构列表转属性数据
+    companyListTree() {
+      console.log(this.companyList);
+      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; //返回第一层
         }
-        this.pageRequest.pageNum = 1;
-        this.findPage();
-      },
-      //通过查询条件查询分页数据End
+      });
+    },
+  },
+  mounted() {
+    this.findLeftTreeData();
+    this.getAllCompany();
+    //用像素初始化左边的split的宽度
+    this.changeTreeWidth(200); // 初始化树的宽度
+  },
+  methods: {
+    //获取所有机构列表Start
+    getAllCompany() {
+      this.companyList = [];
+      console.log(this.peopledeptid);
+      this.$api.dept.findLeftDeptTree(this.peopledeptid).then((res) => {
+        console.log(res.data);
+        for (let i = 0; i < res.data.length; i++) {
+          if (
+            res.data[i].id.indexOf("D") < 0 ||
+            (res.data[i].id.indexOf("D") > 0 && res.data[i].id.indexOf("M") > 0)
+          ) {
+            this.companyList.push(res.data[i]);
+          }
+        }
+      });
+    },
+    //获取所有机构列表End
 
-      // 右侧列表的方法Start
-      findPage(data) {
-        // 获取分页数据
-       let that = this;
-       if(data && data.pageRequest){
-         this.pageRequest.pageNum = data.pageRequest.pageNum;
-         this.pageRequest.pageSize = data.pageRequest.pageSize;
-       }
-       that.$api.esmagreement.findPage(that.pageRequest).then(res => {
-           that.pageResult = res.data;
-         }).then(data != null ? data.callback : "");
+    /**Split 开始 */
+    changeTreeWidth(widthVal) {
+      // 初始化树的宽度
+      this.leftSplitWidth = Math.ceil(
+        (widthVal / this.$refs.elMain.$el.clientWidth) * 100
+      );
+      this.rightSplitWidth = 100 - this.leftSplitWidth;
+    },
+    /**Split 结束 */
 
+    //--tree begin-------
+    // 获取树数据
+    findLeftTreeData: function () {
+      this.$api.dept.findLeftDeptTree(this.peopledeptid).then((res) => {
+        this.ztreeNodes = res.data;
+      });
+    },
+    onZTreeClick: function (evt, treeId, treeNode) {
+      // 点击事件
+      this.containsSubChecked = false;
+      this.currentTreeNode = treeNode;
+      this.pageRequest.columnFilters.inscode.value = this.currentTreeNode.id;
+      this.findPage();
+    },
+    onZTreeCreated: function (ztreeObj) {
+      this.ztreeObj = ztreeObj;
+      // onCreated 中操作ztreeObj对象展开第一个节点
+      ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
+      this.currentTreeNode = ztreeObj.getNodes()[0];
 
-      },
-      // 右侧列表的方法End
+      this.options = ztreeObj.getNodes();
+    },
+    //-- tree end-------
 
-      //-- formatter begin--
-      agreementtypeFormatter(row, column) { //协议类型
-          let agreementtype = row.agreementtype;
-          return CommonUtil.getDataName({dataList: this.agreementtypeoptions, value: 'value', label: 'label', data: agreementtype})
-      },
-      matchtypeFormatter(row, column) { //匹配日期类型
-          let matchtype = row.matchtype;
-          return CommonUtil.getDataName({dataList: this.matchtypeoptions, value: 'value', label: 'label', data: matchtype})
-      },
-      moneytimeFormatter(row, column) { //结算周期
-          return 'T+'+row.moneytime;
-      },
-      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.agreestatus;
-            return CommonUtil.getDataName({dataList: this.statusalloptions, value: 'value', label: 'label', data: agreestatus})
-          }
-      },
-      updatetimeFormatter(row,column){
-        let updatetime = row.updatetime;
-        return format(updatetime);
-      },
-      //-- formatter end--
+    //--数据字典 begin --
+    getDictItems: function (typeName) {
+      let that = this;
+      that.$api.dict
+        .findByLableName(typeName)
+        .then(function (res) {
+          that[typeName + "options"] = res.data; // 把获取到的数据赋给this.data
+        })
+        .catch(function (error) {
+          that[typeName + "options"] = [];
+        });
+    },
+    //--数据字典 end --
 
-      changeProdFee(index){
-        for(let i=0;i<this.productTabs[index].prodfees.length;i++){
-          if(this.productTabs[index].prodfees[i].keeprate==""){
-            this.productTabs[index].prodfees[i].keeprate=0;
-          }
-          if(this.productTabs[index].prodfees[i].addrate==""){
-            this.productTabs[index].prodfees[i].addrate=0;
-          }
-        }
+    //通过查询条件查询分页数据Start
+    queryEsmInfo() {
+      if (this.queryForm.date != null) {
+        var startdate = formatWithSeperator(
+          this.queryForm.date[0],
+          "-",
+          ":"
+        ).split(" ")[0];
+        var enddate = formatWithSeperator(
+          this.queryForm.date[1],
+          "-",
+          ":"
+        ).split(" ")[0];
+        this.pageRequest.columnFilters.startdate.value = startdate;
+        this.pageRequest.columnFilters.enddate.value = enddate;
+      } else {
+        this.pageRequest.columnFilters.startdate.value = "";
+        this.pageRequest.columnFilters.enddate.value = "";
+      }
+      this.pageRequest.pageNum = 1;
+      this.findPage();
+    },
+    //通过查询条件查询分页数据End
+
+    // 右侧列表的方法Start
+    findPage(data) {
+      // 获取分页数据
+      let that = this;
+      if (data && data.pageRequest) {
+        this.pageRequest.pageNum = data.pageRequest.pageNum;
+        this.pageRequest.pageSize = data.pageRequest.pageSize;
+      }
+      that.$api.esmagreement
+        .findPage(that.pageRequest)
+        .then((res) => {
+          that.pageResult = res.data;
+        })
+        .then(data != null ? data.callback : "");
+    },
+    // 右侧列表的方法End
+
+    //-- formatter begin--
+    agreementtypeFormatter(row, column) {
+      //协议类型
+      let agreementtype = row.agreementtype;
+      return CommonUtil.getDataName({
+        dataList: this.agreementtypeoptions,
+        value: "value",
+        label: "label",
+        data: agreementtype,
+      });
+    },
+    matchtypeFormatter(row, column) {
+      //匹配日期类型
+      let matchtype = row.matchtype;
+      return CommonUtil.getDataName({
+        dataList: this.matchtypeoptions,
+        value: "value",
+        label: "label",
+        data: matchtype,
+      });
+    },
+    moneytimeFormatter(row, column) {
+      //结算周期
+      return "T+" + row.moneytime;
+    },
+    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.agreestatus;
+        return CommonUtil.getDataName({
+          dataList: this.statusalloptions,
+          value: "value",
+          label: "label",
+          data: agreestatus,
+        });
+      }
+    },
+    updatetimeFormatter(row, column) {
+      let updatetime = row.updatetime;
+      return format(updatetime);
+    },
+    //-- formatter end--
 
-        let mm= this.productTabs[index].productrate;
-        for(let i=0;i<this.productTabs[index].prodfees.length;i++){
-          mm = mm- this.productTabs[index].prodfees[i].keeprate-this.productTabs[index].prodfees[i].addrate;
+    changeProdFee(index) {
+      for (let i = 0; i < this.productTabs[index].prodfees.length; i++) {
+        if (this.productTabs[index].prodfees[i].keeprate == "") {
+          this.productTabs[index].prodfees[i].keeprate = 0;
         }
-        this.productTabs[index].feerate = mm; //佣金出口
-        this.productTabs[index].keeprate =this.productTabs[index].productrate - mm; //公司预留佣金
-        if(this.productTabs[index].feerate<0){
-		  this.$message({type: 'error',message: '费用分配不能超出产品佣金总额',duration:2000});
+        if (this.productTabs[index].prodfees[i].addrate == "") {
+          this.productTabs[index].prodfees[i].addrate = 0;
         }
-      },
+      }
 
-      handleClose(done) {
-        this.$confirm('确认关闭？')
-          .then(_ => {
-            done();
-          })
-          .catch(_ => {});
-      },
-      closeVisible(){
-        this.carareaoptions=[];
-        this.$refs.addAgreementRef.resetFields();
-        this.$refs.rulesForm.resetFields();
-        this.productTabs=[];
-        for (let key in this.rulesForm) {
-          this.rulesForm[key]="";
+      let mm = this.productTabs[index].productrate;
+      for (let i = 0; i < this.productTabs[index].prodfees.length; i++) {
+        mm =
+          mm -
+          this.productTabs[index].prodfees[i].keeprate -
+          this.productTabs[index].prodfees[i].addrate;
+      }
+      this.productTabs[index].feerate = mm; //佣金出口
+      this.productTabs[index].keeprate =
+        this.productTabs[index].productrate - mm; //公司预留佣金
+      if (this.productTabs[index].feerate < 0) {
+        this.$message({
+          type: "error",
+          message: "费用分配不能超出产品佣金总额",
+          duration: 2000,
+        });
+      }
+    },
+
+    handleClose(done) {
+      this.$confirm("确认关闭？")
+        .then((_) => {
+          done();
+        })
+        .catch((_) => {});
+    },
+    closeVisible() {
+      this.carareaoptions = [];
+      this.$refs.addAgreementRef.resetFields();
+      this.$refs.rulesForm.resetFields();
+      this.productTabs = [];
+      for (let key in this.rulesForm) {
+        this.rulesForm[key] = "";
+      }
+      for (let key in this.addAgreementForm) {
+        if (key == "agreementProds") {
+          this.addAgreementForm[key] = [];
+        } else if (key == "prodfees") {
+          this.addAgreementForm[key] = [];
+        } else {
+          this.addAgreementForm[key] = "";
         }
-        for (let key in this.addAgreementForm) {
-          if(key =='agreementProds'){
-            this.addAgreementForm[key] = [];
-          }else if(key =='prodfees'){
-            this.addAgreementForm[key] = [];
-          }else{
-            this.addAgreementForm[key] = "";
+      }
+    },
+
+    //编辑协议
+    handleTableEdit(data) {
+      let that = this;
+      this.activeTabs = "first";
+      this.operType = "EDIT";
+      this.dialogTitle = "费用设置";
+      this.$api.esmagreement.findById(data.row.id).then((res) => {
+        Object.assign(that.addAgreementForm, res.data);
+        for (let i = 0; i < citydata.rawCitiesData.length; i++) {
+          if (
+            citydata.rawCitiesData[i].code.substring(0, 2) ==
+            that.addAgreementForm.insure1.substring(6, 8)
+          ) {
+            that.carareaoptions = citydata.rawCitiesData[i].sub;
           }
         }
-      },
 
-      //编辑协议
-      handleTableEdit(data){
-        let that = this;
-        this.activeTabs='first';
-        this.operType='EDIT';
-        this.dialogTitle= "费用设置";
-        this.$api.esmagreement.findById(data.row.id).then(res => {
-          Object.assign(that.addAgreementForm, res.data);
-          for(let i=0;i<citydata.rawCitiesData.length;i++){
-            if(citydata.rawCitiesData[i].code.substring(0,2) == that.addAgreementForm.insure1.substring(6,8)){
-              that.carareaoptions = citydata.rawCitiesData[i].sub;
+        if (res.data.agreementProds.length > 0) {
+          that.rulesForm.feetype = res.data.agreementProds[0].feetype;
+          that.rulesForm.cancarkind = res.data.agreementProds[0].cancarkind;
+          that.rulesForm.canusenature = res.data.agreementProds[0].canusenature;
+          that.rulesForm.cancity =
+            res.data.agreementProds[0].cancity.split(",");
+          Object.assign(that.productTabs, res.data.agreementProds);
+          for (let m = 0; m < that.productTabs.length; m++) {
+            let prodFeeParam = [];
+            if (!!that.productTabs[m].authcomcode) {
+              that.productTabs[m].authcomcode =
+                that.productTabs[m].authcomcode.split(",");
+            } else {
+              that.productTabs[m].authcomcode = [];
             }
-          }
-
-          if(res.data.agreementProds.length>0){
-            that.rulesForm.feetype = res.data.agreementProds[0].feetype;
-            that.rulesForm.cancarkind = res.data.agreementProds[0].cancarkind;
-            that.rulesForm.canusenature = res.data.agreementProds[0].canusenature;
-            that.rulesForm.cancity = res.data.agreementProds[0].cancity.split(",");
-            Object.assign(that.productTabs,res.data.agreementProds)
-            for(let m=0;m<that.productTabs.length;m++){
-              let prodFeeParam = [];
-              if(!!that.productTabs[m].authcomcode){
-                that.productTabs[m].authcomcode = that.productTabs[m].authcomcode.split(",");
-              }else{
-                that.productTabs[m].authcomcode = [];
-              }
-              for(let n=0;n<res.data.prodfees.length;n++){
-                if(that.productTabs[m].id == res.data.prodfees[n].agreeprodid){
-                  let mm = {};
-                  Object.assign(mm,res.data.prodfees[n])
-                  // res.data.prodfees[n].feestatus='4';
-                  prodFeeParam.push(mm);
-                }
+            for (let n = 0; n < res.data.prodfees.length; n++) {
+              if (that.productTabs[m].id == res.data.prodfees[n].agreeprodid) {
+                let mm = {};
+                Object.assign(mm, res.data.prodfees[n]);
+                // res.data.prodfees[n].feestatus='4';
+                prodFeeParam.push(mm);
               }
-              this.$set(that.productTabs[m], 'prodfees', [])
-              for(let n=0;n<that.productTabs[m].prodfees.length;n++){
-                console.log()
-                this.$set(that.productTabs[m].prodfees[n], 'keeprate', '')
-                this.$set(that.productTabs[m].prodfees[n], 'addrate', '')
-              }
-              that.productTabs[m].prodfees=prodFeeParam;
             }
-            that.dialogVisible = true;
-          }else{
-			  this.$message({type: 'info',message: '该协议还未添加产品',duration:2000});
+            this.$set(that.productTabs[m], "prodfees", []);
+            for (let n = 0; n < that.productTabs[m].prodfees.length; n++) {
+              console.log();
+              this.$set(that.productTabs[m].prodfees[n], "keeprate", "");
+              this.$set(that.productTabs[m].prodfees[n], "addrate", "");
+            }
+            that.productTabs[m].prodfees = prodFeeParam;
           }
+          that.dialogVisible = true;
+        } else {
+          this.$message({
+            type: "info",
+            message: "该协议还未添加产品",
+            duration: 2000,
+          });
+        }
+      });
+    },
 
-        });
-
-      },
+    //提交
+    submitForm() {
+      this.$confirm("是否确认提交？", "提示", {})
+        .then(() => {
+          let params = {
+            agreementProds: [],
+          };
+          let agreementProds = [];
+          for (let i = 0; i < this.productTabs.length; i++) {
+            let productid = this.productTabs[i].id;
 
-      //提交
-      submitForm() {
-        this.$confirm('是否确认提交？', '提示', {}).then(() => {
-            let params ={
-              agreementProds:[]
-            }
-            let agreementProds = [];
-            for(let i=0;i<this.productTabs.length;i++){
-              let productid = this.productTabs[i].id;
-			  
-			  let keyAll = [];
-			  for(let j=0;j<this.$refs[productid][0].getCheckedKeys().length;j++){
-				 if((this.$refs[productid][0].getCheckedKeys()[j].indexOf('M')>0) &&  (this.$refs[productid][0].getCheckedKeys()[j].indexOf('D')>0) ){
-					 keyAll.push(this.$refs[productid][0].getCheckedKeys()[j]);
-				 }
-			  }
-
-              let productParam = {
-                "id":productid,
-                "authcomcode":keyAll.toString()
+            let keyAll = [];
+            for (
+              let j = 0;
+              j < this.$refs[productid][0].getCheckedKeys().length;
+              j++
+            ) {
+              if (
+                this.$refs[productid][0].getCheckedKeys()[j].indexOf("M") > 0 &&
+                this.$refs[productid][0].getCheckedKeys()[j].indexOf("D") > 0
+              ) {
+                keyAll.push(this.$refs[productid][0].getCheckedKeys()[j]);
               }
-              agreementProds.push(productParam);
             }
-            params.agreementProds = agreementProds;
-            this.$api.esmagreement.saveAgreementAuth(params).then(res => {
-              this.dialogVisible = false
-              this.findPage(null);
-			  this.$message({type: 'success',message: '已提交',duration:2000});
+
+            let productParam = {
+              id: productid,
+              authcomcode: keyAll.toString(),
+            };
+            agreementProds.push(productParam);
+          }
+          params.agreementProds = agreementProds;
+          this.$api.esmagreement.saveAgreementAuth(params).then((res) => {
+            this.dialogVisible = false;
+            this.findPage(null);
+            this.$message({
+              type: "success",
+              message: "已提交",
+              duration: 2000,
             });
-        }).catch(() => {
-			this.$message({type: 'info',message: '已取消审核',duration:2000});
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消审核",
+            duration: 2000,
+          });
         });
-
-      },
-
-		}
-	};
+    },
+  },
+};
 </script>
 
 
 <style scoped>
-  .el-divider{
-    margin: 10px 0px 15px!important;
-  }
-  .queryForm .el-row {
-    margin:0px;
-  }
-
-  .queryForm .el-form-item {
-    margin-bottom: 0px;
-  }
+.el-divider {
+  margin: 10px 0px 15px !important;
+}
+.queryForm .el-row {
+  margin: 0px;
+}
+
+.queryForm .el-form-item {
+  margin-bottom: 0px;
+}
 </style>

src/views/Core/KtCommonTable.vue

@@ -1,20 +1,112 @@
 <template>
-  <div style="position:relative;" ref="commonTable">
+  <div style="position: relative" ref="commonTable">
     <!--表格栏-->
-    <el-table id="commonTable" :data="data.content" :highlight-current-row="highlightCurrentRow" @selection-change="selectionChange" @row-click="rowClick" @current-change="handleCurrentChange" v-loading="loading" :element-loading-text="$t('action.loading')" :border="border" :stripe="stripe" :show-overflow-tooltip="showOverflowTooltip" :height="tableHeight" :size="size" :align="align" :header-cell-style="{background:'#F2F7FC',fontWeight: '900',color:'#606266'}" style="width: 100%;" :row-class-name="tableRowClassName">
-      <el-table-column type="selection" width="40" fixed v-if="(showBatchDelete || showBatchSettled ||showBatchPrint)"></el-table-column>
-      <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
+    <el-table
+      id="commonTable"
+      :data="data.content"
+      :highlight-current-row="highlightCurrentRow"
+      @selection-change="selectionChange"
+      @row-click="rowClick"
+      @current-change="handleCurrentChange"
+      v-loading="loading"
+      :element-loading-text="$t('action.loading')"
+      :border="border"
+      :stripe="stripe"
+      :show-overflow-tooltip="showOverflowTooltip"
+      :height="tableHeight"
+      :size="size"
+      :align="align"
+      :header-cell-style="{
+        background: '#F2F7FC',
+        fontWeight: '900',
+        color: '#606266',
+      }"
+      style="width: 100%"
+      :row-class-name="tableRowClassName"
+    >
+      <el-table-column
+        type="selection"
+        width="40"
+        fixed
+        v-if="showBatchDelete || showBatchSettled || showBatchPrint"
+      ></el-table-column>
+      <el-table-column
+        label="序号"
+        type="index"
+        width="50"
+        align="center"
+      ></el-table-column>
       <template v-for="column in columns">
-        <el-table-column header-align="center" align="center" :prop="column.prop" :label="column.label" :width="column.width" :min-width="column.minWidth" :fixed="column.fixed" :key="column.prop" :type="column.type" :formatter="column.formatter" :sortable="column.sortable==null?true:column.sortable" v-if="column.signIcon || column.isImg ||column.isBtn">
+        <el-table-column
+          header-align="center"
+          align="center"
+          :prop="column.prop"
+          :label="column.label"
+          :width="column.width"
+          :min-width="column.minWidth"
+          :fixed="column.fixed"
+          :key="column.prop"
+          :type="column.type"
+          :formatter="column.formatter"
+          :sortable="column.sortable == null ? true : column.sortable"
+          v-if="column.signIcon || column.isImg || column.isBtn"
+        >
           <template slot-scope="scope">
-            <el-switch :disabled="column.isDisabled" v-if="column.signIcon" v-model="scope.row[column.prop]" active-value='1' inactive-value='0' @change="signStateChanged(scope.$index, scope.row)"></el-switch>
-            <img v-if="column.isImg" :width="column.imgWidth" :height="column.imgHeight" :src="scope.row[column.prop]" />
-            <kt-button v-if="column.isBtn" icon="fa fa-edit" :label="column.btnName" :size="size" :perms="column.permsEdit" @click="handleBtnEdit(scope.$index, scope.row)" />
+            <el-switch
+              :disabled="column.isDisabled"
+              v-if="column.signIcon"
+              v-model="scope.row[column.prop]"
+              active-value="1"
+              inactive-value="0"
+              @change="signStateChanged(scope.$index, scope.row)"
+            ></el-switch>
+            <img
+              v-if="column.isImg"
+              :width="column.imgWidth"
+              :height="column.imgHeight"
+              :src="scope.row[column.prop]"
+            />
+            <kt-button
+              v-if="column.isBtn"
+              icon="fa fa-edit"
+              :label="column.btnName"
+              :size="size"
+              :perms="column.permsEdit"
+              @click="handleBtnEdit(scope.$index, scope.row)"
+            />
           </template>
         </el-table-column>
-        <el-table-column header-align="center" align="center" :prop="column.prop" :label="column.label" :width="column.width" :min-width="column.minWidth" :fixed="column.fixed" :key="column.prop" :type="column.type" :formatter="column.formatter" :sortable="column.sortable==null?true:column.sortable" v-else>
+        <el-table-column
+          header-align="center"
+          align="center"
+          :prop="column.prop"
+          :label="column.label"
+          :width="column.width"
+          :min-width="column.minWidth"
+          :fixed="column.fixed"
+          :key="column.prop"
+          :type="column.type"
+          :formatter="column.formatter"
+          :sortable="column.sortable == null ? true : column.sortable"
+          v-else
+        >
           <template v-for="columnchildren in column.children">
-            <el-table-column v-if="columnchildren" header-align="center" align="center" :prop="columnchildren.prop" :label="columnchildren.label" :width="columnchildren.width" :min-width="columnchildren.minWidth" :fixed="columnchildren.fixed" :key="columnchildren.prop" :type="columnchildren.type" :formatter="columnchildren.formatter" :sortable="columnchildren.sortable==null?true:columnchildren.sortable">
+            <el-table-column
+              v-if="columnchildren"
+              header-align="center"
+              align="center"
+              :prop="columnchildren.prop"
+              :label="columnchildren.label"
+              :width="columnchildren.width"
+              :min-width="columnchildren.minWidth"
+              :fixed="columnchildren.fixed"
+              :key="columnchildren.prop"
+              :type="columnchildren.type"
+              :formatter="columnchildren.formatter"
+              :sortable="
+                columnchildren.sortable == null ? true : columnchildren.sortable
+              "
+            >
             </el-table-column>
           </template>
         </el-table-column>
@@ -24,24 +116,111 @@
         :fixed="column.fixed" :key="column.prop" :type="column.type" :formatter="column.formatter"
         :sortable="column.sortable==null?true:column.sortable">
       </el-table-column> -->
-      <el-table-column :label="$t('action.operation')" :width="operationWidth" fixed="right" v-if="showOperation" header-align="center" align="center">
+      <el-table-column
+        :label="$t('action.operation')"
+        :width="operationWidth"
+        fixed="right"
+        v-if="showOperation"
+        header-align="center"
+        align="center"
+      >
         <template slot-scope="scope">
-          <kt-button style="background: #1E87ED;border: 1px solid #1E87ED;color: #FFFFFF;" v-if="editButtonName" icon="fa fa-edit" :label="editButtonName" :perms="permsEdit" :size="size" @click="handleEdit(scope.$index, scope.row)" />
-          <kt-button v-if="deleteButtonName" icon="fa fa-trash" :label="deleteButtonName" :perms="permsDelete" :size="size" type="danger" @click="handleDeleteFlag(scope.$index, scope.row)" />
-          <kt-button style="color: #FFFFFF!important;" v-if="button1Name" :label="button1Name" :perms="permsButton1" :size="size" :style="'background:'+button1Background" @click="handleButton1(scope.$index, scope.row)" />
-          <kt-button style="color: #FFFFFF;" v-if="button2Name" :label="button2Name" :perms="permsButton2" :size="size" :style="'background:'+button2Background" @click="handleButton2(scope.$index, scope.row)" />
-          <kt-button style="color: #FFFFFF;" v-if="button3Name" :label="button3Name" :perms="permsButton3" :size="size" :style="'background:'+button3Background" @click="handleButton3(scope.$index, scope.row)" />
+          <kt-button
+            style="
+              background: #1e87ed;
+              border: 1px solid #1e87ed;
+              color: #ffffff;
+            "
+            v-if="editButtonName"
+            icon="fa fa-edit"
+            :label="editButtonName"
+            :perms="permsEdit"
+            :size="size"
+            @click="handleEdit(scope.$index, scope.row)"
+          />
+          <kt-button
+            v-if="deleteButtonName"
+            icon="fa fa-trash"
+            :label="deleteButtonName"
+            :perms="permsDelete"
+            :size="size"
+            type="danger"
+            @click="handleDeleteFlag(scope.$index, scope.row)"
+          />
+          <kt-button
+            style="color: #ffffff !important"
+            v-if="button1Name"
+            :label="button1Name"
+            :perms="permsButton1"
+            :size="size"
+            :style="'background:' + button1Background"
+            @click="handleButton1(scope.$index, scope.row)"
+          />
+          <kt-button
+            style="color: #ffffff"
+            v-if="button2Name"
+            :label="button2Name"
+            :perms="permsButton2"
+            :size="size"
+            :style="'background:' + button2Background"
+            @click="handleButton2(scope.$index, scope.row)"
+          />
+          <kt-button
+            style="color: #ffffff"
+            v-if="button3Name"
+            :label="button3Name"
+            :perms="permsButton3"
+            :size="size"
+            :style="'background:' + button3Background"
+            @click="handleButton3(scope.$index, scope.row)"
+          />
         </template>
       </el-table-column>
     </el-table>
     <!--分页栏-->
     <!-- 底部分页 -->
     <div class="bottomFixed" ref="bottomFixed">
-      <kt-button :label="$t('action.batchDelete')" :perms="permsDelete" :size="size" type="danger" @click="handleBatchDelete()" :disabled="selections.length===0" style="float:left;" v-if="showBatchDelete & showOperation" />
-      <kt-button label="批量结算" :perms="permsDelete" :size="size" type="danger" @click="handleBatchSettled()" :disabled="selections.length === 0" style="float:left;" v-if="showBatchSettled" />
-      <kt-button label="导出Excel" :perms="permsDelete" :size="size" type="danger" @click="handleBatchPrint()" :disabled="selections.length===0" style="float:left;" v-if="showBatchPrint" />
+      <kt-button
+        :label="$t('action.batchDelete')"
+        :perms="permsDelete"
+        :size="size"
+        type="danger"
+        @click="handleBatchDelete()"
+        :disabled="selections.length === 0"
+        style="float: left"
+        v-if="showBatchDelete & showOperation"
+      />
+      <kt-button
+        label="批量结算"
+        :perms="permsDelete"
+        :size="size"
+        type="danger"
+        @click="handleBatchSettled()"
+        :disabled="selections.length === 0"
+        style="float: left"
+        v-if="showBatchSettled"
+      />
+      <kt-button
+        label="导出Excel"
+        :perms="permsDelete"
+        :size="size"
+        type="danger"
+        @click="handleBatchPrint()"
+        :disabled="selections.length === 0"
+        style="float: left"
+        v-if="showBatchPrint"
+      />
 
-      <el-pagination @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" @current-change="refreshPageRequest" :current-page="data.pageNum" :page-size="data.pageSize" :page-sizes="[10, 20, 50, 100,200,300,400,500]" :total="data.totalSize" style="float:left; margin-left: 20px;">
+      <el-pagination
+        @size-change="handleSizeChange"
+        layout="total, sizes, prev, pager, next, jumper"
+        @current-change="refreshPageRequest"
+        :current-page="data.pageNum"
+        :page-size="data.pageSize"
+        :page-sizes="[10, 20, 50, 100, 200, 300, 400, 500]"
+        :total="data.totalSize"
+        style="float: left; margin-left: 20px"
+      >
       </el-pagination>
     </div>
   </div>
@@ -57,7 +236,7 @@ export default {
   props: {
     operationWidth: {
       type: Number,
-      default:200,
+      default: 200,
     },
     showBatchSettled: {
       //显示批量结算
@@ -273,48 +452,48 @@ export default {
     },
     //删除单个
     handleDeleteFlag: function (index, row) {
-      var _keyName = "id";
-      if (!!this.keyName) {
-        _keyName = this.keyName;
-      }
-      let ids = row[_keyName];
-
-      this.$confirm("确认删除吗？", "提示", {
-        type: "warning",
-      })
-        .then(() => {
-          let params = [];
-          let idArray = (ids + "").split(",");
-          for (var i = 0; i < idArray.length; i++) {
-            var obj = {};
-            obj[_keyName] = idArray[i];
-            params.push(obj);
-          }
-          this.loading = true;
-          let callback = (res) => {
-            if (res.code == 200) {
-              this.$message({
-                message: "操作成功",
-                type: "success",
-              });
-              this.findPage();
-              // this.$emit('findLeftTreeData')
-            } else {
-              this.$message({
-                message: "操作失败, " + res.msg,
-                type: "error",
-              });
-            }
-          };
-          this.$emit("handleDeleteFlag", {
-            params: params,
-            callback: callback,
-          });
-          this.loading = false;
-        })
-        .catch(() => {
-          this.loading = false;
-        });
+      this.$emit("handleDeleteFlag", { index: index, row: row });
+      // var _keyName = "id";
+      // if (!!this.keyName) {
+      //   _keyName = this.keyName;
+      // }
+      // let ids = row[_keyName];
+      // this.$confirm("确认删除吗？", "提示", {
+      //   type: "warning",
+      // })
+      //   .then(() => {
+      //     let params = [];
+      //     let idArray = (ids + "").split(",");
+      //     for (var i = 0; i < idArray.length; i++) {
+      //       var obj = {};
+      //       obj[_keyName] = idArray[i];
+      //       params.push(obj);
+      //     }
+      //     this.loading = true;
+      //     let callback = (res) => {
+      //       if (res.code == 200) {
+      //         this.$message({
+      //           message: "操作成功",
+      //           type: "success",
+      //         });
+      //         this.findPage();
+      //         // this.$emit('findLeftTreeData')
+      //       } else {
+      //         this.$message({
+      //           message: "操作失败, " + res.msg,
+      //           type: "error",
+      //         });
+      //       }
+      //     };
+      //     this.$emit("handleDeleteFlag", {
+      //       params: params,
+      //       callback: callback,
+      //     });
+      //     this.loading = false;
+      //   })
+      //   .catch(() => {
+      //     this.loading = false;
+      //   });
     },
     // 批量删除
     handleBatchDelete: function () {

src/views/Esm/Esmcompany.vue

@@ -522,22 +522,8 @@ export default {
       } else {
         this.dataForm.id = "";
       }
-      // this.$refs.cascaderHandle.dropDownVisible = false;
-
-      // if (this.$refs.refHandle) {
-      //   this.$refs.refHandle.dropDownVisible = false;
-      // }
-      // this.dataForm.parentId = !!value ? value : "";
     },
-    // 右侧列表的方法End
-    // areaHandleChange(value) {
-    //   if (value != "") {
-    //     this.dataForm.id =
-    //       this.dataForm.parentId.substring(0, 6) + value[value.length - 1];
-    //   } else {
-    //     this.dataForm.id = "";
-    //   }
-    // },
+
     handleAddType() {
       // 添加保险总公司
       this.operType = "ADD1";
@@ -570,14 +556,6 @@ export default {
       this.dataForm.orderNum = row.orderNum;
       this.dataForm.cnName = row.cnName;
       this.dataForm.openQuote = 0;
-      // if (row.logo) {
-      //   this.imgList1 = [];
-      //   this.imgList1.push({ url: row.logo });
-      //   this.dataForm.logo = row.logo;
-      // } else {
-      //   this.imgList1 = [];
-      //   this.max = false;
-      // }
       if (row.openQuote == "1") {
         this.value = true;
       } else {
@@ -623,29 +601,21 @@ export default {
     },
     //删除操作
     handleTableBatchDelete(data) {
-      let userName = Cookies.get("user");
-      if (userName === "admin") {
-        if (data.children.length > 0) {
-          this.$message({
-            message: "公司(" + data.name + ")下存在分公司，请先删除分公司",
-            type: "info",
-          });
-        } else {
-          this.$api.insCompany.deleteEsmCompany(data.id).then((res) => {
-            if (res.code == 200) {
-              this.$message({
-                message: "删除成功",
-                type: "success",
-              });
-              this.findLeftTreeData();
-            } else this.$message.error("删除失败！");
-          });
-        }
-      } else {
+      if (data.children.length > 0) {
         this.$message({
-          message: "您还没有权限进行删除操作",
+          message: "公司(" + data.name + ")下存在分公司，请先删除分公司",
           type: "info",
         });
+      } else {
+        this.$api.insCompany.deleteEsmCompany(data.id).then((res) => {
+          if (res.code == 200) {
+            this.$message({
+              message: "删除成功",
+              type: "success",
+            });
+            this.findLeftTreeData();
+          } else this.$message.error("删除失败！");
+        });
       }
     },
     //提交确认
@@ -692,57 +662,7 @@ export default {
           return false;
         }
       });
-
-      // this.$refs[formName].validate((valid) => {
-      //   if (valid) {
-      //     if (this.operType == "ADD1" || this.operType == "ADD2") {
-      //       if (this.operType == "ADD1") {
-      //         if (this.dataForm.id.length != 6) {
-      //           return this.$message({
-      //             message: "保险总公司的编码为6位",
-      //             type: "info",
-      //           });
-      //         } else {
-      //           this.dataForm.id = this.dataForm.id.toUpperCase();
-      //         }
-      //       }
-      //       this.$refs.dataForm.validate((valid) => {
-      //         // console.log(this.dataForm);
-      //         // 新增保险总公司和分公司
-      //         if(this.dialogTitle=="新增保险总公司"){
-      //           //调用当前接口
-      //         this.$api.insCompany.addCompany(this.dataForm).then((res) => {
-      //              if (res.code == 200) {
-      //             this.findLeftTreeData();
-      //             this.dialogVisible = false;
-      //               this.$message({ message: "添加成功", type: "success" });
-      //             } else {
-      //               this.$message({
-      //               message: "编码重复，请重新输入",
-      //               type: "info",
-      //               });
-      //            }
-      //         });
-      //       }else if(this.dialogTitle=="新增保险分公司"){
-      //             //调用另一个接口
-      //             //这个接口可以直接新增数据,后端不必判断编码
-
-      //           }
-      //       });
-      //     } else {
-      //       this.dialogVisible = false;
-      //       //修改信息
-      //       this.$api.insCompany.editCompany(this.dataForm).then((res) => {
-      //         this.findLeftTreeData();
-      //         this.$message({ message: "编辑成功", type: "success" });
-      //       });
-      //     }
-      //   } else {
-      //     return false;
-      //   }
-      // });
     },
-
     // 关闭新增对话框
     // handleClose(done) {
     //   this.$confirm("确认关闭？", { lockScroll: false })

src/views/FeeManage/CarInsurance/FeeSetting.vue

@@ -1,29 +1,54 @@
 <template>
-	<div>
+  <div>
+    <el-main ref="elMain" style="padding: 0px">
+      <Split :gutterSize="2" style="height: calc(100vh - 120px)">
+        <!-- 左侧树Start -->
+        <SplitArea :size="leftSplitWidth" :minSize="200">
+          <el-checkbox v-model="containsSubChecked">显示全部协议</el-checkbox>
+          <el-divider></el-divider>
+          <tree
+            :setting="ztreeSetting"
+            :nodes="ztreeNodes"
+            @onClick="onZTreeClick"
+            @onCreated="onZTreeCreated"
+          />
+        </SplitArea>
+        <!-- 左侧树End -->
 
-		<el-main ref="elMain" style="padding: 0px;">
-		  <Split :gutterSize="2" style="height: calc(100vh - 120px);">
-		    <!-- 左侧树Start -->
-		    <SplitArea :size="leftSplitWidth" :minSize="200">
-		        <el-checkbox v-model="containsSubChecked">显示全部协议</el-checkbox>
-		        <el-divider></el-divider>
-		        <tree :setting="ztreeSetting" :nodes="ztreeNodes" @onClick="onZTreeClick" @onCreated="onZTreeCreated"/>
-		    </SplitArea>
-		    <!-- 左侧树End -->
-
-		    <!-- 右侧列表页面Start -->
-		    <SplitArea :size="rightSplitWidth">
-		      <!-- 工具区域Start -->
-          <el-form class="queryForm" ref="queryFormRef" :model="queryForm" label-width="80px">
-            <el-row style="margin-bottom: 15px;">
+        <!-- 右侧列表页面Start -->
+        <SplitArea :size="rightSplitWidth">
+          <!-- 工具区域Start -->
+          <el-form
+            class="queryForm"
+            ref="queryFormRef"
+            :model="queryForm"
+            label-width="80px"
+          >
+            <el-row style="margin-bottom: 15px">
               <el-col :span="8">
                 <el-form-item label="录入时间">
-                  <el-date-picker v-model="queryForm.date" style="margin-left: 20px;width:90%" size="small" type="daterange" align="left" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
+                  <el-date-picker
+                    v-model="queryForm.date"
+                    style="margin-left: 20px; width: 90%"
+                    size="small"
+                    type="daterange"
+                    align="left"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                  >
+                  </el-date-picker>
                 </el-form-item>
               </el-col>
               <el-col :span="4">
                 <el-form-item label="协议状态">
-                  <el-select size="small" v-model="queryForm.status" placeholder="请选择协议状态" clearable style="width: 100%;">
+                  <el-select
+                    size="small"
+                    v-model="queryForm.status"
+                    placeholder="请选择协议状态"
+                    clearable
+                    style="width: 100%"
+                  >
                     <el-option label="待审核" value="0"></el-option>
                     <el-option label="审核通过" value="1"></el-option>
                     <el-option label="退回修改" value="2"></el-option>
@@ -31,56 +56,113 @@
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :span="4" style="display: flex;align-items: center;justify-content: center;">
+              <el-col
+                :span="4"
+                style="
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                "
+              >
                 <el-form-item>
                   <el-button size="small" @click="queryEsmInfo">查询</el-button>
                 </el-form-item>
               </el-col>
             </el-row>
-           </el-form>
-		     <kt-common-table permsEdit="sys:user:edit"  :data="pageResult" :columns="columns" :editButtonName="(pageRequest.columnFilters.status.value == '0')?'查看':'费用设置'"   :showBatchDelete="false" @findPage="findPage" @handleEdit="handleTableEdit"  >
-		      </kt-common-table>
-		    </SplitArea>
-		   </Split>
-		</el-main>
+          </el-form>
+          <kt-common-table
+            permsEdit="sys:user:edit"
+            :data="pageResult"
+            :columns="columns"
+            :editButtonName="
+              pageRequest.columnFilters.status.value == '0'
+                ? '查看'
+                : '费用设置'
+            "
+            :showBatchDelete="false"
+            @findPage="findPage"
+            @handleEdit="handleTableEdit"
+          >
+          </kt-common-table>
+        </SplitArea>
+      </Split>
+    </el-main>
 
     <!-- 新增协议的对话框 -->
-    <el-dialog :title="dialogTitle"  v-dialogDrag :visible.sync="dialogVisible" width="840px" :before-close="handleClose" @close="closeVisible">
-
-      <el-row style="margin-bottom: 10px;" v-if="addAgreementForm.agreestatus =='3'">
-        <el-col :span="4" style="text-align: right"><label style="margin-right: 10px;">退回修改原因：</label></el-col>
-        <el-col :span="20" style="color: red;">
-          {{addAgreementForm.remark}}
+    <el-dialog
+      :title="dialogTitle"
+      v-dialogDrag
+      :visible.sync="dialogVisible"
+      width="840px"
+      :before-close="handleClose"
+      @close="closeVisible"
+    >
+      <el-row
+        style="margin-bottom: 10px"
+        v-if="addAgreementForm.agreestatus == '3'"
+      >
+        <el-col :span="4" style="text-align: right"
+          ><label style="margin-right: 10px">退回修改原因：</label></el-col
+        >
+        <el-col :span="20" style="color: red">
+          {{ addAgreementForm.remark }}
         </el-col>
       </el-row>
 
       <!-- 内容主体区域 -->
-      <el-tabs  v-model="activeTabs" type="card">
+      <el-tabs v-model="activeTabs" type="card">
         <!-- 协议基本信息 -->
         <el-tab-pane label="协议信息" name="first">
-          <el-form disabled size="mini" :model="addAgreementForm" ref="addAgreementRef" label-width="130px">
+          <el-form
+            disabled
+            size="mini"
+            :model="addAgreementForm"
+            ref="addAgreementRef"
+            label-width="130px"
+          >
             <el-row>
               <el-col :span="12">
                 <el-form-item label="协议代码">
-                  <el-input v-model="addAgreementForm.agreementcode" placeholder="请输入协议代码" style="width: 100%;"></el-input>
+                  <el-input
+                    v-model="addAgreementForm.agreementcode"
+                    placeholder="请输入协议代码"
+                    style="width: 100%"
+                  ></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item label="协议名称" >
-                  <el-input v-model="addAgreementForm.agreementname" placeholder="请输入协议名称" style="width: 100%;"></el-input>
+                <el-form-item label="协议名称">
+                  <el-input
+                    v-model="addAgreementForm.agreementname"
+                    placeholder="请输入协议名称"
+                    style="width: 100%"
+                  ></el-input>
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row>
               <el-col :span="12">
                 <el-form-item label="协议简称">
-                  <el-input v-model="addAgreementForm.agreementshort" placeholder="请输入协议简称" style="width: 100%;"></el-input>
+                  <el-input
+                    v-model="addAgreementForm.agreementshort"
+                    placeholder="请输入协议简称"
+                    style="width: 100%"
+                  ></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="协议类型">
-                  <el-select v-model="addAgreementForm.agreementtype" placeholder="请选择协议类型" style="width: 100%;">
-                    <el-option v-for="item in agreementtypeoptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                  <el-select
+                    v-model="addAgreementForm.agreementtype"
+                    placeholder="请选择协议类型"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      v-for="item in agreementtypeoptions"
+                      :key="item.label"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
@@ -88,33 +170,61 @@
             <el-row>
               <el-col :span="12">
                 <el-form-item label="合作公司">
-                  <el-cascader style="width: 100%;" v-model="addAgreementForm.insure1" :show-all-levels="false" :options="options" :props="optionProps"  clearable></el-cascader>
+                  <el-cascader
+                    style="width: 100%"
+                    v-model="addAgreementForm.insure1"
+                    :show-all-levels="false"
+                    :options="options"
+                    :props="optionProps"
+                    clearable
+                  ></el-cascader>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="合作保险简称">
-                  <el-input v-model="addAgreementForm.insureshort" style="width: 100%;" disabled></el-input>
+                  <el-input
+                    v-model="addAgreementForm.insureshort"
+                    style="width: 100%"
+                    disabled
+                  ></el-input>
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row>
               <el-col :span="12">
                 <el-form-item label="合作渠道">
-                  <el-select v-model="addAgreementForm.channel" placeholder="请选择投保渠道" style="width: 100%;">
-                    <el-option v-for="item in channeloptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                  <el-select
+                    v-model="addAgreementForm.channel"
+                    placeholder="请选择投保渠道"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      v-for="item in channeloptions"
+                      :key="item.label"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="对接人">
-                  <el-input v-model="addAgreementForm.account" placeholder="请添加负责人" style="width: 100%;"></el-input>
+                  <el-input
+                    v-model="addAgreementForm.account"
+                    placeholder="请添加负责人"
+                    style="width: 100%"
+                  ></el-input>
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row>
               <el-col :span="12">
                 <el-form-item label="含增值税结算">
-                  <el-select v-model="addAgreementForm.withtax" placeholder="请选择是否含增值税结算" style="width: 100%;">
+                  <el-select
+                    v-model="addAgreementForm.withtax"
+                    placeholder="请选择是否含增值税结算"
+                    style="width: 100%"
+                  >
                     <el-option label="是" value="是"></el-option>
                     <el-option label="否" value="否"></el-option>
                   </el-select>
@@ -122,8 +232,17 @@
               </el-col>
               <el-col :span="12">
                 <el-form-item label="保单日期类型">
-                  <el-select v-model="addAgreementForm.matchtype" placeholder="请选择保单日期类型" style="width: 100%;">
-                    <el-option v-for="item in matchtypeoptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                  <el-select
+                    v-model="addAgreementForm.matchtype"
+                    placeholder="请选择保单日期类型"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      v-for="item in matchtypeoptions"
+                      :key="item.label"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
@@ -131,15 +250,27 @@
             <el-row>
               <el-col :span="12">
                 <el-form-item label="协议生效日期">
-                  <el-date-picker style="width: 100%;" v-model="addAgreementForm.startdate" type="date" placeholder="选择协议生效日期"
-                    format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm">
+                  <el-date-picker
+                    style="width: 100%"
+                    v-model="addAgreementForm.startdate"
+                    type="date"
+                    placeholder="选择协议生效日期"
+                    format="yyyy-MM-dd HH:mm"
+                    value-format="yyyy-MM-dd HH:mm"
+                  >
                   </el-date-picker>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="协议失效日期">
-                  <el-date-picker style="width: 100%;" v-model="addAgreementForm.enddate" type="date" placeholder="选择失效日期"
-                    format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm">
+                  <el-date-picker
+                    style="width: 100%"
+                    v-model="addAgreementForm.enddate"
+                    type="date"
+                    placeholder="选择失效日期"
+                    format="yyyy-MM-dd HH:mm"
+                    value-format="yyyy-MM-dd HH:mm"
+                  >
                   </el-date-picker>
                 </el-form-item>
               </el-col>
@@ -147,34 +278,71 @@
             <el-row>
               <el-col :span="12">
                 <el-form-item label="佣金发放方式">
-                  <el-select v-model="addAgreementForm.moneytype" placeholder="请选择佣金发放方式" style="width: 100%;">
-                    <el-option v-for="item in moneytypeoptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                  <el-select
+                    v-model="addAgreementForm.moneytype"
+                    placeholder="请选择佣金发放方式"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      v-for="item in moneytypeoptions"
+                      :key="item.label"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="结算周期">
-                  <el-select v-model="addAgreementForm.moneytime" placeholder="请选择结算周期" style="width: 100%;">
-                    <el-option :label="'T+'+item"  :value="item" v-for="item of 60" :key="item"></el-option>
+                  <el-select
+                    v-model="addAgreementForm.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-row>
           </el-form>
         </el-tab-pane>
-        <el-tab-pane label="承保规则"  name="second">
-          <el-form disabled size="mini" :model="rulesForm" ref="rulesForm" label-width="120px">
+        <el-tab-pane label="承保规则" name="second">
+          <el-form
+            disabled
+            size="mini"
+            :model="rulesForm"
+            ref="rulesForm"
+            label-width="120px"
+          >
             <el-row>
               <el-col :span="12">
-                <el-form-item label="费率类型" >
-                  <el-select v-model="rulesForm.feetype" placeholder="请选择费率类型" style="width: 100%;">
-                    <el-option v-for="item in feetypeoptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                <el-form-item label="费率类型">
+                  <el-select
+                    v-model="rulesForm.feetype"
+                    placeholder="请选择费率类型"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      v-for="item in feetypeoptions"
+                      :key="item.label"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item label="所属性质" >
-                  <el-select v-model="rulesForm.feetype" placeholder="请选择所属性质" style="width: 100%;">
+                <el-form-item label="所属性质">
+                  <el-select
+                    v-model="rulesForm.feetype"
+                    placeholder="请选择所属性质"
+                    style="width: 100%"
+                  >
                     <el-option label="个人" value="个人"></el-option>
                     <el-option label="企业" value="企业"></el-option>
                     <el-option label="机关" value="机关"></el-option>
@@ -185,639 +353,805 @@
             <el-row>
               <el-col :span="12">
                 <el-form-item label="使用性质">
-                  <el-select v-model="rulesForm.canusenature" placeholder="请选择使用性质" style="width: 100%;">
-                    <el-option v-for="item in canusenatureoptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                  <el-select
+                    v-model="rulesForm.canusenature"
+                    placeholder="请选择使用性质"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      v-for="item in canusenatureoptions"
+                      :key="item.label"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="车辆种类">
-                  <el-select v-model="rulesForm.cancarkind" placeholder="请选择车辆种类" style="width: 100%;">
-                    <el-option v-for="item in cancarkindoptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                  <el-select
+                    v-model="rulesForm.cancarkind"
+                    placeholder="请选择车辆种类"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      v-for="item in cancarkindoptions"
+                      :key="item.label"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row>
-              <el-col :span="24" v-if="carareaoptions.length>0">
+              <el-col :span="24" v-if="carareaoptions.length > 0">
                 <el-form-item label="可承保地区" prop="cancity">
-                  <el-select style="width: 100%;" v-model="rulesForm.cancity" multiple clearable placeholder="请选择可承保地区">
-                    <el-option v-for="item in carareaoptions" :key="item.code" :label="item.name" :value="item.code"></el-option>
+                  <el-select
+                    style="width: 100%"
+                    v-model="rulesForm.cancity"
+                    multiple
+                    clearable
+                    placeholder="请选择可承保地区"
+                  >
+                    <el-option
+                      v-for="item in carareaoptions"
+                      :key="item.code"
+                      :label="item.name"
+                      :value="item.code"
+                    ></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
             </el-row>
           </el-form>
         </el-tab-pane>
-        <el-tab-pane :key="item.productid" v-for="(item, index) in productTabs" :label="item.product" :name="item.productid" >
-            <el-form size="mini" :model="item"  ref="productRef" label-width="120px">
-              <el-row>
-                <el-col :span="12">
-                  <el-form-item label="产品佣金比例">
-                    <el-input disabled v-model="item.productrate" placeholder="请输入产品佣金比例" style="width: 100%;"></el-input>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                  <el-form-item label="费用形式">
-                    <el-select disabled v-model="item.feestyle" placeholder="请选择费用形式" style="width: 100%;">
-                      <el-option label="百分比" value="百分比"></el-option>
-                      <el-option label="差价" value="差价"></el-option>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-
+        <el-tab-pane
+          :key="item.productid"
+          v-for="(item, index) in productTabs"
+          :label="item.product"
+          :name="item.productid"
+        >
+          <el-form
+            size="mini"
+            :model="item"
+            ref="productRef"
+            label-width="120px"
+          >
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="产品佣金比例">
+                  <el-input
+                    disabled
+                    v-model="item.productrate"
+                    placeholder="请输入产品佣金比例"
+                    style="width: 100%"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="费用形式">
+                  <el-select
+                    disabled
+                    v-model="item.feestyle"
+                    placeholder="请选择费用形式"
+                    style="width: 100%"
+                  >
+                    <el-option label="百分比" value="百分比"></el-option>
+                    <el-option label="差价" value="差价"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
 
-            <el-row style="border-top: 1px solid #eee;margin-top: 0px;padding: 10px 0px;">
-              <el-row style="margin-bottom: 10px;">
-                <label style="margin-right: 15px;font-size: 16px;">管理费用设置</label>
+            <el-row
+              style="
+                border-top: 1px solid #eee;
+                margin-top: 0px;
+                padding: 10px 0px;
+              "
+            >
+              <el-row style="margin-bottom: 10px">
+                <label style="margin-right: 15px; font-size: 16px"
+                  >管理费用设置</label
+                >
               </el-row>
-              <el-row style="margin: 10px 0px;background-color: #E4E7ED;padding: 8px 0;">
-                <el-col :span="8" class="u-f-ajc">佣金入口：{{item.productrate}}</el-col>
-                <el-col :span="8" class="u-f-ajc">公司预留佣金：{{item.keeprate}}</el-col>
-                <el-col :span="8" class="u-f-ajc">佣金出口：{{item.feerate}}</el-col>
+              <el-row
+                style="
+                  margin: 10px 0px;
+                  background-color: #e4e7ed;
+                  padding: 8px 0;
+                "
+              >
+                <el-col :span="8" class="u-f-ajc"
+                  >佣金入口：{{ item.productrate }}</el-col
+                >
+                <el-col :span="8" class="u-f-ajc"
+                  >公司预留佣金：{{ item.keeprate }}</el-col
+                >
+                <el-col :span="8" class="u-f-ajc"
+                  >佣金出口：{{ item.feerate }}</el-col
+                >
               </el-row>
-              <el-row >
-                <el-row style="margin: 5px 0px;" type="flex" justify="center">
+              <el-row>
+                <el-row style="margin: 5px 0px" type="flex" justify="center">
                   <el-col :span="4">机构等级</el-col>
                   <el-col :span="8">管理费用</el-col>
                   <el-col :span="8">追加费用</el-col>
                 </el-row>
-                <el-row style="margin: 5px 0px;" type="flex" justify="center" v-for="prodfeesItem in item.prodfees" :key="prodfeesItem.comlevel">
+                <el-row
+                  style="margin: 5px 0px"
+                  type="flex"
+                  justify="center"
+                  v-for="prodfeesItem in item.prodfees"
+                  :key="prodfeesItem.comlevel"
+                >
                   <el-col :span="4">
-                    <label>{{prodfeesItem.comlevel}}</label>
+                    <label>{{ prodfeesItem.comlevel }}</label>
                   </el-col>
                   <el-col :span="8">
-                    <el-input :disabled="pageRequest.columnFilters.status.value == '0'" size="mini" style="width:60%" type="number" @change="changeProdFee(index)" v-model="prodfeesItem.keeprate" ></el-input>
+                    <el-input
+                      :disabled="pageRequest.columnFilters.status.value == '0'"
+                      size="mini"
+                      style="width: 60%"
+                      type="number"
+                      @change="changeProdFee(index)"
+                      v-model="prodfeesItem.keeprate"
+                    ></el-input>
                   </el-col>
                   <el-col :span="8">
-                    <el-input :disabled="pageRequest.columnFilters.status.value == '0'" size="mini" type="number" style="width:60%" @change="changeProdFee(index)" v-model="prodfeesItem.addrate"></el-input>
+                    <el-input
+                      :disabled="pageRequest.columnFilters.status.value == '0'"
+                      size="mini"
+                      type="number"
+                      style="width: 60%"
+                      @change="changeProdFee(index)"
+                      v-model="prodfeesItem.addrate"
+                    ></el-input>
                   </el-col>
                 </el-row>
               </el-row>
             </el-row>
           </el-form>
-          </el-tab-pane>
+        </el-tab-pane>
       </el-tabs>
 
       <!-- 底部区域 -->
       <span slot="footer" class="dialog-footer">
         <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
-        <el-button size="mini" type="primary" @click="submitForm" v-if="feestatus!='0'" >提交</el-button>
+        <el-button
+          size="mini"
+          type="primary"
+          @click="submitForm"
+          v-if="feestatus != '0'"
+          >提交</el-button
+        >
       </span>
     </el-dialog>
-
-
-	</div>
+  </div>
 </template>
 <script>
-	import tree from "@/components/ztree.vue";
-	import KtCommonTable from "@/views/Core/KtCommonTable.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
-		},
-		data() {
-			return {
-        /**Split 开始 */
-        leftSplitWidth: 20,
-        rightSplitWidth: 80,
-        /**Split 结束 */
+import tree from "@/components/ztree.vue";
+import KtCommonTable from "@/views/Core/KtCommonTable.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,
+  },
+  data() {
+    return {
+      /**Split 开始 */
+      leftSplitWidth: 20,
+      rightSplitWidth: 80,
+      /**Split 结束 */
 
-        //----ztree begin---------
-        ztreeObj: null,
-        ztreeSetting: {
-          check: {
-            enable: false
-          },
-          data: {
-            simpleData: {
-              enable: true,
-              pIdKey: "parentId"
-            }
+      //----ztree begin---------
+      ztreeObj: null,
+      ztreeSetting: {
+        check: {
+          enable: false,
+        },
+        data: {
+          simpleData: {
+            enable: true,
+            pIdKey: "parentId",
           },
-          view: {
-            showIcon: false
-          }
         },
-        ztreeNodes: [],
-        currentTreeNode: null,
-        //----ztree end---------
+        view: {
+          showIcon: false,
+        },
+      },
+      ztreeNodes: [],
+      currentTreeNode: null,
+      //----ztree end---------
 
-        // 右侧列表查询数据Start
-        queryForm:{
-          "status":"3"
+      // 右侧列表查询数据Start
+      queryForm: {
+        status: "3",
+      },
+      containsSubChecked: true,
+      pageResult: {},
+      pageRequest: {
+        //查询的默认条件
+        pageNum: 1,
+        pageSize: 20,
+        columnFilters: {
+          inscode: {
+            name: "inscode",
+            value: "",
+          },
+          startdate: {
+            name: "startdate",
+            value: "",
+          },
+          enddate: {
+            name: "enddate",
+            value: "",
+          },
+          status: {
+            name: "status",
+            value: "3",
+          },
+          feestatus: {
+            name: "feestatus",
+            value: "",
+          },
         },
-        containsSubChecked:true,
-        pageResult: {},
-        pageRequest: {  //查询的默认条件
-          pageNum: 1,
-          pageSize: 20,
-          columnFilters: {
-            "inscode": {
-              "name": "inscode",
-              "value": ""
-            },
-            "startdate": {
-              "name": "startdate",
-              "value": ""
-            },
-            "enddate": {
-              "name": "enddate",
-              "value": ""
-            },
-            "status": {
-              "name": "status",
-              "value": "3"
-            },
-            "feestatus":{
-              "name":"feestatus",
-              "value":""
-            }
-          }
+      },
+      columns: [
+        //数据列
+        { prop: "id", label: "编号", minWidth: 180 },
+        { prop: "agreementcode", label: "协议代码", minWidth: 130 },
+        { prop: "agreementname", label: "协议名称", minWidth: 200 },
+        {
+          prop: "agreementtype",
+          label: "协议类型",
+          minWidth: 160,
+          formatter: this.agreementtypeFormatter,
         },
-        columns:[ //数据列
-          {prop: "id",label: "编号",minWidth: 180},
-          {prop: "agreementcode",label: "协议代码",minWidth: 130},
-          {prop: "agreementname",label: "协议名称",minWidth: 200},
-          {prop: "agreementtype",label: "协议类型",minWidth: 160,formatter: this.agreementtypeFormatter},
-          {prop: "startdate",label: "协议生效日期",minWidth: 130},
-          {prop: "enddate",label: "协议失效日期",minWidth: 130},
-          {prop: "matchtype",label: "匹配日期类型",minWidth: 130,formatter: this.matchtypeFormatter},
-          {prop: "moneytime",label: "结算周期",minWidth: 100,formatter: this.moneytimeFormatter},
-          {prop: "status",label: "状态",minWidth: 110,formatter: this.agreestatusFormatter },
-          {prop: "updatetime",label: "修改时间",minWidth: 150,formatter: this.updatetimeFormatter},
-          {prop: "updateby",label: "修改人",minWidth: 120},
-        ],
-        feestatus:0,
-        // 右侧列表查询数据End
-
-        optionProps: {  //公司下拉列表配置
-          checkStrictly: true,
-          value: "id",
-          label: "name",
-          children: "children"
+        { prop: "startdate", label: "协议生效日期", minWidth: 130 },
+        { prop: "enddate", label: "协议失效日期", minWidth: 130 },
+        {
+          prop: "matchtype",
+          label: "匹配日期类型",
+          minWidth: 130,
+          formatter: this.matchtypeFormatter,
         },
-        options:[],  //保险公司下拉列表
-
-				activeTabs:'first',
-        operType: "ADD", //'ADD','EDIT'
-        dialogTitle: "设置协议费用",
-        dialogVisible: false, //控制对话框显示
-
-        addAgreementForm: { //新增协议的表单数据
-          id: "", //主键（用来标识是新增还是修改）
-          checkid:"",
-          agreementcode: "", //协议代码
-          agreementname: "", //协议名称
-          agreementshort: "", //协议简称
-          agreementtype: "", //协议类型
-          insure1: "", //保险公司
-          insureshort: "", //合作保险简称
-          isvalid: "", //是否上线
-          channel: "", //投保渠道
-          withtax: "", //含增值税结算
-          startdate: "", //协议生效日期
-          enddate: "", //协议失效日期
-          matchtype: "", //保单匹配协议日期类型
-          moneytype: "", //佣金发放方式
-          cmpprice: "", //支持比价
-          moneytime: "", //结算周期
-          account:"",
-          password:"",
-          agreestatus: "1", //协议状态（1表示审核中）
-          comcode: "", //所属机构
-          agreementProds: [], //协议产品
-          remark:"" //备注
+        {
+          prop: "moneytime",
+          label: "结算周期",
+          minWidth: 100,
+          formatter: this.moneytimeFormatter,
+        },
+        {
+          prop: "status",
+          label: "状态",
+          minWidth: 110,
+          formatter: this.agreestatusFormatter,
+        },
+        {
+          prop: "updatetime",
+          label: "修改时间",
+          minWidth: 150,
+          formatter: this.updatetimeFormatter,
         },
+        { prop: "updateby", label: "修改人", minWidth: 120 },
+      ],
+      feestatus: 0,
+      // 右侧列表查询数据End
 
+      optionProps: {
+        //公司下拉列表配置
+        checkStrictly: true,
+        value: "id",
+        label: "name",
+        children: "children",
+      },
+      options: [], //保险公司下拉列表
 
-        //------------协议下拉框数据   begin-----------------
-        agreementtypeoptions: [], //协议类型
-        channeloptions: [], //合作渠道
-        matchtypeoptions: [], //保单匹配协议日期类型
-        moneytypeoptions: [], //佣金发放方式
-        feetypeoptions: [], //费率类型
-        cancarkindoptions:[],//可承保车辆种类
-        canusenatureoptions:[],//可承保使用性质
-        carareaoptions:[],//可承保地区
-        //------------协议下拉框数据   end-----------------
+      activeTabs: "first",
+      operType: "ADD", //'ADD','EDIT'
+      dialogTitle: "设置协议费用",
+      dialogVisible: false, //控制对话框显示
 
-        statusalloptions:[
-          {value:'0',label:"待审核"},
-          {value:'1',label:"审核通过"},
-          {value:'2',label:"退回修改"},
-          {value:'3',label:"费用待设置"},
-        ],
+      addAgreementForm: {
+        //新增协议的表单数据
+        id: "", //主键（用来标识是新增还是修改）
+        checkid: "",
+        agreementcode: "", //协议代码
+        agreementname: "", //协议名称
+        agreementshort: "", //协议简称
+        agreementtype: "", //协议类型
+        insure1: "", //保险公司
+        insureshort: "", //合作保险简称
+        isvalid: "", //是否上线
+        channel: "", //投保渠道
+        withtax: "", //含增值税结算
+        startdate: "", //协议生效日期
+        enddate: "", //协议失效日期
+        matchtype: "", //保单匹配协议日期类型
+        moneytype: "", //佣金发放方式
+        cmpprice: "", //支持比价
+        moneytime: "", //结算周期
+        account: "",
+        password: "",
+        agreestatus: "1", //协议状态（1表示审核中）
+        comcode: "", //所属机构
+        agreementProds: [], //协议产品
+        remark: "", //备注
+      },
 
-        //承保规则表单
-        rulesForm:{
-          feetype: "", //费率类型
-          cancity: "", //可承保市
-          cancarkind: "", //车辆种类
-          canusenature: "", //使用性质
-        },
+      //------------协议下拉框数据   begin-----------------
+      agreementtypeoptions: [], //协议类型
+      channeloptions: [], //合作渠道
+      matchtypeoptions: [], //保单匹配协议日期类型
+      moneytypeoptions: [], //佣金发放方式
+      feetypeoptions: [], //费率类型
+      cancarkindoptions: [], //可承保车辆种类
+      canusenatureoptions: [], //可承保使用性质
+      carareaoptions: [], //可承保地区
+      //------------协议下拉框数据   end-----------------
 
-        productTabs:[],
+      statusalloptions: [
+        { value: "0", label: "待审核" },
+        { value: "1", label: "审核通过" },
+        { value: "2", label: "退回修改" },
+        { value: "3", label: "费用待设置" },
+      ],
 
+      //承保规则表单
+      rulesForm: {
+        feetype: "", //费率类型
+        cancity: "", //可承保市
+        cancarkind: "", //车辆种类
+        canusenature: "", //使用性质
+      },
 
-        // 协议产品费用
-        prodfees:[
-          {
-            agreeprodid: "",
-            comlevel: "一级",
-            addrate: 0,//追加费用比例
-            agreementcode: "",
-            feestatus: "",
-            id: "",
-            checkid:"",
-            keeprate: 0,//管理费用比例
-            producname: "",
-          },
-          {
-            agreeprodid: "",
-            comlevel: "二级",
-            addrate: 0,//追加费用比例
-            agreementcode: "",
-            feestatus: "",
-            id: "",
-            checkid:"",
-            keeprate: 0,//管理费用比例
-            producname: "",
-          },
-          {
-            agreeprodid: "",
-            comlevel: "三级",
-            addrate: 0,//追加费用比例
-            agreementcode: "",
-            feestatus: "",
-            id: "",
-            checkid:"",
-            keeprate: 0,//管理费用比例
-            producname: "",
-          },
-          {
-            agreeprodid: "",
-            comlevel: "四级",
-            addrate: 0,//追加费用比例
-            agreementcode: "",
-            feestatus: "",
-            id: "",
-            checkid:"",
-            keeprate: 0,//管理费用比例
-            producname: "",
-          },
-          {
-            agreeprodid: "",
-            comlevel: "五级",
-            addrate: 0,//追加费用比例
-            agreementcode: "",
-            feestatus: "",
-            id: "",
-            checkid:"",
-            keeprate: 0,//管理费用比例
-            producname: '',
-          }
-        ]
+      productTabs: [],
 
-			};
-		},
-    watch:{
-      containsSubChecked(val){
-        if(val){
-          this.pageRequest.columnFilters.inscode.value = '';
-          this.findPage();
-        }else{
-          this.pageRequest.columnFilters.inscode.value = this.currentTreeNode.id;
-          this.findPage();
-        }
+      // 协议产品费用
+      prodfees: [
+        {
+          agreeprodid: "",
+          comlevel: "一级",
+          addrate: 0, //追加费用比例
+          agreementcode: "",
+          feestatus: "",
+          id: "",
+          checkid: "",
+          keeprate: 0, //管理费用比例
+          producname: "",
+        },
+        {
+          agreeprodid: "",
+          comlevel: "二级",
+          addrate: 0, //追加费用比例
+          agreementcode: "",
+          feestatus: "",
+          id: "",
+          checkid: "",
+          keeprate: 0, //管理费用比例
+          producname: "",
+        },
+        {
+          agreeprodid: "",
+          comlevel: "三级",
+          addrate: 0, //追加费用比例
+          agreementcode: "",
+          feestatus: "",
+          id: "",
+          checkid: "",
+          keeprate: 0, //管理费用比例
+          producname: "",
+        },
+        {
+          agreeprodid: "",
+          comlevel: "四级",
+          addrate: 0, //追加费用比例
+          agreementcode: "",
+          feestatus: "",
+          id: "",
+          checkid: "",
+          keeprate: 0, //管理费用比例
+          producname: "",
+        },
+        {
+          agreeprodid: "",
+          comlevel: "五级",
+          addrate: 0, //追加费用比例
+          agreementcode: "",
+          feestatus: "",
+          id: "",
+          checkid: "",
+          keeprate: 0, //管理费用比例
+          producname: "",
+        },
+      ],
+    };
+  },
+  watch: {
+    containsSubChecked(val) {
+      if (val) {
+        this.pageRequest.columnFilters.inscode.value = "";
+        this.findPage();
+      } else {
+        this.pageRequest.columnFilters.inscode.value = this.currentTreeNode.id;
+        this.findPage();
       }
     },
-		created() {
-        //获取所有下拉框数据
-        this.getDictItems("agreementtype");
-        this.getDictItems("channel");
-        this.getDictItems("matchtype");
-        this.getDictItems("moneytype");
-        this.getDictItems("feetype");
-        this.getDictItems("cancarkind");
-        this.getDictItems("canusenature");
-		},
-		mounted() {
-      this.findLeftTreeData();
-      //用像素初始化左边的split的宽度
-      this.changeTreeWidth(200);// 初始化树的宽度
+  },
+  created() {
+    //获取所有下拉框数据
+    this.getDictItems("agreementtype");
+    this.getDictItems("channel");
+    this.getDictItems("matchtype");
+    this.getDictItems("moneytype");
+    this.getDictItems("feetype");
+    this.getDictItems("cancarkind");
+    this.getDictItems("canusenature");
+  },
+  mounted() {
+    this.findLeftTreeData();
+    //用像素初始化左边的split的宽度
+    this.changeTreeWidth(200); // 初始化树的宽度
+  },
+  methods: {
+    /**Split 开始 */
+    changeTreeWidth(widthVal) {
+      // 初始化树的宽度
+      this.leftSplitWidth = Math.ceil(
+        (widthVal / this.$refs.elMain.$el.clientWidth) * 100
+      );
+      this.rightSplitWidth = 100 - this.leftSplitWidth;
+    },
+    /**Split 结束 */
 
-		},
-		methods: {
+    //--tree begin-------
+    // 获取树数据
+    findLeftTreeData: function () {
+      this.$api.insCompany.findLeftInsTree().then((res) => {
+        this.ztreeNodes = res.data;
+      });
+    },
+    onZTreeClick: function (evt, treeId, treeNode) {
+      // 点击事件
+      this.containsSubChecked = false;
+      this.currentTreeNode = treeNode;
+      this.pageRequest.columnFilters.inscode.value = this.currentTreeNode.id;
+      this.findPage();
+    },
+    onZTreeCreated: function (ztreeObj) {
+      this.ztreeObj = ztreeObj;
+      // onCreated 中操作ztreeObj对象展开第一个节点
+      ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
+      this.currentTreeNode = ztreeObj.getNodes()[0];
 
-      /**Split 开始 */
-      changeTreeWidth(widthVal){
-        // 初始化树的宽度
-        this.leftSplitWidth = Math.ceil(widthVal/this.$refs.elMain.$el.clientWidth*100);
-        this.rightSplitWidth = 100-(this.leftSplitWidth)
-      },
-      /**Split 结束 */
+      this.options = ztreeObj.getNodes();
+    },
+    //-- tree end-------
 
-      //--tree begin-------
-      // 获取树数据
-      findLeftTreeData: function() {
-        this.$api.insCompany.findLeftInsTree().then(res => {
-          this.ztreeNodes = res.data;
+    //--数据字典 begin --
+    getDictItems: function (typeName) {
+      let that = this;
+      that.$api.dict
+        .findByLableName(typeName)
+        .then(function (res) {
+          that[typeName + "options"] = res.data; // 把获取到的数据赋给this.data
+        })
+        .catch(function (error) {
+          that[typeName + "options"] = [];
         });
-      },
-      onZTreeClick: function(evt, treeId, treeNode) {
-        // 点击事件
-        this.containsSubChecked=false;
-        this.currentTreeNode = treeNode;
-        this.pageRequest.columnFilters.inscode.value = this.currentTreeNode.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-------
+    },
+    //--数据字典 end --
 
-      //--数据字典 begin --
-      getDictItems: function(typeName) {
-        let that = this;
-        that.$api.dict.findByLableName(typeName)
-          .then(function(res) {
-            that[typeName + "options"] = res.data; // 把获取到的数据赋给this.data
-          })
-          .catch(function(error) {
-            that[typeName + "options"] = [];
-          });
-      },
-      //--数据字典 end --
+    //通过查询条件查询分页数据Start
+    queryEsmInfo() {
+      if (this.queryForm.date != null) {
+        var startdate = formatWithSeperator(
+          this.queryForm.date[0],
+          "-",
+          ":"
+        ).split(" ")[0];
+        var enddate = formatWithSeperator(
+          this.queryForm.date[1],
+          "-",
+          ":"
+        ).split(" ")[0];
+        this.pageRequest.columnFilters.startdate.value = startdate;
+        this.pageRequest.columnFilters.enddate.value = enddate;
+      } else {
+        this.pageRequest.columnFilters.startdate.value = "";
+        this.pageRequest.columnFilters.enddate.value = "";
+      }
+      this.pageRequest.columnFilters.status.value = this.queryForm.status;
+      this.pageRequest.pageNum = 1;
+      this.findPage();
+    },
+    //通过查询条件查询分页数据End
 
-      //通过查询条件查询分页数据Start
-      queryEsmInfo(){
-        if(this.queryForm.date != null ){
-          var startdate =formatWithSeperator(this.queryForm.date[0],'-',':').split(' ')[0];
-          var enddate = formatWithSeperator(this.queryForm.date[1],'-',':').split(' ')[0];
-          this.pageRequest.columnFilters.startdate.value = startdate;
-          this.pageRequest.columnFilters.enddate.value = enddate;
-        }else{
-          this.pageRequest.columnFilters.startdate.value = '';
-          this.pageRequest.columnFilters.enddate.value = '';
+    // 右侧列表的方法Start
+    findPage(data) {
+      // 获取分页数据
+      let that = this;
+      if (data && data.pageRequest) {
+        this.pageRequest.pageNum = data.pageRequest.pageNum;
+        this.pageRequest.pageSize = data.pageRequest.pageSize;
+      }
+      if (
+        this.pageRequest.columnFilters.status.value == "1" ||
+        this.pageRequest.columnFilters.status.value == "3"
+      ) {
+        let param = {};
+        Object.assign(param, this.pageRequest);
+        if (this.pageRequest.columnFilters.status.value == "1") {
+          param.columnFilters.status.value = "1";
+          param.columnFilters.feestatus.value = "1";
         }
-        this.pageRequest.columnFilters.status.value = this.queryForm.status;
-        this.pageRequest.pageNum = 1;
-        this.findPage();
-      },
-      //通过查询条件查询分页数据End
-
-      // 右侧列表的方法Start
-      findPage(data) {
-        // 获取分页数据
-       let that = this;
-       if(data && data.pageRequest){
-         this.pageRequest.pageNum = data.pageRequest.pageNum;
-         this.pageRequest.pageSize = data.pageRequest.pageSize;
-       }
-       if((this.pageRequest.columnFilters.status.value == '1')||(this.pageRequest.columnFilters.status.value == '3')){
-         let param = {};
-         Object.assign(param,this.pageRequest);
-         if(this.pageRequest.columnFilters.status.value == '1'){
-            param.columnFilters.status.value = '1';
-            param.columnFilters.feestatus.value = '1';
-         }
-         if(this.pageRequest.columnFilters.status.value == '3'){
-            param.columnFilters.status.value = '1';
-            // param.columnFilters.feestatus.value = '1';
-            param.columnFilters.feestatus.value = '';
-         }
-         that.$api.esmagreement.findPage(param).then(res => {
-             that.pageResult = res.data;
-           })
-           .then(data != null ? data.callback : "");
-       }else{
-         that.$api.esmagreement.prodfeePage(that.pageRequest).then(res => {
-            console.log(res.data)
-             that.pageResult = res.data;
-           })
-           .then(data != null ? data.callback : "");
-       }
-
-
-      },
-      // 右侧列表的方法End
-
-      //-- formatter begin--
-      agreementtypeFormatter(row, column) { //协议类型
-          let agreementtype = row.agreementtype;
-          return CommonUtil.getDataName({dataList: this.agreementtypeoptions, value: 'value', label: 'label', data: agreementtype})
-      },
-      matchtypeFormatter(row, column) { //匹配日期类型
-          let matchtype = row.matchtype;
-          return CommonUtil.getDataName({dataList: this.matchtypeoptions, value: 'value', label: 'label', data: matchtype})
-      },
-      moneytimeFormatter(row, column) { //结算周期
-          return 'T+'+row.moneytime;
-      },
-      agreestatusFormatter(row, column) { //状态
-          if(row.prodfees.length>0){
-            let status = row.prodfees[0].feestatus;
-            return CommonUtil.getDataName({dataList: this.statusalloptions, value: 'value', label: 'label', data: status})
-          }else{
-            return "费用待设置";
-          }
-      },
-      updatetimeFormatter(row,column){
-        let updatetime = row.updatetime;
-        return format(updatetime);
-      },
-      //-- formatter end--
-
-      changeProdFee(index){
-        for(let i=0;i<this.productTabs[index].prodfees.length;i++){
-          if(this.productTabs[index].prodfees[i].keeprate==""){
-            this.productTabs[index].prodfees[i].keeprate=0;
-          }
-          if(this.productTabs[index].prodfees[i].addrate==""){
-            this.productTabs[index].prodfees[i].addrate=0;
-          }
+        if (this.pageRequest.columnFilters.status.value == "3") {
+          param.columnFilters.status.value = "1";
+          // param.columnFilters.feestatus.value = '1';
+          param.columnFilters.feestatus.value = "";
         }
+        that.$api.esmagreement
+          .findPage(param)
+          .then((res) => {
+            that.pageResult = res.data;
+          })
+          .then(data != null ? data.callback : "");
+      } else {
+        that.$api.esmagreement
+          .prodfeePage(that.pageRequest)
+          .then((res) => {
+            console.log(res.data);
+            that.pageResult = res.data;
+          })
+          .then(data != null ? data.callback : "");
+      }
+    },
+    // 右侧列表的方法End
+
+    //-- formatter begin--
+    agreementtypeFormatter(row, column) {
+      //协议类型
+      let agreementtype = row.agreementtype;
+      return CommonUtil.getDataName({
+        dataList: this.agreementtypeoptions,
+        value: "value",
+        label: "label",
+        data: agreementtype,
+      });
+    },
+    matchtypeFormatter(row, column) {
+      //匹配日期类型
+      let matchtype = row.matchtype;
+      return CommonUtil.getDataName({
+        dataList: this.matchtypeoptions,
+        value: "value",
+        label: "label",
+        data: matchtype,
+      });
+    },
+    moneytimeFormatter(row, column) {
+      //结算周期
+      return "T+" + row.moneytime;
+    },
+    agreestatusFormatter(row, column) {
+      //状态
+      if (row.prodfees.length > 0) {
+        let status = row.prodfees[0].feestatus;
+        return CommonUtil.getDataName({
+          dataList: this.statusalloptions,
+          value: "value",
+          label: "label",
+          data: status,
+        });
+      } else {
+        return "费用待设置";
+      }
+    },
+    updatetimeFormatter(row, column) {
+      let updatetime = row.updatetime;
+      return format(updatetime);
+    },
+    //-- formatter end--
 
-        let mm= this.productTabs[index].productrate;
-        for(let i=0;i<this.productTabs[index].prodfees.length;i++){
-          mm = mm- this.productTabs[index].prodfees[i].keeprate-this.productTabs[index].prodfees[i].addrate;
+    changeProdFee(index) {
+      for (let i = 0; i < this.productTabs[index].prodfees.length; i++) {
+        if (this.productTabs[index].prodfees[i].keeprate == "") {
+          this.productTabs[index].prodfees[i].keeprate = 0;
         }
-        this.productTabs[index].feerate = mm.toFixed(2); //佣金出口
-        this.productTabs[index].keeprate =(this.productTabs[index].productrate - mm).toFixed(2); //公司预留佣金
-        if(this.productTabs[index].feerate<0){
-          this.$message.error("费用分配不能超出产品佣金总额");
+        if (this.productTabs[index].prodfees[i].addrate == "") {
+          this.productTabs[index].prodfees[i].addrate = 0;
         }
-      },
+      }
 
-      handleClose(done) {
-        this.$confirm('确认关闭？')
-          .then(_ => {
-            done();
-          })
-          .catch(_ => {});
-      },
-      closeVisible(){
-        this.carareaoptions=[];
-        this.$refs.addAgreementRef.resetFields();
-        this.$refs.rulesForm.resetFields();
-        this.productTabs=[];
-        for (let key in this.rulesForm) {
-          this.rulesForm[key]="";
-        }
-        for (let key in this.addAgreementForm) {
-          if(key =='agreementProds'){
-            this.addAgreementForm[key] = [];
-          }else if(key =='prodfees'){
-            this.addAgreementForm[key] = [];
-          }else{
-            this.addAgreementForm[key] = "";
-          }
+      let mm = this.productTabs[index].productrate;
+      for (let i = 0; i < this.productTabs[index].prodfees.length; i++) {
+        mm =
+          mm -
+          this.productTabs[index].prodfees[i].keeprate -
+          this.productTabs[index].prodfees[i].addrate;
+      }
+      this.productTabs[index].feerate = mm.toFixed(2); //佣金出口
+      this.productTabs[index].keeprate = (
+        this.productTabs[index].productrate - mm
+      ).toFixed(2); //公司预留佣金
+      if (this.productTabs[index].feerate < 0) {
+        this.$message.error("费用分配不能超出产品佣金总额");
+      }
+    },
+
+    handleClose(done) {
+      this.$confirm("确认关闭？")
+        .then((_) => {
+          done();
+        })
+        .catch((_) => {});
+    },
+    closeVisible() {
+      this.carareaoptions = [];
+      this.$refs.addAgreementRef.resetFields();
+      this.$refs.rulesForm.resetFields();
+      this.productTabs = [];
+      for (let key in this.rulesForm) {
+        this.rulesForm[key] = "";
+      }
+      for (let key in this.addAgreementForm) {
+        if (key == "agreementProds") {
+          this.addAgreementForm[key] = [];
+        } else if (key == "prodfees") {
+          this.addAgreementForm[key] = [];
+        } else {
+          this.addAgreementForm[key] = "";
         }
-      },
+      }
+    },
 
-      //编辑协议
-      handleTableEdit(data){
-        let that = this;
-        this.activeTabs='first';
-        this.operType='EDIT';
-        this.dialogTitle= "费用设置";
-        if((this.queryForm.status == '3') || (this.queryForm.status == '1')){
-          this.$api.esmagreement.findById(data.row.id).then(res => {
-            console.log(res.data)
-            this.feestatus = 3;
-            Object.assign(that.addAgreementForm, res.data);
-            for(let i=0;i<citydata.rawCitiesData.length;i++){
-              if(citydata.rawCitiesData[i].code.substring(0,2) == that.addAgreementForm.insure1.substring(6,8)){
-                that.carareaoptions = citydata.rawCitiesData[i].sub;
-              }
+    //编辑协议
+    handleTableEdit(data) {
+      let that = this;
+      this.activeTabs = "first";
+      this.operType = "EDIT";
+      this.dialogTitle = "费用设置";
+      if (this.queryForm.status == "3" || this.queryForm.status == "1") {
+        this.$api.esmagreement.findById(data.row.id).then((res) => {
+          console.log(res.data);
+          this.feestatus = 3;
+          Object.assign(that.addAgreementForm, res.data);
+          for (let i = 0; i < citydata.rawCitiesData.length; i++) {
+            if (
+              citydata.rawCitiesData[i].code.substring(0, 2) ==
+              that.addAgreementForm.insure1.substring(6, 8)
+            ) {
+              that.carareaoptions = citydata.rawCitiesData[i].sub;
             }
+          }
 
-            if(res.data.agreementProds.length>0){
-              that.rulesForm.feetype = res.data.agreementProds[0].feetype;
-              that.rulesForm.cancarkind = res.data.agreementProds[0].cancarkind;
-              that.rulesForm.canusenature = res.data.agreementProds[0].canusenature;
-              that.rulesForm.cancity = res.data.agreementProds[0].cancity.split(",");
-              Object.assign(that.productTabs,res.data.agreementProds)
-              for(let m=0;m<that.productTabs.length;m++){
-                let prodFeeParam = [];
-                for(let n=0;n<res.data.prodfees.length;n++){
-                  if(that.productTabs[m].id == res.data.prodfees[n].agreeprodid){
-                    let mm = {};
-                    Object.assign(mm,res.data.prodfees[n])
-                    // res.data.prodfees[n].feestatus='4';
-                    prodFeeParam.push(mm);
-                  }
-                }
-                if(prodFeeParam.length==0){
-                  for(let o=0;o<that.prodfees.length;o++){
-                    let mm = {};
-                    Object.assign(mm,that.prodfees[o])
-                    mm.agreementcode=this.addAgreementForm.id;
-                    mm.agreeprodid=this.productTabs[m].id;
-                    mm.producname=this.addAgreementForm.product;
-                    prodFeeParam.push(mm);
-                  }
+          if (res.data.agreementProds.length > 0) {
+            that.rulesForm.feetype = res.data.agreementProds[0].feetype;
+            that.rulesForm.cancarkind = res.data.agreementProds[0].cancarkind;
+            that.rulesForm.canusenature =
+              res.data.agreementProds[0].canusenature;
+            that.rulesForm.cancity =
+              res.data.agreementProds[0].cancity.split(",");
+            Object.assign(that.productTabs, res.data.agreementProds);
+            for (let m = 0; m < that.productTabs.length; m++) {
+              let prodFeeParam = [];
+              for (let n = 0; n < res.data.prodfees.length; n++) {
+                if (
+                  that.productTabs[m].id == res.data.prodfees[n].agreeprodid
+                ) {
+                  let mm = {};
+                  Object.assign(mm, res.data.prodfees[n]);
+                  // res.data.prodfees[n].feestatus='4';
+                  prodFeeParam.push(mm);
                 }
-                this.$set(that.productTabs[m], 'prodfees', [])
-                for(let n=0;n<that.productTabs[m].prodfees.length;n++){
-                  this.$set(that.productTabs[m].prodfees[n], 'keeprate', '')
-                  this.$set(that.productTabs[m].prodfees[n], 'addrate', '')
+              }
+              if (prodFeeParam.length == 0) {
+                for (let o = 0; o < that.prodfees.length; o++) {
+                  let mm = {};
+                  Object.assign(mm, that.prodfees[o]);
+                  mm.agreementcode = this.addAgreementForm.id;
+                  mm.agreeprodid = this.productTabs[m].id;
+                  mm.producname = this.addAgreementForm.product;
+                  prodFeeParam.push(mm);
                 }
-                that.productTabs[m].prodfees=prodFeeParam;
-                // Object.assign(that.productTabs[m].prodfees,prodFeeParam)
               }
-            }
-            that.dialogVisible = true;
-          });
-        }else{
-          this.$api.esmagreement.findFeeById(data.row.checkid).then(res => {
-            console.log(res.data)
-            this.feestatus = res.data.prodfees[0].feestatus;
-            Object.assign(that.addAgreementForm, res.data);
-            for(let i=0;i<citydata.rawCitiesData.length;i++){
-              if(citydata.rawCitiesData[i].code.substring(0,2) == that.addAgreementForm.insure1.substring(6,8)){
-                that.carareaoptions = citydata.rawCitiesData[i].sub;
+              this.$set(that.productTabs[m], "prodfees", []);
+              for (let n = 0; n < that.productTabs[m].prodfees.length; n++) {
+                this.$set(that.productTabs[m].prodfees[n], "keeprate", "");
+                this.$set(that.productTabs[m].prodfees[n], "addrate", "");
               }
+              that.productTabs[m].prodfees = prodFeeParam;
+              // Object.assign(that.productTabs[m].prodfees,prodFeeParam)
+            }
+          }
+          that.dialogVisible = true;
+        });
+      } else {
+        this.$api.esmagreement.findFeeById(data.row.checkid).then((res) => {
+          console.log(res.data);
+          this.feestatus = res.data.prodfees[0].feestatus;
+          Object.assign(that.addAgreementForm, res.data);
+          for (let i = 0; i < citydata.rawCitiesData.length; i++) {
+            if (
+              citydata.rawCitiesData[i].code.substring(0, 2) ==
+              that.addAgreementForm.insure1.substring(6, 8)
+            ) {
+              that.carareaoptions = citydata.rawCitiesData[i].sub;
             }
+          }
 
-            if(res.data.agreementProds.length>0){
-              that.rulesForm.feetype = res.data.agreementProds[0].feetype;
-              that.rulesForm.cancarkind = res.data.agreementProds[0].cancarkind;
-              that.rulesForm.canusenature = res.data.agreementProds[0].canusenature;
-              that.rulesForm.cancity = res.data.agreementProds[0].cancity.split(",");
-              Object.assign(that.productTabs,res.data.agreementProds)
-              for(let m=0;m<that.productTabs.length;m++){
-                let prodFeeParam = [];
-                for(let n=0;n<res.data.prodfees.length;n++){
-                  if(that.productTabs[m].id == res.data.prodfees[n].agreeprodid){
-                    let mm = {};
-                    Object.assign(mm,res.data.prodfees[n])
-                    // res.data.prodfees[n].feestatus='4';
-                    prodFeeParam.push(mm);
-                  }
-                }
-                this.$set(that.productTabs[m], 'prodfees', [])
-                for(let n=0;n<that.productTabs[m].prodfees.length;n++){
-                  this.$set(that.productTabs[m].prodfees[n], 'keeprate', '')
-                  this.$set(that.productTabs[m].prodfees[n], 'addrate', '')
+          if (res.data.agreementProds.length > 0) {
+            that.rulesForm.feetype = res.data.agreementProds[0].feetype;
+            that.rulesForm.cancarkind = res.data.agreementProds[0].cancarkind;
+            that.rulesForm.canusenature =
+              res.data.agreementProds[0].canusenature;
+            that.rulesForm.cancity =
+              res.data.agreementProds[0].cancity.split(",");
+            Object.assign(that.productTabs, res.data.agreementProds);
+            for (let m = 0; m < that.productTabs.length; m++) {
+              let prodFeeParam = [];
+              for (let n = 0; n < res.data.prodfees.length; n++) {
+                if (
+                  that.productTabs[m].id == res.data.prodfees[n].agreeprodid
+                ) {
+                  let mm = {};
+                  Object.assign(mm, res.data.prodfees[n]);
+                  // res.data.prodfees[n].feestatus='4';
+                  prodFeeParam.push(mm);
                 }
-                that.productTabs[m].prodfees=prodFeeParam;
               }
+              this.$set(that.productTabs[m], "prodfees", []);
+              for (let n = 0; n < that.productTabs[m].prodfees.length; n++) {
+                this.$set(that.productTabs[m].prodfees[n], "keeprate", "");
+                this.$set(that.productTabs[m].prodfees[n], "addrate", "");
+              }
+              that.productTabs[m].prodfees = prodFeeParam;
             }
-            that.dialogVisible = true;
-          });
-        }
-
-      },
-
-      //提交
-      submitForm(status) {
-         let list = [];
-        for(let i=0;i<this.productTabs.length;i++){
-          list = list.concat(this.productTabs[i].prodfees)
-        }
-        this.addAgreementForm.prodfees = list;
-        console.log(this.addAgreementForm)
-        this.$api.esmagreement.saveProdFee(this.addAgreementForm).then(res => {
-            console.log(res)
-			if(res.code == 200){
-				this.$message({type: 'success',message: '已提交',duration:2000});
-				this.dialogVisible=false;
-			}else{
-				this.$message({type: 'error',message: '提交失败',duration:2000});
-			}
+          }
+          that.dialogVisible = true;
         });
+      }
+    },
 
-
-      },
-
-		}
-	};
+    //提交
+    submitForm(status) {
+      let list = [];
+      for (let i = 0; i < this.productTabs.length; i++) {
+        list = list.concat(this.productTabs[i].prodfees);
+      }
+      this.addAgreementForm.prodfees = list;
+      console.log(this.addAgreementForm);
+      this.$api.esmagreement.saveProdFee(this.addAgreementForm).then((res) => {
+        console.log(res);
+        if (res.code == 200) {
+          this.$message({ type: "success", message: "已提交", duration: 2000 });
+          this.dialogVisible = false;
+        } else {
+          this.$message({ type: "error", message: "提交失败", duration: 2000 });
+        }
+      });
+    },
+  },
+};
 </script>
 
 
 <style scoped>
-  .el-divider{
-    margin: 10px 0px 15px!important;
-  }
-  .queryForm .el-row {
-    margin:0px;
-  }
+.el-divider {
+  margin: 10px 0px 15px !important;
+}
+.queryForm .el-row {
+  margin: 0px;
+}
 
-  .queryForm .el-form-item {
-    margin-bottom: 0px;
-  }
+.queryForm .el-form-item {
+  margin-bottom: 0px;
+}
 </style>

src/views/PeopleManage/Agent/AgentExamine.vue

@@ -35,7 +35,7 @@
                   </el-col>
                   <el-col :span="5">
                     <el-form-item label="状态">
-                      <el-select size="small"  v-model="queryFrom.status" placeholder="请选择"  >
+                      <el-select size="small"  v-model="queryFrom.approvalStatus" placeholder="请选择"  >
                         <el-option label="待审核" value="0"></el-option>
                         <el-option label="审核通过" value="1"></el-option>
                         <el-option label="审核驳回" value="2"></el-option>
@@ -53,7 +53,7 @@
             </el-row>
             <!-- 筛选区域End -->
 
-            <kt-common-table operationWidth="140" permsButton1="sys:agentverify:edit" :data="pageResult" :columns="columns" :button1Name="(pageRequest.columnFilters.status.value == '0')?'审核':'查看'" :showBatchDelete="false" @findPage="findPage"  :button1Background="(pageRequest.columnFilters.status.value == '0')?'#F00':'#F2904B'" @handleButton1="handleTableEdit"></kt-common-table>
+            <kt-common-table :operationWidth="140" permsButton1="sys:agentverify:edit" :data="pageResult" :columns="columns" :button1Name="(pageRequest.columnFilters.approvalStatus.value == '0')?'审核':'查看'" :showBatchDelete="false" @findPage="findPage"  :button1Background="(pageRequest.columnFilters.approvalStatus.value == '0')?'#F00':'#F2904B'" @handleButton1="handleTableEdit"></kt-common-table>
 
         </SplitArea>
         <!-- 右侧列表页面End -->
@@ -139,7 +139,7 @@
               </el-col>
               <el-col :span="8">
                 <el-form-item label="岗位">
-                  <el-select disabled style="width: 100%;" v-model="dataForm.jobCode" placeholder="请选择">
+                  <el-select disabled style="width: 100%;" v-model="dataForm.jobName" placeholder="请选择">
                     <el-option v-for="item in jobcodeoptions" :key="item.value" :label="item.label" :value="item.value" ></el-option>
                   </el-select>
                 </el-form-item>
@@ -604,586 +604,721 @@
 </template>
 
 <script>
-  import Cookies from "js-cookie"
-  import KtButton from "@/views/Core/KtButton"; // 按钮权限组件
-  import tree from "@/components/ztree.vue";  // 机构树组件
-  import KtCommonTable from "@/views/Core/KtCommonTable.vue";//表格组件
-  import bankBin from "@/assets/js/bankcardinfo.js"
-  import CommonUtil from "@/utils/comutil.js"
+import Cookies from "js-cookie";
+import KtButton from "@/views/Core/KtButton"; // 按钮权限组件
+import tree from "@/components/ztree.vue"; // 机构树组件
+import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
+import bankBin from "@/assets/js/bankcardinfo.js";
+import CommonUtil from "@/utils/comutil.js";
 
-  export default {
-    components: {
-      KtButton,
-      tree,
-      KtCommonTable
-    },
-    data() {
-      return {
-        peopleid:"",
-        peopledeptid:"",
+export default {
+  components: {
+    KtButton,
+    tree,
+    KtCommonTable,
+  },
+  data() {
+    return {
+      peopleid: "",
+      peopledeptid: "",
 
-        /**Split 开始 */
-        leftSplitWidth: 20,
-        rightSplitWidth: 80,
-        /**Split 结束 */
+      /**Split 开始 */
+      leftSplitWidth: 20,
+      rightSplitWidth: 80,
+      /**Split 结束 */
 
-        //----ztreeLeft begin---------
-        ztreeObj: null,
-        ztreeSetting: {
-          check: {
-            enable: false
-          },
-          data: {
-            simpleData: {
-              enable: true,
-              pIdKey: "parentId"
-            }
+      //----ztreeLeft begin---------
+      ztreeObj: null,
+      ztreeSetting: {
+        check: {
+          enable: false,
+        },
+        data: {
+          simpleData: {
+            enable: true,
+            pIdKey: "parentId",
           },
-          view: {
-            showIcon: false
-          }
         },
-        ztreeNodes: [],
-        currentTreeNode: null,
-        //----ztreeLeft end---------
+        view: {
+          showIcon: false,
+        },
+      },
+      ztreeNodes: [],
+      currentTreeNode: null,
+      //----ztreeLeft end---------
 
-        // 控制影像
-        pic1Control:false,
-        pic3Control:false,
-        pic4Control:false,
-        pic5Control:false,
-        pic6Control:false,
+      // 控制影像
+      pic1Control: false,
+      pic3Control: false,
+      pic4Control: false,
+      pic5Control: false,
+      pic6Control: false,
 
-        // 右侧列表查询数据Start
-        teamleadername:"",//推荐人姓名
-        teamleaderid:"",//推荐人编码
-        queryFrom:{
-          "status":"0"
+      // 右侧列表查询数据Start
+      teamleadername: "", //推荐人姓名
+      teamleaderid: "", //推荐人编码
+      queryFrom: {
+        status: "0",
+      },
+      pageResult: {},
+      containsSubDeptChecked: true, //是否包含下级机构
+      pageRequest: {
+        //查询的默认条件
+        pageNum: 1,
+        pageSize: 20,
+        columnFilters: {
+          deptId: {
+            name: "deptId",
+            value: "",
+          },
+          containsSubDept: {
+            name: "containsSubDept",
+            value: 1,
+          },
+          usertype: {
+            name: "usertype",
+            value: "2",
+          },
+          approvalStatus: {
+            name: "approvalStatus",
+            value: "0",
+          },
+          isteamleader: {
+            name: "isteamleader",
+            value: "0",
+          },
+          userId: {
+            name: "userId",
+            value: "",
+          },
+          realName: {
+            name: "realName",
+            value: "",
+          },
+          mobile: {
+            name: "mobile",
+            value: "",
+          },
+          delFlag: {
+            name: "delFlag ",
+            value: "",
+          },
         },
-        pageResult: {},
-        containsSubDeptChecked: true, //是否包含下级机构
-        pageRequest: {  //查询的默认条件
-          pageNum: 1,
-          pageSize: 20,
-          columnFilters: {
-            "deptId": {
-              "name": "deptId",
-              "value": ""
-            },
-            "containsSubDept": {
-              "name": "containsSubDept",
-              "value": 1
-            },
-            "usertype": {
-              "name": "usertype",
-              "value": "B"
-            },
-            "status":{
-              "name":"status",
-              "value":"0"
-            },
-            "isteamleader":{
-              "name":"isteamleader",
-              "value":"0"
-            },
-            "id":{
-              "name":"id",
-              "value":""
-            },
-            "name":{
-              "name":"name",
-              "value":""
-            },
-            "mobile":{
-              "name":"mobile",
-              "value":""
-            },
-          }
+      },
+      columns: [
+        { prop: "deptId", label: "部门编码", minWidth: 80, sortable: false },
+        {
+          prop: "pdeptName",
+          label: "机构名称",
+          minWidth: 120,
+          sortable: false,
+          formatter: this.companyNameFormatter,
+        },
+        { prop: "deptName", label: "部门名称", minWidth: 80, sortable: false },
+        {
+          prop: "jobName",
+          label: "岗位",
+          minWidth: 80,
+          sortable: false,
         },
-        columns:[
-          { prop: "deptId",label: "部门编码",minWidth: 80,sortable: false},
-		  { prop: "companyName",label: "机构名称",minWidth: 120,sortable: false,formatter: this.companyNameFormatter},
-          { prop: "deptName",label: "部门名称",minWidth: 80,sortable: false},
-          { prop: "jobCode",label: "岗位",minWidth: 80,sortable: false,formatter: this.jobcodeFormatter},
-          { prop: "id",label: "工号",minWidth: 80,sortable: false},
-          { prop: "name",label: "姓名",minWidth: 120,sortable: false},
-          { prop: "sex",label: "性别",minWidth: 120,sortable: false},
-          { prop: "mobile",label: "联系电话",minWidth: 100,sortable: false},
-          { prop: "lastUpdateTime",label: "提交时间",minWidth: 100,sortable: false},
-         { prop: "status", label: "状态", minWidth: 70, sortable: false,formatter: this.statusFormatter}
-        ],
-        // 右侧列表查询数据End
+        { prop: "userId", label: "工号", minWidth: 80, sortable: false },
+        { prop: "name", label: "姓名", minWidth: 120, sortable: false },
+        { prop: "sex", label: "性别", minWidth: 120, sortable: false },
+        { prop: "mobile", label: "联系电话", minWidth: 100, sortable: false },
+        {
+          prop: "lastUpdateTime",
+          label: "提交时间",
+          minWidth: 100,
+          sortable: false,
+        },
+        {
+          prop: "approvalStatus",
+          label: "状态",
+          minWidth: 70,
+          sortable: false,
+        },
+      ],
+      // 右侧列表查询数据End
 
-        // 新增或修改的弹出框Start
-        remarks:'',//审核的备注
-        activeTabs: "first",
-        dialogVisible: false, // 新增编辑界面是否显示
-        operation: false, // true:新增, false:编辑
-        departmentList:[], // 选中公司的所有部门的集合
-        deptInfo:{},  //选中机构的基本信息
-        dataForm:{  // 人员个人信息
-            id: '',
-            name: '', //用户名
-            password: '', //密码
-            email: '', //邮箱
-            mobile: '', //手机号
-            birthday: '', //出生日期
-            status: '', //状态  1：正常   0：离司
-            marrycode: '', //婚姻状况
-            deptId: '', //机构号或者部门号
-            createBy: '', //创建人
-            createTime: '', //创建时间
-            lastUpdateBy: '', //更新人
-            lastUpdateTime: '', //更新时间
-            delFlag: '', //是否删除  -1：已删除  0：正常
-            usertype: '', //用户类型：0:系统用户 A：后线人员 B：代理人员
-            tenantId: '', //所属租户
-            sex: '', //性别
-            jobCode: '', //岗位
-            esmUserInternalid: '',
-            addressnow: '', //居住地址
-            nations: '', //民族
-            politicalstatus: '', //政治面貌
-            college: '', //毕业院校
-            identity: '', //身份证号
-            education: '', //学历
-            bankname: '', //开户行
-            accountno: '', //开户账号
-            addressresident: '', //户口地址
-            health: '', //健康状态
-            postalcode: '', //邮政编码
-            phonehouse: '', //住宅电话
-            collegetm: '', //毕业时间
-            speciality: '', //专业
-            nativeplace: '', //籍贯
-            worktype: '', //工作性质
-            blood: '', //血型
-            saleno: '', //业务员职业证书号
-            orglast: '', //原工作单位
-            joblast: '', //工作职务
-            hobby: '', //爱好特长
-            namespecial: '', //紧急联系人姓名
-            phonespecial: '', //紧急联系人电话
-            intimes: '', //是否二次入司
-            intime: '', //入司时间
-            contracttime: '', //签约时间(财)
-            isteamleader: '', //是否团队长(财)
-            documentno: '', //后线人员档案号
-            hrcode: '', //后线人员HR编码
-            regulartm: '', //转正时间
-            salarycode: '' ,//薪资等级
-            isshowsalesroom:'',//是否显示门店
-            isshowteam:'',//是否显示团队
+      // 新增或修改的弹出框Start
+      remarks: "", //审核的备注
+      activeTabs: "first",
+      dialogVisible: false, // 新增编辑界面是否显示
+      operation: false, // true:新增, false:编辑
+      departmentList: [], // 选中公司的所有部门的集合
+      deptInfo: {}, //选中机构的基本信息
+      dataForm: {
+        // 人员个人信息
+        id: "",
+        name: "", //用户名
+        password: "", //密码
+        email: "", //邮箱
+        mobile: "", //手机号
+        birthday: "", //出生日期
+        approvalStatus: "", //状态  1：正常   0：离司
+        marrycode: "", //婚姻状况
+        deptId: "", //机构号或者部门号
+        createBy: "", //创建人
+        createTime: "", //创建时间
+        lastUpdateBy: "", //更新人
+        lastUpdateTime: "", //更新时间
+        delFlag: "", //是否删除  -1：已删除  0：正常
+        usertype: "", //用户类型：0:系统用户 A：后线人员 B：代理人员
+        tenantId: "", //所属租户
+        sex: "", //性别
+        jobName: "", //岗位
+        esmUserInternalid: "",
+        addressnow: "", //居住地址
+        nations: "", //民族
+        politicalstatus: "", //政治面貌
+        college: "", //毕业院校
+        identity: "", //身份证号
+        education: "", //学历
+        bankname: "", //开户行
+        accountno: "", //开户账号
+        addressresident: "", //户口地址
+        health: "", //健康状态
+        postalcode: "", //邮政编码
+        phonehouse: "", //住宅电话
+        collegetm: "", //毕业时间
+        speciality: "", //专业
+        nativeplace: "", //籍贯
+        worktype: "", //工作性质
+        blood: "", //血型
+        saleno: "", //业务员职业证书号
+        orglast: "", //原工作单位
+        joblast: "", //工作职务
+        hobby: "", //爱好特长
+        namespecial: "", //紧急联系人姓名
+        phonespecial: "", //紧急联系人电话
+        intimes: "", //是否二次入司
+        intime: "", //入司时间
+        contracttime: "", //签约时间(财)
+        isteamleader: "", //是否团队长(财)
+        documentno: "", //后线人员档案号
+        hrcode: "", //后线人员HR编码
+        regulartm: "", //转正时间
+        salarycode: "", //薪资等级
+        isshowsalesroom: "", //是否显示门店
+        isshowteam: "", //是否显示团队
 
-            photo1:"",
-            photo2:"",
-            photo3:"",
-            photo4:"",
-            photo5:"",
-            photo6:""
-        },
-        // 新增或修改的弹出框End
+        photo1: "",
+        photo2: "",
+        photo3: "",
+        photo4: "",
+        photo5: "",
+        photo6: "",
+      },
+      // 新增或修改的弹出框End
 
-        //------------下拉框数据字典   begin-----------------
-        comleveloptions: [],
-        comattributeoptions: [],
-        comtypeoptions: [],
-        jobcodeoptions: [],
-        statusoptions:[
-            {label:"待审核",value:"0"},
-            {label:"审核通过",value:"1"},
-            {label:"审核驳回",value:"2"},
-            {label:"退回修改",value:"3"},
-            {label:"全部",value:"0,1,2,3"}
-          ],
-        //------------下拉框数据字典   end----------------
+      //------------下拉框数据字典   begin-----------------
+      comleveloptions: [],
+      comattributeoptions: [],
+      comtypeoptions: [],
+      jobcodeoptions: [],
+      statusoptions: [
+        { label: "待审核", value: "0" },
+        { label: "审核通过", value: "1" },
+        { label: "审核驳回", value: "2" },
+        { label: "退回修改", value: "3" },
+        { label: "全部", value: "0,1,2,3" },
+      ],
+      //------------下拉框数据字典   end----------------
 
-        //56个民族
-        nationalList:['汉族','壮族','满族','回族','苗族','维吾尔族','土家族','彝族','蒙古族','藏族','布依族','侗族','瑶族','朝鲜族','白族','哈尼族','哈萨克族','黎族','傣族','畲族','傈僳族','仡佬族','东乡族','高山族','拉祜族','水族','佤族','纳西族','羌族','土族','仫佬族','锡伯族','柯尔克孜族','达斡尔族','景颇族','毛南族','撒拉族','布朗族','塔吉克族','阿昌族','普米族','鄂温克族','怒族','京族','基诺族','德昂族','保安族','俄罗斯族','裕固族','乌兹别克族','门巴族','鄂伦春族','独龙族','塔塔尔族','赫哲族','珞巴族'],
+      //56个民族
+      nationalList: [
+        "汉族",
+        "壮族",
+        "满族",
+        "回族",
+        "苗族",
+        "维吾尔族",
+        "土家族",
+        "彝族",
+        "蒙古族",
+        "藏族",
+        "布依族",
+        "侗族",
+        "瑶族",
+        "朝鲜族",
+        "白族",
+        "哈尼族",
+        "哈萨克族",
+        "黎族",
+        "傣族",
+        "畲族",
+        "傈僳族",
+        "仡佬族",
+        "东乡族",
+        "高山族",
+        "拉祜族",
+        "水族",
+        "佤族",
+        "纳西族",
+        "羌族",
+        "土族",
+        "仫佬族",
+        "锡伯族",
+        "柯尔克孜族",
+        "达斡尔族",
+        "景颇族",
+        "毛南族",
+        "撒拉族",
+        "布朗族",
+        "塔吉克族",
+        "阿昌族",
+        "普米族",
+        "鄂温克族",
+        "怒族",
+        "京族",
+        "基诺族",
+        "德昂族",
+        "保安族",
+        "俄罗斯族",
+        "裕固族",
+        "乌兹别克族",
+        "门巴族",
+        "鄂伦春族",
+        "独龙族",
+        "塔塔尔族",
+        "赫哲族",
+        "珞巴族",
+      ],
 
+      // 新增编辑界面数据
+    };
+  },
+  created() {
+    this.peopleid = Cookies.get("user");
+    if (this.peopleid != "admin") {
+      this.peopledeptid = Cookies.get("user").split("D")[0];
+      this.pageRequest.columnFilters.deptId.value = this.peopledeptid;
+    } else {
+      this.peopledeptid = "9";
+      this.pageRequest.columnFilters.deptId.value = this.peopledeptid;
+    }
+    //获取所有下拉框数据(字典)
+    this.getDictItems("comlevel");
+    this.getDictItems("comattribute");
+    this.getDictItems("comtype");
+    this.getDictItems("jobcode");
 
-        // 新增编辑界面数据
+    this.findLeftTreeData(); // 获取机构树的数据
+  },
+  computed: {
+    photo1List() {
+      if (!!this.dataForm.photo1) {
+        return this.dataForm.photo1.split("___");
+      } else {
+        return [];
       }
     },
-    created() {
-      this.peopleid = Cookies.get('user');
-      if(this.peopleid!='admin'){
-        this.peopledeptid = Cookies.get('user').split('D')[0];
-        this.pageRequest.columnFilters.deptId.value = this.peopledeptid;
-      }else{
-        this.peopledeptid = '9';
-        this.pageRequest.columnFilters.deptId.value = this.peopledeptid;
+    photo2List() {
+      if (!!this.dataForm.photo2) {
+        return this.dataForm.photo2.split("___");
+      } else {
+        return [];
       }
-      //获取所有下拉框数据(字典)
-      this.getDictItems("comlevel");
-      this.getDictItems("comattribute");
-      this.getDictItems("comtype");
-      this.getDictItems("jobcode");
-	  
-      this.findLeftTreeData();// 获取机构树的数据
     },
-    computed:{
-      photo1List(){
-        if(!!this.dataForm.photo1){
-          return this.dataForm.photo1.split('___');
-        }else{
-          return [];
-        }
-      },
-      photo2List(){
-        if(!!this.dataForm.photo2){
-          return this.dataForm.photo2.split('___');
-        }else{
-          return [];
-        }
-      },
-      photo3List(){
-        if(!!this.dataForm.photo3){
-          return this.dataForm.photo3.split('___');
-        }else{
-          return [];
-        }
-      },
-      photo4List(){
-        if(!!this.dataForm.photo4){
-          return this.dataForm.photo4.split('___');
-        }else{
-          return [];
-        }
-      },
-      photo5List(){
-        if(!!this.dataForm.photo5){
-          return this.dataForm.photo5.split('___');
-        }else{
-          return [];
-        }
-      },
-      photo6List(){
-        if(!!this.dataForm.photo6){
-          return this.dataForm.photo6.split('___');
-        }else{
-          return [];
-        }
+    photo3List() {
+      if (!!this.dataForm.photo3) {
+        return this.dataForm.photo3.split("___");
+      } else {
+        return [];
       }
     },
-    mounted() {
-      //用像素初始化左边的split的宽度
-      this.changeTreeWidth(240);// 初始化树的宽度
+    photo4List() {
+      if (!!this.dataForm.photo4) {
+        return this.dataForm.photo4.split("___");
+      } else {
+        return [];
+      }
     },
-    watch:{
-      containsSubDeptChecked(){ // 监听是否包含下级
-        this.pageRequest.columnFilters.containsSubDept.value = this.containsSubDeptChecked ? "1" : "0";
-        this.findPage();
+    photo5List() {
+      if (!!this.dataForm.photo5) {
+        return this.dataForm.photo5.split("___");
+      } else {
+        return [];
       }
     },
-    methods: {
-      //-- formatter begin--
-      statusFormatter(row, column) {
-          let status = row.status;
-          return CommonUtil.getDataName({dataList: this.statusoptions, value: 'value', label: 'label', data: status})
-      },
-      jobcodeFormatter(row, column) {
-          let jobcode = row.jobCode;
-          return CommonUtil.getDataName({dataList: this.jobcodeoptions, value: 'value', label: 'label', data: jobcode})
-      },
-		companyNameFormatter(row, column){
-			let companyId = row.deptId.split('D')[0];
-			return CommonUtil.getDataName({dataList: this.ztreeNodes, value: 'id', label: 'name', data: companyId})
-		},
-      //-- formatter end--
+    photo6List() {
+      if (!!this.dataForm.photo6) {
+        return this.dataForm.photo6.split("___");
+      } else {
+        return [];
+      }
+    },
+  },
+  mounted() {
+    //用像素初始化左边的split的宽度
+    this.changeTreeWidth(240); // 初始化树的宽度
+  },
+  watch: {
+    containsSubDeptChecked() {
+      // 监听是否包含下级
+      this.pageRequest.columnFilters.containsSubDept.value = this
+        .containsSubDeptChecked
+        ? "1"
+        : "0";
+      this.findPage();
+    },
+  },
+  methods: {
+    //-- formatter begin--
+    statusFormatter(row, column) {
+      let status = row.status;
+      return CommonUtil.getDataName({
+        dataList: this.statusoptions,
+        value: "value",
+        label: "label",
+        data: status,
+      });
+    },
+    // jobcodeFormatter(row, column) {
+    //   let jobcode = row.jobCode;
+    //   return CommonUtil.getDataName({
+    //     dataList: this.jobcodeoptions,
+    //     value: "value",
+    //     label: "label",
+    //     data: jobcode,
+    //   });
+    // },
+    companyNameFormatter(row, column) {
+      let companyId = row.deptId.split("D")[0];
+      return CommonUtil.getDataName({
+        dataList: this.ztreeNodes,
+        value: "id",
+        label: "name",
+        data: companyId,
+      });
+    },
+    //-- formatter end--
 
-      /**Split 开始 */
-      changeTreeWidth(widthVal){
-        // 初始化树的宽度
-        this.leftSplitWidth = Math.ceil(widthVal/this.$refs.elMain.$el.clientWidth*100);
-        this.rightSplitWidth = 100-(this.leftSplitWidth)
-      },
-      /**Split 结束 */
+    /**Split 开始 */
+    changeTreeWidth(widthVal) {
+      // 初始化树的宽度
+      this.leftSplitWidth = Math.ceil(
+        (widthVal / this.$refs.elMain.$el.clientWidth) * 100
+      );
+      this.rightSplitWidth = 100 - this.leftSplitWidth;
+    },
+    /**Split 结束 */
 
-      //--left tree begin-------
-      findLeftTreeData: function() {
-        // 获取数据
-        this.$api.dept.findLeftDeptTree(this.peopledeptid).then(res => {
-          this.ztreeNodes = res.data;
-        });
-      },
-      onZTreeCreated: function(ztreeObj) {
-        this.ztreeObj = ztreeObj;
-        // onCreated 中操作ztreeObj对象展开第一个节点
-        ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
-        this.currentTreeNode=ztreeObj.getNodes()[0];
-      },
-      onZTreeClick: function(evt, treeId, treeNode) {
-        // 点击事件
-        console.log(evt.type, treeNode);
-        this.currentTreeNode = treeNode;
-        this.pageRequest.columnFilters.deptId.value = this.currentTreeNode.id;
-        this.findPage(null);
-      },
-      //--left tree start-------
+    //--left tree begin-------
+    findLeftTreeData: function () {
+      // 获取数据
+      this.$api.dept.findLeftDeptTree(this.peopledeptid).then((res) => {
+        this.ztreeNodes = res.data;
+      });
+    },
+    onZTreeCreated: function (ztreeObj) {
+      this.ztreeObj = ztreeObj;
+      // onCreated 中操作ztreeObj对象展开第一个节点
+      ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
+      this.currentTreeNode = ztreeObj.getNodes()[0];
+    },
+    onZTreeClick: function (evt, treeId, treeNode) {
+      // 点击事件
+      console.log(evt.type, treeNode);
+      this.currentTreeNode = treeNode;
+      this.pageRequest.columnFilters.deptId.value = this.currentTreeNode.id;
+      this.findPage(null);
+    },
+    //--left tree start-------
 
-      // 查询Start
-      queryStaffInfo(val){
-        this.pageRequest.columnFilters.id.value = this.queryFrom.id;
-        this.pageRequest.columnFilters.name.value = this.queryFrom.name;
-        this.pageRequest.columnFilters.mobile.value = this.queryFrom.tel;
-        this.pageRequest.columnFilters.status.value = this.queryFrom.status;
-        this.pageRequest.pageNum = 1;
-        console.log(this.pageRequest)
-        this.findPage();
-      },
-      // 查询End
+    // 查询Start
+    queryStaffInfo(val) {
+      this.pageRequest.columnFilters.userId.value = this.queryFrom.id;
+      this.pageRequest.columnFilters.realName.value = this.queryFrom.name;
+      this.pageRequest.columnFilters.mobile.value = this.queryFrom.tel;
+      this.pageRequest.columnFilters.approvalStatus.value =
+        this.queryFrom.approvalStatus;
+      this.pageRequest.pageNum = 1;
+      this.findPage(null);
+    },
+    // 查询End
 
-      // 右侧列表的方法Start
-      findPage(data) {
+    // 右侧列表的方法Start
+    findPage(data) {
+      console.log(this.pageRequest);
       // 获取分页数据
-      if(data && data.pageRequest){
+      if (data && data.pageRequest) {
         this.pageRequest.pageNum = data.pageRequest.pageNum;
         this.pageRequest.pageSize = data.pageRequest.pageSize;
       }
-        this.$api.user.findCheckPage(this.pageRequest).then((res) => {
-          console.log(res)
+      this.$api.user
+        .findPage(this.pageRequest)
+        .then((res) => {
+          console.log(res);
           this.pageResult = res.data;
-        }).then(data != null ? data.callback : '')
-      },
-      handleTableEdit(params) {
-        // 编辑后线人员
-
-        this.pic1Control=false;
-        this.pic3Control=false;
-        this.pic4Control=false;
-        this.pic5Control=false;
-        this.pic6Control=false;
+        })
+        .then(data != null ? data.callback : "");
+    },
+    handleTableEdit(params) {
+      // 编辑后线人员
+      this.pic1Control = false;
+      this.pic3Control = false;
+      this.pic4Control = false;
+      this.pic5Control = false;
+      this.pic6Control = false;
 
-        this.activeTabs = "first";
-        this.operation = false;
-        this.dialogTitle = "代理人员信息"
-        this.$api.dept.getDeptById(params.row.deptId.split('D')[0]).then(deptRes => {
+      this.activeTabs = "first";
+      this.operation = false;
+      this.dialogTitle = "代理人员信息";
+      this.$api.dept
+        .getDeptById(params.row.deptId.split("D")[0])
+        .then((deptRes) => {
           this.deptInfo = deptRes.data;
           this.departmentList = [];
-            for(var i=0;i<this.ztreeNodes.length;i++){
-              if(this.ztreeNodes[i].id.indexOf(params.row.deptId.split('D')[0]+'D')>=0){
-                this.departmentList.push({
-                  label:this.ztreeNodes[i].name,
-                  value:this.ztreeNodes[i].id
-                })
-              }
+          for (var i = 0; i < this.ztreeNodes.length; i++) {
+            if (
+              this.ztreeNodes[i].id.indexOf(
+                params.row.deptId.split("D")[0] + "D"
+              ) >= 0
+            ) {
+              this.departmentList.push({
+                label: this.ztreeNodes[i].name,
+                value: this.ztreeNodes[i].id,
+              });
             }
-
-          this.$api.user.findCheckById(params.row.checkid).then((personRes) => {
-            console.log(personRes)
+          }
+          this.$api.user.findById(params.row.userId).then((personRes) => {
             Object.assign(this.dataForm, personRes.data.sysUser);
             Object.assign(this.dataForm, personRes.data.esmUserInternal);
             Object.assign(this.dataForm, personRes.data.esmUserAgent);
-            this.dataForm.status = personRes.data.sysUser.status;
-            this.dataForm.status1 = personRes.data.esmUserInternal.status;
-
-            this.$api.user.findBasePersonById(personRes.data.esmUserAgent.recommenderid).then(res1=>{
-              if(res1.code == 200){
-                this.dataForm.recommenderid=res1.data.id;
-                this.dataForm.recommendername=res1.data.name;
-                this.dialogVisible = true;
-              }else {
-                this.dialogVisible = true;
-              }
-            })
-            this.$api.user.selectByDeptId(this.dataForm.deptId).then(res2=>{
-              console.log(res2.data)
-              if(res2.code == 200){
-                this.teamleaderid=res2.data.id;
-                this.teamleadername = res2.data.name;
-              }
-            })
-
-            this.$api.user.findPersonImage({
-              taskid:params.row.id,
-              imgtype:"T1"
-            }).then((resImage)=>{
-              this.dataForm['photo1']=resImage.data.imgList[0]
-            })
-            this.$api.user.findPersonImage({
-              taskid:params.row.id,
-              imgtype:"T2"
-            }).then((resImage)=>{
-              this.dataForm['photo2']=resImage.data.imgList[0]
-            })
-            this.$api.user.findPersonImage({
-              taskid:params.row.id,
-              imgtype:"T3"
-            }).then((resImage)=>{
-              this.dataForm['photo3']=resImage.data.imgList[0]
-            })
-            this.$api.user.findPersonImage({
-              taskid:params.row.id,
-              imgtype:"T4"
-            }).then((resImage)=>{
-              this.dataForm['photo4']=resImage.data.imgList[0]
-            })
-            this.$api.user.findPersonImage({
-              taskid:params.row.id,
-              imgtype:"T5"
-            }).then((resImage)=>{
-              this.dataForm['photo5']=resImage.data.imgList[0]
-            })
-            this.$api.user.findPersonImage({
-              taskid:params.row.id,
-              imgtype:"T6"
-            }).then((resImage)=>{
-              this.dataForm['photo6']=resImage.data.imgList[0]
-            })
+            // this.dataForm.status = personRes.data.sysUser.status;
+            this.dataForm.status1 = personRes.data.sysUser.approvalStatus;
 
+            // this.$api.user
+            //   .findBasePersonById(personRes.data.esmUserAgent.recommenderid)
+            //   .then((res1) => {
+            //     if (res1.code == 200) {
+            //       this.dataForm.recommenderid = res1.data.id;
+            //       this.dataForm.recommendername = res1.data.name;
+            //       this.dialogVisible = true;
+            //     } else {
+            //       this.dialogVisible = true;
+            //     }
+            //   });
+            // this.$api.user.selectByDeptId(this.dataForm.deptId).then((res2) => {
+            //   console.log(res2.data);
+            //   if (res2.code == 200) {
+            //     this.teamleaderid = res2.data.id;
+            //     this.teamleadername = res2.data.name;
+            //   }
+            // });
 
-          })
-        })
-
-      },
-      // 右侧列表的方法End
+            this.$api.user
+              .findPersonImage({
+                taskid: params.row.id,
+                imgtype: "T1",
+              })
+              .then((resImage) => {
+                this.dataForm["photo1"] = resImage.data.imgList[0];
+              });
+            this.$api.user
+              .findPersonImage({
+                taskid: params.row.id,
+                imgtype: "T2",
+              })
+              .then((resImage) => {
+                this.dataForm["photo2"] = resImage.data.imgList[0];
+              });
+            this.$api.user
+              .findPersonImage({
+                taskid: params.row.id,
+                imgtype: "T3",
+              })
+              .then((resImage) => {
+                this.dataForm["photo3"] = resImage.data.imgList[0];
+              });
+            this.$api.user
+              .findPersonImage({
+                taskid: params.row.id,
+                imgtype: "T4",
+              })
+              .then((resImage) => {
+                this.dataForm["photo4"] = resImage.data.imgList[0];
+              });
+            this.$api.user
+              .findPersonImage({
+                taskid: params.row.id,
+                imgtype: "T5",
+              })
+              .then((resImage) => {
+                this.dataForm["photo5"] = resImage.data.imgList[0];
+              });
+            this.$api.user
+              .findPersonImage({
+                taskid: params.row.id,
+                imgtype: "T6",
+              })
+              .then((resImage) => {
+                this.dataForm["photo6"] = resImage.data.imgList[0];
+              });
+            this.dialogVisible = true;
+          });
+        });
+    },
+    // 右侧列表的方法End
 
-      // 新增或修改的弹出框Start
-      getDictItems(typeName) {
+    // 新增或修改的弹出框Start
+    getDictItems(typeName) {
       //--数据字典--
-        this.$api.dict.findByLableName(typeName).then((response)=>{
+      this.$api.dict
+        .findByLableName(typeName)
+        .then((response) => {
           this[typeName + "options"] = response.data; // 把获取到的数据赋给this.data
-        }).catch((error)=>{
+        })
+        .catch((error) => {
           this[typeName + "options"] = [];
+        });
+    },
+    handleDialogBefore(done) {
+      // 退出对话框之前确认提示
+      var that = this;
+      this.$confirm("确认关闭？")
+        .then((_) => {
+          done();
         })
-      },
-      handleDialogBefore(done) {
-        // 退出对话框之前确认提示
-        var that = this;
-        this.$confirm('确认关闭？')
-          .then(_ => {
-            done();
-          })
-          .catch(_ => {});
-      },
-      closeDialog(){
-        // 清空数据
-        this.deptInfo={};
-        this.remarks="";
-        this.$refs['dataForm'].resetFields()
-        for (let key in this.dataForm) {
-          this.dataForm[key] = "";
-        }
-        this.dialogVisible=false
-        console.log(this.dataForm)
-      },
-      // 提交
-      submitForm(statusType) {
-        if((this.remarks=="") && ((statusType == 2) || (statusType == 3) )){
-          return this.$message({type: 'info',message: '请备注原因'});
-        }
+        .catch((_) => {});
+    },
+    closeDialog() {
+      // 清空数据
+      this.deptInfo = {};
+      this.remarks = "";
+      this.$refs["dataForm"].resetFields();
+      for (let key in this.dataForm) {
+        this.dataForm[key] = "";
+      }
+      this.dialogVisible = false;
+      console.log(this.dataForm);
+    },
+    // 提交
+    submitForm(statusType) {
+      if (this.remarks == "" && (statusType == 2 || statusType == 3)) {
+        return this.$message({ type: "info", message: "请备注原因" });
+      }
 
-        this.$confirm('是否确认提交？', '提示', {}).then(() => {
-            var data={
-              checkid:this.dataForm.checkid,
-              remark:this.remarks,
-              status:statusType
-            }
-            this.$api.user.checkUser(data).then(res => {
-              this.dialogVisible = false
-              this.findPage(null);
-              this.$message({
-                type: 'success',
-                message: '已提交'
-              });
+      this.$confirm("是否确认提交？", "提示", {})
+        .then(() => {
+          var data = {
+            userId: this.dataForm.id,
+            status: statusType,
+          };
+          this.$api.user.checkUser(data).then((res) => {
+            this.dialogVisible = false;
+            this.findPage();
+            this.$message({
+              type: "success",
+              message: "已提交",
             });
-        }).catch(() => {
+          });
+        })
+        .catch(() => {
           this.$message({
-            type: 'info',
-            message: '已取消审核'
+            type: "info",
+            message: "已取消审核",
           });
         });
+    },
+    // 新增或修改的弹出框End
 
-      },
-      // 新增或修改的弹出框End
-
-      // 上传图片的方法Start
-      beforeAvatarUpload(file) {
-        console.log(file);
-        const isJPG = (file.type === 'image/jpeg' ||  file.type === 'image/png') ;
-        const isLt2M = file.size / 1024 / 1024 < 2;
-        if (!isJPG) {
-          this.$message.error('上传图片只能是 JPG 或者 PNG 格式!');
-        }
-        if (!isLt2M) {
-          this.$message.error('上传图片大小不能超过 2MB!');
-        }
-        return isJPG && isLt2M;
-      },
-      httpRequest(options) {
-        console.log(options);
-          let file = options.file;
-          let filename = options.filename;
-          let reader  = new FileReader();
-          if (file) {
-              reader.readAsDataURL(file)
-          }
-          reader.onload = () => {
-              let base64Str = reader.result;
-              this.dataForm[options.filename] = base64Str;
-              console.log(options.filename)
-          }
+    // 上传图片的方法Start
+    beforeAvatarUpload(file) {
+      console.log(file);
+      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isJPG) {
+        this.$message.error("上传图片只能是 JPG 或者 PNG 格式!");
       }
-    }
-  }
+      if (!isLt2M) {
+        this.$message.error("上传图片大小不能超过 2MB!");
+      }
+      return isJPG && isLt2M;
+    },
+    httpRequest(options) {
+      console.log(options);
+      let file = options.file;
+      let filename = options.filename;
+      let reader = new FileReader();
+      if (file) {
+        reader.readAsDataURL(file);
+      }
+      reader.onload = () => {
+        let base64Str = reader.result;
+        this.dataForm[options.filename] = base64Str;
+        console.log(options.filename);
+      };
+    },
+  },
+};
 </script>
 
 <style scoped>
-  .el-divider--horizontal {
-    margin: 4px 0;
-  }
-  /* 顶部查询条件样式Start */
-  .queryFrom .el-row {
-    margin: 10px 0px;
-  }
-  .queryFrom .el-form-item {
-    margin-bottom: 0px;
-  }
-  .queryFrom .queryButton .el-form-item__content {
-    margin-left: 0px !important;
-  }
-  /* 顶部查询条件样式End */
-  /* 上传图片样式Start */
-  .avatar-uploader .el-upload {
-     border: 1px dashed #d9d9d9;
-     border-radius: 6px;
-     cursor: pointer;
-     position: relative;
-     overflow: hidden;
-   }
-   .avatar-uploader .el-upload:hover {
-     border-color: #409EFF;
-   }
-   .avatar-uploader-icon {
-     font-size: 28px;
-     color: #8c939d;
-     width: 100px;
-     height: 100px;
-     line-height: 100px;
-     text-align: center;
-     border: 1px dashed #d9d9d9;
-   }
-   .avatar {
-     border: 1px dashed #d9d9d9;
-     padding: 5px;
-     border-radius: 6px;
-     width: 100px;
-     height: 100px;
-     display: block;
-   }
-  /* 上传图片样式End */
+.el-divider--horizontal {
+  margin: 4px 0;
+}
+/* 顶部查询条件样式Start */
+.queryFrom .el-row {
+  margin: 10px 0px;
+}
+.queryFrom .el-form-item {
+  margin-bottom: 0px;
+}
+.queryFrom .queryButton .el-form-item__content {
+  margin-left: 0px !important;
+}
+/* 顶部查询条件样式End */
+/* 上传图片样式Start */
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+  border: 1px dashed #d9d9d9;
+}
+.avatar {
+  border: 1px dashed #d9d9d9;
+  padding: 5px;
+  border-radius: 6px;
+  width: 100px;
+  height: 100px;
+  display: block;
+}
+/* 上传图片样式End */
 
-  .imageLibraryItem{
-      margin-bottom: 10px;
-  }
-  .imageLibraryItem .imageLibraryItemTitle{
-    display: block; height: 40px;line-height: 40px; width: 100%; background: #F3F3F3;border:1px solid #DDDDDD
-  }
-  .imageLibraryItem .imageLibraryItemTitle label{
-    margin: 0px 15px;font-weight: bold;
-  }
-  .imageLibraryItem .imageLibraryItemBody{
-    width:100%;border: 1px solid #DDD;padding: 15px;border-top: none;
-  }
+.imageLibraryItem {
+  margin-bottom: 10px;
+}
+.imageLibraryItem .imageLibraryItemTitle {
+  display: block;
+  height: 40px;
+  line-height: 40px;
+  width: 100%;
+  background: #f3f3f3;
+  border: 1px solid #dddddd;
+}
+.imageLibraryItem .imageLibraryItemTitle label {
+  margin: 0px 15px;
+  font-weight: bold;
+}
+.imageLibraryItem .imageLibraryItemBody {
+  width: 100%;
+  border: 1px solid #ddd;
+  padding: 15px;
+  border-top: none;
+}
 </style>

src/views/PeopleManage/BasicLawAudit.vue

@@ -1,875 +1,1237 @@
 <template>
   <div class="main-container">
     <div class="page page-product-manage">
-		<!-- 标题 -->
-		<div class="com-apge-title">
-			<h2 class="title-content">基本法配置</h2>
-		</div>
-		<!-- 搜索区域 -->
-		<div class="com-pro-search">
-			<el-form label-position="left" ref="searchForm" size="medium" :model="searchForm" label-width="90px">
-				<el-row>
-					<el-col :span="8">
-						<el-form-item  label="基本法">
-							<el-input clearable v-model="searchForm.id"  placeholder="请输入基本法编号或基本法名称" style="width: 85%;"></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="8">
-						<el-form-item label="基本法状态" label-width="120px">
-							<el-select clearable v-model="searchForm.status1" placeholder="请选择" style="width: 85%;">
-							      <el-option label="暂存" value="0"></el-option>
-							      <el-option label="代生效" value="1"></el-option>
-							      <el-option label="生效" value="2"></el-option>
-							      <el-option label="失效" value="3"></el-option>
-							      <el-option label="停用" value="4"></el-option>
-							      <el-option label="过期" value="5"></el-option>
-							    </el-select>
-						</el-form-item>
-					</el-col>
-					<el-col :span="8">
-						<el-form-item label="审核状态">
-							<el-select clearable v-model="searchForm.status2" placeholder="请选择" style="width: 85%;">
-							      <el-option label="待审核" value="0"></el-option>
-							      <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="8" style="margin-top: 2px;">
-						<el-button size="small"  type="primary" style="background-color: #00bc70;border:1px solid #00bc70;">查询</el-button>
-						<el-button size="small" style="background-color: #FFFFFF;border:1px solid c6e2ff;">重置</el-button>
-					</el-col>
-				</el-row>
-			</el-form>
-		</div>
-		<!-- 操作按钮 -->
-		<!-- <div class="data-table-caption" style="padding-left: 20px;">
+      <!-- 标题 -->
+      <div class="com-apge-title">
+        <h2 class="title-content">基本法配置</h2>
+      </div>
+      <!-- 搜索区域 -->
+      <div class="com-pro-search">
+        <el-form
+          label-position="left"
+          ref="searchForm"
+          size="medium"
+          :model="searchForm"
+          label-width="90px"
+        >
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="基本法">
+                <el-input
+                  clearable
+                  v-model="searchForm.id"
+                  placeholder="请输入基本法编号或基本法名称"
+                  style="width: 85%"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="基本法状态" label-width="120px">
+                <el-select
+                  clearable
+                  v-model="searchForm.status1"
+                  placeholder="请选择"
+                  style="width: 85%"
+                >
+                  <el-option label="暂存" value="0"></el-option>
+                  <el-option label="代生效" value="1"></el-option>
+                  <el-option label="生效" value="2"></el-option>
+                  <el-option label="失效" value="3"></el-option>
+                  <el-option label="停用" value="4"></el-option>
+                  <el-option label="过期" value="5"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="审核状态">
+                <el-select
+                  clearable
+                  v-model="searchForm.status2"
+                  placeholder="请选择"
+                  style="width: 85%"
+                >
+                  <el-option label="待审核" value="0"></el-option>
+                  <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="8" style="margin-top: 2px">
+              <el-button
+                size="small"
+                type="primary"
+                style="background-color: #00bc70; border: 1px solid #00bc70"
+                >查询</el-button
+              >
+              <el-button
+                size="small"
+                style="background-color: #ffffff; border: 1px solid c6e2ff"
+                >重置</el-button
+              >
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <!-- 操作按钮 -->
+      <!-- <div class="data-table-caption" style="padding-left: 20px;">
 			<el-button size="small" type="primary" icon="fa fa-plus" style="background-color: #00bc70;border:1px solid #00bc70;" @click="dialogVisible = true"> 新增</el-button>
 		</div> -->
-		<div class="table-wrap">
-			<div class="saas-table" ref="commonTable">
-				<el-table  size="medium" :data="tableData" :height="tableHeight" stripe style="width: 100%" :header-cell-style="{background:'#F2F2F2',fontWeight: '700',color:'#343434',fontSize:'14px'}">
-				  <el-table-column prop="blCode" label="基本法编号" min-width="100"></el-table-column>
-				  <el-table-column prop="blName" label="基本法名称" min-width="120"></el-table-column>
-				  <el-table-column prop="status" label="基本法状态" min-width="120"></el-table-column>
-				  <el-table-column prop="approvalStatus" label="审核状态" min-width="120"></el-table-column>
-				  <el-table-column prop="version" label="版本号"></el-table-column>
-				  <el-table-column prop="validDate" label="起效日期" min-width="160"></el-table-column>
-				  <el-table-column prop="terminateDate" label="终止日期" min-width="160"></el-table-column>
-				  <el-table-column prop="decommissioningDate" label="停用日期" min-width="160"></el-table-column>
-				  <el-table-column prop="audiRemark" label="审核备注" min-width="140"></el-table-column>
-				  <el-table-column prop="auditTime" label="审核时间" min-width="160"></el-table-column>
-				  <el-table-column prop="auditUser" label="审核用户" min-width="140"></el-table-column>
-				  <el-table-column label="操作" min-width="200">
-					  <template slot-scope="scope">
-					    <el-button type="text" size="small"  class="textFontColor" @click="dialogVisible = true">审核</el-button>
-					  </template>
-				  </el-table-column>
-				</el-table>
-			</div>
-		</div>
-		<!-- 分页 -->
-		<div class="block bottomFixed" ref="bottomFixed">
-		    <el-pagination
-		      @size-change="handleSizeChange"
-		      @current-change="handleCurrentChange"
-		      :current-page="currentPage"
-		      :page-sizes="[100, 200, 300, 400]"
-		      :page-size="100"
-		      layout="total, sizes, prev, pager, next, jumper"
-		      :total="400"
-			  class="u-f-je u-f-ac"
-			  style="height:50px"
-			  >
-		    </el-pagination>
-		  </div>
-	</div>
-	
-	<el-dialog title="基本法编辑" :visible.sync="dialogVisible" width="1200px" :before-close="handleClose">
-		<el-form label-position="left" ref="dataForm" size="medium" :model="dataForm" label-width="100px">
-			
-			<el-tabs v-model="activeName" @tab-click="handleClick">
-			  <el-tab-pane label="基本信息" name="first">
-				<el-row style="margin-top: 15px;">
-				  	<el-col :span="8">
-				  		<el-form-item  label="基本法编号">
-				  			<el-input clearable v-model="dataForm.blCode"  placeholder="请输入基本法编号或基本法名称" style="width: 85%;"></el-input>
-				  		</el-form-item>
-				  	</el-col>
-					<el-col :span="8">
-						<el-form-item  label="基本法名称">
-							<el-input clearable v-model="dataForm.blName"  placeholder="请输入基本法编号或基本法名称" style="width: 85%;"></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="8">
-						<el-form-item label="起效日期" >
-							<el-date-picker
-							  clearable
-							  style="width: 85%;"
-							  v-model="dataForm.validDate"
-							  type="date"
-							  placeholder="请选择"
-							  range-separator="至"
-							  start-placeholder="开始日期"
-							  end-placeholder="结束日期">
-							</el-date-picker>
-						</el-form-item>
-					</el-col>
-					<el-col :span="16">
-						<el-form-item label="起效日期" >
-							<el-date-picker
-							  clearable
-							  style="width: 94%;"
-							  v-model="dataForm.date"
-							  type="daterange"
-							  range-separator="至"
-							  start-placeholder="开始日期"
-							  end-placeholder="结束日期">
-							</el-date-picker>
-						</el-form-item>
-					</el-col>
-				</el-row>
-				
-				<div class="block-title">计绩月周期规则</div>
-				<div class="block-content">
-					<el-row>
-						<el-form-item  label="受理截止日期" label-width="120px">
-							<el-row>
-								<el-col :span="5">
-									<el-form-item  label="M+" label-width="30px">
-										<el-input clearable v-model="dataForm.deadlineMonth"  placeholder="请输入" style="width: 85%;"></el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :span="5">
-									<el-form-item  label="M+" label-width="30px">
-										<el-input clearable v-model="dataForm.deadlineDay"  placeholder="请输入" style="width: 85%;"></el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :span="4">
-									<el-form-item  label="" label-width="0px">
-										<el-checkbox v-model="dataForm.lastDayInMonth"> 每月最后一天</el-checkbox>
-									</el-form-item>
-								</el-col>
-								<el-col :span="10">
-									<el-form-item label="节假日/双休日规则" label-width="150px">
-										<el-select clearable v-model="dataForm.periodRuleType" placeholder="请选择" style="width: 85%;">
-											  <el-option label="提前到工作日" value="0"></el-option>
-											  <el-option label="顺延到工作日" value="1"></el-option>
-											  <el-option label="无需修改" value="2"></el-option>
-											</el-select>
-									</el-form-item>
-								</el-col>
-							</el-row>
-						</el-form-item>
-					</el-row>
-					<el-row>
-						<el-form-item  label="签发截止日期" label-width="120px">
-							<el-row>
-								<el-col :span="5">
-									<el-form-item  label="M+" label-width="30px">
-										<el-input clearable v-model="dataForm.deadlineMonth"  placeholder="请输入" style="width: 85%;"></el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :span="5">
-									<el-form-item  label="M+" label-width="30px">
-										<el-input clearable v-model="dataForm.deadlineDay"  placeholder="请输入" style="width: 85%;"></el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :span="4">
-									<el-form-item  label="" label-width="0px">
-										<el-checkbox v-model="dataForm.lastDayInMonth"> 每月最后一天</el-checkbox>
-									</el-form-item>
-								</el-col>
-								<el-col :span="10">
-									<el-form-item label="节假日/双休日规则" label-width="150px">
-										<el-select clearable v-model="dataForm.periodRuleType" placeholder="请选择" style="width: 85%;">
-											  <el-option label="提前到工作日" value="0"></el-option>
-											  <el-option label="顺延到工作日" value="1"></el-option>
-											  <el-option label="无需修改" value="2"></el-option>
-											</el-select>
-									</el-form-item>
-								</el-col>
-							</el-row>
-						</el-form-item>
-					</el-row>
-					<el-row>
-						<el-form-item  label="过犹截止日期" label-width="120px">
-							<el-row>
-								<el-col :span="5">
-									<el-form-item  label="M+" label-width="30px">
-										<el-input clearable v-model="dataForm.deadlineMonth"  placeholder="请输入" style="width: 85%;"></el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :span="5">
-									<el-form-item  label="M+" label-width="30px">
-										<el-input clearable v-model="dataForm.deadlineDay"  placeholder="请输入" style="width: 85%;"></el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :span="4">
-									<el-form-item  label="" label-width="0px">
-										<el-checkbox v-model="dataForm.lastDayInMonth"> 每月最后一天</el-checkbox>
-									</el-form-item>
-								</el-col>
-								<el-col :span="10">
-									<el-form-item label="节假日/双休日规则" label-width="150px">
-										<el-select clearable v-model="dataForm.periodRuleType" placeholder="请选择" style="width: 85%;">
-											  <el-option label="提前到工作日" value="0"></el-option>
-											  <el-option label="顺延到工作日" value="1"></el-option>
-											  <el-option label="无需修改" value="2"></el-option>
-											</el-select>
-									</el-form-item>
-								</el-col>
-							</el-row>
-						</el-form-item>
-					</el-row>
-					<el-row>
-						<el-form-item  label="回执截止日期" label-width="120px">
-							<el-row>
-								<el-col :span="5">
-									<el-form-item  label="M+" label-width="30px">
-										<el-input clearable v-model="dataForm.deadlineMonth"  placeholder="请输入" style="width: 85%;"></el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :span="5">
-									<el-form-item  label="M+" label-width="30px">
-										<el-input clearable v-model="dataForm.deadlineDay"  placeholder="请输入" style="width: 85%;"></el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :span="4">
-									<el-form-item  label="" label-width="0px">
-										<el-checkbox v-model="dataForm.lastDayInMonth"> 每月最后一天</el-checkbox>
-									</el-form-item>
-								</el-col>
-								<el-col :span="10">
-									<el-form-item label="节假日/双休日规则" label-width="150px">
-										<el-select clearable v-model="dataForm.periodRuleType" placeholder="请选择" style="width: 85%;">
-											  <el-option label="提前到工作日" value="0"></el-option>
-											  <el-option label="顺延到工作日" value="1"></el-option>
-											  <el-option label="无需修改" value="2"></el-option>
-											</el-select>
-									</el-form-item>
-								</el-col>
-							</el-row>
-						</el-form-item>
-					</el-row>
-					<el-row>
-						<el-form-item  label="回访截止日期" label-width="120px">
-							<el-row>
-								<el-col :span="5">
-									<el-form-item  label="M+" label-width="30px">
-										<el-input clearable v-model="dataForm.deadlineMonth"  placeholder="请输入" style="width: 85%;"></el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :span="5">
-									<el-form-item  label="M+" label-width="30px">
-										<el-input clearable v-model="dataForm.deadlineDay"  placeholder="请输入" style="width: 85%;"></el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :span="4">
-									<el-form-item  label="" label-width="0px">
-										<el-checkbox v-model="dataForm.lastDayInMonth"> 每月最后一天</el-checkbox>
-									</el-form-item>
-								</el-col>
-								<el-col :span="10">
-									<el-form-item label="节假日/双休日规则" label-width="150px">
-										<el-select clearable v-model="dataForm.periodRuleType" placeholder="请选择" style="width: 85%;">
-											  <el-option label="提前到工作日" value="0"></el-option>
-											  <el-option label="顺延到工作日" value="1"></el-option>
-											  <el-option label="无需修改" value="2"></el-option>
-											</el-select>
-									</el-form-item>
-								</el-col>
-							</el-row>
-						</el-form-item>
-					</el-row>
-				</div>
-				
-				<div>
-					<el-form-item  label="客户告知书已收回" label-width="160px">
-						<el-checkbox v-model="dataForm.customerNoticeStatus"> 已收回</el-checkbox>
-					</el-form-item>
-				</div>
-				
-			  </el-tab-pane>
-			  <el-tab-pane label="佣金项" name="second">
-				  <el-row style="margin-top: 15px;">
-				    	<el-col :span="8">
-				    		<el-form-item  label="基本法编号">
-				    			123232323
-				    		</el-form-item>
-				    	</el-col>
-				  	<el-col :span="8">
-				  		<el-form-item  label="基本法名称">
-				  			1213
-				  		</el-form-item>
-				  	</el-col>
-				  	<el-col :span="8">
-				  		<el-form-item label="生效日期" >
-				  			2021-03-24
-				  		</el-form-item>
-				  	</el-col>
-				  	<el-col :span="8">
-				  		<el-form-item label="失效日期" >
-				  			2021-04-07
-				  		</el-form-item>
-				  	</el-col>
-					<el-col :span="8">
-						<el-form-item label="起效日期" >
-							2021-04-07
-						</el-form-item>
-					</el-col>
-				  </el-row>
-				  <div class="block-title">佣金项配置</div>
-				  
-				  <div class="data-table-caption">
-				  	<el-button size="small" type="primary" icon="fa fa-plus" style="background-color: #00bc70;border:1px solid #00bc70;" @click="dialogVisible1 = true"> 添加</el-button>
-				  </div>
-				  
-				  <div class="table-wrap">
-				  	<div class="saas-table" ref="commonTable">
-				  		<el-table  size="medium" :data="tableData1" stripe style="width: 100%" :header-cell-style="{background:'#F2F2F2',fontWeight: '700',color:'#343434',fontSize:'14px'}">
-				  			<el-table-column :selectable='selectInit' prop="address1" type="selection" width="60"> </el-table-column>
-				  		  <el-table-column prop="address1" label="佣金项顺序" min-width="100"> </el-table-column>
-				  		  <el-table-column prop="address2" label="佣金项" min-width="140"></el-table-column>
-				  		  <el-table-column prop="address3" label="佣金项类别"></el-table-column>
-				  		  <el-table-column prop="address4" label="计佣频率" min-width="120"></el-table-column>
-				  		  <el-table-column fixed="right" label="操作" width="100">
-				  			<template slot-scope="scope">
-				  			  <el-button type="text" class="textFontColor" size="small">编辑</el-button>
-				  			</template>
-				  		  </el-table-column>
-				  		</el-table>
-				  	</div>
-				  </div>
-				  
-			  </el-tab-pane>
-			  <el-tab-pane label="考核规则" name="third">
-				  <el-row style="margin-top: 15px;">
-				    	<el-col :span="8">
-				    		<el-form-item  label="基本法编号">123232323</el-form-item>
-				    	</el-col>
-				  	<el-col :span="8">
-				  		<el-form-item  label="基本法名称">1213</el-form-item>
-				  	</el-col>
-				  	<el-col :span="8">
-				  		<el-form-item label="生效日期" >2021-03-24</el-form-item>
-				  	</el-col>
-				  	<el-col :span="8">
-				  		<el-form-item label="失效日期" >2021-04-07</el-form-item>
-				  	</el-col>
-					<el-col :span="8">
-						<el-form-item label="起效日期" >2021-04-07</el-form-item>
-					</el-col>
-				  </el-row>
-				  
-				  
-				  <el-tabs v-model="activeTab" type="card" @tab-click="handleClick">
-				      <el-tab-pane label="考核项" name="first">
-						  <div class="block-title">考核项设置</div>
-						  <div class="table-wrap">
-						  	<div class="saas-table" ref="commonTable">
-						  		<el-table  size="medium" :data="tableData"  stripe style="width: 100%" :header-cell-style="{background:'#F2F2F2',fontWeight: '700',color:'#343434',fontSize:'14px'}">
-						  		  <el-table-column prop="blCode" label="考核指标" min-width="100"></el-table-column>
-						  		  <el-table-column prop="blName" label="考核类型" min-width="120"></el-table-column>
-						  		  <el-table-column prop="status" label="考核指标描述" min-width="120"></el-table-column>
-						  		  
-						  		  <el-table-column label="操作" min-width="200">
-						  			  <template slot-scope="scope">
-						  			    <el-button  type="text" size="small"  class="textFontColor">查看</el-button>
-						  			  </template>
-						  		  </el-table-column>
-						  		</el-table>
-						  	</div>
-						  </div>
-					  
-					  </el-tab-pane>
-				      <el-tab-pane label="考核时间点" name="second">
-						  <el-row style="margin-top: 15px;">
-						    	<el-col :span="12">
-						    		<el-form-item  label="业务主管">
-										<el-form-item  label="考核频率">
-											<el-select clearable v-model="searchForm.status2" placeholder="请选择" style="width: 85%;">
-											      <el-option label="月" value="月"></el-option>
-												  <el-option label="季度" value="季度"></el-option>
-											      <el-option label="半年" value="半年"></el-option>
-											      <el-option label="年" value="年"></el-option>
-											    </el-select>
-										</el-form-item>
-									</el-form-item>
-						    	</el-col>
-						  </el-row>
-						  <el-row style="margin-top: 15px;">
-						    	<el-col :span="12">
-						    		<el-form-item  label="业务总监">
-						  										<el-form-item  label="考核频率">
-						  											<el-select clearable v-model="searchForm.status2" placeholder="请选择" style="width: 85%;">
-						  											      <el-option label="月" value="月"></el-option>
-						  												  <el-option label="季度" value="季度"></el-option>
-						  											      <el-option label="半年" value="半年"></el-option>
-						  											      <el-option label="年" value="年"></el-option>
-						  											    </el-select>
-						  										</el-form-item>
-						  									</el-form-item>
-						    	</el-col>
-						  </el-row>
-						  <el-row style="margin-top: 15px;">
-						    	<el-col :span="12">
-						    		<el-form-item  label="普通业务员">
-						  										<el-form-item  label="考核频率">
-						  											<el-select clearable v-model="searchForm.status2" placeholder="请选择" style="width: 85%;">
-						  											      <el-option label="月" value="月"></el-option>
-						  												  <el-option label="季度" value="季度"></el-option>
-						  											      <el-option label="半年" value="半年"></el-option>
-						  											      <el-option label="年" value="年"></el-option>
-						  											    </el-select>
-						  										</el-form-item>
-						  									</el-form-item>
-						    	</el-col>
-						  </el-row>
-						  <el-row style="margin-top: 15px;">
-						    	<el-col :span="12">
-						    		<el-form-item  label="高级业务员">
-						  										<el-form-item  label="考核频率">
-						  											<el-select clearable v-model="searchForm.status2" placeholder="请选择" style="width: 85%;">
-						  											      <el-option label="月" value="月"></el-option>
-						  												  <el-option label="季度" value="季度"></el-option>
-						  											      <el-option label="半年" value="半年"></el-option>
-						  											      <el-option label="年" value="年"></el-option>
-						  											    </el-select>
-						  										</el-form-item>
-						  									</el-form-item>
-						    	</el-col>
-						  </el-row>
-					  </el-tab-pane>
-				      <el-tab-pane label="考核顺序" name="third">
-						  <div class="block-title">考核顺序设置</div>
-						  <div class="table-wrap">
-						  	<div class="saas-table" ref="commonTable">
-						  		<el-table  size="medium" :data="tableData"  stripe style="width: 100%" :header-cell-style="{background:'#F2F2F2',fontWeight: '700',color:'#343434',fontSize:'14px'}">
-						  		  <el-table-column prop="blCode" label="顺序序号" min-width="100"></el-table-column>
-						  		  <el-table-column prop="blName" label="考核类型" min-width="120"></el-table-column>
-						  		  <el-table-column prop="status" label="职级" min-width="120"></el-table-column>
-						  		  
-						  		  <el-table-column label="操作" min-width="200">
-						  			  <template slot-scope="scope">
-						  			    <el-button  type="text" size="small"  class="textFontColor">查看</el-button>
-						  			  </template>
-						  		  </el-table-column>
-						  		</el-table>
-						  	</div>
-						  </div>
-					  </el-tab-pane>
-				      <el-tab-pane label="考核结果规则" name="fourth">
-						<div class="block-content">
-							<el-row>
-								<el-form-item  label="业务主管" label-width="120px">
-									<el-row>
-										<el-col :span="5">
-											<el-form-item label-width="0px">
-												<el-radio-group v-model="dataForm.shengji">
-													<el-radio :label="1">逐级晋升</el-radio>
-													<el-radio :label="2">跨级晋升</el-radio>
-												  </el-radio-group>
-												  </el-form-item>
-										</el-col>
-										<el-col :span="7">
-											<el-form-item  label="可晋升职级" label-width="100px">
-												<el-input clearable v-model="dataForm.deadlineMonth"  placeholder="请输入" style="width: 85%;"></el-input>
-											</el-form-item>
-										</el-col>
-										<el-col :span="5">
-											<el-form-item label-width="0px">
-												<el-radio-group v-model="dataForm.shengji">
-													<el-radio :label="1">逐级降级</el-radio>
-													<el-radio :label="2">跨级降级</el-radio>
-												  </el-radio-group>
-												  </el-form-item>
-										</el-col>
-										<el-col :span="7">
-											<el-form-item  label="可降级职级" label-width="100px">
-												<el-input clearable v-model="dataForm.deadlineMonth"  placeholder="请输入" style="width: 85%;"></el-input>
-											</el-form-item>
-										</el-col>
-									</el-row>
-								</el-form-item>
-							</el-row>
-							
-						</div>  
-					  </el-tab-pane>
-				    </el-tabs>
-			  </el-tab-pane>
-			</el-tabs>
-		</el-form>
-	  
-	  <span slot="footer" class="dialog-footer">
-	    <el-button @click="dialogVisible = false">取 消</el-button>
-	    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
-	  </span>
-	</el-dialog>
-	
-	
-	<el-dialog title="新增佣金项" :visible.sync="dialogVisible1" width="1000px">
-	  <el-form label-position="left" ref="dataForm" size="medium" :model="dataForm" label-width="100px">
-		<el-row style="margin-top: 15px;">
-		  	<el-col :span="8">
-		  		<el-form-item  label="佣金项名称">
-		  			<el-input clearable v-model="dataForm.blCode"  placeholder="请输入" style="width: 85%;"></el-input>
-		  		</el-form-item>
-		  	</el-col>
-			<el-col :span="8">
-				<el-form-item  label="佣金项名称">
-					<el-input clearable v-model="dataForm.blCode"  placeholder="请输入" style="width: 85%;"></el-input>
-				</el-form-item>
-			</el-col>
-			<el-col :span="8">
-				<el-form-item  label="计佣频率">
-					<el-input clearable v-model="dataForm.blCode"  placeholder="请输入" style="width: 85%;"></el-input>
-				</el-form-item>
-			</el-col>
-			<el-col :span="8">
-				<el-form-item  label="佣金项类型">
-					<el-input clearable v-model="dataForm.blCode"  placeholder="请输入" style="width: 85%;"></el-input>
-				</el-form-item>
-			</el-col>
-			<el-col :span="8">
-				<el-form-item  label="佣金项财务分类" label-width="140px">
-					<el-input clearable v-model="dataForm.blCode"  placeholder="请输入" style="width: 85%;"></el-input>
-				</el-form-item>
-			</el-col>
-			<el-col :span="24">
-				<el-form-item  label="佣金项描述">
-					<el-input type="textarea" :rows="2" placeholder="请输入" v-model="dataForm.blCode"></el-input>
-				</el-form-item>
-			</el-col>
-			<el-col :span="8">
-				<el-form-item  label="使用公式" >
-					<el-input clearable v-model="dataForm.blCode"  placeholder="请输入" style="width: 85%;"></el-input>
-				</el-form-item>
-			</el-col>
-		</el-row>	
-	 </el-form>
-	  <span slot="footer" class="dialog-footer">
-	    <el-button @click="dialogVisible1 = false">取 消</el-button>
-	    <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
-	  </span>
-	</el-dialog>
-	
+      <div class="table-wrap">
+        <div class="saas-table" ref="commonTable">
+          <el-table
+            size="medium"
+            :data="tableData"
+            :height="tableHeight"
+            stripe
+            style="width: 100%"
+            :header-cell-style="{
+              background: '#F2F2F2',
+              fontWeight: '700',
+              color: '#343434',
+              fontSize: '14px',
+            }"
+          >
+            <el-table-column
+              prop="blCode"
+              label="基本法编号"
+              min-width="100"
+            ></el-table-column>
+            <el-table-column
+              prop="blName"
+              label="基本法名称"
+              min-width="120"
+            ></el-table-column>
+            <el-table-column
+              prop="status"
+              label="基本法状态"
+              min-width="120"
+            ></el-table-column>
+            <el-table-column
+              prop="approvalStatus"
+              label="审核状态"
+              min-width="120"
+            ></el-table-column>
+            <el-table-column prop="version" label="版本号"></el-table-column>
+            <el-table-column
+              prop="validDate"
+              label="起效日期"
+              min-width="160"
+            ></el-table-column>
+            <el-table-column
+              prop="terminateDate"
+              label="终止日期"
+              min-width="160"
+            ></el-table-column>
+            <el-table-column
+              prop="decommissioningDate"
+              label="停用日期"
+              min-width="160"
+            ></el-table-column>
+            <el-table-column
+              prop="audiRemark"
+              label="审核备注"
+              min-width="140"
+            ></el-table-column>
+            <el-table-column
+              prop="auditTime"
+              label="审核时间"
+              min-width="160"
+            ></el-table-column>
+            <el-table-column
+              prop="auditUser"
+              label="审核用户"
+              min-width="140"
+            ></el-table-column>
+            <el-table-column label="操作" min-width="200">
+              <template slot-scope="scope">
+                <el-button
+                  type="text"
+                  size="small"
+                  class="textFontColor"
+                  @click="dialogVisible = true"
+                  >审核</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <!-- 分页 -->
+      <div class="block bottomFixed" ref="bottomFixed">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[100, 200, 300, 400]"
+          :page-size="100"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="400"
+          class="u-f-je u-f-ac"
+          style="height: 50px"
+        >
+        </el-pagination>
+      </div>
+    </div>
+
+    <el-dialog
+      title="基本法编辑"
+      :visible.sync="dialogVisible"
+      width="1200px"
+      :before-close="handleClose"
+    >
+      <el-form
+        label-position="left"
+        ref="dataForm"
+        size="medium"
+        :model="dataForm"
+        label-width="100px"
+      >
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="基本信息" name="first">
+            <el-row style="margin-top: 15px">
+              <el-col :span="8">
+                <el-form-item label="基本法编号">
+                  <el-input
+                    clearable
+                    v-model="dataForm.blCode"
+                    placeholder="请输入基本法编号或基本法名称"
+                    style="width: 85%"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="基本法名称">
+                  <el-input
+                    clearable
+                    v-model="dataForm.blName"
+                    placeholder="请输入基本法编号或基本法名称"
+                    style="width: 85%"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="起效日期">
+                  <el-date-picker
+                    clearable
+                    style="width: 85%"
+                    v-model="dataForm.validDate"
+                    type="date"
+                    placeholder="请选择"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :span="16">
+                <el-form-item label="起效日期">
+                  <el-date-picker
+                    clearable
+                    style="width: 94%"
+                    v-model="dataForm.date"
+                    type="daterange"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <div class="block-title">计绩月周期规则</div>
+            <div class="block-content">
+              <el-row>
+                <el-form-item label="受理截止日期" label-width="120px">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-form-item label="M+" label-width="30px">
+                        <el-input
+                          clearable
+                          v-model="dataForm.deadlineMonth"
+                          placeholder="请输入"
+                          style="width: 85%"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="5">
+                      <el-form-item label="M+" label-width="30px">
+                        <el-input
+                          clearable
+                          v-model="dataForm.deadlineDay"
+                          placeholder="请输入"
+                          style="width: 85%"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="4">
+                      <el-form-item label="" label-width="0px">
+                        <el-checkbox v-model="dataForm.lastDayInMonth">
+                          每月最后一天</el-checkbox
+                        >
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="10">
+                      <el-form-item
+                        label="节假日/双休日规则"
+                        label-width="150px"
+                      >
+                        <el-select
+                          clearable
+                          v-model="dataForm.periodRuleType"
+                          placeholder="请选择"
+                          style="width: 85%"
+                        >
+                          <el-option label="提前到工作日" value="0"></el-option>
+                          <el-option label="顺延到工作日" value="1"></el-option>
+                          <el-option label="无需修改" value="2"></el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="签发截止日期" label-width="120px">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-form-item label="M+" label-width="30px">
+                        <el-input
+                          clearable
+                          v-model="dataForm.deadlineMonth"
+                          placeholder="请输入"
+                          style="width: 85%"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="5">
+                      <el-form-item label="M+" label-width="30px">
+                        <el-input
+                          clearable
+                          v-model="dataForm.deadlineDay"
+                          placeholder="请输入"
+                          style="width: 85%"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="4">
+                      <el-form-item label="" label-width="0px">
+                        <el-checkbox v-model="dataForm.lastDayInMonth">
+                          每月最后一天</el-checkbox
+                        >
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="10">
+                      <el-form-item
+                        label="节假日/双休日规则"
+                        label-width="150px"
+                      >
+                        <el-select
+                          clearable
+                          v-model="dataForm.periodRuleType"
+                          placeholder="请选择"
+                          style="width: 85%"
+                        >
+                          <el-option label="提前到工作日" value="0"></el-option>
+                          <el-option label="顺延到工作日" value="1"></el-option>
+                          <el-option label="无需修改" value="2"></el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="过犹截止日期" label-width="120px">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-form-item label="M+" label-width="30px">
+                        <el-input
+                          clearable
+                          v-model="dataForm.deadlineMonth"
+                          placeholder="请输入"
+                          style="width: 85%"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="5">
+                      <el-form-item label="M+" label-width="30px">
+                        <el-input
+                          clearable
+                          v-model="dataForm.deadlineDay"
+                          placeholder="请输入"
+                          style="width: 85%"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="4">
+                      <el-form-item label="" label-width="0px">
+                        <el-checkbox v-model="dataForm.lastDayInMonth">
+                          每月最后一天</el-checkbox
+                        >
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="10">
+                      <el-form-item
+                        label="节假日/双休日规则"
+                        label-width="150px"
+                      >
+                        <el-select
+                          clearable
+                          v-model="dataForm.periodRuleType"
+                          placeholder="请选择"
+                          style="width: 85%"
+                        >
+                          <el-option label="提前到工作日" value="0"></el-option>
+                          <el-option label="顺延到工作日" value="1"></el-option>
+                          <el-option label="无需修改" value="2"></el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="回执截止日期" label-width="120px">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-form-item label="M+" label-width="30px">
+                        <el-input
+                          clearable
+                          v-model="dataForm.deadlineMonth"
+                          placeholder="请输入"
+                          style="width: 85%"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="5">
+                      <el-form-item label="M+" label-width="30px">
+                        <el-input
+                          clearable
+                          v-model="dataForm.deadlineDay"
+                          placeholder="请输入"
+                          style="width: 85%"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="4">
+                      <el-form-item label="" label-width="0px">
+                        <el-checkbox v-model="dataForm.lastDayInMonth">
+                          每月最后一天</el-checkbox
+                        >
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="10">
+                      <el-form-item
+                        label="节假日/双休日规则"
+                        label-width="150px"
+                      >
+                        <el-select
+                          clearable
+                          v-model="dataForm.periodRuleType"
+                          placeholder="请选择"
+                          style="width: 85%"
+                        >
+                          <el-option label="提前到工作日" value="0"></el-option>
+                          <el-option label="顺延到工作日" value="1"></el-option>
+                          <el-option label="无需修改" value="2"></el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="回访截止日期" label-width="120px">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-form-item label="M+" label-width="30px">
+                        <el-input
+                          clearable
+                          v-model="dataForm.deadlineMonth"
+                          placeholder="请输入"
+                          style="width: 85%"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="5">
+                      <el-form-item label="M+" label-width="30px">
+                        <el-input
+                          clearable
+                          v-model="dataForm.deadlineDay"
+                          placeholder="请输入"
+                          style="width: 85%"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="4">
+                      <el-form-item label="" label-width="0px">
+                        <el-checkbox v-model="dataForm.lastDayInMonth">
+                          每月最后一天</el-checkbox
+                        >
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="10">
+                      <el-form-item
+                        label="节假日/双休日规则"
+                        label-width="150px"
+                      >
+                        <el-select
+                          clearable
+                          v-model="dataForm.periodRuleType"
+                          placeholder="请选择"
+                          style="width: 85%"
+                        >
+                          <el-option label="提前到工作日" value="0"></el-option>
+                          <el-option label="顺延到工作日" value="1"></el-option>
+                          <el-option label="无需修改" value="2"></el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-row>
+            </div>
+
+            <div>
+              <el-form-item label="客户告知书已收回" label-width="160px">
+                <el-checkbox v-model="dataForm.customerNoticeStatus">
+                  已收回</el-checkbox
+                >
+              </el-form-item>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="佣金项" name="second">
+            <el-row style="margin-top: 15px">
+              <el-col :span="8">
+                <el-form-item label="基本法编号"> 123232323 </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="基本法名称"> 1213 </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="生效日期"> 2021-03-24 </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="失效日期"> 2021-04-07 </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="起效日期"> 2021-04-07 </el-form-item>
+              </el-col>
+            </el-row>
+            <div class="block-title">佣金项配置</div>
+
+            <div class="data-table-caption">
+              <el-button
+                size="small"
+                type="primary"
+                icon="fa fa-plus"
+                style="background-color: #00bc70; border: 1px solid #00bc70"
+                @click="dialogVisible1 = true"
+              >
+                添加</el-button
+              >
+            </div>
+
+            <div class="table-wrap">
+              <div class="saas-table" ref="commonTable">
+                <el-table
+                  size="medium"
+                  :data="tableData1"
+                  stripe
+                  style="width: 100%"
+                  :header-cell-style="{
+                    background: '#F2F2F2',
+                    fontWeight: '700',
+                    color: '#343434',
+                    fontSize: '14px',
+                  }"
+                >
+                  <el-table-column
+                    :selectable="selectInit"
+                    prop="address1"
+                    type="selection"
+                    width="60"
+                  >
+                  </el-table-column>
+                  <el-table-column
+                    prop="address1"
+                    label="佣金项顺序"
+                    min-width="100"
+                  >
+                  </el-table-column>
+                  <el-table-column
+                    prop="address2"
+                    label="佣金项"
+                    min-width="140"
+                  ></el-table-column>
+                  <el-table-column
+                    prop="address3"
+                    label="佣金项类别"
+                  ></el-table-column>
+                  <el-table-column
+                    prop="address4"
+                    label="计佣频率"
+                    min-width="120"
+                  ></el-table-column>
+                  <el-table-column fixed="right" label="操作" width="100">
+                    <template slot-scope="scope">
+                      <el-button type="text" class="textFontColor" size="small"
+                        >编辑</el-button
+                      >
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="考核规则" name="third">
+            <el-row style="margin-top: 15px">
+              <el-col :span="8">
+                <el-form-item label="基本法编号">123232323</el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="基本法名称">1213</el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="生效日期">2021-03-24</el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="失效日期">2021-04-07</el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="起效日期">2021-04-07</el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-tabs v-model="activeTab" type="card" @tab-click="handleClick">
+              <el-tab-pane label="考核项" name="first">
+                <div class="block-title">考核项设置</div>
+                <div class="table-wrap">
+                  <div class="saas-table" ref="commonTable">
+                    <el-table
+                      size="medium"
+                      :data="tableData"
+                      stripe
+                      style="width: 100%"
+                      :header-cell-style="{
+                        background: '#F2F2F2',
+                        fontWeight: '700',
+                        color: '#343434',
+                        fontSize: '14px',
+                      }"
+                    >
+                      <el-table-column
+                        prop="blCode"
+                        label="考核指标"
+                        min-width="100"
+                      ></el-table-column>
+                      <el-table-column
+                        prop="blName"
+                        label="考核类型"
+                        min-width="120"
+                      ></el-table-column>
+                      <el-table-column
+                        prop="status"
+                        label="考核指标描述"
+                        min-width="120"
+                      ></el-table-column>
+
+                      <el-table-column label="操作" min-width="200">
+                        <template slot-scope="scope">
+                          <el-button
+                            type="text"
+                            size="small"
+                            class="textFontColor"
+                            >查看</el-button
+                          >
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </div>
+                </div>
+              </el-tab-pane>
+              <el-tab-pane label="考核时间点" name="second">
+                <el-row style="margin-top: 15px">
+                  <el-col :span="12">
+                    <el-form-item label="业务主管">
+                      <el-form-item label="考核频率">
+                        <el-select
+                          clearable
+                          v-model="searchForm.status2"
+                          placeholder="请选择"
+                          style="width: 85%"
+                        >
+                          <el-option label="月" value="月"></el-option>
+                          <el-option label="季度" value="季度"></el-option>
+                          <el-option label="半年" value="半年"></el-option>
+                          <el-option label="年" value="年"></el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row style="margin-top: 15px">
+                  <el-col :span="12">
+                    <el-form-item label="业务总监">
+                      <el-form-item label="考核频率">
+                        <el-select
+                          clearable
+                          v-model="searchForm.status2"
+                          placeholder="请选择"
+                          style="width: 85%"
+                        >
+                          <el-option label="月" value="月"></el-option>
+                          <el-option label="季度" value="季度"></el-option>
+                          <el-option label="半年" value="半年"></el-option>
+                          <el-option label="年" value="年"></el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row style="margin-top: 15px">
+                  <el-col :span="12">
+                    <el-form-item label="普通业务员">
+                      <el-form-item label="考核频率">
+                        <el-select
+                          clearable
+                          v-model="searchForm.status2"
+                          placeholder="请选择"
+                          style="width: 85%"
+                        >
+                          <el-option label="月" value="月"></el-option>
+                          <el-option label="季度" value="季度"></el-option>
+                          <el-option label="半年" value="半年"></el-option>
+                          <el-option label="年" value="年"></el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row style="margin-top: 15px">
+                  <el-col :span="12">
+                    <el-form-item label="高级业务员">
+                      <el-form-item label="考核频率">
+                        <el-select
+                          clearable
+                          v-model="searchForm.status2"
+                          placeholder="请选择"
+                          style="width: 85%"
+                        >
+                          <el-option label="月" value="月"></el-option>
+                          <el-option label="季度" value="季度"></el-option>
+                          <el-option label="半年" value="半年"></el-option>
+                          <el-option label="年" value="年"></el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-tab-pane>
+              <el-tab-pane label="考核顺序" name="third">
+                <div class="block-title">考核顺序设置</div>
+                <div class="table-wrap">
+                  <div class="saas-table" ref="commonTable">
+                    <el-table
+                      size="medium"
+                      :data="tableData"
+                      stripe
+                      style="width: 100%"
+                      :header-cell-style="{
+                        background: '#F2F2F2',
+                        fontWeight: '700',
+                        color: '#343434',
+                        fontSize: '14px',
+                      }"
+                    >
+                      <el-table-column
+                        prop="blCode"
+                        label="顺序序号"
+                        min-width="100"
+                      ></el-table-column>
+                      <el-table-column
+                        prop="blName"
+                        label="考核类型"
+                        min-width="120"
+                      ></el-table-column>
+                      <el-table-column
+                        prop="status"
+                        label="职级"
+                        min-width="120"
+                      ></el-table-column>
+
+                      <el-table-column label="操作" min-width="200">
+                        <template slot-scope="scope">
+                          <el-button
+                            type="text"
+                            size="small"
+                            class="textFontColor"
+                            >查看</el-button
+                          >
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </div>
+                </div>
+              </el-tab-pane>
+              <el-tab-pane label="考核结果规则" name="fourth">
+                <div class="block-content">
+                  <el-row>
+                    <el-form-item label="业务主管" label-width="120px">
+                      <el-row>
+                        <el-col :span="5">
+                          <el-form-item label-width="0px">
+                            <el-radio-group v-model="dataForm.shengji">
+                              <el-radio :label="1">逐级晋升</el-radio>
+                              <el-radio :label="2">跨级晋升</el-radio>
+                            </el-radio-group>
+                          </el-form-item>
+                        </el-col>
+                        <el-col :span="7">
+                          <el-form-item label="可晋升职级" label-width="100px">
+                            <el-input
+                              clearable
+                              v-model="dataForm.deadlineMonth"
+                              placeholder="请输入"
+                              style="width: 85%"
+                            ></el-input>
+                          </el-form-item>
+                        </el-col>
+                        <el-col :span="5">
+                          <el-form-item label-width="0px">
+                            <el-radio-group v-model="dataForm.shengji">
+                              <el-radio :label="1">逐级降级</el-radio>
+                              <el-radio :label="2">跨级降级</el-radio>
+                            </el-radio-group>
+                          </el-form-item>
+                        </el-col>
+                        <el-col :span="7">
+                          <el-form-item label="可降级职级" label-width="100px">
+                            <el-input
+                              clearable
+                              v-model="dataForm.deadlineMonth"
+                              placeholder="请输入"
+                              style="width: 85%"
+                            ></el-input>
+                          </el-form-item>
+                        </el-col>
+                      </el-row>
+                    </el-form-item>
+                  </el-row>
+                </div>
+              </el-tab-pane>
+            </el-tabs>
+          </el-tab-pane>
+        </el-tabs>
+      </el-form>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+
+    <el-dialog title="新增佣金项" :visible.sync="dialogVisible1" width="1000px">
+      <el-form
+        label-position="left"
+        ref="dataForm"
+        size="medium"
+        :model="dataForm"
+        label-width="100px"
+      >
+        <el-row style="margin-top: 15px">
+          <el-col :span="8">
+            <el-form-item label="佣金项名称">
+              <el-input
+                clearable
+                v-model="dataForm.blCode"
+                placeholder="请输入"
+                style="width: 85%"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="佣金项名称">
+              <el-input
+                clearable
+                v-model="dataForm.blCode"
+                placeholder="请输入"
+                style="width: 85%"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="计佣频率">
+              <el-input
+                clearable
+                v-model="dataForm.blCode"
+                placeholder="请输入"
+                style="width: 85%"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="佣金项类型">
+              <el-input
+                clearable
+                v-model="dataForm.blCode"
+                placeholder="请输入"
+                style="width: 85%"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="佣金项财务分类" label-width="140px">
+              <el-input
+                clearable
+                v-model="dataForm.blCode"
+                placeholder="请输入"
+                style="width: 85%"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="佣金项描述">
+              <el-input
+                type="textarea"
+                :rows="2"
+                placeholder="请输入"
+                v-model="dataForm.blCode"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="使用公式">
+              <el-input
+                clearable
+                v-model="dataForm.blCode"
+                placeholder="请输入"
+                style="width: 85%"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible1 = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible1 = false"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-  export default {
-    components: {
-    },
-	mounted() {
-	  const that = this;
-	  setTimeout(() => {
-	    let tableTop = that.$refs.commonTable.offsetTop;
-	    let bottomTop = that.$refs.bottomFixed.offsetTop;
-	    that.tableHeight = (bottomTop-tableTop-120)+'px';
-	  },10);
-	  window.onresize = function() {
-	    let tableTop = that.$refs.commonTable.offsetTop;
-	    let bottomTop = that.$refs.bottomFixed.offsetTop;
-	    that.tableHeight = (bottomTop-tableTop-120)+'px';
-	  };
-	},
-    data() {
-      return {
-		dialogVisible1:false,
-		activeTab:'first',
-		  
-		dialogVisible:false,
-		activeName:'first',
-		dataForm:{
-			
-		},
-		tableData1:[],
-		  
-		tableHeight:0,
-		currentPage:1,
-		  
-		searchForm:{},
-		tableData:[{
-		  approvalStatus: '0',
-		  audiRemark: '',
-		  auditTime: '',
-		  auditUser: '',
-		  basicLawPeriodRuleList: [],
-		  blCode: "JBF01",
-		  blName: "基本法1号",
-		  commitTime: "2021-03-20 16:26:46",
-		  commitUser: "hehebaodai@abc.com",
-		  decommissioningDate: '',
-		  effectiveDate: "2021-01-26",
-		  expiryDate: "9999-12-31",
-		  id: '10035002',
-		  isNewest: "Y",
-		  status: '0',
-		  tenantId: '',
-		  terminateDate: "9999-12-31",
-		  validDate: "2022-02-04",
-		  version: '2',
-		},
-		{
-		  approvalStatus: '',
-		  audiRemark: '',
-		  auditTime: '',
-		  auditUser: '',
-		  basicLawPeriodRuleList: [],
-		  blCode: "S001",
-		  blName: "HHS001",
-		  commitTime: '',
-		  commitUser: '',
-		  decommissioningDate: '',
-		  effectiveDate: "2021-03-19",
-		  expiryDate: "2021-03-31",
-		  id: '10045003',
-		  isNewest: "Y",
-		  status: '0',
-		  tenantId: '',
-		  terminateDate: "2021-03-31",
-		  validDate: "2021-03-19",
-		  version: '1',
-		},
-		{
-			approvalStatus: '',
-			audiRemark: '',
-			auditTime: '',
-			auditUser: '',
-			basicLawPeriodRuleList: [],
-			blCode: "123",
-			blName: "344",
-			commitTime: '',
-			commitUser: '',
-			decommissioningDate: '',
-			effectiveDate: "2021-03-19",
-			expiryDate: "2021-03-31",
-			id: '10050001',
-			isNewest: "Y",
-			status: '0',
-			tenantId: '',
-			terminateDate: "2021-03-31",
-			validDate: "2021-03-19",
-			version: '1'
-		},{
-			approvalStatus: '',
-			audiRemark: '',
-			auditTime: '',
-			auditUser: '',
-			basicLawPeriodRuleList: [],
-			blCode: "222",
-			blName: "2223",
-			commitTime: '',
-			commitUser: '',
-			decommissioningDate: '',
-			effectiveDate: "2021-03-11",
-			expiryDate: "2021-03-31",
-			id: '10045002',
-			isNewest: "Y",
-			status: '0',
-			tenantId: '',
-			terminateDate: "2021-03-31",
-			validDate: "2021-03-11",
-			version: '1'
-		},{
-			approvalStatus: '',
-			audiRemark: '',
-			auditTime: '',
-			auditUser: '',
-			basicLawPeriodRuleList: [],
-			blCode: "HE123123",
-			blName: "HH",
-			commitTime: '',
-			commitUser: '',
-			decommissioningDate: '',
-			effectiveDate: "2021-03-10",
-			expiryDate: "2021-03-31",
-			id: '10045001',
-			isNewest: "Y",
-			status: '0',
-			tenantId: '',
-			terminateDate: "2021-03-31",
-			validDate: "2021-03-10",
-			version: '1'
-		},
-		{
-			approvalStatus: '',
-			audiRemark: '',
-			auditTime: '',
-			auditUser: '',
-			basicLawPeriodRuleList: [],
-			blCode: "1333",
-			blName: "222",
-			commitTime: '',
-			commitUser: '',
-			decommissioningDate: '',
-			effectiveDate: "2021-05-01",
-			expiryDate: "2021-06-03",
-			id: '10040001',
-			isNewest: "Y",
-			status: '0',
-			tenantId: '',
-			terminateDate: "2021-06-03",
-			validDate: "2021-06-03",
-			version: '1'
-		},
-		{
-			approvalStatus: '',
-			audiRemark: '',
-			auditTime: '',
-			auditUser: '',
-			basicLawPeriodRuleList: [],
-			blCode: "5",
-			blName: "5",
-			commitTime: '',
-			commitUser: '',
-			decommissioningDate: '',
-			effectiveDate: "2021-02-04",
-			expiryDate: "2021-02-04",
-			id: '10030002',
-			isNewest: "Y",
-			status: '0',
-			tenantId: '',
-			terminateDate: "2021-02-04",
-			validDate: "2021-02-04",
-			version: '1'
-		},
-		{
-			approvalStatus: '1',
-			audiRemark: "",
-			auditTime: "2021-01-26 12:24:18",
-			auditUser: "haier@abc.com",
-			basicLawPeriodRuleList: [],
-			blCode: "JBF01",
-			blName: "基本法1号",
-			commitTime: "2021-01-26 12:22:49",
-			commitUser: "haier@abc.com",
-			decommissioningDate: '',
-			effectiveDate: "2021-01-26",
-			expiryDate: "9999-12-31",
-			id: '10020002',
-			isNewest: "N",
-			status: '2',
-			tenantId: '',
-			terminateDate: "9999-12-31",
-			validDate: "2021-01-29",
-			version: '1'
-		}
-		],
+export default {
+  components: {},
+  mounted() {
+    const that = this;
+    setTimeout(() => {
+      let tableTop = that.$refs.commonTable.offsetTop;
+      let bottomTop = that.$refs.bottomFixed.offsetTop;
+      that.tableHeight = bottomTop - tableTop - 120 + "px";
+    }, 10);
+    window.onresize = function () {
+      let tableTop = that.$refs.commonTable.offsetTop;
+      let bottomTop = that.$refs.bottomFixed.offsetTop;
+      that.tableHeight = bottomTop - tableTop - 120 + "px";
+    };
+  },
+  data() {
+    return {
+      dialogVisible1: false,
+      activeTab: "first",
+
+      dialogVisible: false,
+      activeName: "first",
+      dataForm: {},
+      tableData1: [],
 
-	   }
+      tableHeight: 0,
+      currentPage: 1,
+
+      searchForm: {},
+      tableData: [
+        {
+          approvalStatus: "0",
+          audiRemark: "",
+          auditTime: "",
+          auditUser: "",
+          basicLawPeriodRuleList: [],
+          blCode: "JBF01",
+          blName: "基本法1号",
+          commitTime: "2021-03-20 16:26:46",
+          commitUser: "hehebaodai@abc.com",
+          decommissioningDate: "",
+          effectiveDate: "2021-01-26",
+          expiryDate: "9999-12-31",
+          id: "10035002",
+          isNewest: "Y",
+          status: "0",
+          tenantId: "",
+          terminateDate: "9999-12-31",
+          validDate: "2022-02-04",
+          version: "2",
+        },
+        {
+          approvalStatus: "",
+          audiRemark: "",
+          auditTime: "",
+          auditUser: "",
+          basicLawPeriodRuleList: [],
+          blCode: "S001",
+          blName: "HHS001",
+          commitTime: "",
+          commitUser: "",
+          decommissioningDate: "",
+          effectiveDate: "2021-03-19",
+          expiryDate: "2021-03-31",
+          id: "10045003",
+          isNewest: "Y",
+          status: "0",
+          tenantId: "",
+          terminateDate: "2021-03-31",
+          validDate: "2021-03-19",
+          version: "1",
+        },
+        {
+          approvalStatus: "",
+          audiRemark: "",
+          auditTime: "",
+          auditUser: "",
+          basicLawPeriodRuleList: [],
+          blCode: "123",
+          blName: "344",
+          commitTime: "",
+          commitUser: "",
+          decommissioningDate: "",
+          effectiveDate: "2021-03-19",
+          expiryDate: "2021-03-31",
+          id: "10050001",
+          isNewest: "Y",
+          status: "0",
+          tenantId: "",
+          terminateDate: "2021-03-31",
+          validDate: "2021-03-19",
+          version: "1",
+        },
+        {
+          approvalStatus: "",
+          audiRemark: "",
+          auditTime: "",
+          auditUser: "",
+          basicLawPeriodRuleList: [],
+          blCode: "222",
+          blName: "2223",
+          commitTime: "",
+          commitUser: "",
+          decommissioningDate: "",
+          effectiveDate: "2021-03-11",
+          expiryDate: "2021-03-31",
+          id: "10045002",
+          isNewest: "Y",
+          status: "0",
+          tenantId: "",
+          terminateDate: "2021-03-31",
+          validDate: "2021-03-11",
+          version: "1",
+        },
+        {
+          approvalStatus: "",
+          audiRemark: "",
+          auditTime: "",
+          auditUser: "",
+          basicLawPeriodRuleList: [],
+          blCode: "HE123123",
+          blName: "HH",
+          commitTime: "",
+          commitUser: "",
+          decommissioningDate: "",
+          effectiveDate: "2021-03-10",
+          expiryDate: "2021-03-31",
+          id: "10045001",
+          isNewest: "Y",
+          status: "0",
+          tenantId: "",
+          terminateDate: "2021-03-31",
+          validDate: "2021-03-10",
+          version: "1",
+        },
+        {
+          approvalStatus: "",
+          audiRemark: "",
+          auditTime: "",
+          auditUser: "",
+          basicLawPeriodRuleList: [],
+          blCode: "1333",
+          blName: "222",
+          commitTime: "",
+          commitUser: "",
+          decommissioningDate: "",
+          effectiveDate: "2021-05-01",
+          expiryDate: "2021-06-03",
+          id: "10040001",
+          isNewest: "Y",
+          status: "0",
+          tenantId: "",
+          terminateDate: "2021-06-03",
+          validDate: "2021-06-03",
+          version: "1",
+        },
+        {
+          approvalStatus: "",
+          audiRemark: "",
+          auditTime: "",
+          auditUser: "",
+          basicLawPeriodRuleList: [],
+          blCode: "5",
+          blName: "5",
+          commitTime: "",
+          commitUser: "",
+          decommissioningDate: "",
+          effectiveDate: "2021-02-04",
+          expiryDate: "2021-02-04",
+          id: "10030002",
+          isNewest: "Y",
+          status: "0",
+          tenantId: "",
+          terminateDate: "2021-02-04",
+          validDate: "2021-02-04",
+          version: "1",
+        },
+        {
+          approvalStatus: "1",
+          audiRemark: "",
+          auditTime: "2021-01-26 12:24:18",
+          auditUser: "haier@abc.com",
+          basicLawPeriodRuleList: [],
+          blCode: "JBF01",
+          blName: "基本法1号",
+          commitTime: "2021-01-26 12:22:49",
+          commitUser: "haier@abc.com",
+          decommissioningDate: "",
+          effectiveDate: "2021-01-26",
+          expiryDate: "9999-12-31",
+          id: "10020002",
+          isNewest: "N",
+          status: "2",
+          tenantId: "",
+          terminateDate: "9999-12-31",
+          validDate: "2021-01-29",
+          version: "1",
+        },
+      ],
+    };
+  },
+  watch: {},
+  methods: {
+    selectInit() {},
+    handleSizeChange() {},
+    handleCurrentChange() {},
+    handleClose(done) {
+      this.$confirm("确认关闭？")
+        .then((_) => {
+          done();
+        })
+        .catch((_) => {});
     },
-    watch:{
-      
+    handleClick(tab, event) {
+      console.log(tab, event);
     },
-    methods: {
-	  handleSizeChange(){
-		  
-	  },
-      handleCurrentChange(){
-		  
-	  },
-	  handleClose(done) {
-	    this.$confirm('确认关闭？')
-	  	.then(_ => {
-	  	  done();
-	  	})
-	  	.catch(_ => {});
-	  },
-	  handleClick(tab, event) {
-		console.log(tab, event);
-	  }
-      
-    }
-  }
+  },
+};
 </script>
 
 <style scoped lang="scss">
-.main-container{
-	flex: 1;
-	position: relative;
-	height: 100%;
-	background: #FFFFFF;
-	overflow: auto;
-	padding: 0 30px;
-	
-	font-family: Avenir,Helvetica,Arial,sans-serif;
-	color: #343434;
-	font-size: 14px;
-	line-height: 1.5;
-	margin-top: -60px;
-	.com-page-title{
-		.title-content{
-			padding-top: 20px;
-			padding-bottom: 20px;
-			text-align: left;
-		}
-	}
-	.com-pro-search{
-		margin-bottom: 20px;
-		.el-form{
-			padding: 0px 20px;
-			box-sizing: border-box;
-		}
-	}
-	.data-table-caption{
-		padding: 10px 0;
-		display: flex;
-		position: relative;
-		margin-left: 0;
-		margin-right: 0;
-		height: auto;
-		zoom: 1;
-	}
-	.table-wrap{
-		.saas-table{
-			color: #343434;
-			font-size: 16px;
-		}
-	}
-	
-	.block-title{
-		line-height: 2;
-		font-size: 18px;
-		font-weight: 700;
-	}
-	.block-content{
-		
-	}
-	
-	
-	.el-input >>> .el-input__inner,.el-input__inner,.el-select >>> .el-input__inner{
-		font-size: 16px;
-		border-radius: 0;
-		border-top-width: 0px;
-		border-left-width: 0px;
-		border-right-width: 0px;
-		border-bottom-width: 1px;
-		outline: medium;
-	}
-	.el-form-item >>> .el-form-item__label{
-		font-size: 16px;
-		font-weight: bold;
-	}
-	.textFontColor{
-		color:#00bc70!important;
-	}
+.main-container {
+  flex: 1;
+  position: relative;
+  height: 100%;
+  background: #ffffff;
+  overflow: auto;
+  padding: 0 30px;
+
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  color: #343434;
+  font-size: 14px;
+  line-height: 1.5;
+  margin-top: -60px;
+  .com-page-title {
+    .title-content {
+      padding-top: 20px;
+      padding-bottom: 20px;
+      text-align: left;
+    }
+  }
+  .com-pro-search {
+    margin-bottom: 20px;
+    .el-form {
+      padding: 0px 20px;
+      box-sizing: border-box;
+    }
+  }
+  .data-table-caption {
+    padding: 10px 0;
+    display: flex;
+    position: relative;
+    margin-left: 0;
+    margin-right: 0;
+    height: auto;
+    zoom: 1;
+  }
+  .table-wrap {
+    .saas-table {
+      color: #343434;
+      font-size: 16px;
+    }
+  }
+
+  .block-title {
+    line-height: 2;
+    font-size: 18px;
+    font-weight: 700;
+  }
+  .block-content {
+  }
+
+  .el-input >>> .el-input__inner,
+  .el-input__inner,
+  .el-select >>> .el-input__inner {
+    font-size: 16px;
+    border-radius: 0;
+    border-top-width: 0px;
+    border-left-width: 0px;
+    border-right-width: 0px;
+    border-bottom-width: 1px;
+    outline: medium;
+  }
+  .el-form-item >>> .el-form-item__label {
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .textFontColor {
+    color: #00bc70 !important;
+  }
 }
 
 .bottomFixed {
-	background-color: #0086B3;
-    height: 60px;
-    position: fixed;
-    bottom: 0;
-	right: 0;
-	left: 0;
-    width: 100%;
-    background: #fff;
-	.el-pagination{
-		margin-right: 40px;
-	}
+  background-color: #0086b3;
+  height: 60px;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  width: 100%;
+  background: #fff;
+  .el-pagination {
+    margin-right: 40px;
   }
+}
 </style>

src/views/PeopleManage/BasicLawManage.vue

@@ -1,877 +1,1251 @@
 <template>
   <div class="main-container">
     <div class="page page-product-manage">
-		<!-- 标题 -->
-		<div class="com-apge-title">
-			<h2 class="title-content">基本法配置</h2>
-		</div>
-		<!-- 搜索区域 -->
-		<div class="com-pro-search">
-			<el-form label-position="left" ref="searchForm" size="medium" :model="searchForm" label-width="90px">
-				<el-row>
-					<el-col :span="8">
-						<el-form-item  label="基本法">
-							<el-input clearable v-model="searchForm.id"  placeholder="请输入基本法编号或基本法名称" style="width: 85%;"></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="8">
-						<el-form-item label="基本法状态" label-width="120px">
-							<el-select clearable v-model="searchForm.status1" placeholder="请选择" style="width: 85%;">
-							      <el-option label="暂存" value="0"></el-option>
-							      <el-option label="代生效" value="1"></el-option>
-							      <el-option label="生效" value="2"></el-option>
-							      <el-option label="失效" value="3"></el-option>
-							      <el-option label="停用" value="4"></el-option>
-							      <el-option label="过期" value="5"></el-option>
-							    </el-select>
-						</el-form-item>
-					</el-col>
-					<el-col :span="8">
-						<el-form-item label="审核状态">
-							<el-select clearable v-model="searchForm.status2" placeholder="请选择" style="width: 85%;">
-							      <el-option label="待审核" value="0"></el-option>
-							      <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="8" style="margin-top: 2px;">
-						<el-button size="small"  type="primary" style="background-color: #00bc70;border:1px solid #00bc70;">查询</el-button>
-						<el-button size="small" style="background-color: #FFFFFF;border:1px solid c6e2ff;">重置</el-button>
-					</el-col>
-				</el-row>
-			</el-form>
-		</div>
-		<!-- 操作按钮 -->
-		<div class="data-table-caption" style="padding-left: 20px;">
-			<el-button size="small" type="primary" icon="fa fa-plus" style="background-color: #00bc70;border:1px solid #00bc70;" @click="dialogVisible = true"> 新增</el-button>
-		</div>
-		<div class="table-wrap">
-			<div class="saas-table" ref="commonTable">
-				<el-table  size="medium" :data="tableData" :height="tableHeight" stripe style="width: 100%" :header-cell-style="{background:'#F2F2F2',fontWeight: '700',color:'#343434',fontSize:'14px'}">
-				  <el-table-column prop="blCode" label="基本法编号" min-width="100"></el-table-column>
-				  <el-table-column prop="blName" label="基本法名称" min-width="120"></el-table-column>
-				  <el-table-column prop="status" label="基本法状态" min-width="120"></el-table-column>
-				  <el-table-column prop="approvalStatus" label="审核状态" min-width="120"></el-table-column>
-				  <el-table-column prop="version" label="版本号"></el-table-column>
-				  <el-table-column prop="validDate" label="起效日期" min-width="160"></el-table-column>
-				  <el-table-column prop="terminateDate" label="终止日期" min-width="160"></el-table-column>
-				  <el-table-column prop="decommissioningDate" label="停用日期" min-width="160"></el-table-column>
-				  <el-table-column prop="audiRemark" label="审核备注" min-width="140"></el-table-column>
-				  <el-table-column prop="auditTime" label="审核时间" min-width="160"></el-table-column>
-				  <el-table-column prop="auditUser" label="审核用户" min-width="140"></el-table-column>
-				  <el-table-column label="操作" min-width="200">
-					  <template slot-scope="scope">
-					    <el-button  type="text" size="small"  class="textFontColor">查看</el-button>
-					    <el-button type="text" size="small"  class="textFontColor" @click="dialogVisible = true">编辑</el-button>
-					    <el-button type="text" size="small" class="textFontColor">作废</el-button>
-					  </template>
-				  </el-table-column>
-				</el-table>
-			</div>
-		</div>
-		<!-- 分页 -->
-		<div class="block bottomFixed" ref="bottomFixed">
-		    <el-pagination
-		      @size-change="handleSizeChange"
-		      @current-change="handleCurrentChange"
-		      :current-page="currentPage"
-		      :page-sizes="[100, 200, 300, 400]"
-		      :page-size="100"
-		      layout="total, sizes, prev, pager, next, jumper"
-		      :total="400"
-			  class="u-f-je u-f-ac"
-			  style="height:50px"
-			  >
-		    </el-pagination>
-		  </div>
-	</div>
-	
-	<el-dialog title="基本法编辑" :visible.sync="dialogVisible" width="1200px" :before-close="handleClose">
-		<el-form label-position="left" ref="dataForm" size="medium" :model="dataForm" label-width="100px">
-			
-			<el-tabs v-model="activeName" @tab-click="handleClick">
-			  <el-tab-pane label="基本信息" name="first">
-				<el-row style="margin-top: 15px;">
-				  	<el-col :span="8">
-				  		<el-form-item  label="基本法编号">
-				  			<el-input clearable v-model="dataForm.blCode"  placeholder="请输入基本法编号或基本法名称" style="width: 85%;"></el-input>
-				  		</el-form-item>
-				  	</el-col>
-					<el-col :span="8">
-						<el-form-item  label="基本法名称">
-							<el-input clearable v-model="dataForm.blName"  placeholder="请输入基本法编号或基本法名称" style="width: 85%;"></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="8">
-						<el-form-item label="起效日期" >
-							<el-date-picker
-							  clearable
-							  style="width: 85%;"
-							  v-model="dataForm.validDate"
-							  type="date"
-							  placeholder="请选择"
-							  range-separator="至"
-							  start-placeholder="开始日期"
-							  end-placeholder="结束日期">
-							</el-date-picker>
-						</el-form-item>
-					</el-col>
-					<el-col :span="16">
-						<el-form-item label="起效日期" >
-							<el-date-picker
-							  clearable
-							  style="width: 94%;"
-							  v-model="dataForm.date"
-							  type="daterange"
-							  range-separator="至"
-							  start-placeholder="开始日期"
-							  end-placeholder="结束日期">
-							</el-date-picker>
-						</el-form-item>
-					</el-col>
-				</el-row>
-				
-				<div class="block-title">计绩月周期规则</div>
-				<div class="block-content">
-					<el-row>
-						<el-form-item  label="受理截止日期" label-width="120px">
-							<el-row>
-								<el-col :span="5">
-									<el-form-item  label="M+" label-width="30px">
-										<el-input clearable v-model="dataForm.deadlineMonth"  placeholder="请输入" style="width: 85%;"></el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :span="5">
-									<el-form-item  label="M+" label-width="30px">
-										<el-input clearable v-model="dataForm.deadlineDay"  placeholder="请输入" style="width: 85%;"></el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :span="4">
-									<el-form-item  label="" label-width="0px">
-										<el-checkbox v-model="dataForm.lastDayInMonth"> 每月最后一天</el-checkbox>
-									</el-form-item>
-								</el-col>
-								<el-col :span="10">
-									<el-form-item label="节假日/双休日规则" label-width="150px">
-										<el-select clearable v-model="dataForm.periodRuleType" placeholder="请选择" style="width: 85%;">
-											  <el-option label="提前到工作日" value="0"></el-option>
-											  <el-option label="顺延到工作日" value="1"></el-option>
-											  <el-option label="无需修改" value="2"></el-option>
-											</el-select>
-									</el-form-item>
-								</el-col>
-							</el-row>
-						</el-form-item>
-					</el-row>
-					<el-row>
-						<el-form-item  label="签发截止日期" label-width="120px">
-							<el-row>
-								<el-col :span="5">
-									<el-form-item  label="M+" label-width="30px">
-										<el-input clearable v-model="dataForm.deadlineMonth"  placeholder="请输入" style="width: 85%;"></el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :span="5">
-									<el-form-item  label="M+" label-width="30px">
-										<el-input clearable v-model="dataForm.deadlineDay"  placeholder="请输入" style="width: 85%;"></el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :span="4">
-									<el-form-item  label="" label-width="0px">
-										<el-checkbox v-model="dataForm.lastDayInMonth"> 每月最后一天</el-checkbox>
-									</el-form-item>
-								</el-col>
-								<el-col :span="10">
-									<el-form-item label="节假日/双休日规则" label-width="150px">
-										<el-select clearable v-model="dataForm.periodRuleType" placeholder="请选择" style="width: 85%;">
-											  <el-option label="提前到工作日" value="0"></el-option>
-											  <el-option label="顺延到工作日" value="1"></el-option>
-											  <el-option label="无需修改" value="2"></el-option>
-											</el-select>
-									</el-form-item>
-								</el-col>
-							</el-row>
-						</el-form-item>
-					</el-row>
-					<el-row>
-						<el-form-item  label="过犹截止日期" label-width="120px">
-							<el-row>
-								<el-col :span="5">
-									<el-form-item  label="M+" label-width="30px">
-										<el-input clearable v-model="dataForm.deadlineMonth"  placeholder="请输入" style="width: 85%;"></el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :span="5">
-									<el-form-item  label="M+" label-width="30px">
-										<el-input clearable v-model="dataForm.deadlineDay"  placeholder="请输入" style="width: 85%;"></el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :span="4">
-									<el-form-item  label="" label-width="0px">
-										<el-checkbox v-model="dataForm.lastDayInMonth"> 每月最后一天</el-checkbox>
-									</el-form-item>
-								</el-col>
-								<el-col :span="10">
-									<el-form-item label="节假日/双休日规则" label-width="150px">
-										<el-select clearable v-model="dataForm.periodRuleType" placeholder="请选择" style="width: 85%;">
-											  <el-option label="提前到工作日" value="0"></el-option>
-											  <el-option label="顺延到工作日" value="1"></el-option>
-											  <el-option label="无需修改" value="2"></el-option>
-											</el-select>
-									</el-form-item>
-								</el-col>
-							</el-row>
-						</el-form-item>
-					</el-row>
-					<el-row>
-						<el-form-item  label="回执截止日期" label-width="120px">
-							<el-row>
-								<el-col :span="5">
-									<el-form-item  label="M+" label-width="30px">
-										<el-input clearable v-model="dataForm.deadlineMonth"  placeholder="请输入" style="width: 85%;"></el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :span="5">
-									<el-form-item  label="M+" label-width="30px">
-										<el-input clearable v-model="dataForm.deadlineDay"  placeholder="请输入" style="width: 85%;"></el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :span="4">
-									<el-form-item  label="" label-width="0px">
-										<el-checkbox v-model="dataForm.lastDayInMonth"> 每月最后一天</el-checkbox>
-									</el-form-item>
-								</el-col>
-								<el-col :span="10">
-									<el-form-item label="节假日/双休日规则" label-width="150px">
-										<el-select clearable v-model="dataForm.periodRuleType" placeholder="请选择" style="width: 85%;">
-											  <el-option label="提前到工作日" value="0"></el-option>
-											  <el-option label="顺延到工作日" value="1"></el-option>
-											  <el-option label="无需修改" value="2"></el-option>
-											</el-select>
-									</el-form-item>
-								</el-col>
-							</el-row>
-						</el-form-item>
-					</el-row>
-					<el-row>
-						<el-form-item  label="回访截止日期" label-width="120px">
-							<el-row>
-								<el-col :span="5">
-									<el-form-item  label="M+" label-width="30px">
-										<el-input clearable v-model="dataForm.deadlineMonth"  placeholder="请输入" style="width: 85%;"></el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :span="5">
-									<el-form-item  label="M+" label-width="30px">
-										<el-input clearable v-model="dataForm.deadlineDay"  placeholder="请输入" style="width: 85%;"></el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :span="4">
-									<el-form-item  label="" label-width="0px">
-										<el-checkbox v-model="dataForm.lastDayInMonth"> 每月最后一天</el-checkbox>
-									</el-form-item>
-								</el-col>
-								<el-col :span="10">
-									<el-form-item label="节假日/双休日规则" label-width="150px">
-										<el-select clearable v-model="dataForm.periodRuleType" placeholder="请选择" style="width: 85%;">
-											  <el-option label="提前到工作日" value="0"></el-option>
-											  <el-option label="顺延到工作日" value="1"></el-option>
-											  <el-option label="无需修改" value="2"></el-option>
-											</el-select>
-									</el-form-item>
-								</el-col>
-							</el-row>
-						</el-form-item>
-					</el-row>
-				</div>
-				
-				<div>
-					<el-form-item  label="客户告知书已收回" label-width="160px">
-						<el-checkbox v-model="dataForm.customerNoticeStatus"> 已收回</el-checkbox>
-					</el-form-item>
-				</div>
-				
-			  </el-tab-pane>
-			  <el-tab-pane label="佣金项" name="second">
-				  <el-row style="margin-top: 15px;">
-				    	<el-col :span="8">
-				    		<el-form-item  label="基本法编号">
-				    			123232323
-				    		</el-form-item>
-				    	</el-col>
-				  	<el-col :span="8">
-				  		<el-form-item  label="基本法名称">
-				  			1213
-				  		</el-form-item>
-				  	</el-col>
-				  	<el-col :span="8">
-				  		<el-form-item label="生效日期" >
-				  			2021-03-24
-				  		</el-form-item>
-				  	</el-col>
-				  	<el-col :span="8">
-				  		<el-form-item label="失效日期" >
-				  			2021-04-07
-				  		</el-form-item>
-				  	</el-col>
-					<el-col :span="8">
-						<el-form-item label="起效日期" >
-							2021-04-07
-						</el-form-item>
-					</el-col>
-				  </el-row>
-				  <div class="block-title">佣金项配置</div>
-				  
-				  <div class="data-table-caption">
-				  	<el-button size="small" type="primary" icon="fa fa-plus" style="background-color: #00bc70;border:1px solid #00bc70;" @click="dialogVisible1 = true"> 添加</el-button>
-				  </div>
-				  
-				  <div class="table-wrap">
-				  	<div class="saas-table" ref="commonTable">
-				  		<el-table  size="medium" :data="tableData1" stripe style="width: 100%" :header-cell-style="{background:'#F2F2F2',fontWeight: '700',color:'#343434',fontSize:'14px'}">
-				  			<el-table-column :selectable='selectInit' prop="address1" type="selection" width="60"> </el-table-column>
-				  		  <el-table-column prop="address1" label="佣金项顺序" min-width="100"> </el-table-column>
-				  		  <el-table-column prop="address2" label="佣金项" min-width="140"></el-table-column>
-				  		  <el-table-column prop="address3" label="佣金项类别"></el-table-column>
-				  		  <el-table-column prop="address4" label="计佣频率" min-width="120"></el-table-column>
-				  		  <el-table-column fixed="right" label="操作" width="100">
-				  			<template slot-scope="scope">
-				  			  <el-button type="text" class="textFontColor" size="small">编辑</el-button>
-				  			</template>
-				  		  </el-table-column>
-				  		</el-table>
-				  	</div>
-				  </div>
-				  
-			  </el-tab-pane>
-			  <el-tab-pane label="考核规则" name="third">
-				  <el-row style="margin-top: 15px;">
-				    	<el-col :span="8">
-				    		<el-form-item  label="基本法编号">123232323</el-form-item>
-				    	</el-col>
-				  	<el-col :span="8">
-				  		<el-form-item  label="基本法名称">1213</el-form-item>
-				  	</el-col>
-				  	<el-col :span="8">
-				  		<el-form-item label="生效日期" >2021-03-24</el-form-item>
-				  	</el-col>
-				  	<el-col :span="8">
-				  		<el-form-item label="失效日期" >2021-04-07</el-form-item>
-				  	</el-col>
-					<el-col :span="8">
-						<el-form-item label="起效日期" >2021-04-07</el-form-item>
-					</el-col>
-				  </el-row>
-				  
-				  
-				  <el-tabs v-model="activeTab" type="card" @tab-click="handleClick">
-				      <el-tab-pane label="考核项" name="first">
-						  <div class="block-title">考核项设置</div>
-						  <div class="table-wrap">
-						  	<div class="saas-table" ref="commonTable">
-						  		<el-table  size="medium" :data="tableData"  stripe style="width: 100%" :header-cell-style="{background:'#F2F2F2',fontWeight: '700',color:'#343434',fontSize:'14px'}">
-						  		  <el-table-column prop="blCode" label="考核指标" min-width="100"></el-table-column>
-						  		  <el-table-column prop="blName" label="考核类型" min-width="120"></el-table-column>
-						  		  <el-table-column prop="status" label="考核指标描述" min-width="120"></el-table-column>
-						  		  
-						  		  <el-table-column label="操作" min-width="200">
-						  			  <template slot-scope="scope">
-						  			    <el-button  type="text" size="small"  class="textFontColor">查看</el-button>
-						  			  </template>
-						  		  </el-table-column>
-						  		</el-table>
-						  	</div>
-						  </div>
-					  
-					  </el-tab-pane>
-				      <el-tab-pane label="考核时间点" name="second">
-						  <el-row style="margin-top: 15px;">
-						    	<el-col :span="12">
-						    		<el-form-item  label="业务主管">
-										<el-form-item  label="考核频率">
-											<el-select clearable v-model="searchForm.status2" placeholder="请选择" style="width: 85%;">
-											      <el-option label="月" value="月"></el-option>
-												  <el-option label="季度" value="季度"></el-option>
-											      <el-option label="半年" value="半年"></el-option>
-											      <el-option label="年" value="年"></el-option>
-											    </el-select>
-										</el-form-item>
-									</el-form-item>
-						    	</el-col>
-						  </el-row>
-						  <el-row style="margin-top: 15px;">
-						    	<el-col :span="12">
-						    		<el-form-item  label="业务总监">
-						  										<el-form-item  label="考核频率">
-						  											<el-select clearable v-model="searchForm.status2" placeholder="请选择" style="width: 85%;">
-						  											      <el-option label="月" value="月"></el-option>
-						  												  <el-option label="季度" value="季度"></el-option>
-						  											      <el-option label="半年" value="半年"></el-option>
-						  											      <el-option label="年" value="年"></el-option>
-						  											    </el-select>
-						  										</el-form-item>
-						  									</el-form-item>
-						    	</el-col>
-						  </el-row>
-						  <el-row style="margin-top: 15px;">
-						    	<el-col :span="12">
-						    		<el-form-item  label="普通业务员">
-						  										<el-form-item  label="考核频率">
-						  											<el-select clearable v-model="searchForm.status2" placeholder="请选择" style="width: 85%;">
-						  											      <el-option label="月" value="月"></el-option>
-						  												  <el-option label="季度" value="季度"></el-option>
-						  											      <el-option label="半年" value="半年"></el-option>
-						  											      <el-option label="年" value="年"></el-option>
-						  											    </el-select>
-						  										</el-form-item>
-						  									</el-form-item>
-						    	</el-col>
-						  </el-row>
-						  <el-row style="margin-top: 15px;">
-						    	<el-col :span="12">
-						    		<el-form-item  label="高级业务员">
-						  										<el-form-item  label="考核频率">
-						  											<el-select clearable v-model="searchForm.status2" placeholder="请选择" style="width: 85%;">
-						  											      <el-option label="月" value="月"></el-option>
-						  												  <el-option label="季度" value="季度"></el-option>
-						  											      <el-option label="半年" value="半年"></el-option>
-						  											      <el-option label="年" value="年"></el-option>
-						  											    </el-select>
-						  										</el-form-item>
-						  									</el-form-item>
-						    	</el-col>
-						  </el-row>
-					  </el-tab-pane>
-				      <el-tab-pane label="考核顺序" name="third">
-						  <div class="block-title">考核顺序设置</div>
-						  <div class="table-wrap">
-						  	<div class="saas-table" ref="commonTable">
-						  		<el-table  size="medium" :data="tableData"  stripe style="width: 100%" :header-cell-style="{background:'#F2F2F2',fontWeight: '700',color:'#343434',fontSize:'14px'}">
-						  		  <el-table-column prop="blCode" label="顺序序号" min-width="100"></el-table-column>
-						  		  <el-table-column prop="blName" label="考核类型" min-width="120"></el-table-column>
-						  		  <el-table-column prop="status" label="职级" min-width="120"></el-table-column>
-						  		  
-						  		  <el-table-column label="操作" min-width="200">
-						  			  <template slot-scope="scope">
-						  			    <el-button  type="text" size="small"  class="textFontColor">查看</el-button>
-						  			  </template>
-						  		  </el-table-column>
-						  		</el-table>
-						  	</div>
-						  </div>
-					  </el-tab-pane>
-				      <el-tab-pane label="考核结果规则" name="fourth">
-						<div class="block-content">
-							<el-row>
-								<el-form-item  label="业务主管" label-width="120px">
-									<el-row>
-										<el-col :span="5">
-											<el-form-item label-width="0px">
-												<el-radio-group v-model="dataForm.shengji">
-													<el-radio :label="1">逐级晋升</el-radio>
-													<el-radio :label="2">跨级晋升</el-radio>
-												  </el-radio-group>
-												  </el-form-item>
-										</el-col>
-										<el-col :span="7">
-											<el-form-item  label="可晋升职级" label-width="100px">
-												<el-input clearable v-model="dataForm.deadlineMonth"  placeholder="请输入" style="width: 85%;"></el-input>
-											</el-form-item>
-										</el-col>
-										<el-col :span="5">
-											<el-form-item label-width="0px">
-												<el-radio-group v-model="dataForm.shengji">
-													<el-radio :label="1">逐级降级</el-radio>
-													<el-radio :label="2">跨级降级</el-radio>
-												  </el-radio-group>
-												  </el-form-item>
-										</el-col>
-										<el-col :span="7">
-											<el-form-item  label="可降级职级" label-width="100px">
-												<el-input clearable v-model="dataForm.deadlineMonth"  placeholder="请输入" style="width: 85%;"></el-input>
-											</el-form-item>
-										</el-col>
-									</el-row>
-								</el-form-item>
-							</el-row>
-							
-						</div>  
-					  </el-tab-pane>
-				    </el-tabs>
-			  </el-tab-pane>
-			</el-tabs>
-		</el-form>
-	  
-	  <span slot="footer" class="dialog-footer">
-	    <el-button @click="dialogVisible = false">取 消</el-button>
-	    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
-	  </span>
-	</el-dialog>
-	
-	
-	<el-dialog title="新增佣金项" :visible.sync="dialogVisible1" width="1000px">
-	  <el-form label-position="left" ref="dataForm" size="medium" :model="dataForm" label-width="100px">
-		<el-row style="margin-top: 15px;">
-		  	<el-col :span="8">
-		  		<el-form-item  label="佣金项名称">
-		  			<el-input clearable v-model="dataForm.blCode"  placeholder="请输入" style="width: 85%;"></el-input>
-		  		</el-form-item>
-		  	</el-col>
-			<el-col :span="8">
-				<el-form-item  label="佣金项名称">
-					<el-input clearable v-model="dataForm.blCode"  placeholder="请输入" style="width: 85%;"></el-input>
-				</el-form-item>
-			</el-col>
-			<el-col :span="8">
-				<el-form-item  label="计佣频率">
-					<el-input clearable v-model="dataForm.blCode"  placeholder="请输入" style="width: 85%;"></el-input>
-				</el-form-item>
-			</el-col>
-			<el-col :span="8">
-				<el-form-item  label="佣金项类型">
-					<el-input clearable v-model="dataForm.blCode"  placeholder="请输入" style="width: 85%;"></el-input>
-				</el-form-item>
-			</el-col>
-			<el-col :span="8">
-				<el-form-item  label="佣金项财务分类" label-width="140px">
-					<el-input clearable v-model="dataForm.blCode"  placeholder="请输入" style="width: 85%;"></el-input>
-				</el-form-item>
-			</el-col>
-			<el-col :span="24">
-				<el-form-item  label="佣金项描述">
-					<el-input type="textarea" :rows="2" placeholder="请输入" v-model="dataForm.blCode"></el-input>
-				</el-form-item>
-			</el-col>
-			<el-col :span="8">
-				<el-form-item  label="使用公式" >
-					<el-input clearable v-model="dataForm.blCode"  placeholder="请输入" style="width: 85%;"></el-input>
-				</el-form-item>
-			</el-col>
-		</el-row>	
-	 </el-form>
-	  <span slot="footer" class="dialog-footer">
-	    <el-button @click="dialogVisible1 = false">取 消</el-button>
-	    <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
-	  </span>
-	</el-dialog>
-	
+      <!-- 标题 -->
+      <div class="com-apge-title">
+        <h2 class="title-content">基本法配置</h2>
+      </div>
+      <!-- 搜索区域 -->
+      <div class="com-pro-search">
+        <el-form
+          label-position="left"
+          ref="searchForm"
+          size="medium"
+          :model="searchForm"
+          label-width="90px"
+        >
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="基本法">
+                <el-input
+                  clearable
+                  v-model="searchForm.id"
+                  placeholder="请输入基本法编号或基本法名称"
+                  style="width: 85%"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="基本法状态" label-width="120px">
+                <el-select
+                  clearable
+                  v-model="searchForm.status1"
+                  placeholder="请选择"
+                  style="width: 85%"
+                >
+                  <el-option label="暂存" value="0"></el-option>
+                  <el-option label="代生效" value="1"></el-option>
+                  <el-option label="生效" value="2"></el-option>
+                  <el-option label="失效" value="3"></el-option>
+                  <el-option label="停用" value="4"></el-option>
+                  <el-option label="过期" value="5"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="审核状态">
+                <el-select
+                  clearable
+                  v-model="searchForm.status2"
+                  placeholder="请选择"
+                  style="width: 85%"
+                >
+                  <el-option label="待审核" value="0"></el-option>
+                  <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="8" style="margin-top: 2px">
+              <el-button
+                size="small"
+                type="primary"
+                style="background-color: #00bc70; border: 1px solid #00bc70"
+                >查询</el-button
+              >
+              <el-button
+                size="small"
+                style="background-color: #ffffff; border: 1px solid c6e2ff"
+                >重置</el-button
+              >
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <!-- 操作按钮 -->
+      <div class="data-table-caption" style="padding-left: 20px">
+        <el-button
+          size="small"
+          type="primary"
+          icon="fa fa-plus"
+          style="background-color: #00bc70; border: 1px solid #00bc70"
+          @click="dialogVisible = true"
+        >
+          新增</el-button
+        >
+      </div>
+      <div class="table-wrap">
+        <div class="saas-table" ref="commonTable">
+          <el-table
+            size="medium"
+            :data="tableData"
+            :height="tableHeight"
+            stripe
+            style="width: 100%"
+            :header-cell-style="{
+              background: '#F2F2F2',
+              fontWeight: '700',
+              color: '#343434',
+              fontSize: '14px',
+            }"
+          >
+            <el-table-column
+              prop="blCode"
+              label="基本法编号"
+              min-width="100"
+            ></el-table-column>
+            <el-table-column
+              prop="blName"
+              label="基本法名称"
+              min-width="120"
+            ></el-table-column>
+            <el-table-column
+              prop="status"
+              label="基本法状态"
+              min-width="120"
+            ></el-table-column>
+            <el-table-column
+              prop="approvalStatus"
+              label="审核状态"
+              min-width="120"
+            ></el-table-column>
+            <el-table-column prop="version" label="版本号"></el-table-column>
+            <el-table-column
+              prop="validDate"
+              label="起效日期"
+              min-width="160"
+            ></el-table-column>
+            <el-table-column
+              prop="terminateDate"
+              label="终止日期"
+              min-width="160"
+            ></el-table-column>
+            <el-table-column
+              prop="decommissioningDate"
+              label="停用日期"
+              min-width="160"
+            ></el-table-column>
+            <el-table-column
+              prop="audiRemark"
+              label="审核备注"
+              min-width="140"
+            ></el-table-column>
+            <el-table-column
+              prop="auditTime"
+              label="审核时间"
+              min-width="160"
+            ></el-table-column>
+            <el-table-column
+              prop="auditUser"
+              label="审核用户"
+              min-width="140"
+            ></el-table-column>
+            <el-table-column label="操作" min-width="200">
+              <template slot-scope="scope">
+                <el-button type="text" size="small" class="textFontColor"
+                  >查看</el-button
+                >
+                <el-button
+                  type="text"
+                  size="small"
+                  class="textFontColor"
+                  @click="dialogVisible = true"
+                  >编辑</el-button
+                >
+                <el-button type="text" size="small" class="textFontColor"
+                  >作废</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <!-- 分页 -->
+      <div class="block bottomFixed" ref="bottomFixed">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[100, 200, 300, 400]"
+          :page-size="100"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="400"
+          class="u-f-je u-f-ac"
+          style="height: 50px"
+        >
+        </el-pagination>
+      </div>
+    </div>
+
+    <el-dialog
+      title="基本法编辑"
+      :visible.sync="dialogVisible"
+      width="1200px"
+      :before-close="handleClose"
+    >
+      <el-form
+        label-position="left"
+        ref="dataForm"
+        size="medium"
+        :model="dataForm"
+        label-width="100px"
+      >
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="基本信息" name="first">
+            <el-row style="margin-top: 15px">
+              <el-col :span="8">
+                <el-form-item label="基本法编号">
+                  <el-input
+                    clearable
+                    v-model="dataForm.blCode"
+                    placeholder="请输入基本法编号或基本法名称"
+                    style="width: 85%"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="基本法名称">
+                  <el-input
+                    clearable
+                    v-model="dataForm.blName"
+                    placeholder="请输入基本法编号或基本法名称"
+                    style="width: 85%"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="起效日期">
+                  <el-date-picker
+                    clearable
+                    style="width: 85%"
+                    v-model="dataForm.validDate"
+                    type="date"
+                    placeholder="请选择"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :span="16">
+                <el-form-item label="起效日期">
+                  <el-date-picker
+                    clearable
+                    style="width: 94%"
+                    v-model="dataForm.date"
+                    type="daterange"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <div class="block-title">计绩月周期规则</div>
+            <div class="block-content">
+              <el-row>
+                <el-form-item label="受理截止日期" label-width="120px">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-form-item label="M+" label-width="30px">
+                        <el-input
+                          clearable
+                          v-model="dataForm.deadlineMonth"
+                          placeholder="请输入"
+                          style="width: 85%"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="5">
+                      <el-form-item label="M+" label-width="30px">
+                        <el-input
+                          clearable
+                          v-model="dataForm.deadlineDay"
+                          placeholder="请输入"
+                          style="width: 85%"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="4">
+                      <el-form-item label="" label-width="0px">
+                        <el-checkbox v-model="dataForm.lastDayInMonth">
+                          每月最后一天</el-checkbox
+                        >
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="10">
+                      <el-form-item
+                        label="节假日/双休日规则"
+                        label-width="150px"
+                      >
+                        <el-select
+                          clearable
+                          v-model="dataForm.periodRuleType"
+                          placeholder="请选择"
+                          style="width: 85%"
+                        >
+                          <el-option label="提前到工作日" value="0"></el-option>
+                          <el-option label="顺延到工作日" value="1"></el-option>
+                          <el-option label="无需修改" value="2"></el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="签发截止日期" label-width="120px">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-form-item label="M+" label-width="30px">
+                        <el-input
+                          clearable
+                          v-model="dataForm.deadlineMonth"
+                          placeholder="请输入"
+                          style="width: 85%"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="5">
+                      <el-form-item label="M+" label-width="30px">
+                        <el-input
+                          clearable
+                          v-model="dataForm.deadlineDay"
+                          placeholder="请输入"
+                          style="width: 85%"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="4">
+                      <el-form-item label="" label-width="0px">
+                        <el-checkbox v-model="dataForm.lastDayInMonth">
+                          每月最后一天</el-checkbox
+                        >
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="10">
+                      <el-form-item
+                        label="节假日/双休日规则"
+                        label-width="150px"
+                      >
+                        <el-select
+                          clearable
+                          v-model="dataForm.periodRuleType"
+                          placeholder="请选择"
+                          style="width: 85%"
+                        >
+                          <el-option label="提前到工作日" value="0"></el-option>
+                          <el-option label="顺延到工作日" value="1"></el-option>
+                          <el-option label="无需修改" value="2"></el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="过犹截止日期" label-width="120px">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-form-item label="M+" label-width="30px">
+                        <el-input
+                          clearable
+                          v-model="dataForm.deadlineMonth"
+                          placeholder="请输入"
+                          style="width: 85%"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="5">
+                      <el-form-item label="M+" label-width="30px">
+                        <el-input
+                          clearable
+                          v-model="dataForm.deadlineDay"
+                          placeholder="请输入"
+                          style="width: 85%"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="4">
+                      <el-form-item label="" label-width="0px">
+                        <el-checkbox v-model="dataForm.lastDayInMonth">
+                          每月最后一天</el-checkbox
+                        >
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="10">
+                      <el-form-item
+                        label="节假日/双休日规则"
+                        label-width="150px"
+                      >
+                        <el-select
+                          clearable
+                          v-model="dataForm.periodRuleType"
+                          placeholder="请选择"
+                          style="width: 85%"
+                        >
+                          <el-option label="提前到工作日" value="0"></el-option>
+                          <el-option label="顺延到工作日" value="1"></el-option>
+                          <el-option label="无需修改" value="2"></el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="回执截止日期" label-width="120px">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-form-item label="M+" label-width="30px">
+                        <el-input
+                          clearable
+                          v-model="dataForm.deadlineMonth"
+                          placeholder="请输入"
+                          style="width: 85%"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="5">
+                      <el-form-item label="M+" label-width="30px">
+                        <el-input
+                          clearable
+                          v-model="dataForm.deadlineDay"
+                          placeholder="请输入"
+                          style="width: 85%"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="4">
+                      <el-form-item label="" label-width="0px">
+                        <el-checkbox v-model="dataForm.lastDayInMonth">
+                          每月最后一天</el-checkbox
+                        >
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="10">
+                      <el-form-item
+                        label="节假日/双休日规则"
+                        label-width="150px"
+                      >
+                        <el-select
+                          clearable
+                          v-model="dataForm.periodRuleType"
+                          placeholder="请选择"
+                          style="width: 85%"
+                        >
+                          <el-option label="提前到工作日" value="0"></el-option>
+                          <el-option label="顺延到工作日" value="1"></el-option>
+                          <el-option label="无需修改" value="2"></el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="回访截止日期" label-width="120px">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-form-item label="M+" label-width="30px">
+                        <el-input
+                          clearable
+                          v-model="dataForm.deadlineMonth"
+                          placeholder="请输入"
+                          style="width: 85%"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="5">
+                      <el-form-item label="M+" label-width="30px">
+                        <el-input
+                          clearable
+                          v-model="dataForm.deadlineDay"
+                          placeholder="请输入"
+                          style="width: 85%"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="4">
+                      <el-form-item label="" label-width="0px">
+                        <el-checkbox v-model="dataForm.lastDayInMonth">
+                          每月最后一天</el-checkbox
+                        >
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="10">
+                      <el-form-item
+                        label="节假日/双休日规则"
+                        label-width="150px"
+                      >
+                        <el-select
+                          clearable
+                          v-model="dataForm.periodRuleType"
+                          placeholder="请选择"
+                          style="width: 85%"
+                        >
+                          <el-option label="提前到工作日" value="0"></el-option>
+                          <el-option label="顺延到工作日" value="1"></el-option>
+                          <el-option label="无需修改" value="2"></el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-row>
+            </div>
+
+            <div>
+              <el-form-item label="客户告知书已收回" label-width="160px">
+                <el-checkbox v-model="dataForm.customerNoticeStatus">
+                  已收回</el-checkbox
+                >
+              </el-form-item>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="佣金项" name="second">
+            <el-row style="margin-top: 15px">
+              <el-col :span="8">
+                <el-form-item label="基本法编号"> 123232323 </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="基本法名称"> 1213 </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="生效日期"> 2021-03-24 </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="失效日期"> 2021-04-07 </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="起效日期"> 2021-04-07 </el-form-item>
+              </el-col>
+            </el-row>
+            <div class="block-title">佣金项配置</div>
+
+            <div class="data-table-caption">
+              <el-button
+                size="small"
+                type="primary"
+                icon="fa fa-plus"
+                style="background-color: #00bc70; border: 1px solid #00bc70"
+                @click="dialogVisible1 = true"
+              >
+                添加</el-button
+              >
+            </div>
+
+            <div class="table-wrap">
+              <div class="saas-table" ref="commonTable">
+                <el-table
+                  size="medium"
+                  :data="tableData1"
+                  stripe
+                  style="width: 100%"
+                  :header-cell-style="{
+                    background: '#F2F2F2',
+                    fontWeight: '700',
+                    color: '#343434',
+                    fontSize: '14px',
+                  }"
+                >
+                  <el-table-column
+                    :selectable="selectInit"
+                    prop="address1"
+                    type="selection"
+                    width="60"
+                  >
+                  </el-table-column>
+                  <el-table-column
+                    prop="address1"
+                    label="佣金项顺序"
+                    min-width="100"
+                  >
+                  </el-table-column>
+                  <el-table-column
+                    prop="address2"
+                    label="佣金项"
+                    min-width="140"
+                  ></el-table-column>
+                  <el-table-column
+                    prop="address3"
+                    label="佣金项类别"
+                  ></el-table-column>
+                  <el-table-column
+                    prop="address4"
+                    label="计佣频率"
+                    min-width="120"
+                  ></el-table-column>
+                  <el-table-column fixed="right" label="操作" width="100">
+                    <template slot-scope="scope">
+                      <el-button type="text" class="textFontColor" size="small"
+                        >编辑</el-button
+                      >
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="考核规则" name="third">
+            <el-row style="margin-top: 15px">
+              <el-col :span="8">
+                <el-form-item label="基本法编号">123232323</el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="基本法名称">1213</el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="生效日期">2021-03-24</el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="失效日期">2021-04-07</el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="起效日期">2021-04-07</el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-tabs v-model="activeTab" type="card" @tab-click="handleClick">
+              <el-tab-pane label="考核项" name="first">
+                <div class="block-title">考核项设置</div>
+                <div class="table-wrap">
+                  <div class="saas-table" ref="commonTable">
+                    <el-table
+                      size="medium"
+                      :data="tableData"
+                      stripe
+                      style="width: 100%"
+                      :header-cell-style="{
+                        background: '#F2F2F2',
+                        fontWeight: '700',
+                        color: '#343434',
+                        fontSize: '14px',
+                      }"
+                    >
+                      <el-table-column
+                        prop="blCode"
+                        label="考核指标"
+                        min-width="100"
+                      ></el-table-column>
+                      <el-table-column
+                        prop="blName"
+                        label="考核类型"
+                        min-width="120"
+                      ></el-table-column>
+                      <el-table-column
+                        prop="status"
+                        label="考核指标描述"
+                        min-width="120"
+                      ></el-table-column>
+
+                      <el-table-column label="操作" min-width="200">
+                        <template slot-scope="scope">
+                          <el-button
+                            type="text"
+                            size="small"
+                            class="textFontColor"
+                            >查看</el-button
+                          >
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </div>
+                </div>
+              </el-tab-pane>
+              <el-tab-pane label="考核时间点" name="second">
+                <el-row style="margin-top: 15px">
+                  <el-col :span="12">
+                    <el-form-item label="业务主管">
+                      <el-form-item label="考核频率">
+                        <el-select
+                          clearable
+                          v-model="searchForm.status2"
+                          placeholder="请选择"
+                          style="width: 85%"
+                        >
+                          <el-option label="月" value="月"></el-option>
+                          <el-option label="季度" value="季度"></el-option>
+                          <el-option label="半年" value="半年"></el-option>
+                          <el-option label="年" value="年"></el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row style="margin-top: 15px">
+                  <el-col :span="12">
+                    <el-form-item label="业务总监">
+                      <el-form-item label="考核频率">
+                        <el-select
+                          clearable
+                          v-model="searchForm.status2"
+                          placeholder="请选择"
+                          style="width: 85%"
+                        >
+                          <el-option label="月" value="月"></el-option>
+                          <el-option label="季度" value="季度"></el-option>
+                          <el-option label="半年" value="半年"></el-option>
+                          <el-option label="年" value="年"></el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row style="margin-top: 15px">
+                  <el-col :span="12">
+                    <el-form-item label="普通业务员">
+                      <el-form-item label="考核频率">
+                        <el-select
+                          clearable
+                          v-model="searchForm.status2"
+                          placeholder="请选择"
+                          style="width: 85%"
+                        >
+                          <el-option label="月" value="月"></el-option>
+                          <el-option label="季度" value="季度"></el-option>
+                          <el-option label="半年" value="半年"></el-option>
+                          <el-option label="年" value="年"></el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row style="margin-top: 15px">
+                  <el-col :span="12">
+                    <el-form-item label="高级业务员">
+                      <el-form-item label="考核频率">
+                        <el-select
+                          clearable
+                          v-model="searchForm.status2"
+                          placeholder="请选择"
+                          style="width: 85%"
+                        >
+                          <el-option label="月" value="月"></el-option>
+                          <el-option label="季度" value="季度"></el-option>
+                          <el-option label="半年" value="半年"></el-option>
+                          <el-option label="年" value="年"></el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-tab-pane>
+              <el-tab-pane label="考核顺序" name="third">
+                <div class="block-title">考核顺序设置</div>
+                <div class="table-wrap">
+                  <div class="saas-table" ref="commonTable">
+                    <el-table
+                      size="medium"
+                      :data="tableData"
+                      stripe
+                      style="width: 100%"
+                      :header-cell-style="{
+                        background: '#F2F2F2',
+                        fontWeight: '700',
+                        color: '#343434',
+                        fontSize: '14px',
+                      }"
+                    >
+                      <el-table-column
+                        prop="blCode"
+                        label="顺序序号"
+                        min-width="100"
+                      ></el-table-column>
+                      <el-table-column
+                        prop="blName"
+                        label="考核类型"
+                        min-width="120"
+                      ></el-table-column>
+                      <el-table-column
+                        prop="status"
+                        label="职级"
+                        min-width="120"
+                      ></el-table-column>
+
+                      <el-table-column label="操作" min-width="200">
+                        <template slot-scope="scope">
+                          <el-button
+                            type="text"
+                            size="small"
+                            class="textFontColor"
+                            >查看</el-button
+                          >
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </div>
+                </div>
+              </el-tab-pane>
+              <el-tab-pane label="考核结果规则" name="fourth">
+                <div class="block-content">
+                  <el-row>
+                    <el-form-item label="业务主管" label-width="120px">
+                      <el-row>
+                        <el-col :span="5">
+                          <el-form-item label-width="0px">
+                            <el-radio-group v-model="dataForm.shengji">
+                              <el-radio :label="1">逐级晋升</el-radio>
+                              <el-radio :label="2">跨级晋升</el-radio>
+                            </el-radio-group>
+                          </el-form-item>
+                        </el-col>
+                        <el-col :span="7">
+                          <el-form-item label="可晋升职级" label-width="100px">
+                            <el-input
+                              clearable
+                              v-model="dataForm.deadlineMonth"
+                              placeholder="请输入"
+                              style="width: 85%"
+                            ></el-input>
+                          </el-form-item>
+                        </el-col>
+                        <el-col :span="5">
+                          <el-form-item label-width="0px">
+                            <el-radio-group v-model="dataForm.shengji">
+                              <el-radio :label="1">逐级降级</el-radio>
+                              <el-radio :label="2">跨级降级</el-radio>
+                            </el-radio-group>
+                          </el-form-item>
+                        </el-col>
+                        <el-col :span="7">
+                          <el-form-item label="可降级职级" label-width="100px">
+                            <el-input
+                              clearable
+                              v-model="dataForm.deadlineMonth"
+                              placeholder="请输入"
+                              style="width: 85%"
+                            ></el-input>
+                          </el-form-item>
+                        </el-col>
+                      </el-row>
+                    </el-form-item>
+                  </el-row>
+                </div>
+              </el-tab-pane>
+            </el-tabs>
+          </el-tab-pane>
+        </el-tabs>
+      </el-form>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+
+    <el-dialog title="新增佣金项" :visible.sync="dialogVisible1" width="1000px">
+      <el-form
+        label-position="left"
+        ref="dataForm"
+        size="medium"
+        :model="dataForm"
+        label-width="100px"
+      >
+        <el-row style="margin-top: 15px">
+          <el-col :span="8">
+            <el-form-item label="佣金项名称">
+              <el-input
+                clearable
+                v-model="dataForm.blCode"
+                placeholder="请输入"
+                style="width: 85%"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="佣金项名称">
+              <el-input
+                clearable
+                v-model="dataForm.blCode"
+                placeholder="请输入"
+                style="width: 85%"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="计佣频率">
+              <el-input
+                clearable
+                v-model="dataForm.blCode"
+                placeholder="请输入"
+                style="width: 85%"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="佣金项类型">
+              <el-input
+                clearable
+                v-model="dataForm.blCode"
+                placeholder="请输入"
+                style="width: 85%"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="佣金项财务分类" label-width="140px">
+              <el-input
+                clearable
+                v-model="dataForm.blCode"
+                placeholder="请输入"
+                style="width: 85%"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="佣金项描述">
+              <el-input
+                type="textarea"
+                :rows="2"
+                placeholder="请输入"
+                v-model="dataForm.blCode"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="使用公式">
+              <el-input
+                clearable
+                v-model="dataForm.blCode"
+                placeholder="请输入"
+                style="width: 85%"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible1 = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible1 = false"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-  export default {
-    components: {
-    },
-	mounted() {
-	  const that = this;
-	  setTimeout(() => {
-	    let tableTop = that.$refs.commonTable.offsetTop;
-	    let bottomTop = that.$refs.bottomFixed.offsetTop;
-	    that.tableHeight = (bottomTop-tableTop-120)+'px';
-	  },10);
-	  window.onresize = function() {
-	    let tableTop = that.$refs.commonTable.offsetTop;
-	    let bottomTop = that.$refs.bottomFixed.offsetTop;
-	    that.tableHeight = (bottomTop-tableTop-120)+'px';
-	  };
-	},
-    data() {
-      return {
-		dialogVisible1:false,
-		activeTab:'first',
-		  
-		dialogVisible:false,
-		activeName:'first',
-		dataForm:{
-			
-		},
-		tableData1:[],
-		  
-		tableHeight:0,
-		currentPage:1,
-		  
-		searchForm:{},
-		tableData:[{
-		  approvalStatus: '0',
-		  audiRemark: '',
-		  auditTime: '',
-		  auditUser: '',
-		  basicLawPeriodRuleList: [],
-		  blCode: "JBF01",
-		  blName: "基本法1号",
-		  commitTime: "2021-03-20 16:26:46",
-		  commitUser: "hehebaodai@abc.com",
-		  decommissioningDate: '',
-		  effectiveDate: "2021-01-26",
-		  expiryDate: "9999-12-31",
-		  id: '10035002',
-		  isNewest: "Y",
-		  status: '0',
-		  tenantId: '',
-		  terminateDate: "9999-12-31",
-		  validDate: "2022-02-04",
-		  version: '2',
-		},
-		{
-		  approvalStatus: '',
-		  audiRemark: '',
-		  auditTime: '',
-		  auditUser: '',
-		  basicLawPeriodRuleList: [],
-		  blCode: "S001",
-		  blName: "HHS001",
-		  commitTime: '',
-		  commitUser: '',
-		  decommissioningDate: '',
-		  effectiveDate: "2021-03-19",
-		  expiryDate: "2021-03-31",
-		  id: '10045003',
-		  isNewest: "Y",
-		  status: '0',
-		  tenantId: '',
-		  terminateDate: "2021-03-31",
-		  validDate: "2021-03-19",
-		  version: '1',
-		},
-		{
-			approvalStatus: '',
-			audiRemark: '',
-			auditTime: '',
-			auditUser: '',
-			basicLawPeriodRuleList: [],
-			blCode: "123",
-			blName: "344",
-			commitTime: '',
-			commitUser: '',
-			decommissioningDate: '',
-			effectiveDate: "2021-03-19",
-			expiryDate: "2021-03-31",
-			id: '10050001',
-			isNewest: "Y",
-			status: '0',
-			tenantId: '',
-			terminateDate: "2021-03-31",
-			validDate: "2021-03-19",
-			version: '1'
-		},{
-			approvalStatus: '',
-			audiRemark: '',
-			auditTime: '',
-			auditUser: '',
-			basicLawPeriodRuleList: [],
-			blCode: "222",
-			blName: "2223",
-			commitTime: '',
-			commitUser: '',
-			decommissioningDate: '',
-			effectiveDate: "2021-03-11",
-			expiryDate: "2021-03-31",
-			id: '10045002',
-			isNewest: "Y",
-			status: '0',
-			tenantId: '',
-			terminateDate: "2021-03-31",
-			validDate: "2021-03-11",
-			version: '1'
-		},{
-			approvalStatus: '',
-			audiRemark: '',
-			auditTime: '',
-			auditUser: '',
-			basicLawPeriodRuleList: [],
-			blCode: "HE123123",
-			blName: "HH",
-			commitTime: '',
-			commitUser: '',
-			decommissioningDate: '',
-			effectiveDate: "2021-03-10",
-			expiryDate: "2021-03-31",
-			id: '10045001',
-			isNewest: "Y",
-			status: '0',
-			tenantId: '',
-			terminateDate: "2021-03-31",
-			validDate: "2021-03-10",
-			version: '1'
-		},
-		{
-			approvalStatus: '',
-			audiRemark: '',
-			auditTime: '',
-			auditUser: '',
-			basicLawPeriodRuleList: [],
-			blCode: "1333",
-			blName: "222",
-			commitTime: '',
-			commitUser: '',
-			decommissioningDate: '',
-			effectiveDate: "2021-05-01",
-			expiryDate: "2021-06-03",
-			id: '10040001',
-			isNewest: "Y",
-			status: '0',
-			tenantId: '',
-			terminateDate: "2021-06-03",
-			validDate: "2021-06-03",
-			version: '1'
-		},
-		{
-			approvalStatus: '',
-			audiRemark: '',
-			auditTime: '',
-			auditUser: '',
-			basicLawPeriodRuleList: [],
-			blCode: "5",
-			blName: "5",
-			commitTime: '',
-			commitUser: '',
-			decommissioningDate: '',
-			effectiveDate: "2021-02-04",
-			expiryDate: "2021-02-04",
-			id: '10030002',
-			isNewest: "Y",
-			status: '0',
-			tenantId: '',
-			terminateDate: "2021-02-04",
-			validDate: "2021-02-04",
-			version: '1'
-		},
-		{
-			approvalStatus: '1',
-			audiRemark: "",
-			auditTime: "2021-01-26 12:24:18",
-			auditUser: "haier@abc.com",
-			basicLawPeriodRuleList: [],
-			blCode: "JBF01",
-			blName: "基本法1号",
-			commitTime: "2021-01-26 12:22:49",
-			commitUser: "haier@abc.com",
-			decommissioningDate: '',
-			effectiveDate: "2021-01-26",
-			expiryDate: "9999-12-31",
-			id: '10020002',
-			isNewest: "N",
-			status: '2',
-			tenantId: '',
-			terminateDate: "9999-12-31",
-			validDate: "2021-01-29",
-			version: '1'
-		}
-		],
+export default {
+  components: {},
+  mounted() {
+    const that = this;
+    setTimeout(() => {
+      let tableTop = that.$refs.commonTable.offsetTop;
+      let bottomTop = that.$refs.bottomFixed.offsetTop;
+      that.tableHeight = bottomTop - tableTop - 120 + "px";
+    }, 10);
+    window.onresize = function () {
+      let tableTop = that.$refs.commonTable.offsetTop;
+      let bottomTop = that.$refs.bottomFixed.offsetTop;
+      that.tableHeight = bottomTop - tableTop - 120 + "px";
+    };
+  },
+  data() {
+    return {
+      dialogVisible1: false,
+      activeTab: "first",
+
+      dialogVisible: false,
+      activeName: "first",
+      dataForm: {},
+      tableData1: [],
 
-	   }
+      tableHeight: 0,
+      currentPage: 1,
+
+      searchForm: {},
+      tableData: [
+        {
+          approvalStatus: "0",
+          audiRemark: "",
+          auditTime: "",
+          auditUser: "",
+          basicLawPeriodRuleList: [],
+          blCode: "JBF01",
+          blName: "基本法1号",
+          commitTime: "2021-03-20 16:26:46",
+          commitUser: "hehebaodai@abc.com",
+          decommissioningDate: "",
+          effectiveDate: "2021-01-26",
+          expiryDate: "9999-12-31",
+          id: "10035002",
+          isNewest: "Y",
+          status: "0",
+          tenantId: "",
+          terminateDate: "9999-12-31",
+          validDate: "2022-02-04",
+          version: "2",
+        },
+        {
+          approvalStatus: "",
+          audiRemark: "",
+          auditTime: "",
+          auditUser: "",
+          basicLawPeriodRuleList: [],
+          blCode: "S001",
+          blName: "HHS001",
+          commitTime: "",
+          commitUser: "",
+          decommissioningDate: "",
+          effectiveDate: "2021-03-19",
+          expiryDate: "2021-03-31",
+          id: "10045003",
+          isNewest: "Y",
+          status: "0",
+          tenantId: "",
+          terminateDate: "2021-03-31",
+          validDate: "2021-03-19",
+          version: "1",
+        },
+        {
+          approvalStatus: "",
+          audiRemark: "",
+          auditTime: "",
+          auditUser: "",
+          basicLawPeriodRuleList: [],
+          blCode: "123",
+          blName: "344",
+          commitTime: "",
+          commitUser: "",
+          decommissioningDate: "",
+          effectiveDate: "2021-03-19",
+          expiryDate: "2021-03-31",
+          id: "10050001",
+          isNewest: "Y",
+          status: "0",
+          tenantId: "",
+          terminateDate: "2021-03-31",
+          validDate: "2021-03-19",
+          version: "1",
+        },
+        {
+          approvalStatus: "",
+          audiRemark: "",
+          auditTime: "",
+          auditUser: "",
+          basicLawPeriodRuleList: [],
+          blCode: "222",
+          blName: "2223",
+          commitTime: "",
+          commitUser: "",
+          decommissioningDate: "",
+          effectiveDate: "2021-03-11",
+          expiryDate: "2021-03-31",
+          id: "10045002",
+          isNewest: "Y",
+          status: "0",
+          tenantId: "",
+          terminateDate: "2021-03-31",
+          validDate: "2021-03-11",
+          version: "1",
+        },
+        {
+          approvalStatus: "",
+          audiRemark: "",
+          auditTime: "",
+          auditUser: "",
+          basicLawPeriodRuleList: [],
+          blCode: "HE123123",
+          blName: "HH",
+          commitTime: "",
+          commitUser: "",
+          decommissioningDate: "",
+          effectiveDate: "2021-03-10",
+          expiryDate: "2021-03-31",
+          id: "10045001",
+          isNewest: "Y",
+          status: "0",
+          tenantId: "",
+          terminateDate: "2021-03-31",
+          validDate: "2021-03-10",
+          version: "1",
+        },
+        {
+          approvalStatus: "",
+          audiRemark: "",
+          auditTime: "",
+          auditUser: "",
+          basicLawPeriodRuleList: [],
+          blCode: "1333",
+          blName: "222",
+          commitTime: "",
+          commitUser: "",
+          decommissioningDate: "",
+          effectiveDate: "2021-05-01",
+          expiryDate: "2021-06-03",
+          id: "10040001",
+          isNewest: "Y",
+          status: "0",
+          tenantId: "",
+          terminateDate: "2021-06-03",
+          validDate: "2021-06-03",
+          version: "1",
+        },
+        {
+          approvalStatus: "",
+          audiRemark: "",
+          auditTime: "",
+          auditUser: "",
+          basicLawPeriodRuleList: [],
+          blCode: "5",
+          blName: "5",
+          commitTime: "",
+          commitUser: "",
+          decommissioningDate: "",
+          effectiveDate: "2021-02-04",
+          expiryDate: "2021-02-04",
+          id: "10030002",
+          isNewest: "Y",
+          status: "0",
+          tenantId: "",
+          terminateDate: "2021-02-04",
+          validDate: "2021-02-04",
+          version: "1",
+        },
+        {
+          approvalStatus: "1",
+          audiRemark: "",
+          auditTime: "2021-01-26 12:24:18",
+          auditUser: "haier@abc.com",
+          basicLawPeriodRuleList: [],
+          blCode: "JBF01",
+          blName: "基本法1号",
+          commitTime: "2021-01-26 12:22:49",
+          commitUser: "haier@abc.com",
+          decommissioningDate: "",
+          effectiveDate: "2021-01-26",
+          expiryDate: "9999-12-31",
+          id: "10020002",
+          isNewest: "N",
+          status: "2",
+          tenantId: "",
+          terminateDate: "9999-12-31",
+          validDate: "2021-01-29",
+          version: "1",
+        },
+      ],
+    };
+  },
+  watch: {},
+  methods: {
+    selectInit() {},
+    handleSizeChange() {},
+    handleCurrentChange() {},
+    handleClose(done) {
+      this.$confirm("确认关闭？")
+        .then((_) => {
+          done();
+        })
+        .catch((_) => {});
     },
-    watch:{
-      
+    handleClick(tab, event) {
+      console.log(tab, event);
     },
-    methods: {
-	  handleSizeChange(){
-		  
-	  },
-      handleCurrentChange(){
-		  
-	  },
-	  handleClose(done) {
-	    this.$confirm('确认关闭？')
-	  	.then(_ => {
-	  	  done();
-	  	})
-	  	.catch(_ => {});
-	  },
-	  handleClick(tab, event) {
-		console.log(tab, event);
-	  }
-      
-    }
-  }
+  },
+};
 </script>
 
 <style scoped lang="scss">
-.main-container{
-	flex: 1;
-	position: relative;
-	height: 100%;
-	background: #FFFFFF;
-	overflow: auto;
-	padding: 0 30px;
-	
-	font-family: Avenir,Helvetica,Arial,sans-serif;
-	color: #343434;
-	font-size: 14px;
-	line-height: 1.5;
-	margin-top: -60px;
-	.com-page-title{
-		.title-content{
-			padding-top: 20px;
-			padding-bottom: 20px;
-			text-align: left;
-		}
-	}
-	.com-pro-search{
-		margin-bottom: 20px;
-		.el-form{
-			padding: 0px 20px;
-			box-sizing: border-box;
-		}
-	}
-	.data-table-caption{
-		padding: 10px 0;
-		display: flex;
-		position: relative;
-		margin-left: 0;
-		margin-right: 0;
-		height: auto;
-		zoom: 1;
-	}
-	.table-wrap{
-		.saas-table{
-			color: #343434;
-			font-size: 16px;
-		}
-	}
-	
-	.block-title{
-		line-height: 2;
-		font-size: 18px;
-		font-weight: 700;
-	}
-	.block-content{
-		
-	}
-	
-	
-	.el-input >>> .el-input__inner,.el-input__inner,.el-select >>> .el-input__inner{
-		font-size: 16px;
-		border-radius: 0;
-		border-top-width: 0px;
-		border-left-width: 0px;
-		border-right-width: 0px;
-		border-bottom-width: 1px;
-		outline: medium;
-	}
-	.el-form-item >>> .el-form-item__label{
-		font-size: 16px;
-		font-weight: bold;
-	}
-	.textFontColor{
-		color:#00bc70!important;
-	}
+.main-container {
+  flex: 1;
+  position: relative;
+  height: 100%;
+  background: #ffffff;
+  overflow: auto;
+  padding: 0 30px;
+
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  color: #343434;
+  font-size: 14px;
+  line-height: 1.5;
+  margin-top: -60px;
+  .com-page-title {
+    .title-content {
+      padding-top: 20px;
+      padding-bottom: 20px;
+      text-align: left;
+    }
+  }
+  .com-pro-search {
+    margin-bottom: 20px;
+    .el-form {
+      padding: 0px 20px;
+      box-sizing: border-box;
+    }
+  }
+  .data-table-caption {
+    padding: 10px 0;
+    display: flex;
+    position: relative;
+    margin-left: 0;
+    margin-right: 0;
+    height: auto;
+    zoom: 1;
+  }
+  .table-wrap {
+    .saas-table {
+      color: #343434;
+      font-size: 16px;
+    }
+  }
+
+  .block-title {
+    line-height: 2;
+    font-size: 18px;
+    font-weight: 700;
+  }
+  .block-content {
+  }
+
+  .el-input >>> .el-input__inner,
+  .el-input__inner,
+  .el-select >>> .el-input__inner {
+    font-size: 16px;
+    border-radius: 0;
+    border-top-width: 0px;
+    border-left-width: 0px;
+    border-right-width: 0px;
+    border-bottom-width: 1px;
+    outline: medium;
+  }
+  .el-form-item >>> .el-form-item__label {
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .textFontColor {
+    color: #00bc70 !important;
+  }
 }
 
 .bottomFixed {
-	background-color: #0086B3;
-    height: 60px;
-    position: fixed;
-    bottom: 0;
-	right: 0;
-	left: 0;
-    width: 100%;
-    background: #fff;
-	.el-pagination{
-		margin-right: 40px;
-	}
+  background-color: #0086b3;
+  height: 60px;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  width: 100%;
+  background: #fff;
+  .el-pagination {
+    margin-right: 40px;
   }
+}
 </style>

src/views/Sys/Banner.vue

@@ -1,49 +1,148 @@
 <template>
   <div>
-    <el-main ref="elMain" style="padding: 0px;">
-      <el-row style="margin: 0px 20px;">
+    <el-main ref="elMain" style="padding: 0px">
+      <el-row style="margin: 0px 20px">
         <!-- <kt-button size="small" style="color: #409EFF;" icon="el-icon-circle-plus" label="新增海报" type="text" perms="sys:user:add" @click="handleAdd" /> -->
-        <el-button style="background-color: #52C578;border:#52C578;margin-left: 15px;margin-bottom: 20px;" icon="fa fa-plus" size="mini" type="primary" @click="handleAdd">新增轮播图</el-button>
+        <el-button
+          style="
+            background-color: #52c578;
+            border: #52c578;
+            margin-left: 15px;
+            margin-bottom: 20px;
+          "
+          icon="fa fa-plus"
+          size="mini"
+          type="primary"
+          @click="handleAdd"
+          >新增轮播图</el-button
+        >
       </el-row>
-      <el-table :data="pageResult" height="650" border style="width: 100%" highlight-current-row :default-sort="{prop: 'createtime', order: 'descending'}" stripe :header-cell-style="{background:'#F2F7FC',fontWeight: '700',color:'#606266'}">
-        <el-table-column prop="id" label="序号" align="center"></el-table-column>
-        <el-table-column prop="title" label="轮播图名称" align="center"></el-table-column>
-        <el-table-column prop="url" label="轮播图跳转链接" align="center"></el-table-column>
-        <el-table-column prop="image" label="图片" align="center" :formatter="imgFormatter"></el-table-column>
-        <el-table-column prop="sort" label="排序" align="center"></el-table-column>
-        <el-table-column prop="enable" label="状态" align="center" sortable :formatter="enableFormatter"></el-table-column>
-        <el-table-column prop="address" label="操作" align="center" width="300" fixed="right">
+      <el-table
+        :data="pageResult"
+        height="650"
+        border
+        style="width: 100%"
+        highlight-current-row
+        :default-sort="{ prop: 'createtime', order: 'descending' }"
+        stripe
+        :header-cell-style="{
+          background: '#F2F7FC',
+          fontWeight: '700',
+          color: '#606266',
+        }"
+      >
+        <el-table-column
+          prop="id"
+          label="序号"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="title"
+          label="轮播图名称"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="url"
+          label="轮播图跳转链接"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="image"
+          label="图片"
+          align="center"
+          :formatter="imgFormatter"
+        ></el-table-column>
+        <el-table-column
+          prop="sort"
+          label="排序"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="enable"
+          label="状态"
+          align="center"
+          sortable
+          :formatter="enableFormatter"
+        ></el-table-column>
+        <el-table-column
+          prop="address"
+          label="操作"
+          align="center"
+          width="300"
+          fixed="right"
+        >
           <template slot-scope="scope">
-            <el-button size="small" type="warning" @click="bannerput(scope.$index, scope.row)">修改</el-button>
-            <el-button size="small" type="danger" @click="bannerdelete(scope.$index, scope.row)">删除</el-button>
+            <el-button
+              size="small"
+              type="warning"
+              @click="bannerput(scope.$index, scope.row)"
+              >修改</el-button
+            >
+            <el-button
+              size="small"
+              type="danger"
+              @click="bannerdelete(scope.$index, scope.row)"
+              >删除</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
     </el-main>
 
     <!-- 新增协议的对话框 -->
-    <el-dialog v-dialogDrag :title="dialogTitle" :visible.sync="dialogVisible" width="840px" :before-close="handleClose" @close="closeVisible">
+    <el-dialog
+      v-dialogDrag
+      :title="dialogTitle"
+      :visible.sync="dialogVisible"
+      width="840px"
+      :before-close="handleClose"
+    >
       <el-form :model="form" ref="form" label-width="120px">
         <el-row>
           <el-col :span="24">
-            <el-form-item label="轮播图图片" prop="image" style="width: 100%;">
-              <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" :file-list="fileList" :on-exceed="uploadlimit" :on-change="drivingupload1" accept=".png, .jpg, .jpeg">
+            <el-form-item label="轮播图图片" prop="image" style="width: 100%">
+              <el-upload
+                action="#"
+                list-type="picture-card"
+                :auto-upload="false"
+                :limit="1"
+                :file-list="fileList"
+                :on-exceed="uploadlimit"
+                :on-change="drivingupload1"
+                accept=".png, .jpg, .jpeg"
+              >
                 <i slot="default" class="el-icon-plus"></i>
-                <div slot="file" slot-scope="{file}">
-                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
+                <div slot="file" slot-scope="{ file }">
+                  <img
+                    class="el-upload-list__item-thumbnail"
+                    :src="file.url"
+                    alt
+                  />
                 </div>
               </el-upload>
             </el-form-item>
           </el-col>
         </el-row>
         <el-form-item label="轮播图名称" prop="title">
-          <el-input v-model="form.title" placeholder="请输入轮播图名称" style="width:300px;"></el-input>
+          <el-input
+            v-model="form.title"
+            placeholder="请输入轮播图名称"
+            style="width: 300px"
+          ></el-input>
         </el-form-item>
         <el-form-item label="轮播图排序" prop="sort">
-          <el-input v-model="form.sort" type="number" placeholder="请输入排序" style="width:150px;"></el-input>
+          <el-input
+            v-model="form.sort"
+            type="number"
+            placeholder="请输入排序"
+            style="width: 150px"
+          ></el-input>
         </el-form-item>
         <el-form-item label="手机头部颜色" prop="color">
-          <el-color-picker v-model="color" @change="colorchange"></el-color-picker>
+          <el-color-picker
+            v-model="color"
+            @change="colorchange"
+          ></el-color-picker>
         </el-form-item>
         <el-form-item label="是否开启" prop="enable">
           <el-select v-model="form.enable" placeholder="请选择是否开启">
@@ -67,6 +166,8 @@ import { formatWithSeperator, format } from "@/utils/datetime.js";
 export default {
   data() {
     return {
+      dialogTitle: "",
+      fileList: [],
       dialogVisible: false, //控制对话框显示
       form: {
         title: "", //标题
@@ -106,6 +207,7 @@ export default {
       }
     },
     bannerput(index, row) {
+      console.log(row);
       //修改
       this.dialogVisible = true;
       this.form = row;
@@ -136,8 +238,8 @@ export default {
           });
         });
     },
-    colorchange(e){
-        this.form.color=e;
+    colorchange(e) {
+      this.form.color = e;
     },
     submit() {
       if (!!this.id) {
@@ -166,7 +268,7 @@ export default {
         });
       }
     },
-    imgFormatter(row, column) {
+    imgFormatter(row) {
       let image = row.image;
       return <img src={"" + image + ""} class="imageclass"></img>;
     },
@@ -174,27 +276,19 @@ export default {
     handleAdd() {
       this.dialogTitle = "新增轮播图";
       this.dialogVisible = true;
-      console.log(this.fileList)
     },
 
     //--数据字典 end --
     // 上传图片的方法End
     handleClose(done) {
-      this.$confirm("确认关闭？")
+      this.$confirm("确认关闭？", { lockScroll: false })
         .then((_) => {
           done();
         })
         .catch((_) => {});
     },
-    closeVisible() {
-      this.$refs.form.resetFields();
-      for (let key in this.form) {
-        this.form[key] = "";
-      }
-    },
     //-- formatter begin--
-    enableFormatter(row, column) {
-      console.log(row);
+    enableFormatter(row) {
       if (row.enable == 1) {
         return "开启";
       } else {
@@ -204,7 +298,6 @@ export default {
     // 右侧列表的方法Start
     findPage() {
       this.$api.task.bannerQuery().then((res) => {
-        console.log(res);
         this.pageResult = res.data;
       });
     },

src/views/Sys/Deptall.vue

@@ -38,8 +38,8 @@
           permsEdit="sys:dept:edit"
           permsDelete="sys:dept:delete"
           :columns="columns"
-          :row-key="row_key"
-          :expand-row-keys="expandRowKeys"
+          row-key="id"
+          :expand-row-keys="['9']"
           border
           :data="ztreeNodes"
           :tree-props="{ children: 'children', hasChildren: 'hasChilkdren' }"
@@ -380,7 +380,6 @@ export default {
   },
   data() {
     return {
-      expandRowKeys: [],
       searchForm: {
         classname: "",
         status: "",
@@ -558,9 +557,6 @@ export default {
     };
   },
   methods: {
-    row_key(row) {
-      return row.id;
-    },
     //点击每一行的事件
     rowClick(row, treeNode) {
       console.log(row, treeNode);

src/views/Sys/Dict.vue

@@ -1,9 +1,9 @@
 <template>
-<div class="container" style="width:99%;margin-top:0px;">
+  <div class="container" style="width: 99%; margin-top: 0px">
     <!--布局容器-->
-    <el-container style="height: 100%;" direction="vertical">
-      <el-main style="padding: 0px;">
-        <Split :gutterSize="2" style="height: calc(100vh - 120px);">
+    <el-container style="height: 100%" direction="vertical">
+      <el-main style="padding: 0px">
+        <Split :gutterSize="2" style="height: calc(100vh - 120px)">
           <SplitArea :size="20">
             <kt-button
               icon="fa fa-plus"
@@ -21,34 +21,67 @@
             />
           </SplitArea>
           <SplitArea :size="80">
-    <!--工具栏-->
-    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
-      <el-form :inline="true" :model="filters" :size="size">
-        <!-- <el-form-item>
+            <!--工具栏-->
+            <div
+              class="toolbar"
+              style="float: left; padding-top: 10px; padding-left: 15px"
+            >
+              <el-form :inline="true" :model="filters" :size="size">
+                <!-- <el-form-item>
           <el-input v-model="filters.label" placeholder="名称"></el-input>
         </el-form-item>
         <el-form-item>
           <kt-button icon="fa fa-search" :label="$t('action.search')" perms="sys:dict:view" type="primary" @click="findPage(null)"/>
         </el-form-item> -->
-        <el-form-item>
-          <kt-button style="background-color: #52C578;border:#52C578;" icon="fa fa-plus" :label="$t('action.add')" perms="sys:dict:add" type="primary" @click="handleAdd" />
-        </el-form-item>
-      </el-form>
-    </div>
-    <!--表格内容栏-->
-    <kt-table :height="350" permsEdit="sys:dict:edit" permsDelete="sys:dict:delete"
-              :data="pageResult" :columns="columns"
-              @findPage="findPage" @handleEdit="handleEdit" @handleDelete="handleDelete">
-    </kt-table>
-            </SplitArea>
-      </Split>
-    </el-main>
-  </el-container>
+                <el-form-item>
+                  <kt-button
+                    style="background-color: #52c578; border: #52c578"
+                    icon="fa fa-plus"
+                    :label="$t('action.add')"
+                    perms="sys:dict:add"
+                    type="primary"
+                    @click="handleAdd"
+                  />
+                </el-form-item>
+              </el-form>
+            </div>
+            <!--表格内容栏-->
+            <kt-table
+              :height="350"
+              permsEdit="sys:dict:edit"
+              permsDelete="sys:dict:delete"
+              :data="pageResult"
+              :columns="columns"
+              @findPage="findPage"
+              @handleEdit="handleEdit"
+              @handleDelete="handleDelete"
+            >
+            </kt-table>
+          </SplitArea>
+        </Split>
+      </el-main>
+    </el-container>
     <!--新增编辑界面-->
-    <el-dialog :title="operation?'新增':'编辑'" width="40%" :visible.sync="editDialogVisible" :close-on-click-modal="false" v-dialogDrag>
-      <el-form :model="dataForm" label-width="80px" :rules="dataFormRules" ref="dataForm" :size="size">
-        <el-form-item label="ID" prop="id"  v-if="false">
-          <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
+    <el-dialog
+      :title="operation ? '新增' : '编辑'"
+      width="40%"
+      :visible.sync="editDialogVisible"
+      :close-on-click-modal="false"
+      v-dialogDrag
+    >
+      <el-form
+        :model="dataForm"
+        label-width="80px"
+        :rules="dataFormRules"
+        ref="dataForm"
+        :size="size"
+      >
+        <el-form-item label="ID" prop="id" v-if="false">
+          <el-input
+            v-model="dataForm.id"
+            :disabled="true"
+            auto-complete="off"
+          ></el-input>
         </el-form-item>
         <el-form-item label="名称" prop="label">
           <el-input v-model="dataForm.label" auto-complete="off"></el-input>
@@ -63,247 +96,308 @@
           <el-input v-model="dataForm.sort" auto-complete="off"></el-input>
         </el-form-item>
         <el-form-item label="描述 " prop="description">
-          <el-input v-model="dataForm.description" auto-complete="off" type="textarea"></el-input>
+          <el-input
+            v-model="dataForm.description"
+            auto-complete="off"
+            type="textarea"
+          ></el-input>
         </el-form-item>
         <el-form-item label="备注" prop="remarks">
-          <el-input v-model="dataForm.remarks" auto-complete="off" type="textarea"></el-input>
+          <el-input
+            v-model="dataForm.remarks"
+            auto-complete="off"
+            type="textarea"
+          ></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button :size="size" @click.native="editDialogVisible = false">{{$t('action.cancel')}}</el-button>
-        <el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">{{$t('action.submit')}}</el-button>
+        <el-button :size="size" @click.native="editDialogVisible = false">{{
+          $t("action.cancel")
+        }}</el-button>
+        <el-button
+          :size="size"
+          type="primary"
+          @click.native="submitForm"
+          :loading="editLoading"
+          >{{ $t("action.submit") }}</el-button
+        >
       </div>
     </el-dialog>
-    <el-dialog title="字典类型" width="80%" :visible.sync="editNewTypeDialogVisible" v-dialogDrag>
-      <el-form :model="dictTypeForm" label-width="120px" :rules="dictTypeFormRules" ref="dictTypeForm" :size="size">
-        <el-form-item label="ID" prop="id"  v-if="true">
-          <el-input v-model="dictTypeForm.id" :disabled="false" auto-complete="off"></el-input>
+    <el-dialog
+      title="字典类型"
+      width="80%"
+      :visible.sync="editNewTypeDialogVisible"
+      v-dialogDrag
+    >
+      <el-form
+        :model="dictTypeForm"
+        label-width="120px"
+        :rules="dictTypeFormRules"
+        ref="dictTypeForm"
+        :size="size"
+      >
+        <el-form-item label="ID" prop="id" v-if="true">
+          <el-input
+            v-model="dictTypeForm.id"
+            :disabled="false"
+            auto-complete="off"
+          ></el-input>
         </el-form-item>
-        <el-form-item label="父ID" prop="parentId"  v-if="true">
-          <el-input v-model="dictTypeForm.parentId" :disabled="false" auto-complete="off"></el-input>
+        <el-form-item label="父ID" prop="parentId" v-if="true">
+          <el-input
+            v-model="dictTypeForm.parentId"
+            :disabled="false"
+            auto-complete="off"
+          ></el-input>
         </el-form-item>
-        <el-form-item label="条目名称" prop="name" >
+        <el-form-item label="条目名称" prop="name">
           <el-input v-model="dictTypeForm.name" auto-complete="off"></el-input>
         </el-form-item>
-        <el-form-item label="条目英文名称" prop="itemname" >
-          <el-input v-model="dictTypeForm.itemname" auto-complete="off"></el-input>
+        <el-form-item label="条目英文名称" prop="itemname">
+          <el-input
+            v-model="dictTypeForm.itemname"
+            auto-complete="off"
+          ></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button :size="size" @click.native="editNewTypeDialogVisible = false">取消</el-button>
-        <el-button :size="size" type="primary" @click.native="submitTypeForm" :loading="editLoading">提交</el-button>
+        <el-button :size="size" @click.native="editNewTypeDialogVisible = false"
+          >取消</el-button
+        >
+        <el-button
+          :size="size"
+          type="primary"
+          @click.native="submitTypeForm"
+          :loading="editLoading"
+          >提交</el-button
+        >
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-  import KtTable from "@/views/Core/KtTable"
-  import KtButton from "@/views/Core/KtButton"
-  import { format } from "@/utils/datetime"
-  import tree from "@/components/ztree.vue";
-
+import KtTable from "@/views/Core/KtTable";
+import KtButton from "@/views/Core/KtButton";
+import { format } from "@/utils/datetime";
+import tree from "@/components/ztree.vue";
 
-  export default {
-    components:{
-          tree,
-      KtTable,
-      KtButton,
-    },
-    mounted() {
-         this.findLeftTreeData();
-    },
-    data() {
-      return {
-        //--分类 begin
-        dictTypeForm: {
-          id: '',
-          parentId: '',
-          name: '',
-          itemname: ''
-        },
-        dictTypeFormRules: {
-          name: [
-            { required: true, message: '请输入名称', trigger: 'blur' }
-          ]
-        },
-        //--分类 end
-        //----ztree begin---------
+export default {
+  components: {
+    tree,
+    KtTable,
+    KtButton,
+  },
+  mounted() {
+    this.findLeftTreeData();
+  },
+  data() {
+    return {
+      //--分类 begin
+      dictTypeForm: {
+        id: "",
+        parentId: "",
+        name: "",
+        itemname: "",
+      },
+      dictTypeFormRules: {
+        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+      },
+      //--分类 end
+      //----ztree begin---------
       ztreeObj: null,
       ztreeSetting: {
         check: {
-          enable: false
+          enable: false,
         },
         data: {
           simpleData: {
             enable: true,
-            pIdKey: "parentId"
-          }
+            pIdKey: "parentId",
+          },
         },
         view: {
           showIcon: false,
           //addHoverDom: this.addHoverDom,
           //removeHoverDom: this.removeHoverDom
-        }
+        },
       },
       ztreeNodes: [],
       currentTreeNode: null,
 
       //----ztree end---------
-   
-        size: 'small',
-        filters: {
-          label: ''
-        },
-        columns: [
-          {prop:"id", label:"ID", minWidth:50},
-          {prop:"label", label:"名称", minWidth:100},
-          {prop:"value", label:"值", minWidth:100},
-          {prop:"itemname", label:"类型", minWidth:80},
-          {prop:"sort", label:"排序", minWidth:80},
-          {prop:"description", label:"描述", minWidth:120},
-          {prop:"remarks", label:"备注", minWidth:120},
-          {prop:"createBy", label:"创建人", minWidth:100},
-          {prop:"createTime", label:"创建时间", minWidth:120, formatter:this.dateFormat}
-          // {prop:"lastUpdateBy", label:"更新人", minWidth:100},
-          // {prop:"lastUpdateTime", label:"更新时间", minWidth:120, formatter:this.dateFormat}
-        ],
-        pageRequest: { pageNum: 1, pageSize: 10 },
-        pageResult: {},
 
-        operType: "ADD", //'ADD','EDIT'
-        operation: false, // true:新增, false:编辑
-        editDialogVisible: false, // 新增编辑界面是否显示
-        editNewTypeDialogVisible: false, //新增编辑字典类型界面是否显示
-        editLoading: false,
-        dataFormRules: {
-          label: [
-            { required: true, message: '请输入名称', trigger: 'blur' }
-          ]
-        },
-        // 新增编辑界面数据
-        dataForm: {
-          id: 0,
-          label: '',
-          value: '',
-          itemname: '',
-          sort: 0,
-          description: '',
-          remarks: ''
-        }
-      }
-    },
-    methods: {
-      // 获取分页数据
-      findPage: function (data) {
-        if(data !== null) {
-          this.pageRequest = data.pageRequest
-        }
-        this.pageRequest.columnFilters = {label: {name:'label', value:this.filters.label}}
-        console.log(this.pageResult)
-        this.$api.dict.findPage(this.pageRequest).then((res) => {
-          this.pageResult = res.data
-        }).then(data!=null?data.callback:'')
-      },
-      // 批量删除
-      handleDelete: function (data) {
-        this.$api.dict.batchDelete(data.params).then(data!=null?data.callback:'')
+      size: "small",
+      filters: {
+        label: "",
       },
-      // 显示新增界面
-      handleAdd: function () {
-        debugger
-        if(!this.currentTreeNode || !this.currentTreeNode.itemname){
-          alert("请选择字典类型。");
-          return;
-        }
-        this.editDialogVisible = true
-        this.operation = true
-        this.operType = "ADD"
-        this.dataForm = {
-          id: 0,
-          label: '',
-          value: '',
-          itemname: '',
-          sort: 0,
-          description: 'desc',
-          remarks: 'remark'
-        }
-        this.dataForm.itemname = this.currentTreeNode.itemname;
+      columns: [
+        { prop: "id", label: "ID", minWidth: 50 },
+        { prop: "label", label: "名称", minWidth: 100 },
+        { prop: "value", label: "值", minWidth: 100 },
+        { prop: "itemname", label: "类型", minWidth: 80 },
+        { prop: "sort", label: "排序", minWidth: 80 },
+        { prop: "description", label: "描述", minWidth: 120 },
+        { prop: "remarks", label: "备注", minWidth: 120 },
+        { prop: "createBy", label: "创建人", minWidth: 100 },
+        {
+          prop: "createTime",
+          label: "创建时间",
+          minWidth: 120,
+          formatter: this.dateFormat,
+        },
+        // {prop:"lastUpdateBy", label:"更新人", minWidth:100},
+        // {prop:"lastUpdateTime", label:"更新时间", minWidth:120, formatter:this.dateFormat}
+      ],
+      pageRequest: { pageNum: 1, pageSize: 10 },
+      pageResult: {},
 
+      operType: "ADD", //'ADD','EDIT'
+      operation: false, // true:新增, false:编辑
+      editDialogVisible: false, // 新增编辑界面是否显示
+      editNewTypeDialogVisible: false, //新增编辑字典类型界面是否显示
+      editLoading: false,
+      dataFormRules: {
+        label: [{ required: true, message: "请输入名称", trigger: "blur" }],
       },
-      // 显示编辑界面
-      handleEdit: function (params) {
-        this.editDialogVisible = true
-        this.operType = "EDIT"
-        this.operation = false
-        this.dataForm = Object.assign({}, params.row)
+      // 新增编辑界面数据
+      dataForm: {
+        id: 0,
+        label: "",
+        value: "",
+        itemname: "",
+        sort: 0,
+        description: "",
+        remarks: "",
       },
-      // 编辑
-      submitForm: function () {
-        let that = this;
-        that.$refs.dataForm.validate((valid) => {
-          if (valid) {
-            that.$confirm('确认提交吗？', '提示', {}).then(() => {
-              that.editLoading = true
-              let params = Object.assign({}, that.dataForm)
-              if(that.operType === "ADD"){
-                that.$api.dict.add(params).then((res) => {
-                  if(res.code == 200) {
-                    that.$message({ message: '操作成功', type: 'success' })
-                  } else {
-                    that.$message({message: '操作失败, ' + res.msg, type: 'error'})
-                  }
-                  that.editLoading = false
-                  that.$refs['dataForm'].resetFields()
-                  that.editDialogVisible = false
-                  that.findPage(null)
-                })} else if(that.operType === "EDIT"){
-                    that.$api.dict.edit(params).then((res) => {
-                      if(res.code == 200) {
-                        that.$message({ message: '操作成功', type: 'success' })
-                      } else {
-                        that.$message({message: '操作失败, ' + res.msg, type: 'error'})
-                      }
-                      that.editLoading = false
-                      that.$refs['dataForm'].resetFields()
-                      that.editDialogVisible = false
-                      that.findPage(null)
-                    })
-              }
-            })
-          }
+    };
+  },
+  methods: {
+    // 获取分页数据
+    findPage: function (data) {
+      if (data !== null) {
+        this.pageRequest = data.pageRequest;
+      }
+      this.pageRequest.columnFilters = {
+        label: { name: "label", value: this.filters.label },
+      };
+      console.log(this.pageResult);
+      this.$api.dict
+        .findPage(this.pageRequest)
+        .then((res) => {
+          this.pageResult = res.data;
         })
-      },
-      //分类的编辑--begin---
-      submitTypeForm: function(){
-        this.$refs.dictTypeForm.validate((valid) => {
-          if (valid) {
-            this.$confirm('确认提交吗？', '提示', {}).then(() => {
-              console.log(this)
-              this.editLoading = true
-              let params = Object.assign({}, this.dictTypeForm)
-              this.$api.dict.savetype(params).then((res) => {
-                if(res.code == 200) {
-                  this.$message({ message: '操作成功', type: 'success' })
+        .then(data != null ? data.callback : "");
+    },
+    // 批量删除
+    handleDelete: function (data) {
+      this.$api.dict
+        .batchDelete(data.params)
+        .then(data != null ? data.callback : "");
+    },
+    // 显示新增界面
+    handleAdd: function () {
+      if (!this.currentTreeNode || !this.currentTreeNode.itemname) {
+        alert("请选择字典类型。");
+        return;
+      }
+      this.editDialogVisible = true;
+      this.operation = true;
+      this.operType = "ADD";
+      this.dataForm = {
+        id: 0,
+        label: "",
+        value: "",
+        itemname: "",
+        sort: 0,
+        description: "desc",
+        remarks: "remark",
+      };
+      this.dataForm.itemname = this.currentTreeNode.itemname;
+    },
+    // 显示编辑界面
+    handleEdit: function (params) {
+      this.editDialogVisible = true;
+      this.operType = "EDIT";
+      this.operation = false;
+      this.dataForm = Object.assign({}, params.row);
+    },
+    // 编辑
+    submitForm: function () {
+      let that = this;
+      that.$refs.dataForm.validate((valid) => {
+        if (valid) {
+          that.$confirm("确认提交吗？", "提示", {}).then(() => {
+            that.editLoading = true;
+            let params = Object.assign({}, that.dataForm);
+            if (that.operType === "ADD") {
+              that.$api.dict.add(params).then((res) => {
+                if (res.code == 200) {
+                  that.$message({ message: "操作成功", type: "success" });
                 } else {
-                  this.$message({message: '操作失败, ' + res.msg, type: 'error'})
+                  that.$message({
+                    message: "操作失败, " + res.msg,
+                    type: "error",
+                  });
                 }
-                this.editLoading = false
-                this.$refs['dictTypeForm'].resetFields()
-                this.editDialogVisible = false
-                this.findPage(null)
-              })
-            })
-          }
-        })
-      },
-      //分类的编辑--end---
+                that.editLoading = false;
+                that.$refs["dataForm"].resetFields();
+                that.editDialogVisible = false;
+                that.findPage(null);
+              });
+            } else if (that.operType === "EDIT") {
+              that.$api.dict.edit(params).then((res) => {
+                if (res.code == 200) {
+                  that.$message({ message: "操作成功", type: "success" });
+                } else {
+                  that.$message({
+                    message: "操作失败, " + res.msg,
+                    type: "error",
+                  });
+                }
+                that.editLoading = false;
+                that.$refs["dataForm"].resetFields();
+                that.editDialogVisible = false;
+                that.findPage(null);
+              });
+            }
+          });
+        }
+      });
+    },
+    //分类的编辑--begin---
+    submitTypeForm: function () {
+      this.$refs.dictTypeForm.validate((valid) => {
+        if (valid) {
+          this.$confirm("确认提交吗？", "提示", {}).then(() => {
+            console.log(this);
+            this.editLoading = true;
+            let params = Object.assign({}, this.dictTypeForm);
+            this.$api.dict.savetype(params).then((res) => {
+              if (res.code == 200) {
+                this.$message({ message: "操作成功", type: "success" });
+              } else {
+                this.$message({
+                  message: "操作失败, " + res.msg,
+                  type: "error",
+                });
+              }
+              this.editLoading = false;
+              this.$refs["dictTypeForm"].resetFields();
+              this.editDialogVisible = false;
+              this.findPage(null);
+            });
+          });
+        }
+      });
+    },
+    //分类的编辑--end---
 
-      //--tree begin-------
+    //--tree begin-------
     // 获取数据
-    findLeftTreeData: function() {
+    findLeftTreeData: function () {
       //this.loading = true;
-      this.$api.dict.findLeftDictTree().then(res => {
+      this.$api.dict.findLeftDictTree().then((res) => {
         console.log(res);
         //simpleData = res.data
         this.ztreeNodes = res.data;
@@ -311,7 +405,7 @@
       });
     },
 
-    onZTreeClick: function(evt, treeId, treeNode) {
+    onZTreeClick: function (evt, treeId, treeNode) {
       // 点击事件
       console.log(evt.type, treeNode);
       this.currentTreeNode = treeNode;
@@ -321,42 +415,42 @@
       this.pageRequest.pageNum = 1;
       this.findPage(null);
     },
-    onCheck: function(evt, treeId, treeNode) {
+    onCheck: function (evt, treeId, treeNode) {
       // 选中事件
       console.log(evt.type, treeNode);
     },
-    handleCreated: function(ztreeObj) {
+    handleCreated: function (ztreeObj) {
       this.ztreeObj = ztreeObj;
       // onCreated 中操作ztreeObj对象展开第一个节点
       ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
     },
-    onZTreeRightClick: function(){
+    onZTreeRightClick: function () {
       //alert("haha onZTreeRightClick");
     },
     //-- tree end-------
     //-- add begin -----
-    handleAddType: function(){
+    handleAddType: function () {
       this.editNewTypeDialogVisible = true;
     },
     //-- add end -------
-      // 时间格式化
-      dateFormat: function (row, column, cellValue, index){
-        return format(row[column.property])
-      }
-    }
-  }
+    // 时间格式化
+    dateFormat: function (row, column, cellValue, index) {
+      return format(row[column.property]);
+    },
+  },
+};
 </script>
 
 <style scoped>
-    .form {
-      /*width: 1170px;
+.form {
+  /*width: 1170px;
       margin: 100px auto 0;*/
-	  margin: 2px 10px 0;
-    }
-  .FormContainer{
-	border-left: 1px solid #ddd;
-  }
-  .FormTitle{
-	border-left: 0px;
-  }
+  margin: 2px 10px 0;
+}
+.FormContainer {
+  border-left: 1px solid #ddd;
+}
+.FormTitle {
+  border-left: 0px;
+}
 </style>

src/views/Sys/Role.vue

@@ -1,291 +1,419 @@
 <template>
   <div class="page-container">
-	<!--工具栏-->
-	<div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
-		<el-form :inline="true" :model="filters" :size="size">
-			<el-form-item>
-				<el-input v-model="filters.name" placeholder="角色名"></el-input>
-			</el-form-item>
-			<el-form-item>
-				<kt-button icon="fa fa-search" :label="$t('action.search')" perms="sys:role:view" type="primary" @click="findPage(null)"/>
-			</el-form-item>
-			<el-form-item>
-				<kt-button icon="fa fa-plus" :label="$t('action.add')" perms="sys:role:add" type="primary" @click="handleAdd" />
-			</el-form-item>
-		</el-form>
-	</div>
-	<!--表格内容栏-->
-	<kt-table :height="220" permsEdit="sys:role:edit" permsDelete="sys:role:delete" :highlightCurrentRow="true" :stripe="false"
-		:data="pageResult" :columns="columns" :showBatchDelete="false" @handleCurrentChange="handleRoleSelectChange"
-		@findPage="findPage" @handleEdit="handleEdit" @handleDelete="handleDelete">
-	</kt-table>
-	<!-- </el-col> -->
-	<!--新增编辑界面-->
-	<el-dialog  v-dialogDrag :title="operation?'新增':'编辑'" width="40%" :visible.sync="dialogVisible" :close-on-click-modal="false">
-		<el-form :model="dataForm" label-width="80px" :rules="dataFormRules" ref="dataForm" :size="size">
-			<el-form-item label="ID" prop="id" v-if="false">
-				<el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
-			</el-form-item>
-			<el-form-item label="角色名" prop="name">
-				<el-input v-model="dataForm.name" auto-complete="off"></el-input>
-			</el-form-item>
-			<el-form-item label="备注 " prop="remark">
-				<el-input v-model="dataForm.remark" auto-complete="off" type="textarea"></el-input>
-			</el-form-item>
-		</el-form>
-		<div slot="footer" class="dialog-footer">
-			<el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
-			<el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">{{$t('action.submit')}}</el-button>
-		</div>
-	</el-dialog>
-	<!--角色菜单，表格树内容栏-->
-	<div class="menu-container" :v-if="true">
-		<div class="menu-header">
-			<span><B>角色菜单授权</B></span>
-		</div>
-		<el-tree :data="menuData" size="mini" show-checkbox node-key="id" :props="defaultProps"
-			style="width: 100%;pading-top:20px;" ref="menuTree" :render-content="renderContent"
-			v-loading="menuLoading" element-loading-text="拼命加载中" :check-strictly="true"
-			@check-change="handleMenuCheckChange">
-		</el-tree>
-		<div style="float:left;padding-left:24px;padding-top:12px;padding-bottom:4px;">
-			<el-checkbox v-model="checkAll" @change="handleCheckAll" :disabled="this.selectRole.id == null"><b>全选</b></el-checkbox>
-		</div>
-		<div style="float:right;padding-right:15px;padding-top:4px;padding-bottom:4px;">
-			<kt-button :label="$t('action.reset')" perms="sys:role:edit" type="primary" @click="resetSelection" 
-				:disabled="this.selectRole.id == null"/>
-			<kt-button :label="$t('action.submit')" perms="sys:role:edit" type="primary" @click="submitAuthForm" 
-				:disabled="this.selectRole.id == null" :loading="authLoading"/>
-		</div>
-	</div>
+    <!--工具栏-->
+    <div
+      class="toolbar"
+      style="float: left; padding-top: 10px; padding-left: 15px"
+    >
+      <el-form :inline="true" :model="filters" :size="size">
+        <el-form-item>
+          <el-input v-model="filters.name" placeholder="角色名"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <kt-button
+            icon="fa fa-search"
+            :label="$t('action.search')"
+            perms="sys:role:view"
+            type="primary"
+            @click="findPage(null)"
+          />
+        </el-form-item>
+        <el-form-item>
+          <kt-button
+            icon="fa fa-plus"
+            :label="$t('action.add')"
+            perms="sys:role:add"
+            type="primary"
+            @click="handleAdd"
+          />
+        </el-form-item>
+      </el-form>
+    </div>
+    <!--表格内容栏-->
+    <kt-table
+      :height="220"
+      permsEdit="sys:role:edit"
+      permsDelete="sys:role:delete"
+      :highlightCurrentRow="true"
+      :stripe="false"
+      :data="pageResult"
+      :columns="columns"
+      :showBatchDelete="false"
+      @handleCurrentChange="handleRoleSelectChange"
+      @findPage="findPage"
+      @handleEdit="handleEdit"
+      @handleDelete="handleDelete"
+    >
+    </kt-table>
+    <!-- </el-col> -->
+    <!--新增编辑界面-->
+    <el-dialog
+      v-dialogDrag
+      :title="operation ? '新增' : '编辑'"
+      width="40%"
+      :visible.sync="dialogVisible"
+      :close-on-click-modal="false"
+    >
+      <el-form
+        :model="dataForm"
+        label-width="80px"
+        :rules="dataFormRules"
+        ref="dataForm"
+        :size="size"
+      >
+        <el-form-item label="ID" prop="id" v-if="false">
+          <el-input
+            v-model="dataForm.id"
+            :disabled="true"
+            auto-complete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="角色名" prop="name">
+          <el-input v-model="dataForm.name" auto-complete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="备注 " prop="remark">
+          <el-input
+            v-model="dataForm.remark"
+            auto-complete="off"
+            type="textarea"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :size="size" @click.native="dialogVisible = false">{{
+          $t("action.cancel")
+        }}</el-button>
+        <el-button
+          :size="size"
+          type="primary"
+          @click.native="submitForm"
+          :loading="editLoading"
+          >{{ $t("action.submit") }}</el-button
+        >
+      </div>
+    </el-dialog>
+    <!--角色菜单，表格树内容栏-->
+    <div class="menu-container" :v-if="true">
+      <div class="menu-header">
+        <span><B>角色菜单授权</B></span>
+      </div>
+      <el-tree
+        :data="menuData"
+        size="mini"
+        show-checkbox
+        node-key="id"
+        :props="defaultProps"
+        style="width: 100%; pading-top: 20px"
+        ref="menuTree"
+        :render-content="renderContent"
+        v-loading="menuLoading"
+        element-loading-text="拼命加载中"
+        @check-change="handleMenuCheckChange"
+      >
+      </el-tree>
+      <div
+        style="
+          float: left;
+          padding-left: 24px;
+          padding-top: 12px;
+          padding-bottom: 4px;
+        "
+      >
+        <el-checkbox
+          v-model="checkAll"
+          @change="handleCheckAll"
+          :disabled="this.selectRole.id == null"
+          ><b>全选</b></el-checkbox
+        >
+      </div>
+      <div
+        style="
+          float: right;
+          padding-right: 15px;
+          padding-top: 4px;
+          padding-bottom: 4px;
+        "
+      >
+        <kt-button
+          :label="$t('action.reset')"
+          perms="sys:role:edit"
+          type="primary"
+          @click="resetSelection"
+          :disabled="this.selectRole.id == null"
+        />
+        <kt-button
+          :label="$t('action.submit')"
+          perms="sys:role:edit"
+          type="primary"
+          @click="submitAuthForm"
+          :disabled="this.selectRole.id == null"
+          :loading="authLoading"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import KtTable from "@/views/Core/KtTable"
-import KtButton from "@/views/Core/KtButton"
-import TableTreeColumn from '@/views/Core/TableTreeColumn'
-import { format } from "@/utils/datetime"
+import KtTable from "@/views/Core/KtTable";
+import KtButton from "@/views/Core/KtButton";
+import TableTreeColumn from "@/views/Core/TableTreeColumn";
+import { format } from "@/utils/datetime";
 export default {
-	components:{
-		KtTable,
-		KtButton,
-		TableTreeColumn
-	},
-	data() {
-		return {
-			size: 'small',
-			filters: {
-				name: ''
-			},
-			columns: [
-				{prop:"id", label:"ID", minWidth:50},
-				{prop:"name", label:"角色名", minWidth:120},
-				{prop:"remark", label:"备注", minWidth:120},
-				{prop:"createBy", label:"创建人", minWidth:120},
-				{prop:"createTime", label:"创建时间", minWidth:120, formatter:this.dateFormat}
-				// {prop:"lastUpdateBy", label:"更新人", minWidth:100},
-				// {prop:"lastUpdateTime", label:"更新时间", minWidth:120, formatter:this.dateFormat}
-			],
-			pageRequest: { pageNum: 1, pageSize: 10 },
-			pageResult: {},
+  components: {
+    KtTable,
+    KtButton,
+    TableTreeColumn,
+  },
+  data() {
+    return {
+      size: "small",
+      filters: {
+        name: "",
+      },
+      columns: [
+        { prop: "id", label: "ID", minWidth: 50 },
+        { prop: "name", label: "角色名", minWidth: 120 },
+        { prop: "remark", label: "备注", minWidth: 120 },
+        { prop: "createBy", label: "创建人", minWidth: 120 },
+        {
+          prop: "createTime",
+          label: "创建时间",
+          minWidth: 120,
+          formatter: this.dateFormat,
+        },
+        // {prop:"lastUpdateBy", label:"更新人", minWidth:100},
+        // {prop:"lastUpdateTime", label:"更新时间", minWidth:120, formatter:this.dateFormat}
+      ],
+      pageRequest: { pageNum: 1, pageSize: 10 },
+      pageResult: {},
 
-			operation: false, // true:新增, false:编辑
-			dialogVisible: false, // 新增编辑界面是否显示
-			editLoading: false,
-			dataFormRules: {
-				name: [
-					{ required: true, message: '请输入角色名', trigger: 'blur' }
-				]
-			},
-			// 新增编辑界面数据
-			dataForm: {
-				id: 0,
-				name: '',
-				remark: ''
-			},
-			selectRole: {},
-			menuData: [],
-			menuSelections: [],
-			menuLoading: false,
-			authLoading: false,
-			checkAll: false,
-			currentRoleMenus: [],
-			defaultProps: {
-				children: 'children',
-				label: 'name'
-			}
-		}
-	},
-	methods: {
-		// 获取分页数据
-		findPage: function (data) {
-			if(data !== null) {
-				this.pageRequest = data.pageRequest
-			}
-			this.pageRequest.columnFilters = {name: {name:'name', value:this.filters.name}}
-			this.$api.role.findPage(this.pageRequest).then((res) => {
-				this.pageResult = res.data
-				this.findTreeData()
-			}).then(data!=null?data.callback:'')
-		},
-		// 批量删除
-		handleDelete: function (data) {
-			this.$api.role.batchDelete(data.params).then(data.callback)
-		},
-		// 显示新增界面
-		handleAdd: function () {
-			this.dialogVisible = true
-			this.operation = true
-			this.dataForm = {
-				id: 0,
-				name: '',
-				remark: ''
-			}
-		},
-		// 显示编辑界面
-		handleEdit: function (params) {
-			this.dialogVisible = true
-			this.operation = false
-			this.dataForm = Object.assign({}, params.row)
-		},
-		// 编辑
-		submitForm: function () {
-			this.$refs.dataForm.validate((valid) => {
-				if (valid) {
-					this.$confirm('确认提交吗？', '提示', {}).then(() => {
-						this.editLoading = true
-						let params = Object.assign({}, this.dataForm)
-						this.$api.role.save(params).then((res) => {
-							this.editLoading = false
-							if(res.code == 200) {
-								this.$message({ message: '操作成功', type: 'success' })
-								this.dialogVisible = false
-								this.$refs['dataForm'].resetFields()
-							} else {
-								this.$message({message: '操作失败, ' + res.msg, type: 'error'})
-							}
-							this.findPage(null)
-						})
-					})
-				}
-			})
-		},
-		// 获取数据
-		findTreeData: function () {
-			this.menuLoading = true
-			this.$api.menu.findMenuTree().then((res) => {
-				this.menuData = res.data
-				this.menuLoading = false
-			})
-		},
-		// 角色选择改变监听
-		handleRoleSelectChange(val) {
-			if(val == null || val.val == null) {
-				return
-			}
-			this.selectRole = val.val
-			this.$api.role.findRoleMenus({'roleId':val.val.id}).then((res) => {
-				this.currentRoleMenus = res.data
-				this.$refs.menuTree.setCheckedNodes(res.data)
-			})
-		},
-		// 树节点选择监听
-		handleMenuCheckChange(data, check, subCheck) {
-			if(check) {
-				// 节点选中时同步选中父节点
-				let parentId = data.parentId
-				this.$refs.menuTree.setChecked(parentId, true, false)
-			} else {
-				// 节点取消选中时同步取消选中子节点
-				if(data.children != null) {
-					data.children.forEach(element => {
-						this.$refs.menuTree.setChecked(element.id, false, false)
-					});
-				}
-			}
-		},
-		// 重置选择
-		resetSelection() {
-			this.checkAll = false
-			this.$refs.menuTree.setCheckedNodes(this.currentRoleMenus)
-		},
-		// 全选操作
-		handleCheckAll() {
-			if(this.checkAll) {
-				let allMenus = []
-				this.checkAllMenu(this.menuData, allMenus)
-				this.$refs.menuTree.setCheckedNodes(allMenus)
-			} else {
-				this.$refs.menuTree.setCheckedNodes([])
-			}
-		},
-		// 递归全选
-		checkAllMenu(menuData, allMenus) {
-			menuData.forEach(menu => {
-				allMenus.push(menu)
-				if(menu.children) {
-					this.checkAllMenu(menu.children, allMenus)
-				}
-			});
-		},
-		// 角色菜单授权提交
-		submitAuthForm() {
-			let roleId = this.selectRole.id
-			if('admin' == this.selectRole.name) {
-				this.$message({message: '超级管理员拥有所有菜单权限，不允许修改！', type: 'error'})
-				return
-			}
-			this.authLoading = true
-			let checkedNodes = this.$refs.menuTree.getCheckedNodes(false, true)
-			let roleMenus = []
-			for(let i=0, len=checkedNodes.length; i<len; i++) {
-				let roleMenu = { roleId:roleId, menuId:checkedNodes[i].id }
-				roleMenus.push(roleMenu)
-			}
-			this.$api.role.saveRoleMenus(roleMenus).then((res) => {
-				if(res.code == 200) {
-					this.$message({ message: '操作成功', type: 'success' })
-				} else {
-					this.$message({message: '操作失败, ' + res.msg, type: 'error'})
-				}
-				this.authLoading = false
-			})
-		},
-		renderContent(h, { node, data, store }) {
-			return (
-			<div class="column-container">
-				<span style="text-algin:center;margin-right:80px;">{data.name}</span>
-				<span style="text-algin:center;margin-right:80px;">
-					<el-tag type={data.type === 0?'':data.type === 1?'success':'info'} size="small">
-						{data.type === 0?'目录':data.type === 1?'菜单':'按钮'}
-					</el-tag>
-				</span>
-				<span style="text-algin:center;margin-right:80px;"> <i class={data.icon}></i></span>
-				<span style="text-algin:center;margin-right:80px;">{data.parentName?data.parentName:'顶级菜单'}</span>
-				<span style="text-algin:center;margin-right:80px;">{data.url?data.url:'\t'}</span>
-			</div>);
-      	},
-		// 时间格式化
-      	dateFormat: function (row, column, cellValue, index){
-          	return format(row[column.property])
-      	}
-		
-	},
-	mounted() {
-	}
-}
+      operation: false, // true:新增, false:编辑
+      dialogVisible: false, // 新增编辑界面是否显示
+      editLoading: false,
+      dataFormRules: {
+        name: [{ required: true, message: "请输入角色名", trigger: "blur" }],
+      },
+      // 新增编辑界面数据
+      dataForm: {
+        id: 0,
+        name: "",
+        remark: "",
+      },
+      selectRole: {},
+      menuData: [],
+      menuSelections: [],
+      menuLoading: false,
+      authLoading: false,
+      checkAll: false,
+      currentRoleMenus: [],
+      defaultProps: {
+        children: "children",
+        label: "name",
+      },
+      leveData: [],
+    };
+  },
+  created() {
+    this.getLeveData();
+  },
+  methods: {
+    getLeveData() {},
+    // 获取分页数据
+    findPage: function (data) {
+      if (data !== null) {
+        this.pageRequest = data.pageRequest;
+      }
+      this.pageRequest.columnFilters = {
+        name: { name: "name", value: this.filters.name },
+      };
+      this.$api.role
+        .findPage(this.pageRequest)
+        .then((res) => {
+          this.pageResult = res.data;
+          this.findTreeData();
+        })
+        .then(data != null ? data.callback : "");
+    },
+    // 批量删除
+    handleDelete: function (data) {
+      this.$api.role.batchDelete(data.params).then(data.callback);
+    },
+    // 显示新增界面
+    handleAdd: function () {
+      this.dialogVisible = true;
+      this.operation = true;
+      this.dataForm = {
+        id: 0,
+        name: "",
+        remark: "",
+      };
+    },
+    // 显示编辑界面
+    handleEdit: function (params) {
+      this.dialogVisible = true;
+      this.operation = false;
+      this.dataForm = Object.assign({}, params.row);
+    },
+    // 编辑
+    submitForm: function () {
+      this.$refs.dataForm.validate((valid) => {
+        if (valid) {
+          this.$confirm("确认提交吗？", "提示", {}).then(() => {
+            this.editLoading = true;
+            let params = Object.assign({}, this.dataForm);
+            this.$api.role.save(params).then((res) => {
+              this.editLoading = false;
+              if (res.code == 200) {
+                this.$message({ message: "操作成功", type: "success" });
+                this.dialogVisible = false;
+                this.$refs["dataForm"].resetFields();
+              } else {
+                this.$message({
+                  message: "操作失败, " + res.msg,
+                  type: "error",
+                });
+              }
+              this.findPage(null);
+            });
+          });
+        }
+      });
+    },
+    // 获取数据
+    findTreeData: function () {
+      this.menuLoading = true;
+      this.$api.menu.findMenuTree().then((res) => {
+        this.menuData = res.data;
+        this.menuLoading = false;
+      });
+    },
+    // 角色选择改变监听
+    handleRoleSelectChange(val) {
+      if (val == null || val.val == null) {
+        return;
+      }
+      this.selectRole = val.val;
+      this.$api.role.findRoleMenus({ roleId: val.val.id }).then((res) => {
+        this.currentRoleMenus = res.data;
+        this.$refs.menuTree.setCheckedNodes(res.data);
+      });
+    },
+    // 树节点选择监听
+    handleMenuCheckChange(data, check, subCheck) {
+      let checkNode = this.$refs.menuTree.getCheckedKeys();
+      console.log(checkNode.length);
+      let checked = checkNode.length;
+      if (checked !== 188) {
+        this.checkAll = false;
+      } else {
+        this.checkAll = true;
+      }
+      // this.$api.menu.findMenuTree().then((res) => {
+      //   let array = res.data;
+      //   function treeForeach(array, fun) {
+      //     array.forEach((data) => {
+      //       fun(data);
+      //       data.children && treeForeach(data.children, fun); // 遍历子树
+      //     });
+      //   }
+      //   treeForeach(array, (node) => {
+      //     console.log(node);
+      //   });
+      // });
+    },
+    // 重置选择
+    resetSelection() {
+      this.checkAll = false;
+      this.$refs.menuTree.setCheckedNodes([]);
+    },
+    // 全选操作
+    handleCheckAll() {
+      if (this.checkAll) {
+        let allMenus = [];
+        this.checkAllMenu(this.menuData, allMenus);
+        this.$refs.menuTree.setCheckedNodes(allMenus);
+      } else {
+        this.$refs.menuTree.setCheckedNodes([]);
+      }
+    },
+    // 递归全选
+    checkAllMenu(menuData, allMenus) {
+      menuData.forEach((menu) => {
+        allMenus.push(menu);
+        if (menu.children) {
+          this.checkAllMenu(menu.children, allMenus);
+        }
+      });
+    },
+    // 角色菜单授权提交
+    submitAuthForm() {
+      let roleId = this.selectRole.id;
+      if ("admin" == this.selectRole.name) {
+        this.$message({
+          message: "超级管理员拥有所有菜单权限，不允许修改！",
+          type: "error",
+        });
+        return;
+      }
+      this.authLoading = true;
+      let checkedNodes = this.$refs.menuTree.getCheckedNodes(false, true);
+      let roleMenus = [];
+      for (let i = 0, len = checkedNodes.length; i < len; i++) {
+        let roleMenu = { roleId: roleId, menuId: checkedNodes[i].id };
+        roleMenus.push(roleMenu);
+      }
+      this.$api.role.saveRoleMenus(roleMenus).then((res) => {
+        if (res.code == 200) {
+          this.$message({ message: "操作成功", type: "success" });
+        } else {
+          this.$message({ message: "操作失败, " + res.msg, type: "error" });
+        }
+        this.authLoading = false;
+      });
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <div class="column-container">
+          <span style="text-algin:center;margin-right:80px;">{data.name}</span>
+          <span style="text-algin:center;margin-right:80px;">
+            <el-tag
+              type={data.type === 0 ? "" : data.type === 1 ? "success" : "info"}
+              size="small"
+            >
+              {data.type === 0 ? "目录" : data.type === 1 ? "菜单" : "按钮"}
+            </el-tag>
+          </span>
+          <span style="text-algin:center;margin-right:80px;">
+            {" "}
+            <i class={data.icon}></i>
+          </span>
+          <span style="text-algin:center;margin-right:80px;">
+            {data.parentName ? data.parentName : "顶级菜单"}
+          </span>
+          <span style="text-algin:center;margin-right:80px;">
+            {data.url ? data.url : "\t"}
+          </span>
+        </div>
+      );
+    },
+    // 时间格式化
+    dateFormat: function (row, column, cellValue, index) {
+      return format(row[column.property]);
+    },
+  },
+  mounted() {},
+};
 </script>
 <style scoped>
 .menu-container {
-	margin-top: 10px;
+  margin-top: 10px;
 }
 .menu-header {
-	padding-left: 8px;
-	padding-bottom: 5px;
-	text-align: left;
-	font-size: 16px;
-	color: rgb(20, 89, 121);
-	
+  padding-left: 8px;
+  padding-bottom: 5px;
+  text-align: left;
+  font-size: 16px;
+  color: rgb(20, 89, 121);
 }
 </style>

src/views/Sys/Sysdict.vue

@@ -0,0 +1,125 @@
+<template>
+  <el-row class="block-col">
+    <div>
+      <el-col :span="4">
+        <el-divider content-position="left">类型</el-divider>
+        <el-tree
+          :data="tableData"
+          :props="defaultProps"
+          @node-click="handleNodeClick"
+          highlight-current
+          icon-class="el-icon-star-on"
+        ></el-tree>
+      </el-col>
+      <el-divider direction="vertical"></el-divider>
+    </div>
+
+    <div class="table">
+      <el-col :span="20">
+        <el-table
+          style="width: 100%; font-size: 13px"
+          permsEdit="sys:dept:edit"
+          permsDelete="sys:dept:delete"
+          border
+          :data="ztreeNodes"
+          :header-cell-style="{
+            background: '#F2F7FC',
+            fontWeight: '900',
+            color: '#606266',
+            textAlign: 'center',
+          }"
+          size="small"
+          ref="expandTable"
+          highlight-current-row
+          :cell-style="{ textAlign: 'center' }"
+        >
+          <el-table-column
+            prop="dictTag"
+            label="字典名称"
+            width="300"
+          ></el-table-column>
+          <el-table-column prop="dictValue" label="字典键值" width="180">
+          </el-table-column>
+          <el-table-column
+            prop="sort"
+            label="字典排序"
+            sortable
+          ></el-table-column>
+
+          <el-table-column prop="status" label="状态">
+            <template slot-scope="scope">
+              <el-tag>{{ (scope.status = "0" ? "启用" : "停用") }}</el-tag>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </div>
+  </el-row>
+</template>
+
+<script>
+export default {
+  components: {},
+  mounted() {
+    this.dictList();
+  },
+  data() {
+    return {
+      tableData: [],
+      ztreeNodes: [],
+      defaultProps: {
+        label: "dictName",
+      },
+    };
+  },
+  methods: {
+    handleNodeClick(data) {
+      this.ztreeNodes = data.ddList;
+    },
+    dictList: function (data) {
+      this.$api.dict
+        .dictList()
+        .then((res) => {
+          this.tableData = res;
+        })
+        .then(data != null ? data.callback : "");
+    },
+    //formatter 格式
+    // enableFormatter(row) {
+    //   if (row.status == 0) {
+    //     return "启用";
+    //   } else {
+    //     return "停用";
+    //   }
+    // },
+  },
+};
+</script>
+<style scoped>
+.block-col {
+  margin-top: 13px;
+}
+.el-divider--horizontal {
+  margin: 3px 0 20px -4px;
+  padding: 0;
+  color: #585858;
+}
+.el-divider__text.is-left {
+  left: 5px;
+  font-size: 16px;
+}
+.el-divider__text {
+  padding: 0 10px;
+}
+.el-divider--vertical {
+  display: inline-block;
+  width: 2px;
+  height: 5000px;
+  margin: -20px -2px;
+  vertical-align: middle;
+  position: fixed;
+}
+.el-table {
+  margin-top: 3px;
+}
+</style>