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

refactor: ♻️ 优化button图标使用方式

Browse Source
This commit is contained in:
ray
2024-11-12 22:32:46 +08:00
parent 78cafd9653
commit a5a6e21ae9
9 changed files with 204 additions and 631 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,43 +12,31 @@
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">
<template #icon>
<Search />
</template>
搜索
</el-button>
<el-button @click="handleResetQuery">
<template #icon>
<Refresh />
</template>
重置
</el-button>
<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="never" class="table-wrapper">
<template #header>
<el-card shadow="never">
<div class="mb-10px">
<el-button
v-hasPerm="['sys:config:add']"
type="success"
icon="plus"
@click="handleOpenDialog()"
>
<template #icon>
<Plus />
</template>
新增
</el-button>
<el-button
v-hasPerm="['sys:config:refresh']"
color="#626aef"
icon="RefreshLeft"
@click="handleRefreshCache"
>
<el-icon><RefreshLeft /></el-icon>
刷新缓存
</el-button>
</template>
</div>
<el-table
ref="dataTableRef"
@@ -58,30 +46,10 @@
@selection-change="handleSelectionChange"
>
<el-table-column type="index" label="序号" width="60" />
<el-table-column
key="configName"
label="配置名称"
prop="configName"
min-width="100"
/>
<el-table-column
key="configKey"
label="配置键"
prop="configKey"
min-width="100"
/>
<el-table-column
key="configValue"
label="配置值"
prop="configValue"
min-width="100"
/>
<el-table-column
key="remark"
label="描述"
prop="remark"
min-width="100"
/>
<el-table-column key="configName" label="配置名称" prop="configName" min-width="100" />
<el-table-column key="configKey" label="配置键" prop="configKey" min-width="100" />
<el-table-column key="configValue" label="配置值" prop="configValue" min-width="100" />
<el-table-column key="remark" label="描述" prop="remark" min-width="100" />
<el-table-column fixed="right" label="操作" width="220">
<template #default="scope">
<el-button
@@ -89,11 +57,9 @@
type="primary"
size="small"
link
icon="edit"
@click="handleOpenDialog(scope.row.id)"
>
<template #icon>
<Edit />
</template>
编辑
</el-button>
<el-button
@@ -101,11 +67,9 @@
type="danger"
size="small"
link
icon="delete"
@click="handleDelete(scope.row.id)"
>
<template #icon>
<Delete />
</template>
删除
</el-button>
</template>
@@ -136,25 +100,13 @@
label-width="100px"
>
<el-form-item label="配置名称" prop="configName">
<el-input
v-model="formData.configName"
placeholder="请输入配置名称"
:maxlength="50"
/>
<el-input v-model="formData.configName" placeholder="请输入配置名称" :maxlength="50" />
</el-form-item>
<el-form-item label="配置键" prop="configKey">
<el-input
v-model="formData.configKey"
placeholder="请输入配置键"
:maxlength="50"
/>
<el-input v-model="formData.configKey" placeholder="请输入配置键" :maxlength="50" />
</el-form-item>
<el-form-item label="配置值" prop="configValue">
<el-input
v-model="formData.configValue"
placeholder="请输入配置值"
:maxlength="100"
/>
<el-input v-model="formData.configValue" placeholder="请输入配置值" :maxlength="100" />
</el-form-item>
<el-form-item label="描述" prop="remark">
<el-input
@@ -183,17 +135,13 @@ defineOptions({
inheritAttrs: false,
});
import ConfigAPI, {
ConfigPageVO,
ConfigForm,
ConfigPageQuery,
} from "@/api/system/config";
import ConfigAPI, { ConfigPageVO, ConfigForm, ConfigPageQuery } from "@/api/system/config";
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const loading = ref(false);
const ids = ref<number[]>([]);
const selectIds = ref<number[]>([]);
const total = ref(0);
const queryParams = reactive<ConfigPageQuery>({
@@ -205,12 +153,11 @@ const queryParams = reactive<ConfigPageQuery>({
// 系统配置表格数据
const pageData = ref<ConfigPageVO[]>([]);
// 弹窗
const dialog = reactive({
title: "",
visible: false,
});
// 系统配置表单
const formData = reactive<ConfigForm>({
id: undefined,
configName: "",
@@ -220,18 +167,12 @@ const formData = reactive<ConfigForm>({
});
const rules = reactive({
configName: [
{ required: true, message: "请输入系统配置名称", trigger: "blur" },
],
configKey: [
{ required: true, message: "请输入系统配置编码", trigger: "blur" },
],
configValue: [
{ required: true, message: "请输入系统配置值", trigger: "blur" },
],
configName: [{ required: true, message: "请输入系统配置名称", trigger: "blur" }],
configKey: [{ required: true, message: "请输入系统配置编码", trigger: "blur" }],
configValue: [{ required: true, message: "请输入系统配置值", trigger: "blur" }],
});
/** 查询系统配置 */
// 查询系统配置
function handleQuery() {
loading.value = true;
ConfigAPI.getPage(queryParams)
@@ -243,19 +184,20 @@ function handleQuery() {
loading.value = false;
});
}
/** 重置系统配置查询 */
// 重置查询
function handleResetQuery() {
queryFormRef.value.resetFields();
queryParams.pageNum = 1;
handleQuery();
}
/** 行复选框选中记录选中ID集合 */
// 行复选框选中项变化
function handleSelectionChange(selection: any) {
ids.value = selection.map((item: any) => item.id);
selectIds.value = selection.map((item: any) => item.id);
}
/** 打开系统配置弹窗 */
// 打开系统配置弹窗
function handleOpenDialog(id?: number) {
dialog.visible = true;
if (id) {
@@ -269,14 +211,14 @@ function handleOpenDialog(id?: number) {
}
}
/** 刷新缓存 **/
// 刷新缓存
function handleRefreshCache() {
ConfigAPI.refreshCache().then(() => {
ElMessage.success("刷新成功");
});
}
/** 提交系统配置表单 */
// 系统配置表单提交
function handleSubmit() {
dataFormRef.value.validate((valid: any) => {
if (valid) {
@@ -303,32 +245,34 @@ function handleSubmit() {
});
}
/** 关闭系统配置弹窗 */
function handleCloseDialog() {
dialog.visible = false;
// 重置表单
function resetForm() {
dataFormRef.value.resetFields();
dataFormRef.value.clearValidate();
formData.id != undefined;
formData.id = undefined;
}
/** 删除系统配置 */
// 关闭系统配置弹窗
function handleCloseDialog() {
dialog.visible = false;
resetForm();
}
// 删除系统配置
function handleDelete(id: number) {
ElMessageBox.confirm("确认删除该项配置?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(
() => {
loading.value = true;
ConfigAPI.deleteById(id)
.then(() => {
ElMessage.success("删除成功");
handleResetQuery();
})
.finally(() => (loading.value = false));
},
() => {}
);
}).then(() => {
loading.value = true;
ConfigAPI.deleteById(id)
.then(() => {
ElMessage.success("删除成功");
handleResetQuery();
})
.finally(() => (loading.value = false));
});
}
onMounted(() => {

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

@@ -11,29 +11,16 @@
</el-form-item>
<el-form-item label="部门状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="全部"
clearable
class="!w-[100px]"
>
<el-select v-model="queryParams.status" placeholder="全部" clearable class="!w-[100px]">
<el-option :value="1" label="正常" />
<el-option :value="0" label="禁用" />
</el-select>
</el-form-item>
<el-form-item>
<el-button class="filter-item" type="primary" @click="handleQuery">
<template #icon>
<Search />
</template>
<el-button class="filter-item" type="primary" icon="search" @click="handleQuery">
搜索
</el-button>
<el-button @click="handleResetQuery">
<template #icon>
<Refresh />
</template>
重置
</el-button>
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
</el-form-item>
</el-form>
</div>
@@ -43,22 +30,18 @@
<el-button
v-hasPerm="['sys:dept:add']"
type="success"
icon="plus"
@click="handleOpenDialog(0, undefined)"
>
<template #icon>
<Plus />
</template>
新增
</el-button>
<el-button
v-hasPerm="['sys:dept:delete']"
type="danger"
:disabled="ids.length === 0"
:disabled="selectIds.length === 0"
icon="delete"
@click="handleDelete()"
>
<template #icon>
<Delete />
</template>
删除
</el-button>
</div>
@@ -90,11 +73,9 @@
type="primary"
link
size="small"
icon="plus"
@click.stop="handleOpenDialog(scope.row.id, undefined)"
>
<template #icon>
<Plus />
</template>
新增
</el-button>
<el-button
@@ -102,11 +83,9 @@
type="primary"
link
size="small"
icon="edit"
@click.stop="handleOpenDialog(scope.row.parentId, scope.row.id)"
>
<template #icon>
<Edit />
</template>
编辑
</el-button>
<el-button
@@ -114,11 +93,9 @@
type="danger"
link
size="small"
icon="delete"
@click.stop="handleDelete(scope.row.id)"
>
<template #icon>
<Delete />
</template>
删除
</el-button>
</template>
@@ -132,12 +109,7 @@
width="600px"
@closed="handleCloseDialog"
>
<el-form
ref="deptFormRef"
:model="formData"
:rules="rules"
label-width="80px"
>
<el-form ref="deptFormRef" :model="formData" :rules="rules" label-width="80px">
<el-form-item label="上级部门" prop="parentId">
<el-tree-select
v-model="formData.parentId"
@@ -192,17 +164,16 @@ const queryFormRef = ref(ElForm);
const deptFormRef = ref(ElForm);
const loading = ref(false);
const ids = ref<number[]>([]);
const selectIds = ref<number[]>([]);
const queryParams = reactive<DeptQuery>({});
const dialog = reactive({
title: "",
visible: false,
});
const queryParams = reactive<DeptQuery>({});
const deptList = ref<DeptVO[]>();
const deptOptions = ref<OptionType[]>();
const formData = reactive<DeptForm>({
status: 1,
parentId: 0,
@@ -210,15 +181,13 @@ const formData = reactive<DeptForm>({
});
const rules = reactive({
parentId: [
{ required: true, message: "上级部门不能为空", trigger: "change" },
],
parentId: [{ required: true, message: "上级部门不能为空", trigger: "change" }],
name: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
code: [{ required: true, message: "部门编号不能为空", trigger: "blur" }],
sort: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
});
/** 查询部门 */
// 查询部门
function handleQuery() {
loading.value = true;
DeptAPI.getList(queryParams).then((data) => {
@@ -227,15 +196,15 @@ function handleQuery() {
});
}
/** 重置查询 */
// 重置查询
function handleResetQuery() {
queryFormRef.value.resetFields();
handleQuery();
}
/** 行复选框选中记录选中ID集合 */
// 处理选中项变化
function handleSelectionChange(selection: any) {
ids.value = selection.map((item: any) => item.id);
selectIds.value = selection.map((item: any) => item.id);
}
/**
@@ -267,7 +236,7 @@ async function handleOpenDialog(parentId?: number, deptId?: number) {
}
}
/** 提交部门表单 */
// 部门表单提交
function handleSubmit() {
deptFormRef.value.validate((valid: any) => {
if (valid) {
@@ -294,9 +263,9 @@ function handleSubmit() {
});
}
/** 删除部门 */
// 删除部门
function handleDelete(deptId?: number) {
const deptIds = [deptId || ids.value].join(",");
const deptIds = [deptId || selectIds.value].join(",");
if (!deptIds) {
ElMessage.warning("请勾选删除项");
@@ -323,10 +292,8 @@ function handleDelete(deptId?: number) {
);
}
/** 关闭弹窗 */
function handleCloseDialog() {
dialog.visible = false;
// 重置表单
function resetForm() {
deptFormRef.value.resetFields();
deptFormRef.value.clearValidate();
@@ -336,6 +303,12 @@ function handleCloseDialog() {
formData.sort = 1;
}
// 关闭弹窗
function handleCloseDialog() {
dialog.visible = false;
resetForm();
}
onMounted(() => {
handleQuery();
});

56
src/views/system/dict/data.vue
View File

@@ -12,38 +12,16 @@
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery()">
<template #icon>
<Search />
</template>
搜索
</el-button>
<el-button @click="handleResetQuery()">
<template #icon>
<Refresh />
</template>
重置
</el-button>
<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="never">
<div class="mb-[10px]">
<el-button type="success" @click="handleOpenDialog()">
<template #icon>
<Plus />
</template>
新增
</el-button>
<el-button
type="danger"
:disabled="ids.length === 0"
@click="handleDelete()"
>
<template #icon>
<Delete />
</template>
<el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>
<el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
删除
</el-button>
</div>
@@ -73,22 +51,18 @@
type="primary"
link
size="small"
icon="edit"
@click.stop="handleOpenDialog(scope.row)"
>
<template #icon>
<Edit />
</template>
编辑
</el-button>
<el-button
type="danger"
link
size="small"
icon="delete"
@click.stop="handleDelete(scope.row.id)"
>
<template #icon>
<Delete />
</template>
删除
</el-button>
</template>
@@ -111,12 +85,7 @@
width="820px"
@close="handleCloseDialog"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="computedRules"
label-width="100px"
>
<el-form ref="dataFormRef" :model="formData" :rules="computedRules" label-width="100px">
<el-card shadow="never">
<el-form-item label="字典标签" prop="label">
<el-input v-model="formData.label" placeholder="请输入字典标签" />
@@ -131,17 +100,10 @@
</el-radio-group>
</el-form-item>
<el-form-item label="排序">
<el-input-number
v-model="formData.sort"
controls-position="right"
/>
<el-input-number v-model="formData.sort" controls-position="right" />
</el-form-item>
<el-form-item label="标签类型">
<el-tag
v-if="formData.tagType"
:type="formData.tagType"
class="mr-2"
>
<el-tag v-if="formData.tagType" :type="formData.tagType" class="mr-2">
{{ formData.label }}
</el-tag>
<el-radio-group v-model="formData.tagType">

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

@@ -12,38 +12,16 @@
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery()">
<template #icon>
<Search />
</template>
搜索
</el-button>
<el-button @click="handleResetQuery()">
<template #icon>
<Refresh />
</template>
重置
</el-button>
<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="never">
<div class="mb-[10px]">
<el-button type="success" @click="handleAddClick()">
<template #icon>
<Plus />
</template>
新增
</el-button>
<el-button
type="danger"
:disabled="ids.length === 0"
@click="handleDelete()"
>
<template #icon>
<Delete />
</template>
<el-button type="success" icon="plus" @click="handleAddClick()">新增</el-button>
<el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
删除
</el-button>
</div>
@@ -67,12 +45,7 @@
</el-table-column>
<el-table-column fixed="right" label="操作" align="center" width="220">
<template #default="scope">
<el-button
type="primary"
link
size="small"
@click.stop="handleOpenDictData(scope.row)"
>
<el-button type="primary" link size="small" @click.stop="handleOpenDictData(scope.row)">
<template #icon>
<Collection />
</template>
@@ -83,22 +56,18 @@
type="primary"
link
size="small"
icon="edit"
@click.stop="handleEditClick(scope.row.id, scope.row.name)"
>
<template #icon>
<Edit />
</template>
编辑
</el-button>
<el-button
type="danger"
link
size="small"
icon="delete"
@click.stop="handleDelete(scope.row.id)"
>
<template #icon>
<Delete />
</template>
删除
</el-button>
</template>
@@ -121,22 +90,14 @@
width="500px"
@close="handleCloseDialog"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="computedRules"
label-width="100px"
>
<el-form ref="dataFormRef" :model="formData" :rules="computedRules" label-width="100px">
<el-card shadow="never">
<el-form-item label="字典名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入字典名称" />
</el-form-item>
<el-form-item label="字典编码" prop="dictCode">
<el-input
v-model="formData.dictCode"
placeholder="请输入字典编码"
/>
<el-input v-model="formData.dictCode" placeholder="请输入字典编码" />
</el-form-item>
<el-form-item label="状态">
@@ -147,11 +108,7 @@
</el-form-item>
<el-form-item label="备注">
<el-input
v-model="formData.remark"
type="textarea"
placeholder="请输入备注"
/>
<el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
</el-form-item>
</el-card>
</el-form>
@@ -172,11 +129,7 @@ defineOptions({
inherititems: false,
});
import DictAPI, {
DictPageQuery,
DictPageVO,
DictForm,
} from "@/api/system/dict";
import DictAPI, { DictPageQuery, DictPageVO, DictForm } from "@/api/system/dict";
import router from "@/router";

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

@@ -24,29 +24,14 @@
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">
<template #icon>
<Search />
</template>
搜索
</el-button>
<el-button @click="handleResetQuery">
<template #icon>
<Refresh />
</template>
重置
</el-button>
<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="never">
<el-table
v-loading="loading"
:data="pageData"
highlight-current-row
border
>
<el-table v-loading="loading" :data="pageData" highlight-current-row border>
<el-table-column label="操作时间" prop="createTime" width="180" />
<el-table-column label="操作人" prop="operator" width="120" />
<el-table-column label="日志模块" prop="module" width="100" />
@@ -54,17 +39,8 @@
<el-table-column label="IP 地址" prop="ip" width="150" />
<el-table-column label="地区" prop="region" width="150" />
<el-table-column label="浏览器" prop="browser" width="150" />
<el-table-column
label="终端系统"
prop="os"
width="200"
show-overflow-tooltip
/>
<el-table-column
label="执行时间(ms)"
prop="executionTime"
width="150"
/>
<el-table-column label="终端系统" prop="os" width="200" show-overflow-tooltip />
<el-table-column label="执行时间(ms)" prop="executionTime" width="150" />
</el-table>
<pagination

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

@@ -11,29 +11,23 @@
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">
<template #icon><Search /></template>
搜索
</el-button>
<el-button @click="handleResetQuery">
<template #icon><Refresh /></template>
重置
</el-button>
<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="never" class="table-wrapper">
<template #header>
<el-card shadow="never">
<div class="mb-10px">
<el-button
v-hasPerm="['sys:menu:add']"
type="success"
icon="plus"
@click="handleOpenDialog(0)"
>
<template #icon><Plus /></template>
新增
</el-button>
</template>
</div>
<el-table
v-loading="loading"
@@ -49,9 +43,7 @@
>
<el-table-column label="菜单名称" min-width="200">
<template #default="scope">
<template
v-if="scope.row.icon && scope.row.icon.startsWith('el-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>
@@ -59,70 +51,29 @@
<template v-else-if="scope.row.icon">
<svg-icon :icon-class="scope.row.icon" />
</template>
<template v-else>
<svg-icon icon-class="menu" />
</template>
{{ scope.row.name }}
</template>
</el-table-column>
<el-table-column label="类型" align="center" width="80">
<template #default="scope">
<el-tag
v-if="scope.row.type === MenuTypeEnum.CATALOG"
type="warning"
>
目录
</el-tag>
<el-tag v-if="scope.row.type === MenuTypeEnum.MENU" type="success">
菜单
</el-tag>
<el-tag v-if="scope.row.type === MenuTypeEnum.BUTTON" type="danger">
按钮
</el-tag>
<el-tag v-if="scope.row.type === MenuTypeEnum.EXTLINK" type="info">
外链
</el-tag>
<el-tag v-if="scope.row.type === MenuTypeEnum.CATALOG" type="warning">目录</el-tag>
<el-tag v-if="scope.row.type === MenuTypeEnum.MENU" type="success">菜单</el-tag>
<el-tag v-if="scope.row.type === MenuTypeEnum.BUTTON" type="danger">按钮</el-tag>
<el-tag v-if="scope.row.type === MenuTypeEnum.EXTLINK" type="info">外链</el-tag>
</template>
</el-table-column>
<el-table-column
label="路由名称"
align="left"
width="150"
prop="routeName"
/>
<el-table-column
label="路由路径"
align="left"
width="150"
prop="routePath"
/>
<el-table-column
label="组件路径"
align="left"
width="250"
prop="component"
/>
<el-table-column
label="权限标识"
align="center"
width="200"
prop="perm"
/>
<el-table-column label="路由名称" align="left" width="150" prop="routeName" />
<el-table-column label="路由路径" align="left" width="150" prop="routePath" />
<el-table-column label="组件路径" align="left" width="250" prop="component" />
<el-table-column label="权限标识" align="center" width="200" prop="perm" />
<el-table-column label="状态" align="center" width="80">
<template #default="scope">
<el-tag v-if="scope.row.visible === 1" type="success">显示</el-tag>
<el-tag v-else type="info">隐藏</el-tag>
</template>
</el-table-column>
<el-table-column label="排序" align="center" width="80" prop="sort" />
<el-table-column fixed="right" align="center" label="操作" width="220">
<template #default="scope">
<el-button
@@ -131,9 +82,9 @@
type="primary"
link
size="small"
icon="plus"
@click.stop="handleOpenDialog(scope.row.id)"
>
<template #icon><Plus /></template>
新增
</el-button>
@@ -142,9 +93,9 @@
type="primary"
link
size="small"
icon="edit"
@click.stop="handleOpenDialog(undefined, scope.row.id)"
>
<template #icon><Edit /></template>
编辑
</el-button>
<el-button
@@ -152,9 +103,9 @@
type="danger"
link
size="small"
icon="delete"
@click.stop="handleDelete(scope.row.id)"
>
<template #icon><Delete /></template>
删除
</el-button>
</template>
@@ -162,18 +113,8 @@
</el-table>
</el-card>
<el-drawer
v-model="dialog.visible"
:title="dialog.title"
size="50%"
@close="handleCloseDialog"
>
<el-form
ref="menuFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-drawer v-model="dialog.visible" :title="dialog.title" size="50%" @close="handleCloseDialog">
<el-form ref="menuFormRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="父级菜单" prop="parentId">
<el-tree-select
v-model="formData.parentId"
@@ -190,10 +131,7 @@
</el-form-item>
<el-form-item label="菜单类型" prop="type">
<el-radio-group
v-model="formData.type"
@change="handleMenuTypeChange"
>
<el-radio-group v-model="formData.type" @change="handleMenuTypeChange">
<el-radio value="CATALOG">目录</el-radio>
<el-radio value="MENU">菜单</el-radio>
<el-radio value="BUTTON">按钮</el-radio>
@@ -201,30 +139,18 @@
</el-radio-group>
</el-form-item>
<el-form-item
v-if="formData.type == 'EXTLINK'"
label="外链地址"
prop="path"
>
<el-input
v-model="formData.routePath"
placeholder="请输入外链完整路径"
/>
<el-form-item v-if="formData.type == 'EXTLINK'" label="外链地址" prop="path">
<el-input v-model="formData.routePath" placeholder="请输入外链完整路径" />
</el-form-item>
<el-form-item
v-if="formData.type == MenuTypeEnum.MENU"
prop="routeName"
>
<el-form-item v-if="formData.type == MenuTypeEnum.MENU" prop="routeName">
<template #label>
<div class="flex-y-center">
路由名称
<el-tooltip placement="bottom" effect="light">
<template #content>
如果需要开启缓存，需保证页面 defineOptions 中的 name
与此处一致，建议使用驼峰。
如果需要开启缓存，需保证页面 defineOptions 中的 name 与此处一致，建议使用驼峰。
</template>
<el-icon class="ml-1 cursor-pointer">
<QuestionFilled />
</el-icon>
@@ -235,10 +161,7 @@
</el-form-item>
<el-form-item
v-if="
formData.type == MenuTypeEnum.CATALOG ||
formData.type == MenuTypeEnum.MENU
"
v-if="formData.type == MenuTypeEnum.CATALOG || formData.type == MenuTypeEnum.MENU"
prop="routePath"
>
<template #label>
@@ -246,8 +169,7 @@
路由路径
<el-tooltip placement="bottom" effect="light">
<template #content>
定义应用中不同页面对应的 URL 路径，目录需以 /
开头，菜单项不用。例如：系统管理目录
定义应用中不同页面对应的 URL 路径，目录需以 / 开头，菜单项不用。例如：系统管理目录
/system，系统管理下的用户管理菜单 user。
</template>
<el-icon class="ml-1 cursor-pointer">
@@ -264,17 +186,13 @@
<el-input v-else v-model="formData.routePath" placeholder="user" />
</el-form-item>
<el-form-item
v-if="formData.type == MenuTypeEnum.MENU"
prop="component"
>
<el-form-item v-if="formData.type == MenuTypeEnum.MENU" prop="component">
<template #label>
<div class="flex-y-center">
组件路径
<el-tooltip placement="bottom" effect="light">
<template #content>
组件页面完整路径，相对于 src/views/，如
system/user/index，缺省后缀 .vue
组件页面完整路径，相对于 src/views/，如 system/user/index，缺省后缀 .vue
</template>
<el-icon class="ml-1 cursor-pointer">
<QuestionFilled />
@@ -283,17 +201,9 @@
</div>
</template>
<el-input
v-model="formData.component"
placeholder="system/user/index"
style="width: 95%"
>
<template v-if="formData.type == MenuTypeEnum.MENU" #prepend>
src/views/
</template>
<template v-if="formData.type == MenuTypeEnum.MENU" #append>
.vue
</template>
<el-input v-model="formData.component" placeholder="system/user/index" style="width: 95%">
<template v-if="formData.type == MenuTypeEnum.MENU" #prepend>src/views/</template>
<template v-if="formData.type == MenuTypeEnum.MENU" #append>.vue</template>
</el-input>
</el-form-item>
@@ -313,35 +223,21 @@
</template>
<div v-if="!formData.params || formData.params.length === 0">
<el-button
type="success"
plain
@click="formData.params = [{ key: '', value: '' }]"
>
<el-button type="success" plain @click="formData.params = [{ key: '', value: '' }]">
添加路由参数
</el-button>
</div>
<div v-else>
<div v-for="(item, index) in formData.params" :key="index">
<el-input
v-model="item.key"
placeholder="参数名"
style="width: 100px"
/>
<el-input v-model="item.key" placeholder="参数名" style="width: 100px" />
<span class="mx-1">=</span>
<el-input
v-model="item.value"
placeholder="参数值"
style="width: 100px"
/>
<el-input v-model="item.value" placeholder="参数值" style="width: 100px" />
<el-icon
v-if="
formData.params.indexOf(item) === formData.params.length - 1
"
v-if="formData.params.indexOf(item) === formData.params.length - 1"
class="ml-2 cursor-pointer color-[var(--el-color-success)]"
style="vertical-align: -0.15em"
@click="formData.params.push({ key: '', value: '' })"
@@ -351,9 +247,7 @@
<el-icon
class="ml-2 cursor-pointer color-[var(--el-color-danger)]"
style="vertical-align: -0.15em"
@click="
formData.params.splice(formData.params.indexOf(item), 1)
"
@click="formData.params.splice(formData.params.indexOf(item), 1)"
>
<DeleteFilled />
</el-icon>
@@ -361,11 +255,7 @@
</div>
</el-form-item>
<el-form-item
v-if="formData.type !== MenuTypeEnum.BUTTON"
prop="visible"
label="显示状态"
>
<el-form-item v-if="formData.type !== MenuTypeEnum.BUTTON" prop="visible" label="显示状态">
<el-radio-group v-model="formData.visible">
<el-radio :value="1">显示</el-radio>
<el-radio :value="0">隐藏</el-radio>
@@ -373,10 +263,7 @@
</el-form-item>
<el-form-item
v-if="
formData.type === MenuTypeEnum.CATALOG ||
formData.type === MenuTypeEnum.MENU
"
v-if="formData.type === MenuTypeEnum.CATALOG || formData.type === MenuTypeEnum.MENU"
>
<template #label>
<div class="flex-y-center">
@@ -402,10 +289,7 @@
</el-radio-group>
</el-form-item>
<el-form-item
v-if="formData.type === MenuTypeEnum.MENU"
label="缓存页面"
>
<el-form-item v-if="formData.type === MenuTypeEnum.MENU" label="缓存页面">
<el-radio-group v-model="formData.keepAlive">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>
@@ -422,34 +306,23 @@
</el-form-item>
<!-- 权限标识 -->
<el-form-item
v-if="formData.type == MenuTypeEnum.BUTTON"
label="权限标识"
prop="perm"
>
<el-form-item v-if="formData.type == MenuTypeEnum.BUTTON" label="权限标识" prop="perm">
<el-input v-model="formData.perm" placeholder="sys:user:add" />
</el-form-item>
<el-form-item
v-if="formData.type !== MenuTypeEnum.BUTTON"
label="图标"
prop="icon"
>
<el-form-item v-if="formData.type !== MenuTypeEnum.BUTTON" label="图标" prop="icon">
<!-- 图标选择器 -->
<icon-select v-model="formData.icon" />
</el-form-item>
<el-form-item
v-if="formData.type == MenuTypeEnum.CATALOG"
label="跳转路由"
>
<el-form-item v-if="formData.type == MenuTypeEnum.CATALOG" label="跳转路由">
<el-input v-model="formData.redirect" placeholder="跳转路由" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
<el-button @click="handleCloseDialog">取 消</el-button>
</div>
</template>
@@ -481,7 +354,6 @@ const queryParams = reactive<MenuQuery>({});
const menuTableData = ref<MenuVO[]>([]);
// 顶级菜单下拉选项
const menuOptions = ref<OptionType[]>([]);
// 初始菜单表单数据
const initialMenuFormData = ref<MenuForm>({
id: undefined,
@@ -493,10 +365,8 @@ const initialMenuFormData = ref<MenuForm>({
keepAlive: 1,
params: [],
});
// 菜单表单数据
const formData = ref({ ...initialMenuFormData.value });
// 表单验证规则
const rules = reactive({
parentId: [{ required: true, message: "请选择顶级菜单", trigger: "blur" }],
@@ -578,8 +448,10 @@ function handleMenuTypeChange() {
}
}
/** 菜单保存提交 */
function submitForm() {
/**
* 提交表单
*/
function handleSubmit() {
menuFormRef.value.validate((isValid: boolean) => {
if (isValid) {
const menuId = formData.value.id;

30
src/views/system/notice/components/MyNotice.vue
View File

@@ -27,13 +27,8 @@
</el-form>
</div>
<el-card shadow="never" class="table-wrapper">
<el-table
ref="dataTableRef"
v-loading="loading"
:data="pageData"
highlight-current-row
>
<el-card shadow="never">
<el-table ref="dataTableRef" v-loading="loading" :data="pageData" highlight-current-row>
<el-table-column type="index" label="序号" width="60" />
<el-table-column label="通知标题" prop="title" min-width="200" />
<el-table-column align="center" label="通知类型" width="150">
@@ -41,12 +36,7 @@
<DictLabel v-model="scope.row.type" code="notice_type" />
</template>
</el-table-column>
<el-table-column
align="center"
label="发布人"
prop="publisherName"
width="100"
/>
<el-table-column align="center" label="发布人" prop="publisherName" width="100" />
<el-table-column align="center" label="通知等级" width="100">
<template #default="scope">
<DictLabel v-model="scope.row.level" code="notice_level" />
@@ -60,12 +50,7 @@
width="150"
/>
<el-table-column
align="center"
label="发布人"
prop="publisherName"
width="150"
/>
<el-table-column align="center" label="发布人" prop="publisherName" width="150" />
<el-table-column align="center" label="状态" width="100">
<template #default="scope">
<el-tag v-if="scope.row.isRead == 1" type="success">已读</el-tag>
@@ -74,12 +59,7 @@
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="80">
<template #default="scope">
<el-button
type="primary"
size="small"
link
@click="viewNoticeDetail(scope.row.id)"
>
<el-button type="primary" size="small" link @click="viewNoticeDetail(scope.row.id)">
查看
</el-button>
</template>

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

@@ -1,12 +1,7 @@
<template>
<div class="app-container">
<div class="search-bar">
<el-form
ref="queryFormRef"
:model="queryParams"
:inline="true"
label-suffix=":"
>
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-suffix=":">
<el-form-item label="标题" prop="title">
<el-input
v-model="queryParams.title"
@@ -28,14 +23,8 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery()">
<template #icon><Search /></template>
搜索
</el-button>
<el-button @click="handleResetQuery()">
<template #icon><Refresh /></template>
重置
</el-button>
<el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
</el-form-item>
</el-form>
</div>
@@ -45,18 +34,18 @@
<el-button
v-hasPerm="['sys:notice:add']"
type="success"
icon="plus"
@click="handleOpenDialog()"
>
<template #icon><Plus /></template>
新增通知
</el-button>
<el-button
v-hasPerm="['sys:notice:delete']"
type="danger"
:disabled="ids.length === 0"
:disabled="selectIds.length === 0"
icon="delete"
@click="handleDelete()"
>
<template #icon><Delete /></template>
删除
</el-button>
</template>
@@ -76,43 +65,23 @@
<DictLabel v-model="scope.row.type" :code="'notice_type'" />
</template>
</el-table-column>
<el-table-column
align="center"
label="发布人"
prop="publisherName"
width="150"
/>
<el-table-column align="center" label="发布人" prop="publisherName" width="150" />
<el-table-column align="center" label="通知等级" width="100">
<template #default="scope">
<DictLabel v-model="scope.row.level" code="notice_level" />
</template>
</el-table-column>
<el-table-column
align="center"
label="通告目标类型"
prop="targetType"
min-width="100"
>
<el-table-column align="center" label="通告目标类型" prop="targetType" min-width="100">
<template #default="scope">
<el-tag v-if="scope.row.targetType == 1" type="warning">
全体
</el-tag>
<el-tag v-if="scope.row.targetType == 2" type="success">
指定
</el-tag>
<el-tag v-if="scope.row.targetType == 1" type="warning">全体</el-tag>
<el-tag v-if="scope.row.targetType == 2" type="success">指定</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="发布状态" min-width="100">
<template #default="scope">
<el-tag v-if="scope.row.publishStatus == 0" type="info">
未发布
</el-tag>
<el-tag v-if="scope.row.publishStatus == 1" type="success">
已发布
</el-tag>
<el-tag v-if="scope.row.publishStatus == -1" type="warning">
已撤回
</el-tag>
<el-tag v-if="scope.row.publishStatus == 0" type="info">未发布</el-tag>
<el-tag v-if="scope.row.publishStatus == 1" type="success">已发布</el-tag>
<el-tag v-if="scope.row.publishStatus == -1" type="warning">已撤回</el-tag>
</template>
</el-table-column>
<el-table-column label="操作时间" width="250">
@@ -126,10 +95,7 @@
<span>发布时间：</span>
<span>{{ scope.row.publishTime || "-" }}</span>
</div>
<div
v-else-if="scope.row.publishStatus === -1"
class="flex-x-start"
>
<div v-else-if="scope.row.publishStatus === -1" class="flex-x-start">
<span>撤回时间：</span>
<span>{{ scope.row.revokeTime || "-" }}</span>
</div>
@@ -141,7 +107,7 @@
type="primary"
size="small"
link
@click="openNoticeDetailDialog(scope.row.id)"
@click="handleOpenNoticeDetailDialog(scope.row.id)"
>
查看
</el-button>
@@ -151,7 +117,7 @@
type="primary"
size="small"
link
@click="handlePublishNotice(scope.row.id)"
@click="handlePublish(scope.row.id)"
>
发布
</el-button>
@@ -161,7 +127,7 @@
type="primary"
size="small"
link
@click="revokeNotice(scope.row.id)"
@click="handleRevoke(scope.row.id)"
>
撤回
</el-button>
@@ -206,20 +172,12 @@
width="1250"
@close="handleCloseDialog"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="通知标题" prop="title">
<el-input v-model="formData.title" placeholder="通知标题" clearable />
</el-form-item>
<el-form-item label="通知内容" prop="content">
<WangEditor
v-model="formData.content"
style="min-height: 480px; max-height: 500px"
/>
<WangEditor v-model="formData.content" style="min-height: 480px; max-height: 500px" />
</el-form-item>
<el-form-item label="通知类型" prop="type">
<Dict v-model="formData.type" type="button" code="notice_type" />
@@ -233,17 +191,8 @@
<el-radio :value="2">指定</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
v-if="formData.targetType == 2"
label="指定用户"
prop="targetUserIds"
>
<el-select
v-model="formData.targetUserIds"
multiple
search
placeholder="请选择指定用户"
>
<el-form-item v-if="formData.targetType == 2" label="指定用户" prop="targetUserIds">
<el-select v-model="formData.targetUserIds" multiple search placeholder="请选择指定用户">
<el-option
v-for="item in userOptions"
:key="item.value"
@@ -271,11 +220,7 @@ defineOptions({
inheritAttrs: false,
});
import NoticeAPI, {
NoticePageVO,
NoticeForm,
NoticePageQuery,
} from "@/api/system/notice";
import NoticeAPI, { NoticePageVO, NoticeForm, NoticePageQuery } from "@/api/system/notice";
import UserAPI from "@/api/system/user";
const queryFormRef = ref(ElForm);
@@ -283,7 +228,7 @@ const dataFormRef = ref(ElForm);
const noticeDetailRef = ref();
const loading = ref(false);
const ids = ref<number[]>([]);
const selectIds = ref<number[]>([]);
const total = ref(0);
const queryParams = reactive<NoticePageQuery>({
@@ -327,7 +272,7 @@ const rules = reactive({
type: [{ required: true, message: "请选择通知类型", trigger: "change" }],
});
/** 查询通知公告 */
// 查询通知公告
function handleQuery() {
loading.value = true;
NoticeAPI.getPage(queryParams)
@@ -340,19 +285,19 @@ function handleQuery() {
});
}
/** 重置通知公告查询 */
// 重置查询
function handleResetQuery() {
queryFormRef.value!.resetFields();
queryParams.pageNum = 1;
handleQuery();
}
/** 行复选框选中记录选中ID集合 */
// 行复选框选中项变化
function handleSelectionChange(selection: any) {
ids.value = selection.map((item: any) => item.id);
selectIds.value = selection.map((item: any) => item.id);
}
/** 打开通知公告弹窗 */
// 打开通知公告弹窗
function handleOpenDialog(id?: number) {
UserAPI.getOptions().then((data) => {
userOptions.value = data;
@@ -370,21 +315,23 @@ function handleOpenDialog(id?: number) {
}
}
function handlePublishNotice(id: number) {
// 发布通知公告
function handlePublish(id: number) {
NoticeAPI.publish(id).then(() => {
ElMessage.success("发布成功");
handleQuery();
});
}
function revokeNotice(id: number) {
// 撤回通知公告
function handleRevoke(id: number) {
NoticeAPI.revoke(id).then(() => {
ElMessage.success("撤回成功");
handleQuery();
});
}
/** 提交通知公告表单 */
// 通知公告表单提交
function handleSubmit() {
dataFormRef.value.validate((valid: any) => {
if (valid) {
@@ -411,7 +358,7 @@ function handleSubmit() {
});
}
/** 关闭通知公告弹窗 */
// 关闭通知公告弹窗
function handleCloseDialog() {
dialog.visible = false;
dataFormRef.value.resetFields();
@@ -419,9 +366,9 @@ function handleCloseDialog() {
formData.id = undefined;
}
/** 删除通知公告 */
// 删除通知公告
function handleDelete(id?: number) {
const deleteIds = [id || ids.value].join(",");
const deleteIds = [id || selectIds.value].join(",");
if (!deleteIds) {
ElMessage.warning("请勾选删除项");
return;
@@ -447,8 +394,8 @@ function handleDelete(id?: number) {
);
}
/** 打开通知公告详情弹窗 */
function openNoticeDetailDialog(id: number) {
// 打开通知公告详情弹窗
function handleOpenNoticeDetailDialog(id: number) {
noticeDetailRef.value.openNotice(id);
}

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

@@ -12,30 +12,16 @@
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">
<template #icon><Search /></template>
搜索
</el-button>
<el-button @click="handleResetQuery">
<template #icon><Refresh /></template>
重置
</el-button>
<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="never">
<div class="mb-10px">
<el-button type="success" @click="handleOpenDialog()">
<template #icon><Plus /></template>
新增
</el-button>
<el-button
type="danger"
:disabled="ids.length === 0"
@click="handleDelete()"
>
<template #icon><Delete /></template>
<el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>
<el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
删除
</el-button>
</div>
@@ -110,12 +96,7 @@
width="500px"
@close="handleCloseDialog"
>
<el-form
ref="roleFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-form ref="roleFormRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="角色名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入角色名称" />
</el-form-item>
@@ -165,12 +146,7 @@
size="500"
>
<div class="flex-x-between">
<el-input
v-model="permKeywords"
clearable
class="w-[150px]"
placeholder="菜单权限名称"
>
<el-input v-model="permKeywords" clearable class="w-[150px]" placeholder="菜单权限名称">
<template #prefix>
<Search />
</template>
@@ -195,9 +171,7 @@
<template #content>
如果只需勾选菜单权限，不需要勾选子菜单或者按钮权限，请关闭父子联动
</template>
<el-icon
class="ml-1 color-[--el-color-primary] inline-block cursor-pointer"
>
<el-icon class="ml-1 color-[--el-color-primary] inline-block cursor-pointer">
<QuestionFilled />
</el-icon>
</el-tooltip>
@@ -220,9 +194,7 @@
</el-tree>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleAssignPermSubmit">
确 定
</el-button>
<el-button type="primary" @click="handleAssignPermSubmit">确 定</el-button>
<el-button @click="assignPermDialogVisible = false">取 消</el-button>
</div>
</template>
@@ -236,11 +208,7 @@ defineOptions({
inheritAttrs: false,
});
import RoleAPI, {
RolePageVO,
RoleForm,
RolePageQuery,
} from "@/api/system/role";
import RoleAPI, { RolePageVO, RoleForm, RolePageQuery } from "@/api/system/role";
import MenuAPI from "@/api/system/menu";
const queryFormRef = ref(ElForm);
@@ -414,9 +382,7 @@ async function handleOpenAssignPermDialog(row: RolePageVO) {
RoleAPI.getRoleMenuIds(roleId)
.then((data) => {
const checkedMenuIds = data;
checkedMenuIds.forEach((menuId) =>
permTreeRef.value!.setChecked(menuId, true, false)
);
checkedMenuIds.forEach((menuId) => permTreeRef.value!.setChecked(menuId, true, false));
})
.finally(() => {
loading.value = false;