EXEED_manage/src/views/StarwayInfo/_actEdit/index.vue

<template>
    <div class="main-content">
        <div class="form-area">
            <el-form size="default" :model="form" label-width="120px">
                <el-form-item label="标题" style="width: 80%">
                    <el-input maxlength="64" show-word-limit placeholder="请输入" v-model="form.title" />
                </el-form-item>
                <el-form-item label="副标题" style="width: 80%">
                    <el-input type="textarea" placeholder="请输入" v-model="form.subtitle" />
                </el-form-item>
                <el-form-item label="动态类型">
                    <el-radio-group v-model="form.type">
                        <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 label="上传封面">
                    <uploadFile cover="封面图片尺寸比例为4:3" @change="handlerUpload" :config="{limit: 1, accept: '.jpg, .jpeg, .png, .gif'}">
                        <el-icon v-if="form.cover == ''" class="img-upload-cover"><Plus /></el-icon>
                        <img v-else class="img-upload-cover" :src="$ImgUrl(form.cover)" />
                    </uploadFile>
                </el-form-item>
                <el-form-item label="文章内容" v-if="form.type == 3">
                    <div style="border: 1px solid #ccc">
                        <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.content"
                            :defaultConfig="editorConfig"
                            :mode="mode"
                            @onCreated="handleCreated"
                        />
                    </div>
                </el-form-item>
                <el-form-item label="上传图片" v-else-if="form.type == 2">
                    <uploadFile @change="handlerUploadPic" :config="{ limit: 1, accept: '.jpg, .jpeg, .png, .gif'}">
                        <el-icon v-if="form.type == ''" class="img-upload"><Plus /></el-icon>
                        <img v-else class="img-upload" :src="$ImgUrl(form.content)" />
                    </uploadFile>
                </el-form-item>
                <!-- <el-form-item label="图片内容">
                    <img class="img-upload" :src="$ImgUrl(form.content)" />
                </el-form-item> -->
                <el-form-item label="上传视频" v-if="form.type == 1">
                    <uploadFile @change="handlerUploadVideo" :config="{ limit: 1, accept: '.mp4, .ogv, .ogg, .webm'}">
                        <el-icon class="img-upload"><Plus /></el-icon>
                    </uploadFile>
                </el-form-item>
                <el-form-item v-if="form.type == 1" label="内容">
                    <el-link :href="$ImgUrl(form.content)" target="_blank">点击查看</el-link>
                </el-form-item>
                <el-form-item>
                    <el-button 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, getCurrentInstance} from 'vue'
import { ElMessage } from 'element-plus'
export default defineComponent({
    name: 'v-questRelease',
    components: { Editor, Toolbar },
    setup() {
        const form = reactive({
            title: '',
            subtitle: '',
            type: 1,
            content: '',
            cover:'',
            duration: undefined,
        });
        const { proxy } = getCurrentInstance();
        /////////////
        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,
            editorRef, mode: 'simple', toolbarConfig, editorConfig, handleCreated
        }
    },
    mounted() {
        this.getApi();
    },
    methods: {
        getApi() {
            if(this.$route.query.id) {
                this.proxy.$post("/topicActivity/detail", {id: this.$route.query.id}).then(res => {
                    this.form.title = res.data.title;
                    this.form.type = res.data.type;
                    this.form.subtitle = res.data.subtitle;
                    this.form.content = res.data.content;
                    this.form.cover = res.data.cover;
                    this.form.duration = res.data.duration;
                }).catch(() => {});
            }
        },
        confirm() {
            if(this.$route.query.id) {
                let obj = Object.assign(this.form, {id: this.$route.query.id})
                this.proxy.$post("/topicActivity/upd", obj).then(res => {
                    if(res.code == 200) {
                        this.$message.success(res.data);
                        this.$router.go(-1);
                    } else {
                        this.$message.error(res.data);
                    }
                }).catch(() => {});
            } else {
                this.proxy.$post("/topicActivity/add", this.form).then(res => {
                    if(res.code == 200) {
                        this.$message.success(res.data);
                        this.$router.go(-1);
                    } else {
                        this.$message.error(res.data);
                    }
                }).catch(() => {});
            }
        },
        handlerUpload(data) {
            this.form.cover = data.fileUrl
        },
        handlerUploadPic(data) {
            this.form.content = data.fileUrl
        },
        handlerUploadVideo(data) {
            this.form.content = data.fileUrl;
            this.form.duration = data.duration;
        }
    }
})
</script>

<style lang="less">
.form-area {
    width: 600px
}
.img-upload {
    font-size: 28px;
    color: #8c939d;
    width: 135px;
    height: 135px;
    text-align: center;
    border: 1px solid;
}
.img-upload-cover {
    font-size: 28px;
    color: #8c939d;
    width: 180px;
    height: 135px;
    text-align: center;
    border: 1px solid;
}
</style>