系统设置、权限管理模块增加按钮权限控制

src/views/Sys/User.vue

@@ -7,45 +7,46 @@
           <div>
             <el-checkbox v-model="containsSubDeptChecked">包含下级机构</el-checkbox>
             <el-divider></el-divider>
-            <tree :setting="ztreeSetting" :nodes="ztreeNodes" @onClick="onZTreeClick" @onCreated="onZTreeCreated"/>
+            <tree :setting="ztreeSetting" :nodes="ztreeNodes" @onClick="onZTreeClick" @onCreated="onZTreeCreated" />
           </div>
         </SplitArea>
         <!-- 左侧树End -->
 
         <!-- 右侧列表页面Start -->
         <SplitArea :size="rightSplitWidth">
-            <!-- 筛选区域Start -->
-            <el-row class="queryFrom" >
-              <el-form ref="queryFormRef" :model="queryFrom" label-width="80px">
-                  <el-row>
-                  <!-- <el-col :span="5">
+          <!-- 筛选区域Start -->
+          <el-row class="queryFrom">
+            <el-form ref="queryFormRef" :model="queryFrom" label-width="80px">
+              <el-row>
+                <!-- <el-col :span="5">
                     <el-form-item label="工号">
                       <el-input clearable size="small" placeholder="工号" v-model="queryFrom.id" ></el-input>
                     </el-form-item>
                   </el-col> -->
-                  <el-col :span="5">
-                    <el-form-item label="姓名">
-                      <el-input clearable size="small" placeholder="姓名" v-model="queryFrom.name" ></el-input>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="5">
-                    <el-form-item label="手机号">
-                      <el-input clearable size="small" placeholder="手机号" v-model="queryFrom.tel" ></el-input>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="4" style="display: flex;align-items: center;justify-content: center;">
-                    <el-button size="small" @click="queryStaffInfo">查询</el-button>
-                  </el-col>
-                  </el-row>
-              </el-form>
-            </el-row>
-            <!-- 筛选区域End -->
+                <el-col :span="5">
+                  <el-form-item label="姓名">
+                    <el-input clearable size="small" placeholder="姓名" v-model="queryFrom.name"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="5">
+                  <el-form-item label="手机号">
+                    <el-input clearable size="small" placeholder="手机号" v-model="queryFrom.tel"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="4" style="display: flex;align-items: center;justify-content: center;">
+                  <kt-button label="查询" perms="sys:role:query" @click="queryStaffInfo" />
+                </el-col>
+              </el-row>
+            </el-form>
+          </el-row>
+          <!-- 筛选区域End -->
 
-            <!-- 审核通过 -->
-            <!-- <template v-if="pageRequest.columnFilters.status.value == '1'"> -->
-              <kt-common-table permsEdit="sys:user:edit" :data="pageResult" :columns="columns" editButtonName="配置角色"  :showBatchDelete="false" @findPage="findPage" @handleEdit="handleTableEdit">
-              </kt-common-table>
-            <!-- </template> -->
+          <!-- 审核通过 -->
+          <!-- <template v-if="pageRequest.columnFilters.status.value == '1'"> -->
+          <kt-common-table permsEdit="sys:role:update" :data="pageResult" :columns="columns" editButtonName="配置角色"
+            :showBatchDelete="false" @findPage="findPage" @handleEdit="handleTableEdit">
+          </kt-common-table>
+          <!-- </template> -->
 
         </SplitArea>
         <!-- 右侧列表页面End -->
@@ -53,8 +54,10 @@
     </el-main>
 
     <!-- 新增修改界面 -->
-    <el-dialog title="角色配置" width="800px" :visible.sync="dialogVisible" :close-on-click-modal="false" :before-close="handleDialogBefore" @close="closeDialog" v-dialogDrag>
-      <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="submitForm()" label-width="120px" size="small" style="text-align:left;">
+    <el-dialog title="角色配置" width="800px" :visible.sync="dialogVisible" :close-on-click-modal="false"
+      :before-close="handleDialogBefore" @close="closeDialog" v-dialogDrag>
+      <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="submitForm()" label-width="120px" size="small"
+        style="text-align:left;">
         <el-tabs>
           <el-row>
             <el-col :span="12">
@@ -95,8 +98,9 @@
           <el-row>
             <el-col :span="12">
               <el-form-item label="角色权限" prop="email">
-                <el-select size="small"  v-model="dataForm.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 size="small" v-model="dataForm.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>
               </el-form-item>
             </el-col>
@@ -113,287 +117,289 @@
 </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 CommonUtil from "@/utils/comutil.js"
