!61 地区管理

Merge pull request !61 from 木子-李/20240705_area

backend/dvadmin/system/views/area.py

@@ -1,4 +1,5 @@
 # -*- coding: utf-8 -*-
+import pypinyin
 from django.db.models import Q
 from rest_framework import serializers
 
@@ -15,6 +16,11 @@ class AreaSerializer(CustomModelSerializer):
     """
     pcode_count = serializers.SerializerMethodField(read_only=True)
     hasChild = serializers.SerializerMethodField()
+    pcode_info = serializers.SerializerMethodField()
+
+    def get_pcode_info(self, instance):
+        pcode = Area.objects.filter(code=instance.pcode_id).values("name", "code")
+        return pcode
 
     def get_pcode_count(self, instance: Area):
         return Area.objects.filter(pcode=instance).count()
@@ -36,6 +42,18 @@ class AreaCreateUpdateSerializer(CustomModelSerializer):
     地区管理 创建/更新时的列化器
     """
 
+    def to_internal_value(self, data):
+        pinyin = ''.join([''.join(i) for i in pypinyin.pinyin(data["name"], style=pypinyin.NORMAL)])
+        data["level"] = 1
+        data["pinyin"] = pinyin
+        data["initials"] = pinyin[0].upper() if pinyin else "#"
+        pcode = data["pcode"] if 'pcode' in data else None
+        if pcode:
+            pcode = Area.objects.get(pk=pcode)
+            data["pcode"] = pcode.code
+            data["level"] = pcode.level + 1
+        return super().to_internal_value(data)
+
     class Meta:
         model = Area
         fields = '__all__'
