增加门禁授权操作

apps/web-antd/src/views/sis/personLibImg/imgAuth-modal.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { useBeforeCloseDiff } from '#/utils/popup';
+import type { TransferProps, TreeProps } from 'ant-design-vue';
+import { Switch, Transfer, Tree } from 'ant-design-vue';
+import { queryTree } from '#/api/sis/accessControl';
+import type { TreeNode } from '#/api/common';
+
+const emit = defineEmits<{ reload: [] }>();
+const title = ref('门禁授权');
+
+const { onBeforeClose } = useBeforeCloseDiff({});
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[700px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+
+    /*const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? personLibImgUpdate(data) : personLibImgAdd(data));*/
+
+    // resetInitialized();
+    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[]>([]);
+
+onMounted(() => {
+  queryAcTree();
+});
+
+function queryAcTree() {
+  queryTree().then((res = []) => {
+    dataSource.value = res;
+  });
+}
+
+const onChecked = (
+  e: Parameters<TreeProps['onCheck']>[1] | Parameters<TreeProps['onSelect']>[1],
+  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]"
+        :data-source="dataSource"
+        :render="(item) => item.title"
+        :show-select-all="true"
+        :showSearch="true"
+      >
+        <template #children="{ direction, selectedKeys, onItemSelect }">
+          <Tree
+            v-if="direction === 'left'"
+            block-node
+            checkable
+            check-strictly
+            default-expand-all
+            :checked-keys="[...selectedKeys, ...targetKeys]"
+            :tree-data="dataSource"
+            @check="
+              (_, props) => {
+                onChecked(
+                  props,
+                  [...selectedKeys, ...targetKeys],
+                  onItemSelect,
+                );
+              }
+            "
+            @select="
+              (_, props) => {
+                onChecked(
+                  props,
+                  [...selectedKeys, ...targetKeys],
+                  onItemSelect,
+                );
+              }
+            "
+          />
+        </template>
+      </Transfer>
+    </div>
+  </BasicModal>
+</template>