feat: 添加示例代码

src/views/demo/card/index.vue

@@ -0,0 +1,279 @@
+<template>
+  <div class="p-2 m-4 round-md">
+    <DescCard
+      id="1"
+      icon="icon-xt-add_default"
+      title="透析测量"
+      type="touxi"
+      :data="descData"
+      :right="descRight"
+    />
+    <div class="my-2">
+      <SimpleCard id="1" title="透析测量" type="touxi">
+        <template #headRight>
+          <div> <XTForm :form-data="formData" /> </div>
+        </template>
+      </SimpleCard>
+    </div>
+
+    <div class="flex justify-between">
+      <XTCard class="m-2" :data="cardData1" @item-click="cellCard" />
+    </div>
+    <div class="flex justify-between">
+      <XTCard class="m-2" :data="cardData" @item-click="cellCard" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { XTCard, SimpleCard } from '@/components/XTCard/index';
+  import DescCard from '@/components/XTCard/src/DescCard.vue';
+  import { ColorEnum } from '@/enums/colorEnum';
+  import { XTForm } from '/@/components/XTForm/index';
+
+  const descData = [
+    {
+      label: '诊断名称/病史/状态',
+      value: '乙肝 / 2022-01-19 ～',
+      tags: [{ id: '12', label: '活动中', type: 'error' }],
+    },
+    {
+      label: '备注',
+      value: '药物治疗或其他治疗',
+    },
+    {
+      label: '测试',
+      value: '药物治疗或其他治疗',
+    },
+    {
+      label: '诊断名称/病史/状态备份',
+      value: '结核 / 2022-02-10 ～ 20',
+      tags: [
+        { id: '1', label: '未活动', type: 'muted' },
+        { id: '2', label: '未活动1', type: 'primary' },
+      ],
+    },
+  ];
+  const descRight = {
+    show: true,
+    date: '2023-04-23',
+    doctor: '张医生',
+    edit: true,
+    delete: true,
+  };
+  // formdata
+  const formData = [
+    {
+      name: 'text',
+      componentType: 'Select',
+      placeholder: '请选择',
+      width: 150,
+      defaultValue: '1',
+      dicts: [
+        { label: '全部', value: '1' },
+        { label: '未称量', value: '2', prefixColor: '#1BC1B3' },
+        { label: '待确认', value: '3', prefixColor: '#854AFF' },
+        { label: '可打印', value: '4', prefixColor: '#1BC1B3' },
+        { label: '完成', value: '5', prefixColor: '#854AFF' },
+      ],
+    },
+    {
+      name: 'text22',
+      componentType: 'Select',
+      placeholder: '请选择',
+      width: 150,
+      defaultValue: '1',
+      dicts: [
+        { label: '第一班', value: '1' },
+        { label: '第二班', value: '2' },
+        { label: '第三班', value: '3' },
+      ],
+    },
+    {
+      name: 'text1',
+      componentType: 'Input',
+      placeholder: '请输入',
+      prefix: 'icon-xt-search',
+      width: 200,
+    },
+    {
+      name: 'text233',
+      componentType: 'RangePicker',
+      placeholder: '请输入',
+      format: 'YYYY-MM-DD',
+      valueFormat: 'YYYY-MM-DD',
+    },
+  ];
+  // card 标签组
+  const cardData = [
+    {
+      groupKey: '123',
+      groupTit: '待确认/测试/待核对',
+      groupMode: 'default',
+      groupValue: [
+        { value: 10, color: ColorEnum.BLUE, background: ColorEnum.BLUE_BG },
+        { value: 1, color: ColorEnum.MUTED, background: ColorEnum.MUTED_BG },
+        { value: 4, color: ColorEnum.PRIMARY, background: ColorEnum.PRIMARY_BG },
+      ],
+      groupValueShow: true,
+      groupData: [
+        {
+          id: '1',
+          type: '1',
+          borderLeftColor: ColorEnum.BLUE,
+          ward: 'A区',
+          bed: '99',
+          cure: 'HDF/AVF',
+          name: '范了饭饭饭',
+          age: 20,
+          gender: '1',
+          infoShow: true,
+          info: [
+            { label: '时间', value: '4:00', span: 12 },
+            { label: '超滤量', value: '2.1', suffix: 'kg', span: 12 },
+            { label: '血流量', value: '300', span: 12 },
+            { label: '透析器', value: 'fx60', span: 12 },
+            { label: '抗凝剂', value: '低分子肝素1配上低分子肝素2', span: 24 },
+          ],
+          way: [
+            { label: '下机', type: '0' },
+            { label: '医嘱执行', type: '1', badge: 12 },
+            { label: '记录并发症', type: '2', badge: 2 },
+            { label: '交叉核对', type: '3' },
+          ],
+        },
+        {
+          id: '12',
+          type: '2',
+          borderLeftColor: ColorEnum.PRIMARY,
+          ward: 'C区',
+          bed: '99',
+          cure: 'HDF/AVF',
+          name: '范了饭饭饭',
+          age: 20,
+          gender: '1',
+          infoShow: true,
+          info: [
+            { label: '时间', value: '4:00', span: 12 },
+            { label: '超滤量', value: '2.1', suffix: 'kg', span: 12 },
+            { label: '血流量', value: '300', span: 12 },
+            { label: '透析器', value: 'fx60', span: 12 },
+            { label: '抗凝剂', value: '低分子肝素1配上低分子肝素2', span: 24 },
+          ],
+          way: [
+            { label: '下机', type: '0' },
+            { label: '医嘱执行', type: '1', badge: 12 },
+            { label: '记录并发症', type: '2', badge: 2 },
+            { label: '交叉核对', type: '3' },
+          ],
+        },
+        {
+          id: '3',
+          type: '3',
+          borderLeftColor: ColorEnum.MUTED,
+          ward: 'C区',
+          bed: '99',
+          cure: 'HDF/AVF',
+          name: '范了饭饭饭',
+          age: 20,
+          gender: '1',
+          infoShow: true,
+          info: [
+            { label: '时间', value: '4:00', span: 12 },
+            { label: '超滤量', value: '2.1', suffix: 'kg', span: 12 },
+            { label: '血流量', value: '300', span: 12 },
+            { label: '透析器', value: 'fx60', span: 12 },
+            { label: '抗凝剂', value: '低分子肝素1配上低分子肝素2', span: 24 },
+          ],
+          way: [
+            { label: '下机', type: '0' },
+            { label: '医嘱执行', type: '1', badge: 12 },
+            { label: '记录并发症', type: '2', badge: 2 },
+            { label: '交叉核对', type: '3' },
+          ],
+        },
+      ],
+    },
+  ];
+  const cardData1 = [
+    {
+      groupKey: '123',
+      groupTit: '待确认/测试',
+      groupMode: 'simple',
+      groupValue: [
+        { value: 10, color: ColorEnum.BLUE, background: ColorEnum.BLUE_BG },
+        { value: 1, color: ColorEnum.MUTED, background: ColorEnum.MUTED_BG },
+      ],
+      groupValueShow: true,
+      groupData: [
+        {
+          id: '1',
+          type: '1',
+          borderLeftColor: ColorEnum.BLUE,
+          ward: 'A区',
+          bed: '99',
+          cure: 'HDF/AVF',
+          name: '范了饭饭饭',
+          age: 20,
+          gender: '1',
+          infoShow: false,
+          way: [
+            { label: '透前称量', type: '2' },
+            { label: '确认配方', type: '3' },
+          ],
+        },
+      ],
+    },
+  ];
+
+  function cellCard(data) {
+    console.log('🚀 ~ file: index.vue:106 ~ cellCard ~ data:', data);
+  }
+</script>
+
+<style lang="less" scoped>
+  // ::v-deep(.ant-input) {
+  //   border-color: #fff;
+  //   border-radius: 10px;
+  // }
+
+  // ::v-deep(.ant-input-affix-wrapper) {
+  //   border-color: #fff;
+  //   border-radius: 10px;
+  // }
+
+  // ::v-deep(.ant-picker) {
+  //   border-color: #fff;
+  //   border-radius: 10px;
+  // }
+
+  ::v-deep(.ant-form-item-control-input) {
+    border-color: #fff;
+    background-color: transparent;
+  }
+
+  ::v-deep(.ant-select:not(.ant-select-customize-input) .ant-select-selector) {
+    border-color: #fff;
+    border-radius: 18px;
+  }
+
+  ::v-deep(.ant-input) {
+    border-color: #fff;
+    border-radius: 18px;
+  }
+
+  ::v-deep(.ant-input-affix-wrapper) {
+    border-color: #fff;
+    border-radius: 18px;
+  }
+
+  ::v-deep(.ant-picker) {
+    border-color: #fff;
+    border-radius: 18px;
+  }
+
+  ::v-deep(.ant-select-selector) {
+    border-color: #fff;
+    border-radius: 18px;
+  }
+</style>

