aiot-app/pages/pda/jobBooking/components/oneJobQualityBomPL.vue

<template>
  <view>
    <view class="title_box rx-bc">
      <view class="name">产品信息</view>
    </view>

    <view class="material" v-for="(it, idx) in list" :key="idx">
      <view class="content_table">
        <view class="item rx-sc">
          <view class="rx">
            <view class="lable lable190 rx-cc">
              <view class="round">{{ idx + 1 }}</view
              >物料编码
            </view>
            <view class="content rx-sc">
              <view>{{ it.code }}</view>
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx">
            <view class="lable lable150 rx-cc">名称</view>
            <view class="content rx-sc">
              <view>{{ it.name }}</view>
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx">
            <view class="lable lable150 rx-cc">型号</view>
            <view class="content rx-sc">
              <view>{{ it.modelType }}</view>
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx ww50">
            <view class="lable lable150 rx-cc">刻码</view>
            <view class="content content_num">
              <view v-if="isDetails">{{ it.extInfo.engrave }}</view>
              <input class="uni-input" v-else v-model="it.extInfo.engrave" />
            </view>
          </view>

          <view class="rx ww50">
            <view class="lable lable150 rx-cc">位置</view>
            <view class="content content_num">
              <view v-if="isDetails">{{ it.extInfo.position }}</view>
              <input class="uni-input" v-else v-model="it.extInfo.position" />
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx ww50">
            <view class="lable lable150 rx-cc">设备</view>
            <view class="content">
              <view>{{ it.deviceName || it.extInfo.deviceName }}</view>
            </view>
          </view>

          <view class="rx ww50">
            <view class="lable lable150 rx-cc">炉次号</view>
            <view class="content">
              <view>{{ it.extInfo.heatNumber }}</view>
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx ww50">
            <view class="lable lable150 rx-cc">投料数量</view>
            <view class="content content_num">
              <view style="color: #157a2c">{{ it.feedQuantity }}</view>
            </view>
          </view>

          <view class="rx ww50">
            <view class="lable lable150 rx-cc">投料类型</view>
            <view class="content rx-sc" style="color: #157a2c">
              <view>批量投料</view>
            </view>
          </view>
        </view>
      </view>

      <view class="content_table2">
        <view class="head row rx-sc">
          <view class="item ww25" style="font-size: 20rpx"> 合格品数量 </view>
          <view class="item ww25">报工总重量/{{ it.extInfo.weightUnit }} </view>

          <view class="item ww30 rx-bc">
            <text>处置</text>
          </view>
          <view class="item ww20"> 取样 </view>
        </view>

        <view class="table">
          <view
            class="tr row rx-sc"
            v-for="(yy, yyIdx) in it.extInfo.batchReportInfo"
          >
            <view class="item ww25 content_num">
              <view>{{ yy.allFeedQuantity }}</view>
            </view>
            <view class="item ww25 content_num">
              <view>{{ yy.allReportWeight }}</view>
            </view>

            <view class="item ww30" v-if="isDetails">
              {{ it.extInfo.taskName }}
            </view>

            <view class="item ww30" v-else>
              <zxz-uni-data-select
                :localdata="stepsList"
                v-model="yy.taskId"
                dataValue="taskId"
                format="{taskTypeName}"
                dataKey="taskId"
                filterable
                @change="(e) => (yy.taskName = e.taskTypeName)"
                :clear="false"
                disabled
              ></zxz-uni-data-select>
            </view>

            <view class="item ww20 content_num">
              <view v-if="isDetails">{{ yy.sample }}</view>
              <input
                @blur="blurNum($event, idx, yyIdx)"
                v-else
                class="uni-input"
                v-model="yy.sample"
                type="digit"
              />
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="button_box" v-if="!isDetails">
      <u-button
        size="small"
        class="u-reset-button"
        type="success"
        @click="handSample()"
        >取样</u-button
      >
    </view>

    <view class="title_box rx-bc">
      <view class="name">抽样列表</view>
    </view>

    <view
      class="material"
      v-for="(it, idx) in item.sampleQuality"
      :key="it.id + idx"
    >
      <view class="content_table">
        <view class="item rx-sc">
          <view class="rx">
            <view class="lable lable190 rx-cc">
              <view class="round">{{ idx + 1 }}</view
              >物料编码
            </view>
            <view class="content rx-bc">
              <view>{{ it.code }}</view>
              <view
                class="tag_box"
                v-if="it.extInfo.batchReportInfo.length == 0"
                >样品</view
              >
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx">
            <view class="lable lable150 rx-cc">名称</view>
            <view class="content rx-sc">
              <view>{{ it.name }}</view>
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx">
            <view class="lable lable150 rx-cc">型号</view>
            <view class="content rx-sc">
              <view>{{ it.modelType }}</view>
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx ww50">
            <view class="lable lable150 rx-cc">刻码</view>
            <view class="content content_num">
              <view v-if="isDetails">{{ it.extInfo.engrave }}</view>
              <input class="uni-input" v-else v-model="it.extInfo.engrave" />
            </view>
          </view>

          <view class="rx ww50">
            <view class="lable lable150 rx-cc">位置</view>
            <view class="content content_num">
              <view v-if="isDetails">{{ it.extInfo.position }}</view>
              <input class="uni-input" v-else v-model="it.extInfo.position" />
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx ww50">
            <view class="lable lable150 rx-cc">设备</view>
            <view class="content">
              <view>{{ it.deviceName || it.extInfo.deviceName }}</view>
            </view>
          </view>

          <view class="rx ww50">
            <view class="lable lable150 rx-cc">炉次号</view>
            <view class="content">
              <view>{{ it.extInfo.heatNumber }}</view>
            </view>
          </view>
        </view>

        <view class="item rx-sc" v-if="it.extInfo.batchReportInfo.length > 0">
          <view class="rx ww50">
            <view class="lable lable150 rx-cc">投料数量</view>
            <view class="content content_num">
              <view style="color: #157a2c">{{ it.feedQuantity }}</view>
            </view>
          </view>

          <view class="rx ww50">
            <view class="lable lable150 rx-cc">投料类型</view>
            <view class="content rx-sc" style="color: #157a2c">
              <view>批量投料</view>
            </view>
          </view>
        </view>

        <view class="item rx-sc" v-if="it.extInfo.batchReportInfo.length == 0">
          <view class="rx ww50">
            <view class="lable lable150 rx-cc">质检结果 </view>
            <view class="content content_num">
              <zxz-uni-data-select
                :localdata="isQualifiedList"
                v-model="it.extInfo.appearance"
                dataValue="code"
                format="{name}"
                dataKey="code"
                filterable
                :disabled="isDetails"
                @change="handLoad()"
                :clear="false"
              ></zxz-uni-data-select>
            </view>
          </view>

          <view
            class="rx ww50"
            v-if="it.extInfo.isQualified && it.extInfo.isQualified == 2"
          >
            <view class="lable lable150 rx-cc">类型</view>
            <view class="content content_num">
              <zxz-uni-data-select
                :localdata="notTypeList"
                v-model="it.extInfo.notType"
                dataValue="code"
                @change="handLoad()"
                format="{name}"
                dataKey="code"
                filterable
                :disabled="isDetails"
                :clear="false"
              ></zxz-uni-data-select>
            </view>
          </view>
        </view>

        <view
          class="item rx-sc"
          v-if="
            it.extInfo.batchReportInfo.length == 0 &&
            (it.extInfo.isQualified == 1 || it.extInfo.notType == 5)
          "
        >
          <view class="rx">
            <view class="lable lable150 rx-cc">处置</view>
            <view class="content content_num">
              <view v-if="isDetails">
                {{ it.extInfo.taskName }}
              </view>
              <zxz-uni-data-select
                v-else
                :localdata="stepsList"
                v-model="it.extInfo.taskId"
                dataValue="taskId"
                format="{taskTypeName}"
                dataKey="taskId"
                filterable
                @change="(e) => (it.extInfo.taskName = e.taskTypeName)"
                :clear="false"
              ></zxz-uni-data-select>
            </view>
          </view>
        </view>

        <view
          class="item rx-sc"
          v-if="
            it.extInfo.batchReportInfo.length == 0 &&
            it.extInfo.isQualified != 1 &&
            it.extInfo.notType != 5
          "
        >
          <view class="rx">
            <view class="lable lable150 rx-cc">原因</view>
            <view class="content content_num">
              <view v-if="isDetails">{{ it.extInfo.notReason }}</view>
              <input class="uni-input" v-else v-model="it.extInfo.notReason" />
            </view>
          </view>
        </view>
      </view>

      <view class="content_table2" v-if="it.extInfo.batchReportInfo.length > 0">
        <view class="head row rx-sc">
          <view class="item ww25" style="font-size: 20rpx"> 合格品数量 </view>
          <view class="item ww25">报工总重量/{{ it.extInfo.weightUnit }} </view>

          <view class="item ww30 rx-bc">
            <text>处置</text>
          </view>
          <view class="item ww20"> </view>
        </view>

        <view class="table">
          <view
            class="tr row rx-sc"
            v-for="(yy, yyIdx) in it.extInfo.batchReportInfo"
          >
            <view class="item ww25 content_num">
              <view>{{ yy.allFeedQuantity }}</view>
            </view>
            <view class="item ww25 content_num">
              <view v-if="isDetails">{{ yy.allReportWeight }}</view>
              <input
                class="uni-input"
                v-else
                v-model="yy.allReportWeight"
                type="digit"
              />
            </view>

            <view class="item ww30" v-if="isDetails">
              {{ it.extInfo.taskName }}
            </view>

            <view class="item ww30" v-else>
              <zxz-uni-data-select
                :localdata="stepsList"
                v-model="yy.taskId"
                dataValue="taskId"
                format="{taskTypeName}"
                dataKey="taskId"
                filterable
                @change="(e) => (yy.taskName = e.taskTypeName)"
                :clear="false"
              ></zxz-uni-data-select>
            </view>

            <view class="item ww20 content_num"> </view>
          </view>
        </view>
      </view>

      <view
        class="content_table2"
        v-if="
          it.extInfo.notBatchReportInfo &&
          it.extInfo.notBatchReportInfo.length > 0
        "
      >
        <view class="head row rx-sc">
          <view class="item ww15" style="font-size: 20rpx"> 不合格数 </view>

          <view class="item ww15" style="font-size: 20rpx"> 重量 </view>

          <view class="item ww35">类型</view>

          <view class="item ww35 rx-bc">
            <text>处置/原因</text>
            <image
              v-if="!isDetails"
              class="icon"
              @click="handAddListPL4(it, idx)"
              src="~@/static/pda/add.svg"
              style="width: 46rpx; height: 46rpx; margin-right: 12rpx"
            ></image>
          </view>
        </view>

        <view class="table">
          <view
            class="tr row rx-sc"
            v-for="(yy, yyIdx) in it.extInfo.notBatchReportInfo"
            :key="'not' + idx + yyIdx"
          >
            <view class="item ww15 content_num">
              <view v-if="isDetails">{{ yy.allFeedQuantity }}</view>
              <input
                class="uni-input"
                v-else
                v-model="yy.allFeedQuantity"
                @input="blurNum2($event, idx, yyIdx)"
                type="number"
              />
            </view>

            <view class="item ww15 content_num">
              <view v-if="isDetails">{{ yy.allReportWeight }}</view>
              <input
                class="uni-input"
                v-else
                v-model="yy.allReportWeight"
                type="number"
              />
            </view>

            <view class="item ww35 content_num">
              <zxz-uni-data-select
                :localdata="notTypeList"
                v-model="yy.notType"
                dataValue="code"
                format="{name}"
                dataKey="code"
                filterable
                :disabled="isDetails"
                @change="handLoad()"
                :clear="false"
              ></zxz-uni-data-select>
            </view>

            <view class="item ww35" v-if="isDetails">
              {{ yy.notType == 5 ? yy.taskName : yy.notReason }}
            </view>

            <!-- 
						<view class="item ww35 content_num" v-if="!isDetails && yy.notType != 5">
							<input class="uni-input" v-if="yy.notType != 5 " v-model="yy.notReason"></input>
						</view> -->
            <!-- 
						<view class="item ww10">
							<uni-icons v-if='!isDetails' custom-prefix="iconfont" type="icon-shanchu" size="16"
								@click="handDel4(idx, yyIdx)" color="#fa3534"></uni-icons>
						</view> -->
          </view>
        </view>
      </view>

      <view v-if="it.extInfo.batchReportInfo.length == 0">
        <view class="content_table2">
          <view class="head row rx-sc">
            <view class="item ww20"> 质检名称</view>
            <view class="item ww20"> 工艺参数</view>
            <view class="item ww30" style="font-size: 20rpx">质检结果参数</view>
            <view class="item ww30">质检结果</view>
          </view>

          <view class="table">
            <view
              class="tr row rx-sc"
              v-for="(quaItem, quaItemIdx) in it.extInfo.qualityParam"
              :key="quaItemIdx"
            >
              <view class="item ww20">
                <view>{{ quaItem.inspectionName }}</view>
              </view>

              <view class="item ww20">
                <view style="display: flex">
                  <view
                    v-if="quaItem.textType == 3"
                    style="display: flex; align-items: center"
                  >
                    {{ quaItem.minValue }} {{ quaItem.unit }}
                    &nbsp;&nbsp;-&nbsp;&nbsp;
                    {{ quaItem.maxValue }} {{ quaItem.unit }}
                  </view>

                  <view v-else>
                    {{ quaItem.defaultValue }} {{ quaItem.unit }}
                  </view>
                </view>
              </view>

              <view class="item ww30 content_num">
                <view v-if="isDetails">{{ quaItem.qualityResultValue }}</view>
                <input
                  v-else
                  class="uni-input"
                  v-model="quaItem.qualityResultValue"
                />
              </view>

              <view class="item ww30 content_num">
                <view v-if="isDetails">
                  {{
                    quaItem.qualityResult
                      ? qualityList[quaItem.qualityResult - 1].name
                      : ""
                  }}
                </view>

                <zxz-uni-data-select
                  v-else
                  :localdata="qualityList"
                  v-model="quaItem.qualityResult"
                  dataValue="value"
                  format="{name}"
                  dataKey="value"
                  filterable
                  :clear="false"
                ></zxz-uni-data-select>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getTaskInstanceList } from "@/api/pda/workOrder.js";

