admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

!61 地区管理

Browse Source 
Merge pull request !61 from 木子-李/20240705_area
This commit is contained in:
dvadmin
2024-07-08 00:16:36 +00:00
committed by Gitee
parent 8a17d6f82b 6d587fc1e2
commit 888a6f1c63
4 changed files with 387 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
backend/dvadmin/system/views/area.py
View File

@@ -1,4 +1,5 @@
# -*- coding: utf-8 -*- # -*- coding: utf-8 -*-
import pypinyin
from django.db.models import Q from django.db.models import Q
from rest_framework import serializers from rest_framework import serializers
@@ -15,6 +16,11 @@ class AreaSerializer(CustomModelSerializer):
""" """
pcode_count = serializers.SerializerMethodField(read_only=True) pcode_count = serializers.SerializerMethodField(read_only=True)
hasChild = serializers.SerializerMethodField() 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): def get_pcode_count(self, instance: Area):
return Area.objects.filter(pcode=instance).count() 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: class Meta:
model = Area model = Area
fields = '__all__' fields = '__all__'
@@ -52,20 +70,28 @@ class AreaViewSet(CustomModelViewSet, FieldPermissionMixin):
""" """
queryset = Area.objects.all() queryset = Area.objects.all()
serializer_class = AreaSerializer serializer_class = AreaSerializer
create_serializer_class = AreaCreateUpdateSerializer
update_serializer_class = AreaCreateUpdateSerializer
extra_filter_class = [] extra_filter_class = []
def get_queryset(self): def list(self, request, *args, **kwargs):
self.request.query_params._mutable = True self.request.query_params._mutable = True
params = self.request.query_params params = self.request.query_params
pcode = params.get('pcode', None) known_params = {'page', 'limit', 'pcode'}
page = params.get('page', None) # 使用集合操作检查是否有未知参数
limit = params.get('limit', None) other_params_exist = any(param not in known_params for param in params)
if page: if other_params_exist:
del params['page']
if limit:
del params['limit']
if params and pcode:
queryset = self.queryset.filter(enable=True, pcode=pcode)
else:
queryset = self.queryset.filter(enable=True) queryset = self.queryset.filter(enable=True)
return queryset else:
pcode = params.get('pcode', None)
params['limit'] = 999
if params and pcode:
queryset = self.queryset.filter(enable=True, pcode=pcode)
else:
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="获取成功")

296
web/src/components/tableSelector/index.vue
View File

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

1
web/src/utils/columnPermission.ts
View File

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

436
web/src/views/system/areas/crud.tsx
View File

