<script setup>
|
import {changeFilterEvent, filterChanged} from "@/hook"
|
import {onBeforeMount, onMounted, reactive, ref} from "vue"
|
import request from "@/utils/request"
|
import {useRouter,useRoute} from "vue-router"
|
import {useI18n} from "vue-i18n"
|
import i18n from "@/lang/index"
|
const lang = i18n.global.locale.value
|
import {ElMessage, ElMessageBox} from "element-plus"
|
const { t } = useI18n()
|
const router = useRouter()
|
const route = useRoute()
|
const dialogVisible = ref(false)
|
let selectValue = ref([null,null])
|
let options = ref(null)
|
let checkId = ref(null)
|
|
|
const xGrid = ref()
|
const gridOptions = reactive({
|
border: "full",//表格加边框
|
keepSource: true,//保持源数据
|
align: 'center',//文字居中
|
stripe:true,//斑马纹
|
rowConfig: {isCurrent: true, isHover: true,height: 30},//鼠标移动或选择高亮
|
id: 'userList',
|
showFooter: false,//显示脚
|
printConfig: {},
|
importConfig: {},
|
exportConfig: {},
|
scrollY:{ enabled: true },//开启虚拟滚动
|
showOverflow:true,
|
columnConfig: {
|
resizable: true,
|
useKey: true
|
},
|
filterConfig: { //筛选配置项
|
},
|
customConfig: {
|
storage: true
|
},
|
|
editConfig: {
|
trigger: 'click',
|
mode: 'row',
|
showStatus: true
|
},
|
|
//表头参数
|
columns:[
|
|
],
|
|
//表头按钮
|
toolbarConfig: {
|
buttons: [
|
|
],
|
slots:{
|
buttons: "role_add"
|
|
},
|
zoom: true,
|
custom: true
|
},
|
})
|
|
const pGrid = ref()
|
const permissionOptions = reactive({
|
border: "full",//表格加边框
|
keepSource: true,//保持源数据
|
align: 'center',//文字居中
|
stripe:true,//斑马纹
|
rowConfig: {isCurrent: true, isHover: true,height: 30,keyField:'id'},//鼠标移动或选择高亮
|
id: 'permissionList',
|
showFooter: false,//显示脚
|
printConfig: {},
|
importConfig: {},
|
exportConfig: {},
|
scrollY:{ enabled: true },//开启虚拟滚动
|
showOverflow:true,
|
columnConfig: {
|
resizable: true,
|
useKey: true
|
},
|
filterConfig: { //筛选配置项
|
},
|
customConfig: {
|
storage: true
|
},
|
checkboxConfig: {
|
checkField:'checked',
|
reserve: true,
|
},
|
editConfig: {
|
trigger: 'click',
|
mode: 'row',
|
showStatus: true
|
},
|
|
//表头参数
|
columns:[
|
|
],
|
|
//表头按钮
|
toolbarConfig: {
|
slots:{
|
buttons: "toolbar_buttons",
|
tools:'save_buttons'
|
|
},
|
buttons: [
|
],
|
zoom: true,
|
custom: true
|
},
|
})
|
|
|
|
onBeforeMount(()=>{
|
let columns = [{title: t('basicData.operate'), width: 133, slots: { default: 'button_slot' }}]
|
const columnName = {
|
id: t('role.id'),
|
role:t('role.role')
|
}
|
for (let columnNameKey in columnName) {
|
let column = {field: columnNameKey,
|
title: columnName[columnNameKey]
|
}
|
columns.push(column)
|
}
|
gridOptions.columns = columns
|
|
|
let columnsP = [
|
{ type: 'seq', width: 60 },
|
{ type: 'checkbox',
|
width: 50 ,
|
field:"checked",
|
|
}
|
]
|
const columnNameP = {
|
id: t('role.id'),
|
menu: t('role.menu'),
|
page:t('role.page'),
|
permission:t('role.permission')
|
}
|
for (let columnNameKey in columnNameP) {
|
let column = {
|
field: columnNameKey,
|
title: columnNameP[columnNameKey],
|
filterMethod:filterChanged,
|
slots: { filter: 'num1_filter' },
|
filters:[{ data: '' }]
|
}
|
columnsP.push(column)
|
}
|
permissionOptions.columns = columnsP
|
|
})
|
|
|
|
onMounted(()=>{
|
request.get(`/role/findAll`).then(res=>{
|
gridOptions.data = res.data
|
})
|
request.post(`/permission/getPermissionList/${lang}`).then(res=>{
|
res.data.forEach(item=>{
|
item.children.forEach(item1=>{
|
item1.label = t(item.label+'.page.'+item1.label)
|
item1.value = item1.label
|
})
|
item.label = t('menu.'+item.label)
|
})
|
options.value = res.data
|
})
|
})
|
|
const getTableRow = (row,type) => {
|
switch (type) {
|
case 'edit': {
|
dialogVisible.value = true
|
checkId.value = row.id
|
break
|
}
|
}
|
}
|
|
const getPermissionList = () => {
|
request.post(`/permission/getPermission/${checkId.value}/${lang}`,selectValue.value).then(res=>{
|
res.data.forEach(item=>{
|
item.page = t(item.menu+'.page.'+item.page)
|
item.menu = t('menu.'+item.menu)
|
})
|
pGrid.value.reloadData(res.data)
|
})
|
}
|
|
const filterChanged1 = ({ option, row }) => {
|
return row.page === option.data
|
}
|
|
const selectChange = () => {
|
if(selectValue.value===null){
|
pGrid.value.clearFilter()
|
return
|
}
|
|
const column = pGrid.value.getColumnByField('page')
|
column.filters =[{ data: '' }]
|
const option = column.filters[0]
|
option.data = selectValue.value[1]
|
option.checked = true
|
// 如果是直接修复筛选条件，则需要手动调用 updateData 处理表格数据
|
pGrid.value.updateData()
|
//getPermissionList()
|
}
|
|
const saveBatch = () => {
|
const $grid = pGrid.value
|
// if($grid.getCheckboxRecords().length === 0){
|
// ElMessage.warning("请先选择权限")
|
// return
|
// }
|
ElMessageBox.confirm(
|
t('role.ConfirmModifyingRolePermissions'),
|
'Warning',
|
{
|
confirmButtonText: t('basicData.confirmButtonText'),
|
cancelButtonText: t('basicData.cancelButtonText'),
|
type: 'warning',
|
}
|
).then(() => {
|
selectValue.value = [null,null]
|
pGrid.value.clearFilter()
|
const permission = {
|
id: checkId.value,
|
detail: $grid.getCheckboxRecords()
|
}
|
request.post(`/permissionRole/savePermissionRole`,permission).then(res=>{
|
if(res.data=== true && res.code==='200'){
|
ElMessage.success(t('basicData.msg.saveSuccess'))
|
dialogVisible.value = false
|
getPermissionList()
|
}else{
|
ElMessage.error(t('basicData.msg.saveFail'))
|
}
|
})
|
})
|
}
|
|
const addRole = () =>{
|
ElMessageBox.prompt(t('role.PleaseEnterANewRole'), t('role.AddANewRole'), {
|
confirmButtonText: t('basicData.confirmButtonText'),
|
cancelButtonText: t('basicData.cancelButtonText'),
|
inputPattern:/^.{1,255}$/,
|
inputErrorMessage: t('role.CannotBeEmptyAndTheLengthCannotExceed255'),
|
})
|
.then(({ value }) => {
|
const role= {
|
role: value
|
}
|
request.post("/role/add",role).then(res=>{
|
if(res.code==='200' && res.data===true){
|
ElMessage.success(t('basicData.msg.saveSuccess'))
|
router.push({path:'/main/role/roleList',query:{random:Math.random()}})
|
}else{
|
ElMessage.error(t('basicData.msg.saveFail'))
|
}
|
})
|
})
|
}
|
|
</script>
|
|
<template>
|
<div style="width: 50%;height: 100% ;">
|
<vxe-grid
|
max-height="100%"
|
class="mytable-scrollbar"
|
ref="xGrid"
|
v-bind="gridOptions"
|
>
|
<template #role_add>
|
<vxe-button
|
@click="addRole"
|
status='primary'
|
style="margin-right: 1rem"
|
>{{$t('role.roleAdd')}}</vxe-button>
|
</template>
|
|
|
<template #filter="{ column, $panel }">
|
<div>
|
<div v-for="(option, index) in column.filters" :key="index">
|
<input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
|
</div>
|
</div>
|
</template>
|
|
<template #button_slot="{ row }">
|
<el-button @click="getTableRow(row,'edit')" link type="primary" size="small">{{$t('role.rolePermissions')}}</el-button>
|
</template>
|
</vxe-grid>
|
|
<el-dialog
|
v-model="dialogVisible"
|
@open="getPermissionList"
|
style="height: 70%;width: 70%"
|
:title="$t('role.permissionSelection')">
|
<vxe-grid
|
height="100%"
|
class="mytable-scrollbar"
|
ref="pGrid"
|
v-bind="permissionOptions"
|
>
|
<template #num1_filter="{ column, $panel }">
|
<div>
|
<div v-for="(option, index) in column.filters" :key="index">
|
<input type="text"
|
v-model="option.data"
|
@focus="inputFocus"
|
@input="changeFilterEvent($event, option, $panel)"/>
|
</div>
|
</div>
|
</template>
|
|
<template #toolbar_buttons>
|
<el-cascader
|
v-model="selectValue"
|
:options="options"
|
@change="selectChange"
|
clearable
|
/>
|
</template>
|
<template #save_buttons>
|
<vxe-button
|
@click="saveBatch"
|
status='primary'
|
style="margin-right: 1rem"
|
>{{$t('basicData.save')}}</vxe-button>
|
</template>
|
|
</vxe-grid>
|
|
|
</el-dialog>
|
</div>
|
</template>
|
|
<style scoped>
|
:deep(.el-dialog__body){
|
height: 80%;
|
}
|
</style>
|
