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

Merge remote-tracking branch 'origin/develop' into develop

Browse Source
This commit is contained in:
李强
2024-08-29 08:33:31 +08:00
parent a042a65555 4ca0edc104
commit b9c6ab6fcd
21 changed files with 768 additions and 530 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.zh.md
View File

@@ -114,7 +114,7 @@ cd web
# 安装依赖 # 安装依赖
npm install yarn npm install yarn
yarn install --registry=https://registry.npm.taobao.org yarn install --registry=https://registry.npmmirror.com
# 启动服务 # 启动服务
yarn build yarn build

5
backend/application/__init__.py
View File

@@ -0,0 +1,5 @@
# This will make sure the app is always imported when
# Django starts so that shared_task will use this app.
from .celery import app as celery_app
__all__ = ('celery_app',)

2
backend/application/celery.py
View File

@@ -15,7 +15,7 @@ else:
from celery import Celery from celery import Celery
app = Celery(f"application") app = Celery(f"application")
app.config_from_object('django.conf:settings') app.config_from_object('django.conf:settings', namespace='CELERY')
app.autodiscover_tasks(lambda: settings.INSTALLED_APPS) app.autodiscover_tasks(lambda: settings.INSTALLED_APPS)
platforms.C_FORCE_ROOT = True platforms.C_FORCE_ROOT = True

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="获取成功")

1
backend/dvadmin/system/views/login.py
View File

@@ -124,6 +124,7 @@ class LoginSerializer(TokenObtainPairSerializer):
user.is_active = False user.is_active = False
user.save() user.save()
raise CustomValidationError("账号已被锁定,联系管理员解锁") raise CustomValidationError("账号已被锁定,联系管理员解锁")
user.save()
count = 5 - user.login_error_count count = 5 - user.login_error_count
raise CustomValidationError(f"账号/密码错误;重试{count}次后将被锁定~") raise CustomValidationError(f"账号/密码错误;重试{count}次后将被锁定~")

33
backend/dvadmin/utils/field_permission.py
View File

@@ -1,4 +1,7 @@
# -*- coding: utf-8 -*- # -*- coding: utf-8 -*-
from itertools import groupby
from django.db.models import F from django.db.models import F
from rest_framework.decorators import action from rest_framework.decorators import action
from rest_framework.permissions import IsAuthenticated from rest_framework.permissions import IsAuthenticated
@@ -35,4 +38,34 @@ class FieldPermissionMixin:
data= FieldPermission.objects.filter( data= FieldPermission.objects.filter(
field__model=model['model'],role__in=roles field__model=model['model'],role__in=roles
).values( 'is_create', 'is_query', 'is_update',field_name=F('field__field_name')) ).values( 'is_create', 'is_query', 'is_update',field_name=F('field__field_name'))
"""
合并权限
这段代码首先根据 field_name 对列表进行排序，
然后使用 groupby 按 field_name 进行分组。
对于每个组，它创建一个新的字典 merged，
并遍历组中的每个字典，将布尔值字段使用逻辑或（or）操作符进行合并（如果 merged 中还没有该字段，则默认为 False），
其他字段（如 field_name）则直接取组的关键字（即 key）
"""
# 使用field_name对列表进行分组, # groupby 需要先对列表进行排序，因为它只能对连续相同的元素进行分组。
grouped = groupby(sorted(list(data), key=lambda x: x['field_name']), key=lambda x: x['field_name'])
data = []
# 遍历分组，合并权限
for key, group in grouped:
# 初始化一个空字典来存储合并后的结果
merged = {}
for item in group:
# 合并权限， True值优先
merged['is_create'] = merged.get('is_create', False) or item['is_create']
merged['is_query'] = merged.get('is_query', False) or item['is_query']
merged['is_update'] = merged.get('is_update', False) or item['is_update']
merged['field_name'] = key
data.append(merged)
return DetailResponse(data=data) return DetailResponse(data=data)

4
backend/dvadmin/utils/filters.py
View File

