warewms-PDA/pages/Warehousing/index.vue

<template>
  <view class="content">
    <view class="confirm-view">
      <text class="text">设备：</text>
      <view class="" style="width: 74%">
        <uni-data-select
          v-model="device"
          :localdata="deviceList"
          @change="deviceChange"></uni-data-select>
      </view>
    </view>
    <view class="confirm-view">
      <text class="text">生产状态：</text>
      <view class="" style="width: 74%">
        <uni-data-select
          v-model="value"
          :localdata="tabList"
          @change="change"></uni-data-select>
      </view>
    </view>
    <view class="confirm-view" v-if="deviceShow">
      <text class="text" style="width: 195px">退货下料设备编号：</text>
      <view class="" style="width: 74%">
        <uni-data-select
          v-model="deviId"
          :localdata="devicez1List"
          @change="deviChange"></uni-data-select>
      </view>
    </view>
    <view class="confirm-view" v-if="sourceLocationIdshow">
      <text class="text">批次号：</text>
      <uni-easyinput
        errorMessage
        type="text"
        v-model="sourceLocationId"
        focus
        :focus="focusState"
        @focus="focusFn"
        @input="input"
        :class="recshow ? 'rec' : ''"
        @blur="focusState = false"
        placeholder-style="font-size:16px;color: #a7a7a7;"
        :placeholder="placeholder"></uni-easyinput>
    </view>
    <view class="confirm-view" v-if="palletNoshow">
      <text class="text">托盘：</text>
      <uni-easyinput
        type="text"
        errorMessage
        v-model="palletNo"
        focus
        :focus="focusStateto"
        @focus="focusFnto"
        :class="recshowto ? 'recto' : ''"
        @blur="focusStateto = false"
        placeholder-style="font-size:16px;color: #a7a7a7;"
        :placeholder="placeholders"></uni-easyinput>
    </view>
    <view class="confirm-view">
      <text class="text">产线：</text>
      <uni-easyinput
        errorMessage
        type="text"
        v-model="productionLine"
        focus
        :focus="fote"
        @focus="focusFnthree"
        @input="lisInput"
        :class="recshowRamik ? 'recthees' : ''"
        @blur="fote = false"
        placeholder-style="font-size:16px;color: #a7a7a7;"
        :placeholder="placeholderthree"></uni-easyinput>
    </view>

    <view class="confirm-view" @click="open">
      <text class="text">日期：</text>
      <view class="">
        <uv-datetime-picker
          ref="datetimePicker"
          v-model="valueTime"
          mode="datetime"
          @confirm="confirmTime"></uv-datetime-picker>
      </view>
      <view class="">
        <text>{{ dataTime }}</text>
      </view>
    </view>
    <view class="border-buttons">
      <view class="buttons2" v-throttle="1000" @click="WeakRefthree">
        <text>提交</text>
      </view>
    </view>
    <xw-scan></xw-scan>

    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog
        ref="inputClose"
        title="选择物料"
        value="对话框预置提示内容!"
        placeholder="请输入内容"
        @confirm="dialogInputConfirm">
        <u-radio-group
          placement="column"
          :borderBottom="true"
          v-model="value"
          iconPlacement="right">
          <u-radio
            :customStyle="{ marginBottom: '8px' }"
            v-for="(item, index) in radiolist1"
            :key="index"
            :label="item.name"
            :name="item.name"
            @change="radioChange($event, item)"></u-radio>
        </u-radio-group>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      recshow: false,
      recshowto: false,
      recshowRamik: false,
      focusState: false,
      fote: false,
      deviceShow: false,
      palletNo: "",
      status: "",
      productionLine: "Z1",
      materialType: "",
      sourceLocationId: "",
      deviceId: "",
      qty: "1",
      device: "",
      deviceList: [],
      deviId: "",
      updateTime: "",
      valueTmia: "",
      palletNoshow: false,
      sourceLocationIdshow: true,
      tabList: [],
      devicez1List: [],
      dataTime: "请选择日期",
      valueTime: Number(new Date()),
      radiolist1: [
        {
          name: "丁铵黑药",
          disabled: true,
          id: 5,
        },
      ],
      focusStateto: false,
      value: "",
      value2: "",
      placeholders: "请输入托盘号",
      placeholder: "请输入批次号",
      placeholderthree: "请输入产线",
      valueTmname: "",
      host: "",
    };
  },
  onLoad(option) {},
  onUnload() {
    // 移除监听事件
    uni.$off("xwscan");
  },
  onHide() {},
  onShow() {
    let that = this;
    let pages = getCurrentPages();
    let currPage = pages[pages.length - 1]; //当前页面
    if (currPage.testdata != undefined) {
      console.log("$attrs", currPage.testdata);
      this.sourceLocationId = currPage.testdata.name;
    }
  },
  created() {},

  watch: {
    scanCodeValue(value) {
      if (!!value) {
        document.onkeydown = null;
      } else {
        this.placeholder = "扫码失败，请重新扫码...";
      }
    },
  },

  mounted() {
    let _this = this;
    uni.getStorage({
      key: "hostappst",
      success(res) {
        console.log("获取成功", res.data);
        _this.host = res.data;
      },
    });
    this.getData();
    this.getList();
  },
  onHide() {
    this.recshow = false;
  },
  methods: {
    confirmTime(e) {
      console.log("e", e);

      let date = new Date(e.value);

      let time = this.formatDate(date, "yyyy-MM-dd hh:mm");
      this.updateTime = time + ":00";
      this.dataTime = time + ":00";
      console.log("confirm", this.updateTime);
    },
    open() {
      this.$refs.datetimePicker.open();
    },
    otherFun(obj) {
      console.log(obj);
      if (obj.show == 3) {
        this.valueTmname = obj.id;
        this.sourceLocationId = obj.locationNo;
      }
    },
    radioChange(val, row) {
      console.log(val, row);
      this.valueTmianame = val;
      this.materialType = row.id;
    },
    dialogInputConfirm(val) {
      this.valueTmia = this.valueTmianame;
    },
    Material() {
      uni.navigateTo({
        url: "/pages/Warehousing/selectMaterial/index",
      });
    },
    change(e) {
      console.log("e", e);
      this.status = e;
      if (e < 5) {
        this.deviceShow = false;
        this.palletNoshow = false;
        this.sourceLocationIdshow = true;
      } else if (e == 5) {
        this.deviceShow = true;
        this.palletNoshow = true;
        this.sourceLocationIdshow = false;
      } else if (e >= 5) {
        this.deviceShow = false;
        this.palletNoshow = true;
        this.sourceLocationIdshow = false;
      }
    },
    deviChange(e) {
      console.log("e", e);
      this.deviId = e;
    },
    deviceChange(e) {
      console.log("e", e);
      this.deviceld = e;
    },
    inputDialogToggle() {
      this.$refs.inputDialog.open();
    },

    WeakRefthree() {
      let text = "";

      if (this.device == "") {
        text = "请选择设备";
      } else if (this.value == "") {
        text = "请选择生产状态";
      } else if (this.valueTmname == "" && this.status < 5) {
        if (this.valueTmname == "") {
          text = "请输入批次号";
        }
      } else if (this.palletNo == "" && this.status >= 5) {
        text = "请输入托盘号";
      } else if (this.productionLine == "") {
        text = "请输入产线";
      } else if (this.updateTime == "") {
        text = "请选择日期";
      }
      if (text != "") {
        return uni.showToast({
          title: text,
          icon: "none",
        });
      }

      this.GetBanner();
    },
    focusFn(e) {
      this.recshow = true;
      this.recshowto = false;
      this.recshowRamik = false;
      uni.$off("xwscan");
      uni.$on("xwscan", (res) => {
        console.log("扫码结果：", res.code);
        this.sourceLocationId = res.code;
        this.valueTmname = res.code;
      });
      console.log("focus事件");
    },
    focusFnto(e) {
      this.recshowto = true;
      this.recshow = false;
      this.recshowRamik = false;
      uni.$off("xwscan");
      uni.$on("xwscan", (res) => {
        console.log("扫码结果：", res.code);
        this.palletNo = res.code;
      });
      console.log("focus事件");
    },
    focusFnthree(e) {
      this.recshowto = false;
      this.recshow = false;
      this.recshowRamik = true;
      uni.$off("xwscan");
      uni.$on("xwscan", (res) => {
        console.log("扫码结果：", res.code);
        this.productionLine = res.code;
      });
      console.log("focus事件");
    },

    goto(data) {
      uni.navigateTo({
        url: data,
      });
    },
    input(e) {
      console.log(e);
      this.valueTmname = e;
    },
    lisInput(e) {
      console.log(e);
      this.productionLine = e;
    },
    GetBanner() {
      let params = {
        lotNo: this.palletNo,
        deviceId: this.deviceld,
        batchNo: this.valueTmname,
        productionLine: this.productionLine,
        status: this.status,
        updateTime: this.updateTime,
        sanPanDevice: this.deviId,
      };
      let that = this;

      uni.getStorage({
        key: "GetPhone_Token",
        success: function (res) {
          // 恢复请求
          uni.request({
            url: `http://${that.host}` + "/retroactive/now/pda/complement",
            header: {
              Authorization: res.data,
              "Content-Type": "application/json",
            },
            data: params,
            method: "POST",
            success(respenon) {
              console.log("chaoShiPanDuan", respenon);
              if (respenon.data.code == 200) {
                uni.showToast({
                  title: respenon.data.msg,
                  icon: "none",
                });
                uni.navigateTo({
                  url: "/pages/index/tabbar/tabbar",
                });
              } else {
                uni.showToast({
                  title: respenon.data.msg,
                  icon: "none",
                });
              }
              console.log("res", res);
            },
          });
        },
      });
    },
    getData(type) {
      let that = this;

      uni.getStorage({
        key: "GetPhone_Token",
        success: function (res) {
          uni.request({
            url: `http://${that.host}` + "/system/dict/data/type/process",
            header: {
              Authorization: res.data,
              "content-type": "application/x-www-form-urlencoded",
            },

            method: "GET",
            success(respenon) {
              console.log("chaoShiPanDuan", respenon);
              if (respenon.data.code == 200) {
                // { value: 0, text: "篮球" },
                respenon.data.data.forEach((item, index) => {
                  Object.assign(item, {
                    value: item.dictValue,
                    text: item.dictLabel,
                  });
                });
                that.tabList = respenon.data.data;
              } else if (respenon.data.code == 401) {
                uni.reLaunch({
                  url: "/pages/index/login",
                });
              } else {
                uni.showToast({
                  title: respenon.data.msg,
                  icon: "none",
                });
              }
            },
          });
          uni.request({
            url:
              `http://${that.host}` +
              "/system/dict/data/type/z1_san_pan_device",
            header: {
              Authorization: res.data,
              "content-type": "application/x-www-form-urlencoded",
            },

            method: "GET",
            success(respenon) {
              console.log("chaoShiPanDuan", respenon);
              if (respenon.data.code == 200) {
                // { value: 0, text: "篮球" },
                respenon.data.data.forEach((item, index) => {
                  Object.assign(item, {
                    value: item.dictValue,
                    text: item.dictLabel,
                  });
                });
                that.devicez1List = respenon.data.data;
              } else if (respenon.data.code == 401) {
                uni.reLaunch({
                  url: "/pages/index/login",
                });
              } else {
                uni.showToast({
                  title: respenon.data.msg,
                  icon: "none",
                });
              }
            },
          });
        },
      });
    },
    getList(type) {
      let that = this;
      let data = {
        pageNum: this.page,
        pageSize: 10,
      };

      uni.getStorage({
        key: "GetPhone_Token",
        success: function (res) {
          uni.request({
            url: `http://${that.host}` + "/device/list",
            header: {
              Authorization: res.data,
              "content-type": "application/x-www-form-urlencoded",
            },
            data: data,
            method: "GET",
            success(respenon) {
              console.log("chaoShiPanDuan", respenon);
              if (respenon.data.code == 200) {
                respenon.data.data.forEach((item, index) => {
                  Object.assign(item, {
                    value: item.deviceId,
                    text: item.abbreviation,
                  });
                });
                that.deviceList = respenon.data.data;
              } else {
                uni.showToast({
                  title: respenon.data.msg,
                  icon: "none",
                });
              }
            },
          });
        },
      });
    },
    formatDate(date, fmt) {
      console.log("date", date);
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      let o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds(),
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + "";
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : this.padLeftZero(str)
          );
        }
      }
      return fmt;
    },
    padLeftZero(str) {
      return ("00" + str).substr(str.length);
    },
  },
};
</script>
<style scoped>
/deep/.is-input-border {
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;

  border-radius: 4px;
  background-color: rgb(245 245 245) !important;
  /* background: #24bdbd; */
}
/deep/uni-button {
  color: #000;
  border: 1px solid #ff0000;
  border-radius: 31px;
  width: 21%;
  background-color: #f5f5f5;
  height: 42px;
  font-size: 16px;
  color: #ff0000;
}
/deep/.uni-easyinput__content-input[data-v-abe12412] {
  width: auto;
  position: relative;
  overflow: hidden;
  flex: 1;
  line-height: 1;
  font-size: 14px;
  height: 35px;
  /* border-bottom: 1px solid #ff0000 !important; */
}
/deep/.is-input-border {
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  border: none !important;
  border-radius: 4px;
}
.recto {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  /* margin: 300px auto; */
  /* width: 300px; */
  /* height: 4px; */
  /* border: 0.1px solid #ccc; */
}
.recto::before {
  position: absolute;

  bottom: 0;
  content: "";
  height: 2px;
  width: 258px;
  background-color: red;
  /* 依次对应：动画名、时长、匀速、无限循环 */
  animation: move 3s;
}
.recthees {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  /* margin: 300px auto; */
  /* width: 300px; */
  /* height: 4px; */
  /* border: 0.1px solid #ccc; */
}
.recthees::before {
  position: absolute;

  bottom: 0;
  content: "";
  height: 2px;
  width: 258px;
  background-color: red;
  /* 依次对应：动画名、时长、匀速、无限循环 */
  animation: move 3s;
}
@keyframes move {
  from {
    left: -100%;
  }
  to {
    left: 100%;
  }
}
</style>
<style lang="scss" scoped>
.content {
  padding: 15px;
  .confirm-view {
    display: flex;
    margin-bottom: 15px;
    align-items: center;
    height: 55px;
    /* border-top: 1px solid #dbdbdb; */
    /* border-bottom: 1px solid; */
    border-bottom: 1px solid #dbdbdb;
    .text {
      font-size: 16px;
      color: #6e6860;
      font-weight: 500;
      width: 80px;
      text-align-last: justify;
    }
  }
  .vontent_boby {
    margin: 15px 0;
    border-top: 1px solid #dbdbdb;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: #838383;
    border-bottom: 1px solid #dbdbdb;
    height: 55px;
    align-items: center;
  }
  .border-buttons {
    display: flex;
    position: absolute;
    button: 0;
    bottom: 32px;
    justify-content: space-between;
    width: 91%;
    text-align: center;
    .buttons {
      width: 46%;
      border: 1px solid #f00;
      border-radius: 34px;
      height: 42px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: red;
      font-weight: 500;
    }
    .buttons2 {
      width: 100%;
      border: 1px solid #ff0505;
      border-radius: 34px;
      height: 42px;
      background: red;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: white;
      font-weight: 500;
    }
  }
}
</style>