xt-front/src/views/demo/card/index.vue

<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>