@@ -37,11 +37,11 @@ class CoreModelFilterBankend(BaseFilterBackend):
if any([create_datetime_after, create_datetime_before, update_datetime_after, update_datetime_before]): if any([create_datetime_after, create_datetime_before, update_datetime_after, update_datetime_before]):
create_filter = Q() create_filter = Q()
if create_datetime_after and create_datetime_before: if create_datetime_after and create_datetime_before:
create_filter &= Q(create_datetime__gte=create_datetime_after) & Q(create_datetime__lte=create_datetime_before) create_filter &= Q(create_datetime__gte=create_datetime_after) & Q(create_datetime__lte=f'{create_datetime_before} 23:59:59')
elif create_datetime_after: elif create_datetime_after:
create_filter &= Q(create_datetime__gte=create_datetime_after) create_filter &= Q(create_datetime__gte=create_datetime_after)
elif create_datetime_before: elif create_datetime_before:
create_filter &= Q(create_datetime__lte=create_datetime_before) create_filter &= Q(create_datetime__lte=f'{create_datetime_before} 23:59:59')
# 更新时间范围过滤条件 # 更新时间范围过滤条件
update_filter = Q() update_filter = Q()

13
backend/dvadmin/utils/middleware.py
View File

@@ -32,6 +32,14 @@ class ApiLoggingMiddleware(MiddlewareMixin):
request.request_path = get_request_path(request) request.request_path = get_request_path(request)
def __handle_response(self, request, response): def __handle_response(self, request, response):
# 判断有无log_id属性，使用All记录时，会出现此情况
if request.request_data.get('log_id', None) is None:
return
# 移除log_id，不记录此ID
log_id = request.request_data.pop('log_id')
# request_data,request_ip由PermissionInterfaceMiddleware中间件中添加的属性 # request_data,request_ip由PermissionInterfaceMiddleware中间件中添加的属性
body = getattr(request, 'request_data', {}) body = getattr(request, 'request_data', {})
# 请求含有password则用*替换掉(暂时先用于所有接口的password请求参数) # 请求含有password则用*替换掉(暂时先用于所有接口的password请求参数)
@@ -60,7 +68,7 @@ class ApiLoggingMiddleware(MiddlewareMixin):
'status': True if response.data.get('code') in [2000, ] else False, 'status': True if response.data.get('code') in [2000, ] else False,
'json_result': {"code": response.data.get('code'), "msg": response.data.get('msg')}, 'json_result': {"code": response.data.get('code'), "msg": response.data.get('msg')},
} }
operation_log, creat = OperationLog.objects.update_or_create(defaults=info, id=self.operation_log_id) operation_log, creat = OperationLog.objects.update_or_create(defaults=info, id=log_id)
if not operation_log.request_modular and settings.API_MODEL_MAP.get(request.request_path, None): if not operation_log.request_modular and settings.API_MODEL_MAP.get(request.request_path, None):
operation_log.request_modular = settings.API_MODEL_MAP[request.request_path] operation_log.request_modular = settings.API_MODEL_MAP[request.request_path]
operation_log.save() operation_log.save()
@@ -71,7 +79,8 @@ class ApiLoggingMiddleware(MiddlewareMixin):
if self.methods == 'ALL' or request.method in self.methods: if self.methods == 'ALL' or request.method in self.methods:
log = OperationLog(request_modular=get_verbose_name(view_func.cls.queryset)) log = OperationLog(request_modular=get_verbose_name(view_func.cls.queryset))
log.save() log.save()
self.operation_log_id = log.id # self.operation_log_id = log.id
request.request_data['log_id'] = log.id
return return

8
backend/dvadmin/utils/models.py
View File

@@ -216,9 +216,13 @@ def get_all_models_objects(model_name=None):
def get_model_from_app(app_name): def get_model_from_app(app_name):
"""获取模型里的字段""" """获取模型里的字段"""
model_module = import_module(app_name + '.models') model_module = import_module(app_name + '.models')
exclude_models = getattr(model_module, 'exclude_models', [])
filter_model = [ filter_model = [
getattr(model_module, item) for item in dir(model_module) value for key, value in model_module.__dict__.items()
if item != 'CoreModel' and issubclass(getattr(model_module, item).__class__, models.base.ModelBase) if key != 'CoreModel'
and isinstance(value, type)
and issubclass(value, models.Model)
and key not in exclude_models
] ]
model_list = [] model_list = []
for model in filter_model: for model in filter_model:

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>

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

