huimv.cloud.client/src/views/template/Aa.vue

<template>
    <div class="MessageServicMer">
        <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="服务商id" width="180"></el-table-column>
            <el-table-column prop="name" 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="操作" 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="140px">
                        <el-form-item label="服务商名:" prop="name">
                            <el-input v-model="dyForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="服务商配置信息:">
                            <el-input v-model="dyForm.info" type="textarea"></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>
                            <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: "MessageServicMer",
    data() {
        return {
            tableData: [],
            showDialog: false,
            dyForm: {
                name: "",
                info: "",
                methodCode: ""
            },
            sendMethodList: "",
            rules,
            isAdd: true
        };
    },
    created() {},
    mounted() {
        this.getMessageServicMer();
        this.getSendMethodList();
    },
    methods: {
        ...mapActions(["fetch"]),
        // 获取消息点
        getMessageServicMer() {
            this.fetch({
                api: "/message/provider/list",
                method: "GET",
                data: {},
                success: res => {
                    console.log(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;
                    console.log("sssssssss")
                    this.dyForm.methodCode = res[0].code;
                    console.log(this.dyForm)
                },
                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: null,
                description: "",
                remark: ""
            };
        },
        edit(row) {
            this.isAdd = false;
            this.showDialog = true;
            this.dyForm = row;
        },
        del(row) {
            this.fetch({
                api: "/message/point/delete",
                method: "POST",
                data: { id: row.id },
                success: res => {
                    console.log(res);
                    this.getMessageServicMer();
                    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.isAdd
                        ? 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.getMessageServicMer();
                    this.$message.success("添加消息点成功！");
                },
                fail: err => {
                    console.log(err);
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                }
            });
        }
    }
};
</script>