datang-admin/src/components/Detail/addOrEdit.vue

<template>
    <div class="container">
        <div class="title">{{ showAdd ? '添加' : '修改' }}详情</div>
        <el-form :model="formLabelAlign" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
            <el-form-item label="位置：" prop="showPage">
                <el-cascader
                    v-model="formLabelAlign.showPage"
                    :props="props"
                    :options="tabList"
                    @change="handleChange">
                </el-cascader>
            </el-form-item>
            <el-form-item label="正文：" prop="content">
                <editor />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit(formLabelAlign)">确定</el-button>
                <el-button @click="$emit('close')">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import Editor from './editor.vue';
    import {BASE_API} from '../../config';
    import {tabList} from '../../filters/code';
    import {
        ADD_DETAIL,
        UPDATE_DETAIL,
    } from '@/api/contentDetail';
    import Alert from "@/utils/alert";

    export default {
        name: "detailsOfDistribution",
        components: {
            Editor,
        },
        props: ['currList', 'showAdd'],
        data() {
            return {
                labelPosition: 'right',
                formLabelAlign: {
                    showPage: ['00', '0000'],
                    content: ''
                },
                BASE_API,
                tabList,
                props: {
                    value: 'code',
                    label: 'title',
                    children: 'children'
                },
                rules: {
                    showPage: [
                        { type: 'array', required: true, message: '请选择位置', trigger: 'change' }
                    ],
                }
            }
        },

        mounted() {
            if(this.currList && this.currList && !this.showAdd){
                const { id, showPage, content } = this.currList
                this.formLabelAlign.id = id;
                this.formLabelAlign.showPage.splice(0, 1, showPage.slice(0, 2))
                this.formLabelAlign.showPage.splice(1, 1, showPage)
                this.formLabelAlign.content = content;
            }else{
                const code = localStorage.getItem('code')
                if(!code) return
                this.formLabelAlign.showPage.splice(0, 1, code.slice(0, 2))
                this.formLabelAlign.showPage.splice(1, 1, code)
            }
        },

        methods: {
            // 位置选择
            handleChange(value) {
                this.formLabelAlign.showPage = value
            },

            submit(formName) {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        if(this.showAdd){
                            this.addCarousel(formName)
                        }else{
                            this.updateCarousel(formName)
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            /**
             * 添加轮播图
             */
            async addCarousel(formName){
                const { showPage, content } = formName;
                const params = {
                    showPage: showPage[1],
                    content
                };
                await ADD_DETAIL(params).then((res) => {
                    if(res.code === 200){
                        Alert.success('添加成功');
                        this.$emit('close', true)
                    }else{
                        Alert.fail(res.msg || '添加失败');
                    }
                })
            },

            /**
             * 修改轮播图
             */
            async updateCarousel(formName){
                const { id, showPage, content } = formName;
                const params = {
                    id,
                    showPage: showPage[1],
                    content
                };
                await UPDATE_DETAIL(params).then((res) => {
                    if(res.code === 200){
                        Alert.success('修改成功');
                        this.$emit('close', true)
                    }else{
                        Alert.fail(res.msg || '修改失败');
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .title{
        width: 100%;
        margin-bottom: 30px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }

    .avatar-uploader-icon {
        display: inline-block;
        border: 1px dashed #d9d9d9;
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
</style>