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="info-card">
          <view class="info-card__header">
            <view class="info-card__header-bar"></view>
            <text class="info-card__header-title">工单信息</text>
          </view>
          <view class="info-card__body">
            <view class="info-row full">
              <text class="info-label">生产工单号</text>
              <text class="info-value highlight">{{ info.code }}</text>
            </view>
            <view class="info-row full">
              <text class="info-label">计划编号</text>
              <text class="info-value">{{ info.productionPlanCode }}</text>
            </view>
            <view class="info-row full">
              <text class="info-label">工艺路线</text>
              <text class="info-value highlight">{{ info.produceRoutingName }}</text>
            </view>
            <view class="info-grid">
              <view class="info-row half">
                <text class="info-label">批次号</text>
                <text class="info-value highlight">{{ info.batchNo }}</text>
              </view>
              <view class="info-row half">
                <text class="info-label">委外状态</text>
                <text class="info-value">{{ info.outsourceStatus | outsourceStatusText }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 产品信息卡片 -->
        <view class="info-card">
          <view class="info-card__header">
            <view class="info-card__header-bar"></view>
            <text class="info-card__header-title">产品信息</text>
          </view>
          <view class="info-card__body">
            <view class="info-row full">
              <text class="info-label">编码</text>
              <text class="info-value">{{ info.productCode }}</text>
            </view>
            <view class="info-row full">
              <text class="info-label">名称</text>
              <text class="info-value">{{ info.productName }}</text>
            </view>
            <view class="info-grid">
              <view class="info-row half">
                <text class="info-label">牌号</text>
                <text class="info-value">{{ info.brandNo }}</text>
              </view>
              <view class="info-row half">
                <text class="info-label">规格</text>
                <text class="info-value">{{ info.specification }}</text>
              </view>
            </view>
            <view class="info-row full">
              <text class="info-label">型号</text>
              <text class="info-value">{{ info.model }}</text>
            </view>
          </view>
        </view>

        <!-- 生产信息卡片 -->
        <view class="info-card">
          <view class="info-card__header">
            <view class="info-card__header-bar"></view>
            <text class="info-card__header-title">生产信息</text>
          </view>
          <view class="info-card__body">
            <view class="info-grid">
              <view class="info-row half">
                <text class="info-label">要求数量</text>
                <text class="info-value">{{ info.formingNum }} {{ info.unit }}</text>
              </view>
              <view class="info-row half">
                <text class="info-label">要求重量</text>
                <text class="info-value">{{ info.formingWeight }} {{ info.weightUnit }}</text>
              </view>
            </view>
            <view class="info-grid">
              <view class="info-row half">
                <text class="info-label">已完成数量</text>
                <text class="info-value highlight">{{ info.formedNum }}</text>
              </view>
              <view class="info-row half">
                <text class="info-label">已完成重量</text>
                <text class="info-value highlight">{{ info.formedWeight }}</text>
              </view>
            </view>
            <view class="info-grid">
              <view class="info-row half">
                <text class="info-label">报工类型</text>
                <text class="info-value">{{ info.singleReport == 1 ? "单个报工" : "批量报工" }}</text>
              </view>
              <view class="info-row half">
                <text class="info-label">领料状态</text>
                <text class="info-value">{{ isPickingStatus }}</text>
              </view>
            </view>
            <view class="info-row full">
              <text class="info-label">投料状态</text>
              <text class="info-value">{{ isFeedStatus }}</text>
            </view>
          </view>
        </view>

        <!-- 计划时间卡片 -->
        <view class="info-card">
          <view class="info-card__header">
            <view class="info-card__header-bar"></view>
            <text class="info-card__header-title">计划时间</text>
          </view>
          <view class="info-card__body">
            <view class="info-row full">
              <text class="info-label">开始时间</text>
              <text class="info-value">{{ info.planStartTime }}</text>
            </view>
            <view class="info-row full">
              <text class="info-label">结束时间</text>
              <text class="info-value">{{ info.planCompleteTime }}</text>
            </view>
          </view>
        </view>

        <!-- 底部留白 -->
        <view style="height: 20rpx;"></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;
  }

  /* 基本信息 - 卡片样式 */
  .info-card {
    width: calc(100% - 48rpx);
    margin: 20rpx 24rpx 0;
    background: #ffffff;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
    overflow: hidden;

    .info-card__header {
      display: flex;
      align-items: center;
      padding: 24rpx 28rpx;
      background: linear-gradient(135deg, rgba(21, 122, 44, 0.06) 0%, rgba(21, 122, 44, 0.02) 100%);
      border-bottom: 1rpx solid #f0f0f0;

      .info-card__header-bar {
        width: 6rpx;
        height: 32rpx;
        background: $theme-color;
        border-radius: 3rpx;
        margin-right: 16rpx;
        flex-shrink: 0;
      }

      .info-card__header-title {
        font-size: 30rpx;
        font-weight: 600;
        color: $uni-text-color;
      }
    }

    .info-card__body {
      padding: 16rpx 28rpx 8rpx;
    }
  }

  .info-grid {
    display: flex;
    flex-wrap: nowrap;
  }

  .info-row {
    display: flex;
    align-items: center;
    padding: 14rpx 0;
    box-sizing: border-box;
    overflow: hidden;

    &.half {
      width: 50%;

      &:nth-child(odd) {
        padding-right: 16rpx;
      }
      &:nth-child(even) {
        padding-left: 16rpx;
      }
    }

    &.full {
      width: 100%;
    }
  }

  .info-label {
    color: $uni-text-color-grey;
    font-size: 28rpx;
    flex-shrink: 0;
    margin-right: 8rpx;
    line-height: 40rpx;
    white-space: nowrap;

    &::after {
      content: '：';
    }
  }

  .info-value {
    color: $uni-text-color;
    font-size: 28rpx;
    flex: 1;
    line-height: 40rpx;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &.highlight {
      color: $theme-color;
    }
  }

  .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>