feat: generic仓库及依赖源仓库添加仓库清理设置 #832

src/frontend/devops-repository/package.json

@@ -12,6 +12,7 @@
     "public:external": "cross-env NODE_ENV=external yarn public --"
   },
   "dependencies": {
+    "@cw-devops/vue-tree": "^1.0.4",
     "axios": "^0.21.1",
     "js-cookie": "^2.2.1",
     "marked": "^4.0.8",

src/frontend/devops-repository/src/store/actions/repoGeneric.js

@@ -73,7 +73,7 @@ export default {
             request = Vue.prototype.$ajax.post(
                 `${prefix}/node/search`,
                 {
-                    select: ['name', 'fullPath', 'metadata'],
+                    select: ['name', 'fullPath', 'metadata', 'folder'],
                     page: {
                         pageNumber: 1,
                         pageSize: 10000
@@ -110,15 +110,7 @@ export default {
                 }
             )
         }
-        return request.then(({ records }) => {
-            commit('UPDATE_TREE', {
-                roadMap,
-                list: records.map((v, index) => ({
-                    ...v,
-                    roadMap: `${roadMap},${index}`
-                }))
-            })
-        })
+        return request
     },
     // 请求文件/文件夹详情
     getNodeDetail (_, { projectId, repoName, fullPath = '' }) {

src/frontend/devops-repository/src/utils/infoConfirm.js

@@ -0,0 +1,59 @@
+/**
+ * 基于 <bk-info></bk-info>组件修改了部分样式
+ */
+
+import Vue from 'vue'
+
+// 自定义目标
+const customSubHeader = (opt) => {
+    const vm = new Vue()
+    const h = vm.$createElement
+    const iconClass = opt.theme === 'danger' ? 'bk-icon icon-close-circle-shape' : 'bk-icon icon-exclamation-circle-shape'
+    const themeColorMap = {
+        warning: '#FFB549',
+        danger: '#EA3736',
+        primary: '#3a84ff'
+    }
+
+    return h('div', [
+        h('div', {
+            style: {
+                display: 'flex',
+                padding: '0 20px',
+                marginBottom: '10px',
+                lineHeight: '26px'
+            }
+        },
+        [
+            h('i', {
+                attrs: {
+                    class: iconClass
+                },
+                style: {
+                    fontSize: '26px',
+                    width: '26px',
+                    height: '26px',
+                    color: themeColorMap[opt.theme]
+                }
+            }),
+            h('span', {
+                style: {
+                    fontWeight: '500',
+                    fontSize: '14px',
+                    color: '#081E40',
+                    marginLeft: '10px'
+                }
+            }, opt.subTitle)
+        ]),
+        h('div', {
+            style: {
+                wordBreak: 'break-all',
+                padding: '0 20px 0 60px',
+                fontSize: '12px',
+                color: '#8797aa'
+            }
+        }, opt.content)
+    ])
+}
+
+export default customSubHeader

src/frontend/devops-repository/src/views/repoConfig/cleanConfig/genericCleanRule.vue

@@ -1,14 +1,7 @@
 <template>
-    <div class="rule-item flex-align-center" :data-suffix="$t('shortOr')">
-        <bk-input
-            style="width:180px;"
-            :value="path.value"
-            @input="path => change({ path })"
-            :disabled="disabled"
-            :placeholder="$t('inputFilePathTip')">
-        </bk-input>
+    <div class="flex-align-center mt10" :data-suffix="$t('shortOr')">
         <bk-select
-            style="width:100px;"
+            style="width:120px;"
             v-model="type"
             :clearable="false"
             :disabled="disabled">
@@ -20,6 +13,8 @@
             v-show="type === 'metadata'"
             style="width:180px;"
             :value="defaultValue.field.replace(/^metadata\.(.*)$/, '$1')"
+            @compositionstart.native="handleComposition"
+            @compositionend.native="handleComposition"
             @input="field => change({ field: `metadata.${field}` })"
             :disabled="disabled"
             :placeholder="$t('key')">
@@ -41,15 +36,7 @@
         name: 'metadataRule',
         components: { SelectInput },
         props: {
-            disabled: Boolean,
-            path: {
-                type: Object,
-                default: () => ({
-                    field: 'path',
-                    operation: 'REGEX',
-                    value: ''
-                })
-            }
+            disabled: Boolean
         },
         data () {
             return {
@@ -62,7 +49,8 @@
                     { id: 'EQ', name: this.$t('equal') },
                     { id: 'MATCH', name: this.$t('contain') },
                     { id: 'REGEX', name: this.$t('regular') }
-                ]
+                ],
+                isOnComposition: true // 此处默认设置为true，在用户输入时保证会进入抛出change事件
             }
         },
         computed: {
@@ -75,7 +63,10 @@
                 set (val) {
                     const oldValue = this.defaultValue.field
                     // 被动改变
-                    if (val === oldValue) return
+                    if (val === oldValue || (oldValue.indexOf('metadata') > -1 && val === 'metadata')) {
+                        // 当之前的值和新的值相等时或者说之前的值是元数据并且新值选择的依旧是元数据，此时都是不需要在重新改变当前的输入框的值的
+                        return
+                    }
                     // 用户输入
                     let field = ''
                     if (val === 'name') field = 'name'
@@ -93,6 +84,10 @@
                         value: ''
                     }
                     const meta = Object.values(val).find(meta => meta.field)
+                    if (Object.values(val)?.[0]?.field === 'id') {
+                        // 此时表明选择的是全部
+                        this.type = 'all'
+                    }
                     // 触发type改变导致input回置
                     meta && (this.defaultValue = { ...meta })
                 },
@@ -101,17 +96,43 @@
             }
         },
         methods: {
+            handleComposition (e) {
+                if (e.type === 'compositionend') {
+                    // 中文输入完成，触发change
+                    this.isOnComposition = true
+                    this.change({ field: `metadata.${e.target.value}` })
+                } else if (e.type === 'compositionstart') {
+                    // 中文输入开始，禁止抛出事件
+                    this.isOnComposition = false
+                }
+            },
+            trimSpecial (string) {
+                let str = ''
+                if (string !== '') {
+                    const pattern = /[`~!@#$%^\-&*()_+=|{}':;',\\\[\]\<>\/?~！@#￥……&*（）——|{}【】'；：""'‘’。，、？\s]/g
+                    str = string.replace(pattern, '')
+                }
+                return str
+            },
             change ({
-                path = this.path.value,
                 field = this.defaultValue.field,
                 select: operation = this.defaultValue.operation,
                 input: value = this.defaultValue.value
             }) {
-                const data = {
-                    path: { field: 'path', operation: 'REGEX', value: path }
+                // key 值不能有特殊符号
+                const key = this.trimSpecial(field)
+
+                // 过滤value字段空格
+                if (value) {
+                    value = value.replace(/(^\s*)|(\s*$)/g, '')
+                }
+                // 英文、数字输入正常抛出，中文输入开始到结束阶段不抛出
+                // 此处注意，如果从始至终都没有输入中文，this.isOnComposition的值就是undefined，但感觉这样不太好，因此在上方定义此变量为响应式数据
+                if (this.isOnComposition || this.isOnComposition === undefined) {
+                    const data = {}
+                    key && (data[key] = { field: key, operation, value })
+                    this.$emit('change', data)
                 }
-                field && (data[field] = { field, operation, value })
-                this.$emit('change', data)
             }
         }
     }