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

src/main.js

@@ -3,9 +3,45 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import '@/assets/less/common.less'
-import 'vant/lib/icon/local.css'// 引用字体css
+import 'vant/lib/icon/local.css' // 引用字体css
 import MyNavBar from '@/components/NavBar'
-import { Toast, Dialog, Col, Row, DatetimePicker, Button, PullRefresh, DropdownMenu, DropdownItem, Tabbar, TabbarItem, Cell, CellGroup, Popup, Search, Swipe, SwipeItem, Grid, GridItem, Image, Tab, Tabs, NavBar, Icon, List, Card, Checkbox, CheckboxGroup, Stepper, Sticky, Divider, RadioGroup, Radio, Field } from 'vant'
+import {
+  Toast,
+  Dialog,
+  Col,
+  Row,
+  DatetimePicker,
+  Button,
+  PullRefresh,
+  DropdownMenu,
+  DropdownItem,
+  Tabbar,
+  TabbarItem,
+  Cell,
+  CellGroup,
+  Popup,
+  Search,
+  Swipe,
+  SwipeItem,
+  Grid,
+  GridItem,
+  Image,
+  Tab,
+  Tabs,
+  NavBar,
+  Icon,
+  List,
+  Card,
+  Checkbox,
+  CheckboxGroup,
+  Stepper,
+  Sticky,
+  Divider,
+  RadioGroup,
+  Radio,
+  Field,
+  Form
+} from 'vant'
 Vue.component('navbar', MyNavBar)
 Vue.config.productionTip = false
 Vue.use(PullRefresh)
@@ -36,6 +72,7 @@ Vue.use(Divider)
 Vue.use(Field)
 Vue.use(DropdownMenu)
 Vue.use(DropdownItem)
+Vue.use(Form)
 new Vue({
   router,
   store,

src/utils/request.js

@@ -7,24 +7,27 @@ import { Toast } from 'vant'
 const service = axios.create({
   // baseURL: 'http://192.168.31.138:8201/mall-portal',
   // baseURL: 'http://vankemanage.jsonpro.cn/mall-portal',
-  // baseURL: 'http://10.27.33.4:8201/mall-portal',
+  // baseURL: 'http://10.27.33.5:8201/mall-portal',
   baseURL: 'https://vv9.vanke.com:9443/mall-portal',
-  //注意 当前跨域问题 是同源策略解决。即前端地址 和服务端地址在同一域名下。 所以解决问题需要重这方面思考
+  // 注意 当前跨域问题 是同源策略解决。即前端地址 和服务端地址在同一域名下。 所以解决问题需要重这方面思考
   timeout: 60000 // 请求超时时间
 })
 
 // request拦截器
-service.interceptors.request.use(config => {
-  /* eslint-disable */
-  if (store.getters.token) {
-    config.headers['Authorization'] = store.getters.token
+service.interceptors.request.use(
+  config => {
+    /* eslint-disable */
+    if (store.getters.token) {
+      config.headers["Authorization"] = store.getters.token;
+    }
+    return config;
+  },
+  error => {
+    // Do something with request error
+    console.log(error);
+    Promise.reject(error);
   }
-  return config
-}, error => {
-  // Do something with request error
-  console.log(error)
-  Promise.reject(error)
-})
+);
 
 // respone拦截器
 service.interceptors.response.use(
@@ -32,31 +35,31 @@ service.interceptors.response.use(
     /**
      * code为非200是抛错 可结合自己业务进行修改
      */
-    const res = response.data
+    const res = response.data;
     // debugger
     if (res.code !== 200) {
       // 401:未登录;
       if (res.code === 401) {
-        store.dispatch('LogOut').then(() => {
+        store.dispatch("LogOut").then(() => {
           router.replace({
-            name: 'login',
+            name: "login",
             query: { redirect: router.currentRoute.fullPath } // 登录后再跳回此页面时要做的配置
-          })
-        })
+          });
+        });
       } else {
-        Toast(res.message)
+        Toast(res.message);
       }
-      return Promise.reject(res)
+      return Promise.reject(res);
     } else {
-      return response.data
+      return response.data;
     }
   },
   error => {
-    console.log('err' + error)
+    console.log("err" + error);
     //  Toast.text(error.message || '服务器忙，请稍后再试！')
-    Toast('服务器忙，请稍后再试！')
-    return Promise.reject(error)
+    Toast("服务器忙，请稍后再试！");
+    return Promise.reject(error);
   }
-)
+);
 
-export default service
+export default service;

src/views/Admin/scan.vue

@@ -45,16 +45,20 @@
     </div>
     <van-dialog
       v-model="barCodeModal"
-      title="标题"
+      title="提示"
       show-cancel-button
-      confirm-button-color="#4583f3"
-      @confirm="goBarCode"
+      :before-close="onBeforeClose"
+      @confirm="handleConfirm"
     >
-      <van-field
-        v-model="barCode"
-        label="物品条形码"
-        placeholder="请输入物品条形码"
-      />
+      <van-form ref="myform">
+        <van-field
+          v-model="barCode"
+          name="barCode"
+          label="物品条形码"
+          placeholder="请输入物品条形码"
+          :rules="[{ required: true, message: '请输入物品条形码' }]"
+        />
+      </van-form>
     </van-dialog>
   </div>
 </template>
@@ -93,6 +97,17 @@ export default {
       }
       this.barCodeModal = !this.barCodeModal;
     },
+    onBeforeClose(action, done) {
+      if (action === "confirm") {
+        return done(false);
+      } else {
+        // 重置表单校验
+        this.$refs["myform"].resetValidation("barCode");
+        this.barCode = null;
+        return done();
+      }
+    },
+
     init() {
       window.qing.config({
         debug: false,
@@ -126,36 +141,41 @@ export default {
         },
       });
     },
-    goBarCode() {
+    // 实例弹窗确认
+    handleConfirm() {
       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);
-      });
+      this.$refs["myform"]
+        .validate()
+        .then(() => {
+          getGoodsInfo({ barCode: that.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;
+            }
+            that.barCode = null;
+            that.barCodeModal = false;
+            console.log("要出库的商品", that.list);
+          });
+        })
+        .catch(() => {});
     },
+  
     // 物品条形码扫描
     scanBarCode() {
       /* eslint-disable */