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.
317 lines
14 KiB
317 lines
14 KiB
<template>
|
|
<div class="main-content">
|
|
<div class="form-area">
|
|
<el-form size="default" :model="form" label-width="90px">
|
|
<el-form-item label="发布对象" style="width: 80%">
|
|
<el-radio-group v-model="toRelease">
|
|
<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-item v-if="toRelease == 2" label="经销商">
|
|
<el-select multiple placeholder="请选择" v-model="form.departmentList" style="width: 90%">
|
|
<el-option v-for="item in departmentData" :key="item.id" :label="item.name" :value="item.departmentId"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item v-if="toRelease == 3" label="经销商级别">
|
|
<el-select multiple placeholder="请选择" v-model="form.departmentGroupList" style="width: 90%">
|
|
<el-option v-for="item in departmentGroupData" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="任务标题" style="width: 60%">
|
|
<el-input maxlength="64" show-word-limit placeholder="请输入" v-model="form.title" />
|
|
</el-form-item>
|
|
<el-form-item label="简介" style="width: 60%">
|
|
<el-input placeholder="请输入" :rows="4" type="textarea" v-model="form.subtitle" />
|
|
</el-form-item>
|
|
<el-form-item label="图文介绍">
|
|
<el-radio-group v-model="form.showImgText">
|
|
<el-radio :label="0">不显示图文介绍</el-radio>
|
|
<el-radio :label="1">显示图文介绍</el-radio>
|
|
</el-radio-group>
|
|
<div style="border: 1px solid #ccc" v-if="form.showImgText == 1">
|
|
<Toolbar
|
|
style="border-bottom: 1px solid #ccc;width: 700px"
|
|
:editor="editorRef"
|
|
:defaultConfig="toolbarConfig"
|
|
:mode="mode"
|
|
/>
|
|
<Editor
|
|
style="height: 301px; overflow-y: hidden;"
|
|
v-model="form.imgText"
|
|
:defaultConfig="editorConfig"
|
|
:mode="mode"
|
|
@onCreated="handleCreated"
|
|
/>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="时间" style="width: 60%">
|
|
<el-date-picker value-format="YYYY-MM-DD HH:mm:ss" @change="timeChange" v-model="selTime" type="daterange"></el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="标签类别">
|
|
<el-checkbox-group v-model="form.tagList">
|
|
<el-checkbox v-for="(item,index) in tagData" :key="index" :label="item.id">
|
|
{{item.title}}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
<el-form-item label="选择车系" style="width: 90%">
|
|
<div>
|
|
<el-checkbox-group v-model="form.brandList">
|
|
<el-checkbox v-for="(item,index) in brandData" :key="index" :label="item.id">
|
|
{{item.name}}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="封面图片">
|
|
<uploadFile cover="封面图片尺寸比例为1:1" @change="handlerUpload" :config="{ limit: 1, accept: '.jpg, .jpeg, .png, .gif'}">
|
|
<el-icon v-if="form.coverUrl == ''" class="img-upload"><Plus /></el-icon>
|
|
<img v-else class="img-upload" :src="$ImgUrl(form.coverUrl)" />
|
|
</uploadFile>
|
|
</el-form-item>
|
|
<el-form-item label="上传素材">
|
|
<uploadFile @change="handlerRefUpload" :config="{ limit: 10, accept: '.jpg, .jpeg, .png, .gif, .mp4'}">
|
|
<el-button>上传文件</el-button>
|
|
</uploadFile>
|
|
<el-link v-for="(item,index) in form.referenceUrlList" :key="index" :href="$ImgUrl(item)" target="_blank">
|
|
{{item}}
|
|
</el-link>
|
|
</el-form-item>
|
|
<el-form-item label="选择素材"></el-form-item>
|
|
<el-transfer style="padding:0px 0px 16px 30px;text-align: left; display: inline-block"
|
|
v-model="form.referenceList" :titles="['素材列表','已选素材']"
|
|
:data="refData" :props="{key: 'id',label: 'title'}">
|
|
</el-transfer>
|
|
<el-form-item label="上传教程">
|
|
<uploadFile @change="handlerTeachUpload" :config="{ limit: 10, accept: '.jpg, .jpeg, .png, .gif, .mp4, .ogv, .ogg'}">
|
|
<el-button>上传文件</el-button>
|
|
</uploadFile>
|
|
<el-link v-for="(item,index) in form.teachRefeUrlList" :key="index" :href="$ImgUrl(item)" target="_blank">
|
|
{{item}}
|
|
</el-link>
|
|
</el-form-item>
|
|
<el-form-item label="选择教程"></el-form-item>
|
|
<el-transfer style="padding:0px 0px 16px 30px;text-align: left; display: inline-block"
|
|
v-model="form.teachRefeList" :titles="['教程列表','已选教程']"
|
|
:data="teachData" :props="{key: 'id',label: 'title'}">
|
|
</el-transfer>
|
|
<el-form-item label="奖励规则">
|
|
<el-select v-model="form.rewardRuleTemplateId" @change="ruleChange">
|
|
<el-option v-for="(item) in ruleData" :key="item.id" :value="item.id" :label="item.title">
|
|
</el-option>
|
|
</el-select>
|
|
<el-table :data="ruleTable.data" border style="margin-top: 16px">
|
|
<el-table-column prop="id" label="传播值" :formatter="valueFormatter"></el-table-column>
|
|
<el-table-column prop="reward" label="奖励积分"></el-table-column>
|
|
</el-table>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button style="margin-bottom: 24px" type="primary" @click="confirm">提交</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import '@wangeditor/editor/dist/css/style.css'
|
|
import { onBeforeUnmount, shallowRef, onMounted } from 'vue'
|
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
|
import {defineComponent, reactive, ref, getCurrentInstance} from 'vue'
|
|
import {valueFormatter} from './config.js'
|
|
import { ElMessage } from 'element-plus'
|
|
export default defineComponent({
|
|
name: 'v-questRelease',
|
|
components: { Editor, Toolbar },
|
|
setup() {
|
|
const activeId = reactive({
|
|
value: 0
|
|
});
|
|
const form = reactive({
|
|
title: '',
|
|
subtitle: '',
|
|
start: '',
|
|
end: '',
|
|
coverUrl: '',
|
|
rewardRuleTemplateId: null,
|
|
brandList: [],
|
|
tagList: [],
|
|
referenceList: [],
|
|
referenceUrlList: [],
|
|
teachRefeList: [],
|
|
teachRefeUrlList: [],
|
|
departmentList: [],
|
|
departmentGroupList: [],
|
|
imgText: undefined,
|
|
showImgText: 0,
|
|
});
|
|
const toRelease = ref(1); //发布对象
|
|
const selTime = ref([]);
|
|
const tagData = ref([]);
|
|
const brandData = ref([]);
|
|
const ruleData = ref([]);
|
|
const refData = ref([]);
|
|
const teachData = ref([]);
|
|
const departmentData = ref([]);
|
|
const departmentGroupData = ref([]);
|
|
const { proxy } = getCurrentInstance();
|
|
const ruleTable = reactive({
|
|
data: []
|
|
});
|
|
/////////////
|
|
const editorRef = shallowRef()
|
|
// onMounted(() => { // 模拟 ajax 异步获取内容
|
|
// setTimeout(() => {
|
|
// valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
|
|
// }, 1500)
|
|
// })
|
|
//配置项
|
|
const toolbarConfig = {}
|
|
const editorConfig = { MENU_CONF: {} }
|
|
editorConfig.MENU_CONF['uploadImage'] = {
|
|
server: process.env.VUE_APP_URL + "util/upload2",
|
|
maxFileSize: 10 * 1024 * 1024, // 10M
|
|
fieldName: 'file',
|
|
onError: (file, err, res) => {
|
|
ElMessage({message: '超出大小限制', type: 'error', duration: 6000})
|
|
},
|
|
};
|
|
editorConfig.MENU_CONF['uploadVideo'] = {
|
|
server: process.env.VUE_APP_URL + "util/upload2",
|
|
maxFileSize: 128 * 1024 * 1024, // 128M
|
|
fieldName: 'file',
|
|
onError: (file, err, res) => {
|
|
ElMessage({message: '超出大小限制', type: 'error', duration: 6000})
|
|
},
|
|
}
|
|
// 组件销毁时，也及时销毁编辑器
|
|
onBeforeUnmount(() => {
|
|
const editor = editorRef.value
|
|
if (editor == null) return
|
|
editor.destroy()
|
|
})
|
|
const handleCreated = (editor) => {
|
|
editorRef.value = editor // 记录 editor 实例，重要！
|
|
}
|
|
/////////////
|
|
return {
|
|
form,proxy,selTime,valueFormatter,toRelease,
|
|
tagData,brandData,ruleData,refData,teachData,departmentData,departmentGroupData,
|
|
ruleTable,
|
|
editorRef, mode: 'simple', toolbarConfig, editorConfig, handleCreated,
|
|
activeId
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getApi();
|
|
},
|
|
methods: {
|
|
getApi() {
|
|
this.proxy.$post("/tag/list", {}).then(res => {
|
|
this.tagData = res.data.records;
|
|
}).catch(() => {});
|
|
this.proxy.$post("/brand/list", {}).then(res => {
|
|
this.brandData = res.data.records;
|
|
}).catch(() => {});
|
|
this.proxy.$post("/rewardRuleTemplate/list", {}).then(res => {
|
|
this.ruleData = res.data.records;
|
|
}).catch(() => {});
|
|
this.proxy.$post("/reference/list", {}).then(res => {
|
|
this.refData = res.data.records;
|
|
}).catch(() => {});
|
|
this.proxy.$post("/teachingRefe/list", {}).then(res => {
|
|
this.teachData = res.data.records;
|
|
}).catch(() => {});
|
|
this.proxy.$post("/user/department", {}).then(res => {
|
|
const data = res.data;
|
|
this.departmentData = data;
|
|
}).catch(() => {});
|
|
this.proxy.$post("/user/departmentGroup", {}).then(res => {
|
|
const data = res.data;
|
|
this.departmentGroupData = data.records;
|
|
}).catch(() => {});
|
|
if(this.$route.query.id) {
|
|
this.proxy.$post("/task/detail", {id: this.$route.query.id}).then(res => {
|
|
this.form.title = res.data.title;
|
|
this.form.subtitle = res.data.subtitle;
|
|
this.form.start = res.data.start;
|
|
this.form.end = res.data.end;
|
|
this.form.coverUrl = res.data.coverUrl;
|
|
this.form.imgText = res.data.imgText;
|
|
this.form.showImgText = res.data.showImgText
|
|
this.selTime = [res.data.start,res.data.end]
|
|
this.form.rewardRuleTemplateId = res.data.rewardRuleTemplateId;
|
|
this.ruleChange(res.data.rewardRuleTemplateId);
|
|
res.data.referenceList.forEach(ele => {this.form.referenceList.push(ele.id)})
|
|
res.data.brandList.forEach(ele => {this.form.brandList.push(ele.id)})
|
|
res.data.tagList.forEach(ele => {this.form.tagList.push(ele.id)})
|
|
}).catch(() => {});
|
|
}
|
|
},
|
|
selectAll(value) {
|
|
if(value == true) {
|
|
//全选
|
|
} else {
|
|
this.form.series = []
|
|
}
|
|
},
|
|
ruleChange(value) {
|
|
this.proxy.$post("/rewardRuleTemplate/detail", {id: value}).then(res => {
|
|
this.ruleTable.data = res.data.ruleList
|
|
}).catch(() => {});
|
|
},
|
|
confirm() {
|
|
if(this.$route.query.id) {
|
|
let obj = Object.assign(this.form, {id: this.$route.query.id})
|
|
this.proxy.$post("/task/upd", obj).then(res => {
|
|
this.$message.success('修改成功');
|
|
this.$router.go(-1);
|
|
}).catch(() => {});
|
|
} else {
|
|
this.proxy.$post("/task/add", this.form).then(res => {
|
|
this.$message.success('添加成功');
|
|
this.$router.go(-1);
|
|
}).catch(() => {});
|
|
}
|
|
},
|
|
timeChange(val) {
|
|
this.form.start = val[0];
|
|
this.form.end = val[1]
|
|
},
|
|
handlerUpload(data) {
|
|
this.form.coverUrl = data.fileUrl
|
|
},
|
|
handlerRefUpload(data) {
|
|
if(data.fileUrl != null) {
|
|
let obj = {
|
|
duration: data.duration,
|
|
url: data.fileUrl
|
|
}
|
|
this.form.referenceUrlList.push(obj)
|
|
}
|
|
},
|
|
handlerTeachUpload(data) {
|
|
if(data.fileUrl != null) {
|
|
this.form.teachRefeUrlList.push(data.fileUrl)
|
|
}
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.form-area {
|
|
width: 600px;
|
|
height: 300px;
|
|
}
|
|
.img-upload {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 135px;
|
|
height: 135px;
|
|
text-align: center;
|
|
border: 1px solid;
|
|
}
|
|
</style> |