kd-aiot-frontend-eam/src/views/ledgerAssets/mould/detail.vue

<template>
  <div class="ele-body">
    <!-- tab切换 -->
    <el-card :body-style="{ padding: 0 }">
      <div class="switch">
        <div class="switch_left">
          <ul>
            <li
              v-for="item in tabOptions"
              :key="item.key"
              :class="{ active: activeComp == item.key }"
              @click="activeComp = item.key"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
        <!-- <div class="right" style="padding: 10px">
          <el-button @click="$router.go(-1)">返回</el-button>
        </div> -->
      </div>
      <div class="page-title">
        <el-page-header @back="$router.go(-1)">
          <div slot="content" class="pageContent">
            <span v-for="item in tabOptions" :key="item.key">
              {{ item.key == activeComp ? item.name + '详情' : '' }}
            </span>
          </div>
        </el-page-header>
      </div>
      <div class="content-wrapper">
        <component
          :is="activeComp"
          :rowId="rowId"
          :showTitle="false"
        ></component>
      </div>
    </el-card>
  </div>
</template>

<script>
  import baseInfo from './edit.vue';
  import maintain from '../components/details/maintain.vue';
  import repair from '../components/details/repair.vue';
  import malfunction from '../components/details/malfunction.vue';
  import inventory from '../components/details/inventory.vue';
  import pointInspection from '../components/details/point-inspection.vue';
  import internet from '../components/details/internet.vue';
  export default {
    components: {
      baseInfo,
      pointInspection,
      maintain,
      repair,
      inventory,
      malfunction,
      internet
    },
    data() {
      return {
        activeComp: 'baseInfo',
        tabOptions: [
          { key: 'baseInfo', name: '模具信息' },
          { key: 'pointInspection', name: '巡点检记录' },
          { key: 'maintain', name: '保养记录' },
          // { key: 'mould', name: '关联模具' },
          { key: 'repair', name: '维修记录' },
          { key: 'malfunction', name: '故障记录' },
          { key: 'inventory', name: '盘点记录' },
          { key: 'internet', name: '物联数据' }
          // // { key: "InternetRecord", name: "物联记录" },
        ],
        rowId: null
      };
    },

    created() {
      this.rowId = this.$route.query.id;
    }
  };
</script>

<style lang="scss" scoped>
  .page-title {
    background: #fff;
    padding: 26px 10px 15px;
    border-bottom: 1px solid #eaeefb;
  }
</style>