You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
530 lines
14 KiB
Vue
530 lines
14 KiB
Vue
<template>
|
|
<view class="main-box">
|
|
<u-navbar
|
|
:placeholder="true"
|
|
:title="title"
|
|
:autoBack="true"
|
|
leftIconColor="#fff"
|
|
bgColor="#000000">
|
|
</u-navbar>
|
|
<view class="barcode-box">
|
|
<tkiBarcode
|
|
cid="ean13"
|
|
:loadMake="false"
|
|
format="ean13"
|
|
:val="model.goodsInfo.barcode"
|
|
ref="ean13"
|
|
@result="ean13" />
|
|
<view style="color: #fff">{{ model.goodsInfo.barcode }}</view>
|
|
</view>
|
|
<view class="good-img-box">
|
|
<view
|
|
v-if="!model.goodsInfo.image"
|
|
class="no-pic"
|
|
>商品图片投放位置</view
|
|
>
|
|
<u--image
|
|
class="goods-img"
|
|
width="350rpx"
|
|
height="350rpx"
|
|
v-else
|
|
:src="model.goodsInfo.image"></u--image>
|
|
<u-button
|
|
v-if="actionType !== 'detail'"
|
|
class="add-btn"
|
|
@click="addImg"
|
|
>{{ actionType == "add" ? "添加" : "更换" }}</u-button
|
|
>
|
|
</view>
|
|
<u--form
|
|
labelPosition="left"
|
|
:model="model"
|
|
:rules="rules"
|
|
labelWidth="115"
|
|
ref="uForm">
|
|
<u-form-item
|
|
label="商品名称"
|
|
prop="goodsInfo.title"
|
|
borderBottom
|
|
:required="true"
|
|
ref="title">
|
|
<u--input
|
|
:disabled="actionType === 'detail'"
|
|
v-model="model.goodsInfo.title"></u--input>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="库存数量"
|
|
prop="goodsInfo.stockSize"
|
|
borderBottom
|
|
ref="stockSize">
|
|
<u--input
|
|
type="number"
|
|
:disabled="actionType === 'detail' || actionType === 'edit'"
|
|
v-model="model.goodsInfo.stockSize"></u--input>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="进价"
|
|
prop="goodsInfo.inPrice"
|
|
borderBottom
|
|
:required="true"
|
|
ref="inPrice">
|
|
<u--input
|
|
type="number"
|
|
:disabled="actionType === 'detail' || actionType === 'edit'"
|
|
v-model="model.goodsInfo.inPrice"></u--input>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="规格"
|
|
prop="goodsInfo.standard"
|
|
borderBottom
|
|
:required="true"
|
|
ref="standard">
|
|
<u--input
|
|
:disabled="actionType === 'detail' || actionType === 'edit'"
|
|
v-model="model.goodsInfo.standard"></u--input>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="售价"
|
|
prop="goodsInfo.outPrice"
|
|
borderBottom
|
|
:required="true"
|
|
ref="outPrice">
|
|
<u--input
|
|
type="number"
|
|
:disabled="actionType === 'detail' || actionType === 'edit'"
|
|
v-model="model.goodsInfo.outPrice"></u--input>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="信息入库日期"
|
|
prop="goodsInfo.createdAt"
|
|
borderBottom
|
|
ref="createdAt">
|
|
<u--input
|
|
disabled
|
|
v-model="model.goodsInfo.createdAt">
|
|
</u--input>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="库存更新日期"
|
|
prop="goodsInfo.updatedAt"
|
|
borderBottom
|
|
ref="updatedAt">
|
|
<u--input
|
|
disabled
|
|
v-model="model.goodsInfo.updatedAt"></u--input>
|
|
</u-form-item>
|
|
</u--form>
|
|
<u-line></u-line>
|
|
<view
|
|
class="bottom-btn-box"
|
|
v-if="actionType === 'detail'">
|
|
<u-button
|
|
class="bottom-btn"
|
|
text="增加数量"
|
|
@click="addNum"></u-button>
|
|
<u-button
|
|
class="bottom-btn"
|
|
:disabled="loading"
|
|
style="background-color: #fff; color: #1936c9"
|
|
text="修改"
|
|
@click="goEdit"></u-button>
|
|
</view>
|
|
<view
|
|
class="bottom-btn-box"
|
|
v-else>
|
|
<u-button
|
|
class="bottom-btn"
|
|
:disabled="loading"
|
|
style="background-color: #fff; color: #1936c9"
|
|
text="保存"
|
|
@click="goSave"></u-button>
|
|
</view>
|
|
<u-modal
|
|
:show="showAddNum"
|
|
:title="'增加该商品数量'"
|
|
:closeOnClickOverlay="true"
|
|
@close="showAddNum = false"
|
|
:showConfirmButton="false">
|
|
<u--image
|
|
class="goods-img"
|
|
width="250rpx"
|
|
height="250rpx"
|
|
:src="model.goodsInfo.image"></u--image>
|
|
<u--form
|
|
labelPosition="left"
|
|
:model="model"
|
|
:rules="rules"
|
|
labelWidth="115"
|
|
ref="childForm">
|
|
<u-form-item
|
|
label="商品名称"
|
|
prop="goodsInfo.title"
|
|
borderBottom
|
|
ref="title">
|
|
<u--input
|
|
:disabled="true"
|
|
v-model="model.goodsInfo.title"></u--input>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="目前库存数量"
|
|
prop="goodsInfo.stockSize"
|
|
borderBottom
|
|
ref="stockSize">
|
|
<u--input
|
|
type="number"
|
|
:disabled="true"
|
|
v-model="model.goodsInfo.stockSize"></u--input>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="增加数量"
|
|
prop="goodsInfo.changeStock"
|
|
borderBottom
|
|
ref="changeStock">
|
|
<u--input
|
|
type="number"
|
|
v-model="model.goodsInfo.changeStock"></u--input>
|
|
</u-form-item>
|
|
</u--form>
|
|
<u-button
|
|
class="ok-btn"
|
|
@click="goAddNum"
|
|
size="small">
|
|
增加</u-button
|
|
>
|
|
</u-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tkiBarcode from "@/components/tki-barcode/tki-barcode.vue";
|
|
import moment from "moment";
|
|
export default {
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
actionType: "add",
|
|
title: "商品录入",
|
|
codeVal: "",
|
|
bar: ["ean13"],
|
|
opations: {
|
|
// format: "ENA13", //选择要使用的条形码类型 微信支持的条码类型有 code128\code39\ena13\ean8\upc\itf14\
|
|
width: 3, //设置条之间的宽度
|
|
height: 120, //高度
|
|
// displayValue: true, //是否在条形码下方显示文字
|
|
// text: "FB19A1650-100S",//覆盖显示的文本
|
|
textAlign: "center", //设置文本的水平对齐方式
|
|
textPosition: "bottom", //设置文本的垂直位置
|
|
textMargin: 0, //设置条形码和文本之间的间距
|
|
// fontSize: 24,//设置文本的大小
|
|
fontColor: "#0000ef", //设置文本的颜色
|
|
lineColor: "#fff", //设置条形码的颜色
|
|
background: "transparent", //设置条形码的背景色
|
|
margin: 40, //设置条形码周围的空白边距
|
|
// marginTop: 10,//设置条形码周围的上边距
|
|
// marginBottom: 20,//设置条形码周围的下边距
|
|
// marginLeft: 30,//设置条形码周围的左边距
|
|
// marginRight: 40,//设置条形码周围的右边距
|
|
},
|
|
goodsImg: "",
|
|
model: {
|
|
goodsInfo: {
|
|
title: "",
|
|
stockSize: null,
|
|
inPrice: "",
|
|
standard: "",
|
|
outPrice: "",
|
|
createdAt: "",
|
|
updatedAt: "",
|
|
image: "",
|
|
barcode: "",
|
|
changeStock: null,
|
|
},
|
|
},
|
|
showAddNum: false,
|
|
rules: {
|
|
"goodsInfo.title": {
|
|
type: "string",
|
|
required: true,
|
|
message: "请填写商品名称",
|
|
trigger: ["blur", "change"],
|
|
},
|
|
"goodsInfo.inPrice": {
|
|
type: "string",
|
|
required: true,
|
|
message: "请填写商品进价",
|
|
trigger: ["blur", "change"],
|
|
},
|
|
"goodsInfo.standard": {
|
|
type: "string",
|
|
required: true,
|
|
message: "请填写商品规格",
|
|
trigger: ["blur", "change"],
|
|
},
|
|
"goodsInfo.outPrice": {
|
|
type: "string",
|
|
required: true,
|
|
message: "请填写商品售价",
|
|
trigger: ["blur", "change"],
|
|
},
|
|
},
|
|
};
|
|
},
|
|
components: {
|
|
tkiBarcode,
|
|
},
|
|
onLoad(item) {
|
|
this.actionType = item.actionType;
|
|
this.model.goodsInfo.barcode = item.barcode;
|
|
const currentDate = moment(new Date()).format("YYYY.MM.DD");
|
|
// 如果是新增
|
|
if (this.actionType === "add") {
|
|
this.model.goodsInfo.createdAt = currentDate;
|
|
this.model.goodsInfo.updatedAt = currentDate;
|
|
}
|
|
// 如果是修改
|
|
if (this.actionType === "detail") {
|
|
this.model.goodsInfo = JSON.parse(item.goodsInfo);
|
|
this.title = this.model.goodsInfo.title;
|
|
}
|
|
setTimeout(() => {
|
|
this.$refs[this.bar[0]]._makeCode();
|
|
}, 1000);
|
|
},
|
|
methods: {
|
|
ean13(v) {
|
|
// console.log('code128:', v)
|
|
},
|
|
// 拍摄照片
|
|
addImg() {
|
|
let that = this;
|
|
wx.chooseImage({
|
|
count: 1,
|
|
sizeType: ["original", "compressed"],
|
|
sourceType: ["album", "camera"],
|
|
success: (res) => {
|
|
console.log(res);
|
|
let token = uni.getStorageSync("token");
|
|
// 上传图片
|
|
wx.uploadFile({
|
|
url: "https://stock.szjixun.cn/api/common/upload",
|
|
filePath: res.tempFilePaths[0],
|
|
name: "file",
|
|
header: {
|
|
Authorization: token, // 添加token
|
|
},
|
|
success: (res) => {
|
|
let data = JSON.parse(res.data);
|
|
if (data.code === 200) {
|
|
that.model.goodsInfo.image = data.data.path;
|
|
}
|
|
},
|
|
});
|
|
},
|
|
});
|
|
},
|
|
// 增加数量
|
|
addNum() {
|
|
this.showAddNum = true;
|
|
},
|
|
// 修改
|
|
goEdit() {
|
|
this.actionType = "edit";
|
|
this.model.goodsInfo.updatedAt = moment(new Date()).format("YYYY.MM.DD");
|
|
},
|
|
// 保存
|
|
goSave() {
|
|
this.$refs.uForm
|
|
.validate()
|
|
.then(async () => {
|
|
if (this.actionType === "add") {
|
|
await this.save();
|
|
} else {
|
|
await this.edit();
|
|
}
|
|
})
|
|
.catch((errors) => {
|
|
uni.$u.toast("校验失败");
|
|
});
|
|
},
|
|
// 保存接口
|
|
async save() {
|
|
this.loading = true;
|
|
this.model.goodsInfo.stockSize = parseInt(this.model.goodsInfo.stockSize);
|
|
let res = await this.$api.management.save(this.model.goodsInfo);
|
|
if (res.status == 0) {
|
|
this.loading = false;
|
|
uni.$u.toast("添加成功");
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: "/pages/management/management",
|
|
});
|
|
}, 1000);
|
|
} else {
|
|
this.loading = false;
|
|
uni.$u.toast("添加失败");
|
|
}
|
|
},
|
|
// 修改接口
|
|
async edit() {
|
|
this.loading = true;
|
|
this.model.goodsInfo.stockSize = parseInt(this.model.goodsInfo.stockSize);
|
|
let res = await this.$api.management.update(this.model.goodsInfo);
|
|
if (res.status == 0) {
|
|
this.loading = false;
|
|
uni.$u.toast("修改成功");
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: "/pages/management/management",
|
|
});
|
|
}, 1000);
|
|
} else {
|
|
this.loading = false;
|
|
uni.$u.toast("修改失败");
|
|
}
|
|
},
|
|
goAddNum() {
|
|
this.$refs.childForm
|
|
.validate()
|
|
.then(async () => {
|
|
// 不可以小于0
|
|
if (this.model.goodsInfo.changeStock <= 0) {
|
|
uni.$u.toast("增加数量不可以小于0");
|
|
return;
|
|
}
|
|
let data = {
|
|
ID: this.model.goodsInfo.ID,
|
|
changeStock: parseInt(this.model.goodsInfo.changeStock),
|
|
};
|
|
let res = await this.$api.management.addNum(data);
|
|
if (res.status == 0) {
|
|
uni.$u.toast("增加成功");
|
|
this.showAddNum = false;
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: "/pages/management/management",
|
|
});
|
|
}, 1000);
|
|
} else {
|
|
uni.$u.toast("增加失败");
|
|
}
|
|
})
|
|
.catch((errors) => {
|
|
uni.$u.toast("校验失败");
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #0e1746;
|
|
background-size: auto 100%;
|
|
background-attachment: fixed;
|
|
height: 100vh;
|
|
// overflow: hidden;
|
|
}
|
|
.main-box {
|
|
padding: 36rpx;
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// align-items: center;
|
|
|
|
/deep/ .u-navbar__content__title {
|
|
color: #fff;
|
|
}
|
|
.ok-btn {
|
|
width: 240rpx;
|
|
height: 60rpx;
|
|
border-radius: 30rpx;
|
|
background: #1936c9;
|
|
color: #ffffff;
|
|
margin: 20rpx 20rpx 0 20rpx;
|
|
font-size: 30rpx;
|
|
border: 0;
|
|
}
|
|
/deep/ .u-form {
|
|
margin-top: 20rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx 40rpx;
|
|
}
|
|
/deep/ .u-input {
|
|
background-color: #dcdee8;
|
|
height: 24rpx;
|
|
}
|
|
/deep/ .u-form-item__body__left__content {
|
|
border-right: 1px solid #ebebeb;
|
|
padding-right: 40rpx;
|
|
}
|
|
/deep/ .u-form-item__body__right {
|
|
padding-left: 30rpx;
|
|
}
|
|
/deep/ .u-form-item__body__left__content__required {
|
|
color: #1936c9;
|
|
}
|
|
/deep/ .u-modal__title {
|
|
color: #1936c9;
|
|
}
|
|
/deep/ .u-modal__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
.barcode-box {
|
|
display: flex;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 20rpx;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
image {
|
|
width: 438rpx;
|
|
height: 240rpx;
|
|
}
|
|
}
|
|
.good-img-box {
|
|
display: flex;
|
|
width: 100%;
|
|
margin-top: 60rpx;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.no-pic {
|
|
width: 350rpx;
|
|
height: 350rpx;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
background-color: #1936c9;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.add-btn {
|
|
margin-top: 20rpx;
|
|
width: 156rpx;
|
|
height: 50rpx;
|
|
background-color: #fff;
|
|
color: #1936c9;
|
|
border-radius: 30rpx;
|
|
}
|
|
}
|
|
|
|
.bottom-btn-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 36rpx 10rpx;
|
|
.bottom-btn {
|
|
width: 300rpx;
|
|
height: 60rpx;
|
|
border-radius: 40rpx;
|
|
background-color: #1936c9;
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
}
|
|
</style>
|