From 7ae9b3acedfd58f11fd8f8cd7182322db9c62851 Mon Sep 17 00:00:00 2001
From: niushuai233 <shuai.niu@foxmail.com>
Date: Tue, 3 Jan 2023 17:59:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20feat:=20=E6=9C=8D=E5=8A=A1=E5=99=A8?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/ServerInfo/ServerInfoList.vue     | 207 ++++++++++++++++++
 .../ServerInfo/modules/ServerInfoModal.vue    | 136 ++++++++++++
 2 files changed, 343 insertions(+)
 create mode 100644 src/views/modules/ServerInfo/ServerInfoList.vue
 create mode 100644 src/views/modules/ServerInfo/modules/ServerInfoModal.vue

diff --git a/src/views/modules/ServerInfo/ServerInfoList.vue b/src/views/modules/ServerInfo/ServerInfoList.vue
new file mode 100644
index 0000000..70e68fa
--- /dev/null
+++ b/src/views/modules/ServerInfo/ServerInfoList.vue
@@ -0,0 +1,207 @@
+<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-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="IP或域名">
+                                <a-input placeholder="请输入IP或域名" v-model="queryParam.ip"></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.user"></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 -->
+
+        <!-- 表单区域 -->
+        <serverInfo-modal ref="modalForm" @ok="modalFormOk"></serverInfo-modal>
+    </a-card>
+</template>
+
+<script>
+import '@/assets/less/TableExpand.less'
+import ServerInfoModal from './modules/ServerInfoModal'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+
+export default {
+    name: 'ServerInfoList',
+    mixins: [JeecgListMixin],
+    components: {
+        ServerInfoModal
+    },
+    data() {
+        return {
+            description: '服务器信息管理页面',
+            // 表头
+            columns: [
+                {
+                    title: '#',
+                    dataIndex: '',
+                    key: 'rowIndex',
+                    width: 60,
+                    align: 'center',
+                    customRender: function(t, r, index) {
+                        return parseInt(index) + 1
+                    }
+                },
+                {
+                    title: '服务器名称',
+                    align: 'center',
+                    dataIndex: 'name',
+                    width: 250
+                },
+                {
+                    title: 'IP或域名',
+                    align: 'center',
+                    dataIndex: 'ip',
+                    width: 250
+                },
+                {
+                    title: 'SSH端口',
+                    align: 'center',
+                    dataIndex: 'port',
+                    width: 50
+                },
+                {
+                    title: '用户名',
+                    align: 'center',
+                    dataIndex: 'user',
+                    width: 200
+                },
+                {
+                    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: '/server/serverInfo/list',
+                delete: '/server/serverInfo/delete',
+                deleteBatch: '/server/serverInfo/deleteBatch',
+                exportXlsUrl: 'server/serverInfo/exportXls',
+                importExcelUrl: 'server/serverInfo/importExcel'
+            }
+        }
+    },
+    computed: {
+        importExcelUrl: function() {
+            return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
+        }
+    },
+    methods: {}
+}
+</script>
+<style scoped>
+@import '~@assets/less/common.less';
+</style>
diff --git a/src/views/modules/ServerInfo/modules/ServerInfoModal.vue b/src/views/modules/ServerInfo/modules/ServerInfoModal.vue
new file mode 100644
index 0000000..0870aa7
--- /dev/null
+++ b/src/views/modules/ServerInfo/modules/ServerInfoModal.vue
@@ -0,0 +1,136 @@
+<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="name" label="服务器名称">
+                    <a-input placeholder="请输入服务器名称" v-model="model.name" :maxlength="50"/>
+                </a-form-model-item>
+                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ip" label="IP或域名">
+                    <a-input placeholder="请输入IP或域名" v-model="model.ip" :maxlength="50"/>
+                </a-form-model-item>
+                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="port" label="SSH端口号">
+                    <a-input-number v-model="model.port" :min="1" :max="65535" />
+                </a-form-model-item>
+                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="user" label="用户名">
+                    <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-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'
+
+export default {
+    name: 'ServerInfoModal',
+    data() {
+        return {
+            title: '操作',
+            visible: false,
+            model: {},
+            labelCol: {
+                xs: { span: 24 },
+                sm: { span: 5 }
+            },
+            wrapperCol: {
+                xs: { span: 24 },
+                sm: { span: 16 }
+            },
+            confirmLoading: false,
+            validatorRules: {
+                name: [{ required: true, message: '请输入服务器名称!' }],
+                ip: [{ required: true, message: '请输入IP或域名!' }],
+                port: [{ required: true, message: '请输入SSH端口号 1-65535!' }],
+                user: [{ required: true, message: '请输入用户名!' }],
+                password: [{ required: true, message: '请输入密码!' }]
+            },
+            url: {
+                add: '/server/serverInfo/add',
+                edit: '/server/serverInfo/edit'
+            }
+        }
+    },
+    created() {
+      this.init();
+    },
+    methods: {
+        init() {
+        },
+        add() {
+            //初始化默认值
+            this.edit({port: 22, status: 1})
+        },
+        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
+                    }
+                    httpAction(httpurl, this.model, method)
+                        .then(res => {
+                            if (res.success) {
+                                that.$message.success(res.message)
+                                that.$emit('ok')
+                            } else {
+                                that.$message.warning(res.message)
+                            }
+                        })
+                        .finally(() => {
+                            that.confirmLoading = false
+                            that.close()
+                        })
+                } else {
+                    return false
+                }
+            })
+        },
+        handleCancel() {
+            this.close()
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped></style>