kd-aiot-frontend/src/views/rulesManagement/planRules/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <div class="switch">
        <div class="switch_left">
          <ul>
            <li
              v-for="item in tabOptions"
              :key="item.key"
              :class="{ active: activeComp == item.key }"
              @click="handleClick(item)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
        <!-- <div class="right" style="padding: 10px">
          <el-button @click="$router.go(-1)">返回</el-button>
        </div> -->
      </div>
      <div class="main">
        <div v-if="activeComp == 'point'">
          <InspectionPoint ref="InspectionPoint" :ruleType="String(1)" />
        </div>
        <div v-if="activeComp == 'anmac'">
          <Maintenance />
        </div>
        <div v-if="activeComp == 'warehouseInventory'">
          <WarehouseInventory />
        </div>
        <div v-if="activeComp == 'measuringSubmit'">
          <MeasuringSubmit />
        </div>
        <div v-if="activeComp == 'runtimeConfiguration'">
          <!-- 共用巡点检页面 -->
          <InspectionPoint2 ref="InspectionPoint2" :ruleType="String(5)"
        /></div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import InspectionPoint from '../inspectionPoint';
  import InspectionPoint2 from '../inspectionPoint';
  import MeasuringSubmit from '../measuringSubmit';
  import Maintenance from '../maintenance';
  import WarehouseInventory from '../warehouseInventory';
  export default {
    components: {
      InspectionPoint,
      InspectionPoint2,
      MeasuringSubmit,
      Maintenance,
      WarehouseInventory
    },
    data() {
      return {
        activeComp: 'point',
        tabOptions: [
          { key: 'point', name: '巡点检配置' },
          { key: 'anmac', name: '保养配置' },
          { key: 'warehouseInventory', name: '仓库盘点配置' },
          { key: 'measuringSubmit', name: '量具送检配置' },
          { key: 'runtimeConfiguration', name: '运行记录配置' }
        ],
        // 加载状态
        loading: false
      };
    },
    mounted() {
      console.log(this.$route.query);
      switch (this.$route.query.title) {
        case '巡检点':
          this.activeComp = 'point';
          break;
        case '保养':
          this.activeComp = 'anmac';
          break;
        case '量具送检':
          this.activeComp = 'measuringSubmit';
          break;
        case '仓库盘点配置':
          this.activeComp = 'warehouseInventory';
          break;
        case '运行记录配置':
          this.activeComp = 'runtimeConfiguration';
          break;
        default:
          break;
      }
    },
    methods: {
      handleClick(val) {
        this.activeComp = val.key;
        this.$forceUpdate();
      }
    }
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-card__body {
    padding-top: 0;
    padding-left: 0;
  }
  .main {
    padding-left: 17px;
    .plan {
      padding-top: 15px;
    }
  }
</style>