scrm-vue/src/scrm_pages/weixinmp/components/EditKWReplyForm.vue

<template>
    <div id="edit-kw-reply-form-box">
        <el-dialog title="编辑关键词回复" :visible.sync="editKWReplyFormVisible" width="700px" >
            <el-form ref="replyForm" :rules="replyRules" :model="form" label-width="90px">
                <el-form-item label="规则名称:" required prop="message_regular_name">
                    <el-input v-model="form.message_regular_name"></el-input>
                </el-form-item>
                <el-form-item label="模式:" required prop="message_key_type">
                    <el-radio-group v-model="form.message_key_type">
                        <el-radio :label="item.id" :value="item.id" v-for="(item, index) in keyTypeOptions" :key="index" >{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="关键字:" required prop="message_key_name">
                    <el-input v-model="form.message_key_name"></el-input>
                </el-form-item>
                <el-form-item label="回复内容:" required prop="message_content">
                    <el-input v-model="form.message_content" type="textarea" rows="4"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editKWReplyFormVisible = false">取消</el-button>
                <el-button
                type="primary"
                @click="submitForm('replyForm')"
                >保 存
                </el-button>
            </div>
        </el-dialog>  
    </div>
</template>

<script>
import {EditKeyWordReply} from "@/api/mpwechat/mpreply";

export default {
    name:'EditReplyForm',
    props:{
        replysData:{
            type: Array,
            default: function () {
                return [];
            }
        },
        replyIndex:{
            type:Number,
            default:-1,
        },
        form:{
            id:0,
            message_regular_name:'',
            message_key_type:1,
            message_key_name:'',
            message_content:'',
        },
    },
    data(){
        return {
            editKWReplyFormVisible:false,
            keyTypeOptions:[
                {id:1, name:'半匹配'},
                {id:2, name:'全匹配'},
            ],
            replyRules: {
                message_regular_name: [{required: true, message: "请填写规则名称",},],
                message_key_type: [{required: true, message: "请选择模式",},],
                message_key_name: [{required: true, message: "请填写关键字",},],
                message_content: [{required: true, message: "请填写回复内容",},],
            },
            
        }
    },
    methods:{
        open:function(){
            this.editKWReplyFormVisible = true;
        },
        resetForm(formName) {
            if (typeof(this.$refs[formName]) !='undefined') {
                this.$refs[formName].resetFields();
            }
        },
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    EditKeyWordReply(this.form.id, this.form).then(response=>{
                        var res = response.data;
                        if(res.state === 1) {
                            var message = res.data.message;
                            this.replysData.splice(this.replyIndex, 1, message);
                            this.resetForm("replyForm");
                            this.editKWReplyFormVisible = false;
                            this.$message.success("编辑成功");
                        }else {
                            this.$message.error(res.msg);
                        }
                    }).catch(e=>{});

                } else {
                    return false;
                }
            });
        },
    }
}
</script>