-  export default {
-    components: {
-      KtButton,
-      tree,
-      KtCommonTable
-    },
-    data() {
-      return {
-        peopleid:"",
-        peopledeptid:"",
+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 CommonUtil from "@/utils/comutil.js"
+export default {
+  components: {
+    KtButton,
+    tree,
+    KtCommonTable
+  },
+  data() {
+    return {
+      peopleid: "",
+      peopledeptid: "",
 
-        /**Split 开始 */
-        leftSplitWidth: 20,
-        rightSplitWidth: 80,
-        /**Split 结束 */
+      /**Split 开始 */
+      leftSplitWidth: 20,
+      rightSplitWidth: 80,
+      /**Split 结束 */
 
-        //----ztreeLeft begin---------
-        containsSubDeptChecked: true, //是否包含下级机构
-        ztreeObj: null,
-        ztreeSetting: {
-          check: {
-            enable: false
-          },
-          data: {
-            simpleData: {
-              enable: true,
-              pIdKey: "parentId"
-            }
-          },
-          view: {
-            showIcon: false
+      //----ztreeLeft begin---------
+      containsSubDeptChecked: true, //是否包含下级机构
+      ztreeObj: null,
+      ztreeSetting: {
+        check: {
+          enable: false
+        },
+        data: {
+          simpleData: {
+            enable: true,
+            pIdKey: "parentId"
           }
         },
-        ztreeNodes: [],
-        currentTreeNode: null,
-        //----ztreeLeft end---------
+        view: {
+          showIcon: false
+        }
+      },
+      ztreeNodes: [],
+      currentTreeNode: null,
+      //----ztreeLeft end---------
 
 
-        // 右侧列表查询数据Start
-        queryFrom:{},
-        pageResult: {},
-        pageRequest: {  //查询的默认条件
-          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":""
-            }
+      // 右侧列表查询数据Start
+      queryFrom: {},
+      pageResult: {},
+      pageRequest: {  //查询的默认条件
+        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": ""
           }
-        },
-        columns: [  // 数据列
-          { prop: "deptId",label: "部门编码",minWidth: 80,sortable: false},
-          { 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: 80,sortable: false},
-          // { prop: "sex",label: "性别",minWidth: 80,sortable: false,formatter: this.sexFormatter},
-          { prop: "mobile",label: "联系电话",minWidth: 100,sortable: false},
-          { prop: "email",label: "邮箱",minWidth: 100,sortable: false},
-          { prop: "remark",label: "角色",minWidth: 100,sortable: false}
-        ],
-        // 右侧列表查询数据End
+        }
+      },
+      columns: [  // 数据列
+        { prop: "deptId", label: "部门编码", minWidth: 80, sortable: false },
+        { 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: 80, sortable: false },
+        // { prop: "sex",label: "性别",minWidth: 80,sortable: false,formatter: this.sexFormatter},
+        { prop: "mobile", label: "联系电话", minWidth: 100, sortable: false },
+        { prop: "email", label: "邮箱", minWidth: 100, sortable: false },
+        { prop: "remark", label: "角色", minWidth: 100, sortable: false }
+      ],
+      // 右侧列表查询数据End
 
 
-        // 新增或修改的弹出框Start
-        dialogVisible: false, // 新增编辑界面是否显示
-        dataForm:{  // 人员个人信息
-          remark:"",
-          roleId:""
-        },
-        // 新增或修改的弹出框End
-        roleoptions: [],
+      // 新增或修改的弹出框Start
+      dialogVisible: false, // 新增编辑界面是否显示
+      dataForm: {  // 人员个人信息
+        remark: "",
+        roleId: ""
+      },
+      // 新增或修改的弹出框End
+      roleoptions: [],
 
-      }
-    },
-    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.getRoles();
+    }
+  },
+  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.getRoles();
+  },
+  mounted() {
+    this.findLeftTreeData();// 获取机构树的数据
+    //用像素初始化左边的split的宽度
+    this.changeTreeWidth(240);// 初始化树的宽度
+  },
+  watch: {
+    containsSubDeptChecked() { // 监听是否包含下级
+      this.pageRequest.columnFilters.containsSubDept.value = this.containsSubDeptChecked ? "1" : "0";
+      this.findPage();
+    }
+  },
+  methods: {
+    getRoles() {
+      this.$api.role.findAll().then((res) => {
+        this.roleoptions = res.data
+      }).catch((error) => {
+        this.roleoptions = [];
+      })
     },
-    mounted() {
-      this.findLeftTreeData();// 获取机构树的数据
-      //用像素初始化左边的split的宽度
-      this.changeTreeWidth(240);// 初始化树的宽度
+    changeRole(roleid) {
+      this.dataForm.roleId = roleid;
     },
-    watch:{
-      containsSubDeptChecked(){ // 监听是否包含下级
-        this.pageRequest.columnFilters.containsSubDept.value = this.containsSubDeptChecked ? "1" : "0";
-        this.findPage();
-      }
+    /**Split 开始 */
+    changeTreeWidth(widthVal) {
+      // 初始化树的宽度
+      this.leftSplitWidth = Math.ceil(widthVal / this.$refs.elMain.$el.clientWidth * 100);
+      this.rightSplitWidth = 100 - (this.leftSplitWidth)
     },
-    methods: {
-      getRoles(){
-        this.$api.role.findAll().then((res) => {
-        	this.roleoptions = res.data
-        }).catch((error)=>{
-          this.roleoptions = [];
-        })
-      },
-      changeRole(roleid){
-        this.dataForm.roleId =roleid;
-      },
-      /**Split 开始 */
-      changeTreeWidth(widthVal){
-        // 初始化树的宽度
-        this.leftSplitWidth = Math.ceil(widthVal/this.$refs.elMain.$el.clientWidth*100);
-        this.rightSplitWidth = 100-(this.leftSplitWidth)
-      },
-      /**Split 结束 */
+    /**Split 结束 */
 
-      //--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.pageRequest.columnFilters.deptid.value = this.currentTreeNode.id;
-        this.findPage();
-      },
-      //--left tree end-------
+    //--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.pageRequest.columnFilters.deptid.value = this.currentTreeNode.id;
+      this.findPage();
+    },
+    //--left tree end-------
 
-      // 查询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.pageNum = 1;
-        this.findPage();
-      },
-      // 查询End
+    // 查询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.pageNum = 1;
+      this.findPage();
+    },
+    // 查询End
 
