From b313fe34dd4cce54e55aeba8efa6f693aad14669 Mon Sep 17 00:00:00 2001
From: zhanghouying <zhy6599@163.com>
Date: Tue, 19 Nov 2019 11:42:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=BF=90=E7=BB=B4=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/dev.env.js                     |   1 +
 config/prod.env.js                    |   1 +
 src/api/app.js                        |  32 +++
 src/api/database.js                   |  24 ++
 src/api/deploy.js                     |  74 ++++++
 src/api/deployHistory.js              |  40 ++++
 src/api/serverAccount.js              |  32 +++
 src/api/serverDeploy.js               |  24 ++
 src/store/getters.js                  |   1 +
 src/store/modules/api.js              |   2 +
 src/utils/validate.js                 |  76 +++++++
 src/views/mnt/account/form.vue        | 108 +++++++++
 src/views/mnt/account/index.vue       | 176 +++++++++++++++
 src/views/mnt/app/form.vue            | 180 +++++++++++++++
 src/views/mnt/app/index.vue           | 214 ++++++++++++++++++
 src/views/mnt/database/form.vue       | 134 +++++++++++
 src/views/mnt/database/index.vue      | 179 +++++++++++++++
 src/views/mnt/deploy/deploy.vue       | 217 ++++++++++++++++++
 src/views/mnt/deploy/form.vue         | 132 +++++++++++
 src/views/mnt/deploy/index.vue        | 313 ++++++++++++++++++++++++++
 src/views/mnt/deploy/sysRestore.vue   | 152 +++++++++++++
 src/views/mnt/deployHistory/form.vue  | 133 +++++++++++
 src/views/mnt/deployHistory/index.vue | 163 ++++++++++++++
 src/views/mnt/serverDeploy/form.vue   | 137 +++++++++++
 src/views/mnt/serverDeploy/index.vue  | 183 +++++++++++++++
 25 files changed, 2728 insertions(+)
 create mode 100644 src/api/app.js
 create mode 100644 src/api/database.js
 create mode 100644 src/api/deploy.js
 create mode 100644 src/api/deployHistory.js
 create mode 100644 src/api/serverAccount.js
 create mode 100644 src/api/serverDeploy.js
 create mode 100644 src/views/mnt/account/form.vue
 create mode 100644 src/views/mnt/account/index.vue
 create mode 100644 src/views/mnt/app/form.vue
 create mode 100644 src/views/mnt/app/index.vue
 create mode 100644 src/views/mnt/database/form.vue
 create mode 100644 src/views/mnt/database/index.vue
 create mode 100644 src/views/mnt/deploy/deploy.vue
 create mode 100644 src/views/mnt/deploy/form.vue
 create mode 100644 src/views/mnt/deploy/index.vue
 create mode 100644 src/views/mnt/deploy/sysRestore.vue
 create mode 100644 src/views/mnt/deployHistory/form.vue
 create mode 100644 src/views/mnt/deployHistory/index.vue
 create mode 100644 src/views/mnt/serverDeploy/form.vue
 create mode 100644 src/views/mnt/serverDeploy/index.vue

diff --git a/config/dev.env.js b/config/dev.env.js
index 0115503..05700f8 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -4,6 +4,7 @@ const prodEnv = require('./prod.env')
 
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
+  WS_API: '"ws://localhost:8000"',
   BASE_API: '"http://localhost:8000"'
   // BASE_API: '"https://api.auauz.net"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index 73e8fe1..292b615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
+  WS_API: '"ws://api.auauz.net"',
   BASE_API: '"https://api.auauz.net"'
 }
