<template>
|
<div class="messageForm inner-bg-style">
|
<el-row>
|
<el-col :span="14">
|
<el-form ref="form" size="mini" label-width="120px" :model="form" :rules="formRules">
|
<el-form-item label="消息类型：" prop="messageType">
|
<el-select placeholder="请选择消息类型" style="width:100%" v-model="form.messageType" :disabled="form.id ? true : false" @change='changeMessageType'>
|
<el-option label="商品推送" key="1" value="1"></el-option>
|
<!-- <el-option label="文章推送" key="2" value="2"></el-option> -->
|
<el-option label="系统推送" key="3" value="3"></el-option>
|
<el-option label="活动消息" key="4" value="4"></el-option>
|
</el-select>
|
</el-form-item>
|
<div v-if="form.messageType === '1'">
|
<el-form-item label="商品主编码：" prop="prodNo">
|
<el-input v-model="form.prodNo" disabled placeholder="请输入商品主编码" clearable>
|
<el-button id="append" @click="selectedProduct" slot="append">选择商品</el-button>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="商品名称：" prop="prodName">
|
<el-input v-model="form.prodName" disabled placeholder="请输入商品名称" clearable></el-input>
|
</el-form-item>
|
</div>
|
<div v-if="form.messageType === '4'">
|
<el-form-item label="活动编号：" prop="promotionId">
|
<el-input v-model="form.promotionId" disabled placeholder="请输入活动编号" clearable>
|
<el-button id="append" @click="selectedActivity" slot="append">选择活动</el-button>
|
</el-input>
|
</el-form-item>
|
</div>
|
<el-form-item label="消息名称：" prop="title">
|
<el-input v-model="form.title" placeholder="请输入消息名称" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="推送时间：" prop="sendTimeType">
|
<el-radio-group v-model="form.sendTimeType" @change="form.sendTime = null">
|
<el-radio label="1">立即推送</el-radio>
|
<!-- <el-radio label="2">
|
定时推送
|
<el-date-picker
|
v-model="form.sendTime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
:disabled="form.sendTimeType !== '2' ? true : false"
|
@change="choiceTime"
|
:picker-options="{disabledDate:time => time.getTime() <= Date.now() - 86400000}"
|
placeholder="选择推送时间">
|
</el-date-picker>
|
</el-radio> -->
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="跳转链接：" prop="jumpLink"
|
v-if="form.messageType === '2' || form.messageType === '3'"
|
:rules="{ required: form.messageType === '2' ? true : false, message: '请输入跳转链接',trigger: 'change' }">
|
<el-input v-model="form.jumpLink" placeholder="请输入跳转链接" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="推送图片：" prop="fileUrl"
|
v-if="form.messageType === '4' || form.messageType === '1'">
|
<upload-img :limitNumber="1" @handle-success="handleSuccess"
|
@handle-remove="handleRemove" :fileList="fileList"
|
:imageSize="'710px * 240px'"></upload-img>
|
</el-form-item>
|
<el-form-item label="推送内容：" prop="content">
|
<el-input v-model="form.content" type="textarea" maxlength="200" show-word-limit
|
:autosize="{minRows:4,maxRow:6}" placeholder="请输入推送内容" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="推送范围：" prop="sendRange">
|
<el-radio-group v-model="form.sendRange">
|
<el-radio label="1">会员全员</el-radio>
|
<!-- <el-radio label="2">经销商</el-radio>
|
<el-radio label="3">门店</el-radio> -->
|
</el-radio-group>
|
</el-form-item>
|
</el-form>
|
<el-row class="buttonPosition">
|
<el-button type="primary" size="mini" @click="submit">保存</el-button>
|
<el-button size="mini" @click="cancel">取消</el-button>
|
</el-row>
|
</el-col>
|
</el-row>
|
<product-selected :show.sync='selectedDialog.show' :title="selectedDialog.title"
|
:multipleSelected="false">
|
<el-table-column>
|
<template slot-scope="scope">
|
<el-button type="success" @click="choiceProduct(scope.row)" size="mini">添加</el-button>
|
</template>
|
</el-table-column>
|
</product-selected>
|
<proActivity-selected :show.sync='selectedActivityDialog.show'
|
:title="selectedActivityDialog.title" :multipleSelected="false">
|
<el-table-column>
|
<template slot-scope="scope">
|
<el-button type="success" @click="choiceActive(scope.row)" size="mini">添加</el-button>
|
</template>
|
</el-table-column>
|
</proActivity-selected>
|
</div>
|
</template>
|
<script>
|
import productSelected from '@/views/product/components/productSelected.vue'
|
import proActivitySelected from '@/views/proActivity/components/proActivitySelected.vue'
|
|
import messagePushApi from '@/api/messageMgt/messagePush'
|
import uploadFileApi from '@/api/uploadFile'
|
|
export default {
|
components: { productSelected, proActivitySelected },
|
data() {
|
return {
|
selectedDialog: {
|
show: false,
|
title: '选择商品'
|
},
|
selectedActivityDialog: {
|
show: false,
|
title: '选择活动'
|
},
|
form: {
|
messageType: null,
|
prodNo: null,
|
prodName: null,
|
promotionId: null,
|
sendTimeType: '1',
|
sendTime: null,
|
title: null,
|
jumpLink: null,
|
fileUrl: null,
|
fileId: null,
|
sendRange: '1',
|
shopSpuId: null,
|
content: null
|
},
|
formRules: {
|
messageType: [{ required: true, message: '请选择消息类型' }],
|
prodNo: [{ required: true, message: '请选择商品主编码', trigger: 'change' }],
|
prodName: [{ required: true, message: '请选择商品名称' }],
|
promotionId: [{ required: true, message: '请选择活动编号' }],
|
sendTimeType: [{ required: true, message: '请选择推送时间' }],
|
title: [{ required: true, message: '请输入消息名称', trigger: 'change' }],
|
// jumpLink: [{ required: true, message: '请输入跳转链接' }],
|
fileUrl: [{ required: true, message: '请上传推送图片' }],
|
sendRange: [{ required: true, message: '请选择推送类型' }],
|
content: [{ required: true, message: '请输入推送内容', trigger: 'change' }]
|
},
|
fileList: []
|
}
|
},
|
created() {
|
if (this.$route.query.id) {
|
this.getDetails()
|
}
|
},
|
methods: {
|
// 选择推送时间
|
choiceTime(val) {
|
var oDate1 = new Date(val)
|
if (oDate1.getTime() < Date.now()) {
|
this.$message({
|
message: '推送时间不能小于当前时间',
|
type: 'info'
|
})
|
this.form.sendTime = null
|
}
|
},
|
// 选择商品
|
choiceProduct(row) {
|
this.form.prodNo = row.spuId
|
this.form.prodName = row.spuName
|
this.form.shopSpuId = row.shopSpuId
|
this.selectedDialog.show = false
|
},
|
// 选择活动
|
choiceActive(row) {
|
this.form.promotionId = row.promotionId
|
this.form.title = row.promotionName
|
this.form.content = row.promotionRuledesc
|
|
this.selectedActivityDialog.show = false
|
},
|
// 打开选择商品弹出框
|
selectedProduct() {
|
this.selectedDialog.show = true
|
},
|
// 打开活动弹窗框
|
selectedActivity() {
|
this.selectedActivityDialog.show = true
|
},
|
/**
|
* 获取上传成功的图片
|
*/
|
handleSuccess(data) {
|
this.form.fileUrl = data.like
|
this.form.fileId = data.key
|
},
|
/**
|
* 移除图片
|
*/
|
handleRemove(file, data) {
|
const fileId = file.response ? file.response.data.key : file.fileId
|
uploadFileApi.removeFile({ key: fileId }).then(res => { })
|
if (!data.length) {
|
this.form.fileUrl = null
|
this.form.fileId = null
|
}
|
},
|
/**
|
* 改变消息类型时触发
|
*/
|
changeMessageType(val) {
|
this.form.prodNo = null
|
this.form.prodName = null
|
this.form.shopSpuId = null
|
this.form.jumpLink = null
|
this.form.fileUrl = null
|
this.form.fileId = null
|
this.form.promotionId = null
|
this.form.title = null
|
this.form.content = null
|
|
this.fileList = []
|
this.$refs.form.clearValidate()
|
|
if (val === '3') {
|
this.form.sendRange = '1'
|
}
|
},
|
/**
|
* 获取详情
|
*/
|
getDetails() {
|
messagePushApi.detailsInfo({ id: this.$route.query.id }).then(res => {
|
if (res.data) {
|
this.form = res.data
|
if (res.data.fileUrl) {
|
this.fileList = [{ url: res.data.fileUrl, fileId: res.data.fileId }]
|
}
|
}
|
})
|
},
|
/**
|
* 提交
|
*/
|
submit() {
|
this.$refs.form.validate().then(res => {
|
if (this.form.id) {
|
this.editInfo()
|
} else {
|
this.addInfo() // 新增推送
|
}
|
})
|
},
|
/**
|
* 增加推送
|
*/
|
addInfo() {
|
messagePushApi.addItem(this.form).then(res => {
|
if (res.code === '0') {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.$router.push({ name: 'messagePushList' })
|
}
|
})
|
},
|
/**
|
* 编辑推送
|
*/
|
editInfo() {
|
messagePushApi.editItem(this.form).then(res => {
|
if (res.code === '0') {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.$router.push({ name: 'messagePushList' })
|
}
|
})
|
},
|
/**
|
*取消
|
*/
|
cancel() {
|
this.$router.push({ name: 'messagePushList' })
|
}
|
|
}
|
}
|
</script>
|
<style lang="scss">
|
#append {
|
background-color: #e6a23c;
|
color: #fff;
|
}
|
.el-picker-panel {
|
.el-picker-panel__footer .el-button--text.el-picker-panel__link-btn {
|
display: none !important;
|
}
|
}
|
.messageForm{
|
padding:20px;
|
.el-textarea{
|
.el-input__count{
|
bottom:-30px;
|
}
|
}
|
}
|
</style>
|
