warewms-PDA/pages/index/Material/Material.vue

<template>
  <view class="content">
    <view class="confirm-view">
      <text class="text">批次号：</text>
      <qiaoSelect
        :keyId="1"
        :dataList="dataSource"
        phText="选择批次号"
        showField="batchNo"
        searchKey="batchNo"
        :showObj="showObj"
        :showBorder="false"
        :disabled="false"
        @change="selectChange"
        @input="inputChange"></qiaoSelect>
      <!-- </view> -->
    </view>
    <view class="confirm-view">
      <text class="text">料架号：</text>
      <uni-easyinput
        errorMessage
        type="text"
        v-model="from.shelfNumber"
        focus
        :focus="focusStatetim"
        @focus="focusFnsw"
        :class="recshowsw ? 'rec' : ''"
        @blur="focusStatetim = false"
        @input="inputEasy"
        placeholder-style="font-size:16px;color: #a7a7a7;"
        :placeholder="placeholdesrs"></uni-easyinput>
    </view>
    <view class="confirm-view">
      <text class="text">机组号：</text>
      <uni-easyinput
        errorMessage
        type="text"
        v-model="from.uniuCode"
        focus
        :focus="focusS"
        @focus="focusFuniu"
        :class="recsuniu ? 'rec' : ''"
        @blur="focusS = false"
        @input="inputEuniu"
        placeholder-style="font-size:16px;color: #a7a7a7;"
        :placeholder="placeho"></uni-easyinput>
    </view>
    <view class="confirm-view">
      <text class="text">位置：</text>
      <view class="" style="width: 100%">
        <uni-data-select
          style="width: 100%"
          v-model="from.lotAddress"
          :localdata="range"
          @change="change"></uni-data-select>
      </view>
    </view>
    <view class="confirm-view">
      <text class="text">层数：</text>
      <view class="" style="width: 100%">
        <uni-data-select
          style="width: 100%"
          v-model="from.numberOfLayers"
          :localdata="numberofLayersList"
          @change="numberofLayersChange"></uni-data-select>
      </view>
    </view>
    <view class="border-buttons">
      <view class="buttons2" v-throttle="1000" @click="WeakRefthree">
        <text>确认</text>
      </view>
    </view>
    <xw-scan></xw-scan>

    <u-toast ref="uToast" />
  </view>
</template>

