EXEED_manage/src/views/QuestManage/_questRelease/index.vue

<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>