Merge pull request #10981 from useryuyu/issue_10920

feat：stage 审核支持 checklist 确认场景 #10920
TencentBlueKing · Oct 21, 2024 · ac1b577 · ac1b577
2 parents 4f51b21 + 15e3e66
commit ac1b577
Show file tree

Hide file tree

Showing 8 changed files with 409 additions and 726 deletions.
diff --git a/src/frontend/devops-pipeline/package.json b/src/frontend/devops-pipeline/package.json
@@ -18,7 +18,7 @@
         "@blueking/search-select": "0.0.1-beta.2",
         "@icon-cool/bk-icon-devops": "^0.2.1",
         "axios": "0.28.0",
-        "bk-magic-vue": "2.5.9-beta.9",
+        "bk-magic-vue": "2.5.9-beta.41",
         "bk-permission": "workspace:bk-permission",
         "bkui-pipeline": "workspace:bk-pipeline",
         "clipboard": "^1.7.1",

diff --git a/src/frontend/devops-pipeline/src/components/StageReviewPanel/components/params/approve.vue b/src/frontend/devops-pipeline/src/components/StageReviewPanel/components/params/approve.vue
@@ -7,22 +7,32 @@
                 :key="index"
                 class="review-params"
             >
-                <bk-input
-                    disabled
-                    :value="getParamKey(param)"
-                    class="review-param-item"
-                ></bk-input>
-                <span :class="{ 'review-param-gap': true, 'param-require': param.required }"></span>
+                <template v-if="!isCheakboxParam(param.valueType)">
+                    <bk-input
+                        disabled
+                        :value="getParamKey(param)"
+                        class="review-param-item"
+                    ></bk-input>
+                    <span
+                        :class="{ 'review-param-gap': true, 'param-require': param.required }"
+                    ></span>
+                </template>
                 <param-value
                     :form="param"
                     :disabled="disabled"
-                    class="review-param-item"
+                    :class="['review-param-item', {
+                        'checkbox-name': isCheakboxParam(param.valueType)
+                    }]"
                 ></param-value>
                 <i
                     class="bk-icon icon-info"
                     v-bk-tooltips="param.desc"
                     v-if="param.desc"
                 ></i>
+                <span
+                    v-if="isCheakboxParam(param.valueType)"
+                    :class="{ 'review-param-gap': true, 'param-require': param.required }"
+                ></span>
             </li>
         </ul>
         <span class="error-message">{{ errMessage }}</span>
@@ -31,6 +41,7 @@
 
 <script>
     import paramValue from './param-value'
