From 9cd9dff5747427fd3230b42ef66308f4fb6efb27 Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Fri, 3 Jun 2022 00:11:48 +0800
Subject: [PATCH] modify style.

---
 .../src/components/app/AppBuildConfigForm.vue | 26 +++++-----
 .../components/app/AppReleaseConfigForm.vue   | 51 ++++++++++++-------
 .../src/components/app/AppReleaseModal.vue    | 16 +++---
 orion-ops-vue/src/lib/utils.js                | 44 ++++++++--------
 orion-ops-vue/src/views/app/AppConfig.vue     |  7 +--
 5 files changed, 80 insertions(+), 64 deletions(-)

diff --git a/orion-ops-vue/src/components/app/AppBuildConfigForm.vue b/orion-ops-vue/src/components/app/AppBuildConfigForm.vue
index d2999fb1..315956b9 100644
--- a/orion-ops-vue/src/components/app/AppBuildConfigForm.vue
+++ b/orion-ops-vue/src/components/app/AppBuildConfigForm.vue
@@ -55,12 +55,12 @@
       <div id="app-action-footer">
         <a-button class="app-action-footer-button" type="dashed"
                   @click="addAction($enum.BUILD_ACTION_TYPE.COMMAND.value)">
-          添加命令操作
+          添加命令操作 (宿主机执行)
         </a-button>
         <a-button class="app-action-footer-button" type="dashed"
                   v-if="visibleAddCheckout"
                   @click="addAction($enum.BUILD_ACTION_TYPE.CHECKOUT.value)">
-          添加检出操作
+          添加检出操作 (宿主机执行)
         </a-button>
         <a-button class="app-action-footer-button" type="primary" @click="save">保存</a-button>
       </div>
@@ -94,6 +94,14 @@ export default {
         this.actions.map(s => s.type).filter(t => t === this.$enum.BUILD_ACTION_TYPE.CHECKOUT.value).length < 1
     }
   },
