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.
524 lines
14 KiB
524 lines
14 KiB
<template>
|
|
<div>
|
|
|
|
<div class="tab-header webtop">
|
|
<!-- 标题 -->
|
|
<div>礼包信息</div>
|
|
<!-- start 添加修改按钮 -->
|
|
<div>
|
|
<el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button>
|
|
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
|
|
</div>
|
|
<!-- end 添加修改按钮 -->
|
|
<!-- end 详情按钮 -->
|
|
</div>
|
|
|
|
<div class="listconadd">
|
|
|
|
<el-form ref="dataForm" :model="formobj" label-position="top" label-width="190px" class="formadd">
|
|
<div class="title" style="display: flex;align-items: center;justify-content: space-between;height:40px">
|
|
<div>主体信息</div>
|
|
</div>
|
|
<el-row>
|
|
<el-col :span="4" class="trightb">
|
|
<el-form-item class="trightb_item">
|
|
<span slot="label">礼包名称</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item class="trightb_item">
|
|
<el-input v-model="formobj.name" placeholder="" class="addinputw" style="width:100%"
|
|
clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="4" class="trightb">
|
|
<el-form-item class="trightb_item">
|
|
<!-- <span slot="label">礼包金额</span> -->
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item class="trightb_item">
|
|
<!-- <span slot="label">{{formobj.price}}</span> -->
|
|
<!-- <el-input v-model="formobj.boundaryPrice" placeholder="" class="addinputw"
|
|
style="width:100%" clearable
|
|
oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" /> -->
|
|
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="4" class="trightb">
|
|
<el-form-item class="trightb_item">
|
|
<span slot="label">礼包总价格</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item class="trightb_item">
|
|
<span slot="label">{{formobj.price}}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="4" class="trightb">
|
|
<el-form-item class="trightb_item">
|
|
<span slot="label">优惠后价格</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item class="trightb_item">
|
|
<!-- <span slot="label">{{formobj.price}}</span> -->
|
|
<el-input v-model="formobj.preferentialPrice" placeholder="" class="addinputw"
|
|
style="width:100%" clearable
|
|
oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" />
|
|
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="4" class="trightb">
|
|
<el-form-item class="trightb_item">
|
|
<span slot="label">起始日期</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item class="trightb_item">
|
|
<el-date-picker v-model="formobj.dateStart" type="date" style="width:100%"
|
|
value-format="yyyy-MM-dd" placeholder="选择日期">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="4" class="trightb">
|
|
<el-form-item class="trightb_item">
|
|
<span slot="label">终止日期</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item class="trightb_item">
|
|
<el-date-picker v-model="formobj.dateEnd" type="date" style="width:100%"
|
|
value-format="yyyy-MM-dd" placeholder="选择日期">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-col :span="4" class="trightb">
|
|
<el-form-item class="trightb_item">
|
|
<span slot="label">备注信息</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item class="trightb_item">
|
|
<el-input v-model="formobj.remarks" placeholder="" class="addinputw" style="width:100%"
|
|
type="textarea" :rows="8" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="4" class="trightb">
|
|
<el-form-item class="trightb_item">
|
|
<span slot="label">礼包图片</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item class="trightb_item">
|
|
<upload style="margin-top: 20px;margin-bottom: 20px;" class="addinputw" ref="uploadImg2"
|
|
v-model="imgList" :limit="1" @change="backData" bucket="map"
|
|
:upload-data="{ type: '0001' }" :class="{ hide: hideUploadBtn }"></upload>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
|
|
<el-collapse v-model="activeNames" style="margin-top: 20px;">
|
|
<el-collapse-item name="1">
|
|
<template slot="title">
|
|
商品列表<span class="span" @click.stop="add()">添加</span>
|
|
</template>
|
|
<el-table v-loading="listLoading" :data="formobj.goods" border style="width: 100%;"
|
|
:row-style="{height: '40px'}">
|
|
<!-- <el-table-column type="selection" align="center" width="50"/> -->
|
|
<el-table-column label="序号" type="index" width="80" :index="indexMethod" align="center" />
|
|
<el-table-column label="操作" wid align="center" width="150">
|
|
<template slot-scope="scope">
|
|
<el-button type="primary" size="mini"
|
|
@click="doGoodsDel(scope.row.goodsSid)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="商品名称" prop="name" align="center" />
|
|
<el-table-column label="份数" prop="goodsNumber" align="center" />
|
|
<el-table-column label="价格(元/斤)" prop="price" align="center" />
|
|
<el-table-column label="商品单位" prop="specificationUnit" align="center" />
|
|
<el-table-column label="规格(斤份)" prop="weight" align="center" />
|
|
<el-table-column label="小计" prop="subtotal" align="center" />
|
|
</el-table>
|
|
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
|
|
|
|
</el-form>
|
|
|
|
</div>
|
|
|
|
<el-dialog title="添加商品" :visible.sync="editDialog" width="30%" @close='handleCancle'>
|
|
<table class="e-table" cellspacing="0">
|
|
<tr>
|
|
<td>商品名称</td>
|
|
<td> <!-- @change="changeParentSid" -->
|
|
<el-select v-model="GiftBagGood.goodsSid" filterable clearable placeholder="请选择"
|
|
style="width:100%" @change="goodsSelect">
|
|
<el-option v-for="item in goods" :key="item.sid" :label="item.name" :value="item.sid">
|
|
</el-option>
|
|
</el-select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>份数</td>
|
|
<td>
|
|
<el-input v-model="GiftBagGood.goodsNumber" style="width:100%"
|
|
oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" @input="input"></el-input>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>价格(元/斤)</td>
|
|
<td>
|
|
<!-- <span style="width:100%">{{GiftBagGood.price}}</span> -->
|
|
<el-input v-model="GiftBagGood.price" style="width:100%"
|
|
oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"></el-input>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>商品单位</td>
|
|
<td>
|
|
<span style="width:100%">{{GiftBagGood.specificationUnit}}</span>
|
|
<!-- <el-input v-model="GiftBagGood.unitName" style="width:100%"></el-input> -->
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>规格(斤份)</td> <!-- // 一份多少斤 -->
|
|
<td>
|
|
<span style="width:100%">{{GiftBagGood.weight}}</span>
|
|
<!-- <el-input v-model="GiftBagGood.unitName" style="width:100%"></el-input> -->
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>小计</td> <!-- // 份数*份单价 -->
|
|
<td>
|
|
<span style="width:100%">{{GiftBagGood.subtotal}}</span>
|
|
<!-- <el-input v-model="GiftBagGood.unitName" style="width:100%"></el-input> -->
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div style="margin-top: 20px; text-align: center;">
|
|
<el-button type="primary" @click="save()">保 存</el-button>
|
|
<el-button @click="handleCancle">关 闭</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import req from '@/api/marketingCard/marketingCard.js'
|
|
import upload from '@/components/uploadFile/upload_yanchejianchaTuBiao.vue'
|
|
|
|
export default {
|
|
components: {
|
|
upload
|
|
},
|
|
data() {
|
|
return {
|
|
editDialog: false,
|
|
listLoading: false,
|
|
activeNames: ['1'],
|
|
imgList: [],
|
|
submitdisabled: false,
|
|
formobj: {
|
|
sid: "",
|
|
name: '',
|
|
dateStart: '',
|
|
dateEnd: '',
|
|
preferentialPrice: "",
|
|
boundary: "",
|
|
remarks: "",
|
|
iconUrl: "",
|
|
goods: []
|
|
},
|
|
GiftBagGood: {
|
|
goodsSid: "",
|
|
goodsNumber: "",
|
|
name: "",
|
|
unitName: "",
|
|
price: "",
|
|
specificationUnit: "",
|
|
weight: "",
|
|
subtotal: "0.00"
|
|
|
|
},
|
|
goods: [],
|
|
hideUploadBtn: false,
|
|
}
|
|
},
|
|
created() {
|
|
this.getGoodList()
|
|
},
|
|
methods: {
|
|
doGoodsDel(sid) {
|
|
console.log("doGoodsDel》》》》", sid)
|
|
|
|
this.$confirm("是否确定删除此商品？", '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
const index = this.formobj.goods.findIndex((item) => item.goodsSid === sid)
|
|
console.log("index》》》》", index)
|
|
this.formobj.goods.splice(index, 1)
|
|
|
|
this.countPrice()
|
|
})
|
|
},
|
|
save() {
|
|
console.log("save》》》》", this.GiftBagGood)
|
|
if (!this.GiftBagGood.goodsSid) {
|
|
this.$message({
|
|
showClose: true,
|
|
type: 'warning',
|
|
message: '请选择商品'
|
|
})
|
|
return
|
|
}
|
|
|
|
|
|
if (!this.GiftBagGood.goodsNumber) {
|
|
this.$message({
|
|
showClose: true,
|
|
type: 'warning',
|
|
message: '请输入数量'
|
|
})
|
|
return
|
|
}
|
|
|
|
|
|
const choose = this.formobj.goods.filter((item) => item.goodsSid == this.GiftBagGood.goodsSid)
|
|
console.log(">>>>>>>>>addCangku", choose)
|
|
if (choose.length == 0) {
|
|
this.formobj.goods.push(this.GiftBagGood)
|
|
|
|
this.GiftBagGood = {
|
|
goodsSid: "",
|
|
goodsNumber: "",
|
|
name: "",
|
|
unitName: "",
|
|
price: "",
|
|
specificationUnit: "",
|
|
weight: "",
|
|
subtotal: "0.00"
|
|
|
|
}
|
|
this.editDialog = false
|
|
this.countPrice()
|
|
|
|
} else {
|
|
this.$message({
|
|
showClose: true,
|
|
type: 'error',
|
|
message: "请勿重复添加商品!"
|
|
})
|
|
return
|
|
}
|
|
|
|
|
|
},
|
|
|
|
countPrice() {
|
|
|
|
let num = 0
|
|
|
|
for (var i = 0; i < this.formobj.goods.length; i++) {
|
|
var item = this.formobj.goods[i]
|
|
|
|
num += Number(item.subtotal)
|
|
|
|
}
|
|
|
|
console.log("num", num);
|
|
|
|
this.formobj.price = Number(num).toFixed(2)
|
|
this.formobj.preferentialPrice = Number(num).toFixed(2)
|
|
|
|
},
|
|
|
|
handleCancle() {
|
|
this.GiftBagGood = {
|
|
goodsSid: "",
|
|
goodsNumber: "",
|
|
name: "",
|
|
unitName: "",
|
|
price: "",
|
|
specificationUnit: "",
|
|
weight: "",
|
|
subtotal: "0.00"
|
|
|
|
}
|
|
this.editDialog = false
|
|
},
|
|
input(val) {
|
|
console.log("input》》》》", val)
|
|
this.GiftBagGood.goodsNumber = val
|
|
|
|
this.GiftBagGood.subtotal = this.GiftBagGood.goodsNumber * this.GiftBagGood.price * this.GiftBagGood.weight
|
|
|
|
|
|
},
|
|
add() {
|
|
this.editDialog = true
|
|
|
|
},
|
|
getGoodList() {
|
|
req.getGoods().then(resp => {
|
|
console.log("getGoods》》》》", resp)
|
|
this.goods = resp.data
|
|
|
|
|
|
}).catch(() => {})
|
|
},
|
|
goodsSelect(val) {
|
|
console.log("goodsSelect》》》》", val)
|
|
const choose = this.goods.filter((item) => item.sid === val)
|
|
this.GiftBagGood.goodsSid = choose[0].sid
|
|
this.GiftBagGood.name = choose[0].name
|
|
this.GiftBagGood.unitName = choose[0].unitName
|
|
this.GiftBagGood.price = choose[0].price
|
|
this.GiftBagGood.specificationUnit = choose[0].specificationUnit
|
|
this.GiftBagGood.weight = choose[0].weight
|
|
|
|
|
|
},
|
|
indexMethod(index) {
|
|
return index + 1
|
|
},
|
|
backData(value) {
|
|
console.log("backData》》》》", value)
|
|
console.log("imgList", this.imgList)
|
|
|
|
|
|
if (this.imgList.length > 0) {
|
|
this.formobj.iconUrl = this.imgList[0].url
|
|
} else {
|
|
this.formobj.iconUrl = ""
|
|
}
|
|
|
|
this.hideUploadBtn = this.imgList.length != 0;
|
|
console.log("this.hideUploadBtn", this.hideUploadBtn)
|
|
},
|
|
|
|
saveOrUpdate() {
|
|
console.log('>>>>>>>>>saveOrUpdate', this.formobj)
|
|
this.submitdisabled = true
|
|
req.saveAppletGiftBag(this.formobj)
|
|
.then(resp => {
|
|
if (resp.success) {
|
|
this.submitdisabled = false
|
|
this.$message({
|
|
showClose: true,
|
|
type: 'success',
|
|
message: resp.msg
|
|
})
|
|
this.handleReturn('true')
|
|
} else {
|
|
this.submitdisabled = false
|
|
// 根据resp.code进行异常情况处理
|
|
}
|
|
})
|
|
.catch(() => {
|
|
this.submitdisabled = false
|
|
})
|
|
},
|
|
handleReturn(isreload) {
|
|
if (isreload === 'true') this.$emit('reloadlist')
|
|
this.imgList = []
|
|
this.formobj = {
|
|
sid: "",
|
|
name: '',
|
|
dateStart: '',
|
|
dateEnd: '',
|
|
boundaryPrice: "",
|
|
boundary: "",
|
|
remarks: "",
|
|
iconUrl: "",
|
|
goods: []
|
|
}
|
|
this.$emit('doback')
|
|
},
|
|
|
|
showAdd() {
|
|
|
|
},
|
|
showEdit(row) {
|
|
req.AppletGiftBagInit(row.sid)
|
|
.then(resp => {
|
|
if (resp.success) {
|
|
this.formobj = resp.data
|
|
this.imgList = []
|
|
if (resp.data.iconUrl != '')
|
|
this.imgList.push({
|
|
url: resp.data.iconUrl
|
|
})
|
|
this.hideUploadBtn = this.imgList.length != 0;
|
|
console.log("this.hideUploadBtn", this.hideUploadBtn)
|
|
}
|
|
})
|
|
.catch(e => {
|
|
this.formobj = row
|
|
this.imgList = []
|
|
if (resp.data.iconUrl != '')
|
|
this.imgList.push({
|
|
url: formobj.iconUrl
|
|
})
|
|
this.hideUploadBtn = this.imgList.length != 0;
|
|
console.log("this.hideUploadBtn", this.hideUploadBtn)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
// 隐藏上传组件
|
|
|
|
::v-deep .hide {
|
|
.el-upload--picture-card {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.trightb {
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.trightb_item {
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.span {
|
|
margin-left: 50px;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
::v-deep .el-collapse-item__header {
|
|
height: 40px;
|
|
padding: 10px;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
text-align: left;
|
|
color: #ffffff;
|
|
background-color: #0294d7;
|
|
}
|
|
|
|
::v-deep .el-collapse-item__content {
|
|
padding-bottom: 0;
|
|
}
|
|
</style>
|