feat: 工程师端 床位管理 和 设备管理

src/views/biz/engineer/bed/FormModal.vue

@@ -0,0 +1,90 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    destroyOnClose
+    @register="registerModal"
+    :title="getTitle"
+    :width="width"
+    @ok="handleSubmit"
+    :showFooter="true"
+  >
+    <div class="!pl-8 !pt-2">
+      <BasicForm @register="registerForm" layout="vertical" />
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { dataFormSchema } from './data';
+
+  import { engineerBedAdd, engineerBedEdit, engineerBedDetail } from '@/api/biz/engineer/bedApi';
+
+  const emit = defineEmits(['success', 'register']);
+
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增床位' : '编辑床位'));
+  const width = '600px';
+  const isUpdate = ref(false);
+  const rowId = ref();
+
+  const { createMessage } = useMessage();
+  const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
+    labelWidth: 150,
+    schemas: dataFormSchema,
+    showActionButtonGroup: false,
+    baseColProps: {
+      span: 24,
+    },
+    wrapperCol: {
+      span: 22,
+    },
+  });
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async data => {
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+
+    if (unref(isUpdate)) {
+      const resData = await engineerBedDetail(data.record.id);
+      rowId.value = resData.id;
+      resData.cardNo = {
+        input: resData.cardNo,
+        dictValue: resData.cardType,
+      };
+      await setFieldsValue({
+        ...resData,
+      });
+    } else {
+      await setFieldsValue({
+        cardNo: {
+          input: '',
+          dictValue: 'pb_card_sfz',
+        },
+      });
+    }
+  });
+
+  // 提交按钮事件
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      const cardInfo = values.cardNo;
+      values.cardNo = cardInfo?.input;
+      values.cardType = cardInfo?.dictValue;
+      !unref(isUpdate)
+        ? await engineerBedAdd({ ...values })
+        : await engineerBedEdit({ ...values, id: rowId.value });
+      !unref(isUpdate) ? createMessage.success('新增成功！') : createMessage.success('编辑成功！');
+      closeModal();
+      emit('success', {
+        isUpdate: unref(isUpdate),
+        values: { ...values, id: rowId.value },
+      });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>

src/views/biz/engineer/bed/data.ts

@@ -0,0 +1,151 @@
+import { BasicColumn } from '@/components/Table';
+import { FormSchema } from '/@/components/Form';
+import { listDictModel } from '@/api/common';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '设备编号',
+    dataIndex: 'unique',
+    align: 'left',
+  },
+  {
+    title: '设备厂家',
+    dataIndex: 'manufacturer',
+    align: 'left',
+  },
+  {
+    title: '设备型号',
+    dataIndex: 'model',
+    align: 'left',
+  },
+  {
+    title: '序列号',
+    dataIndex: 'serialNumber',
+    align: 'left',
+  },
+  {
+    title: '设备类型',
+    dataIndex: 'deviceType',
+    align: 'left',
+  },
+  {
+    title: '泵类型',
+    dataIndex: 'pumpType',
+    align: 'left',
+  },
+  {
+    title: '传染标识',
+    dataIndex: 'infectiousDiseases',
+    align: 'left',
+  },
+  {
+    title: '使用时间',
+    dataIndex: 'useDate',
+    align: 'left',
+    width: 180,
+    sorter: true,
+  },
+  {
+    title: '生产时间',
+    dataIndex: 'produceDate',
+    align: 'left',
+    width: 180,
+    sorter: true,
+  },
+  {
+    title: '保修期限(年)',
+    dataIndex: 'warrantyPeriod',
+    align: 'left',
+  },
+];
+
+// 表单新增编辑
+export const dataFormSchema: FormSchema[] = [
+  {
+    field: 'PlainTitle',
+    component: 'PlainTitle',
+    defaultValue: '新增床位',
+    colProps: {
+      span: 24,
+    },
+  },
+  {
+    label: '病区属性',
+    field: 'wardPropertyName',
+    required: true,
+    component: 'ApiSelect',
+    componentProps: {
+      api: listDictModel,
+      placeholder: '请选择病区属性',
+      params: {
+        dictCode: 'pb_blood',
+      },
+    },
+  },
+  {
+    label: '病区',
+    field: 'wardId',
+    required: true,
+    component: 'ApiSelect',
+    componentProps: {
+      api: listDictModel,
+      placeholder: '请选择病区',
+      params: {
+        dictCode: 'pb_blood',
+      },
+    },
+  },
+  {
+    label: '床位',
+    field: 'bedName',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入床位',
+      maxLength: 60,
+    },
+  },
+  {
+    field: 'PlainTitle1',
+    component: 'PlainTitle',
+    defaultValue: '绑定设备',
+    colProps: {
+      span: 24,
+    },
+  },
+  {
+    label: '设备编号',
+    field: 'deviceId',
+    required: true,
+    component: 'ApiSelect',
+    componentProps: {
+      api: listDictModel,
+      placeholder: '请选择设备编号',
+    },
+  },
+  {
+    label: '设备信息',
+    field: 'deviceName',
+    component: 'PlainText',
+    colProps: {
+      span: 12,
+    },
+  },
+  {
+    label: '设备类型',
+    field: 'deviceModel',
+    component: 'PlainText',
+    colProps: {
+      span: 12,
+    },
+  },
+  {
+    label: '设备备注',
+    field: 'remark',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入设备备注',
+    },
+  },
+];

