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

fix: 页面问题修复

This commit is contained in:
haoxr 2022-11-08 23:17:36 +08:00
parent 574b969fdf
commit e451b67867
4 changed files with 102 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'dept', name: 'dept'
}; };
</script> </script>
@ -13,7 +13,7 @@ import {
updateDept, updateDept,
addDept, addDept,
listDeptOptions, listDeptOptions,
listDepartments, listDepartments
} from '@/api/dept'; } from '@/api/dept';
import { Search, Plus, Refresh, Delete } from '@element-plus/icons-vue'; import { Search, Plus, Refresh, Delete } from '@element-plus/icons-vue';
@ -34,15 +34,15 @@ const state = reactive({
queryParams: {} as DeptQuery, queryParams: {} as DeptQuery,
formData: { formData: {
sort: 1, sort: 1,
status: 1, status: 1
} as DeptForm, } as DeptForm,
rules: { rules: {
parentId: [ parentId: [
{ required: true, message: '上级部门不能为空', trigger: 'blur' }, { required: true, message: '上级部门不能为空', trigger: 'blur' }
], ],
name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }], name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }], sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }]
}, }
}); });
const { const {
@ -53,7 +53,7 @@ const {
queryParams, queryParams,
formData, formData,
rules, rules,
dialog, dialog
} = toRefs(state); } = toRefs(state);
/** /**
@ -84,11 +84,11 @@ function handleSelectionChange(selection: any) {
*/ */
async function getDeptOptions() { async function getDeptOptions() {
const deptOptions: any[] = []; const deptOptions: any[] = [];
listDeptOptions().then((response) => { listDeptOptions().then(response => {
const rootDeptOption = { const rootDeptOption = {
value: '0', value: '0',
label: '顶级部门', label: '顶级部门',
children: response.data, children: response.data
}; };
deptOptions.push(rootDeptOption); deptOptions.push(rootDeptOption);
state.deptOptions = deptOptions; state.deptOptions = deptOptions;
@ -104,7 +104,7 @@ function handleAdd(row: any) {
formData.value.parentId = row.id; formData.value.parentId = row.id;
dialog.value = { dialog.value = {
title: '添加部门', title: '添加部门',
visible: true, visible: true
}; };
} }
@ -116,7 +116,7 @@ async function handleUpdate(row: any) {
const deptId = row.id || state.ids; const deptId = row.id || state.ids;
state.dialog = { state.dialog = {
title: '修改部门', title: '修改部门',
visible: true, visible: true
}; };
getDeptForm(deptId).then((response: any) => { getDeptForm(deptId).then((response: any) => {
state.formData = response.data; state.formData = response.data;
@ -159,7 +159,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm(`确认删除已选中的数据项?`, '警告', { ElMessageBox.confirm(`确认删除已选中的数据项?`, '警告', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning'
}) })
.then(() => { .then(() => {
deleteDept(ids) deleteDept(ids)
@ -263,26 +263,14 @@ onMounted(() => {
<el-table-column label="操作" align="center" width="150"> <el-table-column label="操作" align="center" width="150">
<template #default="scope"> <template #default="scope">
<el-button <el-button type="primary" link @click.stop="handleAdd(scope.row)"
type="primary" >新增
link
@click.stop="handleUpdate(scope.row)"
>新增
</el-button> </el-button>
<el-button <el-button type="success" link @click.stop="handleUpdate(scope.row)"
type="success" >编辑
link
@click.stop="handleAdd(scope.row)"
>
修改
</el-button> </el-button>
<el-button type="danger" link @click.stop="handleDelete(scope.row)">
<el-button 删除
type="danger"
link
@click.stop="handleDelete(scope.row)"
>
删除
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>

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

@ -102,26 +102,21 @@
type="success" type="success"
link link
@click.stop="handleAdd(scope.row)" @click.stop="handleAdd(scope.row)"
v-if="scope.row.type == 'CATALOG' || scope.row.type == 'MENU'"
v-if="scope.row.type=='CATALOG' ||scope.row.type=='MENU'"
> >
新增 新增
</el-button> </el-button>
<el-button <el-button
type="primary" type="primary"
link link
@click.stop="handleUpdate(scope.row)" @click.stop="handleUpdate(scope.row)"
> >
修改 编辑
</el-button> </el-button>
<el-button <el-button type="danger" link @click.stop="handleDelete(scope.row)">
type="danger" 删除
link </el-button>
@click.stop="handleDelete(scope.row)"
>
删除
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -287,7 +282,7 @@ import {
listMenuOptions, listMenuOptions,
addMenu, addMenu,
deleteMenus, deleteMenus,
updateMenu, updateMenu
} from '@/api/menu'; } from '@/api/menu';
import SvgIcon from '@/components/SvgIcon/index.vue'; import SvgIcon from '@/components/SvgIcon/index.vue';
@ -315,7 +310,7 @@ const state = reactive({
visible: 1, visible: 1,
sort: 1, sort: 1,
component: undefined, component: undefined,
type: 'MENU', type: 'MENU'
} as MenuForm, } as MenuForm,
rules: { rules: {
parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }], parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }],
@ -323,8 +318,8 @@ const state = reactive({
type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }], type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }], path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
component: [ component: [
{ required: true, message: '请输入组件完整路径', trigger: 'blur' }, { required: true, message: '请输入组件完整路径', trigger: 'blur' }
], ]
}, },
menuOptions: [] as OptionType[], menuOptions: [] as OptionType[],
currentRow: undefined, currentRow: undefined,
@ -332,8 +327,8 @@ const state = reactive({
iconSelectVisible: false, iconSelectVisible: false,
cacheData: { cacheData: {
menuType: '', menuType: '',
menuPath: '', menuPath: ''
}, }
}); });
const { const {
@ -345,7 +340,7 @@ const {
rules, rules,
menuOptions, menuOptions,
iconSelectVisible, iconSelectVisible,
cacheData, cacheData
} = toRefs(state); } = toRefs(state);
/** /**
@ -394,7 +389,7 @@ async function handleAdd(row: any) {
await loadMenuData(); await loadMenuData();
dialog.value = { dialog.value = {
title: '添加菜单', title: '添加菜单',
visible: true, visible: true
}; };
if (row.id) { if (row.id) {
@ -421,7 +416,7 @@ async function handleUpdate(row: MenuForm) {
await loadMenuData(); await loadMenuData();
state.dialog = { state.dialog = {
title: '编辑菜单', title: '编辑菜单',
visible: true, visible: true
}; };
const id = row.id as string; const id = row.id as string;
getMenuDetail(id).then(({ data }) => { getMenuDetail(id).then(({ data }) => {
@ -475,7 +470,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', { ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning'
}) })
.then(() => { .then(() => {
deleteMenus(ids).then(() => { deleteMenus(ids).then(() => {

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'role', name: 'role'
}; };
</script> </script>
@ -13,7 +13,7 @@ import {
addRole, addRole,
deleteRoles, deleteRoles,
getRoleMenuIds, getRoleMenuIds,
updateRoleMenus, updateRoleMenus
} from '@/api/role'; } from '@/api/role';
import { listResources } from '@/api/menu'; import { listResources } from '@/api/menu';
@ -32,20 +32,20 @@ const state = reactive({
ids: [] as number[], ids: [] as number[],
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10
} as RoleQuery, } as RoleQuery,
roleList: [] as Role[], roleList: [] as Role[],
total: 0, total: 0,
dialog: { dialog: {
title: '', title: '',
visible: false, visible: false
} as DialogType, } as DialogType,
formData: {} as RoleForm, formData: {} as RoleForm,
rules: { rules: {
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }], name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }], code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
dataScope: [{ required: true, message: '请选择数据权限', trigger: 'blur' }], dataScope: [{ required: true, message: '请选择数据权限', trigger: 'blur' }],
status: [{ required: true, message: '请选择状态', trigger: 'blur' }], status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
}, },
menuDialogVisible: false, menuDialogVisible: false,
resourceOptions: [] as OptionType[], resourceOptions: [] as OptionType[],
@ -56,8 +56,8 @@ const state = reactive({
// 选中的角色 // 选中的角色
checkedRole: { checkedRole: {
id: '', id: '',
name: '', name: ''
}, }
}); });
const { const {
@ -71,7 +71,7 @@ const {
rules, rules,
menuDialogVisible, menuDialogVisible,
checkedRole, checkedRole,
resourceOptions, resourceOptions
} = toRefs(state); } = toRefs(state);
/** /**
@ -105,14 +105,14 @@ function handleRowClick(row: any) {
function handleAdd() { function handleAdd() {
dialog.value = { dialog.value = {
title: '添加角色', title: '添加角色',
visible: true, visible: true
}; };
} }
function handleUpdate(row: any) { function handleUpdate(row: any) {
dialog.value = { dialog.value = {
title: '修改角色', title: '修改角色',
visible: true, visible: true
}; };
const roleId = row.id || state.ids; const roleId = row.id || state.ids;
getRoleFormDetail(roleId).then(({ data }) => { getRoleFormDetail(roleId).then(({ data }) => {
@ -160,7 +160,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', { ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning'
}) })
.then(() => { .then(() => {
deleteRoles(ids).then(() => { deleteRoles(ids).then(() => {
@ -181,17 +181,17 @@ function showRoleMenuDialog(row: Role) {
const roleId: any = row.id; const roleId: any = row.id;
checkedRole.value = { checkedRole.value = {
id: roleId, id: roleId,
name: row.name, name: row.name
}; };
// 获取所有的资源 // 获取所有的资源
listResources().then((response) => { listResources().then(response => {
resourceOptions.value = response.data; resourceOptions.value = response.data;
// 角色拥有的资源 // 角色拥有的资源
getRoleMenuIds(roleId).then(({ data }) => { getRoleMenuIds(roleId).then(({ data }) => {
// 勾选回显 // 勾选回显
const checkedMenuIds = data; const checkedMenuIds = data;
checkedMenuIds.forEach((menuId) => checkedMenuIds.forEach(menuId =>
resourceRef.value.setChecked(menuId, true) resourceRef.value.setChecked(menuId, true)
); );
@ -207,7 +207,7 @@ function handleRoleResourceSubmit() {
.getCheckedNodes(false, true) .getCheckedNodes(false, true)
.map((node: any) => node.value); .map((node: any) => node.value);
updateRoleMenus(checkedRole.value.id, checkedMenuIds).then((res) => { updateRoleMenus(checkedRole.value.id, checkedMenuIds).then(res => {
ElMessage.success('分配权限成功'); ElMessage.success('分配权限成功');
menuDialogVisible.value = false; menuDialogVisible.value = false;
handleQuery(); handleQuery();
@ -286,7 +286,7 @@ onMounted(() => {
<el-table-column prop="createTime" label="创建时间" width="160" /> <el-table-column prop="createTime" label="创建时间" width="160" />
<el-table-column prop="updateTime" label="修改时间" width="160" /> <el-table-column prop="updateTime" label="修改时间" width="160" />
<el-table-column label="操作" align="left" > <el-table-column label="操作" align="left">
<template #default="scope"> <template #default="scope">
<el-button <el-button
type="success" type="success"
@ -301,7 +301,7 @@ onMounted(() => {
link link
@click.stop="handleUpdate(scope.row)" @click.stop="handleUpdate(scope.row)"
> >
修改 编辑
</el-button> </el-button>
<el-button type="danger" link @click.stop="handleDelete(scope.row)"> <el-button type="danger" link @click.stop="handleDelete(scope.row)">
删除 删除

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'user', name: 'user'
}; };
</script> </script>
@ -11,7 +11,7 @@ import {
watchEffect, watchEffect,
onMounted, onMounted,
getCurrentInstance, getCurrentInstance,
toRefs, toRefs
} from 'vue'; } from 'vue';
// api // api
@ -25,7 +25,7 @@ import {
updateUserPassword, updateUserPassword,
downloadTemplate, downloadTemplate,
exportUser, exportUser,
importUser, importUser
} from '@/api/user'; } from '@/api/user';
import { listDeptOptions } from '@/api/dept'; import { listDeptOptions } from '@/api/dept';
import { listRoleOptions } from '@/api/role'; import { listRoleOptions } from '@/api/role';
@ -35,7 +35,7 @@ import {
ElForm, ElForm,
ElMessageBox, ElMessageBox,
ElMessage, ElMessage,
UploadFile, UploadFile
} from 'element-plus'; } from 'element-plus';
import { import {
Search, Search,
@ -44,13 +44,13 @@ import {
Delete, Delete,
Download, Download,
Top, Top,
UploadFilled, UploadFilled
} from '@element-plus/icons-vue'; } from '@element-plus/icons-vue';
import { import {
UserForm, UserForm,
UserImportData, UserImportData,
UserQuery, UserQuery,
UserType, UserType
} from '@/api/user/types'; } from '@/api/user/types';
const deptTreeRef = ref(ElTree); // 部门树 const deptTreeRef = ref(ElTree); // 部门树
@ -69,7 +69,7 @@ const state = reactive({
total: 0, total: 0,
userList: [] as UserType[], userList: [] as UserType[],
dialog: { dialog: {
visible: false, visible: false
} as DialogType, } as DialogType,
deptName: undefined, deptName: undefined,
// 部门下拉项 // 部门下拉项
@ -79,16 +79,16 @@ const state = reactive({
// 角色下拉项 // 角色下拉项
roleOptions: [] as OptionType[], roleOptions: [] as OptionType[],
formData: { formData: {
status: 1, status: 1
} as UserForm, } as UserForm,
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10
} as UserQuery, } as UserQuery,
rules: { rules: {
username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }], username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
nickname: [ nickname: [
{ required: true, message: '用户昵称不能为空', trigger: 'blur' }, { required: true, message: '用户昵称不能为空', trigger: 'blur' }
], ],
deptId: [{ required: true, message: '所属部门不能为空', trigger: 'blur' }], deptId: [{ required: true, message: '所属部门不能为空', trigger: 'blur' }],
roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }], roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }],
@ -96,25 +96,25 @@ const state = reactive({
{ {
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/, pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
message: '请输入正确的邮箱地址', message: '请输入正确的邮箱地址',
trigger: 'blur', trigger: 'blur'
}, }
], ],
mobile: [ mobile: [
{ {
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: '请输入正确的手机号码', message: '请输入正确的手机号码',
trigger: 'blur', trigger: 'blur'
}, }
], ]
}, },
importDialog: { importDialog: {
title: '用户搭配', title: '用户导入',
visible: false, visible: false
} as DialogType, } as DialogType,
importFormData: {} as UserImportData, importFormData: {} as UserImportData,
excelFile: undefined as any, excelFile: undefined as any,
excelFilelist: [] as File[], excelFilelist: [] as File[]
}); });
const { const {
@ -131,7 +131,7 @@ const {
roleOptions, roleOptions,
importDialog, importDialog,
importFormData, importFormData,
excelFilelist, excelFilelist
} = toRefs(state); } = toRefs(state);
watchEffect( watchEffect(
@ -139,7 +139,7 @@ watchEffect(
deptTreeRef.value.filter(state.deptName); deptTreeRef.value.filter(state.deptName);
}, },
{ {
flush: 'post', // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行 flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
} }
); );
@ -165,7 +165,7 @@ function handleDeptNodeClick(data: { [key: string]: any }) {
* 获取角色下拉项 * 获取角色下拉项
*/ */
async function getRoleOptions() { async function getRoleOptions() {
listRoleOptions().then((response) => { listRoleOptions().then(response => {
state.roleOptions = response.data; state.roleOptions = response.data;
}); });
} }
@ -181,7 +181,7 @@ function handleStatusChange(row: { [key: string]: any }) {
{ {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning'
} }
) )
.then(() => { .then(() => {
@ -231,7 +231,7 @@ function resetPassword(row: { [key: string]: any }) {
'重置密码', '重置密码',
{ {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消'
} }
) )
.then(({ value }) => { .then(({ value }) => {
@ -252,7 +252,7 @@ function resetPassword(row: { [key: string]: any }) {
async function handleAdd() { async function handleAdd() {
state.dialog = { state.dialog = {
title: '添加用户', title: '添加用户',
visible: true, visible: true
}; };
await getDeptOptions(); await getDeptOptions();
await getRoleOptions(); await getRoleOptions();
@ -264,7 +264,7 @@ async function handleAdd() {
async function handleUpdate(row: { [key: string]: any }) { async function handleUpdate(row: { [key: string]: any }) {
dialog.value = { dialog.value = {
title: '修改用户', title: '修改用户',
visible: true, visible: true
}; };
const userId = row.id || state.ids; const userId = row.id || state.ids;
@ -310,7 +310,7 @@ function handleDelete(row: { [key: string]: any }) {
{ {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning'
} }
) )
.then(function () { .then(function () {
@ -335,7 +335,7 @@ function closeDialog() {
* 获取部门下拉项 * 获取部门下拉项
*/ */
async function getDeptOptions() { async function getDeptOptions() {
listDeptOptions().then((response) => { listDeptOptions().then(response => {
state.deptOptions = response.data; state.deptOptions = response.data;
}); });
} }
@ -355,7 +355,7 @@ function getGenderOptions() {
function handleDownloadTemplate() { function handleDownloadTemplate() {
downloadTemplate().then((response: any) => { downloadTemplate().then((response: any) => {
const blob = new Blob([response.data], { const blob = new Blob([response.data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8', type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
}); });
const a = document.createElement('a'); const a = document.createElement('a');
const href = window.URL.createObjectURL(blob); // 下载链接 const href = window.URL.createObjectURL(blob); // 下载链接
@ -407,7 +407,7 @@ function submitImportForm() {
const deptId = state.importFormData.deptId; const deptId = state.importFormData.deptId;
const roleIds = state.importFormData.roleIds.join(','); const roleIds = state.importFormData.roleIds.join(',');
importUser(deptId, roleIds, state.excelFile).then((response) => { importUser(deptId, roleIds, state.excelFile).then(response => {
ElMessage.success(response.data); ElMessage.success(response.data);
closeImportDialog(); closeImportDialog();
handleQuery(); handleQuery();
@ -432,7 +432,7 @@ function closeImportDialog() {
function handleExport() { function handleExport() {
exportUser(queryParams.value).then((response: any) => { exportUser(queryParams.value).then((response: any) => {
const blob = new Blob([response.data], { const blob = new Blob([response.data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8', type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
}); });
const a = document.createElement('a'); const a = document.createElement('a');
const href = window.URL.createObjectURL(blob); // 下载的链接 const href = window.URL.createObjectURL(blob); // 下载的链接
@ -580,11 +580,26 @@ onMounted(() => {
align="center" align="center"
prop="username" prop="username"
/> />
<el-table-column label="用户昵称" width="120" align="center" prop="nickname" /> <el-table-column
label="用户昵称"
width="120"
align="center"
prop="nickname"
/>
<el-table-column label="性别" width="100" align="center" prop="genderLabel" /> <el-table-column
label="性别"
width="100"
align="center"
prop="genderLabel"
/>
<el-table-column label="部门" width="120" align="center" prop="deptName" /> <el-table-column
label="部门"
width="120"
align="center"
prop="deptName"
/>
<el-table-column <el-table-column
label="手机号码" label="手机号码"
align="center" align="center"
@ -618,7 +633,7 @@ onMounted(() => {
link link
@click="handleUpdate(scope.row)" @click="handleUpdate(scope.row)"
v-hasPerm="['sys:user:edit']" v-hasPerm="['sys:user:edit']"
>修改</el-button >编辑</el-button
> >
<el-button <el-button
type="danger" type="danger"