feat: 丰富流水线-stage准入的审核功能，支持配置角色或用户组作为审核人 #10689

src/frontend/devops-pipeline/src/components/StageReviewPanel/components/reviewFlow/edit.vue

@@ -14,15 +14,42 @@
                         :value="reviewGroup.name"
                         @change="modifyReviewName(reviewGroup, ...arguments)"
                     ></bk-input>
-
-                    <user-input
-                        clearable
-                        class="review-user"
-                        :placeholder="$t('stageReview.userInputTips')"
-                        :value="reviewGroup.reviewers"
-                        :disabled="disabled"
-                        :handle-change="(name, value) => addReviewUser(reviewGroup, name, value)"
-                    ></user-input>
+                    <div
+                        class="review-warpper"
+                    >
+                        <bk-select
+                            v-model="reviewGroup.reviewType"
+                            class="review-type-select"
+                            @change="() => handleChangeReviewType(index)"
+                        >
+                            <bk-option
+                                v-for="option in reviewTypeList"
+                                :key="option.id"
+                                :id="option.id"
+                                :name="option.name"
+                            >
+                            </bk-option>
+                        </bk-select>
+                        <user-group-input
+                            v-if="reviewGroup.reviewType === 'group'"
+                            clearable
+                            class="review-user"
+                            :placeholder="reviewGroup.reviewType ? $t('stageReview.userGroupInputTips') : ''"
+                            :value="reviewGroup.groups"
+                            :disabled="disabled"
+                            :handle-change="(name, value) => addReviewGroup(reviewGroup, name, value)"
+                        >
+                        </user-group-input>
+                        <user-input
+                            v-else
+                            clearable
+                            class="review-user"
+                            :placeholder="reviewGroup.reviewType ? $t('stageReview.userInputTips') : ''"
+                            :value="reviewGroup.reviewers"
+                            :disabled="disabled || !reviewGroup.reviewType"
+                            :handle-change="(name, value) => addReviewUser(reviewGroup, name, value)"
+                        ></user-input>
+                    </div>
 
                     <bk-button
                         text
@@ -44,7 +71,7 @@
         <bk-button
             text
             title="primary"
-            @click="addReviewGroup"
+            @click="addReviewItem"
             :disabled="disabled || reviewGroups.length >= 5"
             class="review-opt mt3"
         >
@@ -55,10 +82,12 @@
 
 <script>
     import UserInput from '@/components/atomFormField/UserInput'
