Răsfoiți Sursa

Merge branch 'dev' of http://39.101.143.165:8090/sxzgd/vue-insagent-pc into dev

lihongxiao 1 an în urmă
părinte
comite
8db2aa6ef1

BIN
src/assets/image/delete.png


BIN
src/assets/image/edit.png


BIN
src/assets/image/search.png


+ 8 - 0
src/http/moudules/menu.js

@@ -143,3 +143,11 @@ export const getConfig = (data) => {
     })
     })
 }
 }
 
 
+
+//权限配置树
+export const newfindMenuTree = () => {
+    return axios({
+        url: '/menu/v1/findMenuTree',
+        method: 'get'
+    })
+}

+ 16 - 0
src/http/moudules/user.js

@@ -714,4 +714,20 @@ export const getUserDeptTree = (data) => {
     method: 'post',
     method: 'post',
     data
     data
   })
   })
+}
+
+export const deleteUserRole = (data) => {
+    return axios({
+        url: '/user/deleteUserRole',
+        method: 'post',
+        data
+    })
+}
+
+export const roleAddUser = (data) => {
+  return axios({
+      url: '/user/roleAddUser',
+      method: 'post',
+      data
+  })
 }
 }

+ 237 - 215
src/views/PeopleManage/Sales/SalesManage.vue

@@ -108,9 +108,8 @@
                       size="small"
                       size="small"
                       type="primary"
                       type="primary"
                       @click="queryStaffInfo"
                       @click="queryStaffInfo"
-                    >查询
-                    </el-button
-                    >
+                      >查询
+                    </el-button>
                   </el-form-item>
                   </el-form-item>
                 </el-col>
                 </el-col>
               </el-row>
               </el-row>
@@ -154,7 +153,11 @@
       v-dialogDrag
       v-dialogDrag
       class="people-style"
       class="people-style"
     >
     >
-      <el-tabs v-model="activeName" :before-leave="beforeTabLeave" class="tab-style">
+      <el-tabs
+        v-model="activeName"
+        :before-leave="beforeTabLeave"
+        class="tab-style"
+      >
         <el-tab-pane label="基本信息" name="1">
         <el-tab-pane label="基本信息" name="1">
           <el-form
           <el-form
             :model="formData"
             :model="formData"
@@ -185,8 +188,7 @@
                     @change="handleChange"
                     @change="handleChange"
                   >
                   >
                   </el-cascader>
                   </el-cascader>
-                </el-form-item
-                >
+                </el-form-item>
               </el-col>
               </el-col>
               <el-col :span="8">
               <el-col :span="8">
                 <el-form-item label="机构部门" prop="deptId">
                 <el-form-item label="机构部门" prop="deptId">
@@ -205,8 +207,7 @@
                     @change="handleChange"
                     @change="handleChange"
                   >
                   >
                   </el-cascader>
                   </el-cascader>
-                </el-form-item
-                >
+                </el-form-item>
               </el-col>
               </el-col>
               <el-col :span="8">
               <el-col :span="8">
                 <el-form-item label="岗位" prop="positionId">
                 <el-form-item label="岗位" prop="positionId">
@@ -229,22 +230,26 @@
             <el-row>
             <el-row>
               <el-col :span="8">
               <el-col :span="8">
                 <el-form-item label="工号" prop="id">
                 <el-form-item label="工号" prop="id">
-                  <el-input v-model="formData.id" disabled
-                            style="width: 100%"
+                  <el-input
+                    v-model="formData.id"
+                    disabled
+                    style="width: 100%"
                   ></el-input>
                   ></el-input>
                 </el-form-item>
                 </el-form-item>
               </el-col>
               </el-col>
               <el-col :span="8">
               <el-col :span="8">
                 <el-form-item label="姓名" prop="name">
                 <el-form-item label="姓名" prop="name">
-                  <el-input v-model="formData.name"
-                            style="width: 100%"
+                  <el-input
+                    v-model="formData.name"
+                    style="width: 100%"
                   ></el-input>
                   ></el-input>
                 </el-form-item>
                 </el-form-item>
               </el-col>
               </el-col>
               <el-col :span="8">
               <el-col :span="8">
                 <el-form-item label="手机号" prop="mobile">
                 <el-form-item label="手机号" prop="mobile">
-                  <el-input v-model="formData.mobile"
-                            style="width: 100%"
+                  <el-input
+                    v-model="formData.mobile"
+                    style="width: 100%"
                   ></el-input>
                   ></el-input>
                 </el-form-item>
                 </el-form-item>
               </el-col>
               </el-col>
@@ -321,13 +326,18 @@
               </el-col>
               </el-col>
               <el-col :span="8">
               <el-col :span="8">
                 <el-form-item label="管理人工号" prop="leaderName">
                 <el-form-item label="管理人工号" prop="leaderName">
-                  <el-input v-model="formData.leaderId" disabled
-                            style="width: 100%"
+                  <el-input
+                    v-model="formData.leaderId"
+                    disabled
+                    style="width: 100%"
                   ></el-input>
                   ></el-input>
                 </el-form-item>
                 </el-form-item>
               </el-col>
               </el-col>
               <el-col :span="8">
               <el-col :span="8">
-                <el-form-item label="代理人资格证号" prop="agentQualificationCode">
+                <el-form-item
+                  label="代理人资格证号"
+                  prop="agentQualificationCode"
+                >
                   <el-input
                   <el-input
                     style="width: 100%"
                     style="width: 100%"
                     v-model="formDataDetail.agentQualificationCode"
                     v-model="formDataDetail.agentQualificationCode"
@@ -357,31 +367,28 @@
               </el-col>
               </el-col>
               <el-col :span="8">
               <el-col :span="8">
                 <el-form-item label="电销管理工号" prop="managerId">
                 <el-form-item label="电销管理工号" prop="managerId">
-                  <el-input v-model="formData.managerId" disabled
-                            style="width: 100%"
+                  <el-input
+                    v-model="formData.managerId"
+                    disabled
+                    style="width: 100%"
                   ></el-input>
                   ></el-input>
                 </el-form-item>
                 </el-form-item>
               </el-col>
               </el-col>
-              <el-col :span="8">
-              </el-col>
+              <el-col :span="8"> </el-col>
             </el-row>
             </el-row>
           </el-form>
           </el-form>
           <div class="footerHandle" style="text-align: right">
           <div class="footerHandle" style="text-align: right">
             <el-button
             <el-button
               size="small"
               size="small"
               type="primary"
               type="primary"
-              style="
-                border: 1px solid #D42426;
-                color: #D42426;
-              "
+              style="border: 1px solid #d42426; color: #d42426"
               class="closeBtn"
               class="closeBtn"
               @click="closeDialog"
               @click="closeDialog"
               >取消</el-button
               >取消</el-button
             >
             >
             <el-button size="small" type="primary" @click="nextStep"
             <el-button size="small" type="primary" @click="nextStep"
-            >下一步
-            </el-button
-            >
+              >下一步
+            </el-button>
           </div>
           </div>
         </el-tab-pane>
         </el-tab-pane>
         <el-tab-pane label="详细信息" name="2">
         <el-tab-pane label="详细信息" name="2">
@@ -397,10 +404,7 @@
             <el-button
             <el-button
               size="small"
               size="small"
               type="primary"
               type="primary"
-              style="
-                border: 1px solid #D42426;
-                color: #D42426;
-              "
+              style="border: 1px solid #d42426; color: #d42426"
               class="closeBtn"
               class="closeBtn"
               @click="closeDialog"
               @click="closeDialog"
               >取消</el-button
               >取消</el-button
@@ -410,9 +414,8 @@
             </el-button
             </el-button
             > -->
             > -->
             <el-button size="small" type="primary" @click="activeName = '3'"
             <el-button size="small" type="primary" @click="activeName = '3'"
-            >下一步
-            </el-button
-            >
+              >下一步
+            </el-button>
           </div>
           </div>
           <!-- <div style="text-align: right">
           <!-- <div style="text-align: right">
             <el-button
             <el-button
@@ -449,10 +452,7 @@
             <el-button
             <el-button
               size="small"
               size="small"
               type="primary"
               type="primary"
-              style="
-                border: 1px solid #D42426;
-                color: #D42426;
-              "
+              style="border: 1px solid #d42426; color: #d42426"
               class="closeBtn"
               class="closeBtn"
               @click="closeDialog"
               @click="closeDialog"
               >取消</el-button
               >取消</el-button
@@ -462,9 +462,8 @@
             </el-button
             </el-button
             > -->
             > -->
             <el-button size="small" type="primary" @click="submitForm"
             <el-button size="small" type="primary" @click="submitForm"
-            >提交
-            </el-button
-            >
+              >提交
+            </el-button>
           </div>
           </div>
         </el-tab-pane>
         </el-tab-pane>
       </el-tabs>
       </el-tabs>
@@ -478,7 +477,7 @@
       class="dialogOut people-style"
       class="dialogOut people-style"
     >
     >
       <div>
       <div>
-        <el-form  class="personnelInformation">
+        <el-form class="personnelInformation">
           <el-form-item label="离职时间" prop="logoutTime">
           <el-form-item label="离职时间" prop="logoutTime">
             <el-date-picker
             <el-date-picker
               value-format="yyyy-MM-dd"
               value-format="yyyy-MM-dd"
@@ -501,14 +500,26 @@
               <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
               <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
               <img v-if="logoutImg" :src="logoutImg" class="avatar" />
               <img v-if="logoutImg" :src="logoutImg" class="avatar" />
               <div v-else class="upload-icon">
               <div v-else class="upload-icon">
-                <img src="@/assets/image/people/camera.svg" alt="">
+                <img src="@/assets/image/people/camera.svg" alt="" />
                 <div class="el-upload__text">上传资料</div>
                 <div class="el-upload__text">上传资料</div>
               </div>
               </div>
               <span class="slot" v-show="logoutImg">
               <span class="slot" v-show="logoutImg">