@@ -22,33 +22,18 @@ export const handleColumnPermission = async (func: Function, crudOptions: any,ex
} }
} }
const columns = crudOptions.columns; const columns = crudOptions.columns;
const excludeColumns = ['_index','id', 'create_datetime', 'update_datetime'].concat(excludeColumn) const excludeColumns = ['checked','_index','id', 'create_datetime', 'update_datetime'].concat(excludeColumn)
for (let col in columns) { for (let col in columns) {
if (excludeColumns.includes(col)) {
continue
}else{
if (columns[col].column) {
columns[col].column.show = false
} else {
columns[col]['column'] = {
show: false
}
}
columns[col].addForm = {
show: false
}
columns[col].editForm = {
show: false
}
}
for (let item of res.data) { for (let item of res.data) {
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'])columns[col].column.columnSetDisabled = true // 只有列表不可见，才修改列配置，这样才不影响默认的配置
if(!item['is_query']){
columns[col].column.show = false
columns[col].column.columnSetDisabled = true
}
columns[col].addForm = { columns[col].addForm = {
show: item['is_create'] show: item['is_create']
} }

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'),
}),
},
},
},
};
}; };

3
web/src/views/system/dept/components/DeptUserCom/index.vue
View File

@@ -277,7 +277,8 @@ const { resetCrudOptions } = useCrud({
padding: 0 10px; padding: 0 10px;
border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px;
box-sizing: border-box; box-sizing: border-box;
background-color: #fff; color: var(--next-bg-topBarColor);
background-color: var(--el-fill-color-blank);;
} }
.dept-user-com-table { .dept-user-com-table {
height: calc(100% - 200px); height: calc(100% - 200px);

2
web/src/views/system/dept/index.vue
View File

@@ -133,7 +133,7 @@ onMounted(() => {
} }
.dept-left { .dept-left {
background-color: #fff; background-color: var(--el-fill-color-blank);;
border-radius: 0 8px 8px 0; border-radius: 0 8px 8px 0;
padding: 10px; padding: 10px;
} }

7
web/src/views/system/menu/components/MenuButtonCom/api.ts
View File

@@ -48,3 +48,10 @@ export function BatchAdd(obj: AddReq) {
}); });
} }
export function BatchDelete(keys: any) {
return request({
url: apiPrefix + 'multiple_delete/',
method: 'delete',
data: { keys },
});
}

52
web/src/views/system/menu/components/MenuButtonCom/crud.tsx
View File

