feature:基础模块开发

1.角色管理
2.部门管理

src/api/dept.js

@@ -1,25 +1,21 @@
-import request from '@/utils/request'
+import micro_request from '@/utils/micro_request'
 
-export function getList(params) {
-  return request({
-    url: '/departmentManagement/getList',
-    method: 'get',
-    params,
-  })
-}
-
-export function doEdit(data) {
-  return request({
-    url: '/departmentManagement/doEdit',
-    method: 'post',
-    data,
-  })
-}
-
-export function doDelete(data) {
-  return request({
-    url: '/departmentManagement/doDelete',
-    method: 'post',
-    data,
-  })
+const basePath = process.env.VUE_APP_AdminPath
+export default {
+  // 获取列表
+  getList(query) {
+    return micro_request.postRequest(basePath, 'Dept', 'GetList', query)
+  },
+  getTree(query) {
+    return micro_request.postRequest(basePath, 'Dept', 'GetDeptTree', query)
+  },
+  doAdd(query) {
+    return micro_request.postRequest(basePath, 'Dept', 'Create', query)
+  },
+  doEdit(query) {
+    return micro_request.postRequest(basePath, 'Dept', 'UpdateById', query)
+  },
+  doDelete(query) {
+    return micro_request.postRequest(basePath, 'Dept', 'DeleteById', query)
+  },
 }

src/api/menu.js

@@ -19,36 +19,3 @@ export default {
     return micro_request.postRequest(basePath, 'Menu', 'DeleteById', query)
   },
 }
-// import request from '@/utils/request'
-//
-// export default {
-//   // 获取列表
-//   getList(params) {
-//     return request({
-//       url: '/router/getList',
-//       method: 'get',
-//       params,
-//     })
-//   },
-//   getTree(params) {
-//     return request({
-//       url: '/menuManagement/getList',
-//       method: 'get',
-//       params,
-//     })
-//   },
-//   doEdit(data) {
-//     return request({
-//       url: '/menuManagement/doEdit',
-//       method: 'post',
-//       data,
-//     })
-//   },
-//   doDelete(data) {
-//     return request({
-//       url: '/menuManagement/doEdit',
-//       method: 'post',
-//       data,
-//     })
-//   },
-// }

src/api/role.js

@@ -1,25 +1,18 @@
-import request from '@/utils/request'
+import micro_request from '@/utils/micro_request'
 
-export function getList(params) {
-  return request({
-    url: '/roleManagement/getList',
-    method: 'get',
-    params,
-  })
-}
-
-export function doEdit(data) {
-  return request({
-    url: '/roleManagement/doEdit',
-    method: 'post',
-    data,
-  })
-}
-
-export function doDelete(data) {
-  return request({
-    url: '/roleManagement/doDelete',
-    method: 'post',
-    data,
-  })
+const basePath = process.env.VUE_APP_AdminPath
+export default {
+  // 获取列表
+  getList(query) {
+    return micro_request.postRequest(basePath, 'Role', 'GetList', query)
+  },
+  doAdd(query) {
+    return micro_request.postRequest(basePath, 'Role', 'Create', query)
+  },
+  doEdit(query) {
+    return micro_request.postRequest(basePath, 'Role', 'UpdateById', query)
+  },
+  doDelete(query) {
+    return micro_request.postRequest(basePath, 'Role', 'DeleteById', query)
+  },
 }

src/vab/components/VabColumnBar/index.vue

@@ -85,11 +85,6 @@
         )
       },
       handleActiveMenu() {
-        console.log(this.extra.first)
-        console.log(this.routes)
-        console.log(
-          this.routes.find((route) => route.name === this.extra.first)
-        )
         return this.routes.find((route) => route.name === this.extra.first)
       },
       handlePartialRoutes() {

src/vab/components/VabHeader/index.vue

@@ -81,7 +81,6 @@
         handler(val) {
           const matched = handleMatched(this.routes, val)
           this.activeMenu = matched[matched.length - 1].path
-          console.log(matched, this.activeMenu)
         },
       },
     },

src/vab/components/VabSideBar/index.vue

@@ -74,8 +74,6 @@
         const activeMenu = this.routes.find(
           (route) => route.name === this.extra.first
         )
