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

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

This commit is contained in:
郝先瑞 2023-05-12 13:11:47 +08:00
parent 7765c06bfd
commit fa5923ccb0
6 changed files with 161 additions and 165 deletions
Show Stats 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">
defineOptions({
name: "dept",
inheritAttrs: false,
});
import {
getDeptForm,
deleteDept,
updateDept,
addDept,
listDeptOptions,
listDepts
} from '@/api/dept';
listDepts,
} from "@/api/dept";
import { DeptVO, DeptForm, DeptQuery } from '@/api/dept/types';
import { DeptVO, DeptForm, DeptQuery } from "@/api/dept/types";
const queryFormRef = ref(ElForm);
const deptFormRef = ref(ElForm);
@ -22,7 +21,7 @@ const deptFormRef = ref(ElForm);
const loading = ref(false);
const ids = ref<number[]>([]);
const dialog = reactive<DialogOption>({
visible: false
visible: false,
});
const queryParams = reactive<DeptQuery>({});
@ -33,13 +32,13 @@ const deptOptions = ref<OptionType[]>();
const formData = reactive<DeptForm>({
status: 1,
parentId: 0,
sort: 1
sort: 1,
});
const rules = reactive({
parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }]
parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
name: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
sort: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
});
/**
@ -72,13 +71,13 @@ function handleSelectionChange(selection: any) {
* 获取部门下拉数据
*/
async function getDeptOptions() {
listDeptOptions().then(response => {
listDeptOptions().then((response) => {
deptOptions.value = [
{
value: 0,
label: '顶级部门',
children: response.data
}
label: "顶级部门",
children: response.data,
},
];
});
}
@ -93,12 +92,12 @@ async function openDialog(parentId?: number, deptId?: number) {
await getDeptOptions();
dialog.visible = true;
if (deptId) {
dialog.title = '修改部门';
dialog.title = "修改部门";
getDeptForm(deptId).then(({ data }) => {
Object.assign(formData, data);
});
} else {
dialog.title = '新增部门';
dialog.title = "新增部门";
formData.parentId = parentId ?? 0;
}
}
@ -114,7 +113,7 @@ function handleSubmit() {
if (deptId) {
updateDept(deptId, formData)
.then(() => {
ElMessage.success('修改成功');
ElMessage.success("修改成功");
closeDialog();
handleQuery();
})
@ -122,7 +121,7 @@ function handleSubmit() {
} else {
addDept(formData)
.then(() => {
ElMessage.success('新增成功');
ElMessage.success("新增成功");
closeDialog();
handleQuery();
})
@ -136,20 +135,20 @@ function handleSubmit() {
* 删除部门
*/
function handleDelete(deptId?: number) {
const deptIds = [deptId || ids.value].join(',');
const deptIds = [deptId || ids.value].join(",");
if (!deptIds) {
ElMessage.warning('请勾选删除项');
ElMessage.warning("请勾选删除项");
return;
}
ElMessageBox.confirm(`确认删除已选中的数据项?`, '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
ElMessageBox.confirm(`确认删除已选中的数据项?`, "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
deleteDept(deptIds).then(() => {
ElMessage.success('删除成功');
ElMessage.success("删除成功");
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">
defineOptions({
name: "dictData",
inheritAttrs: false,
});
import {
getDictPage,
getDictFormData,
addDict,
updateDict,
deleteDict
} from '@/api/dict';
import { DictPageVO, DictForm, DictQuery } from '@/api/dict/types';
deleteDict,
} from "@/api/dict";
import { DictPageVO, DictForm, DictQuery } from "@/api/dict/types";
const props = defineProps({
typeCode: {
type: String,
default: () => {
return '';
}
return "";
},
},
typeName: {
type: String,
default: () => {
return '';
}
}
return "";
},
},
});
watch(
@ -48,24 +47,24 @@ const total = ref(0);
const queryParams = reactive<DictQuery>({
pageNum: 1,
pageSize: 10,
typeCode: props.typeCode
typeCode: props.typeCode,
});
const dictList = ref<DictPageVO[]>();
const dialog = reactive<DialogOption>({
visible: false
visible: false,
});
const formData = reactive<DictForm>({
status: 1,
typeCode: props.typeCode,
sort: 1
sort: 1,
});
const rules = reactive({
name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
value: [{ required: true, message: '请输入字典值', trigger: 'blur' }]
name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
});
/**
@ -109,12 +108,12 @@ function handleSelectionChange(selection: any) {
function openDialog(dictId?: number) {
dialog.visible = true;
if (dictId) {
dialog.title = '修改字典';
dialog.title = "修改字典";
getDictFormData(dictId).then(({ data }) => {
Object.assign(formData, data);
});
} else {
dialog.title = '新增字典';
dialog.title = "新增字典";
}
}
@ -129,7 +128,7 @@ function handleSubmit() {
if (dictId) {
updateDict(dictId, formData)
.then(() => {
ElMessage.success('修改成功');
ElMessage.success("修改成功");
closeDialog();
resetQuery();
})
@ -137,7 +136,7 @@ function handleSubmit() {
} else {
addDict(formData)
.then(() => {
ElMessage.success('新增成功');
ElMessage.success("新增成功");
closeDialog();
resetQuery();
})
@ -172,19 +171,19 @@ function resetForm() {
* 删除字典
*/
function handleDelete(dictId?: number) {
const dictIds = [dictId || ids.value].join(',');
const dictIds = [dictId || ids.value].join(",");
if (!dictIds) {
ElMessage.warning('请勾选删除项');
ElMessage.warning("请勾选删除项");
return;
}
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
deleteDict(dictIds).then(() => {
ElMessage.success('删除成功');
ElMessage.success("删除成功");
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">
defineOptions({
name: "dictType",
inheritAttrs: false,
});
import {
getDictTypePage,
getDictTypeForm,
addDictType,
updateDictType,
deleteDictTypes
} from '@/api/dict';
deleteDictTypes,
} 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 dataFormRef = ref(ElForm);
@ -27,22 +26,22 @@ const total = ref(0);
const queryParams = reactive<DictTypeQuery>({
pageNum: 1,
pageSize: 10
pageSize: 10,
});
const dictTypeList = ref<DictTypePageVO[]>();
const dialog = reactive<DialogOption>({
visible: false
visible: false,
});
const formData = reactive<DictTypeForm>({
status: 1
status: 1,
});
const rules = reactive({
name: [{ required: true, message: '请输入字典类型名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入字典类型编码', trigger: 'blur' }]
name: [{ required: true, message: "请输入字典类型名称", trigger: "blur" }],
code: [{ required: true, message: "请输入字典类型编码", trigger: "blur" }],
});
/**
@ -84,12 +83,12 @@ function handleSelectionChange(selection: any) {
function openDialog(dicTypeId?: number) {
dialog.visible = true;
if (dicTypeId) {
dialog.title = '修改字典类型';
dialog.title = "修改字典类型";
getDictTypeForm(dicTypeId).then(({ data }) => {
Object.assign(formData, data);
});
} else {
dialog.title = '新增字典类型';
dialog.title = "新增字典类型";
}
}
@ -104,7 +103,7 @@ function handleSubmit() {
if (dictTypeId) {
updateDictType(dictTypeId, formData)
.then(() => {
ElMessage.success('修改成功');
ElMessage.success("修改成功");
closeDialog();
handleQuery();
})
@ -112,7 +111,7 @@ function handleSubmit() {
} else {
addDictType(formData)
.then(() => {
ElMessage.success('新增成功');
ElMessage.success("新增成功");
closeDialog();
handleQuery();
})
@ -145,37 +144,37 @@ function resetForm() {
* 删除字典类型
*/
function handleDelete(dictTypeId?: number) {
const dictTypeIds = [dictTypeId || ids.value].join(',');
const dictTypeIds = [dictTypeId || ids.value].join(",");
if (!dictTypeIds) {
ElMessage.warning('请勾选删除项');
ElMessage.warning("请勾选删除项");
return;
}
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
deleteDictTypes(dictTypeIds).then(() => {
ElMessage.success('删除成功');
ElMessage.success("删除成功");
resetQuery();
});
});
}
const dictDataDialog = reactive<DialogOption>({
visible: false
visible: false,
});
// 当前选中的字典类型
const selectedDictType = reactive({ typeCode: '', typeName: '' });
const selectedDictType = reactive({ typeCode: "", typeName: "" });
/**
* 打开字典弹窗
*/
function openDictDialog(row: DictTypePageVO) {
dictDataDialog.visible = true;
dictDataDialog.title = '【' + row.name + '】字典数据';
dictDataDialog.title = "【" + row.name + "】字典数据";
selectedDictType.typeCode = row.code;
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">
import { MenuQuery, MenuForm, MenuVO } from '@/api/menu/types';
defineOptions({
name: "cmenu",
inheritAttrs: false,
});
import { MenuQuery, MenuForm, MenuVO } from "@/api/menu/types";
import {
listMenus,
getMenuForm,
listMenuOptions,
addMenu,
deleteMenu,
updateMenu
} from '@/api/menu';
updateMenu,
} from "@/api/menu";
import { MenuTypeEnum } from '@/enums/MenuTypeEnum';
import { MenuTypeEnum } from "@/enums/MenuTypeEnum";
import SvgIcon from '@/components/SvgIcon/index.vue';
import IconSelect from '@/components/IconSelect/index.vue';
import SvgIcon from "@/components/SvgIcon/index.vue";
import IconSelect from "@/components/IconSelect/index.vue";
const queryFormRef = ref(ElForm);
const menuFormRef = ref(ElForm);
const loading = ref(false);
const dialog = reactive<DialogOption>({
visible: false
visible: false,
});
const queryParams = reactive<MenuQuery>({});
@ -37,25 +36,25 @@ const formData = reactive<MenuForm>({
parentId: 0,
visible: 1,
sort: 1,
type: MenuTypeEnum.MENU
type: MenuTypeEnum.MENU,
});
const rules = reactive({
parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }],
name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
parentId: [{ required: true, message: "请选择顶级菜单", trigger: "blur" }],
name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
path: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
component: [
{ required: true, message: '请输入组件完整路径', trigger: 'blur' }
]
{ required: true, message: "请输入组件完整路径", trigger: "blur" },
],
});
// 选择表格的行菜单ID
const selectedRowMenuId = ref<number | undefined>();
const menuCacheData = reactive({
type: '',
path: ''
type: "",
path: "",
});
/**
@ -99,19 +98,19 @@ function onRowClick(row: MenuVO) {
function openDialog(parentId?: number, menuId?: number) {
listMenuOptions()
.then(({ data }) => {
menuOptions.value = [{ value: 0, label: '顶级菜单', children: data }];
menuOptions.value = [{ value: 0, label: "顶级菜单", children: data }];
})
.then(() => {
dialog.visible = true;
if (menuId) {
dialog.title = '编辑菜单';
dialog.title = "编辑菜单";
getMenuForm(menuId).then(({ data }) => {
Object.assign(formData, data);
menuCacheData.type = data.type;
menuCacheData.path = data.path ?? '';
menuCacheData.path = data.path ?? "";
});
} else {
dialog.title = '新增菜单';
dialog.title = "新增菜单";
formData.parentId = parentId;
}
});
@ -123,7 +122,7 @@ function openDialog(parentId?: number, menuId?: number) {
function onMenuTypeChange() {
// 如果菜单类型改变，清空路由路径；未改变在切换后还原路由路径
if (formData.type !== menuCacheData.type) {
formData.path = '';
formData.path = "";
} else {
formData.path = menuCacheData.path;
}
@ -138,13 +137,13 @@ function submitForm() {
const menuId = formData.id;
if (menuId) {
updateMenu(menuId, formData).then(() => {
ElMessage.success('修改成功');
ElMessage.success("修改成功");
closeDialog();
handleQuery();
});
} else {
addMenu(formData).then(() => {
ElMessage.success('新增成功');
ElMessage.success("新增成功");
closeDialog();
handleQuery();
});
@ -158,22 +157,22 @@ function submitForm() {
*/
function handleDelete(menuId: number) {
if (!menuId) {
ElMessage.warning('请勾选删除项');
ElMessage.warning("请勾选删除项");
return false;
}
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
deleteMenu(menuId).then(() => {
ElMessage.success('删除成功');
ElMessage.success("删除成功");
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">
defineOptions({
name: "role",
inheritAttrs: false,
});
import {
getRolePage,
updateRole,
@ -12,11 +11,11 @@ import {
addRole,
deleteRoles,
getRoleMenuIds,
updateRoleMenus
} from '@/api/role';
import { listMenuOptions } from '@/api/menu';
updateRoleMenus,
} from "@/api/role";
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 roleFormRef = ref(ElForm);
@ -28,27 +27,27 @@ const total = ref(0);
const queryParams = reactive<RoleQuery>({
pageNum: 1,
pageSize: 10
pageSize: 10,
});
const roleList = ref<RolePageVO[]>();
const dialog = reactive<DialogOption>({
visible: false
visible: false,
});
const formData = reactive<RoleForm>({
sort: 1,
status: 1,
code: '',
name: ''
code: "",
name: "",
});
const rules = reactive({
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
dataScope: [{ required: true, message: '请选择数据权限', trigger: 'blur' }],
status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
dataScope: [{ required: true, message: "请选择数据权限", trigger: "blur" }],
status: [{ required: true, message: "请选择状态", trigger: "blur" }],
});
const menuDialogVisible = ref(false);
@ -99,12 +98,12 @@ function handleSelectionChange(selection: any) {
function openDialog(roleId?: number) {
dialog.visible = true;
if (roleId) {
dialog.title = '修改角色';
dialog.title = "修改角色";
getRoleForm(roleId).then(({ data }) => {
Object.assign(formData, data);
});
} else {
dialog.title = '新增角色';
dialog.title = "新增角色";
}
}
@ -119,7 +118,7 @@ function handleSubmit() {
if (roleId) {
updateRole(roleId, formData)
.then(() => {
ElMessage.success('修改成功');
ElMessage.success("修改成功");
closeDialog();
resetQuery();
})
@ -127,7 +126,7 @@ function handleSubmit() {
} else {
addRole(formData)
.then(() => {
ElMessage.success('新增成功');
ElMessage.success("新增成功");
closeDialog();
resetQuery();
})
@ -161,21 +160,21 @@ function resetForm() {
* 删除
*/
function handleDelete(roleId?: number) {
const roleIds = [roleId || ids.value].join(',');
const roleIds = [roleId || ids.value].join(",");
if (!roleIds) {
ElMessage.warning('请勾选删除项');
ElMessage.warning("请勾选删除项");
return;
}
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
loading.value = true;
deleteRoles(roleIds)
.then(() => {
ElMessage.success('删除成功');
ElMessage.success("删除成功");
resetQuery();
})
.finally(() => (loading.value = false));
@ -190,20 +189,20 @@ function openMenuDialog(row: RolePageVO) {
if (roleId) {
checkedRole = {
id: roleId,
name: row.name
name: row.name,
};
menuDialogVisible.value = true;
loading.value = true;
// 获取所有的菜单
listMenuOptions().then(response => {
listMenuOptions().then((response) => {
menuList.value = response.data;
// 回显角色已拥有的菜单
getRoleMenuIds(roleId)
.then(({ data }) => {
const checkedMenuIds = data;
console.log('勾选权限', checkedMenuIds);
checkedMenuIds.forEach(menuId =>
console.log("勾选权限", checkedMenuIds);
checkedMenuIds.forEach((menuId) =>
menuRef.value.setChecked(menuId, true, false)
);
})
@ -226,8 +225,8 @@ function handleRoleMenuSubmit() {
loading.value = true;
updateRoleMenus(roleId, checkedMenuIds)
.then(res => {
ElMessage.success('分配权限成功');
.then((res) => {
ElMessage.success("分配权限成功");
menuDialogVisible.value = false;
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">
/**
* @see {@link https://vuejs.org/api/sfc-script-setup.html#defineoptions}
*/
defineOptions({
name: "user",
inheritAttrs: false,
});
import { UploadFile } from "element-plus";
import {
getUserPage,