Skip to content

H
h5
Commit 0077e726 by wangyalan-git
Options

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

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