<template>
    <el-container>
        <el-main>
            <el-card style="background-color: #F5F7FA">
                <!-- 搜素区域 -->
                <div>
                    <el-row>
                        <el-col :span="4">
                            <el-input v-model="queue_queryInfo.queueName" prefix-icon="el-icon-search"
                                      size="medium"
                                      placeholder="队列名称" clearable></el-input>
                        </el-col>

                        <el-col :span="4">
                            <el-input v-model="queue_queryInfo.username" prefix-icon="el-icon-search"
                                      size="medium" placeholder="所属用户" clearable></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-cascader
                                    size="medium"
                                    v-model="queue_queryInfo.virtualHostId"
                                    :options="queue_config.cascade.server_hostList"
                                    :show-all-levels="false"
                                    :change-on-select="false"
                                    clearable filterable
                                    @change="cascadeQueryChange"
                                    :props="queue_config.cascade.defaultParams"
                                    placeholder="请选择所属虚拟主机"></el-cascader>
                        </el-col>
                        <el-col :span="8">
                            <el-button type="success" style="width:150px" size="medium" @click="queue_getList">
                                查询队列
                            </el-button>
                            <el-button type="primary" style="width:150px" size="medium" @click="queue_toAddDialog">
                                添加队列
                            </el-button>
                        </el-col>
                    </el-row>
                </div>
                <!-- 列表区域 -->
                <div style="margin-top: 20px;">
                    <el-table :data="queue_page.queueList" border v-loading="queue_loading.listLoading"
                              @selection-change="queue_selectChange"
                              element-loading-text="获取队列列表，拼命加载中">
                        <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="queueName" align="center"
                                         width="220"></el-table-column>
                        <el-table-column label="所属用户" prop="username" align="center"
                                         width="220"></el-table-column>
                        <el-table-column label="所属虚拟主机" prop="virtualHost.virtualHostName" align="center"
                                         width="220"></el-table-column>
                        <el-table-column label="相关描述" prop="description" align="center" width="280"></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="arguments" align="center" width="200">-->
                        <!--  </el-table-column>-->

                        <!-- fixed="right" -->
                        <el-table-column label="操作" width="225px" align="center" fixed="right">
                            <template slot-scope="scope">
                                <!-- 编辑按钮-->
                                <el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
                                    <el-button type="primary" icon="el-icon-edit" size="mini"
                                               @click="queue_toEditDialog(scope.$index,scope.row)">编辑
                                    </el-button>
                                </el-tooltip>

                                <!-- 删除按钮-->
                                <el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
                                    <el-button type="danger" icon="el-icon-delete" size="mini"
                                               :loading="queue_loading.delLoading"
                                               @click="queue_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="queue_loading.batchDelLoading"
                                       :disabled="this.queue_page.selectList.length===0"
                                       @click="queue_batchRemove">批量删除
                            </el-button>
                        </el-col>
                        <el-col :span="10" style="margin-top: 5px">
                            <el-pagination
                                    @size-change="queue_handleSizeChange"
                                    @current-change="queue_handleCurrentChange"
                                    :current-page="queue_queryInfo.pageNum"
                                    :page-sizes="[10,20,30,50]"
                                    :page-size="queue_queryInfo.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="queue_page.total">
                            </el-pagination>
                        </el-col>
                    </el-row>
                </div>
            </el-card>

            <!-- 增加，对话框区域 -->
            <div>
                <el-dialog title="添加队列"
                           :visible.sync="queue_dialog.addDialog"
                           style="margin-top: -50px" text-align="center" width="60%"
                           @close="queue_addDialogClosed">

                    <el-form :inline="true" label-width="120px" status-icon style="margin-top: -10px;margin-left: 60px"
                             :model="queue_addForm" :rules="queue_addFormRules" ref="queue_addFormRef">
                        <el-form-item label="队列名称：" prop="queueName">
                            <el-input v-model="queue_addForm.queueName" style="width:240px" size="small" clearable
                                      placeholder="请输入队列名称">
                            </el-input>
                        </el-form-item>

                        <el-form-item label="用户名称：" prop="username">
                            <el-input v-model="queue_addForm.username" style="width:240px" size="small" clearable
                                      placeholder="请输入用户名称">
                            </el-input>
                        </el-form-item>

                        <!--                        <el-form-item label="用户名称：" prop="userId">-->
                        <!--                            <el-select v-model="queue_addForm.userId" clearable-->
                        <!--                                       style="width:240px" size="small" filterable-->
                        <!--                                       placeholder="请选择用户">-->
                        <!--                                <el-option-->
                        <!--                                        v-for="item in (queue_config.userInfoList)"-->
                        <!--                                        :key="item.id"-->
                        <!--                                        :label="item.username"-->
                        <!--                                        :value="item.id">-->
                        <!--                                </el-option>-->
                        <!--                            </el-select>-->
                        <!--                        </el-form-item>-->

                        <el-form-item label="所属虚拟主机：" prop="virtualHostId">
                            <el-cascader
                                    clearable style="width: 240px" size="small"
                                    v-model="queue_addForm.virtualHostId"
                                    @change="cascadeAddChange"
                                    :options="queue_config.cascade.server_hostList"
                                    :show-all-levels="false"
                                    :change-on-select="false"
                                    :props="queue_config.cascade.defaultParams"
                                    placeholder="请选择所属虚拟主机"></el-cascader>
                        </el-form-item>

                        <el-form-item label="是否持久化：" prop="durability">
                            <el-select v-model="queue_addForm.durability" style="width: 240px" 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="queue_addForm.autoDelete" style="width: 240px" 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="queue_addForm.arguments" style="width:240px" 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="queue_addForm.description" style="width:240px" 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="queue_dialog.addDialog = false" size="medium"
                                   style="width: 100px">取消
                        </el-button>
                        <el-button type="primary" @click="queue_add" :loading="queue_loading.addLoading"
                                   size="medium" style="width: 100px">添加
                        </el-button>
                    </div>
                </el-dialog>
            </div>
            <!-- 编辑，对话框区域 -->
            <div>
                <el-dialog title="编辑队列信息"
                           :visible.sync="queue_dialog.editDialog"
                           style="margin-top: -50px" text-align="center" width="60%"
                           @close="queue_editDialogClosed">
                    <el-form :inline="true" label-width="120px" status-icon style="margin-top: -10px;margin-left: 60px"
                             :model="queue_editForm" :rules="queue_editFormRules" ref="queue_editFormRef">
                        <el-form-item label="队列名称：" prop="queueName">
                            <el-input v-model="queue_editForm.queueName" style="width:240px" size="small" clearable
                                      disabled
                                      placeholder="请输入队列名称">
                            </el-input>
                        </el-form-item>

                        <el-form-item label="用户名称：" prop="username">
                            <el-input v-model="queue_editForm.username" placeholder="请输入用户名称"
                                      style="width:240px" size="small" clearable disabled>
                            </el-input>
                        </el-form-item>

                        <!--                        <el-form-item label="用户名称：" prop="userId">-->
                        <!--                            <el-select v-model="queue_editForm.userId" clearable disabled-->
                        <!--                                       style="width:240px" size="small" filterable-->
                        <!--                                       placeholder="请选择用户">-->
                        <!--                                <el-option-->
                        <!--                                        v-for="item in (queue_config.userInfoList)"-->
                        <!--                                        :key="item.id"-->
                        <!--                                        :label="item.username"-->
                        <!--                                        :value="item.id">-->
                        <!--                                </el-option>-->
                        <!--                            </el-select>-->
                        <!--                        </el-form-item>-->

                        <el-form-item label="所属虚拟主机：" prop="virtualHostId">
                            <el-cascader
                                    disabled clearable style="width: 240px" size="small"
                                    v-model="queue_editForm.virtualHostId"
                                    @change="cascadeEditChange"
                                    :options="queue_config.cascade.server_hostList"
                                    :show-all-levels="false"
                                    :change-on-select="false"
                                    :props="queue_config.cascade.defaultParams"
                                    placeholder="请选择所属虚拟主机"></el-cascader>
                        </el-form-item>

                        <el-form-item label="是否持久化：" prop="durability">
                            <el-select v-model="queue_editForm.durability" style="width: 240px" 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="autoDelete">
                            <el-select v-model="queue_editForm.autoDelete" style="width: 240px" 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="queue_editForm.arguments" style="width:240px" 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="queue_editForm.description" style="width:240px" 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">
                        <el-button type="info" @click="queue_dialog.editDialog = false" size="medium"
                                   style="width: 100px">取消
                        </el-button>
                        <el-button type="primary" @click="queue_edit" :loading="queue_loading.addLoading"
                                   size="medium" style="width: 100px">编辑
                        </el-button>
                    </div>
                </el-dialog>
            </div>
        </el-main>
    </el-container>