-                <i class="preview" @click.stop="handlePictureCardPreview(logoutImg)"></i>
-                <img class="close"  src="@/assets/image/people/close.png" alt="" @click.stop="handlePictureCardDelete('LZ_01')">
-                <div  class="bottomHandle">
-                  <img class="reset" src="@/assets/image/people/reset.png" alt="">
+                <i
+                  class="preview"
+                  @click.stop="handlePictureCardPreview(logoutImg)"
+                ></i>
+                <img
+                  class="close"
+                  src="@/assets/image/people/close.png"
+                  alt=""
+                  @click.stop="handlePictureCardDelete('LZ_01')"
+                />
+                <div class="bottomHandle">
+                  <img
+                    class="reset"
+                    src="@/assets/image/people/reset.png"
+                    alt=""
+                  />
                   <span class="title">点击重新上传</span>
                   <span class="title">点击重新上传</span>
                 </div>
                 </div>
               </span>
               </span>
@@ -521,8 +532,13 @@
         <el-button @click="closeDialogOut">取消</el-button>
         <el-button @click="closeDialogOut">取消</el-button>
       </div>
       </div>
     </el-dialog>
     </el-dialog>
-    <personnelHistory ref="personnelHistory" ></personnelHistory>
-    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :z-index="9999" :url-list="[ProViewImg]" />
+    <personnelHistory ref="personnelHistory"></personnelHistory>
+    <el-image-viewer
+      v-if="showViewer"
+      :on-close="closeViewer"
+      :z-index="9999"
+      :url-list="[ProViewImg]"
+    />
   </div>
   </div>
 </template>
 </template>
 
 
@@ -531,7 +547,7 @@ import KtButton from "@/views/Core/KtButton"; // 按钮权限组件
 import tree from "@/components/ztree.vue"; // 机构树组件
 import tree from "@/components/ztree.vue"; // 机构树组件
 import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
 import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
 import peopleImage from "@/components/PeopleImage/index.vue"; //影像组件
 import peopleImage from "@/components/PeopleImage/index.vue"; //影像组件
-import {validateSfz} from "../../../utils/validate.js";
+import { validateSfz } from "../../../utils/validate.js";
 import userDetail from "@/components/UserDetail/index.vue"; // 详情信息
 import userDetail from "@/components/UserDetail/index.vue"; // 详情信息
 import personnelHistory from "@/components/PersonnelHistory/index.vue"; //人员修改历史
 import personnelHistory from "@/components/PersonnelHistory/index.vue"; //人员修改历史
 import mixa from "../mixin";
 import mixa from "../mixin";
@@ -547,13 +563,14 @@ export default {
     userDetail,
     userDetail,
     peopleImage,
     peopleImage,
     personnelHistory,
     personnelHistory,
-    "el-image-viewer": () => import("element-ui/packages/image/src/image-viewer")
+    "el-image-viewer": () =>
+      import("element-ui/packages/image/src/image-viewer"),
   },
   },
   mixins: [mixin],
   mixins: [mixin],
   data() {
   data() {
     return {
     return {
       deptId: "99",
       deptId: "99",
-      managerOptions:[], //电销管理集合
+      managerOptions: [], //电销管理集合
       logoutTime: "", // 离司 离职时间
       logoutTime: "", // 离司 离职时间
       logoutImg: "", // 离司 图片
       logoutImg: "", // 离司 图片
       logoutImgId: "",
       logoutImgId: "",
@@ -574,10 +591,10 @@ export default {
         roleId: "3",
         roleId: "3",
       },
       },
       formDataRules: {
       formDataRules: {
-        deptId: [{required: true, message: "请选择机构", trigger: "change"}],
+        deptId: [{ required: true, message: "请选择机构", trigger: "change" }],
         mobile: [
         mobile: [
-          {required: true, message: "请输入手机号", trigger: "blur"},
-          {min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur"},
+          { required: true, message: "请输入手机号", trigger: "blur" },
+          { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
           {
           {
             pattern:
             pattern:
               /^1(3[0-9]|4[0-9]|5[0-9]|6[2-9]|7[0-9]|8[0-9]|9[0-9])\d{8}$/,
               /^1(3[0-9]|4[0-9]|5[0-9]|6[2-9]|7[0-9]|8[0-9]|9[0-9])\d{8}$/,
@@ -585,10 +602,12 @@ export default {
             trigger: "blur",
             trigger: "blur",
           },
           },
         ],
         ],
-        name: [{required: true, message: "请填写名称", trigger: "blur"}],
+        name: [{ required: true, message: "请填写名称", trigger: "blur" }],
         // password: [{ required: true, message: "请填写密码", trigger: "blur" }],
         // password: [{ required: true, message: "请填写密码", trigger: "blur" }],
-        status: [{required: true, message: "请选择状态", trigger: "change"}],
-        managerId: [{required: true, message: "请选择电销管理人", trigger: "change"}],
+        status: [{ required: true, message: "请选择状态", trigger: "change" }],
+        managerId: [
+          { required: true, message: "请选择电销管理人", trigger: "change" },
+        ],
         // roleId: [{ required: true, message: "请填写角色", trigger: "blur" }],
         // roleId: [{ required: true, message: "请填写角色", trigger: "blur" }],
         // identity: [
         // identity: [
         //   { required: true, message: "请填写身份证号" },
         //   { required: true, message: "请填写身份证号" },
@@ -608,7 +627,7 @@ export default {
       pageResult: {},
       pageResult: {},
       columns: [
       columns: [
         // 数据列
         // 数据列
-        {prop: "deptId", label: "部门编码", minWidth: 80, sortable: false},
+        { prop: "deptId", label: "部门编码", minWidth: 80, sortable: false },
         {
         {
           prop: "pdeptName",
           prop: "pdeptName",
           label: "机构名称",
           label: "机构名称",
@@ -616,18 +635,18 @@ export default {
           sortable: false,
           sortable: false,
         },
         },
 
 
-        {prop: "deptName", label: "部门名称", minWidth: 80, sortable: false},
+        { prop: "deptName", label: "部门名称", minWidth: 80, sortable: false },
 
 
-        {prop: "userId", label: "工号", minWidth: 80, sortable: false},
-        {prop: "name", label: "姓名", minWidth: 120, sortable: false},
+        { prop: "userId", label: "工号", minWidth: 80, sortable: false },
+        { prop: "name", label: "姓名", minWidth: 120, sortable: false },
         {
         {
           prop: "sex",
           prop: "sex",
           label: "性别",
           label: "性别",
           minWidth: 80,
           minWidth: 80,
           sortable: false,
           sortable: false,
-          isSex: true
+          isSex: true,
         },
         },
-        {prop: "mobile", label: "联系电话", minWidth: 100, sortable: false},
+        { prop: "mobile", label: "联系电话", minWidth: 100, sortable: false },
         {
         {
           prop: "roleId",
           prop: "roleId",
           label: "角色",
           label: "角色",
@@ -663,7 +682,7 @@ export default {
           label: "状态",
           label: "状态",
           minWidth: 120,
           minWidth: 120,
           sortable: false,
           sortable: false,
-          isStatus: true
+          isStatus: true,
         },
         },
       ],
       ],
       dialogTitle: "",
       dialogTitle: "",
@@ -686,44 +705,47 @@ export default {
       //影像上传列表
       //影像上传列表
       imagesIdList: [],
       imagesIdList: [],
       pdeptId: null,
       pdeptId: null,
-      dropdownOption:[
+      dropdownOption: [
         {
         {
-          label:'人员轨迹',
-          click:(row)=>this.checkHistory(row)
-        }
+          label: "人员轨迹",
+          click: (row) => this.checkHistory(row),
+        },
       ],
       ],
       showViewer: false,
       showViewer: false,
-      ProViewImg: null
+      ProViewImg: null,
     };
     };
   },
   },
   created() {
   created() {
     this.searchLeaderFun();
     this.searchLeaderFun();
     this.getDictItems("user_status");
     this.getDictItems("user_status");
-
   },
   },
   methods: {
   methods: {
     // 离司恢复
     // 离司恢复
     handleRest(data) {
     handleRest(data) {
-      this.$confirm('是否恢复', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$api.user.separationReinstatement(data.row.userId).then((res) => {
-          if (res.code == 200) {
-            this.$message({
-              type: 'success',
-              message: res.msg
+      this.$confirm("是否恢复", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$api.user
+            .separationReinstatement(data.row.userId)
+            .then((res) => {
+              if (res.code == 200) {
+                this.$message({
+                  type: "success",
+                  message: res.msg,
+                });
+                this.findPage();
+              }
             });
             });
-            this.findPage();
-          }
         })
         })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消'
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消",
+          });
         });
         });
-      });
     },
     },
     //上传影像
     //上传影像
     httpRequest(options) {
     httpRequest(options) {
@@ -774,7 +796,7 @@ export default {
             type: "LZ_01",
             type: "LZ_01",
           },
           },
         ],
         ],
-        sysUser: {id: this.lineId, logoutTime: this.logoutTime},
+        sysUser: { id: this.lineId, logoutTime: this.logoutTime },
         sysUserInfo: {},
         sysUserInfo: {},
       };
       };
       this.$api.user.departApply(subData).then((res) => {
       this.$api.user.departApply(subData).then((res) => {
@@ -799,30 +821,30 @@ export default {
         this.leaderOptions = res.data;
         this.leaderOptions = res.data;
       });
       });
       this.$api.user
       this.$api.user
-        .findBackListByDeptId({deptId: this.deptId})
+        .findBackListByDeptId({ deptId: this.deptId })
         .then((res) => {
         .then((res) => {
           this.searchLeaderOptions = res.data;
           this.searchLeaderOptions = res.data;
         });
         });
-        //添加电销负责人
-        this.$api.user.findDxUserList().then((res) => {
+      //添加电销负责人
+      this.$api.user.findDxUserList().then((res) => {
         this.managerOptions = res.data;
         this.managerOptions = res.data;
-      }); 
+      });
     },
     },
     managementSourceFormatter(row) {
     managementSourceFormatter(row) {
       switch (row.managementSource) {
       switch (row.managementSource) {
         case "1":
         case "1":
           return "渠道";
           return "渠道";
         case "2":
         case "2":
-          return "个代"
+          return "个代";
         case "3":
         case "3":
-          return "电销"
+          return "电销";
       }
       }
     },
     },
     //状态改变时
     //状态改变时
     statusChange(e) {
     statusChange(e) {
       if (e == 0) {
       if (e == 0) {
         this.$set(this.formDataRules, "logoutTime", [
         this.$set(this.formDataRules, "logoutTime", [
-          {required: true, message: "请选择日期", trigger: "change"},
+          { required: true, message: "请选择日期", trigger: "change" },
         ]);
         ]);
       } else {
       } else {
         this.formDataRules.logoutTime = undefined;
         this.formDataRules.logoutTime = undefined;
@@ -830,7 +852,7 @@ export default {
     },
     },
     // 查询Start
     // 查询Start
     queryStaffInfo() {
     queryStaffInfo() {
-      this.pageData.pageNum = 1
+      this.pageData.pageNum = 1;
       this.findPage();
       this.findPage();
     },
     },
     sexFormatter(row) {
     sexFormatter(row) {
@@ -856,7 +878,7 @@ export default {
         this.formData.deptId = val.at(-1);
         this.formData.deptId = val.at(-1);
         // console.log( this.formData.deptId,val,222222222);
         // console.log( this.formData.deptId,val,222222222);
         this.$api.user
         this.$api.user
-          .findListByDeptId({deptId: this.formData.deptId})
+          .findListByDeptId({ deptId: this.formData.deptId })
           .then((res) => {
           .then((res) => {
             this.leaderOptions = res.data;
             this.leaderOptions = res.data;
           });
           });
@@ -1000,7 +1022,7 @@ export default {
         this.formData = res.data.sysUser;
         this.formData = res.data.sysUser;
         if (this.formData.status == 0) {
         if (this.formData.status == 0) {
           this.$set(this.formDataRules, "logoutTime", [
           this.$set(this.formDataRules, "logoutTime", [
-            {required: true, message: "请选择日期", trigger: "change"},
+            { required: true, message: "请选择日期", trigger: "change" },
           ]);
           ]);
         } else {
         } else {
           this.formDataRules.logoutTime = undefined;
           this.formDataRules.logoutTime = undefined;
@@ -1039,8 +1061,7 @@ export default {
             }
             }
           });
           });
         })
         })
