huangqizhen
/
gold-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

权限修改ack

zhangyong/feature-20250815160302-金币优化
lhl 2 months ago
parent
a26fb62511
commit
3ce64b2d89
1 changed files with 199 additions and 188 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. 387
      src/views/permissions/userPermission.vue

387
src/views/permissions/userPermission.vue
View File

@ -1,7 +1,7 @@
<script setup>
import {computed, onMounted, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {InfoFilled} from '@element-plus/icons-vue'
import { computed, onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'
import _ from 'lodash'
import request from '@/util/http'
import API from '@/util/http'
@ -26,27 +26,37 @@ const getObj = ref({
pageNum: 1,
pageSize: 10
})
// 修改状态确认
const ackVisible = ref(false)
const currentStatusRow = ref(null)
const statusLoading = ref({})
const showStatusConfirm = (row, targetStatus) => {
currentStatusRow.value = {
...row,// 当前行数据
targetStatus// 目标状态
}
ackVisible.value = true
}
// 规则
const addUserRules = {
account: [
{required: true, message: '请输入OA号', trigger: 'blur'},
{pattern: /^\d+$/, message: 'OA号必须为数字', trigger: 'blur'},
{max: 20, message: '长度不能超过20位', trigger: 'blur'}
{ required: true, message: '请输入OA号', trigger: 'blur' },
{ pattern: /^\d+$/, message: 'OA号必须为数字', trigger: 'blur' },
{ max: 20, message: '长度不能超过20位', trigger: 'blur' }
],
name: [
{required: true, message: '请输入用户名', trigger: 'blur'},
{max: 20, message: '长度不能超过20位', trigger: 'blur'}
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ max: 20, message: '长度不能超过20位', trigger: 'blur' }
],
market: [
{required: true, message: '请选择所属地区', trigger: 'change'}
{ required: true, message: '请选择所属地区', trigger: 'change' }
],
permission: [
{required: true, message: '请选择角色名称', trigger: 'change'}
{ required: true, message: '请选择角色名称', trigger: 'change' }
],
postiton: [
{required: true, message: '请输入职位', trigger: 'blur'},
{max: 20, message: '长度不能超过20位', trigger: 'blur'}
{ required: true, message: '请输入职位', trigger: 'blur' },
{ max: 20, message: '长度不能超过20位', trigger: 'blur' }
],
machineIds: [
{
@ -93,7 +103,7 @@ const adminData = ref({})
// todo 之后优化掉
const getAdminData = async function () {
try {
const result = await API({url: '/admin/userinfo', data: {}})
const result = await API({ url: '/admin/userinfo', data: {} })
adminData.value = result
// console.log('请求成功', result)
console.log('管理员用户信息', adminData.value)
@ -214,8 +224,8 @@ const getArea = async function () {
return allChildren.map(child => {
const grandchildren = child.children && child.children.length
? transformTree([child]) // 递归处理子节点
: null;
? transformTree([child]) // 递归处理子节点
: null;
return {
value: child.name,
@ -320,7 +330,7 @@ const permissionList = ref([])
const getRoles = async function () {
try {
const res = await API({url: '/role/selectAll'})
const res = await API({ url: '/role/selectAll' })
permissionList.value = res.data.map(item => ({
label: item.roleName,
value: item.id
@ -436,7 +446,7 @@ const getUserLists = async function (selectedRoleId) {
parentRoleTip.value = '';
const parentRes = await request({
url: '/role/selectFather',
data: {id: selectedRoleId} // 用选中的角色ID请求
data: { id: selectedRoleId } // 用选中的角色ID请求
});
const parentId = parentRes.data.fatherId;
const parentName = parentRes.data.parentName;
@ -454,7 +464,7 @@ const getUserLists = async function (selectedRoleId) {
// }
const res = await API({
url: '/menu/tree',
data: {id: roleId}
data: { id: roleId }
})
data.value = processTreeData(res.data)
permissionEditObj.value.checkedKeys = collectIds(res.data) || [];
@ -469,11 +479,11 @@ const getUserLists = async function (selectedRoleId) {
//编辑用户表单校验
const editAdminRules = {
market: [
{required: true, message: '请选择所属地区', trigger: 'change'}
{ required: true, message: '请选择所属地区', trigger: 'change' }
],
postiton: [
{required: true, message: '请输入职位', trigger: ['blur', 'change']},
{max: 20, message: '长度不能超过20位', trigger: ['blur', 'change']}
{ required: true, message: '请输入职位', trigger: ['blur', 'change'] },
{ max: 20, message: '长度不能超过20位', trigger: ['blur', 'change'] }
],
machineIds: [
{
@ -494,7 +504,7 @@ const editAdminRules = {
};
// 编辑用户权限提交
const permissionEdit = async function () {
let {adminName: userName, roleName: oldRole, roleId: newRoleId} = permissionEditObj.value;
let { adminName: userName, roleName: oldRole, roleId: newRoleId } = permissionEditObj.value;
if (oldRole == null) {
oldRole = '暂未分配角色'
}
@ -510,15 +520,15 @@ const permissionEdit = async function () {
});
});
await ElMessageBox.confirm(
`确认修改权限角色？<br>您正在将【${userName}】的权限角色从【${oldRole}】修改为【${newRole}】<br>变更后，该用户的可操作权限将同步更新为新角色配置，涉及数据访问、功能操作等权限变化，请谨慎确认。`,
'警告',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: "warning",
lockScroll: false,
dangerouslyUseHTMLString: true //允许解析 HTML 标签
}
`确认修改权限角色？<br>您正在将【${userName}】的权限角色从【${oldRole}】修改为【${newRole}】<br>变更后，该用户的可操作权限将同步更新为新角色配置，涉及数据访问、功能操作等权限变化，请谨慎确认。`,
'警告',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: "warning",
lockScroll: false,
dangerouslyUseHTMLString: true //允许解析 HTML 标签
}
)
const result = await request({
url: '/permission/updateAdmin',
@ -537,12 +547,12 @@ const permissionEdit = async function () {
console.log('编辑最后提交数据', permissionEditObj.value);
if (result.code === 200) {
await ElMessageBox.alert(
`用户${userName}的权限角色已更改为【${newRole}】`,
'成功',
{
confirmButtonText: '确定',
type: 'success' // 设置为 success 类型
}
`用户${userName}的权限角色已更改为【${newRole}】`,
'成功',
{
confirmButtonText: '确定',
type: 'success' // 设置为 success 类型
}
);
getPermission();
closeUserEditVisible();
@ -584,13 +594,16 @@ const delConfirm = async function () {
}
// 禁用启用用户权限
const editStatus = async function (row) {
const { id, account, targetStatus, ...restRow } = currentStatusRow.value
try {
console.log(row)
statusLoading.value[id] = true
console.log(row)
permissionEditObj.value = {}
permissionEditObj.value.id = row.id
permissionEditObj.value.account = row.account
permissionEditObj.value.adminStatus = row.adminStatus
permissionEditObj.value.id = id
permissionEditObj.value.account = account
permissionEditObj.value.adminStatus = targetStatus
console.log('修改用户权限状态', permissionEditObj.value)
const result = await request({
@ -598,9 +611,12 @@ const editStatus = async function (row) {
data: permissionEditObj.value
})
console.log('请求成功2', result)
ElMessage.success(
if (result.code === 200) {
ElMessage.success(
permissionEditObj.value.adminStatus === 1 ? '启用成功' : '禁用成功'
)
)
statusLoading.value[id] = false
}
permissionEditObj.value = {}
getPermission()
} catch (error) {
@ -652,8 +668,8 @@ const handleMarketChangeAddUser = (value) => {
if (Array.isArray(value) && value.length > 0) {
// 提取所有选中项的最后一级
const selectedMarkets = value
.map(path => Array.isArray(path) && path.length > 0 ? path[path.length - 1] : null)
.filter(Boolean);
.map(path => Array.isArray(path) && path.length > 0 ? path[path.length - 1] : null)
.filter(Boolean);
// 检查是否包含总部
const hasHeadquarters = selectedMarkets.includes('总部');
@ -676,8 +692,8 @@ const handleMarketChangeEditUser = (value) => {
if (Array.isArray(value) && value.length > 0) {
// 提取所有选中项的最后一级
const selectedMarkets = value
.map(path => Array.isArray(path) && path.length > 0 ? path[path.length - 1] : null)
.filter(Boolean);
.map(path => Array.isArray(path) && path.length > 0 ? path[path.length - 1] : null)
.filter(Boolean);
// 检查是否包含总部
const hasHeadquarters = selectedMarkets.includes('总部');
@ -881,158 +897,142 @@ onMounted(async function () {
<template>
<div>
<el-card style="margin-bottom: 20px;margin-top:10px">
<div class="head-card">
<div class="head-card-element">
<el-text class="mx-1" size="large">OA号：</el-text>
<el-input v-model="admin.account" style="width: 240px" placeholder="请输入OA号" clearable/>
</div>
<div class="head-card-element" style="margin-left: 50px">
<el-text class="mx-1" size="large">所属地区：</el-text>
<el-cascader
v-model="admin.market"
:options="marketsTree"
placeholder="请选择所属地区"
clearable
style="width:180px"
@change="handleMarketChange"
/>
<el-card style="margin-bottom: 20px;margin-top:10px">
<div class="head-card">
<div class="head-card-element">
<el-text class="mx-1" size="large">OA号：</el-text>
<el-input v-model="admin.account" style="width: 240px" placeholder="请输入OA号" clearable />
</div>
<div class="head-card-element" style="margin-left: 50px">
<el-text class="mx-1" size="large">所属地区：</el-text>
<el-cascader v-model="admin.market" :options="marketsTree" placeholder="请选择所属地区" clearable style="width:180px"
@change="handleMarketChange" />
</div>
<div class="head-card-element" style="margin-left: 50px">
<el-text class="mx-1" size="large">职位名称：</el-text>
<el-select v-model="admin.postiton" placeholder="请选择职位名称" style="width: 240px" clearable>
<el-option v-for="item in postiton" :key="item" :label="item" :value="item"/>
</el-select>
</div>
</div>
<div class="head-card-element" style="margin-left: 50px">
<el-text class="mx-1" size="large">职位名称：</el-text>
<el-select v-model="admin.postiton" placeholder="请选择职位名称" style="width: 240px" clearable>
<el-option v-for="item in postiton" :key="item" :label="item" :value="item" />
</el-select>
</div>
<div class="head-card-btn">
<el-button type="success" @click="reset()">重置</el-button>
<el-button type="primary" @click="search()">查询</el-button>
</div>
</div>
</el-card>
<el-card>
<!-- 展示表单 -->
<div class="add-item">
<el-button style="color: #048efb; border: 1px solid #048efb" @click="userAddInit()">新增用户</el-button>
</div>
<div class="head-card-btn">
<el-button type="success" @click="reset()">重置</el-button>
<el-button type="primary" @click="search()">查询</el-button>
</div>
</div>
</el-card>
<el-card>
<!-- 展示表单 -->
<div class="add-item">
<el-button style="color: #048efb; border: 1px solid #048efb" @click="userAddInit()">新增用户</el-button>
</div>
<div>
<el-table :data="tableData" style="width: 100%" show-overflow-tooltip>
<el-table-column type="index" label="序号" width="100px" fixed="left">
<template #default="scope">
<span>{{
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
}}</span>
</template>
</el-table-column>
<el-table-column prop="account" label="OA号"/>
<el-table-column prop="name" label="姓名"/>
<el-table-column prop="market" label="所属地区"/>
<el-table-column prop="postiton" label="职位"/>
<el-table-column prop="roleName" label="部门权限">
</el-table-column>
<el-table-column prop="remark" label="备注"/>
<el-table-column prop="operation" label="操作" width="280px">
<template #default="scope">
<el-button type="warning" text @click="resetPassword(scope.row)">
重置密码
<div>
<el-table :data="tableData" style="width: 100%" show-overflow-tooltip>
<el-table-column type="index" label="序号" width="100px" fixed="left">
<template #default="scope">
<span>{{
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
}}</span>
</template>
</el-table-column>
<el-table-column prop="account" label="OA号" />
<el-table-column prop="name" label="姓名" />
<el-table-column prop="market" label="所属地区" />
<el-table-column prop="postiton" label="职位" />
<el-table-column prop="roleName" label="部门权限">
</el-table-column>
<el-table-column prop="remark" label="备注" />
<el-table-column prop="operation" label="操作" width="280px">
<template #default="scope">
<el-button type="warning" text @click="resetPassword(scope.row)">
重置密码
</el-button>
<el-button type="primary" text @click="permissionEditInit(scope.row)"
:disabled="scope.row.adminStatus === 0 || scope.row.account === adminData.account">
修改权限
</el-button>
<el-popconfirm title="确定将此用户删除吗？" @confirm="delConfirm">
<template #reference>
<el-button type="danger" text @click="del(scope.row)"
:disabled="scope.row.adminStatus === 0 || scope.row.account === adminData.account">
删除
</el-button>
<el-button type="primary" text @click="permissionEditInit(scope.row)"
:disabled="scope.row.adminStatus === 0 || scope.row.account === adminData.account">
修改权限
</template>
<template #actions="{ confirm, cancel }">
<el-button size="small" @click="cancel">取消</el-button>
<el-button type="primary" size="small" @click="confirm">
确定
</el-button>
<el-popconfirm title="确定将此用户删除吗？" @confirm="delConfirm">
<template #reference>
<el-button type="danger" text @click="del(scope.row)"
:disabled="scope.row.adminStatus === 0 || scope.row.account === adminData.account">
删除
</el-button>
</template>
<template #actions="{ confirm, cancel }">
<el-button size="small" @click="cancel">取消</el-button>
<el-button type="primary" size="small" @click="confirm">
确定
</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
<el-table-column prop="adminStatus" label="状态">
<template #default="scope">
<el-switch v-model="scope.row.adminStatus" :active-value="1" :inactive-value="0" size="large"
:disabled="scope.row.account === adminData.account" @change="editStatus(scope.row)" style="
</el-popconfirm>
</template>
</el-table-column>
<el-table-column prop="adminStatus" label="状态">
<template #default="scope">
<el-switch :model-value="scope.row.adminStatus" :active-value="1" :inactive-value="0" size="large"
:disabled="scope.row.account === adminData.account || statusLoading[scope.row.id]"
@change="(targetStatus) => showStatusConfirm(scope.row, targetStatus)" style="
--el-switch-on-color: #13ce66;
--el-switch-off-color: #ff4949;
" active-text="启用" inactive-text="禁用" inline-prompt/>
</template>
</el-table-column>
</el-table>
</div>
" active-text="启用" inactive-text="禁用" inline-prompt />
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="pagination" style="margin-top: 20px">
<el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper" :total="total"
@size-change="handlePageSizeChange"
@current-change="handleCurrentChange"></el-pagination>
</div>
</el-card>
<!-- 分页 -->
<div class="pagination" style="margin-top: 20px">
<el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
@current-change="handleCurrentChange"></el-pagination>
</div>
</el-card>
</div>
<!-- 新增用户权限 -->
<el-dialog v-model="userAddVisible" title="新增用户权限" width="800px" :close-on-click-modal="false"
@close="handleDialogClose">
@close="handleDialogClose">
<template #footer>
<el-form ref="Ref" :rules="addUserRules" :model="addAdmin" label-width="auto"
style="max-width: 600px; align-items: center">
style="max-width: 600px; align-items: center">
<el-form-item prop="account" label="OA号:" required clearable>
<el-input v-model="addAdmin.account" placeholder="请输入OA号" style="width: 220px"/>
<el-input v-model="addAdmin.account" placeholder="请输入OA号" style="width: 220px" />
</el-form-item>
<el-form-item prop="name" label="用户名:" required clearable>
<el-input v-model="addAdmin.name" placeholder="请输入用户名" style="width: 220px"/>
<el-input v-model="addAdmin.name" placeholder="请输入用户名" style="width: 220px" />
</el-form-item>
<el-form-item prop="market" label="所属地区:" required clearable>
<el-cascader
v-model="addAdmin.market"
:options="marketsTree"
placeholder="请选择所属地区"
clearable
collapse-tags
collapse-tags-tooltip
style="width:220px"
@change="handleMarketChangeAddUser"
:max-collapse-tags="2"
:props="addUserProps"
/>
<el-cascader v-model="addAdmin.market" :options="marketsTree" placeholder="请选择所属地区" clearable collapse-tags
collapse-tags-tooltip style="width:220px" @change="handleMarketChangeAddUser" :max-collapse-tags="2"
:props="addUserProps" />
</el-form-item>
<el-form-item prop="permission" label="角色名称:" required>
<el-select v-model="addAdmin.permission" placeholder="请选择角色名称" style="width: 220px" clearable>
<el-option v-for="item in permissionList" :key="item.value" :label="item.label"
:value="item.value"></el-option>
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="postiton" label="职位:" required>
<el-input v-model="addAdmin.postiton" placeholder="请输入职位" style="width: 220px" clearable/>
<el-input v-model="addAdmin.postiton" placeholder="请输入职位" style="width: 220px" clearable />
</el-form-item>
<el-form-item prop="machineIds" label="机器码:" required>
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 10px;">
<!-- 动态添加的机器码输入框 -->
<div v-for="(item, index) in addAdmin.machineIds" :key="index">
<el-input v-model="addAdmin.machineIds[index]" placeholder="请输入机器码"
style="width: 220px; margin-right: 10px;"/>
style="width: 220px; margin-right: 10px;" />
</div>
<el-button type="primary" @click="addMachineIdInput">添加</el-button>
</div>
</el-form-item>
<el-form-item prop="remark" label="备注">
<el-input v-model="addAdmin.remark" style="width: 300px" :rows="2" maxlength="100" show-word-limit
type="textarea"/>
type="textarea" />
</el-form-item>
</el-form>
@ -1048,50 +1048,38 @@ onMounted(async function () {
<!-- 这是编辑用户权限弹窗 -->
<el-dialog v-model="userEditVisible" title="编辑用户权限" width="800px" :close-on-click-modal="false">
<el-form ref="Ref" :rules="editAdminRules" :model="permissionEditObj" label-width="auto"
style="max-width: 600px; align-items: center">
style="max-width: 600px; align-items: center">
<el-form-item prop="account" label="用户账号:" clearable>
<el-input v-model="permissionEditObj.account" placeholder="请输入OA号" style="width: 220px" disabled/>
<el-input v-model="permissionEditObj.account" placeholder="请输入OA号" style="width: 220px" disabled />
</el-form-item>
<el-form-item prop="name" label="用户名称:">
<el-input v-model="permissionEditObj.adminName" placeholder="请输入用户名" style="width: 220px" disabled/>
<el-input v-model="permissionEditObj.adminName" placeholder="请输入用户名" style="width: 220px" disabled />
</el-form-item>
<el-form-item prop="market" label="所属地区:" clearable>
<el-cascader
v-model="permissionEditObj.market"
:options="marketsTree"
placeholder="请选择所属地区"
clearable
collapse-tags
collapse-tags-tooltip
style="width:220px"
@change="handleMarketChangeEditUser"
:max-collapse-tags="2"
:props="editUserProps"
/>
<el-cascader v-model="permissionEditObj.market" :options="marketsTree" placeholder="请选择所属地区" clearable
collapse-tags collapse-tags-tooltip style="width:220px" @change="handleMarketChangeEditUser"
:max-collapse-tags="2" :props="editUserProps" />
</el-form-item>
<el-form-item prop="postiton" label="职位:">
<el-input v-model="permissionEditObj.postiton" placeholder="请输入职位" style="width: 220px" clearable/>
<el-input v-model="permissionEditObj.postiton" placeholder="请输入职位" style="width: 220px" clearable />
</el-form-item>
<el-form-item prop="roleName" label="角色名称:">
<el-select v-model="permissionEditObj.roleId" placeholder="请选择角色" style="width: 220px"
@change="getUserLists">
<el-select v-model="permissionEditObj.roleId" placeholder="请选择角色" style="width: 220px" @change="getUserLists">
<el-option v-for="item in permissionList" :key="item.value" :label="item.label"
:value="item.value"></el-option>
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="parentName" label="上级角色:">
<el-select v-model="permissionEditObj.parentId" placeholder="无上级角色" :disabled="!!parentRoleTip"
style="width: 220px">
<el-option v-if="parentRoleTip" :key="0" :label="parentRoleTip" :value="null" disabled/>
style="width: 220px">
<el-option v-if="parentRoleTip" :key="0" :label="parentRoleTip" :value="null" disabled />
<el-option v-else v-for="item in permissionList" :key="item.value" :label="item.label" disabled
:value="item.value"></el-option>
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="permissionSelect" label="权限列表:">
<el-tree v-if="data.length > 0" :data="data" :disabled="true" show-checkbox node-key="id"
:props="{ label: 'menuName', children: 'children' }"
:default-checked-keys="permissionEditObj.checkedKeys">
:props="{ label: 'menuName', children: 'children' }" :default-checked-keys="permissionEditObj.checkedKeys">
</el-tree>
<div v-else style="display: flex; align-items: center; gap: 8px;">
<span style="color: #999;">暂无数据</span>
@ -1102,7 +1090,7 @@ onMounted(async function () {
<!-- 动态添加的机器码输入框 -->
<div v-for="(item, index) in permissionEditObj.machineIds" :key="index">
<el-input v-model="permissionEditObj.machineIds[index]" placeholder=""
style="width: 220px; margin-right: 10px;"/>
style="width: 220px; margin-right: 10px;" />
</div>
<el-button type="primary" @click="UseraddMachineIdInput">添加</el-button>
</div>
@ -1122,11 +1110,11 @@ onMounted(async function () {
<!-- 重置密码确认弹窗 -->
<el-dialog v-model="resetConfirmVisible" width="500px" :close-on-click-modal="false"
:before-close="cancelResetPassword">
:before-close="cancelResetPassword">
<el-row>
<el-col :span="4" style="margin-top: 20px">
<el-icon class="dialog-icon" color="#10AEFF" size="50">
<InfoFilled/>
<InfoFilled />
</el-icon>
</el-col>
<el-col :span="20">
@ -1143,7 +1131,30 @@ onMounted(async function () {
</template>
</el-dialog>
<el-dialog v-model="ackVisible" :title="currentStatusRow?.adminStatus === 1 ? '确认禁用' : '确认启用'" width="300px"
:close-on-click-modal="false"
@close="() => { if (currentStatusRow) currentStatusRow.adminStatus = currentStatusRow.adminStatus === 1 ? 0 : 1 }">
<div class="status-confirm-content">
确定要{{ currentStatusRow?.adminStatus === 1 ? '禁用' : '启用' }}该用户吗？
<br>
</div>
<template #footer>
<div style="display: flex;">
<el-button @click="() => {
currentStatusRow.adminStatus = currentStatusRow.adminStatus === 1 ? 0 : 1
ackVisible = false
}">
取消
</el-button>
<el-button type="primary" @click="() => {
editStatus(currentStatusRow)
ackVisible = false
}">
确认
</el-button>
</div>
</template>
</el-dialog>
</template>
<style scoped>

Write Preview
Loading…
Cancel
Save