src/views/demo/form/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div> 占位符 </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped></style>

src/views/demo/tab/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div> 占位符 </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped></style>

src/views/demo/table/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div> 占位符 </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped></style>

src/views/demo/title/data.ts

@@ -0,0 +1,258 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Form';
+import { radioBoolean } from '/@/utils/filters';
+import { listDictModel } from '/@/api/common';
+
+export const dataFormSchema: FormSchema[] = [
+  {
+    field: 'PlainTitle',
+    component: 'PlainTitle',
+    defaultValue: '检测时间',
+    colProps: {
+      span: 24,
+    },
+  },
+  {
+    field: 'PlainText1111',
+    component: 'RadioDescGroup',
+    label: '1、干体重在过去3～6个月总的变化',
+    componentProps: {
+      options: [
+        { label: '干体重没有减少或体重丢失 <0.5kg (0分)', value: 0 },
+        { label: '体重丢失 ≥0.5kg，但 ＜1kg (1分)', value: 1 },
+      ],
+    },
+    colProps: {
+      span: 24,
+    },
+    defaultValue: 1,
+  },
+  {
+    field: 'configName',
+    label: '参数名称',
+    labelColor: '#818694',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入参数名称',
+      extra: '123123',
+    },
+  },
+  {
+    field: 'configName1',
+    label: '参数名称',
+    labelColor: '#818694',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入参数名称',
+      extra: '123123',
+    },
+  },
+  {
+    field: 'configName22',
+    label: '参数名称',
+    labelColor: '#818694',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入参数名称',
+      extra: '123123',
+    },
+  },
+  {
+    field: 'configName333',
+    label: '有无异常',
+    component: 'ApiComplex',
+    componentProps: ({ formModel }) => {
+      return {
+        placeholder: '请输入异常内容',
+        api: listDictModel,
+        params: {
+          dictCode: 'sys_dict_type',
+        },
+        onChange: e => {
+          console.log('🚀 ~ file: data.ts:81 ~ e:', e);
+          return (formModel['configName333'] = e);
+        },
+      };
+    },
+  },
+  {
+    field: 'configKey',
+    label: '参数键名',
+    labelColor: '#818694',
+    subLabel: '测试',
+    subLabelColor: '#FF5D39',
+    component: 'Input',
+    required: true,
+    componentProps: {
+      placeholder: '请输入参数键名',
+      // style: { width: '200px' },
+    },
+  },
+  {
+    field: 'configValue',
+    label: '参数键值',
+    component: 'InputNumberGroup',
+    componentProps: ({ formModel }) => {
+      return {
+        options: [
+          { min: 0, max: 200, placeholder: '最小值 0', field: 'min' },
+          { min: 0, max: 200, placeholder: '最大值 200', field: 'max' },
+        ],
+        onChange: e => {
+          return (formModel['configValue'] = e);
+        },
+      };
+    },
+  },
+  {
+    field: 'idCard',
+    label: '证件号码',
+    component: 'ApiInputDict',
+    componentProps: ({ formModel }) => {
+      return {
+        placeholder: '请输入异常内容',
+        api: listDictModel,
+        params: {
+          dictCode: 'sys_dict_type',
+          dictSort: true,
+        },
+        onChange: e => {
+          console.log('🚀 ~ file: data.ts:81 ~ e:', e);
+          return (formModel['idCard'] = e);
+        },
+      };
+    },
+  },
+  {
+    field: 'sort',
+    label: '排序',
+    component: 'InputNumber',
+    required: true,
+    defaultValue: '1',
+    componentProps: {
+      placeholder: '请输入排序',
+      min: 1,
+    },
+  },
+  {
+    field: 'sysInner',
+    label: '系统内置',
+    component: 'RadioGroup',
+    componentProps: {
+      options: radioBoolean,
+      disabled: true,
+    },
+    defaultValue: '1',
+  },
+  {
+    field: 'apiCheck',
+    label: '系统内置',
+    component: 'ApiCheckboxGroup',
+    componentProps: {
+      api: listDictModel,
+      params: {
+        dictCode: 'bm_pump',
+      },
+    },
+    // defaultValue: ['pump_single'],
+  },
+  // {
+  //   field: 'disable',
+  //   label: '状态',
+  //   component: 'RadioGroup',
+  //   required: true,
+  //   componentProps: {
+  //     options: radioSwitch,
+  //   },
+  //   defaultValue: '0',
+  // },
+  {
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入备注',
+    },
+  },
+];
+export const columns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    width: 100,
+    edit: true,
+    editable: true,
+    editComponent: 'Input',
+  },
+  {
+    title: '类型',
+    dataIndex: 'type',
+    width: 150,
+  },
+  {
+    title: '联系人',
+    dataIndex: 'contractUser',
+    width: 150,
+  },
+  {
+    title: '联系人电话',
+    dataIndex: 'contactMobile',
+    width: 150,
+  },
+  {
+    title: '名称',
+    dataIndex: 'name',
+    width: 100,
+  },
+  {
+    title: '类型',
+    dataIndex: 'type',
+    width: 150,
+  },
+  {
+    title: '联系人',
+    dataIndex: 'contractUser',
+    width: 150,
+  },
+  {
+    title: '联系人电话',
+    dataIndex: 'contactMobile',
+    width: 150,
+  },
+  {
+    title: '管理账号',
+    dataIndex: 'username',
+    width: 150,
+  },
+  {
+    title: '套餐名称',
+    dataIndex: 'packageName',
+    width: 150,
+  },
+  {
+    title: '联系人',
+    dataIndex: 'contractUser',
+    width: 150,
+  },
+  {
+    title: '联系人电话',
+    dataIndex: 'contactMobile',
+    width: 150,
+  },
+  {
+    title: '管理账号',
+    dataIndex: 'username',
+    width: 150,
+  },
+  {
+    title: '套餐名称',
+    dataIndex: 'packageName',
+    width: 150,
+    fixed: 'right',
+  },
+  {
+    title: '状态',
+    dataIndex: 'disable',
+    fixed: 'right',
+  },
+];

