消息管理模块全部完成 2020年7月10日17:52:18

src/router/routes.js

@@ -6,7 +6,7 @@ import SubDeviceAdmin from '../views/deviceManagement/SubDeviceAdmin.vue'
 /* 区域管理 */
 import AreaInfo from '../views/areaManagement/AreaInfo.vue'
 /* 消息管理 */
-import MessageMode from '../views/messageManagement/MessageMode.vue'
+import MessageBind from '../views/messageManagement/MessageBind.vue'
 import MessagePoint from '../views/messageManagement/MessagePoint.vue'
 import MessageServicMer from '../views/messageManagement/MessageServicMer.vue'
 import MessageTemplate from '../views/messageManagement/MessageTemplate.vue'
@@ -16,7 +16,7 @@ import MessageTemplate from '../views/messageManagement/MessageTemplate.vue'
 import Aa from '../views/template/Aa.vue'
 import Ab from '../views/template/Ab.vue'
 import Ac from '../views/template/Ac.vue'
-import Add from '../views/template/Ad.vue'
+import Ad from '../views/template/Ad.vue'
 import Ae from '../views/template/Ae.vue'
 import Af from '../views/template/Af.vue'
 
@@ -57,9 +57,9 @@ export default [
 			},
 			// 消息管理
 			{
-				path: '/messageMode',
-				name: 'messageMode',
-				component: MessageMode
+				path: '/messageBind',
+				name: 'messageBind',
+				component: MessageBind
 			},
 			{
 				path: '/messagePoint',
@@ -94,9 +94,9 @@ export default [
 				component: Ac
 			},
 			{
-				path: '/add',
-				name: 'add',
-				component: Add
+				path: '/ad',
+				name: 'ad',
+				component: Ad
 			},
 			{
 				path: '/ae',

src/views/Home/mencCofig.js

@@ -46,9 +46,9 @@ export const menuData = [
         disabled: false,
         childList: [ 
             {
-                optionName: '消息方式',
+                optionName: '消息绑定',
                 index: '3-1',
-                routerName: "messageMode"
+                routerName: "messageBind"
             },
             {
                 optionName: '消息点',
@@ -93,7 +93,7 @@ export const menuData = [
             {
                 optionName: '模板 4',
                 index: '100-4',
-                routerName: "add"
+                routerName: "ad"
             },
             {
                 optionName: '模板 5',

src/views/messageManagement/MessageBind.vue

@@ -0,0 +1,339 @@
+<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="请选择发送方式">
+                                <el-option
+                                    v-for="item in messageTemplateList"
+                                    :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="请选择发送方式">
+                                <el-option
+                                    v-for="item in messageServicMerList"
+                                    :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: [],
+            messageServicMerList: [],
+            // 发送方式的 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.dyForm.templateCode = res[0].code;
+                },
+                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.dyForm.providerId = res[0].name;
+                },
+                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("服务器发生异常");
+                }
+            });
+        },
+        // 
+        findSendMethodName(methodCode) {
+           
+        }
+    }
+};
+
+</script>
+

src/views/messageManagement/MessageMode.vue

@@ -1,35 +0,0 @@
-<template>
-    <div class="MessageMode">
-        <h1>MessageMode  MessageMode </h1>
-    </div>
-</template>
-<script>
-import { mapActions } from "vuex";
-
-export default {
-    name: "MessageMode",
-    data() {
-        return {};
-    },
-    created() {},
-    methods: {
-		...mapActions(["fetch"]),
-		getMessageMode() {
-            this.fetch({
-                api: "/message/method/list",
-                method: "GET",
-                data: {},
-                success: res => {
-                    console.log(res)
-                },
-                fail: err => {
-                    console.log(err);
-                    if (err.errMsg) this.$message.error(err.errMsg);
-                    else this.$message.error("服务器发生异常");
-                }
-            });
-        }
-    }
-};
-</script>
-

src/views/messageManagement/MessageServicMer.vue

@@ -92,7 +92,7 @@ export default {
     },
     methods: {
         ...mapActions(["fetch"]),
-        // 获取消息点
+        // 获取服务商 列表
         getMessageServicMer() {
             this.fetch({
                 api: "/message/provider/list",

src/views/messageManagement/MessageTemplate.vue

@@ -101,7 +101,7 @@ export default {
     },
     methods: {
         ...mapActions(["fetch"]),
-        // 获取消息点
+        // 获取消息模板 列表
         getMessageTemplate() {
             this.fetch({
                 api: "/message/template/list",

src/views/template/Ac.vue

@@ -1,27 +1,226 @@
 <template>
-    <div class="Ad">
-        <h1>Ad33</h1>
+    <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="请选择发送方式">
+                                <el-option
+                                    v-for="item in messageTemplateList"
+                                    :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="请选择发送方式">
+                                <el-option
+                                    v-for="item in messageServicMerList"
+                                    :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: "Ac",
+    name: "MessageBind",
     data() {
-        return {};
+        return {
+            tableData: [],
+            showDialog: false,
+            dyForm: {
+                methodCode: null,
+                pointCode: null,
+                templateCode: null,
+                providerId: null
+            },
+            sendMethodList: [],
+            messagePointList: [],
+            messageTemplateList: [],
+            messageServicMerList: [],
+            // 发送方式的 code 与 name对照表
+            comparisonTable: {},
+            rules,
+            isAdd: true
+        };
+    },
+    mounted() {
+        // 获取消息绑定 列表
+        this.getMessageBind();
+        // 获取发送方式 列表
+        this.getSendMethodList();
+        // 获取消息点 列表
+        this.getMessagePoint();
+        // 获取消息模板 列表
+        this.getMessageTemplate();
+        // 获取服务商 列表
+        this.getMessageServicMer();
     },
-    created() {},
+    
     methods: {
         ...mapActions(["fetch"]),
-        get() {
+        // 获取消息绑定 列表
+        getMessageBind() {
             this.fetch({
-                api: "aaa",
+                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);
@@ -29,7 +228,112 @@ export default {
                     else this.$message.error("服务器发生异常");
                 }
             });
+        },
+        // 获取消息模板 列表
+        getMessageTemplate() {
+            this.fetch({
+                api: "/message/template/list",
+                method: "GET",
+                data: {},
+                success: res => {
+                    this.messageTemplateList = res;
+                    this.dyForm.templateCode = res[0].code;
+                },
+                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.dyForm.providerId = res[0].name;
+                },
+                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("服务器发生异常");
+                }
+            });
+        },
+        // 
+        findSendMethodName(methodCode) {
+           
         }
     }
 };
+
 </script>
+