gas-injection/src/views/vent/dataCenter/user/UserPermissionDrawer.vue

<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    title="API授权"
    :width="adaptiveWidth"
    @ok="handleSubmit"
    :showFooter="showFooter"
    destroyOnClose
  >
    <BasicTree
      :checkedKeys="checkedKeys"
      :expandedKeys="expandedKeys"
      :selectedKeys="selectedKeys"
      checkable
      :tree-data="treeData"
      ref="treeRef"
      :clickRowToExpand="false"
      @check="onCheck"
      @select="onTreeNodeSelect"
    >
      <template #title="{ title, key }">
        <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
        <template v-else>{{ title }}</template>
      </template>
    </BasicTree>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { defineComponent, ref, computed, unref, useAttrs } from 'vue';
import { BasicTree, TreeItem } from '/src/components/Tree';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { getAPILIst } from './user.api';
import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
// 声明Emits
const emit = defineEmits(['success', 'register']);
const showFooter = ref(true);
const selectedKeys = ref([]);
const expandedKeys = ref([]);
const checkedKeys = ref([]);
const treeData = [
  {
    title: 'parent 1',
    key: '0-0',
  },
  {
    title: '测试api',
    key: '0-1',
  },
  {
    title: '测试api1',
    key: '0-2',
  },
  {
    title: '测试api2',
    key: '0-3',
  },
];
//表单赋值
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  showFooter.value = data?.showFooter ?? true;
  setDrawerProps({ confirmLoading: false, showFooter: showFooter.value });
});
const { adaptiveWidth } = useDrawerAdaptiveWidth();

//提交事件
async function handleSubmit() {
  try {
    setDrawerProps({ confirmLoading: true });
    closeDrawer();
    //刷新列表
    emit('success');
  } finally {
    setDrawerProps({ confirmLoading: false });
  }
}
</script>