+    import UserGroupInput from '@/components/atomFormField/UserGroupInput'
 
     export default {
         components: {
-            UserInput
+            UserInput,
+            UserGroupInput
         },
 
         props: {
@@ -68,14 +97,26 @@
 
         data () {
             return {
-                copyReviewGroups: JSON.parse(JSON.stringify(this.reviewGroups))
+                copyReviewGroups: JSON.parse(JSON.stringify(this.reviewGroups)),
+                reviewTypeList: [
+                    {
+                        id: 'user',
+                        name: this.$t('stageReview.reviewer')
+                    },
+                    {
+                        id: 'group',
+                        name: this.$t('stageReview.groups')
+                    }
+                ],
+                reviewType: 'user'
             }
         },
 
         computed: {
             errorIndexs () {
                 return this.copyReviewGroups.map((reviewGroup, index) => {
-                    if (reviewGroup.name === '' || !reviewGroup.reviewers || reviewGroup.reviewers.length <= 0) {
+                    if (!reviewGroup.name) return index
+                    if (reviewGroup.reviewers.length <= 0 && reviewGroup.groups.length <= 0) {
                         return index
                     }
                     return -1
@@ -106,14 +147,25 @@
                 this.triggleChange()
             },
 
-            addReviewGroup () {
-                const newItem = { name: '', reviewers: [] }
+            addReviewItem () {
+                const newItem = { name: '', reviewers: [], groups: [] }
                 this.copyReviewGroups.push(newItem)
                 this.triggleChange()
             },
 
             triggleChange () {
                 this.$emit('change', 'reviewGroups', this.copyReviewGroups)
+            },
+
+            handleChangeReviewType (index) {
+                this.copyReviewGroups[index].reviewers = []
+                this.copyReviewGroups[index].groups = []
+                this.$emit('change', 'reviewGroups', this.copyReviewGroups)
+            },
+
+            addReviewGroup (reviewGroup, name, value) {
+                reviewGroup.groups = value
+                this.triggleChange()
             }
         }
     }
@@ -125,12 +177,21 @@
     align-items: center;
 
     .review-name {
-        width: 270px;
+        width: 240px;
     }
 
-    .review-user {
-        width: 487px;
-        margin: 0 8px 0 10px;
+    .review-warpper {
+        width: 520px;
+        margin-left: 10px;
+        display: flex;
+        .review-type-select {
+            width: 120px;
+            border-right: none;
+        }
+        .review-user {
+            flex: 1;
+            margin-right: 5px;
+        }
     }
 }
 

src/frontend/devops-pipeline/src/components/StageReviewPanel/edit.vue

@@ -195,7 +195,15 @@
                 }
             },
             reviewGroups () {
-                return Array.isArray(this.stageControl?.reviewGroups) ? this.stageControl.reviewGroups : []
+                const reviews = this.stageControl.reviewGroups?.map(i => {
+                    return {
+                        ...i,
+                        reviewType: i?.groups?.length ? 'group' : 'user'
+                    }
+                })
+                return Array.isArray(this.stageControl?.reviewGroups)
+                    ? reviews
+                    : []
             },
             hasTriggerMember () {
                 try {
@@ -239,12 +247,7 @@
             }
         },
         watch: {
-            manualTrigger (val) {
-                if (!val) {
-                    this.stageControl.notifyGroup = []
-                    this.stageControl.notifyType = []
-                    this.stageControl.reviewGroups = []
-                }
+            manualTrigger () {
                 this.handleUpdateStageControl('isReviewError', !this.validateStageControl())
             },
             hasTriggerMember () {
@@ -280,10 +283,20 @@
                 })
             },
             handleUpdateStageControl (name, value) {
+                let curVal = value
+                if (name === 'reviewGroups') {
+                    curVal = value.map(i => {
+                        return {
+                            name: i.name,
+                            reviewers: i.reviewers || [],
+                            groups: i.groups || []
+                        }
+                    })
+                }
                 this.setPipelineEditing(true)
                 this.handleStageChange(this.stageReviewType, {
                     ...(this.stageControl || {}),
-                    [name]: value
+                    [name]: curVal
                 })
             },
 

src/frontend/devops-pipeline/src/components/atomFormField/UserGroupInput/index.vue

@@ -0,0 +1,103 @@
+<template>
+    <div class="staff-input">
+        <bk-tag-input
+            v-model="tagValue"
+            allow-create
+            clearable
+            :placeholder="placeholder"
+            :search-key="['id', 'name']"
+            separator=","
+            :disabled="disabled"
+            :create-tag-validator="checkVariable"
+            :paste-fn="paste"
+            :list="list"
+            trigger="focus"
+        >
+        </bk-tag-input>
+    </div>
+</template>
+
+<script>
+    import atomFieldMixin from '../atomFieldMixin'
+
+    export default {
+        name: 'staff-input',
+        mixins: [atomFieldMixin],
+        props: {
+            value: {
+                type: Array,
+                required: true,
+                default: () => []
+            },
+            placeholder: {
+                type: String,
+                default: ''
+            },
+            listUrl: {
+                type: String,
+                default: ''
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                list: []
+            }
+        },
+        computed: {
+            tagValue: {
+                get () {
+                    return this.value
+                },
+                set (value) {
+                    this.handleChange(this.name, value)
+                }
+            }
+        },
+        created () {
+            this.getList()
+        },
+        methods: {
+            getList () {
+                const url = this.listUrl || `/quality/api/user/groups/${this.$route.params.projectId}/projectGroupAndUsers`
+                this.$ajax.get(`${url}`).then(res => {
+                    this.list = res.data.map(i => {
+                        return {
+                            ...i,
+                            id: i.groupId,
+                            name: i.groupName
+                        }
+                    })
+                }).catch(e => {
+                    console.log(e)
+                })
+            },
+            // 检验变量
+            checkVariable (val) {
+                return /^\$\{(.*)\}$/.test(val)
+            },
+            paste (val) {
+                const newArr = val.split(',').filter(v => !this.tagValue.find(w => w === v))
+                this.tagValue = [...this.tagValue, ...newArr]
+                return []
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .staff-input {
+        display: flex;
+        .prepend-box {
+            border: 1px solid #c4c6cc;
+            border-right: none;
+            padding: 0 15px;
+        }
+        .bk-tag-selector {
+            flex: 1;
+        }
+    }
+</style>

src/frontend/devops-pipeline/src/components/atomFormField/UserInput/index.vue

@@ -247,6 +247,7 @@
                 }
             },
             toEdit (event) {
+                if (this.disabled) return
                 this.isEdit = true
                 this.$refs.staffInput.focus()
             },

src/frontend/locale/pipeline/en-US.json

@@ -184,13 +184,16 @@
     "waitApproval": "Waiting for previous approval. Approver: {0}",
     "opinionRequired": "When reject is selected, approval opinion is required",
     "userInputTips": "Please enter approvers. Pipeline variable is supported.",
+    "userGroupInputTips": "Please enter user group. Pipeline variable is supported.",
     "reviewRequire": "Name of approval flow and approvers are required",
     "addFlow": "Create approval step",
     "approveBy": "Approved by {0}: ",
     "editVariable": "Edit variable: ",
     "approveOpinion": "Approval Opinion: ",
     "approveTime": "Approval Time: ",
-    "approver": "Approver: "
+    "approver": "Approver: ",
+    "reviewer": "Reviewer",
+    "groups": "User Group"
   },
   "execDetail": {
     "log": "Log",

src/frontend/locale/pipeline/zh-CN.json

@@ -184,13 +184,16 @@
     "waitApproval": "待审批，处理人：{0}",
     "opinionRequired": "驳回时，审核意见必填",
     "userInputTips": "请输入一个或多个审核人，支持输入变量",
+    "userGroupInputTips": "请输入一个或多个用户组，支持输入变量",
     "reviewRequire": "审核名称和审核人必填",
     "addFlow": "添加审批步骤",
     "approveBy": "由 {0} 审批：",
     "editVariable": "变更参数：",
     "approveOpinion": "审批意见：",
     "approveTime": "审批时间：",
-    "approver": "处理人："
+    "approver": "处理人：",
+    "reviewer": "审核人",
+    "groups": "用户组"
   },
   "execDetail": {
     "log": "日志",