@@ -52,20 +70,28 @@ class AreaViewSet(CustomModelViewSet, FieldPermissionMixin):
     """
     queryset = Area.objects.all()
     serializer_class = AreaSerializer
+    create_serializer_class = AreaCreateUpdateSerializer
+    update_serializer_class = AreaCreateUpdateSerializer
     extra_filter_class = []
 
-    def get_queryset(self):
+    def list(self, request, *args, **kwargs):
         self.request.query_params._mutable = True
         params = self.request.query_params
+        known_params = {'page', 'limit', 'pcode'}
+        # 使用集合操作检查是否有未知参数
+        other_params_exist = any(param not in known_params for param in params)
+        if other_params_exist:
+            queryset = self.queryset.filter(enable=True)
+        else:
             pcode = params.get('pcode', None)
-        page = params.get('page', None)
-        limit = params.get('limit', None)
-        if page:
-            del params['page']
-        if limit:
-            del params['limit']
+            params['limit'] = 999
             if params and pcode:
                 queryset = self.queryset.filter(enable=True, pcode=pcode)
             else:
-            queryset = self.queryset.filter(enable=True)
-        return queryset
+                queryset = self.queryset.filter(enable=True, level=1)
+        page = self.paginate_queryset(queryset)
+        if page is not None:
+            serializer = self.get_serializer(page, many=True, request=request)
+            return self.get_paginated_response(serializer.data)
+        serializer = self.get_serializer(queryset, many=True, request=request)
+        return SuccessResponse(data=serializer.data, msg="获取成功")

web/src/components/tableSelector/index.vue

@@ -1,12 +1,18 @@
 <template>
-  <el-select popper-class="popperClass" class="tableSelector" :multiple="props.tableConfig.isMultiple"
-             @remove-tag="removeTag" v-model="data" placeholder="请选择" @visible-change="visibleChange">
+	<el-select
+		popper-class="popperClass"
+		class="tableSelector"
+		multiple
+		@remove-tag="removeTag"
+		v-model="data"
+		placeholder="请选择"
+		@visible-change="visibleChange"
+	>
 		<template #empty>
 			<div class="option">
-        <el-input style="margin-bottom: 10px" v-model="search" clearable placeholder="请输入关键词" @change="getDict"
-                  @clear="getDict">
+				<el-input style="margin-bottom: 10px" v-model="search" clearable placeholder="请输入关键词" @change="getDict" @clear="getDict">
 					<template #append>
-            <el-button type="primary" icon="Search"/>
+						<el-button type="primary" icon="Search" />
 					</template>
 				</el-input>
 				<el-table
@@ -15,6 +21,9 @@
 					size="mini"
 					border
 					row-key="id"
+					:lazy="props.tableConfig.lazy"
+					:load="props.tableConfig.load"
+					:tree-props="props.tableConfig.treeProps"
 					style="width: 400px"
 					max-height="200"
 					height="200"
@@ -22,12 +31,19 @@
 					@selection-change="handleSelectionChange"
 					@current-change="handleCurrentChange"
 				>
-          <el-table-column v-if="props.tableConfig.isMultiple" fixed type="selection" width="55"/>
-          <el-table-column fixed type="index" label="#" width="50"/>
-          <el-table-column :prop="item.prop" :label="item.label" :width="item.width"
-                           v-for="(item,index) in props.tableConfig.columns" :key="index"/>
+					<el-table-column v-if="props.tableConfig.isMultiple" fixed type="selection" width="55" />
+					<el-table-column fixed type="index" label="#" width="50" />
+					<el-table-column
+						:prop="item.prop"
+						:label="item.label"
+						:width="item.width"
+						v-for="(item, index) in props.tableConfig.columns"
+						:key="index"
+					/>
 				</el-table>
-        <el-pagination style="margin-top: 10px" background
+				<el-pagination
+					style="margin-top: 10px"
+					background
 					v-model:current-page="pageConfig.page"
 					v-model:page-size="pageConfig.limit"
 					layout="prev, pager, next"
@@ -40,10 +56,10 @@
 </template>
 
 <script setup lang="ts">
-import {defineProps, onMounted, reactive, ref, toRaw, watch} from 'vue'
-import {dict} from '@fast-crud/fast-crud'
-import XEUtils from 'xe-utils'
-import {request} from '/@/utils/service'
+import { defineProps, reactive, ref, watch } from 'vue';
+import XEUtils from 'xe-utils';
+import { request } from '/@/utils/service';
+
 const props = defineProps({
 	modelValue: {},
 	tableConfig: {
@@ -51,98 +67,88 @@ const props = defineProps({
 		label: null, //显示值
 		value: null, //数据值
 		isTree: false,
-    data: [],//默认数据
+		lazy: true,
+		load: () => {},
+		data: [], //默认数据
 		isMultiple: false, //是否多选
+		treeProps: { children: 'children', hasChildren: 'hasChildren' },
 		columns: [], //每一项对应的列表项
 	},
-  displayLabel: {}
-} as any)
-const emit = defineEmits(['update:modelValue'])
+	displayLabel: {},
+} as any);
+const emit = defineEmits(['update:modelValue']);
 // tableRef
-const tableRef = ref()
+const tableRef = ref();
 // template上使用data
-const data = ref()
+const data = ref();
 // 多选值
-const multipleSelection = ref()
-watch(multipleSelection, // 监听multipleSelection的变化，
-    (value) => {
-      const {tableConfig} = props
-      //是否多选
-      if (!tableConfig.isMultiple) {
-        data.value = value ? value[tableConfig.label] : null
-      } else {
-
-        const result = value ? value.map((item: any) => {
-          return item[tableConfig.label]
-        }) : null
-        data.value = result
-      }
-    }, // 当multipleSelection值触发后，同步修改data.value的值
-    {immediate: true} // 立即触发一次，给data赋值初始值
-)
-
-
+const multipleSelection = ref();
 // 搜索值
-const search = ref(undefined)
+const search = ref(undefined);
 //表格数据
-const tableData = ref()
+const tableData = ref();
 // 分页的配置
 const pageConfig = reactive({
 	page: 1,
 	limit: 10,
-  total: 0
-})
+	total: 0,
+});
 
 /**
  * 表格多选
  * @param val:Array
  */
 const handleSelectionChange = (val: any) => {
-  multipleSelection.value = val
-  const {tableConfig} = props
+	multipleSelection.value = val;
+	const { tableConfig } = props;
 	const result = val.map((item: any) => {
-    return item[tableConfig.value]
-  })
-  emit('update:modelValue', result)
-}
+		return item[tableConfig.value];
+	});
+	data.value = val.map((item: any) => {
+		return item[tableConfig.label];
+	});
 
+	emit('update:modelValue', result);
+};
 /**
  * 表格单选
  * @param val:Object
  */
 const handleCurrentChange = (val: any) => {
-  multipleSelection.value = val
-  const {tableConfig} = props
-  emit('update:modelValue', val[tableConfig.value])
-}
+	const { tableConfig } = props;
+	if (!tableConfig.isMultiple && val) {
+		data.value = [val[tableConfig.label]];
+		emit('update:modelValue', val[tableConfig.value]);
+	}
+};
 
 /**
  * 获取字典值
  */
 const getDict = async () => {
-  const url = props.tableConfig.url
+	const url = props.tableConfig.url;
 	const params = {
 		page: pageConfig.page,
 		limit: pageConfig.limit,
-    search: search.value
-  }
-  const {data, page, limit, total} = await request({
-    url:url,
-    params:params
-  })
-  pageConfig.page = page
-  pageConfig.limit = limit
-  pageConfig.total = total
+		search: search.value,
+	};
+	const { data, page, limit, total } = await request({
+		url: url,
+		params: params,
+	});
+	pageConfig.page = page;
+	pageConfig.limit = limit;
+	pageConfig.total = total;
 	if (props.tableConfig.data === undefined || props.tableConfig.data.length === 0) {
 		if (props.tableConfig.isTree) {
-      tableData.value = XEUtils.toArrayTree(data, {parentKey: 'parent', key: 'id', children: 'children'})
+			tableData.value = XEUtils.toArrayTree(data, { parentKey: 'parent', key: 'id', children: 'children' });
 		} else {
-      tableData.value = data
+			tableData.value = data;
 		}
 	} else {
-    tableData.value = props.tableConfig.data
+		tableData.value = props.tableConfig.data;
 	}
-}
+};
 
 /**
  * 下拉框展开/关闭
@@ -150,31 +156,33 @@ const getDict = async () => {
  */
 const visibleChange = (bool: any) => {
 	if (bool) {
-    getDict()
+		getDict();
 	}
-}
+};
 
 /**
  * 分页
  * @param page
  */
 const handlePageChange = (page: any) => {
-  pageConfig.page = page
-  getDict()
-}
+	pageConfig.page = page;
+	getDict();
+};
 
 // 监听displayLabel的变化，更新数据
-watch(() => {
-  return props.displayLabel
-}, (value) => {
-  const {tableConfig} = props
-  const result = value ? value.map((item: any) => {
-    return item[tableConfig.label]
-  }) : null
-  data.value = result
-}, {immediate: true})
-
-
+watch(
+	() => {
+		return props.displayLabel;
+	},
+	(value) => {
+		const { tableConfig } = props;
+		const result = value
+			? value.map((item: any) => { return item[tableConfig.label];})
+			: null;
+		data.value = result;
+	},
+	{ immediate: true }
+);
 </script>
 
 <style scoped>
@@ -184,7 +192,6 @@ watch(() => {
 	padding: 5px;
 	background-color: #fff;
 }
-
 </style>
 <style lang="scss">
 .popperClass {
@@ -196,7 +203,8 @@ watch(() => {
 }
 
 .tableSelector {
-  .el-icon, .el-tag__close {
+	.el-icon,
+	.el-tag__close {
 		display: none;
 	}
 }

web/src/utils/columnPermission.ts

@@ -28,7 +28,6 @@ export const handleColumnPermission = async (func: Function, crudOptions: any,ex
 			if (excludeColumns.includes(item.field_name)) {
 				continue
 			} else if(item.field_name === col) {
-				columns[col].column.show = item['is_query']
 				// 如果列表不可见，则禁止在列设置中选择
                 // 只有列表不可见，才修改列配置，这样才不影响默认的配置
 				if(!item['is_query']){

web/src/views/system/areas/crud.tsx

@@ -1,30 +1,23 @@
 import * as api from './api';
-import {
-    dict,
-    UserPageQuery,
-    AddReq,
-    DelReq,
-    EditReq,
-    compute,
-    CreateCrudOptionsProps,
-    CreateCrudOptionsRet
-} from '@fast-crud/fast-crud';
-import {dictionary} from '/@/utils/dictionary';
-import {successMessage} from '/@/utils/message';
-import {auth} from "/@/utils/authFunction";
+import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
+import { dictionary } from '/@/utils/dictionary';
+import { successMessage } from '/@/utils/message';
+import { auth } from '/@/utils/authFunction';
+import tableSelector from '/@/components/tableSelector/index.vue';
+import { shallowRef } from 'vue';
 
-export const createCrudOptions = function ({crudExpose}: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
 	const pageRequest = async (query: UserPageQuery) => {
 		return await api.GetList(query);
 	};
-    const editRequest = async ({form, row}: EditReq) => {
+	const editRequest = async ({ form, row }: EditReq) => {
 		form.id = row.id;
 		return await api.UpdateObj(form);
 	};
-    const delRequest = async ({row}: DelReq) => {
+	const delRequest = async ({ row }: DelReq) => {
 		return await api.DelObj(row.id);
 	};
-    const addRequest = async ({form}: AddReq) => {
+	const addRequest = async ({ form }: AddReq) => {
 		return await api.AddObj(form);
 	};
 
@@ -34,7 +27,7 @@ export const createCrudOptions = function ({crudExpose}: CreateCrudOptionsProps)
 	 * @returns {Promise<unknown>}
 	 */
 	const loadContentMethod = (tree: any, treeNode: any, resolve: Function) => {
-        pageRequest({pcode: tree.code}).then((res: APIResponseData) => {
+		pageRequest({ pcode: tree.code }).then((res: APIResponseData) => {
 			resolve(res.data);
 		});
 	};
@@ -51,8 +44,8 @@ export const createCrudOptions = function ({crudExpose}: CreateCrudOptionsProps)
 				buttons: {
 					add: {
 						show: auth('area:Create'),
-                    }
-                }
+					},
+				},
 			},
 			rowHandle: {
 				//固定右侧
@@ -65,12 +58,12 @@ export const createCrudOptions = function ({crudExpose}: CreateCrudOptionsProps)
 					edit: {
 						iconRight: 'Edit',
 						type: 'text',
-						show: auth('area:Update')
+						show: auth('area:Update'),
 					},
 					remove: {
 						iconRight: 'Delete',
 						type: 'text',
-						show: auth('area:Delete')
+						show: auth('area:Delete'),
 					},
 				},
 			},
@@ -81,12 +74,12 @@ export const createCrudOptions = function ({crudExpose}: CreateCrudOptionsProps)
 				rowKey: 'id',
 				lazy: true,
 				load: loadContentMethod,
-                treeProps: {children: 'children', hasChildren: 'hasChild'},
+				treeProps: { children: 'children', hasChildren: 'hasChild' },
 			},
 			columns: {
 				_index: {
 					title: '序号',
-                    form: {show: false},
+					form: { show: false },
 					column: {
 						type: 'index',
 						align: 'center',
@@ -94,30 +87,6 @@ export const createCrudOptions = function ({crudExpose}: CreateCrudOptionsProps)
 						columnSetDisabled: true, //禁止在列设置中选择
 					},
 				},
-                // pcode: {
-                // 	title: '父级地区',
-                // 	show: false,
-                // 	search: {
-                // 		show: true,
-                // 	},
-                // 	type: 'dict-tree',
-                // 	form: {
-                // 		component: {
-                // 			showAllLevels: false, // 仅显示最后一级
-                // 			props: {
-                // 				elProps: {
-                // 					clearable: true,
-                // 					showAllLevels: false, // 仅显示最后一级
-                // 					props: {
-                // 						checkStrictly: true, // 可以不需要选到最后一级
-                // 						emitPath: false,
-                // 						clearable: true,
-                // 					},
-                // 				},
-                // 			},
-                // 		},
-                // 	},
-                // },
 				name: {
 					title: '名称',
 					search: {
@@ -131,13 +100,57 @@ export const createCrudOptions = function ({crudExpose}: CreateCrudOptionsProps)
 					form: {
 						rules: [
 							// 表单校验规则
-                            {required: true, message: '名称必填项'},
+							{ required: true, message: '名称必填项' },
 						],
 						component: {
 							placeholder: '请输入名称',
 						},
 					},
 				},
+				pcode: {
+					title: '父级地区',
+					search: {
+						disabled: true,
+					},
+					width: 130,
+					type: 'table-selector',
+					form: {
+						component: {
+							name: shallowRef(tableSelector),
+							vModel: 'modelValue',
+							displayLabel: compute(({ row }) => {
+								if (row) {
+									return row.pcode_info;
+								}
+								return null;
+							}),
+							tableConfig: {
+								url: '/api/system/area/',
+								label: 'name',
+								value: 'id',
+								isTree: true,
+								isMultiple: false,
+								lazy: true,
+								load: loadContentMethod,
+								treeProps: { children: 'children', hasChildren: 'hasChild' },
+								columns: [
+									{
+										prop: 'name',
+										label: '地区',
+										width: 150,
+									},
+									{
+										prop: 'code',
+										label: '地区编码',
+									},
+								],
+							},
+						},
+					},
+					column: {
+						show: false,
+					},
+				},
 				code: {
 					title: '地区编码',
 					search: {
@@ -150,68 +163,13 @@ export const createCrudOptions = function ({crudExpose}: CreateCrudOptionsProps)
 					form: {
 						rules: [
 							// 表单校验规则
-                            {required: true, message: '地区编码必填项'},
+							{ required: true, message: '地区编码必填项' },
 						],
 						component: {
 							placeholder: '请输入地区编码',
 						},
 					},
 				},
-                pinyin: {
-                    title: '拼音',
-                    search: {
-                        disabled: true,
-                    },
-                    type: 'input',
-                    column: {
-                        minWidth: 120,
-                    },
-                    form: {
-                        rules: [
-                            // 表单校验规则
-                            {required: true, message: '拼音必填项'},
-                        ],
-                        component: {
-                            placeholder: '请输入拼音',
-                        },
-                    },
-                },
-                level: {
-                    title: '地区层级',
-                    search: {
-                        disabled: true,
-                    },
-                    type: 'input',
-                    column: {
-                        minWidth: 100,
-                    },
-                    form: {
-                        disabled: false,
-                        rules: [
-                            // 表单校验规则
-                            {required: true, message: '拼音必填项'},
-                        ],
-                        component: {
-                            placeholder: '请输入拼音',
-                        },
-                    },
-                },
-                initials: {
-                    title: '首字母',
-                    column: {
-                        minWidth: 100,
-                    },
-                    form: {
-                        rules: [
-                            // 表单校验规则
-                            {required: true, message: '首字母必填项'},
-                        ],
-
-                        component: {
-                            placeholder: '请输入首字母',
-                        },
-                    },
-                },
 				enable: {
 					title: '是否启用',
 					search: {