You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
355 lines
10 KiB
355 lines
10 KiB
<!-- 底部菜单--库存--新增商品 -->
|
|
<template>
|
|
<view>
|
|
<view class="formBox">
|
|
<uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="85px">
|
|
<uni-forms-item label="商品名称" name="productName" required>
|
|
<uni-easyinput type="text" v-model="formData.productName" placeholder="请输入商品名称" trim="all" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="商品图片" name="productPicture">
|
|
<view v-if="formData.productPicture !=''">
|
|
<img :src="formData.productPicture" alt="" class="upload-img">
|
|
</view>
|
|
<u-upload :fileList="formData.productPicture" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
|
:maxCount="1"></u-upload>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="货号" name="productSn" required>
|
|
<uni-easyinput type="text" v-model="formData.productSn" @blur="getSnIsRepeat" placeholder="请输入货号" trim="all" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="商品条码" name="barcode">
|
|
<uni-easyinput type="text" v-model="formData.barcode" placeholder="可以扫码商品条码添加" trim="all" />
|
|
<u-icon name="camera" size="36" @tap.stop='scanCodeAdd'></u-icon>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="批发价" name="wholesalePrice" required>
|
|
<uni-easyinput type="digit" v-model="formData.wholesalePrice" placeholder="请输入批发价" trim="all" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="市场价" name="price" required>
|
|
<uni-easyinput type="digit" v-model="formData.price" placeholder="请输入零售价" trim="all" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="分类" name="categoryId" required v-if="dataList == ''">
|
|
<!-- <uni-data-select class="uni-data-select" :localdata="categoryList" v-model="formData.categoryId"
|
|
placeholder="请选择分类" @change="categoryChange(formData.categoryId)"></uni-data-select> -->
|
|
<view class="content-list">
|
|
<view class="list-val">
|
|
<input type="text" placeholder="请选择分类" disabled :value="typeItem.categoryName"
|
|
style="border-bottom: 1px solid #fff;text-align: center;"
|
|
@tap="goGategoryLow">
|
|
<uni-icons type="right" size="16"
|
|
style="margin-left: 40rpx;line-height: 70rpx;"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="尾货预警" name="salesWeek">
|
|
<!-- <uni-easyinput type="digit" v-model="formData.salesWeek" placeholder="请输入零售价" trim="all" /> -->
|
|
<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.salesWeek" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="库存预警" name="tailWarn">
|
|
<uni-easyinput type="digit" v-model="formData.tailWarn" placeholder="请设置库存预警最低件数" trim="all" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="货品简介" name="productIntro">
|
|
<uni-easyinput type="textarea" autoHeight v-model="formData.productIntro" placeholder="请输入货品简介"
|
|
trim="all" />
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
<view v-if="type == 'edit'" style="display: flex;">
|
|
<button @tap.stop="submit()" style="width: 95%;">保存</button>
|
|
</view>
|
|
<view v-else>
|
|
<button @tap.stop="submit()">保存</button>
|
|
</view>
|
|
</view>
|
|
<!-- <u-modal v-model="show" :content="content"></u-modal> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
fileList1: [],
|
|
formData: {
|
|
productName: '',
|
|
price: '',
|
|
productSn: '',
|
|
wholesalePrice: '',
|
|
productPicture: '',
|
|
productIntro: '',
|
|
categoryId: '',
|
|
salesWeek: '',
|
|
tailWarn: '',
|
|
barcode:''
|
|
},
|
|
categoryList: [],
|
|
productId:'',
|
|
arrtList: [],
|
|
typeItem:{},
|
|
arrtChange: [],
|
|
categoryId:'',
|
|
dataList:[],
|
|
type:'add',
|
|
rules: {
|
|
categoryId: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请选择商品分类',
|
|
}, ],
|
|
},
|
|
price: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请填写市场价',
|
|
}, ],
|
|
},
|
|
wholesalePrice: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请填写批发价',
|
|
}, ],
|
|
},
|
|
productSn: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请填写货号',
|
|
}, ],
|
|
},
|
|
productName: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请填写商品名称',
|
|
}, ],
|
|
}
|
|
// tailWarn: {
|
|
// rules: [{
|
|
// required: true,
|
|
// errorMessage: '请填写库存预警天数',
|
|
// }, ],
|
|
// },
|
|
// salesWeek: {
|
|
// rules: [{
|
|
// required: true,
|
|
// errorMessage: '请选择尾货预警天数',
|
|
// }, ],
|
|
// }
|
|
}
|
|
}
|
|
},
|
|
onShow(){
|
|
let that = this;
|
|
this.typeItem = JSON.parse(JSON.stringify(this.typeItem)) || ''
|
|
if(this.typeItem){
|
|
this.formData.categoryId = this.typeItem.id
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
if(option.dataList){
|
|
this.type = 'edit'
|
|
this.dataList = JSON.parse(option.dataList)
|
|
this.formData.productName = this.dataList.productName
|
|
this.formData.barcode = this.dataList.barcode
|
|
this.formData.price = this.dataList.price
|
|
this.formData.productSn = this.dataList.productSn
|
|
this.formData.wholesalePrice = this.dataList.wholesalePrice
|
|
this.formData.productPicture = this.dataList.productPicture
|
|
this.formData.productIntro = this.dataList.productIntro
|
|
this.formData.categoryId = this.dataList.categoryId
|
|
this.formData.salesWeek = this.dataList.salesWeek
|
|
this.formData.tailWarn = this.dataList.tailWarn
|
|
}
|
|
},
|
|
methods: {
|
|
// 删除图片
|
|
deletePic(event) {
|
|
this[`fileList${event.name}`].splice(event.index, 1)
|
|
},
|
|
// 新增图片
|
|
async afterRead(event) {
|
|
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
let lists = [].concat(event.file)
|
|
if (this.formData.productPicture == undefined) this.formData.productPicture = [];
|
|
let fileListLen = this[`fileList${event.name}`].length
|
|
|
|
lists.map((item) => {
|
|
this[`fileList${event.name}`].push({
|
|
...item,
|
|
status: 'uploading',
|
|
message: '上传中'
|
|
})
|
|
})
|
|
|
|
for (let i = 0; i < lists.length; i++) {
|
|
const result = await this.uploadFilePromise(lists[i].url)
|
|
let item = this[`fileList${event.name}`][fileListLen]
|
|
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
|
status: 'success',
|
|
message: '',
|
|
url: result
|
|
}))
|
|
fileListLen++
|
|
}
|
|
},
|
|
uploadFilePromise(url) {
|
|
|
|
return new Promise((resolve, reject) => {
|
|
let a = uni.uploadFile({
|
|
url: 'https://dev.xenjoyou.com/hiver/upload/file',
|
|
filePath: url,
|
|
name: 'file',
|
|
header: {
|
|
"content-type": "multipart/form-data",
|
|
'accessToken': this.tui.getToken()
|
|
},
|
|
formData: {},
|
|
success: (uploadFileRes) => {
|
|
|
|
let path = JSON.parse(uploadFileRes.data)
|
|
//后端返回的地址，存入图片地址
|
|
this.formData.productPicture = path.result
|
|
}
|
|
});
|
|
})
|
|
},
|
|
categoryChange(e) {
|
|
this.categoryId = e
|
|
},
|
|
//货号是否重复
|
|
getSnIsRepeat(){
|
|
this.tui.request('/app/product/getByProductSn', "post", {
|
|
productSn:this.formData.productSn
|
|
}, false, true).then((res1) => {
|
|
if (res1.code == 200) {
|
|
if(res1.result != ''){
|
|
this.tui.toast('当前货号已被商品：“'+res1.result[0].productName+'”占用，请重新输入')
|
|
this.formData.productSn = ''
|
|
}
|
|
|
|
}
|
|
})
|
|
},
|
|
// 触发提交表单
|
|
submit() {
|
|
let that = this;
|
|
let url = ''
|
|
this.$refs.form.validate().then(res => {
|
|
if(that.dataList !=''){
|
|
url = '/app/product/edit'
|
|
res.id = that.dataList.id
|
|
}else{
|
|
url = '/app/product/save'
|
|
}
|
|
if(res.productPicture == ''){
|
|
res.productPicture = ''
|
|
}
|
|
that.tui.request(url, "post", res, false, false).then((res1) => {
|
|
if (res1.code == 200) {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: "添加失败",
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
//跳转分类页
|
|
goGategoryLow() {
|
|
uni.navigateTo({
|
|
url: '/package1/inventory/gategory'
|
|
})
|
|
},
|
|
scanCodeAdd() {
|
|
let that = this;
|
|
uni.scanCode({
|
|
scanType: ['barCode'],
|
|
success: (res) => {
|
|
console.log(res)
|
|
that.tui.request('/app/product/getByBarcode', "post", {
|
|
barcode:res.result
|
|
}, false, true).then((res1) => {
|
|
if (res1.code == 200) {
|
|
if(res1.result != ''){
|
|
that.tui.toast('当前条码已被商品：“'+res1.result[0].productName+'”占用，请重新输入')
|
|
}else{
|
|
that.formData.barcode = res.result;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
fail: (res) => {
|
|
uni.showToast({
|
|
title: '扫描失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.list-val {
|
|
width: 486rpx;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
}
|
|
|
|
.list-val input {
|
|
width: 400rpx;
|
|
height: 70rpx;
|
|
display: inline-block;
|
|
line-height: 70rpx;
|
|
text-align: left !important;
|
|
padding-left: 20rpx;
|
|
float: left;
|
|
font-size: 25rpx;
|
|
}
|
|
.formBox {
|
|
margin: 20rpx;
|
|
padding: 20rpx 26rpx;
|
|
border-radius: 14rpx;
|
|
box-shadow: 0px 1px 10px 2px #e2e2e2;
|
|
background-color: #fff;
|
|
|
|
.uni-data-select {
|
|
width: 100%;
|
|
}
|
|
|
|
.attrs {
|
|
text {
|
|
display: inline-block;
|
|
border: 1px solid $u-primary;
|
|
padding: 7px 20rpx;
|
|
margin: 20rpx;
|
|
background-color: #fff;
|
|
color: $u-primary;
|
|
}
|
|
|
|
.checkedText {
|
|
background-color: $u-primary;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.upload-img{
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
}
|
|
.content-list {
|
|
height: 70rpx;
|
|
border: 1px solid #eee;
|
|
}
|
|
button{
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
font-size: 36rpx;
|
|
color: #fff;
|
|
background: #5fd9ee;
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|