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

refactor: ♻️ 重构API为静态方法实现模块化管理，并将types.ts重命名为model.ts用于存放接口模型定义

Browse Source
This commit is contained in:
hxr
2024-05-04 12:53:08 +08:00
parent a211053176
commit 088bc5e48f
37 changed files with 875 additions and 831 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -151,22 +151,14 @@
</template>
<script setup lang="ts">
import {
getDeptForm,
deleteDept,
updateDept,
addDept,
getDeptOptions,
listDepts,
} from "@/api/dept";
import { DeptVO, DeptForm, DeptQuery } from "@/api/dept/types";
defineOptions({
name: "Dept",
inheritAttrs: false,
});
import DeptAPI from "@/api/dept";
import { DeptVO, DeptForm, DeptQuery } from "@/api/dept/model";
const queryFormRef = ref(ElForm);
const deptFormRef = ref(ElForm);
@@ -197,7 +189,7 @@ const rules = reactive({
/** 查询 */
function handleQuery() {
loading.value = true;
listDepts(queryParams).then(({ data }) => {
DeptAPI.getList(queryParams).then((data) => {
deptList.value = data;
loading.value = false;
});
@@ -216,12 +208,12 @@ function handleSelectionChange(selection: any) {
/** 获取部门下拉数据 */
async function loadDeptOptions() {
getDeptOptions().then((response) => {
DeptAPI.getOptions().then((data) => {
deptOptions.value = [
{
value: 0,
label: "顶级部门",
children: response.data,
children: data,
},
];
});
@@ -238,7 +230,7 @@ async function openDialog(parentId?: number, deptId?: number) {
dialog.visible = true;
if (deptId) {
dialog.title = "修改部门";
getDeptForm(deptId).then(({ data }) => {
DeptAPI.getFormData(deptId).then((data) => {
Object.assign(formData, data);
});
} else {
@@ -254,7 +246,7 @@ function handleSubmit() {
const deptId = formData.id;
loading.value = true;
if (deptId) {
updateDept(deptId, formData)
DeptAPI.update(deptId, formData)
.then(() => {
ElMessage.success("修改成功");
closeDialog();
@@ -262,7 +254,7 @@ function handleSubmit() {
})
.finally(() => (loading.value = false));
} else {
addDept(formData)
DeptAPI.update(formData)
.then(() => {
ElMessage.success("新增成功");
closeDialog();
@@ -288,7 +280,7 @@ function handleDelete(deptId?: number) {
cancelButtonText: "取消",
type: "warning",
}).then(() => {
deleteDept(deptIds).then(() => {
DeptAPI.deleteByIds(deptIds).then(() => {
ElMessage.success("删除成功");
resetQuery();
});
@@ -316,3 +308,4 @@ onMounted(() => {
handleQuery();
});
</script>
@/api/dept/model

49
src/views/system/dict/components/dict-item.vue
View File

@@ -129,20 +129,14 @@
</template>
<script setup lang="ts">
import {
getDictPage,
getDictFormData,
addDict,
updateDict,
deleteDict,
} from "@/api/dict";
import { DictPageVO, DictForm, DictQuery } from "@/api/dict/types";
defineOptions({
name: "DictData",
inheritAttrs: false,
});
import DictAPI from "@/api/dict";
import { DictPageVO, DictForm, DictQuery } from "@/api/dict/model";
const props = defineProps({
typeCode: {
type: String,
@@ -198,14 +192,12 @@ const rules = reactive({
value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
});
/**
* 查询
*/
/** 查询 */
function handleQuery() {
if (queryParams.typeCode) {
loading.value = true;
getDictPage(queryParams)
.then(({ data }) => {
DictAPI.getDictPage(queryParams)
.then((data) => {
dictList.value = data.list;
total.value = data.total;
})
@@ -213,9 +205,7 @@ function handleQuery() {
}
}
/**
* 重置查询
*/
/** 重置查询 */
function resetQuery() {
queryFormRef.value.resetFields();
queryParams.pageNum = 1;
@@ -240,7 +230,7 @@ function openDialog(dictId?: number) {
dialog.visible = true;
if (dictId) {
dialog.title = "修改字典";
getDictFormData(dictId).then(({ data }) => {
DictAPI.getDictFormData(dictId).then((data) => {
Object.assign(formData, data);
});
} else {
@@ -248,16 +238,14 @@ function openDialog(dictId?: number) {
}
}
/**
* 字典表单提交
*/
/** 字典表单提交 */
function handleSubmit() {
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
loading.value = false;
const dictId = formData.id;
if (dictId) {
updateDict(dictId, formData)
DictAPI.updateDict(dictId, formData)
.then(() => {
ElMessage.success("修改成功");
closeDialog();
@@ -265,7 +253,7 @@ function handleSubmit() {
})
.finally(() => (loading.value = false));
} else {
addDict(formData)
DictAPI.addDict(formData)
.then(() => {
ElMessage.success("新增成功");
closeDialog();
@@ -277,17 +265,13 @@ function handleSubmit() {
});
}
/**
* 关闭弹窗
*/
/** 关闭弹窗 */
function closeDialog() {
dialog.visible = false;
resetForm();
}
/**
* 重置表单
*/
/** 重置表单 */
function resetForm() {
dataFormRef.value.resetFields();
dataFormRef.value.clearValidate();
@@ -298,9 +282,7 @@ function resetForm() {
formData.typeCode = props.typeCode;
}
/**
* 删除字典
*/
/** 删除字典 */
function handleDelete(dictId?: number) {
const dictIds = [dictId || ids.value].join(",");
if (!dictIds) {
@@ -313,7 +295,7 @@ function handleDelete(dictId?: number) {
cancelButtonText: "取消",
type: "warning",
}).then(() => {
deleteDict(dictIds).then(() => {
DictAPI.deleteDictByIds(dictIds).then(() => {
ElMessage.success("删除成功");
resetQuery();
});
@@ -324,3 +306,4 @@ onMounted(() => {
handleQuery();
});
</script>
@/api/dict/model

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

@@ -148,21 +148,15 @@
</template>
<script setup lang="ts">
import {
getDictTypePage,
getDictTypeForm,
addDictType,
updateDictType,
deleteDictTypes,
} from "@/api/dict";
import { DictTypePageVO, DictTypeQuery, DictTypeForm } from "@/api/dict/types";
defineOptions({
name: "DictType",
inheritAttrs: false,
});
import DictAPI from "@/api/dict";
import { DictTypePageVO, DictTypeQuery, DictTypeForm } from "@/api/dict/model";
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
@@ -194,8 +188,8 @@ const rules = reactive({
/** 查询 */
function handleQuery() {
loading.value = true;
getDictTypePage(queryParams)
.then(({ data }) => {
DictAPI.getDictTypePage(queryParams)
.then((data) => {
dictTypeList.value = data.list;
total.value = data.total;
})
@@ -227,7 +221,7 @@ function openDialog(dicTypeId?: number) {
dialog.visible = true;
if (dicTypeId) {
dialog.title = "修改字典类型";
getDictTypeForm(dicTypeId).then(({ data }) => {
DictAPI.getDictTypeForm(dicTypeId).then((data) => {
Object.assign(formData, data);
});
} else {
@@ -242,7 +236,7 @@ function handleSubmit() {
loading.value = false;
const dictTypeId = formData.id;
if (dictTypeId) {
updateDictType(dictTypeId, formData)
DictAPI.updateDictType(dictTypeId, formData)
.then(() => {
ElMessage.success("修改成功");
closeDialog();
@@ -250,7 +244,7 @@ function handleSubmit() {
})
.finally(() => (loading.value = false));
} else {
addDictType(formData)
DictAPI.addDictType(formData)
.then(() => {
ElMessage.success("新增成功");
closeDialog();
@@ -290,7 +284,7 @@ function handleDelete(dictTypeId?: number) {
cancelButtonText: "取消",
type: "warning",
}).then(() => {
deleteDictTypes(dictTypeIds).then(() => {
DictAPI.deleteDictTypes(dictTypeIds).then(() => {
ElMessage.success("删除成功");
resetQuery();
});
@@ -322,3 +316,4 @@ onMounted(() => {
handleQuery();
});
</script>
@/api/dict/model

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

@@ -312,21 +312,12 @@
<script setup lang="ts">
defineOptions({
// eslint-disable-next-line vue/no-reserved-component-names
name: "Menu",
inheritAttrs: false,
});
import { MenuQuery, MenuForm, MenuVO } from "@/api/menu/types";
import {
listMenus,
getMenuForm,
getMenuOptions,
addMenu,
deleteMenu,
updateMenu,
} from "@/api/menu";
import MenuAPI from "@/api/menu";
import { MenuQuery, MenuForm, MenuVO } from "@/api/menu/model";
import { MenuTypeEnum } from "@/enums/MenuTypeEnum";
const queryFormRef = ref(ElForm);
@@ -376,8 +367,8 @@ const menuCacheData = reactive({
function handleQuery() {
// 重置父组件
loading.value = true;
listMenus(queryParams)
.then(({ data }) => {
MenuAPI.getList(queryParams)
.then((data) => {
menuList.value = data;
})
.then(() => {
@@ -403,15 +394,15 @@ function onRowClick(row: MenuVO) {
* @param menuId 菜单ID
*/
function openDialog(parentId?: number, menuId?: number) {
getMenuOptions()
.then(({ data }) => {
MenuAPI.getOptions()
.then((data) => {
menuOptions.value = [{ value: 0, label: "顶级菜单", children: data }];
})
.then(() => {
dialog.visible = true;
if (menuId) {
dialog.title = "编辑菜单";
getMenuForm(menuId).then(({ data }) => {
MenuAPI.getFormData(menuId).then((data) => {
Object.assign(formData, data);
menuCacheData.type = data.type;
menuCacheData.path = data.path ?? "";
@@ -439,13 +430,13 @@ function submitForm() {
if (isValid) {
const menuId = formData.id;
if (menuId) {
updateMenu(menuId, formData).then(() => {
MenuAPI.update(menuId, formData).then(() => {
ElMessage.success("修改成功");
closeDialog();
handleQuery();
});
} else {
addMenu(formData).then(() => {
MenuAPI.add(formData).then(() => {
ElMessage.success("新增成功");
closeDialog();
handleQuery();
@@ -468,7 +459,7 @@ function handleDelete(menuId: number) {
type: "warning",
})
.then(() => {
deleteMenu(menuId).then(() => {
MenuAPI.deleteById(menuId).then(() => {
ElMessage.success("删除成功");
handleQuery();
});
@@ -503,3 +494,4 @@ onMounted(() => {
handleQuery();
});
</script>
@/api/menu/model

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

@@ -181,18 +181,10 @@
</template>
<script setup lang="ts">
import {
getRolePage,
updateRole,
getRoleForm,
addRole,
deleteRoles,
getRoleMenuIds,
updateRoleMenus,
} from "@/api/role";
import { getMenuOptions } from "@/api/menu";
import RoleAPI from "@/api/role";
import MenuAPI from "@/api/menu";
import { RolePageVO, RoleForm, RoleQuery } from "@/api/role/types";
import { RolePageVO, RoleForm, RoleQuery } from "@/api/role/model";
defineOptions({
name: "Role",
@@ -246,8 +238,8 @@ let checkedRole: CheckedRole = reactive({});
/** 查询 */
function handleQuery() {
loading.value = true;
getRolePage(queryParams)
.then(({ data }) => {
RoleAPI.getPage(queryParams)
.then((data) => {
roleList.value = data.list;
total.value = data.total;
})
@@ -272,7 +264,7 @@ function openDialog(roleId?: number) {
dialog.visible = true;
if (roleId) {
dialog.title = "修改角色";
getRoleForm(roleId).then(({ data }) => {
RoleAPI.getFormData(roleId).then((data) => {
Object.assign(formData, data);
});
} else {
@@ -287,7 +279,7 @@ function handleSubmit() {
loading.value = true;
const roleId = formData.id;
if (roleId) {
updateRole(roleId, formData)
RoleAPI.update(roleId, formData)
.then(() => {
ElMessage.success("修改成功");
closeDialog();
@@ -295,7 +287,7 @@ function handleSubmit() {
})
.finally(() => (loading.value = false));
} else {
addRole(formData)
RoleAPI.add(formData)
.then(() => {
ElMessage.success("新增成功");
closeDialog();
@@ -337,7 +329,7 @@ function handleDelete(roleId?: number) {
type: "warning",
}).then(() => {
loading.value = true;
deleteRoles(roleIds)
RoleAPI.deleteByIds(roleIds)
.then(() => {
ElMessage.success("删除成功");
resetQuery();
@@ -347,7 +339,7 @@ function handleDelete(roleId?: number) {
}
/** 打开分配菜单弹窗 */
function openMenuDialog(row: RolePageVO) {
async function openMenuDialog(row: RolePageVO) {
const roleId = row.id;
if (roleId) {
checkedRole = {
@@ -358,20 +350,19 @@ function openMenuDialog(row: RolePageVO) {
loading.value = true;
// 获取所有的菜单
getMenuOptions().then((response) => {
menuList.value = response.data;
// 回显角色已拥有的菜单
getRoleMenuIds(roleId)
.then(({ data }) => {
const checkedMenuIds = data;
checkedMenuIds.forEach((menuId) =>
menuRef.value.setChecked(menuId, true, false)
);
})
.finally(() => {
loading.value = false;
});
});
menuList.value = await MenuAPI.getOptions();
// 回显角色已拥有的菜单
RoleAPI.getRoleMenuIds(roleId)
.then((data) => {
const checkedMenuIds = data;
checkedMenuIds.forEach((menuId) =>
menuRef.value.setChecked(menuId, true, false)
);
})
.finally(() => {
loading.value = false;
});
}
}
@@ -384,7 +375,7 @@ function handleRoleMenuSubmit() {
.map((node: any) => node.value);
loading.value = true;
updateRoleMenus(roleId, checkedMenuIds)
RoleAPI.updateRoleMenus(roleId, checkedMenuIds)
.then(() => {
ElMessage.success("分配权限成功");
menuDialogVisible.value = false;
@@ -400,3 +391,4 @@ onMounted(() => {
handleQuery();
});
</script>
@/api/role/model

7
src/views/system/user/components/dept-tree.vue
View File

@@ -21,8 +21,7 @@
</template>
<script setup lang="ts">
import { getDeptOptions } from "@/api/dept";
import DeptAPI from "@/api/dept";
const props = defineProps({
modelValue: {
type: [Number],
@@ -62,8 +61,8 @@ function handleNodeClick(data: { [key: string]: any }) {
}
onBeforeMount(() => {
getDeptOptions().then((response) => {
deptList.value = response.data;
DeptAPI.getOptions().then((data) => {
deptList.value = data;
});
});
</script>

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

@@ -332,21 +332,11 @@ defineOptions({
inheritAttrs: false,
});
import {
getUserPage,
getUserForm,
deleteUsers,
addUser,
updateUser,
updateUserPassword,
downloadTemplateApi,
exportUser,
importUser,
} from "@/api/user";
import { getDeptOptions } from "@/api/dept";
import { getRoleOptions } from "@/api/role";
import UserAPI from "@/api/user";
import DeptAPI from "@/api/dept";
import RoleAPI from "@/api/role";
import { UserForm, UserQuery, UserPageVO } from "@/api/user/types";
import { UserForm, UserQuery, UserPageVO } from "@/api/user/model";
import type { UploadInstance } from "element-plus";
import { genFileId } from "element-plus";
@@ -418,8 +408,9 @@ const rules = reactive({
/** 查询 */
function handleQuery() {
loading.value = true;
getUserPage(queryParams)
.then(({ data }) => {
UserAPI.getPage(queryParams)
.then((data) => {
console.log("handleQuery", data);
pageData.value = data.list;
total.value = data.total;
})
@@ -458,7 +449,7 @@ function resetPassword(row: { [key: string]: any }) {
ElMessage.warning("请输入新密码");
return false;
}
updateUserPassword(row.id, value).then(() => {
UserAPI.updatePassword(row.id, value).then(() => {
ElMessage.success("密码重置成功，新密码是：" + value);
});
});
@@ -466,15 +457,15 @@ function resetPassword(row: { [key: string]: any }) {
/** 加载角色下拉数据源 */
async function loadRoleOptions() {
getRoleOptions().then((response) => {
roleList.value = response.data;
RoleAPI.getOptions().then((data) => {
roleList.value = data;
});
}
/** 加载部门下拉数据源 */
async function loadDeptOptions() {
getDeptOptions().then((response) => {
deptList.value = response.data;
DeptAPI.getOptions().then((data) => {
deptList.value = data;
});
}
@@ -494,7 +485,7 @@ async function openDialog(type: string, id?: number) {
await loadRoleOptions();
if (id) {
dialog.title = "修改用户";
getUserForm(id).then(({ data }) => {
UserAPI.getFormData(id).then((data) => {
Object.assign(formData, { ...data });
});
} else {
@@ -535,7 +526,7 @@ const handleSubmit = useThrottleFn(() => {
const userId = formData.id;
loading.value = true;
if (userId) {
updateUser(userId, formData)
UserAPI.update(userId, formData)
.then(() => {
ElMessage.success("修改用户成功");
closeDialog();
@@ -543,7 +534,7 @@ const handleSubmit = useThrottleFn(() => {
})
.finally(() => (loading.value = false));
} else {
addUser(formData)
UserAPI.add(formData)
.then(() => {
ElMessage.success("新增用户成功");
closeDialog();
@@ -562,8 +553,8 @@ const handleSubmit = useThrottleFn(() => {
ElMessage.warning("上传Excel文件不能为空");
return false;
}
importUser(importData?.deptId, importData?.file).then((response) => {
ElMessage.success(response.data);
UserAPI.import(importData?.deptId, importData?.file).then((data) => {
ElMessage.success("导入用户成功");
closeDialog();
resetQuery();
});
@@ -583,7 +574,7 @@ function handleDelete(id?: number) {
cancelButtonText: "取消",
type: "warning",
}).then(function () {
deleteUsers(userIds).then(() => {
UserAPI.deleteByIds(userIds).then(() => {
ElMessage.success("删除成功");
resetQuery();
});
@@ -592,7 +583,7 @@ function handleDelete(id?: number) {
/** 下载导入模板 */
function downloadTemplate() {
downloadTemplateApi().then((response: any) => {
UserAPI.downloadTemplate().then((response: any) => {
const fileData = response.data;
const fileName = decodeURI(
response.headers["content-disposition"].split(";")[1].split("=")[1]
@@ -631,7 +622,7 @@ function handleFileExceed(files: any) {
/** 导出用户 */
function handleExport() {
exportUser(queryParams).then((response: any) => {
UserAPI.export(queryParams).then((response: any) => {
const fileData = response.data;
const fileName = decodeURI(
response.headers["content-disposition"].split(";")[1].split("=")[1]