|
|
|
@ -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) |
|
|
|
@ -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 = '暂未分配角色' |
|
|
|
} |
|
|
|
@ -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) |
|
|
|
if (result.code === 200) { |
|
|
|
ElMessage.success( |
|
|
|
permissionEditObj.value.adminStatus === 1 ? '启用成功' : '禁用成功' |
|
|
|
) |
|
|
|
statusLoading.value[id] = false |
|
|
|
} |
|
|
|
permissionEditObj.value = {} |
|
|
|
getPermission() |
|
|
|
} catch (error) { |
|
|
|
@ -881,28 +897,22 @@ onMounted(async function () { |
|
|
|
|
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<el-card style="margin-bottom: 20px;margin-top:10px"> |
|
|
|
<el-card style="margin-bottom: 1vh;"> |
|
|
|
<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> |
|
|
|
|
|
|
|
@ -919,7 +929,7 @@ onMounted(async function () { |
|
|
|
</div> |
|
|
|
|
|
|
|
<div> |
|
|
|
<el-table :data="tableData" style="width: 100%" show-overflow-tooltip> |
|
|
|
<el-table :data="tableData" style="width: 82vw;height:60vh" show-overflow-tooltip> |
|
|
|
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
|
|
|
<template #default="scope"> |
|
|
|
<span>{{ |
|
|
|
@ -928,13 +938,13 @@ onMounted(async function () { |
|
|
|
</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 @click="resetPassword(scope.row)"> |
|
|
|
@ -962,23 +972,21 @@ onMounted(async function () { |
|
|
|
</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-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/> |
|
|
|
" active-text="启用" inactive-text="禁用" inline-prompt /> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 分页 --> |
|
|
|
<div class="pagination" style="margin-top: 20px"> |
|
|
|
<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" |
|
|
|
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange" |
|
|
|
@current-change="handleCurrentChange"></el-pagination> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</div> |
|
|
|
|
|
|
|
@ -989,27 +997,17 @@ onMounted(async function () { |
|
|
|
<el-form ref="Ref" :rules="addUserRules" :model="addAdmin" label-width="auto" |
|
|
|
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> |
|
|
|
@ -1018,21 +1016,21 @@ onMounted(async function () { |
|
|
|
</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> |
|
|
|
|
|
|
|
@ -1050,32 +1048,21 @@ onMounted(async function () { |
|
|
|
<el-form ref="Ref" :rules="editAdminRules" :model="permissionEditObj" label-width="auto" |
|
|
|
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> |
|
|
|
</el-select> |
|
|
|
@ -1083,15 +1070,14 @@ onMounted(async function () { |
|
|
|
<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/> |
|
|
|
<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> |
|
|
|
</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 +1088,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> |
|
|
|
@ -1126,7 +1112,7 @@ onMounted(async function () { |
|
|
|
<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 +1129,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> |
|
|
|
|
ZhangYong
1 month ago