kd-aiot-frontend-qms/src/views/inspectionWork/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- Tab 页 -->
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="我的工单" name="myWork" lazy>
          <inspection-work-list ref="myWorkRef" :my-work="true" />
        </el-tab-pane>
        <el-tab-pane label="检测工单" name="workList" lazy>
          <inspection-work-list ref="workListRef" :my-work="false" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
  import InspectionWorkList from './components/inspectionWorkList.vue';

  // 可用的 tab 名称
  const TAB_NAMES = ['myWork', 'workList'];

  export default {
    name: 'InspectionWork',
    components: {
      InspectionWorkList
    },
    data() {
      return {
        activeTab: 'myWork',
        // 已挂载过的 tab：lazy 面板首次挂载时表格会自动加载数据，无需再手动 search
        mountedTabs: {}
      };
    },
    created() {
      const name = this.$route.query.name;
      this.activeTab = TAB_NAMES.includes(name) ? name : 'myWork';
      this.$set(this.mountedTabs, this.activeTab, true);
    },
    methods: {
      /* Tab 切换 */
      handleTabClick(tab) {
        console.log(tab, 'tab');
        const name = tab.paneName;
        this.$nextTick(() => {
          const ref =
            name === 'myWork' ? this.$refs.myWorkRef : this.$refs.workListRef;
          if (!ref) {
            return;
          }
          if (this.mountedTabs[name]) {
            // 面板之前已挂载，手动刷新
            ref.search();
          } else {
            // 首次挂载，ele-pro-table 会自动加载数据，这里只做标记，避免重复请求
            this.$set(this.mountedTabs, name, true);
          }
        });
      }
    }
  };
</script>

<style scoped lang="scss">
:deep(.el-tabs__content) {
  padding-top: 20px;
}

:deep(.el-tabs__header) {
  margin-bottom: 0;
}
</style>