增加手动填写物品条形码出库

src/views/Admin/scan.vue

@@ -2,12 +2,18 @@
   <div class="page">
     <navbar title="扫码出库" rightText="完成" @rightClick="submit"></navbar>
     <div class="container">
-      <div class="info" v-if="JSON.stringify(userInfo)!= '{}'">
-        <p>申领人： <span>{{userInfo.name}}</span></p>
-        <p>所属部门：<span>{{userInfo.departName}}</span></p>
-        <p>员工编号：<span>{{userInfo.jobNo}}</span></p>
+      <div class="info" v-if="JSON.stringify(userInfo) != '{}'">
+        <p>
+          申领人： <span>{{ userInfo.name }}</span>
+        </p>
+        <p>
+          所属部门：<span>{{ userInfo.departName }}</span>
+        </p>
+        <p>
+          员工编号：<span>{{ userInfo.jobNo }}</span>
+        </p>
       </div>
-      <div v-if="list && list.length" style="width: 100%;">
+      <div v-if="list && list.length" style="width: 100%">
         <div class="title">
           <div>物品名称</div>
           <div>型号</div>
@@ -15,12 +21,13 @@
           <div>数量</div>
         </div>
         <div v-for="(item, index) in list" :key="index" class="tr">
-          <div >{{item.name}}</div>
-          <div>{{item.goodsNo}}</div>
-          <div>{{item.goodsCategoryName}}</div>
+          <div>{{ item.name }}</div>
+          <div>{{ item.goodsNo }}</div>
+          <div>{{ item.goodsCategoryName }}</div>
           <div>
-            <stepper style="width: 100%;"
-              :id=item.id
+            <stepper
+              style="width: 100%"
+              :id="item.id"
               :maxNum="item.maxNum"
               :inputNum="item.goodsNum"
               @changeNum="changeNum"
@@ -30,15 +37,36 @@
       </div>
     </div>
     <div class="bottom-fixed">
+      <p class="show-tip" @click="showBarCode">没有物品条形码？点我手动输入</p>
       <van-button type="primary" @click="scanQrCode">扫描员工二维码</van-button>
-      <van-button plain type="primary" @click="scanBarCode">扫描物品条形码</van-button>
+      <van-button plain type="primary" @click="scanBarCode"
+        >扫描物品条形码</van-button
+      >
     </div>
+    <van-dialog
+      v-model="barCodeModal"
+      title="标题"
+      show-cancel-button
+      confirm-button-color="#4583f3"
+      @confirm="goBarCode"
+    >
+      <van-field
+        v-model="barCode"
+        label="物品条形码"
+        placeholder="请输入物品条形码"
+      />
+    </van-dialog>
   </div>
 </template>
 
 <script>
 import Stepper from '@/components/Stepper.vue'
