|
|
@@ -0,0 +1,367 @@
|
|
|
+<template>
|
|
|
+ <el-drawer
|
|
|
+ v-model="isDrawer"
|
|
|
+ :width="width"
|
|
|
+ placement="right"
|
|
|
+ :title="title"
|
|
|
+ @close="handleReset"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ :model="formParams"
|
|
|
+ :rules="rules"
|
|
|
+ ref="formRef"
|
|
|
+ label-placement="left"
|
|
|
+ :label-width="80"
|
|
|
+ >
|
|
|
+ <el-form-item label="角色编码" prop="roleCode">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入角色编码"
|
|
|
+ v-model="formParams.roleCode"
|
|
|
+ :disabled="formParams.roleId ? true : false"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="角色名称" prop="roleName">
|
|
|
+ <el-input placeholder="请输入角色名称" v-model="formParams.roleName" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="角色权限" prop="permissionIds">
|
|
|
+ <div class="mark-left"></div>
|
|
|
+ <el-card shadow="hover" class="permission-card">
|
|
|
+ <div class="permission-name">场景权限</div>
|
|
|
+ <el-space>
|
|
|
+ <el-checkbox v-model:checked="isSpread" @change="packHandle">展开/收起</el-checkbox>
|
|
|
+ <el-checkbox v-model:checked="isAll" @change="handleCheckAll">全选/全不选</el-checkbox>
|
|
|
+ </el-space>
|
|
|
+ <el-divider />
|
|
|
+ <div style="height: 25vh">
|
|
|
+ <el-scrollbar>
|
|
|
+ <el-tree
|
|
|
+ ref="treeRef"
|
|
|
+ show-checkbox
|
|
|
+ node-key="code"
|
|
|
+ :data="treeData"
|
|
|
+ :props="treeProps"
|
|
|
+ @check="checkedTree"
|
|
|
+ @node-click="clickNode"
|
|
|
+ />
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <div style="position: relative; margin-top: 10px; width: 100%">
|
|
|
+ <div class="mark-left"></div>
|
|
|
+ <el-card shadow="hover" class="permission-card">
|
|
|
+ <div class="permission-name">功能权限</div>
|
|
|
+ <el-divider />
|
|
|
+ <div style="height: 10vh">
|
|
|
+ <el-scrollbar>
|
|
|
+ <el-tree
|
|
|
+ ref="modeTreeRef"
|
|
|
+ show-checkbox
|
|
|
+ node-key="key"
|
|
|
+ :data="modeTreeData"
|
|
|
+ @check="checkedModeTree"
|
|
|
+ />
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input type="textarea" placeholder="请输入备注" v-model="formParams.remark" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <el-space>
|
|
|
+ <el-button @click="handleReset">重置</el-button>
|
|
|
+ <el-button type="primary" :loading="subLoading" @click="formSubmit">提交</el-button>
|
|
|
+ </el-space>
|
|
|
+ </template>
|
|
|
+ </el-drawer>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+ import { ref, onMounted, nextTick, computed } from 'vue';
|
|
|
+ import { ElMessage } from 'element-plus';
|
|
|
+ import type { formParamsType, userFormParamsType } from './types';
|
|
|
+
|
|
|
+ import { addAdminRole, editAdminRole, roleAdminInfo } from '@/api/system/role';
|
|
|
+ import { getTreeValues } from '@/utils/helper/treeHelper';
|
|
|
+ import useScene from '@/views/system-config/scene-manage/use-scene';
|
|
|
+
|
|
|
+ const sceneInfos = useScene();
|
|
|
+ const { tableData, getSceneDetail } = sceneInfos;
|
|
|
+
|
|
|
+ const rules = {
|
|
|
+ roleCode: {
|
|
|
+ required: true,
|
|
|
+ message: '角色编码不能为空',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ roleName: {
|
|
|
+ required: true,
|
|
|
+ message: '角色名称不能为空',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ const treeProps = { label: 'name' };
|
|
|
+
|
|
|
+ const treeData = computed(() => {
|
|
|
+ const newList: any[] = [];
|
|
|
+ if (tableData.value && tableData.value.length) {
|
|
|
+ for (let i = 0; i < tableData.value.length; i++) {
|
|
|
+ const data = tableData.value[i];
|
|
|
+ if (data.children && data.children.length) {
|
|
|
+ const treeItem = {
|
|
|
+ id: data.id,
|
|
|
+ code: data.id,
|
|
|
+ name: data.name,
|
|
|
+ children: data
|
|
|
+ .labelList!.map((item) => {
|
|
|
+ return {
|
|
|
+ id: item.id,
|
|
|
+ code: item.code,
|
|
|
+ name: item.name,
|
|
|
+ children: data
|
|
|
+ .children!.filter((children) => children.sceneLabelId === item.id)
|
|
|
+ .map((children) => {
|
|
|
+ return {
|
|
|
+ id: children.id,
|
|
|
+ code: children.code,
|
|
|
+ name: children.name,
|
|
|
+ isShop: true,
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ };
|
|
|
+ })
|
|
|
+ .filter((label) => label.children.length),
|
|
|
+ };
|
|
|
+ newList.push(treeItem);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return newList;
|
|
|
+ });
|
|
|
+
|
|
|
+ const modeList = [
|
|
|
+ {
|
|
|
+ key: 10,
|
|
|
+ id: 1,
|
|
|
+ label: 10,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 11,
|
|
|
+ id: 2,
|
|
|
+ label: 11,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 12,
|
|
|
+ id: 3,
|
|
|
+ label: 12,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ const emit = defineEmits(['change']);
|
|
|
+
|
|
|
+ const props = defineProps({
|
|
|
+ title: {
|
|
|
+ type: String,
|
|
|
+ default: '添加角色',
|
|
|
+ },
|
|
|
+ width: {
|
|
|
+ type: Number,
|
|
|
+ default: 450,
|
|
|
+ },
|
|
|
+ permissionList: {
|
|
|
+ type: Array,
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const defaultValueRef = () => ({
|
|
|
+ roleId: null,
|
|
|
+ roleName: '',
|
|
|
+ roleCode: '',
|
|
|
+ remark: '',
|
|
|
+ permissions: [],
|
|
|
+ permissionKeys: [],
|
|
|
+ });
|
|
|
+
|
|
|
+ const message = ElMessage;
|
|
|
+ const checkedKeys = ref<number[]>([]);
|
|
|
+ const formRef: any = ref(null);
|
|
|
+ const isDrawer = ref(false);
|
|
|
+ const subLoading = ref(false);
|
|
|
+ const isSpread = ref(false);
|
|
|
+ const isAll = ref(false);
|
|
|
+ const treeRef = ref();
|
|
|
+ const expandedKeys = ref();
|
|
|
+ const selectedNodeKey = ref<string>('');
|
|
|
+ const modeTreeData = computed(() => (selectedNodeKey.value ? modeList : []));
|
|
|
+
|
|
|
+ const formParams = ref<userFormParamsType>(defaultValueRef());
|
|
|
+
|
|
|
+ function clickNode(tree, nodeInfo, _, __) {
|
|
|
+ if (nodeInfo.isShop) {
|
|
|
+ selectedNodeKey.value = tree.code;
|
|
|
+ } else {
|
|
|
+ selectedNodeKey.value = '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function treeNodeExpand(status) {
|
|
|
+ for (var i = 0; i < treeRef.value.store._getAllNodes().length; i++) {
|
|
|
+ treeRef.value.store._getAllNodes()[i].expanded = status;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function packHandle(value) {
|
|
|
+ if (value) {
|
|
|
+ treeNodeExpand(true);
|
|
|
+ expandedKeys.value = props?.permissionList?.map((item: any) => item.key as string) as [];
|
|
|
+ } else {
|
|
|
+ expandedKeys.value = [];
|
|
|
+ treeNodeExpand(false);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleCheckAll(value) {
|
|
|
+ if (!value) {
|
|
|
+ formParams.value.permissions = [];
|
|
|
+ treeRef.value!.setCheckedKeys([]);
|
|
|
+ } else {
|
|
|
+ formParams.value.permissions = getAllIds(
|
|
|
+ props?.permissionList as { key: number; children: [] }[],
|
|
|
+ );
|
|
|
+ const keys = getTreeValues(props.permissionList || [], 'key');
|
|
|
+ treeRef.value!.setCheckedKeys(keys);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function getAllIds(list: { key: number; children: [] }[] = [], ids: number[] = []) {
|
|
|
+ for (let item of list) {
|
|
|
+ !ids.includes(item.key) && ids.push(item.key);
|
|
|
+ if (item.children && item.children.length) getAllIds(item.children, ids);
|
|
|
+ }
|
|
|
+ return ids;
|
|
|
+ }
|
|
|
+
|
|
|
+ function checkedTree(tree, checkedInfo) {
|
|
|
+ console.log(tree);
|
|
|
+ console.log(checkedInfo);
|
|
|
+
|
|
|
+ const nodes = checkedInfo.checkedNodes;
|
|
|
+ const halfKeys = checkedInfo.halfCheckedKeys;
|
|
|
+ formParams.value.permissions = checkedInfo.halfCheckedKeys;
|
|
|
+ formParams.value.permissions = nodes
|
|
|
+ .filter((item) => item.isShop)
|
|
|
+ .map((node) => {
|
|
|
+ return {
|
|
|
+ workshopCode: node.code,
|
|
|
+ permissionId: 0,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ checkedKeys.value = keys;
|
|
|
+ formParams.value.permissionKeys = halfKeys;
|
|
|
+ }
|
|
|
+
|
|
|
+ function checkedModeTree() {}
|
|
|
+
|
|
|
+ function openDrawer(roleId?) {
|
|
|
+ if (roleId) {
|
|
|
+ formParams.value.roleId = roleId;
|
|
|
+ getInfo();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ isDrawer.value = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ function closeDrawer() {
|
|
|
+ isDrawer.value = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ function formSubmit() {
|
|
|
+ formRef.value.validate((valid) => {
|
|
|
+ if (!valid) {
|
|
|
+ return message.error('请填写完整信息');
|
|
|
+ }
|
|
|
+ if (formParams.value.roleId) {
|
|
|
+ editAdminRole(formParams.value).then((_) => {
|
|
|
+ message.success('编辑成功');
|
|
|
+ emit('change');
|
|
|
+ handleReset();
|
|
|
+ closeDrawer();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ addAdminRole(formParams.value).then((_) => {
|
|
|
+ message.success('添加成功');
|
|
|
+ emit('change');
|
|
|
+ handleReset();
|
|
|
+ closeDrawer();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleReset() {
|
|
|
+ formRef.value.resetFields();
|
|
|
+ formParams.value = Object.assign(formParams.value, defaultValueRef());
|
|
|
+ treeRef.value!.setCheckedKeys([]);
|
|
|
+ }
|
|
|
+
|
|
|
+ function getInfo() {
|
|
|
+ roleAdminInfo({ roleId: formParams.value.roleId }).then((res) => {
|
|
|
+ const info = {
|
|
|
+ roleId: res.id,
|
|
|
+ roleName: res.roleName,
|
|
|
+ roleCode: res.roleCode,
|
|
|
+ remark: res.remark,
|
|
|
+ permissions: res.permissionIds || [],
|
|
|
+ permissionKeys: res.permissionKeys || [],
|
|
|
+ };
|
|
|
+ formParams.value = info;
|
|
|
+ isDrawer.value = true;
|
|
|
+ nextTick(() => {
|
|
|
+ treeRef.value?.setCheckedKeys(res.permissionIds);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ getSceneDetail();
|
|
|
+ });
|
|
|
+
|
|
|
+ defineExpose({
|
|
|
+ openDrawer,
|
|
|
+ closeDrawer,
|
|
|
+ });
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .mark-left {
|
|
|
+ position: absolute;
|
|
|
+ width: 4px;
|
|
|
+ height: 28px;
|
|
|
+ top: 0;
|
|
|
+ background-color: #1890ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .permission-name {
|
|
|
+ height: 28px;
|
|
|
+ font-weight: 500;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-divider--horizontal) {
|
|
|
+ margin: 12px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .permission-card {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.permission-card .el-card__body) {
|
|
|
+ padding-top: 0;
|
|
|
+ }
|
|
|
+</style>
|
sunhongyao341504