From 1b6d0d2c5c57597c92f80e012eca010a488efd33 Mon Sep 17 00:00:00 2001
From: niushuai233 <shuai.niu@foxmail.com>
Date: Wed, 4 Jan 2023 11:52:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9A=A7=E9=81=93=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mixins/JeecgListMixin.js                  |   2 +-
 src/views/modules/tunnel/ServerInfoList.vue   |   2 +-
 src/views/modules/tunnel/TunnelInfoList.vue   | 253 ++++++++++++++++++
 .../tunnel/modules/ServerInfoModal.vue        |   6 +-
 .../tunnel/modules/TunnelInfoModal.vue        | 167 ++++++++++++
 5 files changed, 425 insertions(+), 5 deletions(-)
 create mode 100644 src/views/modules/tunnel/TunnelInfoList.vue
 create mode 100644 src/views/modules/tunnel/modules/TunnelInfoModal.vue

diff --git a/src/mixins/JeecgListMixin.js b/src/mixins/JeecgListMixin.js
index 9ed6afd..fa24678 100644
--- a/src/mixins/JeecgListMixin.js
+++ b/src/mixins/JeecgListMixin.js
@@ -101,7 +101,7 @@ export const JeecgListMixin = {
       })
     },
     initDictConfig(){
-      console.log("--这是一个假的方法!")
+      //console.log("--这是一个假的方法!")
     },
     handleSuperQuery(params, matchType) {
       //高级查询方法
diff --git a/src/views/modules/tunnel/ServerInfoList.vue b/src/views/modules/tunnel/ServerInfoList.vue
index 70e68fa..af39b15 100644
--- a/src/views/modules/tunnel/ServerInfoList.vue
+++ b/src/views/modules/tunnel/ServerInfoList.vue
@@ -186,7 +186,7 @@ export default {
                 }
             ],
             url: {
-                list: '/server/serverInfo/list',
+                list: '/server/serverInfo/page',
                 delete: '/server/serverInfo/delete',
                 deleteBatch: '/server/serverInfo/deleteBatch',
                 exportXlsUrl: 'server/serverInfo/exportXls',
diff --git a/src/views/modules/tunnel/TunnelInfoList.vue b/src/views/modules/tunnel/TunnelInfoList.vue
new file mode 100644
index 0000000..edbcc95
--- /dev/null
+++ b/src/views/modules/tunnel/TunnelInfoList.vue
@@ -0,0 +1,253 @@
+<template>
+    <a-card :bordered="false">
+        <!-- 查询区域 -->
+        <div class="table-page-search-wrapper">
+            <a-form layout="inline" @keyup.enter.native="searchQuery">
+                <a-row :gutter="24">
+                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
+                        <a-form-item label="服务器名称">
+                            <a-select
+                                ref="statusSelect"
+                                show-search
+                                optionFilterProp="children"
+                                v-model="queryParam.serverId"
+                                placeholder="请选择服务器名称"
+                                :allowClear="true"
+                                :options="serverList"
+                                @change="serverListChange"
+                            />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
+                        <a-form-item label="隧道名称">
+                            <a-input placeholder="请输入隧道名称" v-model="queryParam.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <template v-if="toggleSearchStatus">
+                        <a-col :xl="6" :lg="7" :md="8" :sm="24">
+                            <a-form-item label="本地端口">
+                                <a-input placeholder="请输入本地端口" v-model="queryParam.localPort"></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :xl="6" :lg="7" :md="8" :sm="24">
+                            <a-form-item label="远程端口">
+                                <a-input placeholder="请输入远程端口" v-model="queryParam.remotePort"></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :xl="6" :lg="7" :md="8" :sm="24">
+                            <a-form-item label="状态">
+                                <a-select ref="statusSelect" v-model="queryParam.status" :allowClear="true">
+                                    <a-select-option value="1">启用</a-select-option>
+                                    <a-select-option value="0">禁用</a-select-option>
+                                </a-select>
+                            </a-form-item>
+                        </a-col>
+                    </template>
+                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
+                        <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+                            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+                            <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px"
+                                >重置</a-button
+                            >
+                            <a @click="handleToggleSearch" style="margin-left: 8px">
+                                {{ toggleSearchStatus ? '收起' : '展开' }}
+                                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
+                            </a>
+                        </span>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </div>
+
+        <!-- 操作按钮区域 -->
+        <div class="table-operator">
+            <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
+            <!-- <a-button type="primary" icon="download" @click="handleExportXls('隧道信息')">导出</a-button>
+            <a-upload
+                name="file"
+                :showUploadList="false"
+                :multiple="false"
+                :headers="tokenHeader"
+                :action="importExcelUrl"
+                @change="handleImportExcel"
+            >
+                <a-button type="primary" icon="import">导入</a-button>
+            </a-upload> -->
+            <a-dropdown v-if="selectedRowKeys.length > 0">
+                <a-menu slot="overlay">
+                    <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
+                </a-menu>
+                <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down"/></a-button>
+            </a-dropdown>
+        </div>
+
+        <!-- table区域-begin -->
+        <div>
+            <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
+                <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
+                <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
+                >项
+                <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+            </div>
+
+            <a-table
+                ref="table"
+                size="middle"
+                bordered
+                rowKey="id"
+                :columns="columns"
+                :dataSource="dataSource"
+                :pagination="ipagination"
+                :loading="loading"
+                class="j-table-force-nowrap"
+                :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+                @change="handleTableChange"
+            >
+                <span slot="action" slot-scope="text, record">
+                    <a @click="handleEdit(record)">编辑</a>
+
+                    <a-divider type="vertical" />
+                    <a-dropdown>
+                        <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
+                        <a-menu slot="overlay">
+                            <a-menu-item>
+                                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
+                                    <a>删除</a>
+                                </a-popconfirm>
+                            </a-menu-item>
+                        </a-menu>
+                    </a-dropdown>
+                </span>
+                <template slot="status_slot" slot-scope="item">
+                    <a-tag v-if="item && item == 1" color="green">启用</a-tag>
+                    <a-tag v-else color="red">禁用</a-tag>
+                </template>
+            </a-table>
+        </div>
+        <!-- table区域-end -->
+
+        <!-- 表单区域 -->
+        <tunnelInfo-modal ref="modalForm" @ok="modalFormOk"></tunnelInfo-modal>
+    </a-card>
+</template>
+
+<script>
+import '@/assets/less/TableExpand.less'
+import TunnelInfoModal from './modules/TunnelInfoModal'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import { httpAction } from '../../../api/manage'
+
+export default {
+    name: 'TunnelInfoList',
+    mixins: [JeecgListMixin],
+    components: {
+        TunnelInfoModal
+    },
+    data() {
+        return {
+            serverList: [],
+            description: '隧道信息管理页面',
+            // 表头
+            columns: [
+                {
+                    title: '#',
+                    dataIndex: '',
+                    key: 'rowIndex',
+                    width: 60,
+                    align: 'center',
+                    customRender: function(t, r, index) {
+                        return parseInt(index) + 1
+                    }
+                },
+                {
+                    title: '服务器名称',
+                    align: 'center',
+                    dataIndex: 'serverName',
+                    width: 300
+                },
+                {
+                    title: '隧道名称',
+                    align: 'center',
+                    dataIndex: 'name',
+                    width: 300
+                },
+                {
+                    title: '本地端口',
+                    align: 'center',
+                    dataIndex: 'localPort',
+                    width: 100
+                },
+                {
+                    title: '远程端口',
+                    align: 'center',
+                    dataIndex: 'remotePort',
+                    width: 100
+                },
+                {
+                    title: '状态',
+                    align: 'center',
+                    dataIndex: 'status',
+                    width: 50,
+                    scopedSlots: { customRender: 'status_slot' }
+                },
+                {
+                    title: '备注',
+                    align: 'center',
+                    dataIndex: 'remark'
+                },
+                {
+                    title: '操作',
+                    dataIndex: 'action',
+                    align: 'center',
+                    width: 100,
+                    scopedSlots: { customRender: 'action' }
+                }
+            ],
+            url: {
+                list: '/tunnel/tunnelInfo/page',
+                delete: '/tunnel/tunnelInfo/delete',
+                deleteBatch: '/tunnel/tunnelInfo/deleteBatch',
+                exportXlsUrl: 'tunnel/tunnelInfo/exportXls',
+                importExcelUrl: 'tunnel/tunnelInfo/importExcel',
+                serverList: '/server/serverInfo/list'
+            }
+        }
+    },
+    computed: {
+        importExcelUrl: function() {
+            return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
+        }
+    },
+    created() {
+        this.init()
+    },
+    methods: {
+        init() {
+            this.initServerList()
+        },
+        initServerList() {
+            httpAction(this.url.serverList, {}, 'GET')
+                .then(res => {
+                    if (res.success && res.result) {
+                        let that = this
+                        that.serverList = []
+                        res.result.forEach(item => {
+                            that.serverList.push({
+                                label: item.name,
+                                value: item.id
+                            })
+                        })
+                    } else {
+                    }
+                })
+                .finally(() => {})
+        },
+        serverListChange(val) {
+            this.searchQuery()
+        }
+    }
+}
+</script>
+<style scoped>
+@import '~@assets/less/common.less';
+</style>
diff --git a/src/views/modules/tunnel/modules/ServerInfoModal.vue b/src/views/modules/tunnel/modules/ServerInfoModal.vue
index 44b1193..7adc067 100644
--- a/src/views/modules/tunnel/modules/ServerInfoModal.vue
+++ b/src/views/modules/tunnel/modules/ServerInfoModal.vue
@@ -24,12 +24,12 @@
                     <a-input placeholder="请输入用户名" v-model="model.user" :maxlength="50"/>
                 </a-form-model-item>
                 <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="password" label="密码">
-                    <a-input placeholder="请输入密码" v-model="model.password" :maxlength="255"/>
+                    <a-input type="password" placeholder="请输入密码" v-model="model.password" :maxlength="255"/>
                 </a-form-model-item>
                 <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark" label="备注">
                     <a-textarea placeholder="请输入备注" v-model="model.remark" :auto-size="{ minRows: 3, maxRows: 5 }" :maxlength="512" />
                 </a-form-model-item>
-                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status" label="备注">
+                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status" label="状态">
                     <a-switch v-model="model.status" :unCheckedValue="0" :checkedValue="1" checked-children="启用" un-checked-children="禁用" />
                 </a-form-model-item>
             </a-form-model>
@@ -77,7 +77,7 @@ export default {
         },
         add() {
             //初始化默认值
-            this.edit({port: 22, status: 1})
+            this.edit({port: 22, status: true})
         },
         edit(record) {
             this.model = Object.assign({}, record)
diff --git a/src/views/modules/tunnel/modules/TunnelInfoModal.vue b/src/views/modules/tunnel/modules/TunnelInfoModal.vue
new file mode 100644
index 0000000..8b382e2
--- /dev/null
+++ b/src/views/modules/tunnel/modules/TunnelInfoModal.vue
@@ -0,0 +1,167 @@
+<template>
+    <j-modal
+        :title="title"
+        :width="800"
+        :visible="visible"
+        :confirmLoading="confirmLoading"
+        switchFullscreen
+        @ok="handleOk"
+        @cancel="handleCancel"
+        cancelText="关闭"
+    >
+        <a-spin :spinning="confirmLoading">
+            <a-form-model ref="form" :model="model" :rules="validatorRules">
+                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="serverId" label="服务器名称">
+                    <a-select
+                        ref="statusSelect"
+                        show-search
+                        optionFilterProp="children"
+                        v-model="model.serverId"
+                        placeholder="请选择服务器名称"
+                        :allowClear="true"
+                        :options="serverList"
+                    />
+                </a-form-model-item>
+                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name" label="隧道名称">
+                    <a-input placeholder="请输入隧道名称" v-model="model.name" />
+                </a-form-model-item>
+                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="localPort" label="本地端口">
+                    <a-input-number v-model="model.localPort" :min="1" :max="65535" />
+                </a-form-model-item>
+                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remotePort" label="远程端口">
+                    <a-input-number v-model="model.remotePort" :min="1" :max="65535" />
+                </a-form-model-item>
+                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark" label="备注">
+                    <a-textarea placeholder="请输入备注" v-model="model.remark" :auto-size="{ minRows: 3, maxRows: 5 }" :maxlength="512" />
+                </a-form-model-item>
+                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status" label="状态">
+                    <a-switch
+                        v-model="model.status"
+                        :unCheckedValue="0"
+                        :checkedValue="1"
+                        checked-children="启用"
+                        un-checked-children="禁用"
+                    />
+                </a-form-model-item>
+            </a-form-model>
+        </a-spin>
+    </j-modal>
+</template>
+
+<script>
+import { httpAction } from '@/api/manage'
+import moment from 'moment'
+
+export default {
+    name: 'TunnelInfoModal',
+    data() {
+        return {
+            title: '操作',
+            visible: false,
+            model: {},
+            serverList: [],
+            labelCol: {
+                xs: { span: 24 },
+                sm: { span: 5 }
+            },
+            wrapperCol: {
+                xs: { span: 24 },
+                sm: { span: 16 }
+            },
+            confirmLoading: false,
+            validatorRules: {
+                serverId: [{ required: true, message: '请选择服务器名称!' }],
+                name: [{ required: true, message: '请输入隧道名称!' }],
+                localPort: [{ required: true, message: '请输入本地端口!' }],
+                remotePort: [{ required: true, message: '请输入远程端口!' }]
+            },
+            url: {
+                add: '/tunnel/tunnelInfo/add',
+                edit: '/tunnel/tunnelInfo/edit',
+                serverList: '/server/serverInfo/list'
+            }
+        }
+    },
+    created() {},
+    methods: {
+        add() {
+            this.initServerList()
+            //初始化默认值
+            this.edit({ status: true })
+        },
+        edit(record) {
+            this.model = Object.assign({}, record)
+            this.visible = true
+        },
+        close() {
+            this.$emit('close')
+            this.visible = false
+            this.$refs.form.clearValidate()
+        },
+        handleOk() {
+            const that = this
+            // 触发表单验证
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    that.confirmLoading = true
+                    let httpUrl = ''
+                    let method = ''
+                    if (!this.model.id) {
+                        httpUrl += this.url.add
+                        method = 'post'
+                    } else {
+                        httpUrl += this.url.edit
+                        method = 'put'
+                    }
+                    if (this.model.status) {
+                        this.model.status = 1
+                    } else {
+                        this.model.status = 0
+                    }
+                    let success = true
+                    httpAction(httpUrl, this.model, method)
+                        .then(res => {
+                            if (res.success) {
+                                that.$message.success(res.message)
+                                that.$emit('ok')
+                            } else {
+                                that.$message.warning(res.message)
+                                success = false
+                            }
+                        })
+                        .finally(() => {
+                            that.confirmLoading = false
+                            if (success) {
+                                that.close()
+                            }
+                        })
+                } else {
+                    return false
+                }
+            })
+        },
+        handleCancel() {
+            this.close()
+        },
+        initServerList() {
+            httpAction(this.url.serverList, {}, 'GET')
+                .then(res => {
+                    if (res.success && res.result) {
+                        let that = this
+                        that.serverList = []
+                        res.result.forEach(item => {
+                            that.serverList.push({
+                                label: item.name,
+                                value: item.id
+                            })
+                        })
+                    } else {
+                    }
+                })
+                .finally(() => {})
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped></style>