EXEED_manage/src/views/MatManage/_matUpload/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-select v-model="form.groupId" placeholder="请选择">
                        <el-option :value="0" label="不分组"></el-option>
                        <el-option v-for="(item) in groupData" :key="item.id" :value="item.id" :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车系" style="width: 80%">
                    <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="类型" style="width: 80%">
                    <el-select v-model="form.type" placeholder="请选择">
                        <el-option :value="1" label="视频"></el-option>
                        <el-option :value="2" label="图片"></el-option>
                        <el-option :value="3" label="文字"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="视频封面" style="width: 80%" v-if="form.type == 1">
                    <uploadFile @change="coverUpload" isCompress :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="标签" style="width: 80%">
                    <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: 80%">
                    <el-input type="textarea" v-model="form.title" />
                </el-form-item>
                <el-form-item label="素材内容" style="width: 100%">
                    <uploadFile @change="handlerUpload" isCompress :config="{ limit: 10, accept: '.jpg, .jpeg, .png, .gif, .mp4'}">
                        <el-button>上传文件</el-button>
                    </uploadFile>
                    <el-link v-for="(item,index) in form.fileUrlList" :key="index" :href="$ImgUrl(item)" target="_blank">
                        {{item.url}}
                    </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 {defineComponent,reactive,ref,getCurrentInstance} from 'vue'
export default defineComponent({
    name: 'v-matUpload',
    setup() {
        const activeId = reactive({
            value: 0
        });
        const form = reactive({
            groupId: 0,
            title: '',
            type: undefined,
            tagList: [],
            brandList: [],
            coverUrl: '',
            fileUrlList: [],
        });
        const tagData = ref([]);
        const brandData = ref([]);
        const groupData = ref([]);
        const { proxy } = getCurrentInstance();
        return {
            form,proxy,
            tagData,brandData,groupData,
            activeId
        }
    },
    activated() {
        this.getApi();
    },
    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("/referenceGroup/list", {}).then(res => {
                this.groupData = res.data.records;
            }).catch(() => {});
            if(this.$route.params.id) {
                this.proxy.$post("/reference/detail", {id: this.$route.params.id}).then(res => {
                    this.form.groupId = res.data.groupId;
                    this.form.type = res.data.type;
                    this.form.title = res.data.title;
                    res.data.brandList.forEach(ele => {this.form.brandList.push(ele.id)});
                    res.data.tagList.forEach(ele => {this.form.tagList.push(ele.id)});
                    this.form.fileUrlList = res.data.fileUrlList;
                    this.form.coverUrl = res.data.coverUrl;
                }).catch(() => {});
            }
        },
        confirm() {
            if(this.$route.params.id) {
                let obj = Object.assign(this.form, {id: this.$route.params.id})
                this.proxy.$post("/reference/upd", obj).then(res => {
                    this.$message.success(res.data);
                    this.form.fileUrlList = [];
                    this.$router.go(-1);
                }).catch(() => {});
            } else {
                this.proxy.$post("/reference/add", this.form).then(res => {
                    this.$message.success(res.data);
                    this.form.fileUrlList = [];
                    this.$router.go(-1);
                }).catch(() => {});
            }
        },
        //素材上传
        handlerUpload(data) {
            if(data.fileUrl != null) {
                let obj = {
                    duration: data.duration,
                    url: data.fileUrl,
                    fileUrlSmall: data.fileUrlSmall
                }
                this.form.fileUrlList.push(obj)
            }
        },
        coverUpload(data) {
            this.form.coverUrl = data.fileUrl
        }
    }
})
</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;
}
</style>