tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: ♻️ 使用 vue 3.3 版本新特性 defineOptions 在 setup 定义组件名称，移除重复的 script 标签

Browse Source 
Former-commit-id: fa5923ccb0478c34793605d5a3191e88626cf9ac
This commit is contained in:
郝先瑞
2023-05-12 13:11:47 +08:00
parent fcefc18351
commit 83ea4b590f
6 changed files with 161 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/views/system/dept/index.vue
View File

@@ -1,20 +1,19 @@
<script lang="ts">
export default {
name: 'dept'
};
</script>
<script setup lang="ts"> <script setup lang="ts">
defineOptions({
name: "dept",
inheritAttrs: false,
});
import { import {
getDeptForm, getDeptForm,
deleteDept, deleteDept,
updateDept, updateDept,
addDept, addDept,
listDeptOptions, listDeptOptions,
listDepts listDepts,
} from '@/api/dept'; } from "@/api/dept";
import { DeptVO, DeptForm, DeptQuery } from '@/api/dept/types'; import { DeptVO, DeptForm, DeptQuery } from "@/api/dept/types";
const queryFormRef = ref(ElForm); const queryFormRef = ref(ElForm);
const deptFormRef = ref(ElForm); const deptFormRef = ref(ElForm);
@@ -22,7 +21,7 @@ const deptFormRef = ref(ElForm);
const loading = ref(false); const loading = ref(false);
const ids = ref<number[]>([]); const ids = ref<number[]>([]);
const dialog = reactive<DialogOption>({ const dialog = reactive<DialogOption>({
visible: false visible: false,
}); });
const queryParams = reactive<DeptQuery>({}); const queryParams = reactive<DeptQuery>({});
@@ -33,13 +32,13 @@ const deptOptions = ref<OptionType[]>();
const formData = reactive<DeptForm>({ const formData = reactive<DeptForm>({
status: 1, status: 1,
parentId: 0, parentId: 0,
sort: 1 sort: 1,
}); });
const rules = reactive({ const rules = reactive({
parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }], parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }], name: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }] sort: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
}); });
/** /**
@@ -72,13 +71,13 @@ function handleSelectionChange(selection: any) {
* 获取部门下拉数据 * 获取部门下拉数据
*/ */
async function getDeptOptions() { async function getDeptOptions() {
listDeptOptions().then(response => { listDeptOptions().then((response) => {
deptOptions.value = [ deptOptions.value = [
{ {
value: 0, value: 0,
label: '顶级部门', label: "顶级部门",
children: response.data children: response.data,
} },
]; ];
}); });
} }
@@ -93,12 +92,12 @@ async function openDialog(parentId?: number, deptId?: number) {
await getDeptOptions(); await getDeptOptions();
dialog.visible = true; dialog.visible = true;
if (deptId) { if (deptId) {
dialog.title = '修改部门'; dialog.title = "修改部门";
getDeptForm(deptId).then(({ data }) => { getDeptForm(deptId).then(({ data }) => {
Object.assign(formData, data); Object.assign(formData, data);
}); });
} else { } else {
dialog.title = '新增部门'; dialog.title = "新增部门";
formData.parentId = parentId ?? 0; formData.parentId = parentId ?? 0;
} }
} }
@@ -114,7 +113,7 @@ function handleSubmit() {
if (deptId) { if (deptId) {
updateDept(deptId, formData) updateDept(deptId, formData)
.then(() => { .then(() => {
ElMessage.success('修改成功'); ElMessage.success("修改成功");
closeDialog(); closeDialog();
handleQuery(); handleQuery();
}) })
@@ -122,7 +121,7 @@ function handleSubmit() {
} else { } else {
addDept(formData) addDept(formData)
.then(() => { .then(() => {
ElMessage.success('新增成功'); ElMessage.success("新增成功");
closeDialog(); closeDialog();
handleQuery(); handleQuery();
}) })
@@ -136,20 +135,20 @@ function handleSubmit() {
* 删除部门 * 删除部门
*/ */
function handleDelete(deptId?: number) { function handleDelete(deptId?: number) {
const deptIds = [deptId || ids.value].join(','); const deptIds = [deptId || ids.value].join(",");
if (!deptIds) { if (!deptIds) {
ElMessage.warning('请勾选删除项'); ElMessage.warning("请勾选删除项");
return; return;
} }
ElMessageBox.confirm(`确认删除已选中的数据项?`, '警告', { ElMessageBox.confirm(`确认删除已选中的数据项?`, "警告", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}).then(() => { }).then(() => {
deleteDept(deptIds).then(() => { deleteDept(deptIds).then(() => {
ElMessage.success('删除成功'); ElMessage.success("删除成功");
resetQuery(); resetQuery();
}); });
}); });

59
src/views/system/dict/DictData.vue
View File

@@ -1,33 +1,32 @@
<!-- 字典数据 --> <!-- 字典数据 -->
<script lang="ts">
export default {
name: 'dictData'
};
</script>
<script setup lang="ts"> <script setup lang="ts">
defineOptions({
name: "dictData",
inheritAttrs: false,
});
import { import {
getDictPage, getDictPage,
getDictFormData, getDictFormData,
addDict, addDict,
updateDict, updateDict,
deleteDict deleteDict,
} from '@/api/dict'; } from "@/api/dict";
import { DictPageVO, DictForm, DictQuery } from '@/api/dict/types'; import { DictPageVO, DictForm, DictQuery } from "@/api/dict/types";
const props = defineProps({ const props = defineProps({
typeCode: { typeCode: {
type: String, type: String,
default: () => { default: () => {
return ''; return "";
} },
}, },
typeName: { typeName: {
type: String, type: String,
default: () => { default: () => {
return ''; return "";
} },
} },
}); });
watch( watch(
@@ -48,24 +47,24 @@ const total = ref(0);
const queryParams = reactive<DictQuery>({ const queryParams = reactive<DictQuery>({
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
typeCode: props.typeCode typeCode: props.typeCode,
}); });
const dictList = ref<DictPageVO[]>(); const dictList = ref<DictPageVO[]>();
const dialog = reactive<DialogOption>({ const dialog = reactive<DialogOption>({
visible: false visible: false,
}); });
const formData = reactive<DictForm>({ const formData = reactive<DictForm>({
status: 1, status: 1,
typeCode: props.typeCode, typeCode: props.typeCode,
sort: 1 sort: 1,
}); });
const rules = reactive({ const rules = reactive({
name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }], name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
value: [{ required: true, message: '请输入字典值', trigger: 'blur' }] value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
}); });
/** /**
@@ -109,12 +108,12 @@ function handleSelectionChange(selection: any) {
function openDialog(dictId?: number) { function openDialog(dictId?: number) {
dialog.visible = true; dialog.visible = true;
if (dictId) { if (dictId) {
dialog.title = '修改字典'; dialog.title = "修改字典";
getDictFormData(dictId).then(({ data }) => { getDictFormData(dictId).then(({ data }) => {
Object.assign(formData, data); Object.assign(formData, data);
}); });
} else { } else {
dialog.title = '新增字典'; dialog.title = "新增字典";
} }
} }
@@ -129,7 +128,7 @@ function handleSubmit() {
if (dictId) { if (dictId) {
updateDict(dictId, formData) updateDict(dictId, formData)
.then(() => { .then(() => {
ElMessage.success('修改成功'); ElMessage.success("修改成功");
closeDialog(); closeDialog();
resetQuery(); resetQuery();
}) })
@@ -137,7 +136,7 @@ function handleSubmit() {
} else { } else {
addDict(formData) addDict(formData)
.then(() => { .then(() => {
ElMessage.success('新增成功'); ElMessage.success("新增成功");
closeDialog(); closeDialog();
resetQuery(); resetQuery();
}) })
@@ -172,19 +171,19 @@ function resetForm() {
* 删除字典 * 删除字典
*/ */
function handleDelete(dictId?: number) { function handleDelete(dictId?: number) {
const dictIds = [dictId || ids.value].join(','); const dictIds = [dictId || ids.value].join(",");
if (!dictIds) { if (!dictIds) {
ElMessage.warning('请勾选删除项'); ElMessage.warning("请勾选删除项");
return; return;
} }
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', { ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}).then(() => { }).then(() => {
deleteDict(dictIds).then(() => { deleteDict(dictIds).then(() => {
ElMessage.success('删除成功'); ElMessage.success("删除成功");
resetQuery(); resetQuery();
}); });
}); });

57
src/views/system/dict/index.vue
View File

@@ -1,22 +1,21 @@
<!--字典类型--> <!--字典类型-->
<script lang="ts">
export default {
name: 'dictType'
};
</script>
<script setup lang="ts"> <script setup lang="ts">
defineOptions({
name: "dictType",
inheritAttrs: false,
});
import { import {
getDictTypePage, getDictTypePage,
getDictTypeForm, getDictTypeForm,
addDictType, addDictType,
updateDictType, updateDictType,
deleteDictTypes deleteDictTypes,
} from '@/api/dict'; } from "@/api/dict";
import DictData from '@/views/system/dict/DictData.vue'; import DictData from "@/views/system/dict/DictData.vue";
import { DictTypePageVO, DictTypeQuery, DictTypeForm } from '@/api/dict/types'; import { DictTypePageVO, DictTypeQuery, DictTypeForm } from "@/api/dict/types";
const queryFormRef = ref(ElForm); const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm); const dataFormRef = ref(ElForm);
@@ -27,22 +26,22 @@ const total = ref(0);
const queryParams = reactive<DictTypeQuery>({ const queryParams = reactive<DictTypeQuery>({
pageNum: 1, pageNum: 1,
pageSize: 10 pageSize: 10,
}); });
const dictTypeList = ref<DictTypePageVO[]>(); const dictTypeList = ref<DictTypePageVO[]>();
const dialog = reactive<DialogOption>({ const dialog = reactive<DialogOption>({
visible: false visible: false,
}); });
const formData = reactive<DictTypeForm>({ const formData = reactive<DictTypeForm>({
status: 1 status: 1,
}); });
const rules = reactive({ const rules = reactive({
name: [{ required: true, message: '请输入字典类型名称', trigger: 'blur' }], name: [{ required: true, message: "请输入字典类型名称", trigger: "blur" }],
code: [{ required: true, message: '请输入字典类型编码', trigger: 'blur' }] code: [{ required: true, message: "请输入字典类型编码", trigger: "blur" }],
}); });
/** /**
@@ -84,12 +83,12 @@ function handleSelectionChange(selection: any) {
function openDialog(dicTypeId?: number) { function openDialog(dicTypeId?: number) {
dialog.visible = true; dialog.visible = true;
if (dicTypeId) { if (dicTypeId) {
dialog.title = '修改字典类型'; dialog.title = "修改字典类型";
getDictTypeForm(dicTypeId).then(({ data }) => { getDictTypeForm(dicTypeId).then(({ data }) => {
Object.assign(formData, data); Object.assign(formData, data);
}); });
} else { } else {
dialog.title = '新增字典类型'; dialog.title = "新增字典类型";
} }
} }
@@ -104,7 +103,7 @@ function handleSubmit() {
if (dictTypeId) { if (dictTypeId) {
updateDictType(dictTypeId, formData) updateDictType(dictTypeId, formData)
.then(() => { .then(() => {
ElMessage.success('修改成功'); ElMessage.success("修改成功");
closeDialog(); closeDialog();
handleQuery(); handleQuery();
}) })
@@ -112,7 +111,7 @@ function handleSubmit() {
} else { } else {
addDictType(formData) addDictType(formData)
.then(() => { .then(() => {
ElMessage.success('新增成功'); ElMessage.success("新增成功");
closeDialog(); closeDialog();
handleQuery(); handleQuery();
}) })
@@ -145,37 +144,37 @@ function resetForm() {
* 删除字典类型 * 删除字典类型
*/ */
function handleDelete(dictTypeId?: number) { function handleDelete(dictTypeId?: number) {
const dictTypeIds = [dictTypeId || ids.value].join(','); const dictTypeIds = [dictTypeId || ids.value].join(",");
if (!dictTypeIds) { if (!dictTypeIds) {
ElMessage.warning('请勾选删除项'); ElMessage.warning("请勾选删除项");
return; return;
} }
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', { ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}).then(() => { }).then(() => {
deleteDictTypes(dictTypeIds).then(() => { deleteDictTypes(dictTypeIds).then(() => {
ElMessage.success('删除成功'); ElMessage.success("删除成功");
resetQuery(); resetQuery();
}); });
}); });
} }
const dictDataDialog = reactive<DialogOption>({ const dictDataDialog = reactive<DialogOption>({
visible: false visible: false,
}); });
// 当前选中的字典类型 // 当前选中的字典类型
const selectedDictType = reactive({ typeCode: '', typeName: '' }); const selectedDictType = reactive({ typeCode: "", typeName: "" });
/** /**
* 打开字典弹窗 * 打开字典弹窗
*/ */
function openDictDialog(row: DictTypePageVO) { function openDictDialog(row: DictTypePageVO) {
dictDataDialog.visible = true; dictDataDialog.visible = true;
dictDataDialog.title = '【' + row.name + '】字典数据'; dictDataDialog.title = "【" + row.name + "】字典数据";
selectedDictType.typeCode = row.code; selectedDictType.typeCode = row.code;
selectedDictType.typeName = row.name; selectedDictType.typeName = row.name;

71
src/views/system/menu/index.vue
View File

@@ -1,31 +1,30 @@
<script lang="ts">
export default {
name: 'cmenu'
};
</script>
<script setup lang="ts"> <script setup lang="ts">
import { MenuQuery, MenuForm, MenuVO } from '@/api/menu/types'; defineOptions({
name: "cmenu",
inheritAttrs: false,
});
import { MenuQuery, MenuForm, MenuVO } from "@/api/menu/types";
import { import {
listMenus, listMenus,
getMenuForm, getMenuForm,
listMenuOptions, listMenuOptions,
addMenu, addMenu,
deleteMenu, deleteMenu,
updateMenu updateMenu,
} from '@/api/menu'; } from "@/api/menu";
import { MenuTypeEnum } from '@/enums/MenuTypeEnum'; import { MenuTypeEnum } from "@/enums/MenuTypeEnum";
import SvgIcon from '@/components/SvgIcon/index.vue'; import SvgIcon from "@/components/SvgIcon/index.vue";
import IconSelect from '@/components/IconSelect/index.vue'; import IconSelect from "@/components/IconSelect/index.vue";
const queryFormRef = ref(ElForm); const queryFormRef = ref(ElForm);
const menuFormRef = ref(ElForm); const menuFormRef = ref(ElForm);
const loading = ref(false); const loading = ref(false);
const dialog = reactive<DialogOption>({ const dialog = reactive<DialogOption>({
visible: false visible: false,
}); });
const queryParams = reactive<MenuQuery>({}); const queryParams = reactive<MenuQuery>({});
@@ -37,25 +36,25 @@ const formData = reactive<MenuForm>({
parentId: 0, parentId: 0,
visible: 1, visible: 1,
sort: 1, sort: 1,
type: MenuTypeEnum.MENU type: MenuTypeEnum.MENU,
}); });
const rules = reactive({ const rules = reactive({
parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }], parentId: [{ required: true, message: "请选择顶级菜单", trigger: "blur" }],
name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }], name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }], type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }], path: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
component: [ component: [
{ required: true, message: '请输入组件完整路径', trigger: 'blur' } { required: true, message: "请输入组件完整路径", trigger: "blur" },
] ],
}); });
// 选择表格的行菜单ID // 选择表格的行菜单ID
const selectedRowMenuId = ref<number | undefined>(); const selectedRowMenuId = ref<number | undefined>();
const menuCacheData = reactive({ const menuCacheData = reactive({
type: '', type: "",
path: '' path: "",
}); });
/** /**
@@ -99,19 +98,19 @@ function onRowClick(row: MenuVO) {
function openDialog(parentId?: number, menuId?: number) { function openDialog(parentId?: number, menuId?: number) {
listMenuOptions() listMenuOptions()
.then(({ data }) => { .then(({ data }) => {
menuOptions.value = [{ value: 0, label: '顶级菜单', children: data }]; menuOptions.value = [{ value: 0, label: "顶级菜单", children: data }];
}) })
.then(() => { .then(() => {
dialog.visible = true; dialog.visible = true;
if (menuId) { if (menuId) {
dialog.title = '编辑菜单'; dialog.title = "编辑菜单";
getMenuForm(menuId).then(({ data }) => { getMenuForm(menuId).then(({ data }) => {
Object.assign(formData, data); Object.assign(formData, data);
menuCacheData.type = data.type; menuCacheData.type = data.type;
menuCacheData.path = data.path ?? ''; menuCacheData.path = data.path ?? "";
}); });
} else { } else {
dialog.title = '新增菜单'; dialog.title = "新增菜单";
formData.parentId = parentId; formData.parentId = parentId;
} }
}); });
@@ -123,7 +122,7 @@ function openDialog(parentId?: number, menuId?: number) {
function onMenuTypeChange() { function onMenuTypeChange() {
// 如果菜单类型改变，清空路由路径；未改变在切换后还原路由路径 // 如果菜单类型改变，清空路由路径；未改变在切换后还原路由路径
if (formData.type !== menuCacheData.type) { if (formData.type !== menuCacheData.type) {
formData.path = ''; formData.path = "";
} else { } else {
formData.path = menuCacheData.path; formData.path = menuCacheData.path;
} }
@@ -138,13 +137,13 @@ function submitForm() {
const menuId = formData.id; const menuId = formData.id;
if (menuId) { if (menuId) {
updateMenu(menuId, formData).then(() => { updateMenu(menuId, formData).then(() => {
ElMessage.success('修改成功'); ElMessage.success("修改成功");
closeDialog(); closeDialog();
handleQuery(); handleQuery();
}); });
} else { } else {
addMenu(formData).then(() => { addMenu(formData).then(() => {
ElMessage.success('新增成功'); ElMessage.success("新增成功");
closeDialog(); closeDialog();
handleQuery(); handleQuery();
}); });
@@ -158,22 +157,22 @@ function submitForm() {
*/ */
function handleDelete(menuId: number) { function handleDelete(menuId: number) {
if (!menuId) { if (!menuId) {
ElMessage.warning('请勾选删除项'); ElMessage.warning("请勾选删除项");
return false; return false;
} }
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', { ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}) })
.then(() => { .then(() => {
deleteMenu(menuId).then(() => { deleteMenu(menuId).then(() => {
ElMessage.success('删除成功'); ElMessage.success("删除成功");
handleQuery(); handleQuery();
}); });
}) })
.catch(() => ElMessage.info('已取消删除')); .catch(() => ElMessage.info("已取消删除"));
} }
/** /**

69
src/views/system/role/index.vue
View File

@@ -1,10 +1,9 @@
<script lang="ts">
export default {
name: 'role'
};
</script>
<script setup lang="ts"> <script setup lang="ts">
defineOptions({
name: "role",
inheritAttrs: false,
});
import { import {
getRolePage, getRolePage,
updateRole, updateRole,
@@ -12,11 +11,11 @@ import {
addRole, addRole,
deleteRoles, deleteRoles,
getRoleMenuIds, getRoleMenuIds,
updateRoleMenus updateRoleMenus,
} from '@/api/role'; } from "@/api/role";
import { listMenuOptions } from '@/api/menu'; import { listMenuOptions } from "@/api/menu";
import { RolePageVO, RoleForm, RoleQuery } from '@/api/role/types'; import { RolePageVO, RoleForm, RoleQuery } from "@/api/role/types";
const queryFormRef = ref(ElForm); const queryFormRef = ref(ElForm);
const roleFormRef = ref(ElForm); const roleFormRef = ref(ElForm);
@@ -28,27 +27,27 @@ const total = ref(0);
const queryParams = reactive<RoleQuery>({ const queryParams = reactive<RoleQuery>({
pageNum: 1, pageNum: 1,
pageSize: 10 pageSize: 10,
}); });
const roleList = ref<RolePageVO[]>(); const roleList = ref<RolePageVO[]>();
const dialog = reactive<DialogOption>({ const dialog = reactive<DialogOption>({
visible: false visible: false,
}); });
const formData = reactive<RoleForm>({ const formData = reactive<RoleForm>({
sort: 1, sort: 1,
status: 1, status: 1,
code: '', code: "",
name: '' name: "",
}); });
const rules = reactive({ const rules = reactive({
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }], name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }], code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
dataScope: [{ required: true, message: '请选择数据权限', trigger: 'blur' }], dataScope: [{ required: true, message: "请选择数据权限", trigger: "blur" }],
status: [{ required: true, message: '请选择状态', trigger: 'blur' }] status: [{ required: true, message: "请选择状态", trigger: "blur" }],
}); });
const menuDialogVisible = ref(false); const menuDialogVisible = ref(false);
@@ -99,12 +98,12 @@ function handleSelectionChange(selection: any) {
function openDialog(roleId?: number) { function openDialog(roleId?: number) {
dialog.visible = true; dialog.visible = true;
if (roleId) { if (roleId) {
dialog.title = '修改角色'; dialog.title = "修改角色";
getRoleForm(roleId).then(({ data }) => { getRoleForm(roleId).then(({ data }) => {
Object.assign(formData, data); Object.assign(formData, data);
}); });
} else { } else {
dialog.title = '新增角色'; dialog.title = "新增角色";
} }
} }
@@ -119,7 +118,7 @@ function handleSubmit() {
if (roleId) { if (roleId) {
updateRole(roleId, formData) updateRole(roleId, formData)
.then(() => { .then(() => {
ElMessage.success('修改成功'); ElMessage.success("修改成功");
closeDialog(); closeDialog();
resetQuery(); resetQuery();
}) })
@@ -127,7 +126,7 @@ function handleSubmit() {
} else { } else {
addRole(formData) addRole(formData)
.then(() => { .then(() => {
ElMessage.success('新增成功'); ElMessage.success("新增成功");
closeDialog(); closeDialog();
resetQuery(); resetQuery();
}) })
@@ -161,21 +160,21 @@ function resetForm() {
* 删除 * 删除
*/ */
function handleDelete(roleId?: number) { function handleDelete(roleId?: number) {
const roleIds = [roleId || ids.value].join(','); const roleIds = [roleId || ids.value].join(",");
if (!roleIds) { if (!roleIds) {
ElMessage.warning('请勾选删除项'); ElMessage.warning("请勾选删除项");
return; return;
} }
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', { ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}).then(() => { }).then(() => {
loading.value = true; loading.value = true;
deleteRoles(roleIds) deleteRoles(roleIds)
.then(() => { .then(() => {
ElMessage.success('删除成功'); ElMessage.success("删除成功");
resetQuery(); resetQuery();
}) })
.finally(() => (loading.value = false)); .finally(() => (loading.value = false));
@@ -190,20 +189,20 @@ function openMenuDialog(row: RolePageVO) {
if (roleId) { if (roleId) {
checkedRole = { checkedRole = {
id: roleId, id: roleId,
name: row.name name: row.name,
}; };
menuDialogVisible.value = true; menuDialogVisible.value = true;
loading.value = true; loading.value = true;
// 获取所有的菜单 // 获取所有的菜单
listMenuOptions().then(response => { listMenuOptions().then((response) => {
menuList.value = response.data; menuList.value = response.data;
// 回显角色已拥有的菜单 // 回显角色已拥有的菜单
getRoleMenuIds(roleId) getRoleMenuIds(roleId)
.then(({ data }) => { .then(({ data }) => {
const checkedMenuIds = data; const checkedMenuIds = data;
console.log('勾选权限', checkedMenuIds); console.log("勾选权限", checkedMenuIds);
checkedMenuIds.forEach(menuId => checkedMenuIds.forEach((menuId) =>
menuRef.value.setChecked(menuId, true, false) menuRef.value.setChecked(menuId, true, false)
); );
}) })
@@ -226,8 +225,8 @@ function handleRoleMenuSubmit() {
loading.value = true; loading.value = true;
updateRoleMenus(roleId, checkedMenuIds) updateRoleMenus(roleId, checkedMenuIds)
.then(res => { .then((res) => {
ElMessage.success('分配权限成功'); ElMessage.success("分配权限成功");
menuDialogVisible.value = false; menuDialogVisible.value = false;
resetQuery(); resetQuery();
}) })

13
src/views/system/user/index.vue
View File

@@ -1,10 +1,11 @@
<script lang="ts">
export default {
name: "user",
};
</script>
<script setup lang="ts"> <script setup lang="ts">
/**
* @see {@link https://vuejs.org/api/sfc-script-setup.html#defineoptions}
*/
defineOptions({
name: "user",
inheritAttrs: false,
});
import { UploadFile } from "element-plus"; import { UploadFile } from "element-plus";
import { import {
getUserPage, getUserPage,