ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

角色管理

Browse Source
This commit is contained in:
sjl
2024-11-14 11:34:25 +08:00
parent 44e7598b68
commit 39cbe0ff35
19 changed files with 873 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

287
frontend/src/views/authority/resource/components/resourcePopup.vue
View File

@@ -1,66 +1,186 @@
<template>
<el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" v-bind="dialogSmall">
<el-form :model="formData" ref='formRuleRef' :rules='rules'>
<el-form-item label="名称" prop="name">
<el-input v-model="formData.name" />
<el-dialog :title="dialogTitle" :model-value="dialogVisible" @close="close" v-bind="dialogMiddle">
<el-form :model="formContent" ref='formRuleRef' :rules='rules' >
<el-form-item label="上级菜单" prop="pid" :label-width="100">
<el-tree-select
v-model="value"
:data="data"
check-strictly
:render-after-expand="false"
show-checkbox
check-on-click-node
/>
</el-form-item>
<el-form-item label="路径" prop="path">
<el-input v-model="formData.path" />
<el-form-item label="名称" prop="name" :label-width="100">
<el-input v-model="formContent.name" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="formData.sort" />
<el-form-item label="图标" prop="icon" :label-width="100">
<IconSelect
:iconValue="formContent.icon"
@update:iconValue="(value) => formContent.icon = value"
placeholder="选择一个图标"
/>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-select v-model="formData.type" placeholder="请选择资源类型">
<el-form-item label="路由地址" prop="path" :label-width="100">
<el-input v-model="formContent.path" />
</el-form-item>
<el-form-item label="组件地址" prop="component" :label-width="100">
<el-input v-model="formContent.component" />
</el-form-item>
<el-form-item label="排序" prop="sort" :label-width="100">
<el-input-number v-model="formContent.sort" />
</el-form-item>
<el-form-item label="类型" prop="type" :label-width="100">
<el-select v-model="formContent.type" placeholder="请选择资源类型">
<el-option
v-for="item in dictStore.getDictData('resourceType')"
:key="item.id"
:label="item.label"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label="描述" prop="remark">
<el-input v-model="formData.remark" :rows="2" type="textarea"/>
<el-form-item label="描述" prop="remark" :label-width="100">
<el-input v-model="formContent.remark" :rows="2" type="textarea"/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleCancel">取 消</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
<el-button @click="close()">取 消</el-button>
<el-button type="primary" @click="save()">确 定</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup name="ResourceDialog">
import { defineProps, defineEmits,watch,ref, type Ref } from 'vue';
import { dialogSmall } from '@/utils/elementBind'
import { ElMessage, FormInstance, FormItemRule } from 'element-plus'
import { defineProps, defineEmits,watch,ref, type Ref, computed } from 'vue';
import { dialogMiddle } from '@/utils/elementBind'
import { ElMessage, FormInstance, FormItemRule } from 'element-plus'
import { useDictStore } from '@/stores/modules/dict'
import { type Function } from '@/api/function/interface'
import {addFunction,updateFunction,} from '@/api/function/index.ts'
import IconSelect from '@/components/SelectIcon/index.vue'
import { functionList } from '@/api/function/functionExample.ts'
const value = ref()
const data = [
{
value: '1',
label: 'Level one 1',
children: [
{
value: '1-1',
label: 'Level two 1-1',
children: [
{
value: '1-1-1',
label: 'Level three 1-1-1',
},
],
},
],
},
{
value: '2',
label: 'Level one 2',
children: [
{
value: '2-1',
label: 'Level two 2-1',
children: [
{
value: '2-1-1',
label: 'Level three 2-1-1',
},
],
},
{
value: '2-2',
label: 'Level two 2-2',
children: [
{
value: '2-2-1',
label: 'Level three 2-2-1',
},
],
},
],
},
{
value: '3',
label: 'Level one 3',
children: [
{
value: '3-1',
label: 'Level two 3-1',
children: [
{
value: '3-1-1',
label: 'Level three 3-1-1',
},
],
},
{
value: '3-2',
label: 'Level two 3-2',
children: [
{
value: '3-2-1',
label: 'Level three 3-2-1',
},
],
},
],
},
]
const dictStore = useDictStore()
const props = defineProps<{
visible: boolean;
dialogTitle: string;
formData: {
id: string;//资源表Id
pid:string;//节点（0为根节点）
pids?:string;//节点上层所有节点
name: string;//名称
code:string;//资源标识
path:string;//路径
icon?:string;//图标
sort:number;//排序
type:number;//资源类型0-菜单、1-按钮、2-公共资源、3-服务间调用资源
remark?: string;//权限资源描述
state:number;//权限资源状态
create_By?:string;//创建人
create_Time?:string;//创建时间
update_By?:string;//更新人
update_Time?:string;//更新时间
};
}>();
// 定义弹出组件元信息
const dialogFormRef = ref()
function useMetaInfo() {
const dialogVisible = ref(false)
const titleType = ref('add')
const formContent = ref<Function.ResFunction>({
id: '',//资源表Id
pid:'',//节点（0为根节点）
pids:'',//节点上层所有节点
name: '',//名称
code:'',//资源标识
path:'',//路径
component:'',
icon:undefined as string | undefined, // 图标
sort:100,//排序
type:0,//资源类型0-菜单、1-按钮、2-公共资源、3-服务间调用资源
remark: '',//权限资源描述
state:1,//权限资源状态
})
return { dialogVisible, titleType, formContent }
}
const { dialogVisible, titleType, formContent } = useMetaInfo()
// 清空formContent
const resetFormContent = () => {
formContent.value = {
id: '',//资源表Id
pid:'',//节点（0为根节点）
pids:'',//节点上层所有节点
name: '',//名称
code:'',//资源标识
path:'',//路径
component:'',
icon:undefined,//图标
sort:100,//排序
type:0,//资源类型0-菜单、1-按钮、2-公共资源、3-服务间调用资源
remark:'',//权限资源描述
state:1,//权限资源状态
}
}
let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增菜单' : '编辑菜单'
})
// 定义规则
@@ -70,42 +190,61 @@
path :[{required:true,trigger:'blur',message:'菜单路径必填!'}],
type :[{required:true,trigger:'change',message:'菜单类型必选!'}]
})
const emit = defineEmits<{
(e: 'update:visible', value: boolean): void;
(e: 'submit', data: any): void;
}>();
const handleCancel = () => {
//重置表单内容
//取消表单校验状态
formRuleRef.value && formRuleRef.value.resetFields()
emit('update:visible', false); // 关闭对话框
};
const handleSubmit = () => {
try {
formRuleRef.value?.validate((valid: boolean) => {
if (valid) {
// 将表单数据转为json,发送到后端
let confirmFormData = JSON.parse(JSON.stringify(props.formData))
emit('submit', props.formData); // 提交表单数据
emit('update:visible', false); // 提交后关闭对话框
} else {
ElMessage.error('表单验证失败！')
}
})
}catch (error) {
console.error('验证过程中发生错误', error)
}
// 关闭弹窗
const close = () => {
dialogVisible.value = false
// 清空dialogForm中的值
resetFormContent()
// 重置表单
dialogFormRef.value?.resetFields()
}
// 当 props.visible 改变时，更新 formData
watch(() => props.visible, (newVal) => {
if (!newVal) {
// 这里可以重置表单数据，如果需要的话
// 保存数据
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
if (formContent.value.id) {
const result = await updateFunction(formContent.value);
if(result.code != 'A0000'){
ElMessage.error({ message: result.message})
}else{
ElMessage.success({ message: `${dialogTitle.value}成功！` })
}
} else {
const result = await addFunction(formContent.value);
if(result.code != 'A0000'){
ElMessage.error({ message: result.message})
}else{
ElMessage.success({ message: `${dialogTitle.value}成功！` })
}
}
close()
// 刷新表格
await props.refreshTable!()
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
});
}
// 打开弹窗，可能是新增，也可能是编辑
const open = async (sign: string, data: Function.ResFunction) => {
titleType.value = sign
dialogVisible.value = true
if (data.id) {
formContent.value = { ...data }
} else {
resetFormContent()
}
}
// 对外映射
defineExpose({ open })
const props = defineProps<{
refreshTable: (() => Promise<void>) | undefined;
}>()
</script>

165
frontend/src/views/authority/resource/index.vue
View File

@@ -3,64 +3,41 @@
<ProTable
ref='proTable'
:columns='columns'
:data='resourceData'
@selection-change="handleSelectionChange"
type="selection"
:pagination="false"
:request-api='getFunctionList'
>
<!-- :data='userData' -->
<!-- 表格 header 按钮 -->
<template #tableHeader>
<el-button type='primary' :icon='CirclePlus' @click="openAddDialog">新增</el-button>
<el-button type='danger' :icon='Delete' plain :disabled='!multipleSelection.length' @click="handleDelList"
>
<template #tableHeader='scope'>
<el-button type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
<el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
@click='batchDelete(scope.selectedListIds)'>
批量删除
</el-button>
</template>
<template>
</template>
<!-- 表格操作 -->
<template #operation='scope'>
<el-button type='primary' link :icon='EditPen' @click="openEditDialog(scope.row)">编辑</el-button>
<el-button type='primary' link :icon='Delete' @click="deleteResource(scope.row)">删除</el-button>
</template>
<el-button type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
<el-button type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
</template>
</ProTable>
</div>
<ResourcePopup :refresh-table='proTable?.getTableList' ref='resourcePopup' />
</template>
<script setup lang='tsx' name='useProTable'>
import { defineComponent,ref ,reactive} from 'vue'
import { ref ,reactive} from 'vue'
import { useHandleData } from '@/hooks/useHandleData'
import { type Function } from '@/api/function/interface'
import ProTable from '@/components/ProTable/index.vue'
import {CirclePlus, Delete, EditPen,HomeFilled} from '@element-plus/icons-vue'
import resourceDataList from '@/api/function/functionExample'
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { ElMessage, ElMessageBox, inputEmits } from 'element-plus';
import { useDictStore } from '@/stores/modules/dict'
import ResourcePopup from './components/resourcePopup.vue'
import {deleteFunction,getFunctionList} from '@/api/function/index.ts'
const dictStore = useDictStore()
let multipleSelection = ref<string[]>([]);
const resourceData = resourceDataList
const dialogFormVisible = ref(false)
const isEditMode = ref(false);
const dialogTitle = ref('新增菜单')
const dialogForm = ref<Function.ResFunction>({
id: '',
pid:'',
pids:'',
name: '',
code:'',
path:'',
icon:'',
sort:100,
type:0,
remark: '',
state:1,
children:[],
});
const resourcePopup = ref()
// ProTable 实例
const proTable = ref<ProTableInstance>()
@@ -105,102 +82,26 @@
},
{ prop: 'operation', label: '操作', fixed: 'right',minWidth: 200 },
])
// 打开 drawer(新增、查看、编辑)
// 打开新增对话框
const openAddDialog = () => {
dialogForm.value = {
id: '',
pid:'',
pids:'',
name: '',
code:'',
path:'',
icon:'',
sort:100,
remark: '',
state:1,
children: [],
};
isEditMode.value = true;
dialogTitle.value = '新增菜单';
dialogFormVisible.value = true; // 打开对话框
};
// 提交表单
const submitForm = () => {
if (isEditMode.value) {
const index = resourceData.value.findIndex((resource: { id: string }) => resource.id === dialogForm.value.id);
if (index !== -1) {
dialogForm.value.update_Time = formatDate(Date.now()); // 更新为当前时间
resourceData.value[index] = { ...dialogForm.value }; // 更新资源
}
} else {
resourceData.value.push({ ...dialogForm.value ,id:Date.now().toString()}); // 新增资源
}
dialogFormVisible.value = false; // 关闭对话框
};
// 打开编辑对话框
const openEditDialog = (resource: Resource.ResResourceList) => {
dialogForm.value = { ...resource }; // 复制资源数据以便编辑
isEditMode.value = true; // 设置为编辑模式
dialogTitle.value = '编辑菜单';
dialogFormVisible.value = true; // 显示对话框
};
//选中
// 处理选择变化
const handleSelectionChange = (selection:Resource.ResResourceList[]) => {
multipleSelection.value = selection.map(row => row.id); // 更新选中的行
};
//批量删除
const handleDelList =()=>{
// ElMessageBox.confirm(
// `是否删除所选菜单信息？`, // 使用模板字符串来插值
// '温馨提示',
// {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning',
// }
// )
// .then(() => {
// resourceData.value = resourceData.value.filter(item => !multipleSelection.value.includes(item.id));
// multipleSelection.value = []; // Clear selected rows
// ElMessage.success("批量删除成功");
// })
// 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<Function.ResFunction> = {}) => {
resourcePopup.value?.open(titleType, row)
}
// 删除用户信息
const handleDelete = async (params: Function.ResFunction) => {
await useHandleData(deleteFunction, [params.id] , `删除【${params.name}】用户`)
proTable.value?.getTableList()
}
// 批量删除用户信息
const batchDelete = async (id: string[]) => {
await useHandleData(deleteFunction, { id }, '删除所选用户信息')
proTable.value?.clearSelection()
proTable.value?.getTableList()
}
// 删除资源
const deleteResource = (params: Resource.ResResourceList) => {
// ElMessageBox.confirm(
// `是否删除【${params.name}】菜单？`, // 使用模板字符串来插值
// '温馨提示',
// {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning',
// }
// )
// .then(() => {
// resourceData.value = resourceData.value.filter(item => item.id !== params.id); // 过滤掉被删除的资源
// ElMessage({
// type: 'success',
// message: `删除${params.name}成功!`
// })
// })
};
const formatDate = (timestamp: string|number|Date) => {
const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
</script>

84
frontend/src/views/authority/role/components/permissionUnit.vue
View File

@@ -1,84 +0,0 @@
<template>
<!-- 权限信息弹出框 -->
<el-dialog :model-value="dialogVisible" :title="title" v-bind="dialogBig" @close="handleCancel" width="600" draggable>
<div>
<el-transfer v-model="value" :data="data.permissionList" :titles="['未具备的权限', '已具备的权限']"/>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleCancel">取消</el-button>
<el-button type="primary" @click="handleCancel">
保存
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import {dialogBig} from '@/utils/elementBind'
import {Role} from '@/api/role/interface'
const {dialogVisible, data} = defineProps<{
dialogVisible: boolean;
title: string;
<<<<<<< HEAD
data: Role.Permission;
}>()
=======
data: Role.ResRoleList;
}>
()
>>>>>>> bf8c6a1d00bd2c22d1a10896c5e8fc94ab9ed017
// const leftvalue = ref<Role.Permission[]>([])
// const rightvalue = ref<Role.Permission[]>([])
// const rightvalue = computed<Role.Permission[]>({
// get(){
// return data.permissionList?.filter(item => item.disabled) || []
// },
// set: (value: Role.Permission[]) => {
// if (data.permissionList) {
// for(let i = 0;i<value.length;i++){
// for(let j = 0;j<(data.permissionList?.length);j++){
// if(value[i].key === data.permissionList[j].key)
// {
// data.permissionList[j].disabled = value[i].disabled
// }
// }
// }
// }
// }
// })
// const leftvalue = computed<Role.Permission[]>({
// get(){
// return data.permissionList?.filter(item => item.disabled === false) || []
// },
// set: (value: Role.Permission[]) => {
// if (data.permissionList) {
// for(let i = 0;i<value.length;i++){
// for(let j = 0;j<(data.permissionList?.length);j++){
// if(value[i].key === data.permissionList[j].key)
// {
// data.permissionList[j].disabled = value[i].disabled
// }
// }
// }
// }
// }
// })
const value = ref()
const emit = defineEmits<{
(e: 'update:visible', value: boolean): void;
}>();
const handleCancel = () => {
emit('update:visible', false)
}
</script>

