sfms3.0-uniapp/src/pages/fg/coms/comNoReceiptPopup.vue

<template>
  <view class="">
    <uni-popup ref="popup" :maskClick="false">
      <view class="uni-flex uni-column pop_customer">
        <view class="" style="padding:10rpx">
          <view class="uni-flex u-col-center uni-row space-between" style="padding: 10rpx 10rpx 20rpx 10rpx">
            <view class="" style="font-size: 35rpx;">
              {{title}}
            </view>
            <image style="width: 35rpx;height: 35rpx;" src="/static/icons/icons_close.svg"
                   @click="closeRequestPopup()"></image>
          </view>
          <view class='split_line'></view>
          <view class="uni-flex uni-column" style="background-color: white; ">
            <view class="uni-flex uni-column">
              <view class="title " style="display: flex; align-items: center;padding: 10rpx;">
                <text style=" flex-shrink: 0;width: 25%;">生产线：</text>
                <view class="customerBorder" @click="showSelectLine">
                  {{productionLineName}}
                </view>
                <u-select v-model="showProductLineSelect" mode="mutil-column-auto"
                          :list="productLineList" @confirm="confirmSelectLine" title="生产线-工位"></u-select>

                <view class="">
                  <image src="/static/icons/down.svg" mode=""
                         style=" width: 40rpx;height: 40rpx;margin-left: 20rpx;" @click="showSelectLine">
                  </image>
                </view>
              </view>
              <!-- 	<view class='split_line'></view>
              <view class="title " style="display: flex; align-items: center;padding: 10rpx;">
                <text style=" flex-shrink: 0;width: 25%;">计划日期：</text>
                <view class="customerBorder" @click="showSelectDate">
                  {{planDate}}
                </view>
                <u-select v-model="showDateSelect" mode="mutil-column-auto" :list="planDateList"
                  @confirm="confirmSelectDate"></u-select>

                <view class="">
                  <image src="/static/icons/down.svg" mode=""
                    style=" width: 40rpx;height: 40rpx;margin-left: 20rpx;" @click="showSelectDate">
                  </image>
                </view>
              </view>
             -->
              <view class='split_line'></view>
              <view class="title " style="display: flex;align-items: center;padding: 10rpx;">
                <text style=" flex-shrink: 0; width: 25%;">物料代码：</text>
                <view class="customerBorder">
                  {{itemCode}}
                </view>
                <view v-if="bomVersion" class="" style="min-width: 160rpx;text-align: center;">
                  Bom版本{{bomVersion}}
                </view>
                <u-select v-model="showItemCodeSelect" mode="mutil-column-auto" :list="itemCodeList"
                          @confirm="confirmSelectItem" title="物料代码-Bom版本"></u-select>
                <view class="">
                  <image src="/static/icons/down.svg" mode=""
                         style=" width: 40rpx;height: 40rpx;margin-left: 20rpx;"
                         @click="showSelectItemCode">
                  </image>
                </view>
              </view>
              <view class='split_line'></view>
              <view class="title " style="display: flex;align-items: center;padding: 10rpx;">
                <text style=" flex-shrink: 0; width: 25%;">数量：</text>
                <uni-easyinput v-model="planQty"></uni-easyinput>
                <view v-if="uom">({{getUomInfo(uom)}})</view>
                <view class="">
                  <image src="" mode="" style=" width: 40rpx;height: 40rpx;margin-left: 20rpx;">
                  </image>
                </view>
              </view>

              <view class='split_line'></view>
              <view class="title " style="display: flex;align-items: center;padding: 10rpx;">
                <text style=" flex-shrink: 0; width: 25%;">包装规格：</text>
                <view class="customerBorder">
                  {{packUnitName}}
                </view>
                <u-select v-model="showPackUnitSelect" mode="single-column" :list="packUnitList"
                          @confirm="confirmSelectPackUnit"></u-select>
                <view class="">
                  <image src="/static/icons/down.svg" mode=""
                         style=" width: 40rpx;height: 40rpx;margin-left: 20rpx;"
                         @click="showSelectPackUnit">
                  </image>
                </view>
              </view>
              <view class='split_line'></view>

              <view class="title " style="display: flex;align-items: center;padding: 10rpx;">
                <text style=" flex-shrink: 0; width: 25%;">批次：</text>
                <uni-easyinput v-model="batch"></uni-easyinput>
                <view class="">
                  <image src="" mode="" style=" width: 40rpx;height: 40rpx;margin-left: 20rpx;">
                  </image>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="uni-flex uni-row hide_border">
          <button class="btn_edit_big_cancle" hover-class="btn_edit_big_after" @click="cancel()">取消</button>
          <button class="btn_edit_big_confirm" hover-class="btn_edit_big_after" @click="confirm()">确认</button>
        </view>
      </view>
    </uni-popup>
    <comMessage ref="comMessage"></comMessage>
  </view>
</template>

