ISCS_Ui_Admin_Base/src/views/mes/material/lockers/DetailsIndex.vue

<template>
  <div class="app-container">
    <el-radio-group v-model="tabPosition" style="margin: 5px" @change="handleTabChange">
      <el-radio-button label="first">物资清单</el-radio-button>
      <el-radio-button label="second">领取记录</el-radio-button>
      <el-radio-button label="third">检查计划</el-radio-button>
      <el-radio-button label="fourth">检查记录</el-radio-button>
      <el-radio-button label="fifth">维修/更换记录</el-radio-button>
    </el-radio-group>
    <!-- 物资清单 -->
    <div v-if="tabPosition == 'first'" class="materialsListcon">
      <MaterialInfromation :cabinetId="cabinetId"/>
    </div>
    <!-- 领取记录 -->
    <div v-if="tabPosition == 'second'" class="materialsListcon">
      <CollectionManagement :cabinetId="cabinetId"/>
    </div>
    <!-- 检查计划 -->
    <div v-if="tabPosition == 'third'" class="materialsListcon">
      <InspectionPlan :cabinetId="cabinetId" @planId="handlePlanId"/>
    </div>
    <!-- 检查记录 -->
    <div v-if="tabPosition == 'fourth'" class="materialsListcon">
      <InspectionRecords :cabinetId="cabinetId" :planName="planName" :planId="planId" @recordId="handleRecordId"/>
    </div>
    <!-- 更换记录 -->
    <div v-if="tabPosition == 'fifth'" class="materialsListcon">
      <ReplacementRecords :cabinetId="cabinetId" :recordId="recordId"/>
    </div>
  </div>
</template>

<script>
import MaterialInfromation from '@/views/mes/material/materialinformation/index.vue'
import CollectionManagement from '@/views/mes/material/collectionmanagement/index.vue'
import InspectionPlan from '@/views/mes/material/inspectionplan/index.vue'
import InspectionRecords from '@/views/mes/material/Inspectionrecords/index.vue'
import ReplacementRecords from '@/views/mes/material/replacementrecords/index.vue'

export default {
  components: {
    MaterialInfromation,
    CollectionManagement,
    InspectionPlan,
    InspectionRecords,
    ReplacementRecords
  },
  data() {
    return {
      tabPosition: 'first', //顶部切换
      cabinetId: null,
      planId: null,
      planName: '',
      recordId: null,
      PlanData:null,//接收传递的planId和planName
    }
  },

  created() {
    this.cabinetId = this.$route.query.cabinetId || ''

  },
  methods: {
    handleTabChange(newTab) {
      // 切换tab的操作
      this.tabPosition = newTab
      this.PlanData=null
      this.planId = null
      this.planName = ''
    },
    handlePlanId(data) {
      console.log('接收到的 planId:', data)
       this.PlanData = data
      if (this.PlanData) {
        this.planId = this.PlanData.planId
        this.planName = this.PlanData.planName
      }
      this.tabPosition = 'fourth'
    },
    handleRecordId(recordId) {
      console.log('接收到的 recordId:', recordId)
      this.recordId = recordId
      this.tabPosition = 'fifth'
    }
  }
}
</script>
<style lang="scss" scoped>
</style>