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="CallLog" key="CallLog"> </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" />
      <CallLog v-if="activeName == 'CallLog'" :id="id" ref="CallLog" />
      <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 CallLog from './detailModule/CallLog/index.vue'
import { orderBaseDetail } from '@/api/workOrderPool.js'
export default {
  components: {
    workOrderInfo,
    OperationDetail,
    CompletionDetails,
    Payment,
    Evaluation,
    SettleAccounts,
    PartsApplication,
    CallLog
  },
  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,
      isThreeOrder: false
    }
  },
  created() {
    orderBaseDetail({
      orderBaseId: this.id
    }).then(res => {
      this.isThreeOrder = res?.data?.isThreeOrder
      if (
        !['DYY'].includes(res?.data?.orderStatus) &&
        ![
          'DSHPG',
          'CJ',
          'YPD',
          'DXSPD',
          'DZBPG',
          'DWDSPGP',
          'DXSSPGP',
          'DTJXSSPGP',
          'DZBSPGP',
          'DFZXPD',
          'DFZXSPGP',
          'XSBH',
          'TJXSBH',
          'ZBBH',
          'FZXBH',
          'FL'
        ].includes(res?.data?.orderStatus) &&
        !['DWDPG', 'DWDPD', 'WDBH'].includes(res?.data?.orderStatus) &&
        !['DJD', 'DSM', 'YZP'].includes(res?.data?.orderStatus) &&
        !['FWZ', 'GCSZT', 'BFWG'].includes(res?.data?.orderStatus) &&
        !['YQX', 'FWZT', 'YCGB', 'FWQX'].includes(res?.data?.orderStatus)
      ) {
        this.EvaluationShow = true
        this.SettleAccountsShow = true
      }
      if (this?.$route?.params?.pagePam === 'Evaluation' && this.EvaluationShow === false) {
        this.activeName = 'workOrderInfo'
      }
    })
  },
  methods: {
    handleClick(tab, event) {}
  }
}
</script>

<style lang="scss" scoped>
.yemiansize {
  height: calc(100vh - 85px) !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>