kd-aiot-frontend-mes/src/views/produceOrder/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>

        <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="领料详情">
            <pickDetails
              :isDetails="true"
              :workOrderInfo="workOrderInfo"
            ></pickDetails>
          </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-tab-pane label="生产明细">
            <productionDetails
              :workOrderInfo="workOrderInfo"
            ></productionDetails>
          </el-tab-pane>

          <!-- <el-tab-pane label="退料详情">
          </el-tab-pane> -->

          <el-tab-pane
            label="记录详情"
            v-if="sourceTaskId && workOrderInfo.bomCategoryId"
          >
            <recordRules
              :produceTaskId="sourceTaskId"
              :bomCategoryId="workOrderInfo.bomCategoryId"
            ></recordRules>
          </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 { getTaskInstanceList } from '@/api/produce/job';
  import productionDetails from '@/views//workOrderList/components/productionDetails.vue';
  import pickDetails from '../../details.vue';
  import recordRules from '../recordRules/recordRules.vue';

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

        workOrderInfo: {},

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

    methods: {
      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;
        console.log(this.workOrderInfo.id, 'workOrderInfo.id');
        console.log('workOrderInfo', this.workOrderInfo);
        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)
          );

          console.log('index', index);

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

          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;
          console.log('this.curTaskObj', this.curTaskObj);
          console.log('this.newId', this.newId);
        });
      },

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

        console.log(item, '返回的数据');

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