huimv.cloud.client/src/views/messageManagement/MessageTemplate.vue

<template>
    <div class="MessageTemplate">
        <el-button @click="add" type="primary" icon="el-icon-document-add">添加</el-button>
        <el-table :data="tableData" border style="width: 80%">
            <el-table-column prop="id" label="序号" width="120"></el-table-column>
            <el-table-column prop="code" label="模板编码" width="120"></el-table-column>
            <el-table-column label="发送方式" width="100">
                <template slot-scope="scope">
                    <!-- <p>{{scope.row.description}}</p> -->
                    <span v-for="item in sendMethod" :key="item.code">
                        <el-tag size="small" type="warning" v-if="scope.row.methodCode == item.code" >{{item.description}}</el-tag>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="模板描述">
                <template slot-scope="scope">
                    <p>{{scope.row.description}}</p>
                </template>
            </el-table-column>
            <el-table-column prop="content" label="模板内容"></el-table-column>
            <el-table-column prop="providerTemplateCode" label="服务商模板编码" width="150"></el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                    <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
                        <el-button slot="reference" type="text" size="small">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :title="isAdd?'添加消息模板':'编辑消息模板'" :visible.sync="showDialog">
            <el-row type="flex">
                <el-col :span="14">
                    <el-form
                        ref="dyForm"
                        :model="dyForm"
                        :rules="rules"
                        label-width="100px"
                        class="demo-dynamic"
                    >
                        <el-form-item label="模板编码:" prop="code">
                            <el-input v-model="dyForm.code"></el-input>
                        </el-form-item>
                        <el-form-item label="模板描述:" prop="description">
                            <el-input type="textarea" v-model="dyForm.description"></el-input>
                        </el-form-item>
                        <el-form-item label="模板内容:">
                            <el-input type="textarea" v-model="dyForm.content"></el-input>
                        </el-form-item>
                        <el-form-item label="服务商模板编码:">
                            <el-input v-model="dyForm.providerTemplateCode"></el-input>
                        </el-form-item>
                        <el-form-item label="发送方式" prop="region">
                            <el-select v-model="dyForm.methodCode" placeholder="请选择发送方式">
                                <el-option v-for="item in sendMethod"  :label="item.description" :value="item.code" :key="item.code"></el-option>

                                <!-- <el-option label="区域二" value="beijing"></el-option> -->
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="showDialog=false">取 消</el-button>
                            <el-button type="primary" @click="submitForm('dyForm')">保 存</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>
<script>
import { mapActions } from "vuex";
const rules = {
    code: [{ required: true, message: "请输入消息模板编码", trigger: "blur" }],
    description: [
        { required: true, message: "请输入消息点描述", trigger: "blur" }
    ]
};

export default {
    name: "MessageTemplate",
    data() {
        return {
            tableData: [],
            showDialog: false,
            dyForm: {
                code: "",
                description: "",
                content: "",
                providerTemplateCode: "",
                methodCode: ""
            },
            sendMethod: "",
            rules,
            isAdd: true
        };
    },
    mounted() {
        this.getMessageTemplate();
        this.getSendMethod();
    },
    methods: {
        ...mapActions(["fetch"]),
        // 获取消息点
        getMessageTemplate() {
            this.fetch({
                api: "/message/template/list",
                method: "GET",
                data: {},
                success: res => {
                    this.tableData = res;
                },
                fail: err => {
                    console.log(err);
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                }
            });
        },
        // 获取发送方式
        getSendMethod() {
            this.fetch({
                api: "/message/method/list",
                method: "GET",
                data: {},
                success: res => {
                    this.sendMethod = res;
                    this.dyForm.methodCode = res[0].code
                },
                fail: err => {
                    console.log(err);
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                }
            });
        },
        add() {
            this.isAdd = true;
            this.showDialog = true;
            this.dyForm = {
                code: "",
                description: "",
                content: "",
                providerTemplateCode: "",
                methodCode: this.sendMethod[0].code
            }
        },
        edit(row) {
            console.log(row)
            this.isAdd = false;
            this.showDialog = true;
            this.dyForm = row
        },
        del(row) {
            this.fetch({
                api: "/message/template/delete",
                method: "POST",
                data: { id: row.id },
                success: res => {
                    console.log(res);
                    this.getMessageTemplate();
                    this.$message, success("删除成功！");
                },
                fail: err => {
                    console.log(err);
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                }
            });
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    console.log(this.dyForm);
                    this.isAdd
                        ? this.reqSave("/message/template/add")
                        : this.reqSave("/message/template/update");
                } else {
                    return false;
                }
            });
        },
        // 请求 保存 （添加 和 更新）
        reqSave(api) {
            this.fetch({
                api,
                method: "POST",
                data: this.dyForm,
                success: res => {
                    console.log(res);
                    this.getMessageTemplate();
                    this.$message.success("添加消息模板成功！");
                    this.showDialog = false;
                },
                fail: err => {
                    console.log(err);
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                }
            });
        }
    }
};
</script>