jsm-mall-front/src/views/workOrder/workOrderPool/detail.vue

<template>
  <div class="yemiansize">
    <el-tabs v-model="activeName" type="card" :lazy="true" @tab-click="handleClick">
      <el-tab-pane label="工单信息" name="workOrderInfo" key="workOrderInfo"> </el-tab-pane>
      <el-tab-pane label="操作明细" name="operationDetails" key="operationDetails"> </el-tab-pane>
      <el-tab-pane label="完工明细" name="detailsCompletion" key="detailsCompletion"></el-tab-pane>
      <el-tab-pane :label="`支付费用`" name="payFee" key="payFee"></el-tab-pane>
      <el-tab-pane v-if="EvaluationShow" label="评价信息" name="Evaluation" key="Evaluation"> </el-tab-pane>
      <el-tab-pane v-if="SettleAccountsShow" label="费用结算" name="SettleAccounts" key="SettleAccounts"> </el-tab-pane>
      <el-tab-pane v-if="PartsApplicationShow" label="配件申请" name="PartsApplication" key="PartsApplication">
      </el-tab-pane>
    </el-tabs>
    <div class="view_div">
      <div
        :style="{
          height: activeName === 'workOrderInfo' ? '100%' : '0px',
          overflow: activeName === 'workOrderInfo' ? '' : 'hidden'
        }"
      >
        <workOrderInfo :id="id" ref="workOrderInfo" :workOrderType="workOrderType" />
      </div>
      <OperationDetail v-if="activeName == 'operationDetails'" :id="id" ref="operationDetails" />
      <CompletionDetails v-if="activeName == 'detailsCompletion'" :id="id" ref="detailsCompletion" />
      <Payment v-if="activeName == 'payFee'" :id="id" ref="payFee" :workOrderType="workOrderType" />
      <Evaluation v-if="activeName == 'Evaluation' && EvaluationShow" :id="id" ref="Evaluation" />
      <SettleAccounts v-if="activeName == 'SettleAccounts' && SettleAccountsShow" :id="id" ref="SettleAccounts" />
      <PartsApplication
        v-if="activeName == 'PartsApplication' && PartsApplicationShow"
        :id="id"
        ref="PartsApplication"
      />
    </div>
  </div>
</template>

<script>
import workOrderInfo from './detailModule/workOrderInfo/index.vue'
import OperationDetail from './detailModule/OperationDetail/index.vue'
import CompletionDetails from './detailModule/CompletionDetails/index.vue'
import Payment from './detailModule/Payment/index.vue'
import Evaluation from './detailModule/Evaluation/index.vue'
import SettleAccounts from './detailModule/SettleAccounts/index.vue'
import PartsApplication from './detailModule/PartsApplication/index.vue'
import { orderBaseDetail } from '@/api/workOrderPool.js'
export default {
  components: {
    workOrderInfo,
    OperationDetail,
    CompletionDetails,
    Payment,
    Evaluation,
    SettleAccounts,
    PartsApplication
  },
  props: {
    id: {
      type: [String, Number],
      default: null
    },
    workOrderType: {
      type: [Number],
      default: null
    }
  },
  data() {
    return {
      activeName: this?.$route?.params?.pagePam || 'workOrderInfo',
      EvaluationShow: false,
      SettleAccountsShow: false,
      PartsApplicationShow: true
    }
  },
  created() {
    orderBaseDetail({
      orderBaseId: this.id
    }).then(res => {
      if (!~['DYY', 'DSHPG', 'DWDPG', 'DJD', 'FWZ', 'YQX'].indexOf(res.data.orderStatus)) {
        this.EvaluationShow = true
        this.SettleAccountsShow = true
      }
    })
  },
  methods: {
    handleClick(tab, event) {}
  }
}
</script>

<style lang="scss" scoped>
.yemiansize {
  height: calc(100vh - 140px) !important;
  overflow: hidden;

  & > ::v-deep .el-tabs:nth-child(1) {
    & > .el-tabs__header:nth-child(1) {
      margin-bottom: 0 !important;
    }
  }

  .view_div {
    height: calc(100% - 42px) !important;
    overflow-y: auto;
  }
}
</style>