feat: 车辆收费接口对接

2025-07-21 20:57:15 +08:00
parent bc36b98f9a
commit e229a1ad1c
17 changed files with 1206 additions and 788 deletions
--- a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/arrangement-modal.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/arrangement-modal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, reactive } from 'vue';

 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
@@ -8,9 +8,13 @@ import { cloneDeep } from '@vben/utils';
 import { useVbenForm } from '#/adapter/form';
 import { arrangementAdd, arrangementInfo, arrangementUpdate } from '#/api/property/attendanceManagement/arrangement';
 import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
-
-import { modalSchema } from './data';
-
+import {
+  useVbenVxeGrid,
+  type VxeGridProps
+} from '#/adapter/vxe-table';
+import { modalSchema,attendanceColumns } from './data';
+import { Radio, Button,Calendar,DatePicker,Form,Input,Select,FormItem } from 'ant-design-vue';
+import unitPersonModal from './unit-person-modal.vue';
 const emit = defineEmits<{ reload: [] }>();

 const isUpdate = ref(false);
@@ -40,10 +44,12 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
    currentGetter: defaultFormValueGetter(formApi),
  },
 );
-
+const [UnitPersonModal, unitPersonmodalApi] = useVbenModal({
+  connectedComponent: unitPersonModal,
+});
 const [BasicModal, modalApi] = useVbenModal({
  // 在这里更改宽度
-  class: 'w-[550px]',
+  class: 'w-[70%]',
  fullscreenButton: false,
  onBeforeClose,
  onClosed: handleClosed,
@@ -53,7 +59,6 @@ const [BasicModal, modalApi] = useVbenModal({
      return null;
    }
    modalApi.modalLoading(true);
-
    const { id } = modalApi.getData() as { id?: number | string };
    isUpdate.value = !!id;

@@ -61,8 +66,7 @@ const [BasicModal, modalApi] = useVbenModal({
      const record = await arrangementInfo(id);
      await formApi.setValues(record);
    }
-    await markInitialized();
-
+    // await markInitialized();
    modalApi.modalLoading(false);
  },
 });
@@ -91,11 +95,159 @@ async function handleClosed() {
  await formApi.resetForm();
  resetInitialized();
 }
+
+
+const formModel = reactive({
+  group: '',
+  type: '',
+  dateType: 'long',
+  dateSingle: null,
+  dateLong: null,
+  dateRange: [null, null],
+  startDate:'',
+  endDate:''
+});
+
+// mock 表格数据
+const tableData = ref([
+  { dept: 'xx部门', users: ['张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三'] },
+  { dept: 'xx部门', users: ['张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三'] },
+  { dept: '', users: [] },
+]);
+const staticData = [
+  { id: 1, dept: 'xx部门', name: '张三' },
+  { id: 2, dept: 'yy部门', name: '李四' },
+];
+const totalSelected = computed(() => tableData.value.reduce((sum, row) => sum + row.users.length, 0));
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+  columns: attendanceColumns,
+  // columns,
+  // height: 'auto',
+  keepSource: true,
+  data:staticData,
+  pagerConfig: {},
+  proxyConfig: {
+    // ajax: {
+    //   query: async ({ page }, formValues = {}) => {
+    //     return await arrangementList({
+    //       pageNum: page.currentPage,
+    //       pageSize: page.pageSize,
+    //       ...formValues,
+    //     });
+    //   },
+    // },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'property-arrangement-index',
+  toolbarConfig: {
+    // 隐藏"刷新/重置"按钮（对应 redo）
+    refresh: false,
+    zoom: false,       // 显示全屏
+    custom: false, // 隐藏列设置
+  },
+};
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  gridOptions,
+});
+async function handleEdit(row: any){
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+}
+async function handleDelete(row: any) {
+  console.log(12);
+}
+
+
+function handleAdd() {
+  unitPersonmodalApi.setData({});
+  unitPersonmodalApi.open();
+}
 </script>

 <template>
