xt-front/src/views/biz/engineer/water/detail/index.vue

<template>
  <div class="m-4">
    <div class="mb-4">
      <XTTitle :title="title" :go-back="true" />
    </div>
    <div class="py-2 bg-white">
      <a-tabs v-model:activeKey="activeKey" :destroyInactiveTabPane="true">
        <a-tab-pane
          v-for="item in tabData"
          :key="item.key"
          :tab="item.title"
          :class="'tab-' + item.key"
        >
          <!-- 基础信息 0 -->
          <div v-if="item.value == 0 && info.id">
            <DeviceBasic :info="info" />
          </div>
          <!-- 维修记录 1 -->
          <div v-if="item.value == 1 && info.id">
            <MaintenanceList :info="info" />
          </div>
          <!-- 保养记录 2 -->
          <div v-if="item.value == 2 && info.id">
            <UpkeepList :info="info" />
          </div>
          <!-- 检查记录 3 -->
          <div v-if="item.value == 3 && info.id">
            <TreatmentList :info="info" />
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { BasicTab, BasicTabActive } from './data';
  import DeviceBasic from '../deviceBasic/index.vue';
  import MaintenanceList from '../maintenanceList/index.vue';
  import UpkeepList from '../upkeepList/index.vue';
  import TreatmentList from '../treatmentList/index.vue';
  import { useRoute } from 'vue-router';
  import { XTTitle } from '/@/components/XTTitle/index';

  const route = useRoute();
  console.log('🚀 ~ file: index.vue:25 ~ route:', route);
  const info = ref({
    id: String(route.query?.id),
    name: route.query?.name,
  });
  const activeKey = ref(BasicTabActive);
  const tabData = ref(BasicTab);
  const title = `设备详情 — ${info.value.name}`;
</script>

<style lang="less" scoped>
  ::v-deep(.ant-tabs-tab) {
    padding: 12px;
  }

  ::v-deep(.ant-tabs-tabpane) {
    padding: 12px;
  }

  .tab-medicalDocuments {
    padding: 0;
  }
</style>