356 lines
7.8 KiB
Vue
356 lines
7.8 KiB
Vue
<template>
|
||
<view class="ns-to">
|
||
<view class="title">
|
||
产品{{ keys_type }}
|
||
<text class="iconfont iconguanbi1" @click="close"></text>
|
||
</view>
|
||
<view class="ns-body" v-if="sku_list.length">
|
||
<view class="item-type1">
|
||
<view class="item-left">产品名称：</view>
|
||
<view>{{ sku_list[0].goods_name }}</view>
|
||
</view>
|
||
<view class="item-type1 item-type2">
|
||
<view class="item-left">{{ keys_type }}类型：</view>
|
||
<view class="type2-right type3-right" v-if="documentTypeList.length > 0">
|
||
<picker @change="bindtypeChange" :value="type_index" :range="documentTypeList" :range-key="'name'">
|
||
<view class="uni-input">
|
||
{{ documentTypeList[type_index].name }}
|
||
<text class="iconfont iconxiala"></text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="item-type1 item-type2" v-if="sku_list.length > 1">
|
||
<view class="item-left">规格选择：</view>
|
||
<view class="type2-right type3-right">
|
||
<picker @change="bindskuChange" :value="sku_index" :range="sku_list" :range-key="'spec_name'">
|
||
<view class="uni-input">
|
||
{{ sku_list[sku_index].spec_name }}
|
||
<text class="iconfont iconxiala"></text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="item-type1">
|
||
<view class="item-left">当前库存：</view>
|
||
<view>{{ sku_list[sku_index].stock }}</view>
|
||
</view>
|
||
|
||
<view class="item-type1 item-type4">
|
||
<view class="item-left">{{ keys_type }}时间：</view>
|
||
<view class="type2-right type3-right"><uni-datetime-picker type="datetime" v-model="dateTime" @change="changeTime" /></view>
|
||
</view>
|
||
|
||
<view class="item-type1">
|
||
<view class="item-left">{{ keys_type }}数量：</view>
|
||
<view class="item-right"><input type="number" v-model="num" :placeholder="'请输入' + keys_type + '数量'" /></view>
|
||
</view>
|
||
|
||
<view class="item-type1" v-if="keys == 'input'">
|
||
<view class="item-left">{{ keys_type }}单价：</view>
|
||
<view class="item-right"><input type="digit" v-model="price" :placeholder="'请输入' + keys_type + '单价'" /></view>
|
||
</view>
|
||
|
||
<view class="item-type1" v-if="keys == 'input'">
|
||
<view class="item-left">总金额：</view>
|
||
<view>{{ parseFloat(parseInt(num) * parseFloat(price).toFixed(2)).toFixed(2) }}</view>
|
||
</view>
|
||
|
||
<view class="item-type3">
|
||
<view class="item-left">备注：</view>
|
||
<view class="item-right"><textarea class="textarea" maxlength="100" placeholder="请输入备注，不能超过100个字符" v-model="remark"></textarea></view>
|
||
</view>
|
||
|
||
<view class="bottom-btn">
|
||
<button type="primary" class="primary-btn btn" @click="operation">保存</button>
|
||
<button type="primary" class="default-btn btn save" @click="close">取消</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import unidatetimepicker from '@/components/uni-datetime-picker/uni-datetime-picker.vue';
|
||
export default {
|
||
components: {
|
||
unidatetimepicker
|
||
},
|
||
props: {
|
||
documentTypeList: {
|
||
type: Array,
|
||
default: () => {
|
||
return [];
|
||
}
|
||
},
|
||
sku_list: {
|
||
type: Array,
|
||
default: () => {
|
||
return [];
|
||
}
|
||
},
|
||
//弹窗 -- 标题（出库 || 入库）
|
||
keys: {
|
||
type: String,
|
||
default: () => {
|
||
return '';
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
//出入库选择
|
||
type_index: 0,
|
||
//规格选择
|
||
sku_index: 0,
|
||
//时间数据
|
||
dateTime: '',
|
||
// 入库数量
|
||
num: 0,
|
||
// 入库单价
|
||
price: 0,
|
||
//发表留言
|
||
remark: '',
|
||
// 出入库时间
|
||
time: '',
|
||
//出路库类型
|
||
keys_type: '入库',
|
||
// 防重复操作
|
||
set_judge: false
|
||
};
|
||
},
|
||
mounted() {
|
||
if (this.keys == 'output') {
|
||
this.keys_type = '出库';
|
||
} else {
|
||
this.keys_type = '入库';
|
||
}
|
||
let myDate = new Date();
|
||
let Y = myDate.getFullYear();
|
||
let M = myDate.getMonth() + 1;
|
||
let D = myDate.getDate();
|
||
let H = myDate.getHours();
|
||
let Min = myDate.getMinutes();
|
||
this.$nextTick(() => {
|
||
this.dateTime = Y + '-' + M + '-' + D + ' ' + H + ':' + Min + ':00';
|
||
});
|
||
},
|
||
methods: {
|
||
// 出入库类型选择
|
||
bindtypeChange(e) {
|
||
this.type_index = e.detail.value;
|
||
},
|
||
// 规格选择
|
||
bindskuChange(e) {
|
||
this.sku_index = e.detail.value;
|
||
},
|
||
// 弹窗关闭
|
||
close() {
|
||
this.$emit('close', 'put');
|
||
},
|
||
// 设置时间
|
||
changeTime(e) {
|
||
this.time = e;
|
||
},
|
||
// 请求出库入库操作
|
||
operation() {
|
||
if (this.set_judge) return;
|
||
this.set_judge = true;
|
||
let data = {
|
||
sku_id: this.sku_list[this.sku_index].sku_id,
|
||
remark: this.remark,
|
||
goods_num: this.num,
|
||
time: this.time,
|
||
key: this.documentTypeList[this.type_index].key
|
||
};
|
||
if (this.num < 0 || this.num == 0) {
|
||
this.$util.showToast({
|
||
title: this.keys_type + '数量必须为大于0的整数'
|
||
});
|
||
this.set_judge = false;
|
||
return;
|
||
}
|
||
if (this.keys == 'input') {
|
||
data.goods_price = this.price;
|
||
} else {
|
||
if (parseInt(this.num) > parseInt(this.sku_list[this.sku_index].stock)) {
|
||
this.$util.showToast({
|
||
title: '出库数量，请勿大于当前库存'
|
||
});
|
||
this.set_judge = false;
|
||
return;
|
||
}
|
||
}
|
||
this.$emit('operation', data, res => {
|
||
this.set_judge = res.judge;
|
||
});
|
||
}
|
||
},
|
||
watch: {
|
||
num() {
|
||
if (!this.num) {
|
||
this.num = 0;
|
||
}
|
||
this.$forceUpdate();
|
||
},
|
||
price() {
|
||
if (!this.price) {
|
||
this.price = 0;
|
||
}
|
||
this.$forceUpdate();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.ns-to {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #ffffff;
|
||
border-radius: 0.04rem;
|
||
view {
|
||
color: #303133 !important;
|
||
}
|
||
.title {
|
||
width: 100%;
|
||
height: 0.5rem;
|
||
border-bottom: 0.01rem solid #e6e6e6;
|
||
font-size: 0.16rem;
|
||
line-height: 0.5rem;
|
||
text-align: center;
|
||
position: relative;
|
||
font-weight: bold;
|
||
.iconguanbi1 {
|
||
font-size: 0.2rem;
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 0.15rem;
|
||
transform: translateY(-50%);
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
.ns-body {
|
||
width: 100%;
|
||
height: calc(100% - 0.5rem);
|
||
padding: 0.15rem 0.15rem 0.2rem 0.15rem;
|
||
box-sizing: border-box;
|
||
.item-type1 {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 0.2rem;
|
||
view {
|
||
font-size: 0.16rem;
|
||
}
|
||
.item-left {
|
||
width: 1.6rem;
|
||
text-align: right;
|
||
padding-right: 0.15rem;
|
||
}
|
||
.item-right {
|
||
width: 2.1rem;
|
||
height: 0.3rem;
|
||
border: 0.01rem solid #e6e6e6;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 0.1rem;
|
||
input {
|
||
font-size: 0.14rem;
|
||
}
|
||
}
|
||
}
|
||
.item-type2 {
|
||
.type2-right {
|
||
// text-align: right;
|
||
}
|
||
.type3-right {
|
||
width: 2.2rem;
|
||
height: 0.32rem;
|
||
line-height: 0.32rem;
|
||
border: 0.01rem solid #e6e6e6;
|
||
padding-left: 0.1rem;
|
||
.uni-input {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.iconxiala {
|
||
font-size: 0.2rem;
|
||
margin-right: 0.15rem;
|
||
}
|
||
}
|
||
}
|
||
.item-type3 {
|
||
margin-top: 0.2rem;
|
||
view {
|
||
font-size: 0.16rem;
|
||
float: left;
|
||
}
|
||
.item-left {
|
||
width: 1.6rem;
|
||
text-align: right;
|
||
padding-right: 0.15rem;
|
||
}
|
||
.item-right {
|
||
width: 2.1rem;
|
||
height: 1rem;
|
||
padding: 0.1rem;
|
||
border: 0.01rem solid #e6e6e6;
|
||
.textarea {
|
||
width: 100%;
|
||
height: 100%;
|
||
font-size: 0.14rem;
|
||
}
|
||
}
|
||
}
|
||
.item-type3:after {
|
||
content: '';
|
||
height: 0;
|
||
display: block;
|
||
clear: both;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.item-type4 {
|
||
.type2-right {
|
||
text-align: left;
|
||
width: 2.2rem;
|
||
height: 0.3rem;
|
||
/deep/ .uni-date {
|
||
height: 100% !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-btn {
|
||
width: 100%;
|
||
padding-top: 0.4rem;
|
||
.btn {
|
||
float: right;
|
||
}
|
||
.save {
|
||
margin-right: 0.1rem;
|
||
}
|
||
}
|
||
.bottom-btn:after {
|
||
content: '';
|
||
height: 0;
|
||
display: block;
|
||
clear: both;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
/deep/ .uni-date-editor {
|
||
height: 100% !important;
|
||
}
|
||
/deep/ .uni-date-editor--x {
|
||
height: 100% !important;
|
||
}
|
||
/deep/ .uni-date-single {
|
||
height: 100% !important;
|
||
}
|
||
/deep/ .uni-date-editor--x .uni-date__icon-clear {
|
||
top: -0.03rem;
|
||
}
|
||
</style>
|