zx_home/src/views/news/messageCreat.vue

<template>
    <div class="mainBox">
        <div class="layerBox">
            <tableTitle :name="'添加留言'" v-if="pageMode == 'add'"/>
            <tableTitle :name="'编辑留言'" v-if="pageMode == 'edit'"/>
            <tableTitle :name="'留言详情'" v-if="pageMode == 'view'"/>
            <el-form :model="form" ref="form" :rules="formRules" label-position="left" label-width="120px">
                <div class="formDiv">
                    <div>
                        <el-form-item label="留言标题：" :label-width="formLabelWidth" prop="title" class="custom-align-right">
                            <el-input v-model="form.title" autocomplete="off" placeholder="请输入留言标题" :disabled="pageMode == 'view'"></el-input>
                        </el-form-item>
                        <el-form-item label="网站属性：" :label-width="formLabelWidth" prop="column_id" class="custom-align-right">
                            <el-cascader v-model="form.column_id" :props="{ checkStrictly: true }" :options="website_column_arr" :disabled="pageMode == 'view'"></el-cascader>
                        </el-form-item>
                        <el-form-item label="留言关键词：" class="custom-align-right" v-if="pageMode != 'view'">
                            <template #label>
                                <span class="askBox">
                                    留言关键词：
                                    <el-tooltip class="item" effect="dark" content="留言关键词，如：三农市场网、全国三农、信息一体化。" placement="top">
                                        <i class="el-icon-question"></i>
                                    </el-tooltip>
                                </span>
                            </template>
                            <tagInput :initialTags="tags" @tags-updated="updateTags"></tagInput>
                        </el-form-item>
                        <el-form-item label="留言关键词：" class="custom-align-right" v-else>
                            <el-input v-model="this.form.keyword" autocomplete="off" placeholder="请输入留言标题" disabled="disabled"></el-input>
                        </el-form-item>
                        <el-form-item label="留言描述：" class="custom-align-right">
                            <template #label>
                                <span class="askBox">
                                    留言描述：
                                    <el-tooltip class="item" effect="dark" content="留言描述，如：中国三农市场网创建以来，社会效益和会员经济效益贡献。" placement="top">
                                        <i class="el-icon-question"></i>
                                    </el-tooltip>
                                </span>
                            </template>
                            <el-input type="textarea" v-model="form.description" class="custom-textarea" placeholder="请输入留言描述" :disabled="pageMode == 'view'"></el-input>
                        </el-form-item>
                        <el-form-item label="留言内容：" prop="content" class="custom-align-right" v-if="pageMode == 'add' || pageMode == 'edit'">
                            <myEditor ref="myEditor" v-model="form.content"></myEditor>
                        </el-form-item>
                        <el-form-item label="留言内容：" prop="content" class="custom-align-right" v-else>
                            <div v-html="form.content" class="contentBox"></div>
                        </el-form-item>
                    </div>
                    <div v-if="creatNews_user_type == 10000 && pageMode != 'view' && pageName == 'messageList'">
                        <el-form-item label="回复：" :label-width="formLabelWidth" class="custom-align-right">
                            <el-input type="textarea" v-model="form.reply" class="custom-textarea" placeholder="请输入回复"></el-input>
                        </el-form-item>
                    </div>
                    <div v-if="creatNews_user_type != 10000 && pageMode == 'view'">
                        <el-form-item label="回复：" :label-width="formLabelWidth" class="custom-align-right">
                            <el-input type="textarea" v-model="form.reply" class="custom-textarea" placeholder="暂无回复" disabled="disabled"></el-input>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
        </div>
        <div class="bottomBtnBox">
            <el-button type="info" @click="returnPage">返回</el-button>
            <el-button type="primary" @click="addToServe" v-if="pageMode == 'add'">确定</el-button>
            <el-button type="primary" @click="editToServe" v-if="pageMode == 'edit'">编辑</el-button>
        </div>
    </div>
</template>

<script>
import { getWebSiteId, getUseType } from '@/utils/auth'
//表格标题
import tableTitle from './components/tableTitle.vue';
//引入tag标签组件
import tagInput from '../../components/InputTag/index.vue';
//引入公用样式
import '@/styles/global.less';
//引入富文本编辑器
import myEditor from '../../components/edit/myEditor.vue';

