aiot-app/pages/ehs/accidentReport/index.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed
      statusBar
      left-icon="back"
      :title="navTitle"
      @clickLeft="back"
    />

    <!-- Tab 切换 -->
    <view class="tab-bar">
      <view
        class="tab-item"
        :class="{ active: activeTab === 'accident' }"
        @click="switchTab('accident')"
        >事故事件</view
      >
      <view
        class="tab-item"
        :class="{ active: activeTab === 'process' }"
        @click="switchTab('process')"
        >处理</view
      >
    </view>

    <!-- 内容 -->
    <view class="tab-content">
      <accident v-if="activeTab === 'accident'" ref="accidentRef" />
      <process v-if="activeTab === 'process'" ref="processRef" />
    </view>
  </view>
</template>

<script>
import accident from "./accident.vue";
import process from "./process.vue";

export default {
  components: { accident, process },
  data() {
    return {
      activeTab: "accident",
    };
  },
  computed: {
    navTitle() {
      return "事故上报";
    },
  },
  methods: {
    back() {
      uni.navigateBack();
    },
    switchTab(tab) {
      if (this.activeTab === tab) return;
      this.activeTab = tab;
      // 刷新对应列表
      this.$nextTick(() => {
        if (tab === "accident" && this.$refs.accidentRef) {
          this.$refs.accidentRef.reloadList();
        } else if (tab === "process" && this.$refs.processRef) {
          this.$refs.processRef.reloadList();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mainBox {
  background: #f5f7fb;
  min-height: 100vh;
}
.tab-bar {
  display: flex;
  background: #fff;
  border-bottom: 2rpx solid #eef2f6;
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 24rpx 0;
    font-size: 30rpx;
    color: #666;
    &.active {
      color: $theme-color;
      font-weight: bold;
      border-bottom: 4rpx solid $theme-color;
    }
  }
}
.tab-content {
  flex: 1;
  padding: 16rpx 24rpx;
}
</style>