@@ -1,244 +1,202 @@
import * as api from './api'; import * as api from './api';
import { import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
dict, import { dictionary } from '/@/utils/dictionary';
UserPageQuery, import { successMessage } from '/@/utils/message';
AddReq, import { auth } from '/@/utils/authFunction';
DelReq, import tableSelector from '/@/components/tableSelector/index.vue';
EditReq, import { shallowRef } from 'vue';
compute,
CreateCrudOptionsProps,
CreateCrudOptionsRet
} from '@fast-crud/fast-crud';
import {dictionary} from '/@/utils/dictionary';
import {successMessage} from '/@/utils/message';
import {auth} from "/@/utils/authFunction";
export const createCrudOptions = function ({crudExpose}: CreateCrudOptionsProps): CreateCrudOptionsRet { export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
const pageRequest = async (query: UserPageQuery) => { const pageRequest = async (query: UserPageQuery) => {
return await api.GetList(query); return await api.GetList(query);
}; };
const editRequest = async ({form, row}: EditReq) => { const editRequest = async ({ form, row }: EditReq) => {
form.id = row.id; form.id = row.id;
return await api.UpdateObj(form); return await api.UpdateObj(form);
}; };
const delRequest = async ({row}: DelReq) => { const delRequest = async ({ row }: DelReq) => {
return await api.DelObj(row.id); return await api.DelObj(row.id);
}; };
const addRequest = async ({form}: AddReq) => { const addRequest = async ({ form }: AddReq) => {
return await api.AddObj(form); return await api.AddObj(form);
}; };
/** /**
* 懒加载 * 懒加载
* @param row * @param row
* @returns {Promise<unknown>} * @returns {Promise<unknown>}
*/ */
const loadContentMethod = (tree: any, treeNode: any, resolve: Function) => { 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); resolve(res.data);
}); });
}; };
return { return {
crudOptions: { crudOptions: {
request: { request: {
pageRequest, pageRequest,
addRequest, addRequest,
editRequest, editRequest,
delRequest, delRequest,
}, },
actionbar: { actionbar: {
buttons: { buttons: {
add: { add: {
show: auth('area:Create'), show: auth('area:Create'),
} },
} },
}, },
rowHandle: { rowHandle: {
//固定右侧 //固定右侧
fixed: 'right', fixed: 'right',
width: 200, width: 200,
buttons: { buttons: {
view: { view: {
show: false, show: false,
}, },
edit: { edit: {
iconRight: 'Edit', iconRight: 'Edit',
type: 'text', type: 'text',
show: auth('area:Update') show: auth('area:Update'),
}, },
remove: { remove: {
iconRight: 'Delete', iconRight: 'Delete',
type: 'text', type: 'text',
show: auth('area:Delete') show: auth('area:Delete'),
}, },
}, },
}, },
pagination: { pagination: {
show: false, show: false,
}, },
table: { table: {
rowKey: 'id', rowKey: 'id',
lazy: true, lazy: true,
load: loadContentMethod, load: loadContentMethod,
treeProps: {children: 'children', hasChildren: 'hasChild'}, treeProps: { children: 'children', hasChildren: 'hasChild' },
}, },
columns: { columns: {
_index: { _index: {
title: '序号', title: '序号',
form: {show: false}, form: { show: false },
column: { column: {
type: 'index', type: 'index',
align: 'center', align: 'center',
width: '70px', width: '70px',
columnSetDisabled: true, //禁止在列设置中选择 columnSetDisabled: true, //禁止在列设置中选择
}, },
}, },
// pcode: { name: {
// title: '父级地区', title: '名称',
// show: false, search: {
// search: { show: true,
// show: true, },
// }, treeNode: true,
// type: 'dict-tree', type: 'input',
// form: { column: {
// component: { minWidth: 120,
// showAllLevels: false, // 仅显示最后一级 },
// props: { form: {
// elProps: { rules: [
// clearable: true, // 表单校验规则
// showAllLevels: false, // 仅显示最后一级 { required: true, message: '名称必填项' },
// props: { ],
// checkStrictly: true, // 可以不需要选到最后一级 component: {
// emitPath: false, placeholder: '请输入名称',
// clearable: true, },
// }, },
// }, },
// }, pcode: {
// }, title: '父级地区',
// }, search: {
// }, disabled: true,
name: { },
title: '名称', width: 130,
search: { type: 'table-selector',
show: true, form: {
}, component: {
treeNode: true, name: shallowRef(tableSelector),
type: 'input', vModel: 'modelValue',
column: { displayLabel: compute(({ row }) => {
minWidth: 120, if (row) {
}, return row.pcode_info;
form: { }
rules: [ return null;
// 表单校验规则 }),
{required: true, message: '名称必填项'}, tableConfig: {
], url: '/api/system/area/',
component: { label: 'name',
placeholder: '请输入名称', value: 'id',
}, isTree: true,
}, isMultiple: false,
}, lazy: true,
code: { load: loadContentMethod,
title: '地区编码', treeProps: { children: 'children', hasChildren: 'hasChild' },
search: { columns: [
show: true, {
}, prop: 'name',
type: 'input', label: '地区',
column: { width: 150,
minWidth: 90, },
}, {
form: { prop: 'code',
rules: [ label: '地区编码',
// 表单校验规则 },
{required: true, message: '地区编码必填项'}, ],
], },
component: { },
placeholder: '请输入地区编码', },
}, column: {
}, show: false,
}, },
pinyin: { },
title: '拼音', code: {
search: { title: '地区编码',
disabled: true, search: {
}, show: true,
type: 'input', },
column: { type: 'input',
minWidth: 120, column: {
}, minWidth: 90,
form: { },
rules: [ form: {
// 表单校验规则 rules: [
{required: true, message: '拼音必填项'}, // 表单校验规则
], { required: true, message: '地区编码必填项' },
component: { ],
placeholder: '请输入拼音', component: {
}, placeholder: '请输入地区编码',
}, },
}, },
level: { },
title: '地区层级', enable: {
search: { title: '是否启用',
disabled: true, search: {
}, show: true,
type: 'input', },
column: { type: 'dict-radio',
minWidth: 100, column: {
}, minWidth: 90,
form: { component: {
disabled: false, name: 'fs-dict-switch',
rules: [ activeText: '',
// 表单校验规则 inactiveText: '',
{required: true, message: '拼音必填项'}, style: '--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #dcdfe6',
], onChange: compute((context) => {
component: { return () => {
placeholder: '请输入拼音', api.UpdateObj(context.row).then((res: APIResponseData) => {
}, successMessage(res.msg as string);
}, });
}, };
initials: { }),
title: '首字母', },
column: { },
minWidth: 100, dict: dict({
}, data: dictionary('button_status_bool'),
form: { }),
rules: [ },
// 表单校验规则 },
{required: true, message: '首字母必填项'}, },
], };
component: {
placeholder: '请输入首字母',
},
},
},
enable: {
title: '是否启用',
search: {
show: true,
},
type: 'dict-radio',
column: {
minWidth: 90,
component: {
name: 'fs-dict-switch',
activeText: '',
inactiveText: '',
style: '--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #dcdfe6',
onChange: compute((context) => {
return () => {
api.UpdateObj(context.row).then((res: APIResponseData) => {
successMessage(res.msg as string);
});
};
}),
},
},
dict: dict({
data: dictionary('button_status_bool'),
}),
},
},
},
};
}; };