+    import { isCheakboxParam } from '@/store/modules/atom/paramsConfig'
 
     export default {
         components: {
@@ -66,6 +77,7 @@
         },
 
         methods: {
+            isCheakboxParam,
             updateParams () {
                 const params = this.showReviewGroup.params && this.showReviewGroup.params.length ? this.showReviewGroup.params : this.reviewParams
                 this.params = params || []
@@ -75,15 +87,18 @@
                 return new Promise((resolve, reject) => {
                     // 校验必填
                     const errorKeys = []
-                    this.params.forEach(({ required, valueType, value, key }) => {
+                    this.params.forEach(({ required, valueType, value, key, chineseName }) => {
                         if (required) {
-                            key = (key || '').replace(/^variables\./, '')
+                            key = chineseName || (key || '').replace(/^variables\./, '')
                             if (typeof value === 'undefined' || value === '') {
                                 errorKeys.push(key)
                             }
                             if (valueType === 'MULTIPLE' && (!value || value.length <= 0)) {
                                 errorKeys.push(key)
                             }
+                            if (valueType === 'CHECKBOX' && !value) {
+                                errorKeys.push(key)
+                            }
                         }
                     })
                     if (errorKeys.length) this.errMessage = this.$t('stageReview.requireRule', [errorKeys.join(',')])
@@ -109,9 +124,13 @@
         .review-param-item {
             width: 380px;
         }
+        .checkbox-name{
+            width: auto;
+        }
         .review-param-gap {
             display: inline-block;
             min-width: 28px;
+            height: 18px;
             &.param-require:after {
                 height: 8px;
                 line-height: 1;

diff --git a/src/frontend/devops-pipeline/src/components/StageReviewPanel/components/params/form.vue b/src/frontend/devops-pipeline/src/components/StageReviewPanel/components/params/form.vue
@@ -62,7 +62,7 @@
             </bk-form-item>
             <bk-form-item
                 :label="$t('stageReview.defaultValue')"
-                v-if="copyForm.valueType"
+                v-if="copyForm.valueType && !isCheakboxParam(copyForm.valueType)"
                 :key="copyForm.valueType"
             >
                 <param-value :form="copyForm"></param-value>
@@ -96,7 +96,8 @@
         CHECK_PARAM_LIST,
         isEnumParam,
         isMultipleParam,
-        isBooleanParam
+        isBooleanParam,
+        isCheakboxParam
     } from '@/store/modules/atom/paramsConfig'
 
     const paramTypeList = CHECK_PARAM_LIST.map((item) => ({
@@ -146,6 +147,7 @@
         methods: {
             isBooleanParam,
             isMultipleParam,
+            isCheakboxParam,
 
             isSelectorParam (type) {
                 return isMultipleParam(type) || isEnumParam(type)
@@ -169,9 +171,13 @@
                 this.copyForm.value = ''
                 this.copyForm.options = []
 
-                if (isMultipleParam(type)) this.copyForm.value = []
-
-                if (isBooleanParam(type)) this.copyForm.value = false
+                if (isMultipleParam(type)) {
+                    this.copyForm.value = []
+                } else if (isBooleanParam(type)) {
+                    this.copyForm.value = ''
+                } else if (isCheakboxParam(type)) {
+                    this.copyForm.value = false
+                }
             },
 
             changeOption (val) {

diff --git a/...rontend/devops-pipeline/src/components/StageReviewPanel/components/params/param-value.vue b/...rontend/devops-pipeline/src/components/StageReviewPanel/components/params/param-value.vue
@@ -28,6 +28,17 @@
         </bk-option>
     </bk-select>
 
+    <div
+        v-else-if="isCheakboxParam(form.valueType)"
+        class="clear"
+    >
+        <bk-checkbox
+            v-model="form.value "
+        >
+        </bk-checkbox>
+        <span class="clear-name">{{ getParamKey(form) }}</span>
+    </div>
+
     <bk-radio-group
         v-model="form.value"
         v-else-if="isBooleanParam(form.valueType)"
@@ -54,7 +65,8 @@
         isMultipleParam,
         isTextareaParam,
         isStringParam,
-        isBooleanParam
+        isBooleanParam,
+        isCheakboxParam
     } from '@/store/modules/atom/paramsConfig'
 
     export default {
@@ -68,10 +80,27 @@
             isStringParam,
             isTextareaParam,
             isMultipleParam,
+            isCheakboxParam,
 
             isSelectorParam (type) {
                 return isMultipleParam(type) || isEnumParam(type)
+            },
+            getParamKey (param) {
+                return param.chineseName || (param.key || '').replace(/^variables\./, '')
             }
         }
     }
 </script>
+
+<style lang="scss" scoped>
+.clear {
+    display: flex;
+    align-items: center;
+    .bk-form-item {
+        line-height: 30px;
+    }
+    .clear-name {
+        margin-left: 5px;
+    }
+}
+</style>
diff --git a/src/frontend/devops-pipeline/src/store/modules/atom/paramsConfig.js b/src/frontend/devops-pipeline/src/store/modules/atom/paramsConfig.js
@@ -22,6 +22,7 @@ export const TEXTAREA = 'TEXTAREA'
 export const BOOLEAN = 'BOOLEAN'
 export const ENUM = 'ENUM'
 export const MULTIPLE = 'MULTIPLE'
+export const CHECKBOX = 'CHECKBOX'
 export const SVN_TAG = 'SVN_TAG'
 export const GIT_REF = 'GIT_REF'
 export const CODE_LIB = 'CODE_LIB'
@@ -95,6 +96,17 @@ export const DEFAULT_PARAM = {
         required: true,
         readOnly: false
     },
+    [CHECKBOX]: {
+        id: 'checkbox',
+        name: 'checkbox',
+        defaultValue: false,
+        defalutValueLabel: 'defaultValue',
+        desc: '',
+        type: CHECKBOX,
+        typeDesc: 'checkbox',
+        required: true,
+        readOnly: false
+    },
     [SVN_TAG]: {
         id: 'svntag',
         name: 'svntag',
@@ -219,6 +231,13 @@ export const CHECK_DEFAULT_PARAM = {
         options: [],
         valueType: MULTIPLE,
         required: true
+    },
+    [CHECKBOX]: {
+        key: 'checkbox',
+        value: false,
+        desc: '',
+        valueType: CHECKBOX,
+        required: true
     }
 }
 export const CHECK_PARAM_LIST = Object.keys(CHECK_DEFAULT_PARAM).map(key => ({
@@ -316,6 +335,7 @@ export const isTextareaParam = paramType(TEXTAREA)
 export const isBooleanParam = paramType(BOOLEAN)
 export const isEnumParam = paramType(ENUM)
 export const isMultipleParam = paramType(MULTIPLE)
+export const isCheakboxParam = paramType(CHECKBOX)
 export const isSvnParam = paramType(SVN_TAG)
 export const isGitParam = paramType(GIT_REF)
 export const isCodelibParam = paramType(CODE_LIB)

diff --git a/src/frontend/locale/pipeline/en-US.json b/src/frontend/locale/pipeline/en-US.json
@@ -1059,6 +1059,7 @@
     "bool": "Boolean",
     "enum": "Radio",
     "multiple": "Checkbox",
+    "checkbox": "Checkbox Confirmation Box",
     "svntag": "SVN branch or TAG",
     "gitref": "GIT branch or TAG",
     "codelib": "Code repository",

diff --git a/src/frontend/locale/pipeline/zh-CN.json b/src/frontend/locale/pipeline/zh-CN.json
@@ -1058,6 +1058,7 @@
     "bool": "布尔值",
     "enum": "单选框",
     "multiple": "复选框",
+    "checkbox": "Checkbox确认框",
     "svntag": "SVN分支或TAG",
     "gitref": "GIT分支或TAG",
     "codelib": "代码库",