bonus-ui/src/views/EquipmentEntryApproval/index.vue

<template>
  <div class="app-container">
    <component
      :is="currentComponent"
      :query-params="currentQueryParams"
      @switch-view="showDetails"
    />
  </div>
</template>

<script>
import EquipmentMainList from './EquipmentMainList.vue'
import EquipmentDetailList from './EquipmentDetailList.vue'
export default {
  components: {
    EquipmentMainList,
    EquipmentDetailList
  },
  data() {
    return {
      isDetails:'0',
    }
  },
  computed: {
    currentComponent() {
      return this.isDetails === '0' ? 'EquipmentMainList' : 'EquipmentDetailList'
    },
    currentQueryParams() {
      return this.isDetails === '0' ? this.queryParams : this.queryParamsDetails
    }
  },
  methods: {
    //展示明细
    showDetails( num){
      this.isDetails = num;
    }
  }
}
</script>

<style scoped lang="scss">
.view-btn {
  color: #409eff;
  font-size: 14px;
  font-weight: bold;
}

.edit-btn {
  color: #67c23a;
  font-size: 12px;
  font-weight: bold;
}

.delete-btn {
  color: #f56c6c;
  font-size: 16px;
  font-weight: bold;
}

.app-container {
  padding: 20px;
}

::v-deep .el-pagination {
  margin-top: 15px;
  text-align: right;
}

::v-deep .el-button {
  margin-right: 8px;
}
</style>