<script lang="ts" setup>
|
import type { TreeActionType } from '@jnpf/ui';
|
|
import { nextTick, onMounted, reactive, ref, toRefs, unref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicTree } from '@jnpf/ui';
|
|
import { getAuthValues, updateAuthList } from '#/api/permission/auth';
|
|
interface State {
|
title: string;
|
activeStep: number;
|
maxStep: number;
|
treeData: any[];
|
loading: boolean;
|
objectId: string;
|
dataForm: any;
|
params: any;
|
moduleAuthorizeTree: any[];
|
buttonAuthorizeTree: any[];
|
columnAuthorizeTree: any[];
|
formAuthorizeTree: any[];
|
resourceAuthorizeTree: any[];
|
moduleAllData: any[];
|
buttonAllData: any[];
|
columnAllData: any[];
|
formAllData: any[];
|
resourceAllData: any[];
|
moduleIdsTemp: any[];
|
key: number;
|
btnLoading: boolean;
|
}
|
|
const props = defineProps({
|
id: { type: String, default: '' },
|
type: { type: String, default: '' },
|
objectType: { type: String, default: 'organize' },
|
});
|
|
const { createMessage } = useMessage();
|
const treeRef = ref<Nullable<TreeActionType>>(null);
|
const state = reactive<State>({
|
title: '',
|
activeStep: 0,
|
maxStep: 4,
|
treeData: [],
|
loading: false,
|
objectId: '',
|
dataForm: {
|
objectType: '',
|
module: [],
|
button: [],
|
column: [],
|
form: [],
|
resource: [],
|
roleIds: [],
|
},
|
params: {
|
type: 'module',
|
moduleIds: '',
|
},
|
moduleAuthorizeTree: [],
|
buttonAuthorizeTree: [],
|
columnAuthorizeTree: [],
|
formAuthorizeTree: [],
|
resourceAuthorizeTree: [],
|
moduleAllData: [],
|
buttonAllData: [],
|
columnAllData: [],
|
formAllData: [],
|
resourceAllData: [],
|
moduleIdsTemp: [],
|
key: 0,
|
btnLoading: false,
|
});
|
const { activeStep, maxStep, treeData, loading, key, btnLoading } = toRefs(state);
|
|
defineExpose({ handlePrev, handleNext, handleExpandAll, handleCheckAll, handleSubmit, activeStep, maxStep, btnLoading, loading });
|
|
function init() {
|
resetState();
|
state.objectId = props.id;
|
state.dataForm.objectType = props.objectType || 'organize';
|
state.maxStep = 4;
|
state.activeStep = 0;
|
if (!props.id) return;
|
getAuthorizeList();
|
}
|
function resetState() {
|
state.activeStep = 0;
|
state.btnLoading = false;
|
state.dataForm = {
|
objectType: 'organize',
|
module: [],
|
button: [],
|
column: [],
|
form: [],
|
resource: [],
|
roleIds: [],
|
};
|
state.params = {
|
type: 'module',
|
moduleIds: '',
|
};
|
state.moduleIdsTemp = [];
|
}
|
function getAuthorizeList() {
|
state.loading = true;
|
state.treeData = [];
|
state.key = Date.now();
|
getTree().setCheckedKeys([]);
|
getAuthValues(state.objectId, { ...state.params, objectType: props.objectType }).then((res) => {
|
const key = getKey();
|
state[`${key}AuthorizeTree`] = res.data.list || [];
|
state[`${key}AllData`] = res.data.all || [];
|
state.treeData = state[`${key}AuthorizeTree`];
|
const parentKeys = getTree().getParentKeys(state.treeData, true);
|
let dataIds = [...new Set([...res.data.ids, ...state.dataForm[key]])];
|
dataIds = dataIds.filter((o) => state[`${key}AllData`].includes(o));
|
setDataFormValue(dataIds);
|
const checkedKeys = dataIds.filter((o) => !parentKeys.includes(o));
|
nextTick(() => {
|
getTree().setCheckedKeys(checkedKeys);
|
state.loading = false;
|
});
|
});
|
}
|
function getKey() {
|
if (state.activeStep === 0) return 'module';
|
if (state.activeStep === 1) return 'button';
|
if (state.activeStep === 2) return 'column';
|
if (state.activeStep === 3) return 'form';
|
if (state.activeStep === 4) return 'resource';
|
return 'module';
|
}
|
function onCheck(checkedKeys, e) {
|
const halfCheckedKeys = e.halfCheckedKeys;
|
const dataIds = [...checkedKeys, ...halfCheckedKeys];
|
setDataFormValue(dataIds);
|
}
|
function setDataFormValue(dataIds) {
|
const key = getKey();
|
state.dataForm[key] = dataIds;
|
if (state.activeStep === 0) state.moduleIdsTemp = state.dataForm[key];
|
}
|
function handlePrev() {
|
state.activeStep -= 1;
|
if (state.activeStep === 0) state.moduleIdsTemp = [];
|
handleInitData();
|
}
|
function handleNext() {
|
state.activeStep += 1;
|
handleInitData();
|
}
|
function handleInitData() {
|
const key = getKey();
|
state.params.type = key;
|
state.params.moduleIds = state.moduleIdsTemp.toString();
|
getAuthorizeList();
|
}
|
function handleCheckAll(boo) {
|
getTree().checkAll(boo);
|
nextTick(() => {
|
let checkedKeys: any[] = [];
|
if (state.activeStep === 6) {
|
const checkedNodes = getTree().getCheckedNodes();
|
checkedKeys = checkedNodes.map((o) => o.id);
|
} else {
|
checkedKeys = getTree().getCheckedKeys() as any[];
|
}
|
setDataFormValue(checkedKeys);
|
});
|
}
|
function handleExpandAll(boo) {
|
getTree().expandAll(boo);
|
}
|
function getTree() {
|
const tree = unref(treeRef);
|
if (!tree) throw new Error('tree is null!');
|
return tree;
|
}
|
function handleSubmit() {
|
state.btnLoading = true;
|
updateAuthList(state.objectId, state.dataForm)
|
.then((res) => {
|
createMessage.success(res.msg);
|
state.btnLoading = false;
|
})
|
.catch(() => {
|
state.btnLoading = false;
|
});
|
}
|
|
onMounted(() => {
|
init();
|
});
|
</script>
|
<template>
|
<div class="auth-main-container">
|
<a-steps v-model:current="activeStep" type="navigation" size="small">
|
<a-step title="菜单权限" disabled />
|
<a-step title="按钮权限" disabled />
|
<a-step title="列表权限" disabled />
|
<a-step title="表单权限" disabled />
|
<a-step title="数据权限" disabled />
|
</a-steps>
|
<div class="main h-full overflow-hidden">
|
<BasicTree
|
:tree-data="treeData"
|
ref="treeRef"
|
checkable
|
block-node
|
click-row-to-expand
|
:default-expand-level="1"
|
:field-names="{ key: 'id' }"
|
:loading="loading"
|
:key="key"
|
@check="onCheck"
|
class="overflow-auto" />
|
</div>
|
</div>
|
</template>
|
