mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-10-16 05:45:35 +00:00
fix(web): 修复代码格式和文件清理问题
清理无用文件和资源，调整代码格式统一双引号，修复部分组件路径引用问题 删除大量无用图片资源和组件文件，统一代码风格使用双引号，修复国际化文件路径引用，调整部分组件逻辑，优化项目结构
This commit is contained in:
zhangtao
@@ -92,7 +92,7 @@
|
||||
<template #icon>
|
||||
<SwitchIcon />
|
||||
</template>
|
||||
{{ isExpanded ? '收缩' : '展开' }}
|
||||
{{ isExpanded ? "收缩" : "展开" }}
|
||||
</el-button>
|
||||
<el-checkbox
|
||||
v-model="parentChildLinked"
|
||||
@@ -149,263 +149,263 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch, onMounted } from 'vue';
|
||||
import { QuestionFilled, Switch as SwitchIcon } from '@element-plus/icons-vue';
|
||||
import type { TreeInstance } from 'element-plus';
|
||||
import EnhancedDrawer from '@/components/CURD/EnhancedDrawer.vue';
|
||||
import { listToTree, formatTree } from '@/utils/common';
|
||||
import RoleAPI, {
|
||||
permissionDataType,
|
||||
permissionDeptType,
|
||||
permissionMenuType,
|
||||
} from '@/api/module_system/role';
|
||||
import DeptAPI from '@/api/module_system/dept';
|
||||
import MenuAPI from '@/api/module_system/menu';
|
||||
import { useAppStore } from '@/store/modules/app.store';
|
||||
import { DeviceEnum } from '@/enums/settings/device.enum';
|
||||
import { useUserStore } from '@/store';
|
||||
import { computed, ref, watch, onMounted } from "vue";
|
||||
import { QuestionFilled, Switch as SwitchIcon } from "@element-plus/icons-vue";
|
||||
import type { TreeInstance } from "element-plus";
|
||||
import EnhancedDrawer from "@/components/CURD/EnhancedDrawer.vue";
|
||||
import { listToTree, formatTree } from "@/utils/common";
|
||||
import RoleAPI, {
|
||||
permissionDataType,
|
||||
permissionDeptType,
|
||||
permissionMenuType,
|
||||
} from "@/api/module_system/role";
|
||||
import DeptAPI from "@/api/module_system/dept";
|
||||
import MenuAPI from "@/api/module_system/menu";
|
||||
import { useAppStore } from "@/store/modules/app.store";
|
||||
import { DeviceEnum } from "@/enums/settings/device.enum";
|
||||
import { useUserStore } from "@/store";
|
||||
|
||||
/** formatTree 后的菜单节点带 value（同原 id），与接口里的 id 二选一存在 */
|
||||
type MenuTreeNode = permissionMenuType & { value?: number };
|
||||
/** formatTree 后的菜单节点带 value（同原 id），与接口里的 id 二选一存在 */
|
||||
type MenuTreeNode = permissionMenuType & { value?: number };
|
||||
|
||||
const props = defineProps<{
|
||||
roleName: string;
|
||||
roleId: number;
|
||||
modelValue: boolean;
|
||||
}>();
|
||||
const props = defineProps<{
|
||||
roleName: string;
|
||||
roleId: number;
|
||||
modelValue: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [v: boolean];
|
||||
saved: [];
|
||||
}>();
|
||||
const emit = defineEmits<{
|
||||
"update:modelValue": [v: boolean];
|
||||
saved: [];
|
||||
}>();
|
||||
|
||||
const appStore = useAppStore();
|
||||
const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? '800px' : '90%'));
|
||||
const appStore = useAppStore();
|
||||
const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "800px" : "90%"));
|
||||
|
||||
const drawerVisible = computed({
|
||||
get() {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(value: boolean) {
|
||||
emit('update:modelValue', value);
|
||||
},
|
||||
});
|
||||
const drawerVisible = computed({
|
||||
get() {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(value: boolean) {
|
||||
emit("update:modelValue", value);
|
||||
},
|
||||
});
|
||||
|
||||
const permTreeRef = ref<TreeInstance>();
|
||||
const deptTreeRef = ref<TreeInstance>();
|
||||
const deptFilterText = ref('');
|
||||
const permFilterText = ref('');
|
||||
const dataFormRef = ref();
|
||||
const isExpanded = ref(true);
|
||||
const parentChildLinked = ref(false);
|
||||
const loading = ref(false);
|
||||
const deptTreeData = ref<permissionDeptType[]>([]);
|
||||
const menuTreeData = ref<MenuTreeNode[]>([]);
|
||||
const permissionState = ref<permissionDataType>({
|
||||
role_ids: [],
|
||||
menu_ids: [],
|
||||
data_scope: 1,
|
||||
dept_ids: [],
|
||||
});
|
||||
const permTreeRef = ref<TreeInstance>();
|
||||
const deptTreeRef = ref<TreeInstance>();
|
||||
const deptFilterText = ref("");
|
||||
const permFilterText = ref("");
|
||||
const dataFormRef = ref();
|
||||
const isExpanded = ref(true);
|
||||
const parentChildLinked = ref(false);
|
||||
const loading = ref(false);
|
||||
const deptTreeData = ref<permissionDeptType[]>([]);
|
||||
const menuTreeData = ref<MenuTreeNode[]>([]);
|
||||
const permissionState = ref<permissionDataType>({
|
||||
role_ids: [],
|
||||
menu_ids: [],
|
||||
data_scope: 1,
|
||||
dept_ids: [],
|
||||
});
|
||||
|
||||
const init = async () => {
|
||||
const init = async () => {
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
const deptResponse = await DeptAPI.listDept();
|
||||
deptTreeData.value = formatTree(listToTree(deptResponse.data.data));
|
||||
|
||||
const menuResponse = await MenuAPI.listMenu();
|
||||
menuTreeData.value = formatTree(listToTree(menuResponse.data.data));
|
||||
|
||||
const roleResponse = await RoleAPI.detailRole(props.roleId);
|
||||
|
||||
permissionState.value = {
|
||||
role_ids: [props.roleId],
|
||||
menu_ids: roleResponse.data.data.menus?.map((menu) => menu.id) || [],
|
||||
data_scope: roleResponse.data.data.data_scope || 1,
|
||||
dept_ids: roleResponse.data.data.depts?.map((dept) => dept.id) || [],
|
||||
};
|
||||
|
||||
parentChildLinked.value = checkParentChildLinked(
|
||||
permissionState.value.menu_ids,
|
||||
menuTreeData.value
|
||||
);
|
||||
|
||||
if (permTreeRef.value) {
|
||||
await permTreeRef.value.setCheckedKeys(permissionState.value.menu_ids);
|
||||
}
|
||||
|
||||
if (permissionState.value.data_scope === 5 && deptTreeRef.value) {
|
||||
await deptTreeRef.value.setCheckedKeys(permissionState.value.dept_ids);
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
const msg = error instanceof Error ? error.message : String(error);
|
||||
ElMessage.error("获取权限数据失败: " + msg);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
function handleCancel() {
|
||||
drawerVisible.value = false;
|
||||
}
|
||||
|
||||
async function handleDrawerSave() {
|
||||
try {
|
||||
if (props.roleId === 1) {
|
||||
ElMessage.warning("系统默认角色，不可操作");
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
const deptResponse = await DeptAPI.listDept();
|
||||
deptTreeData.value = formatTree(listToTree(deptResponse.data.data));
|
||||
const rawChecked = (permTreeRef.value?.getCheckedKeys() || []).map((key) => Number(key));
|
||||
const menu_ids = expandMenuIdsWithAncestors(rawChecked, menuTreeData.value);
|
||||
|
||||
const menuResponse = await MenuAPI.listMenu();
|
||||
menuTreeData.value = formatTree(listToTree(menuResponse.data.data));
|
||||
|
||||
const roleResponse = await RoleAPI.detailRole(props.roleId);
|
||||
|
||||
permissionState.value = {
|
||||
role_ids: [props.roleId],
|
||||
menu_ids: roleResponse.data.data.menus?.map((menu) => menu.id) || [],
|
||||
data_scope: roleResponse.data.data.data_scope || 1,
|
||||
dept_ids: roleResponse.data.data.depts?.map((dept) => dept.id) || [],
|
||||
};
|
||||
|
||||
parentChildLinked.value = checkParentChildLinked(
|
||||
permissionState.value.menu_ids,
|
||||
menuTreeData.value
|
||||
);
|
||||
|
||||
if (permTreeRef.value) {
|
||||
await permTreeRef.value.setCheckedKeys(permissionState.value.menu_ids);
|
||||
}
|
||||
|
||||
if (permissionState.value.data_scope === 5 && deptTreeRef.value) {
|
||||
await deptTreeRef.value.setCheckedKeys(permissionState.value.dept_ids);
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
const msg = error instanceof Error ? error.message : String(error);
|
||||
ElMessage.error('获取权限数据失败: ' + msg);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
function handleCancel() {
|
||||
drawerVisible.value = false;
|
||||
}
|
||||
|
||||
async function handleDrawerSave() {
|
||||
try {
|
||||
if (props.roleId === 1) {
|
||||
ElMessage.warning('系统默认角色，不可操作');
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
|
||||
const rawChecked = (permTreeRef.value?.getCheckedKeys() || []).map((key) => Number(key));
|
||||
const menu_ids = expandMenuIdsWithAncestors(rawChecked, menuTreeData.value);
|
||||
|
||||
const submitData: permissionDataType = {
|
||||
role_ids: [props.roleId],
|
||||
menu_ids,
|
||||
data_scope: permissionState.value.data_scope,
|
||||
dept_ids: (deptTreeRef.value?.getCheckedKeys() || []).map((key) => Number(key)),
|
||||
};
|
||||
|
||||
await RoleAPI.setPermission(submitData);
|
||||
|
||||
const userStore = useUserStore();
|
||||
await userStore.getUserInfo();
|
||||
|
||||
drawerVisible.value = false;
|
||||
emit('saved');
|
||||
} catch (error: unknown) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
const deptTreeCheck = (checkedIds: number[]) => {
|
||||
permissionState.value.dept_ids = checkedIds;
|
||||
};
|
||||
|
||||
const menuTreeCheck = (checkedIds: number[]) => {
|
||||
permissionState.value.menu_ids = checkedIds;
|
||||
};
|
||||
|
||||
function togglePermTree() {
|
||||
isExpanded.value = !isExpanded.value;
|
||||
if (permTreeRef.value) {
|
||||
Object.values(permTreeRef.value.store.nodesMap).forEach((node: any) => {
|
||||
if (isExpanded.value) {
|
||||
node.expand();
|
||||
} else {
|
||||
node.collapse();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
watch(deptFilterText, (val) => {
|
||||
deptTreeRef.value!.filter(val);
|
||||
});
|
||||
|
||||
watch(permFilterText, (val) => {
|
||||
permTreeRef.value!.filter(val);
|
||||
});
|
||||
|
||||
function handleFilter(value: string, data: { [key: string]: any }) {
|
||||
if (!value) return true;
|
||||
return data.label.includes(value);
|
||||
}
|
||||
|
||||
function menuTreeNodeId(node: MenuTreeNode): number {
|
||||
const v = node.value ?? node.id;
|
||||
return Number(v);
|
||||
}
|
||||
|
||||
function checkParentChildLinked(menuIds: number[], menuTreeData: MenuTreeNode[]): boolean {
|
||||
if (!menuIds.length || !menuTreeData.length) return false;
|
||||
|
||||
const menuMap = new Map<number, MenuTreeNode>();
|
||||
const buildMenuMap = (menus: MenuTreeNode[]) => {
|
||||
menus.forEach((menu) => {
|
||||
menuMap.set(menuTreeNodeId(menu), menu);
|
||||
if (menu.children) {
|
||||
buildMenuMap(menu.children as MenuTreeNode[]);
|
||||
}
|
||||
});
|
||||
const submitData: permissionDataType = {
|
||||
role_ids: [props.roleId],
|
||||
menu_ids,
|
||||
data_scope: permissionState.value.data_scope,
|
||||
dept_ids: (deptTreeRef.value?.getCheckedKeys() || []).map((key) => Number(key)),
|
||||
};
|
||||
buildMenuMap(menuTreeData);
|
||||
|
||||
let hasParentChildConflict = false;
|
||||
await RoleAPI.setPermission(submitData);
|
||||
|
||||
for (const menuId of menuIds) {
|
||||
const menu = menuMap.get(menuId);
|
||||
if (!menu) continue;
|
||||
const userStore = useUserStore();
|
||||
await userStore.getUserInfo();
|
||||
|
||||
if (menu.children && menu.children.length > 0) {
|
||||
const hasUnselectedChildren = menu.children.some(
|
||||
(child) => !menuIds.includes(menuTreeNodeId(child as MenuTreeNode))
|
||||
);
|
||||
if (hasUnselectedChildren) {
|
||||
hasParentChildConflict = true;
|
||||
break;
|
||||
}
|
||||
drawerVisible.value = false;
|
||||
emit("saved");
|
||||
} catch (error: unknown) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
const deptTreeCheck = (checkedIds: number[]) => {
|
||||
permissionState.value.dept_ids = checkedIds;
|
||||
};
|
||||
|
||||
const menuTreeCheck = (checkedIds: number[]) => {
|
||||
permissionState.value.menu_ids = checkedIds;
|
||||
};
|
||||
|
||||
function togglePermTree() {
|
||||
isExpanded.value = !isExpanded.value;
|
||||
if (permTreeRef.value) {
|
||||
Object.values(permTreeRef.value.store.nodesMap).forEach((node: any) => {
|
||||
if (isExpanded.value) {
|
||||
node.expand();
|
||||
} else {
|
||||
node.collapse();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const parentMenu = findParentMenu(menuId, menuTreeData);
|
||||
if (parentMenu && !menuIds.includes(menuTreeNodeId(parentMenu))) {
|
||||
watch(deptFilterText, (val) => {
|
||||
deptTreeRef.value!.filter(val);
|
||||
});
|
||||
|
||||
watch(permFilterText, (val) => {
|
||||
permTreeRef.value!.filter(val);
|
||||
});
|
||||
|
||||
function handleFilter(value: string, data: { [key: string]: any }) {
|
||||
if (!value) return true;
|
||||
return data.label.includes(value);
|
||||
}
|
||||
|
||||
function menuTreeNodeId(node: MenuTreeNode): number {
|
||||
const v = node.value ?? node.id;
|
||||
return Number(v);
|
||||
}
|
||||
|
||||
function checkParentChildLinked(menuIds: number[], menuTreeData: MenuTreeNode[]): boolean {
|
||||
if (!menuIds.length || !menuTreeData.length) return false;
|
||||
|
||||
const menuMap = new Map<number, MenuTreeNode>();
|
||||
const buildMenuMap = (menus: MenuTreeNode[]) => {
|
||||
menus.forEach((menu) => {
|
||||
menuMap.set(menuTreeNodeId(menu), menu);
|
||||
if (menu.children) {
|
||||
buildMenuMap(menu.children as MenuTreeNode[]);
|
||||
}
|
||||
});
|
||||
};
|
||||
buildMenuMap(menuTreeData);
|
||||
|
||||
let hasParentChildConflict = false;
|
||||
|
||||
for (const menuId of menuIds) {
|
||||
const menu = menuMap.get(menuId);
|
||||
if (!menu) continue;
|
||||
|
||||
if (menu.children && menu.children.length > 0) {
|
||||
const hasUnselectedChildren = menu.children.some(
|
||||
(child) => !menuIds.includes(menuTreeNodeId(child as MenuTreeNode))
|
||||
);
|
||||
if (hasUnselectedChildren) {
|
||||
hasParentChildConflict = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return !hasParentChildConflict;
|
||||
const parentMenu = findParentMenu(menuId, menuTreeData);
|
||||
if (parentMenu && !menuIds.includes(menuTreeNodeId(parentMenu))) {
|
||||
hasParentChildConflict = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function findParentMenu(menuId: number, menuTreeData: MenuTreeNode[]): MenuTreeNode | null {
|
||||
for (const menu of menuTreeData) {
|
||||
if (menu.children) {
|
||||
for (const child of menu.children) {
|
||||
if (menuTreeNodeId(child as MenuTreeNode) === menuId) {
|
||||
return menu;
|
||||
}
|
||||
const found = findParentMenu(menuId, [child as MenuTreeNode]);
|
||||
if (found) return found;
|
||||
return !hasParentChildConflict;
|
||||
}
|
||||
|
||||
function findParentMenu(menuId: number, menuTreeData: MenuTreeNode[]): MenuTreeNode | null {
|
||||
for (const menu of menuTreeData) {
|
||||
if (menu.children) {
|
||||
for (const child of menu.children) {
|
||||
if (menuTreeNodeId(child as MenuTreeNode) === menuId) {
|
||||
return menu;
|
||||
}
|
||||
const found = findParentMenu(menuId, [child as MenuTreeNode]);
|
||||
if (found) return found;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/** 为已选菜单补齐所有祖先 id，避免仅选子节点时父级未入库导致侧栏/路由缺入口（BUG #1/#14） */
|
||||
function expandMenuIdsWithAncestors(checkedIds: number[], roots: MenuTreeNode[]): number[] {
|
||||
const parentById = new Map<number, number | undefined>();
|
||||
const walk = (nodes: MenuTreeNode[], parent: number | undefined) => {
|
||||
for (const n of nodes) {
|
||||
const id = menuTreeNodeId(n);
|
||||
parentById.set(id, parent);
|
||||
if (n.children?.length) walk(n.children as MenuTreeNode[], id);
|
||||
}
|
||||
};
|
||||
walk(roots, undefined);
|
||||
const out = new Set<number>();
|
||||
for (const id of checkedIds) {
|
||||
let cur: number | undefined = id;
|
||||
while (cur !== undefined) {
|
||||
out.add(cur);
|
||||
cur = parentById.get(cur);
|
||||
}
|
||||
/** 为已选菜单补齐所有祖先 id，避免仅选子节点时父级未入库导致侧栏/路由缺入口（BUG #1/#14） */
|
||||
function expandMenuIdsWithAncestors(checkedIds: number[], roots: MenuTreeNode[]): number[] {
|
||||
const parentById = new Map<number, number | undefined>();
|
||||
const walk = (nodes: MenuTreeNode[], parent: number | undefined) => {
|
||||
for (const n of nodes) {
|
||||
const id = menuTreeNodeId(n);
|
||||
parentById.set(id, parent);
|
||||
if (n.children?.length) walk(n.children as MenuTreeNode[], id);
|
||||
}
|
||||
};
|
||||
walk(roots, undefined);
|
||||
const out = new Set<number>();
|
||||
for (const id of checkedIds) {
|
||||
let cur: number | undefined = id;
|
||||
while (cur !== undefined) {
|
||||
out.add(cur);
|
||||
cur = parentById.get(cur);
|
||||
}
|
||||
return [...out];
|
||||
}
|
||||
return [...out];
|
||||
}
|
||||
|
||||
function handleParentChildLinkedChange(val: any) {
|
||||
parentChildLinked.value = val;
|
||||
}
|
||||
function handleParentChildLinkedChange(val: any) {
|
||||
parentChildLinked.value = val;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await init();
|
||||
});
|
||||
onMounted(async () => {
|
||||
await init();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -139,7 +139,7 @@
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
|
||||
{{ scope.row.status === '0' ? '启用' : '停用' }}
|
||||
{{ scope.row.status === "0" ? "启用" : "停用" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -276,7 +276,7 @@
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="状态" :span="2">
|
||||
<el-tag :type="detailFormData.status === '0' ? 'success' : 'danger'">
|
||||
{{ detailFormData.status === '0' ? '启用' : '停用' }}
|
||||
{{ detailFormData.status === "0" ? "启用" : "停用" }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间" :span="2">
|
||||
@@ -376,308 +376,308 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: 'Role',
|
||||
inheritAttrs: false,
|
||||
});
|
||||
defineOptions({
|
||||
name: "Role",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { ref, reactive, computed, unref } from 'vue';
|
||||
import { fetchAllPages } from '@/utils/fetchAllPages';
|
||||
import RoleAPI, { RoleTable, RoleForm, TablePageQuery } from '@/api/module_system/role';
|
||||
import { useUserStore } from '@/store';
|
||||
import ExportModal from '@/components/CURD/ExportModal.vue';
|
||||
import CrudToolbarLeft from '@/components/CURD/CrudToolbarLeft.vue';
|
||||
import CrudToolbarRight from '@/components/CURD/CrudToolbarRight.vue';
|
||||
import PageSearch from '@/components/CURD/PageSearch.vue';
|
||||
import PageContent from '@/components/CURD/PageContent.vue';
|
||||
import EnhancedDialog from '@/components/CURD/EnhancedDialog.vue';
|
||||
import PermissonDrawer from './components/PermissonDrawer.vue';
|
||||
import { useCrudList } from '@/components/CURD/useCrudList';
|
||||
import type { IContentConfig, ISearchConfig } from '@/components/CURD/types';
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { ref, reactive, computed, unref } from "vue";
|
||||
import { fetchAllPages } from "@/utils/fetchAllPages";
|
||||
import RoleAPI, { RoleTable, RoleForm, TablePageQuery } from "@/api/module_system/role";
|
||||
import { useUserStore } from "@/store";
|
||||
import ExportModal from "@/components/CURD/ExportModal.vue";
|
||||
import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
|
||||
import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
|
||||
import PageSearch from "@/components/CURD/PageSearch.vue";
|
||||
import PageContent from "@/components/CURD/PageContent.vue";
|
||||
import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
|
||||
import PermissonDrawer from "./components/PermissonDrawer.vue";
|
||||
import { useCrudList } from "@/components/CURD/useCrudList";
|
||||
import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
|
||||
|
||||
const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
|
||||
const dataFormRef = ref();
|
||||
const submitLoading = ref(false);
|
||||
const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
|
||||
const dataFormRef = ref();
|
||||
const submitLoading = ref(false);
|
||||
|
||||
const searchConfig = reactive<ISearchConfig>({
|
||||
permPrefix: 'module_system:role',
|
||||
colon: true,
|
||||
isExpandable: true,
|
||||
showNumber: 2,
|
||||
form: { labelWidth: 'auto' },
|
||||
formItems: [
|
||||
{
|
||||
prop: 'name',
|
||||
label: '角色名称',
|
||||
type: 'input',
|
||||
attrs: { placeholder: '请输入角色名称', clearable: true },
|
||||
const searchConfig = reactive<ISearchConfig>({
|
||||
permPrefix: "module_system:role",
|
||||
colon: true,
|
||||
isExpandable: true,
|
||||
showNumber: 2,
|
||||
form: { labelWidth: "auto" },
|
||||
formItems: [
|
||||
{
|
||||
prop: "name",
|
||||
label: "角色名称",
|
||||
type: "input",
|
||||
attrs: { placeholder: "请输入角色名称", clearable: true },
|
||||
},
|
||||
{
|
||||
prop: "status",
|
||||
label: "状态",
|
||||
type: "select",
|
||||
options: [
|
||||
{ label: "启用", value: "true" },
|
||||
{ label: "停用", value: "false" },
|
||||
],
|
||||
attrs: { placeholder: "请选择状态", clearable: true, style: { width: "167.5px" } },
|
||||
},
|
||||
{
|
||||
prop: "created_time",
|
||||
label: "创建时间",
|
||||
type: "date-picker",
|
||||
initialValue: [],
|
||||
attrs: {
|
||||
type: "datetimerange",
|
||||
valueFormat: "YYYY-MM-DD HH:mm:ss",
|
||||
rangeSeparator: "至",
|
||||
startPlaceholder: "开始日期",
|
||||
endPlaceholder: "结束日期",
|
||||
style: { width: "340px" },
|
||||
},
|
||||
{
|
||||
prop: 'status',
|
||||
label: '状态',
|
||||
type: 'select',
|
||||
options: [
|
||||
{ label: '启用', value: 'true' },
|
||||
{ label: '停用', value: 'false' },
|
||||
],
|
||||
attrs: { placeholder: '请选择状态', clearable: true, style: { width: '167.5px' } },
|
||||
},
|
||||
{
|
||||
prop: 'created_time',
|
||||
label: '创建时间',
|
||||
type: 'date-picker',
|
||||
initialValue: [],
|
||||
attrs: {
|
||||
type: 'datetimerange',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
rangeSeparator: '至',
|
||||
startPlaceholder: '开始日期',
|
||||
endPlaceholder: '结束日期',
|
||||
style: { width: '340px' },
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const contentCols = reactive<
|
||||
Array<{
|
||||
prop?: string;
|
||||
label?: string;
|
||||
show?: boolean;
|
||||
}>
|
||||
>([
|
||||
{ prop: 'selection', label: '选择框', show: true },
|
||||
{ prop: 'index', label: '序号', show: true },
|
||||
{ prop: 'name', label: '角色名称', show: true },
|
||||
{ prop: 'data_scope', label: '数据权限', show: true },
|
||||
{ prop: 'depts', label: '所属部门', show: true },
|
||||
{ prop: 'order', label: '排序', show: true },
|
||||
{ prop: 'code', label: '角色编码', show: true },
|
||||
{ prop: 'status', label: '状态', show: true },
|
||||
{ prop: 'description', label: '描述', show: true },
|
||||
{ prop: 'created_time', label: '创建时间', show: true },
|
||||
{ prop: 'updated_time', label: '更新时间', show: true },
|
||||
{ prop: 'operation', label: '操作', show: true },
|
||||
]);
|
||||
|
||||
const contentConfig = reactive<IContentConfig<TablePageQuery>>({
|
||||
permPrefix: 'module_system:role',
|
||||
pk: 'id',
|
||||
cols: contentCols as IContentConfig['cols'],
|
||||
hideColumnFilter: false,
|
||||
toolbar: [],
|
||||
defaultToolbar: ['refresh', 'filter'],
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 30, 50],
|
||||
},
|
||||
request: { page_no: 'page_no', page_size: 'page_size' },
|
||||
indexAction: async (params) => {
|
||||
const res = await RoleAPI.listRole(params as TablePageQuery);
|
||||
return {
|
||||
total: res.data.data.total,
|
||||
list: res.data.data.items,
|
||||
};
|
||||
},
|
||||
deleteAction: async (ids) => {
|
||||
await RoleAPI.deleteRole(
|
||||
ids
|
||||
.split(',')
|
||||
.map((s) => Number(s.trim()))
|
||||
.filter((n) => !Number.isNaN(n))
|
||||
);
|
||||
const userStore = useUserStore();
|
||||
await userStore.getUserInfo();
|
||||
},
|
||||
deleteConfirm: {
|
||||
title: '警告',
|
||||
message: '确认删除该项数据?',
|
||||
type: 'warning',
|
||||
},
|
||||
});
|
||||
],
|
||||
});
|
||||
|
||||
function handleRowDelete(id: number) {
|
||||
contentRef.value?.handleDelete(id);
|
||||
}
|
||||
const contentCols = reactive<
|
||||
Array<{
|
||||
prop?: string;
|
||||
label?: string;
|
||||
show?: boolean;
|
||||
}>
|
||||
>([
|
||||
{ prop: "selection", label: "选择框", show: true },
|
||||
{ prop: "index", label: "序号", show: true },
|
||||
{ prop: "name", label: "角色名称", show: true },
|
||||
{ prop: "data_scope", label: "数据权限", show: true },
|
||||
{ prop: "depts", label: "所属部门", show: true },
|
||||
{ prop: "order", label: "排序", show: true },
|
||||
{ prop: "code", label: "角色编码", show: true },
|
||||
{ prop: "status", label: "状态", show: true },
|
||||
{ prop: "description", label: "描述", show: true },
|
||||
{ prop: "created_time", label: "创建时间", show: true },
|
||||
{ prop: "updated_time", label: "更新时间", show: true },
|
||||
{ prop: "operation", label: "操作", show: true },
|
||||
]);
|
||||
|
||||
const drawerVisible = ref(false);
|
||||
const checkedRole = ref({ id: 0, name: '' });
|
||||
const contentConfig = reactive<IContentConfig<TablePageQuery>>({
|
||||
permPrefix: "module_system:role",
|
||||
pk: "id",
|
||||
cols: contentCols as IContentConfig["cols"],
|
||||
hideColumnFilter: false,
|
||||
toolbar: [],
|
||||
defaultToolbar: ["refresh", "filter"],
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 30, 50],
|
||||
},
|
||||
request: { page_no: "page_no", page_size: "page_size" },
|
||||
indexAction: async (params) => {
|
||||
const res = await RoleAPI.listRole(params as TablePageQuery);
|
||||
return {
|
||||
total: res.data.data.total,
|
||||
list: res.data.data.items,
|
||||
};
|
||||
},
|
||||
deleteAction: async (ids) => {
|
||||
await RoleAPI.deleteRole(
|
||||
ids
|
||||
.split(",")
|
||||
.map((s) => Number(s.trim()))
|
||||
.filter((n) => !Number.isNaN(n))
|
||||
);
|
||||
const userStore = useUserStore();
|
||||
await userStore.getUserInfo();
|
||||
},
|
||||
deleteConfirm: {
|
||||
title: "警告",
|
||||
message: "确认删除该项数据?",
|
||||
type: "warning",
|
||||
},
|
||||
});
|
||||
|
||||
const exportsDialogVisible = ref(false);
|
||||
function handleRowDelete(id: number) {
|
||||
contentRef.value?.handleDelete(id);
|
||||
}
|
||||
|
||||
const exportQueryParams = computed(() => searchRef.value?.getQueryParams() ?? {});
|
||||
const drawerVisible = ref(false);
|
||||
const checkedRole = ref({ id: 0, name: "" });
|
||||
|
||||
const exportPageData = computed(() => (unref(contentRef.value?.pageData) ?? []) as RoleTable[]);
|
||||
const exportsDialogVisible = ref(false);
|
||||
|
||||
const exportSelectionData = computed(
|
||||
() => (contentRef.value?.getSelectionData() ?? []) as RoleTable[]
|
||||
);
|
||||
const exportQueryParams = computed(() => searchRef.value?.getQueryParams() ?? {});
|
||||
|
||||
const exportColumns = [
|
||||
{ prop: 'name', label: '角色名称' },
|
||||
{ prop: 'code', label: '角色编码' },
|
||||
{ prop: 'data_scope', label: '数据权限' },
|
||||
{ prop: 'depts', label: '所属部门' },
|
||||
{ prop: 'order', label: '排序' },
|
||||
{ prop: 'status', label: '状态' },
|
||||
{ prop: 'description', label: '描述' },
|
||||
{ prop: 'created_time', label: '创建时间' },
|
||||
{ prop: 'updated_time', label: '更新时间' },
|
||||
];
|
||||
const exportPageData = computed(() => (unref(contentRef.value?.pageData) ?? []) as RoleTable[]);
|
||||
|
||||
const curdContentConfig = {
|
||||
permPrefix: 'module_system:role',
|
||||
cols: exportColumns as unknown as IContentConfig['cols'],
|
||||
exportsAction: async (params: Record<string, unknown>) => {
|
||||
const query: Record<string, unknown> = { ...params };
|
||||
if (typeof query.status === 'string') {
|
||||
query.status = query.status === 'true';
|
||||
}
|
||||
return fetchAllPages<RoleTable>({
|
||||
initialQuery: query,
|
||||
fetchPage: async (q) => {
|
||||
const res = await RoleAPI.listRole(q as unknown as TablePageQuery);
|
||||
return {
|
||||
total: res.data?.data?.total ?? 0,
|
||||
list: res.data?.data?.items ?? [],
|
||||
};
|
||||
},
|
||||
});
|
||||
},
|
||||
} as unknown as IContentConfig;
|
||||
const exportSelectionData = computed(
|
||||
() => (contentRef.value?.getSelectionData() ?? []) as RoleTable[]
|
||||
);
|
||||
|
||||
function handleOpenExportsModal() {
|
||||
exportsDialogVisible.value = true;
|
||||
}
|
||||
const exportColumns = [
|
||||
{ prop: "name", label: "角色名称" },
|
||||
{ prop: "code", label: "角色编码" },
|
||||
{ prop: "data_scope", label: "数据权限" },
|
||||
{ prop: "depts", label: "所属部门" },
|
||||
{ prop: "order", label: "排序" },
|
||||
{ prop: "status", label: "状态" },
|
||||
{ prop: "description", label: "描述" },
|
||||
{ prop: "created_time", label: "创建时间" },
|
||||
{ prop: "updated_time", label: "更新时间" },
|
||||
];
|
||||
|
||||
const detailFormData = ref<RoleTable>({} as RoleTable);
|
||||
|
||||
const formData = reactive<RoleForm>({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
order: 1,
|
||||
code: '',
|
||||
status: '0',
|
||||
description: undefined,
|
||||
});
|
||||
|
||||
const dialogVisible = reactive({
|
||||
title: '',
|
||||
visible: false,
|
||||
type: 'create' as 'create' | 'update' | 'detail',
|
||||
});
|
||||
|
||||
const CODE_PATTERN = /^[A-Za-z][A-Za-z0-9_]{1,15}$/;
|
||||
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
|
||||
code: [
|
||||
{ required: true, message: '请输入角色编码', trigger: 'blur' },
|
||||
{
|
||||
pattern: CODE_PATTERN,
|
||||
message: '字母开头，2-16位字母/数字/下划线',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
order: [{ required: true, message: '请输入角色排序', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
const initialFormData: RoleForm = {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
order: 1,
|
||||
code: '',
|
||||
status: '0',
|
||||
description: undefined,
|
||||
};
|
||||
|
||||
async function resetForm() {
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields();
|
||||
dataFormRef.value.clearValidate();
|
||||
const curdContentConfig = {
|
||||
permPrefix: "module_system:role",
|
||||
cols: exportColumns as unknown as IContentConfig["cols"],
|
||||
exportsAction: async (params: Record<string, unknown>) => {
|
||||
const query: Record<string, unknown> = { ...params };
|
||||
if (typeof query.status === "string") {
|
||||
query.status = query.status === "true";
|
||||
}
|
||||
Object.assign(formData, initialFormData);
|
||||
}
|
||||
|
||||
async function handleCloseDialog() {
|
||||
dialogVisible.visible = false;
|
||||
await resetForm();
|
||||
}
|
||||
|
||||
async function handleOpenDialog(type: 'create' | 'update' | 'detail', id?: number) {
|
||||
dialogVisible.type = type;
|
||||
if (id) {
|
||||
const response = await RoleAPI.detailRole(id);
|
||||
if (type === 'detail') {
|
||||
dialogVisible.title = '角色详情';
|
||||
Object.assign(detailFormData.value, response.data.data);
|
||||
} else if (type === 'update') {
|
||||
dialogVisible.title = '修改角色';
|
||||
Object.assign(formData, response.data.data);
|
||||
}
|
||||
} else {
|
||||
dialogVisible.title = '新增角色';
|
||||
formData.id = undefined;
|
||||
}
|
||||
dialogVisible.visible = true;
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
dataFormRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
submitLoading.value = true;
|
||||
const id = formData.id;
|
||||
try {
|
||||
if (id) {
|
||||
await RoleAPI.updateRole(id, { id, ...formData });
|
||||
} else {
|
||||
await RoleAPI.createRole(formData);
|
||||
}
|
||||
dialogVisible.visible = false;
|
||||
await resetForm();
|
||||
refreshList();
|
||||
const userStore = useUserStore();
|
||||
await userStore.getUserInfo();
|
||||
} catch (error: unknown) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
submitLoading.value = false;
|
||||
}
|
||||
}
|
||||
return fetchAllPages<RoleTable>({
|
||||
initialQuery: query,
|
||||
fetchPage: async (q) => {
|
||||
const res = await RoleAPI.listRole(q as unknown as TablePageQuery);
|
||||
return {
|
||||
total: res.data?.data?.total ?? 0,
|
||||
list: res.data?.data?.items ?? [],
|
||||
};
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
} as unknown as IContentConfig;
|
||||
|
||||
async function handleMoreClick(status: string) {
|
||||
const rows = contentRef.value?.getSelectionData() as RoleTable[] | undefined;
|
||||
const ids = (rows ?? []).map((r) => r.id).filter((id): id is number => id != null);
|
||||
if (!ids.length) {
|
||||
ElMessage.warning('请先选择要操作的数据');
|
||||
return;
|
||||
function handleOpenExportsModal() {
|
||||
exportsDialogVisible.value = true;
|
||||
}
|
||||
|
||||
const detailFormData = ref<RoleTable>({} as RoleTable);
|
||||
|
||||
const formData = reactive<RoleForm>({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
order: 1,
|
||||
code: "",
|
||||
status: "0",
|
||||
description: undefined,
|
||||
});
|
||||
|
||||
const dialogVisible = reactive({
|
||||
title: "",
|
||||
visible: false,
|
||||
type: "create" as "create" | "update" | "detail",
|
||||
});
|
||||
|
||||
const CODE_PATTERN = /^[A-Za-z][A-Za-z0-9_]{1,15}$/;
|
||||
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
|
||||
code: [
|
||||
{ required: true, message: "请输入角色编码", trigger: "blur" },
|
||||
{
|
||||
pattern: CODE_PATTERN,
|
||||
message: "字母开头，2-16位字母/数字/下划线",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
order: [{ required: true, message: "请输入角色排序", trigger: "blur" }],
|
||||
status: [{ required: true, message: "请选择状态", trigger: "blur" }],
|
||||
});
|
||||
|
||||
const initialFormData: RoleForm = {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
order: 1,
|
||||
code: "",
|
||||
status: "0",
|
||||
description: undefined,
|
||||
};
|
||||
|
||||
async function resetForm() {
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields();
|
||||
dataFormRef.value.clearValidate();
|
||||
}
|
||||
Object.assign(formData, initialFormData);
|
||||
}
|
||||
|
||||
async function handleCloseDialog() {
|
||||
dialogVisible.visible = false;
|
||||
await resetForm();
|
||||
}
|
||||
|
||||
async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
|
||||
dialogVisible.type = type;
|
||||
if (id) {
|
||||
const response = await RoleAPI.detailRole(id);
|
||||
if (type === "detail") {
|
||||
dialogVisible.title = "角色详情";
|
||||
Object.assign(detailFormData.value, response.data.data);
|
||||
} else if (type === "update") {
|
||||
dialogVisible.title = "修改角色";
|
||||
Object.assign(formData, response.data.data);
|
||||
}
|
||||
ElMessageBox.confirm(`确认${status === '0' ? '启用' : '停用'}该项数据?`, '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
await RoleAPI.batchRole({ ids, status });
|
||||
refreshList();
|
||||
const userStore = useUserStore();
|
||||
await userStore.getUserInfo();
|
||||
} catch (error: unknown) {
|
||||
console.error(error);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessageBox.close();
|
||||
});
|
||||
} else {
|
||||
dialogVisible.title = "新增角色";
|
||||
formData.id = undefined;
|
||||
}
|
||||
dialogVisible.visible = true;
|
||||
}
|
||||
|
||||
function handleOpenAssignPermDialog(roleId: number, roleName: string) {
|
||||
checkedRole.value = { id: roleId, name: roleName };
|
||||
drawerVisible.value = true;
|
||||
async function handleSubmit() {
|
||||
dataFormRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
submitLoading.value = true;
|
||||
const id = formData.id;
|
||||
try {
|
||||
if (id) {
|
||||
await RoleAPI.updateRole(id, { id, ...formData });
|
||||
} else {
|
||||
await RoleAPI.createRole(formData);
|
||||
}
|
||||
dialogVisible.visible = false;
|
||||
await resetForm();
|
||||
refreshList();
|
||||
const userStore = useUserStore();
|
||||
await userStore.getUserInfo();
|
||||
} catch (error: unknown) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
submitLoading.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function handleMoreClick(status: string) {
|
||||
const rows = contentRef.value?.getSelectionData() as RoleTable[] | undefined;
|
||||
const ids = (rows ?? []).map((r) => r.id).filter((id): id is number => id != null);
|
||||
if (!ids.length) {
|
||||
ElMessage.warning("请先选择要操作的数据");
|
||||
return;
|
||||
}
|
||||
ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
await RoleAPI.batchRole({ ids, status });
|
||||
refreshList();
|
||||
const userStore = useUserStore();
|
||||
await userStore.getUserInfo();
|
||||
} catch (error: unknown) {
|
||||
console.error(error);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessageBox.close();
|
||||
});
|
||||
}
|
||||
|
||||
function handleOpenAssignPermDialog(roleId: number, roleName: string) {
|
||||
checkedRole.value = { id: roleId, name: roleName };
|
||||
drawerVisible.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user