From 2cca790d9713ea66c758bf2f4e7d9a307ae2ed25 Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Thu, 26 May 2022 09:26:09 +0800
Subject: [PATCH] feat: clear pipeline exec record.

---
 .../components/app/AppPipelineSelector.vue    |  73 +++++++
 .../clear/AppPipelineClearModal.vue           | 196 ++++++++++++++++++
 .../src/views/app/AppPipelineTask.vue         |   8 +
 3 files changed, 277 insertions(+)
 create mode 100644 orion-ops-vue/src/components/app/AppPipelineSelector.vue
 create mode 100644 orion-ops-vue/src/components/clear/AppPipelineClearModal.vue

diff --git a/orion-ops-vue/src/components/app/AppPipelineSelector.vue b/orion-ops-vue/src/components/app/AppPipelineSelector.vue
new file mode 100644
index 00000000..50d4345e
--- /dev/null
+++ b/orion-ops-vue/src/components/app/AppPipelineSelector.vue
@@ -0,0 +1,73 @@
+<template>
+  <a-select v-model="id"
+            :disabled="disabled"
+            :placeholder="placeholder"
+            @change="$emit('change', id)"
+            allowClear>
+    <a-select-option v-for="pipeline in pipelineList"
+                     :value="pipeline.id"
+                     :key="pipeline.id">
+      {{ pipeline.name }}
+    </a-select-option>
+  </a-select>
+</template>
+
+<script>
+export default {
+  name: 'AppPipelineSelector',
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: '全部'
+    },
+    value: {
+      type: Number,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      id: undefined,
+      pipelineList: []
+    }
+  },
+  watch: {
+    value(e) {
+      this.id = e
+    }
+  },
+  methods: {
+    reset() {
+      this.id = undefined
+    }
+  },
+  async created() {
+    // 读取当前环境
+    const activeProfile = this.$storage.get(this.$storage.keys.ACTIVE_PROFILE)
+    if (!activeProfile) {
+      this.$message.warning('请先维护应用环境')
+      return
+    }
+    const pipelineListRes = await this.$api.getAppPipelineList({
+      profileId: JSON.parse(activeProfile).id,
+      limit: 10000
+    })
+    if (pipelineListRes.data && pipelineListRes.data.rows && pipelineListRes.data.rows.length) {
+      for (const row of pipelineListRes.data.rows) {
+        this.pipelineList.push({
+          id: row.id,
+          name: row.name
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/orion-ops-vue/src/components/clear/AppPipelineClearModal.vue b/orion-ops-vue/src/components/clear/AppPipelineClearModal.vue
new file mode 100644
index 00000000..0499ee9d
--- /dev/null
+++ b/orion-ops-vue/src/components/clear/AppPipelineClearModal.vue
@@ -0,0 +1,196 @@
+<template>
+  <a-modal v-model="visible"
+           title="应用流水线 清理"
+           okText="清理"
+           :width="400"
+           :okButtonProps="{props: {disabled: loading}}"
+           :maskClosable="false"
+           :destroyOnClose="true"
+           @ok="clear"
+           @cancel="close">
+    <a-spin :spinning="loading">
+      <div class="data-clear-container">
+        <!-- 清理区间 -->
+        <div class="data-clear-range">
+          <a-radio-group class="nowrap" v-model="submit.range">
+            <a-radio-button :value="$enum.DATA_CLEAR_RANGE.DAY.value">保留天数</a-radio-button>
+            <a-radio-button :value="$enum.DATA_CLEAR_RANGE.TOTAL.value">保留条数</a-radio-button>
+            <a-radio-button :value="$enum.DATA_CLEAR_RANGE.REL_ID.value">清理流水线</a-radio-button>
+          </a-radio-group>
+        </div>
+        <!-- 清理参数 -->
+        <div class="data-clear-params">
+          <div class="data-clear-param" v-if="$enum.DATA_CLEAR_RANGE.DAY.value === submit.range">
+            <span class="normal-label clear-label">保留天数</span>
+            <a-input-number class="param-input"
+                            v-model="submit.reserveDay"
+                            :min="0"
+                            :max="9999"
+                            placeholder="清理后数据所保留的天数"/>
+          </div>
+          <div class="data-clear-param" v-if="$enum.DATA_CLEAR_RANGE.TOTAL.value === submit.range">
+            <span class="normal-label clear-label">保留条数</span>
+            <a-input-number class="param-input"
+                            v-model="submit.reserveTotal"
+                            :min="0"
+                            :max="9999"
+                            placeholder="清理后数据所保留的条数"/>
+          </div>
+          <div class="data-clear-param" v-if="$enum.DATA_CLEAR_RANGE.REL_ID.value === submit.range">
+            <span class="normal-label clear-label">流水线</span>
+            <AppPipelineSelector class="param-input"
+                                 placeholder="请选择清理的流水线"
+                                 @change="(e) => submit.relIdList[0] = e"/>
+          </div>
+        </div>
+        <!-- 创建用户 -->
+        <div class="choose-param-wrapper">
+          <span class="normal-label clear-label">创建用户</span>
+          <a-checkbox class="param-input" v-model="iCreated">只清理我创建的</a-checkbox>
+        </div>
+        <!-- 执行用户 -->
+        <div class="choose-param-wrapper">
+          <span class="normal-label clear-label">审核用户</span>
+          <a-checkbox class="param-input" v-model="iAudited">只清理我审核的</a-checkbox>
+        </div>
+        <!-- 执行用户 -->
+        <div class="choose-param-wrapper">
+          <span class="normal-label clear-label">执行用户</span>
+          <a-checkbox class="param-input" v-model="iExecute">只清理我执行的</a-checkbox>
+        </div>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import _enum from '@/lib/enum'
+import AppPipelineSelector from '@/components/app/AppPipelineSelector'
+
+export default {
+  name: 'AppPipelineClearModal',
+  components: {
+    AppPipelineSelector
+  },
+  data: function() {
+    return {
+      visible: false,
+      loading: false,
+      iCreated: true,
+      iAudited: false,
+      iExecute: false,
+      submit: {
+        profileId: null,
+        reserveDay: null,
+        reserveTotal: null,
+        relIdList: [],
+        range: _enum.DATA_CLEAR_RANGE.DAY.value
+      }
+    }
+  },
+  methods: {
+    open(profileId) {
+      this.submit.profileId = profileId
+      this.iCreated = true
+      this.iAudited = false
+      this.iExecute = false
+      this.submit.reserveDay = null
+      this.submit.reserveTotal = null
+      this.submit.relIdList = []
+      this.submit.range = this.$enum.DATA_CLEAR_RANGE.DAY.value
+      this.loading = false
+      this.visible = true
+    },
+    clear() {
+      if (!this.submit.profileId) {
+        this.$message.warning('请选择需要清理的环境')
+        return
+      }
+      if (this.submit.range === this.$enum.DATA_CLEAR_RANGE.DAY.value) {
+        if (this.submit.reserveDay === null) {
+          this.$message.warning('请输入需要保留的天数')
+          return
+        }
+      } else if (this.submit.range === this.$enum.DATA_CLEAR_RANGE.TOTAL.value) {
+        if (this.submit.reserveTotal === null) {
+          this.$message.warning('请输入需要保留的条数')
+          return
+        }
+      } else if (this.submit.range === this.$enum.DATA_CLEAR_RANGE.REL_ID.value) {
+        if (!this.submit.relIdList.length) {
+          this.$message.warning('请选择需要清理的应用')
+          return
+        }
+      } else {
+        return
+      }
+      this.$confirm({
+        title: '确认清理',
+        content: '清理后数据将无法恢复, 确定要清理吗?',
+        mask: false,
+        okText: '确认',
+        okType: 'danger',
+        cancelText: '取消',
+        onOk: () => {
+          this.doClear()
+        }
+      })
+    },
+    doClear() {
+      this.loading = true
+      this.$api.clearAppPipeline({
+        ...this.submit,
+        iCreated: this.iCreated ? 1 : 2,
+        iAudited: this.iAudited ? 1 : 2,
+        iExecute: this.iExecute ? 1 : 2
+      }).then(({ data }) => {
+        this.loading = false
+        this.visible = false
+        this.$emit('clear')
+        this.$message.info(`共清理 ${data}条数据`)
+      }).catch(() => {
+        this.loading = false
+        this.$message.error('清理失败')
+      })
+    },
+    close() {
+      this.visible = false
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+.data-clear-container {
+  width: 100%;
+}
+
+.data-clear-range {
+  margin-bottom: 24px;
+  display: flex;
+  justify-content: center;
+}
+
+.clear-label {
+  width: 64px;
+  text-align: end;
+}
+
+.data-clear-param {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.param-input {
+  margin-left: 8px;
+  width: 242px;
+}
+
+.choose-param-wrapper {
+  margin-top: 12px;
+}
+
+</style>
diff --git a/orion-ops-vue/src/views/app/AppPipelineTask.vue b/orion-ops-vue/src/views/app/AppPipelineTask.vue
index 651442bc..96946add 100644
--- a/orion-ops-vue/src/views/app/AppPipelineTask.vue
+++ b/orion-ops-vue/src/views/app/AppPipelineTask.vue
@@ -50,6 +50,7 @@
       <div class="tools-fixed-right">
         <a-button v-if="query.profileId" class="ml16 mr8" type="primary" icon="caret-right" @click="openPipelineList">执行</a-button>
         <a-divider type="vertical"/>
+        <a-icon type="delete" class="tools-icon" title="查询" @click="openClear"/>
         <a-icon type="search" class="tools-icon" title="查询" @click="getList({})"/>
         <a-icon type="reload" class="tools-icon" title="重置" @click="resetForm"/>
       </div>
@@ -262,6 +263,8 @@
       <AppBuildLogAppenderModal ref="buildAppender"/>
       <!-- 发布日志 -->
       <AppReleaseLogAppenderModal ref="releaseAppender"/>
+      <!-- 清理模态框 -->
+      <AppPipelineClearModal ref="clear" @clear="getList({})"/>
     </div>
   </div>
 </template>
@@ -276,6 +279,7 @@ import AppPipelineExecTimedModal from '@/components/app/AppPipelineExecTimedModa
 import AppPipelineTaskDetailDrawer from '@/components/app/AppPipelineTaskDetailDrawer'
 import AppBuildLogAppenderModal from '@/components/log/AppBuildLogAppenderModal'
 import AppReleaseLogAppenderModal from '@/components/log/AppReleaseLogAppenderModal'
+import AppPipelineClearModal from '@/components/clear/AppPipelineClearModal'
 
 function statusHolder() {
   return {
@@ -433,6 +437,7 @@ const innerColumns = [
 export default {
   name: 'AppPipelineTask',
   components: {
+    AppPipelineClearModal,
     AppReleaseLogAppenderModal,
     AppBuildLogAppenderModal,
     AppPipelineTaskDetailDrawer,
@@ -631,6 +636,9 @@ export default {
         this.$message.success('已跳过')
       })
     },
+    openClear() {
+      this.$refs.clear.open(this.query.profileId)
+    },
     resetForm() {
       this.$refs.query.resetFields()
       this.query.pipelineId = undefined