5
frontend/src/views/authority/role/components/rolePopup.vue
View File

@@ -4,7 +4,7 @@
<div>
<el-form :model="formContent"
ref='formRuleRef'
ref='dialogFormRef'
:rules='rules'
>
<el-form-item label="名称" prop='name' :label-width="100">
@@ -84,7 +84,8 @@ const resetFormContent = () => {
const formRuleRef = ref<FormInstance>()
//定义校验规则
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
name: [{ required: true, message: '名称必填！', trigger: 'blur' }],
name: [{ required: true, message: '名称必填！', trigger: 'blur' },
{ pattern: /^[\u4e00-\u9fa5]{1,20}$/, message: '名称为长度1-20的中文', trigger: 'blur' }],
code: [{ required: true, message: '编码必填！', trigger: 'blur' }],
})

187
frontend/src/views/authority/role/components/roleResourcePopup.vue Normal file
View File

@@ -0,0 +1,187 @@
<template>
<!-- 基础信息弹出框 -->
<el-dialog :model-value="dialogVisible" :title="dialogTitle" v-bind="dialogMiddle" @close="close" >
<div>
<el-form :model="formContent" ref='dialogFormRef'>
<el-tree
:data="functionList"
:props="defaultProps"
node-key="id"
:expand-on-click-node="false"
show-checkbox
:default-checked-keys="checkedKeysRef"
ref="treeRef"
>
</el-tree>
</el-form>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="close()">取消</el-button>
<el-button type="primary" @click="save()">
保存
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import{ ElMessage, ElTree, type FormInstance,type FormItemRule } from 'element-plus'
import type { ProTableInstance } from '@/components/ProTable/interface'
import { ref,computed, type Ref, nextTick } from 'vue'
import { Role } from '@/api/role/interface'
import {dialogMiddle,dialogSmall} from '@/utils/elementBind'
import { useDictStore } from '@/stores/modules/dict'
import { type Function } from '@/api/function/interface'
import {getRoleFunction,assignFunction} from '@/api/role/role'
// 保存数据
const treeRef = ref<InstanceType<typeof ElTree>>()
const functionList = ref<Function.ResFunction[]>([])
// 定义一个 ref 来存储已选中的 keys
const checkedKeysRef = ref<string[]>([]);
// 树形节点配置
const defaultProps = {
children: 'children',
label: 'name',
};
// 定义弹出组件元信息
const dialogFormRef = ref()
const dialogTitle = ref('授权资源')
const { dialogVisible, formContent } = useMetaInfo()
function useMetaInfo() {
const dialogVisible = ref(false)
const formContent = ref<Role.RoleBO>({
id: '', //角色类型ID
name: '', //角色类型名称
code: '', //角色代码
type: 2, //角色类型
remark:'', //角色描述
state:1,
})
return { dialogVisible, formContent }
}
// 清空formContent
const resetFormContent = () => {
formContent.value = {
id: '', //角色类型ID
name: '', //角色类型名称
code: '', //角色代码
type: 2, //角色类型
remark:'', //角色描述
state:1,
}
}
// 关闭弹窗
const close = () => {
dialogVisible.value = false
// 清空dialogForm中的值
resetFormContent()
// 重置表单
dialogFormRef.value?.resetFields()
}
// 保存数据
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
if (formContent.value.id) {
// 获取勾选的节点 ID
const checkedKeys = treeRef.value?.getCheckedKeys() || [];
console.log('获取勾选的节点 ID',checkedKeys);
// 将 checkedKeys 转换为字符串数组
const checkedKeysAsString: string[] = checkedKeys.map(key => String(key));
// 假设 RoleFunctionId 是一个对象，且需要 id 属性
const roleFunctionIdObject: Role.RoleFunctionId = {
id: checkedKeysAsString
};
console.log('roleFunctionIdObject',roleFunctionIdObject);
const result = await assignFunction(formContent.value,roleFunctionIdObject);
if(result.code != 'A0000'){
ElMessage.error({ message: result.message})
}else{
ElMessage.success({ message: `${dialogTitle.value}成功！` })
}
}
close()
// 刷新表格
await props.refreshTable!()
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
}
// 打开弹窗，可能是新增，也可能是编辑
const open = async (sign: string, data: Role.RoleBO, AllFunction: Function.ResFunction[]) => {
// 重置树状结构
functionList.value = []
checkedKeysRef.value = []
const result = await getRoleFunction(data);
if (result.code === 'A0000') {
// 将 result.data 转换为 Function.ResFunction[] 类型
const roleFunctions = result.data as Function.ResFunction[];
console.log('roleFunctions',roleFunctions)
// 获取 AllFunction 中所有层级的 id
const allIds = getAllIds(AllFunction);
// 匹配 roleFunctions 中的 id 并设置 checkedKeys
const checkedKeys = allIds.filter(id => roleFunctions.some(roleFunc => roleFunc.id === id));
console.log('checkedKeys',checkedKeys)
// 设置 functionList 和 checkedKeys
functionList.value = AllFunction;
checkedKeysRef.value = checkedKeys;
// nextTick(() => {
// // 触发一次更新，确保表单中的数据被更新
// dialogFormRef.value?.validate();
// });
} else {
ElMessage.error({ message: result.message });
}
dialogVisible.value = true;
if (data.id) {
formContent.value = { ...data };
} else {
resetFormContent();
}
}
const getAllIds = (functions: Function.ResFunction[]): string[] => {
const ids: string[] = [];
const traverse = (func: Function.ResFunction) => {
ids.push(func.id);
if (func.children && func.children.length > 0) {
func.children.forEach(child => traverse(child));
}
};
functions.forEach(func => traverse(func));
return ids;
};
// 对外映射
defineExpose({ open })
const props = defineProps<{
refreshTable: (() => Promise<void>) | undefined;
}>()
</script>

