|
|
@@ -1,57 +1,82 @@
|
|
|
<template>
|
|
|
<div class="storage">
|
|
|
<div class="btn-click">
|
|
|
- <span class="base-color">新增</span>
|
|
|
- <span class="base-color">保存</span>
|
|
|
- <span class="clear">取消</span>
|
|
|
+ <span class="base-color" @click="saveClick()">保存</span>
|
|
|
+ <span class="clear" @click="saveClick('clear')">取消</span>
|
|
|
</div>
|
|
|
<div class="storage-info">
|
|
|
- <div class="linetext">入库单: <span>21324</span></div>
|
|
|
- <div class="linetext">买家名称: <span><input type="text"></span></div>
|
|
|
- <div class="linetext">录入人: <span>21324</span></div>
|
|
|
- <div class="linetext">录入时间: <span>21324</span></div>
|
|
|
+ <div class="linetext">{{switchType === 'INBOUND' ? '入库单' : '出库单'}}:<span>系统自动生成</span></div>
|
|
|
+ <div class="linetext">{{switchType === 'INBOUND' ? '卖家名称' : '买家名称'}}:
|
|
|
+ <span><input type="text" v-model="enName" :placeholder="switchType === 'INBOUND' ? '请输入卖家名称' : '请输入买家名称'"></span>
|
|
|
+ </div>
|
|
|
+ <div class="linetext">录入人: <span v-text="user.logged">21324</span></div>
|
|
|
+ <div class="linetext">录入时间: <span v-text="baseUtils.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')">21324</span></div>
|
|
|
</div>
|
|
|
<ul class="list-unstyled">
|
|
|
- <li class="info-list clearfix">
|
|
|
- <span class="super"><em>1</em></span>
|
|
|
- <div class="linetext width50 fl">型号: <span><input type="text"></span></div>
|
|
|
- <div class="linetext width50 fl">品牌: <span>21324</span></div>
|
|
|
- <div class="linetext width50 fl">物料名称: <span>21324</span></div>
|
|
|
- <div class="linetext width50 fl">规格: <span>21324</span></div>
|
|
|
- <div class="linetext width50 fl"><em>*</em>出库数(PCS): <span><input type="text"></span></div>
|
|
|
- <div class="linetext width50 fl">单价($): <span><input type="text"></span></div>
|
|
|
+ <li class="info-list clearfix" v-for="(item, index) in allObj">
|
|
|
+ <span class="super"><em v-text="index + 1">1</em></span>
|
|
|
+ <div class="linetext width50 fl">型号:
|
|
|
+ <span>
|
|
|
+ <input type="text" style="width:2rem;" v-model="item.cmpCode" @input="onCodeChange(index)" placeholder="">
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="linetext width50 fl">品牌: <span v-text="item.brand">21324</span></div>
|
|
|
+ <div class="linetext width50 fl">物料名称: <span v-text="item.pcmpcode">21324</span></div>
|
|
|
+ <div class="linetext width50 fl">规格: <span v-text="item.spec">21324</span></div>
|
|
|
+ <div class="linetext width50 fl"><em>*</em>{{switchType === 'INBOUND' ? '入库数' : '出库数'}}(PCS): <span><input type="text" style="width:1rem;" v-model.number="item.qty"></span></div>
|
|
|
+ <div class="linetext width50 fl">单价(¥):<span><input type="text" style="width:2rem;" v-model.number="item.price"></span></div>
|
|
|
+ <div class="content-line" v-show="item.showSimilarCodeList && item.cmpCode">
|
|
|
+ <ul class="similar">
|
|
|
+ <li v-for="sCode in similarCode" @click.stop="setCode(sCode, index)">
|
|
|
+ <span v-text="sCode.cmpCode"></span>
|
|
|
+ <span v-text="sCode.brand"></span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="look-btn">
|
|
|
+ <span @click="addClick()" v-if="index === allObj.length - 1">新增</span>
|
|
|
+ <span @click="addClick(index)" v-if="index !== 0">删除</span>
|
|
|
+ </div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
+ <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+ import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
|
|
|
export default {
|
|
|
+ props: {
|
|
|
+ switchType: {
|
|
|
+ type: String,
|
|
|
+ default: 'INBOUND'
|
|
|
+ }
|
|
|
+ },
|
|
|
data () {
|
|
|
return {
|
|
|
remindText: '',
|
|
|
- timeoutCount: 0,
|
|
|
- switchType: 'inBound',
|
|
|
- handleItem:0,
|
|
|
- filterOptions: [
|
|
|
- {
|
|
|
- title: '交易时间',
|
|
|
- selectOption: 'date',
|
|
|
- selectItems: [{
|
|
|
- key: '30天',
|
|
|
- val: 1
|
|
|
- }, {
|
|
|
- key: '90天',
|
|
|
- val: 2
|
|
|
- }, {
|
|
|
- key: '180天',
|
|
|
- val: 3
|
|
|
- }, {
|
|
|
- key: '自定义',
|
|
|
- val: 4
|
|
|
- }],
|
|
|
- defaultVal: 1
|
|
|
- }
|
|
|
- ]
|
|
|
+ timeoutCount:0,
|
|
|
+ enName: '',
|
|
|
+ allObj:[],
|
|
|
+ storageObj: {
|
|
|
+ cmpCode: '',
|
|
|
+ brand: '',
|
|
|
+ pcmpcode: '',
|
|
|
+ spec: '',
|
|
|
+ qty: '',
|
|
|
+ price: '',
|
|
|
+ showSimilarCodeList: false,
|
|
|
+ },
|
|
|
+ similarCode:[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ RemindBox
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ let _this = this
|
|
|
+ this.allObj.push(this.storageObj)
|
|
|
+ document.body.onclick = function() {
|
|
|
+ _this.showSimilarCodeList = false
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -59,61 +84,99 @@
|
|
|
this.remindText = str
|
|
|
this.timeoutCount++
|
|
|
},
|
|
|
- setSwitchType (type) {
|
|
|
- this.switchType = type
|
|
|
- },
|
|
|
- setSelect (type, val) {
|
|
|
- if (type === 'date') {
|
|
|
- if (val) {
|
|
|
- this.filterParams.fromDate = val.fromDate
|
|
|
- this.filterParams.toDate = val.toDate
|
|
|
- } else {
|
|
|
- this.filterParams.fromDate = null
|
|
|
- this.filterParams.toDate = null
|
|
|
- }
|
|
|
+ setFilterType (type) {
|
|
|
+ let bound = ''
|
|
|
+ if(type === 'OTHER_INBOUND') {
|
|
|
+ bound = '其他入库'
|
|
|
+ } else if(type === 'OTHER_OUTBOUND'){
|
|
|
+ bound = '其他出库'
|
|
|
+ } else if (type === 'PURCHASE_INBOUND') {
|
|
|
+ bound = '采购入库'
|
|
|
+ } else if(type === 'SELL_OUTBOUND') {
|
|
|
+ bound = '销售出库'
|
|
|
} else {
|
|
|
- this.filterParams[type] = val
|
|
|
+ bound = '全部类型'
|
|
|
}
|
|
|
- this.filterRecord()
|
|
|
+ return bound
|
|
|
},
|
|
|
- initFilterParams () {
|
|
|
- this.filterParams = {
|
|
|
- keyword: '',
|
|
|
- fromDate: '',
|
|
|
- toDate: '',
|
|
|
- currencyName: '',
|
|
|
- method: ''
|
|
|
- }
|
|
|
+ initData () {
|
|
|
+ this.enName = ''
|
|
|
+ this.allObj = []
|
|
|
+ this.allObj.push(this.storageList)
|
|
|
+ },
|
|
|
+ onCodeChange (type) {
|
|
|
+ this.allObj[type].showSimilarCodeList = true
|
|
|
+ this.allObj[type].cmpCode = this.allObj[type].cmpCode.trim()
|
|
|
+ this.getSimilarCode(type)
|
|
|
},
|
|
|
- onSelectAction (selectObj) {
|
|
|
- this.setSelect(selectObj.key, selectObj.value)
|
|
|
+ getSimilarCode: function (type) {
|
|
|
+ if (this.allObj[type].cmpCode) {
|
|
|
+ this.$http.get('/trade/products/code/keyword', {params: {keyword: this.allObj[type].cmpCode}})
|
|
|
+ .then(response => {
|
|
|
+ if(response.data){
|
|
|
+ this.similarCode = response.data || []
|
|
|
+ } else {
|
|
|
+ this.onRemind('没有找到产品信息')
|
|
|
+ }
|
|
|
+ this.allObj[type].showSimilarCodeList = response.data.length > 0
|
|
|
+ }).catch((err) => {
|
|
|
+ this.allObj[type].showSimilarCodeList = false
|
|
|
+ this.similarCode = []
|
|
|
+ this.onRemind('没有找到产品信息')
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.allObj[type].showSimilarCodeList = false
|
|
|
+ }
|
|
|
},
|
|
|
- filterRecord () {
|
|
|
- this.page = 1
|
|
|
- this.isChange = true
|
|
|
- this.reloadList()
|
|
|
+ setCode (data, type) {
|
|
|
+ this.allObj[type].cmpCode = data.cmpCode
|
|
|
+ this.allObj[type].brand = data.pbranden
|
|
|
+ this.allObj[type].pcmpcode = data.kind
|
|
|
+ this.allObj[type].spec = data.spec
|
|
|
+ this.allObj[type].productId = data.id
|
|
|
+ this.allObj[type].showSimilarCodeList = false
|
|
|
},
|
|
|
- reloadList () {
|
|
|
- if (this.switchType === 'account') {
|
|
|
- this.$store.dispatch('payCenter/loadBuyerAccount', {
|
|
|
- count: this.count,
|
|
|
- page: this.page,
|
|
|
- sorting: {num: 'ASC'},
|
|
|
- type: 'buyer'
|
|
|
- })
|
|
|
+ addClick (type) {
|
|
|
+ if(type) {
|
|
|
+ this.allObj.splice(type, 1)
|
|
|
} else {
|
|
|
- this.$store.dispatch('payCenter/loadBuyerRecord', {
|
|
|
- count: this.count,
|
|
|
- page: this.page,
|
|
|
- sorting: {'paytime': 'DESC'},
|
|
|
- currencyName: this.filterParams.currencyName || null,
|
|
|
- fromDate: this.filterParams.fromDate || null,
|
|
|
- toDate: this.filterParams.toDate || null,
|
|
|
- remitteeType: this.filterParams.remitteeType || null,
|
|
|
- keyword: this.filterParams.keyword || null
|
|
|
- })
|
|
|
+ let _item = {
|
|
|
+ cmpCode: '',
|
|
|
+ brand: '',
|
|
|
+ pcmpcode: '',
|
|
|
+ spec: '',
|
|
|
+ qty: '',
|
|
|
+ price: '',
|
|
|
+ showSimilarCodeList: false,
|
|
|
+ }
|
|
|
+ this.allObj.push(_item)
|
|
|
}
|
|
|
},
|
|
|
+ saveClick (type) {
|
|
|
+ if(type === 'clear') {
|
|
|
+ console.log('clear')
|
|
|
+ this.initData()
|
|
|
+ }else {
|
|
|
+ if(!this.enName) {
|
|
|
+ this.onRemind('请输入' + this.switchType === 'INBOUND' ? '请输入卖家名称' : '请输入买家名称')
|
|
|
+ } else {
|
|
|
+ let arr = []
|
|
|
+ this.allObj.forEach(val => {
|
|
|
+ if(!val.price && !val.qty && !val.productId) {
|
|
|
+ this.onRemind('请将数据补充完整')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ arr.push({price: val.price, productId: val.productId, qty:val.qty})
|
|
|
+ })
|
|
|
+ this.$http.post(`/CommodityInOutbound/${this.switchType === 'INBOUND'? 'inBound': 'outBound'}/other?enName=${this.enName}`, arr)
|
|
|
+ .then(response => {
|
|
|
+ if(response.data.code === 1){
|
|
|
+ this.onRemind('保存信息成功')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -153,6 +216,52 @@
|
|
|
background: #fff;
|
|
|
margin-bottom:.2rem;
|
|
|
}
|
|
|
+ .content-line{
|
|
|
+ position: absolute;
|
|
|
+ border: 1px solid #7e7e7e;
|
|
|
+ border-radius: .05rem;
|
|
|
+ left: .3rem;
|
|
|
+ top: 32%;
|
|
|
+ background: #fff;
|
|
|
+ width: 6.5rem;
|
|
|
+ max-height: 2.5rem;
|
|
|
+ overflow-y: auto;
|
|
|
+ z-index: 12;
|
|
|
+ .similar {
|
|
|
+ li {
|
|
|
+ height: .5rem;
|
|
|
+ line-height: .5rem;
|
|
|
+ font-size: .26rem;
|
|
|
+ color: #999;
|
|
|
+ padding-left: .19rem;
|
|
|
+ &:focus, &:active, &:hover {
|
|
|
+ background: #999;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ display: inline-block;
|
|
|
+ width: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .look-btn{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ border-top: 1px solid #d3d3d3;
|
|
|
+ text-align: center;
|
|
|
+ span{
|
|
|
+ display:inline-block;
|
|
|
+ width:50%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: .8rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
.linetext{
|
|
|
color:#666;
|
|
|
line-height: .6rem;
|
|
|
@@ -161,12 +270,11 @@
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
input{
|
|
|
- width: 1rem;
|
|
|
- height: .56rem;
|
|
|
+ height: .5rem;
|
|
|
font-size: .24rem;
|
|
|
border-radius: .04rem;
|
|
|
border: 1px solid #d2d2d2;
|
|
|
- padding: 0 .2rem;
|
|
|
+ padding: 0 .1rem;
|
|
|
}
|
|
|
em{
|
|
|
color:$red-color;
|
|
|
@@ -178,12 +286,12 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- ul{
|
|
|
+ > ul{
|
|
|
margin-bottom:1rem;
|
|
|
}
|
|
|
.info-list{
|
|
|
position:relative;
|
|
|
- padding: 0.3rem 0.24rem;
|
|
|
+ padding: 0.3rem 0.24rem 1rem;
|
|
|
background: #fff;
|
|
|
margin-bottom:.2rem;
|
|
|
.width50{
|