refactor: 重构优化

ui/certd-ui/src/api/api.exports.js

@@ -0,0 +1,25 @@
+import { request } from './service'
+
+export default {
+  exportsToZip (options) {
+    return request({
+      url: '/exports/toZip',
+      data: { options },
+      method: 'post',
+      responseType: 'blob' // 重点在于配置responseType: 'blob'
+    }).then(res => {
+      console.log('res', res)
+      const filename = decodeURI(res.headers['content-disposition'].replace('attachment;filename=', '')) // 由后端设置下载文件名
+      const blob = new Blob([res.data], { type: 'application/zip' })
+      const a = document.createElement('a')
+      const url = window.URL.createObjectURL(blob)
+      a.href = url
+      a.download = filename
+      const body = document.getElementsByTagName('body')[0]
+      body.appendChild(a)
+      a.click()
+      body.removeChild(a)
+      window.URL.revokeObjectURL(url)
+    })
+  }
+}

ui/certd-ui/src/api/service.js

@@ -20,6 +20,10 @@ function createService () {
   // 响应拦截
   service.interceptors.response.use(
     response => {
+      console.log('response.config', response.config)
+      if (response.config.responseType === 'blob') {
+        return response
+      }
       // dataAxios 是 axios 返回数据中的 data
       const dataAxios = response.data
       // 这个状态码是和后端约定的

ui/certd-ui/src/views/detail/components/task-form.vue

@@ -76,6 +76,7 @@ function useTaskForm (context) {
   const taskPluginDefineList = ref([])
   const onCreated = async () => {
     const plugins = await pluginsApi.list()
+    console.log('plugins', plugins)
     taskPluginDefineList.value = plugins
   }
 
@@ -113,7 +114,15 @@ function useTaskForm (context) {
       message.warn('请先选择类型')
       return
     }
+    // 给task的input设置默认值
     changeCurrentPlugin(currentTask.value)
+
+    for (const key in currentPlugin.value.input) {
+      const input = currentPlugin.value.input[key]
+      if (input.default != null) {
+        currentTask.value[key] = input.default
+      }
+    }
   }
 
   const taskDrawerShow = () => {
@@ -245,6 +254,7 @@ export default {
           font-size: 10px;
           line-height: 20px;
           height: 40px;
+          color: #7f7f7f
         }
       }
     }

ui/certd-ui/src/views/detail/index.vue

@@ -134,6 +134,20 @@
           </a-card>
         </div>
       </div>
+
+      <div class="flow-group flow-export">
+        <h3 class="group-head">
+          导出
+        </h3>
+        <a-divider></a-divider>
+
+        <div class="export">
+
+          <div><a-button @click="exportsToZip">导出可执行项目</a-button></div>
+          <br/>
+          <div> <a-button>仅导出配置</a-button></div>
+        </div>
+      </div>
     </div>
 
     <cert-form ref="certFormRef" v-model:cert="options.cert" v-model:access-providers="options.accessProviders"></cert-form>
@@ -145,11 +159,12 @@
 <script>
 import { message } from 'ant-design-vue'
 // eslint-disable-next-line no-unused-vars
-import { reactive, ref, toRef, provide, readonly } from 'vue'
+import { reactive, ref, toRef, toRefs, provide, readonly } from 'vue'
 // eslint-disable-next-line no-unused-vars
 import { useRoute } from 'vue-router'
 import CertForm from '@/views/detail/components/cert-form'
 import TaskForm from './components/task-form'
+import exportsApi from '@/api/api.exports'
 import _ from 'lodash-es'
 
 function useDeploy (options) {
@@ -187,6 +202,14 @@ function useProvideAccessProviders (options) {
   })
 }
 
+function useExports (options) {
+  return {
+    async exportsToZip () {
+      await exportsApi.exportsToZip(options)
+    }
+  }
+}
+
 export default {
   components: { CertForm, TaskForm },
   setup () {
@@ -238,7 +261,8 @@ export default {
       ...useDeploy(options),
       taskFormRef,
       taskAdd,
-      taskEdit
+      taskEdit,
+      ...useExports(options)
     }
   }
 }
@@ -360,6 +384,10 @@ export default {
       }
     }
 
+    .flow-export{
+      max-width: 300px;
+    }
+
   }
 
 }