fix: 完善床位管理模块开发

src/api/biz/engineer/bedApi.ts

@@ -7,12 +7,12 @@ enum Api {
   engineerBedAdd = '/device/bed/add',
   engineerBedEdit = '/device/bed/edit',
   engineerBedRemove = '/device/bed/removeByIds',
+
+  bedDeviceReplacePageQuery = '/biz/device/bedDeviceReplace/query/page',
 }
 
 /**
  *
- * @author fan
- * @date  2023/06/30 17:39
  * @description: 根据条件查询病床列表,权限 - device:dialysisDevice:query
  * @method: POST
  */
@@ -22,8 +22,6 @@ export const engineerBedQueryPage = (params?: object) => {
 };
 /**
  *
- * @author fan
- * @date  2023/06/30 17:39
  * @description: 根据id查询病床详细信息,权限 - device:dialysisDevice:query
  * @method: GET
  * @param:  id 病床主键id
@@ -34,8 +32,6 @@ export const engineerBedDetail = (id: string) => {
 
 /**
  *
- * @author fan
- * @date  2023/06/30 17:39
  * @description: 添加病床,权限 - device:dialysisDevice:add
  * @method: POST
  * @return:
@@ -48,8 +44,6 @@ export const engineerBedAdd = (params?: object) => {
 
 /**
  *
- * @author fan
- * @date  2023/06/30 17:39
  * @description: 通过主键id编辑病床,权限 - device:dialysisDevice:edit
  * @method: POST
  * @return:
@@ -67,3 +61,7 @@ export const engineerBedEdit = (params?: object) => {
 export const engineerBedRemove = (params: Array<string | number>) => {
   return defHttp.post({ url: Api.engineerBedRemove, params: params });
 };
+
+export const bedDeviceReplacePageQuery = (params?: object) => {
+  return defHttp.post({ url: Api.bedDeviceReplacePageQuery, params: setParams(params) });
+};

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

@@ -9,28 +9,75 @@
     :showFooter="true"
   >
     <div class="!pl-8 !pt-2">
-      <BasicForm @register="registerForm" layout="vertical" />
+      <BasicForm @register="registerForm" layout="vertical">
+        <template #wardInfo="{ model, field }">
+          <div class="flex">
+            <div
+              v-for="item in model[field]"
+              :key="item"
+              :style="{
+                backgroundColor: formatDictColor(bizDictOptions.wardType, item),
+                color: formatDictFontColor(bizDictOptions.wardType, item),
+                padding: '1px 6px',
+                borderRadius: '2px',
+                marginRight: '4px',
+              }"
+            >
+              {{ formatDictValue(bizDictOptions.wardType, item) }}
+            </div>
+          </div>
+        </template>
+        <template #deviceInfo="{ model, field }">
+          {{ model[field] }}
+        </template>
+        <template #deviceType="{ model, field }">
+          <span
+            :class="['table-dot']"
+            :style="{
+              backgroundColor: formatDictPreColor(bizDictOptions.deviceType, model[field]),
+            }"
+          />
+          <span>{{ formatDictValue(bizDictOptions.deviceType, model[field]) }}</span>
+        </template>
+      </BasicForm>
     </div>
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { ref, computed, unref } from 'vue';
+  import { onBeforeMount, ref, computed, reactive, 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';
-
+  import { listDictModelBatch } from '/@/api/common';
+  import { engineerBedAdd, engineerBedDetail, engineerBedEdit } from '@/api/biz/engineer/bedApi';
+  import {
+    formatDictColor,
+    formatDictValue,
+    formatDictPreColor,
+    formatDictFontColor,
+  } from '@/utils';
+  const bizDictData = ref([
+    { key: 'wardType', dictCode: 'pb_epidemic' },
+    { key: 'deviceType', dictCode: 'bm_det' },
+  ]);
+  const bizDictOptions = reactive<any>({});
+  // 组件加载前事件
+  onBeforeMount(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 emit = defineEmits(['success', 'register']);
-
-  const getTitle = computed(() => (!unref(isUpdate) ? '新增床位' : '编辑床位'));
-  const width = '600px';
   const isUpdate = ref(false);
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增床位' : '绑定床位'));
+  const width = '600px';
   const rowId = ref();
 
   const { createMessage } = useMessage();
-  const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
+  const [registerForm, { setFieldsValue, resetFields, validate, updateSchema }] = useForm({
     labelWidth: 150,
     schemas: dataFormSchema,
     showActionButtonGroup: false,
@@ -45,22 +92,26 @@
     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,
+        name: resData.bedName,
+        wardInfo: resData.infectiousDiseases,
       });
-    } else {
-      await setFieldsValue({
-        cardNo: {
-          input: '',
-          dictValue: 'pb_card_sfz',
+      await updateSchema([
+        {
+          field: 'wardId',
+          componentProps: {
+            disabled: true,
+          },
+        },
+      ]);
+      await updateSchema({
+        field: 'name',
+        componentProps: {
+          disabled: true,
         },
       });
     }
@@ -71,16 +122,16 @@
     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('编辑成功！');
+      if (!isUpdate.value) {
+        await engineerBedAdd({ ...values });
+        createMessage.success('新增成功！');
+      } else {
+        await engineerBedEdit({ ...values, id: rowId.value });
+        console.log(values);
+        createMessage.success('绑定成功！');
+      }
       closeModal();
       emit('success', {
-        isUpdate: unref(isUpdate),
         values: { ...values, id: rowId.value },
       });
     } finally {
@@ -88,3 +139,12 @@
     }
   }
 </script>
+<style lang="less" scoped>
+  .table-dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin-right: 6px;
+    border-radius: 50%;
+  }
+</style>

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

@@ -0,0 +1,161 @@
+<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">
+        <template #infectiousDiseases="{ model, field }">
+          <div class="flex">
+            <div
+              v-for="item in model[field]"
+              :key="item"
+              :style="{
+                backgroundColor: formatDictColor(bizDictOptions.infectiousDiseases, item),
+                color: formatDictFontColor(bizDictOptions.infectiousDiseases, item),
+                padding: '1px 6px',
+                borderRadius: '2px',
+                marginRight: '4px',
+              }"
+            >
+              {{ formatDictValue(bizDictOptions.infectiousDiseases, item) }}
+            </div>
+          </div>
+        </template>
+        <template #wardName="{ model, field }">
+          {{ model[field] }}
+        </template>
+        <template #name="{ model, field }">
+          {{ model[field] }}
+        </template>
+        <template #deviceUniqueCode="{ model, field }">
+          {{ model[field] }}
+        </template>
+        <template #oldDeviceUniqueCode="{ model, field }">
+          {{ model[field] }}
+        </template>
+        <template #oldDeviceInfo="{ model, field }">
+          {{ model[field] }}
+        </template>
+        <template #oldDeviceRemark="{ model, field }">
+          {{ model[field] }}
+        </template>
+        <template #oldDeviceType="{ model, field }">
+          <span
+            :class="['table-dot']"
+            :style="{
+              backgroundColor: formatDictPreColor(bizDictOptions.deviceType, model[field]),
+            }"
+          />
+          <span>{{ formatDictValue(bizDictOptions.deviceType, model[field]) }}</span>
+        </template>
+
+        <template #deviceInfo="{ model, field }">
+          {{ model[field] }}
+        </template>
+
+        <template #deviceType="{ model, field }">
+          <span
+            :class="['table-dot']"
+            :style="{
+              backgroundColor: formatDictPreColor(bizDictOptions.deviceType, model[field]),
+            }"
+          />
+          <span>{{ formatDictValue(bizDictOptions.deviceType, model[field]) }}</span>
+        </template>
+      </BasicForm>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { onBeforeMount, ref, computed, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { changeDataFormSchema } from './data';
+  import { listDictModelBatch } from '/@/api/common';
+  import { engineerBedDetail, engineerBedEdit } from '@/api/biz/engineer/bedApi';
+  import {
+    formatDictColor,
+    formatDictValue,
+    formatDictPreColor,
+    formatDictFontColor,
+  } from '@/utils';
+  const bizDictData = ref([
+    { key: 'infectiousDiseases', dictCode: 'pb_epidemic' },
+    { key: 'deviceType', dictCode: 'bm_det' },
+  ]);
+  const bizDictOptions = reactive<any>({});
+  // 组件加载前事件
+  onBeforeMount(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 emit = defineEmits(['success', 'register']);
+  const getTitle = computed(() => '更换设备');
+  const width = '900px';
+  const rowId = ref();
+
+  const { createMessage } = useMessage();
+  const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
+    labelWidth: 150,
+    schemas: changeDataFormSchema,
+    showActionButtonGroup: false,
+    baseColProps: {
+      span: 6,
+    },
+    wrapperCol: {
+      span: 22,
+    },
+  });
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async data => {
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    const resData = await engineerBedDetail(data.record.id);
+    rowId.value = resData.id;
+    await setFieldsValue({
+      wardId: resData.wardId,
+      wardName: resData.wardName,
+      infectiousDiseases: resData.infectiousDiseases,
+      name: resData.bedName,
+      oldDeviceUniqueCode: resData.deviceUniqueCode,
+      oldDeviceInfo: resData.deviceName + resData.deviceModel,
+      oldDeviceType: resData.deviceType,
+      oldDeviceRemark: resData.deviceRemark,
+    });
+  });
+
+  // 提交按钮事件
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      await engineerBedEdit({ ...values, id: rowId.value });
+      console.log(values);
+      createMessage.success('设备更换成功！');
+      closeModal();
+      emit('success', {
+        values: { ...values, id: rowId.value },
+      });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+<style lang="less" scoped>
+  .table-dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin-right: 6px;
+    border-radius: 50%;
+  }
+</style>

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

@@ -1,8 +1,12 @@
 import { BasicColumn } from '@/components/Table';
 import { FormSchema } from '/@/components/Form';
-import { listDictModel } from '@/api/common';
+import {
+  engineerDialysisDeviceList,
+  engineerDialysisDeviceDetail,
+} from '@/api/biz/engineer/dialysisDeviceApi';
+import { getWardInfo, wardInfoById } from '/@/api/biz/management/wardInfo';
 
-export const columnsBed: BasicColumn[] = [
+export const bedInfoColumns: BasicColumn[] = [
   {
     title: '病区',
     dataIndex: 'wardName',
@@ -11,7 +15,7 @@ export const columnsBed: BasicColumn[] = [
   },
   {
     title: '病区属性',
-    dataIndex: 'wardPropertyName',
+    dataIndex: 'infectiousDiseases',
     align: 'left',
     width: 90,
   },
@@ -22,7 +26,7 @@ export const columnsBed: BasicColumn[] = [
   },
   {
     title: '设备编号',
-    dataIndex: 'deviceId',
+    dataIndex: 'deviceUniqueCode',
     align: 'left',
   },
   {
@@ -32,15 +36,15 @@ export const columnsBed: BasicColumn[] = [
   },
 ];
 
-export const columnsDevice: BasicColumn[] = [
+export const recordingColumns: BasicColumn[] = [
   {
     title: '操作时间',
-    dataIndex: 'createTime',
+    dataIndex: 'updateTime',
     align: 'left',
   },
   {
     title: '操作类型',
-    dataIndex: 'bindDevice',
+    dataIndex: 'operationType',
     align: 'left',
   },
   {
@@ -50,145 +54,251 @@ export const columnsDevice: BasicColumn[] = [
   },
   {
     title: '设备编号',
-    dataIndex: 'deviceId',
+    dataIndex: 'deviceUniqueCode',
     align: 'left',
   },
   {
     title: '设备备注',
-    dataIndex: 'remark',
+    dataIndex: 'deviceRemark',
     align: 'left',
   },
 ];
-
-// 表单新增编辑
 export const dataFormSchema: FormSchema[] = [
   {
-    field: 'PlainTitle',
+    label: '新增床位',
+    field: 'addBed',
     component: 'PlainTitle',
     defaultValue: '新增床位',
-    colProps: {
-      span: 24,
-    },
   },
   {
-    label: '病区属性',
-    field: 'wardPropertyName',
+    label: '病区',
+    field: 'wardId',
     required: true,
     component: 'ApiSelect',
-    componentProps: {
-      api: listDictModel,
-      placeholder: '请选择病区属性',
-      params: {
-        dictCode: 'pb_blood',
-      },
+    componentProps: ({ formModel }) => {
+      return {
+        api: getWardInfo,
+        labelField: 'name',
+        valueField: 'id',
+        resultField: 'data',
+        getPopupContainer: () => document.body,
+        onChange: async e => {
+          const resData = await wardInfoById(e);
+          formModel['wardInfo'] = resData?.infectiousDiseases;
+        },
+      };
+    },
+    colProps: {
+      span: 12,
     },
   },
   {
-    label: '病区',
-    field: 'wardId',
-    required: true,
-    component: 'ApiSelect',
+    label: '病区属性',
+    field: 'wardInfo',
+    component: 'Input',
+    slot: 'wardInfo',
     componentProps: {
-      api: listDictModel,
-      placeholder: '请选择病区',
-      params: {
-        dictCode: 'pb_blood',
-      },
+      placeholder: '请输入病区属性',
+    },
+    colProps: {
+      span: 12,
     },
   },
   {
     label: '床位',
-    field: 'bedName',
+    field: 'name',
     required: true,
     component: 'Input',
     componentProps: {
       placeholder: '请输入床位',
-      maxLength: 60,
     },
   },
   {
-    field: 'PlainTitle1',
+    label: '绑定设备',
+    field: 'devices',
     component: 'PlainTitle',
     defaultValue: '绑定设备',
+  },
+  {
+    label: '设备编号',
+    field: 'deviceId',
+    component: 'ApiSelect',
+    componentProps: ({ formModel }) => {
+      return {
+        api: engineerDialysisDeviceList,
+        labelField: 'uniqueCode',
+        valueField: 'id',
+        resultField: 'data',
+        getPopupContainer: () => document.body,
+        onChange: async e => {
+          const resData = await engineerDialysisDeviceDetail(e);
+          formModel['deviceInfo'] = resData?.name;
+          formModel['deviceType'] = resData?.deviceType;
+        },
+      };
+    },
+  },
+  {
+    label: '设备信息',
+    field: 'deviceInfo',
+    component: 'Input',
+    slot: 'deviceInfo',
+    componentProps: {
+      placeholder: '请输入设备信息',
+    },
     colProps: {
-      span: 24,
+      span: 12,
     },
   },
+  {
+    label: '设备类型',
+    field: 'deviceType',
+    component: 'Input',
+    slot: 'deviceType',
+    componentProps: {
+      placeholder: '请输入设备类型',
+    },
+    colProps: {
+      span: 12,
+    },
+  },
+  {
+    label: '绑定设备备注',
+    field: 'deviceRemark',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入绑定设备备注',
+    },
+  },
+];
+
+export const changeDataFormSchema: FormSchema[] = [
+  // 床位信息
+  {
+    label: '床位信息',
+    field: 'bedInfo',
+    component: 'PlainTitle',
+    defaultValue: '床位信息',
+  },
+  {
+    label: '病区Id',
+    field: 'wardId',
+    component: 'Input',
+    slot: 'wardId',
+    show: false,
+  },
+  {
+    label: '病区',
+    field: 'wardName',
+    component: 'Input',
+    slot: 'wardName',
+  },
+  {
+    label: '病区属性',
+    field: 'infectiousDiseases',
+    component: 'Input',
+    slot: 'infectiousDiseases',
+  },
+  {
+    label: '床位',
+    field: 'name',
+    component: 'Input',
+    slot: 'name',
+  },
+  // 原绑定设备信息
+  {
+    label: '原绑定设备',
+    field: 'oldDevice',
+    component: 'PlainTitle',
+    defaultValue: '原绑定设备',
+  },
+  {
+    label: '设备编号',
+    field: 'oldDeviceUniqueCode',
+    component: 'Input',
+    slot: 'oldDeviceUniqueCode',
+  },
+  {
+    label: '设备信息',
+    field: 'oldDeviceInfo',
+    component: 'Input',
+    slot: 'oldDeviceInfo',
+  },
+  {
+    label: '设备类型',
+    field: 'oldDeviceType',
+    component: 'Input',
+    slot: 'oldDeviceType',
+  },
+  {
+    label: '备注',
+    field: 'oldDeviceRemark',
+    component: 'Input',
+    slot: 'oldDeviceRemark',
+  },
+
+  // 换绑信息
+  {
+    label: '换绑信息',
+    field: 'changeDevice',
+    component: 'PlainTitle',
+    defaultValue: '换绑信息',
+  },
   {
     label: '设备编号',
     field: 'deviceId',
-    required: true,
     component: 'ApiSelect',
-    componentProps: {
-      api: listDictModel,
-      placeholder: '请选择设备编号',
+    componentProps: ({ formModel }) => {
+      return {
+        api: engineerDialysisDeviceList,
+        labelField: 'uniqueCode',
+        valueField: 'id',
+        resultField: 'data',
+        getPopupContainer: () => document.body,
+        onChange: async e => {
+          const resData = await engineerDialysisDeviceDetail(e);
+          formModel['deviceInfo'] = resData?.name;
+          formModel['deviceType'] = resData?.deviceType;
+        },
+      };
+    },
+    colProps: {
+      span: 12,
     },
   },
   {
     label: '设备信息',
-    field: 'deviceName',
-    component: 'PlainText',
+    field: 'deviceInfo',
+    component: 'Input',
+    slot: 'deviceInfo',
+    componentProps: {
+      placeholder: '请输入设备信息',
+    },
     colProps: {
       span: 12,
     },
   },
   {
     label: '设备类型',
-    field: 'deviceModel',
-    component: 'PlainText',
+    field: 'deviceType',
+    component: 'Input',
+    slot: 'deviceType',
+    componentProps: {
+      placeholder: '请输入设备类型',
+    },
     colProps: {
       span: 12,
     },
   },
   {
-    label: '设备备注',
-    field: 'remark',
-    required: true,
-    component: 'Input',
+    label: '绑定设备备注',
+    field: 'deviceRemark',
+    component: 'InputTextArea',
     componentProps: {
-      placeholder: '请输入设备备注',
+      placeholder: '请输入绑定设备备注',
+    },
+    colProps: {
+      span: 24,
     },
   },
 ];
-
-// 床位信息搜索
-export const searchFormSchema = {
-  bed: [
-    {
-      name: 'wardId',
-      componentType: 'Select',
-      placeholder: '请选择病区',
-      width: 150,
-      defaultValue: '1',
-      dicts: [{ label: '全部', value: '1' }],
-    },
-    {
-      name: 'bindDevice',
-      componentType: 'Select',
-      placeholder: '请选择',
-      width: 150,
-      defaultValue: null,
-      dicts: [
-        { label: '全部', value: null },
-        { label: '未绑定', value: 0 },
-        { label: '已绑定', value: 1 },
-      ],
-    },
-  ],
-  device: [
-    {
-      name: 'createTime',
-      componentType: 'RangePicker',
-      placeholder: '请输入',
-      format: 'YYYY-MM-DD',
-      valueFormat: 'YYYY-MM-DD',
-    },
-    {
-      name: 'deviceId',
-      componentType: 'Input',
-      placeholder: '请输入',
-      prefix: 'icon-xt-search',
-      width: 200,
-    },
-  ],
-};

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

@@ -1,7 +1,320 @@
 <template>
-  <div> 占位符 </div>
+  <SimpleCard title="床位管理">
+    <template #headRight>
+      <Button type="primary" @click="handleCreate"
+        ><Icon icon="icon-xt-add_default|iconfont" :size="12" /> 新增床位
+      </Button>
+    </template>
+    <template #body>
+      <Row>
+        <Col :span="12">
+          <SimpleCard title="床位信息">
+            <template #headRight>
+              <div> <XTForm :form-data="formData" /> </div>
+            </template>
+            <template #body>
+              <BasicTable @register="bedInfoRegister">
+                <template #bodyCell="{ column, record }">
+                  <template v-if="column.key === 'infectiousDiseases'">
+                    <div class="flex">
+                      <div
+                        v-for="item in record.infectiousDiseases"
+                        :key="item"
+                        :style="{
+                          backgroundColor: formatDictColor(bizDictOptions.wardType, item),
+                          color: formatDictFontColor(bizDictOptions.wardType, item),
+                          padding: '1px 6px',
+                          borderRadius: '2px',
+                          marginRight: '4px',
+                        }"
+                      >
+                        {{ formatDictValue(bizDictOptions.wardType, item) }}
+                      </div>
+                    </div>
+                  </template>
+                  <template v-if="column.key === 'action'">
+                    <TableAction
+                      :actions="[
+                        {
+                          label: '更换',
+                          tooltip: '更换',
+                          disabled: !record.deviceId,
+                          onClick: handleChangeDeivice.bind(null, record, column),
+                        },
+                        {
+                          ifShow: record?.deviceId != null,
+                          label: '解绑',
+                          tooltip: '解绑',
+                          popConfirm: {
+                            title: '是否确定' + (record.deviceId ? '解绑' : '绑定') + '此设备？',
+                            placement: 'left',
+                            confirm: handleBinding.bind(null, record, column),
+                          },
+                        },
+                        {
+                          ifShow: record?.deviceId == null,
+                          label: '绑定',
+                          tooltip: '绑定',
+                          onClick: handleBinding.bind(null, record, column),
+                        },
+                        {
+                          label: '删除',
+                          tooltip: '删除',
+                          popConfirm: {
+                            title: '是否取消删除？',
+                            placement: 'left',
+                            confirm: handleDelete.bind(null, record, column),
+                          },
+                        },
+                      ]"
+                    />
+                  </template>
+                </template>
+              </BasicTable>
+            </template>
+          </SimpleCard>
+        </Col>
+        <Col :span="12">
+          <SimpleCard title="设备更换记录">
+            <template #headRight>
+              <div> <XTForm :form-Data="recordingFormData" /> </div>
+            </template>
+            <template #body>
+              <BasicTable @register="recordingRegister">
+                <template #bodyCell="{ column, record }">
+                  <template v-if="column.key === 'operationType'">
+                    <span>{{
+                      formatDictValue(bizDictOptions.operationType, record.operationType)
+                    }}</span>
+                  </template>
+                  <template v-if="column.key === 'deviceType'">
+                    <span
+                      :class="['table-dot']"
+                      :style="{
+                        backgroundColor: formatDictPreColor(
+                          bizDictOptions.deviceType,
+                          record.deviceType,
+                        ),
+                      }"
+                    />
+                    <span>{{ formatDictValue(bizDictOptions.deviceType, record.deviceType) }}</span>
+                  </template>
+                </template>
+              </BasicTable>
+            </template>
+          </SimpleCard>
+        </Col>
+      </Row>
+    </template>
+  </SimpleCard>
+  <FormModal @register="registerModal" @success="callSuccess" />
+  <ChangeFormModal @register="registerChangeModal" @success="callSuccess" />
 </template>
+<script setup lang="ts">
+  import { onBeforeMount, ref, reactive } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { Row, Col, Button } from 'ant-design-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { bedInfoColumns, recordingColumns } from './data';
+  import FormModal from './formModal.vue';
+  import ChangeFormModal from './changeFormModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import { SimpleCard } from '@/components/XTCard/index';
+  import { XTForm } from '/@/components/XTForm/index';
+  import Icon from '/@/components/Icon/src/Icon.vue';
+  import {
+    engineerBedQueryPage,
+    bedDeviceReplacePageQuery,
+    engineerBedRemove,
+    engineerBedDetail,
+    engineerBedEdit,
+  } from '/@/api/biz/engineer/bedApi';
+  import {
+    formatDictColor,
+    formatDictValue,
+    formatDictFontColor,
+    formatDictPreColor,
+  } from '@/utils';
+  import { listDictModelBatch } from '/@/api/common';
+  import dayjs from 'dayjs';
+  const [registerModal, { openModal }] = useModal();
+  const [registerChangeModal, { openModal: openChangeFormModal }] = useModal();
+  const { createMessage } = useMessage();
+  const bizDictData = ref([
+    { key: 'wardType', dictCode: 'pb_epidemic' },
+    { key: 'operationType', dictCode: 'beot' },
+    { key: 'deviceType', dictCode: 'bm_det' },
+  ]);
+  const bizDictOptions = reactive<any>({});
+  // 组件加载前事件
+  onBeforeMount(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 [bedInfoRegister, { reload }] = useTable({
+    api: engineerBedQueryPage,
+    rowKey: 'id',
+    columns: bedInfoColumns,
+    showIndexColumn: false,
+    striped: false,
+    formConfig: {
+      labelWidth: 120,
+      autoSubmitOnEnter: true,
+      baseColProps: { xs: 24, sm: 12, md: 12, lg: 8 },
+      resetButtonOptions: {
+        preIcon: 'icon-delete|iconfont',
+      },
+      submitButtonOptions: {
+        preIcon: 'icon-search|iconfont',
+      },
+    },
+    useSearchForm: false,
+    actionColumn: {
+      width: 150,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    beforeFetch: handleBeforeFetch,
+  });
+  // 设备更换记录列表
+  const [recordingRegister, { reload: reloadRecording }] = useTable({
+    api: bedDeviceReplacePageQuery,
+    rowKey: 'id',
+    columns: recordingColumns,
+    showIndexColumn: false,
+    striped: false,
+    formConfig: {
+      labelWidth: 120,
+      autoSubmitOnEnter: true,
+      baseColProps: { xs: 24, sm: 12, md: 12, lg: 8 },
+      resetButtonOptions: {
+        preIcon: 'icon-delete|iconfont',
+      },
+      submitButtonOptions: {
+        preIcon: 'icon-search|iconfont',
+      },
+    },
+    useSearchForm: false,
+    beforeFetch: handlebedDevuceBeforeFetch,
+  });
+  // 床位信息标头条件查询
+  const formData = [
+    {
+      name: 'text22',
+      componentType: 'Select',
+      placeholder: '请选择',
+      width: 150,
+      defaultValue: '1',
+      dicts: [
+        { label: '第一班', value: '1' },
+        { label: '第二班', value: '2' },
+        { label: '第三班', value: '3' },
+      ],
+    },
+    {
+      name: 'text22',
+      componentType: 'Select',
+      placeholder: '请选择',
+      width: 150,
+      defaultValue: '1',
+      dicts: [
+        { label: '第一班', value: '1' },
+        { label: '第二班', value: '2' },
+        { label: '第三班', value: '3' },
+      ],
+    },
+  ];
 
-<script setup lang="ts"></script>
+  const recordingFormData = [
+    {
+      name: 'createTime',
+      componentType: 'RangePicker',
+      placeholder: '请选择',
+      format: 'YYYY-MM-DD',
+      valueFormat: 'YYYY-MM-DD',
+      defaultValue: [
+        dayjs().subtract(3, 'month').format('YYYY-MM-DD'),
+        dayjs().format('YYYY-MM-DD'),
+      ],
+    },
+    {
+      name: 'searchNames',
+      componentType: 'Input',
+      prefix: 'icon-xt-search',
+      placeholder: '请输入设备编号',
+      width: 240,
+    },
+  ];
 
-<style lang="less" scoped></style>
+  // 请求床位信息前事件
+  function handleBeforeFetch(params) {
+    return { ...params };
+  }
+  // 请求更换记录列表前事件
+  function handlebedDevuceBeforeFetch(params) {
+    return { ...params, orders: [{ field: 'updateTime', direction: 'DESC' }] };
+  }
+  // 删除床位信息
+  async function handleDelete(record) {
+    if (record) {
+      await engineerBedRemove([record.id]);
+      await reload();
+      await reloadRecording();
+    }
+  }
+  // 新增床位信息
+  function handleCreate() {
+    openModal(true, {});
+  }
+  // 新增返回刷新
+  function callSuccess() {
+    reload();
+    reloadRecording();
+  }
+
+  // 绑定设备、解绑方法
+  async function handleBinding(record) {
+    if (record && record.id) {
+      const detailRes = await engineerBedDetail(record.id);
+      if (detailRes && detailRes.deviceId) {
+        detailRes.deviceId = undefined;
+        const editParams = {
+          id: detailRes.id,
+          wardId: detailRes.wardId,
+          name: detailRes.wardName,
+          deviceId: null,
+        };
+        await engineerBedEdit(editParams);
+        createMessage.success('设备解绑成功');
+        await reload();
+        await reloadRecording();
+      } else {
+        openModal(true, {
+          isUpdate: true,
+          record,
+        });
+      }
+    }
+  }
+  // 更换设备方法
+  function handleChangeDeivice(record) {
+    console.log('record:::::::', record);
+    openChangeFormModal(true, {
+      record,
+    });
+  }
+</script>
+
+<style lang="less" scoped>
+  .table-dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin-right: 6px;
+    border-radius: 50%;
+  }
+</style>