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

<template>
    <div class="MessagePoint">
        <h1>MessagePoint MessagePoint 9999</h1>
        <el-button @click="add" type="primary" icon="el-icon-document-add">添加</el-button>
        <el-table :data="tableData" border style="width: 40%">
            <el-table-column prop="id" label="序号" width="180"></el-table-column>
            <el-table-column prop="code" label="消息点编码" width="180"></el-table-column>
            <el-table-column label="地址">
                <template slot-scope="scope">
                    <p>{{scope.row.description}}</p>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <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 v-model="dyForm.description"></el-input>
                        </el-form-item>
                        <el-form-item label="消息点描述:">
                            <el-input type="textarea" v-model="dyForm.remark"></el-input>
                        </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: "MessagePoint",
    data() {
        return {
            tableData: [],
            showDialog: false,
            dyForm: {
                code: null,
                description: "",
                remark: ""
            },
            rules,
            isAdd: true
        };
    },
    created() {},
    mounted() {
        this.getMessagePoint();
    },
    methods: {
        ...mapActions(["fetch"]),
        // 获取消息点
        getMessagePoint() {
            this.fetch({
                api: "/message/point/list",
                method: "GET",
                data: {},
                success: res => {
                    console.log(res);
                    this.tableData = res;
                    // this.subDeviceList = res;
                },
                fail: err => {
                    console.log(err);
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                }
            });
        },
        add() {
            this.isAdd = true;
            this.showDialog = true;
        },
        edit(row) {
            this.isAdd = false;
            this.showDialog = true;
            this.dyForm.id = row.id;
        },
        del(row) {
            this.fetch({
                api: "/message/point/delete",
                method: "POST",
                data: {id:row.id},
                success: res => {
                    console.log(res);
                    this.getMessagePoint();
                    this.$message,success("删除成功！")
                    // this.$message.success(res.msg);
                },
                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.dyForm
                        ? this.reqSave("/message/point/add")
                        : this.reqSave("/message/point/update");
                } else {
                    return false;
                }
            });
        },
        // 请求 保存 （添加 和 更新）
        reqSave(api) {
            this.fetch({
                api,
                method: "POST",
                data: this.dyForm,
                success: res => {
                    console.log(res);
                    this.getMessagePoint();
                    this.$message.success('添加消息点成功！')
                },
                fail: err => {
                    console.log(err);
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                }
            });
        }
    }
};
</script>