-        .catch(() => {
-        });
+        .catch(() => {});
     },
     },
     //添加人员
     //添加人员
     handleAddButton() {
     handleAddButton() {
@@ -1065,7 +1086,7 @@ export default {
         roleId: "3",
         roleId: "3",
         status: "2",
         status: "2",
         deptId: this.deptId,
         deptId: this.deptId,
-        pdeptId: this.pdeptId
+        pdeptId: this.pdeptId,
       };
       };
       this.formDataDetail = {};
       this.formDataDetail = {};
       this.activeName = "1";
       this.activeName = "1";
@@ -1100,8 +1121,7 @@ export default {
         .then((_) => {
         .then((_) => {
           done();
           done();
         })
         })
-        .catch((_) => {
-        });
+        .catch((_) => {});
     },
     },
     closeDialog() {
     closeDialog() {
       // 清空数据
       // 清空数据
@@ -1123,11 +1143,11 @@ export default {
       this.dialogVisible = false;
       this.dialogVisible = false;
     },
     },
     valids(data) {
     valids(data) {
-      this.detailValid = data
+      this.detailValid = data;
     },
     },
     // 提交
     // 提交
     submitForm() {
     submitForm() {
-      this.$refs.formDataDetails.submit()
+      this.$refs.formDataDetails.submit();
       setTimeout(() => {
       setTimeout(() => {
         this.$refs.formData.validate((valid) => {
         this.$refs.formData.validate((valid) => {
           if (valid && this.detailValid) {
           if (valid && this.detailValid) {
@@ -1145,9 +1165,10 @@ export default {
                 ).postName;
                 ).postName;
               }
               }
               if (this.formData.leaderId) {
               if (this.formData.leaderId) {
-                this.formData.leaderName = this.leaderOptions.find(
-                  (val) => val.id == this.formData.leaderId
-                ).name;
+                // this.formData.leaderName = this.leaderOptions.find(
+                //   (val) => val.id == this.formData.leaderId
+                // ).name;
+                this.formData.leaderName = this.formData.name
               }
               }
               if (this.formData.managerId) {
               if (this.formData.managerId) {
                 this.formData.managerName = this.managerOptions.find(
                 this.formData.managerName = this.managerOptions.find(
@@ -1205,24 +1226,24 @@ export default {
               }
               }
             });
             });
           } else {
           } else {
-            this.$message.error('请填写全部信息')
+            this.$message.error("请填写全部信息");
           }
           }
         });
         });
       }, 200);
       }, 200);
     },
     },
     //查看人员修改记录
     //查看人员修改记录
-    async checkHistory(row){
+    async checkHistory(row) {
       let userId = row.userId;
       let userId = row.userId;
       this.$refs.personnelHistory.getHistory(userId);
       this.$refs.personnelHistory.getHistory(userId);
     },
     },