-      // 右侧列表的方法Start
-      findPage(data) {
+    // 右侧列表的方法Start
+    findPage(data) {
       // 获取分页数据
-        if(data && data.pageRequest){
-          this.pageRequest.pageNum = data.pageRequest.pageNum;
-          this.pageRequest.pageSize = data.pageRequest.pageSize;
-        }
-         this.$api.user.userQueryPage(this.pageRequest).then((res) => {
-          //角色权限过滤转换
-           res.data.content.forEach(item=>{
-            let roleArr = this.roleoptions.filter(items=>{
-              return item.roleId==items.id
-            })
-            if(roleArr.length){
-              item.roleId = roleArr[0].name
-            }
-           })
-          this.pageResult = res.data;
-        }).then(data != null ? data.callback : '')
-      },
+      if (data && data.pageRequest) {
+        this.pageRequest.pageNum = data.pageRequest.pageNum;
+        this.pageRequest.pageSize = data.pageRequest.pageSize;
+      }
+      this.$api.user.userQueryPage(this.pageRequest).then((res) => {
+        //角色权限过滤转换
+        res.data.content.forEach(item => {
+          let roleArr = this.roleoptions.filter(items => {
+            return item.roleId == items.id
+          })
+          if (roleArr.length) {
+            item.roleId = roleArr[0].name
+          }
+        })
+        this.pageResult = res.data;
+      }).then(data != null ? data.callback : '')
+    },
 
-      handleTableEdit(params) {
-        // 编辑后线人员
-        Object.assign(this.dataForm, params.row);
-        this.dialogVisible = true
-      },
-      // 右侧列表的方法End
+    handleTableEdit(params) {
+      // 编辑后线人员
+      Object.assign(this.dataForm, params.row);
+      this.dialogVisible = true
+    },
+    // 右侧列表的方法End
 
-      // 新增或修改的弹出框Start
-      getDictItems(typeName) {
+    // 新增或修改的弹出框Start
+    getDictItems(typeName) {
       //--数据字典--
-        this.$api.dict.findByLableName(typeName).then((response)=>{
-          this[typeName + "options"] = response.data; // 把获取到的数据赋给this.data
-        }).catch((error)=>{
-          this[typeName + "options"] = [];
+      this.$api.dict.findByLableName(typeName).then((response) => {
+        this[typeName + "options"] = response.data; // 把获取到的数据赋给this.data
+      }).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.$refs['dataForm'].resetFields()
-        for (let key in this.dataForm) {
-          this.dataForm[key] = "";
+        .catch(_ => { });
+    },
+    closeDialog() {
+      // 清空数据
+      this.$refs['dataForm'].resetFields()
+      for (let key in this.dataForm) {
+        this.dataForm[key] = "";
+      }
+      this.dialogVisible = false
+    },
+    // 提交
+    submitForm() {
+      this.$confirm('确认提交吗？', '提示', {}).then(() => {
+        let params = {
+          roleId: this.dataForm.roleId,
+          userId: this.dataForm.id,
         }
-        this.dialogVisible=false
-      },
-      // 提交
-      submitForm() {
-          this.$confirm('确认提交吗？', '提示', {}).then(() => {
-            let params = {
-              roleId:this.dataForm.roleId,
-              userId:this.dataForm.id,
-            }
-            this.$api.user.saveUserRole(params).then((res)=>{
-              if(res.code == 200){
-                this.$message({
-                  message: '操作成功',
-                  type: 'success'
-                })
-                this.findPage(null);
-                this.dialogVisible = false
-              }else{
-                this.$message({
-                  message: '操作失败',
-                  type: 'error'
-                })
-              }
+        this.$api.user.saveUserRole(params).then((res) => {
+          if (res.code == 200) {
+            this.$message({
+              message: '操作成功',
+              type: 'success'
             })
-          }).catch(() => {
+            this.findPage(null);
+            this.dialogVisible = false
+          } else {
             this.$message({
-              type: 'info',
-              message: '已取消提交'
-            });
-          });
-      },
-      // 新增或修改的弹出框End
+              message: '操作失败',
+              type: 'error'
+            })
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消提交'
+        });
+      });
+    },
+    // 新增或修改的弹出框End
 
-    }
   }
+}
 </script>
 
 <style scoped>
-  .el-divider--horizontal {
-    margin: 4px 0;
-  }
+.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 */
-</style>
+/* 顶部查询条件样式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 */</style>