src/views/biz/engineer/dialysis/FormDrawerSift.vue

@@ -0,0 +1,75 @@
+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    destroyOnClose
+    @register="registerDrawer"
+    :title="getTitle"
+    :width="width"
+    @ok="handleSubmit"
+    :showFooter="true"
+    cancelText=""
+    okText="筛选"
+    :showCancelBtn="false"
+  >
+    <BasicForm @register="registerForm" layout="vertical" class="!px-6 !pt-2" />
+    <template #insertFooter>
+      <a-button @click="handleCancel" class="mr-2"> 重置 </a-button>
+    </template>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { siftFormSchema } from './data';
+
+  const emit = defineEmits(['success', 'register']);
+
+  const getTitle = ref(`筛选条件`);
+  const width = '25%';
+  const [registerForm, { setFieldsValue, resetFields, validate, getFieldsValue }] = useForm({
+    schemas: siftFormSchema,
+    showActionButtonGroup: false,
+    baseColProps: {
+      span: 24,
+    },
+  });
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async data => {
+    await resetFields();
+    setDrawerProps({ confirmLoading: false });
+    console.log('🚀 ~ file: FormDrawer.vue:49 ~ data:', data);
+    const resData = {} as any;
+    (data.record.length &&
+      data.record.map(ele => {
+        console.log('🚀 ~ file: FormDrawerSift.vue:46 ~ ele:', ele);
+        resData[ele.field] = ele.value;
+      })) ||
+      [];
+    console.log('🚀 ~ file: FormDrawerSift.vue:44 ~ resData:', resData);
+    await setFieldsValue({ ...resData });
+  });
+
+  // 提交按钮事件
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setDrawerProps({ confirmLoading: true });
+      closeDrawer();
+      emit('success', values);
+    } finally {
+      setDrawerProps({ confirmLoading: false });
+    }
+  }
+
+  async function handleCancel() {
+    console.log('关闭', await getFieldsValue());
+    await resetFields();
+  }
+</script>
+<style lang="less" scoped>
+  ::v-deep(.ant-picker) {
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+</style>

src/views/biz/engineer/dialysis/FormModal.vue

@@ -0,0 +1,94 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    destroyOnClose
+    @register="registerModal"
+    :title="getTitle"
+    :width="width"
+    @ok="handleSubmit"
+    :showFooter="true"
+  >
+    <div class="!pl-8 !pt-4">
+      <BasicForm @register="registerForm" layout="vertical" />
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { dataFormSchema } from './data';
+
+  import {
+    engineerDialysisDeviceAdd,
+    engineerDialysisDeviceEdit,
+    engineerDialysisDeviceDetail,
+  } from '@/api/biz/engineer/dialysisDeviceApi';
+
+  const emit = defineEmits(['success', 'register']);
+
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增设备' : '编辑设备'));
+  const width = '800px';
+  const isUpdate = ref(false);
+  const rowId = ref();
+
+  const { createMessage } = useMessage();
+  const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
+    labelWidth: 150,
+    schemas: dataFormSchema,
+    showActionButtonGroup: false,
+    baseColProps: {
+      span: 12,
+    },
+    wrapperCol: {
+      span: 22,
+    },
+  });
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async data => {
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+
+    if (unref(isUpdate)) {
+      const resData = await engineerDialysisDeviceDetail(data.record.id);
+      rowId.value = resData.id;
+      resData.cardNo = {
+        input: resData.cardNo,
+        dictValue: resData.cardType,
+      };
+      await setFieldsValue({
+        ...resData,
+      });
+    } else {
+      await setFieldsValue({
+        cardNo: {
+          input: '',
+          dictValue: 'pb_card_sfz',
+        },
+      });
+    }
+  });
+
+  // 提交按钮事件
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      const cardInfo = values.cardNo;
+      values.cardNo = cardInfo?.input;
+      values.cardType = cardInfo?.dictValue;
+      !unref(isUpdate)
+        ? await engineerDialysisDeviceAdd({ ...values })
+        : await engineerDialysisDeviceEdit({ ...values, id: rowId.value });
+      !unref(isUpdate) ? createMessage.success('新增成功！') : createMessage.success('编辑成功！');
+      closeModal();
+      emit('success', {
+        isUpdate: unref(isUpdate),
+        values: { ...values, id: rowId.value },
+      });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>