export default {
    components: {
        tableTitle,
        tagInput,
        myEditor,
    },
    data() {
        const validateEmpty = (rule, value, callback) => {
            if (value == '') {
                callback(new Error('该项不能为空！'))
            } else {
                callback()
            }
        }
        const validateArray = (rule, value, callback) => {
            if (value.length == 0) {
                callback(new Error('该项不能为空！'))
            } else {
                callback()
            }
        }
        let self = this;
        return {
            pageMode: 'add',//页面模式 add=新建 edit=编辑 view=查看
            pageName: 'messageReviewList',//页面名称
            formLabelWidth: '120px',
            creatNews_user_type: 0,//用户身份
            tableDivTitle:"添加留言",
            tags: [],//标签数组
            website_column_arr: [],//网系列表
            column_id: [],//选择的网系
            form: {
                column_id:0,//网站属性id
                title:"",//留言标题
                keyword: "",//留言关键词
                description: "",//留言描述
                content: "",//留言内容
                reply:"",//回复内容
            },
            formRules: {
                title: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                content: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                column_id: [{ type: 'array', required: true, trigger: 'change', message: '必须选择一个网系！' }],
            },
        };
    },
    methods: {
        //拆解标签
        updateTags(newTags) {
            this.tags = newTags;
            this.form.keyword = newTags.join(',');
        },
        //获得所有网系
        getwebsiteColumn() {
            let that = this;
            this.$store.dispatch('pool/getwebsiteColumn').then(res => {
                let arrData = this.transformData(res.data)
                this.website_column_arr = arrData;
            })
        },
        transformData(arrData) {
            let that = this;
            return arrData.map(item => {
                let newItem = {
                    label: item.column_name,
                    value: item.id
                };
                if (item.children && item.children.length > 0) {
                    newItem.children = that.transformData(item.children);
                }
                return newItem;
            });
        },
        //提交表单
        addToServe() {
            console.log(this.form)
            //表单验证
            this.$refs.form.validate(valid => {
                if (valid) {
                    //获得最后一位
                    if (Array.isArray(this.form.column_id) && this.form.column_id.length > 0) {
                        this.form.column_id = this.form.column_id[this.form.column_id.length - 1];
                    }
                    this.$store.dispatch('news/addMessage',this.form).then(res => {
                        if(res.code == 200) {
                            console.log(res)
                            this.$router.push({
                                path: '/' + this.$route.query.page,
                            })
                            this.$message.success("留言添加成功！");
                        } else {
                            this.$message.error(res.message);
                        }
                    })
                }
            })
        },
        //编辑表单
        editToServe() {
            console.log(this.form)
            //表单验证
            this.$refs.form.validate(valid => {
                if (valid) {
                    //添加留言id
                    this.form.id = this.$route.query.id;
                    //获得最后一位
                    if (Array.isArray(this.form.column_id) && this.form.column_id.length > 0) {
                        this.form.column_id = this.form.column_id[this.form.column_id.length - 1];
                    }
                    this.$store.dispatch('news/upMessage',this.form).then(res => {
                        if(res.code == 200) {
                            console.log(res)
                            this.$router.push({
                                path: '/' + this.$route.query.page,
                            })
                            this.$message.success("留言编辑成功！");
                        } else {
                            this.$message.error(res.message);
                        }
                    })
                }
            })
        },
        //清理表单
        cleatForm() {
            this.tags = [];
            this.website_column_arr = [];
            this.column_id = [];
            this.form.column_id = 0;
            this.form.title = "";
            this.form.keyword = "";
            this.form.description = "";
            this.form.content = "";
            this.form.reply = "";
            this.pageMode = "add"
            delete this.form.id;
        },
        //回显数据
        getMainData(id) {
            this.$store.dispatch('news/getMessageInfo',{id:id}).then(res => {
                if(res.code == 200) {
                   this.form.column_id = res.data.column_arr_id;
                   this.form.title = res.data.title;
                   this.form.keyword = res.data.keyword;
                   this.form.description = res.data.description;
                   this.form.content = res.data.content;
                   this.form.reply = res.data.reply;
                   this.tags = res.data.keyword.split(',');
                } else {
                    this.$message.error(res.message);
                }
            })
        },
        returnPage(){
            let pagename = this.$route.query.page
            console.log(this.$route.query.page)
            this.$router.push({
                path: "/" + pagename,
            })
        }
    },
    mounted() {
        //1.清理表单
        this.cleatForm();
        //2.获得用户身份
        this.creatNews_user_type = getUseType()
        //3.获得站点id
        this.websiteid = getWebSiteId()
        //4.获得所有网系
        this.getwebsiteColumn();
        //5.判断是新建还是回显
        //5.1 新建留言
        if (this.$route.query.id == undefined && this.$route.query.type == 'add') {
            this.pageMode = "add"
            this.pageName = this.$route.query.page;
        }
        //5.2 编辑留言
        if(this.$route.query.id != undefined && this.$route.query.type == 'edit') {
            this.pageMode = "edit";
            this.pageName = this.$route.query.page;
            this.getMainData(this.$route.query.id)
        }
        //5.3 查看留言
        if(this.$route.query.id != undefined && this.$route.query.type == 'view') {
            this.pageMode = "view";
            this.pageName = this.$route.query.page;
            this.getMainData(this.$route.query.id)
        }
    }
};
</script>

<style scoped lang="less">
.contentBox {
    padding: 5px 15px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    background: #F5F7FA;
    ::v-deep * {
        color: #C0C4CC;
    }
}

//执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
::v-deep .custom-form-item>.el-form-item__label {
    line-height: 140px !important;
}
::v-deep .custom-textarea .el-textarea__inner {
    resize: none;
    /* 禁止用户拖拽调整大小 */
}
::v-deep .custom-align-right .el-form-item__label {
    text-align: right;
    /* 设置标签文字右对齐 */
}
::v-deep .el-popper {
    height: 500px;
}
::v-deep .el-select {
    width: 100%;
    /* 禁止用户拖拽调整大小 */
}
::v-deep .el-input-group__prepend {
    color: black !important;
}
.formLabelFloatBox {
    margin-bottom: 10px;
    position: relative;
    .formLabeladdIcon {
        position: absolute;
        right: 45px;
        top: 5px;
        width: 38px;
        height: 24px;
    }
    .formLabelDelIcon {
        position: absolute;
        right: 5px;
        top: 5px;
        width: 38px;
        height: 24px;
    }
}
//该项不能为空几个字的位置
::v-deep .el-form-item__error {
    color: #ff4949;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: relative;
    // top: 22%;
    // left: 93%;
}
//输入框距离底部的距离
::v-deep .el-form-item {
    margin-bottom: 5px;
}
//图片提示文字样式
.photo_tips {
    font-size: 12px;
    color: #999;
}
.notchooseImgDiv img {
    width: 120px;
    height: 120px;
    margin-left: 11px;
}
.notchooseImgDiv .notchooseImgDivText {
    font-size: 14px;
    margin-top: -25px;
}
// 执行v-deep穿透scope选择器 end------------------------------------------------------------>
</style>