import { sample } from "@/api/pda/tangu.js";

export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },

    list: {
      type: Array,
      default: () => [],
    },

    isDetails: {
      type: Boolean,
      default: false,
    },
  },

  watch: {},

  data() {
    return {
      taskTypeName: null,
      isFirstTask: null,

      stepsList: [],

      qualityList: [
        {
          name: "合格",
          value: 1,
        },
        {
          name: "不合格",
          value: 2,
        },
        {
          name: "让步接受",
          value: 3,
        },
      ],

      isQualifiedList: [
        {
          code: 1,
          name: "合格",
        },
        {
          code: 2,
          name: "不合格",
        },
        {
          code: 3,
          name: "让步接收",
        },
      ],

      notTypeList: [
        {
          code: "1",
          name: "返工",
        },
        {
          code: "2",
          name: "返修",
        },
        {
          code: "3",
          name: "报废",
        },
        {
          code: "4",
          name: "降级使用",
        },
        {
          code: "5",
          name: "让步接收",
        },
      ],
    };
  },
  created() {
    this.taskTypeName = this.item.currentTaskDiagram.taskTypeName;
    this.isFirstTask = this.item.currentTaskDiagram.isFirstTask;
    this.getSteps();
  },
  methods: {
    blurNum(event, idx, yyIdx) {
      let value = event.target.value;
      value = value.replace(/\./g, "");

      let allFeedQuantity =
        this.list[idx].extInfo.batchReportInfo[yyIdx].allFeedQuantity;
      if (value > allFeedQuantity) {
        this.$set(this.list[idx].extInfo.batchReportInfo[yyIdx], "sample", 1);
      }
    },

    getSteps() {
      getTaskInstanceList(this.item.workOrderId).then((res) => {
        this.stepsList = res;
      });
    },

    handSample() {
      console.log(this.list[0], "9999999999999999");

      let param = {
        taskId: this.item.currentTaskDiagram.taskId,
        workOrderId: this.list[0].workOrderId,
        dispose: this.list,
      };

      sample(param).then((res) => {
        this.item.sampleQuality = res || [];
        this.$forceUpdate();
      });
    },

    handLoad() {
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="scss" scoped>
.title_box {
  margin-top: 20rpx;

  .name {
    font-size: 28rpx;
    font-style: normal;
    font-weight: 400;
    color: $theme-color;
    padding-left: 20rpx;

    position: relative;

    &:before {
      position: absolute;
      content: "";
      left: 0rpx;
      top: 0rpx;
      bottom: 0rpx;
      width: 4rpx;
      height: 28rpx;
      background: $theme-color;
      margin: auto;
    }
  }

  .btn_box {
    .btn {
      padding: 0 18rpx;
      height: 50rpx;
      line-height: 50rpx;
      background: $theme-color;
      font-size: 26rpx;
      font-style: normal;
      font-weight: 400;
      font-size: 24rpx;
      color: #fff;
      border-radius: 4rpx;
      margin-left: 24rpx;
    }
  }
}

.material {
  margin-top: 16rpx;

  .content_table {
    width: 100%;
    border: 2rpx solid $border-color;

    .item {
      display: flex;
      border-bottom: 2rpx solid $border-color;

      .lable {
        width: 132rpx;
        text-align: center;
        background-color: #f7f9fa;
        font-size: 26rpx;
        border-right: 2rpx solid $border-color;
        flex-shrink: 0;
      }

      .lable150 {
        width: 156rpx !important;
        font-size: 24rpx;
      }

      .lable190 {
        width: 190rpx !important;
        font-size: 24rpx;
      }

      .ww80 {
        width: 80rpx;
      }

      .content {
        width: 500rpx;
        min-height: 64rpx;
        font-size: 28rpx;
        line-height: 28rpx;
        font-style: normal;
        font-weight: 400;
        padding: 18rpx 8rpx;
        box-sizing: border-box;
        word-wrap: break-word;
        flex-grow: 1 !important;

        .unit {
          padding: 0 4rpx;
          font-size: 24rpx;
          color: #404446;
        }

        .penalize {
          width: 160rpx;
          line-height: 60rpx;
          background: $theme-color;
          font-size: 24rpx;
          text-align: center;
          color: #fff;
        }
      }

      .content_H {
        min-height: 92rpx;
      }

      .pd4 {
        padding: 4rpx 8rpx;
      }

      &:last-child {
        border-bottom: none;
      }
    }

    .ww55 {
      width: 55%;
    }

    .ww50 {
      width: 50%;
    }

    .ww45 {
      width: 45%;
    }
  }
}

.content_table2 {
  width: 100%;
  // margin-top: 16rpx;

  .row {
    width: 100%;

    .item {
      color: #404446;
      font-size: 28rpx;
      padding-left: 12rpx;
      word-break: break-all;
    }

    .color157 {
      color: $theme-color;
    }

    .ww30 {
      width: 30%;
    }

    .ww20 {
      width: 20%;
    }

    .ww15 {
      width: 15%;
    }

    .ww25 {
      width: 25%;
    }
    .ww35 {
      width: 35%;
    }
    .ww50 {
      width: 50%;
    }

    .ww10 {
      width: 10%;
    }

    .ww40 {
      width: 40%;
    }

    .ww45 {
      width: 45%;
    }
  }

  .head {
    height: 64rpx;
    background: #f7f9fa;
    border-top: 2rpx solid #e3e5e5;
    border-left: 2rpx solid #e3e5e5;

    .item {
      height: 64rpx;
      line-height: 64rpx;
      border-right: 2rpx solid #e3e5e5;
      box-sizing: border-box;
      font-size: 22rpx;
    }
  }

  .tr {
    border-top: 2rpx solid #e3e5e5;
    border-left: 2rpx solid #e3e5e5;

    .item {
      font-size: 24rpx;
      min-height: 74rpx;
      display: flex;
      align-items: center;
      border-right: 2rpx solid #e3e5e5;
      box-sizing: border-box;
      white-space: normal;
      word-break: break-all;
    }

    &:last-child {
      border-bottom: 2rpx solid #e3e5e5;
    }

    .numerate {
      font-size: 22rpx;
      color: $theme-color;
    }
  }
}

.content_num {
  display: flex;
  align-items: center;
  padding: 0 4rpx;

  /deep/ .uni-input-input {
    border: 2rpx solid #f0f8f2;
    background: #f0f8f2;
    color: $theme-color;
  }
}

.round {
  width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  border-radius: 50%;
  background: $theme-color;
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  color: #fff;
  margin-right: 18rpx;
}

.popup_box {
  width: 94vw;
  padding: 16rpx 12rpx;
  box-sizing: border-box;
}

.operate_box {
  margin-top: 32rpx;

  padding: 10rpx 100rpx;
  /deep/ .u-button {
    width: 160rpx;
  }
}

.formula_box {
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  margin-top: 12rpx;
}

.reportWeight {
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  margin-top: 30rpx;

  text {
    color: $theme-color;
  }
}

.button_box {
  width: 300rpx;
  margin: auto;
  margin-top: 16rpx;
}

.tag_box {
  padding: 2rpx 10rpx;
  margin-right: 12rpx;
  background: #e6a23c;
  font-size: 22rpx;
  color: #fff;
  border-radius: 4rpx;
}
</style>