src/views/biz/engineer/dialysis/data.ts

@@ -0,0 +1,296 @@
+import { BasicColumn } from '@/components/Table';
+import { FormSchema } from '/@/components/Form';
+import { listDictModel } from '@/api/common';
+import dayjs from 'dayjs';
+
+export const BasicTab = [
+  {
+    key: '0',
+    label: '全部',
+    value: 128,
+    hasValue: true,
+    hasBracket: true,
+  },
+  {
+    key: '1',
+    label: '正常使用',
+    value: 12,
+    hasValue: true,
+    prefixColor: '#1BC1B3',
+    hasBracket: true,
+  },
+  {
+    key: '2',
+    label: '备用机',
+    value: 18,
+    hasValue: true,
+    prefixColor: '#2D5AFF',
+    hasBracket: true,
+  },
+  {
+    key: '3',
+    label: '报废机',
+    value: 18,
+    hasValue: true,
+    prefixColor: '#D3D8DD',
+    hasBracket: true,
+  },
+];
+
+export const BasicTabActive = BasicTab[0].key;
+
+// 抽屉搜索条件
+export const siftFormSchema: FormSchema[] = [
+  {
+    label: '设备厂家',
+    field: 'manufacturer',
+    component: 'ApiSelect',
+    componentProps: {
+      api: listDictModel,
+      params: {
+        dictCode: 'pb_sex',
+      },
+    },
+  },
+  {
+    label: '泵类型',
+    field: 'pumpType',
+    component: 'ApiSelect',
+    componentProps: {
+      api: listDictModel,
+      params: {
+        dictCode: 'bm_pump',
+      },
+    },
+  },
+  {
+    label: '传染标识',
+    field: 'infectiousDiseases',
+    component: 'ApiSelect',
+    componentProps: {
+      api: listDictModel,
+      params: {
+        dictCode: 'pb_epidemic',
+      },
+    },
+  },
+];
+
+export const columns: BasicColumn[] = [
+  {
+    title: '设备编号',
+    dataIndex: 'unique',
+    align: 'left',
+  },
+  {
+    title: '设备厂家',
+    dataIndex: 'manufacturer',
+    align: 'left',
+  },
+  {
+    title: '设备型号',
+    dataIndex: 'model',
+    align: 'left',
+  },
+  {
+    title: '序列号',
+    dataIndex: 'serialNumber',
+    align: 'left',
+  },
+  {
+    title: '设备类型',
+    dataIndex: 'deviceType',
+    align: 'left',
+  },
+  {
+    title: '泵类型',
+    dataIndex: 'pumpType',
+    align: 'left',
+  },
+  {
+    title: '传染标识',
+    dataIndex: 'infectiousDiseases',
+    align: 'left',
+  },
+  {
+    title: '使用时间',
+    dataIndex: 'useDate',
+    align: 'left',
+    width: 180,
+    sorter: true,
+  },
+  {
+    title: '生产时间',
+    dataIndex: 'produceDate',
+    align: 'left',
+    width: 180,
+    sorter: true,
+  },
+  {
+    title: '保修期限(年)',
+    dataIndex: 'warrantyPeriod',
+    align: 'left',
+  },
+];
+
+// 表单新增编辑
+export const dataFormSchema: FormSchema[] = [
+  {
+    label: '设备编号',
+    field: 'unique',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入设备编号',
+      maxLength: 60,
+    },
+  },
+  {
+    label: '设备类型',
+    field: 'deviceType',
+    required: true,
+    component: 'ApiSelect',
+    componentProps: {
+      api: listDictModel,
+      params: {
+        dictCode: 'pb_blood',
+      },
+    },
+  },
+  {
+    label: '传染标识',
+    field: 'infectiousDiseases',
+    required: true,
+    component: 'ApiSelect',
+    componentProps: {
+      api: listDictModel,
+      mode: 'multiple',
+      params: {
+        dictCode: 'pb_epidemic',
+      },
+    },
+  },
+  {
+    label: '序列号',
+    field: 'serialNumber',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入序列号',
+      maxLength: 60,
+    },
+  },
+
+  {
+    label: '备注',
+    field: 'remark',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入备注',
+    },
+  },
+  {
+    label: '泵类型',
+    field: 'pumpType',
+    required: true,
+    component: 'ApiRadioGroup',
+    componentProps: {
+      api: listDictModel,
+      params: {
+        dictCode: 'bm_pump',
+      },
+    },
+  },
+  {
+    label: '设备厂家',
+    field: 'manufacturer',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入设备厂家',
+      maxLength: 60,
+    },
+  },
+  {
+    label: '型号',
+    field: 'model',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入型号',
+    },
+  },
+  {
+    label: '产地',
+    field: 'model',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入产地',
+    },
+  },
+  {
+    label: '采购金额(万元)',
+    field: 'price',
+    required: true,
+    component: 'InputNumber',
+    componentProps: {
+      placeholder: '请输入采购金额(万元)',
+    },
+  },
+  {
+    label: '购入日期',
+    field: 'birthday',
+    required: true,
+    component: 'DatePicker',
+    componentProps: {
+      format: 'YYYY-MM-DD',
+      placeholder: '请输入购入日期',
+      getPopupContainer: () => document.body,
+      valueFormat: 'YYYY-MM-DD',
+      disabledDate: current => {
+        return current > dayjs().endOf('day');
+      },
+    },
+  },
+  {
+    label: '使用日期',
+    field: 'birthday',
+    required: true,
+    component: 'DatePicker',
+    componentProps: {
+      format: 'YYYY-MM-DD',
+      placeholder: '请输入使用日期',
+      getPopupContainer: () => document.body,
+      valueFormat: 'YYYY-MM-DD',
+      disabledDate: current => {
+        return current > dayjs().endOf('day');
+      },
+    },
+  },
+  {
+    label: '生产日期',
+    field: 'birthday',
+    required: true,
+    component: 'DatePicker',
+    componentProps: {
+      format: 'YYYY-MM-DD',
+      placeholder: '请输入生产日期',
+      getPopupContainer: () => document.body,
+      valueFormat: 'YYYY-MM-DD',
+      disabledDate: current => {
+        return current > dayjs().endOf('day');
+      },
+    },
+  },
+  {
+    label: '保修期限(年)',
+    field: 'price',
+    required: true,
+    component: 'InputNumber',
+    componentProps: {
+      placeholder: '请输入保修期限(年)',
+    },
+  },
+];

