|
|
|
@ -1,5 +1,5 @@ |
|
|
|
<script setup> |
|
|
|
import { ref, onMounted, reactive, computed } from 'vue' |
|
|
|
import { ref, onMounted, reactive, computed, watch } from 'vue' |
|
|
|
import ElementPlus from 'element-plus' |
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus' |
|
|
|
import axios from 'axios' |
|
|
|
@ -10,8 +10,6 @@ import request from '@/util/http' |
|
|
|
|
|
|
|
// 客户明细表格 什么表格？？？？？？？ |
|
|
|
const tableData = ref([]) |
|
|
|
// 搜索=========================================== |
|
|
|
//分页总条目 |
|
|
|
const total = ref(100) |
|
|
|
// 搜索admin |
|
|
|
const admin = ref({ |
|
|
|
@ -25,15 +23,19 @@ const getObj = ref({ |
|
|
|
pageSize: 10 |
|
|
|
}) |
|
|
|
// 新增用户权限弹窗 |
|
|
|
const permissionAddVisible = ref(false) |
|
|
|
const userAddVisible = ref(false) |
|
|
|
// 编辑用户权限弹窗 |
|
|
|
const permissionEditVisible = ref(false) |
|
|
|
const userEditVisible = ref(false) |
|
|
|
//选地区 |
|
|
|
const market = ref([]) |
|
|
|
// 选部门 |
|
|
|
const postiton = ref([]) |
|
|
|
// 新增用户权限对象 |
|
|
|
// 新增用户对象 |
|
|
|
const userAddObj = ref({}) |
|
|
|
// 新增角色对象 |
|
|
|
const permissionAddObj = ref({}) |
|
|
|
// 新增角色弹窗 |
|
|
|
const permissionAddVisible = ref(false) |
|
|
|
// 新增用户权限对象，机器码要实现存储多个，addMachineIdInput方法实现 |
|
|
|
const addAdmin = ref({ |
|
|
|
account: '', |
|
|
|
@ -45,8 +47,15 @@ const addAdmin = ref({ |
|
|
|
machineIds: [], // 动态添加的机器码输入框 |
|
|
|
remark: '' |
|
|
|
}) |
|
|
|
const addMachineIdInput = function () { // 为啥>=1？？？？？？？？？？？？？？ |
|
|
|
// 因为需求写的是最多两个机器码，这个点击了添加后，可以写或者不写，也就是0和1，所以>=1 |
|
|
|
// 新增角色对象 |
|
|
|
const addRole = ref({ |
|
|
|
roleName: '', |
|
|
|
parentName: '', |
|
|
|
permissionSelect: [] |
|
|
|
}) |
|
|
|
// 新增角色的权限列表 |
|
|
|
const permissionSelect = ref() |
|
|
|
const addMachineIdInput = function () { |
|
|
|
if (addAdmin.value.machineIds.length >= 1) { |
|
|
|
ElMessage.warning('设备数量已达上限') |
|
|
|
return |
|
|
|
@ -58,16 +67,45 @@ const addMachineIdInput = function () { // 为啥>=1？？？？？？？？ |
|
|
|
const permissionEditObj = ref({}) |
|
|
|
// 删除权限对象 |
|
|
|
const delObj = ref({}) |
|
|
|
// 各角色权限列表 |
|
|
|
const lists = [ |
|
|
|
{name: '管理员', value: '1', permissions: ['2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20']}, |
|
|
|
{name: '总部财务', value: '2', permissions: ['2','3','4','5','6','7','8','9']}, |
|
|
|
{name: '总部客服', value: '3', permissions: ['2','3','4','5','6','7','8']}, |
|
|
|
{name: '地区负责人', value: '4', permissions: ['2','3','4','5','6']}, |
|
|
|
{name: '地区财务', value: '5', permissions: ['2','3','4','5']}, |
|
|
|
{name: '客服专员', value: '6', permissions: ['2','3']} |
|
|
|
] |
|
|
|
const filteredData = ref([]) |
|
|
|
|
|
|
|
watch(() => addRole.value.parentName, (newValue) => { |
|
|
|
const selectedRole = lists.find(role => role.value === newValue) |
|
|
|
if (selectedRole) { |
|
|
|
const allowedPermissions = selectedRole.permissions |
|
|
|
filteredData.value = filterPermissions(data, allowedPermissions) |
|
|
|
} else { |
|
|
|
filteredData.value = data |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
const filterPermissions = (permissions, allowedPermissions) => { |
|
|
|
return permissions.filter(permission => { |
|
|
|
if (allowedPermissions.includes(permission.value)) { |
|
|
|
if (permission.children) { |
|
|
|
permission.children = filterPermissions(permission.children, allowedPermissions) |
|
|
|
} |
|
|
|
return true |
|
|
|
} |
|
|
|
return false |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
// 搜索接口 |
|
|
|
const get = async function (val) { |
|
|
|
try { |
|
|
|
// 搜索参数页码赋值 |
|
|
|
if (typeof val === 'number') { |
|
|
|
getObj.value.pageNum = val |
|
|
|
} |
|
|
|
console.log('搜索参数', getObj.value, admin.value) |
|
|
|
// 发送POST请求 |
|
|
|
const result = await request({ |
|
|
|
url: '/permission/getPermission', |
|
|
|
data: { |
|
|
|
@ -84,13 +122,11 @@ const get = async function (val) { |
|
|
|
console.log('请求失败', error) |
|
|
|
} |
|
|
|
} |
|
|
|
// 精网号去空格 |
|
|
|
const trimJwCode = () => { |
|
|
|
if (admin.value.account) { |
|
|
|
admin.value.account = admin.value.account.replace(/\s/g, ''); |
|
|
|
} |
|
|
|
} |
|
|
|
// 搜索 |
|
|
|
const search = function () { |
|
|
|
trimJwCode(); |
|
|
|
getObj.value.pageNum = 1 |
|
|
|
@ -99,10 +135,8 @@ const search = function () { |
|
|
|
// 重置 |
|
|
|
const reset = function () { |
|
|
|
admin.value = {} |
|
|
|
// addAdmin.value = {}//用在新增表单的重置方法，但现在采用Ref.value.resetFields()方法，不需要reset |
|
|
|
} |
|
|
|
|
|
|
|
// 获取地区 |
|
|
|
const getArea = async function () { |
|
|
|
try { |
|
|
|
const result = await request({ |
|
|
|
@ -112,7 +146,6 @@ const getArea = async function () { |
|
|
|
market.value = result.data |
|
|
|
} catch (error) { |
|
|
|
console.log('请求失败', error) |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
} |
|
|
|
} |
|
|
|
// 获取部门 |
|
|
|
@ -125,19 +158,19 @@ const getStore = async function () { |
|
|
|
postiton.value = result.data |
|
|
|
} catch (error) { |
|
|
|
console.log('请求失败', error) |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 打开新增用户权限弹窗 |
|
|
|
const openUserAddVisible = function () { |
|
|
|
userAddVisible.value = true |
|
|
|
} |
|
|
|
// 新增角色弹窗 |
|
|
|
const openPermissionAddVisible = function () { |
|
|
|
permissionAddVisible.value = true |
|
|
|
} |
|
|
|
// 关闭新增用户权限弹窗，并刷新表单 |
|
|
|
const closePermissionAddVisible = function () { |
|
|
|
// reset() ，下面这个方法还可以重置表单验证（请输入...），reset只能重置输入，修改reset方法 |
|
|
|
// 重置表单数据，当我们在新增表单点击添加后会弹出一个文本框，再点击取消，弹出的文本框应该是不显示出来的 |
|
|
|
const closeUserAddVisible = function () { |
|
|
|
addAdmin.value = { |
|
|
|
account: '', |
|
|
|
name: '', |
|
|
|
@ -148,12 +181,21 @@ const closePermissionAddVisible = function () { |
|
|
|
machineIds: [], |
|
|
|
remark: '' |
|
|
|
}; |
|
|
|
permissionAddVisible.value = false; |
|
|
|
userAddVisible.value = false; |
|
|
|
// 清除表单验证状态 |
|
|
|
Ref.value.resetFields(); |
|
|
|
|
|
|
|
} |
|
|
|
const closePermissionAddVisible = function () { |
|
|
|
permissionAddVisible.value = false |
|
|
|
addRole.value = {} |
|
|
|
Ref.value.resetFields(); |
|
|
|
} |
|
|
|
// 新增用户权限初始化 |
|
|
|
const userAddInit = function () { |
|
|
|
userAddObj.value = {} |
|
|
|
openUserAddVisible() |
|
|
|
} |
|
|
|
// 新增角色初始化 |
|
|
|
const permissionAddInit = function () { |
|
|
|
permissionAddObj.value = {} |
|
|
|
openPermissionAddVisible() |
|
|
|
@ -193,16 +235,14 @@ const permissionAdd = async function () { |
|
|
|
addAdmin.value = {} |
|
|
|
get() |
|
|
|
|
|
|
|
closePermissionAddVisible() |
|
|
|
closeUserAddVisible() |
|
|
|
} catch (error) { |
|
|
|
console.log('新增用户权限失败', error) |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
|
|
|
|
ElMessage.error('新增用户权限失败') |
|
|
|
closePermissionAddVisible() |
|
|
|
closeUserAddVisible() |
|
|
|
} |
|
|
|
} else { |
|
|
|
//提示 |
|
|
|
ElMessage({ |
|
|
|
type: 'error', |
|
|
|
message: '请检查输入内容' |
|
|
|
@ -245,12 +285,12 @@ const permissionList = [ |
|
|
|
] |
|
|
|
|
|
|
|
// 打开编辑用户权限弹窗 |
|
|
|
const openPermissionEditVisible = function () { |
|
|
|
permissionEditVisible.value = true |
|
|
|
const openUserEditVisible = function () { |
|
|
|
userEditVisible.value = true |
|
|
|
} |
|
|
|
// 关闭编辑用户权限弹窗 |
|
|
|
const closePermissionEditVisible = function () { |
|
|
|
permissionEditVisible.value = false |
|
|
|
const closeUserEditVisible = function () { |
|
|
|
userEditVisible.value = false |
|
|
|
} |
|
|
|
// 编辑用户权限初始化 |
|
|
|
const permissionEditInit = function (row) { |
|
|
|
@ -263,7 +303,7 @@ const permissionEditInit = function (row) { |
|
|
|
permissionEditObj.value.permission = row.permission |
|
|
|
permissionEditObj.value.roleId = row.roleId |
|
|
|
console.log('编辑用户权限', permissionEditObj.value) |
|
|
|
openPermissionEditVisible() |
|
|
|
openUserEditVisible() |
|
|
|
} |
|
|
|
// 编辑用户权限提交 |
|
|
|
const permissionEdit = async function () { |
|
|
|
@ -272,16 +312,14 @@ const permissionEdit = async function () { |
|
|
|
url: '/permission/updateAdminRole', |
|
|
|
data: permissionEditObj.value |
|
|
|
}) |
|
|
|
// 将响应结果存储到响应式数据中 |
|
|
|
console.log('请求成功3', result) |
|
|
|
ElMessage.success('编辑用户权限成功') |
|
|
|
get() |
|
|
|
closePermissionEditVisible() |
|
|
|
closeUserEditVisible() |
|
|
|
} catch (error) { |
|
|
|
console.log('编辑用户权限失败', error) |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
ElMessage.error('编辑用户权限失败') |
|
|
|
closePermissionEditVisible() |
|
|
|
closeUserEditVisible() |
|
|
|
} |
|
|
|
} |
|
|
|
const throttledPermissionEdit = _.throttle(permissionEdit, 5000, { |
|
|
|
@ -309,7 +347,6 @@ const delConfirm = async function () { |
|
|
|
get() |
|
|
|
} catch (error) { |
|
|
|
console.log('删除权限失败', error) |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
ElMessage.error('删除权限失败') |
|
|
|
} |
|
|
|
} |
|
|
|
@ -328,10 +365,7 @@ const editStatus = async function (row) { |
|
|
|
url: '/permission/upadatePermission', |
|
|
|
data: permissionEditObj.value |
|
|
|
}) |
|
|
|
|
|
|
|
// 将响应结果存储到响应式数据中 |
|
|
|
console.log('请求成功2', result) |
|
|
|
|
|
|
|
ElMessage.success( |
|
|
|
permissionEditObj.value.adminStatus == 1 ? '启用成功' : '禁用成功' |
|
|
|
) |
|
|
|
@ -339,7 +373,6 @@ const editStatus = async function (row) { |
|
|
|
get() |
|
|
|
} catch (error) { |
|
|
|
console.log('修改用户权限失败', error) |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -357,9 +390,122 @@ const handleCurrentChange = function (val) { |
|
|
|
getObj.value.pageNum = val |
|
|
|
get() |
|
|
|
} |
|
|
|
|
|
|
|
const data = [ |
|
|
|
{ |
|
|
|
value: '2', |
|
|
|
label: '工作台' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '3', |
|
|
|
label: '财务审核', |
|
|
|
children:[ |
|
|
|
{ |
|
|
|
value:'11', |
|
|
|
label:'充值审核' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value:'13', |
|
|
|
label:'退款审核' |
|
|
|
},{ |
|
|
|
value:'12',//14 |
|
|
|
label:'审核操作' |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '4', |
|
|
|
label: '汇率管理' |
|
|
|
},{ |
|
|
|
value: '5', |
|
|
|
label: '充值管理', |
|
|
|
children:[ |
|
|
|
{ |
|
|
|
value:'17', |
|
|
|
label:'新增充值' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value:'18', |
|
|
|
label:'金币充值明细' |
|
|
|
} |
|
|
|
] |
|
|
|
},{ |
|
|
|
value: '6', |
|
|
|
label: '消耗管理', |
|
|
|
children:[ |
|
|
|
{ |
|
|
|
value:'19', |
|
|
|
label:'新增消耗' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value:'20', |
|
|
|
label:'金币消耗明细' |
|
|
|
} |
|
|
|
] |
|
|
|
},{ |
|
|
|
value: '7', |
|
|
|
label: '退款管理', |
|
|
|
children:[ |
|
|
|
{ |
|
|
|
value:'21', |
|
|
|
label:'新增退款' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value:'22', |
|
|
|
label:'金币退款明细' |
|
|
|
} |
|
|
|
] |
|
|
|
},{ |
|
|
|
value: '8', |
|
|
|
label: '客户账户明细', |
|
|
|
children:[ |
|
|
|
{ |
|
|
|
value:'23', |
|
|
|
label:'客户金币明细' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value:'24', |
|
|
|
label:'客户金币余额' |
|
|
|
} |
|
|
|
] |
|
|
|
},{ |
|
|
|
value: '9', |
|
|
|
label: '权限管理' |
|
|
|
},{ |
|
|
|
value: '100', |
|
|
|
label: '地区数据', |
|
|
|
children:[ |
|
|
|
{ |
|
|
|
value:'101', |
|
|
|
label:'总部' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value:'102', |
|
|
|
label:'香港' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value:'103', |
|
|
|
label:'新加坡' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value:'104', |
|
|
|
label:'马来西亚' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value:'105', |
|
|
|
label:'越南' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value:'106', |
|
|
|
label:'韩国' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
] |
|
|
|
</script> |
|
|
|
|
|
|
|
<template> |
|
|
|
<!-- 搜索表单 --> |
|
|
|
<el-row> |
|
|
|
<el-col> |
|
|
|
<el-card style="margin-bottom: 20px"> |
|
|
|
@ -395,11 +541,12 @@ const handleCurrentChange = function (val) { |
|
|
|
<el-card> |
|
|
|
<!-- 展示表单 --> |
|
|
|
<div class="add-item"> |
|
|
|
<el-button style="color: #048efb; border: 1px solid #048efb" @click="permissionAddInit()">新增用户</el-button> |
|
|
|
<el-button style="color: #048efb; border: 1px solid #048efb" @click="userAddInit()">新增用户</el-button> |
|
|
|
<el-button style="color: #048efb; border: 1px solid #048efb" @click="permissionAddInit()">新增角色</el-button> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div> |
|
|
|
<el-table :data="tableData" style="width: 100%"> |
|
|
|
<el-table :data="tableData" style="width: 100%" show-overflow-tooltip> |
|
|
|
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
|
|
|
<template #default="scope"> |
|
|
|
<span>{{ |
|
|
|
@ -458,7 +605,7 @@ const handleCurrentChange = function (val) { |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<!-- 新增用户权限 --> |
|
|
|
<el-dialog v-model="permissionAddVisible" title="新增用户权限" width="800px" :close-on-click-modal="false"> |
|
|
|
<el-dialog v-model="userAddVisible" title="新增用户权限" width="800px" :close-on-click-modal="false"> |
|
|
|
<template #footer> |
|
|
|
<!-- 居中显示 --> |
|
|
|
|
|
|
|
@ -472,20 +619,17 @@ const handleCurrentChange = function (val) { |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item prop="market" label="所属地区:" required> |
|
|
|
<el-select v-model="addAdmin.market" placeholder="请选择所属地区" style="width: 220px" |
|
|
|
@change="() => Ref.value.validateField('market')"> |
|
|
|
<el-option v-for="item in market" :key="item" :label="item" :value="item" /> |
|
|
|
<el-select multiple v-model="addAdmin.market" placeholder="请选择所属地区" style="width: 440px"> |
|
|
|
<el-option v-for="item in market" :key="item" :label="item" :value="item" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="permission" label="权限类别:" required> |
|
|
|
<el-select v-model="addAdmin.permission" placeholder="请选择权限" style="width: 220px" |
|
|
|
@change="() => Ref.value.validateField('permission')"> |
|
|
|
<el-option v-for="item in permissionList" :key="item.value" :label="item.label" |
|
|
|
:value="item.value"></el-option> |
|
|
|
<el-form-item prop="permission" label="角色名称:" required> |
|
|
|
<el-select v-model="addAdmin.permission" placeholder="请选择角色名称" style="width: 220px"> |
|
|
|
<el-option v-for="item in permissionList" :key="item.value" :label="item.label" :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" /> |
|
|
|
<el-input v-model="addAdmin.postiton" placeholder="请输入职位" style="width: 220px" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="machineId" label="机器码:" required> |
|
|
|
<div style="display: flex; align-items: center; flex-wrap: wrap;"> |
|
|
|
@ -505,7 +649,7 @@ const handleCurrentChange = function (val) { |
|
|
|
</el-form> |
|
|
|
|
|
|
|
<div> |
|
|
|
<el-button @click="closePermissionAddVisible()">取消</el-button> |
|
|
|
<el-button @click="closeUserAddVisible()">取消</el-button> |
|
|
|
<el-button type="primary" @click="throttledPermissionAdd()"> |
|
|
|
提交 |
|
|
|
</el-button> |
|
|
|
@ -514,85 +658,66 @@ const handleCurrentChange = function (val) { |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<!-- 这是编辑用户权限弹窗 --> |
|
|
|
<el-dialog v-model="permissionEditVisible" title="编辑用户权限" width="800px" :close-on-click-modal="false"> |
|
|
|
<el-descriptions class="margin-top" :column="2" border label-width="200px"> |
|
|
|
<el-descriptions-item> |
|
|
|
<template #label> |
|
|
|
<div class="permissionVisible"> |
|
|
|
<el-icon> |
|
|
|
<UserFilled /> |
|
|
|
</el-icon> |
|
|
|
员工精网号 |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
{{ permissionEditObj.account }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item> |
|
|
|
<template #label> |
|
|
|
<div class="permissionVisible"> |
|
|
|
<el-icon> |
|
|
|
<User /> |
|
|
|
</el-icon> |
|
|
|
员工姓名 |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
{{ permissionEditObj.name }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item> |
|
|
|
<template #label> |
|
|
|
<div class="permissionVisible"> |
|
|
|
<el-icon> |
|
|
|
<location /> |
|
|
|
</el-icon> |
|
|
|
所属地区 |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
{{ permissionEditObj.market }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item> |
|
|
|
<template #label> |
|
|
|
<div class="permissionVisible"> |
|
|
|
<el-icon> |
|
|
|
<OfficeBuilding /> |
|
|
|
</el-icon> |
|
|
|
部门 |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
{{ permissionEditObj.postiton }} |
|
|
|
</el-descriptions-item> |
|
|
|
</el-descriptions> |
|
|
|
|
|
|
|
<el-divider> |
|
|
|
<el-icon><star-filled /></el-icon> |
|
|
|
</el-divider> |
|
|
|
<el-dialog v-model="userEditVisible" title="编辑用户权限" width="800px" :close-on-click-modal="false"> |
|
|
|
<el-form ref="Ref" :model="permissionEditObj" label-width="auto" style="max-width: 600px; align-items: center"> |
|
|
|
<el-form-item prop="userName" label="用户名称:" required> |
|
|
|
<el-input v-model="permissionEditObj.userName" placeholder="请输入用户名" style="width: 220px" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="roleName" label="角色名称:" required> |
|
|
|
<el-input v-model="permissionEditObj.roleName" placeholder="请输入用户名" style="width: 220px" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="parentName" label="上级角色:" required> |
|
|
|
<el-select v-model="permissionEditObj.parentName" placeholder="请选择上级角色" style="width: 220px"> |
|
|
|
<el-option v-for="item in permissionList" :key="item.value" :label="item.label" :value="item.value"></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="permissionSelect" label="权限列表:" required> |
|
|
|
<el-tree multiple v-model="permissionEditObj.permissionSelect" :data="data" :render-after-expand="false" show-checkbox style="width: 700px" /> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div> |
|
|
|
<span class="permissionVisible" style="margin-right: 20px">权限设置:</span> |
|
|
|
<el-radio-group v-model="permissionEditObj.roleId"> |
|
|
|
<el-radio value="1" border>管理员</el-radio> |
|
|
|
<el-radio value="2" border>总部财务</el-radio> |
|
|
|
<el-radio value="3" border>总部客服</el-radio> |
|
|
|
<el-radio value="4" border>地区负责人</el-radio> |
|
|
|
<el-radio value="5" border>地区财务</el-radio> |
|
|
|
<el-radio value="6" border>客服专员</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</div> |
|
|
|
<template #footer> |
|
|
|
<div> |
|
|
|
<el-button @click="closePermissionEditVisible()">取消</el-button> |
|
|
|
<el-button @click="closeUserEditVisible()">取消</el-button> |
|
|
|
<el-button type="primary" @click="throttledPermissionEdit"> |
|
|
|
提交 |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<!-- 新增角色 --> |
|
|
|
<el-dialog v-model="permissionAddVisible" title="新增角色" width="800px" :close-on-click-modal="false"> |
|
|
|
<template #footer> |
|
|
|
<el-form ref="Ref" :model="addRole" label-width="auto" style="max-width: 600px; align-items: center"> |
|
|
|
<el-form-item prop="roleName" label="角色名称:" required> |
|
|
|
<el-input v-model="addRole.roleName" placeholder="请输入用户名" style="width: 220px" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="parentName" label="上级角色:"> |
|
|
|
<el-select v-model="addRole.parentName" placeholder="请选择上级角色" style="width: 220px" clearable> |
|
|
|
<el-option v-for="item in permissionList" :key="item.value" :label="item.label" :value="item.value"></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="permissionSelect" label="权限列表:" required> |
|
|
|
<el-tree multiple v-model="addRole.permissionSelect" :data="filteredData" :render-after-expand="false" show-checkbox style="width: 700px" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="grade" label="优先级:" required> |
|
|
|
<el-input v-model="addRole.grade" placeholder="数字1~999" style="width: 220px" /> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
|
|
|
|
<div> |
|
|
|
<el-button @click="closePermissionAddVisible()">取消</el-button> |
|
|
|
<el-button type="primary" @click="throttledPermissionAdd()"> |
|
|
|
提交 |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
</template> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.permissionVisible { |
|
|
|
font-size: 16px; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
.pagination { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
@ -625,4 +750,4 @@ const handleCurrentChange = function (val) { |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
lihuilin
3 weeks ago