<template>
    <el-container>
        <el-main>
            <el-card style="background-color: #F5F7FA">
                <!-- 搜素区域 -->
                <div>
                    <el-row>
                        <el-col :span="7">
                            <el-input v-model="exchange_queryInfo.exchangeName"
                                      size="medium"
                                      placeholder="交换机名称" clearable>
                                <template  slot="prepend" ><i class="el-icon-user"></i>用户名称</template>
                            </el-input>
                        </el-col>
                        <el-col :span="7">
                            <el-cascader
                                    size="medium" filterable
                                    v-model="exchange_queryInfo.virtualHostId"
                                    :options="exchange_config.cascade.server_hostList"
                                    :show-all-levels="false"
                                    :change-on-select="false"
                                    clearable
                                    style="width: 80%"
                                    @change="cascadeQueryChange"
                                    :props="exchange_config.cascade.defaultParams"
                                    placeholder="请选择所属虚拟主机"></el-cascader>
                        </el-col>
                        <el-col :span="8">
                            <el-button type="warning" style="width:150px" size="medium" icon="el-icon-search" @click="exchange_getList">
                                查询交换机
                            </el-button>
                            <el-button type="primary" style="width:150px" size="medium" icon="el-icon-plus" @click="exchange_toAddDialog">
                                添加交换机
                            </el-button>
                        </el-col>
                    </el-row>
                </div>
                <!-- 列表区域 -->
                <div style="margin-top: 20px;">
                    <el-table :data="exchange_page.exchangeList" border v-loading="exchange_loading.listLoading"
                              @selection-change="exchange_selectChange" size="small"
                              element-loading-text="获取交换机列表，拼命加载中" width="232px"
                              :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}"
                              style="border-radius: 10px 10px 0px 0px;line-height: 25px;">
                        <el-table-column type="selection" width="55" align="center"></el-table-column>
                        <el-table-column type="index" align="center"></el-table-column>
                        <el-table-column label="交换机名称" prop="exchangeName" align="center"
                                         width="190"></el-table-column>
                        <el-table-column label="所属虚拟主机" prop="virtualHost.virtualHostName" align="center" width="190">
                        </el-table-column>
                        <el-table-column label="交换机类型" prop="exchangeType" align="center" width="160">
                        </el-table-column>
                        <el-table-column label="是否持久化" prop="durability" align="center" width="145">
                            <template slot-scope="scope">
                                <span v-if="scope.row.durability ===false">否</span>
                                <span v-if="scope.row.durability ===true">是</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="是否自动删除" prop="autoDelete" align="center" width="145">
                            <template slot-scope="scope">
                                <span v-if="scope.row.autoDelete ===false">否</span>
                                <span v-if="scope.row.autoDelete ===true">是</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="是否仅内部使用" prop="internal" align="center" width="145">
                            <template slot-scope="scope">
                                <span v-if="scope.row.internal ===false">否</span>
                                <span v-if="scope.row.internal ===true">是</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="扩展参数" prop="arguments" align="center" width="200">
                        </el-table-column>
                        <el-table-column label="相关描述" prop="description" align="center" width="300"></el-table-column>
                        <el-table-column label="操作" width="300px" align="center" fixed="right">
                            <template slot-scope="scope">
                                <!-- 路由键 style="width:50px;margin-left: 1px;"-->
                                <el-tooltip effect="dark" content="路由键" placement="top-start" :enterable="false">
                                    <el-button type="warning" icon="el-icon-link" size="small"
                                               @click="toRoutingKey(scope.$index,scope.row)">路由键
                                    </el-button>
                                </el-tooltip>
                                <!-- 编辑按钮 style="width:50px;margin-left: 1px;"-->
                                <el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
                                    <el-button type="primary" icon="el-icon-edit" size="small"
                                               @click="exchange_toEditDialog(scope.$index,scope.row)">编辑
                                    </el-button>
                                </el-tooltip>
                                <!-- 删除按钮 style="width:50px;margin-left: 1px;"-->
                                <el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
                                    <el-button type="danger" icon="el-icon-delete" size="small"
                                               :loading="exchange_loading.delLoading"
                                               @click="exchange_remove(scope.$index,scope.row)">删除
                                    </el-button>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!--分页区域-->
                <div style="margin-top: 10px">
                    <el-row :gutter="24">
                        <el-col :span="5">
                            <el-button type="danger" icon="el-icon-delete"
                                       :loading="exchange_loading.batchDelLoading"
                                       :disabled="this.exchange_page.selectList.length===0"
                                       @click="exchange_batchRemove">批量删除
                            </el-button>
                        </el-col>
                        <el-col :span="10" style="margin-top: 5px">
                            <el-pagination
                                    @size-change="exchange_handleSizeChange"
                                    @current-change="exchange_handleCurrentChange"
                                    :current-page="exchange_queryInfo.pageNum"
                                    :page-sizes="[10,20,30,50]"
                                    :page-size="exchange_queryInfo.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="exchange_page.total">
                            </el-pagination>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
            <!-- 增加，对话框区域 -->
            <div>
                <el-dialog title="添加交换机"
                           :visible.sync="exchange_dialog.addDialog"
                           style="margin-top: -50px"
                           width="60%" text-align="center" @close="exchange_addDialogClosed">
                    <el-form :inline="true" label-width="145px" status-icon style="margin-top: -10px"
                             :model="exchange_addForm" :rules="exchange_addFormRules" ref="exchange_addFormRef" align="center">
                        <el-form-item label="" prop="exchangeName">
                            <el-input v-model="exchange_addForm.exchangeName" style="width:300px" size="small" clearable
                                      placeholder="请输入交换机名称">
                                <template  slot="prepend" >交换机名称</template>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="" prop="virtualHostId">
                            <el-cascader
                                    clearable filterable
                                    style="width: 300px" size="small"
                                    v-model="exchange_addForm.virtualHostId"
                                    @change="cascadeAddChange"
                                    :options="exchange_config.cascade.server_hostList"
                                    :show-all-levels="false"
                                    :change-on-select="false"
                                    :props="exchange_config.cascade.defaultParams"
                                    placeholder="请选择所属虚拟主机">
                            </el-cascader>
                        </el-form-item>
                        <el-form-item label="" prop="exchangeType">
                            <el-select v-model="exchange_addForm.exchangeType" style="width: 300px" clearable
                                       size="small" disabled
                                       placeholder="请选择交换机类型">
                                <el-option
                                        v-for="item in exchangeTypeList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" prop="durability">
                            <el-select v-model="exchange_addForm.durability" style="width: 300px" clearable size="small"
                                       placeholder="请选择是否持久化">
                                <el-option
                                        v-for="item in booleanList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" prop="autoDelete">
                            <el-select v-model="exchange_addForm.autoDelete" style="width: 300px" clearable size="small"
                                       placeholder="请选择是否自动删除">
                                <el-option
                                        v-for="item in booleanList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" prop="internal">
                            <el-select v-model="exchange_addForm.internal" style="width: 300px" clearable size="small"
                                       placeholder="是否仅内部使用">
                                <el-option
                                        v-for="item in booleanList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" prop="arguments">
                            <el-input v-model="exchange_addForm.arguments" style="width:300px" clearable size="small"
                                      type="textarea" autosize :rows="1"
                                      placeholder="扩展参数（JSON格式）">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="" prop="description">
                            <el-input v-model="exchange_addForm.description" style="width:300px" clearable size="small"
                                      type="textarea" autosize :rows="1"
                                      placeholder="相关描述">
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -20px">
                        <el-button type="info" @click="exchange_dialog.addDialog = false" size="medium"
                                   style="width: 100px;background-color: #6F8294;color: #ffffff">取消
                        </el-button>
                        <el-button type="primary" @click="exchange_add" :loading="exchange_loading.addLoading"
                                   size="medium" style="width: 100px">添加
                        </el-button>
                    </div>
                </el-dialog>
            </div>
            <!-- 编辑，对话框区域 -->
            <div>
                <el-dialog title="编辑交换机"
                           :visible.sync="exchange_dialog.editDialog"
                           style="margin-top: -50px"
                           width="60%" text-align="center" @close="exchange_editDialogClosed">
                    <el-form :inline="true" label-width="145px" status-icon style="margin-top: -10px" align="center"
                             :model="exchange_editForm" :rules="exchange_editFormRules" ref="exchange_editFormRef">
                        <el-form-item label="" prop="exchangeName">
                            <el-input v-model="exchange_editForm.exchangeName" style="width:300px" size="small"
                                      clearable disabled
                                      placeholder="请输入交换机名称">
                                <template  slot="prepend" >服务器名称</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="" prop="virtualHostId">
                            <el-cascader
                                    disabled filterable
                                    clearable style="width: 300px" size="small"
                                    v-model="exchange_editForm.virtualHostId"
                                    @change="cascadeEditChange"
                                    :options="exchange_config.cascade.server_hostList"
                                    :show-all-levels="false"
                                    :change-on-select="false"
                                    :props="exchange_config.cascade.defaultParams"
                                    placeholder="请选择所属虚拟主机"></el-cascader>
                        </el-form-item>
                        <el-form-item label="" prop="exchangeType">
                            <el-select v-model="exchange_editForm.exchangeType" style="width: 300px" clearable
                                       size="small" disabled
                                       placeholder="请选择交换机类型">
                                <el-option
                                        v-for="item in exchangeTypeList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" prop="durability">
                            <el-select v-model="exchange_editForm.durability" style="width: 300px" clearable
                                       size="small" disabled
                                       placeholder="请选择是否持久化">
                                <el-option
                                        v-for="item in booleanList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" prop="autoDelete">
                            <el-select v-model="exchange_editForm.autoDelete" style="width: 300px" clearable
                                       size="small" disabled
                                       placeholder="请选择是否自动删除">
                                <el-option
                                        v-for="item in booleanList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" prop="internal">
                            <el-select v-model="exchange_editForm.internal" style="width: 300px" disabled clearable
                                       size="small"
                                       placeholder="是否仅内部使用">
                                <el-option
                                        v-for="item in booleanList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" prop="arguments">
                            <el-input v-model="exchange_editForm.arguments" style="width:300px" disabled clearable
                                      size="small" type="textarea" autosize :rows="1"
                                      placeholder="扩展参数（JSON格式）">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="" prop="description">
                            <el-input v-model="exchange_editForm.description" style="width:300px" clearable size="small"
                                      type="textarea" autosize :rows="1"
                                      placeholder="相关描述">
                            </el-input>
                        </el-form-item>
                    </el-form>

                    <div slot="footer" class="dialog-footer" align="center">
                        <el-button type="info" @click="exchange_dialog.editDialog = false" size="medium"
                                   style="width: 100px;background-color: #6F8294;color: #ffffff">取消
                        </el-button>
                        <el-button type="primary" @click="exchange_edit" :loading="exchange_loading.addLoading"
                                   size="medium"
                                   style="width: 100px">
                            编辑
                        </el-button>
                    </div>
                </el-dialog>
            </div>
        </el-main>
    </el-container>