-  <BasicModal :title="title">
-    <BasicForm />
+ <BasicModal :title="title">
+    <!-- 顶部表单区 -->
+    <Form :model="formModel" layout="horizontal" class="mb-4">
+      <div class="grid grid-cols-2 gap-x-8 gap-y-2">
+        <FormItem label="选择考勤组" required class="mb-0">
+            <Select v-model:value="formModel.group" placeholder="请选择"/>
+        </FormItem>
+        <FormItem label="考勤类型" required class="mb-0">
+          <Input v-model:value="formModel.type" placeholder="请输入" />
+        </FormItem>
+        <FormItem label="排班日期" class="col-span-2 mb-0">
+          <radio-group v-model:value="formModel.dateType" class="mr-4">
+            <radio value="single">
+              <span>
+                单个日期
+              <DatePicker/>
+              </span>
+           </radio>
+            <radio value="long">
+              <span>
+                从此日起长期有效
+              <DatePicker/>
+              </span>
+              </radio>
+            <radio value="range">
+              <span>
+                在此期间有效
+                <DatePicker v-model:value="formModel.startDate" class="ml-2" />
+                <span class="mx-2">~</span>
+                <DatePicker v-model:value="formModel.endDate" />
+              </span>
+            </radio>
+          </radio-group>
+        </FormItem>
+      </div>
+    </Form>
+    <!-- 考勤组人员表格区 -->
+    <div class="mb-2">
+      <div class="flex items-center mb-2">
+        <span>考勤组人员（已选 <span class="text-red-500">{{ totalSelected }}</span> 人）</span>
+        <a-button type="primary" size="small" class="ml-4" @click="handleAdd">+ 添加人员</a-button>
+      </div>
+      <BasicTable>
+          <template #action="{ row }">
+            <Space>
+              <ghost-button
+                v-access:code="['property:arrangement:edit']"
+                @click.stop="handleEdit(row)"
+              >
+                {{ $t('pages.common.edit') }}
+              </ghost-button>
+              <Popconfirm
+                placement="left"
+                title="确认删除？"
+                @confirm="handleDelete(row)"
+              >
+                <ghost-button
+                  danger
+                  v-access:code="['property:arrangement:remove']"
+                  @click.stop=""
+                >
+                  {{ $t('pages.common.delete') }}
+                </ghost-button>
+              </Popconfirm>
+            </Space>
+          </template>
+        </BasicTable>
+    </div>
+    <UnitPersonModal />
+    <!-- 底部按钮区 -->
  </BasicModal>
 </template>

--- a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/calendarView.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/calendarView.vue
@@ -1,9 +1,11 @@
 <script lang="ts" setup>
-import { Radio, Select, Button, Table,Badge,Calendar,DatePicker } from 'ant-design-vue';
+import { Radio, Button,Calendar,DatePicker } from 'ant-design-vue';
 import type { RadioChangeEvent,BadgeProps, } from 'ant-design-vue';
 import {ref} from 'vue';
 import { Dayjs } from 'dayjs';
-const value = ref<Dayjs>();
+import arrangementModal from './arrangement-modal.vue';
+import {useVbenModal} from '@vben/common-ui';
+
 const emit = defineEmits<{
  (e: 'changeView',value:boolean):void
 }>();
@@ -11,7 +13,6 @@ const props = defineProps<{
  viewMode:'calender' | 'schedule'
 }>();
 const selectedDate = ref();
-const currentDate = ref(new Date());
 // 切换视图模式
 function handleViewModeChange(e: RadioChangeEvent): void {
  // 将父组件的isCalenderView变为true
@@ -69,6 +70,13 @@ function customHeader() {
  // 返回你想要的VNode或null
  return null; // 什么都不显示
 }
+const [ArrangementModal, modalApi] = useVbenModal({
+  connectedComponent: arrangementModal,
+});
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
 </script>
 <template>
  <div class="h-full flex flex-col">
@@ -84,7 +92,7 @@ function customHeader() {
    </div>
    </div>
      <div>
-       <Button type="primary">新增排班</Button>
+       <Button type="primary" @click="handleAdd">新增排班</Button>
      </div>
    </div>
    <div class="flex-1 p-1">
@@ -110,6 +118,7 @@ function customHeader() {
    </template>
      </Calendar>
    </div>
+    <ArrangementModal @reload=""/>
  </div>
 </template>
 <style scoped>
--- a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/data.ts
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/data.ts
@@ -57,52 +57,137 @@ export const querySchema: FormSchemaGetter = () => [
    label: '状态：0-未生效，1-已生效',
  },
 ];
-
+export const unitQuerySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'scheduleName',
+    label: '姓名',
+  },
+  {
+    component: 'Input',
+    fieldName: 'groupId',
+    label: '电话号',
+  },
+];
 // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
 // export const columns: () => VxeGridProps['columns'] = () => [
 export const columns: VxeGridProps['columns'] = [
-  { type: 'checkbox', width: 60 },
  {
-    title: '主键ID',
+    title: '序号',
    field: 'id',
+    slots:{
+      default:({rowIndex}) => {
+        return (rowIndex + 1).toString();
+      }
+    },
+    width:60
+  },
+  {
+    title: '人员',
+    field: 'scheduleName',
+    width:120,
+    // width: 'auto',
+  },
+  {
+    title: '单位',
+    field: 'scheduleName',
+    width:'auto',
  },
  {
    title: '排班名称',
    field: 'scheduleName',
+    minWidth:120
  },
  {
-    title: '考勤组ID',
+    title: '考勤组',
    field: 'groupId',
+    minWidth:120
  },
  {
-    title: '排班类型：1-固定班制，2-排班制',
+    title: '考勤类型',
    field: 'scheduleType',
+    width: 'auto',
  },
  {
-    title: '日期类型：1-单个日期，2-长期有效，3-期间有效',
+    title: '考勤时间',
    field: 'dateType',
-  },
-  {
-    title: '开始日期',
-    field: 'startDate',
-  },
-  {
-    title: '结束日期(仅date_type=3时有效)',
-    field: 'endDate',
-  },
-  {
-    title: '状态：0-未生效，1-已生效',
-    field: 'status',
+    minWidth:200
+
  },
  {
    field: 'action',
    fixed: 'right',
    slots: { default: 'action' },
    title: '操作',
-    width: 180,
+    width: 'auto',
  },
 ];

