PC权限树

src/components/RightModel/index.vue

@@ -16,12 +16,12 @@
           checkable
           :checked-keys="checkedKeys"
           :tree-data="treeData"
-          :selected-keys="selectedKeys"
-          :expanded-keys="expandedKeysss"
           :check-strictly="checkStrictly"
+          :expanded-keys="iExpandedKeys"
+          :auto-expand-parent="autoExpandParent"
+          :replace-fields="{children:'children', title:'label', key:'id', value: 'id' }"
           @check="onCheck"
           @expand="onExpand"
-          @select="onTreeNodeSelect"
         >
           <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
             {{ slotTitle }}<a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;" />
@@ -57,22 +57,18 @@ export default {
   name: 'RoleModal',
   components: {
   },
+  props: ['treeCheckList', 'treeList'],
   data() {
     return {
-      jobId: '',
       title: '',
-      treeList: '',
-      treeKey: '',
       treeData: [],
-      defaultCheckedKeys: [],
+      iExpandedKeys: [],
+      autoExpandParent: true,
       checkedKeys: [],
-      expandedKeysss: [],
       allTreeKeys: [],
-      autoExpandParent: true,
       checkStrictly: true,
       visible: false,
-      loading: false,
-      selectedKeys: []
+      loading: false
     }
   },
   watch: {
@@ -83,12 +79,6 @@ export default {
     }
   },
   methods: {
-    onTreeNodeSelect(id) {
-      if (id && id.length > 0) {
-        this.selectedKeys = id
-      }
-      this.$refs.datarule.show(this.selectedKeys[0], this.jobId)
-    },
     onCheck(o) {
       if (this.checkStrictly) {
         this.checkedKeys = o.checked
@@ -96,8 +86,7 @@ export default {
         this.checkedKeys = o
       }
     },
-    show(jobId) {
-      this.jobId = jobId
+    show() {
       this.visible = true
     },
     close() {
@@ -105,35 +94,20 @@ export default {
       this.$emit('close')
       this.visible = false
     },
-    onExpand(expandedKeys) {
-      this.expandedKeysss = expandedKeys
-      this.autoExpandParent = false
-    },
     reset() {
-      this.expandedKeysss = []
       this.checkedKeys = []
-      this.defaultCheckedKeys = []
       this.loading = false
     },
     expandAll() {
-      this.expandedKeysss = this.allTreeKeys
+      this.iExpandedKeys = this.allTreeKeys
     },
     closeAll() {
-      this.expandedKeysss = []
+      this.iExpandedKeys = []
     },
-    checkALL() {
-      this.checkedKeys = this.allTreeKeys
-    },
-    cancelCheckALL() {
-      // this.checkedKeys = this.defaultCheckedKeys
-      this.checkedKeys = []
-    },
-    switchCheckStrictly(v) {
-      if (v == 1) {
-        this.checkStrictly = false
-      } else if (v == 2) {
-        this.checkStrictly = true
-      }
+    onExpand(expandedKeys) {
+      console.log('onExpand', expandedKeys)
+      this.iExpandedKeys = expandedKeys
+      this.autoExpandParent = false
     },
     handleCancel() {
       this.close()
@@ -141,21 +115,36 @@ export default {
     handleSubmit(exit) {
       const that = this
       const params = {
-        jobId: that.jobId,
         permissionIds: that.checkedKeys.join(','),
-        lastpermissionIds: that.defaultCheckedKeys.join(',')
       }
       console.log(params)
     },
+    setThisExpandedKeys(node) {
+      if (node.children && node.children.length > 0) {
+        this.iExpandedKeys.push(node.id)
+        for (let a = 0; a < node.children.length; a++) {
+          this.setThisExpandedKeys(node.children[a])
+        }
+      }
+    },
+    getAllKeys(node) {
+      this.allTreeKeys.push(node.id)
+      if (node.children && node.children.length > 0) {
+        for (let a = 0; a < node.children.length; a++) {
+          this.getAllKeys(node.children[a])
+        }
+      }
+    },
     loadData() {
       getAction(this.treeList).then((res) => {
-        this.treeData = res.result.treeList
-        this.allTreeKeys = res.result.ids
-        getAction({ jobId: this.jobId }).then((res) => {
-          this.checkedKeys = [...res.result]
-          this.defaultCheckedKeys = [...res.result]
-          this.expandedKeysss = this.allTreeKeys
-          console.log(this.defaultCheckedKeys)
+        this.allTreeKeys = []
+        for (let i = 0; i < res.data.length; i++) {
+          const temp = res.data[i]
+          this.treeData.push(temp)
+          this.setThisExpandedKeys(temp)
+          this.getAllKeys(temp)
+        }
+        getAction(this.treeCheckList).then((res) => {
         })
       })
     }

src/components/leftTree/index.vue

@@ -44,7 +44,7 @@ export default {
       autoExpandParent: true,
       treeData: [],
       hiding: true,
-      selectedKeys: ['1'],
+      selectedKeys: [],
       currSelected: {},
       allTreeKeys: [],
       checkStrictly: true,

src/router/index.js

@@ -190,6 +190,12 @@ export const constantRoutes = [
         name: 'dict',
         meta: { title: '字典管理', icon: 'el-icon-collection-tag' }
       },
+      {
+        path: 'menu',
+        component: () => import('@/views/sys/menu/index'), // Parent router-view
+        name: 'menu',
+        meta: { title: '菜单管理', icon: 'el-icon-collection-tag' }
+      },
       {
         path: 'log',
         component: () => import('@/views/sys/log/index'), // Parent router-view

src/views/login/index.vue

@@ -90,7 +90,6 @@
             </el-tooltip>
           </el-form-item>
           <el-button
-            :loading="loading"
             type="primary"
             style="width:100%;margin-bottom:30px;"
             @click.native.prevent="handleLogin"

src/views/sys/job/CheckAndEditModel.vue

@@ -11,11 +11,11 @@
       <a-form-model-item label="职务名称" prop="roleName">
         <a-input v-model="model.roleName" />
       </a-form-model-item>
-      <a-form-model-item label="数据权限" prop="zxqwqn">
+      <a-form-model-item label="数据权限" prop="dataScope">
         <j-dict-select-tag
-          type="radioButton"
-          v-model="model.zxqwqn"
-          dict-code="word_type"
+          type="radio"
+          v-model="model.dataScope"
+          dict-code="data_scope"
         />
       </a-form-model-item>
       <a-form-model-item label="职务描述">

src/views/sys/job/index.vue

@@ -85,7 +85,7 @@
         </span>
       </a-table>
       <check-and-edit-model ref="modalForm" @ok="modalFormOk" />
-      <right-model ref="rightModal" @ok="updateQueryParam" />
+      <right-model ref="rightModal" :tree-list="treeList" :tree-check-list="treeCheckList" @ok="updateQueryParam" />
     </div>
     <!-- table区域-end -->
     <!-- 表单区域 -->
@@ -96,7 +96,7 @@ import { listMixin } from '@/mixin/listMixin'
 import columns from './indexColumns'
 import CheckAndEditModel from './CheckAndEditModel'
 import rightModel from '@/components/RightModel'
-import {httpAction} from "@/api/request";
+import { httpAction } from '@/api/request'
 
 export default {
   components: {
@@ -106,6 +106,8 @@ export default {
   mixins: [listMixin],
   data() {
     return {
+      treeList: '',
+      treeCheckList: '',
       // 查询条件
       queryParam: {},
       // 表头
@@ -133,15 +135,14 @@ export default {
       })
     },
     app(data) {
-      this.$refs.rightModal.title = 'app菜单权限'
-      this.$refs.rightModal.treeKey = '/treeKey'
-      this.$refs.rightModal.treeList = '/treeList'
-      this.$refs.rightModal.show()
+      // this.$refs.rightModal.title = 'app菜单权限'
+      // this.$refs.rightModal.treeList = '/treeList'
+      // this.$refs.rightModal.show()
     },
     pc(data) {
       this.$refs.rightModal.title = 'pc菜单权限'
-      this.$refs.rightModal.treeKey = '/treeKey'
-      this.$refs.rightModal.treeList = '/treeList'
+      this.treeList = '/system/menu/treeselect'
+      this.treeCheckList = `/system/menu/roleMenuTreeselect/${data.roleId}`
       this.$refs.rightModal.show()
     },
     updateQueryParam(data) {

src/views/sys/menu/CheckAndEditModel.vue

@@ -0,0 +1,129 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="700"
+    :visible="visible"
+    :mask-closable="false"
+    cancel-text="关闭"
+    @close="close"
+  >
+    <a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="validatorRules" :model="model">
+      <a-form-model-item label="部门名称" prop="deptName">
+        <a-input v-model="model.deptName" />
+      </a-form-model-item>
+      <a-form-model-item label="上级部门" prop="parentId">
+        <a-tree-select
+          v-model="model.parentId"
+          allow-clear
+          tree-default-expand-all
+          style="width: 100%"
+          :tree-data="treeData"
+          :replace-fields="{children:'children', title:'label', key:'id', value: 'id' }"
+        />
+      </a-form-model-item>
+      <a-form-model-item label="主管人员" prop="leader">
+        <sys-list-select-tag
+          v-model="model.userId"
+          dict-code="user"
+        />
+      </a-form-model-item>
+      <a-form-model-item label="部门描述">
+        <a-textarea v-model="model.remark" placeholder="请输入" :rows="4" />
+      </a-form-model-item>
+      <a-form-model-item label="排序">
+        <a-input-number style="width: 100%" v-model="model.orderNum" :min="0" :max="100000"/>
+      </a-form-model-item>
+    </a-form-model>
+  </j-modal>
+</template>
+<script>
+import { getAction, httpAction } from '@/api/request'
+import JModal from '@/components/JModal'
+export default {
+  name: 'CheckAndEditModel',
+  components: {
+    JModal
+  },
+  data() {
+    return {
+      treeData: [],
+      labelCol: { span: 4 },
+      wrapperCol: { span: 19 },
+      dataSource: [],
+      title: '',
+      visible: false,
+      isCheck: false,
+      model: {},
+      validatorRules: {
+        name: [{ required: true, message: '请输入' }],
+        type: [{ required: true, message: '请选择' }]
+      },
+      url: {
+        add: '/system/dept',
+        edit: '/system/dept',
+        tree: '/system/dept/treeSelect'
+      }
+    }
+  },
+  created() {
+  },
+  methods: {
+    add() {
+      this.model = {}
+      this.visible = true
+      this.loadTree()
+    },
+    edit(record) {
+      this.model = Object.assign({}, record)
+      if (this.model.parentId === 0) {
+        this.model.parentId = null
+      }
+      this.visible = true
+      this.loadTree()
+    },
+    loadTree() {
+      this.treeData = []
+      getAction(this.url.tree).then((res) => {
+        if (res.code === 200) {
+          this.treeData = res.data
+        }
+      })
+    },
+    close(isSubmit) {
+      if (isSubmit) {
+        this.checkData()
+      } else {
+        this.visible = false
+      }
+    },
+    checkData() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.saveData()
+        } else {
+          return false
+        }
+      })
+    },
+    saveData() {
+      let url, type
+      if (!this.model.id) {
+        url = this.url.add
+        type = 'post'
+      } else {
+        url = this.url.edit
+        type = 'put'
+      }
+      httpAction(url, this.model, type).then((res) => {
+        if (res.code === 200) {
+          this.$message.success(res.msg)
+          this.$emit('ok')
+          this.visible = false
+        } else {
+          console.log(res)
+        }
+      })
+    }
+  }
+}
+</script>

src/views/sys/menu/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <el-card style="margin: 15px">
+    <!-- 操作按钮区域 -->
+    <div class="table-operator" style="margin: 5px 0;float: right">
+      <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
+      <a-dropdown v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay">
+          <a-menu-item key="1" @click="batchDel">
+            <a-icon type="delete" />
+            删除
+          </a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px">
+          批量操作
+          <a-icon type="down" />
+        </a-button>
+      </a-dropdown>
+    </div>
+
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-form-item>
+          <a-input
+            v-model="queryParam.deptName"
+            style="width: 150px"
+            placeholder="部门名称"
+          />
+        </a-form-item>
+        <a-form-item>
+          <a-button type="primary" @click="searchQuery">查询</a-button>
+          <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+
+    <!-- table区域-begin -->
+    <div>
+      <div class="ant-alert ant-alert-info" style="margin: 16px 0;">
+        <i class="anticon anticon-info-circle ant-alert-icon" /> 已选择&nbsp;<a style="font-weight: 600">{{
+          selectedRowKeys.length }}</a>项&nbsp;&nbsp;
+        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+      </div>
+
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        row-key="deptId"
+        :columns="columns"
+        :defaultExpandedRowKeys="[100]"
+        :data-source="dataSource"
+        :pagination="false"
+        :loading="loading"
+        :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+        @change="handleTableChange"
+      >
+        <template slot="status" slot-scope="text, record">
+          <a-switch
+            :checked="record.status==='1'?false:true"
+            checked-children="启用"
+            un-checked-children="停用"
+            @change="changeStatus({$event,record})"
+          />
+        </template>
+        <span slot="action" slot-scope="text, record">
+          <a-button size="small" type="primary" @click="handleEdit(record)">
+            编辑
+          </a-button>
+          <a-divider type="vertical" />
+          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.deptId)">
+            <a-button size="small" type="danger">
+              删除
+            </a-button>
+          </a-popconfirm>
+        </span>
+      </a-table>
+      <check-and-edit-model ref="modalForm" @ok="modalFormOk" />
+    </div>
+    <!-- table区域-end -->
+    <!-- 表单区域 -->
+  </el-card>
+</template>
+<script>
+import { listMixin } from '@/mixin/listMixin'
+import columns from './indexColumns'
+import CheckAndEditModel from './CheckAndEditModel'
+import { httpAction } from '@/api/request'
+export default {
+  components: {
+    CheckAndEditModel
+  },
+  mixins: [listMixin],
+  data() {
+    return {
+      // 查询条件
+      queryParam: {},
+      // 表头
+      columns: columns(this),
+      url: {
+        list: '/system/menu/list',
+        delete: '/system/menu/'
+      }
+    }
+  },
+  created() {
+  },
+  methods: {
+    changeStatus({ $event, record }) {
+      console.log($event, record)
+      record.status = $event ? '0' : '1'
+      httpAction('/system/dept', record, 'put').then((res) => {
+        if (res.code === 200) {
+          this.$message.success(res.msg)
+        } else {
+          console.log(res)
+        }
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+  @import '~@/assets/less/common.less'
+</style>

src/views/sys/menu/indexColumns.js

@@ -0,0 +1,45 @@
+function columns(vm) {
+  const cols = [
+    {
+      title: '菜单名称',
+      dataIndex: 'menuName',
+      key: 'menuName'
+    },
+    {
+      title: '类型',
+      align: 'center',
+      dataIndex: 'menuType',
+      key: 'menuType'
+    },
+    {
+      title: '权限标识',
+      align: 'center',
+      dataIndex: 'perms',
+      key: 'perms'
+    },
+    {
+      title: '排序',
+      align: 'center',
+      dataIndex: 'orderNum',
+      key: 'orderNum'
+    },
+    {
+      title: '状态',
+      align: 'center',
+      dataIndex: 'status',
+      scopedSlots: { customRender: 'status' },
+      key: 'status'
+    },
+    {
+      title: '操作',
+      dataIndex: 'action',
+      width: 200,
+      align: 'center',
+      slots: { title: 'actionName' },
+      scopedSlots: { customRender: 'action' }
+    }
+  ]
+  return cols
+}
+
+export default columns

src/views/sys/worker/CheckAndEditModel.vue

@@ -79,7 +79,7 @@ export default {
         nickName: [{ required: true, message: '请输入' }],
         deptId: [{ required: true, message: '请选择' }],
         userName: [{ required: true, message: '请选择' }],
-        roleId: [{ required: true, message: '请选择' }],
+        roles: [{ required: true, message: '请选择' }],
         phonenumber: [{ required: true, message: '请输入' }],
       },
       url: {