!29 新功能：前端封装快速搭建CRUD

前端封装快速搭建CRUD

dvadmin-backend/application/settings.py

@@ -285,7 +285,7 @@ REST_FRAMEWORK = {
     ),
 
     'DEFAULT_SCHEMA_CLASS': 'rest_framework.schemas.AutoSchema',
-    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
+    'DEFAULT_PAGINATION_CLASS': 'vadmin.op_drf.pagination.Pagination',
     'DEFAULT_FILTER_BACKENDS': ('django_filters.rest_framework.DjangoFilterBackend',),
     'EXCEPTION_HANDLER': 'apps.vadmin.utils.exceptions.op_exception_handler',
 }

dvadmin-backend/apps/vadmin/op_drf/generics.py

@@ -45,7 +45,7 @@ class GenericAPIView(CustomAPIView):
     filter_backends = api_settings.DEFAULT_FILTER_BACKENDS
 
     # The style to use for queryset pagination.
-    pagination_class = Pagination
+    pagination_class = api_settings.DEFAULT_PAGINATION_CLASS
 
     def get_queryset(self):
         """

dvadmin-backend/apps/vadmin/op_drf/viewsets.py

@@ -29,7 +29,7 @@ def get_object_or_404(queryset, *filter_args, **filter_kwargs):
 
 class GenericViewSet(ViewSetMixin, GenericAPIView):
     extra_filter_backends = []
-    pagination_class = Pagination
+    pagination_class = api_settings.DEFAULT_PAGINATION_CLASS
     filter_backends = [DjangoFilterBackend, OrderingFilter, SearchFilter, AdvancedSearchFilter]
     view_logger_classes = (CustomerModelViewLogger,)
 

dvadmin-backend/apps/vadmin/permission/serializers.py

@@ -235,7 +235,7 @@ class UserProfileSerializer(CustomModelSerializer):
     class Meta:
         model = UserProfile
         depth = 1
-        exclude = ('password', 'secret', 'user_permissions', 'groups', 'is_superuser', 'date_joined')
+        exclude = ('password', 'secret', 'user_permissions', 'groups', 'is_superuser', 'date_joined', 'creator')
 
 
 class ExportUserProfileSerializer(CustomModelSerializer):

dvadmin-ui/src/components/DeptTree/index.vue

@@ -0,0 +1,55 @@
+<!-- 部门选择器 -->
+<template>
+  <div>
+    <treeselect v-model="dept_value" :options="deptOptions" :multiple="multiple" :show-count="true"
+                :placeholder="placeholder" :disable-branch-nodes="disable_branch_nodes"/>
+  </div>
+</template>
+
+<script>
+  import Treeselect from '@riophae/vue-treeselect'
+  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+  import {treeselect} from '@/api/vadmin/permission/dept'
+
+  export default {
+    name: "DeptTree",
+    props: {
+      /* 选择器的内容 */
+      value: {type: Number | Array,},
+      /* 用于显示选项 */
+      placeholder: {type: String, default: "请选择归属部门",},
+      /* 是否多选 */
+      multiple: {type: Boolean, default: false,},
+      /* 是否只能选末级 */
+      disable_branch_nodes: {type: Boolean, default: false,},
+    },
+    components: {Treeselect},
+    data() {
+      return {
+        deptOptions: [],
+        dept_value: this.value
+      }
+    },
+    watch: {
+      dept_value(newValue) {
+        this.$emit('update:value', newValue)
+      }
+    },
+    created() {
+      this.getTreeselect()
+    },
+    methods: {
+      /** 查询部门下拉树结构 */
+      getTreeselect() {
+        treeselect().then(response => {
+          this.deptOptions = this.handleTree(response.data, 'id')
+        })
+      },
+    }
+
+  }
+</script>
+
+<style scoped>
+
+</style>

dvadmin-ui/src/components/UsersTree/index.vue

@@ -0,0 +1,56 @@
+<!-- 用户选择器 -->
+<template>
+  <div>
+    <treeselect v-model="users_value" :options="usersOptions" :multiple="multiple" :show-count="true"
+                :placeholder="placeholder" :disable-branch-nodes="disable_branch_nodes"/>
+  </div>
+</template>
+
+<script>
+  import Treeselect from '@riophae/vue-treeselect'
+  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+  import {listUser} from '@/api/vadmin/permission/user'
+
+  export default {
+    name: "DeptTree",
+    props: {
+      /* 选择器的内容 */
+      value: {type: Number | Array,},
+      /* 用于显示选项 */
+      placeholder: {type: String, default: "请选择用户",},
+      /* 是否多选 */
+      multiple: {type: Boolean, default: false,},
+      /* 是否只能选末级 */
+      disable_branch_nodes: {type: Boolean, default: false,},
+    },
+    components: {Treeselect},
+    data() {
+      return {
+        usersOptions: [],
+        users_value: this.value
+      }
+    },
+    watch: {
+      dept_value(newValue) {
+        this.$emit('update:value', newValue)
+      }
+    },
+    created() {
+      this.getTreeselect()
+    },
+    methods: {
+      /** 查询所有用户信息 **/
+      getTreeselect() {
+        listUser({pageNum: "all", _fields: "id,name"}).then(response => {
+          response.data.map(val => { val["label"] = val['name'] })
+          this.usersOptions = this.handleTree(response.data, 'id')
+        })
+      },
+    }
+
+  }
+</script>
+
+<style scoped>
+
+</style>

dvadmin-ui/src/main.js

@@ -30,6 +30,8 @@ import Pagination from "@/components/Pagination";
 // 自定义表格工具扩展
 import RightToolbar from "@/components/RightToolbar"
 import SmallDialog from '@/components/SmallDialog';
+import DeptTree from '@/components/DeptTree';
+import UsersTree from '@/components/UsersTree';
 import CommonIcon from '@/components/CommonIcon';
 import CommonStaticTable from '@/components/CommonStaticTable';
 import {getCrontabData, getIntervalData} from "./utils/validate"; // 通用图标组件
@@ -67,6 +69,8 @@ Vue.prototype.msgInfo = function (msg) {
 }
 // 自定义组件
 Vue.component('small-dialog', SmallDialog);
+Vue.component('dept-tree', DeptTree);
+Vue.component('users-tree', UsersTree);
 // 全局组件挂载
 Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)