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

refactor: 系统管理接口和页面重构

Browse Source 
Former-commit-id: d16371370c6bf6928bcf0883e1511a1a91ea388d
This commit is contained in:
haoxr
2023-03-11 21:21:54 +08:00
parent 314789ad09
commit 00082202dd
22 changed files with 1664 additions and 1549 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/login/index.vue
View File

@@ -72,8 +72,6 @@
</template>
<script setup lang="ts">
// 组件依赖
import { ElForm, ElInput } from 'element-plus';
import router from '@/router';
import LangSelect from '@/components/LangSelect/index.vue';
import SvgIcon from '@/components/SvgIcon/index.vue';

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

@@ -5,142 +5,127 @@ export default {
</script>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import {
getDeptForm,
deleteDept,
updateDept,
addDept,
listDeptOptions,
listDepartments
listDepts
} from '@/api/dept';
import { Search, Plus, Refresh, Delete } from '@element-plus/icons-vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import { Dept, DeptForm, DeptQuery } from '@/api/dept/types';
import { DeptVO, DeptForm, DeptQuery } from '@/api/dept/types';
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const deptFormRef = ref(ElForm);
const state = reactive({
loading: false,
// 选中ID数组
ids: [] as number[],
// 表格树数据
dataList: [] as Dept[],
deptOptions: [] as OptionType[],
dialog: { visible: false } as DialogType,
queryParams: {} as DeptQuery,
formData: {
sort: 1,
status: 1
} as DeptForm,
rules: {
parentId: [
{ required: true, message: '上级部门不能为空', trigger: 'blur' }
],
name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }]
}
const loading = ref(false);
let ids = reactive([]);
const dialog = reactive<DialogOption>({
visible: false
});
const {
ids,
loading,
dataList,
deptOptions,
queryParams,
formData,
rules,
dialog
} = toRefs(state);
const queryParams = reactive<DeptQuery>({});
const deptList = ref<DeptVO[]>();
const deptOptions = ref<OptionType[]>();
const formData = reactive<DeptForm>({
status: 1,
parentId: 0
});
const rules = reactive({
parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }]
});
/**
* 查询
*/
function handleQuery() {
loading.value = true;
listDepartments(state.queryParams).then(({ data }) => {
dataList.value = data;
listDepts(queryParams).then(({ data }) => {
deptList.value = data;
loading.value = false;
});
}
/**
* 重置
* 重置查询
*/
function resetQuery() {
queryFormRef.value.resetFields();
handleQuery();
}
/**
* 行复选框选中记录选中ID集合
*/
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.id);
ids = selection.map((item: any) => item.id);
}
/**
* 获取部门下拉数据
*/
async function getDeptOptions() {
const deptOptions: any[] = [];
listDeptOptions().then(response => {
const rootDeptOption = {
value: '0',
label: '顶级部门',
children: response.data
};
deptOptions.push(rootDeptOption);
state.deptOptions = deptOptions;
deptOptions.value = [
{
value: 0,
label: '顶级部门',
children: response.data
}
];
});
}
/**
* 添加
* 打开弹窗
*
* @param parentId 父部门ID
* @param deptId 部门ID
*/
function handleAdd(row: any) {
getDeptOptions();
formData.value.id = undefined;
formData.value.parentId = row.id;
dialog.value = {
title: '添加部门',
visible: true
};
}
/**
* 修改
*/
async function handleUpdate(row: any) {
async function openDialog(parentId?: number, deptId?: number) {
await getDeptOptions();
const deptId = row.id || state.ids;
state.dialog = {
title: '修改部门',
visible: true
};
getDeptForm(deptId).then((response: any) => {
state.formData = response.data;
});
dialog.visible = true;
if (deptId) {
dialog.title = '修改部门';
getDeptForm(deptId).then(({ data }) => {
Object.assign(formData, data);
});
} else {
dialog.title = '新增部门';
formData.parentId = parentId ?? 0;
}
}
/**
* 提交
* 表单提交
*/
function submitForm() {
dataFormRef.value.validate((valid: any) => {
function handleSubmit() {
deptFormRef.value.validate((valid: any) => {
if (valid) {
if (state.formData.id) {
updateDept(state.formData.id, state.formData).then(() => {
ElMessage.success('修改成功');
closeDialog();
handleQuery();
});
const deptId = formData.id;
loading.value = true;
if (deptId) {
updateDept(deptId, formData)
.then(() => {
ElMessage.success('修改成功');
closeDialog();
handleQuery();
})
.finally(() => (loading.value = false));
} else {
addDept(state.formData).then(() => {
ElMessage.success('新增成功');
closeDialog();
handleQuery();
});
addDept(formData)
.then(() => {
ElMessage.success('新增成功');
closeDialog();
handleQuery();
})
.finally(() => (loading.value = false));
}
}
});
@@ -150,8 +135,8 @@ function submitForm() {
* 删除
*/
function handleDelete(row: any) {
const ids = [row.id || state.ids].join(',');
if (!ids) {
const deptIds = [row.id || ids].join(',');
if (!deptIds) {
ElMessage.warning('请勾选删除项');
return;
}
@@ -162,7 +147,7 @@ function handleDelete(row: any) {
type: 'warning'
})
.then(() => {
deleteDept(ids)
deleteDept(deptIds)
.then(() => {
handleQuery();
ElMessage.success('删除成功');
@@ -176,11 +161,22 @@ function handleDelete(row: any) {
/**
* 关闭弹窗
**/
*/
function closeDialog() {
dialog.value.visible = false;
dataFormRef.value.resetFields();
dataFormRef.value.clearValidate();
dialog.visible = false;
resetForm();
}
/**
* 重置表单
*/
function resetForm() {
deptFormRef.value.resetFields();
deptFormRef.value.clearValidate();
formData.id = undefined;
formData.parentId = 0;
formData.status = 1;
}
onMounted(() => {
@@ -210,15 +206,11 @@ onMounted(() => {
</el-select>
</el-form-item>
<el-form-item>
<el-button
class="filter-item"
type="primary"
:icon="Search"
@click="handleQuery"
>
<el-button class="filter-item" type="primary" @click="handleQuery">
<i-ep-search />
搜索
</el-button>
<el-button :icon="Refresh" @click="resetQuery"> 重置 </el-button>
<el-button @click="resetQuery"> <i-ep-refresh />重置 </el-button>
</el-form-item>
</el-form>
</div>
@@ -226,58 +218,68 @@ onMounted(() => {
<el-card>
<!--toolbar-->
<template #header>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
<el-button type="success" @click="openDialog(0, undefined)"
><i-ep-plus />新增</el-button
>
<el-button
type="danger"
:icon="Delete"
@click="handleDelete"
:disabled="ids.length === 0"
>删除
><i-ep-delete />删除
</el-button>
</template>
<!--table-->
<el-table
v-loading="loading"
:data="dataList"
:data="deptList"
row-key="id"
default-expand-all
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column prop="name" label="部门名称" min-width="300" />
<el-table-column prop="status" label="状态" width="200">
<el-table-column prop="name" label="部门名称" min-width="200" />
<el-table-column prop="status" label="状态" width="100">
<template #default="scope">
<el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
<el-tag v-else type="info">禁用</el-tag>
</template>
</el-table-column>
<el-table-column prop="sort" label="排序" width="200" />
<el-table-column prop="sort" label="排序" width="100" />
<el-table-column prop="createTime" label="创建时间" width="250" />
<el-table-column prop="updateTime" label="修改时间" width="250" />
<el-table-column prop="createTime" label="创建时间" width="200" />
<el-table-column prop="updateTime" label="修改时间" width="200" />
<el-table-column label="操作" align="center" width="150">
<el-table-column label="操作" fixed="right" align="left" width="200">
<template #default="scope">
<el-button type="primary" link @click.stop="handleAdd(scope.row)"
>新增
<el-button
type="primary"
link
size="small"
@click.stop="openDialog(scope.row.id, undefined)"
><i-ep-plus />新增
</el-button>
<el-button type="success" link @click.stop="handleUpdate(scope.row)"
>编辑
<el-button
type="primary"
link
size="small"
@click.stop="openDialog(scope.row.id, scope.row.parentId)"
><i-ep-edit />编辑
</el-button>
<el-button type="danger" link @click.stop="handleDelete(scope.row)">
删除
<el-button
type="primary"
link
size="small"
@click.stop="openDialog(scope.row.id, scope.row.parentId)"
>
<i-ep-delete />删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- dialog -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
@@ -285,7 +287,7 @@ onMounted(() => {
@closed="closeDialog"
>
<el-form
ref="dataFormRef"
ref="deptFormRef"
:model="formData"
:rules="rules"
label-width="80px"
@@ -321,7 +323,7 @@ onMounted(() => {
<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="closeDialog"> 取 消 </el-button>
</div>
</template>

302
src/views/system/dict/DictData.vue Normal file
View File

@@ -0,0 +1,302 @@
<!-- 字典数据 -->
<script lang="ts">
export default {
name: 'dictData'
};
</script>
<script setup lang="ts">
import {
getDictPage,
getDictFormData,
addDict,
updateDict,
deleteDict
} from '@/api/dict';
import { DictPageVO, DictForm, DictQuery } from '@/api/dict/types';
const props = defineProps({
typeCode: {
type: String,
default: () => {
return '';
}
},
typeName: {
type: String,
default: () => {
return '';
}
}
});
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);
const queryParams = reactive<DictQuery>({
pageNum: 1,
pageSize: 10,
typeCode: props.typeCode
});
const dictList = ref<DictPageVO[]>();
const dialog = reactive<DialogOption>({
visible: false
});
const formData = reactive<DictForm>({
status: 1,
typeCode: props.typeCode,
sort: 1
});
const rules = reactive({
name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
value: [{ required: true, message: '请输入字典值', trigger: 'blur' }]
});
/**
* 查询
*/
function handleQuery() {
if (queryParams.typeCode) {
loading.value = true;
getDictPage(queryParams)
.then(({ data }) => {
dictList.value = data.list;
total.value = data.total;
})
.finally(() => (loading.value = false));
}
}
/**
* 重置查询
*/
function resetQuery() {
queryFormRef.value.resetFields();
handleQuery();
}
/**
* 行checkbox change事件
*
* @param selection
*/
function handleSelectionChange(selection: any) {
ids.value = selection.map((item: any) => item.id);
}
/**
* 打开字典表单弹窗
*
* @param dictId 字典ID
*/
function openDialog(dictId?: number) {
dialog.visible = true;
if (dictId) {
dialog.title = '修改字典';
getDictFormData(dictId).then(({ data }) => {
Object.assign(formData, data);
});
} else {
dialog.title = '新增字典';
}
}
/**
* 字典表单提交
*/
function handleSubmit() {
loading.value = false;
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
const dictId = formData.id;
if (dictId) {
updateDict(dictId, formData)
.then(() => {
ElMessage.success('修改成功');
closeDialog();
resetQuery();
})
.finally(() => (loading.value = false));
} else {
addDict(formData)
.then(() => {
ElMessage.success('新增成功');
closeDialog();
resetQuery();
})
.finally(() => (loading.value = false));
}
}
});
}
/**
* 关闭弹窗
*/
function closeDialog() {
dialog.visible = false;
resetForm();
}
/**
* 重置表单
*/
function resetForm() {
dataFormRef.value.resetFields();
dataFormRef.value.clearValidate();
formData.id = undefined;
formData.status = 1;
formData.sort = 1;
formData.typeCode = props.typeCode;
}
/**
* 删除字典
*/
function handleDelete(dictId: number) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const dictIds = [dictId || ids.value].join(',');
deleteDict(dictIds).then(() => {
ElMessage.success('删除成功');
resetQuery();
});
});
}
onMounted(() => {
handleQuery();
});
</script>
<template>
<div class="app-container">
<div class="search">
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="name">
<el-input
v-model="queryParams.name"
placeholder="字典名称"
clearable
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery"
><i-ep-search />搜索</el-button
>
<el-button @click="resetQuery"> <i-ep-refresh />重置</el-button>
</el-form-item>
</el-form>
</div>
<el-card shadow="never">
<template #header>
<el-button type="success" @click="openDialog()"
><i-ep-plus />新增</el-button
>
<el-button
type="danger"
:disabled="ids.length === 0"
@click="handleDelete"
><i-ep-delete />删除</el-button
>
</template>
<!-- 数据表格 -->
<el-table
:data="dictList"
v-loading="loading"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="50" />
<el-table-column label="字典名称" prop="name" />
<el-table-column label="字典值" prop="value" />
<el-table-column label="状态" align="center">
<template #default="scope">
<el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
<el-tag v-else type="info">禁用</el-tag>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" align="center">
<template #default="scope">
<el-button type="primary" link @click="openDialog(scope.row.id)"
><i-ep-edit />编辑</el-button
>
<el-button
type="primary"
link
@click.stop="handleDelete(scope.row.id)"
><i-ep-delete />删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-if="total > 0"
v-model:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
</el-card>
<!-- 表单弹窗 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
width="500px"
@close="closeDialog"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<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>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="formData.sort"
controls-position="right"
:min="0"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<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-item label="备注" prop="remark">
<el-input v-model="formData.remark" type="textarea"></el-input>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmit">确 定</el-button>
<el-button @click="closeDialog">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>

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

@@ -1,290 +0,0 @@
<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 {
listDictItemPages,
getDictItemData,
saveDictItem,
updateDictItem,
deleteDictItems
} from '@/api/dict';
import { Search, Plus, Refresh, Delete } from '@element-plus/icons-vue';
import { DictItem, DictItemForm, DictItemQuery } from '@/api/dict/types';
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[],
total: 0,
queryParams: { pageNum: 1, pageSize: 10 } as DictItemQuery,
dictItemList: [] as DictItem[],
dialog: { visible: false } as DialogType,
formData: {
typeCode: props.typeCode,
typeName: props.typeName,
status: 1,
sort: 1
} as DictItemForm,
rules: {
name: [{ required: true, message: '请输入字典项名称', trigger: 'blur' }],
value: [{ required: true, message: '请输入字典项值', trigger: 'blur' }]
},
localDictCode: props.typeCode,
localDictName: props.typeName
});
const {
loading,
ids,
queryParams,
dictItemList,
dialog,
formData,
rules,
total
} = toRefs(state);
function handleQuery() {
if (queryParams.value.typeCode) {
loading.value = true;
listDictItemPages(state.queryParams).then(({ data }) => {
dictItemList.value = data.list;
total.value = data.total;
loading.value = false;
});
} else {
dictItemList.value = [];
total.value = 0;
queryParams.value.pageNum = 1;
loading.value = false;
}
}
function resetQuery() {
queryFormRef.value.resetFields();
handleQuery();
}
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.id);
}
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 {
saveDictItem(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">
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="name">
<el-input v-model="queryParams.name" placeholder="数据标签" clearable />
</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-card shadow="hover">
<template #header>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="ids.length === 0"
@click="handleDelete"
>删除</el-button
>
</template>
<!-- 数据表格 -->
<el-table
:data="dictItemList"
v-loading="loading"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="50" />
<el-table-column label="数据标签" prop="name" />
<el-table-column label="数据值" prop="value" />
<el-table-column label="状态" align="center">
<template #default="scope">
<el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
<el-tag v-else type="info">禁用</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button type="primary" link @click="handleUpdate(scope.row)"
>编辑</el-button
>
<el-button type="danger" link @click.stop="handleDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-if="total > 0"
v-model:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
</el-card>
<!-- 表单弹窗 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
width="500px"
@close="cancel"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<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>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="formData.sort"
style="width: 80px"
controls-position="right"
:min="0"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<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-item label="备注" prop="remark">
<el-input v-model="formData.remark" type="textarea"></el-input>
</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>

250
src/views/system/dict/components/DictType.vue
View File

@@ -1,250 +0,0 @@
<script lang="ts">
export default {
name: 'dictType'
};
</script>
<template>
<div class="app-container">
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="state.queryParams" :inline="true">
<el-form-item label="关键字" prop="name">
<el-input
v-model="state.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-card shadow="hover">
<template #header>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="ids.length === 0"
@click="handleDelete"
>删除</el-button
>
</template>
<!-- 数据表格 -->
<el-table
highlight-current-row
:data="dictList"
v-loading="loading"
@row-click="handleRowClick"
@selection-change="handleSelectionChange"
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="100">
<template #default="scope">
<el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
<el-tag v-else type="info">禁用</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="150">
<template #default="scope">
<el-button type="primary" link @click.stop="handleUpdate(scope.row)"
>编辑</el-button
>
<el-button type="danger" link @click.stop="handleDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-if="total > 0"
v-model:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
</el-card>
<!-- 弹窗表单 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
width="500px"
@close="cancel"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="80px"
>
<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="status">
<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-item label="备注" prop="remark">
<el-input
v-model="formData.remark"
type="textarea"
placeholder="请输入内容"
:autosize="{ minRows: 2, maxRows: 4 }"
/>
</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>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import {
listDictTypePages,
getDictTypeForm,
addDictType,
updateDictType,
deleteDictTypes
} from '@/api/dict';
import { Search, Plus, Refresh, Delete } from '@element-plus/icons-vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import { Dict, DictQuery, DictTypeForm } from '@/api/dict/types';
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const emit = defineEmits(['dictClick']);
const state = reactive({
loading: true,
// 选中ID数组
ids: [] as number[],
queryParams: {
pageNum: 1,
pageSize: 10
} as DictQuery,
dictList: [] as Dict[],
total: 0,
dialog: { visible: false } as DialogType,
formData: {
status: 1
} as DictTypeForm,
rules: {
name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入字典编码', trigger: 'blur' }]
}
});
const { total, ids, dialog, loading, dictList, formData, rules, queryParams } =
toRefs(state);
function handleQuery() {
emit('dictClick', null);
state.loading = true;
listDictTypePages(state.queryParams).then(({ data }) => {
state.dictList = 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);
}
function handleAdd() {
state.dialog = {
title: '添加字典',
visible: true
};
}
function handleUpdate(row: any) {
state.dialog = {
title: '修改字典',
visible: true
};
const id = row.id || state.ids;
getDictTypeForm(id).then(({ data }) => {
state.formData = data;
});
}
function submitForm() {
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
if (state.formData.id) {
updateDictType(state.formData.id, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addDictType(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
});
}
}
});
}
function cancel() {
formData.value.id = undefined;
dataFormRef.value.resetFields();
dialog.value.visible = false;
}
function handleDelete(row: any) {
const ids = [row.id || state.ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteDictTypes(ids).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
}
function handleRowClick(row: any) {
emit('dictClick', row);
}
onMounted(() => {
handleQuery();
});
</script>

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

@@ -1,55 +1,333 @@
<!--字典类型-->
<script lang="ts">
export default {
name: 'dictType'
};
</script>
<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue';
import DictType from './components/DictType.vue';
import DictItem from './components/DictItem.vue';
import {
getDictTypePage,
getDictTypeForm,
addDictType,
updateDictType,
deleteDictTypes
} from '@/api/dict';
import { reactive, toRefs } from 'vue';
import DictData from '@/views/system/dict/DictData.vue';
const state = reactive({
typeCode: '',
typeName: ''
import { DictTypePageVO, DictTypeQuery, DictTypeForm } from '@/api/dict/types';
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);
const queryParams = reactive<DictTypeQuery>({
pageNum: 1,
pageSize: 10
});
const { typeCode, typeName } = toRefs(state);
const dictTypeList = ref<DictTypePageVO[]>();
const handleDictTypeClick = (row: any) => {
if (row) {
state.typeName = row.name;
state.typeCode = row.code;
const dialog = reactive<DialogOption>({
visible: false
});
const formData = reactive<DictTypeForm>({
status: 1
});
const rules = reactive({
name: [{ required: true, message: '请输入字典类型名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入字典类型编码', trigger: 'blur' }]
});
/**
* 查询
*/
function handleQuery() {
loading.value = true;
getDictTypePage(queryParams)
.then(({ data }) => {
dictTypeList.value = data.list;
total.value = data.total;
})
.finally(() => {
loading.value = false;
});
}
/**
* 重置查询
*/
function resetQuery() {
queryFormRef.value.resetFields();
queryParams.pageNum = 1;
handleQuery();
}
/**
* 行checkbox change事件
*
* @param selection
*/
function handleSelectionChange(selection: any) {
ids.value = selection.map((item: any) => item.id);
}
/**
* 打开字典类型表单弹窗
*
* @param dicTypeId 字典类型ID
*/
function openDialog(dicTypeId?: number) {
dialog.visible = true;
if (dicTypeId) {
dialog.title = '修改字典类型';
getDictTypeForm(dicTypeId).then(({ data }) => {
Object.assign(formData, data);
});
} else {
state.typeName = '';
state.typeCode = '';
dialog.title = '新增字典类型';
}
};
}
/**
* 字典类型表单提交
*/
function handleSubmit() {
loading.value = false;
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
const dictTypeId = formData.id;
if (dictTypeId) {
updateDictType(dictTypeId, formData)
.then(() => {
ElMessage.success('修改成功');
closeDialog();
handleQuery();
})
.finally(() => (loading.value = false));
} else {
addDictType(formData)
.then(() => {
ElMessage.success('新增成功');
closeDialog();
handleQuery();
})
.finally(() => (loading.value = false));
}
}
});
}
/**
* 关闭弹窗
*/
function closeDialog() {
dialog.visible = false;
resetForm();
}
/**
* 重置表单
*/
function resetForm() {
dataFormRef.value.resetFields();
dataFormRef.value.clearValidate();
formData.id = undefined;
formData.status = 1;
}
/**
* 删除字典类型
*/
function handleDelete(dictTypeId: number) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const dictTypeIds = [dictTypeId || ids.value].join(',');
deleteDictTypes(dictTypeIds).then(() => {
ElMessage.success('删除成功');
resetQuery();
});
});
}
const dictDataDialog = reactive<DialogOption>({
visible: false
});
// 当前选中的字典类型
const selectedDictType = reactive({ typeCode: '', typeName: '' });
/**
* 打开字典弹窗
*/
function openDictDialog(row: DictTypePageVO) {
dictDataDialog.visible = true;
dictDataDialog.title = '【' + row.name + '】字典数据';
selectedDictType.typeCode = row.code;
selectedDictType.typeName = row.name;
}
/**
* 关闭字典弹窗
*/
function closeDictDialog() {
dictDataDialog.visible = false;
}
onMounted(() => {
handleQuery();
});
</script>
<template>
<div class="app-container">
<el-row :gutter="10">
<el-col :span="10" :xs="24">
<el-card class="box-card">
<template #header>
<svg-icon icon-class="dict" />
字典类型
</template>
<dict-type @dictClick="handleDictTypeClick" />
</el-card>
</el-col>
<div class="search">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="name">
<el-input
v-model="queryParams.name"
placeholder="字典类型名称/编码"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery()"
><i-ep-search />搜索</el-button
>
<el-button @click="resetQuery()"><i-ep-refresh />重置</el-button>
</el-form-item>
</el-form>
</div>
<el-col :span="14" :xs="24">
<el-card class="box-card">
<template #header>
<svg-icon icon-class="dict_item" />
<span style="margin: 0 5px">字典数据项</span>
<el-tag type="success" v-if="typeCode" size="small">{{
typeName
}}</el-tag>
<el-tag type="danger" v-else size="small">未选择字典类型</el-tag>
<el-card shadow="never">
<template #header>
<el-button type="success" @click="openDialog()"
><i-ep-plus />新增</el-button
>
<el-button
type="danger"
:disabled="ids.length === 0"
@click="handleDelete"
><i-ep-delete />删除</el-button
>
</template>
<el-table
highlight-current-row
:data="dictTypeList"
v-loading="loading"
@selection-change="handleSelectionChange"
border
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="字典类型名称" prop="name" width="200" />
<el-table-column label="字典类型编码" prop="code" width="200" />
<el-table-column label="状态" align="center" width="100">
<template #default="scope">
<el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
<el-tag v-else type="info">禁用</el-tag>
</template>
<!-- 字典项组件 -->
<dict-item :typeName="typeName" :typeCode="typeCode" />
</el-card>
</el-col>
</el-row>
</el-table-column>
<el-table-column label="备注" prop="remark" align="center" />
<el-table-column fixed="right" label="操作" align="center" width="220">
<template #default="scope">
<el-button
type="primary"
link
size="small"
@click.stop="openDictDialog(scope.row)"
><i-ep-Collection />字典数据</el-button
>
<el-button
type="primary"
link
size="small"
@click.stop="openDialog(scope.row.id)"
><i-ep-edit />编辑</el-button
>
<el-button
type="primary"
link
size="small"
@click.stop="handleDelete(scope.row.id)"
><i-ep-delete />删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-if="total > 0"
v-model:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
</el-card>
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
width="500px"
@close="closeDialog"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="80px"
>
<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="status">
<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-item label="备注" prop="remark">
<el-input
v-model="formData.remark"
type="textarea"
placeholder="字典类型备注"
:autosize="{ minRows: 2, maxRows: 4 }"
/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmit">确 定</el-button>
<el-button @click="closeDialog">取 消</el-button>
</div>
</template>
</el-dialog>
<!--字典数据弹窗-->
<el-dialog
:title="dictDataDialog.title"
v-model="dictDataDialog.visible"
width="1000px"
@close="closeDictDialog"
>
<dict-data
v-model:typeCode="selectedDictType.typeCode"
v-model:typeName="selectedDictType.typeName"
/>
</el-dialog>
</div>
</template>

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

@@ -5,87 +5,72 @@ export default {
</script>
<script setup lang="ts">
import { MenuQuery, MenuForm, Menu } from '@/api/menu/types';
// API 依赖
import { MenuQuery, MenuForm, MenuVO } from '@/api/menu/types';
import {
listMenus,
getMenuDetail,
getMenuForm,
listMenuOptions,
addMenu,
deleteMenus,
deleteMenu,
updateMenu
} from '@/api/menu';
import { MenuTypeEnum } from '@/enums/MenuTypeEnum';
import SvgIcon from '@/components/SvgIcon/index.vue';
import IconSelect from '@/components/IconSelect/index.vue';
const emit = defineEmits(['menuClick']);
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const menuFormRef = ref(ElForm);
const state = reactive({
loading: true,
// 选中ID数组
ids: [],
queryParams: {} as MenuQuery,
menuList: [] as Menu[],
dialog: { visible: false } as DialogType,
formData: {
parentId: '0',
name: '',
visible: 1,
sort: 1,
component: undefined,
type: 'MENU'
} as MenuForm,
rules: {
parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }],
name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
component: [
{ required: true, message: '请输入组件完整路径', trigger: 'blur' }
]
},
menuOptions: [] as OptionType[],
currentRow: undefined,
cacheData: {
menuType: '',
menuPath: ''
}
const loading = ref(false);
const dialog = reactive<DialogOption>({
visible: false
});
const {
loading,
queryParams,
menuList,
dialog,
formData,
rules,
menuOptions,
cacheData
} = toRefs(state);
const queryParams = reactive<MenuQuery>({});
const menuList = ref<MenuVO[]>([]);
const menuOptions = ref<OptionType[]>([]);
const formData = reactive<MenuForm>({
parentId: 0,
visible: 1,
sort: 1,
type: MenuTypeEnum.MENU
});
const rules = reactive({
parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }],
name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
component: [
{ required: true, message: '请输入组件完整路径', trigger: 'blur' }
]
});
// 选择表格的行菜单ID
const selectedRowMenuId = ref<number | undefined>();
const menuCacheData = reactive({
type: '',
path: ''
});
/**
* 查询
*/
function handleQuery() {
// 重置父组件
emit('menuClick', null);
loading.value = true;
listMenus(state.queryParams).then(({ data }) => {
menuList.value = data;
loading.value = false;
});
}
/**
* 下拉菜单
*/
async function loadMenuData() {
listMenuOptions().then(({ data }) => {
menuOptions.value = [{ value: '0', label: '顶级菜单', children: data }];
});
listMenus(queryParams)
.then(({ data }) => {
menuList.value = data;
})
.then(() => {
loading.value = false;
});
}
/**
@@ -96,60 +81,53 @@ function resetQuery() {
handleQuery();
}
function handleRowClick(row: any) {
state.currentRow = JSON.parse(JSON.stringify(row));
emit('menuClick', row);
/**
* 行点击事件
*
* @param row
*/
function onRowClick(row: MenuVO) {
selectedRowMenuId.value = row.id;
}
/**
* 新增菜单
* 打开表单弹窗
*
* @param parentId 父菜单ID
* @param menuId 菜单ID
*/
async function handleAdd(row: any) {
dialog.value = {
title: '添加菜单',
visible: true
};
await loadMenuData();
if (row.id) {
// 行点击新增
formData.value.parentId = row.id;
} else {
// 工具栏新增
if (state.currentRow) {
// 选择行
formData.value.parentId = (state.currentRow as any).id;
} else {
// 未选择行
formData.value.parentId = '0';
}
}
}
/**
* 编辑菜单
*/
async function handleUpdate(row: MenuForm) {
await loadMenuData();
dialog.value = {
title: '编辑菜单',
visible: true
};
const id = row.id as string;
getMenuDetail(id).then(({ data }) => {
state.formData = data;
cacheData.value.menuType = data.type;
cacheData.value.menuPath = data.path;
});
function openDialog(parentId?: number, menuId?: number) {
listMenuOptions()
.then(({ data }) => {
menuOptions.value = [{ value: 0, label: '顶级菜单', children: data }];
})
.then(() => {
dialog.visible = true;
if (menuId) {
// 编辑
dialog.title = '编辑菜单';
getMenuForm(menuId).then(({ data }) => {
Object.assign(formData, data);
menuCacheData.type = data.type;
menuCacheData.path = data.path ?? '';
});
} else {
// 新增
dialog.title = '新增菜单';
formData.parentId = parentId;
}
});
}
/**
* 菜单类型 change
*/
function handleMenuTypeChange(menuType: any) {
if (menuType !== cacheData.value.menuType) {
formData.value.path = '';
function onMenuTypeChange() {
// 如果菜单类型改变，清空路由路径；未改变在切换后还原路由路径
if (formData.type !== menuCacheData.type) {
formData.path = '';
} else {
formData.value.path = cacheData.value.menuPath;
formData.path = menuCacheData.path;
}
}
@@ -157,18 +135,19 @@ function handleMenuTypeChange(menuType: any) {
* 菜单提交
*/
function submitForm() {
dataFormRef.value.validate((isValid: boolean) => {
menuFormRef.value.validate((isValid: boolean) => {
if (isValid) {
if (state.formData.id) {
updateMenu(state.formData.id, state.formData).then(() => {
const menuId = formData.id;
if (menuId) {
updateMenu(menuId, formData).then(() => {
ElMessage.success('修改成功');
cancel();
closeDialog();
handleQuery();
});
} else {
addMenu(state.formData).then(() => {
addMenu(formData).then(() => {
ElMessage.success('新增成功');
cancel();
closeDialog();
handleQuery();
});
}
@@ -178,17 +157,19 @@ function submitForm() {
/**
* 删除菜单
*
*/
function handleDelete(row: any) {
const ids = [row.id || state.ids].join(',');
function handleDelete(menuId: number) {
if (!menuId) {
return false;
}
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteMenus(ids).then(() => {
deleteMenu(menuId).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
@@ -197,12 +178,24 @@ function handleDelete(row: any) {
}
/**
* 取消关闭弹窗
* 闭弹窗
*/
function cancel() {
formData.value.id = undefined;
dataFormRef.value.resetFields();
dialog.value.visible = false;
function closeDialog() {
dialog.visible = false;
resetForm();
}
/**
* 重置表单
*/
function resetForm() {
menuFormRef.value.resetFields();
menuFormRef.value.clearValidate();
formData.id = undefined;
formData.parentId = 0;
formData.visible = 1;
formData.sort = 1;
}
onMounted(() => {
@@ -234,10 +227,9 @@ onMounted(() => {
</el-form>
</div>
<!-- 数据表格 -->
<el-card shadow="never">
<template #header>
<el-button type="success" @click="handleAdd">
<el-button type="success" @click="openDialog(0)">
<template #icon><i-ep-plus /></template>
新增</el-button
>
@@ -248,10 +240,10 @@ onMounted(() => {
:data="menuList"
highlight-current-row
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
@row-click="handleRowClick"
@row-click="onRowClick"
row-key="id"
border
default-expand-all
border
>
<el-table-column label="菜单名称">
<template #default="scope">
@@ -266,16 +258,18 @@ onMounted(() => {
<el-table-column label="菜单类型" align="center" width="150">
<template #default="scope">
<el-tag v-if="scope.row.type === 'CATALOG'" type="warning"
<el-tag
v-if="scope.row.type === MenuTypeEnum.CATALOG"
type="warning"
>目录</el-tag
>
<el-tag v-if="scope.row.type === 'MENU'" type="success"
<el-tag v-if="scope.row.type === MenuTypeEnum.MENU" type="success"
>菜单</el-tag
>
<el-tag v-if="scope.row.type === 'BUTTON'" type="danger"
<el-tag v-if="scope.row.type === MenuTypeEnum.BUTTON" type="danger"
>按钮</el-tag
>
<el-tag v-if="scope.row.type === 'EXTLINK'" type="info"
<el-tag v-if="scope.row.type === MenuTypeEnum.EXTLINK" type="info"
>外链</el-tag
>
</template>
@@ -312,25 +306,32 @@ onMounted(() => {
>
</el-table-column>
<el-table-column label="操作" align="center" width="200">
<el-table-column fixed="right" align="center" label="操作" width="220">
<template #default="scope">
<el-button
type="success"
type="primary"
link
@click.stop="handleAdd(scope.row)"
size="small"
@click.stop="openDialog(scope.row.id)"
v-if="scope.row.type == 'CATALOG' || scope.row.type == 'MENU'"
>
新增
<i-ep-plus />新增
</el-button>
<el-button
type="primary"
link
@click.stop="handleUpdate(scope.row)"
size="small"
@click.stop="openDialog(undefined, scope.row.id)"
>
编辑
<i-ep-edit />编辑
</el-button>
<el-button type="danger" link @click.stop="handleDelete(scope.row)">
<el-button
type="primary"
link
size="small"
@click.stop="handleDelete(scope.row.id)"
><i-ep-delete />
删除
</el-button>
</template>
@@ -341,13 +342,13 @@ onMounted(() => {
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
@close="cancel"
@close="closeDialog"
destroy-on-close
appendToBody
width="750px"
>
<el-form
ref="dataFormRef"
ref="menuFormRef"
:model="formData"
:rules="rules"
label-width="100px"
@@ -368,10 +369,7 @@ onMounted(() => {
</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="onMenuTypeChange">
<el-radio label="CATALOG">目录</el-radio>
<el-radio label="MENU">菜单</el-radio>
<el-radio label="BUTTON">按钮</el-radio>
@@ -402,7 +400,7 @@ onMounted(() => {
<!-- 组件页面完整路径 -->
<el-form-item
v-if="formData.type == 'MENU'"
v-if="formData.type == MenuTypeEnum.MENU"
label="页面路径"
prop="component"
>
@@ -411,10 +409,10 @@ onMounted(() => {
placeholder="system/user/index"
style="width: 95%"
>
<template v-if="formData.parentId != '0'" #prepend
<template v-if="formData.parentId != 0" #prepend
>src/views/</template
>
<template v-if="formData.parentId != '0'" #append>.vue</template>
<template v-if="formData.parentId != 0" #append>.vue</template>
</el-input>
</el-form-item>
@@ -436,7 +434,10 @@ onMounted(() => {
<icon-select v-model="formData.icon" />
</el-form-item>
<el-form-item label="跳转路由" v-if="formData.type == 'CATEGORY'">
<el-form-item
label="跳转路由"
v-if="formData.type == MenuTypeEnum.CATALOG"
>
<el-input v-model="formData.redirect" placeholder="跳转路由" />
</el-form-item>
@@ -460,7 +461,7 @@ onMounted(() => {
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
<el-button @click="closeDialog">取 消</el-button>
</div>
</template>
</el-dialog>

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

@@ -5,220 +5,231 @@ export default {
</script>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import {
listRolePages,
getRolePage,
updateRole,
getRoleDetail,
getRoleForm,
addRole,
deleteRoles,
getRoleMenuIds,
updateRoleMenus
} from '@/api/role';
import { listResources } from '@/api/menu';
import { listMenuOptions } from '@/api/menu';
import { ElForm, ElMessage, ElMessageBox, ElTree } from 'element-plus';
import { Search, Plus, Refresh, Delete } from '@element-plus/icons-vue';
import { Role, RoleForm, RoleQuery } from '@/api/role/types';
import { RolePageVO, RoleForm, RoleQuery } from '@/api/role/types';
const emit = defineEmits(['roleClick']);
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const resourceRef = ref(ElTree);
const roleFormRef = ref(ElForm);
const menuRef = ref(ElTree);
const state = reactive({
loading: true,
// 选中ID
ids: [] as number[],
queryParams: {
pageNum: 1,
pageSize: 10
} as RoleQuery,
roleList: [] as Role[],
total: 0,
dialog: {
title: '',
visible: false
} as DialogType,
formData: {
sort: 1,
status: 1
} as RoleForm,
rules: {
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
dataScope: [{ required: true, message: '请选择数据权限', trigger: 'blur' }],
status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
},
resourceDialogVisible: false,
resourceOptions: [] as OptionType[],
// 勾选的菜单ID
checkedMenuIds: new Set([]),
// 选中的角色
checkedRole: {
id: '',
name: ''
}
const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);
const queryParams = reactive<RoleQuery>({
pageNum: 1,
pageSize: 10
});
const {
ids,
loading,
queryParams,
roleList,
total,
dialog,
formData,
rules,
resourceDialogVisible,
checkedRole,
resourceOptions
} = toRefs(state);
const roleList = ref<RolePageVO[]>();
const dialog = reactive<DialogOption>({
visible: false
});
const formData = reactive<RoleForm>({
sort: 1,
status: 1,
code: '',
name: ''
});
const rules = reactive({
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
dataScope: [{ required: true, message: '请选择数据权限', trigger: 'blur' }],
status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
});
const menuDialogVisible = ref(false);
const menuList = ref<OptionType[]>([]);
interface CheckedRole {
id?: number;
name?: string;
}
let checkedRole: CheckedRole = reactive({});
/**
* 查询
*/
function handleQuery() {
loading.value = true;
listRolePages(state.queryParams).then(({ data }) => {
roleList.value = data.list;
total.value = data.total;
loading.value = false;
});
getRolePage(queryParams)
.then(({ data }) => {
roleList.value = data.list;
total.value = data.total;
})
.finally(() => {
loading.value = false;
});
}
/**
* 重置查询
*/
function resetQuery() {
queryFormRef.value.resetFields();
queryParams.pageNum = 1;
handleQuery();
}
/**
* 行checkbox change事件
*/
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.id);
ids.value = selection.map((item: any) => item.id);
}
function handleRowClick(row: any) {
emit('roleClick', row);
}
function handleAdd() {
dialog.value = {
title: '添加角色',
visible: true
};
}
function handleUpdate(row: any) {
dialog.value = {
title: '修改角色',
visible: true
};
const roleId = row.id || state.ids;
getRoleDetail(roleId).then(({ data }) => {
formData.value = data;
});
/**
* 打开角色表单弹窗
*
* @param roleId
*/
function openDialog(roleId?: number) {
dialog.visible = true;
if (roleId) {
dialog.title = '修改角色';
getRoleForm(roleId).then(({ data }) => {
Object.assign(formData, data);
});
} else {
dialog.title = '新增角色';
}
}
/**
* 角色表单提交
*/
function handleSubmit() {
loading.value = true;
dataFormRef.value.validate((valid: any) => {
roleFormRef.value.validate((valid: any) => {
if (valid) {
if (state.formData.id) {
updateRole(state.formData.id, state.formData).then(() => {
ElMessage.success('修改角色成功');
closeDialog();
handleQuery();
loading.value = false;
});
const roleId = formData.id;
if (roleId) {
updateRole(roleId, formData)
.then(() => {
ElMessage.success('修改成功');
closeDialog();
resetQuery();
})
.finally(() => (loading.value = false));
} else {
addRole(state.formData).then(() => {
ElMessage.success('新增角色成功');
closeDialog();
handleQuery();
loading.value = false;
});
addRole(formData)
.then(() => {
ElMessage.success('新增成功');
closeDialog();
resetQuery();
})
.finally(() => (loading.value = false));
}
}
});
}
/**
* 取消
* 关闭弹窗
*/
function closeDialog() {
dialog.value.visible = false;
dataFormRef.value.resetFields();
dataFormRef.value.clearValidate();
dialog.visible = false;
resetForm();
}
/**
* 删除
* 重置表单
*/
function handleDelete(row: any) {
const ids = [row.id || state.ids].join(',');
function resetForm() {
roleFormRef.value.resetFields();
roleFormRef.value.clearValidate();
formData.id = undefined;
formData.sort = 1;
formData.status = 1;
}
/**
* 删除
*/
function handleDelete(roleId: number) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteRoles(ids).then(() => {
}).then(() => {
const roleIds = [roleId || ids.value].join(',');
loading.value = true;
deleteRoles(roleIds)
.then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
resetQuery();
})
.finally(() => (loading.value = false));
});
}
/**
* 资源分配弹窗
* 打开分配菜单弹窗
*/
function openResourceDialog(row: Role) {
resourceDialogVisible.value = true;
loading.value = true;
function openMenuDialog(row: RolePageVO) {
const roleId = row.id;
if (roleId) {
checkedRole = {
id: roleId,
name: row.name
};
menuDialogVisible.value = true;
loading.value = true;
const roleId: any = row.id;
checkedRole.value = {
id: roleId,
name: row.name
};
// 获取所有的资源
listResources().then(response => {
resourceOptions.value = response.data;
// 角色拥有的资源
getRoleMenuIds(roleId).then(({ data }) => {
// 勾选回显
const checkedMenuIds = data;
checkedMenuIds.forEach(menuId =>
resourceRef.value.setChecked(menuId, true)
);
loading.value = false;
// 获取所有的菜单
listMenuOptions().then(response => {
menuList.value = response.data;
// 回显角色已拥有的菜单
getRoleMenuIds(roleId)
.then(({ data }) => {
const checkedMenuIds = data;
console.log('勾选权限', checkedMenuIds);
checkedMenuIds.forEach(menuId =>
menuRef.value.setChecked(menuId, true, false)
);
})
.finally(() => {
loading.value = false;
});
});
});
}
/**
* 资源分配提交
*/
function handleAllocationSubmit() {
const checkedMenuIds: number[] = resourceRef.value
.getCheckedNodes(false, true)
.map((node: any) => node.value);
updateRoleMenus(checkedRole.value.id, checkedMenuIds).then(res => {
ElMessage.success('分配权限成功');
resourceDialogVisible.value = false;
handleQuery();
});
}
}
/**
* 关闭资源弹窗
* 角色分配菜单提交
*/
function closeResourceDailog() {
resourceDialogVisible.value = false;
function handleRoleMenuSubmit() {
const roleId = checkedRole.id;
if (roleId) {
const checkedMenuIds: number[] = menuRef.value
.getCheckedNodes(false, true)
.map((node: any) => node.value);
loading.value = true;
updateRoleMenus(roleId, checkedMenuIds)
.then(res => {
ElMessage.success('分配权限成功');
menuDialogVisible.value = false;
resetQuery();
})
.finally(() => {
loading.value = false;
});
}
}
onMounted(() => {
@@ -240,25 +251,24 @@ onMounted(() => {
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
<el-button type="primary" @click="handleQuery"
><i-ep-search />搜索</el-button
>
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
<el-button @click="resetQuery"><i-ep-refresh />重置</el-button>
</el-form-item>
</el-form>
</div>
<el-card shadow="never">
<template #header>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
<el-button type="success" @click="openDialog()"
><i-ep-plus />新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="ids.length === 0"
@click="handleDelete"
>删除</el-button
><i-ep-delete />删除</el-button
>
</template>
@@ -267,12 +277,11 @@ onMounted(() => {
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" min-width="120" />
<el-table-column label="角色名称" prop="name" />
<el-table-column label="角色编码" prop="code" width="100" />
<el-table-column label="状态" align="center" width="100">
@@ -286,30 +295,36 @@ onMounted(() => {
<el-table-column prop="createTime" label="创建时间" width="180" />
<el-table-column prop="updateTime" label="修改时间" width="180" />
<el-table-column label="操作" align="left">
<el-table-column fixed="right" label="操作" width="220">
<template #default="scope">
<el-button
type="success"
type="primary"
size="small"
link
@click.stop="openResourceDialog(scope.row)"
@click="openMenuDialog(scope.row)"
>
资源分配
<i-ep-position />分配权限
</el-button>
<el-button
type="primary"
size="small"
link
@click.stop="handleUpdate(scope.row)"
@click="openDialog(scope.row.id)"
>
编辑
<i-ep-edit />编辑
</el-button>
<el-button type="danger" link @click.stop="handleDelete(scope.row)">
删除
<el-button
type="primary"
size="small"
link
@click="handleDelete(scope.row.id)"
>
<i-ep-delete />删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination
v-if="total > 0"
v-model:total="total"
@@ -319,7 +334,7 @@ onMounted(() => {
/>
</el-card>
<!-- dialog -->
<!-- 角色表单弹窗 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
@@ -327,7 +342,7 @@ onMounted(() => {
@close="closeDialog"
>
<el-form
ref="dataFormRef"
ref="roleFormRef"
:model="formData"
:rules="rules"
label-width="100px"
@@ -374,18 +389,18 @@ onMounted(() => {
</template>
</el-dialog>
<!-- assign permission dialog -->
<!-- 分配菜单弹窗 -->
<el-dialog
:title="'【' + checkedRole.name + '】资源分配'"
v-model="resourceDialogVisible"
:title="'【' + checkedRole.name + '】权限分配'"
v-model="menuDialogVisible"
width="800px"
>
<el-scrollbar max-height="600px" v-loading="loading">
<el-tree
ref="resourceRef"
ref="menuRef"
node-key="value"
show-checkbox
:data="resourceOptions"
:data="menuList"
:default-expand-all="true"
>
<template #default="{ data }">
@@ -396,10 +411,10 @@ onMounted(() => {
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleAllocationSubmit"
<el-button type="primary" @click="handleRoleMenuSubmit"
>确 定</el-button
>
<el-button @click="closeResourceDailog">取 消</el-button>
<el-button @click="menuDialogVisible = false">取 消</el-button>
</div>
</template>
</el-dialog>

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

@@ -5,18 +5,9 @@ export default {
</script>
<script setup lang="ts">
import { UploadFile } from 'element-plus';
import {
reactive,
ref,
watchEffect,
onMounted,
getCurrentInstance,
toRefs
} from 'vue';
// api
import {
listUserPages,
getUserPage,
getUserForm,
deleteUsers,
addUser,
@@ -30,111 +21,64 @@ import {
import { listDeptOptions } from '@/api/dept';
import { listRoleOptions } from '@/api/role';
import {
ElTree,
ElForm,
ElMessageBox,
ElMessage,
UploadFile
} from 'element-plus';
import {
Search,
Plus,
Refresh,
Delete,
UploadFilled
} from '@element-plus/icons-vue';
import {
UserForm,
UserImportVO,
UserQuery,
UserPageVO
} from '@/api/user/types';
import { UserForm, UserQuery, UserPageVO } from '@/api/user/types';
const deptTreeRef = ref(ElTree); // 部门树
const queryFormRef = ref(ElForm); // 查询表单
const dataFormRef = ref(ElForm); // 用户表单
const importFormRef = ref(ElForm); // 导入表单
const userFormRef = ref(ElForm); // 用户表单
const { proxy }: any = getCurrentInstance();
const state = reactive({
// 遮罩层
loading: true,
// 选中数组
ids: [] as number[],
// 总条数
total: 0,
userList: [] as UserPageVO[],
dialog: {
visible: false
} as DialogType,
deptName: undefined,
// 部门下拉项
deptOptions: [] as OptionType[],
// 性别下拉项
genderOptions: [] as OptionType[],
// 角色下拉项
roleOptions: [] as OptionType[],
formData: {
status: 1
} as UserForm,
queryParams: {
pageNum: 1,
pageSize: 10
} as UserQuery,
rules: {
username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
nickname: [
{ 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'
}
],
mobile: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: '请输入正确的手机号码',
trigger: 'blur'
}
]
},
importDialog: {
title: '用户导入',
visible: false
} as DialogType,
importFormData: {} as UserImportVO,
excelFile: undefined as any,
excelFilelist: [] as File[]
const loading = ref(false);
const ids = ref([]);
const total = ref(0);
const dialog = reactive<DialogOption>({
visible: false
});
const {
ids,
loading,
queryParams,
userList,
total,
dialog,
formData,
rules,
deptName,
deptOptions,
roleOptions,
importDialog,
importFormData,
excelFilelist
} = toRefs(state);
const queryParams = reactive<UserQuery>({
pageNum: 1,
pageSize: 10
});
const userList = ref<UserPageVO[]>();
const formData = reactive<UserForm>({
status: 1
});
const rules = reactive({
username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
nickname: [{ 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'
}
],
mobile: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: '请输入正确的手机号码',
trigger: 'blur'
}
]
});
const searchDeptName = ref();
const deptList = ref<OptionType[]>();
const roleList = ref<OptionType[]>();
const importDialog = reactive<DialogOption>({
title: '用户导入',
visible: false
});
const importDeptId = ref<number>(0);
const excelFile = ref<File>();
const excelFilelist = ref<File[]>([]);
watchEffect(
() => {
deptTreeRef.value.filter(state.deptName);
deptTreeRef.value.filter(searchDeptName.value);
},
{
flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
@@ -144,7 +88,7 @@ watchEffect(
/**
* 部门筛选
*/
function filterDeptNode(value: string, data: any) {
function handleDeptFilter(value: string, data: any) {
if (!value) {
return true;
}
@@ -152,36 +96,32 @@ function filterDeptNode(value: string, data: any) {
}
/**
* 部门树节点click
* 部门树节点
*/
function handleDeptNodeClick(data: { [key: string]: any }) {
state.queryParams.deptId = data.value;
queryParams.deptId = data.value;
handleQuery();
}
/**
* 获取角色下拉项
* 获取角色下拉列表
*/
async function getRoleOptions() {
listRoleOptions().then(response => {
state.roleOptions = response.data;
roleList.value = response.data;
});
}
/**
* 用户状态change
* 修改用户状态
*/
function handleStatusChange(row: { [key: string]: any }) {
const text = row.status === 1 ? '启用' : '停用';
ElMessageBox.confirm(
'确认要' + text + '' + row.username + '用户吗?',
'警告',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
)
ElMessageBox.confirm('确认要' + text + row.username + '用户吗?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
return updateUserStatus(row.id, row.status);
})
@@ -197,27 +137,31 @@ function handleStatusChange(row: { [key: string]: any }) {
* 查询
*/
function handleQuery() {
state.loading = true;
listUserPages(state.queryParams).then(({ data }) => {
state.userList = data.list;
state.total = data.total;
state.loading = false;
});
loading.value = true;
getUserPage(queryParams)
.then(({ data }) => {
userList.value = data.list;
total.value = data.total;
})
.finally(() => {
loading.value = false;
});
}
/**
* 重置
* 重置查询
*/
function resetQuery() {
queryFormRef.value.resetFields();
queryParams.pageNum = 1;
handleQuery();
}
/**
* 行选中
* 行checkbox change事件
*/
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.id);
ids.value = selection.map((item: any) => item.id);
}
/**
@@ -245,53 +189,67 @@ function resetPassword(row: { [key: string]: any }) {
}
/**
* 添加用户
**/
async function handleAdd() {
state.dialog = {
title: '添加用户',
visible: true
};
* 打开弹窗
*
* @param userId 用户ID
*/
async function openDialog(userId?: number) {
await getDeptOptions();
await getRoleOptions();
dialog.visible = true;
if (userId) {
dialog.title = '修改用户';
getUserForm(userId).then(({ data }) => {
Object.assign(formData, data);
});
} else {
dialog.title = '新增用户';
}
}
/**
* 修改用户
**/
async function handleUpdate(row: { [key: string]: any }) {
dialog.value = {
title: '修改用户',
visible: true
};
* 关闭用户弹窗
*/
function closeDialog() {
dialog.visible = false;
resetForm();
}
const userId = row.id || state.ids;
await getDeptOptions();
await getRoleOptions();
getUserForm(userId).then(({ data }) => {
formData.value = data;
});
/**
* 重置表单
*/
function resetForm() {
userFormRef.value.resetFields();
userFormRef.value.clearValidate();
formData.id = undefined;
formData.status = 1;
}
/**
* 表单提交
*/
function submitForm() {
dataFormRef.value.validate((valid: any) => {
function handleSubmit() {
userFormRef.value.validate((valid: any) => {
if (valid) {
const userId = state.formData.id;
const userId = formData.id;
loading.value = true;
if (userId) {
updateUser(userId, state.formData).then(() => {
ElMessage.success('修改用户成功');
closeDialog();
handleQuery();
});
updateUser(userId, formData)
.then(() => {
ElMessage.success('修改用户成功');
closeDialog();
resetQuery();
})
.finally(() => (loading.value = false));
} else {
addUser(state.formData).then(() => {
ElMessage.success('新增用户成功');
closeDialog();
handleQuery();
});
addUser(formData)
.then(() => {
ElMessage.success('新增用户成功');
closeDialog();
resetQuery();
})
.finally(() => (loading.value = false));
}
}
});
@@ -300,34 +258,23 @@ function submitForm() {
/**
* 删除用户
*/
function handleDelete(row: { [key: string]: any }) {
const userIds = row.id || state.ids.join(',');
ElMessageBox.confirm(
'是否确认删除用户编号为「' + userIds + '」的数据项?',
'警告',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
)
.then(function () {
deleteUsers(userIds).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
}
function handleDelete(id: number) {
const userIds = ([id] || ids.value).join(',');
if (!userIds) {
ElMessage.warning('请勾选删除项');
return;
}
/**
* 关闭用户弹窗
*/
function closeDialog() {
dialog.value.visible = false;
dataFormRef.value.resetFields();
dataFormRef.value.clearValidate();
formData.value.id = undefined;
ElMessageBox.confirm('确认删除用户?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {
deleteUsers(userIds).then(() => {
ElMessage.success('删除成功');
resetQuery();
});
});
}
/**
@@ -335,16 +282,7 @@ function closeDialog() {
*/
async function getDeptOptions() {
listDeptOptions().then(response => {
state.deptOptions = response.data;
});
}
/**
* 获取性别下拉项
*/
function getGenderOptions() {
proxy.$getDictionaries('gender').then((response: any) => {
state.genderOptions = response?.data;
deptList.value = response.data;
});
}
@@ -372,10 +310,10 @@ function downloadTemplate() {
/**
* 导入弹窗
*/
async function showImportDialog() {
async function openImportDialog() {
await getDeptOptions();
await getRoleOptions();
importDialog.value.visible = true;
importDialog.visible = true;
}
/**
@@ -386,50 +324,44 @@ async function showImportDialog() {
function handleExcelChange(file: UploadFile) {
if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
ElMessage.warning('上传Excel只能为xlsx、xls格式');
state.excelFile = undefined;
state.excelFilelist = [];
excelFile.value = undefined;
excelFilelist.value = [];
return false;
}
state.excelFile = file.raw;
excelFile.value = file.raw;
}
/**
* Excel文件上传
* 导入用户
*/
function uploadUser() {
importFormRef.value.validate((valid: any) => {
if (valid) {
if (!state.excelFile) {
ElMessage.warning('上传Excel文件不能为空');
return false;
}
const deptId = state.importFormData.deptId;
const roleIds = state.importFormData.roleIds.join(',');
importUser(deptId, roleIds, state.excelFile).then(response => {
ElMessage.success(response.data);
closeImportDialog();
handleQuery();
});
function handleUserImport() {
if (importDeptId.value) {
if (!excelFile.value) {
ElMessage.warning('上传Excel文件不能为空');
return false;
}
});
importUser(importDeptId.value, excelFile.value).then(response => {
ElMessage.success(response.data);
closeImportDialog();
resetQuery();
});
}
}
/**
* 关闭导入弹窗
*/
function closeImportDialog() {
state.importDialog.visible = false;
state.excelFile = undefined;
state.excelFilelist = [];
importFormRef.value.resetFields();
importDialog.visible = false;
excelFile.value = undefined;
excelFilelist.value = [];
}
/**
* 导出用户
*/
function handleExport() {
exportUser(queryParams.value).then((response: any) => {
function handleUserExport() {
exportUser(queryParams).then((response: any) => {
const blob = new Blob([response.data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
});
@@ -447,12 +379,8 @@ function handleExport() {
}
onMounted(() => {
// 初始化性别字典
getGenderOptions();
// 初始化部门
getDeptOptions();
// 初始化用户列表数据
handleQuery();
getDeptOptions(); // 初始化部门
handleQuery(); // 初始化用户列表数据
});
</script>
@@ -462,26 +390,25 @@ onMounted(() => {
<!-- 部门树 -->
<el-col :lg="4" :xs="24" class="mb-[12px]">
<el-card shadow="never">
<el-input
v-model="deptName"
placeholder="部门名称"
clearable
:prefix-icon="Search"
style="margin-bottom: 20px"
/>
<el-input v-model="searchDeptName" placeholder="部门名称" clearable>
<template #prefix>
<i-ep-search />
</template>
</el-input>
<el-tree
class="mt-2"
ref="deptTreeRef"
:data="deptOptions"
:data="deptList"
:props="{ children: 'children', label: 'label', disabled: '' }"
:expand-on-click-node="false"
:filter-node-method="filterDeptNode"
:filter-node-method="handleDeptFilter"
default-expand-all
@node-click="handleDeptNodeClick"
></el-tree>
</el-card>
</el-col>
<!-- 用户数据 -->
<el-col :lg="20" :xs="24">
<div class="search">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
@@ -508,10 +435,13 @@ onMounted(() => {
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
<el-button type="primary" @click="handleQuery"
><i-ep-search />搜索</el-button
>
<el-button @click="resetQuery">
<i-ep-refresh />
重置</el-button
>
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</div>
@@ -522,18 +452,16 @@ onMounted(() => {
<div>
<el-button
type="success"
:icon="Plus"
@click="handleAdd"
@click="openDialog()"
v-hasPerm="['sys:user:add']"
>新增</el-button
><i-ep-plus />新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="ids.length === 0"
@click="handleDelete"
v-hasPerm="['sys:user:delete']"
>删除</el-button
><i-ep-delete />删除</el-button
>
</div>
<div>
@@ -544,13 +472,13 @@ onMounted(() => {
<el-dropdown-item @click="downloadTemplate">
<i-ep-download />下载模板</el-dropdown-item
>
<el-dropdown-item @click="showImportDialog">
<el-dropdown-item @click="openImportDialog">
<i-ep-top />导入数据</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button class="ml-3" @click="handleExport"
<el-button class="ml-3" @click="handleUserExport"
><template #icon><i-ep-download /></template>导出</el-button
>
</div>
@@ -619,24 +547,30 @@ onMounted(() => {
prop="createTime"
width="180"
></el-table-column>
<el-table-column label="操作" align="left" width="200">
<el-table-column label="操作" fixed="right" width="220">
<template #default="scope">
<el-button type="success" link @click="resetPassword(scope.row)"
>重置密码</el-button
<el-button
type="primary"
size="small"
link
@click="resetPassword(scope.row)"
><i-ep-refresh-left />重置密码</el-button
>
<el-button
type="primary"
link
@click="handleUpdate(scope.row)"
size="small"
@click="openDialog(scope.row.id)"
v-hasPerm="['sys:user:edit']"
>编辑</el-button
><i-ep-edit />编辑</el-button
>
<el-button
type="danger"
type="primary"
link
@click="handleDelete(scope.row)"
v-hasPerm="['sys:user:del']"
>删除</el-button
size="small"
@click="handleDelete(scope.row.id)"
v-hasPerm="['sys:user:delete']"
><i-ep-delete />删除</el-button
>
</template>
</el-table-column>
@@ -653,7 +587,7 @@ onMounted(() => {
</el-col>
</el-row>
<!-- 用户表单 -->
<!-- 表单弹窗 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
@@ -662,7 +596,7 @@ onMounted(() => {
@close="closeDialog"
>
<el-form
ref="dataFormRef"
ref="userFormRef"
:model="formData"
:rules="rules"
label-width="80px"
@@ -683,13 +617,32 @@ onMounted(() => {
<el-tree-select
v-model="formData.deptId"
placeholder="请选择所属部门"
:data="deptOptions"
:data="deptList"
filterable
check-strictly
:render-after-expand="false"
/>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-select v-model="formData.gender" placeholder="请选择">
<el-option label="未知" :value="0" />
<el-option label="男" :value="1" />
<el-option label="女" :value="2" />
</el-select>
</el-form-item>
<el-form-item label="角色" prop="roleIds">
<el-select v-model="formData.roleIds" multiple placeholder="请选择">
<el-option
v-for="item in roleList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="手机号码" prop="mobile">
<el-input
v-model="formData.mobile"
@@ -712,35 +665,16 @@ onMounted(() => {
<el-radio :label="0">禁用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="用户性别" prop="gender">
<el-select v-model="formData.gender" placeholder="请选择">
<el-option label="未知" :value="0" />
<el-option label="男" :value="1" />
<el-option label="女" :value="2" />
</el-select>
</el-form-item>
<el-form-item label="角色" prop="roleIds">
<el-select v-model="formData.roleIds" multiple placeholder="请选择">
<el-option
v-for="item in roleOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</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="closeDialog">取 消</el-button>
</div>
</template>
</el-dialog>
<!-- import dialog -->
<!-- 导入弹窗 -->
<el-dialog
:title="importDialog.title"
v-model="importDialog.visible"
@@ -748,37 +682,17 @@ onMounted(() => {
append-to-body
@close="closeImportDialog"
>
<el-form
ref="importFormRef"
:model="importFormData"
:rules="rules"
label-width="80px"
>
<el-form-item label="部门" prop="deptId">
<el-form label-width="80px">
<el-form-item label="部门">
<el-tree-select
v-model="importFormData.deptId"
v-model="importDeptId"
placeholder="请选择部门"
:data="deptOptions"
:data="deptList"
filterable
check-strictly
/>
</el-form-item>
<el-form-item label="角色" prop="roleIds">
<el-select
v-model="importFormData.roleIds"
multiple
placeholder="请选择"
>
<el-option
v-for="item in roleOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="Excel">
<el-upload
class="upload-demo"
@@ -791,7 +705,7 @@ onMounted(() => {
:limit="1"
>
<el-icon class="el-icon--upload">
<upload-filled />
<i-ep-upload-filled />
</el-icon>
<div class="el-upload__text">
将文件拖到此处，或
@@ -805,7 +719,7 @@ onMounted(() => {
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="uploadUser">确 定</el-button>
<el-button type="primary" @click="handleUserImport">确 定</el-button>
<el-button @click="closeImportDialog">取 消</el-button>
</div>
</template>