</template>

<script>
    import {
        selectBusExchangeList,
        insertBusExchange,
        updateBusExchange,
        deleteBusExchange,
        batchRemoveBusExchange, getServerAndHostList, getHostList, getServerList,
    } from "../../api/message_bus";

    export default {
        name: "Exchange",

        data() {
            return {
                /**
                 * exchange，配置与参数
                 */
                exchange_config: {
                    // 所属虚拟主机名称
                    virtualHostName: '',
                    // 所有虚拟主机的基本信息
                    virtualHostList: [],
                    // 级联显示
                    cascade: {
                        // 服务器及虚拟主机列表
                        server_hostList: [],
                        defaultParams: {
                            label: 'aliasName',
                            value: 'id',
                            children: 'aliasList'
                        }
                    },
                },
                /**
                 *  exchange，搜索参数
                 */
                exchange_queryInfo: {
                    // 所属虚拟主机Id
                    virtualHostId: '',
                    // 交换机名称
                    exchangeName: '',
                    // 当前页数
                    pageNum: 1,
                    // 每页条数
                    pageSize: 10
                },
                /**
                 * exchange，分页
                 */
                exchange_page: {
                    // 列表
                    exchangeList: [],
                    // 总条数
                    total: 0,
                    // 删除选中列表
                    selectList: [],
                },
                /**
                 * exchange，新增表单
                 */
                exchange_addForm: {
                    // 交换机名称
                    exchangeName: '',
                    //所属虚拟主机ID
                    virtualHostId: '',
                    // 交换机类型,默认 direct；direct(路由-订阅)、topic(动态路由-订阅)、fanout(广播)
                    exchangeType: 'direct',
                    // 是否持久化，默认 true
                    durability: '',
                    // 是否自动删除,默认 false
                    autoDelete: '',
                    //是否是RabbitMQ内部使用，默认 false
                    internal: '',
                    // 扩展参数，以JSON格式存储
                    arguments: '',
                    // 交换机相关描述
                    description: '',
                },
                /**
                 * exchange，编辑表单
                 */
                exchange_editForm: {}
                ,
                /**
                 * exchange，加载
                 */
                exchange_loading: {
                    // 列表加载
                    listLoading: false,
                    // 添加加载
                    addLoading: false,
                    // 编辑加载
                    editLoading: false,
                    // 删除加载
                    delLoading: false,
                    // 批量删除加载
                    batchDelLoading: false,
                },
                /**
                 *  exchange,对话框管理
                 */
                exchange_dialog: {
                    // 添加对话框
                    addDialog: false,
                    // 编辑对话框
                    editDialog: false,
                },

                /**
                 * exchange,添加表单，验证规则
                 */
                exchange_addFormRules: {
                    exchangeName: [
                        {required: true, message: '请输入交换机名称', trigger: ['blur', 'change']},
                    ],
                    virtualHostId: [
                        {required: true, message: '请选择虚拟主机', trigger: ['blur', 'change']},
                    ],
                    exchangeType: [
                        {required: true, message: '请选择交换机类型', trigger: ['blur', 'change']},
                    ],
                    durability: [
                        {required: true, message: '请选择是否持久化', trigger: ['blur', 'change']},
                    ],
                    autoDelete: [
                        {required: true, message: '请选择是否自动删除', trigger: ['blur', 'change']},
                    ],
                    internal: [
                        {required: true, message: '请选择是否仅内部使用', trigger: ['blur', 'change']},
                    ],
                    // 扩展参数，以JSON格式存储
                    arguments: '',
                    // 交换机相关描述
                    description: '',

                },
                /**
                 * exchange,编辑表单，验证规则
                 */
                exchange_editFormRules: {
                    exchangeName: [
                        {required: true, message: '请输入交换机名称', trigger: ['blur', 'change']},
                    ],
                    virtualHostId: [
                        {required: true, message: '请选择虚拟主机', trigger: ['blur', 'change']},
                    ],
                    exchangeType: [
                        {required: true, message: '请选择交换机类型', trigger: ['blur', 'change']},
                    ],
                    durability: [
                        {required: true, message: '请选择是否持久化', trigger: ['blur', 'change']},
                    ],
                    autoDelete: [
                        {required: true, message: '请选择是否自动删除', trigger: ['blur', 'change']},
                    ],
                    internal: [
                        {required: true, message: '请选择是否仅内部使用', trigger: ['blur', 'change']},
                    ],
                    // 扩展参数，以JSON格式存储
                    arguments: '',
                    // 交换机相关描述
                    description: '',
                },

                /**
                 * Boolean属性，选择列表
                 */
                booleanList: [
                    {
                        value: true,
                        label: '是'
                    },
                    {
                        value: false,
                        label: '否'
                    },
                ],
                /**
                 * 交换机类型，选择列表
                 */
                exchangeTypeList: [
                    {
                        value: 'direct',
                        label: 'direct'
                    },
                    {
                        value: 'topic',
                        label: 'topic'
                    },
                    {
                        value: 'fanout',
                        label: 'fanout'
                    },
                    {
                        value: 'headers',
                        label: 'headers'
                    },
                ],
            }
        },
        methods: {
            /**
             * 分页查询，监听 pageSize 改变的事件
             */
            exchange_handleSizeChange(newSize) {
                this.exchange_queryInfo.pageSize = newSize;
                //刷新列表
                this.exchange_getList();
            },
            /**
             * 分页查询，监听 pageNum 改变的事件
             */
            exchange_handleCurrentChange(newPage) {
                this.exchange_queryInfo.pageNum = newPage;
                //刷新列表
                this.exchange_getList();
            },
            /**
             * exchange,分页查询
             */
            exchange_getList() {
                // 开启加载
                this.exchange_loading.listLoading = true;
                selectBusExchangeList(this.exchange_queryInfo).then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        // 关闭加载
                        this.exchange_loading.listLoading = false;
                        return this.$message.error(res.msg);
                    }
                    // 获取列表数据
                    this.exchange_page.exchangeList = res.data.list;
                    // 获取列表的总记录数
                    this.exchange_page.total = res.data.total;
                    // 关闭加载
                    this.exchange_loading.listLoading = false;
                    this.$message.success(res.msg);
                }).catch(error => {
                    // 关闭加载
                    this.exchange_loading.listLoading = false;
                    this.$message.error(error.toString());
                });
            },
            /**
             * exchange，添加对话框，打开事件
             */
            exchange_toAddDialog() {
                this.exchange_dialog.addDialog = true;
            },
            /**
             * exchange，添加对话框，关闭事件
             */
            exchange_addDialogClosed() {
                // 重置对话框
                this.$refs.exchange_addFormRef.resetFields();
            },
            /**
             * exchange，添加功能
             */
            exchange_add() {
                // 进行表单的预验证
                this.$refs.exchange_addFormRef.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return;
                    // 通过，表单预检验
                    this.exchange_loading.addLoading = true;
                    insertBusExchange(this.exchange_addForm).then((response) => {
                        let res = response.data;
                        // 添加失败
                        if (res.code !== '200') {
                            // 关闭加载
                            this.exchange_loading.addLoading = false;
                            return this.$message.error(res.msg);
                        }
                        // 添加，成功
                        this.$message.success(res.msg);
                        // 关闭加载
                        this.exchange_loading.addLoading = false;
                        // 隐藏对话框
                        this.exchange_dialog.addDialog = false;
                        // 刷新列表
                        this.exchange_getList();
                    }).catch(error => {
                        // 关闭加载
                        this.exchange_loading.addLoading = false;
                        this.$message.error(error.toString());
                    });
                })
            },

            /**
             * exchange，编辑对话框，打开事件
             */
            exchange_toEditDialog(index, row) {
                this.exchange_editForm = Object.assign({}, row);
                this.exchange_dialog.editDialog = true;
            },

            /**
             * exchange，编辑对话框，关闭事件
             */
            exchange_editDialogClosed() {
                //重置对话框
                this.$refs.exchange_editFormRef.resetFields();
            },
            /**
             * exchange，编辑功能
             */
            exchange_edit() {
                //进行表单的预验证
                this.$refs.exchange_editFormRef.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return;
                    // 通过，表单预检验
                    this.exchange_loading.editLoading = true;
                    updateBusExchange(this.exchange_editForm).then((response) => {
                        let res = response.data;
                        if (res.code !== '200') {
                            //关闭加载
                            this.exchange_loading.editLoading = false;
                            return this.$message.error(res.msg);
                        }
                        // 关闭加载
                        this.exchange_loading.editLoading = false;
                        this.$message.success(res.msg);
                        // 隐藏对话框
                        this.exchange_dialog.editDialog = false;
                        // 刷新列表
                        this.exchange_getList();
                    }).catch(error => {
                        this.exchange_loading.editLoading = false;
                        this.$message.error(error.toString());
                    });
                })
            },
            /**
             * exchange，删除功能
             */
            exchange_remove(index, row) {
                // 弹框询问是否删除？
                this.$confirm('此操作永久删除该交换机信息, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    // 开启加载
                    this.exchange_loading.delLoading = true;
                    deleteBusExchange(row).then((response) => {
                        let res = response.data;
                        if (res.code !== '200') {
                            // 关闭加载
                            this.exchange_loading.delLoading = false;
                            return this.$message.error(res.msg);
                        }
                        // 关闭加载
                        this.exchange_loading.delLoading = false;
                        this.$message.success(res.msg);
                        // 刷新列表
                        this.exchange_getList();
                    }).catch(error => {
                        this.exchange_loading.delLoading = false;
                        this.$message.error(error.toString());
                    });
                }).catch(() => {
                });
            },
            /**
             * 批量删除---选中
             */
            exchange_selectChange: function (selectList) {
                this.exchange_page.selectList = selectList;
            },
            /**
             * exchange，批量删除功能
             */
            exchange_batchRemove() {
                const ids = this.exchange_page.selectList.map(item => item.id).toString();
                this.$confirm('此操作将永久删除选中的交换机信息, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    // 开启加载
                    this.exchange_loading.batchDelLoading = true;
                    let params = {ids: ids};
                    batchRemoveBusExchange(params).then(response => {
                        let res = response.data;
                        if (res.code !== '200') {
                            // 关闭加载
                            this.exchange_loading.batchDelLoading = false;
                            return this.$message.error(res.msg);
                        }
                        this.$message.success(res.msg);
                        // 关闭加载
                        this.exchange_loading.batchDelLoading = false;
                        // 刷新列表
                        this.exchange_getList();
                    }).catch(error => {
                        // 关闭加载
                        this.exchange_loading.batchDelLoading = false;
                        this.$message.error(error.toString());
                    });
                }).catch(() => {
                });
            },

            /**
             * exchange，获取全部虚拟主机
             */
            selectHostList() {
                getHostList().then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        return this.$message.error(res.msg);
                    }
                    // 获取列表数据
                    this.exchange_config.virtualHostList = res.data;
                }).catch(error => {
                    this.$message.error(error.toString());
                });
            },

            /**
             * 服务器与虚拟主机 1：n
             * 获取列表
             */
            selectServerAndHostList() {
                getServerAndHostList().then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        return this.$message.error(res.msg);
                    }
                    // 获取列表数据
                    this.exchange_config.cascade.server_hostList = res.data;
                }).catch(error => {
                    this.$message.error(error.toString());
                });
            },
            /**
             * 查询，级联。值改变激发的方法
             * @param value 改变后的值
             */
            cascadeQueryChange(value) {
                let ids = value.join().split(",");
                this.exchange_queryInfo.virtualHostId = ids[ids.length - 1];
            },
            /**
             * 添加，级联。值改变激发的方法
             * @param value 改变后的值
             */
            cascadeAddChange(value) {
                let ids = value.join().split(",");
                this.exchange_addForm.virtualHostId = ids[ids.length - 1];
            },
            cascadeEditChange(value) {
                let ids = value.join().split(",");
                this.exchange_editForm.virtualHostId = ids[ids.length - 1];
            },
            /**
             * 携带参数，跳转至路由键界面
             */
            toRoutingKey(index, row) {
                this.$confirm('查看该交换机下的路由键, 是否继续?', '提示', {
                        confirmButtonText: '查看',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    this.$router.push({name: "路由键管理", params: {exchange_scopeRow: row}})
                }).catch(() => {
                });
            },
        },
        created() {
            if (this.$route.params.virtualHost_scopeRow !== undefined) {
                // 参数，虚拟主机id
                this.exchange_queryInfo.virtualHostId = this.$route.params.virtualHost_scopeRow.id;
                // 刷新列表
                this.exchange_getList();
                // 参数，虚拟主机名称
                //this.exchange_config.virtualHostName = this.$route.params.virtualHost_scopeRow.virtualHostName;
            } else {
                // 刷新列表
                // this.exchange_getList();
            }
        },
        mounted() {
            this.selectServerAndHostList();
        },
        computed: {},
    }
</script>

<style scoped>

</style>