warewms-PDA/pages/index/news/docking/docking.vue

<template>
  <view class="content">
    <view class="confirm-view">
      <text class="text">入库库位：</text>
      <uni-easyinput
        errorMessage
        type="text"
        v-model="sourceLocationId"
        focus
        :focus="focusState"
        @focus="focusFn"
        :class="recshow ? 'rec' : ''"
        @blur="focusState = false"
        @input="input"
        placeholder-style="font-size:16px;color: #a7a7a7;"
        :placeholder="placeholder"></uni-easyinput>
      <button
        type="default"
        @click="goto('/pages/Warehousing/select/index?show=6&tip=' + 1)">
        选择
      </button>
    </view>
    <view class="confirm-view">
      <text class="text">出库库位：</text>
      <uni-easyinput
        errorMessage
        type="text"
        v-model="targetLocationld"
        focus
        :focus="focusStatetim"
        @focus="focusFnsw"
        :class="recshowsw ? 'rec' : ''"
        @blur="focusStatetim = false"
        @input="inputEasy"
        placeholder-style="font-size:16px;color: #a7a7a7;"
        :placeholder="placeholdesrs"></uni-easyinput>
      <!-- <button
        type="default"
        @click="goto('/pages/Warehousing/select/index?show=7&tip=' + 2)">
        选择
      </button> -->
    </view>

    <view class="confirm-view">
      <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>
      <view class="" style="display: flex; align-items: center; width: 50%"> -->
    <!-- <uni-data-select
          v-model="qty"
          :localdata="range"
          @change="change"></uni-data-select> -->
    <!-- <text>4桶</text>
      </view>
    </view>
    <view class="confirm-view">
      <text class="text">物料：</text>
      <view class="">
        <view class="view_icon" @click="inputDialogToggle">
          <text v-if="valueTmia != ''">{{ valueTmia }}</text>
          <text v-else>请选择物料</text>
        </view> -->
    <!-- <view class="view_icon"><text>丁铵黑药</text></view> -->
    <!-- </view>
    </view> -->
    <view class="vercode_content">
      <view class="vontent_boby" @click="warehous">
        <view class="uicon-volume_text">
          <text class="text">物料：</text>
          <text v-if="valueTmia != ''">{{ valueTmia }}</text>
          <text v-else>请选择物料</text>
        </view>
        <view class="uicon-volume_text">
          <text>数量:4桶</text>
        </view>
      </view>
    </view>
    <view class="border-buttons">
      <!-- <view class="buttons" @click="Material">
        <text>新增物料</text>
      </view> -->
      <view class="buttons2" @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>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      recshow: false,
      recshowto: false,
      recshowsw: false,
      focusState: false,
      focusStatetim: false,
      palletNo: "",
      materialType: "",
      sourceLocationId: "",
      qty: "4",
      valueTmia: "丁铵黑药",
      targetLocationld: "",
      radiolist1: [
        {
          name: "丁铵黑药",
          disabled: true,
          id: 5,
        },
      ],
      range: [
        { value: "1", text: "1" },
        { value: "2", text: "2" },
        { value: "3", text: "3" },
        { value: "4", text: "4" },
      ],
      focusStateto: false,
      value: "丁铵黑药",
      value2: "",
      targetLocationldTmname: "",
      placeholders: "请输入托盘号",
      placeholdesrs: "请输入出库单位",
      placeholder: "请输入入库单位",
      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;
    }
    this.materialType = this.radiolist1[0].id;
  },
  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();
  },
  onHide() {
    this.recshow = false;
  },
  methods: {
    otherFun(obj) {
      console.log(obj);
      if (obj.show == 6) {
        this.valueTmname = obj.id;
        this.sourceLocationId = obj.locationNo;
      } else if (obj.show == 7) {
        this.targetLocationldTmname = obj.id;
        this.targetLocationld = 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",
      });
    },
    inputDialogToggle() {
      this.$refs.inputDialog.open();
    },
    WeakRefthree() {
      let text = "";
      if (this.sourceLocationId == "") {
        text = "请输入库位";
      } else if (this.materialType == "") {
        text = "请选择物料";
      } else if (this.palletNo == "") {
        text = "请输入托盘号";
      } else if (this.quantity == "") {
        text = "请选择数量";
      }
      if (text != "") {
        return uni.showToast({
          title: text,
          icon: "none",
        });
      }

      this.GetBanner();
    },
    change(e) {
      console.log("e", e);
      this.qty = e;
    },
    focusFn(e) {
      this.recshow = true;
      this.recshowto = false;
      this.recshowsw = false;
      uni.$off("xwscan");
      uni.$on("xwscan", (res) => {
        console.log("扫码结果：", res.code);
        this.sourceLocationId = res.code;
        this.valueTmname = res.code;
      });
      console.log("focus事件");
    },
    focusFnsw(e) {
      this.recshow = false;
      this.recshowto = 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事件");
    },
    focusFnto(e) {
      this.recshowto = true;
      this.recshow = false;
      this.recshowsw = false;
      uni.$off("xwscan");
      uni.$on("xwscan", (res) => {
        console.log("扫码结果：", res.code);
        this.palletNo = res.code;
      });
      console.log("focus事件");
    },
    startScan() {
      this.$nextTick(() => {
        this.focusState = true;
      });
      if (e.which === 13) {
        setTimeout(() => {
          if (this.sourceLocationId.length < 3) return;
          this.sourceLocationId = "";
        }, 500);
        return;
      }
    },

    getScancode(code) {
      console.log("进", code);
      code = code.trim();
      this.sourceLocationId = code;
      console.log(code);
      uni.showLoading({
        title: code,
      });
      setTimeout(() => {
        uni.hideLoading();
      }, 3000);
    },
    goto(data) {
      uni.navigateTo({
        url: data,
      });
    },
    input(e) {
      this.valueTmname = e;
    },
    inputEasy(e) {
      this.targetLocationldTmname = e;
    },
    GetBanner() {
      uni.showLoading({
        title: "加载中",
      });
      let params = {
        palletNo: this.palletNo,
        materialType: this.materialType.toString(),
        sourceLocationId: this.valueTmname,
        targetLocationId: this.targetLocationldTmname,
        quantity: Number(this.qty),
      };
      let that = this;

      uni.getStorage({
        key: "GetPhone_Token",
        success: function (res) {
          // 恢复请求
          uni.request({
            url: `http://${that.host}` + "/pda/agvCall/bucketCrossStorage",
            header: {
              Authorization: res.data,
              "content-type": "application/x-www-form-urlencoded",
            },
            data: params,
            method: "POST",
            success(respenon) {
              console.log("chaoShiPanDuan", respenon);
              if (respenon.data.code == 200) {
                uni.hideLoading();
                uni.showToast({
                  title: respenon.data.msg,
                  icon: "none",
                });
                setTimeout(function () {
                  uni.navigateTo({
                    url: "/pages/index/tabbar/tabbar",
                  });
                }, 1000);
              } else {
                uni.showToast({
                  title: respenon.data.msg,
                  icon: "none",
                });
              }
              console.log("res", res);
            },
          });
        },
      });
    },
    getData() {
      let that = this;
      let dataobj = {
        cacheZoneSceneCode: "bucketCacheZoneOut",
        locationSceneCode: "bucketCacheOut",
      };
      uni.getStorage({
        key: "GetPhone_Token",
        success: function (res) {
          // 恢复请求
          uni.request({
            url:
              `http://${that.host}` + "/inv/asn/getCacheLocationInfoCacheList",
            header: {
              Authorization: res.data,
            },
            method: "GET",
            data: dataobj,
            success(res) {
              console.log("chaoShiPanDuan", res);
              if (res.data.code == 200) {
                res.data.data.forEach((item, index) => {
                  that.targetLocationld = res.data.data[0].locationNo;
                  that.targetLocationldTmname = res.data.data[0].id;
                });
              } else if (respenon.data.code == 401) {
                uni.reLaunch({
                  url: "/pages/index/login",
                });
              }
              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: 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: 65px;
    /* 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>