<script>
import {
  getIssueJobByProductionline,
  getPlaneInfoByproductLine,
  getPackUnitByItemCode,
  getProductionlineAndWorkStation,
  getBomVersionByProductionline
} from '@/api/request2.js';
import {
  getPackUnitName,
  getUomInfo
} from '@/common/directory.js';

import {
  getCurrDate,
  getBatch8,
  dateFormatData,
  lastThreeDays
} from '@/common/basic.js';

import {
  calc
} from '@/common/calc.js';

import uom from '@/mycomponents/qty/uom.vue'
import packQty from '@/mycomponents/qty/packQty.vue'
import balanceStatus from '@/mycomponents/status/balanceStatus.vue'
import winScanItem from '@/mycomponents/scan/winScanItem.vue'

export default {
  components: {
    uom,
    balanceStatus,
    winScanItem,
    packQty,
  },
  data() {
    return {
      itemCode: '',
      itemName: '请选择物料信息',
      uom: "",
      qty: null,
      planQty: 0,
      goodQty: 0,
      planNumber: "",
      productLineCode: "",
      showProductLineSelect: false,
      productLineList: [],
      productionLineName: "请选择生产线",
      batch: "",
      packUnitName: "请选择包装规格",
      packUnit: "",
      packUnitList: [],
      packQtyHint: "",
      packQty: 0,
      showPackUnitSelect: false,
      itemCodeList: [],
      showItemCodeSelect: false,
      workStationCode: "",
      planDate: '',
      showDateSelect: false,
      planDateList: [],
      fgLocationCode: "",
      rawLocationCode: "",
      workshop: "",
      bomVersion: "",
    }
  },
  props: {
    title: {
      type: String,
      default: '开工阶段'
    },
    itemCodeTypeList: {
      type: Array,
      default: []
    },
  },
  methods: {

    openRequestPopup() {
      this.initData();
      this.planDate = getCurrDate()
      this.batch = this.planDate.replace('-', '').replace('-', '')
      this.$refs.popup.open('bottom')
    },
    initData() {
      this.itemCode = '请选择物料信息';
      this.uom = ""
      this.planQty = 0
      this.goodQty = 0;
      this.packQty = 0;
      this.planNumber = ""
      this.productLineCode = ""
      this.showProductLineSelect = false
      this.productLineList = []
      this.productionLineName = "请选择生产线"
      this.productLineCode = ""
      this.batch = ""
      this.packUnitName = "请选择包装规格"
      this.packUnit = "",
          this.packQtyHint = ""
      this.showPackUnitSelect = false
      // this.packUnitList = []
      this.itemCodeList = []
      this.showItemCodeSelect = false
      this.workStationCode = ""
      this.planDate = ""
      this.showDateSelect = false
      this.planDateList = []
      this.fgLocationCode = ""
      this.rawLocationCode = ""
      this.workshop = ""

    },

    closeRequestPopup() {
      this.$refs.popup.close()
    },
    itemCodeLoseFocus() {
      this.itemCodeFocus = false;
    },

    confirm() {
      if (!this.planDate) {
        this.showErrorMessage('请先选择计划日期');
        return;
      }

      if (this.productionLineName == "请选择生产线") {
        this.showErrorMessage("请选择生产线")
        return
      }

      if (!this.batch) {
        this.showErrorMessage("请输入批次例如:20200101")
        return
      }

      if (this.itemCode == "请选择物料信息") {
        this.showErrorMessage("请选择物料信息")
        return
      }

      if (this.planQty <= 0) {
        this.showErrorMessage("请输入完工数量")
        return
      }

      if (this.packUnitName == "请选择包装规格") {
        this.showErrorMessage("请选择包装规格")
        return
      }

      this.callback();
    },

    callback() {
      let item = {
        productionLineName: "",
        productionLine: this.productLineCode, //生产线
        itemCode: this.itemCode,
        itemName: this.itemName,
        uom: this.getUomInfo(this.uom),
        batch: this.batch,
        packUnitName: this.packUnitName,
        packUnit: this.packUnit,
        packQtyHint: this.packQtyHint,
        packQty: this.packQty,
        planQty: this.planQty,
        goodQty: this.goodQty,
        planNumber: "",
        workStationCode: this.workStationCode,
        fgLocationCode: this.fgLocationCode,
        rawLocationCode: this.rawLocationCode,
        workshop: this.workshop
      };
      this.closeRequestPopup();
      this.$emit("confirm", item);
    },

    showErrorMessage(message, type) {
      setTimeout(r => {
        this.$refs.comMessage.showErrorMessage(message, res => {
        })
      })
    },
    cancel(e) {
      this.closeRequestPopup();
    },

    confirmSelectLine(data) {
      this.productionLineName = data[0].label + "—" + data[1].label
      this.productLineCode = data[0].value
      this.workStationCode = data[1].value
      var parent = this.productLineList.filter(res => res.value == this.productLineCode)
      var fgLocation = parent[0].children.filter(children => children.value == this.workStationCode)
      this.fgLocationCode = fgLocation[0].fgLocationCode;
      this.workshop = parent[0].workshop;

      this.clearItemCode()
      this.clearPackUnit()

    },
    clearItemCode() {
      this.planDate = getCurrDate()
      this.itemCode = "请选择物料信息"
      this.uom = ""
      this.planQty = 0;
      this.goodQty = 0
      this.planNumber = ""
      this.bomVersion = ""
    },

    confirmSelectDate(data) {
      this.planDate = data[0].label
      this.batch = this.planDate.replace('-', '').replace('-', '');
    },

    showSelectDate() {
      this.showDateSelect = true;
      var list = lastThreeDays(3);
      this.planDateList = []
      list.forEach(res => {
        this.planDateList.push({
          label: res,
          value: ""
        })
      })
    },

    showSelectLine() {
      if (this.productLineList.length == 0) {
        uni.showLoading({
          title: "加载中",
          mask: true
        })
        getProductionlineAndWorkStation().then(res => {
          uni.hideLoading()
          if (res.data && res.data.length > 0) {
            this.productLineList = res.data
            this.showProductLineSelect = true
          } else {
            this.showErrorMessage('未查找到生产线信息');
          }

        }).catch(error => {
          uni.hideLoading()
          this.showErrorMessage(error);
        })
      } else {
        this.showProductLineSelect = true
      }


    },
    showSelectItemCode() {
      if (!this.productLineCode) {
        this.showErrorMessage('请先选择生产线');
        return;
      }
      uni.showLoading({
        title: "加载中",
        mask: true
      })
      getBomVersionByProductionline(this.productLineCode).then(res => {
        uni.hideLoading()
        if (res.data && res.data.length > 0) {
          this.itemCodeList = res.data
          this.showItemCodeSelect = true
        } else {
          this.showErrorMessage('未查找到物料信息');
        }
      }).catch(error => {
        uni.hideLoading()
        this.showErrorMessage(error);
      })
    },
    confirmSelectItem(data) {
      this.itemCode = data[0].label;
      this.bomVersion = data[1].value;
      this.uom = data[0].uom;
      // this.uom = itemInfo.uom

      //清除其他数据
      this.clearPackUnit();
      uni.showLoading({
        title: "加载中",
        mask: true
      })
      getPackUnitByItemCode(this.itemCode).then(res => {
        uni.hideLoading()
        if (res.data && res.data.list.length > 0) {
          res.data.list.forEach(item => {
            item.value = item.packUnit
            item.label = getPackUnitName(item.packUnit) + "(" + item.packQty + this
                .getUomInfo(item.uom) + ")";
          })
          this.packUnitList = res.data.list
          var defaultData = res.data.list.filter(item => item.defaultPackageunit == "TRUE")
          this.confirmSelectPackUnit(defaultData)
        }

      }).catch(error => {
        uni.hideLoading()
      })
    },

    clearPackUnit() {
      this.packUnitName = "请选择包装规格"
      this.packUnit = ""
      let pack = this.packUnitList.filter(r => r.packUnit == this.packUnit);
      this.packQtyHint = "";
      this.packQty = 0
    },

    showSelectPackUnit() {
      if (this.itemCode == "请选择物料信息") {
        this.showErrorMessage('请先选择物料');
        return;
      }

      uni.showLoading({
        title: "加载中",
        mask: true
      })
      getPackUnitByItemCode(this.itemCode).then(res => {
        uni.hideLoading()
        if (res.data && res.data.list.length > 0) {
          res.data.list.forEach(item => {
            item.value = item.packUnit
            item.label = getPackUnitName(item.packUnit) + "(" + item.packQty + this
                .getUomInfo(item.uom) + ")";
          })
          this.packUnitList = res.data.list
          this.showPackUnitSelect = true
        } else {
          this.showErrorMessage('未查找到包装信息');
        }

      }).catch(error => {
        uni.hideLoading()
        this.showErrorMessage(error);
      })

    },

    confirmSelectPackUnit(data) {
      this.packUnitName = data[0].label
      this.packUnit = data[0].value
      let pack = this.packUnitList.filter(r => r.packUnit == this.packUnit);
      this.packQtyHint = pack[0].packQty + "(" + this
          .getUomInfo(pack[0].uom) + ")";
      this.uom = this.getUomInfo(pack[0].uom);
      this.packQty = pack[0].packQty
    },
    getUomInfo(uom) {
      let item = getUomInfo(uom);
      if (item == '') {
        return uom;
      } else {
        return item.label
      }
    },
  }
}
</script>

<style lang="scss">
.title {
  font-size: 30rpx;
}

.customerBorder {
  width: 100%;
  border: 1rpx solid lightgray;
  border-radius: 5rpx;
  padding: 15rpx;
}
</style>