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

<template>
    <div class="MessageBind">
        <el-button @click="add" type="primary" icon="el-icon-document-add">添加</el-button>
        <el-table :data="tableData" border>
            <el-table-column prop="id" label="序号" width="120"></el-table-column>

            <el-table-column label="发送方式" width="100">
                <template slot-scope="scope">
                    <span v-for="item in sendMethodList" :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">
                    <span v-for="item in messagePointList" :key="item.code">
                        <el-tag
                            size="small"
                            type="info"
                            v-if="scope.row.pointCode == item.code"
                        >{{item.description}}</el-tag>
                    </span>
                </template>
            </el-table-column>

            <el-table-column label="模板">
                <template slot-scope="scope">
                    <span v-for="item in messageTemplateList" :key="item.code">
                        <el-tag
                            size="small"
                            type="info"
                            v-if="scope.row.templateCode == item.code"
                        >{{item.description}}</el-tag>
                    </span>
                </template>
            </el-table-column>

            <el-table-column label="服务商">
                <template slot-scope="scope">
                    <span v-for="item in messageServicMerList" :key="item.code">
                        <el-tag
                            size="small"
                            type="success"
                            v-if="scope.row.providerId == item.id"
                        >{{item.name}}</el-tag>
                    </span>
                </template>
            </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" label-width="140px">
                        <!-- <el-form-item label="消息点编码:" prop="point">
                            <el-input v-model="dyForm.code"></el-input>
                        </el-form-item>-->

                        <el-form-item label="发送方式">
                            <el-select v-model="dyForm.methodCode" placeholder="请选择发送方式">
                                <el-option
                                    v-for="item in sendMethodList"
                                    :label="item.description"
                                    :value="item.code"
                                    :key="item.code"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="消息点">
                            <el-select v-model="dyForm.pointCode" placeholder="请选择发送方式">
                                <el-option
                                    v-for="item in messagePointList"
                                    :label="item.description"
                                    :value="item.code"
                                    :key="item.code"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="模板">
                            <el-select v-model="dyForm.templateCode" placeholder="请选择发送方式" @change="templateInputChange">
                                <el-option
                                    v-for="item in TemplateList"
                                    :label="item.description+'(' + comparisonTable[item.methodCode]+')'"
                                    :value="item.code"
                                    :key="item.code"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="服务商">
                            <el-select v-model="dyForm.providerId" placeholder="请选择发送方式" @change="providerIdChange">
                                <el-option
                                    v-for="item in ServicMerList"
                                    :label="item.name+'(' + comparisonTable[item.methodCode]+')'"
                                    :value="item.id"
                                    :key="item.id"
                                ></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: "MessageBind",
    data() {
        return {
            tableData: [],
            showDialog: false,
            dyForm: {
                methodCode: null,
                pointCode: null,
                templateCode: null,
                providerId: null
            },
            sendMethodList: [],
            messagePointList: [],
            messageTemplateList: [],
            TemplateList:[],
            messageServicMerList: [],
            ServicMerList: [],
            // 发送方式的 code 与 name对照表
            comparisonTable: {},
            rules,
            isAdd: true
        };
    },
    mounted() {
        // 获取消息绑定 列表
        this.getMessageBind();
        // 获取发送方式 列表
        this.getSendMethodList();
        // 获取消息点 列表
        this.getMessagePoint();
        // 获取消息模板 列表
        this.getMessageTemplate();
        // 获取服务商 列表
        this.getMessageServicMer();
    },

    methods: {
        ...mapActions(["fetch"]),
        // 获取消息绑定 列表
        getMessageBind() {
            this.fetch({
                api: "/message/bind/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("服务器发生异常");
                }
            });
        },

        // 获取发送方式 列表
        getSendMethodList() {
            this.fetch({
                api: "/message/method/list",
                method: "GET",
                data: {},
                success: res => {
                    this.sendMethodList = res;
                    this.dyForm.methodCode = res[0].code;

                    let comparisonTable = {};
                    res.forEach(item => {
                        comparisonTable[item.code] = item.description;
                    });
                    this.comparisonTable = comparisonTable;
                },
                fail: err => {
                    console.log(err);
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                }
            });
        },
        // 获取消息点 列表
        getMessagePoint() {
            this.fetch({
                api: "/message/point/list",
                method: "GET",
                data: {},
                success: res => {
                    console.log(res);
                    this.messagePointList = res;
                    this.dyForm.pointCode = res[0].code;
                },
                fail: err => {
                    console.log(err);
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                }
            });
        },
        // 获取消息模板 列表
        getMessageTemplate() {
            this.fetch({
                api: "/message/template/list",
                method: "GET",
                data: {},
                success: res => {
                    this.messageTemplateList = res;
                    this.TemplateList = res;
                    this.dyForm.templateCode = res[0].code;
                    this.getMessageTemplateFinish = true
                },
                fail: err => {
                    console.log(err);
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                }
            });
        },
        // 获取服务商 列表
        getMessageServicMer() {
            this.fetch({
                api: "/message/provider/list",
                method: "GET",
                data: {},
                success: res => {
                    console.log(res);
                    this.messageServicMerList = res;
                    this.ServicMerList = res;
                    this.dyForm.providerId = res[0].name;
                    this.getMessageServicMerFinish = true
                },
                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 = {
            //     methodCode: this.sendMethodList[0].code,
            //     pointCode: this.messagePointList[0].code,
            //     templateCode: this.messageTemplateList[0].code,
            //     providerId: this.messageServicMerList[0].id,
            // };
        },
        edit(row) {
            console.log(row);
            this.isAdd = false;
            this.showDialog = true;
            this.dyForm = row;
        },
        del(row) {
            this.fetch({
                api: "/message/bind/delete",
                method: "POST",
                data: { id: row.id },
                success: res => {
                    console.log(res);
                    this.getMessageBind();
                    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/bind/add")
                        : this.reqSave("/message/bind/update");
                } else {
                    return false;
                }
            });
        },
        // 请求 保存 （添加 和 更新）
        reqSave(api) {
            this.fetch({
                api,
                method: "POST",
                data: this.dyForm,
                success: res => {
                    console.log(res);
                    this.getMessageBind();
                    this.$message.success("添加消息模板成功！");
                    this.showDialog = false;
                },
                fail: err => {
                    console.log(err);
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                }
            });
        },
        templateInputChange(value) {
            console.log('templateInputChange')
            console.log(value)
            console.log(this.dyForm.templateCode)
            let filterCondition = this.findSendMethodName(this.messageTemplateList, value, "code", "methodCode")
            console.log(filterCondition)
            let arr = this.messageTemplateList.filter(item => {
                return item.methodCode == filterCondition
            })
            console.log(arr)
            this.ServicMerList = arr
        },

        providerIdChange(value) {
            console.log('providerIdChange')
            console.log(value)
            console.log(this.dyForm.providerId)
            let filterCondition = this.findSendMethodName(this.messageServicMerList, this.dyForm.providerId, "id", "methodCode")
            console.log(filterCondition)
            let arr = this.messageServicMerList.filter(item => {
                return item.methodCode == filterCondition
            })
            this.TemplateList = arr
        },
        // 根据code查找name
        findSendMethodName(arr, code, iName, oName) {
            let a = arr.find(item => {
                return item[iName] == code;
            });
            if(a) {
                return a[oName];
            } else {
                return undefined
            }
        }
    }
};
</script>