src/views/biz/engineer/dialysis/index.vue

@@ -1,7 +1,373 @@
 <template>
-  <div> 占位符 </div>
+  <div class="m-4">
+    <div>
+      <XTTitle title="透析设备" :right-data="titleData" @click="callTitleClick" />
+      <div class="flex justify-between my-4">
+        <XTTab
+          type="illness"
+          :width="136"
+          :selected="activeKey"
+          :data="tabData"
+          @item-click="callTab"
+        />
+        <XTForm :form-data="formData" @change="callFormChange" @click="callFormClick" />
+      </div>
+      <div class="flex mb-2" v-if="siftData.length">
+        <Sift :data="siftData" @close="callClose" />
+      </div>
+      <BasicTable @register="registerTable">
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'name'">
+            <span :class="['table-dot', 'table-dot--' + record.status]" />
+            <span>{{ record.name }}</span>
+          </template>
+          <template v-if="column.key === 'birthday'">
+            {{ record.birthday ? dayjs(record.birthday).format('YYYY-MM-DD') : '' }}
+          </template>
+          <template v-if="column.key === 'firstDialysisTime'">
+            {{
+              record.firstDialysisTime ? dayjs(record.firstDialysisTime).format('YYYY-MM-DD') : ''
+            }}
+          </template>
+          <template v-if="column.key === 'gender'">
+            <span
+              :style="{
+                backgroundColor: formatDictColor(bizDictOptions.gender, record.gender),
+                color: formatDictFontColor(bizDictOptions.gender, record.gender),
+                padding: '1px 6px',
+                borderRadius: '2px',
+                marginRight: '4px',
+              }"
+            >
+              {{ formatDictValue(bizDictOptions.gender, record.gender) }}
+            </span>
+          </template>
+          <template v-if="column.key === 'firstDialysisType'">
+            {{ formatDictValue(bizDictOptions.firstDialysisType, record.firstDialysisType) }}
+          </template>
+          <template v-if="column.key === 'type'">
+            {{ formatDictValue(bizDictOptions.type, record.type) }}
+          </template>
+          <template v-if="column.key === 'infectiousDiseases'">
+            <div class="flex">
+              <div
+                v-for="item in record.infectiousDiseases"
+                :key="item"
+                :style="{
+                  backgroundColor: formatDictColor(bizDictOptions.infectiousDiseases, item),
+                  color: formatDictFontColor(bizDictOptions.infectiousDiseases, item),
+                  padding: '1px 6px',
+                  borderRadius: '2px',
+                  marginRight: '4px',
+                }"
+              >
+                <!-- {{ record.infectiousDiseases }} -->
+                {{ formatDictValue(bizDictOptions.infectiousDiseases, item) }}
+              </div>
+            </div>
+          </template>
+          <template v-if="column.key === 'vascularAccess'">
+            {{ formatDictValue(bizDictOptions.vascularAccess, record.vascularAccess) }}
+          </template>
+          <template v-if="column.key === 'patientReturn'">
+            {{ formatDictValue(bizDictOptions.patientReturn, record.patientReturn) }}
+          </template>
+          <template v-if="column.key === 'action'">
+            <TableAction
+              :actions="[
+                {
+                  auth: 'archives:patientBasic:query',
+                  icon: 'icon-xt-medical_default|iconfont',
+                  tooltip: '详情',
+                  label: '详情',
+                  onClick: handleView.bind(null, record),
+                },
+              ]"
+            />
+          </template>
+        </template>
+      </BasicTable>
+    </div>
+    <FormModal @register="registerModal" @success="callSuccess" />
+    <FormDrawerSift @register="registerDrawer" @success="callSift" />
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { XTTitle } from '/@/components/XTTitle/index';
+  import { XTTab } from '/@/components/XTTab/index';
+  import { XTForm } from '/@/components/XTForm/index';
+  import { Sift } from '/@/components/XTList/index';
+  import { BasicTable, useTable, TableAction } from '/@/components/TableCard';
+  import { BasicTab, BasicTabActive, columns, siftFormSchema } from './data';
+  import { ref } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { archivesPatientBasicStats } from '/@/api/biz/archives/patientBasicApi';
+  import { engineerDialysisDeviceQueryPage } from '@/api/biz/engineer/dialysisDeviceApi';
+  import { listDictModelBatch } from '@/api/common';
+  import { formatDictColor, formatDictFontColor, formatDictValue } from '/@/utils';
+  import { onMounted, reactive } from 'vue';
+  import dayjs from 'dayjs';
+  import { useModal } from '/@/components/Modal';
+  import FormModal from './FormModal.vue';
+  // 筛选条件
+  import FormDrawerSift from './FormDrawerSift.vue';
+  import { useDrawer } from '@/components/Drawer';
 