+  watch: {
+    detail(e) {
+      this.initData(e)
+    },
+    dataLoading(e) {
+      this.loading = e
+    }
+  },
   data() {
     return {
       loading: false,
@@ -104,14 +112,6 @@ export default {
       editorConfig
     }
   },
-  watch: {
-    detail(e) {
-      this.initData(e)
-    },
-    dataLoading(e) {
-      this.loading = e
-    }
-  },
   methods: {
     initData(detail) {
       this.profileId = detail.profileId
@@ -189,6 +189,7 @@ export default {
         buildActions: this.actions
       }).then(() => {
         this.$message.success('保存成功')
+        this.$emit('updated')
         this.loading = false
       }).catch(() => {
         this.loading = false
@@ -204,7 +205,7 @@ export default {
 <style lang="less" scoped>
 @label-width: 160px;
 @action-handler-width: 120px;
-@config-container-width: 1030px;
+@bundle-container-width: 994px;
 @bundle-input-width: 700px;
 @app-action-container-width: 994px;
 @app-action-width: 876px;
@@ -220,7 +221,7 @@ export default {
 
 #app-conf-container {
   padding: 18px 8px 0 8px;
-  width: @config-container-width;
+  overflow: auto;
 
   .label {
     width: @label-width;
@@ -229,6 +230,7 @@ export default {
   }
 
   #app-bundle-wrapper {
+    width: @bundle-container-width;
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;
diff --git a/orion-ops-vue/src/components/app/AppReleaseConfigForm.vue b/orion-ops-vue/src/components/app/AppReleaseConfigForm.vue
index 5013cbf7..96ae5211 100644
--- a/orion-ops-vue/src/components/app/AppReleaseConfigForm.vue
+++ b/orion-ops-vue/src/components/app/AppReleaseConfigForm.vue
@@ -60,11 +60,21 @@
                 <!-- 文件传输方式 -->
                 <div class="action-transfer-wrapper" v-if="action.type === $enum.RELEASE_ACTION_TYPE.TRANSFER.value">
                   <span class="label action-label normal-label required-label">文件传输方式</span>
-                  <a-select class="transfer-input" v-model="transferMode">
+                  <!-- 类型选择 -->
+                  <a-select :class="['transfer-input', transferMode === $enum.RELEASE_TRANSFER_MODE.SFTP.value ? 'help-input' : '']"
+                            v-model="transferMode">
                     <a-select-option v-for="type of $enum.RELEASE_TRANSFER_MODE" :key="type.value" :value="type.value">
                       {{ type.label }}
                     </a-select-option>
                   </a-select>
+                  <!-- 描述 -->
+                  <a-popover placement="top" v-if="transferMode === $enum.RELEASE_TRANSFER_MODE.SFTP.value">
+                    <template slot="content">
+                      文件传输方式选择 SFTP 后, 当执行传输操作时, 会先删除文件传输路径再进行传输操作<br/>
+                      ⚠ 这里一定要注意, 配置不正确会导致数据误删除!!!
+                    </template>
+                    <a-icon class="help-trigger span-red" type="question-circle"/>
+                  </a-popover>
                 </div>
                 <!-- 文件传输路径 -->
                 <div class="action-transfer-wrapper" v-if="action.type === $enum.RELEASE_ACTION_TYPE.TRANSFER.value">
@@ -132,12 +142,12 @@
       <div id="app-action-footer">
         <a-button class="app-action-footer-button" type="dashed"
                   @click="addAction($enum.RELEASE_ACTION_TYPE.COMMAND.value)">
-          添加命令操作
+          添加命令操作 (发布机器执行)
         </a-button>
         <a-button class="app-action-footer-button" type="dashed"
                   v-if="visibleAddTransfer"
                   @click="addAction($enum.RELEASE_ACTION_TYPE.TRANSFER.value)">
-          添加传输操作
+          添加传输操作 (构建产物传输至发布机器)
         </a-button>
         <a-button class="app-action-footer-button" type="primary" @click="save">保存</a-button>
       </div>
@@ -172,20 +182,6 @@ export default {
       return this.actions.map(s => s.type).filter(t => t === this.$enum.RELEASE_ACTION_TYPE.TRANSFER.value).length < 1
     }
   },
-  data() {
-    return {
-      loading: false,
-      profileId: null,
-      transferPath: undefined,
-      transferMode: _enum.RELEASE_TRANSFER_MODE.SFTP.value,
-      transferFileType: _enum.RELEASE_TRANSFER_FILE_TYPE.NORMAL.value,
-      releaseSerial: _enum.SERIAL_TYPE.PARALLEL.value,
-      exceptionHandler: _enum.EXCEPTION_HANDLER_TYPE.SKIP_ALL.value,
-      machines: [],
-      actions: [],
-      editorConfig
-    }
-  },
   watch: {
     detail(e) {
       this.initData(e)
@@ -194,6 +190,20 @@ export default {
       this.loading = e
     }
   },
+  data() {
+    return {
+      loading: false,
+      profileId: null,
+      transferPath: undefined,
+      transferMode: _enum.RELEASE_TRANSFER_MODE.SCP.value,
+      transferFileType: _enum.RELEASE_TRANSFER_FILE_TYPE.NORMAL.value,
+      releaseSerial: _enum.SERIAL_TYPE.PARALLEL.value,
+      exceptionHandler: _enum.EXCEPTION_HANDLER_TYPE.SKIP_ALL.value,
+      machines: [],
+      actions: [],
+      editorConfig
+    }
+  },
   methods: {
     initData(detail) {
       this.profileId = detail.profileId
@@ -305,6 +315,7 @@ export default {
         releaseActions: this.actions
       }).then(() => {
         this.$message.success('保存成功')
+        this.$emit('updated')
         this.loading = false
       }).catch(() => {
         this.loading = false
@@ -320,7 +331,7 @@ export default {
 <style lang="less" scoped>
 @label-width: 160px;
 @action-handler-width: 120px;
-@app-conf-container-width: 1030px;
+@app-top-container-width: 994px;
 @app-action-container-width: 994px;
 @app-action-width: 876px;
 @action-name-input-width: 700px;
@@ -336,7 +347,7 @@ export default {
 
 #app-conf-container {
   padding: 18px 8px 0 8px;
-  width: @app-conf-container-width;
+  overflow: auto;
 
   .label {
     width: @label-width;
@@ -345,6 +356,7 @@ export default {
   }
 
   #app-machine-wrapper {
+    width: @app-top-container-width;
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -352,6 +364,7 @@ export default {
   }
 
   #app-release-serial-wrapper, #app-release-exception-wrapper {
+    width: @app-top-container-width;
     display: flex;
     align-items: center;
     margin-top: 8px;
diff --git a/orion-ops-vue/src/components/app/AppReleaseModal.vue b/orion-ops-vue/src/components/app/AppReleaseModal.vue
index 277b1390..1d86a201 100644
--- a/orion-ops-vue/src/components/app/AppReleaseModal.vue
+++ b/orion-ops-vue/src/components/app/AppReleaseModal.vue
@@ -152,11 +152,11 @@ export default {
       buildList: [],
       appMachineIdList: [-1],
       submit: {
-        title: null,
-        buildId: null,
-        description: null,
+        title: undefined,
+        buildId: undefined,
+        description: undefined,
         timedRelease: _enum.TIMED_TYPE.NORMAL.value,
-        timedReleaseTime: null,
+        timedReleaseTime: undefined,
         machineIdList: []
       },
       visible: false,
@@ -207,11 +207,11 @@ export default {
       this.appId = null
       this.buildList = []
       this.appMachineIdList = [-1]
-      this.submit.title = null
-      this.submit.buildId = null
-      this.submit.description = null
+      this.submit.title = undefined
+      this.submit.buildId = undefined
+      this.submit.description = undefined
       this.submit.timedRelease = this.$enum.TIMED_TYPE.NORMAL.value
-      this.submit.timedReleaseTime = null
+      this.submit.timedReleaseTime = undefined
       this.submit.machineIdList = []
     },
     async loadReleaseMachine() {
diff --git a/orion-ops-vue/src/lib/utils.js b/orion-ops-vue/src/lib/utils.js
index 117e0c47..1463e6e3 100644
--- a/orion-ops-vue/src/lib/utils.js
+++ b/orion-ops-vue/src/lib/utils.js
@@ -326,28 +326,6 @@ function clearStainKeywords(message) {
     .replaceAll('&lt;/sr&gt;', '')
 }
 
-/**
- * 下载文件
- */
-function downloadFile(res) {
-  const blob = new Blob([res.data])
-  const tempLink = document.createElement('a')
-  const blobURL = window.URL.createObjectURL(blob)
-  tempLink.style.display = 'none'
-  tempLink.href = blobURL
-  const fileName = res.headers['content-disposition']
-    ? res.headers['content-disposition'].split(';')[1].split('=')[1]
-    : new Date().getTime()
-  tempLink.download = decodeURIComponent(fileName)
-  if (typeof tempLink.download === 'undefined') {
-    tempLink.target = '_blank'
-  }
-  document.body.appendChild(tempLink)
-  tempLink.click()
-  document.body.removeChild(tempLink)
-  window.URL.revokeObjectURL(blobURL)
-}
-
 /**
  * 自适应终端大小
  */
@@ -401,6 +379,28 @@ function getUUID() {
   })
 }
 
+/**
+ * 下载文件
+ */
+function downloadFile(res) {
+  const blob = new Blob([res.data])
+  const tempLink = document.createElement('a')
+  const blobURL = window.URL.createObjectURL(blob)
+  tempLink.style.display = 'none'
+  tempLink.href = blobURL
+  const fileName = res.headers['content-disposition']
+    ? res.headers['content-disposition'].split(';')[1].split('=')[1]
+    : new Date().getTime()
+  tempLink.download = decodeURIComponent(fileName)
+  if (typeof tempLink.download === 'undefined') {
+    tempLink.target = '_blank'
+  }
+  document.body.appendChild(tempLink)
+  tempLink.click()
+  document.body.removeChild(tempLink)
+  window.URL.revokeObjectURL(blobURL)
+}
+
 export default {
   isEmptyStr,
   copyToClipboard,
diff --git a/orion-ops-vue/src/views/app/AppConfig.vue b/orion-ops-vue/src/views/app/AppConfig.vue
index 029be70b..bd4be0ec 100644
--- a/orion-ops-vue/src/views/app/AppConfig.vue
+++ b/orion-ops-vue/src/views/app/AppConfig.vue
@@ -11,17 +11,18 @@
               <AddAppForm ref="basicForm" :layout="{ labelCol: { span: 4 }, wrapperCol: { span: 20 }}"/>
               <div class="app-basic-form-footer">
                 <a-button type="primary" @click="updateBasic">修改</a-button>
+                <a-button class="ml16" @click="loadAppConfig">刷新</a-button>
               </div>
             </a-spin>
           </div>
         </a-tab-pane>
         <!-- 构建配置 -->
         <a-tab-pane key="2" tab="构建配置">
-          <AppBuildConfigForm :appId="appId" :dataLoading="loading" :detail="detail"/>
+          <AppBuildConfigForm :appId="appId" :dataLoading="loading" :detail="detail" @updated="loadAppConfig"/>
         </a-tab-pane>
         <!-- 发布配置 -->
         <a-tab-pane key="3" tab="发布配置">
-          <AppReleaseConfigForm :appId="appId" :dataLoading="loading" :detail="detail"/>
+          <AppReleaseConfigForm :appId="appId" :dataLoading="loading" :detail="detail" @updated="loadAppConfig"/>
         </a-tab-pane>
       </a-tabs>
     </div>
@@ -120,7 +121,7 @@ export default {
   }
 
   .app-basic-form-footer {
-    padding-left: 20.83%;
+    padding-left: 16.83%;
   }
 
 }