增加门禁授权操作

apps/web-antd/src/views/sis/personLibImg/data.tsx

@@ -1,4 +1,4 @@
-import type { FormSchemaGetter, VbenFormSchema } from '#/adapter/form';
+import { type FormSchemaGetter, type VbenFormSchema } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { DictEnum } from '@vben/constants';
@@ -20,7 +20,7 @@ const labelText: VbenFormSchema = {
     valueField: 'id',
     // immediate: true,
     api: async () => {
-      if(!libArr || libArr.length == 0){
+      if (!libArr || libArr.length == 0) {
         const params: PersonLibQuery = {
           pageNum: 1,
           pageSize: 500,
@@ -35,11 +35,11 @@ const labelText: VbenFormSchema = {
             );
           item.labelText = (
             <span>
-            {item.libName} {tag}
-          </span>
+              {item.libName} {tag}
+            </span>
           );
         });
-        libArr = res.rows
+        libArr = res.rows;
       }
       return libArr;
     },

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>

apps/web-antd/src/views/sis/personLibImg/index.vue

@@ -17,6 +17,7 @@ import { commonDownloadExcel } from '#/utils/file/download';
 
 import { columns, querySchema } from './data';
 import personLibImgModal from './personLibImg-modal.vue';
+import imgAuthModal from './imgAuth-modal.vue';
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -80,6 +81,10 @@ const [PersonLibImgModal, modalApi] = useVbenModal({
   connectedComponent: personLibImgModal,
 });
 
+const [ImgAuthModal, authModalApi] = useVbenModal({
+  connectedComponent: imgAuthModal,
+});
+
 function handleAdd() {
   modalApi.setData({});
   modalApi.open();
@@ -123,7 +128,10 @@ function handleDownloadExcel() {
 /**
  * 对图像进行门禁授权
  */
-function accessControlAuth() {}
+function accessControlAuth() {
+  authModalApi.setData({});
+  authModalApi.open();
+}
 </script>
 
 <template>
@@ -190,5 +198,6 @@ function accessControlAuth() {}
       </template>
     </BasicTable>
     <PersonLibImgModal @reload="tableApi.query()" />
+    <ImgAuthModal @reload="tableApi.query()" />
   </Page>
 </template>