admin_home/src/views/template/public/editWindow.vue

<template>
    <div class="editWindowBox">
        <div class="editWindowBoxContent">
            <!--组件类型 1=新闻 2=评论-->
            <!--1.新闻-->
            <div v-if="this.$store.state.template.editComponentType == 1">
                <el-form :model="form.type1data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
                    <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
                        <el-input value="新闻列表" disabled/>
                    </el-form-item>
                    <el-form-item label="网站导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
                        <el-select v-model="form.type1data.pid_arr" filterable placeholder="请选择导航.." @change="changeNav">
                            <el-option
                                v-for="item in options"
                                :key="item.id"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="文字新闻条数：" :label-width="formLabelWidth" class="custom-align-right">
                        <el-input v-model="this.$store.state.template.editComponentSize" placeholder="请输入请求的条数" disabled/>
                    </el-form-item>
                    <el-form-item label="图片新闻条数：" :label-width="formLabelWidth" class="custom-align-right">
                        <el-input v-model="this.$store.state.template.editComponentSizeImg" placeholder="请输入请求的条数" disabled/>
                    </el-form-item>
                </el-form>
            </div>
            <!--2.广告-->
            <div v-if="this.$store.state.template.editComponentType == 2">
                <el-form :model="form.type3data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
                    <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
                        <el-input value="广告" disabled/>
                    </el-form-item>
                    <el-form-item label="广告位宽度：" :label-width="formLabelWidth" class="custom-align-right">
                        <el-input v-model="this.$store.state.template.pageData.index[this.$store.state.template.editDataSort].content.ad.width" disabled/>
                    </el-form-item>
                    <el-form-item label="广告位高度：" :label-width="formLabelWidth" class="custom-align-right">
                        <el-input v-model="this.$store.state.template.pageData.index[this.$store.state.template.editDataSort].content.ad.height" disabled/>
                    </el-form-item>
                    <el-form-item label="广告位类型：" :label-width="formLabelWidth" class="custom-align-right">
                        <el-input value="图片" disabled/>
                    </el-form-item>
                    <el-form-item label="广告位名称：" :label-width="formLabelWidth" prop="adName" class="custom-align-right">
                        <el-input v-model="form.type3data.adName" placeholder="请输入广告位名称"/>
                    </el-form-item>
                </el-form>
            </div>
            <!--3.全局广告-->
            <div v-if="this.$store.state.template.editComponentType == 3">
                <el-form :model="form.type2data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
                    <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
                        <el-input value="广告" disabled/>
                    </el-form-item>
                    <el-form-item label="广告位宽度：" :label-width="formLabelWidth" class="custom-align-right">
                        <el-input v-model="this.$store.state.template.webSiteData.ad.top.width" disabled/>
                    </el-form-item>
                    <el-form-item label="广告位高度：" :label-width="formLabelWidth" class="custom-align-right">
                        <el-input v-model="this.$store.state.template.webSiteData.ad.top.height" disabled/>
                    </el-form-item>
                    <el-form-item label="广告位类型：" :label-width="formLabelWidth" class="custom-align-right">
                        <el-input value="图片" disabled/>
                    </el-form-item>
                    <el-form-item label="广告位名称：" :label-width="formLabelWidth" prop="adName" class="custom-align-right">
                        <el-input v-model="form.type2data.adName" placeholder="请输入广告位名称"/>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="editWindowBoxFooter">
            <el-button type="info" @click="closeEditWindow">取消</el-button>
            <el-button type="primary" @click="submitData" v-if="this.$store.state.template.editComponentType != 3">确定</el-button>
            <el-button type="primary" @click="submitAdData" v-else>确定</el-button>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';  // 导入 Vue
