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

refactor: 系统管理页面重构和ts类型声明优化

Browse Source 
Former-commit-id: 40263bbb072596ada41ef33d9170841e7e66cd01
This commit is contained in:
郝先瑞
2022-06-15 00:48:17 +08:00
parent 928ba2dbd8
commit 321b584f9f
116 changed files with 1692 additions and 1485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/views/system/client/index.vue
View File

@@ -1,7 +1,7 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'client'
name: 'client',
};
</script>
@@ -11,12 +11,18 @@ import {
getClientFormDetial,
addClient,
updateClient,
deleteClients
deleteClients,
} from '@/api/system/client';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { onMounted, reactive, getCurrentInstance, ref, toRefs } from 'vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import { ClientFormData, ClientItem, ClientQueryParam, Option } from '@/types';
import {
ClientFormData,
ClientItem,
ClientQueryParam,
} from '@/types/api/system/client';
import { Option } from '@/types/common';
const { proxy }: any = getCurrentInstance();
const queryFormRef = ref(ElForm);
@@ -31,21 +37,23 @@ const state = reactive({
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10
pageSize: 10,
} as ClientQueryParam,
clientList: [] as ClientItem[],
total: 0,
dialog: {
title: '',
visible: false,
type: 'create'
type: 'create',
},
formData: {} as ClientFormData,
rules: {
clientId: [{ required: true, message: '客户端ID不能为空', trigger: 'blur' }]
clientId: [
{ required: true, message: '客户端ID不能为空', trigger: 'blur' },
],
},
authorizedGrantTypesOptions: [] as Option[],
checkedAuthorizedGrantTypes: [] as string[]
checkedAuthorizedGrantTypes: [] as string[],
});
const {
@@ -59,7 +67,7 @@ const {
formData,
rules,
authorizedGrantTypesOptions,
checkedAuthorizedGrantTypes
checkedAuthorizedGrantTypes,
} = toRefs(state);
function handleQuery() {
@@ -82,14 +90,14 @@ function handleSelectionChange(selection: any) {
}
function handleAdd() {
proxy.$listDictsByCode('grant_type').then((response: any) => {
proxy.$getDictItemsByTypeCode('grant_type').then((response: any) => {
state.authorizedGrantTypesOptions = response.data;
});
state.dialog = {
title: '添加客户端',
visible: true,
type: 'create'
type: 'create',
};
}
@@ -97,11 +105,11 @@ function handleUpdate(row: any) {
state.dialog = {
title: '修改客户端',
visible: true,
type: 'edit'
type: 'edit',
};
const clientId = row.clientId || ids;
proxy.$listDictsByCode('grant_type').then((res: any) => {
proxy.$getDictItemsByTypeCode('grant_type').then((res: any) => {
state.authorizedGrantTypesOptions = res.data;
getClientFormDetial(clientId).then(({ data }) => {
@@ -149,7 +157,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
})
.then(() => {
deleteClients(clientIds).then(() => {
@@ -182,10 +190,10 @@ onMounted(() => {
>
</el-form-item>
<el-form-item prop="clientId">
<el-form-item>
<el-input
v-model="queryParams.clientId"
placeholder="输入客户端ID"
v-model="queryParams.keywords"
placeholder="客户端ID"
clearable
style="width: 240px"
@keyup.enter="handleQuery"

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

@@ -1,7 +1,6 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'dept'
name: 'dept',
};
</script>
@@ -11,12 +10,12 @@ import { onMounted, reactive, ref, toRefs } from 'vue';
// API依赖
import {
getDeptDetail,
getDeptForrmData,
deleteDept,
updateDept,
addDept,
listSelectDepartments,
listTableDepartments
listDepartments,
} from '@/api/system/dept';
// 组件依赖
@@ -26,9 +25,8 @@ import {
DeptFormData,
DeptItem,
DeptQueryParam,
Dialog,
Option
} from '@/types';
} from '@/types/api/system/dept';
import { Dialog, Option } from '@/types/common';
// DOM元素的引用声明定义
const queryFormRef = ref(ElForm);
@@ -51,16 +49,16 @@ const state = reactive({
// 表单数据
formData: {
sort: 1,
status: 1
status: 1,
} as DeptFormData,
// 表单参数校验
rules: {
parentId: [
{ required: true, message: '上级部门不能为空', trigger: 'blur' }
{ required: true, message: '上级部门不能为空', trigger: 'blur' },
],
name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }]
}
sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
},
});
const {
@@ -71,7 +69,7 @@ const {
queryParams,
formData,
rules,
dialog
dialog,
} = toRefs(state);
/**
@@ -79,7 +77,7 @@ const {
*/
function handleQuery() {
state.loading = true;
listTableDepartments(state.queryParams).then(({ data }) => {
listDepartments(state.queryParams).then(({ data }) => {
state.deptList = data;
state.loading = false;
});
@@ -103,11 +101,11 @@ function handleSelectionChange(selection: any) {
*/
async function loadDeptData() {
const deptOptions: any[] = [];
listSelectDepartments().then(response => {
listSelectDepartments().then((response) => {
const rootDeptOption = {
value: '0',
label: '顶级部门',
children: response.data
children: response.data,
};
deptOptions.push(rootDeptOption);
state.deptOptions = deptOptions;
@@ -123,7 +121,7 @@ function handleAdd(row: any) {
state.formData.parentId = row.id;
state.dialog = {
title: '添加部门',
visible: true
visible: true,
};
}
@@ -135,9 +133,9 @@ async function handleUpdate(row: any) {
const deptId = row.id || state.ids;
state.dialog = {
title: '修改部门',
visible: true
visible: true,
};
getDeptDetail(deptId).then((response: any) => {
getDeptForrmData(deptId).then((response: any) => {
state.formData = response.data;
});
}
@@ -175,7 +173,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm(`确认删除已选中的数据项?`, '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
})
.then(() => {
deleteDept(ids)

376
src/views/system/dict/components/DictItem.vue
View File

@@ -1,3 +1,188 @@
<script lang="ts">
export default {
name: 'dictItem',
};
</script>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs, watch } from 'vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import {
DictItem,
DictItemFormData,
DictItemQueryParam,
} from '@/types/api/system/dict';
import { Dialog } from '@/types/common';
import {
listPageDictItems,
getDictItemData,
addDictItem,
updateDictItem,
deleteDictItems,
} from '@/api/system/dict';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
const props = defineProps({
typeCode: {
type: String,
default: () => {
return '';
},
},
typeName: {
type: String,
default: () => {
return '';
},
},
});
watch(
() => props.typeCode,
(value) => {
state.queryParams.typeCode = value;
state.formData.typeCode = value;
handleQuery();
}
);
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const state = reactive({
loading: true,
// 选中ID数组
ids: [] as number[],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
total: 0,
queryParams: { pageNum: 1, pageSize: 10 } as DictItemQueryParam,
dictItemList: [] as DictItem[],
dialog: { visible: false } as Dialog,
formData: {
typeCode: props.typeCode,
typeName: props.typeName,
status: 1,
sort: 1,
} as DictItemFormData,
rules: {
name: [{ required: true, message: '请输入字典项名称', trigger: 'blur' }],
value: [{ required: true, message: '请输入字典项值', trigger: 'blur' }],
},
localDictCode: props.typeCode,
localDictName: props.typeName,
});
const {
loading,
multiple,
queryParams,
dictItemList,
dialog,
formData,
rules,
total,
} = toRefs(state);
function handleQuery() {
if (state.queryParams.typeCode) {
state.loading = true;
listPageDictItems(state.queryParams).then(({ data }) => {
state.dictItemList = data.list;
state.total = data.total;
state.loading = false;
});
} else {
state.dictItemList = [];
state.total = 0;
state.queryParams.pageNum = 1;
state.loading = false;
}
}
function resetQuery() {
queryFormRef.value.resetFields();
handleQuery();
}
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.id);
state.single = selection.length !== 1;
state.multiple = !selection.length;
}
function handleAdd() {
if (!state.formData.typeCode) {
ElMessage.warning('请选择字典类型后添加数据项');
return;
}
state.dialog = {
title: '添加字典数据项',
visible: true,
};
}
function handleUpdate(row: any) {
state.dialog = {
title: '修改字典数据项',
visible: true,
};
const id = row.id || state.ids;
getDictItemData(id).then(({ data }) => {
state.formData = data;
});
}
function submitForm() {
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
if (state.formData.id) {
updateDictItem(state.formData.id, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addDictItem(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
});
}
}
});
}
function cancel() {
state.dialog.visible = false;
state.formData.id = undefined;
dataFormRef.value.resetFields();
}
function handleDelete(row: any) {
const ids = [row.id || state.ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteDictItems(ids).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
}
onMounted(() => {
handleQuery();
});
</script>
<template>
<div class="app-container">
<!-- 搜索表单 -->
@@ -86,12 +271,15 @@
:rules="rules"
label-width="100px"
>
<el-form-item label="字典名称"> </el-form-item>
<el-form-item label="字典项名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入字典项名称" />
<el-form-item label="字典类型名称">{{ typeName }}</el-form-item>
<el-form-item label="数据项名称" prop="name">
<el-input
v-model="formData.name"
placeholder="请输入字典数据项名称"
/>
</el-form-item>
<el-form-item label="字典项值" prop="value">
<el-input v-model="formData.value" placeholder="请输入字典项值" />
<el-form-item label="数据项值" prop="value">
<el-input v-model="formData.value" placeholder="请输入字典数据项值" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
@@ -120,181 +308,3 @@
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs, watch } from 'vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import {
Dialog,
DictItem,
DictItemFormData,
DictItemQueryParam
} from '@/types';
import {
listDictItemPages,
getDictItemDetail,
addDictItem,
updateDictItem,
deleteDictItem
} from '@/api/system/dict';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
const props = defineProps({
dictCode: {
type: String,
default: () => {
return '';
}
},
dictName: {
type: String,
default: () => {
return '';
}
}
});
watch(
() => props.dictCode,
value => {
state.queryParams.dictCode = value;
state.formData.dictCode = value;
handleQuery();
}
);
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const state = reactive({
loading: true,
// 选中ID数组
ids: [] as number[],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
total: 0,
queryParams: { pageNum: 1, pageSize: 10 } as DictItemQueryParam,
dictItemList: [] as DictItem[],
dialog: { visible: false } as Dialog,
formData: {
dictCode: props.dictCode,
dictName: props.dictName,
status: 1,
sort: 1
} as DictItemFormData,
rules: {
name: [{ required: true, message: '请输入字典项名称', trigger: 'blur' }],
value: [{ required: true, message: '请输入字典项值', trigger: 'blur' }]
},
localDictCode: props.dictCode,
localDictName: props.dictName
});
const {
loading,
multiple,
queryParams,
dictItemList,
dialog,
formData,
rules,
total
} = toRefs(state);
function handleQuery() {
if (state.queryParams.dictCode) {
state.loading = true;
listDictItemPages(state.queryParams).then(({ data }) => {
state.dictItemList = data.list;
state.total = data.total;
state.loading = false;
});
} else {
state.dictItemList = [];
state.total = 0;
state.queryParams.pageNum = 1;
state.loading = false;
}
}
function resetQuery() {
queryFormRef.value.resetFields();
handleQuery();
}
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.id);
state.single = selection.length !== 1;
state.multiple = !selection.length;
}
function handleAdd() {
if (!state.formData.dictCode) {
ElMessage.warning('请选择字典后添加数据项');
return;
}
state.dialog = {
title: '添加字典项',
visible: true
};
}
function handleUpdate(row: any) {
state.dialog = {
title: '修改字典项',
visible: true
};
const id = row.id || state.ids;
getDictItemDetail(id).then(({ data }) => {
state.formData = data;
});
}
function submitForm() {
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
if (state.formData.id) {
updateDictItem(state.formData.id, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addDictItem(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
});
}
}
});
}
function cancel() {
state.dialog.visible = false;
state.formData.id = undefined;
dataFormRef.value.resetFields();
}
function handleDelete(row: any) {
const ids = [row.id || state.ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteDictItem(ids).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
}
onMounted(() => {
handleQuery();
});
</script>

47
src/views/system/dict/components/Dict.vue → src/views/system/dict/components/DictType.vue
View File

@@ -1,7 +1,6 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'dict'
name: 'dictType',
};
</script>
@@ -132,15 +131,21 @@ export default {
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import {
listDictPages,
getDictFormDetail,
addDict,
updateDict,
deleteDict
listPageDictTypes,
getDictFormData,
addDictType,
updateDictType,
deleteDictTypes,
} from '@/api/system/dict';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import { Dialog, Dict, DictFormData, DictQueryParam } from '@/types';
import { Dialog } from '@/types/common';
import {
Dict,
DictFormTypeData,
DictQueryParam,
} from '@/types/api/system/dict';
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
@@ -157,18 +162,18 @@ const state = reactive({
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10
pageSize: 10,
} as DictQueryParam,
dictList: [] as Dict[],
total: 0,
dialog: { visible: false } as Dialog,
formData: {
status: 1
} as DictFormData,
status: 1,
} as DictFormTypeData,
rules: {
name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入字典编码', trigger: 'blur' }]
}
code: [{ required: true, message: '请输入字典编码', trigger: 'blur' }],
},
});
const { total, dialog, loading, dictList, formData, rules, queryParams } =
@@ -177,7 +182,7 @@ const { total, dialog, loading, dictList, formData, rules, queryParams } =
function handleQuery() {
emit('dictClick', null);
state.loading = true;
listDictPages(state.queryParams).then(({ data }) => {
listPageDictTypes(state.queryParams).then(({ data }) => {
state.dictList = data.list;
state.total = data.total;
state.loading = false;
@@ -198,17 +203,17 @@ function handleSelectionChange(selection: any) {
function handleAdd() {
state.dialog = {
title: '添加字典',
visible: true
visible: true,
};
}
function handleUpdate(row: any) {
state.dialog = {
title: '修改字典',
visible: true
visible: true,
};
const id = row.id || state.ids;
getDictFormDetail(id).then(({ data }) => {
getDictFormData(id).then(({ data }) => {
state.formData = data;
});
}
@@ -217,13 +222,13 @@ function submitForm() {
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
if (state.formData.id) {
updateDict(state.formData.id, state.formData).then(() => {
updateDictType(state.formData.id, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addDict(state.formData).then(() => {
addDictType(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
@@ -244,10 +249,10 @@ function handleDelete(row: any) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
})
.then(() => {
deleteDict(ids).then(() => {
deleteDictTypes(ids).then(() => {
ElMessage.success('删除成功');
handleQuery();
});

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

@@ -1,56 +1,55 @@
<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue';
import DictType from './components/DictType.vue';
import DictItem from './components/DictItem.vue';
import { reactive, toRefs } from 'vue';
const state = reactive({
typeCode: '',
typeName: '',
});
const { typeCode, typeName } = toRefs(state);
const handleDictTypeClick = (row: any) => {
if (row) {
state.typeName = row.name;
state.typeCode = row.code;
} else {
state.typeName = '';
state.typeCode = '';
}
};
</script>
<template>
<div class="app-container">
<el-row :gutter="10">
<el-col :span="12" :xs="24">
<el-card class="box-card">
<template #header>
<svg-icon color="#333" icon-class="education" />
字典列表
<svg-icon icon-class="dict" />
字典类型
</template>
<!-- 字典列表子组件 -->
<dict @dictClick="handleDictClick" />
<dict-type @dictClick="handleDictTypeClick" />
</el-card>
</el-col>
<el-col :span="12" :xs="24">
<el-card class="box-card">
<template #header>
<svg-icon color="#333" icon-class="dict" />
<svg-icon icon-class="dict_item" />
<span style="margin: 0 5px">字典数据项</span>
<el-tag type="success" v-if="dictCode" size="small">{{
dictName
<el-tag type="success" v-if="typeCode" size="small">{{
typeName
}}</el-tag>
<el-tag type="warning" v-else size="small">未选择字典</el-tag>
</template>
<!-- 字典项组件 -->
<dict-item :dictName="dictName" :dictCode="dictCode" />
<dict-item :typeName="typeName" :typeCode="typeCode" />
</el-card>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue';
import Dict from './components/Dict.vue';
import DictItem from './components/DictItem.vue';
import { reactive, toRefs } from 'vue';
const state = reactive({
dictCode: '',
dictName: '' // 字典名称，用于字典项组件回显
});
const { dictCode, dictName } = toRefs(state);
const handleDictClick = (dictRow: any) => {
if (dictRow) {
state.dictName = dictRow.name;
state.dictCode = dictRow.code;
} else {
state.dictName = '';
state.dictCode = '';
}
};
</script>

34
src/views/system/menu/components/Menu.vue
View File

@@ -170,7 +170,7 @@
@click="iconSelectVisible = true"
>
<template #prefix>
<svg-icon :icon-class="formData.icon" style="margin: auto" />
<svg-icon :icon-class="formData.icon" />
</template>
</el-input>
</template>
@@ -220,21 +220,21 @@ import { reactive, ref, onMounted, toRefs } from 'vue';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { ElForm, ElMessage, ElMessageBox, ElPopover } from 'element-plus';
import { Dialog, Option } from '@/types/common';
import {
Dialog,
Option,
MenuFormData,
MenuItem,
MenuQueryParam
} from '@/types';
MenuQueryParam,
} from '@/types/api/system/menu';
// API 依赖
import {
listTableMenus,
listMenus,
getMenuDetail,
listSelectMenus,
addMenu,
deleteMenus,
updateMenu
updateMenu,
} from '@/api/system/menu';
import SvgIcon from '@/components/SvgIcon/index.vue';
@@ -262,7 +262,7 @@ const state = reactive({
visible: 1,
sort: 1,
component: 'Layout',
type: 'MENU'
type: 'MENU',
} as MenuFormData,
rules: {
parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }],
@@ -270,8 +270,8 @@ const state = reactive({
type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
component: [
{ required: true, message: '请输入组件完整路径', trigger: 'blur' }
]
{ required: true, message: '请输入组件完整路径', trigger: 'blur' },
],
},
menuOptions: [] as Option[],
currentRow: undefined,
@@ -279,8 +279,8 @@ const state = reactive({
iconSelectVisible: false,
cacheData: {
menuType: '',
menuPath: ''
}
menuPath: '',
},
});
const {
@@ -292,7 +292,7 @@ const {
rules,
menuOptions,
iconSelectVisible,
cacheData
cacheData,
} = toRefs(state);
/**
@@ -302,7 +302,7 @@ function handleQuery() {
// 重置父组件
emit('menuClick', null);
state.loading = true;
listTableMenus(state.queryParams).then(({ data }) => {
listMenus(state.queryParams).then(({ data }) => {
state.menuList = data;
state.loading = false;
});
@@ -338,7 +338,7 @@ async function handleAdd(row: any) {
await loadMenuData();
state.dialog = {
title: '添加菜单',
visible: true
visible: true,
};
if (row.id) {
// 行点击新增
@@ -368,7 +368,7 @@ async function handleUpdate(row: any) {
await loadMenuData();
state.dialog = {
title: '修改菜单',
visible: true
visible: true,
};
const id = row.id || state.ids;
getMenuDetail(id).then(({ data }) => {
@@ -417,7 +417,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
})
.then(() => {
deleteMenus(ids).then(() => {

45
src/views/system/menu/components/Perm.vue
View File

@@ -5,7 +5,7 @@ import {
reactive,
ref,
getCurrentInstance,
toRefs
toRefs,
} from 'vue';
import {
@@ -13,18 +13,18 @@ import {
getPermFormDetail,
addPerm,
updatePerm,
deletePerms
deletePerms,
} from '@/api/system/perm';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import { Dialog, Option } from '@/types/common';
import {
Dialog,
PermFormData,
PermItem,
PermQueryParam,
Option
} from '@/types';
} from '@/types/api/system/perm';
const { proxy }: any = getCurrentInstance();
@@ -34,13 +34,15 @@ const dataFormRef = ref(ElForm);
const props = defineProps({
menuId: {
type: String,
default: () => {}
}
default: () => {
return '';
},
},
});
watch(
() => props.menuId,
value => {
(value) => {
state.queryParams.menuId = value;
handleQuery();
}
@@ -56,26 +58,26 @@ const state = reactive({
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10
pageSize: 10,
} as PermQueryParam,
permList: [] as PermItem[],
total: 0,
dialog: {
visible: false
visible: false,
} as Dialog,
formData: {} as PermFormData,
rules: {
name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
perm: [{ required: true, message: '请输入权限标识', trigger: 'blur' }],
method: [{ required: true, message: '请选择请求方式', trigger: 'blur' }]
method: [{ required: true, message: '请选择请求方式', trigger: 'blur' }],
},
microServiceOptions: [] as Option[],
requestMethodOptions: [] as Option[],
urlPerm: {
requestMethod: '',
serviceName: '',
requestPath: ''
}
requestPath: '',
},
});
const {
@@ -89,7 +91,7 @@ const {
microServiceOptions,
requestMethodOptions,
urlPerm,
queryParams
queryParams,
} = toRefs(state);
function handleQuery() {
@@ -123,11 +125,11 @@ function handleSelectionChange(selection: any) {
* 加载字典数据
*/
function loadDictOptions() {
proxy.$listDictsByCode('micro_service').then((response: any) => {
proxy.$getDictItemsByTypeCode('micro_service').then((response: any) => {
state.microServiceOptions = response.data;
});
proxy.$listDictsByCode('request_method').then((response: any) => {
proxy.$getDictItemsByTypeCode('request_method').then((response: any) => {
state.requestMethodOptions = response.data;
});
}
@@ -136,7 +138,7 @@ function handleAdd() {
loadDictOptions();
state.dialog = {
title: '添加权限',
visible: true
visible: true,
};
}
@@ -144,10 +146,10 @@ function handleUpdate(row: any) {
loadDictOptions();
state.dialog = {
title: '修改权限',
visible: true
visible: true,
};
const id = row.id || state.ids;
getPermFormDetail(id).then(response => {
getPermFormDetail(id).then((response) => {
const { data } = response;
state.formData = data;
if (data && data.urlPerm) {
@@ -169,6 +171,7 @@ function submitForm() {
dataFormRef.value.validate((isValid: any) => {
if (isValid) {
// 接口权限和按钮权限必填其一
console.log(state.urlPerm.requestPath, state.formData.btnPerm);
if (!(state.urlPerm.requestPath || state.formData.btnPerm)) {
ElMessage.warning('请至少填写一种权限');
return false;
@@ -217,7 +220,7 @@ function resetForm() {
state.urlPerm = {
requestMethod: '',
serviceName: '',
requestPath: ''
requestPath: '',
};
}
@@ -231,7 +234,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
})
.then(() => {
deletePerms(ids).then(() => {

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

@@ -4,7 +4,7 @@
<el-col :span="10" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon color="#333" icon-class="menu" />
<svg-icon icon-class="menu" />
菜单列表
</template>
<menu-table @menuClick="handleMenuClick" />
@@ -13,7 +13,7 @@
<el-col :span="14" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon color="#333" icon-class="perm" />
<svg-icon icon-class="perm" />
<span style="margin: 0 5px">权限列表</span>
<el-tag type="success" v-if="menuId" size="small">{{
menuName
@@ -38,7 +38,7 @@ import { reactive, toRefs } from 'vue';
const state = reactive({
menuId: undefined,
menuName: ''
menuName: '',
});
const { menuId, menuName } = toRefs(state);

128
src/views/system/role/components/Menu.vue
View File

@@ -1,128 +0,0 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'cmenu'
};
</script>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue';
import { listSelectMenus } from '@/api/system/menu';
import { listRoleMenuIds, updateRoleMenu } from '@/api/system/role';
import { ElTree, ElMessage } from 'element-plus';
import { Switch, Position } from '@element-plus/icons-vue';
import { Option } from '@/types';
const emit = defineEmits(['menuClick']);
const props = defineProps({
role: {
type: Object,
default: () => {}
}
});
const menuRef = ref(ElTree); // 属性名必须和元素的ref属性值一致
watch(
() => props.role.id,
newVal => {
if (newVal) {
state.checkStrictly = true;
// 获取角色拥有的的菜单ID
listRoleMenuIds(newVal).then(({ data }) => {
menuRef.value.setCheckedKeys(data);
state.checkStrictly = false;
});
}
}
);
const state = reactive({
expandedKeys: [], // 展开的节点
menuOptions: [] as Option[],
checkStrictly: false,
isExpandAll: true,
refreshTree: true
});
const { expandedKeys, menuOptions, checkStrictly, isExpandAll, refreshTree } =
toRefs(state);
/**
* 加载菜单树
*/
async function loadMenuData() {
await listSelectMenus().then(({ data }) => {
state.menuOptions = data;
});
}
function handleNodeClick(node: any) {
emit('menuClick', node);
}
/**
* 展开/收缩
*/
function toggleExpandAll() {
state.refreshTree = false;
state.isExpandAll = !state.isExpandAll;
nextTick(() => {
state.refreshTree = true;
});
}
/**
* 保存角色菜单
*/
function handleSubmit() {
const checkedMenuIds = menuRef.value
.getCheckedNodes(false, true)
.map((node: any) => node.value);
updateRoleMenu(props.role.id, checkedMenuIds).then(() => {
ElMessage.success('提交成功');
});
}
onMounted(() => {
loadMenuData();
});
</script>
<template>
<div class="app-container">
<el-row>
<el-col :span="12">
<el-button plain :icon="Switch" @click="toggleExpandAll"
>展开/折叠</el-button
>
</el-col>
<el-col :span="12" style="text-align: right">
<el-button type="primary" :icon="Position" @click="handleSubmit"
>提交</el-button
>
</el-col>
</el-row>
<el-tree
class="menu-tree"
ref="menuRef"
v-if="refreshTree"
:default-expanded-keys="expandedKeys"
:default-expand-all="isExpandAll"
:data="menuOptions"
show-checkbox
node-key="value"
empty-text="加载菜单中..."
:check-strictly="checkStrictly"
highlight-current
@node-click="handleNodeClick"
/>
</div>
</template>
<style lang="scss" scoped>
.menu-tree {
margin-top: 10px;
}
</style>

162
src/views/system/role/components/Perm.vue
View File

@@ -1,162 +0,0 @@
<template>
<div class="perm-container">
<div v-if="permissionOptions.length > 0">
<el-row>
<el-col :span="12">
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>全选
</el-checkbox>
</el-col>
<el-col :span="12" style="text-align: right">
<el-button type="primary" :icon="Position" @click="handleSubmit"
>提交</el-button
>
</el-col>
</el-row>
<el-row>
<el-col
:span="8"
v-for="item in permissionOptions"
style="margin-top: 20px"
:key="item.id"
>
<el-checkbox
border
v-model="item.checked"
:label="item.id"
:key="item.id"
@change="handleCheckedPermChange"
>
{{ item.name }}
</el-checkbox>
</el-col>
</el-row>
</div>
<div style="text-align: center" v-else>
<el-empty
:description="
!role
? '请选择角色'
: !menu
? '请选择菜单'
: '暂无数据，您可在【菜单管理】配置权限数据'
"
></el-empty>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, toRefs, watch } from 'vue';
import { listPerms } from '@/api/system/perm';
import { listRolePerms, saveRolePerms } from '@/api/system/role';
import { ElMessage } from 'element-plus';
import { Position } from '@element-plus/icons-vue';
import { PermQueryParam } from '@/types';
const props = defineProps({
role: {
type: Object,
default: () => {
return {};
}
},
menu: {
type: Object,
default: () => {
return {};
}
}
});
watch(
() => props.menu.id,
value => {
if (value) {
loadData();
}
}
);
const state = reactive({
loading: false,
permissionOptions: [] as Array<any>,
isIndeterminate: true,
checkAll: false,
checkedPerms: []
});
const { permissionOptions, isIndeterminate, checkAll } = toRefs(state);
function handleCheckAllChange(checked: any) {
state.isIndeterminate = false;
if (checked) {
state.permissionOptions.map(item => (item.checked = true));
} else {
// 全不选
state.permissionOptions.map(item => (item.checked = false));
}
}
function handleCheckedPermChange() {
const checkedCount = state.permissionOptions.filter(
item => item.checked
).length;
state.checkAll = checkedCount === state.permissionOptions.length;
state.isIndeterminate =
checkedCount > 0 && checkedCount < state.permissionOptions.length;
}
function loadData() {
if (!props.menu.id) {
resetData();
return false;
}
state.loading = true;
const params = { menuId: props.menu.id } as PermQueryParam;
listPerms(params).then(({ data }) => {
state.permissionOptions = data;
listRolePerms(props.role.id, props.menu.id).then(response => {
const checkedPermIds = response.data;
state.permissionOptions.map((item: any) => {
if (checkedPermIds.includes(item.id)) {
item.checked = true;
} else {
state.checkAll = false;
}
});
state.loading = false;
});
});
}
function handleSubmit() {
const checkedPermIds = state.permissionOptions
.filter(item => item.checked)
.map(item => item.id);
saveRolePerms(props.role.id, props.menu.id, checkedPermIds).then(() => {
ElMessage.success('提交成功');
});
}
function resetData() {
state.permissionOptions = [];
state.isIndeterminate = true;
state.checkAll = false;
}
onMounted(() => {
loadData();
});
</script>
<style scoped>
.perm-container {
width: 100%;
}
</style>

277
src/views/system/role/components/Role.vue
View File

@@ -1,277 +0,0 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'role'
};
</script>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import {
listRolePages,
updateRole,
getRoleFormDetail,
addRole,
deleteRoles
} from '@/api/system/role';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { RoleFormData, RoleItem, RoleQueryParam } from '@/types';
const emit = defineEmits(['roleClick']);
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致
const state = reactive({
loading: true,
// 选中ID数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10
} as RoleQueryParam,
roleList: [] as RoleItem[],
total: 0,
dialog: {
title: '',
visible: false
},
formData: {} as RoleFormData,
rules: {
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }]
}
});
const {
loading,
multiple,
queryParams,
roleList,
total,
dialog,
formData,
rules
} = toRefs(state);
function handleQuery() {
emit('roleClick', {});
state.loading = true;
listRolePages(state.queryParams).then(({ data }) => {
state.roleList = data.list;
state.total = data.total;
state.loading = false;
});
}
function resetQuery() {
queryFormRef.value.resetFields();
handleQuery();
}
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.id);
state.single = selection.length !== 1;
state.multiple = !selection.length;
}
function handleRowClick(row: any) {
emit('roleClick', row);
}
function handleAdd() {
state.dialog = {
title: '添加角色',
visible: true
};
}
function handleUpdate(row: any) {
state.dialog = {
title: '修改角色',
visible: true
};
const roleId = row.id || state.ids;
getRoleFormDetail(roleId).then(({ data }) => {
state.formData = data;
});
}
function submitForm() {
dataFormRef.value.validate((valid: any) => {
if (valid) {
if (state.formData.id) {
updateRole(state.formData.id as any, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addRole(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
});
}
}
});
}
/**
* 重置表单
*/
function cancel() {
state.dialog.visible = false;
dataFormRef.value.resetFields();
}
function handleDelete(row: any) {
const ids = [row.id || state.ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteRoles(ids).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
}
onMounted(() => {
handleQuery();
});
</script>
<template>
<div class="app-container">
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="multiple"
@click="handleDelete"
>删除</el-button
>
</el-form-item>
<el-form-item prop="name">
<el-input
v-model="queryParams.name"
placeholder="角色名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table
ref="dataTableRef"
v-loading="loading"
:data="roleList"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
highlight-current-row
border
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="角色名称" prop="name" />
<el-table-column label="角色编码" prop="code" />
<el-table-column label="操作" align="center" width="120">
<template #default="scope">
<el-button
type="primary"
:icon="Edit"
circle
plain
@click.stop="handleUpdate(scope.row)"
/>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click.stop="handleDelete(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<!-- 分页工具条 -->
<pagination
v-if="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
<!-- 表单弹窗 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
@close="cancel"
width="450px"
>
<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="请输入角色编码" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="formData.sort"
controls-position="right"
:min="0"
style="width: 100px"
/>
</el-form-item>
<el-form-item label="状态">
<el-radio-group v-model="formData.status">
<el-radio :label="1">正常</el-radio>
<el-radio :label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<style lang="scss" scoped></style>

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

@@ -1,116 +1,462 @@
<script lang="ts">
export default {
name: 'role',
};
</script>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref, toRefs } from 'vue';
import {
listPageRoles,
updateRole,
getRoleFormDetail,
addRole,
deleteRoles,
getRoleResourceIds,
updateRoleResource,
} from '@/api/system/role';
import { getResource } from '@/api/system/menu';
import { ElForm, ElMessage, ElMessageBox, ElTree } from 'element-plus';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import {
RoleFormData,
RoleItem,
RoleQueryParam,
} from '@/types/api/system/role';
import SvgIcon from '@/components/SvgIcon/index.vue';
const emit = defineEmits(['roleClick']);
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const resourceRef = ref(ElTree);
const state = reactive({
loading: true,
// 选中ID数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10,
} as RoleQueryParam,
roleList: [] as RoleItem[],
total: 0,
dialog: {
title: '',
visible: false,
},
formData: {} as RoleFormData,
rules: {
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
},
resourceDialogVisible: false,
menuOptions: [] as any[],
permOptions: [] as any[],
checkStrictly: false,
permGroupList: [],
checkedRole: {
id: '',
name: '',
}, // 选中的角色
});
const {
loading,
multiple,
queryParams,
roleList,
total,
dialog,
formData,
rules,
resourceDialogVisible,
menuOptions,
permOptions,
checkedRole,
checkStrictly,
} = toRefs(state);
function handleQuery() {
emit('roleClick', {});
state.loading = true;
listPageRoles(state.queryParams).then(({ data }) => {
state.roleList = data.list;
state.total = data.total;
state.loading = false;
});
}
function resetQuery() {
queryFormRef.value.resetFields();
handleQuery();
}
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.id);
state.single = selection.length !== 1;
state.multiple = !selection.length;
}
function handleRowClick(row: any) {
emit('roleClick', row);
}
function handleAdd() {
state.dialog = {
title: '添加角色',
visible: true,
};
}
function handleUpdate(row: any) {
state.dialog = {
title: '修改角色',
visible: true,
};
const roleId = row.id || state.ids;
getRoleFormDetail(roleId).then(({ data }) => {
state.formData = data;
});
}
function submitFormData() {
dataFormRef.value.validate((valid: any) => {
if (valid) {
if (state.formData.id) {
updateRole(state.formData.id as any, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addRole(state.formData).then(() => {
cancel();
ElMessage.success('新增成功');
handleQuery();
});
}
}
});
}
/**
* 弹窗关闭
*/
function cancel() {
state.dialog.visible = false;
dataFormRef.value.resetFields();
}
/**
* 删除
*/
function handleDelete(row: any) {
const ids = [row.id || state.ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteRoles(ids).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
}
/**
* 分配资源权限
*/
function handleResourceAssign(row: RoleItem) {
resourceDialogVisible.value = true;
permOptions.value.map((item) => (item.checked = false));
const roleId: any = row.id;
checkedRole.value = {
id: roleId,
name: row.name,
};
//资源下拉数据
getResource().then((response) => {
checkStrictly.value = true; // 父子节点不互相关联
state.menuOptions = response.data.menus;
state.permOptions = response.data.perms;
// 获取角色拥有的资源数据进行勾选
getRoleResourceIds(roleId).then((res) => {
const checkedMenuIds = res.data.menuIds;
const checkedPermIds = res.data.permIds;
nextTick(() => {
resourceRef.value.setCheckedKeys(checkedMenuIds);
permOptions.value.forEach((perm) => {
if (checkedPermIds.includes(perm.value)) {
perm.checked = true;
} else {
perm.checked = false;
}
});
});
checkStrictly.value = false; // 父子节点互相关联
});
});
}
/**
* 提交资源权限
*/
function handleRoleResourceSubmit() {
const checkedMenuIds: any[] = resourceRef.value
.getCheckedNodes(false, true)
.map((node: any) => node.value);
const checkedPermIds = state.permOptions
.filter((item) => item.checked)
.map((item) => item.value);
const roleResourceData = {
menuIds: checkedMenuIds,
permIds: checkedPermIds,
};
updateRoleResource(checkedRole.value.id, roleResourceData).then((res) => {
ElMessage.success('修改成功');
state.resourceDialogVisible = false;
handleQuery();
});
}
// 取消资源分配
function cancelResourceAssign() {
state.resourceDialogVisible = false;
}
onMounted(() => {
handleQuery();
});
</script>
<template>
<div class="app-container">
<el-row :gutter="10">
<el-col :span="10" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon color="#333" icon-class="role" />
角色列表
</template>
<Role ref="role" @roleClick="handleRoleClick" />
</el-card>
</el-col>
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="multiple"
@click="handleDelete"
>删除</el-button
>
</el-form-item>
<el-col :span="6" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon color="#333" icon-class="menu" />
<span style="margin: 0 5px">菜单分配</span>
<el-tag type="success" v-if="role.id">
<svg-icon color="green" icon-class="role" />
{{ role.name }}
</el-tag>
<el-tag type="warning" v-else size="small">请选择角色</el-tag>
</template>
<Menus ref="menu" @menuClick="handleMenuClick" :role="role" />
</el-card>
</el-col>
<el-form-item prop="name">
<el-input
v-model="queryParams.name"
placeholder="角色名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-col :span="8" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table
ref="dataTableRef"
v-loading="loading"
:data="roleList"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
highlight-current-row
border
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="角色名称" prop="name" />
<el-table-column label="角色编码" prop="code" />
<el-table-column label="操作" align="center" width="200">
<template #default="scope">
<el-button
type="primary"
circle
plain
@click.stop="handleResourceAssign(scope.row)"
>
<svg-icon icon-class="perm" />
<span style="margin: 0 5px">权限分配</span>
</el-button>
<el-tag type="success" style="margin: 0 5px 0 0" v-if="role.id">
<svg-icon color="green" icon-class="role" />
{{ role.name }}
</el-tag>
<el-tag
type="warning"
style="margin: 0 5px 0 0"
v-else
size="small"
>
请选择角色</el-tag
>
<el-button
type="primary"
:icon="Edit"
circle
plain
@click.stop="handleUpdate(scope.row)"
/>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click.stop="handleDelete(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<el-tag type="success" v-if="menu.id" size="small">
<svg-icon icon-class="menu" />
{{ menu.name }}
</el-tag>
<el-tag type="warning" v-else size="small"> 请选择菜单</el-tag>
<!-- 分页工具条 -->
<pagination
v-if="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
<!-- 表单弹窗 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
width="500px"
destroy-on-close
>
<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="请输入角色编码" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="formData.sort"
controls-position="right"
:min="0"
style="width: 100px"
/>
</el-form-item>
<el-form-item label="状态">
<el-radio-group v-model="formData.status">
<el-radio :label="1">正常</el-radio>
<el-radio :label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitFormData">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
<el-dialog
:title="'【' + checkedRole.name + '】资源权限'"
v-model="resourceDialogVisible"
width="1000px"
>
<el-scrollbar max-height="600px">
<el-tree
ref="resourceRef"
node-key="value"
show-checkbox
:data="menuOptions"
:default-expand-all="true"
>
<template #default="{ node, data }">
<div v-if="data.isPerm == true" class="resource-tree-node">
<div class="resource-tree-node__content">
<el-checkbox
v-for="perm in permOptions.filter(
(perm) => perm.parentId == data.permPid
)"
:key="perm.value"
:label="perm.value"
v-model="perm.checked"
border
size="small"
>{{ perm.label }}</el-checkbox
>
</div>
</div>
<span v-else>{{ node.label }}</span>
</template>
<perm ref="perm" :menu="menu" :role="role" />
</el-card>
</el-col>
</el-row>
</el-tree>
</el-scrollbar>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleRoleResourceSubmit"
>确 定</el-button
>
<el-button @click="cancelResourceAssign">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { reactive, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
import SvgIcon from '@/components/SvgIcon/index.vue';
<style lang="scss">
.resource-tree-node {
width: 100%;
flex-wrap: wrap;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
margin-left: -28px !important;
import Role from './components/Role.vue';
import Menus from './components/Menu.vue';
import Perm from './components/Perm.vue';
const state = reactive({
role: {
id: undefined,
name: ''
},
menu: {
id: undefined,
name: ''
&__content {
display: flex;
flex-wrap: wrap;
}
});
.el-checkbox--default {
background-color: transparent !important;
}
}
.el-tree-node__content {
height: auto !important;
}
const { role, menu } = toRefs(state);
function handleRoleClick(roleRow: any) {
if (roleRow) {
state.role = {
id: roleRow.id,
name: roleRow.name
};
} else {
state.role = {
id: undefined,
name: ''
};
.el-checkbox-group {
display: flex;
flex-wrap: wrap;
&:hover {
background-color: var(--el-tree-node-hover-bg-color);
}
&:active {
background-color: var(--el-tree-node-hover-bg-color);
}
}
function handleMenuClick(menuRow: any) {
if (!state.role.id) {
ElMessage.warning('请选择角色');
return false;
}
if (menuRow) {
state.menu = {
id: menuRow.value,
name: menuRow.label
};
} else {
state.menu = {
id: undefined,
name: ''
};
}
.el-checkbox.el-checkbox--small {
margin: 5px;
z-index: 999;
background: #fff;
}
</script>
<style scoped></style>
</style>

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

@@ -1,7 +1,6 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'user'
name: 'user',
};
</script>
@@ -13,23 +12,23 @@ import {
watchEffect,
onMounted,
getCurrentInstance,
toRefs
toRefs,
} from 'vue';
// 导入API
import {
listUsersPage,
getUserDetail,
getUserFormData,
deleteUsers,
addUser,
updateUser,
updateUserPart,
downloadTemplate,
exportUser,
importUser
importUser,
} from '@/api/system/user';
import { listSelectDepartments } from '@/api/system/dept';
import { listRoles } from '@/api/system/role';
import { listSelectRoles } from '@/api/system/role';
// 组件依赖
import {
@@ -37,7 +36,7 @@ import {
ElMessageBox,
ElTree,
ElForm,
UploadFile
UploadFile,
} from 'element-plus';
import {
Search,
@@ -48,17 +47,16 @@ import {
Lock,
Download,
Top,
UploadFilled
UploadFilled,
} from '@element-plus/icons-vue';
import {
UserItem,
UserQueryParam,
UserFormData,
Option,
RoleItem,
Dialog,
UserImportFormData
} from '@/types';
UserImportFormData,
} from '@/types/api/system/user';
import { Option, Dialog } from '@/types/common';
// DOM元素的引用声明定义 ，变量名和DOM的ref属性值一致
const deptTreeRef = ref(ElTree); // 部门树
@@ -83,7 +81,7 @@ const state = reactive({
userList: [] as UserItem[],
// 弹窗属性
dialog: {
visible: false
visible: false,
} as Dialog,
deptName: undefined,
// 部门树选项
@@ -92,47 +90,47 @@ const state = reactive({
// 性别状态字典
genderOptions: [] as any[],
// 角色选项
roleOptions: [] as RoleItem[],
roleOptions: [] as Option[],
// 表单参数
formData: {
status: 1
status: 1,
} as UserFormData,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10
pageSize: 10,
} as UserQueryParam,
// 表单校验
rules: {
username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
nickname: [
{ required: true, message: '用户昵称不能为空', trigger: 'blur' }
{ required: true, message: '用户昵称不能为空', trigger: 'blur' },
],
deptId: [{ required: true, message: '归属部门不能为空', trigger: 'blur' }],
deptId: [{ required: true, message: '所属部门不能为空', trigger: 'blur' }],
roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }],
email: [
{
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
message: '请输入正确的邮箱地址',
trigger: 'blur'
}
trigger: 'blur',
},
],
mobile: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: '请输入正确的手机号码',
trigger: 'blur'
}
]
trigger: 'blur',
},
],
},
importDialog: {
title: '用户导出',
visible: false
visible: false,
} as Dialog,
importFormData: {} as UserImportFormData,
excelFile: undefined as any,
excelFilelist: [] as File[]
excelFilelist: [] as File[],
});
const {
@@ -149,7 +147,7 @@ const {
roleOptions,
importDialog,
importFormData,
excelFilelist
excelFilelist,
} = toRefs(state);
/**
@@ -160,7 +158,7 @@ watchEffect(
deptTreeRef.value.filter(state.deptName);
},
{
flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
flush: 'post', // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
}
);
@@ -186,7 +184,7 @@ function handleDeptNodeClick(data: { [key: string]: any }) {
* 加载角色数据
*/
async function loadRoleOptions() {
listRoles().then(response => {
listSelectRoles().then((response) => {
state.roleOptions = response.data;
});
}
@@ -202,7 +200,7 @@ function handleStatusChange(row: { [key: string]: any }) {
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
}
)
.then(() => {
@@ -254,7 +252,7 @@ function resetPassword(row: { [key: string]: any }) {
'重置密码',
{
confirmButtonText: '确定',
cancelButtonText: '取消'
cancelButtonText: '取消',
}
)
.then(({ value }) => {
@@ -263,7 +261,7 @@ function resetPassword(row: { [key: string]: any }) {
return false;
}
updateUserPart(row.id, {
password: value
password: value,
}).then(() => {
ElMessage.success('修改成功，新密码是：' + value);
});
@@ -279,7 +277,7 @@ async function handleAdd() {
await loadRoleOptions();
state.dialog = {
title: '添加用户',
visible: true
visible: true,
};
}
@@ -292,9 +290,9 @@ async function handleUpdate(row: { [key: string]: any }) {
await loadRoleOptions();
state.dialog = {
title: '修改用户',
visible: true
visible: true,
};
getUserDetail(userId).then(({ data }) => {
getUserFormData(userId).then(({ data }) => {
state.formData = data;
});
}
@@ -334,7 +332,7 @@ function handleDelete(row: { [key: string]: any }) {
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
}
)
.then(function () {
@@ -359,7 +357,7 @@ function cancel() {
* 加载部门
*/
async function loadDeptOptions() {
listSelectDepartments().then(response => {
listSelectDepartments().then((response) => {
state.deptOptions = response.data;
});
}
@@ -368,18 +366,18 @@ async function loadDeptOptions() {
* 加载性别字典
*/
function loadGenderOptions() {
proxy.$listDictsByCode('gender').then((response: any) => {
proxy.$getDictItemsByTypeCode('gender').then((response: any) => {
state.genderOptions = response?.data;
});
}
/**
* 下载用户导入模板
* 下载导入模板
*/
function handleDownloadTemplate() {
downloadTemplate().then((response: any) => {
const blob = new Blob([response.data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
});
const a = document.createElement('a');
const href = window.URL.createObjectURL(blob); // 下载链接
@@ -395,7 +393,7 @@ function handleDownloadTemplate() {
}
/**
* 导入用户表单弹窗
* 显示导入弹窗
*/
async function showImportDialog() {
await loadDeptOptions();
@@ -431,7 +429,7 @@ function submitImportForm() {
const deptId = state.importFormData.deptId;
const roleIds = state.importFormData.roleIds.join(',');
importUser(deptId, roleIds, state.excelFile).then(response => {
importUser(deptId, roleIds, state.excelFile).then((response) => {
ElMessage.success(response.data);
closeImportDialog();
handleQuery();
@@ -456,7 +454,7 @@ function closeImportDialog() {
function handleExport() {
exportUser(queryParams.value).then((response: any) => {
const blob = new Blob([response.data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
});
const a = document.createElement('a');
const href = window.URL.createObjectURL(blob); // 下载的链接
@@ -617,7 +615,7 @@ onMounted(() => {
/>
<el-table-column label="用户昵称" align="center" prop="nickname" />
<el-table-column label="性别" align="center" prop="gender" />
<el-table-column label="性别" align="center" prop="genderLabel" />
<el-table-column label="部门" align="center" prop="deptName" />
<el-table-column
@@ -754,9 +752,9 @@ onMounted(() => {
<el-select v-model="formData.roleIds" multiple placeholder="请选择">
<el-option
v-for="item in roleOptions"
:key="item.id"
:label="item.name"
:value="item.id"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
@@ -800,9 +798,9 @@ onMounted(() => {
>
<el-option
v-for="item in roleOptions"
:key="item.id"
:label="item.name"
:value="item.id"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>