diff --git a/src/api/app.js b/src/api/app.js
new file mode 100644
index 0000000..8762fc1
--- /dev/null
+++ b/src/api/app.js
@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+
+export function queryApps(data) {
+  return request({
+    url: 'api/app',
+    method: 'get',
+    data
+  })
+}
+
+export function add(data) {
+  return request({
+    url: 'api/app',
+    method: 'post',
+    data
+  })
+}
+
+export function del(id) {
+  return request({
+    url: 'api/app/' + id,
+    method: 'delete'
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: 'api/app',
+    method: 'put',
+    data
+  })
+}
diff --git a/src/api/database.js b/src/api/database.js
new file mode 100644
index 0000000..f26f48d
--- /dev/null
+++ b/src/api/database.js
@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+
+export function add(data) {
+  return request({
+    url: 'api/database',
+    method: 'post',
+    data
+  })
+}
+
+export function del(id) {
+  return request({
+    url: 'api/database/' + id,
+    method: 'delete'
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: 'api/database',
+    method: 'put',
+    data
+  })
+}
diff --git a/src/api/deploy.js b/src/api/deploy.js
new file mode 100644
index 0000000..da3f139
--- /dev/null
+++ b/src/api/deploy.js
@@ -0,0 +1,74 @@
+import request from '@/utils/request'
+
+export function add(data) {
+  return request({
+    url: 'api/deploy',
+    method: 'post',
+    data
+  })
+}
+
+export function del(id) {
+  return request({
+    url: 'api/deploy/' + id,
+    method: 'delete'
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: 'api/deploy',
+    method: 'put',
+    data
+  })
+}
+
+export function getApps() {
+  return request({
+    url: 'api/app',
+    method: 'get'
+  })
+}
+
+export function getServers() {
+  return request({
+    url: 'api/serverDeploy',
+    method: 'get'
+  })
+}
+
+/**
+ * 启动服务
+ * @param data 选中行
+ */
+export function startServer(data) {
+  return request({
+    url: 'api/deploy/startServer',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 停止服务
+ * @param data  选中行
+ */
+export function stopServer(data) {
+  return request({
+    url: 'api/deploy/stopServer',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 停止服务
+ * @param data  选中行
+ */
+export function serverStatus(data) {
+  return request({
+    url: 'api/deploy/serverStatus',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/deployHistory.js b/src/api/deployHistory.js
new file mode 100644
index 0000000..a19512f
--- /dev/null
+++ b/src/api/deployHistory.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+/**
+ * 部署管理
+ * @param data
+ */
+export function add(data) {
+  return request({
+    url: 'api/deployHistory',
+    method: 'post',
+    data
+  })
+}
+
+export function del(id) {
+  return request({
+    url: 'api/deployHistory/' + id,
+    method: 'delete'
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: 'api/deployHistory',
+    method: 'put',
+    data
+  })
+}
+
+/**
+ * 版本回退
+ * @param data 选中行
+ */
+export function reducte(data) {
+  return request({
+    url: 'api/deploy/serverReduction',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/serverAccount.js b/src/api/serverAccount.js
new file mode 100644
index 0000000..0408d67
--- /dev/null
+++ b/src/api/serverAccount.js
@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+
+export function queryServerAccount(data) {
+  return request({
+    url: 'api/serverAccount',
+    method: 'get',
+    data
+  })
+}
+
+export function add(data) {
+  return request({
+    url: 'api/serverAccount',
+    method: 'post',
+    data
+  })
+}
+
+export function del(id) {
+  return request({
+    url: 'api/serverAccount/' + id,
+    method: 'delete'
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: 'api/serverAccount',
+    method: 'put',
+    data
+  })
+}
diff --git a/src/api/serverDeploy.js b/src/api/serverDeploy.js
new file mode 100644
index 0000000..0110ddc
--- /dev/null
+++ b/src/api/serverDeploy.js
@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+
+export function add(data) {
+  return request({
+    url: 'api/serverDeploy',
+    method: 'post',
+    data
+  })
+}
+
+export function del(id) {
+  return request({
+    url: 'api/serverDeploy/' + id,
+    method: 'delete'
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: 'api/serverDeploy',
+    method: 'put',
+    data
+  })
+}
diff --git a/src/store/getters.js b/src/store/getters.js
index 6273784..acb3ebd 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -1,4 +1,5 @@
 const getters = {
+  deployUploadApi: state => state.api.deployUploadApi,
   sidebar: state => state.app.sidebar,
   device: state => state.app.device,
   token: state => state.user.token,
diff --git a/src/store/modules/api.js b/src/store/modules/api.js
index dbda078..9b302c1 100644
--- a/src/store/modules/api.js
+++ b/src/store/modules/api.js
@@ -1,6 +1,8 @@
 const baseUrl = process.env.BASE_API
 const api = {
   state: {
+    // 部署包上传
+    deployUploadApi: baseUrl + '/api/deploy/upload',
     // 实时控制台
     socketApi: baseUrl + '/websocket?token=kl',
     // 图片上传
diff --git a/src/utils/validate.js b/src/utils/validate.js
index 7ec38b4..092e27c 100644
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
@@ -35,3 +35,79 @@ export function validatEmail(str) {
   const reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
   return reg.test(str)
 }
+
+/**
+ * 是否合法IP地址
+ * @param rule
+ * @param value
+ * @param callback
+ */
+export function validateIP(rule, value, callback) {
+  if (value === '' || value === undefined || value == null) {
+    callback()
+  } else {
+    const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
+    if ((!reg.test(value)) && value !== '') {
+      callback(new Error('请输入正确的IP地址'))
+    } else {
+      callback()
+    }
+  }
+}
+
+/* 是否手机号码或者固话*/
+export function validatePhoneTwo(rule, value, callback) {
+  const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/
+  if (value === '' || value === undefined || value == null) {
+    callback()
+  } else {
+    if ((!reg.test(value)) && value !== '') {
+      callback(new Error('请输入正确的电话号码或者固话号码'))
+    } else {
+      callback()
+    }
+  }
+}
+
+/* 是否固话*/
+export function validateTelephone(rule, value, callback) {
+  const reg = /0\d{2}-\d{7,8}/
+  if (value === '' || value === undefined || value == null) {
+    callback()
+  } else {
+    if ((!reg.test(value)) && value !== '') {
+      callback(new Error('请输入正确的固话（格式：区号+号码,如010-1234567）'))
+    } else {
+      callback()
+    }
+  }
+}
+
+/* 是否手机号码*/
+export function validatePhone(rule, value, callback) {
+  const reg = /^[1][3,4,5,7,8][0-9]{9}$/
+  if (value === '' || value === undefined || value == null) {
+    callback()
+  } else {
+    if ((!reg.test(value)) && value !== '') {
+      callback(new Error('请输入正确的电话号码'))
+    } else {
+      callback()
+    }
+  }
+}
+
+/* 是否身份证号码*/
+export function validateIdNo(rule, value, callback) {
+  const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
+  if (value === '' || value === undefined || value == null) {
+    callback()
+  } else {
+    if ((!reg.test(value)) && value !== '') {
+      callback(new Error('请输入正确的身份证号码'))
+    } else {
+      callback()
+    }
+  }
+}
+
diff --git a/src/views/mnt/account/form.vue b/src/views/mnt/account/form.vue
new file mode 100644
index 0000000..fda8b91
--- /dev/null
+++ b/src/views/mnt/account/form.vue
@@ -0,0 +1,108 @@
+<template>
+  <el-dialog
+    :append-to-body="true"
+    :close-on-click-modal="false"
+    :visible.sync="dialog"
+    :title="isAdd ? '新增' : '编辑'"
+    width="500px"
+  >
+    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+      <el-form-item label="名称">
+        <el-input v-model="form.name" style="width: 370px" />
+      </el-form-item>
+      <el-form-item label="账号">
+        <el-input v-model="form.account" style="width: 370px" />
+      </el-form-item>
+      <el-form-item label="密码">
+        <el-input v-model="form.password" type="password" style="width: 370px" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="text" @click="cancel">取消</el-button>
+      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { add, edit } from '@/api/serverAccount'
+export default {
+  props: {
+    isAdd: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      dialog: false,
+      form: {
+        id: '',
+        name: '',
+        account: '',
+        password: ''
+      },
+      rules: {}
+    }
+  },
+  methods: {
+    cancel() {
+      this.resetForm()
+    },
+    doSubmit() {
+      this.loading = true
+      if (this.isAdd) {
+        this.doAdd()
+      } else this.doEdit()
+    },
+    doAdd() {
+      add(this.form)
+        .then(res => {
+          this.resetForm()
+          this.$notify({
+            title: '添加成功',
+            type: 'success',
+            duration: 2500
+          })
+          this.loading = false
+          this.$parent.init()
+        })
+        .catch(err => {
+          this.loading = false
+          console.log(err.response.data.message)
+        })
+    },
+    doEdit() {
+      edit(this.form)
+        .then(res => {
+          this.resetForm()
+          this.$notify({
+            title: '修改成功',
+            type: 'success',
+            duration: 2500
+          })
+          this.loading = false
+          this.$parent.init()
+        })
+        .catch(err => {
+          this.loading = false
+          console.log(err.response.data.message)
+        })
+    },
+    resetForm() {
+      this.dialog = false
+      this.$refs['form'].resetFields()
+      this.form = {
+        id: '',
+        name: '',
+        account: '',
+        password: ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/mnt/account/index.vue b/src/views/mnt/account/index.vue
new file mode 100644
index 0000000..e19c700
--- /dev/null
+++ b/src/views/mnt/account/index.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <!-- 搜索 -->
+      <el-input
+        v-model="query.value"
+        clearable
+        placeholder="输入搜索内容"
+        style="width: 200px"
+        class="filter-item"
+        @keyup.enter.native="toQuery"
+      />
+      <el-select
+        v-model="query.type"
+        clearable
+        placeholder="类型"
+        class="filter-item"
+        style="width: 130px"
+      >
+        <el-option
+          v-for="item in queryTypeOptions"
+          :key="item.key"
+          :label="item.display_name"
+          :value="item.key"
+        />
+      </el-select>
+      <el-button
+        class="filter-item"
+        size="mini"
+        type="success"
+        icon="el-icon-search"
+        @click="toQuery"
+      >搜索</el-button>
+      <!-- 新增 -->
+      <div style="display: inline-block;margin: 0px 2px">
+        <el-button
+          v-permission="['admin','serverAccount:add']"
+          class="filter-item"
+          size="mini"
+          type="primary"
+          icon="el-icon-plus"
+          @click="add"
+        >新增</el-button>
+      </div>
+    </div>
+    <!--表单组件-->
+    <eForm ref="form" :is-add="isAdd" />
+    <!--表格渲染-->
+    <el-table v-loading="loading" :data="data" size="small" style="width: 100%">
+      <el-table-column prop="name" label="名称" />
+      <el-table-column prop="account" label="账号" />
+      <el-table-column
+        v-if="checkPermission(['admin','serverAccount:edit','serverAccount:del'])"
+        label="操作"
+        width="150px"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <el-button
+            v-permission="['admin','serverAccount:edit']"
+            size="mini"
+            type="primary"
+            icon="el-icon-edit"
+            @click="edit(scope.row)"
+          />
+          <el-popover
+            v-permission="['admin','serverAccount:del']"
+            :ref="scope.row.id"
+            placement="top"
+            width="180"
+          >
+            <p>确定删除本条数据吗？</p>
+            <div style="text-align: right; margin: 0">
+              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
+              <el-button
+                :loading="delLoading"
+                type="primary"
+                size="mini"
+                @click="subDelete(scope.row.id)"
+              >确定</el-button>
+            </div>
+            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
+          </el-popover>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页组件-->
+    <el-pagination
+      :total="total"
+      :current-page="page + 1"
+      style="margin-top: 8px"
+      layout="total, prev, pager, next, sizes"
+      @size-change="sizeChange"
+      @current-change="pageChange"
+    />
+  </div>
+</template>
+
+<script>
+import checkPermission from '@/utils/permission'
+import initData from '@/mixins/initData'
+import { del } from '@/api/serverAccount'
+import eForm from './form'
+export default {
+  components: { eForm },
+  mixins: [initData],
+  data() {
+    return {
+      delLoading: false,
+      queryTypeOptions: [
+        { key: 'name', display_name: '名称' },
+        { key: 'account', display_name: '账号' }
+      ]
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      this.init()
+    })
+  },
+  methods: {
+    checkPermission,
+    beforeInit() {
+      this.url = 'api/serverAccount'
+      const sort = 'id,desc'
+      this.params = { page: this.page, size: this.size, sort: sort }
+      const query = this.query
+      const type = query.type
+      const value = query.value
+      if (type && value) {
+        this.params[type] = value
+      }
+      return true
+    },
+    subDelete(id) {
+      this.delLoading = true
+      del(id)
+        .then(res => {
+          this.delLoading = false
+          this.$refs[id].doClose()
+          this.dleChangePage()
+          this.init()
+          this.$notify({
+            title: '删除成功',
+            type: 'success',
+            duration: 2500
+          })
+        })
+        .catch(err => {
+          this.delLoading = false
+          this.$refs[id].doClose()
+          console.log(err.response.data.message)
+        })
+    },
+    add() {
+      this.isAdd = true
+      this.$refs.form.dialog = true
+    },
+    edit(data) {
+      this.isAdd = false
+      const _this = this.$refs.form
+      _this.form = {
+        id: data.id,
+        name: data.name,
+        account: data.account,
+        password: data.password
+      }
+      _this.dialog = true
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/mnt/app/form.vue b/src/views/mnt/app/form.vue
new file mode 100644
index 0000000..efadb42
--- /dev/null
+++ b/src/views/mnt/app/form.vue
@@ -0,0 +1,180 @@
+<template>
+  <el-dialog
+    :append-to-body="true"
+    :close-on-click-modal="false"
+    :visible.sync="dialog"
+    :title="isAdd ? '新增' : '编辑'"
+    width="800px"
+  >
+    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
+      <el-form-item label="应用名称" prop="name">
+        <el-input v-model="form.name" style="width: 670px" placeholder="部署后的文件或者目录名称，用于备份" />
+      </el-form-item>
+      <el-form-item label="应用端口" prop="port">
+        <el-input-number v-model="form.port" placeholder="例如：8080" />
+      </el-form-item>
+      <el-form-item label="上传目录" prop="uploadPath">
+        <el-input
+          v-model="form.uploadPath"
+          style="width: 670px"
+          placeholder="例如: /opt/upload"
+        />
+      </el-form-item>
+      <el-form-item label="部署目录" prop="deployPath">
+        <el-input
+          v-model="form.deployPath"
+          style="width: 670px"
+          placeholder="例如: /opt/app"
+        />
+      </el-form-item>
+      <el-form-item label="备份目录" prop="backupPath">
+        <el-input
+          v-model="form.backupPath"
+          style="width: 670px"
+          placeholder="例如: /opt/backup"
+        />
+      </el-form-item>
+      <el-form-item label="启动脚本" prop="startScript">
+        <el-input
+          v-model="form.startScript"
+          :rows="2"
+          type="textarea"
+          autosize
+          style="width: 670px"
+          placeholder=""
+        />
+      </el-form-item>
+      <el-form-item label="部署脚本" prop="deployScript">
+        <el-input
+          v-model="form.deployScript"
+          :rows="2"
+          type="textarea"
+          autosize
+          style="width: 670px"
+          placeholder=""
+        />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="text" @click="cancel">取消</el-button>
+      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { add, edit } from '@/api/app'
+export default {
+  props: {
+    isAdd: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      dialog: false,
+      form: {
+        id: '',
+        name: '',
+        port: 8080,
+        uploadPath: '/opt/upload',
+        deployPath: '/opt/app',
+        backupPath: '/opt/backup',
+        startScript: '',
+        deployScript: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入应用名称', trigger: 'change' }
+        ],
+        uploadPath: [
+          { required: true, message: '请输入上传目录', trigger: 'change' }
+        ],
+        deployPath: [
+          { required: true, message: '请输入部署目录', trigger: 'change' }
+        ],
+        backupPath: [
+          { required: true, message: '请输入备份目录', trigger: 'change' }
+        ],
+        startScript: [
+          { required: true, message: '请输入启动脚本', trigger: 'change' }
+        ],
+        deployScript: [
+          { required: true, message: '请输入部署脚本', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  mounted() {},
+  methods: {
+    cancel() {
+      this.resetForm()
+    },
+    doSubmit() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.loading = true
+          if (this.isAdd) {
+            this.doAdd()
+          } else this.doEdit()
+        } else {
+          this.$message.error('请将表单中的信息补充完整！')
+        }
+      })
+    },
+    doAdd() {
+      add(this.form)
+        .then(res => {
+          this.resetForm()
+          this.$notify({
+            title: '添加成功',
+            type: 'success',
+            duration: 2500
+          })
+          this.loading = false
+          this.$parent.init()
+        })
+        .catch(err => {
+          this.loading = false
+          console.log(err.response.data.message)
+        })
+    },
+    doEdit() {
+      edit(this.form)
+        .then(res => {
+          this.resetForm()
+          this.$notify({
+            title: '修改成功',
+            type: 'success',
+            duration: 2500
+          })
+          this.loading = false
+          this.$parent.init()
+        })
+        .catch(err => {
+          this.loading = false
+          console.log(err.response.data.message)
+        })
+    },
+    resetForm() {
+      this.dialog = false
+      this.$refs['form'].resetFields()
+      this.form = {
+        id: '',
+        name: '',
+        port: 8080,
+        uploadPath: '/opt/upload',
+        deployPath: '/opt/app',
+        backupPath: '/opt/backup',
+        startScript: '',
+        deployScript: ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/mnt/app/index.vue b/src/views/mnt/app/index.vue
new file mode 100644
index 0000000..b8632cf
--- /dev/null
+++ b/src/views/mnt/app/index.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <!-- 搜索 -->
+      <el-input
+        v-model="query.value"
+        clearable
+        placeholder="输入搜索内容"
+        style="width: 200px"
+        class="filter-item"
+        @keyup.enter.native="toQuery"
+      />
+      <el-select
+        v-model="query.type"
+        clearable
+        placeholder="类型"
+        class="filter-item"
+        style="width: 130px"
+      >
+        <el-option
+          v-for="item in queryTypeOptions"
+          :key="item.key"
+          :label="item.display_name"
+          :value="item.key"
+        />
+      </el-select>
+      <el-button
+        class="filter-item"
+        size="mini"
+        type="success"
+        icon="el-icon-search"
+        @click="toQuery"
+      >搜索</el-button>
+      <!-- 新增 -->
+      <div style="display: inline-block;margin: 0px 2px">
+        <el-button
+          v-permission="['admin','app:add']"
+          class="filter-item"
+          size="mini"
+          type="primary"
+          icon="el-icon-plus"
+          @click="add"
+        >新增</el-button>
+        <el-button
+          v-permission="['admin','app:add']"
+          class="filter-item"
+          size="mini"
+          type="primary"
+          icon="el-icon-plus"
+          @click="copy"
+        >复制新增</el-button>
+      </div>
+    </div>
+    <!--表单组件-->
+    <eForm ref="form" :is-add="isAdd" />
+    <!--表格渲染-->
+    <el-table
+      v-loading="loading"
+      :data="data"
+      highlight-current-row
+      size="small"
+      style="width: 100%"
+      @current-change="handleCurrentChange"
+    >
+      <el-table-column prop="name" label="应用名称" />
+      <el-table-column prop="port" label="端口号" />
+      <el-table-column prop="deployPath" label="部署目录" />
+      <el-table-column
+        v-if="checkPermission(['admin','app:edit','app:del'])"
+        label="操作"
+        width="150px"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <el-button
+            v-permission="['admin','app:edit']"
+            size="mini"
+            type="primary"
+            icon="el-icon-edit"
+            @click="edit(scope.row)"
+          />
+          <el-popover
+            v-permission="['admin','app:del']"
+            :ref="scope.row.id"
+            placement="top"
+            width="180"
+          >
+            <p>确定删除本条数据吗？</p>
+            <div style="text-align: right; margin: 0">
+              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
+              <el-button
+                :loading="delLoading"
+                type="primary"
+                size="mini"
+                @click="subDelete(scope.row.id)"
+              >确定</el-button>
+            </div>
+            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
+          </el-popover>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页组件-->
+    <el-pagination
+      :total="total"
+      :current-page="page + 1"
+      style="margin-top: 8px"
+      layout="total, prev, pager, next, sizes"
+      @size-change="sizeChange"
+      @current-change="pageChange"
+    />
+  </div>
+</template>
+
+<script>
+import checkPermission from '@/utils/permission'
+import initData from '@/mixins/initData'
+import { del } from '@/api/app'
+import eForm from './form'
+export default {
+  components: { eForm },
+  mixins: [initData],
+  data() {
+    return {
+      delLoading: false,
+      queryTypeOptions: [{ key: 'name', display_name: '应用名称' }],
+      currentRow: {}
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      this.init()
+    })
+  },
+  methods: {
+    checkPermission,
+    beforeInit() {
+      this.url = 'api/app'
+      const sort = 'id,desc'
+      this.params = { page: this.page, size: this.size, sort: sort }
+      const query = this.query
+      const type = query.type
+      const value = query.value
+      if (type && value) {
+        this.params[type] = value
+      }
+      return true
+    },
+    subDelete(id) {
+      this.delLoading = true
+      del(id)
+        .then(res => {
+          this.delLoading = false
+          this.$refs[id].doClose()
+          this.dleChangePage()
+          this.init()
+          this.$notify({
+            title: '删除成功',
+            type: 'success',
+            duration: 2500
+          })
+        })
+        .catch(err => {
+          this.delLoading = false
+          this.$refs[id].doClose()
+          console.log(err.response.data.message)
+        })
+    },
+    add() {
+      this.isAdd = true
+      this.$refs.form.dialog = true
+      const _this = this.$refs.form
+      _this.form = {
+        id: '',
+        name: '',
+        port: 8080,
+        uploadPath: '/opt/upload',
+        deployPath: '/opt/app',
+        backupPath: '/opt/backup',
+        startScript: '',
+        deployScript: ''
+      }
+    },
+    copy() {
+      this.isAdd = true
+      this.$refs.form.dialog = true
+      const _this = this.$refs.form
+      _this.form = this.currentRow
+    },
+    edit(data) {
+      this.isAdd = false
+      const _this = this.$refs.form
+      _this.form = {
+        id: data.id,
+        name: data.name,
+        port: data.port,
+        uploadPath: data.uploadPath,
+        deployPath: data.deployPath,
+        backupPath: data.backupPath,
+        startScript: data.startScript,
+        deployScript: data.deployScript
+      }
+      _this.dialog = true
+    },
+    handleCurrentChange(row) {
+      this.currentRow = row
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/mnt/database/form.vue b/src/views/mnt/database/form.vue
new file mode 100644
index 0000000..db00ee0
--- /dev/null
+++ b/src/views/mnt/database/form.vue
@@ -0,0 +1,134 @@
+<template>
+  <el-dialog
+    :append-to-body="true"
+    :close-on-click-modal="false"
+    :visible.sync="dialog"
+    :title="isAdd ? '新增' : '编辑'"
+    width="600px"
+  >
+    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
+      <el-form-item label="数据库名称" prop="name">
+        <el-input v-model="form.name" style="width: 370px" />
+      </el-form-item>
+      <el-form-item label="jdbcUrl" prop="jdbcUrl">
+        <el-input v-model="form.jdbcUrl" style="width: 370px" />
+      </el-form-item>
+      <el-form-item label="用户名" prop="userName">
+        <el-input v-model="form.userName" style="width: 370px" />
+      </el-form-item>
+      <el-form-item label="数据库密码" prop="pwd">
+        <el-input v-model="form.pwd" type="password" style="width: 370px" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="text" @click="cancel">取消</el-button>
+      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { add, edit } from '@/api/database'
+export default {
+  props: {
+    isAdd: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      dialog: false,
+      form: {
+        id: '',
+        name: '',
+        jdbcUrl: '',
+        userName: '',
+        pwd: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入数据库名称', trigger: 'change' }
+        ],
+        jdbcUrl: [
+          { required: true, message: '请输入数据库连接地址', trigger: 'change' }
+        ],
+        userName: [
+          { required: true, message: '请输入用户名', trigger: 'change' }
+        ],
+        pwd: [
+          { required: true, message: '请输入数据库密码', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    cancel() {
+      this.resetForm()
+    },
+    doSubmit() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.loading = true
+          if (this.isAdd) {
+            this.doAdd()
+          } else {
+            this.doEdit()
+          }
+        } else {
+          this.$message.error('请将表单中的信息补充完整！')
+        }
+      })
+    },
+    doAdd() {
+      add(this.form)
+        .then(res => {
+          this.resetForm()
+          this.$notify({
+            title: '添加成功',
+            type: 'success',
+            duration: 2500
+          })
+          this.loading = false
+          this.$parent.init()
+        })
+        .catch(err => {
+          this.loading = false
+          console.log(err.response.data.message)
+        })
+    },
+    doEdit() {
+      edit(this.form)
+        .then(res => {
+          this.resetForm()
+          this.$notify({
+            title: '修改成功',
+            type: 'success',
+            duration: 2500
+          })
+          this.loading = false
+          this.$parent.init()
+        })
+        .catch(err => {
+          this.loading = false
+          console.log(err.response.data.message)
+        })
+    },
+    resetForm() {
+      this.dialog = false
+      this.$refs['form'].resetFields()
+      this.form = {
+        id: '',
+        name: '',
+        jdbcUrl: '',
+        userName: '',
+        pwd: ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/mnt/database/index.vue b/src/views/mnt/database/index.vue
new file mode 100644
index 0000000..fdf09c8
--- /dev/null
+++ b/src/views/mnt/database/index.vue
@@ -0,0 +1,179 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <!-- 搜索 -->
+      <el-input
+        v-model="query.value"
+        clearable
+        placeholder="输入搜索内容"
+        style="width: 200px"
+        class="filter-item"
+        @keyup.enter.native="toQuery"
+      />
+      <el-select
+        v-model="query.type"
+        clearable
+        placeholder="类型"
+        class="filter-item"
+        style="width: 130px"
+      >
+        <el-option
+          v-for="item in queryTypeOptions"
+          :key="item.key"
+          :label="item.display_name"
+          :value="item.key"
+        />
+      </el-select>
+      <el-button
+        class="filter-item"
+        size="mini"
+        type="success"
+        icon="el-icon-search"
+        @click="toQuery"
+      >搜索</el-button>
+      <!-- 新增 -->
+      <div style="display: inline-block;margin: 0px 2px">
+        <el-button
+          v-permission="['admin','database:add']"
+          class="filter-item"
+          size="mini"
+          type="primary"
+          icon="el-icon-plus"
+          @click="add"
+        >新增</el-button>
+      </div>
+    </div>
+    <!--表单组件-->
+    <eForm ref="form" :is-add="isAdd" />
+    <!--表格渲染-->
+    <el-table v-loading="loading" :data="data" size="small" style="width: 100%">
+      <!--<el-table-column prop="id" label="id" />-->
+      <el-table-column prop="name" label="数据库名称" />
+      <el-table-column prop="jdbcUrl" label="数据库连接地址" />
+      <el-table-column prop="userName" label="用户名" />
+      <el-table-column
+        v-if="checkPermission(['admin','database:edit','database:del'])"
+        label="操作"
+        width="150px"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <el-button
+            v-permission="['admin','database:edit']"
+            size="mini"
+            type="primary"
+            icon="el-icon-edit"
+            @click="edit(scope.row)"
+          />
+          <el-popover
+            v-permission="['admin','database:del']"
+            :ref="scope.row.id"
+            placement="top"
+            width="180"
+          >
+            <p>确定删除本条数据吗？</p>
+            <div style="text-align: right; margin: 0">
+              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
+              <el-button
+                :loading="delLoading"
+                type="primary"
+                size="mini"
+                @click="subDelete(scope.row.id)"
+              >确定</el-button>
+            </div>
+            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
+          </el-popover>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页组件-->
+    <el-pagination
+      :total="total"
+      :current-page="page + 1"
+      style="margin-top: 8px"
+      layout="total, prev, pager, next, sizes"
+      @size-change="sizeChange"
+      @current-change="pageChange"
+    />
+  </div>
+</template>
+
+<script>
+import checkPermission from '@/utils/permission'
+import initData from '@/mixins/initData'
+import { del } from '@/api/database'
+import eForm from './form'
+export default {
+  components: { eForm },
+  mixins: [initData],
+  data() {
+    return {
+      delLoading: false,
+      queryTypeOptions: [
+        { key: 'name', display_name: '数据库名称' },
+        { key: 'jdbcUrl', display_name: '数据库连接地址' }
+      ]
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      this.init()
+    })
+  },
+  methods: {
+    checkPermission,
+    beforeInit() {
+      this.url = 'api/database'
+      const sort = 'id,desc'
+      this.params = { page: this.page, size: this.size, sort: sort }
+      const query = this.query
+      const type = query.type
+      const value = query.value
+      if (type && value) {
+        this.params[type] = value
+      }
+      return true
+    },
+    subDelete(id) {
+      this.delLoading = true
+      del(id)
+        .then(res => {
+          this.delLoading = false
+          this.$refs[id].doClose()
+          this.dleChangePage()
+          this.init()
+          this.$notify({
+            title: '删除成功',
+            type: 'success',
+            duration: 2500
+          })
+        })
+        .catch(err => {
+          this.delLoading = false
+          this.$refs[id].doClose()
+          console.log(err.response.data.message)
+        })
+    },
+    add() {
+      this.isAdd = true
+      this.$refs.form.dialog = true
+    },
+    edit(data) {
+      this.isAdd = false
+      const _this = this.$refs.form
+      _this.form = {
+        id: data.id,
+        name: data.name,
+        jdbcUrl: data.jdbcUrl,
+        userName: data.userName,
+        pwd: data.pwd
+      }
+      _this.dialog = true
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/mnt/deploy/deploy.vue b/src/views/mnt/deploy/deploy.vue
new file mode 100644
index 0000000..615c113
--- /dev/null
+++ b/src/views/mnt/deploy/deploy.vue
@@ -0,0 +1,217 @@
+<template>
+  <el-dialog
+    :append-to-body="true"
+    :close-on-click-modal="false"
+    :visible.sync="dialog"
+    title="应用部署"
+    width="400px"
+  >
+    <el-form ref="form" :model="form" :rules="rules" size="small">
+      <el-upload
+        :action="deployUploadApi"
+        :data="deployInfo"
+        :headers="headers"
+        :on-success="handleSuccess"
+        :on-error="handleError"
+        class="upload-demo"
+        drag
+      >
+        <i class="el-icon-upload" />
+        <div class="el-upload__text">
+          将文件拖到此处，或
+          <em>点击上传</em>
+        </div>
+        <div slot="tip" class="el-upload__tip">多个应用上传文件名称为all.zip,数据库更新脚本扩展名为.sql,上传成功后系统自动部署系统。</div>
+      </el-upload>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="cancel">关闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { add, edit, getApps, getServers } from '@/api/deploy'
+import { mapGetters } from 'vuex'
+import { getToken } from '@/utils/auth'
+
+export default {
+  props: {},
+  data() {
+    return {
+      loading: false,
+      dialog: false,
+      apps: [],
+      servers: [],
+      headers: {
+        Authorization: 'Bearer ' + getToken()
+      },
+      deployInfo: {},
+      form: {
+        id: '',
+        appId: '',
+        ip: '',
+        selectIp: []
+      },
+      rules: {}
+    }
+  },
+  computed: {
+    ...mapGetters(['deployUploadApi'])
+  },
+  created() {
+    this.initWebSocket()
+  },
+  destroyed: function() {
+    this.webSocketClose()
+  },
+  mounted() {
+    this.initSelect()
+  },
+  methods: {
+    cancel() {
+      this.resetForm()
+    },
+    doSubmit() {
+      this.loading = true
+      if (this.isAdd) {
+        this.doAdd()
+      } else {
+        this.doEdit()
+      }
+    },
+    joinIp() {
+      this.form.ip = ''
+      this.form.selectIp.forEach(ip => {
+        if (this.form.ip !== '') {
+          this.form.ip += ','
+        }
+        this.form.ip += ip
+      })
+    },
+    doAdd() {
+      this.joinIp()
+      add(this.form)
+        .then(res => {
+          this.resetForm()
+          this.$notify({
+            title: '添加成功',
+            type: 'success',
+            duration: 2500
+          })
+          this.loading = false
+          this.$parent.init()
+        })
+        .catch(err => {
+          this.loading = false
+          console.log(err.response.data.message)
+        })
+    },
+    doEdit() {
+      this.joinIp()
+      edit(this.form)
+        .then(res => {
+          this.resetForm()
+          this.$notify({
+            title: '修改成功',
+            type: 'success',
+            duration: 2500
+          })
+          this.loading = false
+          this.$parent.init()
+        })
+        .catch(err => {
+          this.loading = false
+          console.log(err.response.data.message)
+        })
+    },
+    resetForm() {
+      this.dialog = false
+      this.$refs['form'].resetFields()
+      this.form = {
+        id: '',
+        appId: '',
+        ip: '',
+        selectIp: []
+      }
+    },
+    initSelect() {
+      getApps().then(res => {
+        this.apps = res.content
+      })
+      getServers().then(res => {
+        this.servers = res.content
+      })
+    },
+    handleSuccess(response, file, fileList) {
+      const uid = file.uid
+      const id = response.id
+      console.log(uid, id)
+    },
+    // 监听上传失败
+    handleError(e, file, fileList) {
+      const msg = JSON.parse(e.message)
+      this.$notify({
+        title: msg.message,
+        type: 'error',
+        duration: 2500
+      })
+    },
+    initWebSocket() {
+      const wsUri = process.env.WS_API + '/webSocket/deploy'
+      this.websock = new WebSocket(wsUri)
+      this.websock.onopen = this.webSocketOnOpen
+      this.websock.onerror = this.webSocketOnError
+      this.websock.onmessage = this.webSocketOnMessage
+      this.websock.onclose = this.webSocketClose
+    },
+    webSocketOnOpen() {
+      this.$notify({
+        title: 'WebSocket连接成功',
+        type: 'success',
+        duration: 2500
+      })
+    },
+    webSocketOnError(e) {
+      this.$notify({
+        title: 'WebSocket连接发生错误',
+        type: 'error',
+        duration: 0
+      })
+    },
+    webSocketOnMessage(e) {
+      const data = JSON.parse(e.data)
+      if (data.msgType === 'INFO') {
+        this.$notify({
+          title: '',
+          message: data.msg,
+          type: 'success',
+          dangerouslyUseHTMLString: true,
+          duration: 5500
+        })
+      } else if (data.msgType === 'ERROR') {
+        this.$notify({
+          title: '',
+          message: data.msg,
+          dangerouslyUseHTMLString: true,
+          type: 'error',
+          duration: 0
+        })
+      }
+    },
+    webSocketSend(agentData) {
+      this.websock.send(agentData)
+    },
+    webSocketClose(e) {
+      this.$notify({
+        title: 'WebSocket已经关闭',
+        type: 'info',
+        duration: 1000
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/mnt/deploy/form.vue b/src/views/mnt/deploy/form.vue
new file mode 100644
index 0000000..2a70411
--- /dev/null
+++ b/src/views/mnt/deploy/form.vue
@@ -0,0 +1,132 @@
+<template>
+  <el-dialog
+    :append-to-body="true"
+    :close-on-click-modal="false"
+    :visible.sync="dialog"
+    :title="isAdd ? '新增' : '编辑'"
+    width="500px"
+  >
+    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+      <el-form-item label="应用编号">
+        <el-select v-model="form.appId" placeholder="请选择" style="width: 370px">
+          <el-option v-for="item in apps" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="IP列表">
+        <el-select v-model="form.selectIp" multiple placeholder="请选择" style="width: 370px">
+          <el-option v-for="item in servers" :key="item.id" :label="item.id" :value="item.id" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="text" @click="cancel">取消</el-button>
+      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { add, edit, getApps, getServers } from '@/api/deploy'
+export default {
+  props: {
+    isAdd: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      dialog: false,
+      apps: [],
+      servers: [],
+      form: {
+        id: '',
+        appId: '',
+        ip: '',
+        selectIp: []
+      },
+      rules: {}
+    }
+  },
+  mounted() {
+    this.initSelect()
+  },
+  methods: {
+    cancel() {
+      this.resetForm()
+    },
+    doSubmit() {
+      this.loading = true
+      if (this.isAdd) {
+        this.doAdd()
+      } else this.doEdit()
+    },
+    joinIp() {
+      this.form.ip = ''
+      this.form.selectIp.forEach(ip => {
+        if (this.form.ip !== '') {
+          this.form.ip += ','
+        }
+        this.form.ip += ip
+      })
+    },
+    doAdd() {
+      this.joinIp()
+      add(this.form)
+        .then(res => {
+          this.resetForm()
+          this.$notify({
+            title: '添加成功',
+            type: 'success',
+            duration: 2500
+          })
+          this.loading = false
+          this.$parent.init()
+        })
+        .catch(err => {
+          this.loading = false
+          console.log(err.response.data.message)
+        })
+    },
+    doEdit() {
+      this.joinIp()
+      edit(this.form)
+        .then(res => {
+          this.resetForm()
+          this.$notify({
+            title: '修改成功',
+            type: 'success',
+            duration: 2500
+          })
+          this.loading = false
+          this.$parent.init()
+        })
+        .catch(err => {
+          this.loading = false
+          console.log(err.response.data.message)
+        })
+    },
+    resetForm() {
+      this.dialog = false
+      this.$refs['form'].resetFields()
+      this.form = {
+        id: '',
+        appId: '',
+        ip: '',
+        selectIp: []
+      }
+    },
+    initSelect() {
+      getApps().then(res => {
+        this.apps = res.content
+      })
+      getServers().then(res => {
+        this.servers = res.content
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/mnt/deploy/index.vue b/src/views/mnt/deploy/index.vue
new file mode 100644
index 0000000..8857ff8
--- /dev/null
+++ b/src/views/mnt/deploy/index.vue
@@ -0,0 +1,313 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <!-- 搜索 -->
+      <el-input
+        v-model="query.value"
+        clearable
+        placeholder="输入搜索内容"
+        style="width: 200px"
+        class="filter-item"
+        @keyup.enter.native="toQuery"
+      />
+      <el-select
+        v-model="query.type"
+        clearable
+        placeholder="类型"
+        class="filter-item"
+        style="width: 130px"
+      >
+        <el-option
+          v-for="item in queryTypeOptions"
+          :key="item.key"
+          :label="item.display_name"
+          :value="item.key"
+        />
+      </el-select>
+      <el-button
+        class="filter-item"
+        size="mini"
+        type="success"
+        icon="el-icon-search"
+        @click="toQuery"
+      >搜索
+      </el-button>
+      <!-- 新增 -->
+      <div style="display: inline-block;margin: 0px 2px">
+        <el-button
+          v-permission="['admin','deploy:add']"
+          class="filter-item"
+          size="mini"
+          type="primary"
+          icon="el-icon-plus"
+          @click="add"
+        >新增
+        </el-button>
+        <el-button
+          v-permission="['admin','deploy:add']"
+          class="filter-item"
+          size="mini"
+          type="primary"
+          icon="el-icon-upload"
+          @click="sysRestore"
+        >系统还原
+        </el-button>
+        <el-button
+          v-permission="['admin','deploy:add']"
+          class="filter-item"
+          size="mini"
+          type="primary"
+          icon="el-icon-upload"
+          @click="serverStatus"
+        >状态查询
+        </el-button>
+        <el-button
+          v-permission="['admin','deploy:add']"
+          class="filter-item"
+          size="mini"
+          type="success"
+          icon="el-icon-upload"
+          @click="startServer"
+        >启动
+        </el-button>
+        <el-button
+          v-permission="['admin','deploy:add']"
+          class="filter-item"
+          size="mini"
+          type="danger"
+          icon="el-icon-upload"
+          @click="stopServer"
+        >停止
+        </el-button>
+        <el-button
+          v-permission="['admin','deploy:add']"
+          class="filter-item"
+          size="mini"
+          type="warning"
+          icon="el-icon-upload"
+          @click="deploy"
+        >一键部署
+        </el-button>
+      </div>
+    </div>
+    <!--表单组件-->
+    <eForm ref="form" :is-add="isAdd"/>
+    <!--    系统还原组件-->
+    <fForm ref="sysRestore" :app-name="appName" :key="times"/>
+    <dForm ref="deploy"/>
+    <!--表格渲染-->
+    <el-table
+      v-loading="loading"
+      :data="data"
+      highlight-current-row
+      stripe
+      size="small"
+      style="width: 100%"
+      @current-change="handleCurrentChange"
+    >
+      <el-table-column :formatter="formatterAppId" prop="appId" label="应用名称"/>
+      <el-table-column prop="ip" label="服务器列表"/>
+      <el-table-column
+        v-if="checkPermission(['admin','deploy:edit','deploy:del'])"
+        label="操作"
+        width="150px"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <el-button
+            v-permission="['admin','deploy:edit']"
+            size="mini"
+            type="primary"
+            icon="el-icon-edit"
+            @click="edit(scope.row)"
+          />
+          <el-popover
+            v-permission="['admin','deploy:del']"
+            :ref="scope.row.id"
+            placement="top"
+            width="180"
+          >
+            <p>确定删除本条数据吗？</p>
+            <div style="text-align: right;margin: 0">
+              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
+              <el-button
+                :loading="delLoading"
+                type="primary"
+                size="mini"
+                @click="subDelete(scope.row.id)"
+              >确定
+              </el-button>
+            </div>
+            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
+          </el-popover>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页组件-->
+    <el-pagination
+      :total="total"
+      :current-page="page + 1"
+      style="margin-top: 8px"
+      layout="total, prev, pager, next, sizes"
+      @size-change="sizeChange"
+      @current-change="pageChange"
+    />
+  </div>
+</template>
+
+<script>
+import checkPermission from '@/utils/permission'
+import initData from '@/mixins/initData'
+import { del, stopServer, serverStatus, startServer } from '@/api/deploy'
+import { queryApps } from '@/api/app'
+import eForm from './form'
+import dForm from './deploy'
+import fForm from './sysRestore'
+export default {
+  components: { eForm, dForm, fForm },
+  mixins: [initData],
+  data() {
+    return {
+      delLoading: false,
+      queryTypeOptions: [{ key: 'ip', display_name: '服务器列表' }],
+      appList: [],
+      appMap: {},
+      currentRow: {},
+      selectIndex: '',
+      appName: '111',
+      urlHistory: '',
+      times: 0,
+      appId: '',
+      deployId: ''
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      this.init()
+    })
+  },
+  methods: {
+    checkPermission,
+    async beforeInit() {
+      this.url = 'api/deploy'
+      const sort = 'id,desc'
+      this.params = { page: this.page, size: this.size, sort: sort }
+      await queryApps({}).then(res => {
+        this.appList = res.content
+        this.appList.forEach(({ id, name }) => {
+          this.appMap[id] = name
+        })
+      })
+      const query = this.query
+      const type = query.type
+      const value = query.value
+      if (type && value) {
+        this.params[type] = value
+      }
+      return true
+    },
+    subDelete(id) {
+      this.delLoading = true
+      del(id)
+        .then(res => {
+          this.delLoading = false
+          this.$refs[id].doClose()
+          this.dleChangePage()
+          this.init()
+          this.$notify({
+            title: '删除成功',
+            type: 'success',
+            duration: 2500
+          })
+        })
+        .catch(err => {
+          this.delLoading = false
+          this.$refs[id].doClose()
+          console.log(err.response.data.message)
+        })
+    },
+    deploy() {
+      if (this.selectIndex === '') {
+        this.$message.error('请先选择服务')
+      } else {
+        this.$refs.deploy.dialog = true
+        debugger
+        this.$refs.deploy.deployInfo = this.currentRow
+      }
+    },
+    sysRestore() {
+      if (this.selectIndex === '') {
+        this.$message.error('请先选择服务')
+      } else {
+        this.$refs.form.$emit('open')
+        this.$refs.sysRestore.dialog = true
+      }
+    },
+    add() {
+      this.isAdd = true
+      this.$refs.form.dialog = true
+    },
+    edit(data) {
+      this.isAdd = false
+      const _this = this.$refs.form
+      _this.form = {
+        id: data.id,
+        appId: data.appId,
+        ip: data.ip
+      }
+      _this.dialog = true
+    },
+    formatterAppId(row, column) {
+      return this.appMap[row.appId]
+    },
+    handleCurrentChange(row) {
+      this.currentRow = row
+      this.selectIndex = !row ? null : row.id
+      this.appName = !row ? null : this.appMap[row.appId]
+      this.times = this.times + !row ? 0 : 1
+      this.appId = !row ? null : row.appId
+      this.deployId = !row ? null : row.id
+    },
+    startServer() {
+      if (this.selectIndex === '') {
+        this.$message.error('请先选择服务')
+      } else {
+        startServer(JSON.stringify(this.currentRow))
+          .then(res => {
+          })
+          .catch(err => {
+            console.log('error:' + err.response.data.message)
+          })
+      }
+    },
+    stopServer() {
+      if (this.selectIndex === '') {
+        this.$message.error('请先选择服务')
+      } else {
+        stopServer(JSON.stringify(this.currentRow))
+          .then(res => {
+          })
+          .catch(err => {
+            console.log('error:' + err.response.data.message)
+          })
+      }
+    },
+    serverStatus() {
+      if (this.selectIndex === '') {
+        this.$message.error('请先选择服务')
+      } else {
+        serverStatus(JSON.stringify(this.currentRow))
+          .then(res => {
+          })
+          .catch(err => {
+            console.log('error:' + err.response.data.message)
+          })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/mnt/deploy/sysRestore.vue b/src/views/mnt/deploy/sysRestore.vue
new file mode 100644
index 0000000..fcd6b4f
--- /dev/null
+++ b/src/views/mnt/deploy/sysRestore.vue
@@ -0,0 +1,152 @@
+<template>
+  <el-dialog
+    :append-to-body="true"
+    :close-on-click-modal="false"
+    :visible.sync="dialog"
+    title="系统还原"
+    width="800px"
+  >
+    <!--工具栏-->
+    <div class="head-container">
+      <el-input
+        v-model="query.value"
+        clearable
+        placeholder="输入部署时间"
+        style="width: 200px"
+        class="filter-item"
+        @keyup.enter.native="toQuery"
+      />
+      <el-button
+        class="filter-item"
+        size="mini"
+        type="success"
+        icon="el-icon-search"
+        @click="toQuery"
+      >搜索
+      </el-button>
+    </div>
+    <el-form size="small" label-width="80px">
+      <!--表格渲染-->
+      <el-table
+        v-loading="loading"
+        :data="data"
+        size="small"
+        style="width: 100%"
+        @row-click="showRow"
+      >
+        <el-table-column width="30px">
+          <template slot-scope="scope">
+            <el-radio v-model="radio" :label="scope.$index"/>
+          </template>
+        </el-table-column>
+        <el-table-column prop="appName" label="应用名称"/>
+        <el-table-column prop="ip" label="部署IP"/>
+        <el-table-column prop="deployDate" label="部署时间"/>
+        <el-table-column prop="deployUser" label="部署人员"/>
+      </el-table>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="text" @click="cancel">取消</el-button>
+      <el-button
+        v-permission="['admin','deploy:add']"
+        :loading="loading"
+        type="primary"
+        @click="doSubmit"
+      >确认
+      </el-button>
+    </div>
+    <!--分页组件-->
+    <el-pagination
+      :total="total"
+      :current-page="page + 1"
+      style="margin-top: 8px"
+      layout="total, prev, pager, next, sizes"
+      @size-change="sizeChange"
+      @current-change="pageChange"
+    />
+  </el-dialog>
+</template>
+
+<script>
+import checkPermission from '@/utils/permission'
+import initData from '@/mixins/initData'
+import { reducte } from '@/api/deployHistory'
+export default {
+  mixins: [initData],
+  props: {
+    appName: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      dialog: false,
+      history: [],
+      radio: '',
+      appNames: '',
+      selectIndex: ''
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      this.init()
+    })
+  },
+  methods: {
+    checkPermission,
+    beforeInit() {
+      this.url = 'api/deployHistory'
+      this.deployId = this.$parent.deployId
+      debugger
+      if (this.deployId === '') {
+        return false
+      }
+      const sort = 'deployDate,desc'
+      this.params = {
+        page: this.page,
+        size: this.size,
+        sort: sort,
+        deployId: this.$parent.deployId
+      }
+      const query = this.query
+      const type = 'deployDate'
+      const value = query.value
+      this.params[type] = value
+      return true
+    },
+    formatterAppId(row, column) {
+      return this.appNames
+    },
+    showRow(row) {
+      this.radio = this.data.indexOf(row)
+      this.selectIndex = row.id
+    },
+    cancel() {
+      this.dialog = false
+      this.loading = false
+    },
+    doSubmit() {
+      if (this.selectIndex === '') {
+        this.$message.error('请选择要还原的备份')
+      } else {
+        reducte(JSON.stringify(this.data[this.radio]))
+          .then(res => {
+            this.dialog = false
+            this.loading = false
+            this.appNames = ''
+            this.$parent.init()
+          })
+          .catch(err => {
+            this.loading = false
+            console.log('error:' + err.response.data.message)
+          })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/mnt/deployHistory/form.vue b/src/views/mnt/deployHistory/form.vue
new file mode 100644
index 0000000..99118d3
--- /dev/null
+++ b/src/views/mnt/deployHistory/form.vue
@@ -0,0 +1,133 @@
+<template>
+  <el-dialog
+    :append-to-body="true"
+    :close-on-click-modal="false"
+    :visible.sync="dialog"
+    :title="isAdd ? '新增' : '编辑'"
+    width="500px"
+  >
+    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+      <el-form-item label="应用名称" prop="appName">
+        <el-input v-model="form.appName" style="width: 370px" />
+      </el-form-item>
+      <el-form-item label="部署IP" prop="ip">
+        <el-input v-model="form.ip" style="width: 370px" />
+      </el-form-item>
+      <el-form-item label="部署时间" prop="deployDate">
+        <el-input v-model="form.deployDate" style="width: 370px" />
+      </el-form-item>
+      <el-form-item label="部署人员" prop="deployUser">
+        <el-input v-model="form.deployUser" style="width: 370px" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="text" @click="cancel">取消</el-button>
+      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { add, edit } from '@/api/deployHistory'
+export default {
+  props: {
+    isAdd: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      dialog: false,
+      form: {
+        id: '',
+        appName: '',
+        ip: '',
+        deployDate: '',
+        deployUser: ''
+      },
+      rules: {
+        id: [{ required: true, message: '请输入编号', trigger: 'change' }],
+        appName: [
+          { required: true, message: '请输入应用名称', trigger: 'change' }
+        ],
+        ip: [{ required: true, message: '请输入部署IP', trigger: 'change' }],
+        deployDate: [
+          { required: true, message: '请输入部署时间', trigger: 'change' }
+        ],
+        deployUser: [
+          { required: true, message: '请输入部署人员', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    cancel() {
+      this.resetForm()
+    },
+    doSubmit() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.loading = true
+          if (this.isAdd) {
+            this.doAdd()
+          } else {
+            this.doEdit()
+          }
+        } else {
+          this.$message.error('请将表单中的信息补充完整！')
+        }
+      })
+    },
+    doAdd() {
+      add(this.form)
+        .then(res => {
+          this.resetForm()
+          this.$notify({
+            title: '添加成功',
+            type: 'success',
+            duration: 2500
+          })
+          this.loading = false
+          this.$parent.init()
+        })
+        .catch(err => {
+          this.loading = false
+          console.log(err.response.data.message)
+        })
+    },
+    doEdit() {
+      edit(this.form)
+        .then(res => {
+          this.resetForm()
+          this.$notify({
+            title: '修改成功',
+            type: 'success',
+            duration: 2500
+          })
+          this.loading = false
+          this.$parent.init()
+        })
+        .catch(err => {
+          this.loading = false
+          console.log(err.response.data.message)
+        })
+    },
+    resetForm() {
+      this.dialog = false
+      this.$refs['form'].resetFields()
+      this.form = {
+        id: '',
+        appName: '',
+        ip: '',
+        deployDate: '',
+        deployUser: ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/mnt/deployHistory/index.vue b/src/views/mnt/deployHistory/index.vue
new file mode 100644
index 0000000..99771ce
--- /dev/null
+++ b/src/views/mnt/deployHistory/index.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <!-- 搜索 -->
+      <el-input
+        v-model="query.value"
+        clearable
+        placeholder="输入搜索内容"
+        style="width: 200px"
+        class="filter-item"
+        @keyup.enter.native="toQuery"
+      />
+      <el-select
+        v-model="query.type"
+        clearable
+        placeholder="类型"
+        class="filter-item"
+        style="width: 130px"
+      >
+        <el-option
+          v-for="item in queryTypeOptions"
+          :key="item.key"
+          :label="item.display_name"
+          :value="item.key"
+        />
+      </el-select>
+      <el-button
+        class="filter-item"
+        size="mini"
+        type="success"
+        icon="el-icon-search"
+        @click="toQuery"
+      >搜索</el-button>
+    </div>
+    <!--表单组件-->
+    <eForm ref="form" :is-add="isAdd" />
+    <!--表格渲染-->
+    <el-table v-loading="loading" :data="data" size="small" style="width: 100%">
+      <el-table-column prop="appName" label="应用名称" />
+      <el-table-column prop="ip" label="部署IP" />
+      <el-table-column prop="deployDate" label="部署时间" />
+      <el-table-column prop="deployUser" label="部署人员" />
+      <el-table-column
+        v-if="checkPermission(['admin','deployHistory:del'])"
+        label="操作"
+        width="150px"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <el-popover
+            v-permission="['admin','deployHistory:del']"
+            :ref="scope.row.id"
+            placement="top"
+            width="180"
+          >
+            <p>确定删除本条数据吗？</p>
+            <div style="text-align: right; margin: 0">
+              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
+              <el-button
+                :loading="delLoading"
+                type="primary"
+                size="mini"
+                @click="subDelete(scope.row.id)"
+              >确定</el-button>
+            </div>
+            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
+          </el-popover>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页组件-->
+    <el-pagination
+      :total="total"
+      :current-page="page + 1"
+      style="margin-top: 8px"
+      layout="total, prev, pager, next, sizes"
+      @size-change="sizeChange"
+      @current-change="pageChange"
+    />
+  </div>
+</template>
+
+<script>
+import checkPermission from '@/utils/permission'
+import initData from '@/mixins/initData'
+import { del } from '@/api/deployHistory'
+import eForm from './form'
+
+export default {
+  components: { eForm },
+  mixins: [initData],
+  data() {
+    return {
+      delLoading: false,
+      queryTypeOptions: [
+        { key: 'appName', display_name: '应用名称' },
+        { key: 'ip', display_name: '部署IP' },
+        { key: 'deployUser', display_name: '部署人员' }
+      ]
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      this.init()
+    })
+  },
+  methods: {
+    checkPermission,
+    beforeInit() {
+      this.url = 'api/deployHistory'
+      const sort = 'id,desc'
+      this.params = { page: this.page, size: this.size, sort: sort }
+      const query = this.query
+      const type = query.type
+      const value = query.value
+      if (type && value) {
+        this.params[type] = value
+      }
+      return true
+    },
+    subDelete(id) {
+      this.delLoading = true
+      del(id)
+        .then(res => {
+          this.delLoading = false
+          this.$refs[id].doClose()
+          this.dleChangePage()
+          this.init()
+          this.$notify({
+            title: '删除成功',
+            type: 'success',
+            duration: 2500
+          })
+        })
+        .catch(err => {
+          this.delLoading = false
+          this.$refs[id].doClose()
+          console.log(err.response.data.message)
+        })
+    },
+    add() {
+      this.isAdd = true
+      this.$refs.form.dialog = true
+    },
+    edit(data) {
+      this.isAdd = false
+      const _this = this.$refs.form
+      _this.form = {
+        id: data.id,
+        appName: data.appName,
+        ip: data.ip,
+        deployDate: data.deployDate,
+        deployUser: data.deployUser
+      }
+      _this.dialog = true
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/mnt/serverDeploy/form.vue b/src/views/mnt/serverDeploy/form.vue
new file mode 100644
index 0000000..3baf118
--- /dev/null
+++ b/src/views/mnt/serverDeploy/form.vue
@@ -0,0 +1,137 @@
+<template>
+  <el-dialog
+    :append-to-body="true"
+    :close-on-click-modal="false"
+    :visible.sync="dialog"
+    :title="isAdd ? '新增' : '编辑'"
+    width="500px"
+  >
+    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
+      <el-form-item label="服务器IP" prop="id">
+        <el-input v-model="form.id" :disabled="!isAdd" style="width: 370px" />
+      </el-form-item>
+      <el-form-item label="服务器账号" prop="accountId">
+        <el-select
+          v-model="form.accountId"
+          clearable
+          placeholder="选择对应账号"
+          class="filter-item"
+          style="width: 370px"
+        >
+          <el-option
+            v-for="item in accountList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="text" @click="cancel">取消</el-button>
+      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { add, edit } from '@/api/serverDeploy'
+import { validateIP } from '@/utils/validate'
+
+export default {
+  props: {
+    isAdd: {
+      type: Boolean,
+      required: true
+    },
+    accountList: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      dialog: false,
+      form: {
+        id: '',
+        accountId: ''
+      },
+      rules: {
+        id: [
+          { required: true, message: '请输入IP', trigger: 'change' },
+          { validator: validateIP, trigger: 'change' }
+        ],
+        accountId: [
+          { required: true, message: '请选择账号', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  mounted() {},
+  methods: {
+    cancel() {
+      this.resetForm()
+    },
+    doSubmit() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.loading = true
+          if (this.isAdd) {
+            this.doAdd()
+          } else {
+            this.doEdit()
+          }
+        } else {
+          this.$message.error('请将表单中的信息补充完整！')
+        }
+      })
+    },
+    doAdd() {
+      add(this.form)
+        .then(res => {
+          this.resetForm()
+          this.$notify({
+            title: '添加成功',
+            type: 'success',
+            duration: 2500
+          })
+          this.loading = false
+          this.$parent.init()
+        })
+        .catch(err => {
+          this.loading = false
+          console.log(err.response.data.message)
+        })
+    },
+    doEdit() {
+      edit(this.form)
+        .then(res => {
+          this.resetForm()
+          this.$notify({
+            title: '修改成功',
+            type: 'success',
+            duration: 2500
+          })
+          this.loading = false
+          this.$parent.init()
+        })
+        .catch(err => {
+          this.loading = false
+          console.log(err.response.data.message)
+        })
+    },
+    resetForm() {
+      this.dialog = false
+      this.$refs['form'].resetFields()
+      this.form = {
+        id: '',
+        accountId: ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/mnt/serverDeploy/index.vue b/src/views/mnt/serverDeploy/index.vue
new file mode 100644
index 0000000..de00d4d
--- /dev/null
+++ b/src/views/mnt/serverDeploy/index.vue
@@ -0,0 +1,183 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <!-- 搜索 -->
+      <el-input
+        v-model="query.value"
+        clearable
+        placeholder="输入搜索内容"
+        style="width: 200px"
+        class="filter-item"
+        @keyup.enter.native="toQuery"
+      />
+      <el-select
+        v-model="query.type"
+        clearable
+        placeholder="类型"
+        class="filter-item"
+        style="width: 130px"
+      >
+        <el-option
+          v-for="item in queryTypeOptions"
+          :key="item.key"
+          :label="item.display_name"
+          :value="item.key"
+        />
+      </el-select>
+      <el-button
+        class="filter-item"
+        size="mini"
+        type="success"
+        icon="el-icon-search"
+        @click="toQuery"
+      >搜索</el-button>
+      <!-- 新增 -->
+      <div style="display: inline-block;margin: 0px 2px">
+        <el-button
+          v-permission="['admin','serverDeploy:add']"
+          class="filter-item"
+          size="mini"
+          type="primary"
+          icon="el-icon-plus"
+          @click="add"
+        >新增</el-button>
+      </div>
+    </div>
+    <!--表单组件-->
+    <eForm ref="form" :is-add="isAdd" :account-list="accountList" />
+    <!--表格渲染-->
+    <el-table v-loading="loading" :data="data" size="small" style="width: 100%">
+      <el-table-column prop="id" label="服务器IP" />
+      <el-table-column :formatter="accountTranslate" prop="accountId" label="服务器账号" />
+      <el-table-column
+        v-if="checkPermission(['admin','serverDeploy:edit','serverDeploy:del'])"
+        label="操作"
+        width="150px"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <el-button
+            v-permission="['admin','serverDeploy:edit']"
+            size="mini"
+            type="primary"
+            icon="el-icon-edit"
+            @click="edit(scope.row)"
+          />
+          <el-popover
+            v-permission="['admin','serverDeploy:del']"
+            :ref="scope.row.id"
+            placement="top"
+            width="180"
+          >
+            <p>确定删除本条数据吗？</p>
+            <div style="text-align: right; margin: 0">
+              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
+              <el-button
+                :loading="delLoading"
+                type="primary"
+                size="mini"
+                @click="subDelete(scope.row.id)"
+              >确定</el-button>
+            </div>
+            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
+          </el-popover>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页组件-->
+    <el-pagination
+      :total="total"
+      :current-page="page + 1"
+      style="margin-top: 8px"
+      layout="total, prev, pager, next, sizes"
+      @size-change="sizeChange"
+      @current-change="pageChange"
+    />
+  </div>
+</template>
+
+<script>
+import checkPermission from '@/utils/permission'
+import initData from '@/mixins/initData'
+import { del } from '@/api/serverDeploy'
+import { queryServerAccount } from '@/api/serverAccount'
+import eForm from './form'
+export default {
+  components: { eForm },
+  mixins: [initData],
+  data() {
+    return {
+      delLoading: false,
+      queryTypeOptions: [{ key: 'id', display_name: '服务器IP' }],
+      accountList: [],
+      accountMap: {}
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      this.init()
+    })
+  },
+  methods: {
+    checkPermission,
+    async beforeInit() {
+      this.url = 'api/serverDeploy'
+      const sort = 'id,desc'
+      this.params = { page: this.page, size: this.size, sort: sort }
+      const query = this.query
+      const type = query.type
+      const value = query.value
+      await queryServerAccount({}).then(res => {
+        this.accountList = res.content
+        this.accountList.forEach(({ id, name }) => {
+          this.accountMap[id] = name
+        })
+      })
+      if (type && value) {
+        this.params[type] = value
+      }
+      return true
+    },
+    accountTranslate(row, column) {
+      return this.accountMap[row.accountId]
+    },
+    subDelete(id) {
+      this.delLoading = true
+      del(id)
+        .then(res => {
+          this.delLoading = false
+          this.$refs[id].doClose()
+          this.dleChangePage()
+          this.init()
+          this.$notify({
+            title: '删除成功',
+            type: 'success',
+            duration: 2500
+          })
+        })
+        .catch(err => {
+          this.delLoading = false
+          this.$refs[id].doClose()
+          console.log(err.response.data.message)
+        })
+    },
+    add() {
+      this.isAdd = true
+      this.$refs.form.dialog = true
+    },
+    edit(data) {
+      this.isAdd = false
+      const _this = this.$refs.form
+      _this.form = {
+        id: data.id,
+        accountId: data.accountId
+      }
+      _this.dialog = true
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>