功能变化:

部门信息进行优化

backend/dvadmin/system/views/dept.py

@@ -6,6 +6,7 @@
 @Created on: 2021/6/3 003 0:30
 @Remark: 角色管理
 """
+from rest_framework import serializers
 
 from dvadmin.system.models import Dept
 from dvadmin.utils.json_response import SuccessResponse
@@ -17,7 +18,7 @@ class DeptSerializer(CustomModelSerializer):
     """
     部门-序列化器
     """
-
+    parent_name = serializers.CharField(read_only=True,source='parent.name')
     class Meta:
         model = Dept
         fields = "__all__"
@@ -55,11 +56,11 @@ class DeptViewSet(CustomModelViewSet):
     update_serializer_class = DeptCreateUpdateSerializer
     # extra_filter_backends = []
 
-    def list(self, request, *args, **kwargs):
+    # def list(self, request, *args, **kwargs):
-        queryset = self.filter_queryset(self.get_queryset())
+    #     queryset = self.filter_queryset(self.get_queryset())
-        page = self.paginate_queryset(queryset)
+    #     page = self.paginate_queryset(queryset)
-        if page is not None:
+    #     if page is not None:
-            serializer = self.get_serializer(page, many=True, request=request)
+    #         serializer = self.get_serializer(page, many=True, request=request)
-            return self.get_paginated_response(serializer.data)
+    #         return self.get_paginated_response(serializer.data)
-        serializer = self.get_serializer(queryset, many=True, request=request)
+    #     serializer = self.get_serializer(queryset, many=True, request=request)
-        return SuccessResponse(data=serializer.data, msg="获取成功")
+    #     return SuccessResponse(data=serializer.data, msg="获取成功")

web/src/install.js

@@ -254,7 +254,7 @@ Vue.prototype.commonEndColumns = function (param = {}) {
       search: {
         disabled: true
       },
-      type: 'cascader',
+      type: 'table-selector',
       dict: {
         cache: true,
         url: '/api/system/dept/?limit=999&status=1',
@@ -262,9 +262,14 @@ Vue.prototype.commonEndColumns = function (param = {}) {
         value: 'id', // 数据字典中value字段的属性名
         label: 'name', // 数据字典中label字段的属性名
         children: 'children', // 数据字典中children字段的属性名
-        getData: (url, dict) => { // 配置此参数会覆盖全局的getRemoteDictFunc
+        getData: (url, dict, {
-          return request({ url: url }).then(ret => {
+          _,
-            return [{ id: null, name: '根节点', children: XEUtils.toArrayTree(ret.data.data, { parentKey: 'parent', strict: true }) }]
+          component
+        }) => {
+          return request({
+            url: url,
+          }).then(ret => {
+            return ret.data.data
           })
         }
       },
@@ -273,13 +278,27 @@ Vue.prototype.commonEndColumns = function (param = {}) {
         component: {
           props: {
             elProps: {
-              clearable: true,
+              treeConfig: {
-              showAllLevels: false, // 仅显示最后一级
+                transform: true,
-              props: {
+                rowField: 'id',
-                checkStrictly: true, // 可以不需要选到最后一级
+                parentField: 'parent',
-                emitPath: false,
+                expandAll: true
-                clearable: true
+              },
-              }
+              columns: [
+                {
+                  field: 'name',
+                  title: '部门名称',
+                  treeNode: true
+                },
+                {
+                  field: 'status',
+                  title: '状态'
+                },
+                {
+                  field: 'parent_name',
+                  title: '父级部门'
+                }
+              ]
             }
           }
         },
@@ -289,21 +308,6 @@ Vue.prototype.commonEndColumns = function (param = {}) {
             )
           }
         }
-      },
-      component: {
-        dict: {
-          cache: true,
-          url: deptPrefix + '?limit=999&status=1',
-          isTree: true,
-          value: 'id', // 数据字典中value字段的属性名
-          label: 'name', // 数据字典中label字段的属性名
-          children: 'children', // 数据字典中children字段的属性名
-          getData: (url, dict) => { // 配置此参数会覆盖全局的getRemoteDictFunc
-            return request({ url: url }).then(ret => {
-              return [{ id: null, name: '根节点', children: XEUtils.toArrayTree(ret.data.data, { parentKey: 'parent', strict: true }) }]
-            })
-          }
-        }
       }
     },
     {

web/src/views/system/user/crud.js

@@ -2,6 +2,8 @@ import { request } from '@/api/service'
 import { BUTTON_STATUS_BOOL } from '@/config/button'
 import { urlPrefix as deptPrefix } from '../dept/api'
 import util from '@/libs/util'
+import XEUtils from 'xe-utils'
+
 const uploadUrl = util.baseURL() + 'api/system/img/'
 export const crudOptions = (vm) => {
   return {
@@ -85,7 +87,10 @@ export const crudOptions = (vm) => {
         type: 'input',
         form: {
           rules: [ // 表单校验规则
-            { required: true, message: '账号必填项' }
+            {
+              required: true,
+              message: '账号必填项'
+            }
           ],
           component: {
             placeholder: '请输入账号'
@@ -95,7 +100,7 @@ export const crudOptions = (vm) => {
           },
           helper: {
             render (h) {
-              return (< el-alert title="密码默认为:admin123456" type="warning" />
+              return (< el-alert title="密码默认为:admin123456" type="warning"/>
               )
             }
           }
@@ -111,7 +116,10 @@ export const crudOptions = (vm) => {
         type: 'input',
         form: {
           rules: [ // 表单校验规则
-            { required: true, message: '姓名必填项' }
+            {
+              required: true,
+              message: '姓名必填项'
+            }
           ],
           component: {
             span: 12,
@@ -135,18 +143,29 @@ export const crudOptions = (vm) => {
           url: deptPrefix,
           value: 'id', // 数据字典中value字段的属性名
           label: 'name', // 数据字典中label字段的属性名
-          getData: (url, dict, { _, component }) => {
+          isTree: true,
-            return request({ url: url, params: { page: 1, limit: 10, status: 1 } }).then(ret => {
+          getData: (url, dict, {
-              component._elProps.page = ret.data.page
+            _,
-              component._elProps.limit = ret.data.limit
+            component
-              component._elProps.total = ret.data.total
+          }) => {
+            return request({
+              url: url,
+              params: {
+                page: 1,
+                limit: 999,
+                status: 1
+              }
+            }).then(ret => {
               return ret.data.data
             })
           }
         },
         form: {
           rules: [ // 表单校验规则
-            { required: true, message: '必填项' }
+            {
+              required: true,
+              message: '必填项'
+            }
           ],
           itemProps: {
             class: { yxtInput: true }
@@ -155,14 +174,20 @@ export const crudOptions = (vm) => {
             span: 12,
             props: { multiple: false },
             elProps: {
-              pagination: true,
+              treeConfig: {
+                transform: true,
+                rowField: 'id',
+                parentField: 'parent',
+                expandAll: true
+              },
               columns: [
                 {
                   field: 'name',
-                  title: '部门名称'
+                  title: '部门名称',
+                  treeNode: true
                 },
                 {
-                  field: 'status_label',
+                  field: 'status',
                   title: '状态'
                 },
                 {
@@ -173,7 +198,72 @@ export const crudOptions = (vm) => {
             }
           }
         }
-      }, {
+      },
+      {
+        title: '角色',
+        key: 'role',
+        width: 160,
+        search: {
+          disabled: true
+        },
+        type: 'table-selector',
+        dict: {
+          cache: false,
+          url: '/api/system/role/',
+          value: 'id', // 数据字典中value字段的属性名
+          label: 'name', // 数据字典中label字段的属性名
+          getData: (url, dict, {
+            form,
+            component
+          }) => {
+            return request({
+              url: url,
+              params: {
+                page: 1,
+                limit: 10
+              }
+            }).then(ret => {
+              component._elProps.page = ret.data.page
+              component._elProps.limit = ret.data.limit
+              component._elProps.total = ret.data.total
+              return ret.data.data
+            })
+          }
+        },
+        form: {
+          rules: [ // 表单校验规则
+            {
+              required: true,
+              message: '必填项'
+            }
+          ],
+          itemProps: {
+            class: { yxtInput: true }
+          },
+          component: {
+            span: 12,
+            props: { multiple: true },
+            elProps: {
+              pagination: true,
+              columns: [
+                {
+                  field: 'name',
+                  title: '角色名称'
+                },
+                {
+                  field: 'key',
+                  title: '权限标识'
+                },
+                {
+                  field: 'status',
+                  title: '状态'
+                }
+              ]
+            }
+          }
+        }
+      },
+      {
         title: '手机号码',
         key: 'mobile',
         width: 120,
@@ -183,12 +273,16 @@ export const crudOptions = (vm) => {
         type: 'input',
         form: {
           rules: [
-            { max: 20, message: '请输入正确的手机号码', trigger: 'blur' },
+            {
-            { pattern: /^1[3|4|5|7|8]\d{9}$/, message: '请输入正确的手机号码' }
+              max: 20,
+              message: '请输入正确的手机号码',
+              trigger: 'blur'
+            },
+            {
+              pattern: /^1[3|4|5|7|8]\d{9}$/,
+              message: '请输入正确的手机号码'
+            }
           ],
-          itemProps: {
-            class: { yxtInput: true }
-          },
           component: {
             placeholder: '请输入手机号码'
           }
@@ -199,7 +293,11 @@ export const crudOptions = (vm) => {
         width: 120,
         form: {
           rules: [
-            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
+            {
+              type: 'email',
+              message: '请输入正确的邮箱地址',
+              trigger: ['blur', 'change']
+            }
           ],
           component: {
             placeholder: '请输入邮箱'
@@ -211,12 +309,21 @@ export const crudOptions = (vm) => {
         key: 'gender',
         type: 'select',
         dict: {
-          data: [{ label: '男', value: 1 }, { label: '女', value: 0 }]
+          data: [{
+            label: '男',
+            value: 1
+          }, {
+            label: '女',
+            value: 0
+          }]
         },
         form: {
           value: 1,
           rules: [
-            { required: true, message: '性别必填项' }
+            {
+              required: true,
+              message: '性别必填项'
+            }
           ],
           component: {
             span: 12
@@ -238,7 +345,13 @@ export const crudOptions = (vm) => {
           disabled: false
         },
         dict: {
-          data: [{ label: '前台用户', value: 1 }, { label: '后台用户', value: 0 }]
+          data: [{
+            label: '前台用户',
+            value: 1
+          }, {
+            label: '后台用户',
+            value: 0
+          }]
         },
         form: {
           disabled: true
@@ -283,7 +396,10 @@ export const crudOptions = (vm) => {
                   if (ret.data == null || ret.data === '') {
                     throw new Error('上传失败')
                   }
-                  return { url: ret.data.data.url, key: option.data.key }
+                  return {
+                    url: ret.data.data.url,
+                    key: option.data.key
+                  }
                 }
               },
               elProps: { // 与el-uploader 配置一致
@@ -309,7 +425,6 @@ export const crudOptions = (vm) => {
         component: {
           props: {
             buildUrl (value, item) {
-              console.log(11, value)
               if (value && value.indexOf('http') !== 0) {
                 return '/api/upload/form/download?key=' + value
               }
@@ -317,58 +432,6 @@ export const crudOptions = (vm) => {
             }
           }
         }
-      },
-      {
-        title: '角色',
-        key: 'role',
-        width: 160,
-        search: {
-          disabled: true
-        },
-        type: 'table-selector',
-        dict: {
-          cache: false,
-          url: '/api/system/role/',
-          value: 'id', // 数据字典中value字段的属性名
-          label: 'name', // 数据字典中label字段的属性名
-          getData: (url, dict, { form, component }) => {
-            return request({ url: url, params: { page: 1, limit: 10 } }).then(ret => {
-              component._elProps.page = ret.data.page
-              component._elProps.limit = ret.data.limit
-              component._elProps.total = ret.data.total
-              return ret.data.data
-            })
-          }
-        },
-        form: {
-          rules: [ // 表单校验规则
-            { required: true, message: '必填项' }
-          ],
-          itemProps: {
-            class: { yxtInput: true }
-          },
-          component: {
-            span: 12,
-            props: { multiple: true },
-            elProps: {
-              pagination: true,
-              columns: [
-                {
-                  field: 'name',
-                  title: '角色名称'
-                },
-                {
-                  field: 'key',
-                  title: '权限标识'
-                },
-                {
-                  field: 'status_label',
-                  title: '状态'
-                }
-              ]
-            }
-          }
-        }
       }
     ].concat(vm.commonEndColumns({ update_datetime: { showTable: false } }))
   }