+// 考勤组人员
+export const attendanceColumns: VxeGridProps['columns'] = [
+  {
+    title: '序号',
+    field: 'id',
+    slots:{
+      default:({rowIndex}) => {
+        return (rowIndex + 1).toString();
+      }
+    },
+    width:60
+  },
+  {
+    title: '单位',
+    field: 'scheduleName',
+    width:'auto',
+  },
+  {
+    title: '已选人数',
+    field: 'scheduleName',
+    width:'auto',
+  },
+  {
+    title: '人员',
+    field: 'dateType',
+    minWidth:200
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 'auto',
+  },
+];
+
+// 单位人员
+export const unitColumns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '序号',
+    field: 'id',
+    slots:{
+      default:({rowIndex}) => {
+        return (rowIndex + 1).toString();
+      }
+    },
+    width:60
+  },
+  {
+    title: '姓名',
+    field: 'scheduleName',
+    minWidth:120
+  },
+  {
+    title: '所属单位',
+    field: 'scheduleName',
+    width:'auto',
+  },
+  {
+    title: '电话',
+    field: 'groupId',
+    minWidth:120
+  }
+];
 export const modalSchema: FormSchemaGetter = () => [
  {
    label: '主键ID',
--- a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/scheduleView.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/scheduleView.vue
@@ -1,25 +1,22 @@
 <script lang="ts" setup>
-import { Radio, Select, Button, Table,Calendar } from 'ant-design-vue';
+import { Radio, Button, Calendar } from 'ant-design-vue';
 import type { RadioChangeEvent } from 'ant-design-vue';
 import {ref} from 'vue';
 import { Dayjs } from 'dayjs';
-import { columns, querySchema } from './data';
+import { columns } from './data';
 import {
  useVbenVxeGrid,
-  vxeCheckboxChecked,
  type VxeGridProps
 } from '#/adapter/vxe-table';
 import { getVxePopupContainer } from '@vben/utils';
 import {
-  arrangementExport,
  arrangementList,
  arrangementRemove,
 } from '#/api/property/attendanceManagement/arrangement';
 import arrangementModal from './arrangement-modal.vue';
 import type { ArrangementForm } from '#/api/property/attendanceManagement/arrangement/model';
-import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
-import { Modal, Popconfirm, Space } from 'ant-design-vue';
-
+import { Page, useVbenModal } from '@vben/common-ui';
+import { Popconfirm, Space } from 'ant-design-vue';
 const emit = defineEmits<{(e:'changeView',value:boolean):void}>();
 const props = defineProps<{
  viewMode:'calender' | 'schedule'
@@ -67,18 +64,10 @@ const gridOptions: VxeGridProps = {
  // 表格全局唯一表示 保存列配置需要用到
  id: 'property-arrangement-index',
  toolbarConfig: {
-    // 控制工具栏整体是否显示（默认显示）
-    show: true,
    // 隐藏"刷新/重置"按钮（对应 redo）
    refresh: false,
-    // 隐藏"全屏"按钮
-    fullscreen: false,
-    // 隐藏"列设置"按钮（对应 setting）
-    columns: false,
-    // 隐藏"表格尺寸"按钮（对应 size）
-    size: undefined,
-    // 其他可能的按钮（如导出等，按需配置）
-    // export: false, // 如果有导出按钮，也可以隐藏
+    zoom: false,       // 显示全屏
+    custom: false, // 隐藏列设置
  },
 };
 const [BasicTable, tableApi] = useVbenVxeGrid({
@@ -104,20 +93,25 @@ async function handleDelete(row: Required<ArrangementForm>) {
 }
 </script>
 <template>
-  <div class="h-full">
-    <Radio.Group v-model:value="props.viewMode" @change="handleViewModeChange">
-          <Radio.Button value="calender">日历视图</Radio.Button>
-          <Radio.Button value="schedule">班表视图</Radio.Button>
-    </Radio.Group>
-    <div class="flex p-2 h-full">
+  <div class="h-full ">
+    <div class="flex justify-between">
+      <Radio.Group v-model:value="props.viewMode" @change="handleViewModeChange">
+            <Radio.Button value="calender">日历视图</Radio.Button>
+            <Radio.Button value="schedule">班表视图</Radio.Button>
+      </Radio.Group>
      <div>
+       <Button type="primary" @click="handleAdd">新增排班</Button>
+      </div>
+    </div>
+    <div class="flex p-2 h-full">
+      <div style="padding-top: 48.4px;">
        <div :style="{ width: '300px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
         <Calendar v-model:value="value" :fullscreen="false" :mode="'month'" @panelChange="onPanelChange"/>
        </div>
      </div>
      <div class="flex-1">
        <Page :auto-content-height="true">
-        <BasicTable >
+        <BasicTable>
          <template #action="{ row }">
            <Space>
              <ghost-button
@@ -146,6 +140,7 @@ async function handleDelete(row: Required<ArrangementForm>) {
        </Page>
      </div>
    </div>
+    <ArrangementModal @reload="tableApi.query()"/>
  </div>
 </template>
 <style>
--- a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/unit-person-modal.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/unit-person-modal.vue
@@ -0,0 +1,326 @@
+<script setup lang="ts">
+import { computed, ref, reactive } from 'vue';
+import { SyncOutlined } from '@ant-design/icons-vue';
+import { Tree, InputSearch, Skeleton, Empty, Button } from 'ant-design-vue';
+
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { arrangementAdd, arrangementInfo, arrangementUpdate } from '#/api/property/attendanceManagement/arrangement';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+import {
+  useVbenVxeGrid,
+  type VxeGridProps
+} from '#/adapter/vxe-table';
+import { modalSchema,unitColumns,unitQuerySchema } from './data';
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+
+const emit = defineEmits<{ reload: [] }>();
+const selectDeptId = ref<string[]>([]);
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+const showSearch = ref(true);
+const searchValue = ref('');
+const selectedDeptIds = ref<string[]>([]);
+const showTreeSkeleton = ref(false);
+
+// mock 部门树数据
+const deptTree = ref([
+  {
+    id: '1',
+    label: '公司',
+    children: [
+      { id: '1-1', label: '研发部', children: [
+        { id: '1-1-1', label: '前端组' },
+        { id: '1-1-2', label: '后端组' },
+      ] },
+      { id: '1-2', label: '市场部' },
+      { id: '1-3', label: '人事部' },
+    ],
+  },
+]);
+
+function handleReload() {
+  showTreeSkeleton.value = true;
+  setTimeout(() => {
+    showTreeSkeleton.value = false;
+  }, 800);
+}
+
+const filteredDeptTree = computed(() => {
+  if (!searchValue.value) return deptTree.value;
+  // 递归过滤树
+  function filter(tree: any[]): any[] {
+    return tree
+      .map(node => {
+        if (node.label.includes(searchValue.value)) return node;
+        if (node.children) {
+          const children = filter(node.children);
+          if (children.length) return { ...node, children };
+        }
+        return null;
+      })
+      .filter(Boolean);
+  }
+  return filter(deptTree.value);
+});
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: unitQuerySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
+  // 不需要直接删除
+  // fieldMappingTime: [
+  //  [
+  //    'createTime',
+  //    ['params[beginTime]', 'params[endTime]'],
+  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+  //  ],
+  // ],
+};
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 80,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    }
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[70%]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+    console.log(12)
+    const { id } = modalApi.getData() as { id?: number | string };
+    console.log(2)
+
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+    console.log(3)
+
+      const record = await arrangementInfo(id);
+      await formApi.setValues(record);
+    }
+    console.log(4)
+    
+    // await markInitialized();
+    console.log(5)
+
+    modalApi.modalLoading(false);
+    console.log(6)
+
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? arrangementUpdate(data) : arrangementAdd(data));
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+
+
+const formModel = reactive({
+  group: '',
+  type: '',
+  dateType: 'long',
+  dateSingle: null,
+  dateLong: null,
+  dateRange: [null, null],
+  startDate:'',
+  endDate:''
+});
+
+// mock 表格数据
+const tableData = ref([
+  { dept: 'xx部门', users: ['张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三'] },
+  { dept: 'xx部门', users: ['张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三'] },
+  { dept: '', users: [] },
+]);
+const staticData = [
+  { id: 1, dept: 'xx部门', name: '张三' },
+  { id: 2, dept: 'yy部门', name: '李四' },
+];
+const totalSelected = computed(() => tableData.value.reduce((sum, row) => sum + row.users.length, 0));
+
+function addRow() {
+  tableData.value.push({ dept: '', users: [] });
+}
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+  columns: unitColumns,
+  // columns,
+  // height: 'auto',
+  keepSource: true,
+  data:staticData,
+  pagerConfig: {},
+  proxyConfig: {
+    // ajax: {
+    //   query: async ({ page }, formValues = {}) => {
+    //     return await arrangementList({
+    //       pageNum: page.currentPage,
+    //       pageSize: page.pageSize,
+    //       ...formValues,
+    //     });
+    //   },
+    // },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'property-arrangement-index',
+  toolbarConfig: {
+    // 隐藏"刷新/重置"按钮（对应 redo）
+    refresh: false,
+    zoom: false,       // 显示全屏
+    custom: false, // 隐藏列设置
+  },
+};
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+async function handleEdit(row: any){
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+}
+async function handleDelete(row: any) {
+  console.log(12);
+}
+async function loadDetail() {
+}
+</script>
+
+<template>
+ <BasicModal :title="title">
+    <div class="mb-2 flex">
+    <div>
+      <Skeleton :loading="showTreeSkeleton" :paragraph="{ rows: 8 }" active class="p-[8px]">
+        <div class="bg-background z-100 sticky left-0 top-0 p-[8px] flex items-center">
+          <InputSearch
+            v-model:value="searchValue"
+            placeholder="搜索部门"
+            size="small"
+            style="flex:1;"
+          >
+            <template #enterButton>
+              <Button type="text" @click="handleReload">
+                <SyncOutlined class="text-primary" />
+              </Button>
+            </template>
+          </InputSearch>
+        </div>
+        <div class="h-full overflow-x-hidden px-[8px]">
+          <Tree
+            v-if="filteredDeptTree.length > 0"
+            v-model:selectedKeys="selectedDeptIds"
+            :field-names="{ title: 'label', key: 'id' }"
+            :show-line="{ showLeafIcon: false }"
+            :tree-data="filteredDeptTree"
+            :virtual="false"
+            default-expand-all
+          >
+            <template #title="{ label }">
+              <span v-if="searchValue && label.indexOf(searchValue) > -1">
+                {{ label.substring(0, label.indexOf(searchValue)) }}
+                <span style="color: #f50">{{ searchValue }}</span>
+                {{ label.substring(label.indexOf(searchValue) + searchValue.length) }}
+              </span>
+              <span v-else>{{ label }}</span>
+            </template>
+          </Tree>
+          <div v-else class="mt-5">
+            <Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="无部门数据" />
+          </div>
+        </div>
+      </Skeleton>
+    </div>
+    <div class="flex-1">
+        <BasicTable>
+        <template #action="{ row }">
+            <Space>
+            <ghost-button
+                v-access:code="['property:arrangement:edit']"
+                @click.stop="handleEdit(row)"
+            >
+                {{ $t('pages.common.edit') }}
+            </ghost-button>
+            <Popconfirm
+                placement="left"
+                title="确认删除？"
+                @confirm="handleDelete(row)"
+            >
+                <ghost-button
+                danger
+                v-access:code="['property:arrangement:remove']"
+                @click.stop=""
+                >
+                {{ $t('pages.common.delete') }}
+                </ghost-button>
+            </Popconfirm>
+            </Space>
+        </template>
+        </BasicTable>
+    </div>
+    </div>
+  </BasicModal>
+</template>