//监听vuex中的值
export default {
    props: {

    },
    data() {
        const validatePid = (rule,value,callback) => {
            console.log(value.length)
            if (value.length === 0) {
                callback(new Error('必须选择一个导航！'))
            } else {
                callback()
            }
        }
        const validateEmpty = (rule,value,callback) => {
            if (!value || value.trim() === "") {
                callback(new Error('该项不能为空！'));
            } else {
                callback();
            }
        }
        return {
            formLabelWidth:"120px",
            form:{
                //单导航新闻
                type1data:{
                    pid_arr:"",
                    name:"",
                },
                //全局广告
                type2data:{
                    adName:""
                },
                //页面内广告
                type3data:{
                    adName:""
                },
            },
            formRules:{
                pid_arr: [{type:'array',required:true,trigger:'blur',message:'必须选择一个导航！',validator:validatePid}],
                adName: [{required:true,trigger:'blur',message:'',validator:validateEmpty}],
            },
            options:[],//网站导航
        }
    },
    computed: {
        // 映射 Vuex 的 state 到计算属性
        // 监听导航池变化用于回显
        getPid() {
            return this.$store.state.template.componentViewData.pid_arr;
        },
        getadName(){
            return this.$store.state.template.componentViewData.adName;
        },
        gettitleName(){
            return this.$store.state.template.componentViewData.titleName;
        }
    },
    watch: {
        getPid(newVal, oldVal) {
            console.log("导航池改变了！")
            console.log(newVal, oldVal)
            // 回显导航池 判断一下是单导航还是多导航
            if(this.$store.state.template.editComponentType==1){
                //base0.0.1 必须先赋值再创建nodes 否则可能无法回显
                this.form.type1data.pid_arr = newVal;
            }
            if(this.$store.state.template.editComponentType==2){ 
                this.form.type3data.pid_arr = newVal;
            }
        },
        getadName(newVal, oldVal) {
            console.log("广告文字改变了！")
            console.log(newVal, oldVal)
            this.form.type3data.adName = newVal;
        },
    },
    methods: {
        closeEditWindow(){
            this.$store.commit('template/closeEditWindowStatus');
        },
        getNavList(){
            let data = {
                website_id:this.$store.state.template.editWebsiteId,
                pid:0,
                type:1
            }
            this.$store.dispatch('news/getWebsiteNavList',data).then((res)=>{
                if(res.code==200){
                    this.options = res.data.map(item => ({
                        id: item.id,
                        value: item.category_id,
                        label: item.alias,
                    }));
                }else{
                    this.$message.error(res.msg);
                }
            });
        },
        changeNav(val){
            // 通过 val 找到对应的选项
            const selectedOption = this.options.find(item => item.value === val);
            if (selectedOption) {
                //选中导航池后，获得导航池的名字
                this.form.type1data.name = selectedOption.label;
            }
        },
        submitData(){
            //验证表单
            this.$refs.form.validate(valid => {
                //构建提交的数据
                let data = {
                    id:this.$store.state.template.editSectorId,//组件id
                    sort:this.$store.state.template.editComponentSort,//组件位置
                    dataSort:this.$store.state.template.editDataSort,//数据位置
                    type:this.$store.state.template.editComponentType,//组件类型
                    data:""//提交的数据
                }
                if (valid) {
                    //判断当前提交的数据类型
                    //1=新闻
                    if(this.$store.state.template.editComponentType == 1){
                        data.data = this.form.type1data;
                        data.data.name = this.form.type1data.name;
                    }
                    //2=广告
                    if(this.$store.state.template.editComponentType == 2){
                        data.data = this.form.type3data;
                    }
                    //第二步：提交数据
                    this.$store.commit('template/saveComponentData',data);
                    //第三步：关闭编辑窗口
                    this.$store.commit('template/closeEditWindowStatus');
                    //第四步：初始化下拉列表
                    this.form.type1data.pid_arr = "";
                }
            })
        },
        submitAdData(){
            //验证广告位名称
            let data = {}
            data.data = this.form.type2data;
            data.data.name = this.form.type2data.adName;
            //第一步：通过固定方法提交数据
            this.$store.commit('template/saveAdData',data);
            //第二步：关闭编辑窗口
            this.$store.commit('template/closeEditWindowStatus');
            //第三步：初始化下拉列表
            this.form.type1data.pid_arr = "";
        }
    },
    mounted() { 
        //获得站点下的导航池
        this.getNavList();
    },
};
</script>

<style scoped lang="less">
    .editWindowBox {
        .editWindowBoxContent {
            width: 100%;
            padding: 20px;
        }
        .editWindowBoxFooter {
            text-align: right;
        }
    }

    .testAssistant {
        border: 1px solid #dfe4ed;
        padding: 20px;
        margin-bottom: 20px;
        background: #F5F7FA;
        border-radius: 4px;
        .testAssistantTitle {
            font-size: 16px;
            font-weight: bold;
            padding-bottom: 10px;
            margin-bottom: 20px;
            border-bottom: 1px solid #dfe4ed;
        }
        .testAssistantContentItem {
            display: flex;
            font-size: 16px;
            margin-bottom: 10px;
            div:nth-child(1) {
                color: #666;
                margin-right: 20px;
                font-weight: bold;
            }
            div:nth-child(2) {
                color: #666;
            }
        }
    }

    //表单微调 start------------------------------------------------------------>
    ::v-deep .editWindowBoxContent .el-cascader{
        width: 100% !important;
    }
    ::v-deep .editWindowBoxContent .el-select--medium {
        width: 100% !important;
    }
    //表单微调 end------------------------------------------------------------>
</style>