@@ -4,6 +4,8 @@ import {auth} from '/@/utils/authFunction'
import {request} from '/@/utils/service'; import {request} from '/@/utils/service';
import { successNotification } from '/@/utils/message'; import { successNotification } from '/@/utils/message';
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus';
import { nextTick, ref } from 'vue';
import XEUtils from 'xe-utils';
//此处为crudOptions配置 //此处为crudOptions配置
export const createCrudOptions = function ({crudExpose, context}: CreateCrudOptionsProps): CreateCrudOptionsRet { export const createCrudOptions = function ({crudExpose, context}: CreateCrudOptionsProps): CreateCrudOptionsRet {
const pageRequest = async () => { const pageRequest = async () => {
@@ -22,7 +24,42 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
const addRequest = async ({form}: AddReq) => { const addRequest = async ({form}: AddReq) => {
return await api.AddObj({...form, ...{menu: context!.selectOptions.value.id}}); return await api.AddObj({...form, ...{menu: context!.selectOptions.value.id}});
}; };
// 记录选中的行
const selectedRows = ref<any>([]);
const onSelectionChange = (changed: any) => {
const tableData = crudExpose.getTableData();
const unChanged = tableData.filter((row: any) => !changed.includes(row));
// 添加已选择的行
XEUtils.arrayEach(changed, (item: any) => {
const ids = XEUtils.pluck(selectedRows.value, 'id');
if (!ids.includes(item.id)) {
selectedRows.value = XEUtils.union(selectedRows.value, [item]);
}
});
// 剔除未选择的行
XEUtils.arrayEach(unChanged, (unItem: any) => {
selectedRows.value = XEUtils.remove(selectedRows.value, (item: any) => item.id !== unItem.id);
});
};
const toggleRowSelection = () => {
// 多选后，回显默认勾选
const tableRef = crudExpose.getBaseTableRef();
const tableData = crudExpose.getTableData();
const selected = XEUtils.filter(tableData, (item: any) => {
const ids = XEUtils.pluck(selectedRows.value, 'id');
return ids.includes(item.id);
});
nextTick(() => {
XEUtils.arrayEach(selected, (item) => {
tableRef.toggleRowSelection(item, true);
});
});
};
return { return {
selectedRows,
crudOptions: { crudOptions: {
pagination:{ pagination:{
show:false show:false
@@ -84,6 +121,11 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
editRequest, editRequest,
delRequest, delRequest,
}, },
table: {
rowKey: 'id', //设置你的主键id， 默认rowKey=id
onSelectionChange,
onRefreshed: () => toggleRowSelection(),
},
form: { form: {
col: {span: 24}, col: {span: 24},
labelWidth: '100px', labelWidth: '100px',
@@ -93,6 +135,16 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
}, },
}, },
columns: { columns: {
$checked: {
title: '选择',
form: { show: false },
column: {
type: 'selection',
align: 'center',
width: '70px',
columnSetDisabled: true, //禁止在列设置中选择
},
},
_index: { _index: {
title: '序号', title: '序号',
form: {show: false}, form: {show: false},

61
web/src/views/system/menu/components/MenuButtonCom/index.vue
View File

@@ -1,19 +1,72 @@
<template> <template>
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud> <fs-crud ref="crudRef" v-bind="crudBinding">
<template #pagination-left>
<el-tooltip content="批量删除">
<el-button text type="danger" :disabled="selectedRowsCount === 0" :icon="Delete" circle @click="handleBatchDelete" />
</el-tooltip>
</template>
<template #pagination-right>
<el-popover placement="top" :width="400" trigger="click">
<template #reference>
<el-button text :type="selectedRowsCount > 0 ? 'primary' : ''">已选中{{ selectedRowsCount }}条数据</el-button>
</template>
<el-table :data="selectedRows" size="small">
<el-table-column width="150" property="id" label="id" />
<el-table-column fixed="right" label="操作" min-width="60">
<template #default="scope">
<el-button text type="info" :icon="Close" @click="removeSelectedRows(scope.row)" circle />
</template>
</el-table-column>
</el-table>
</el-popover>
</template>
</fs-crud>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { computed, ref } from 'vue';
import { useFs } from '@fast-crud/fast-crud'; import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud'; import { createCrudOptions } from './crud';
import { MenuTreeItemType } from '../../types'; import { MenuTreeItemType } from '../../types';
import { ElMessage, ElMessageBox } from 'element-plus';
import XEUtils from 'xe-utils';
import { BatchDelete } from './api';
import { Close, Delete } from '@element-plus/icons-vue';
// 当前选择的菜单信息 // 当前选择的菜单信息
let selectOptions: any = ref({ name: null }); let selectOptions: any = ref({ name: null });
const { crudRef, crudBinding, crudExpose, context } = useFs({ createCrudOptions, context: { selectOptions } }); const { crudRef, crudBinding, crudExpose, context,selectedRows } = useFs({ createCrudOptions, context: { selectOptions } });
const { doRefresh, setTableData } = crudExpose; const { doRefresh, setTableData } = crudExpose;
// 选中行的条数
const selectedRowsCount = computed(() => {
return selectedRows.value.length;
});
// 批量删除
const handleBatchDelete = async () => {
await ElMessageBox.confirm(`确定要批量删除这${selectedRows.value.length}条记录吗`, '确认', {
distinguishCancelAndClose: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
closeOnClickModal: false,
});
await BatchDelete(XEUtils.pluck(selectedRows.value, 'id'));
ElMessage.info('删除成功');
selectedRows.value = [];
await crudExpose.doRefresh();
};
// 移除已选中的行
const removeSelectedRows = (row: any) => {
const tableRef = crudExpose.getBaseTableRef();
const tableData = crudExpose.getTableData();
if (XEUtils.pluck(tableData, 'id').includes(row.id)) {
tableRef.toggleRowSelection(row, false);
} else {
selectedRows.value = XEUtils.remove(selectedRows.value, (item: any) => item.id !== row.id);
}
};
const handleRefreshTable = (record: MenuTreeItemType) => { const handleRefreshTable = (record: MenuTreeItemType) => {
if (!record.is_catalog && record.id) { if (!record.is_catalog && record.id) {
selectOptions.value = record; selectOptions.value = record;

7
web/src/views/system/menu/components/MenuFieldCom/api.ts
View File

@@ -42,6 +42,13 @@ export function DelObj(id: DelReq) {
}); });
} }
export function BatchDelete(keys: any) {
return request({
url: apiPrefix + 'multiple_delete/',
method: 'delete',
data: { keys },
});
}
/** /**
* 获取所有model * 获取所有model
*/ */

51
web/src/views/system/menu/components/MenuFieldCom/crud.tsx
View File

@@ -2,8 +2,9 @@ import * as api from './api';
import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud'; import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
import { request } from '/@/utils/service'; import { request } from '/@/utils/service';
import { dictionary } from '/@/utils/dictionary'; import { dictionary } from '/@/utils/dictionary';
import { inject } from 'vue'; import { inject, nextTick, ref } from 'vue';
import {auth} from "/@/utils/authFunction"; import {auth} from "/@/utils/authFunction";
import XEUtils from 'xe-utils';
@@ -27,8 +28,41 @@ export const createCrudOptions = function ({ crudExpose, props,modelDialog,selec
form.menu = selectOptions.value.id; form.menu = selectOptions.value.id;
return await api.AddObj(form); return await api.AddObj(form);
}; };
// 记录选中的行
const selectedRows = ref<any>([]);
const onSelectionChange = (changed: any) => {
const tableData = crudExpose.getTableData();
const unChanged = tableData.filter((row: any) => !changed.includes(row));
// 添加已选择的行
XEUtils.arrayEach(changed, (item: any) => {
const ids = XEUtils.pluck(selectedRows.value, 'id');
if (!ids.includes(item.id)) {
selectedRows.value = XEUtils.union(selectedRows.value, [item]);
}
});
// 剔除未选择的行
XEUtils.arrayEach(unChanged, (unItem: any) => {
selectedRows.value = XEUtils.remove(selectedRows.value, (item: any) => item.id !== unItem.id);
});
};
const toggleRowSelection = () => {
// 多选后，回显默认勾选
const tableRef = crudExpose.getBaseTableRef();
const tableData = crudExpose.getTableData();
const selected = XEUtils.filter(tableData, (item: any) => {
const ids = XEUtils.pluck(selectedRows.value, 'id');
return ids.includes(item.id);
});
nextTick(() => {
XEUtils.arrayEach(selected, (item) => {
tableRef.toggleRowSelection(item, true);
});
});
};
return { return {
selectedRows,
crudOptions: { crudOptions: {
request: { request: {
pageRequest, pageRequest,
@@ -77,7 +111,22 @@ export const createCrudOptions = function ({ crudExpose, props,modelDialog,selec
width: '600px', width: '600px',
}, },
}, },
table: {
rowKey: 'id', //设置你的主键id， 默认rowKey=id
onSelectionChange,
onRefreshed: () => toggleRowSelection(),
},
columns: { columns: {
$checked: {
title: '选择',
form: { show: false },
column: {
type: 'selection',
align: 'center',
width: '70px',
columnSetDisabled: true, //禁止在列设置中选择
},
},
_index: { _index: {
title: '序号', title: '序号',
form: { show: false }, form: { show: false },

232
web/src/views/system/menu/components/MenuFieldCom/index.vue
View File

@@ -1,137 +1,177 @@
<template> <template>
<div> <div>
<el-dialog ref="modelRef" v-model="modelDialog" title="选择model"> <el-dialog ref="modelRef" v-model="modelDialog" title="选择model">
<div v-show="props.model"> <div v-show="props.model">
<el-tag>已选择:{{ props.model }}</el-tag> <el-tag>已选择:{{ props.model }}</el-tag>
</div> </div>
<!-- 搜索输入框 --> <!-- 搜索输入框 -->
<el-input <el-input v-model="searchQuery" placeholder="搜索模型..." style="margin-bottom: 10px"></el-input>
v-model="searchQuery" <div class="model-card">
placeholder="搜索模型..." <!--注释编号:django-vue3-admin-index483211: 对请求回来的allModelData进行computed计算，返加搜索框匹配到的内容-->
style="margin-bottom: 10px;" <div v-for="(item, index) in filteredModelData" :value="item.key" :key="index">
></el-input> <el-text :type="modelCheckIndex === index ? 'primary' : ''" @click="onModelChecked(item, index)">
<div class="model-card"> {{ item.app + '--' + item.title + '(' + item.key + ')' }}
<!--注释编号:django-vue3-admin-index483211: 对请求回来的allModelData进行computed计算，返加搜索框匹配到的内容--> </el-text>
<div v-for="(item,index) in filteredModelData" :value="item.key" :key="index"> </div>
<el-text :type="modelCheckIndex===index?'primary':''" @click="onModelChecked(item,index)"> </div>
{{ item.app + '--' + item.title + '(' + item.key + ')' }} <template #footer>
</el-text> <span class="dialog-footer">
</div> <el-button @click="modelDialog = false">取消</el-button>
</div> <el-button type="primary" @click="handleAutomatch"> 确定 </el-button>
<template #footer> </span>
<span class="dialog-footer"> </template>
<el-button @click="modelDialog = false">取消</el-button> </el-dialog>
<el-button type="primary" @click="handleAutomatch"> <div style="height: 72vh">
确定 <fs-crud ref="crudRef" v-bind="crudBinding">
</el-button> <template #pagination-left>
</span> <el-tooltip content="批量删除">
</template> <el-button text type="danger" :disabled="selectedRowsCount === 0" :icon="Delete" circle @click="handleBatchDelete" />
</el-dialog> </el-tooltip>
<div style="height: 80vh"> </template>
<fs-crud ref="crudRef" v-bind="crudBinding"> <template #pagination-right>
</fs-crud> <el-popover placement="top" :width="400" trigger="click">
<template #reference>
</div> <el-button text :type="selectedRowsCount > 0 ? 'primary' : ''">已选中{{ selectedRowsCount }}条数据</el-button>
</div> </template>
<el-table :data="selectedRows" size="small">
<el-table-column width="150" property="id" label="id" />
<el-table-column fixed="right" label="操作" min-width="60">
<template #default="scope">
<el-button text type="info" :icon="Close" @click="removeSelectedRows(scope.row)" circle />
</template>
</el-table-column>
</el-table>
</el-popover>
</template>
</fs-crud>
</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {ref, onMounted, reactive, computed } from 'vue'; import { ref, onMounted, reactive, computed } from 'vue';
import {useFs} from '@fast-crud/fast-crud'; import { useFs } from '@fast-crud/fast-crud';
import {createCrudOptions} from './crud'; import { createCrudOptions } from './crud';
import {getModelList} from './api' import { BatchDelete, getModelList } from './api';
import {MenuTreeItemType} from "/@/views/system/menu/types"; import { Close, Delete } from '@element-plus/icons-vue';
import {successMessage, successNotification, warningNotification} from '/@/utils/message'; import { MenuTreeItemType } from '/@/views/system/menu/types';
import {automatchColumnsData} from '/@/views/system/columns/components/ColumnsTableCom/api'; import { successMessage, successNotification, warningNotification } from '/@/utils/message';
import { automatchColumnsData } from '/@/views/system/columns/components/ColumnsTableCom/api';
import XEUtils from 'xe-utils';
import { ElMessage, ElMessageBox } from 'element-plus';
// 当前选择的菜单信息 // 当前选择的菜单信息
let selectOptions: any = ref({name: null}); let selectOptions: any = ref({ name: null });
const props = reactive({ const props = reactive({
model: '', model: '',
app: '', app: '',
menu: '' menu: '',
}) });
//model弹窗 //model弹窗
const modelDialog = ref(false) const modelDialog = ref(false);
// 获取所有model // 获取所有model
const allModelData = ref<any[]>([]); const allModelData = ref<any[]>([]);
const modelCheckIndex = ref(null) const modelCheckIndex = ref(null);
const onModelChecked = (row, index) => { const onModelChecked = (row, index) => {
modelCheckIndex.value = index modelCheckIndex.value = index;
props.model = row.key props.model = row.key;
props.app = row.app props.app = row.app;
} };
// 注释编号:django-vue3-admin-index083311:代码开始行 // 注释编号:django-vue3-admin-index083311:代码开始行
// 功能说明:搭配搜索的处理，返回搜索结果 // 功能说明:搭配搜索的处理，返回搜索结果
const searchQuery = ref(''); const searchQuery = ref('');
const filteredModelData = computed(() => { const filteredModelData = computed(() => {
if (!searchQuery.value) { if (!searchQuery.value) {
return allModelData.value; return allModelData.value;
} }
const query = searchQuery.value.toLowerCase(); const query = searchQuery.value.toLowerCase();
return allModelData.value.filter(item => return allModelData.value.filter(
item.app.toLowerCase().includes(query) || (item) => item.app.toLowerCase().includes(query) || item.title.toLowerCase().includes(query) || item.key.toLowerCase().includes(query)
item.title.toLowerCase().includes(query) || );
item.key.toLowerCase().includes(query) });
);
});
// 注释编号:django-vue3-admin-index083311:代码结束行 // 注释编号:django-vue3-admin-index083311:代码结束行
/** /**
* 菜单选中时,加载表格数据 * 菜单选中时,加载表格数据
* @param record * @param record
*/ */
const handleRefreshTable = (record: MenuTreeItemType) => { const handleRefreshTable = (record: MenuTreeItemType) => {
if (!record.is_catalog && record.id) { if (!record.is_catalog && record.id) {
selectOptions.value = record; selectOptions.value = record;
crudExpose.doRefresh(); crudExpose.doRefresh();
} else { } else {
//清空表格数据 //清空表格数据
crudExpose.setTableData([]); crudExpose.setTableData([]);
} }
}; };
/** /**
* 自动匹配列 * 自动匹配列
*/ */
const handleAutomatch = async () => { const handleAutomatch = async () => {
props.menu = selectOptions.value.id props.menu = selectOptions.value.id;
modelDialog.value = false modelDialog.value = false;
if (props.menu && props.model) { if (props.menu && props.model) {
const res = await automatchColumnsData(props); const res = await automatchColumnsData(props);
if (res?.code === 2000) { if (res?.code === 2000) {
successNotification('匹配成功'); successNotification('匹配成功');
} }
crudExpose.doSearch({form: {menu: props.menu, model: props.model}}); crudExpose.doSearch({ form: { menu: props.menu, model: props.model } });
}else { } else {
warningNotification('请选择角色和模型表！'); warningNotification('请选择角色和模型表！');
} }
}; };
// 选中行的条数
const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, props, modelDialog, selectOptions,allModelData}); const selectedRowsCount = computed(() => {
onMounted(async () => { return selectedRows.value.length;
const res = await getModelList();
allModelData.value = res.data;
}); });
defineExpose({selectOptions, handleRefreshTable}); // 批量删除
const handleBatchDelete = async () => {
await ElMessageBox.confirm(`确定要批量删除这${selectedRows.value.length}条记录吗`, '确认', {
distinguishCancelAndClose: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
closeOnClickModal: false,
});
await BatchDelete(XEUtils.pluck(selectedRows.value, 'id'));
ElMessage.info('删除成功');
selectedRows.value = [];
await crudExpose.doRefresh();
};
// 移除已选中的行
const removeSelectedRows = (row: any) => {
const tableRef = crudExpose.getBaseTableRef();
const tableData = crudExpose.getTableData();
if (XEUtils.pluck(tableData, 'id').includes(row.id)) {
tableRef.toggleRowSelection(row, false);
} else {
selectedRows.value = XEUtils.remove(selectedRows.value, (item: any) => item.id !== row.id);
}
};
const { crudBinding, crudRef, crudExpose, selectedRows } = useFs({ createCrudOptions, props, modelDialog, selectOptions, allModelData });
onMounted(async () => {
const res = await getModelList();
allModelData.value = res.data;
});
defineExpose({ selectOptions, handleRefreshTable });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.model-card { .model-card {
margin-top: 10px; margin-top: 10px;
height: 30vh; height: 30vh;
overflow-y: scroll; overflow-y: scroll;
div { div {
margin: 15px 0; margin: 15px 0;
cursor: pointer; cursor: pointer;
} }
} }
</style> </style>

6
web/src/views/system/menu/index.vue
View File

@@ -16,12 +16,12 @@
<el-col :span="18"> <el-col :span="18">
<el-tabs type="border-card"> <el-tabs type="border-card">
<el-tab-pane label="按钮权限配置" > <el-tab-pane label="按钮权限配置" >
<div style="height: 80vh"> <div style="height: 72vh">
<MenuButtonCom ref="menuButtonRef" /> <MenuButtonCom ref="menuButtonRef" />
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="列权限配置"> <el-tab-pane label="列权限配置">
<div style="height: 80vh"> <div style="height: 72vh">
<MenuFieldCom ref="menuFieldRef"></MenuFieldCom> <MenuFieldCom ref="menuFieldRef"></MenuFieldCom>
</div> </div>
</el-tab-pane> </el-tab-pane>
@@ -138,7 +138,7 @@ onMounted(() => {
.menu-box { .menu-box {
height: 100%; height: 100%;
padding: 10px; padding: 10px;
background-color: #fff; background-color: var(--el-fill-color-blank);;
box-sizing: border-box; box-sizing: border-box;
} }