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

<template>
  <div class="m-4">
    <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="custome-tab">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="Tab 1">Content of Tab Pane 1</a-tab-pane>
        <a-tab-pane key="2" tab="Tab 2" force-render>Content of Tab Pane 2</a-tab-pane>
        <a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane>
      </a-tabs>
    </div>
    <div class="tab">
      <div class="tab-item tab-item-first--selected"> 业务报价 </div>
      <div class="tab-item"> 业务报价 </div>
      <div class="tab-item"> 其他测试 </div>
      <div class="tab-item"> 其他测试 </div>
      <div class="tab-item tab-item--selected"> 其他测试 </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { XTTab } from '/@/components/XTTab/index';
  import { XTForm } from '/@/components/XTForm/index';
  import { onMounted } from 'vue';
  import { Sift } from '/@/components/XTList/index';

  const tabSelected = ref('0');
  const dataSource = ref([]);
  const activeKey = ref('1');
  const siftData = [
    {
      field: 'gender',
      label: '性别',
      value: '男',
    },
    {
      field: 'age',
      label: '年龄区间',
      value: '25岁-50岁',
    },
  ];
  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);
    }
  });
  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,
    },
  ];

  // 回调
  function callTab(data) {
    console.log('🚀 ~ file: index.vue:41 ~ callTab ~ data:', data);
    tabSelected.value = data.value;
  }
</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;
    }
  }

  .tab {
    background-color: #f6f7fb;
    // height: 48px;
    display: flex;

    &-item {
      width: 200px;
      height: 60px;
      text-align: center;
      line-height: 4.8;
      font-size: 16px;
      color: #222a3d;
      cursor: pointer;
      background-image: url('/@/assets/images/tabm.png');
      background-size: cover;
      margin-left: -28px;
      transition: all 0.32s ease-in-out;

      &:first-child {
        background-image: url('/@/assets/images/tab.png');
        margin-left: -14px;

        &:hover {
          background-image: url('/@/assets/images/tab-selected.png') !important;
          z-index: 29;
        }
      }

      &:last-child {
        background-image: url('/@/assets/images/tabl.png');
      }

      &-first--selected {
        background-image: url('/@/assets/images/tab-selected.png') !important;
        z-index: 19;
      }

      &--selected {
        background-image: url('/@/assets/images/tabm-selected.png') !important;
        z-index: 19;
      }

      &:hover {
        background-image: url('/@/assets/images/tabm-selected.png') !important;
        z-index: 29;
      }
    }
  }
</style>