aiot-app/pages/pda/workOrder/extrusionMolding/index.vue

<template>
  <!-- 生产首页 -->
  <view class="content-box">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      :title="title"
      background-color="#157A2C"
      color="#fff"
      @clickLeft="back"
    ></uni-nav-bar>

    <view class="top-wrapper cx">
      <stepsNav
        v-if="info.taskId && stepsList.length"
        :stepsList="stepsList"
        :taskId="info.taskId"
        @selectStep="selectStep"
      ></stepsNav>
      <view class="tab_box rx-sc">
        <view
          class="tab_item"
          :class="{ active: tabType == 1 }"
          @click="handTab(1)"
          >基本信息</view
        >
        <view
          class="tab_item"
          :class="{ active: tabType == 2 }"
          @click="handTab(2)"
          >生产明细</view
        >
        <view
          class="tab_item"
          :class="{ active: tabType == 3 }"
          @click="handTab(3)"
          >详情</view
        >
      </view>
    </view>

    <view class="list_box">
      <u-list @scrolltolower="scrolltolower" key="info" v-if="tabType == 1">
        <view class="item_list rx-bc">
          <text class="lable">生产工单号</text>
          <text>{{ info.code }}</text>
        </view>

        <view class="item_list rx-bc">
          <text class="lable">计划编号</text>
          <text>{{ info.productionPlanCode }}</text>
        </view>

        <view class="item_list rx-bc">
          <text class="lable">工艺路线</text>
          <text>{{ info.produceRoutingName }}</text>
        </view>

        <view class="item_list rx-bc">
          <text class="lable">批次号</text>
          <text> {{ info.batchNo }}</text>
        </view>

        <view class="item_list rx-bc">
          <text class="lable">编码</text>
          <text> {{ info.productCode }}</text>
        </view>

        <view class="item_list rx-bc">
          <text class="lable">委外状态</text>
          <text> {{ info.outsourceStatus | outsourceStatusText }}</text>
        </view>

        <view class="item_list rx-bc">
          <text class="lable">名称</text>
          <text>{{ info.productName }}</text>
        </view>

        <view class="item_list rx-bc">
          <text class="lable">牌号</text>
          <text>{{ info.brandNo }}</text>
        </view>
		
        <view class="item_list rx-bc">
          <text class="lable">规格</text>
          <text>{{ info.specification }}</text>
        </view>
		
        <view class="item_list rx-bc">
          <text class="lable">型号</text>
          <text>{{ info.model }}</text>
        </view>

        <view class="item_list rx-bc">
          <text class="lable">要求生产数量</text>
          <text>{{ info.formingNum }} {{ info.unit }} </text>
        </view>

        <view class="item_list rx-bc">
          <text class="lable">要求生产重量</text>
          <text>{{ info.formingWeight }} {{ info.weightUnit }}</text>
        </view>

        <view class="item_list rx-bc">
          <text class="lable">报工类型</text>
          <text>{{ info.singleReport == 1 ? "单个报工" : "批量报工" }}</text>
        </view>

        <view class="item_list rx-bc">
          <text class="lable">领料状态</text>
          <text>{{ isPickingStatus }}</text>
        </view>

        <view class="item_list rx-bc">
          <text class="lable">投料状态</text>
          <text>{{ isFeedStatus }}</text>
        </view>

        <view class="item_list rx-bc">
          <text class="lable">已完成生产数量</text>
          <text>{{ info.formedNum }}</text>
        </view>

        <view class="item_list rx-bc">
          <text class="lable">已完成生产重量</text>
          <text>{{ info.formedWeight }}</text>
        </view>

        <view class="item_list rx-bc">
          <text class="lable">计划开始时间</text>
          <text>{{ info.planStartTime }}</text>
        </view>

        <view class="item_list rx-bc">
          <text class="lable">计划结束时间</text>
          <text>{{ info.planCompleteTime }}</text>
        </view>
      </u-list>

      <u-list @scrolltolower="scrolltolower" key="detail" v-if="tabType == 2">
        <view
          v-for="(item, index) in produceList"
          :key="index"
          class="detail-list"
        >
          <view class="name"
            >{{ item.taskName }}
            <text v-if="index == 0" style="color: #157a2c; font-size: 32rpx">
              （首工序）</text
            >
          </view>
          <view class="list rx-bc" @click="handDetails(item)">
            <view class="title rx-sc">
              <image class="icon" src="~@/static/pda/layers.svg"></image>
              待投料数量
            </view>

            <view class="rx-ec" v-if="item.firstTaskDetails.length > 0">
              <text style="color: #157a2c; font-size: 24rpx"> 明细</text>
              <image
                class="arrow_right2"
                src="~@/static/pda/arrow_right2.svg"
              ></image>
            </view>

            <view class="rx-ec" v-else>
              {{ item.waitFeedNum }}
              <image
                class="arrow_right2"
                src="~@/static/pda/arrow_right2.svg"
              ></image>
            </view>
          </view>

          <view class="list rx-bc" @click="handDetails(item)">
            <view class="title rx-sc">
              <image class="icon" src="~@/static/pda/check-square.svg"></image>
              已投料数量
            </view>

            <view class="rx-ec" v-if="item.firstTaskDetails.length > 0">
              <text style="color: #157a2c; font-size: 24rpx"> 明细</text>
              <image
                class="arrow_right2"
                src="~@/static/pda/arrow_right2.svg"
              ></image>
            </view>

            <view class="rx-ec" v-else>
              {{ item.feedNum }}
              <image
                class="arrow_right2"
                src="~@/static/pda/arrow_right2.svg"
              ></image>
            </view>
          </view>

          <view class="list rx-bc">
            <view class="title rx-sc">
              <image class="icon" src="~@/static/pda/target.svg"></image>
              已报工数量
            </view>

            <view class="rx-ec">
              {{ item.reportedNum }}
              <image
                class="arrow_right2"
                src="~@/static/pda/arrow_right2.svg"
              ></image>
            </view>
          </view>
        </view>
      </u-list>

      <u-list
        @scrolltolower="scrolltolower"
        key="btnDeatils"
        v-if="tabType == 3"
      >
        <view style="margin-top: 15px">
          <button class="search_btn" @click="handleDetails">报工详情</button>
        </view>

        <view style="margin-top: 15px">
          <button class="search_btn" @click="handleFeedDetails">
            投料详情
          </button>
        </view>
      </u-list>
    </view>
    <!-- // 按钮组件 -->
    <view class="bottom-wrapper">
      <bottomOperate
        @operate="operate"
        @refresh="refresh"
        :taskObj="{
          currentTaskName: currentTaskName || info.taskName,
          currentTaskId: currentTaskId || info.taskId,
          workOrderId: id,
          existOutsource: existOutsource,
        }"
        :state="currentType"
        :gdStatus="info.status"
        :controlReportMethod="controlReportMethod"
        :stepsList="stepsList"
        :info="info"
      ></bottomOperate>
    </view>

    <productionDetailed ref="productionDetailedRef"> </productionDetailed>
  </view>
