From 6318cb0354c628802424aa4cfa9894eddbdba7af Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Tue, 31 May 2022 09:04:34 +0800
Subject: [PATCH] feat export `machine proxy` `tail file` `terminal log`.

---
 .../export/MachineProxyExportModal.vue        |  96 +++++++++++++++++
 .../export/MachineTailFileExportModal.vue     | 101 ++++++++++++++++++
 .../export/MachineTerminalLogExportModal.vue  | 101 ++++++++++++++++++
 orion-ops-vue/src/views/log/LoggerList.vue    |  12 +++
 .../src/views/machine/MachineProxy.vue        |  13 +++
 .../src/views/machine/MachineTerminalLogs.vue |   9 ++
 6 files changed, 332 insertions(+)
 create mode 100644 orion-ops-vue/src/components/export/MachineProxyExportModal.vue
 create mode 100644 orion-ops-vue/src/components/export/MachineTailFileExportModal.vue
 create mode 100644 orion-ops-vue/src/components/export/MachineTerminalLogExportModal.vue

diff --git a/orion-ops-vue/src/components/export/MachineProxyExportModal.vue b/orion-ops-vue/src/components/export/MachineProxyExportModal.vue
new file mode 100644
index 00000000..119ca84f
--- /dev/null
+++ b/orion-ops-vue/src/components/export/MachineProxyExportModal.vue
@@ -0,0 +1,96 @@
+<template>
+  <a-modal v-model="visible"
+           title="机器代理 导出"
+           okText="导出"
+           :width="400"
+           :okButtonProps="{props: {disabled: loading}}"
+           :maskClosable="false"
+           :destroyOnClose="true"
+           @ok="exportData"
+           @cancel="close">
+    <a-spin :spinning="loading">
+      <div class="data-export-container">
+        <!-- 导出参数 -->
+        <div class="data-export-params">
+          <!-- 密码导出 -->
+          <div class="data-export-param mb16">
+            <span class="normal-label export-label">导出密码</span>
+            <a-checkbox class="param-input" v-model="exportPassword">是否导出密码 (密文, 仅用于导入)</a-checkbox>
+          </div>
+          <!-- 文档密码 -->
+          <div class="data-export-param">
+            <span class="normal-label export-label">文档密码</span>
+            <a-input class="param-input"
+                     v-model="protectPassword"
+                     :maxLength="10"
+                     placeholder="导出文档的密码(数字及字母)"/>
+          </div>
+        </div>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: 'MachineProxyExportModal',
+  data: function() {
+    return {
+      visible: false,
+      loading: false,
+      exportPassword: false,
+      protectPassword: undefined
+    }
+  },
+  methods: {
+    open() {
+      this.exportPassword = false
+      this.protectPassword = undefined
+      this.loading = false
+      this.visible = true
+    },
+    exportData() {
+      this.loading = true
+      this.$api.exportMachineProxy({
+        exportPassword: this.exportPassword ? 1 : 2,
+        protectPassword: this.protectPassword
+      }).then((e) => {
+        this.loading = false
+        this.visible = false
+        this.$message.success('导出成功, 片刻后自动下载')
+        this.$utils.downloadFile(e)
+      }).catch(() => {
+        this.loading = false
+        this.$message.error('导出失败')
+      })
+    },
+    close() {
+      this.visible = false
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+.data-export-container {
+  width: 100%;
+}
+
+.export-label {
+  width: 64px;
+  text-align: end;
+}
+
+.data-export-param {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.param-input {
+  margin-left: 8px;
+  width: 236px;
+}
+</style>
diff --git a/orion-ops-vue/src/components/export/MachineTailFileExportModal.vue b/orion-ops-vue/src/components/export/MachineTailFileExportModal.vue
new file mode 100644
index 00000000..23fff3af
--- /dev/null
+++ b/orion-ops-vue/src/components/export/MachineTailFileExportModal.vue
@@ -0,0 +1,101 @@
+<template>
+  <a-modal v-model="visible"
+           title="日志文件 导出"
+           okText="导出"
+           :width="400"
+           :okButtonProps="{props: {disabled: loading}}"
+           :maskClosable="false"
+           :destroyOnClose="true"
+           @ok="exportData"
+           @cancel="close">
+    <a-spin :spinning="loading">
+      <div class="data-export-container">
+        <!-- 导出参数 -->
+        <div class="data-export-params">
+          <!-- 导出机器 -->
+          <div class="data-export-param mb16">
+            <span class="normal-label export-label">导出机器</span>
+            <MachineSelector class="param-input"
+                             placeholder="全部"
+                             @change="(m) => machineId = m"/>
+          </div>
+          <!-- 文档密码 -->
+          <div class="data-export-param">
+            <span class="normal-label export-label">文档密码</span>
+            <a-input class="param-input"
+                     v-model="protectPassword"
+                     :maxLength="10"
+                     placeholder="导出文档的密码(数字及字母)"/>
+          </div>
+        </div>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import MachineSelector from '@/components/machine/MachineSelector'
+
+export default {
+  name: 'MachineTailFileExportModal',
+  components: { MachineSelector },
+  data: function() {
+    return {
+      visible: false,
+      loading: false,
+      protectPassword: undefined,
+      machineId: undefined
+    }
+  },
+  methods: {
+    open() {
+      this.machineId = undefined
+      this.protectPassword = undefined
+      this.loading = false
+      this.visible = true
+    },
+    exportData() {
+      this.loading = true
+      this.$api.exportMachineTailFile({
+        protectPassword: this.protectPassword,
+        machineId: this.machineId
+      }).then((e) => {
+        this.loading = false
+        this.visible = false
+        this.$message.success('导出成功, 片刻后自动下载')
+        this.$utils.downloadFile(e)
+      }).catch(() => {
+        this.loading = false
+        this.$message.error('导出失败')
+      })
+    },
+    close() {
+      this.visible = false
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+.data-export-container {
+  width: 100%;
+}
+
+.export-label {
+  width: 64px;
+  text-align: end;
+}
+
+.data-export-param {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.param-input {
+  margin-left: 8px;
+  width: 236px;
+}
+</style>
diff --git a/orion-ops-vue/src/components/export/MachineTerminalLogExportModal.vue b/orion-ops-vue/src/components/export/MachineTerminalLogExportModal.vue
new file mode 100644
index 00000000..a0cbd294
--- /dev/null
+++ b/orion-ops-vue/src/components/export/MachineTerminalLogExportModal.vue
@@ -0,0 +1,101 @@
+<template>
+  <a-modal v-model="visible"
+           title="终端日志 导出"
+           okText="导出"
+           :width="400"
+           :okButtonProps="{props: {disabled: loading}}"
+           :maskClosable="false"
+           :destroyOnClose="true"
+           @ok="exportData"
+           @cancel="close">
+    <a-spin :spinning="loading">
+      <div class="data-export-container">
+        <!-- 导出参数 -->
+        <div class="data-export-params">
+          <!-- 导出机器 -->
+          <div class="data-export-param mb16">
+            <span class="normal-label export-label">导出机器</span>
+            <MachineSelector class="param-input"
+                             placeholder="全部"
+                             @change="(m) => machineId = m"/>
+          </div>
+          <!-- 文档密码 -->
+          <div class="data-export-param">
+            <span class="normal-label export-label">文档密码</span>
+            <a-input class="param-input"
+                     v-model="protectPassword"
+                     :maxLength="10"
+                     placeholder="导出文档的密码(数字及字母)"/>
+          </div>
+        </div>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import MachineSelector from '@/components/machine/MachineSelector'
+
+export default {
+  name: 'MachineTerminalLogExportModal',
+  components: { MachineSelector },
+  data: function() {
+    return {
+      visible: false,
+      loading: false,
+      protectPassword: undefined,
+      machineId: undefined
+    }
+  },
+  methods: {
+    open() {
+      this.machineId = undefined
+      this.protectPassword = undefined
+      this.loading = false
+      this.visible = true
+    },
+    exportData() {
+      this.loading = true
+      this.$api.exportMachineTerminalLog({
+        protectPassword: this.protectPassword,
+        machineId: this.machineId
+      }).then((e) => {
+        this.loading = false
+        this.visible = false
+        this.$message.success('导出成功, 片刻后自动下载')
+        this.$utils.downloadFile(e)
+      }).catch(() => {
+        this.loading = false
+        this.$message.error('导出失败')
+      })
+    },
+    close() {
+      this.visible = false
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+.data-export-container {
+  width: 100%;
+}
+
+.export-label {
+  width: 64px;
+  text-align: end;
+}
+
+.data-export-param {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.param-input {
+  margin-left: 8px;
+  width: 236px;
+}
+</style>
diff --git a/orion-ops-vue/src/views/log/LoggerList.vue b/orion-ops-vue/src/views/log/LoggerList.vue
index 94a9c528..1d4f3a43 100644
--- a/orion-ops-vue/src/views/log/LoggerList.vue
+++ b/orion-ops-vue/src/views/log/LoggerList.vue
@@ -40,6 +40,8 @@
         </a>
         <a-button class="mr8" type="primary" icon="plus" @click="add">添加</a-button>
         <a-divider type="vertical"/>
+        <a-icon type="export" class="tools-icon" title="导出数据" @click="openExport"/>
+        <a-icon type="import" class="tools-icon" title="导入数据" @click="openImport"/>
         <a-icon type="search" class="tools-icon" title="查询" @click="getList({})"/>
         <a-icon type="reload" class="tools-icon" title="重置" @click="resetForm"/>
       </div>
@@ -121,6 +123,8 @@
       <AddLogFileModal ref="addModal" @added="getList({})" @updated="getList({})"/>
       <!-- 日志模态框 -->
       <LoggerViewModal ref="logView"/>
+      <!-- 导出模态框 -->
+      <MachineTailFileExportModal ref="export"/>
     </div>
   </div>
 </template>
@@ -132,6 +136,7 @@ import AddLogFileModal from '@/components/log/AddLogFileModal'
 import TextPreview from '@/components/preview/TextPreview'
 import LoggerViewModal from '@/components/log/LoggerViewModal'
 import _filters from '@/lib/filters'
+import MachineTailFileExportModal from '@/components/export/MachineTailFileExportModal'
 
 /**
  * 列
@@ -207,6 +212,7 @@ const columns = [
 export default {
   name: 'LoggerList',
   components: {
+    MachineTailFileExportModal,
     LoggerViewModal,
     MachineSelector,
     AddLogFileModal,
@@ -267,6 +273,12 @@ export default {
     previewText(value) {
       this.$refs.previewText.preview(value)
     },
+    openExport() {
+      this.$refs.export.open()
+    },
+    openImport() {
+      this.$refs.import.open()
+    },
     resetForm() {
       this.$refs.query.resetFields()
       this.$refs.machineSelector.reset()
diff --git a/orion-ops-vue/src/views/machine/MachineProxy.vue b/orion-ops-vue/src/views/machine/MachineProxy.vue
index 4273ff98..f79a7b27 100644
--- a/orion-ops-vue/src/views/machine/MachineProxy.vue
+++ b/orion-ops-vue/src/views/machine/MachineProxy.vue
@@ -55,6 +55,8 @@
       <div class="tools-fixed-right">
         <a-button class="ml16 mr8" type="primary" icon="plus" @click="add">新建</a-button>
         <a-divider type="vertical"/>
+        <a-icon type="export" class="tools-icon" title="导出数据" @click="openExport"/>
+        <a-icon type="import" class="tools-icon" title="导入数据" @click="openImport"/>
         <a-icon type="search" class="tools-icon" title="查询" @click="getList({})"/>
         <a-icon type="reload" class="tools-icon" title="重置" @click="resetForm"/>
       </div>
@@ -101,13 +103,17 @@
     </div>
     <!-- 事件 -->
     <div class="machine-proxy-event">
+      <!-- 添加模态框 -->
       <AddMachineProxyModal ref="addModal" @added="getList({})" @updated="getList({})"/>
+      <!-- 导出模态框 -->
+      <MachineProxyExportModal ref="export"/>
     </div>
   </div>
 </template>
 
 <script>
 import AddMachineProxyModal from '@/components/machine/AddMachineProxyModal'
+import MachineProxyExportModal from '@/components/export/MachineProxyExportModal'
 
 /**
  * 列
@@ -159,6 +165,7 @@ const columns = [
 export default {
   name: 'MachineProxy',
   components: {
+    MachineProxyExportModal,
     AddMachineProxyModal
   },
   data: function() {
@@ -217,6 +224,12 @@ export default {
     update(id) {
       this.$refs.addModal.update(id)
     },
+    openExport() {
+      this.$refs.export.open()
+    },
+    openImport() {
+      this.$refs.import.open()
+    },
     resetForm() {
       this.$refs.query.resetFields()
       this.getList({})
diff --git a/orion-ops-vue/src/views/machine/MachineTerminalLogs.vue b/orion-ops-vue/src/views/machine/MachineTerminalLogs.vue
index ecb2ee2e..ccefefd2 100644
--- a/orion-ops-vue/src/views/machine/MachineTerminalLogs.vue
+++ b/orion-ops-vue/src/views/machine/MachineTerminalLogs.vue
@@ -41,6 +41,7 @@
       <!-- 右侧 -->
       <div class="tools-fixed-right">
         <a-icon v-if="$isAdmin()" type="delete" class="tools-icon" title="清空" @click="openClear"/>
+        <a-icon type="export" class="tools-icon" title="导出数据" @click="openExport"/>
         <a-icon type="search" class="tools-icon" title="查询" @click="getList({})"/>
         <a-icon type="reload" class="tools-icon" title="重置" @click="resetForm"/>
       </div>
@@ -94,7 +95,10 @@
     </div>
     <!-- 事件 -->
     <div class="terminal-event-container">
+      <!-- 数据清理模态框 -->
       <TerminalLogClearModal ref="clear" @clear="getList({})"/>
+      <!-- 数据导出模态框 -->
+      <MachineTerminalLogExportModal ref="export"/>
     </div>
   </div>
 </template>
@@ -105,6 +109,7 @@ import MachineAutoComplete from '@/components/machine/MachineAutoComplete'
 import UserAutoComplete from '@/components/user/UserAutoComplete'
 import _filters from '@/lib/filters'
 import TerminalLogClearModal from '@/components/clear/TerminalLogClearModal'
+import MachineTerminalLogExportModal from '@/components/export/MachineTerminalLogExportModal'
 
 /**
  * 列
@@ -163,6 +168,7 @@ const columns = [
 export default {
   name: 'MachineTerminalLogs',
   components: {
+    MachineTerminalLogExportModal,
     TerminalLogClearModal,
     MachineAutoComplete,
     UserAutoComplete
@@ -250,6 +256,9 @@ export default {
     openClear() {
       this.$refs.clear.open()
     },
+    openExport() {
+      this.$refs.export.open()
+    },
     resetForm() {
       this.$refs.query.resetFields()
       this.$refs.machineSelector.reset()