-<style lang="less" scoped></style>
+  const bizDictOptions = reactive<any>({});
+  const bizDictData = ref([
+    // 血管材料
+    { key: 'gender', dictCode: 'pb_sex' },
+    // 转归类型
+    { key: 'patientReturn', dictCode: 'pb_return' },
+    // 传染病
+    { key: 'infectiousDiseases', dictCode: 'pb_epidemic' },
+    // 患者类型
+    { key: 'type', dictCode: 'pb_type' },
+    // 通路类型
+    { key: 'vascularAccess', dictCode: 'va_type' },
+    // 转归原因
+    { key: 'return', dictCode: 'va_return' },
+    // 首次透析方式
+    { key: 'firstDialysisType', dictCode: 'dt' },
+  ]);
+  // 路由跳转
+  const router = useRouter();
+  const activeKey = ref(BasicTabActive);
+  const tabData = ref(BasicTab);
+  const [registerModal, { openModal }] = useModal();
+  const [registerDrawer, { openDrawer }] = useDrawer();
+
+  onMounted(async () => {
+    const res = await listDictModelBatch(bizDictData.value.map(ele => ele.dictCode));
+    for (const i in res) {
+      const filter = bizDictData.value.filter(ele => ele.dictCode == i)[0];
+      bizDictOptions[filter.key] = res[i];
+    }
+    const stats = await archivesPatientBasicStats();
+    console.log('🚀 ~ file: index.vue:104 ~ onMounted ~ stats:', stats);
+    tabData.value = tabData.value.map(ele => {
+      if (ele.key == '0') {
+        ele.value = stats.all;
+      }
+      if (ele.key == '1') {
+        ele.value = stats.newPatient;
+      }
+      if (ele.key == '2') {
+        ele.value = stats.noneFormulate;
+      }
+      if (ele.key == '3') {
+        ele.value = stats.positive;
+      }
+      return ele;
+    });
+    console.log('🚀 ~ file: index.vue:118 ~ onMounted ~ tabData.value:', tabData.value);
+  });
+  const [registerTable, { reload }] = useTable({
+    api: engineerDialysisDeviceQueryPage,
+    exportAuthList: ['sys:log:export'],
+    rowKey: 'id',
+    columns,
+    showIndexColumn: false,
+    bordered: true,
+    actionColumn: {
+      width: 100,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    beforeFetch: handleBeforeFetch,
+    afterFetch: handleAfterFetch,
+  });
+  // 筛选数据
+  const siftData = ref([]);
+  // 标题数据
+  const titleData = [
+    {
+      type: 'import',
+      icon: 'icon-xt-import_default',
+    },
+    {
+      type: 'add',
+      btnIcon: 'icon-xt-add_default',
+      btnText: '新增设备',
+    },
+  ];
+
+  const formData = ref([
+    {
+      name: 'name',
+      componentType: 'Input',
+      placeholder: '请输入设备编号',
+      prefix: 'icon-xt-search',
+      width: 240,
+    },
+    {
+      name: 'filter',
+      componentType: 'IconBtn',
+      count: 0,
+    },
+  ]);
+
+  const formValue = reactive({
+    name: '',
+  }) as any;
+
+  // const tableSort = ref([
+  //   {
+  //     field: 'create_time',
+  //     direction: 'DESC',
+  //   },
+  // ]) as any;
+  // 表格请求之前，对参数进行处理, 添加默认 排序
+  function handleBeforeFetch(params) {
+    // return { ...params, orders: tableSort.value };
+    const sift = {};
+    siftData.value.forEach(ele => {
+      sift[ele.field] = ele.isDict ? ele.dict : ele.value;
+    });
+    if (params?.order) {
+      params.orders = [
+        {
+          field: params.field,
+          direction: params.order.substring(0, params.order.length - 3).toUpperCase(),
+        },
+      ];
+      delete params.order;
+      delete params.field;
+    }
+    return {
+      ...params,
+      queryType: activeKey.value == '0' ? '0' : activeKey.value,
+      name: formValue.name,
+      ...sift,
+    };
+  }
+
+  function handleAfterFetch(data) {
+    return data;
+  }
+
+  // 详情按钮事件
+  function handleView(record: Recordable) {
+    router.push({
+      path: '/bizArchives/detail',
+      query: {
+        id: record.id,
+        accessId: record.accessId,
+        name: record.name,
+        gender: formatDictValue(bizDictOptions.gender, record.gender),
+        age: record.age,
+      },
+    });
+  }
+
+  // 弹窗回调事件
+  async function callSuccess({ isUpdate, values }) {
+    console.log(isUpdate);
+    console.log(values);
+    await reload();
+  }
+  // 回调
+  async function callTab(data) {
+    activeKey.value = data.value;
+    await reload();
+  }
+
+  function callTitleClick(data) {
+    if (data.type == 'add') {
+      openModal(true, {
+        isUpdate: false,
+        record: data,
+      });
+    }
+  }
+
+  async function callFormChange(data) {
+    formValue.name = data.name ? data.name : '';
+    await reload();
+  }
+
+  async function callFormClick(data) {
+    if (data.name == 'filter') {
+      const record = [];
+      siftData.value.forEach(ele => {
+        const obj = {
+          field: ele.field,
+          value: ele.value,
+        } as any;
+        if (ele.isDict) {
+          obj.value = ele.dict;
+        }
+        record.push(obj);
+      });
+      openDrawer(true, {
+        record,
+      });
+    }
+  }
+  // 筛选条件回调
+  async function callSift(data) {
+    siftData.value = [];
+    for (const i in data) {
+      if (data[i]) {
+        siftFormSchema.forEach(ele => {
+          // console.log('🚀 ~ file: index.vue:280 ~ obj ~ ele:', ele);
+          if (ele.field == i) {
+            siftData.value.push({
+              field: ele.field,
+              label: ele.label,
+              value: ele.component.includes('Api')
+                ? formatDictValue(bizDictOptions.gender, data[i])
+                : data[i],
+              isDict: ele.component.includes('Api'),
+              dict: ele.component.includes('Api') ? data[i] : '',
+            });
+          }
+          formData.value[formData.value.length - 1]['count'] = siftData.value.length;
+        });
+      }
+    }
+    await reload();
+  }
+
+  async function callClose(data) {
+    if (data.type == 'clear') {
+      console.log('清空全部');
+      siftData.value = [];
+    }
+    if (data.type == 'close') {
+      console.log('删除部分条件');
+      siftData.value = siftData.value.filter(ele => {
+        return ele.field != data.item?.field;
+      });
+    }
+    formData.value[formData.value.length - 1]['count'] = siftData.value.length;
+    await reload();
+  }
+</script>
+
+<style lang="less" scoped>
+  .table-dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin-right: 6px;
+    border-radius: 50%;
+
+    &--1 {
+      background-color: #1bc1b3;
+    }
+
+    &--2 {
+      background-color: #d3d8dd;
+    }
+
+    &--3 {
+      background-color: #f7b500;
+    }
+  }
+
+  ::v-deep(.ant-btn-link) {
+    color: rgb(61 65 85 / 100%);
+  }
+</style>