src/views/demo/title/index.vue

@@ -0,0 +1,596 @@
+<template>
+  <div class="m-4">
+    <!-- 透前准备
+    <a-button type="primary" @click="plusFn">
+      {{ countRef }}
+    </a-button> -->
+    <XTTitle title="透析病历" :right-data="titleData" />
+
+    <div class="mt-6" />
+    <XTTab type="illness11" :selected="tabSelected" :data="tabData1" @item-click="callTab" />
+    <div class="mt-6" />
+    <div class="mt-6" />
+    <XTTab type="illness11" :selected="tabSelected" :data="tabData2" @item-click="callTab" />
+    <div class="mt-6" />
+    <div class="flex justify-between my-4">
+      <XTTab
+        type="illness"
+        :width="120"
+        :selected="tabSelected"
+        :data="tabData"
+        @item-click="callTab"
+      />
+      <XTForm :form-data="formData" />
+    </div>
+    <div class="flex">
+      <Sift :data="siftData" />
+    </div>
+    <div class="m-6">
+      <BasicForm @register="registerForm" @field-value-change="filedChange" />
+    </div>
+    <div>
+      <BasicTable @register="registerTable">
+        <template #headerTop>
+          <span>headerTop</span>
+        </template>
+        <template #toolbar>
+          <span>toolbar</span>
+        </template>
+      </BasicTable>
+    </div>
+    <div class="mx-6 my-2">
+      <ChartsCard
+        title="透前血压趋势"
+        :has-safe="true"
+        :colors="chartData.colors"
+        :safe-range="chartData.safeRange"
+      />
+    </div>
+    <div class="mx-6 my-2">
+      <DescCard
+        id="1"
+        icon="icon-xt-add_default"
+        title="透析测量"
+        type="touxi"
+        :data="descData"
+        :right="descRight"
+      />
+    </div>
+    <div class="mx-6 my-2">
+      <TimeLine :data="timeLineData" @hover="callHover">
+        <template #head>
+          <div class="animate__animated animate__slideInLeft">
+            <div class="timeline-outer" v-if="timeOuter">
+              <div class="timeline-outer_item" @click="handleAdd">AVF</div>
+              <div class="timeline-outer_item">AVH</div>
+              <div class="timeline-outer_item">TCG</div>
+            </div>
+          </div>
+        </template>
+      </TimeLine>
+    </div>
+    <div class="mx-6 my-2">
+      <List type="default" :data="listData" selected="0" />
+    </div>
+    <div class="mx-6 my-2">
+      <List type="attachment" :data="listData1" selected="0" :width="320" />
+    </div>
+    <div class="flex justify-between">
+      <XTCard class="m-2" :data="cardData1" @item-click="cellCard" />
+    </div>
+    <div class="flex justify-between">
+      <XTCard class="m-2" :data="cardData" @item-click="cellCard" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { XTTab } from '/@/components/XTTab/index';
+  import { XTCard } from '/@/components/XTCard/index';
+  import { XTForm } from '/@/components/XTForm/index';
+  import { XTTitle } from '/@/components/XTTitle/index';
+  import { ColorEnum } from '/@/enums/colorEnum';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { dataFormSchema, columns } from './data';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { onMounted } from 'vue';
+  import ChartsCard from '/@/components/XTCard/src/ChartsCard.vue';
+  import DescCard from '/@/components/XTCard/src/DescCard.vue';
+  import TimeLine from '/@/components/XTTimeLine/src/TimeLine.vue';
+  import List from '/@/components/XTList/src/List.vue';
+  import { Sift } from '/@/components/XTList/index';
+  // import { TransitionPresets, useTransition } from '@vueuse/core';
+
+  const tabSelected = ref('0');
+  const dataSource = ref([]);
+  const titleData = [
+    {
+      type: 'import',
+      icon: 'icon-xt-import_default',
+    },
+    {
+      type: 'export',
+      icon: 'icon-xt-export_default',
+    },
+    {
+      type: 'add',
+      btnIcon: 'icon-xt-add_default',
+      btnText: '患者建档',
+    },
+  ];
+  const siftData = [
+    {
+      field: 'gender',
+      label: '性别',
+      value: '男',
+    },
+    {
+      field: 'age',
+      label: '年龄区间',
+      value: '25岁-50岁',
+    },
+  ];
+  const chartData = {
+    colors: [
+      {
+        color: 'rgba(0, 117, 255, 1)',
+        label: '化验值',
+        dot: 'rgba(0, 117, 255, 1)',
+      },
+    ],
+    safeRange: [
+      {
+        // name: '60分到80分',
+        yAxis: 0,
+      },
+      {
+        yAxis: 20,
+      },
+    ],
+  };
+  const listData = [
+    {
+      id: '0',
+      title: '红细胞笔迹测定',
+      startTime: '2023-11-11 12:00',
+      endTime: '2023-12-11 12:00',
+      status: 'default',
+    },
+    {
+      id: '2',
+      title: '红细胞笔迹测定2',
+      startTime: '2023-11-11 12:00',
+      endTime: '2023-12-11 12:00',
+      status: 'default',
+    },
+  ];
+  const listData1 = [
+    {
+      id: '0',
+      title: '红细胞笔迹测定',
+      startTime: '2023-11-11 12:00',
+      endTime: '2023-12-11 12:00',
+      status: 'default',
+    },
+    {
+      id: '2',
+      title: '红细胞笔迹测定2',
+      startTime: '2023-11-11 12:00',
+      endTime: '2023-12-11 12:00',
+      status: 'default',
+    },
+  ];
+
+  const descData = [
+    {
+      label: '诊断名称/病史/状态',
+      value: '乙肝 / 2022-01-19 ～',
+      tags: [{ id: '12', label: '活动中', type: 'error' }],
+    },
+    {
+      label: '备注',
+      value: '药物治疗或其他治疗',
+    },
+    {
+      label: '测试',
+      value: '药物治疗或其他治疗',
+    },
+    {
+      label: '诊断名称/病史/状态备份',
+      value: '结核 / 2022-02-10 ～ 20',
+      tags: [
+        { id: '1', label: '未活动', type: 'muted' },
+        { id: '2', label: '未活动1', type: 'primary' },
+      ],
+    },
+  ];
+  const descRight = {
+    show: true,
+    date: '2023-04-23',
+    doctor: '张医生',
+    edit: true,
+    delete: true,
+  };
+
+  const timeLineData = [
+    {
+      id: '1',
+      dot: '王医生',
+      date: '2023-05-20',
+      cnt: {
+        title: '测试' + Math.round(Math.random() * 1000),
+        id: '123',
+        type: '123',
+        data: descData,
+      },
+    },
+    {
+      id: '12',
+      dot: '范医生',
+      date: '2023-03-20',
+      cnt: {
+        title: '测试' + Math.round(Math.random() * 1000),
+        id: '123',
+        type: '123',
+        data: descData,
+      },
+    },
+  ];
+  const timeOuter = ref(false);
+  onMounted(async () => {
+    for (let i = 0; i < 10; i++) {
+      const obj = {
+        createTime: '2023-05-23 10:09:48',
+        updateTime: '2023-05-23 19:00:32',
+        id: '1660830352886149125' + Math.round(Math.random() * 10000),
+        name: '驼人',
+        packageId: '1655202440997244930',
+        packageName: '测试套餐',
+        username: 'tuoren',
+        type: 'custom',
+        contractUser: 'Lf',
+        contactMobile: '18339543638',
+        remark: null,
+        disable: 0,
+      };
+      dataSource.value.push(obj);
+    }
+
+    await setFieldsValue({
+      configName333: {
+        bool: 1,
+        remark: '321321dsada',
+        dictValues: ['DIC_BIZ', '-1'],
+      },
+      configValue: [100, 150],
+      idCard: {
+        input: '测试',
+        dictValue: 'DICT_SYS',
+      },
+      apiCheck: ['pump_single'],
+    });
+  });
+  // const count = ref(0);
+  // const countRef = useTransition(count, {
+  //   duration: 1000,
+  //   transition: TransitionPresets.easeInCirc,
+  // });
+  // function plusFn() {
+  //   count.value = Math.round(Math.random() * 100);
+  // }
+  // const [registerTable, { reload, getCacheColumns, setColumns }] = useTable({
+  const [registerTable] = useTable({
+    id: 'sys_config',
+    title: '参数列表2121',
+    columns,
+    dataSource: dataSource,
+    useSearchForm: false,
+    titleStyle: {
+      fontSize: '14px',
+      color: '#000a18',
+      cursor: 'default',
+    },
+    titleLined: true,
+    bordered: false,
+    showIndexColumn: false,
+    pagination: false,
+    // maxHeight: 350,
+    canResize: false,
+  });
+
+  const [registerForm, { setFieldsValue }] = useForm({
+    layout: 'vertical',
+    labelWidth: '100%',
+    baseColProps: {
+      span: 8,
+    },
+    baseRowGutter: [16, 8],
+    schemas: dataFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 8,
+    },
+    showResetButton: false,
+    submitButtonOptions: {
+      text: '添加',
+    },
+  });
+
+  function filedChange(key, value) {
+    console.log('🚀 ~ file: index.vue:47 ~ filedChange ~ value:', value);
+    console.log('🚀 ~ file: index.vue:47 ~ filedChange ~ key:', key);
+  }
+  const tabData = [
+    {
+      key: '0',
+      label: '全部',
+      value: 128,
+      hasValue: true,
+      hasBracket: true,
+    },
+    {
+      key: '1',
+      label: 'A区',
+      value: 12,
+      hasValue: true,
+      prefixColor: '#1BC1B3',
+      valueColor: 'red',
+      hasBracket: true,
+    },
+    {
+      key: '2',
+      label: 'B区',
+      value: 18,
+      hasValue: true,
+      prefixColor: '#854AFF',
+      hasBracket: true,
+    },
+  ];
+  const tabData2 = [
+    {
+      key: '0',
+      label: 'A1',
+    },
+    {
+      key: '1',
+      label: 'A2',
+      disabled: true,
+    },
+    {
+      key: '2',
+      label: 'B3',
+    },
+  ];
+  const tabData1 = [
+    {
+      key: '0',
+      label: '全部',
+    },
+    {
+      key: '1',
+      label: 'A区',
+    },
+    {
+      key: '2',
+      label: 'B区',
+    },
+  ];
+  // formdata
+  const formData = [
+    {
+      name: 'text',
+      label: '全部',
+      componentType: 'Select',
+      placeholder: '请选择',
+      width: 80,
+      defaultValue: '1',
+      dicts: [
+        { label: '全部', value: '1' },
+        { label: '未称量', value: '2', prefixColor: '#1BC1B3' },
+        { label: '待确认', value: '3', prefixColor: '#854AFF' },
+        { label: '可打印', value: '4', prefixColor: '#1BC1B3' },
+        { label: '完成', value: '5', prefixColor: '#854AFF' },
+      ],
+    },
+    {
+      name: 'text22',
+      componentType: 'Select',
+      placeholder: '请选择',
+      width: 120,
+      defaultValue: '1',
+      label: '班次',
+      dicts: [
+        { label: '第一班', value: '1' },
+        { label: '第二班', value: '2' },
+        { label: '第三班', value: '3' },
+      ],
+    },
+    {
+      name: 'text1',
+      componentType: 'Input',
+      placeholder: '请输入',
+      width: 200,
+    },
+    {
+      name: 'text233',
+      componentType: 'DatePicker',
+      placeholder: '请输入',
+      format: 'YYYY-MM-DD',
+      valueFormat: 'YYYY-MM-DD',
+    },
+    {
+      name: 'text233',
+      componentType: 'RangePicker',
+      placeholder: '请输入',
+      format: 'YYYY-MM-DD',
+      valueFormat: 'YYYY-MM-DD',
+    },
+    {
+      name: 'filter',
+      componentType: 'IconBtn',
+      count: 4,
+    },
+  ];
+  // card 标签组
+  const cardData = [
+    {
+      groupKey: '123',
+      groupTit: '待确认/测试/待核对',
+      groupMode: 'default',
+      groupValue: [
+        { value: 10, color: ColorEnum.BLUE, background: ColorEnum.BLUE_BG },
+        { value: 1, color: ColorEnum.MUTED, background: ColorEnum.MUTED_BG },
+        { value: 4, color: ColorEnum.PRIMARY, background: ColorEnum.PRIMARY_BG },
+      ],
+      groupValueShow: true,
+      groupData: [
+        {
+          id: '1',
+          type: '1',
+          borderLeftColor: ColorEnum.BLUE,
+          ward: 'A区',
+          bed: '99',
+          cure: 'HDF/AVF',
+          name: '范了饭饭饭',
+          age: 20,
+          gender: '1',
+          infoShow: true,
+          info: [
+            { label: '时间', value: '4:00', span: 12 },
+            { label: '超滤量', value: '2.1', suffix: 'kg', span: 12 },
+            { label: '血流量', value: '300', span: 12 },
+            { label: '透析器', value: 'fx60', span: 12 },
+            { label: '抗凝剂', value: '低分子肝素1配上低分子肝素2', span: 24 },
+          ],
+          way: [
+            { label: '下机', type: '0' },
+            { label: '医嘱执行', type: '1', badge: 12 },
+            { label: '记录并发症', type: '2', badge: 2 },
+            { label: '交叉核对', type: '3' },
+          ],
+        },
+        {
+          id: '12',
+          type: '2',
+          borderLeftColor: ColorEnum.PRIMARY,
+          ward: 'C区',
+          bed: '99',
+          cure: 'HDF/AVF',
+          name: '范了饭饭饭',
+          age: 20,
+          gender: '1',
+          infoShow: true,
+          info: [
+            { label: '时间', value: '4:00', span: 12 },
+            { label: '超滤量', value: '2.1', suffix: 'kg', span: 12 },
+            { label: '血流量', value: '300', span: 12 },
+            { label: '透析器', value: 'fx60', span: 12 },
+            { label: '抗凝剂', value: '低分子肝素1配上低分子肝素2', span: 24 },
+          ],
+          way: [
+            { label: '下机', type: '0' },
+            { label: '医嘱执行', type: '1', badge: 12 },
+            { label: '记录并发症', type: '2', badge: 2 },
+            { label: '交叉核对', type: '3' },
+          ],
+        },
+        {
+          id: '3',
+          type: '3',
+          borderLeftColor: ColorEnum.MUTED,
+          ward: 'C区',
+          bed: '99',
+          cure: 'HDF/AVF',
+          name: '范了饭饭饭',
+          age: 20,
+          gender: '1',
+          infoShow: true,
+          info: [
+            { label: '时间', value: '4:00', span: 12 },
+            { label: '超滤量', value: '2.1', suffix: 'kg', span: 12 },
+            { label: '血流量', value: '300', span: 12 },
+            { label: '透析器', value: 'fx60', span: 12 },
+            { label: '抗凝剂', value: '低分子肝素1配上低分子肝素2', span: 24 },
+          ],
+          way: [
+            { label: '下机', type: '0' },
+            { label: '医嘱执行', type: '1', badge: 12 },
+            { label: '记录并发症', type: '2', badge: 2 },
+            { label: '交叉核对', type: '3' },
+          ],
+        },
+      ],
+    },
+  ];
+  const cardData1 = [
+    {
+      groupKey: '123',
+      groupTit: '待确认/测试',
+      groupMode: 'simple',
+      groupValue: [
+        { value: 10, color: ColorEnum.BLUE, background: ColorEnum.BLUE_BG },
+        { value: 1, color: ColorEnum.MUTED, background: ColorEnum.MUTED_BG },
+      ],
+      groupValueShow: true,
+      groupData: [
+        {
+          id: '1',
+          type: '1',
+          borderLeftColor: ColorEnum.BLUE,
+          ward: 'A区',
+          bed: '99',
+          cure: 'HDF/AVF',
+          name: '范了饭饭饭',
+          age: 20,
+          gender: '1',
+          infoShow: false,
+          way: [
+            { label: '透前称量', type: '2' },
+            { label: '确认配方', type: '3' },
+          ],
+        },
+      ],
+    },
+  ];
+
+  function handleAdd() {
+    timeOuter.value = false;
+  }
+  // 回调
+  function callTab(data) {
+    console.log('🚀 ~ file: index.vue:41 ~ callTab ~ data:', data);
+    tabSelected.value = data.value;
+  }
+
+  function cellCard(data) {
+    console.log('🚀 ~ file: index.vue:106 ~ cellCard ~ data:', data);
+  }
+
+  function callHover() {
+    timeOuter.value = true;
+  }
+</script>
+
+<style lang="less" scoped>
+  ::v-deep(.ant-form-item-label > label) {
+    width: 100% !important;
+  }
+
+  .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;
+    }
+  }
+</style>