</template>

<script>
import bottomOperate from "../../components/bottomOperate.vue";
import stepsNav from "../../components/stepsNav.vue";
import productionDetailed from "./productionDetailed.vue";

import {
  getTaskInstanceList,
  workorderInfo,
  produceDetail,
  checkStatus,
  skipTask,
} from "@/api/pda/workOrder.js";

export default {
  components: {
    bottomOperate,
    stepsNav,
    productionDetailed,
  },
  filters: {
    outsourceStatusText(v) {
      return v == 1 ? "未委外" : v == 2 ? "委外中" : v == 3 ? "完成委外" : "";
    },
  },
  computed: {
    isFeedStatus() {
      const currentStep = this.stepsList?.[this.currentStepIndex]
      // 投料状态 0未投料 1已投料 2已报工
      return this.feedStatusOption.find(item => item.value === currentStep?.feedStatus)?.label || ''
    },
    isPickingStatus() {
      const currentStep = this.stepsList?.[this.currentStepIndex]
      // 领料状态 0未领料 1领料中2已出库3已驳回
      return this.pickStatusOption.find(item => item.value === currentStep?.pickStatus)?.label || ''
    }
  },
  data() {
    return {
      title: "",
      tabType: 1,
      id: null,

      stepsList: [],
      info: {},
      taskId: null,
      singleReport: null, // 报工类型 1单个报工 2批量报工
      produceList: [],
      feedAllow: true,

      currentTaskId: null,
      currentTaskName: null,
      currentType: 1,
      existOutsource: 0,
      controlReportMethod: null,

      clientEnvironmentId:
        uni.getStorageSync("userInfo") &&
        uni.getStorageSync("userInfo").clientEnvironmentId, // *1 主环境-601环境   2 soll-索尔环境    3 tg-碳谷环境
      feedNeedEquipment: 1, //投料是否要添加生产设备1是0否
      currentStepIndex: 0, // 当前步骤索引
      pickStatusOption: [
        {
          label: '未领料',
          value: 0
        },
        {
          label: '领料中',
          value: 1
        },
        {
          label: '已出库',
          value: 2
        },
        {
          label: '已驳回',
          value: 3
        }
      ],
      feedStatusOption: [
        {
          label: '未投料',
          value: 0
        },
        {
          label: '已投料',
          value: 1
        },
        {
          label: '已报工',
          value: 2
        }
      ]
    };
  },

  onLoad(options) {
    this.title = options.title;
    this.id = options.id;
    this.singleReport = options.singleReport; // 报工类型
    uni.showLoading({
      title: "加载中",
    });
  },

  onShow() {
    this.getInfo();
    this.getSteps();

    this.produce(); // 生产明细
  },

  methods: {
    scrolltolower() {},

    handTab(type) {
      if (type != this.tabType) {
        this.tabType = type;
      }
    },

    getSteps() {
      getTaskInstanceList(this.id).then((res) => {
        // for(let i = 0; i < res.length; i++) {
        // 	if(res[i].taskTypeName == '自然干燥' ||res[i].taskTypeName == '升温干燥') {
        // 		res[i - 1].btns = [ { name: '更换周转车', type: 'turnover'}]
        // 	}
        // }
        this.stepsList = res;

        this.setTypeFn();
      });
    },

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

    getInfo() {
      workorderInfo(this.id)
        .then((res) => {
          console.log(res, 99999999999);
          this.info = res;
          this.taskId = res.taskId;
          this.setTypeFn();
          this.feedStatus();

          uni.hideLoading();
        })
        .catch(() => {
          uni.hideLoading();
        });
    },
    setTypeFn() {
      this.stepsList.length &&
        this.stepsList.find((f) => {
          let id = this.currentTaskId || this.taskId;

          if (f.taskId == id) {
            (this.currentType = f.type),
              (this.existOutsource = f.existOutsource);
            this.controlReportMethod = f.controlReportMethod;
            this.currentStepIndex = f.index;
          }
        });
    },

    feedStatus() {
      let taskId = this.currentTaskId || this.taskId;
      checkStatus(this.id, taskId).then((res) => {
        this.feedAllow = res;
      });
    },

    // 点击工序列表
    selectStep(item) {
      console.log('item', item)
      this.currentTaskId = item.taskId;
      this.currentTaskName = item.taskTypeName;
      this.existOutsource = item.existOutsource;
      this.currentType = item.type;
      this.controlReportMethod = item.controlReportMethod;
      this.feedNeedEquipment = item.feedNeedEquipment;
      this.currentStepIndex = item.index;
      this.feedStatus();
    },

    // 点击之后调用事件
    operate(type, item) {
      console.log(4444, type, item);
      // if (this.info.outsourceStatus == 2) {
      // 	uni.showToast({
      // 		title: "工单在委外中",
      // 		icon: "none",
      // 	})

      // 	return false
      // }

      if (this.info.status == 9) {
        uni.showToast({
          title: "工单在暂停中",
          icon: "none",
        });

        return false;
      }

      if (this.info.status == 10) {
        uni.showToast({
          title: "工单已终止",
          icon: "none",
        });

        return false;
      }

      let url;
      let taskId = this.currentTaskId || this.taskId;
      let taskName = this.currentTaskName || this.info.taskName;

      if (type == "picking") {
        url = "/pages/pda/picking/details";
        let _arr = JSON.stringify([this.info.id]);
        url += `?arr=${encodeURIComponent(_arr)}&taskId=${taskId}`;
        uni.navigateTo({
          url,
        });
      }
      // 投料
      else if (type == "feeding") {
        // this.outsourceForm.isFirstTask
        // 碳谷走老逻辑 批量走 老逻辑

        if (this.clientEnvironmentId == 3 || this.info.singleReport !== 1) {
          url = "/pages/pda/feeding/details";
          let _arr = JSON.stringify([this.info.id]);
          url += `?arr=${encodeURIComponent(
            _arr
          )}&taskId=${taskId}&taskName=${taskName}&type=${type}&feedNeedEquipment=${
            this.feedNeedEquipment
          }`;
        } else {
          // 单个投料
          let arr = this.stepsList.find((f) => f.taskId == this.info.taskId);
          // 首工序走老逻辑
          console.log(arr.isFirstTask, "11111");

          if (arr.isFirstTask == 1) {
            url = "/pages/pda/feeding/details";
            let _arr = JSON.stringify([this.info.id]);
            url += `?arr=${encodeURIComponent(
              _arr
            )}&taskId=${taskId}&taskName=${taskName}&type=${type}&feedNeedEquipment=${
              this.feedNeedEquipment
            }&taskType=${this.currentType}`;
          } else {
            // 首工序
            url = "/pages/pda/feeding/details";
            let _arr = JSON.stringify([this.info.id]);
            url += `?arr=${encodeURIComponent(
              _arr
            )}&taskId=${taskId}&taskName=${taskName}&type=${type}&feedNeedEquipment=${
              this.feedNeedEquipment
            }&taskType=${this.currentType}`;
          }
        }
        uni.navigateTo({
          url,
        });
      }
      // 报工
      else if (type == "jobBooking") {
        // if (!this.feedAllow || this.clientEnvironmentId == 3) {

        // } else {
        // 	uni.showToast({
        // 		title: "请先投料",
        // 		icon: "none",
        // 	})
        // }
        url = "/pages/pda/jobBooking/index/index";
        url += `?id=${this.info.id}&taskId=${taskId}&taskName=${taskName}
				&taskType=${this.currentType}&isOutsource=${item.isOutsource || 0}
				&categoryId=${this.info.categoryId}&singleReport=${this.info.singleReport}`;
        uni.navigateTo({
          url,
        });
      } else if (type == "turnover") {
        url = "/pages/pda/turnover/index/index";
        url += `?workOrderId=${this.info.id}&taskId=${taskId}&taskName=${taskName}`;
        uni.navigateTo({
          url,
        });
      } else if (type == "qualityTurnover") {
        url = "/pages/pda/turnover/index/quality";
        url += `?workOrderId=${this.info.id}&taskId=${taskId}&taskName=${taskName}`;
        uni.navigateTo({
          url,
        });
      } else if (type == "sample") {
        url = "/pages/pda/sample/index/index";
        url += `?workOrderId=${this.info.id}&taskId=${taskId}&taskName=${taskName}`;
        uni.navigateTo({
          url,
        });
      } else if (type == "sampleJob") {
        url = "/pages/pda/sample/index/jobBooking";
        url += `?workOrderId=${this.info.id}&taskId=${taskId}&taskName=${taskName}`;
        uni.navigateTo({
          url,
        });
      } else if (type == "inspection") {
        url = "/pages/pda/sample/inspection/index";
        url += `?workOrderId=${this.info.id}&taskId=${taskId}&taskName=${taskName}`;
        uni.navigateTo({
          url,
        });
      } else if (type == "inspectionJob") {
        url = "/pages/pda/sample/inspection/job";
        url += `?workOrderId=${this.info.id}&taskId=${taskId}&taskName=${taskName}`;
        uni.navigateTo({
          url,
        });
      } else if (type == "warehousing") {
        url = "/pages/pda/warehousing/index";
        url += `?workOrderId=${this.info.id}&taskId=${taskId}`;
        uni.navigateTo({
          url,
        });
      } else if (type == "skip") {
        uni.showModal({
          title: "提示",
          content: `是否跳过${taskName}工序！`,
          confirmText: "确认", //这块是确定按钮的文字
          success: (rr) => {
            if (rr.confirm) {
              let param = {
                taskId: this.currentTaskId || this.taskId,
                workOrderId: this.id,
              };
              skipTask(param).then((res) => {
                console.log(res);
              });
            } else {
            }
          },
        });
      } else if (type == "outPicking") {
        url = "/pages/pda/picking/details";
        let _arr = JSON.stringify([this.info.id]);
        url += `?arr=${encodeURIComponent(
          _arr
        )}&taskId=${taskId}&isOutsource=1`;
        uni.navigateTo({
          url,
        });
      }
    },

    produce() {
      produceDetail(this.id).then((res) => {
        this.produceList = res.produceDetail;
      });
    },

    handleDetails() {
      let taskId = this.currentTaskId || this.taskId;
      let taskName = this.currentTaskName || this.info.taskName;
      let url = "/pages/pda/workOrder/index/details";
      url += `?id=${this.info.id}&taskId=${taskId}&taskName=${taskName}&taskType=${this.currentType}`;
      uni.navigateTo({
        url,
      });
    },

    handleFeedDetails() {
      let taskId = this.currentTaskId || this.taskId;
      let url = "/pages/pda/feeding/bill/index";
      url += `?id=${this.info.id}&taskId=${taskId}`;
      uni.navigateTo({
        url,
      });
    },

    handDetails(item) {
      if (this.clientEnvironmentId == 2) {
        if (item.firstTaskDetails.length > 0) {
          this.$refs.productionDetailedRef.open(item);
        } else {
          uni.showToast({
            title: "暂无明细",
            icon: "none",
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content-box {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: $page-bg;
}

.top-wrapper {
  background-color: #fff;
  display: flex;
  width: 750rpx;
  background: #fff;
  align-items: center;
}

.tab_box {
  width: 100%;
  height: 68rpx;

  .tab_item {
    height: 68rpx;
    line-height: 68rpx;
    padding: 0 20rpx;
    font-size: 32rpx;
    color: #979c9e;
  }

  .active {
    box-sizing: border-box;
    border-bottom: 6rpx solid $theme-color;
    color: $theme-color;
  }
}

.list_box {
  flex: 1;
  overflow: hidden;
  padding: 4rpx 0;

  .u-list {
    height: 100% !important;
  }

  .item_list {
    width: 100%;
    height: 80rpx;
    box-sizing: border-box;
    padding: 0 32rpx;
    font-size: 32rpx;
    color: #979c9e;
    font-weight: 400;
    border-bottom: 1rpx solid #e3e5e5;

    .lable {
      color: #090a0a;
      font-weight: 500;
    }
  }

  .detail-list {
    line-height: 80rpx;

    .name {
      color: #090a0a;
      font-size: 32rpx;
      font-weight: 600;
      padding: 0 32rpx;
      box-sizing: border-box;
      border-bottom: 1rpx solid #e3e5e5;
    }

    .list {
      padding: 0 32rpx;
      box-sizing: border-box;
      border-bottom: 1rpx solid #e3e5e5;

      .title {
        font-weight: 400;
        color: #090a0a;
      }

      .icon {
        width: 36rpx;
        height: 36rpx;
        margin-right: 8rpx;
      }

      .arrow_right2 {
        width: 12rpx;
        height: 24rpx;
        margin-left: 8rpx;
      }
    }
  }
}

.bottom-wrapper {
}

.search_btn {
  width: 240rpx;
  height: 70rpx;
  line-height: 70rpx;
  padding: 0 24rpx;
  background: $theme-color;
  font-size: 32rpx;
  color: #fff;
  margin: 0;
  margin-left: 26rpx;
}
</style>