refactor: 页面布局样式优化和接口合理性优化
This commit is contained in:
horizons
parent
848c74318c
commit
4af1b0aa5a
|
|
@ -44,9 +44,9 @@ export function listRoleOptions(
|
|||
*
|
||||
* @param queryParams
|
||||
*/
|
||||
export function getRoleResources(roleId: string): AxiosPromise<RoleResource> {
|
||||
export function getRoleMenuIds(roleId: string): AxiosPromise<number[]> {
|
||||
return request({
|
||||
url: '/api/v1/roles/' + roleId + '/resources',
|
||||
url: '/api/v1/roles/' + roleId + '/menuIds',
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
|
@ -56,12 +56,12 @@ export function getRoleResources(roleId: string): AxiosPromise<RoleResource> {
|
|||
*
|
||||
* @param queryParams
|
||||
*/
|
||||
export function updateRoleResource(
|
||||
export function updateRoleMenus(
|
||||
roleId: string,
|
||||
data: RoleResource
|
||||
data: number[]
|
||||
): AxiosPromise<any> {
|
||||
return request({
|
||||
url: '/api/v1/roles/' + roleId + '/resources',
|
||||
url: '/api/v1/roles/' + roleId + '/menus',
|
||||
method: 'put',
|
||||
data: data
|
||||
});
|
||||
|
|
|
|||
|
|
@ -50,40 +50,3 @@
|
|||
}
|
||||
|
||||
|
||||
// fix: 内核较旧的浏览器不支持:not(selector list)
|
||||
.el-button:not(.is-text),
|
||||
.el-button:not(.is-link),
|
||||
.el-button:not(.el-button--text) {
|
||||
background-color: var(--el-button-bg-color);
|
||||
border: var(--el-border);
|
||||
border-color: var(--el-button-border-color)
|
||||
}
|
||||
|
||||
.el-button:not(.is-text):focus,
|
||||
.el-button:not(.is-link):focus,
|
||||
.el-button:not(.el-button--text):focus,
|
||||
.el-button:not(.is-text):hover,
|
||||
.el-button:not(.is-link):hover,
|
||||
.el-button:not(.el-button--text):hover {
|
||||
color: var(--el-button-hover-text-color);
|
||||
border-color: var(--el-button-hover-border-color);
|
||||
background-color: var(--el-button-hover-bg-color);
|
||||
outline: 0
|
||||
}
|
||||
|
||||
.el-button:not(.is-text):active,
|
||||
.el-button:not(.is-link):active,
|
||||
.el-button:not(.el-button--text):active {
|
||||
color: var(--el-button-active-text-color);
|
||||
border-color: var(--el-button-active-border-color);
|
||||
background-color: var(--el-button-active-bg-color);
|
||||
outline: 0
|
||||
}
|
||||
|
||||
.el-button:not(.is-text):focus-visible,
|
||||
.el-button:not(.is-link):focus-visible,
|
||||
.el-button:not(.el-button--text):focus-visible {
|
||||
border-color: transparent;
|
||||
outline: 2px solid var(--el-button-border-color);
|
||||
outline-offset: 1px
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
@import 'src/styles/variables.module';
|
||||
@import './mixin.scss';
|
||||
@import './transition.scss';
|
||||
@import 'src/styles/element-plus';
|
||||
@import './sidebar.scss';
|
||||
|
||||
|
|
@ -66,3 +64,12 @@ div:focus {
|
|||
.app-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.search{
|
||||
padding:18px 0 0 10px;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
border-radius: var(--el-card-border-radius);
|
||||
border: 1px solid var(--el-card-border-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,48 +0,0 @@
|
|||
// global transition css
|
||||
|
||||
/* fade */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.28s;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* fade-transform */
|
||||
.fade-transform-leave-active,
|
||||
.fade-transform-enter-active {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.fade-transform-enter {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
|
||||
.fade-transform-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
/* breadcrumb transition */
|
||||
.breadcrumb-enter-active,
|
||||
.breadcrumb-leave-active {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.breadcrumb-enter,
|
||||
.breadcrumb-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.breadcrumb-move {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.breadcrumb-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -88,10 +88,6 @@ export interface Resource {
|
|||
* 子菜单
|
||||
*/
|
||||
children: Resource[];
|
||||
/**
|
||||
* 权限集合
|
||||
*/
|
||||
perms: Permission[];
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { PageQueryParam, PageResult } from './base';
|
|||
* 角色查询参数类型
|
||||
*/
|
||||
export interface RoleQueryParam extends PageQueryParam {
|
||||
name?: string;
|
||||
keywords?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ export interface UserFormData {
|
|||
/**
|
||||
* 用户导入表单类型声明
|
||||
*/
|
||||
export interface UserImportFormData {
|
||||
export interface UserImportData {
|
||||
deptId: number;
|
||||
roleIds: number[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
<script setup lang="ts">
|
||||
import Editor from '@/components/WangEditor/index.vue';
|
||||
import { ElForm } from 'element-plus';
|
||||
import { reactive, ref, toRefs } from 'vue';
|
||||
|
||||
const dataFormRef = ref(ElForm);
|
||||
|
||||
const state = reactive({
|
||||
formData: {
|
||||
content: '初始内容'
|
||||
}
|
||||
});
|
||||
|
||||
const { formData } = toRefs(state);
|
||||
</script>
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form ref="dataFormRef" :model="formData">
|
||||
<editor v-model="formData.content" style="height: 600px" />
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -5,10 +5,8 @@ export default {
|
|||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
// Vue依赖
|
||||
import { onMounted, reactive, ref, toRefs } from 'vue';
|
||||
|
||||
// API依赖
|
||||
import {
|
||||
getDeptForm,
|
||||
deleteDept,
|
||||
|
|
@ -18,36 +16,27 @@ import {
|
|||
listDepartments
|
||||
} from '@/api/dept';
|
||||
|
||||
// 组件依赖
|
||||
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
|
||||
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { DeptFormData, DeptItem, DeptQueryParam } from '@/types/api/dept';
|
||||
import { Dialog, Option } from '@/types/common';
|
||||
|
||||
// DOM元素的引用声明定义
|
||||
const queryFormRef = ref(ElForm);
|
||||
const dataFormRef = ref(ElForm);
|
||||
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
// 选中ID数组
|
||||
ids: [] as number[],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
loading: true,
|
||||
// 表格树数据
|
||||
deptList: [] as DeptItem[],
|
||||
// 部门下拉选项
|
||||
dataList: [] as DeptItem[],
|
||||
deptOptions: [] as Option[],
|
||||
// 弹窗属性
|
||||
dialog: { visible: false } as Dialog,
|
||||
// 查询参数
|
||||
queryParams: {} as DeptQueryParam,
|
||||
// 表单数据
|
||||
formData: {
|
||||
sort: 1,
|
||||
status: 1
|
||||
} as DeptFormData,
|
||||
// 表单参数校验
|
||||
rules: {
|
||||
parentId: [
|
||||
{ required: true, message: '上级部门不能为空', trigger: 'blur' }
|
||||
|
|
@ -58,9 +47,9 @@ const state = reactive({
|
|||
});
|
||||
|
||||
const {
|
||||
single,
|
||||
ids,
|
||||
loading,
|
||||
deptList,
|
||||
dataList,
|
||||
deptOptions,
|
||||
queryParams,
|
||||
formData,
|
||||
|
|
@ -69,18 +58,18 @@ const {
|
|||
} = toRefs(state);
|
||||
|
||||
/**
|
||||
* 部门查询
|
||||
* 查询
|
||||
*/
|
||||
function handleQuery() {
|
||||
state.loading = true;
|
||||
loading.value = true;
|
||||
listDepartments(state.queryParams).then(({ data }) => {
|
||||
state.deptList = data;
|
||||
state.loading = false;
|
||||
dataList.value = data;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置查询
|
||||
* 重置
|
||||
*/
|
||||
function resetQuery() {
|
||||
queryFormRef.value.resetFields();
|
||||
|
|
@ -89,13 +78,12 @@ function resetQuery() {
|
|||
|
||||
function handleSelectionChange(selection: any) {
|
||||
state.ids = selection.map((item: any) => item.id);
|
||||
state.single = selection.length === 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载部门下拉数据源
|
||||
* 获取部门下拉数据
|
||||
*/
|
||||
async function loadDeptData() {
|
||||
async function getDeptOptions() {
|
||||
const deptOptions: any[] = [];
|
||||
listDeptOptions().then(response => {
|
||||
const rootDeptOption = {
|
||||
|
|
@ -109,23 +97,23 @@ async function loadDeptData() {
|
|||
}
|
||||
|
||||
/**
|
||||
* 添加部门
|
||||
* 添加
|
||||
*/
|
||||
function handleAdd(row: any) {
|
||||
loadDeptData();
|
||||
state.formData.id = undefined;
|
||||
state.formData.parentId = row.id;
|
||||
state.dialog = {
|
||||
getDeptOptions();
|
||||
formData.value.id = undefined;
|
||||
formData.value.parentId = row.id;
|
||||
dialog.value = {
|
||||
title: '添加部门',
|
||||
visible: true
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改部门
|
||||
* 修改
|
||||
*/
|
||||
async function handleUpdate(row: any) {
|
||||
await loadDeptData();
|
||||
await getDeptOptions();
|
||||
const deptId = row.id || state.ids;
|
||||
state.dialog = {
|
||||
title: '修改部门',
|
||||
|
|
@ -137,7 +125,7 @@ async function handleUpdate(row: any) {
|
|||
}
|
||||
|
||||
/**
|
||||
* 部门表单提交
|
||||
* 提交
|
||||
*/
|
||||
function submitForm() {
|
||||
dataFormRef.value.validate((valid: any) => {
|
||||
|
|
@ -145,13 +133,13 @@ function submitForm() {
|
|||
if (state.formData.id) {
|
||||
updateDept(state.formData.id, state.formData).then(() => {
|
||||
ElMessage.success('修改成功');
|
||||
cancel();
|
||||
closeDialog();
|
||||
handleQuery();
|
||||
});
|
||||
} else {
|
||||
addDept(state.formData).then(() => {
|
||||
ElMessage.success('新增成功');
|
||||
cancel();
|
||||
closeDialog();
|
||||
handleQuery();
|
||||
});
|
||||
}
|
||||
|
|
@ -160,12 +148,15 @@ function submitForm() {
|
|||
}
|
||||
|
||||
/**
|
||||
* 删除部门
|
||||
*
|
||||
* @param row
|
||||
* 删除
|
||||
*/
|
||||
function handleDelete(row: any) {
|
||||
const ids = [row.id || state.ids].join(',');
|
||||
if (!ids) {
|
||||
ElMessage.warning('请勾选删除项');
|
||||
return;
|
||||
}
|
||||
|
||||
ElMessageBox.confirm(`确认删除已选中的数据项?`, '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
|
|
@ -185,11 +176,10 @@ function handleDelete(row: any) {
|
|||
}
|
||||
|
||||
/**
|
||||
* 取消/关闭弹窗
|
||||
* 关闭弹窗
|
||||
**/
|
||||
function cancel() {
|
||||
function closeDialog() {
|
||||
dialog.value.visible = false;
|
||||
formData.value.id = undefined;
|
||||
dataFormRef.value.resetFields();
|
||||
dataFormRef.value.clearValidate();
|
||||
}
|
||||
|
|
@ -200,110 +190,116 @@ onMounted(() => {
|
|||
</script>
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item>
|
||||
<div class="search">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item label="关键字" prop="keywords">
|
||||
<el-input
|
||||
v-model="queryParams.keywords"
|
||||
placeholder="部门名称"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="部门状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="部门状态"
|
||||
clearable
|
||||
>
|
||||
<el-option :value="1" label="正常" />
|
||||
<el-option :value="0" label="禁用" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
class="filter-item"
|
||||
type="primary"
|
||||
:icon="Search"
|
||||
@click="handleQuery"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button :icon="Refresh" @click="resetQuery"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<el-card>
|
||||
<!--toolbar-->
|
||||
<template #header>
|
||||
<el-button type="success" :icon="Plus" @click="handleAdd"
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
:disabled="single"
|
||||
@click="handleDelete"
|
||||
:disabled="ids.length === 0"
|
||||
>删除
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<el-form-item prop="keywords">
|
||||
<el-input
|
||||
v-model="queryParams.keywords"
|
||||
placeholder="请输入部门名称"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!--table-->
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="dataList"
|
||||
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">
|
||||
<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-form-item prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="部门状态"
|
||||
clearable
|
||||
>
|
||||
<el-option :value="1" label="正常" />
|
||||
<el-option :value="0" label="禁用" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
class="filter-item"
|
||||
type="primary"
|
||||
:icon="Search"
|
||||
@click="handleQuery"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button :icon="Refresh" @click="resetQuery"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table-column prop="sort" label="排序" width="200" />
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
: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">
|
||||
<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="createTime" label="创建时间" width="250" />
|
||||
<el-table-column prop="updateTime" label="修改时间" width="250" />
|
||||
|
||||
<el-table-column prop="sort" label="排序" width="200" />
|
||||
<el-table-column label="操作" align="center" width="150">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="Edit"
|
||||
circle
|
||||
plain
|
||||
@click.stop="handleUpdate(scope.row)"
|
||||
>
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
:icon="Plus"
|
||||
circle
|
||||
plain
|
||||
@click.stop="handleAdd(scope.row)"
|
||||
>
|
||||
</el-button>
|
||||
|
||||
<el-table-column prop="createTime" label="创建时间" width="250" />
|
||||
<el-table-column prop="updateTime" label="修改时间" width="250" />
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
circle
|
||||
plain
|
||||
@click.stop="handleDelete(scope.row)"
|
||||
>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-table-column label="操作" align="center" width="150">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="Edit"
|
||||
circle
|
||||
plain
|
||||
@click.stop="handleUpdate(scope.row)"
|
||||
>
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
:icon="Plus"
|
||||
circle
|
||||
plain
|
||||
@click.stop="handleAdd(scope.row)"
|
||||
>
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
circle
|
||||
plain
|
||||
@click.stop="handleDelete(scope.row)"
|
||||
>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 添加或修改部门对话框 -->
|
||||
<!-- dialog -->
|
||||
<el-dialog
|
||||
:title="dialog.title"
|
||||
v-model="dialog.visible"
|
||||
width="600px"
|
||||
@closed="cancel"
|
||||
@closed="closeDialog"
|
||||
>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
|
|
@ -343,7 +339,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>
|
||||
|
|
|
|||
|
|
@ -5,23 +5,23 @@ export default {
|
|||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, reactive, ref, toRefs } from 'vue';
|
||||
import { onMounted, reactive, ref, toRefs } from 'vue';
|
||||
import {
|
||||
listRolePages,
|
||||
updateRole,
|
||||
getRoleFormDetail,
|
||||
addRole,
|
||||
deleteRoles,
|
||||
getRoleResources,
|
||||
updateRoleResource
|
||||
getRoleMenuIds,
|
||||
updateRoleMenus
|
||||
} from '@/api/role';
|
||||
import { listResources } from '@/api/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/role';
|
||||
import { Resource } from '@/types/api/menu';
|
||||
import SvgIcon from '@/components/SvgIcon/index.vue';
|
||||
import { Option, Dialog } from '@/types/common';
|
||||
|
||||
const emit = defineEmits(['roleClick']);
|
||||
const queryFormRef = ref(ElForm);
|
||||
|
|
@ -30,12 +30,8 @@ const resourceRef = ref(ElTree);
|
|||
|
||||
const state = reactive({
|
||||
loading: true,
|
||||
// 选中ID数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 选中ID
|
||||
ids: [] as number[],
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
|
|
@ -45,14 +41,14 @@ const state = reactive({
|
|||
dialog: {
|
||||
title: '',
|
||||
visible: false
|
||||
},
|
||||
} as Dialog,
|
||||
formData: {} as RoleFormData,
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }]
|
||||
},
|
||||
resourceDialogVisible: false,
|
||||
resourceOptions: [] as Resource[],
|
||||
menuDialogVisible: false,
|
||||
resourceOptions: [] as Option[],
|
||||
btnPerms: {} as any,
|
||||
// 勾选的菜单ID
|
||||
checkedMenuIds: new Set([]),
|
||||
|
|
@ -65,20 +61,22 @@ const state = reactive({
|
|||
});
|
||||
|
||||
const {
|
||||
ids,
|
||||
loading,
|
||||
multiple,
|
||||
queryParams,
|
||||
roleList,
|
||||
total,
|
||||
dialog,
|
||||
formData,
|
||||
rules,
|
||||
resourceDialogVisible,
|
||||
menuDialogVisible,
|
||||
checkedRole,
|
||||
resourceOptions,
|
||||
btnPerms
|
||||
resourceOptions
|
||||
} = toRefs(state);
|
||||
|
||||
/**
|
||||
* 查询
|
||||
*/
|
||||
function handleQuery() {
|
||||
emit('roleClick', {});
|
||||
state.loading = true;
|
||||
|
|
@ -89,7 +87,7 @@ function handleQuery() {
|
|||
});
|
||||
}
|
||||
/**
|
||||
* 查询重置
|
||||
* 重置查询
|
||||
*/
|
||||
function resetQuery() {
|
||||
queryFormRef.value.resetFields();
|
||||
|
|
@ -98,8 +96,6 @@ function resetQuery() {
|
|||
|
||||
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) {
|
||||
|
|
@ -107,14 +103,14 @@ function handleRowClick(row: any) {
|
|||
}
|
||||
|
||||
function handleAdd() {
|
||||
state.dialog = {
|
||||
dialog.value = {
|
||||
title: '添加角色',
|
||||
visible: true
|
||||
};
|
||||
}
|
||||
|
||||
function handleUpdate(row: any) {
|
||||
state.dialog = {
|
||||
dialog.value = {
|
||||
title: '修改角色',
|
||||
visible: true
|
||||
};
|
||||
|
|
@ -131,13 +127,13 @@ function submitFormData() {
|
|||
if (state.formData.id) {
|
||||
updateRole(state.formData.id as any, state.formData).then(() => {
|
||||
ElMessage.success('修改角色成功');
|
||||
cancel();
|
||||
closeDialog();
|
||||
handleQuery();
|
||||
loading.value = false;
|
||||
});
|
||||
} else {
|
||||
addRole(state.formData).then(() => {
|
||||
cancel();
|
||||
closeDialog();
|
||||
ElMessage.success('新增角色成功');
|
||||
handleQuery();
|
||||
loading.value = false;
|
||||
|
|
@ -150,9 +146,8 @@ function submitFormData() {
|
|||
/**
|
||||
* 取消
|
||||
*/
|
||||
function cancel() {
|
||||
function closeDialog() {
|
||||
dialog.value.visible = false;
|
||||
formData.value.id = undefined;
|
||||
dataFormRef.value.resetFields();
|
||||
dataFormRef.value.clearValidate();
|
||||
}
|
||||
|
|
@ -176,25 +171,11 @@ function handleDelete(row: any) {
|
|||
.catch(() => ElMessage.info('已取消删除'));
|
||||
}
|
||||
|
||||
const handleResourceCheckChange = (
|
||||
data: Resource,
|
||||
isCheck: boolean,
|
||||
sonHasCheck: boolean
|
||||
) => {
|
||||
console.log('data', data);
|
||||
console.log('isCheck', isCheck);
|
||||
if (data.perms) {
|
||||
data.perms.forEach(item => {
|
||||
btnPerms.value[item.value] = isCheck;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 资源分配
|
||||
*/
|
||||
function openRoleResourceDialog(row: RoleItem) {
|
||||
resourceDialogVisible.value = true;
|
||||
function showRoleMenuDialog(row: RoleItem) {
|
||||
menuDialogVisible.value = true;
|
||||
loading.value = true;
|
||||
|
||||
const roleId: any = row.id;
|
||||
|
|
@ -206,80 +187,35 @@ function openRoleResourceDialog(row: RoleItem) {
|
|||
// 获取所有的资源
|
||||
listResources().then(response => {
|
||||
resourceOptions.value = response.data;
|
||||
|
||||
// 获取角色拥有的资源
|
||||
getRoleResources(roleId).then(({ data }) => {
|
||||
// 勾选的菜单回显
|
||||
const checkedMenuIds = data.menuIds;
|
||||
// 角色拥有的资源
|
||||
getRoleMenuIds(roleId).then(({ data }) => {
|
||||
// 勾选回显
|
||||
const checkedMenuIds = data;
|
||||
resourceRef.value.setCheckedKeys(checkedMenuIds);
|
||||
|
||||
nextTick(() => {
|
||||
// 勾选的权限回显
|
||||
const rolePermIds = data.permIds;
|
||||
|
||||
state.allPermIds = filterResourcePermIds(response.data, []);
|
||||
if (state.allPermIds) {
|
||||
state.allPermIds.forEach(permId => {
|
||||
if (rolePermIds.indexOf(permId) > -1) {
|
||||
btnPerms.value[permId] = true;
|
||||
} else {
|
||||
btnPerms.value[permId] = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
loading.value = false;
|
||||
});
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const filterResourcePermIds = (resources: Resource[], permIds: string[]) => {
|
||||
resources.forEach(resource => {
|
||||
if (resource.perms) {
|
||||
resource.perms.forEach(perm => {
|
||||
permIds.push(perm.value);
|
||||
});
|
||||
}
|
||||
if (resource.children) {
|
||||
filterResourcePermIds(resource.children, permIds);
|
||||
}
|
||||
});
|
||||
return permIds;
|
||||
};
|
||||
/**
|
||||
* 分配资源提交
|
||||
*/
|
||||
function handleRoleResourceSubmit() {
|
||||
const checkedMenuIds: any[] = resourceRef.value
|
||||
const checkedMenuIds: number[] = resourceRef.value
|
||||
.getCheckedNodes(false, true)
|
||||
.map((node: any) => node.value);
|
||||
|
||||
const checkedPermIds = [] as string[];
|
||||
if (state.allPermIds) {
|
||||
state.allPermIds.forEach(permId => {
|
||||
if (btnPerms.value[permId]) {
|
||||
checkedPermIds.push(permId);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const RoleResource = {
|
||||
menuIds: checkedMenuIds,
|
||||
permIds: checkedPermIds
|
||||
};
|
||||
|
||||
updateRoleResource(checkedRole.value.id, RoleResource).then(res => {
|
||||
updateRoleMenus(checkedRole.value.id, checkedMenuIds).then(res => {
|
||||
ElMessage.success('分配权限成功');
|
||||
state.resourceDialogVisible = false;
|
||||
menuDialogVisible.value = false;
|
||||
handleQuery();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消资源分配
|
||||
* 关闭资源弹窗
|
||||
*/
|
||||
function cancelResourceAssign() {
|
||||
state.resourceDialogVisible = false;
|
||||
function closeMenuDialogVisible() {
|
||||
menuDialogVisible.value = false;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -289,104 +225,106 @@ onMounted(() => {
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索表单 -->
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item>
|
||||
<div class="search">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item prop="name" label="关键字">
|
||||
<el-input
|
||||
v-model="queryParams.keywords"
|
||||
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>
|
||||
</div>
|
||||
|
||||
<el-card>
|
||||
<template #header>
|
||||
<el-button type="success" :icon="Plus" @click="handleAdd"
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
:disabled="multiple"
|
||||
:disabled="ids.length === 0"
|
||||
@click="handleDelete"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<!--table-->
|
||||
<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" min-width="300" />
|
||||
<el-table-column label="角色编码" prop="code" width="200" />
|
||||
|
||||
<el-form-item prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="角色名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-table-column label="状态" align="center" width="150">
|
||||
<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-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-column label="排序" align="center" width="100" prop="sort" />
|
||||
<el-table-column prop="createTime" label="创建时间" width="250" />
|
||||
<el-table-column prop="updateTime" label="修改时间" width="250" />
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<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" min-width="300" />
|
||||
<el-table-column label="角色编码" prop="code" width="200" />
|
||||
<el-table-column label="操作" align="center" width="200">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="分配资源" effect="light">
|
||||
<el-button
|
||||
type="success"
|
||||
circle
|
||||
plain
|
||||
@click.stop="showRoleMenuDialog(scope.row)"
|
||||
>
|
||||
<svg-icon icon-class="perm" />
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
|
||||
<el-table-column label="状态" align="center" width="150">
|
||||
<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="100" prop="sort" />
|
||||
<el-table-column prop="createTime" label="创建时间" width="250" />
|
||||
<el-table-column prop="updateTime" label="修改时间" width="250" />
|
||||
|
||||
<el-table-column label="操作" align="center" width="200">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="分配资源" effect="light">
|
||||
<el-button
|
||||
type="success"
|
||||
type="primary"
|
||||
:icon="Edit"
|
||||
circle
|
||||
plain
|
||||
@click.stop="openRoleResourceDialog(scope.row)"
|
||||
>
|
||||
<svg-icon icon-class="perm" />
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
@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-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 -->
|
||||
<pagination
|
||||
v-if="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="handleQuery"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<!-- 分页工具条 -->
|
||||
<pagination
|
||||
v-if="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="handleQuery"
|
||||
/>
|
||||
|
||||
<!-- 表单弹窗 -->
|
||||
<!-- dialog -->
|
||||
<el-dialog
|
||||
:title="dialog.title"
|
||||
v-model="dialog.visible"
|
||||
|
|
@ -427,7 +365,7 @@ onMounted(() => {
|
|||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitFormData">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
<el-button @click="closeDialog">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
|
@ -435,7 +373,7 @@ onMounted(() => {
|
|||
<!--分配资源弹窗-->
|
||||
<el-dialog
|
||||
:title="'【' + checkedRole.name + '】资源分配'"
|
||||
v-model="resourceDialogVisible"
|
||||
v-model="menuDialogVisible"
|
||||
width="800px"
|
||||
>
|
||||
<el-scrollbar max-height="600px" v-loading="loading">
|
||||
|
|
@ -445,25 +383,9 @@ onMounted(() => {
|
|||
show-checkbox
|
||||
:data="resourceOptions"
|
||||
:default-expand-all="true"
|
||||
@check-change="handleResourceCheckChange"
|
||||
>
|
||||
<template #default="{ data }">
|
||||
{{ data.label }}
|
||||
|
||||
<div v-if="data.perms" class="resource-tree-node">
|
||||
<el-divider direction="vertical" />
|
||||
<div class="node-content">
|
||||
<el-checkbox
|
||||
v-for="perm in data.perms"
|
||||
:key="perm.value"
|
||||
:label="perm.value"
|
||||
border
|
||||
size="small"
|
||||
v-model="btnPerms[perm.value]"
|
||||
>{{ perm.label }}</el-checkbox
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
|
|
@ -473,48 +395,9 @@ onMounted(() => {
|
|||
<el-button type="primary" @click="handleRoleResourceSubmit"
|
||||
>确 定</el-button
|
||||
>
|
||||
<el-button @click="cancelResourceAssign">取 消</el-button>
|
||||
<el-button @click="closeMenuDialogVisible">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.resource-tree-node {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
justify-content: flex-end;
|
||||
margin: 0 50px;
|
||||
.node-content {
|
||||
width: 400px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.el-divider--vertical {
|
||||
height: 2em !important;
|
||||
}
|
||||
}
|
||||
.el-tree-node__content {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.el-checkbox.el-checkbox--small {
|
||||
margin: 5px;
|
||||
z-index: 999;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
// Vue依赖
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
|
|
@ -15,7 +14,7 @@ import {
|
|||
toRefs
|
||||
} from 'vue';
|
||||
|
||||
// 导入API
|
||||
// api
|
||||
import {
|
||||
listUserPages,
|
||||
getUserFormData,
|
||||
|
|
@ -31,7 +30,6 @@ import {
|
|||
import { listDeptOptions } from '@/api/dept';
|
||||
import { listRoleOptions } from '@/api/role';
|
||||
|
||||
// 组件依赖
|
||||
import {
|
||||
ElMessage,
|
||||
ElMessageBox,
|
||||
|
|
@ -54,12 +52,11 @@ import {
|
|||
UserItem,
|
||||
UserQueryParam,
|
||||
UserFormData,
|
||||
UserImportFormData
|
||||
UserImportData
|
||||
} from '@/types/api/user';
|
||||
|
||||
import { Option, Dialog } from '@/types/common';
|
||||
|
||||
// DOM元素的引用声明定义 ，变量名和DOM的ref属性值一致
|
||||
const deptTreeRef = ref(ElTree); // 部门树
|
||||
const queryFormRef = ref(ElForm); // 查询表单
|
||||
const dataFormRef = ref(ElForm); // 用户表单
|
||||
|
|
@ -71,37 +68,27 @@ const state = reactive({
|
|||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
ids: [] as number[],
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 用户分页数据
|
||||
userList: [] as UserItem[],
|
||||
// 弹窗属性
|
||||
dialog: {
|
||||
visible: false
|
||||
} as Dialog,
|
||||
deptName: undefined,
|
||||
// 部门树选项
|
||||
// 部门下拉项
|
||||
deptOptions: [] as Option[],
|
||||
// 部门名称
|
||||
// 性别状态字典
|
||||
genderOptions: [] as any[],
|
||||
// 角色选项
|
||||
// 性别下拉项
|
||||
genderOptions: [] as Option[],
|
||||
// 角色下拉项
|
||||
roleOptions: [] as Option[],
|
||||
// 表单参数
|
||||
formData: {
|
||||
status: 1
|
||||
} as UserFormData,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
} as UserQueryParam,
|
||||
// 表单校验
|
||||
rules: {
|
||||
username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
|
||||
nickname: [
|
||||
|
|
@ -129,14 +116,14 @@ const state = reactive({
|
|||
title: '用户搭配',
|
||||
visible: false
|
||||
} as Dialog,
|
||||
importFormData: {} as UserImportFormData,
|
||||
importFormData: {} as UserImportData,
|
||||
excelFile: undefined as any,
|
||||
excelFilelist: [] as File[]
|
||||
});
|
||||
|
||||
const {
|
||||
ids,
|
||||
loading,
|
||||
multiple,
|
||||
queryParams,
|
||||
userList,
|
||||
total,
|
||||
|
|
@ -151,9 +138,6 @@ const {
|
|||
excelFilelist
|
||||
} = toRefs(state);
|
||||
|
||||
/**
|
||||
* 部门筛选
|
||||
*/
|
||||
watchEffect(
|
||||
() => {
|
||||
deptTreeRef.value.filter(state.deptName);
|
||||
|
|
@ -164,7 +148,7 @@ watchEffect(
|
|||
);
|
||||
|
||||
/**
|
||||
* 部门列表筛选
|
||||
* 部门筛选
|
||||
*/
|
||||
function filterDeptNode(value: string, data: any) {
|
||||
if (!value) {
|
||||
|
|
@ -182,16 +166,16 @@ function handleDeptNodeClick(data: { [key: string]: any }) {
|
|||
}
|
||||
|
||||
/**
|
||||
* 加载角色下拉列表
|
||||
* 获取角色下拉项
|
||||
*/
|
||||
async function loadRoleOptions() {
|
||||
async function getRoleOptions() {
|
||||
listRoleOptions().then(response => {
|
||||
state.roleOptions = response.data;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户状态修改
|
||||
* 用户状态change
|
||||
*/
|
||||
function handleStatusChange(row: { [key: string]: any }) {
|
||||
const text = row.status === 1 ? '启用' : '停用';
|
||||
|
|
@ -216,8 +200,8 @@ function handleStatusChange(row: { [key: string]: any }) {
|
|||
}
|
||||
|
||||
/**
|
||||
* 用户查询
|
||||
**/
|
||||
* 查询
|
||||
*/
|
||||
function handleQuery() {
|
||||
state.loading = true;
|
||||
listUserPages(state.queryParams).then(({ data }) => {
|
||||
|
|
@ -228,7 +212,7 @@ function handleQuery() {
|
|||
}
|
||||
|
||||
/**
|
||||
* 重置查询
|
||||
* 重置
|
||||
*/
|
||||
function resetQuery() {
|
||||
queryFormRef.value.resetFields();
|
||||
|
|
@ -236,16 +220,14 @@ function resetQuery() {
|
|||
}
|
||||
|
||||
/**
|
||||
* 表格行选中事件
|
||||
* 行选中
|
||||
*/
|
||||
function handleSelectionChange(selection: any) {
|
||||
state.ids = selection.map((item: any) => item.id);
|
||||
state.single = selection.length !== 1;
|
||||
state.multiple = !selection.length;
|
||||
}
|
||||
|
||||
/**
|
||||
* 密码重置
|
||||
* 重置密码
|
||||
*/
|
||||
function resetPassword(row: { [key: string]: any }) {
|
||||
ElMessageBox.prompt(
|
||||
|
|
@ -276,8 +258,8 @@ async function handleAdd() {
|
|||
title: '添加用户',
|
||||
visible: true
|
||||
};
|
||||
await loadDeptOptions();
|
||||
await loadRoleOptions();
|
||||
await getDeptOptions();
|
||||
await getRoleOptions();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -290,8 +272,8 @@ async function handleUpdate(row: { [key: string]: any }) {
|
|||
};
|
||||
|
||||
const userId = row.id || state.ids;
|
||||
await loadDeptOptions();
|
||||
await loadRoleOptions();
|
||||
await getDeptOptions();
|
||||
await getRoleOptions();
|
||||
getUserFormData(userId).then(({ data }) => {
|
||||
formData.value = data;
|
||||
});
|
||||
|
|
@ -307,13 +289,13 @@ function submitForm() {
|
|||
if (userId) {
|
||||
updateUser(userId, state.formData).then(() => {
|
||||
ElMessage.success('修改用户成功');
|
||||
cancel();
|
||||
closeDialog();
|
||||
handleQuery();
|
||||
});
|
||||
} else {
|
||||
addUser(state.formData).then(() => {
|
||||
ElMessage.success('新增用户成功');
|
||||
cancel();
|
||||
closeDialog();
|
||||
handleQuery();
|
||||
});
|
||||
}
|
||||
|
|
@ -345,28 +327,27 @@ function handleDelete(row: { [key: string]: any }) {
|
|||
}
|
||||
|
||||
/**
|
||||
* 取消
|
||||
* 关闭用户弹窗
|
||||
*/
|
||||
function cancel() {
|
||||
function closeDialog() {
|
||||
dialog.value.visible = false;
|
||||
formData.value.id = undefined;
|
||||
dataFormRef.value.resetFields();
|
||||
dataFormRef.value.clearValidate();
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载部门
|
||||
* 获取部门下拉项
|
||||
*/
|
||||
async function loadDeptOptions() {
|
||||
async function getDeptOptions() {
|
||||
listDeptOptions().then(response => {
|
||||
state.deptOptions = response.data;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载性别字典
|
||||
* 获取性别下拉项
|
||||
*/
|
||||
function loadGenderOptions() {
|
||||
function getGenderOptions() {
|
||||
proxy.$listDictItemsByTypeCode('gender').then((response: any) => {
|
||||
state.genderOptions = response?.data;
|
||||
});
|
||||
|
|
@ -394,11 +375,11 @@ function handleDownloadTemplate() {
|
|||
}
|
||||
|
||||
/**
|
||||
* 显示导入弹窗
|
||||
* 导入弹窗
|
||||
*/
|
||||
async function showImportDialog() {
|
||||
await loadDeptOptions();
|
||||
await loadRoleOptions();
|
||||
await getDeptOptions();
|
||||
await getRoleOptions();
|
||||
importDialog.value.visible = true;
|
||||
}
|
||||
|
||||
|
|
@ -470,20 +451,13 @@ function handleExport() {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化数据
|
||||
*/
|
||||
function loadData() {
|
||||
onMounted(() => {
|
||||
// 初始化性别字典
|
||||
loadGenderOptions();
|
||||
getGenderOptions();
|
||||
// 初始化部门
|
||||
loadDeptOptions();
|
||||
getDeptOptions();
|
||||
// 初始化用户列表数据
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -514,87 +488,82 @@ onMounted(() => {
|
|||
|
||||
<!-- 用户数据 -->
|
||||
<el-col :span="20" :xs="24">
|
||||
<el-card class="box-card">
|
||||
<div class="search">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-row>
|
||||
<el-col :span="18" :xs="24">
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="success"
|
||||
:icon="Plus"
|
||||
@click="handleAdd"
|
||||
v-hasPerm="['sys:user:add']"
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPerm="['sys:user:delete']"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item label="关键字" prop="keywords">
|
||||
<el-input
|
||||
v-model="queryParams.keywords"
|
||||
placeholder="用户名/昵称/手机号"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="keywords">
|
||||
<el-input
|
||||
v-model="queryParams.keywords"
|
||||
placeholder="用户名/昵称/手机号"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="全部"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
>
|
||||
<el-option label="启用" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="用户状态"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
>
|
||||
<el-option label="正常" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
</el-select>
|
||||
</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-col>
|
||||
|
||||
<el-col :span="6" :xs="24" style="text-align: right">
|
||||
<el-form-item>
|
||||
<el-dropdown split-button style="margin-left: 12px">
|
||||
导入
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
:icon="Download"
|
||||
@click="handleDownloadTemplate"
|
||||
>下载模板</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item :icon="Top" @click="showImportDialog"
|
||||
>导入数据</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-button
|
||||
:icon="Download"
|
||||
style="margin-left: 12px"
|
||||
@click="handleExport"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<el-card>
|
||||
<template #header>
|
||||
<el-form-item style="float: left">
|
||||
<el-button
|
||||
type="success"
|
||||
:icon="Plus"
|
||||
@click="handleAdd"
|
||||
v-hasPerm="['sys:user:add']"
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
:disabled="ids.length === 0"
|
||||
@click="handleDelete"
|
||||
v-hasPerm="['sys:user:delete']"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item style="float: right">
|
||||
<el-dropdown split-button style="margin-left: 12px">
|
||||
导入
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
:icon="Download"
|
||||
@click="handleDownloadTemplate"
|
||||
>下载模板</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item :icon="Top" @click="showImportDialog"
|
||||
>导入数据</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-button
|
||||
:icon="Download"
|
||||
style="margin-left: 12px"
|
||||
@click="handleExport"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
|
|
@ -689,7 +658,7 @@ onMounted(() => {
|
|||
v-model="dialog.visible"
|
||||
width="600px"
|
||||
append-to-body
|
||||
@close="cancel"
|
||||
@close="closeDialog"
|
||||
>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
|
|
@ -765,12 +734,12 @@ 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>
|
||||
|
||||
<!--用户导入弹窗-->
|
||||
<!-- import dialog -->
|
||||
<el-dialog
|
||||
:title="importDialog.title"
|
||||
v-model="importDialog.visible"
|
||||
|
|
@ -842,5 +811,3 @@ onMounted(() => {
|
|||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue