修改分配菜单，部门管理，字典详情表格组件

chuanyi-admin/package.json

@@ -47,6 +47,7 @@
     "vue-splitpane": "1.0.4",
     "vuedraggable": "2.20.0",
     "vuex": "3.1.0",
+    "vxe-table": "^3.6.9",
     "vxe-utils": "^2.0.1",
     "xe-utils": "^3.5.7",
     "xlsx": "0.14.1"

chuanyi-admin/src/App.vue

@@ -74,12 +74,27 @@ export default {
   color: rgb(103, 102, 102);
 }
 
-.czBtns{
-  margin-bottom:20px;
+.czBtns {
+  margin-bottom: 20px;
 }
 
 .scrollbar-wrapper::-webkit-scrollbar {
   display: none;
   /* Chrome Safari */
 }
+
+.vxe-icon-checkbox-unchecked {
+  font-size: 16px !important;
+  font-weight: 500 !important;
+}
+
+.vxe-icon-checkbox-checked {
+  font-size: 16px !important;
+  font-weight: 500 !important;
+}
+
+.vxe-icon-checkbox-indeterminate {
+  font-size: 16px !important;
+  font-weight: 500 !important;
+}
 </style>

chuanyi-admin/src/main.js

@@ -18,12 +18,16 @@ import XEUtils from 'xe-utils'
 import VXEUtils from 'vxe-utils'
 import _ from 'lodash'
 
+import VXETable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+
 import { resetBtn } from './utils'
 
 Vue.prototype.$resetBtn = resetBtn
 
 Vue.prototype._ = _
 Vue.use(VXEUtils, XEUtils, { mounts: ['cookie'] })
+Vue.use(VXETable)
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

chuanyi-admin/src/mixin/multipleChoice.js

@@ -1,91 +0,0 @@
-import { getJsonParents } from '@/utils/findParents.js'
-export default {
-  // data() {
-  //     return {
-  //         // selectData: [],
-  //         // multiple: null,
-  //     }
-  // },
-  methods: {
-    select(selection, row) {
-      if (selection.some(el => { return row.id === el.id })) {
-        console.log(selection)
-        this.childrenRecursiveChange(row, true)
-      } else {
-        this.childrenRecursiveChange(row, false)
-        this.parentsRecursiveChange(selection, row, false)
-        // if (row.children) {
-        //   row.children.map(j => {
-        //     this.toggleSelection(j, false)
-        //   })
-        // }
-        // let parentIds = getJsonParents(this.menuList, row.id);
-        // selection.map(el => {
-        //   if (el.id == parentIds[parentIds.length - 1]) {
-        //     this.toggleSelection(el, false);
-        //   }
-        // })
-      }
-    },
-    childrenRecursiveChange(row, status) {
-      if (row.children) {
-        row.children.map(j => {
-          this.toggleSelection(j, status)
-          if (j.children) this.childrenRecursiveChange(j, status)
-        })
-      }
-    },
-    parentsRecursiveChange(selection, row, status) {
-      const parentIds = getJsonParents(this.menuList, row.id)
-      if (parentIds && parentIds.length) {
-        selection.map(el => {
-          if (parentIds.includes(el.id)) {
-            this.toggleSelection(el, status)
-          }
-        })
-      }
-    },
-    selectAll(selection) {
-      // tabledata第一层只要有在selection里面就是全选
-      const isSelect = selection.some(el => {
-        const tableDataIds = this.menuList.map(j => j.id)
-        return tableDataIds.includes(el.id)
-      })
-      // tableDate第一层只要有不在selection里面就是全不选
-      const isCancel = !this.menuList.every(el => {
-        const selectIds = selection.map(j => j.id)
-        return selectIds.includes(el.id)
-      })
-      if (isSelect) {
-        selection.map(el => {
-          this.childrenRecursiveChange(el, true)
-          // if (el.children) {
-          //   el.children.map(j => {
-          //     this.toggleSelection(j, true)
-          //   })
-          // }
-        })
-      }
-      if (isCancel) {
-        this.menuList.map(el => {
-          this.childrenRecursiveChange(el, false)
-          // if (el.children) {
-          //   el.children.map(j => {
-          //     this.toggleSelection(j, false)
-          //   })
-          // }
-        })
-      }
-    },
-    toggleSelection(row, select) {
-      if (row) {
-        this.$nextTick(() => {
-          this.$refs.roleTable && this.$refs.roleTable.toggleRowSelection(row, select)
-        })
-      }
-    },
-    cancelAll() {
-      this.$refs.roleTable.clearSelection()
-    }
-  }
-}

chuanyi-admin/src/utils/findParents.js

@@ -1,43 +0,0 @@
-function findParentNodeId(jsonData, nodeId) {
-  let result
-  if (!jsonData || !jsonData.children) {
-    return result
-  }
-  for (let i = 0; i < jsonData.children.length; i++) {
-    const item = jsonData.children[i]
-    if (item.id === nodeId) {
-      result = jsonData.id
-      return result
-    } else if (item.children && item.children.length > 0) {
-      result = findParentNodeId(item, nodeId)
-      if (result) {
-        return result
-      }
-    }
-  }
-  return result
-}
-/**
- * 最终形态
- */
-export function getJsonParents(array, nodeId) {
-  const str = []
-  if (!array || array.length === 0) return null
-  for (let i = 0; i < array.length; i++) {
-    const parentId = findParentNodeId(array[i], nodeId)
-    if (!parentId) continue
-    else {
-      handler(array[i], nodeId)
-    }
-    return str
-  }
-  function handler(json, nodeId) {
-    const parentId = findParentNodeId(json, nodeId)
-    if (parentId) {
-      str.unshift(parentId)
-      handler(json, parentId)
-    } else {
-      return
-    }
-  }
-}

chuanyi-admin/src/views/system/dept/index.vue

@@ -28,35 +28,25 @@
         </el-row>
 
         <!-- 表格数据信息 -->
-        <el-table
-          ref="deptTable"
-          v-loading="loading"
+        <vxe-table
+          resizable
+          :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId' }"
           :data="deptList"
-          row-key="id"
+          align="center"
           border
-          stripe
           header-row-class-name="headBackground"
-          @selection-change="handleSelectionChange"
+          stripe
+          :loading="loading"
+          @checkbox-change="select"
+          @checkbox-all="select"
         >
-          <el-table-column type="selection" width="50" align="center" />
-          <el-table-column
-            key="departmentName"
-            label="部门名称"
-            header-align="center"
-            prop="departmentName"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            key="departmentDescribe"
-            label="部门描述"
-            align="center"
-            prop="departmentDescribe"
-            show-overflow-tooltip
-          />
-          <el-table-column key="departmentNum" label="排序号" align="center" prop="departmentNum" />
-          <el-table-column key="updateTime" label="更新时间" align="center" prop="updateTime" />
-          <el-table-column key="createTime" label="创建时间" align="center" prop="createTime" />
-          <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">
+          <vxe-column type="checkbox" width="60px" />
+          <vxe-column field="departmentName" title="部门名称" tree-node show-overflow />
+          <vxe-column field="departmentDescribe" title="部门描述" show-overflow />
+          <vxe-column field="departmentNum" title="排序号" show-overflow />
+          <vxe-column field="updateTime" title="更新时间" show-overflow />
+          <vxe-column field="createTime" title="创建时间" show-overflow />
+          <vxe-column title="操作">
             <template slot-scope="scope">
               <el-button size="mini" type="text" icon="el-icon-edit" @click="handelEdit(scope.row.id)">修改
               </el-button>
@@ -69,8 +59,8 @@
               >删除
               </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </vxe-column>
+        </vxe-table>
 
         <!-- 分页信息 -->
         <pagination
@@ -199,9 +189,8 @@ export default {
       getDeptList(this.queryParams).then(res => {
         if (res.code === 200) {
           const data = res.data
-          this.deptList = data.departmentList
+          this.deptList = this.$utils.toTreeArray(data.departmentList, { clear: true })
           this.total = data.count
-          this.getOptionsList()
           this.loading = false
         }
       })
@@ -229,6 +218,7 @@ export default {
     handelAdd() {
       this.dialogVisible = true
       this.title = '添加部门'
+      this.getOptionsList()
       this.reset()
     },
     /** 修改按钮 */
@@ -241,9 +231,10 @@ export default {
       this.title = '修改部门'
     },
     /** 表格多选 */
-    handleSelectionChange(val) {
-      this.depts = val
-      this.multiple = !val.length
+    select({ $table }) {
+      const records = $table.getCheckboxRecords()
+      this.depts = records
+      this.multiple = !records.length
     },
     /** 删除按钮 */
     handelDel(row) {
@@ -321,7 +312,6 @@ export default {
           console.log(error)
         }
       }).catch(() => {
-        this.$refs.deptTable.clearSelection()
         this.$message({
           type: 'info',
           message: '已取消删除'

chuanyi-admin/src/views/system/dict/dict-detail.vue

@@ -38,20 +38,23 @@
         </el-row>
 
         <!-- 表格数据信息 -->
-        <el-table
-          v-loading="loading"
+        <vxe-table
+          resizable
+          :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId' }"
           :data="dictList"
-          row-key="id"
+          align="center"
           border
-          stripe
           header-row-class-name="headBackground"
-          @selection-change="handleSelectionChange"
+          stripe
+          :loading="loading"
+          @checkbox-change="select"
+          @checkbox-all="select"
         >
-          <el-table-column type="selection" width="50" align="center" />
-          <el-table-column key="dictKey" label="字典名称" header-align="center" prop="dictKey" show-overflow-tooltip />
-          <el-table-column key="dictValue" label="字典值" align="center" prop="dictValue" show-overflow-tooltip />
-          <el-table-column key="sortNum" label="排序号" align="center" prop="sortNum" show-overflow-tooltip />
-          <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">
+          <vxe-column type="checkbox" width="60px" />
+          <vxe-column field="dictKey" title="字典名称" tree-node show-overflow />
+          <vxe-column field="dictValue" title="字典值" show-overflow />
+          <vxe-column field="sortNum" title="排序号" show-overflow />
+          <vxe-column title="操作">
             <template slot-scope="scope">
               <el-button size="mini" type="text" icon="el-icon-edit" @click="handelEdit(scope.row)">修改
               </el-button>
@@ -64,8 +67,8 @@
               >删除
               </el-button>
             </template>
-          </el-table-column>
-        </el-table>
+          </vxe-column>
+        </vxe-table>
 
         <!-- 分页信息 -->
         <pagination
@@ -200,7 +203,7 @@ export default {
           return
         }
         const data = res.data
-        this.dictList = data.dictPage
+        this.dictList = this.$utils.toTreeArray(data.dictPage, { clear: true })
         this.total = data.count
         this.getDictListByType()
       })
@@ -237,9 +240,10 @@ export default {
       this.title = '修改字典'
     },
     /** 表格多选 */
-    handleSelectionChange(val) {
-      this.ids = val.map(item => item.id)
-      this.multiple = !val.length
+    select({ $table }) {
+      const records = $table.getCheckboxRecords()
+      this.ids = records.map(item => item.id)
+      this.multiple = !records.length
     },
     /** 删除按钮 */
     handelDel(id) {

chuanyi-admin/src/views/system/role/user-menu.vue

@@ -20,34 +20,33 @@
       </el-col>
     </el-row>
 
-    <el-table
-      ref="roleTable"
-      v-loading="loading"
+    <vxe-table
+      resizable
+      :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId' }"
       :data="menuList"
-      row-key="id"
+      align="center"
       border
-      stripe
       header-row-class-name="headBackground"
-      :tree-props="{ children: 'children' }"
-      @select="select"
-      @select-all="selectAll"
-      @selection-change="handelDelDist"
+      stripe
+      :loading="loading"
+      @checkbox-change="select"
+      @checkbox-all="select"
     >
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="菜单名称" prop="menuName" header-align="center" show-overflow-tooltip />
-      <el-table-column label="菜单图标" prop="menuIcon" align="center" show-overflow-tooltip />
-      <el-table-column label="菜单路径" prop="menuUrl" align="center" show-overflow-tooltip />
-      <el-table-column label="更新时间" prop="updateTime" align="center" show-overflow-tooltip />
-      <el-table-column label="创建时间" prop="createTime" align="center" show-overflow-tooltip />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <vxe-column type="checkbox" width="60px" />
+      <vxe-column field="menuName" title="菜单名称" tree-node show-overflow />
+      <vxe-column field="menuIcon" title="菜单图标" show-overflow />
+      <vxe-column field="menuUrl" title="菜单路径" show-overflow />
+      <vxe-column field="updateTime" title="更新时间" show-overflow />
+      <vxe-column field="createTime" title="创建时间" show-overflow />
+      <vxe-column title="操作">
         <template slot-scope="scope">
           <el-button type="text" size="mini" :disabled="!celDistribution" @click="delMenu(scope.row.id)"><i
             class="el-icon-circle-close celBtn"
           /><span>取消分配</span>
           </el-button>
         </template>
-      </el-table-column>
-    </el-table>
+      </vxe-column>
+    </vxe-table>
 
     <userMenuSelect ref="select" @handelUpdate="getList" />
   </div>
@@ -56,13 +55,11 @@
 <script>
 import { getMenuListByRoleId, delDistributionMenu } from '@/api/system/role'
 import userMenuSelect from './user-menuSelect.vue'
-import multipleChoice from '@/mixin/multipleChoice'
 export default {
   name: 'UserMenu',
   components: {
     userMenuSelect
   },
-  mixins: [multipleChoice],
   data() {
     return {
       // 遮罩层
@@ -77,7 +74,8 @@ export default {
       // 用户表格数据
       menuList: [],
       // 禁用取消分配
-      celDistribution: true
+      celDistribution: true,
+      selectFlag: false
     }
   },
   created() {
@@ -92,9 +90,7 @@ export default {
       getMenuListByRoleId({ roleList }).then(res => {
         if (res.code === 200) {
           const data = res.data
-          this.menuList = this.$utils.toArrayTree(data)
-          this.selectData = this.menuList
-          this.multiple = 'roleTable'
+          this.menuList = data
           this.loading = false
         }
       })
@@ -108,10 +104,10 @@ export default {
       this.$refs.select.show()
     },
     /** 取消分配菜单多选 */
-    handelDelDist(selection) {
-      // console.log(selection);
-      this.delDistObj.menuList = selection.map(item => { return { id: item.id } })
-      this.celDistribution = !selection.length
+    select({ $table }) {
+      const records = $table.getCheckboxRecords()
+      this.delDistObj.menuList = records.map(item => { return { id: item.id } })
+      this.celDistribution = !records.length
     },
     /** 取消分配按钮 */
     delMenu(id) {

chuanyi-admin/src/views/system/role/user-menuSelect.vue

@@ -3,32 +3,28 @@
   <el-dialog title="添加菜单权限" :visible.sync="dialogVisible" width="800px" :close-on-click-modal="false">
     <el-row class="czBtns">
       <el-col>
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          :disabled="distribution"
-          @click="handleDel"
-        >
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" :disabled="distribution" @click="handleDel">
           批量分配</el-button>
       </el-col>
     </el-row>
-    <el-table
-      ref="distTable"
-      v-loading="distLoading"
+
+    <vxe-table
+      resizable
+      :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId' }"
       :data="addMenuList"
-      row-key="id"
+      align="center"
       border
-      stripe
       header-row-class-name="headBackground"
-      @selection-change="handelAddDist"
+      stripe
+      :loading="distLoading"
+      @checkbox-change="select"
+      @checkbox-all="select"
     >
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="菜单名称" prop="menuName" header-align="center" show-overflow-tooltip />
-      <el-table-column label="菜单图标" prop="menuIcon" align="center" show-overflow-tooltip />
-      <el-table-column label="菜单路径" prop="menuUrl" align="center" show-overflow-tooltip />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <vxe-column type="checkbox" width="60px" />
+      <vxe-column field="menuName" title="菜单名称" tree-node show-overflow />
+      <vxe-column field="menuIcon" title="菜单图标" show-overflow />
+      <vxe-column field="menuUrl" title="菜单路径" show-overflow />
+      <vxe-column title="操作">
         <template slot-scope="scope">
           <el-button
             type="primary"
@@ -40,16 +36,14 @@
           >分配菜单
           </el-button>
         </template>
-      </el-table-column>
-    </el-table>
+      </vxe-column>
+    </vxe-table>
   </el-dialog>
 </template>
 
 <script>
 import { getMenuListTree, distributionMenu } from '@/api/system/role'
-// import multipleChoice from '@/mixin/multipleChoice'
 export default {
-  // mixins: [multipleChoice],
   data() {
     return {
       // 弹出框
@@ -81,17 +75,15 @@ export default {
     getMenuListTree() {
       getMenuListTree().then(res => {
         const data = res.data
-        this.addMenuList = data
-        // this.selectData = this.addMenuList
-        // this.multiple = 'distTable'
+        this.addMenuList = this.$utils.toTreeArray(data, { clear: true })
         this.distLoading = false
       })
     },
     /** 分配菜单多选 */
-    handelAddDist(selection) {
-      // console.log(selection);
-      this.distObj.menuList = selection.map(item => { return { id: item.id } })
-      this.distribution = !selection.length
+    select({ $table }) {
+      const records = $table.getCheckboxRecords()
+      this.distObj.menuList = records.map(item => { return { id: item.id } })
+      this.distribution = !records.length
     },
     /** 分配按钮 */
     addMenu(id, event) {
@@ -143,25 +135,12 @@ export default {
       })
     }
   }
-  // watch: {
-  //   //弹出框表格数据刷新滚动条置顶
-  //   userList: {
-  //     handler () {
-  //       this.$nextTick(() => {
-  //         // 滚动到顶部
-  //         this.$refs.table.bodyWrapper.scrollTop = 0;
-  //       });
-  //     },
-  //     deep: true,
-  //     immediate: true,
-  //   }
-  // }
 }
 </script>
 
 <style lang="scss" scoped>
 .el-dialog {
-    height: 78vh;
-    overflow: auto;
+  height: 78vh;
+  overflow: auto;
 }
 </style>

chuanyi-admin/src/views/system/user/index.vue

@@ -455,6 +455,7 @@ export default {
       this.reset()
       this.form.userType = this.userType[0].value
       this.open = true
+      this.passwordType = 'password'
       this.title = '添加用户'
     },
     /** 表单提交 */