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

refactor: 项目结构优化调整

Browse Source
This commit is contained in:
Ray.Hao
2025-12-20 21:56:48 +08:00
parent 5851976c5d
commit 65ad4fe59f
68 changed files with 2463 additions and 1761 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/views/system/config/index.vue
View File

@@ -141,7 +141,8 @@ defineOptions({
inheritAttrs: false,
});
import ConfigAPI, { ConfigPageVO, ConfigForm, ConfigPageQuery } from "@/api/system/config";
import ConfigAPI from "@/api/system/config";
import type { ConfigPageVo, ConfigForm, ConfigPageQuery } from "@/api/types";
import { ElMessage, ElMessageBox } from "element-plus";
import { useDebounceFn } from "@vueuse/core";
@@ -159,7 +160,7 @@ const queryParams = reactive<ConfigPageQuery>({
});
// 系统配置表格数据
const pageData = ref<ConfigPageVO[]>([]);
const pageData = ref<ConfigPageVo[]>([]);
const dialog = reactive({
title: "",

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

@@ -163,7 +163,8 @@ defineOptions({
inheritAttrs: false,
});
import DeptAPI, { DeptVO, DeptForm, DeptQuery } from "@/api/system/dept";
import DeptAPI from "@/api/system/dept";
import type { DeptVo, DeptForm, DeptQuery } from "@/api/types";
const queryFormRef = ref();
const deptFormRef = ref();
@@ -177,7 +178,7 @@ const dialog = reactive({
visible: false,
});
const deptList = ref<DeptVO[]>();
const deptList = ref<DeptVo[]>();
const deptOptions = ref<OptionType[]>();
const formData = reactive<DeptForm>({
status: 1,

7
src/views/system/dict/dict-item.vue
View File

@@ -155,7 +155,8 @@
<script setup lang="ts">
import type { TagProps } from "element-plus";
import DictAPI, { DictItemPageQuery, DictItemPageVO, DictItemForm } from "@/api/system/dict";
import DictAPI from "@/api/system/dict";
import type { DictItemPageQuery, DictItemPageVo, DictItemForm } from "@/api/types";
const route = useRoute();
@@ -173,7 +174,7 @@ const queryParams = reactive<DictItemPageQuery>({
pageSize: 10,
});
const tableData = ref<DictItemPageVO[]>();
const tableData = ref<DictItemPageVo[]>();
const dialog = reactive({
title: "",
@@ -226,7 +227,7 @@ function handleSelectionChange(selection: any) {
}
// 打开弹窗
function handleOpenDialog(row?: DictItemPageVO) {
function handleOpenDialog(row?: DictItemPageVo) {
dialog.visible = true;
dialog.title = row ? "编辑字典项" : "新增字典项";

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

@@ -137,7 +137,8 @@ defineOptions({
inherititems: false,
});
import DictAPI, { DictPageQuery, DictPageVO, DictForm } from "@/api/system/dict";
import DictAPI from "@/api/system/dict";
import type { DictPageQuery, DictPageVo, DictForm } from "@/api/types";
import router from "@/router";
@@ -153,7 +154,7 @@ const queryParams = reactive<DictPageQuery>({
pageSize: 10,
});
const tableData = ref<DictPageVO[]>();
const tableData = ref<DictPageVo[]>();
const dialog = reactive({
title: "",
@@ -285,7 +286,7 @@ function handleDelete(id?: number) {
}
// 打开字典项
function handleOpenDictData(row: DictPageVO) {
function handleOpenDictData(row: DictPageVo) {
router.push({
path: "/system/dict-item",
query: { dictCode: row.dictCode, title: "【" + row.name + "】字典数据" },

5
src/views/system/log/index.vue
View File

@@ -68,7 +68,8 @@ defineOptions({
inheritAttrs: false,
});
import LogAPI, { LogPageVO, LogPageQuery } from "@/api/system/log";
import LogAPI from "@/api/system/log";
import type { LogPageVo, LogPageQuery } from "@/api/types";
const queryFormRef = ref();
@@ -83,7 +84,7 @@ const queryParams = reactive<LogPageQuery>({
});
// 日志表格数据
const pageData = ref<LogPageVO[]>();
const pageData = ref<LogPageVo[]>();
/** 获取数据 */
function fetchData() {

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

@@ -47,15 +47,19 @@
>
<el-table-column label="菜单名称" min-width="200">
<template #default="scope">
<template v-if="scope.row.icon && scope.row.icon.startsWith('el-icon')">
<el-icon style="vertical-align: -0.15em">
<component :is="scope.row.icon.replace('el-icon-', '')" />
</el-icon>
</template>
<template v-else-if="scope.row.icon">
<div :class="`i-svg:${scope.row.icon}`" />
</template>
{{ scope.row.name }}
<div class="menu-name-cell">
<span class="menu-name-cell__icon">
<template v-if="scope.row.icon && scope.row.icon.startsWith('el-icon')">
<el-icon style="vertical-align: -0.15em">
<component :is="scope.row.icon.replace('el-icon-', '')" />
</el-icon>
</template>
<template v-else-if="scope.row.icon">
<span :class="`i-svg:${scope.row.icon}`" />
</template>
</span>
<span class="menu-name-cell__text">{{ scope.row.name }}</span>
</div>
</template>
</el-table-column>
@@ -340,7 +344,8 @@
import { useAppStore } from "@/store/modules/app-store";
import { DeviceEnum } from "@/enums/settings";
import MenuAPI, { MenuQuery, MenuForm, MenuVO } from "@/api/system/menu";
import MenuAPI from "@/api/system/menu";
import type { MenuQuery, MenuForm, MenuVo } from "@/api/types";
import { MenuTypeEnum } from "@/enums/business";
defineOptions({
@@ -363,7 +368,7 @@ const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600
// 查询参数
const queryParams = reactive<MenuQuery>({});
// 菜单表格数据
const menuTableData = ref<MenuVO[]>([]);
const menuTableData = ref<MenuVo[]>([]);
// 顶级菜单下拉选项
const menuOptions = ref<OptionType[]>([]);
// 初始菜单表单数据
@@ -432,7 +437,7 @@ function handleResetQuery() {
}
// 行点击事件
function handleRowClick(row: MenuVO) {
function handleRowClick(row: MenuVo) {
selectedMenuId.value = row.id;
}
@@ -562,3 +567,26 @@ onMounted(() => {
handleQuery();
});
</script>
<style scoped>
.menu-name-cell {
display: inline-flex;
align-items: center;
max-width: 100%;
}
.menu-name-cell__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
min-width: 18px;
margin-right: 6px;
}
.menu-name-cell__text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>

12
src/views/system/notice/index.vue
View File

@@ -260,12 +260,8 @@ defineOptions({
inheritAttrs: false,
});
import NoticeAPI, {
NoticePageVO,
NoticeForm,
NoticePageQuery,
NoticeDetailVO,
} from "@/api/system/notice";
import NoticeAPI from "@/api/system/notice";
import type { NoticePageVo, NoticeForm, NoticePageQuery, NoticeDetailVo } from "@/api/types";
import UserAPI from "@/api/system/user";
const queryFormRef = ref();
@@ -282,7 +278,7 @@ const queryParams = reactive<NoticePageQuery>({
const userOptions = ref<OptionType[]>([]);
// 通知公告表格数据
const pageData = ref<NoticePageVO[]>([]);
const pageData = ref<NoticePageVo[]>([]);
// 弹窗
const dialog = reactive({
@@ -319,7 +315,7 @@ const rules = reactive({
const detailDialog = reactive({
visible: false,
});
const currentNotice = ref<NoticeDetailVO>({});
const currentNotice = ref<NoticeDetailVo>({});
// 查询通知公告
function handleQuery() {

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

@@ -215,7 +215,8 @@
import { useAppStore } from "@/store/modules/app-store";
import { DeviceEnum } from "@/enums/settings";
import RoleAPI, { RolePageVO, RoleForm, RolePageQuery } from "@/api/system/role";
import RoleAPI from "@/api/system/role";
import type { RolePageVo, RoleForm, RolePageQuery } from "@/api/types";
import MenuAPI from "@/api/system/menu";
defineOptions({
@@ -239,7 +240,7 @@ const queryParams = reactive<RolePageQuery>({
});
// 角色表格数据
const roleList = ref<RolePageVO[]>();
const roleList = ref<RolePageVo[]>();
// 菜单权限下拉
const menuPermOptions = ref<OptionType[]>([]);
@@ -389,7 +390,7 @@ function handleDelete(roleId?: number) {
}
// 打开分配菜单权限弹窗
async function handleOpenAssignPermDialog(row: RolePageVO) {
async function handleOpenAssignPermDialog(row: RolePageVo) {
const roleId = row.id;
if (roleId) {
assignPermDialogVisible.value = true;

411
src/views/system/tenant/index.vue Normal file
View File

@@ -0,0 +1,411 @@
<template>
<div class="app-container">
<!-- 搜索区域 -->
<div class="filter-section">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item prop="keywords" label="关键字">
<el-input
v-model="queryParams.keywords"
placeholder="租户名称/租户编码/域名"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item prop="status" label="状态">
<el-select v-model="queryParams.status" placeholder="全部" clearable style="width: 120px">
<el-option label="正常" :value="1" />
<el-option label="禁用" :value="0" />
</el-select>
</el-form-item>
<el-form-item class="search-buttons">
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
</el-form-item>
</el-form>
</div>
<el-card shadow="hover" class="table-section">
<div class="table-section__toolbar">
<div class="table-section__toolbar--actions">
<el-button
v-hasPerm="['sys:tenant:create']"
type="success"
icon="plus"
@click="handleOpenDialog()"
>
新增
</el-button>
<el-button
v-hasPerm="['sys:tenant:delete']"
type="danger"
icon="delete"
:disabled="ids.length === 0"
@click="handleDelete()"
>
删除
</el-button>
</div>
</div>
<el-table
v-loading="loading"
:data="pageData"
highlight-current-row
border
class="table-section__content"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="租户名称" prop="name" min-width="160" />
<el-table-column label="租户编码" prop="code" width="140" />
<el-table-column label="域名" prop="domain" min-width="160" />
<el-table-column label="联系人" prop="contactName" width="120" />
<el-table-column label="电话" prop="contactPhone" width="140" />
<el-table-column label="状态" width="120" align="center">
<template #default="scope">
<el-switch
v-if="hasPermChangeStatus"
v-model="scope.row.status"
inline-prompt
active-text="正常"
inactive-text="禁用"
:active-value="1"
:inactive-value="0"
@change="
(val) => {
pageData.length > 0 && handleChangeStatus(scope.row.id, Number(val));
}
"
/>
<el-tag v-else :type="scope.row.status === 1 ? 'success' : 'info'">
{{ scope.row.status === 1 ? "正常" : "禁用" }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="过期时间" prop="expireTime" width="180" />
<el-table-column label="创建时间" prop="createTime" width="180" />
<el-table-column fixed="right" label="操作" width="180">
<template #default="scope">
<el-button
v-hasPerm="['sys:tenant:update']"
type="primary"
size="small"
link
icon="edit"
@click="handleOpenDialog(scope.row.id)"
>
编辑
</el-button>
<el-button
v-hasPerm="['sys:tenant:delete']"
type="danger"
size="small"
link
icon="delete"
@click="handleDelete(scope.row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-if="total > 0"
v-model:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="fetchData"
/>
</el-card>
<!-- 租户表单弹窗 -->
<el-dialog
v-model="dialog.visible"
:title="dialog.title"
width="600px"
@close="handleCloseDialog"
>
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="租户名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入租户名称" />
</el-form-item>
<el-form-item label="租户编码" prop="code">
<el-input
v-model="formData.code"
placeholder="请输入租户编码"
:disabled="!!formData.id"
/>
</el-form-item>
<el-form-item label="域名" prop="domain">
<el-input v-model="formData.domain" placeholder="demo.youlai.tech（可选）" />
</el-form-item>
<el-form-item label="联系人" prop="contactName">
<el-input v-model="formData.contactName" placeholder="可选" />
</el-form-item>
<el-form-item label="联系电话" prop="contactPhone">
<el-input v-model="formData.contactPhone" placeholder="可选" />
</el-form-item>
<el-form-item label="联系邮箱" prop="contactEmail">
<el-input v-model="formData.contactEmail" placeholder="可选" />
</el-form-item>
<el-form-item label="过期时间" prop="expireTime">
<el-date-picker
v-model="formData.expireTime"
type="datetime"
placeholder="不填表示永不过期"
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
/>
</el-form-item>
<el-form-item v-if="!formData.id" label="管理员账号" prop="adminUsername">
<el-input v-model="formData.adminUsername" placeholder="为空则系统生成" />
</el-form-item>
<el-form-item v-if="formData.id" label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio :value="1">正常</el-radio>
<el-radio :value="0">禁用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="可选" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmit">确定</el-button>
<el-button @click="handleCloseDialog">取消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
defineOptions({
name: "Tenant",
inheritAttrs: false,
});
import { ElMessage, ElMessageBox } from "element-plus";
import { useDebounceFn } from "@vueuse/core";
import { hasPerm } from "@/utils/auth";
import TenantAPI from "@/api/system/tenant";
import type { TenantCreateForm, TenantForm, TenantPageQuery, TenantPageVo } from "@/api/types";
const queryFormRef = ref();
const dataFormRef = ref();
const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);
const queryParams = reactive<TenantPageQuery>({
pageNum: 1,
pageSize: 10,
keywords: "",
});
const pageData = ref<TenantPageVo[]>([]);
const dialog = reactive({
title: "",
visible: false,
});
const formData = reactive<TenantForm & TenantCreateForm>({
id: undefined,
name: "",
code: "",
domain: "",
contactName: "",
contactPhone: "",
contactEmail: "",
remark: "",
expireTime: undefined,
status: 1,
adminUsername: "",
});
const rules = reactive({
name: [{ required: true, message: "请输入租户名称", trigger: "blur" }],
code: [{ required: true, message: "请输入租户编码", trigger: "blur" }],
});
const hasPermChangeStatus = computed(() => hasPerm("sys:tenant:change-status"));
function fetchData() {
loading.value = true;
TenantAPI.getPage(queryParams)
.then((data) => {
pageData.value = data.list;
total.value = data.total;
})
.finally(() => {
loading.value = false;
});
}
function handleQuery() {
queryParams.pageNum = 1;
fetchData();
}
function handleResetQuery() {
queryFormRef.value?.resetFields();
queryParams.pageNum = 1;
fetchData();
}
function handleSelectionChange(selection: any) {
ids.value = selection.map((item: any) => Number(item.id));
}
async function handleOpenDialog(tenantId?: string) {
dialog.visible = true;
if (tenantId) {
dialog.title = "修改租户";
const data = await TenantAPI.getFormData(tenantId);
Object.assign(formData, data);
formData.adminUsername = "";
} else {
dialog.title = "新增租户";
Object.assign(formData, {
id: undefined,
name: "",
code: "",
domain: "",
contactName: "",
contactPhone: "",
contactEmail: "",
remark: "",
expireTime: undefined,
status: 1,
adminUsername: "",
});
}
}
function handleCloseDialog() {
dialog.visible = false;
dataFormRef.value?.resetFields();
dataFormRef.value?.clearValidate();
Object.assign(formData, {
id: undefined,
name: "",
code: "",
domain: "",
contactName: "",
contactPhone: "",
contactEmail: "",
remark: "",
expireTime: undefined,
status: 1,
adminUsername: "",
});
}
const handleSubmit = useDebounceFn(async () => {
const valid = await dataFormRef.value?.validate().catch(() => false);
if (!valid) return;
loading.value = true;
try {
const tenantId = formData.id;
if (tenantId) {
const payload: TenantForm = {
id: formData.id,
name: formData.name,
code: formData.code,
domain: formData.domain,
contactName: formData.contactName,
contactPhone: formData.contactPhone,
contactEmail: formData.contactEmail,
remark: formData.remark,
expireTime: formData.expireTime,
status: formData.status,
};
await TenantAPI.update(String(tenantId), payload);
ElMessage.success("修改成功");
} else {
const payload: TenantCreateForm = {
name: formData.name,
code: formData.code,
domain: formData.domain,
contactName: formData.contactName,
contactPhone: formData.contactPhone,
contactEmail: formData.contactEmail,
remark: formData.remark,
expireTime: formData.expireTime,
adminUsername: formData.adminUsername,
};
const result = await TenantAPI.create(payload);
ElMessage.success(`新增成功：管理员账号 ${result?.adminUsername || ""}`);
}
handleCloseDialog();
handleResetQuery();
} catch {
ElMessage.error(formData.id ? "修改失败" : "新增失败");
} finally {
loading.value = false;
}
}, 300);
function handleDelete(tenantId?: string) {
const tenantIds = tenantId ? tenantId : ids.value.join(",");
if (!tenantIds) {
ElMessage.warning("请勾选删除项");
return;
}
ElMessageBox.confirm("确认删除选中的租户吗？", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(async () => {
loading.value = true;
try {
await TenantAPI.deleteByIds(tenantIds);
ElMessage.success("删除成功");
handleResetQuery();
} finally {
loading.value = false;
}
})
.catch(() => {
// 用户取消
});
}
async function handleChangeStatus(id: string | undefined, status: number) {
if (!id) return;
try {
await TenantAPI.updateStatus(String(id), status);
ElMessage.success("状态更新成功");
} catch {
ElMessage.error("状态更新失败");
fetchData();
}
}
onMounted(() => {
fetchData();
});
</script>
<style scoped lang="scss"></style>

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

@@ -253,7 +253,7 @@ import { useDebounceFn } from "@vueuse/core";
import { ElMessage, ElMessageBox, type FormInstance } from "element-plus";
// ==================== 3. 类型定义 ====================
import type { UserForm, UserPageQuery, UserPageVO } from "@/api/system/user";
import type { UserForm, UserPageQuery, UserPageVo } from "@/api/types";
// ==================== 3.5 工具函数 ====================
import { downloadFile } from "@/utils";
@@ -299,7 +299,7 @@ const queryParams = reactive<UserPageQuery>({
});
// 列表数据
const userList = ref<UserPageVO[]>([]);
const userList = ref<UserPageVo[]>([]);
const total = ref(0);
const loading = ref(false);
@@ -363,7 +363,7 @@ async function fetchUserList(): Promise<void> {
}
// ==================== 表格选择 ====================
const { selectedIds, hasSelection, handleSelectionChange } = useTableSelection<UserPageVO>();
const { selectedIds, hasSelection, handleSelectionChange } = useTableSelection<UserPageVo>();
// ==================== 查询操作 ====================
@@ -390,7 +390,7 @@ function handleResetQuery(): void {
* 重置用户密码
* @param row 用户数据
*/
function handleResetPassword(row: UserPageVO): void {
function handleResetPassword(row: UserPageVo): void {
ElMessageBox.prompt(`请输入用户【${row.username}】的新密码`, "重置密码", {
confirmButtonText: "确定",
cancelButtonText: "取消",