kd-aiot-frontend-mes/src/views/workOrderList/components/details/index.vue

<template>
  <div>
    <el-drawer title="" :visible.sync="drawer" :custom-class="isFullscreen ? 'not-fullscreen' : 'is-fullscreen'"
      :before-close="handleClose" :with-header="false">
      <!-- 自定义头部 -->
      <div class="custom-drawer-header">
        <div> </div>
        <div class="rx-ec">
          <el-button icon="el-icon-full-screen" type="text" @click="handleFull">{{ isFullscreen ? '全屏' : '缩小'
            }}</el-button>
          <el-button icon="el-icon-circle-close" type="text" @click="handleClose">关闭</el-button>
        </div>
      </div>

      <div class="drawer_content">
        <!-- //详细信息 -->
        <!-- <Info :workOrderInfo="workOrderInfo"></Info> -->
        <btnlist></btnlist>


        <el-steps :active="activeIndex" space="20px" align-center style="margin-top: 18px">
          <el-step v-for="(item, index) in routeList" :key="index" :title="item.taskTypeName"
            @click.native="handIdx(index, item)" :description="desIndex == index ? '此处' : ''"
            :class="desIndex == index ? 'active' : ''"></el-step>
        </el-steps>

        <el-tabs type="border-card">
          <el-tab-pane label="基本信息">
            <basicDetails :workOrderInfo="workOrderInfo"></basicDetails>
          </el-tab-pane>
          <el-tab-pane label="生产明细">
            <productionDetails :workOrderInfo="workOrderInfo"></productionDetails>
          </el-tab-pane>

          <el-tab-pane label="投料详情">
            <feedDetails :routeObj="routeObj" :curTaskObj="curTaskObj"></feedDetails>
          </el-tab-pane>

          <el-tab-pane label="报工详情">
            <jobDetails :routeObj="routeObj" :curTaskObj="curTaskObj" :newId="newId"></jobDetails>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>

    
  </div>
</template>

<script>
import Info from './info.vue';

import feedDetails from '@/views/produce/components/feeding/details.vue';
import jobDetails from '@/views/produce/components/jobBooking/details.vue';
import basicDetails from '../basicDetails.vue';
import productionDetails from '../productionDetails.vue';


import btnlist from '../btnlist.vue';
import { getTaskInstanceList } from '@/api/produce/job';

export default {
  components: {
    Info,
    feedDetails,
    jobDetails,
    basicDetails,
    btnlist,
    productionDetails
  },
  data() {
    return {
      drawer: false,
      isFullscreen: true,

      workOrderInfo: {},

      routeList: [],
      activeIndex: 0,
      desIndex: 0,
      curTaskObj: null,
      newId: '',
      routeObj: {
        id: null
      }
    };
  },

  methods: {
    operate() {
      console.log(2)
    },

    refresh() {
      console.log(1)
      this.getInfo()
    },

    handleClose() {
      this.activeIndex = 0;
      this.drawer = false;
    },

    handleFull() {
      this.isFullscreen = !this.isFullscreen;
      this.$forceUpdate();
    },

    open(row) {

      this.workOrderInfo = row;
      this.routeObj.id = this.workOrderInfo.id;
      this.getTaskFn();
      this.drawer = true;
    },

    getTaskFn() {
      getTaskInstanceList(this.workOrderInfo.id).then((res) => {
        this.routeList = res;

        // 使用findIndex方法查找
        const index = this.routeList.findIndex(
          (item) => Number(item.taskId) == Number(this.workOrderInfo.taskId)
        );


        this.desIndex = index;
        console.log(this.routeList, '888888');
        this.newId = this.routeList[this.desIndex].taskId || '';

        if (this.workOrderInfo.taskId != -2) {
          this.curTaskObj = JSON.parse(JSON.stringify(this.routeObj));
        } else {
          this.curTaskObj = JSON.parse(JSON.stringify(this.routeList[0]));
          this.desIndex = 0;
        }
        this.activeIndex = index;
      });
    },

    handIdx(index, item) {
      this.curTaskObj = JSON.parse(JSON.stringify(item));

      if (item.taskId == -2) {
        this.$message.info('完结状态不能点击');
      } else {
        this.desIndex = index;
        this.newId = this.routeList[this.desIndex].taskId || '';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
/* 自定义全屏样式 */
::v-deep .is-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  /* 隐藏滚动条 */
}

::v-deep .not-fullscreen {
  width: calc(100vw - 260px) !important;
  height: 100vh !important;
  overflow: hidden !important;
  /* 隐藏滚动条 */
}

.custom-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 15px;
  background-color: #f5f7fa;
  /* 自定义背景色 */
  border-bottom: 1px solid #ebeef5;
  /* 自定义边框，与抽屉内容分隔 */
}

.drawer_content {
  margin: 10px 20px;
  box-sizing: border-box;
}

.drawer_content {
  margin: 10px 20px;
  box-sizing: border-box;
}

::v-deep .active .is-text {
  background: #FFA929;
  /* 背景色 */
  border-color: #FFA929;
  color: #ffffff;
  /* 图标文字颜色 */
}
</style>