-        console.log(activeMenu)
-
         return activeMenu ? activeMenu.children : []
       },
     },
@@ -83,7 +81,6 @@
       $route: {
         handler(route) {
           this.activeMenu = handleActivePath(route)
-          console.log(this.activeMenu)
         },
         immediate: true,
       },
@@ -92,7 +89,6 @@
           const matched = handleMatched(this.routes, val)
           this.extra.first = matched[0].name
           this.activeMenu = matched[matched.length - 1].path
-          console.log(this.extra.first, this.activeMenu)
         },
       },
     },

src/views/system/dept/components/DeptEdit.vue

@@ -5,30 +5,64 @@
     width="500px"
     @close="close">
     <el-form ref="form" label-width="80px" :model="form" :rules="rules">
-      <el-form-item label="父节点" prop="parentName">
-        <el-select
-          v-model="form.parentId"
-          :disabled="!form.parentId"
-          placeholder="请选择父节点">
-          <el-option
-            :label="form.parentName"
-            style="height: auto; padding: 0"
-            :value="form.parentId">
-            <el-tree
-              ref="tree"
-              :data="treeData"
-              default-expand-all
-              :props="defaultProps"
-              @node-click="handleNodeClick" />
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="名称" prop="name">
-        <el-input v-model="form.name" />
-      </el-form-item>
-      <el-form-item label="排序" prop="order">
-        <el-input v-model="form.order" />
-      </el-form-item>
+      <el-row>
+        <el-col v-if="form.parentId !== 0" :span="24">
+          <el-form-item label="上级部门" prop="parentId">
+            <treeselect
+              v-model="form.parentId"
+              :normalizer="normalizer"
+              :options="deptOptions"
+              placeholder="选择上级部门" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item label="部门名称" prop="deptName">
+            <el-input v-model="form.deptName" placeholder="请输入部门名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="显示排序" prop="sort">
+            <el-input-number
+              v-model="form.sort"
+              controls-position="right"
+              :min="0" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item label="负责人" prop="leader">
+            <el-input
+              v-model="form.leader"
+              maxlength="20"
+              placeholder="请输入负责人" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="联系电话" prop="phone">
+            <el-input
+              v-model="form.phone"
+              maxlength="11"
+              placeholder="请输入联系电话" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="邮箱" prop="email">
+            <el-input
+              v-model="form.email"
+              maxlength="50"
+              placeholder="请输入邮箱" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="部门状态" prop="status">
+            <el-radio-group v-model="form.status">
+              <el-radio label="10">正常</el-radio>
+              <el-radio label="20">停用</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
     <template #footer>
       <el-button @click="close">取 消</el-button>
@@ -38,44 +72,67 @@
 </template>
 
 <script>