</template>

<script>
    import {
        selectBusQueueList,
        insertBusQueue,
        updateBusQueue,
        deleteBusQueue,
        batchRemoveBusQueue,
        getServerAndHostList, getUserInfoList,
    } from "../../api/message_bus";

    export default {
        name: "Queue",

        data() {
            return {
                /**
                 * queue，配置与参数
                 */
                queue_config: {
                    // 用户信息列表
                    userInfoList: [],
                    // 级联显示
                    cascade: {
                        // 服务器及虚拟主机列表
                        server_hostList: [],
                        defaultParams: {
                            label: 'aliasName',
                            value: 'id',
                            children: 'aliasList'
                        }
                    },
                },
                /**
                 *  queue，搜索参数
                 */
                queue_queryInfo: {
                    // 所属用户
                    username: '',
                    // 队列名称
                    queueName: '',
                    // 所属虚拟机id
                    virtualHostId: '',
                    // 当前页数
                    pageNum: 1,
                    // 每页条数
                    pageSize: 10
                },
                /**
                 * queue，分页
                 */
                queue_page: {
                    // 队列列表
                    queueList: [],
                    // 总条数
                    total: 0,
                    // 批量删除，选中列表
                    selectList: [],
                },
                /**
                 * queue，新增表单
                 */
                queue_addForm: {
                    // 队列名称
                    queueName: '',
                    // 用户名称
                    username: '',
                    // 用户id（该字段抛弃）
                    userId: '',
                    // 所属虚拟机id
                    virtualHostId: '',
                    // 是否持久化，默认 true
                    durability: true,
                    // 是否自动删除,默认 false
                    autoDelete: false,
                    // 扩展参数，以JSON格式存储
                    arguments: '',
                    // 相关描述
                    description: '',
                },
                /**
                 * queue，编辑表单
                 */
                queue_editForm: {},
                /**
                 * queue，加载
                 */
                queue_loading: {
                    // 列表加载
                    listLoading: false,
                    // 添加加载
                    addLoading: false,
                    // 编辑加载
                    editLoading: false,
                    // 删除加载
                    delLoading: false,
                    // 批量删除加载
                    batchDelLoading: false,
                },
                /**
                 *  queue,对话框管理
                 */
                queue_dialog: {
                    // 添加对话框
                    addDialog: false,
                    // 编辑对话框
                    editDialog: false,
                },
                /**
                 * queue,添加表单，验证规则
                 */
                queue_addFormRules: {
                    // 队列名称
                    queueName: [
                        {required: true, message: '请输入队列名称', trigger: ['blur', 'change']},
                    ],
                    // 用户名称
                    username: [
                        {required: true, message: '请输入用户名称', trigger: ['blur', 'change']},
                    ],
                    // 所属虚拟机id
                    virtualHostId: [
                        {required: true, message: '请选择所属虚拟机', trigger: ['blur', 'change']},
                    ],
                    // 是否持久化，默认 true
                    durability: [
                        {required: true, message: '请选择是否持久化', trigger: ['blur', 'change']},
                    ],
                    // 是否自动删除,默认 false
                    autoDelete: [
                        {required: true, message: '请选择是否自动删除', trigger: ['blur', 'change']},
                    ],
                    // // 扩展参数，以JSON格式存储
                    // arguments: [
                    //     {required: true, message: '扩展参数', trigger: ['blur', 'change']},
                    // ],
                    // // 相关描述
                    // description: [
                    //     {required: true, message: '请输入相关描述', trigger: ['blur', 'change']},
                    // ],
                },
                /**
                 * queue,编辑表单，验证规则
                 */
                queue_editFormRules: {
                    // 队列名称
                    queueName: [
                        {required: true, message: '请输入队列名称', trigger: ['blur', 'change']},
                    ],
                    // 用户名称
                    username: [
                        {required: true, message: '请输入用户名称', trigger: ['blur', 'change']},
                    ],
                    // 所属虚拟机id
                    virtualHostId: [
                        {required: true, message: '请选择所属虚拟机', trigger: ['blur', 'change']},
                    ],
                    // 是否持久化，默认 true
                    durability: [
                        {required: true, message: '请选择是否持久化', trigger: ['blur', 'change']},
                    ],
                    // 是否自动删除,默认 false
                    autoDelete: [
                        {required: true, message: '请选择是否自动删除', trigger: ['blur', 'change']},
                    ],
                    // // 扩展参数，以JSON格式存储
                    // arguments: [
                    //     {required: true, message: '扩展参数', trigger: ['blur', 'change']},
                    // ],
                    // // 相关描述
                    // description: [
                    //     {required: true, message: '请输入相关描述', trigger: ['blur', 'change']},
                    // ],
                },
                /**
                 * Boolean属性，选择列表
                 */
                booleanList: [
                    {
                        value: true,
                        label: '是'
                    },
                    {
                        value: false,
                        label: '否'
                    },
                ],
            }
        },
        methods: {
            /**
             * 分页查询，监听 pageSize 改变的事件
             */
            queue_handleSizeChange(newSize) {
                this.queue_queryInfo.pageSize = newSize;
                //刷新列表
                this.queue_getList();
            },
            /**
             * 分页查询，监听 pageNum 改变的事件
             */
            queue_handleCurrentChange(newPage) {
                this.queue_queryInfo.pageNum = newPage;
                //刷新列表
                this.queue_getList();
            },
            /**
             * queue,分页查询
             */
            queue_getList() {
                // 开启加载
                this.queue_loading.listLoading = true;
                selectBusQueueList(this.queue_queryInfo).then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        // 关闭加载
                        this.queue_loading.listLoading = false;
                        return this.$message.error(res.msg);
                    }
                    // 获取列表数据
                    this.queue_page.queueList = res.data.list;
                    // 获取列表的总记录数
                    this.queue_page.total = res.data.total;
                    // 关闭加载
                    this.queue_loading.listLoading = false;
                    this.$message.success(res.msg);
                }).catch(error => {
                    // 关闭加载
                    this.queue_loading.listLoading = false;
                    this.$message.error(error.toString());
                });
            },
            /**
             * queue，添加对话框，打开事件
             */
            queue_toAddDialog() {
                this.queue_dialog.addDialog = true;
            },
            /**
             * queue，添加对话框，关闭事件
             */
            queue_addDialogClosed() {
                // 重置对话框
                this.$refs.queue_addFormRef.resetFields();
            },
            /**
             * queue，添加功能
             */
            queue_add() {
                // 进行表单的预验证
                this.$refs.queue_addFormRef.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return;
                    // 通过，表单预检验，开启加载
                    this.queue_loading.addLoading = true;
                    insertBusQueue(this.queue_addForm).then((response) => {
                        let res = response.data;
                        // 添加失败
                        if (res.code !== '200') {
                            // 关闭加载
                            this.queue_loading.addLoading = false;
                            return this.$message.error(res.msg);
                        }
                        // 添加，成功
                        this.$message.success(res.msg);
                        // 关闭加载
                        this.queue_loading.addLoading = false;
                        // 隐藏对话框
                        this.queue_dialog.addDialog = false;
                        // 刷新列表
                        this.queue_getList();
                    }).catch(error => {
                        // 关闭加载
                        this.queue_loading.addLoading = false;
                        this.$message.error(error.toString());
                    });
                })
            },
            /**
             * queue，编辑对话框，打开事件
             */
            queue_toEditDialog(index, row) {
                this.queue_editForm = Object.assign({}, row);
                this.queue_dialog.editDialog = true;
            },
            /**
             * queue，编辑对话框，关闭事件
             */
            queue_editDialogClosed() {
                //重置对话框
                this.$refs.queue_editFormRef.resetFields();
            },
            /**
             * queue，编辑功能
             */
            queue_edit() {
                //进行表单的预验证
                this.$refs.queue_editFormRef.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return;
                    // 通过，表单预检验，开启加载
                    this.queue_loading.editLoading = true;
                    updateBusQueue(this.queue_editForm).then((response) => {
                        let res = response.data;
                        if (res.code !== '200') {
                            //关闭加载
                            this.queue_loading.editLoading = false;
                            return this.$message.error(res.msg);
                        }
                        // 关闭加载
                        this.queue_loading.editLoading = false;
                        this.$message.success(res.msg);
                        // 隐藏对话框
                        this.queue_dialog.editDialog = false;
                        // 刷新列表
                        this.queue_getList();
                    }).catch(error => {
                        // 关闭加载
                        this.queue_loading.editLoading = false;
                        this.$message.error(error.toString());
                    });
                })
            },
            /**
             * queue，删除功能
             */
            queue_remove(index, row) {
                // 弹框询问是否删除？
                this.$confirm('此操作永久删除该队列信息, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    // 开启加载
                    this.queue_loading.delLoading = true;
                    deleteBusQueue(row).then((response) => {
                        let res = response.data;
                        if (res.code !== '200') {
                            // 关闭加载
                            this.queue_loading.delLoading = false;
                            return this.$message.error(res.msg);
                        }
                        // 关闭加载
                        this.queue_loading.delLoading = false;
                        this.$message.success(res.msg);
                        // 刷新列表
                        this.queue_getList();
                    }).catch(error => {
                        // 关闭加载
                        this.queue_loading.delLoading = false;
                        this.$message.error(error.toString());
                    });
                }).catch(() => {
                });
            },
            /**
             * queue，批量删除---选中
             */
            queue_selectChange: function (selectList) {
                this.queue_page.selectList = selectList;
            },
            /**
             * queue，批量删除功能
             */
            queue_batchRemove() {
                const ids = this.queue_page.selectList.map(item => item.id).toString();
                this.$confirm('此操作将永久删除选中的队列信息, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    // 开启加载
                    this.queue_loading.batchDelLoading = true;
                    let params = {ids: ids};
                    batchRemoveBusQueue(params).then(response => {
                        let res = response.data;
                        if (res.code !== '200') {
                            // 关闭加载
                            this.queue_loading.batchDelLoading = false;
                            return this.$message.error(res.msg);
                        }
                        this.$message.success(res.msg);
                        // 关闭加载
                        this.queue_loading.batchDelLoading = false;
                        // 刷新列表
                        this.queue_getList();
                    }).catch(error => {
                        // 关闭加载
                        this.queue_loading.batchDelLoading = false;
                        this.$message.error(error.toString());
                    });
                }).catch(() => {
                });
            },
            /**
             * 服务器与虚拟主机 1：n
             * 获取列表
             */
            selectServerAndHostList() {
                getServerAndHostList().then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        return this.$message.error(res.msg);
                    }
                    // 获取列表数据
                    this.queue_config.cascade.server_hostList = res.data;
                    // this.$message.success('获取虚拟主机列表，成功！');
                }).catch(error => {
                    this.$message.error(error.toString());
                });
            },
            /**
             * 查询，级联。值改变激发的方法
             * @param value 改变后的值
             */
            cascadeQueryChange(value) {
                let ids = value.join().split(",");
                this.queue_queryInfo.virtualHostId = ids[ids.length - 1];
            },
            /**
             * 添加，级联。值改变激发的方法
             * @param value 改变后的值
             */
            cascadeAddChange(value) {
                let ids = value.join().split(",");
                this.queue_addForm.virtualHostId = ids[ids.length - 1];
            },
            /**
             * 编辑，级联。值改变激发的方法
             * @param value 改变后的值
             */
            cascadeEditChange(value) {
                let ids = value.join().split(",");
                this.queue_editForm.virtualHostId = ids[ids.length - 1];
            },
            /**
             * 获取所有用户的信息
             */
            queue_getUserInfoList() {
                getUserInfoList().then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        return this.$message.error(res.msg);
                    }
                    // 获取列表数据
                    this.queue_config.userInfoList = res.data;
                }).catch(error => {
                    this.$message.error(error.toString());
                });
            },
        },
        created() {
            if (this.$route.params.virtualHost_scopeRow !== undefined) {
                // 参数，虚拟主机id
                this.queue_queryInfo.virtualHostId = this.$route.params.virtualHost_scopeRow.id;
                // 刷新列表
                this.queue_getList();
            } else {
                // 刷新列表
                // this.queue_getList();
            }
        },
        mounted() {
            this.selectServerAndHostList();
            this.queue_getUserInfoList();
        },
        computed: {},
    }
</script>

<style scoped>

</style>