health.admin/src/components/SupplyProject.vue

<script setup lang="ts">
import { ref } from 'vue';
import { type VxeGridInstance, type VxeGridProps } from 'vxe-pc-ui';
import type { SupplierModel } from '@/model/care.model';
type FollowModel = Partial<SupplierModel>;
const props = defineProps<{ data: FollowModel }>();
// 定义居家项目表格数据
const homeData = ref<Array<{ project: string }>>([]);
// 定义线下项目表格数据
const offlineData = ref<Array<{ project: string }>>([]);
// 居家项目表格配置
const homeGridOptions = reactive<VxeGridProps>({
  border: true,
  autoResize: true,
  columns: [
    { type: 'seq', title: '序号', width: 80 },
    { field: 'project', title: '居家项目', width: 320 },
  ],
  data: homeData.value,
});
// 线下项目表格配置
const offlineGridOptions = reactive<VxeGridProps>({
  border: true,
  autoResize: true,
  columns: [
    { type: 'seq', title: '序号', width: 80 },
    { field: 'project', title: '线下项目', width: 320 },
  ],
  data: offlineData.value,
});
// 表格引用
const homeGridRef = ref<VxeGridInstance>();
const offlineGridRef = ref<VxeGridInstance>();
onMounted(() => {
  if (props?.data?.offlineCPTypes?.length > 0) {
    props.data.offlineCPTypes.forEach((item: string) => {
      offlineData.value.push({ project: item });
    });
  }else{
    offlineData.value = [];
  }
  if (props?.data?.onlineCPTypes?.length > 0) {
    props.data.onlineCPTypes.forEach((item: string) => {
      homeData.value.push({ project: item });
    });
  }else{
    homeData.value = [];
  }
});
</script>

<template>
  <div class="tables-container">
    <div class="table-wrapper">
      <vxe-grid ref="homeGridRef" v-bind="homeGridOptions" />
    </div>
    <div class="table-wrapper">
      <vxe-grid ref="offlineGridRef" v-bind="offlineGridOptions" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.tables-container {
  display: flex;
  padding: 20px;
  height: 600px;
}

.table-wrapper {
  flex: 1;
}
</style>