xt-front/src/views/biz/archives/formula/index.vue

<template>
  <div>
    <div class="mx-6 mb-2">
      <TimeLine :data="timeLineData" @hover="callHover" @icon="callIcon">
        <template #head>
          <transition class="animate__animated animate__slideInLeft">
            <div class="timeline-outer" v-if="timeOuter">
              <div class="timeline-outer_item" @click="handleAdd"> 新建透析处方模板 </div>
            </div>
          </transition>
        </template>
      </TimeLine>
    </div>
    <FormDrawer @register="registerDrawer" @success="callSuccess" />
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onUnmounted } from 'vue';
  import TimeLine from '/@/components/XTTimeLine/src/TimeLine.vue';
  import { onMounted } from 'vue';
  import dayjs from 'dayjs';
  import { listDictModelBatch } from '/@/api/common';
  import { formatDictValue } from '/@/utils';
  //
  import FormDrawer from './FormDrawer.vue';

  import { useDrawer } from '@/components/Drawer';
  import { archivesFormulaTemplateQueryList } from '@/api/biz/archives/formulaTemplateApi';

  const props = defineProps({
    info: {
      type: Object,
      default: () => {},
    },
  });
  const bizDictOptions = reactive<any>({});
  const timeLineData = ref([]);
  const timeOuter = ref(false);
  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];
    }
    console.log('🚀 ~ file: index.vue:47 ~ onMounted ~ bizDictOptions:', bizDictOptions);
    // console.log('🚀 ~ file: index.vue:96 ~ onMounted ~ res:', res);
    await getData();
  });
  const [registerDrawer, { openDrawer }] = useDrawer();
  const bizDictData = ref([
    // 透析模式
    { key: 'dt', dictCode: 'dt' },
    // 通路类型
    { key: 'type', dictCode: 'va_type' },
  ]);

  async function getData() {
    const res = await archivesFormulaTemplateQueryList(props.info?.id);
    console.log('🚀 ~ file: index.vue:105 ~ getData ~ res:', res);
    timeLineData.value = res.map(ele => {
      const innerData = {
        id: ele.id,
        title: '基本信息',
        icon: 'icon-xt-edit_default',
        type: 'basic',
        data: [
          { field: 'vascularAccess', label: '血管通路', value: '', dict: true },
          { field: 'dryWeight', label: '干体重 (kg)', value: '', prefix: 'vitals' },
          { field: 'oh', label: 'OH值 (kg)', value: '', prefix: 'vitals' },
          { field: 'v', label: 'V值 (kg)', value: '', prefix: 'vitals' },
          { field: 'firstDose', label: '首剂 (mg)', value: '', prefix: 'anticoagulant' },
          { field: 'appendDose', label: '追加 (mg)', value: '', prefix: 'anticoagulant' },
          { field: 'type', label: '抗凝方式', value: '', span: 12, prefix: 'anticoagulant' },
          { field: 'suppliesTemplate', label: '耗材使用', value: '', span: 24 },
          { field: 'dialysisTime', label: '透析时长 (h)', value: '', prefix: 'dialysisParam' },
          { field: 'flowRate', label: '流量 (ml/min)', value: '', prefix: 'dialysisParam' },
          { field: 'temperature', label: '湿度 (℃)', value: '', prefix: 'dialysisParam' },
          { field: 'bloodFlow', label: '血流量 (ml/min)', value: '', prefix: 'dialysisParam' },
          { field: 'k', label: 'K (mmolL)', value: '', prefix: 'dialysisParam' },
          { field: 'na', label: 'Na (mmolL)', value: '', prefix: 'dialysisParam' },
          { field: 'ca', label: 'Ca (mmolL)', value: '', prefix: 'dialysisParam' },
          { field: 'hco', label: '碳酸氢根 (mmolL)', value: '', prefix: 'dialysisParam' },
          { field: 'mg', label: 'Mg (mmolL)', value: '', prefix: 'dialysisParam' },
          { field: 'cl', label: 'Cl (mmolL)', value: '', prefix: 'dialysisParam' },
          { field: 'glucose', label: '葡萄糖 (mmolL)', value: '', prefix: 'dialysisParam' },
        ],
      };
      innerData.title = formatDictValue(bizDictOptions.dt, ele.dialysisType);
      console.log('🚀 ~ file: index.vue:114 ~ getData ~ innerData:', innerData);
      innerData.type = ele.dialysisType;
      innerData.data = innerData.data.map(eleC => {
        if (eleC.dict) {
          if (eleC.field == 'vascularAccess') {
            eleC.value = formatDictValue(bizDictOptions['type'], ele[eleC.field]);
          } else {
            eleC.value = formatDictValue(bizDictOptions[eleC.field], ele[eleC.field]);
          }
        } else if (eleC.prefix) {
          eleC.value = ele[eleC.prefix][eleC.field];
        } else if (eleC.field == 'suppliesTemplate') {
          eleC.value = ele[eleC.field]
            ?.map(eleS => {
              return `${eleS.name}-${eleS.type ? eleS.type + '-' : ''}${eleS.count}个`;
            })
            .join('; ');
        } else {
          eleC.value = ele[eleC.field];
        }
        return eleC;
      });
      return {
        id: ele.id,
        dot: ele.updatorName,
        date: dayjs(ele.enactedTime).format('YYYY-MM-DD'),
        cnt: innerData,
      };
    });
    console.log('🚀 ~ file: index.vue:168 ~ getData ~ timeLineData.value :', timeLineData.value);
  }
  function handleAdd() {
    const info = {
      ...props.info,
      patientBasicId: props.info.id,
    };
    console.log('🚀 ~ file: index.vue:205 ~ handleAdd ~ data:', info);
    openDrawer(true, {
      isUpdate: false,
      record: { ...info },
    });
  }
  onUnmounted(() => {
    timeOuter.value = false;
  });
  // 回调
  function callSuccess(data) {
    console.log('🚀 ~ file: index.vue:212 ~ callSuccess ~ data:', data);
  }
  function callHover() {
    timeOuter.value = true;
  }
  function callIcon(data) {
    const info = {
      ...props.info,
      patientBasicId: props.info.id,
    };
    openDrawer(true, {
      isUpdate: true,
      record: { ...info, ...data },
    });
  }
</script>

<style lang="less" scoped>
  .timeline-outer {
    display: flex;
    margin-left: 20px;
    transition: all 0.3s ease-in-out;

    &_item {
      padding: 0 30px;
      height: 40px;
      line-height: 40px;
      border-radius: 30px;
      color: #fff;
      background: #0075ff;
      margin-right: 20px;
      cursor: pointer;
      letter-spacing: 2px;
    }
  }

  ::v-deep(.ant-picker) {
    width: 100%;
  }

  .ant-dropdown-link {
    display: block;
    margin-right: 16px;
    background: #fff;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    cursor: pointer;

    &:last-child {
      margin-right: 0;
    }

    &:hover {
      color: #0075ff;
    }
  }
</style>