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

style: 禁用的弹窗

zhangyong/milestone-20250913-现金管理
lihui 2 months ago
parent
b3d8a36a81
commit
b1d3afffcc
2 changed files with 234 additions and 102 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. 108
      src/assets/SvgIcons/背景.svg
  2. 228
      src/views/permissions/userPermission.vue

108
src/assets/SvgIcons/背景.svg
File diff suppressed because it is too large
View File

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

@ -1,15 +1,16 @@
<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'
import { useAdminStore } from "@/store/index.js"
import { storeToRefs } from "pinia"
import { findMenuById, permissionMapping } from "@/utils/menuTreePermission.js"
import {useAdminStore} from "@/store/index.js"
import {storeToRefs} from "pinia"
import {findMenuById, permissionMapping} from "@/utils/menuTreePermission.js"
const adminStore = useAdminStore()
const { adminData, menuTree } = storeToRefs(adminStore)
const {adminData, menuTree} = storeToRefs(adminStore)
// 表格数据
const tableData = ref([])
@ -46,23 +47,23 @@ const showStatusConfirm = (row, targetStatus) => {
// 规则
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: [
{
@ -215,8 +216,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,
@ -324,7 +325,7 @@ const Ref = ref(null)
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
@ -438,7 +439,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;
@ -456,7 +457,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) || [];
@ -471,11 +472,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: [
{
@ -500,7 +501,7 @@ const permissionEdit = async function () {
ElMessage.error('无此权限')
return
}
let { adminName: userName, roleName: oldRole, roleId: newRoleId } = permissionEditObj.value;
let {adminName: userName, roleName: oldRole, roleId: newRoleId} = permissionEditObj.value;
if (oldRole == null) {
oldRole = '暂未分配角色'
}
@ -516,15 +517,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',
@ -543,12 +544,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();
@ -598,7 +599,7 @@ const editStatus = async function (row) {
ElMessage.error('无此权限')
return
}
const { id, account, targetStatus, ...restRow } = currentStatusRow.value
const {id, account, targetStatus, ...restRow} = currentStatusRow.value
try {
statusLoading.value[id] = true
@ -617,7 +618,7 @@ const editStatus = async function (row) {
console.log('请求成功2', result)
if (result.code === 200) {
ElMessage.success(
permissionEditObj.value.adminStatus === 1 ? '启用成功' : '禁用成功'
permissionEditObj.value.adminStatus === 1 ? '启用成功' : '禁用成功'
)
statusLoading.value[id] = false
}
@ -672,8 +673,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('总部');
@ -696,8 +697,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('总部');
@ -905,7 +906,7 @@ onMounted(async function () {
await getRoles()
await getRoleArea()
console.log('看看权限', canAdd, canEdit, canReset, canDel, change)
})
})
</script>
<template>
@ -914,18 +915,19 @@ onMounted(async function () {
<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 />
<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-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-option v-for="item in postiton" :key="item" :label="item" :value="item"/>
</el-select>
</div>
@ -938,7 +940,9 @@ onMounted(async function () {
<el-card class="card2">
<!-- 展示表单 -->
<div class="add-item">
<el-button style="color: #048efb; border: 1px solid #048efb" :disabled="!canAdd" v-if="canAdd" @click="userAddInit()">新增用户</el-button>
<el-button style="color: #048efb; border: 1px solid #048efb" :disabled="!canAdd" v-if="canAdd"
@click="userAddInit()">新增用户
</el-button>
</div>
<div>
@ -946,31 +950,31 @@ onMounted(async function () {
<el-table-column type="index" label="序号" width="100px" fixed="left">
<template #default="scope">
<span>{{
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
}}</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="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="remark" label="备注"/>
<el-table-column prop="operation" label="操作" width="280px">
<template #default="scope">
<el-button type="warning" text :disabled="!canReset" @click="resetPassword(scope.row)" v-if="canReset">
重置密码
</el-button>
<el-button type="primary" text @click="permissionEditInit(scope.row)" v-if="canEdit"
:disabled="!canEdit || scope.row.adminStatus === 0 || scope.row.account === adminData.account">
:disabled="!canEdit || 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)" v-if="canDel"
:disabled="!canDel ||scope.row.adminStatus === 0 || scope.row.account === adminData.account">
:disabled="!canDel ||scope.row.adminStatus === 0 || scope.row.account === adminData.account">
删除
</el-button>
</template>
@ -985,19 +989,21 @@ onMounted(async function () {
</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" v-if="change"
:disabled="!change || scope.row.account === adminData.account || statusLoading[scope.row.id]"
@change="(targetStatus) => showStatusConfirm(scope.row, targetStatus)" style="
<el-switch :model-value="scope.row.adminStatus" :active-value="1" :inactive-value="0" size="large"
v-if="change"
:disabled="!change || 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 />
" active-text="启用" inactive-text="禁用" inline-prompt/>
</template>
</el-table-column>
</el-table>
<div class="pagination" style="margin-top: 1vh;">
<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>
layout="total, sizes, prev, pager, next, jumper" :total="total"
@size-change="handlePageSizeChange"
@current-change="handleCurrentChange"></el-pagination>
</div>
</div>
</el-card>
@ -1005,45 +1011,47 @@ onMounted(async function () {
<!-- 新增用户权限 -->
<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>
@ -1059,38 +1067,40 @@ 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" />
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>
@ -1101,7 +1111,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>
@ -1121,11 +1131,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">
@ -1142,22 +1152,29 @@ 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 ? '禁用' : '启用' }}该用户吗？
<el-dialog v-model="ackVisible" width="700px"
:close-on-click-modal="false"
:style="{
backgroundImage: 'url(/src/assets/SvgIcons/背景.svg',
backgroundSize: 'cover',
backgroundPosition: 'center',
height:'400px'
}"
@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="() => {
<div style="display: flex; justify-content: center; gap: 10px;">
<el-button round size="large" @click="() => {
currentStatusRow.adminStatus = currentStatusRow.adminStatus === 1 ? 0 : 1
ackVisible = false
}">
取消
</el-button>
<el-button type="primary" @click="() => {
<el-button round size="large" type="primary" @click="() => {
editStatus(currentStatusRow)
ackVisible = false
}">
@ -1185,7 +1202,7 @@ onMounted(async function () {
:deep(.el-table__header-wrapper),
:deep(.el-table__body-wrapper),
:deep(.el-table__cell),
/* 表格 */
/* 表格 */
:deep(.el-table__body td) {
background-color: #F3FAFE !important;
}
@ -1216,4 +1233,11 @@ onMounted(async function () {
.head-card-btn {
margin-left: auto;
}
.status-confirm-content {
text-align: center;
margin-top: 160px;
margin-bottom: 30px;
font-size: 48px;
}
</style>
Write Preview
Loading…
Cancel
Save