157 lines
3.8 KiB
Vue
157 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue';
|
|
|
|
import { useVbenModal } from '@vben/common-ui';
|
|
import { useBeforeCloseDiff } from '#/utils/popup';
|
|
import { Switch, Transfer, Tree } from 'ant-design-vue';
|
|
import { queryTree } from '#/api/sis/accessControl';
|
|
import { authRecordAdd } from '#/api/sis/authRecord';
|
|
import type { TreeNode } from '#/api/common';
|
|
import type { AuthRecordForm } from '#/api/sis/authRecord/model';
|
|
|
|
const emit = defineEmits<{ reload: [] }>();
|
|
const title = ref('门禁授权');
|
|
const { onBeforeClose } = useBeforeCloseDiff({});
|
|
|
|
const [BasicModal, modalApi] = useVbenModal({
|
|
// 在这里更改宽度
|
|
class: 'w-[700px]',
|
|
fullscreenButton: false,
|
|
onBeforeClose,
|
|
onClosed: handleClosed,
|
|
onConfirm: handleConfirm,
|
|
onOpenChange: async (isOpen) => {
|
|
if (!isOpen) {
|
|
checked.value = false;
|
|
targetKeys.value = []
|
|
}
|
|
}
|
|
});
|
|
|
|
async function handleConfirm() {
|
|
try {
|
|
modalApi.lock(true);
|
|
const { ids, libId } = modalApi.getData() as {
|
|
ids?: number[] | string[];
|
|
libId: number | string;
|
|
};
|
|
const params: AuthRecordForm = {
|
|
libId,
|
|
imgIds: ids,
|
|
acIds: targetKeys.value,
|
|
issue: checked.value
|
|
};
|
|
const res = await authRecordAdd(params);
|
|
console.log(res);
|
|
emit('reload');
|
|
modalApi.close();
|
|
} catch (error) {
|
|
console.error(error);
|
|
} finally {
|
|
modalApi.lock(false);
|
|
}
|
|
}
|
|
|
|
async function handleClosed() {
|
|
// await formApi.resetForm();
|
|
// resetInitialized();
|
|
}
|
|
|
|
const checked = ref(false);
|
|
const targetKeys = ref<string[]>([]);
|
|
const dataSource = ref<TreeNode[]>([]);
|
|
const treeData = ref<any[]>([]);
|
|
|
|
onMounted(() => {
|
|
queryAcTree();
|
|
});
|
|
|
|
function handleTreeData(treeData: TreeNode[] | any[], datasource: TreeNode[]) {
|
|
treeData.forEach((item) => {
|
|
item.title = item.label;
|
|
item.key = item.code;
|
|
// 如果不是门禁，则
|
|
if (item.level != 5) {
|
|
item.disabled = true;
|
|
}
|
|
datasource.push(item);
|
|
if (item.children) {
|
|
handleTreeData(item.children, datasource);
|
|
}
|
|
});
|
|
}
|
|
|
|
function queryAcTree() {
|
|
queryTree().then((res = []) => {
|
|
const datasource: TreeNode[] = [];
|
|
handleTreeData(res, datasource);
|
|
dataSource.value = datasource;
|
|
treeData.value = res;
|
|
});
|
|
}
|
|
|
|
const onChecked = (
|
|
e: any,
|
|
checkedKeys: string[],
|
|
onItemSelect: (n: any, c: boolean) => void,
|
|
) => {
|
|
const { eventKey } = e.node;
|
|
onItemSelect(eventKey, !isChecked(checkedKeys, eventKey));
|
|
};
|
|
|
|
function isChecked(
|
|
selectedKeys: (string | number)[],
|
|
eventKey: string | number,
|
|
) {
|
|
return selectedKeys.indexOf(eventKey) !== -1;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<BasicModal :title="title">
|
|
<div class="p-4">
|
|
<span>AI盒子授权: </span>
|
|
<Switch v-model:checked="checked" />
|
|
</div>
|
|
<div class="p-4">
|
|
<Transfer
|
|
v-model:target-keys="targetKeys"
|
|
class="tree-transfer h-[400px] overflow-auto"
|
|
:data-source="dataSource"
|
|
:render="(item) => item.title"
|
|
>
|
|
<template #children="{ direction, selectedKeys, onItemSelect }">
|
|
<Tree
|
|
v-if="direction === 'left'"
|
|
block-node
|
|
checkable
|
|
check-strictly
|
|
:show-line="true"
|
|
default-expand-all
|
|
:checked-keys="[...selectedKeys, ...targetKeys]"
|
|
:tree-data="treeData"
|
|
@check="
|
|
(_, props) => {
|
|
onChecked(
|
|
props,
|
|
[...selectedKeys, ...targetKeys],
|
|
onItemSelect,
|
|
);
|
|
}
|
|
"
|
|
@select="
|
|
(_, props) => {
|
|
onChecked(
|
|
props,
|
|
[...selectedKeys, ...targetKeys],
|
|
onItemSelect,
|
|
);
|
|
}
|
|
"
|
|
/>
|
|
</template>
|
|
</Transfer>
|
|
</div>
|
|
</BasicModal>
|
|
</template>
|