zhuibobo
/
RuoYi-Vue-Plus
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

设置默认打开2级

master
庄锐波 7 months ago
parent
71f6f8bdb9
commit
ff161073e5
1 changed files with 116 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 181
      zdxt-web-client/zdxt-admin-plus-ui/src/views/system/user/index.vue

181
zdxt-web-client/zdxt-admin-plus-ui/src/views/system/user/index.vue
View File

@ -4,7 +4,7 @@
<!-- 部门树 -->
<el-col :lg="4" :xs="24" style="">
<el-card shadow="hover">
<el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
<el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable/>
<el-tree
ref="deptTreeRef"
class="mt-2"
@ -14,29 +14,34 @@
:expand-on-click-node="false"
:filter-node-method="filterNode"
highlight-current
default-expand-all
:default-expanded-keys="deptExpandedKeys"
@node-click="handleNodeClick"
/>
</el-card>
</el-col>
<el-col :lg="20" :xs="24">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
:leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="用户名称" prop="userName">
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable @keyup.enter="handleQuery" />
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable
@keyup.enter="handleQuery"/>
</el-form-item>
<el-form-item label="用户昵称" prop="nickName">
<el-input v-model="queryParams.nickName" placeholder="请输入用户昵称" clearable @keyup.enter="handleQuery" />
<el-input v-model="queryParams.nickName" placeholder="请输入用户昵称" clearable
@keyup.enter="handleQuery"/>
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable @keyup.enter="handleQuery" />
<el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable
@keyup.enter="handleQuery"/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="用户状态" clearable>
<el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
<el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label"
:value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item label="创建时间" style="width: 308px">
@ -63,15 +68,19 @@
<template #header>
<el-row :gutter="10">
<el-col :span="1.5">
<el-button v-has-permi="['system:user:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
<el-button v-has-permi="['system:user:add']" type="primary" plain icon="Plus" @click="handleAdd()">
新增
</el-button>
</el-col>
<el-col :span="1.5">
<el-button v-has-permi="['system:user:edit']" type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()">
<el-button v-has-permi="['system:user:edit']" type="success" plain :disabled="single" icon="Edit"
@click="handleUpdate()">
修改
</el-button>
</el-col>
<el-col :span="1.5">
<el-button v-has-permi="['system:user:remove']" type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete()">
<el-button v-has-permi="['system:user:remove']" type="danger" plain :disabled="multiple" icon="Delete"
@click="handleDelete()">
删除
</el-button>
</el-col>
@ -79,32 +88,45 @@
<el-dropdown class="mt-[1px]">
<el-button plain type="info">
更多
<el-icon class="el-icon--right"><arrow-down /></el-icon
></el-button>
<el-icon class="el-icon--right">
<arrow-down/>
</el-icon
>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item icon="Download" @click="importTemplate">下载模板</el-dropdown-item>
<!-- 注意 由于el-dropdown-item标签是延迟加载的 所以v-has-permi自定义标签不生效 需要使用v-if调用方法执行 -->
<el-dropdown-item v-if="checkPermi(['system:user:import'])" icon="Top" @click="handleImport">导入数据</el-dropdown-item>
<el-dropdown-item v-if="checkPermi(['system:user:export'])" icon="Download" @click="handleExport">导出数据</el-dropdown-item>
<el-dropdown-item v-if="checkPermi(['system:user:import'])" icon="Top" @click="handleImport">
导入数据
</el-dropdown-item>
<el-dropdown-item v-if="checkPermi(['system:user:export'])" icon="Download" @click="handleExport">
导出数据
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-col>
<right-toolbar v-model:show-search="showSearch" :columns="columns" :search="true" @query-table="getList"></right-toolbar>
<right-toolbar v-model:show-search="showSearch" :columns="columns" :search="true"
@query-table="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" border :data="userList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column v-if="columns[0].visible" key="userId" label="用户编号" align="center" prop="userId" />
<el-table-column v-if="columns[1].visible" key="userName" label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" />
<el-table-column v-if="columns[2].visible" key="nickName" label="用户昵称" align="center" prop="nickName" :show-overflow-tooltip="true" />
<el-table-column v-if="columns[3].visible" key="deptName" label="部门" align="center" prop="deptName" :show-overflow-tooltip="true" />
<el-table-column v-if="columns[4].visible" key="phonenumber" label="手机号码" align="center" prop="phonenumber" width="120" />
<el-table-column type="selection" width="50" align="center"/>
<el-table-column v-if="columns[0].visible" key="userId" label="用户编号" align="center" prop="userId"/>
<el-table-column v-if="columns[1].visible" key="userName" label="用户名称" align="center" prop="userName"
:show-overflow-tooltip="true"/>
<el-table-column v-if="columns[2].visible" key="nickName" label="用户昵称" align="center" prop="nickName"
:show-overflow-tooltip="true"/>
<el-table-column v-if="columns[3].visible" key="deptName" label="部门" align="center" prop="deptName"
:show-overflow-tooltip="true"/>
<el-table-column v-if="columns[4].visible" key="phonenumber" label="手机号码" align="center"
prop="phonenumber" width="120"/>
<el-table-column v-if="columns[5].visible" key="status" label="状态" align="center">
<template #default="scope">
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
@change="handleStatusChange(scope.row)"></el-switch>
</template>
</el-table-column>
@ -117,18 +139,22 @@
<el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip v-if="scope.row.userId !== 1" content="修改" placement="top">
<el-button v-hasPermi="['system:user:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
<el-button v-hasPermi="['system:user:edit']" link type="primary" icon="Edit"
@click="handleUpdate(scope.row)"></el-button>
</el-tooltip>
<el-tooltip v-if="scope.row.userId !== 1" content="删除" placement="top">
<el-button v-hasPermi="['system:user:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
<el-button v-hasPermi="['system:user:remove']" link type="primary" icon="Delete"
@click="handleDelete(scope.row)"></el-button>
</el-tooltip>
<el-tooltip v-if="scope.row.userId !== 1" content="重置密码" placement="top">
<el-button v-hasPermi="['system:user:resetPwd']" link type="primary" icon="Key" @click="handleResetPwd(scope.row)"></el-button>
<el-button v-hasPermi="['system:user:resetPwd']" link type="primary" icon="Key"
@click="handleResetPwd(scope.row)"></el-button>
</el-tooltip>
<el-tooltip v-if="scope.row.userId !== 1" content="分配角色" placement="top">
<el-button v-hasPermi="['system:user:edit']" link type="primary" icon="CircleCheck" @click="handleAuthRole(scope.row)"></el-button>
<el-button v-hasPermi="['system:user:edit']" link type="primary" icon="CircleCheck"
@click="handleAuthRole(scope.row)"></el-button>
</el-tooltip>
</template>
</el-table-column>
@ -146,12 +172,13 @@
</el-row>
<!-- 添加或修改用户配置对话框 -->
<el-dialog ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="600px" append-to-body @close="closeDialog">
<el-dialog ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="600px" append-to-body
@close="closeDialog">
<el-form ref="userFormRef" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="用户昵称" prop="nickName">
<el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
<el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30"/>
</el-form-item>
</el-col>
<el-col :span="12" v-if="form.userId == null || form.userId != useUserStore().userId">
@ -171,24 +198,25 @@
<el-row>
<el-col :span="12">
<el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
<el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
<el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
<el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
<el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
<el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20"
show-password/>
</el-form-item>
</el-col>
</el-row>
@ -196,14 +224,18 @@
<el-col :span="12">
<el-form-item label="用户性别">
<el-select v-model="form.sex" placeholder="请选择">
<el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
<el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label"
:value="dict.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{
dict.label
}}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
@ -267,14 +299,19 @@
drag
>
<el-icon class="el-icon--upload">
<i-ep-upload-filled />
<i-ep-upload-filled/>
</el-icon>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<template #tip>
<div class="text-center el-upload__tip">
<div class="el-upload__tip"><el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据</div>
<div class="el-upload__tip">
<el-checkbox v-model="upload.updateSupport"/>
是否更新已经存在的用户数据
</div>
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
@click="importTemplate">下载模板
</el-link>
</div>
</template>
</el-upload>
@ -290,19 +327,19 @@
<script setup name="User" lang="ts">
import api from '@/api/system/user';
import { UserForm, UserQuery, UserVO } from '@/api/system/user/types';
import { DeptTreeVO, DeptVO } from '@/api/system/dept/types';
import { RoleVO } from '@/api/system/role/types';
import { PostVO } from '@/api/system/post/types';
import { globalHeaders } from '@/utils/request';
import { to } from 'await-to-js';
import { optionselect } from '@/api/system/post';
import { checkPermi } from '@/utils/permission';
import { useUserStore } from '@/store/modules/user';
import {UserForm, UserQuery, UserVO} from '@/api/system/user/types';
import {DeptTreeVO, DeptVO} from '@/api/system/dept/types';
import {RoleVO} from '@/api/system/role/types';
import {PostVO} from '@/api/system/post/types';
import {globalHeaders} from '@/utils/request';
import {to} from 'await-to-js';
import {optionselect} from '@/api/system/post';
import {checkPermi} from '@/utils/permission';
import {useUserStore} from '@/store/modules/user';
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_normal_disable, sys_user_sex } = toRefs<any>(proxy?.useDict('sys_normal_disable', 'sys_user_sex'));
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const {sys_normal_disable, sys_user_sex} = toRefs<any>(proxy?.useDict('sys_normal_disable', 'sys_user_sex'));
const userList = ref<UserVO[]>();
const loading = ref(true);
const showSearch = ref(true);
@ -334,16 +371,28 @@ const upload = reactive<ImportOption>({
});
// 列显隐信息
const columns = ref<FieldOption[]>([
{ key: 0, label: `用户编号`, visible: false, children: [] },
{ key: 1, label: `用户名称`, visible: true, children: [] },
{ key: 2, label: `用户昵称`, visible: true, children: [] },
{ key: 3, label: `部门`, visible: true, children: [] },
{ key: 4, label: `手机号码`, visible: true, children: [] },
{ key: 5, label: `状态`, visible: true, children: [] },
{ key: 6, label: `创建时间`, visible: true, children: [] }
{key: 0, label: `用户编号`, visible: false, children: []},
{key: 1, label: `用户名称`, visible: true, children: []},
{key: 2, label: `用户昵称`, visible: true, children: []},
{key: 3, label: `部门`, visible: true, children: []},
{key: 4, label: `手机号码`, visible: true, children: []},
{key: 5, label: `状态`, visible: true, children: []},
{key: 6, label: `创建时间`, visible: true, children: []}
]);
const deptTreeRef = ref<ElTreeInstance>();
const deptExpandedKeys = ref<(string | number)[]>([]);
/** 收集前 N 层节点的 id，用于默认展开 */
const collectExpandKeys = (nodes: DeptTreeVO[], currentLevel: number, maxLevel: number) => {
if (currentLevel > maxLevel) return;
for (const node of nodes) {
deptExpandedKeys.value.push(node.id);
if (node.children?.length) {
collectExpandKeys(node.children, currentLevel + 1, maxLevel);
}
}
};
const queryFormRef = ref<ElFormInstance>();
const userFormRef = ref<ElFormInstance>();
const uploadRef = ref<ElUploadInstance>();
@ -370,7 +419,7 @@ const initFormData: UserForm = {
};
const initData: PageData<UserForm, UserQuery> = {
form: { ...initFormData },
form: {...initFormData},
queryParams: {
pageNum: 1,
pageSize: 10,
@ -382,7 +431,7 @@ const initData: PageData<UserForm, UserQuery> = {
},
rules: {
userName: [
{ required: true, message: '用户名称不能为空', trigger: 'blur' },
{required: true, message: '用户名称不能为空', trigger: 'blur'},
{
min: 2,
max: 20,
@ -390,16 +439,16 @@ const initData: PageData<UserForm, UserQuery> = {
trigger: 'blur'
}
],
nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
nickName: [{required: true, message: '用户昵称不能为空', trigger: 'blur'}],
password: [
{ required: true, message: '用户密码不能为空', trigger: 'blur' },
{required: true, message: '用户密码不能为空', trigger: 'blur'},
{
min: 5,
max: 20,
message: '用户密码长度必须介于 5 和 20 之间',
trigger: 'blur'
},
{ pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符：< > " \' \\ |', trigger: 'blur' }
{pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符：< > " \' \\ |', trigger: 'blur'}
],
email: [
{
@ -415,12 +464,12 @@ const initData: PageData<UserForm, UserQuery> = {
trigger: 'blur'
}
],
roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }]
roleIds: [{required: true, message: '用户角色不能为空', trigger: 'blur'}]
}
};
const data = reactive<PageData<UserForm, UserQuery>>(initData);
const { queryParams, form, rules } = toRefs<PageData<UserForm, UserQuery>>(data);
const {queryParams, form, rules} = toRefs<PageData<UserForm, UserQuery>>(data);
/** 通过条件过滤节点 */
const filterNode = (value: string, data: any) => {
@ -451,6 +500,8 @@ const getDeptTree = async () => {
const res = await api.deptTreeSelect();
deptOptions.value = res.data;
enabledDeptOptions.value = filterDisabledDept(res.data);
deptExpandedKeys.value = [];
collectExpandKeys(res.data, 1, 2);
};
/** 过滤禁用的部门 */
@ -586,7 +637,7 @@ function submitFileForm() {
/** 重置操作表单 */
const reset = () => {
form.value = { ...initFormData };
form.value = {...initFormData};
userFormRef.value?.resetFields();
};
/** 取消按钮 */
@ -598,7 +649,7 @@ const cancel = () => {
/** 新增按钮操作 */
const handleAdd = async () => {
reset();
const { data } = await api.getUser();
const {data} = await api.getUser();
dialog.visible = true;
dialog.title = '新增用户';
postOptions.value = data.posts;
@ -610,7 +661,7 @@ const handleAdd = async () => {
const handleUpdate = async (row?: UserForm) => {
reset();
const userId = row?.userId || ids.value[0];
const { data } = await api.getUser(userId);
const {data} = await api.getUser(userId);
dialog.visible = true;
dialog.title = '修改用户';
Object.assign(form.value, data.user);

Write Preview
Loading…
Cancel
Save