-    handlePictureCardDelete(){
+    handlePictureCardDelete() {
       this.logoutImg = null;
       this.logoutImg = null;
     },
     },
     //预览图片
     //预览图片
     handlePictureCardPreview(img) {
     handlePictureCardPreview(img) {
-      if(!img){
-        this.$message.error('暂无照片')
-        return 
+      if (!img) {
+        this.$message.error("暂无照片");
+        return;
       }
       }
       this.ProViewImg = img;
       this.ProViewImg = img;
       this.showViewer = true;
       this.showViewer = true;
@@ -1329,24 +1350,24 @@ export default {
 .el-tabs {
 .el-tabs {
   >>> .el-input__inner:focus,
   >>> .el-input__inner:focus,
   >>> .el-select .el-input.is-focus .el-input__inner {
   >>> .el-select .el-input.is-focus .el-input__inner {
-    border-color: #D42426;
+    border-color: #d42426;
   }
   }
 
 
   .el-button--primary,
   .el-button--primary,
   .el-button--primary:focus {
   .el-button--primary:focus {
-    background-color: #D42426;
-    border-color: #D42426;
+    background-color: #d42426;
+    border-color: #d42426;
   }
   }
 }
 }
 
 
 .select-prop {
 .select-prop {
   .el-select-dropdown__item.selected,
   .el-select-dropdown__item.selected,
   .el-date-table td.available:hover {
   .el-date-table td.available:hover {
-    color: #D42426;
+    color: #d42426;
   }
   }
 
 
   .el-date-table td.current:not(.disabled) span {
   .el-date-table td.current:not(.disabled) span {
-    background-color: #D42426;
+    background-color: #d42426;
   }
   }
 }
 }
 </style>
 </style>
@@ -1354,11 +1375,11 @@ export default {
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .people-style {
 .people-style {
   // max-height: 500px;
   // max-height: 500px;
-  .footerHandle{
+  .footerHandle {
     // border-radius: 6px;
     // border-radius: 6px;
     border-top: 1px solid #f2f2f2;
     border-top: 1px solid #f2f2f2;
     margin-top: 0 !important;
     margin-top: 0 !important;
-    .el-button{
+    .el-button {
       width: 90px;
       width: 90px;
       height: 36px;
       height: 36px;
       font-size: 16px;
       font-size: 16px;
@@ -1366,119 +1387,119 @@ export default {
       font-weight: 310;
       font-weight: 310;
     }
     }
   }
   }
-  .peopleImage{
+  .peopleImage {
     padding: 0 !important;
     padding: 0 !important;
     margin: 0 0 0 6px !important;
     margin: 0 0 0 6px !important;
   }
   }
-  .closeBtn{
+  .closeBtn {
     background: #fff !important;
     background: #fff !important;
   }
   }
-  .el-col{
+  .el-col {
     width: calc(33.3333% - 20px);
     width: calc(33.3333% - 20px);
     margin-right: 20px;
     margin-right: 20px;
   }
   }
-  .personnelInformation{
+  .personnelInformation {
     padding: 0 !important;
     padding: 0 !important;
     margin: 0 0 0 20px !important;
     margin: 0 0 0 20px !important;
     max-height: 470px;
     max-height: 470px;
-    .el-form-item{
+    .el-form-item {
       width: 100%;
       width: 100%;
       margin-bottom: 20px;
       margin-bottom: 20px;
       margin-right: 0px;
       margin-right: 0px;
-      >>>.el-form-item__label{
+      >>> .el-form-item__label {
         font-size: 14px;
         font-size: 14px;
         line-height: 16px;
         line-height: 16px;
         color: #262626;
         color: #262626;
         padding-bottom: 10px;
         padding-bottom: 10px;
       }
       }
-      >>>.el-input__inner{
-      padding-left: 10px !important;
-      font-size: 14px;
-      font-weight: 500;
-      color: #333;
-      font-family: PingFang SC, PingFang SC;
-      border: 1px solid #eee;
-      &::placeholder{
-        color: #999999;
-        font-weight: 300;
+      >>> .el-input__inner {
+        padding-left: 10px !important;
+        font-size: 14px;
+        font-weight: 500;
+        color: #333;
+        font-family: PingFang SC, PingFang SC;
+        border: 1px solid #eee;
+        &::placeholder {
+          color: #999999;
+          font-weight: 300;
+        }
+      }
+      >>> .el-textarea__inner {
+        padding: 10px;
+        border: 1px solid #eeeeee;
+        font-weight: 500;
+        font-size: 14px;
+        color: #333;
+        font-family: PingFang SC, PingFang SC;
+        &::placeholder {
+          color: #999999;
+          font-weight: 300;
+        }
       }
       }
-    }
-    >>>.el-textarea__inner{
-      padding: 10px;
-      border: 1px solid #eeeeee;
-      font-weight: 500;
-      font-size: 14px;
-      color: #333;
-      font-family: PingFang SC, PingFang SC;
-      &::placeholder{
-        color: #999999;
-        font-weight: 300;
+      >>> .el-input.is-disabled {
+        .el-input__inner {
+          background: #fff;
+        }
       }
       }
-    }
-    >>>.el-input.is-disabled{
-      .el-input__inner{
-        background: #fff;
+      >>> .el-form-item__error {
+        padding-top: 0;
+        margin-top: 8px;
+        font-size: 12px;
+        color: #d42426;
+        position: relative;
       }
       }
     }
     }
-    >>>.el-form-item__error{
-      padding-top: 0;
-      margin-top: 8px;
-      font-size: 12px;
-      color: #D42426;
-      position: relative;
-    }
-    }
   }
   }
-  /deep/ .el-date-editor{
+  /deep/ .el-date-editor {
     position: relative;
     position: relative;
-      .el-input__prefix{
-        // color: #D42426;
-        // position: absolute;
-        // right: 5px;
-        // left: auto;
-        // display: none;
-        background-image: url('~@/assets/image/people/rili.svg'); /* 替换为你的新图标路径 */
-        background-size: cover; /* 覆盖整个元素 */
-        background-repeat: no-repeat; /* 不重复背景图片 */
-        height: 15px; /* 根据实际情况调整高度 */
-        width: 17px; /* 根据实际情况调整宽度 */
-        position: absolute;
-        right: 10px;
-        top: 9px;
-        left: auto;
-        .el-icon-date::before{
-          content: '';
-        }
-      }
-      .el-input__suffix{
-        position: absolute;
-        right: 25px;
+    .el-input__prefix {
+      // color: #D42426;
+      // position: absolute;
+      // right: 5px;
+      // left: auto;
+      // display: none;
+      background-image: url("~@/assets/image/people/rili.svg"); /* 替换为你的新图标路径 */
+      background-size: cover; /* 覆盖整个元素 */
+      background-repeat: no-repeat; /* 不重复背景图片 */
+      height: 15px; /* 根据实际情况调整高度 */
+      width: 17px; /* 根据实际情况调整宽度 */
+      position: absolute;
+      right: 10px;
+      top: 9px;
+      left: auto;
+      .el-icon-date::before {
+        content: "";
       }
       }
+    }
+    .el-input__suffix {
+      position: absolute;
+      right: 25px;
+    }
   }
   }
   /deep/ .el-dialog {
   /deep/ .el-dialog {
     border-radius: 6px;
     border-radius: 6px;
-    .el-dialog__header{
+    .el-dialog__header {
       height: 50px;
       height: 50px;
       line-height: 50px;
       line-height: 50px;
       padding: 0;
       padding: 0;
       text-align: center;
       text-align: center;
       border-top-left-radius: 6px;
       border-top-left-radius: 6px;
       border-top-right-radius: 6px;
       border-top-right-radius: 6px;
-      .el-dialog__title{
+      .el-dialog__title {
         color: #333;
         color: #333;
         font-weight: 500;
         font-weight: 500;
       }
       }
     }
     }
-    .el-dialog__body{
+    .el-dialog__body {
       background: #fff;
       background: #fff;
       border-radius: 6px;
       border-radius: 6px;
     }
     }
   }
   }
-  /deep/ .el-tabs{
-    .el-tabs__header{
+  /deep/ .el-tabs {
+    .el-tabs__header {
       padding: 20px 0;
       padding: 20px 0;
       margin-bottom: 0;
       margin-bottom: 0;
-      .el-tabs__nav{
+      .el-tabs__nav {
         background: #f7f7f7;
         background: #f7f7f7;
         padding: 0 4px;
         padding: 0 4px;
         height: 44px;
         height: 44px;
@@ -1486,7 +1507,7 @@ export default {
         align-items: center;
         align-items: center;
         justify-content: center;
         justify-content: center;
       }
       }
-      .el-tabs__item{
+      .el-tabs__item {
         width: 120px;
         width: 120px;
         height: 36px;
         height: 36px;
         line-height: 36px;
         line-height: 36px;
@@ -1496,41 +1517,41 @@ export default {
         color: #333;
         color: #333;
         font-weight: 310;
         font-weight: 310;
       }
       }
-      .el-tabs__item.is-active{
-        background: #D42426;
+      .el-tabs__item.is-active {
+        background: #d42426;
         color: #fff;
         color: #fff;
         border-radius: 2px;
         border-radius: 2px;
       }
       }
-      .el-tabs__active-bar{
+      .el-tabs__active-bar {
         display: none;
         display: none;
       }
       }
-      .el-tabs__nav{
+      .el-tabs__nav {
         left: 50%;
         left: 50%;
         transform: translateX(-50%) !important;
         transform: translateX(-50%) !important;
       }
       }
     }
     }
-    .el-tabs__content{
+    .el-tabs__content {
       border-radius: 6px;
       border-radius: 6px;
     }
     }
   }
   }
 }
 }
-.dialogOut{
-  .el-form{
+.dialogOut {
+  .el-form {
     padding-top: 10px !important;
     padding-top: 10px !important;
   }
   }
-  .el-form-item{
+  .el-form-item {
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
-    >>>.el-form-item__label{
+    >>> .el-form-item__label {
       padding-bottom: 0 !important;
       padding-bottom: 0 !important;
     }
     }
-    >>>.el-date-editor{
-      .el-input__prefix{
+    >>> .el-date-editor {
+      .el-input__prefix {
         top: 12px !important;
         top: 12px !important;
       }
       }
     }
     }
   }
   }
-  .footerHandle{
+  .footerHandle {
     padding: 8px 20px;
     padding: 8px 20px;
   }
   }
   .upload-icon {
   .upload-icon {
@@ -1550,12 +1571,13 @@ export default {
     margin-top: 7px;
     margin-top: 7px;
     color: #999;
     color: #999;
   }
   }
-  .el-upload--picture-card:hover, .el-upload:focus{
+  .el-upload--picture-card:hover,
+  .el-upload:focus {
     color: #333;
     color: #333;
   }
   }
   .upload-icon:hover {
   .upload-icon:hover {
     /* border: 1px dashed #2D4D89; */
     /* border: 1px dashed #2D4D89; */
-    border-color: #D42426;
+    border-color: #d42426;
     /* color: #D42426; */
     /* color: #D42426; */
     transition: all ease 1s;
     transition: all ease 1s;
   }
   }
@@ -1589,7 +1611,7 @@ export default {
     align-items: center;
     align-items: center;
   }
   }
 
 
-  .close{
+  .close {
     width: 12px;
     width: 12px;
     height: 12px;
     height: 12px;
     position: absolute;
     position: absolute;
@@ -1597,30 +1619,30 @@ export default {
     right: 0;
     right: 0;
     cursor: pointer;
     cursor: pointer;
   }
   }
-  .preview{
+  .preview {
     width: 208px;
     width: 208px;
     height: calc(130px - 24px);
     height: calc(130px - 24px);
   }
   }
-  .bottomHandle{
+  .bottomHandle {
     width: 208px;
     width: 208px;
     height: 24px;
     height: 24px;
     line-height: 20px;
     line-height: 20px;
-    background: url('~@/assets/image/people/bottomFrame.png') no-repeat;
+    background: url("~@/assets/image/people/bottomFrame.png") no-repeat;
     position: absolute;
     position: absolute;
     bottom: 0;
     bottom: 0;
     left: -1px;
     left: -1px;
     cursor: pointer;
     cursor: pointer;
   }
   }
-  .reset{
+  .reset {
     width: 10px;
     width: 10px;
-    height: 10px
+    height: 10px;
   }
   }
-  .bottomHandle>.title{
+  .bottomHandle > .title {
     font-size: 12px;
     font-size: 12px;
     color: #fff;
     color: #fff;
     padding: 0;
     padding: 0;
   }
   }
-  .slot>i {
+  .slot > i {
     /* margin: 10px; */
     /* margin: 10px; */
     /* color: #fff; */
     /* color: #fff; */
     /* font-size: 25px; */
     /* font-size: 25px; */
@@ -1630,7 +1652,7 @@ export default {
   .slot:hover {
   .slot:hover {
     opacity: 1;
     opacity: 1;
   }
   }
-  .title{
+  .title {
     font-size: 16px;
     font-size: 16px;
     color: #333;
     color: #333;
     padding-bottom: 10px;
     padding-bottom: 10px;

+ 1650 - 0
src/views/Sys/RoleManagement.vue

@@ -0,0 +1,1650 @@
+<template>
+  <div class="role_management">
+    <el-main class="content">
+      <SplitArea class="left">
+        <div class="title">
+          角色配置
+          <kt-button
+            icon="fa fa-plus"
+            :label="'新增'"
+            perms="sys:role:add"
+            type="primary"
+            @click="handleAdd"
+          />
+        </div>
+        <div class="search">
+          <el-input
+            placeholder="搜索角色权限名称"
+            v-model="searchRole"
+            clearable
+          >
+          </el-input>
+          <div class="search_icon" @click="searRoleList">
+            <img src="@/assets/image/search.png" alt="" />
+          </div>
+        </div>
+        <div class="role_list">
+          <div
+            class="role"
+            v-for="(item, index) in pageResult"
+            :key="index"
+            @click="handleRoleClick(item, index)"
+            :class="roleIndex == index ? 'active' : ''"
+          >
+            <div class="role_name">
+              {{ item.name }}
+            </div>
+            <div class="icon_box">
+              <img
+                src="@/assets/image/edit.png"
+                alt=""
+                @click.stop="roleEdit(item)"
+              />
+              <img
+                src="@/assets/image/delete.png"
+                alt=""
+                @click.stop="roleDelete(item)"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="pagination">
+          <el-pagination
+            small
+            layout="prev, pager, next"
+            :total="totalPages"
+            :page-size="20"
+            @current-change="handleLeftCurrentChange"
+          >
+          </el-pagination>
+        </div>
+      </SplitArea>
+      <SplitArea class="right">
+        <div class="option">
+          <div
+            class="title"
+            :class="rightCurrentIndex == index ? 'active' : ''"
+            v-for="(item, index) in rightTitle"
+            :key="index"
+            @click="changeOption(index)"
+          >
+            {{ item.title }}
+          </div>
+        </div>
+        <div v-show="rightCurrentIndex == 0">
+          <!-- 筛选区域Start -->
+          <div class="queryFrom">
+            <el-form ref="queryFormRef" :model="queryFrom" label-width="auto">
+              <div class="queryFrom_option">
+                <el-form-item label="姓名">
+                  <el-input
+                    clearable
+                    size="small"
+                    placeholder="请输入姓名"
+                    v-model="queryFrom.name"
+                  ></el-input>
+                </el-form-item>
+              </div>
+              <div class="queryFrom_option">
+                <el-form-item label="手机号">
+                  <el-input
+                    clearable
+                    size="small"
+                    placeholder="请输入手机号"
+                    v-model="queryFrom.tel"
+                  ></el-input>
+                </el-form-item>
+              </div>
+              <div class="queryFrom_option">
+                <el-form-item label="部门名称">
+                  <el-input
+                    clearable
+                    size="small"
+                    placeholder="请输入部门名称"
+                    v-model="queryFrom.deptName"
+                  ></el-input>
+                </el-form-item>
+              </div>
+              <div class="queryFrom_option">
+                <div class="search" @click="searchRightList">查询</div>
+                <div class="add" @click="memberAdd">新增</div>
+              </div>
+            </el-form>
+          </div>
+          <!-- 筛选区域End -->
+          <!-- 表格start -->
+          <div class="table">
+            <el-table
+              :data="rightpageResult"
+              border
+              style="width: 100%; height: 100%"
+              height="100%"
+            >
+              <el-table-column
+                type="index"
+                width="50"
+                align="center"
+                label="序号"
+              >
+              </el-table-column>
+              <el-table-column prop="deptId" label="部门编码" align="center">
+              </el-table-column>
+              <el-table-column prop="deptName" label="部门名称" align="center">
+              </el-table-column>
+              <el-table-column prop="id" label="工号" align="center">
+              </el-table-column>
+              <el-table-column prop="name" label="姓名" align="center">
+              </el-table-column>
+              <el-table-column prop="mobile" label="联系电话" align="center">
+              </el-table-column>
+              <el-table-column prop="roleName" label="角色" align="center">
+              </el-table-column>
+              <el-table-column prop="address" label="操作" align="center">
+                <template slot-scope="scope">
+                  <div @click="memberEdit(scope.row)">
+                    <img src="@/assets/image/edit.png" alt="" />配置角色
+                  </div>
+                  <div @click="memberDelete(scope.row)">
+                    <img src="@/assets/image/delete.png" alt="" />删除
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              :page-sizes="[10, 20, 50, 100]"
+              :page-size="10"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="rightTotal"
+            >
+            </el-pagination>
+          </div>
+        </div>
+        <!-- 功能权限区域 start -->
+        <div class="jurisdiction_box" v-show="rightCurrentIndex == 1">
+          <div class="jurisdiction_btn">
+            <el-checkbox
+              :indeterminate="isIndeterminate"
+              v-model="checkAll"
+              @change="handleCheckAllChange"
+              >全选</el-checkbox
+            >
+            <div class="btn">
+              <el-button size="small" type="primary" @click="resetSelection"
+                >重置</el-button
+              >
+              <el-button size="small" type="primary" @click="submitAuthForm"
+                >提交</el-button
+              >
+            </div>
+          </div>
+          <!-- 功能权限组件 -->
+          <VueTreeToTable
+            :origin-data="menuData"
+            :table-columns="tableColumns"
+            show-checkbox
+            :checkStrictly="false"
+            :isShowTableHead="false"
+            :isFold="true"
+            ref="menuTree"
+            :key="refreshComponent"
+          />
+        </div>
+        <!-- 功能权限区域 end -->
+      </SplitArea>
+    </el-main>
+    <!-- 左侧角色新增修改弹窗start -->
+    <el-dialog :visible.sync="dialogVisible" title="角色配置新增">
+      <div>
+        <!-- <div class="title"></div> -->
+        <div class="addTitle"><span></span>角色信息</div>
+        <div class="input_data">
+          <div class="inp">
+            <span>角色名</span>
+            <el-input
+              clearable
+              size="small"
+              placeholder="请输入角色名"
+              v-model="roleData.name"
+              @input="changeName($event)"
+            ></el-input>
+          </div>
+          <div class="inp text">
+            <span>备注</span>
+            <el-input
+              clearable
+              type="textarea"
+              :rows="2"
+              size="small"
+              placeholder="请输入备注"
+              v-model="roleData.remark"
+            ></el-input>
+          </div>
+        </div>
+        <div slot="footer" class="dialog_footer">
+          <el-button size="small" @click.native="dialogVisible = false">{{
+            $t("action.cancel")
+          }}</el-button>
+          <el-button size="small" type="primary" @click.native="submitForm">{{
+            $t("action.submit")
+          }}</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 左侧角色新增修改弹窗end -->
+    <!-- 右侧角色配置弹窗start -->
+    <el-dialog
+      title="角色配置"
+      width="800px"
+      :visible.sync="rightDialogVisible"
+    >
+      <div>
+        <div class="addTitle"><span></span>人员信息</div>
+        <div class="input_data people">
+          <div class="inp">
+            <span>部门编码</span>
+            <el-input
+              clearable
+              size="small"
+              placeholder="请输入部门编码"
+              v-model="rightRoleData.deptId"
+              disabled
+            ></el-input>
+          </div>
+          <div class="inp">
+            <span>部门名称</span>
+            <el-input
+              clearable
+              size="small"
+              placeholder="请输入部门名称"
+              v-model="rightRoleData.deptName"
+              disabled
+            ></el-input>
+          </div>
+          <div class="inp">
+            <span>员工工号</span>
+            <el-input
+              clearable
+              size="small"
+              placeholder="请输入员工工号"
+              v-model="rightRoleData.id"
+              disabled
+            ></el-input>
+          </div>
+          <div class="inp">
+            <span>姓名</span>
+            <el-input
+              clearable
+              size="small"
+              placeholder="请输入姓名"
+              v-model="rightRoleData.name"
+              disabled
+            ></el-input>
+          </div>
+          <div class="inp">
+            <span>邮箱</span>
+            <el-input
+              clearable
+              size="small"
+              placeholder="请输入邮箱"
+              v-model="rightRoleData.email"
+              disabled
+            ></el-input>
+          </div>
+          <div class="inp">
+            <span>电话</span>
+            <el-input
+              clearable
+              size="small"
+              placeholder="请输入电话"
+              v-model="rightRoleData.mobile"
+              disabled
+            ></el-input>
+          </div>
+        </div>
+        <div class="separation"></div>
+        <div class="addTitle"><span></span>人员信息</div>
+        <div class="input_data people">
+          <div class="inp">
+            <span>角色权限</span>
+            <el-select
+              size="small"
+              clearable
+              v-model="rightRoleData.roleId"
+              placeholder="请选择"
+              @change="changeRole($event)"
+            >
+              <el-option
+                :label="roleItem.name"
+                :value="roleItem.id"
+                v-for="(roleItem, roleIndex) in roleoptions"
+                :key="roleIndex"
+              ></el-option>
+            </el-select>
+          </div>
+          <div class="inp">
+            <span>树权限</span>
+            <el-select
+              size="small"
+              clearable
+              v-model="rightRoleData.showLevel"
+              placeholder="请选择"
+              @change="changeTree($event)"
+            >
+              <el-option
+                v-for="(val, index) in treeOptions"
+                :label="val.dictTag"
+                :value="val.dictValue"
+                :key="index"
+              ></el-option>
+            </el-select>
+          </div>
+          <div class="inp">
+            <span>拨号权限</span>
+            <el-select
+              size="small"
+              clearable
+              v-model="rightRoleData.isDial"
+              placeholder="请选择"
+              @change="refreshData"
+            >
+              <el-option
+                v-for="(val, index) in isDialOptions"
+                :label="val.label"
+                :value="val.value"
+                :key="index"
+              ></el-option>
+            </el-select>
+          </div>
+          <div class="inp">
+            <span>拨号权限账号</span>
+            <el-input
+              clearable
+              size="small"
+              placeholder="请输入拨号权限账号"
+              v-model="rightRoleData.dialUserName"
+            ></el-input>
+          </div>
+          <div class="inp">
+            <span>拨号权限密码</span>
+            <el-input
+              clearable
+              size="small"
+              placeholder="请输入拨号权限密码"
+              v-model="rightRoleData.dialPassWord"
+            ></el-input>
+          </div>
+          <div class="inp"></div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="closeDialog">取消</el-button>
+        <el-button size="small" type="primary" @click="submitRole"
+          >提交</el-button
+        >
+      </span>
+    </el-dialog>
+    <!-- 右侧角色配置弹窗end -->
+    <!-- 右侧角色成员新增弹窗start -->
+    <el-dialog title="角色成员新增" width="70%" :visible.sync="isAddMember">
+      <el-main>
+        <Split>
+          <!-- 左侧树start -->
+          <SplitArea size="30%">
+            <div class="tree_left">
+              <tree
+                :setting="ztreeSetting"
+                :nodes="ztreeNodes"
+                @onClick="onZTreeClick"
+                @onCreated="onZTreeCreated"
+              />
+            </div>
+          </SplitArea>
+          <!-- 左侧树end -->
+          <!-- 右侧表格start -->
+          <SplitArea size="70%">
+            <!-- 筛选区域 -->
+            <div class="tree_left tree_right">
+              <el-form
+                ref="queryFormRef"
+                :model="memberqueryFrom"
+                label-width="auto"
+              >
+                <div class="queryFrom_option">
+                  <el-form-item label="姓名">
+                    <el-input
+                      clearable
+                      size="small"
+                      placeholder="请输入姓名"
+                      v-model="memberqueryFrom.name"
+                    ></el-input>
+                  </el-form-item>
+                </div>
+                <div class="queryFrom_option">
+                  <el-form-item label="手机号">
+                    <el-input
+                      clearable
+                      size="small"
+                      placeholder="请输入手机号"
+                      v-model="memberqueryFrom.tel"
+                    ></el-input>
+                  </el-form-item>
+                </div>
+                <div class="queryFrom_option">
+                  <div class="search" @click="searchMemberList">查询</div>
+                </div>
+              </el-form>
+              <!-- 表格区域 -->
+              <div class="table_box">
+                <el-table
+                  :row-key="getRowKeyOfTarget"
+                  ref="multipleTable"
+                  :data="memberPageResult"
+                  border
+                  style="width: 100%; height: 100%"
+                  height="100%"
+                  @selection-change="handleSelectionChange"
+                >
+                  <el-table-column
+                    :reserve-selection="true"
+                    type="selection"
+                    width="55"
+                  >
+                  </el-table-column>
+                  <el-table-column
+                    type="index"
+                    width="50"
+                    align="center"
+                    label="序号"
+                  >
+                  </el-table-column>
+                  <el-table-column
+                    prop="deptId"
+                    label="部门编码"
+                    align="center"
+                  >
+                  </el-table-column>
+                  <el-table-column
+                    prop="deptName"
+                    label="部门名称"
+                    align="center"
+                  >
+                  </el-table-column>
+                  <el-table-column prop="id" label="工号" align="center">
+                  </el-table-column>
+                  <el-table-column prop="name" label="姓名" align="center">
+                  </el-table-column>
+                  <el-table-column
+                    prop="mobile"
+                    label="联系电话"
+                    align="center"
+                  >
+                  </el-table-column>
+                </el-table>
+              </div>
+              <el-pagination
+                @size-change="handleMmberSizeChange"
+                @current-change="handleMemberCurrentChange"
+                :current-page="currentPage"
+                :page-sizes="[10, 20, 50, 100]"
+                :page-size="10"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="memberTotal"
+              >
+              </el-pagination>
+            </div>
+          </SplitArea>
+          <!-- 右侧表格end -->
+        </Split>
+      </el-main>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="closeMemberDialog">取消</el-button>
+        <el-button size="small" type="primary" @click="submitMember"
+          >提交</el-button
+        >
+      </span>
+    </el-dialog>
+    <!-- 右侧角色成员新增弹窗end -->
+  </div>
+</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 VueTreeToTable from "vue-tree-to-table";
+
+export default {
+  components: {
+    KtButton,
+    KtCommonTable,
+    tree,
+    VueTreeToTable,
+  },
+  data() {
+    return {
+      searchRole: null,
+      pageResult: [],
+      pageRequest: {
+        pageNum: 1,
+        pageSize: 20,
+        columnFilters: {
+          name: {
+            name: "name",
+            value: "",
+          },
+        },
+      },
+      roleIndex: null,
+      rightpageRequest: {
+        pageNum: 1,
+        pageSize: 10,
+        columnFilters: {
+          deptid: {
+            name: "deptid",
+            value: "",
+          },
+          containsSubDept: {
+            name: "containsSubDept",
+            value: 1,
+          },
+          usertype: {
+            name: "usertype",
+            value: "A",
+          },
+          status: {
+            name: "status",
+            value: "1",
+          },
+          id: {
+            name: "id",
+            value: "",
+          },
+          name: {
+            name: "name",
+            value: "",
+          },
+          mobile: {
+            name: "mobile",
+            value: "",
+          },
+          roleId: {
+            name: "roleId",
+            value: "",
+          },
+          deptName: {
+            name: "deptName",
+            value: "",
+          },
+        },
+      },
+      filters: {
+        name: "",
+      },
+      totalPages: null,
+      rightTitle: [
+        {
+          title: "角色成员",
+        },
+        {
+          title: "功能权限",
+        },
+      ],
+      rightCurrentIndex: 0,
+      // 右侧列表查询数据Start
+      queryFrom: {},
+      rightpageResult: [],
+      peopleid: "",
+      peopledeptid: "",
+      currentPage: null,
+      rightTotal: null,
+      dialogVisible: false,
+      //左侧角色新增信息
+      roleData: {
+        name: "",
+        remark: "",
+      },
+      rightDialogVisible: false, //右侧角色配置弹窗
+      dataForm: {},
+      roleoptions: [], //角色配置--角色权限下拉框
+      treeOptions: [], //角色配置--树权限下拉框
+      //角色配置--拨号权限下拉框
+      isDialOptions: [
+        {
+          label: "关闭",
+          value: "0",
+        },
+        {
+          label: "开启",
+          value: "1",
+        },
+      ],
+      rightRoleData: {
+        remark: "",
+        roleId: "",
+        dialUserName: "",
+        dialPassWord: "",
+        isDial: "0",
+      },
+      isAddMember: false,
+      //结构树数据
+      ztreeNodes: [],
+      //结构树配置
+      ztreeSetting: {
+        check: {
+          enable: false,
+        },
+        data: {
+          simpleData: {
+            enable: true,
+            pIdKey: "parentId",
+          },
+        },
+        view: {
+          showIcon: false,
+        },
+      },
+      //成员弹窗配置
+      memberRequest: {
+        //查询的默认条件
+        pageNum: 1,
+        pageSize: 20,
+        columnFilters: {
+          deptid: {
+            name: "deptid",
+            value: "",
+          },
+          containsSubDept: {
+            name: "containsSubDept",
+            value: 1,
+          },
+          usertype: {
+            name: "usertype",
+            value: "A",
+          },
+          status: {
+            name: "status",
+            value: "1",
+          },
+          id: {
+            name: "id",
+            value: "",
+          },
+          name: {
+            name: "name",
+            value: "",
+          },
+          mobile: {
+            name: "mobile",
+            value: "",
+          },
+        },
+      },
+      memmberPageResult: {},
+      /*新增角色成员弹窗相关 start*/
+      memberPageResult: [],
+      memberqueryFrom: {},
+      memberPageRequest: {
+        pageNum: 1,
+        pageSize: 10,
+        columnFilters: {
+          deptid: {
+            name: "deptid",
+            value: "",
+          },
+          containsSubDept: {
+            name: "containsSubDept",
+            value: 1,
+          },
+          usertype: {
+            name: "usertype",
+            value: "A",
+          },
+          status: {
+            name: "status",
+            value: "1",
+          },
+          id: {
+            name: "id",
+            value: "",
+          },
+          name: {
+            name: "name",
+            value: "",
+          },
+          mobile: {
+            name: "mobile",
+            value: "",
+          },
+          roleId: {
+            name: "roleId",
+            value: "",
+          },
+          deptName: {
+            name: "deptName",
+            value: "",
+          },
+        },
+      },
+      currentTreeNode: null,
+      memberTotal: null,
+      addMemberData: {
+        roleId: "",
+        userIds: [],
+      },
+      //新增成员弹窗相关 end
+      //右侧功能权限配置相关 start
+      menuData: [],
+      tableData: [],
+      tableColumns: [],
+      isIndeterminate: false,
+      checkAll: false,
+      jurisdictionroleId: "",
+      jurisdictionroleName: "",
+      subData: [],
+      refreshComponent: 0,
+      //右侧功能权限配置相关 end
+    };
+  },
+  methods: {
+    //角色列表点击事件
+    handleRoleClick(item, index) {
+      this.jurisdictionroleId = item.id;
+      this.jurisdictionroleName = item.name;
+
+      this.rightpageRequest.columnFilters.roleId.value = item.id;
+      this.addMemberData.roleId = item.id;
+      this.roleIndex = index;
+      this.findPage();
+      this.getjurisdictionList();
+    },
+    //获取左侧列表
+    getRoleList() {
+      this.$api.role.findPage(this.pageRequest).then((res) => {
+        this.pageResult = res.data.content;
+        this.totalPages = res.data.totalSize;
+      });
+    },
+    //搜索左侧列表
+    searRoleList() {
+      this.pageRequest.columnFilters.name.value = this.searchRole;
+      this.getRoleList();
+    },
+    handleLeftCurrentChange(val) {
+      this.pageRequest.pageNum = val;
+      this.getRoleList();
+    },
+    //删除左侧角色
+    roleDelete(item) {
+      this.$confirm("确认删除选中记录吗?", "提示", {
+        type: "warning",
+      })
+        .then(() => {
+          let data = [];
+          data.push({ id: item.id });
+          this.$api.role.batchDelete(data).then((res) => {
+            if (res.code == 200) {
+              this.$message({ message: "删除成功", type: "success" });
+              this.getRoleList();
+            } else {
+              this.$message({ message: "操作失败, " + res.msg, type: "error" });
+            }
+          });
+        })
+        .catch(() => {});
+    },
+    //左侧角色信息修改
+    roleEdit(item) {
+      this.roleData = {};
+      this.dialogVisible = true;
+      // this.roleData.id = item.id;
+      // this.roleData.name = item.name;
+      // this.roleData.remark = item.remark;
+      this.roleData = Object.assign({}, item);
+    },
+    //获取权限列表
+    getjurisdictionList() {
+      let allMenus = [];
+      this.deletecheckAllMenu(this.menuData, allMenus);
+      this.$api.role
+        .findRoleMenus({ roleId: this.jurisdictionroleId })
+        .then((res) => {
+          let temp = res.data;
+          this.compare(this.menuData, temp);
+          // this.menuLoading = false;
+        });
+    },
+    compare(menuData, temp) {
+      let temp1 = temp;
+      temp1.forEach((item) => {
+        menuData.forEach((tree) => {
+          if (tree.id == item.id) {
+            tree.isChecked = true;
+          } else {
+            if (tree.chidrenList.length > 0) {
+              this.children(tree.chidrenList, item.id);
+            }
+          }
+        });
+      });
+    },
+    children(chidrenList, id) {
+      chidrenList.forEach((item) => {
+        if (item.id == id) {
+          item.isChecked = true;
+        } else {
+          this.children(item.chidrenList, id);
+        }
+      });
+    },
+    // 角色菜单授权提交
+    submitAuthForm() {
+      this.subData = []
+      if ("admin" == this.jurisdictionroleName) {
+        this.$message({
+          message: "超级管理员拥有所有菜单权限,不允许修改!",
+          type: "error",
+        });
+        return;
+      }
+      let selectData = this.$refs.menuTree.getCheckedNodeList();
+      selectData.forEach(element => {
+        let roleMenu = { roleId: this.jurisdictionroleId, menuId: element.id };
+        this.subData.push(roleMenu);
+      });
+
+      this.$api.role.saveRoleMenus(this.subData).then((res) => {
+        if (res.code == 200) {
+          this.$message({ message: "操作成功", type: "success" });
+          this.getjurisdictionList()
+        } else {
+          this.$message({ message: "操作失败, " + res.msg, type: "error" });
+        }
+      });
+    },
+    //切换右侧
+    changeOption(index) {
+      this.rightCurrentIndex = index;
+    },
+    // 右侧列表的方法Start
+    findPage() {
+      // 获取分页数据;
+      // if (data && data.pageRequest) {
+      //   this.pageRequest.pageNum = data.pageRequest.pageNum;
+      //   this.pageRequest.pageSize = data.pageRequest.pageSize;
+      // }
+      this.$api.user.userQueryPage(this.rightpageRequest).then((res) => {
+        this.rightTotal = res.data.totalSize;
+        if (res.code == 200) {
+          //角色权限过滤转换
+          res.data.content.forEach((item) => {
+            item.roleId = Number(item.roleId);
+          });
+          this.rightpageResult = res.data.content;
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+      // .then(data != null ? data.callback : "");
+    },
+    handleTableEdit(params) {
+      // this.dataForm = Object.assign({}, params.row)
+      // this.dataForm.isDial=this.dataForm.isDial==null?'0':'1';
+      // this.dataForm.showLevel=this.dataForm.showLevel=='null' || this.dataForm.showLevel==null?'subordinate':this.dataForm.showLevel
+      // this.dialogVisible = true
+    },
+    // 查询Start
+    searchRightList() {
+      this.rightpageRequest.columnFilters.name.value = this.queryFrom.name;
+      this.rightpageRequest.columnFilters.mobile.value = this.queryFrom.tel;
+      this.rightpageRequest.columnFilters.deptName.value =
+        this.queryFrom.deptName;
+      this.rightpageRequest.pageNum = 1;
+      this.findPage();
+    },
+    handleSizeChange(val) {
+      this.rightpageRequest.pageSize = val;
+      this.findPage();
+    },
+    handleCurrentChange(val) {
+      this.rightpageRequest.pageNum = val;
+      this.findPage();
+    },
+    handleAdd() {
+      this.roleData = {};
+      this.dialogVisible = true;
+    },
+    //新增角色
+    submitForm() {
+      this.$confirm("确认提交吗?", "提示", {}).then(() => {
+        // let params = Object.assign({}, this.dataForm);
+        this.$api.role.save(this.roleData).then((res) => {
+          if (res.code == 200) {
+            this.$message({ message: "操作成功", type: "success" });
+            this.dialogVisible = false;
+            // this.$refs["dataForm"].resetFields();
+            this.getRoleList()
+          } else {
+            this.$message({
+              message: "操作失败, " + res.msg,
+              type: "error",
+            });
+          }
+          this.getRoleList();
+          this.findPage(null);
+        });
+      });
+    },
+    //获取角色权限下拉框内容
+    getRoles() {
+      this.$api.role
+        .findAll()
+        .then((res) => {
+          this.roleoptions = res.data;
+        })
+        .catch((error) => {
+          this.roleoptions = [];
+        });
+    },
+    //获取树权限下拉框内容
+    dictList() {
+      this.$api.dict.dictList().then((res) => {
+        let dataArr = res.filter((item) => {
+          return item.dictType == "treeShowLevelEnum";
+        });
+        dataArr.length > 0 ? (this.treeOptions = dataArr[0].ddList) : "";
+      });
+    },
+    //成员配置
+    memberEdit(row) {
+      this.rightDialogVisible = true;
+      this.rightRoleData.deptId = row.deptId;
+      this.rightRoleData.deptName = row.deptName;
+      this.rightRoleData.id = row.id;
+      this.rightRoleData.name = row.name;
+      this.rightRoleData.email = row.email;
+      this.rightRoleData.mobile = row.mobile;
+      this.rightRoleData.roleId = row.roleId;
+      row.showLevel.length > 0
+        ? (this.rightRoleData.showLevel = row.showLevel)
+        : (this.rightRoleData.showLevel = "subordinate");
+      this.rightRoleData.isDial = row.isDial;
+      this.rightRoleData.dialUserName = row.dialUserName;
+      this.rightRoleData.dialPassWord = row.dialPassWord;
+    },
+    //删除成员
+    memberDelete(row) {
+      if (row.roleName) {
+        this.$confirm("确认删除选中记录吗?", "提示", {
+          type: "warning",
+        })
+          .then(() => {
+            let data = {};
+            data.userId = row.id;
+            this.$api.user.deleteUserRole(data).then((res) => {
+              if (res.code == 200) {
+                this.$message({ message: "删除成功", type: "success" });
+                // this.getRoleList();
+                this.findPage();
+              } else {
+                this.$message({
+                  message: "操作失败, " + res.msg,
+                  type: "error",
+                });
+              }
+            });
+          })
+          .catch(() => {});
+      } else {
+        this.$message({ message: "该用户未分配角色,无法删除", type: "error" });
+      }
+    },
+    handleDialogBefore() {},
+    closeDialog() {
+      this.rightDialogVisible = false;
+    },
+
+    // //角色权限
+    // changeRole(roleid) {
+    //   this.rightRoleData.roleId = roleid;
+    // },
+    // // //树权限
+    changeTree(val) {
+      this.rightRoleData.showLevel = val;
+    },
+    // //拨号权限
+    refreshData(val) {
+      this.rightRoleData.isDial = val;
+    },
+    //右侧配置角色信息提交
+    submitRole() {
+      this.$confirm("确认提交吗?", "提示", {})
+        .then(() => {
+          this.$api.user
+            .saveUserRole({
+              roleId: this.rightRoleData.roleId,
+              userId: this.rightRoleData.id,
+              showLevel: this.rightRoleData.showLevel,
+              isDial: this.rightRoleData.isDial,
+              dialUserName: this.rightRoleData.dialUserName,
+              dialPassWord: this.rightRoleData.dialPassWord,
+            })
+            .then((res) => {
+              if (res.code == 200) {
+                this.$message({
+                  message: "操作成功",
+                  type: "success",
+                });
+                this.findPage(null);
+                this.rightDialogVisible = false;
+              } else {
+                this.$message({
+                  message: "操作失败",
+                  type: "error",
+                });
+              }
+            });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消提交",
+          });
+        });
+    },
+    //--left tree start-------
+    findLeftTreeData: function () {
+      // 获取数据
+      this.$api.dept.findTree().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) {
+      // 点击事件
+      this.currentTreeNode = treeNode;
+      this.memberPageRequest.columnFilters.deptid.value =
+        this.currentTreeNode.id;
+      this.getMemberList();
+    },
+    //--left tree end-------
+    //右侧角色成员新增谈窗相关 start
+    //获取成员列表
+    getMemberList() {
+      this.$api.user.userQueryPage(this.memberPageRequest).then((res) => {
+        this.memberTotal = res.data.totalSize;
+        if (res.code == 200) {
+          //角色权限过滤转换
+          res.data.content.forEach((item) => {
+            item.roleId = Number(item.roleId);
+          });
+          this.memberPageResult = res.data.content;
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
+    //查询成员列表
+    searchMemberList() {
+      this.memberPageRequest.columnFilters.name.value =
+        this.memberqueryFrom.name;
+      this.memberPageRequest.columnFilters.mobile.value =
+        this.memberqueryFrom.tel;
+      this.memberPageRequest.pageNum = 1;
+      this.getMemberList();
+    },
+    // 获取每个item的唯一标识index
+    getRowKeyOfTarget(row) {
+      return row.id;
+    },
+    //新增成员弹窗显示
+    memberAdd() {
+      if (this.addMemberData.roleId == "") {
+        this.$message.error("请选择左侧角色");
+      } else {
+        this.isAddMember = true;
+      }
+    },
+    // 新增成员弹窗关闭
+    closeMemberDialog() {
+      this.isAddMember = false;
+    },
+    // 分页每页条数改变
+    handleMmberSizeChange(val) {
+      this.memberPageRequest.pageSize = val;
+      this.getMemberList();
+    },
+    // 分页页码改变
+    handleMemberCurrentChange(val) {
+      this.memberPageRequest.pageNum = val;
+      this.getMemberList();
+    },
+    handleSelectionChange(val) {
+      let temp = [];
+      val.forEach((item) => {
+        if (item.id) {
+          temp.push(item.id);
+        }
+      });
+      this.addMemberData.userIds = temp;
+    },
+    // 提交新增成员
+    submitMember() {
+      this.$confirm("确认提交吗?", "提示", {})
+        .then(() => {
+          this.$api.user.roleAddUser(this.addMemberData).then((res) => {
+            if (res.code == 200) {
+              this.$message({
+                message: "操作成功",
+                type: "success",
+              });
+              this.findPage();
+            } else {
+              this.$message({
+                message: "操作失败",
+                type: "error",
+              });
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消提交",
+          });
+        });
+    },
+    queryStaffInfo() {},
+    // 右侧角色成员新增谈窗 end
+    //右侧功能权限配置相关 start
+    // 获取数据
+    findTreeData: function () {
+      // this.menuLoading = true;
+      this.$api.menu.newfindMenuTree().then((res) => {
+        this.menuData = res.data;
+        // this.menuLoading = false;
+      });
+    },
+    // 重置选择
+    resetSelection() {
+      this.checkAll = false;
+      // this.$refs.menuTree.setCheckedNodes([]);
+      this.deletecheckAllMenu(this.menuData);
+      this.refreshComponent += 1;
+      // this.$nextTick
+    },
+    //全选
+    handleCheckAllChange() {
+      if (this.checkAll) {
+        let allMenus = [];
+        this.checkAllMenu(this.menuData, allMenus);
+        // this.$refs.menuTree.setCheckedNodes(allMenus);
+      } else {
+        // this.$refs.menuTree.setCheckedNodes([]);
+        let allMenus = [];
+        this.deletecheckAllMenu(this.menuData);
+      }
+    },
+    // 递归全选
+    checkAllMenu(menuData, allMenus) {
+      menuData.forEach((item) => {
+        item.isChecked = true;
+        // this.subData.push(item);
+        if (item.chidrenList.length > 0) {
+          this.checkAllMenu(item.chidrenList, allMenus);
+        } else {
+          return;
+        }
+      });
+    },
+    deletecheckAllMenu(menuData) {
+      menuData.forEach((item) => {
+        item.isChecked = false;
+        if (item.chidrenList && item.chidrenList.length > 0) {
+          this.deletecheckAllMenu(item.chidrenList);
+        }
+      });
+    },
+
+    //右侧功能权限配置相关 end
+  },
+  created() {
+    this.peopleid = Cookies.get("user");
+    if (this.peopleid != "admin") {
+      this.peopledeptid = Cookies.get("user").split("D")[0];
+      this.rightpageRequest.columnFilters.deptid.value = this.peopledeptid;
+      this.memberPageRequest.columnFilters.deptid.value = this.peopledeptid;
+    } else {
+      this.peopledeptid = "9";
+      this.rightpageRequest.columnFilters.deptid.value = this.peopledeptid;
+      this.memberPageRequest.columnFilters.deptid.value = this.peopledeptid;
+    }
+    //获取所有下拉框数据(字典)
+    this.getRoles();
+    this.dictList();
+    this.tableColumns = [
+      [
+        {
+          id: "head1",
+          nodeName: "表头1",
+          rowSpan: 2,
+          colSpan: 1,
+        },
+        {
+          id: "head2",
+          nodeName: "表头2",
+          rowSpan: 2,
+          colSpan: 1,
+        },
+        {
+          id: "head3",
+          nodeName: "表头3",
+          rowSpan: 1,
+          colSpan: 4,
+        },
+      ],
+      [
+        {
+          id: "head4",
+          nodeName: "表头4",
+          rowSpan: 1,
+          colSpan: 1,
+        },
+        {
+          id: "head5",
+          nodeName: "表头5",
+          rowSpan: 1,
+          colSpan: 3,
+        },
+      ],
+    ];
+  },
+  mounted() {
+    this.getRoleList();
+    this.findPage();
+    this.findLeftTreeData(); // 获取机构树的数据
+    this.getMemberList();
+    this.findTreeData();
+  },
+};
+</script>
+
+<style lang="scss" scoped >
+.role_management {
+  width: 100%;
+  height: 100%;
+  background: #eaedf1;
+  box-sizing: border-box;
+  position: relative;
+  .content {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    border-radius: 4px 4px 4px 4px;
+    padding: 20px;
+    box-sizing: border-box;
+    display: flex;
+    .left {
+      width: 284px;
+      height: 100%;
+      border: 1px solid #d7dbe7;
+      display: flex;
+      flex-direction: column;
+      // justify-content: space-between;
+      align-items: center;
+      .title {
+        width: 100%;
+        height: 40px;
+        background: #f7f7f9;
+        border-radius: 0px 0px 0px 0px;
+        border: 1px solid #d7dbe7;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0px 8px;
+        box-sizing: border-box;
+        font-size: 16px;
+        line-height: 16px;
+      }
+      .search {
+        width: 268px;
+        height: 32px;
+        background: #ffffff;
+        border-radius: 4px 4px 4px 4px;
+        border: 1px solid #d7dbe7;
+        margin: 10px auto;
+        display: flex;
+
+        .search_icon {
+          width: 36px;
+          // height: 32px;
+          background: rgba(45, 77, 137, 0.1);
+          border-radius: 0px 0px 0px 0px;
+          border: 1px solid #d7dbe7;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          img {
+            width: 16px;
+            height: 16px;
+          }
+        }
+      }
+      .role_list {
+        width: 100%;
+        flex: 1;
+        padding: 0px 8px;
+        .role {
+          width: 100%;
+          height: 30px;
+          border-radius: 4px 4px 4px 4px;
+          padding: 8px;
+          box-sizing: border-box;
+          font-size: 14px;
+          line-height: 20px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          cursor: pointer;
+          .role_name {
+            // width: 100px;
+          }
+          .icon_box {
+            // width: 50px;
+            img {
+              width: 16px;
+              height: 16px;
+              cursor: pointer;
+              margin: 0px 6px;
+            }
+          }
+        }
+        .active {
+          background: #fff2f2;
+          color: #d42426;
+        }
+      }
+      .pagination {
+        width: 100%;
+        height: 30px;
+        text-align: right;
+      }
+    }
+    .right {
+      flex: 1;
+      border: 1px solid #d7dbe7;
+      padding: 20px;
+      box-sizing: border-box;
+      .option {
+        width: 100%;
+        display: flex;
+        border-bottom: 1px solid #eef1f6;
+        .title {
+          width: 60px;
+          margin-right: 40px;
+          font-size: 15px;
+          font-weight: 400;
+          color: rgba(51, 51, 51, 0.8);
+          line-height: 22px;
+          text-align: left;
+          padding-bottom: 6px;
+          cursor: pointer;
+        }
+        .active {
+          color: #2d4d89;
+          font-weight: 500;
+          border-bottom: 3px solid #2d4d89;
+        }
+      }
+      .jurisdiction_box {
+        width: 100%;
+        // .menu_1 .menu_2 .menu_3 .menu_4 .menu_5{
+        .menu_1 {
+          display: flex;
+          width: 100%;
+        }
+        .menu_2 {
+          display: flex;
+          width: 100%;
+        }
+        .menu_3 {
+          display: flex;
+        }
+        .menu_4 {
+          display: flex;
+          width: 100%;
+        }
+        .menu_5 {
+          display: flex;
+          width: 100%;
+        }
+        .menu_6 {
+          display: flex;
+          width: 100%;
+        }
+        .jurisdiction_btn {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin: 8px auto;
+        }
+        div {
+          // border: 1px solid #eef1f6;
+          margin-right: 10px;
+        }
+      }
+      .queryFrom {
+        width: 100%;
+        margin-top: 16px;
+
+        .queryFrom_option {
+          width: 20%;
+          display: flex;
+          align-items: center;
+          .search {
+            width: 80px;
+            height: 32px;
+            background: #2d4d89;
+            border-radius: 2px 2px 2px 2px;
+            color: #fff;
+            line-height: 32px;
+            text-align: center;
+            font-size: 14px;
+            cursor: pointer;
+          }
+          .add {
+            width: 80px;
+            height: 32px;
+            background: #d42426;
+            border-radius: 2px 2px 2px 2px;
+            color: #fff;
+            line-height: 32px;
+            text-align: center;
+            font-size: 14px;
+            margin-left: 12px;
+            cursor: pointer;
+          }
+        }
+      }
+      .table {
+        width: 100%;
+        height: 585px;
+        margin-top: 16px;
+      }
+      .el-pagination {
+        margin-top: 20px;
+      }
+    }
+  }
+  .addTitle {
+    display: flex;
+    align-items: center;
+    padding-bottom: 12px;
+    margin-top: 24px;
+    span {
+      display: block;
+      width: 4px;
+      height: 18px;
+      background: #d42426;
+      border-radius: 10px 10px 10px 10px;
+      margin-right: 10px;
+    }
+    width: 100%;
+    height: 30px;
+    border-bottom: 1px solid #eeeeee;
+    font-size: 18px;
+    font-weight: 500;
+  }
+  .input_data {
+    margin-top: 20px;
+
+    .inp {
+      width: 30%;
+      margin-bottom: 20px;
+      span {
+        display: inline-block;
+        font-size: 14px;
+        margin-bottom: 10px;
+      }
+    }
+    .text {
+      width: 100%;
+    }
+  }
+  .people {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+  .separation {
+    width: 100%;
+    height: 10px;
+    background: #f7f7f7;
+    border-radius: 0px 0px 0px 0px;
+  }
+  .dialog_footer {
+    width: 100%;
+    text-align: right;
+    border-top: 1px solid #eeeeee;
+    padding-top: 15px;
+  }
+  .add_role_popup {
+  }
+  .tree_left {
+    // width: 40%;
+    height: 668px;
+    border: 1px solid #d7dbe7;
+    overflow-y: auto;
+    margin-right: 20px;
+    // display: flex;
+    // flex-direction: column;
+    // justify-content: space-between;
+  }
+  .tree_right {
+    width: 100%;
+    border: none;
+    .table_box {
+      width: 100%;
+      height: 584px;
+      margin-bottom: 10px;
+    }
+  }
+  .queryFrom_option {
+    width: 40%;
+    display: flex;
+    align-items: center;
+    .search {
+      width: 80px;
+      height: 32px;
+      background: #2d4d89;
+      border-radius: 2px 2px 2px 2px;
+      color: #fff;
+      line-height: 32px;
+      text-align: center;
+      font-size: 14px;
+      cursor: pointer;
+    }
+    .add {
+      width: 80px;
+      height: 32px;
+      background: #d42426;
+      border-radius: 2px 2px 2px 2px;
+      color: #fff;
+      line-height: 32px;
+      text-align: center;
+      font-size: 14px;
+      margin-left: 12px;
+      cursor: pointer;
+    }
+  }
+}
+/deep/ .el-input__inner {
+  height: 32px !important;
+}
+/deep/.el-pagination {
+  text-align: right !important;
+}
+/deep/.el-form {
+  display: flex !important;
+  .el-form-item {
+    margin-bottom: 0px;
+  }
+  .el-form-item__label-wrap {
+    text-align: left;
+  }
+  .el-form-item__content {
+    margin-right: 18px;
+  }
+}
+/deep/.el-table .el-table__cell {
+  height: 53px;
+}
+/deep/.el-table__header {
+  width: 100% !important;
+}
+/deep/.el-table .el-table__cell {
+  padding: 0;
+}
+/deep/.el-table td.el-table__cell div {
+  display: flex;
+  justify-content: space-around;
+
+  div {
+    display: flex;
+    align-items: center;
+    color: #2d4d89;
+    font-size: 14px;
+    cursor: pointer;
+  }
+  img {
+    width: 12px;
+    height: 12px;
+  }
+}
+/deep/ .el-dialog {
+  margin-top: 2vh !important;
+}
+/deep/ .el-dialog .el-dialog__body {
+  padding-top: 0px !important;
+}
+/deep/ .el-dialog__header {
+  text-align: center !important;
+  border-bottom: 1px solid #eeeeee;
+}
+/deep/ .el-select {
+  width: 100%;
+}
+/deep/ .el-dialog__footer {
+  border-top: 1px solid #eeeeee;
+}
+</style>

+ 3 - 3
src/views/Task/daikeComponents/KtLetter.vue

@@ -5974,9 +5974,9 @@ export default {
       }
       }
       this.$api.letter.externalOrderFee(data).then((res) => {
       this.$api.letter.externalOrderFee(data).then((res) => {
         if (res.code == 200) {
         if (res.code == 200) {
-          this.policyNumberForm.JqExportFee = res.data.JqExportFee
-          this.policyNumberForm.syExportFee = res.data.syExportFee
-          this.policyNumberForm.noExportFee = res.data.noExportFee
+          this.policyNumberForm.JqExportFee = res.data.jqExportPremium
+          this.policyNumberForm.syExportFee = res.data.syExportPremium
+          this.policyNumberForm.noExportFee = res.data.noExportPremium
         } else {
         } else {
           this.$message.error(res.msg)
           this.$message.error(res.msg)
         }
         }