|
|
|
@ -1,14 +1,15 @@ |
|
|
|
<script setup> |
|
|
|
import {onMounted, ref} from 'vue' |
|
|
|
import {ElMessage} from 'element-plus' |
|
|
|
import {InfoFilled, UserFilled} from '@element-plus/icons-vue' |
|
|
|
import { ref, onMounted, reactive, computed, watch } from 'vue' |
|
|
|
import ElementPlus from 'element-plus' |
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus' |
|
|
|
import axios from 'axios' |
|
|
|
import moment from 'moment' |
|
|
|
import { UserFilled } from '@element-plus/icons-vue' |
|
|
|
import _ from 'lodash' |
|
|
|
import request from '@/util/http' |
|
|
|
|
|
|
|
import API from '@/util/http' |
|
|
|
// 客户明细表格 什么表格？？？？？？？ |
|
|
|
const tableData = ref([]) |
|
|
|
// 搜索=========================================== |
|
|
|
//分页总条目 |
|
|
|
const total = ref(100) |
|
|
|
// 搜索admin |
|
|
|
const admin = ref({ |
|
|
|
@ -22,28 +23,40 @@ 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: '', |
|
|
|
name: '', |
|
|
|
market: '', |
|
|
|
permission: [], |
|
|
|
market: [], |
|
|
|
permission: '', |
|
|
|
postiton: '', |
|
|
|
machineId: '', // 初始机器码输入框 |
|
|
|
machineIds: [], // 动态添加的机器码输入框 |
|
|
|
remark: '' |
|
|
|
}) |
|
|
|
const addMachineIdInput = function () { // 为啥>=1？？？？？？？？？？？？？？ |
|
|
|
// 因为需求写的是最多两个机器码，这个点击了添加后，可以写或者不写，也就是0和1，所以>=1 |
|
|
|
// 新增角色对象 |
|
|
|
const addRole = ref({ |
|
|
|
roleName: '', |
|
|
|
parentName: '', |
|
|
|
checkedKeys: [], |
|
|
|
grade: '' |
|
|
|
}) |
|
|
|
// 新增角色的权限列表 |
|
|
|
const permissionSelect = ref() |
|
|
|
const addMachineIdInput = function () { |
|
|
|
if (addAdmin.value.machineIds.length >= 1) { |
|
|
|
ElMessage.warning('设备数量已达上限') |
|
|
|
return |
|
|
|
@ -55,16 +68,22 @@ 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 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: { |
|
|
|
@ -81,13 +100,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 |
|
|
|
@ -96,10 +113,8 @@ const search = function () { |
|
|
|
// 重置 |
|
|
|
const reset = function () { |
|
|
|
admin.value = {} |
|
|
|
// addAdmin.value = {}//用在新增表单的重置方法，但现在采用Ref.value.resetFields()方法，不需要reset |
|
|
|
} |
|
|
|
|
|
|
|
// 获取地区 |
|
|
|
const getArea = async function () { |
|
|
|
try { |
|
|
|
const result = await request({ |
|
|
|
@ -109,7 +124,6 @@ const getArea = async function () { |
|
|
|
market.value = result.data |
|
|
|
} catch (error) { |
|
|
|
console.log('请求失败', error) |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
} |
|
|
|
} |
|
|
|
// 获取部门 |
|
|
|
@ -122,19 +136,30 @@ const getStore = async function () { |
|
|
|
postiton.value = result.data |
|
|
|
} catch (error) { |
|
|
|
console.log('请求失败', error) |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 打开新增用户权限弹窗 |
|
|
|
const openUserAddVisible = function () { |
|
|
|
userAddVisible.value = true |
|
|
|
addAdmin.value = { |
|
|
|
account: '', |
|
|
|
name: '', |
|
|
|
market: '', |
|
|
|
permission: '', |
|
|
|
postiton: '', |
|
|
|
machineId: '', |
|
|
|
machineIds: [], |
|
|
|
remark: '' |
|
|
|
}; |
|
|
|
|
|
|
|
} |
|
|
|
// 新增角色弹窗 |
|
|
|
const openPermissionAddVisible = function () { |
|
|
|
permissionAddVisible.value = true |
|
|
|
} |
|
|
|
// 关闭新增用户权限弹窗，并刷新表单 |
|
|
|
const closePermissionAddVisible = function () { |
|
|
|
// reset() ，下面这个方法还可以重置表单验证（请输入...），reset只能重置输入，修改reset方法 |
|
|
|
// 重置表单数据，当我们在新增表单点击添加后会弹出一个文本框，再点击取消，弹出的文本框应该是不显示出来的 |
|
|
|
const closeUserAddVisible = function () { |
|
|
|
addAdmin.value = { |
|
|
|
account: '', |
|
|
|
name: '', |
|
|
|
@ -145,12 +170,20 @@ const closePermissionAddVisible = function () { |
|
|
|
machineIds: [], |
|
|
|
remark: '' |
|
|
|
}; |
|
|
|
permissionAddVisible.value = false; |
|
|
|
userAddVisible.value = false; |
|
|
|
// 清除表单验证状态 |
|
|
|
Ref.value.resetFields(); |
|
|
|
|
|
|
|
} |
|
|
|
const closePermissionAddVisible = function () { |
|
|
|
permissionAddVisible.value = false |
|
|
|
Ref.value.resetFields(); |
|
|
|
} |
|
|
|
// 新增用户权限初始化 |
|
|
|
const userAddInit = function () { |
|
|
|
userAddObj.value = {} |
|
|
|
openUserAddVisible() |
|
|
|
} |
|
|
|
// 新增角色初始化 |
|
|
|
const permissionAddInit = function () { |
|
|
|
permissionAddObj.value = {} |
|
|
|
openPermissionAddVisible() |
|
|
|
@ -158,6 +191,7 @@ const permissionAddInit = function () { |
|
|
|
|
|
|
|
const permissionAdd = async function () { |
|
|
|
Ref.value.validate(async (valid) => { |
|
|
|
console.log('addRole', addRole.value) |
|
|
|
console.log('valid', valid) |
|
|
|
if (valid) { |
|
|
|
try { |
|
|
|
@ -190,16 +224,14 @@ const permissionAdd = async function () { |
|
|
|
addAdmin.value = {} |
|
|
|
get() |
|
|
|
|
|
|
|
closePermissionAddVisible() |
|
|
|
closeUserAddVisible() |
|
|
|
} catch (error) { |
|
|
|
console.log('新增用户权限失败', error) |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
|
|
|
|
ElMessage.error('新增用户权限失败') |
|
|
|
closePermissionAddVisible() |
|
|
|
closeUserAddVisible() |
|
|
|
} |
|
|
|
} else { |
|
|
|
//提示 |
|
|
|
ElMessage({ |
|
|
|
type: 'error', |
|
|
|
message: '请检查输入内容' |
|
|
|
@ -242,12 +274,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) { |
|
|
|
@ -260,7 +292,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 () { |
|
|
|
@ -269,16 +301,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, { |
|
|
|
@ -306,10 +336,25 @@ const delConfirm = async function () { |
|
|
|
get() |
|
|
|
} catch (error) { |
|
|
|
console.log('删除权限失败', error) |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
ElMessage.error('删除权限失败') |
|
|
|
} |
|
|
|
} |
|
|
|
const handleAddRole = async function () { |
|
|
|
try { |
|
|
|
const res = await API({ |
|
|
|
url: '/role/add', |
|
|
|
data: { |
|
|
|
"roleName": addRole.value.roleName, |
|
|
|
"menuIds": addRole.value.checkedKeys, |
|
|
|
"priority": addRole.value.grade, |
|
|
|
"fatherId": addRole.value.parentName |
|
|
|
} |
|
|
|
}) |
|
|
|
console.log('成功了，看看addRole', addRole.value) |
|
|
|
} catch (error) { |
|
|
|
console.log('请求失败', error) |
|
|
|
} |
|
|
|
} |
|
|
|
// 禁用启用用户权限 |
|
|
|
const editStatus = async function (row) { |
|
|
|
try { |
|
|
|
@ -325,10 +370,7 @@ const editStatus = async function (row) { |
|
|
|
url: '/permission/upadatePermission', |
|
|
|
data: permissionEditObj.value |
|
|
|
}) |
|
|
|
|
|
|
|
// 将响应结果存储到响应式数据中 |
|
|
|
console.log('请求成功2', result) |
|
|
|
|
|
|
|
ElMessage.success( |
|
|
|
permissionEditObj.value.adminStatus == 1 ? '启用成功' : '禁用成功' |
|
|
|
) |
|
|
|
@ -397,9 +439,156 @@ 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: '韩国' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
] |
|
|
|
const filteredData = ref([...data]) |
|
|
|
|
|
|
|
watch(() => addRole.value.parentName, (newValue) => { |
|
|
|
if (newValue) { |
|
|
|
const selectedRole = lists.find(role => role.value === newValue) |
|
|
|
if (selectedRole) { |
|
|
|
const allowedPermissions = selectedRole.permissions |
|
|
|
filteredData.value = filterPermissions(data, allowedPermissions) |
|
|
|
} else { |
|
|
|
filteredData.value = data |
|
|
|
} |
|
|
|
} 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 includeHq = computed(() => { |
|
|
|
const i = addAdmin.value.market.includes('总部') |
|
|
|
return (item) => i && item != '总部' |
|
|
|
}) |
|
|
|
const handleCheckChange = (checkedNodes, { checkedKeys }) => { |
|
|
|
addRole.value.checkedKeys = checkedKeys; |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<template> |
|
|
|
<!-- 搜索表单 --> |
|
|
|
<el-row> |
|
|
|
<el-col> |
|
|
|
<el-card style="margin-bottom: 20px"> |
|
|
|
@ -435,7 +624,8 @@ 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> |
|
|
|
@ -508,7 +698,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> |
|
|
|
<!-- 居中显示 --> |
|
|
|
|
|
|
|
@ -556,7 +746,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> |
|
|
|
@ -619,19 +809,10 @@ const handleCurrentChange = function (val) { |
|
|
|
</el-icon> |
|
|
|
</el-divider> |
|
|
|
<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> |
|
|
|
@ -668,11 +849,6 @@ const handleCurrentChange = function (val) { |
|
|
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.permissionVisible { |
|
|
|
font-size: 16px; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
.pagination { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
@ -692,7 +868,7 @@ const handleCurrentChange = function (val) { |
|
|
|
.head-card-btn { |
|
|
|
margin-left: auto; |
|
|
|
} |
|
|
|
|
|
|
|
/* ceshi */ |
|
|
|
/* 新增样式让弹窗内容居中 */ |
|
|
|
.el-dialog__body { |
|
|
|
display: flex; |
|
|
|
@ -705,4 +881,4 @@ const handleCurrentChange = function (val) { |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
zhangyongQINGHU
2 weeks ago