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

除编辑均已完成

lihuilin/feature-20250715112412-金币二期
lihuilin 2 weeks ago
parent
dca0266032
commit
03f08aa637
1 changed files with 201 additions and 178 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. 379
      src/views/permissions/permission.vue

379
src/views/permissions/permission.vue
View File

@ -10,18 +10,29 @@ import request from '@/util/http'
import API from '@/util/http'
// 客户明细表格 什么表格？？？？？？？
const tableData = ref([])
const roleData = ref([])
const total = ref(100)
const checkTab = ref('admin')
// 搜索admin
const admin = ref({
account: '',
market: '',
postiton: ''
})
// 角色搜索
const role = ref({
name:''
})
// 搜索对象
const getObj = ref({
pageNum: 1,
pageSize: 10
})
// 角色搜索对象
const getRoleObj = ref({
pageNum: 1,
pageSize: 10
})
// 新增用户权限弹窗
const userAddVisible = ref(false)
// 编辑用户权限弹窗
@ -50,7 +61,7 @@ const addAdmin = ref({
// 新增角色对象
const addRole = ref({
roleName: '',
parentName: '',
parentId: null,
checkedKeys: [],
grade: ''
})
@ -68,16 +79,8 @@ const addMachineIdInput = function () {
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 delRoleObj = ref({})
const get = async function (val) {
try {
if (typeof val === 'number') {
@ -100,6 +103,48 @@ const get = async function (val) {
console.log('请求失败', error)
}
}
const getRoleList = async function (val) {
try {
if (typeof val === 'number') {
getObj.value.pageNum = val
}
console.log('搜索参数', getObj.value, role.value)
const result = await request({
url: '/role/selectBy',
data: {
...getRoleObj.value,
roleVo: {
roleName: role.value.name
}
}
})
roleData.value = result.data.list
console.log('roleData', roleData.value)
total.value = result.data.total
} catch (error) {
console.log('请求失败', error)
}
}
// 试试D老师的方法
const formatPermissions = (tree) => {
if (!tree || tree.length === 0) return '';
return tree.map(menu => {
const mainMenu = menu.menuName;
const subMenus = menu.children?.map(child => child.menuName) || [];
// 如果有子菜单，显示前2个子菜单名称
if (subMenus.length > 0) {
const maxSub = Math.min(2, subMenus.length);
const subText = subMenus.slice(0, maxSub).join('、');
const moreText = subMenus.length > maxSub ? '...' : '';
return `${mainMenu}+${subText}${moreText}`;
}
// 没有子菜单时只显示主菜单
return mainMenu;
}).join('+');
};
const trimJwCode = () => {
if (admin.value.account) {
admin.value.account = admin.value.account.replace(/\s/g, '');
@ -141,6 +186,7 @@ const getStore = async function () {
// 打开新增用户权限弹窗
const openUserAddVisible = function () {
getRoles()
userAddVisible.value = true
addAdmin.value = {
account: '',
@ -157,6 +203,8 @@ const openUserAddVisible = function () {
// 新增角色弹窗
const openPermissionAddVisible = function () {
permissionAddVisible.value = true
getRoles()
getLists()
}
// 关闭新增用户权限弹窗，并刷新表单
const closeUserAddVisible = function () {
@ -246,32 +294,21 @@ const throttledPermissionAdd = _.throttle(permissionAdd, 5000, {
trailing: false
})
// 权限类别
const permissionList = [
{
label: '管理员',
value: '1'
},
{
label: '总部财务',
value: '2'
},
{
label: '总部客服',
value: '3'
},
{
label: '地区负责人',
value: '4'
},
{
label: '地区财务',
value: '5'
},
{
label: '客服专员',
value: '6'
const permissionList = ref([])
const getRoles = async function () {
try {
const res = await API({ url: '/role/selectAll' })
permissionList.value = res.data.map(item => ({
label: item.roleName,
value: item.id
}))
console.log('权限列表:', permissionList.value)
} catch (error) {
console.error('获取权限列表失败:', error)
}
]
}
// 打开编辑用户权限弹窗
const openUserEditVisible = function () {
@ -339,6 +376,29 @@ const delConfirm = async function () {
ElMessage.error('删除权限失败')
}
}
// 删除角色初始化
const delRole = function (row) {
delRoleObj.value = {}
console.log(row, '删除初始化')
delRoleObj.value.id = row.id
}
// 删除角色
const delRoleConfirm = async function () {
try {
const result = await request({
url: '/role/delete',
data: delRoleObj.value
})
console.log('看看删除角色对象', delRoleObj.value)
console.log('请求成功2', result)
ElMessage.success('删除权限成功')
delRoleObj.value = {}
getRoleList()
} catch (error) {
console.log('删除权限失败', error)
ElMessage.error('删除权限失败')
}
}
const handleAddRole = async function () {
try {
const res = await API({
@ -386,6 +446,7 @@ onMounted(async function () {
await get()
await getArea()
await getStore()
await getRoleList()
})
const handlePageSizeChange = function (val) {
getObj.value.pageSize = val
@ -396,155 +457,47 @@ const handleCurrentChange = function (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
const data = ref([])
const getLists = async function () {
try {
let roleId = addRole.value.parentId
if (addRole.value.parentId === null || addRole.value.parentId === undefined) {
roleId = 2
}
} else {
filteredData.value = data
const res = await API({
url: '/menu/tree',
data: { id: roleId }
})
data.value = res.data
console.log('看看data', data.value)
console.log('parentID:', addRole.value.parentId, 'roleId:', roleId)
} catch (error) {
console.log('请求失败', error)
}
})
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>
<!-- 搜索表单 -->
<div style="margin-bottom:20px">
<el-button-group>
<el-button :type="checkTab === 'admin' ? 'primary' : 'default'" @click="checkTab = 'admin'" >
用户管理
</el-button>
<el-button :type="checkTab === 'role' ? 'primary' : 'default'" @click="checkTab = 'role'" >
角色管理
</el-button>
</el-button-group>
</div>
<div v-show="checkTab === 'admin'">
<!-- 用户搜索和展示 -->
<el-row>
<el-col>
<el-card style="margin-bottom: 20px">
@ -581,7 +534,6 @@ const handleCheckChange = (checkedNodes, { checkedKeys }) => {
<!-- 展示表单 -->
<div class="add-item">
<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>
@ -607,7 +559,7 @@ const handleCheckChange = (checkedNodes, { checkedKeys }) => {
:disabled="scope.row.adminStatus === 0">
修改权限
</el-button>
<el-popconfirm title="确定将此用户删除吗？" @confirm="delConfirm">
<el-popconfirm title="确定将此用户删除吗？" @confirm="delRoleConfirm">
<template #reference>
<el-button type="danger" text @click="del(scope.row)" :disabled="scope.row.adminStatus === 0">
删除
@ -643,6 +595,73 @@ const handleCheckChange = (checkedNodes, { checkedKeys }) => {
</el-card>
</el-col>
</el-row>
</div>
<div v-show="checkTab === 'role'">
<!-- 角色搜索 -->
<el-card style="margin-bottom: 20px">
<div class="head-card">
<el-text class="mx-1" size="large">角色名称：</el-text>
<el-input v-model="role.name" style="width: 240px" placeholder="请输入角色名称" clearable />
<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="permissionAddInit()">新增角色</el-button>
</div>
<div>
<el-table :data="roleData" style="width: 100%" show-overflow-tooltip>
<el-table-column type="index" label="序号" width="100px" fixed="left">
<template #default="scope">
<span>{{
scope.$index + 1 + (getRoleObj.pageNum - 1) * getRoleObj.pageSize
}}</span>
</template>
</el-table-column>
<el-table-column prop="roleName" label="角色名称" />
<el-table-column prop="fatherName" label="上级角色" />
<el-table-column prop="priority" label="优先级" />
<el-table-column label="权限范围" show-overflow-tooltip>
<template #default="scope">
<div class="permission-cell">
{{ formatPermissions(scope.row.tree) }}
</div>
</template>
</el-table-column>
<el-table-column prop="operation" label="操作" width="200px">
<template #default="scope">
<el-popconfirm title="确定将此用户删除吗？" @confirm="delRoleConfirm">
<template #reference>
<el-button type="danger" text @click="delRole(scope.row)">
删除
</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>
</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>
<!-- 新增用户权限 -->
<el-dialog v-model="userAddVisible" title="新增用户权限" width="800px" :close-on-click-modal="false">
<template #footer>
@ -738,14 +757,18 @@ const handleCheckChange = (checkedNodes, { checkedKeys }) => {
<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-select v-model="addRole.parentId" placeholder="请选择上级角色" style="width: 220px" @change="getLists" 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="checkedKeys" label="权限列表:" required>
<el-tree :data="filteredData" show-checkbox node-key="value" :props="{ label: 'label', children: 'children' }"
:checked-keys="addRole.checkedKeys" @check="handleCheckChange" />
<el-tree :data="data" show-checkbox node-key="id" :props="{ label: 'menuName', children: 'children' }"
:checked-keys="addRole.checkedKeys" @check="handleCheckChange">
<template #default="{ node, data }">
<span>{{ node.label }}</span>
</template>
</el-tree>
</el-form-item>
<el-form-item prop="grade" label="优先级:" required>
<el-input v-model="addRole.grade" placeholder="数字1~999" style="width: 220px" />

Write Preview
Loading…
Cancel
Save