-  import { doEdit, getList } from '@/api/dept'
+  import deptApi from '@/api/dept'
+  import Treeselect from '@riophae/vue-treeselect'
+  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
   export default {
     name: 'DeptEdit',
+    components: { Treeselect },
     data() {
       return {
-        treeData: [],
+        // 部门树选项
+        deptOptions: [],
         defaultProps: {
           children: 'children',
-          label: 'name',
+          label: 'deptName',
         },
         form: {
-          parentName: '',
-          parentId: '',
+          status: '10',
         },
         rules: {
-          parentName: [
-            { required: true, trigger: 'blur', message: '请选择父节点' },
+          parentId: [
+            { required: true, trigger: 'blur', message: '请选择上级部门' },
+          ],
+          deptName: [
+            { required: true, trigger: 'blur', message: '请输入部门名称' },
+          ],
+          sort: [{ required: true, trigger: 'blur', message: '请输入排序' }],
+          email: [
+            {
+              type: 'email',
+              message: "'请输入正确的邮箱地址",
+              trigger: ['blur', 'change'],
+            },
+          ],
+          phone: [
+            {
+              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+              message: '请输入正确的手机号码',
+              trigger: 'blur',
+            },
           ],
-          name: [{ required: true, trigger: 'blur', message: '请输入名称' }],
-          order: [{ required: true, trigger: 'blur', message: '请输入排序' }],
         },
         title: '',
         dialogFormVisible: false,
       }
     },
     created() {
-      this.fetchData()
+      // this.fetchData()
     },
     methods: {
-      async fetchData() {
-        const {
-          data: { list },
-        } = await getList()
-        this.treeData = list
+      async fetchData(row) {
+        let params = {}
+        if (row) {
+          params.excludeId = row.id
+        }
+        const { data: data } = await deptApi.getList(params)
+        if (data) {
+          this.deptOptions = this.translateDataToTree(data)
+        }
       },
       handleNodeClick(node) {
-        this.form.parentName = node.name
+        this.form.parentName = node.deptName
         this.form.parentId = node.id
       },
       showEdit(row) {
@@ -85,6 +142,7 @@
           this.title = '编辑'
           this.form = Object.assign({}, row)
         }
+        this.fetchData(row)
         this.dialogFormVisible = true
       },
       close() {
@@ -95,13 +153,29 @@
       save() {
         this.$refs['form'].validate(async (valid) => {
           if (valid) {
-            const { msg } = await doEdit(this.form)
-            this.$baseMessage(msg, 'success', 'vab-hey-message-success')
+            let res
+            if (this.form.id) {
+              res = await deptApi.doEdit(this.form)
+            } else {
+              res = await deptApi.doAdd(this.form)
+            }
+            this.$baseMessage(res.msg, 'success', 'vab-hey-message-success')
             this.$emit('fetch-data')
             this.close()
           }
         })
       },
+      /** 转换部门数据结构 */
+      normalizer(node) {
+        if (node.children && !node.children.length) {
+          delete node.children
+        }
+        return {
+          id: node.id,
+          label: node.deptName,
+          children: node.children,
+        }
+      },
     },
   }
 </script>

src/views/system/dept/index.vue

@@ -19,7 +19,7 @@
         <el-form :inline="true" :model="queryForm" @submit.native.prevent>
           <el-form-item>
             <el-input
-              v-model.trim="queryForm.name"
+              v-model.trim="queryForm.deptName"
               clearable
               placeholder="请输入名称" />
           </el-form-item>
@@ -42,20 +42,29 @@
       :tree-props="{ children: 'children' }"
       @selection-change="setSelectRows">
       <el-table-column show-overflow-tooltip type="selection" />
-      <el-table-column label="名称" prop="name" show-overflow-tooltip />
-      <el-table-column label="父节点Id" prop="parentId" show-overflow-tooltip />
-      <el-table-column label="排序" prop="order" show-overflow-tooltip />
+      <el-table-column label="部门名称" prop="deptName" show-overflow-tooltip />
       <el-table-column
-        label="创建时间"
-        prop="createTime"
+        align="center"
+        label="显示排序"
+        prop="sort"
         show-overflow-tooltip />
+      <el-table-column align="center" label="状态" prop="status">
+        <template #default="{ row }">
+          {{ row.status === '10' ? '正常' : '停用' }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="创建时间" prop="createdTime">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.createdTime) }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" width="85">
         <template #default="{ row }">
           <el-button type="text" @click="handleEdit(row)">编辑</el-button>
           <el-button
             :disabled="!row.parentId"
             type="text"
-            @click="handleDelete({ row })">
+            @click="handleDelete(row)">
             删除
           </el-button>
         </template>
@@ -66,20 +75,12 @@
           :src="require('@/assets/empty_images/data_empty.png')" />
       </template>
     </el-table>
-    <el-pagination
-      background
-      :current-page="queryForm.pageNo"
-      :layout="layout"
-      :page-size="queryForm.pageSize"
-      :total="total"
-      @current-change="handleCurrentChange"
-      @size-change="handleSizeChange" />
     <edit ref="edit" @fetch-data="fetchData" />
   </div>
 </template>
 
 <script>
-  import { doDelete, getList } from '@/api/dept'
+  import deptApi from '@/api/dept'
   import Edit from './components/DeptEdit'
 
   export default {
@@ -114,17 +115,18 @@
         }
       },
       handleDelete(row) {
+        console.log(row)
         if (row.id) {
           this.$baseConfirm('你确定要删除当前项吗', null, async () => {
-            const { msg } = await doDelete({ ids: row.id })
+            const { msg } = await deptApi.doDelete({ ids: [row.id] })
             this.$baseMessage(msg, 'success', 'vab-hey-message-success')
             await this.fetchData()
           })
         } else {
           if (this.selectRows.length > 0) {
-            const ids = this.selectRows.map((item) => item.id).join()
+            const ids = this.selectRows.map((item) => item.id)
             this.$baseConfirm('你确定要删除选中项吗', null, async () => {
-              const { msg } = await doDelete({ ids })
+              const { msg } = await deptApi.doDelete({ ids })
               this.$baseMessage(msg, 'success', 'vab-hey-message-success')
               await this.fetchData()
             })
@@ -147,11 +149,13 @@
       },
       async fetchData() {
         this.listLoading = true
-        const {
-          data: { list, total },
-        } = await getList(this.queryForm)
-        this.list = list
-        this.total = total
+        const { data: data } = await deptApi.getList(this.queryForm)
+        if (data) {
+          this.list = this.translateDataToTree(data)
+        }
+        if (this.list.length === 0) {
+          this.list = data
+        }
         this.listLoading = false
       },
     },

src/views/system/menu/components/MenuEdit.vue

@@ -332,7 +332,7 @@
     },
     methods: {
       handleIcon(item) {
-        this.form.meta.icon = item
+        this.form.icon = item
       },
       showEdit(row) {
         if (!row) {

src/views/system/role/components/RoleEdit.vue

@@ -5,24 +5,37 @@
     width="500px"
     @close="close">
     <el-form ref="form" label-width="80px" :model="form" :rules="rules">
-      <el-form-item label="角色码" prop="role">
-        <el-input v-model="form.role" />
+      <el-form-item label="角色名称" prop="roleName">
+        <el-input v-model="form.roleName" />
       </el-form-item>
-      <el-form-item label="菜单">
+      <el-form-item label="权限字符" prop="roleKey">
+        <el-input v-model="form.roleKey" />
+      </el-form-item>
+      <el-form-item label="角色顺序" prop="sort">
+        <el-input-number
+          v-model="form.sort"
+          controls-position="right"
+          :min="0" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="form.status">
+          <el-radio label="10">正常</el-radio>
+          <el-radio label="20">停用</el-radio>
+          <!--          <el-radio-->
+          <!--            v-for="dict in dict.type.sys_normal_disable"-->
+          <!--            :key="dict.value"-->
+          <!--            :label="dict.value"-->
+          <!--          >{{dict.label}}</el-radio>-->
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="菜单权限">
         <div class="vab-tree-border">
           <el-tree
             ref="tree"
             :data="list"
-            :default-checked-keys="[
-              '/',
-              '/vab',
-              '/other',
-              '/mall',
-              '/setting',
-              '/error',
-            ]"
+            :default-checked-keys="[]"
             :default-expanded-keys="[]"
-            node-key="path"
+            node-key="id"
             show-checkbox>
             <template #default="{ data }">
               <span>{{ data.meta.title }}</span>
@@ -30,15 +43,12 @@
           </el-tree>
         </div>
       </el-form-item>
-      <el-form-item label="按钮权限">
-        <el-checkbox-group v-model="form.btnRolesCheckedList">
-          <el-checkbox
-            v-for="item in btnRoles"
-            :key="item.value"
-            :label="item.value">
-            {{ item.lable }}
-          </el-checkbox>
-        </el-checkbox-group>
+
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          placeholder="请输入内容"
+          type="textarea" />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -49,18 +59,25 @@
 </template>
 
 <script>
-  import { doEdit } from '@/api/role'
-  import { getList } from '@/api/router'
+  import roleApi from '@/api/role'
+  import menuApi from '@/api/menu'
 
   export default {
     name: 'RoleEdit',
     data() {
       return {
         form: {
-          btnRolesCheckedList: [],
+          sort: 0,
+          status: '10',
         },
         rules: {
-          role: [{ required: true, trigger: 'blur', message: '请输入角色码' }],
+          roleName: [
+            { required: true, trigger: 'blur', message: '请输入角色名称' },
+          ],
+          roleKey: [
+            { required: true, trigger: 'blur', message: '请输入权限字符' },
+          ],
+          status: [{ required: true, trigger: 'blur', message: '请输入状态' }],
         },
         title: '',
         dialogFormVisible: false,
@@ -101,10 +118,8 @@
         this.dialogFormVisible = false
       },
       async fetchData() {
-        const {
-          data: { list },
-        } = await getList()
-        this.list = list
+        const { data: data } = await menuApi.getTree({ isAll: 'all' })
+        this.list = data
       },
       save() {
         // 具体业务请自行调整
@@ -112,11 +127,20 @@
           if (valid) {
             const tree = this.$refs.tree.getCheckedKeys()
             const treeObject = { 'treeArray:': tree }
-            const { msg } = await doEdit({
-              ...this.form,
-              ...treeObject,
-            })
-            this.$baseMessage(msg, 'success', 'vab-hey-message-success')
+            if (this.form.id) {
+              const { msg } = await roleApi.doEdit({
+                ...this.form,
+                ...treeObject,
+              })
+              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
+            } else {
+              const { msg } = await roleApi.doAdd({
+                ...this.form,
+                ...treeObject,
+              })
+              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
+            }
+
             this.$emit('fetch-data')
             this.close()
           }

src/views/system/role/index.vue

@@ -19,7 +19,7 @@
         <el-form :inline="true" :model="queryForm" @submit.native.prevent>
           <el-form-item>
             <el-input
-              v-model.trim="queryForm.role"
+              v-model.trim="queryForm.roleName"
               clearable
               placeholder="请输入角色" />
           </el-form-item>
@@ -51,20 +51,32 @@
         show-overflow-tooltip />
       <el-table-column
         align="center"
-        label="角色码"
-        prop="role"
+        label="角色名称"
+        prop="roleName"
         show-overflow-tooltip />
-      <el-table-column align="center" label="按钮权限" show-overflow-tooltip>
+      <el-table-column
+        align="center"
+        label="权限字符"
+        prop="roleKey"
+        show-overflow-tooltip />
+      <el-table-column
+        align="center"
+        label="显示顺序"
+        prop="sort"
+        show-overflow-tooltip />
+      <el-table-column align="center" label="状态" prop="status">
         <template #default="{ row }">
-          <el-tag v-for="(item, index) in row.btnRolesCheckedList" :key="index">
-            {{
-              {
-                'read:system': '读',
-                'write:system': '写',
-                'delete:system': '删',
-              }[item]
-            }}
-          </el-tag>
+          {{ row.status === '10' ? '正常' : '停用' }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="备注"
+        prop="remark"
+        show-overflow-tooltip />
+      <el-table-column align="center" label="创建时间" prop="createdTime">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.createdTime) }}</span>
         </template>
       </el-table-column>
       <el-table-column
@@ -96,7 +108,7 @@
 </template>
 
 <script>
-  import { doDelete, getList } from '@/api/role'
+  import roleApi from '@/api/role'
   import Edit from './components/RoleEdit'
 
   export default {
@@ -112,7 +124,7 @@
         queryForm: {
           pageNo: 1,
           pageSize: 10,
-          role: '',
+          roleName: '',
         },
       }
     },
@@ -133,15 +145,15 @@
       handleDelete(row) {
         if (row.id) {
           this.$baseConfirm('你确定要删除当前项吗', null, async () => {
-            const { msg } = await doDelete({ ids: row.id })
+            const { msg } = await roleApi.doDelete({ ids: [row.id] })
             this.$baseMessage(msg, 'success', 'vab-hey-message-success')
             await this.fetchData()
           })
         } else {
           if (this.selectRows.length > 0) {
-            const ids = this.selectRows.map((item) => item.id).join()
+            const ids = this.selectRows.map((item) => item.id)
             this.$baseConfirm('你确定要删除选中项吗', null, async () => {
-              const { msg } = await doDelete({ ids })
+              const { msg } = await roleApi.doDelete({ ids })
               this.$baseMessage(msg, 'success', 'vab-hey-message-success')
               await this.fetchData()
             })
@@ -166,7 +178,7 @@
         this.listLoading = true
         const {
           data: { list, total },
-        } = await getList(this.queryForm)
+        } = await roleApi.getList(this.queryForm)
         this.list = list
         this.total = total
         this.listLoading = false