59
frontend/src/views/authority/role/index.vue
View File

@@ -24,41 +24,27 @@
</ProTable>
</div>
<RolePopup :refresh-table='proTable?.getTableList' ref='rolePopup' />
<RoleResourcePopup :refresh-table='proTable?.getTableList' ref='roleResourcePopup' />
</template>
<script setup lang='tsx' name='useRole'>
import { type Role } from '@/api/role/interface'
import { type Function } from '@/api/function/interface'
import { useHandleData } from '@/hooks/useHandleData'
import ProTable from '@/components/ProTable/index.vue'
import type{ ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, Delete, EditPen, Share, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
import { useDictStore } from '@/stores/modules/dict'
import {getRoleList,deleteRole} from '@/api/role/role'
import {getRoleList,deleteRole,getFunctionList} from '@/api/role/role'
import RolePopup from './components/rolePopup.vue'
import { reactive, ref } from 'vue'
const { rolePopupVisible, permissionUnitVisible, rolePopupTitle, permissionUnitTitle, rolePopupData, permissionUnitData } = useCount()
function useCount() {
const rolePopupVisible = ref(false)
const permissionUnitVisible = ref(false)
const rolePopupTitle = ref()
const permissionUnitTitle = ref()
const rolePopupData = ref<Role.RoleBO>({} as Role.RoleBO)
const permissionUnitData = ref<Role.RoleBO>({} as Role.RoleBO)
// const permissionUnitData = ref<Role.Permission[]>([])
return { rolePopupVisible, permissionUnitVisible, rolePopupTitle, permissionUnitTitle, rolePopupData, permissionUnitData }
}
const dictStore = useDictStore()
let openType = ''
import RoleResourcePopup from './components/roleResourcePopup.vue'
import { onMounted, reactive, ref } from 'vue'
import {useDictStore} from '@/stores/modules/dict'
const rolePopup = ref()
const roleResourcePopup = ref()
const dictStore = useDictStore()
// ProTable 实例
const proTable = ref<ProTableInstance>()
const functionList = ref<Function.ResFunction[]>([])
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
const getTableList = (params: any) => {
@@ -69,6 +55,14 @@ const getTableList = (params: any) => {
return getRoleList(newParams)
}
// 初始化时获取角色列表
onMounted(async () => {
const response = await getFunctionList()
functionList.value = response.data as unknown as Function.ResFunction[]
//console.log(functionList.value)
})
// 表格配置项
const columns = reactive<ColumnProps<Role.RoleBO>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
@@ -94,14 +88,21 @@ const columns = reactive<ColumnProps<Role.RoleBO>[]>([
prop: 'state',
label: '状态',
minWidth: 100,
enum: dictStore.getDictData('state'),
fieldNames: { label: 'label', value: 'code' },
render: scope => {
return (
<el-tag type={scope.row.state ? 'success' : 'danger'} > {scope.row.state ? '正常' : '删除'} </el-tag>
)
},
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 330 },
{ prop: 'operation', label: '操作', fixed: 'right', width: 250 },
])
// 删除角色信息
const deleteAccount = async (params: Role.RoleBO) => {
if (params.id) {
await useHandleData(deleteRole, { id:[params.id] }, '删除所选角色信息')
await useHandleData(deleteRole, [params.id], '删除所选角色信息')
proTable.value?.clearSelection()
proTable.value?.getTableList()
}
@@ -109,7 +110,7 @@ const deleteAccount = async (params: Role.RoleBO) => {
// 批量删除角色信息
const batchDelete = async (id: string[]) => {
await useHandleData(deleteRole, { id }, '删除所选角色信息')
await useHandleData(deleteRole, id , '删除所选角色信息')
proTable.value?.clearSelection()
proTable.value?.getTableList()
}
@@ -117,7 +118,11 @@ const batchDelete = async (id: string[]) => {
// 打开 drawer(新增、查看、编辑)
const openDrawer = (titleType: string, row: Partial<Role.RoleBO> = {}) => {
rolePopup.value?.open(titleType, row)
if(titleType==='设置权限'){
roleResourcePopup.value?.open(titleType, row,functionList.value)
}else{
rolePopup.value?.open(titleType, row)
}
}
</script>

4
frontend/src/views/authority/user/index.vue
View File

@@ -133,7 +133,7 @@
return (<el-tag type={tagType}>{tagText}</el-tag>);
}
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 330 },
{ prop: 'operation', label: '操作', fixed: 'right', width: 250 },
])
@@ -195,7 +195,7 @@ const openDialog = (titleType: string, row: Partial<User.ResUser> = {}) => {
// 批量删除用户信息
const batchDelete = async (id: string[]) => {
await useHandleData(deleteUser, { id }, '删除所选用户信息')
await useHandleData(deleteUser, id , '删除所选用户信息')
proTable.value?.clearSelection()
proTable.value?.getTableList()
}

12
frontend/src/views/machine/device/components/devicePopup.vue
View File

@@ -136,8 +136,8 @@
<el-row :gutter="24" >
<el-col :span="8">
<el-form-item label='是否加密' prop='encryption'>
<el-select v-model="formContent.encryption" clearable placeholder="请选择是否加密" @change="handleEncryptionChange">
<el-form-item label='是否加密' prop='encryptionFlag'>
<el-select v-model="formContent.encryptionFlag" clearable placeholder="请选择是否加密" @change="handleEncryptionChange">
<el-option label="是" :value="1"></el-option>
<el-option label="否" :value="0"></el-option>
</el-select>
@@ -267,7 +267,7 @@ import { el } from 'element-plus/es/locale'
protocol: '',
ip: '',
port: 0,
encryption: 1,
encryptionFlag: 1,
reCheckNum:0,
state: 1,
})
@@ -293,7 +293,7 @@ import { el } from 'element-plus/es/locale'
protocol: '',
ip: '',
port: 0,
encryption: 1,
encryptionFlag: 1,
reCheckNum:0,
state: 1,
}
@@ -326,7 +326,7 @@ import { el } from 'element-plus/es/locale'
port:[{ required: true, message: '端口号必填！', trigger: 'blur' },
{ pattern: /^\d+$/, message: '端口号格式错误', trigger: 'blur' }],
manufacturer: [{ required: true, message: '生产厂家必选！', trigger: 'change' }],
encryption: [{ required: true, message: '是否加密必选！', trigger: 'change' }],
encryptionFlag: [{ required: true, message: '是否加密必选！', trigger: 'change' }],
protocol: [{ required: true, message: '通讯协议必选！', trigger: 'change' }],
})
@@ -381,7 +381,7 @@ import { el } from 'element-plus/es/locale'
dialogVisible.value = true
if(data.encryption === 1){
if(data.encryptionFlag === 1){
handleEncryptionChange(1)
}else{
handleEncryptionChange(0)

2
frontend/src/views/machine/device/index.vue
View File

@@ -169,5 +169,7 @@ const importFile=async ()=>{
}
deviceImportExcel.value?.acceptParams(params)
}
</script>

2
frontend/src/views/system/dictionary/dictTree/index.vue
View File

@@ -83,7 +83,7 @@
// 删除字典类型
const handleDelete = async (params: Dict.ResDictTree) => {
console.log(params)
//console.log(params)
await useHandleData(deleteDictTree, params, `删除【${params.name}】树形字典类型`)
proTable.value?.getTableList()
}