-import { checkQcode, getMemberInfo, getGoodsInfo, outBoundGoods } from '@/api/code'
+import {
+  checkQcode,
+  getMemberInfo,
+  getGoodsInfo,
+  outBoundGoods
+} from '@/api/code'
 
 export default {
   name: 'scan',
@@ -48,63 +76,103 @@ export default {
   data () {
     return {
       userInfo: {},
-      list: []
+      list: [],
+      barCode: null,
+      barCodeModal: false
     }
   },
   mounted () {
     this.init()
   },
   methods: {
-    init () {
+    showBarCode () {
+      /* eslint-disable */
+      if (JSON.stringify(this.userInfo) == "{}") {
+        this.$toast.fail("请先扫描员工二维码");
+        return;
+      }
+      this.barCodeModal = !this.barCodeModal;
+    },
+    init() {
       window.qing.config({
         debug: false,
         // 声明需要调用的API
-        jsApiList: ['scanQRCode']
+        jsApiList: ["scanQRCode"],
         // 声明需要监听的事件，声明后可通过 document.addEventListener 绑定监听函数
         // jsEventList: ['appear', 'disappear']
-      })
+      });
     },
     // 员工二维码扫描
-    scanQrCode () {
-      const that = this
-      window.qing.call('scanQRCode', {
+    scanQrCode() {
+      const that = this;
+      window.qing.call("scanQRCode", {
         needResult: 1,
         success: function (result) {
-          const data = JSON.parse(result.data.qrcode_str)
+          const data = JSON.parse(result.data.qrcode_str);
           if (!data.onlyId) {
-            this.$toast.fail('该员工不存在')
-            return
+            this.$toast.fail("该员工不存在");
+            return;
           }
-          checkQcode(data).then(res => {
-            console.log('校验结果', res)
-            getMemberInfo({ memberId: data.memberId }).then(res => {
-              console.log('userId', res)
-              that.userInfo = res.data
-            })
-          })
+          checkQcode(data).then((res) => {
+            console.log("校验结果", res);
+            getMemberInfo({ memberId: data.memberId }).then((res) => {
+              console.log("userId", res);
+              that.userInfo = res.data;
+            });
+          });
         },
         error: function (res) {
-          console.log('res', res)
+          console.log("res", res);
+        },
+      });
+    },
+    goBarCode() {
+      const that = this;
+      if (!this.barCode) {
+        this.$toast.fail("请手动填写物品条形码");
+        return;
+      }
+      getGoodsInfo({ barCode: this.barCode }).then((res) => {
+        if (!res.data) {
+          that.$toast("该物品暂未入库");
+          return;
         }
-      })
+        const data = res.data;
+        const params = {
+          id: data.id,
+          name: data.name,
+          goodsNo: data.goodsNo,
+          goodsCategoryId: data.goodsCategoryId,
+          goodsCategoryName: data.goodsCategoryName,
+          goodsNum: 1,
+          maxNum: data.goodsNum,
+        };
+        const isExist = that.list.findIndex((item) => item.id === data.id);
+        if (isExist === -1) {
+          that.list.push(params);
+        } else {
+          that.list[isExist].goodsNum = that.list[isExist].goodsNum + 1;
+        }
+        console.log("要出库的商品", that.list);
+      });
     },
     // 物品条形码扫描
-    scanBarCode () {
+    scanBarCode() {
       /* eslint-disable */
-      if (JSON.stringify(this.userInfo) == '{}') {
-        this.$toast.fail('请先扫描员工二维码')
-        return
+      if (JSON.stringify(this.userInfo) == "{}") {
+        this.$toast.fail("请先扫描员工二维码");
+        return;
       }
-      let that = this
-      window.qing.call('scanQRCode', {
+      let that = this;
+      window.qing.call("scanQRCode", {
         needResult: 1,
         success: function (result) {
-          getGoodsInfo({ barCode: result.data.qrcode_str }).then(res => {
-            if(!res.data){
-              that.$toast('该物品暂未入库')
-              return
+          getGoodsInfo({ barCode: result.data.qrcode_str }).then((res) => {
+            if (!res.data) {
+              that.$toast("该物品暂未入库");
+              return;
             }
-            let data = res.data
+            let data = res.data;
             let params = {
               id: data.id,
               name: data.name,
@@ -112,21 +180,18 @@ export default {
               goodsCategoryId: data.goodsCategoryId,
               goodsCategoryName: data.goodsCategoryName,
               goodsNum: 1,
-              maxNum: data.goodsNum
-            }
-            let isExist = that.list.findIndex(item =>
-              item.id === data.id
-            )
+              maxNum: data.goodsNum,
+            };
+            let isExist = that.list.findIndex((item) => item.id === data.id);
             if (isExist === -1) {
-              that.list.push(params)
+              that.list.push(params);
             } else {
-              that.list[isExist].goodsNum = that.list[isExist].goodsNum + 1
+              that.list[isExist].goodsNum = that.list[isExist].goodsNum + 1;
             }
-            console.log('要出库的商品', that.list)
-          })
-
-        }
-      })
+            console.log("要出库的商品", that.list);
+          });
+        },
+      });
       // getGoodsInfo({ barCode: 'WMYfwBwH_5ouDO' }).then(res => {
       //   if (!res.data) {
       //     this.$toast('该物品暂未入库')
@@ -155,61 +220,59 @@ export default {
       // })
     },
     // 数量修改
-    changeNum (value, id) {
-      console.log('value', value, id)
-      let isIndex = this.list.findIndex(item =>
-        item.id === id
-      )
-      this.list[isIndex].goodsNum = value
-      console.log('修改数量', this.list)
+    changeNum(value, id) {
+      console.log("value", value, id);
+      let isIndex = this.list.findIndex((item) => item.id === id);
+      this.list[isIndex].goodsNum = value;
+      console.log("修改数量", this.list);
     },
     // 提交
-    submit () {
+    submit() {
       if (!this.list.length) {
-        this.$toast.fail('请先扫描物品')
-        return
+        this.$toast.fail("请先扫描物品");
+        return;
       }
-      console.log('this.userInfo.id', this.userInfo.id)
+      console.log("this.userInfo.id", this.userInfo.id);
       let params = {
         memberId: this.userInfo.id,
         outMemberId: this.$store.getters.memberId,
-        vankeGoodsDtoList: this.list
-      }
-      console.log('出库', params)
-      outBoundGoods(params).then(res => {
-        this.$toast.success('出库成功')
-        this.list = []
-        this.userInfo = {}
-      })
-      console.log('提交')
-    }
-  }
-}
+        vankeGoodsDtoList: this.list,
+      };
+      console.log("出库", params);
+      outBoundGoods(params).then((res) => {
+        this.$toast.success("出库成功");
+        this.list = [];
+        this.userInfo = {};
+      });
+      console.log("提交");
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .info {
+.info {
   background: #ffffff;
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
-  }
+}
 
-  .info p {
+.info p {
   width: 40%;
   padding: 10px 0 10px 20px;
   line-height: 18px;
   color: #999999;
   text-align: left;
-  }
+}
 
-  .info span {
+.info span {
   color: #020202;
-  }
+}
 
-  .title {
+.title {
   width: 100%;
   background: #f6f7f9;
   height: 34px;
@@ -219,9 +282,9 @@ export default {
   margin-top: 10px;
   font-size: 13px;
   color: #666666;
-  }
+}
 
-  .tr {
+.tr {
   width: 100%;
   font-size: 14px;
   display: flex;
@@ -229,41 +292,45 @@ export default {
   align-items: center;
   height: 42px;
   background: #ffffff;
-  }
+}
 
-  .tr + .tr {
-    border-top: 1px solid #E8E8E8;
-  }
+.tr + .tr {
+  border-top: 1px solid #e8e8e8;
+}
 
-  .tr div, .title div {
+.tr div,
+.title div {
   width: 25%;
   text-align: center;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  }
+}
 
-  .bottom-fixed {
+.bottom-fixed {
   width: 90%;
   margin: 0 auto;
   position: fixed;
   bottom: 10px;
   left: 0;
   right: 0;
-  }
-
-  .bottom-fixed button {
+}
+.bottom-fixed .show-tip {
+  color: #4583f3;
+  margin-bottom: 10px;
+}
+.bottom-fixed button {
   width: 50%;
   border-radius: 5px;
-  }
+}
 
-  .bottom-fixed button:first-child {
+.bottom-fixed button:first-child {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
-  }
+}
 
-  .bottom-fixed button:last-child {
+.bottom-fixed button:last-child {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  }
+}
 </style>