<script>
import qiaoSelect from "@/uni_modules/qiao-select/components/qiao-select/qiaoSelect.vue";
export default {
  components: {
    qiaoSelect,
  },
  data() {
    return {
      recshow: false,
      recshowsw: false,
      recsuniu: false,
      focusStatetim: false,
      focusS: false,
      dataSource: [
        {
          id: 1,
          name: "耐克1",
        },
        {
          id: 2,
          name: "耐克2",
        },
      ],
      range: [
        { value: "1", text: "1" },
        { value: "2", text: "2" },
        { value: "3", text: "3" },
        { value: "4", text: "4" },
        { value: "5", text: "5" },
      ],
      numberofLayersList: [
        { value: "1", text: "1层" },
        { value: "2", text: "2层" },
      ],
      palletNo: "",
      materialType: "",
      targetLocationld: "",
      qty: "1",
      valueTmia: "",
      host: "",
      radiolist1: [
        {
          name: "丁铵黑药",
          disabled: true,
          id: 5,
        },
      ],
      page: {
        pageNum: 1,
        pageSize: 200,
        inStatus: 5,
      },
      from: {
        numberOfLayers: "",
        batchNo: "",
        shelfNumber: "",
        lotAddress: "",
        uniuCode: "Z1HT01",
      },
      obj: { batchNo: "" },
      focusState: false,
      value: "",
      value2: "",
      showObj: null,
      placeholder: "请输入批次号",
      placeholdesrs: "请输入料架号",
      placeho: "请输入机组号",
      valueTmname: "",
    };
  },
  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.targetLocationld = currPage.testdata.name;
    }
  },
  created() {},
  mounted() {
    let _this = this;
    uni.getStorage({
      key: "hostappst",
      success(res) {
        console.log("获取成功", res.data);
        _this.host = res.data;
        _this.getData();
      },
    });
  },
  watch: {
    scanCodeValue(value) {
      if (!!value) {
        document.onkeydown = null;
      } else {
        this.placeholder = "扫码失败，请重新扫码...";
      }
    },
  },

  onHide() {
    this.recshow = false;
  },
  methods: {
    //用户点击获取的数据
    selectChange(e) {
      console.log("e", e);
      if (e) {
        this.obj.batchNo = e.batchNo;
      }
      //返回选择的对象，如果输入框清空，返回null
    },

    inputChange(e) {
      //返回搜索结果集合,一般用不到
      console.log(e);
      this.obj.batchNo = e;
    },
    getData() {
      let that = this;
      uni.getStorage({
        key: "GetPhone_Token",
        success: function (res) {
          uni.request({
            url: `http://${that.host}` + "/retroactive/now/list",
            header: {
              Authorization: res.data,
              "content-type": "application/x-www-form-urlencoded",
            },
            data: that.page,
            method: "GET",
            success(respenon) {
              console.log("chaoShiPanDuan", respenon);
              if (respenon.data.code == 200) {
                that.dataSource = respenon.data.rows;
              } else {
                uni.showToast({
                  title: respenon.data.msg,
                  icon: "none",
                });
              }
            },
          });
        },
      });
    },
    change(e) {
      console.log("e", e, "1");
      this.from.lotAddress = e;
    },
    numberofLayersChange(e) {
      console.log("e", e, "1");
      this.from.numberOfLayers = e;
    },
    WeakRefthree() {
      if (this.obj.batchNo != null) {
        this.from.batchNo = this.obj.batchNo;
      }

      let text = "";
      if (this.from.batchNo == "") {
        text = "请输入批次号";
      } else if (this.from.numberOfLayers == "") {
        text = "请选择物价号";
      } else if (this.from.lotAddress == "") {
        text = "请选择位置";
      }
      if (text != "") {
        return uni.showToast({
          title: text,
          icon: "none",
        });
      }

      this.GetBanner();
    },
    focusFn(e) {
      this.recshow = true;
      this.recshowsw = false;
      this.recsuniu = false;
      uni.$off("xwscan");
      uni.$on("xwscan", (res) => {
        console.log("扫码结果：", res.code);
        this.targetLocationld = res.code;
        this.valueTmname = res.code;
      });
      console.log("focus事件");
    },
    focusFnsw(e) {
      this.recshow = false;
      this.recsuniu = false;
      this.recshowsw = true;
      uni.$off("xwscan");
      uni.$on("xwscan", (res) => {
        console.log("扫码结果：", res.code);
        this.targetLocationld = res.code;
        this.targetLocationldTmname = res.code;
      });
      console.log("focus事件");
    },
    focusFuniu(e) {
      this.recshow = false;
      this.recsuniu = true;
      this.recshowsw = false;
      uni.$off("xwscan");
      uni.$on("xwscan", (res) => {
        console.log("扫码结果：", res.code);
        this.targetLocationld = res.code;
        this.targetLocationldTmname = res.code;
      });
      console.log("focus事件");
    },
    input(e) {
      this.from.batchNo = e;
    },
    inputEasy(e) {
      this.from.shelfNumber = e;
    },
    inputEuniu(e) {
      this.from.uniuCode = e;
    },
    GetBanner() {
      let that = this;

      uni.getStorage({
        key: "GetPhone_Token",
        success: function (res) {
          uni.request({
            url: `http://${that.host}` + "/retroactive/now/bindShelf",
            header: {
              Authorization: res.data,
              "content-type": "application/json;charset=utf-8",
            },
            data: that.from,
            method: "POST",
            success(respenon) {
              console.log("chaoShiPanDuan", respenon);
              if (respenon.data.code == 200) {
                setTimeout(() => {
                  uni.showToast({
                    title: respenon.data.msg,
                    icon: "none",
                  });
                }, 1000);
                uni.navigateTo({
                  url: "/pages/index/tabbar/tabbar",
                });
              } else {
                uni.showToast({
                  title: respenon.data.msg,
                  icon: "none",
                });
              }
              console.log("res", res);
            },
          });
        },
      });
    },
  },
};
</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: 364px;
  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>