358 lines
11 KiB
Vue
358 lines
11 KiB
Vue
<template>
|
||
<section class="add_order">
|
||
<ai-detail>
|
||
<template slot="title">
|
||
<ai-title :title="title" isShowBack :isShowBottomBorder="true" @onBackClick="$emit('goBack')"></ai-title>
|
||
</template>
|
||
<template slot="content" v-if="!isEdit">
|
||
<ai-card title="商品信息">
|
||
<template #content>
|
||
<div class="form_div">
|
||
<el-form
|
||
ref="rules"
|
||
:model="forms"
|
||
:rules="formRules"
|
||
size="small"
|
||
label-suffix="："
|
||
label-width="100px">
|
||
<el-form-item label="店铺名称" prop="shopId">
|
||
<el-select
|
||
v-model="forms.shopId"
|
||
placeholder="请选择..."
|
||
clearable>
|
||
<el-option
|
||
v-for="(item, i) in shopList"
|
||
:key="i"
|
||
:label="item.shopName"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="商品类型" prop="merchandiseType">
|
||
<el-select
|
||
v-model="forms.merchandiseType"
|
||
placeholder="请选择..."
|
||
clearable>
|
||
<el-option
|
||
v-for="(item, i) in dict.getDict('integralMerchandiseType')"
|
||
:key="i"
|
||
:label="item.dictName"
|
||
:value="item.dictValue">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="商品名称" prop="merchandiseName">
|
||
<el-input
|
||
v-model="forms.merchandiseName"
|
||
placeholder="请输入..."
|
||
maxlength="100"
|
||
show-word-limit>
|
||
</el-input>
|
||
</el-form-item>
|
||
<div class="above">
|
||
<div class="left">
|
||
<el-form-item label="单价" prop="costIntegral">
|
||
<el-input v-model="forms.costIntegral" placeholder="请输入..."/>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="right">
|
||
<el-form-item label="库存" prop="inventoryNumber">
|
||
<el-input
|
||
v-model="forms.inventoryNumber"
|
||
placeholder="请输入...">
|
||
</el-input>
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
<el-form-item label="状态" prop="status">
|
||
<el-radio-group v-model="forms.status">
|
||
<el-radio label="1">上架中</el-radio>
|
||
<el-radio label="0">已下架</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="商品图片" prop="fileList" ref="fileList">
|
||
<div class="upload">
|
||
<ai-uploader
|
||
:instance="instance"
|
||
@change="changeFile"
|
||
v-model="forms.fileList"
|
||
:limit="9">
|
||
</ai-uploader>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="商品详情" prop="description">
|
||
<el-input
|
||
v-model="forms.description"
|
||
type="textarea"
|
||
:rows="5"
|
||
maxlength="100"
|
||
show-word-limit
|
||
placeholder="请输入...">
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</template>
|
||
</ai-card>
|
||
</template>
|
||
<template slot="content" v-if="isEdit">
|
||
<ai-card title="商品信息">
|
||
<template #content>
|
||
<div class="info">
|
||
<ai-wrapper label-width="70px" :columnsNumber="1">
|
||
<ai-info-item label="店铺名称"><span>{{ forms.shopName }}</span></ai-info-item>
|
||
<ai-info-item label="商品类型"
|
||
><span>{{
|
||
dict.getLabel("integralMerchandiseType", forms.merchandiseType)
|
||
}}</span></ai-info-item
|
||
>
|
||
<ai-info-item label="商品名称"
|
||
><span>{{ forms.merchandiseName }}</span></ai-info-item
|
||
>
|
||
</ai-wrapper>
|
||
<ai-wrapper label-width="70px" :columnsNumber="2">
|
||
<ai-info-item label="单价"><span>{{ forms.costIntegral + "积分" }}</span></ai-info-item>
|
||
<ai-info-item label="库存"
|
||
><span>{{ forms.inventoryNumber }}</span></ai-info-item
|
||
>
|
||
<ai-info-item label="销量"
|
||
><span>{{ forms.saleNumber || "0" }}</span></ai-info-item
|
||
>
|
||
</ai-wrapper>
|
||
<ai-wrapper label-width="70px" :columnsNumber="1">
|
||
<ai-info-item label="状态"
|
||
><span
|
||
:style="{
|
||
color: dict.getColor(
|
||
'integralMerchandiseStatus',
|
||
forms.status
|
||
),
|
||
}"
|
||
>{{
|
||
dict.getLabel("integralMerchandiseStatus", forms.status)
|
||
}}</span
|
||
></ai-info-item
|
||
>
|
||
<ai-info-item label="商品图片">
|
||
<ai-uploader
|
||
:disabled="true"
|
||
:instance="instance"
|
||
v-model="forms.fileList"
|
||
:limit="9"
|
||
></ai-uploader>
|
||
</ai-info-item>
|
||
<ai-info-item label="商品详情"
|
||
><span>{{ forms.description }}</span></ai-info-item
|
||
>
|
||
</ai-wrapper>
|
||
</div>
|
||
</template>
|
||
</ai-card>
|
||
</template>
|
||
<template slot="footer" v-if="!isEdit">
|
||
<el-button @click="$emit('goBack')" style="width: 120px">取消</el-button>
|
||
<el-button type="primary" @click="save('rules')" style="width: 120px">提 交</el-button>
|
||
</template>
|
||
</ai-detail>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapState} from "vuex";
|
||
|
||
export default {
|
||
name: "addGoods",
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
permissions: Function,
|
||
info: Object,
|
||
areaId: String,
|
||
},
|
||
data() {
|
||
return {
|
||
forms: {
|
||
shopId: "",
|
||
merchandiseType: "",
|
||
merchandiseName: "",
|
||
costIntegral: "",
|
||
inventoryNumber: "",
|
||
status: "",
|
||
fileList: [],
|
||
description: "",
|
||
},
|
||
shopList: [],
|
||
title: "添加商品",
|
||
showEdit: false,
|
||
isEdit: false,
|
||
detailInfo: {},
|
||
};
|
||
},
|
||
computed: {
|
||
...mapState(["user"]),
|
||
formRules() {
|
||
var integral = (rule, value, callback) => {
|
||
if (value) {
|
||
if (/^[1-9]\d*$/.test(value)) {
|
||
callback();
|
||
} else {
|
||
callback(new Error("请输入正整数"));
|
||
}
|
||
} else {
|
||
callback(new Error("请输入单价"));
|
||
}
|
||
};
|
||
return {
|
||
shopId: [{required: true, message: "请选择店铺", trigger: "change"}],
|
||
merchandiseType: [
|
||
{required: true, message: "请选择商品类型", trigger: "change"},
|
||
],
|
||
merchandiseName: [
|
||
{required: true, message: "请输入商品名称", trigger: "blur"},
|
||
],
|
||
inventoryNumber: [
|
||
{required: true, validator: integral, trigger: "blur"},
|
||
],
|
||
costIntegral: [
|
||
{required: true, pattern: /^\d*[.\d]\d?$/, message: "请输入正数,最多保留一位小数", trigger: "blur"},
|
||
],
|
||
status: [{required: true, message: "请选择状态", trigger: "change"}],
|
||
fileList: [
|
||
{required: true, message: "请上传商品图片", trigger: "change"},
|
||
],
|
||
};
|
||
},
|
||
},
|
||
created() {
|
||
let l = Object.keys(this.info).length;
|
||
if (this.info.isAdd) {
|
||
this.showEdit = false;
|
||
if (l > 1) {
|
||
this.title = "修改商品";
|
||
this.getShopList().then(() => {
|
||
this.searchDetail(this.info.id);
|
||
});
|
||
} else {
|
||
this.title = "添加商品";
|
||
this.getShopList();
|
||
}
|
||
} else {
|
||
this.title = "商品详情";
|
||
this.isEdit = true;
|
||
this.showEdit = true;
|
||
this.getShopList().then(() => {
|
||
this.searchDetail(this.info.id);
|
||
});
|
||
}
|
||
},
|
||
methods: {
|
||
getShopList() {
|
||
return new Promise((reslove) => {
|
||
this.instance
|
||
.post(`/app/appvillagerintegralshop/listForOperator`, null, {
|
||
params: {
|
||
size: 100000,
|
||
areaId: this.areaId,
|
||
},
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
this.shopList = res.data.records;
|
||
reslove();
|
||
}
|
||
});
|
||
});
|
||
},
|
||
changeFile() {
|
||
this.$refs.fileList.$emit("el.form.change");
|
||
},
|
||
searchDetail(id) {
|
||
this.instance
|
||
.post(`/app/appvillagerintegralmerchandise/queryDetailById`, null, {
|
||
params: {
|
||
id,
|
||
},
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
this.forms = {...res.data};
|
||
let i = this.shopList.findIndex(
|
||
(item) => item.id == this.forms.shopId
|
||
);
|
||
if (i > -1) {
|
||
this.forms.shopName = this.shopList[i].shopName;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
edit() {
|
||
this.isEdit = false;
|
||
},
|
||
save(formName, type) {
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
this.instance
|
||
.post(
|
||
`/app/appvillagerintegralmerchandise/addOrUpdate`,
|
||
{
|
||
...this.forms,
|
||
areaId: this.user.info.areaId,
|
||
},
|
||
null
|
||
)
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
this.$message.success("提交成功");
|
||
if (type == "detail") {
|
||
this.isEdit = true;
|
||
} else {
|
||
this.$emit("goBack");
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.add_order {
|
||
height: 100%;
|
||
|
||
.form_div {
|
||
padding: 16px 0;
|
||
}
|
||
|
||
.above {
|
||
overflow: hidden;
|
||
width: 100%;
|
||
|
||
.left {
|
||
width: 50%;
|
||
float: left;
|
||
}
|
||
|
||
.right {
|
||
width: 50%;
|
||
float: right;
|
||
}
|
||
}
|
||
|
||
.iconEdit,
|
||
.Edit {
|
||
color: #5088ff;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
padding-left: 8px;
|
||
}
|
||
|
||
.info {
|
||
padding: 16px 0;
|
||
}
|
||
}
|
||
</style>
|