Merge pull request #4704 from vhwweng/tttissue_4583

feat: 简化dynamic-parameter-simple组件 issue #4583

src/frontend/devops-pipeline/src/components/AtomFormComponent/DynamicParameterSimple/index.vue

@@ -0,0 +1,180 @@
+<template>
+    <ul class="param-main" v-bkloading="{ isLoading }">
+        <li class="param-label" style="display: flex; padding-right:30px;">
+            <span
+                v-for="(item, index) in curParameters[0].rowAttributes"
+                :key="index"
+                class="input-label"
+                :title="item.label">
+                {{ item.label }}：
+                <i class="bk-icon icon-info-circle label-desc" v-bk-tooltips.top="{ content: item.desc }" />
+            </span>
+        </li>
+        <li class="param-com" v-for="(parameter, paramIndex) in curParameters" :key="paramIndex">
+            <parameter-com v-for="(model, index) in parameter.rowAttributes"
+                :class="[{ 'last-child': index === parameter.rowAttributes.length - 1 }, 'input-com']"
+                :style="{ maxWidth: `calc(${100 / parameter.rowAttributes.length}% - ${58 / parameter.rowAttributes.length}px)` }"
+                v-bind="model"
+                :key="model.id"
+                @update-key="(newValue) => updateKey(model, newValue)"
+                @update-value="(newValue) => updateValue(model, newValue)"
+                :param-values="paramValues"
+            ></parameter-com>
+            <i class="bk-icon icon-plus-circle" @click="plusParam(parameter, paramIndex)"></i>
+            <i class="bk-icon icon-minus-circle" v-if="curParameters.length > 1" @click="minusParam(paramIndex)"></i>
+        </li>
+    </ul>
+</template>
+
+<script>
+    import mixins from '../mixins'
+    import parameterCom from './parameterCom'
+
+    export default {
+        name: 'dynamic-parameter-simple',
+
+        components: {
+            parameterCom
+        },
+        
+        mixins: [mixins],
+
+        props: {
+            parameters: {
+                type: Array
+            }
+        },
+
+        data () {
+            return {
+                isLoading: false,
+                curParameters: []
+            }
+        },
+
+        created () {
+            this.initData()
+        },
+
+        methods: {
+            initData () {
+                this.curParameters = JSON.parse(JSON.stringify(this.parameters))
+                this.setValue()
+            },
+
+            setValue () {
+                let values = this.atomValue[this.name] || []
+                if (!Array.isArray(values)) values = JSON.parse(values)
+
+                if (values.length) {
+                    this.curParameters = values.map((value) => {
+                        const originAttr = this.parameters[0]
+                        const currentRowAttr = JSON.parse(JSON.stringify(originAttr))
+                        const curKeys = Object.keys(value)
+                        const curValues = Object.values(value)
+                        const rowAttrs = currentRowAttr.rowAttributes
+                        rowAttrs.forEach((attr, index) => {
+                            attr['id'] = curKeys[index]
+                            attr['value'] = curValues[index]
+                        })
+                        return currentRowAttr
+                    })
+                }
+
+                this.updateParameters()
+            },
+
+            /**
+             * 添加一行动态参数
+             */
+            plusParam (parameter, index) {
+                this.curParameters.splice(index, 0, JSON.parse(JSON.stringify(parameter)))
+                this.updateParameters()
+            },
+
+            /**
+             * 删除一行动态参数
+             */
+            minusParam (index) {
+                this.curParameters.splice(index, 1)
+                this.updateParameters()
+            },
+
+            /**
+             * key更新
+             */
+            updateKey (model, newValue) {
+                model.id = newValue
+                this.updateParameters()
+            },
+
+            /**
+             * value更新
+             */
+            updateValue (model, newValue) {
+                model.value = newValue
+                this.updateParameters()
+            },
+
+            /**
+             * 更新参数
+             */
+            updateParameters () {
+                const res = this.curParameters.map((parameter) => {
+                    const rowAttributes = parameter.rowAttributes
+                    const obj = {}
+                    rowAttributes.forEach((model) => {
+                        obj[model.id] = model.value || ''
+                        return obj
+                    })
+                    return obj
+                })
+                this.handleChange(this.name, String(JSON.stringify(res)))
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .param-main {
+        margin-top: 8px;
+        .param-title {
+            font-size: 12px;
+            line-height: 30px;
+        }
+        .param-com {
+            margin-bottom: 10px;
+            display: flex;
+            align-items: center;
+            .input-com {
+                flex: 1;
+                margin-right: 10px;
+                &.last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+        .param-label {
+            display: flex;
+            padding-right: 30px;
+        }
+        .input-label {
+            flex: 1;
+        }
+    }
+    .bk-icon {
+        margin-left: 5px;
+        font-size: 14px;
+        cursor: pointer;
+    }
+    .label-desc {
+        position: relative;
+        bottom: 1px;
+        right: 6px;
+        margin-left: 0;
+        cursor: auto;
+        color: #C3CDD7;
+        font-size: 14px;
+        vertical-align: middle;
+    }
+</style>

src/frontend/devops-pipeline/src/components/AtomFormComponent/DynamicParameterSimple/parameterCom.vue

@@ -0,0 +1,128 @@
+<template>
+    <section class="param-input-home">
+        <section class="parameter-input">
+            <bk-input
+                v-if="type === 'input'"
+                class="input-main"
+                :clearable="!disabled"
+                :disabled="disabled"
+                :value="value"
+                :placeholder="placeholder"
+                @change="(newValue) => $emit('update-value', newValue)" />
+            <section
+                v-else
+                class="parameter-select input-main">
+                <bk-select
+                    :disabled="disabled"
+                    v-model="value"
+                    :placeholder="placeholder"
+                    @change="(newValue) => $emit('update-value', newValue)"
+                    ext-cls="select-custom"
+                    ext-popover-cls="select-popover-custom"
+                    searchable>
+                    <bk-option v-for="option in options"
+                        :key="option.id"
+                        :id="option.id"
+                        :name="option.name">
+                    </bk-option>
+                </bk-select>
+            </section>
+        </section>
+    </section>
+</template>
+
+<script>
+    import mixins from '../mixins'
+
+    export default {
+        mixins: [mixins],
+
+        props: {
+            id: {
+                type: String
+            },
+            type: {
+                type: String
+            },
+            value: {
+                type: [String, Array]
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            options: {
+                type: Array
+            },
+            placeholder: {
+                type: String,
+                default: ''
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .param-input-home {
+        display: flex;
+        align-items: flex-end;
+        flex: 1;
+        .param-hyphen {
+            margin-right: 11px;
+        }
+    }
+    .parameter-input {
+        flex: 1;
+        .input-label {
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .input-main {
+            flex: 1;
+        }
+    }
+    .parameter-select {
+        position: relative;
+        .parameter-list {
+            position: absolute;
+            top: 32px;
+            left: 0;
+            right: 0;
+            padding: 6px 0;
+            list-style: none;
+            border: 1px solid #dcdee5;
+            border-radius: 2px;
+            line-height: 32px;
+            background: #fff;
+            color: #63656e;
+            overflow: auto;
+            max-height: 216px;
+            z-index: 2;
+            li {
+                padding: 0 16px;
+                position: relative;
+                &:hover {
+                    color: #3a84ff;
+                    background-color: #eaf3ff;
+                }
+            }
+            .is-active {
+                color: #3a84ff;
+                background-color: #f4f6fa;
+                &:after {
+                    content: '';
+                    position: absolute;
+                    right: 16px;
+                    top: 11px;
+                    height: 7px;
+                    width: 3px;
+                    transform: rotate(45deg);
+                    border-bottom: 1px solid #3a84ff;
+                    border-right: 1px solid #3a84ff;
+                }
+            }
+        }
+    }
+</style>

src/frontend/devops-pipeline/src/components/AtomPropertyPanel/NormalAtomV2.vue

@@ -65,6 +65,7 @@
     import Parameter from '@/components/AtomFormComponent/Parameter'
     import Tips from '@/components/AtomFormComponent/Tips'
     import DynamicParameter from '@/components/AtomFormComponent/DynamicParameter'
+    import DynamicParameterSimple from '@/components/AtomFormComponent/DynamicParameterSimple'
     import { getAtomDefaultValue } from '@/store/modules/atom/atomUtil'
     import copyIcon from '@/components/copyIcon'
     export default {
@@ -78,6 +79,7 @@
             Parameter,
             Tips,
             DynamicParameter,
+            DynamicParameterSimple,
             copyIcon
         },
         mixins: [atomMixin, validMixins],

src/frontend/devops-pipeline/src/components/AtomPropertyPanel/PreviewAtom.vue

@@ -65,6 +65,7 @@
     import Parameter from '@/components/AtomFormComponent/Parameter'
     import Tips from '@/components/AtomFormComponent/Tips'
     import DynamicParameter from '@/components/AtomFormComponent/DynamicParameter'
+    import DynamicParameterSimple from '@/components/AtomFormComponent/DynamicParameterSimple'
     import copyIcon from '@/components/copyIcon'
 
     export default {
@@ -78,6 +79,7 @@
             Parameter,
             Tips,
             DynamicParameter,
+            DynamicParameterSimple,
             copyIcon
         },
         mixins: [atomMixin],

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

@@ -92,6 +92,7 @@
     "buildNumRuleWarn": "The parts beyond the length limit will be cut off",
     "jobIdTips": "Not required, Field only support English letter, numbers and underscores and must be unique in this pipeline",
     "nameInputTips": "Please enter a name",
+    "propertyNameInputTips": "Please enter a property name",
     "loadingTips": "Data is Loading, Please wait",
     "metaData": "Meta Data",
     "download": "Download",

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

@@ -92,6 +92,8 @@
     "buildNumRuleWarn": "超出长度限制的部分会被截断",
     "jobIdTips": "非必填，整个流水线下唯一，由字母、数字、下划线组成",
     "nameInputTips": "请输入名称",
+    "propertyNameInputTips": "请输入属性名",
+    "propertyValueInputTips": "请输入属性值",
     "loadingTips": "数据加载中，请稍候",
     "metaData": "元数据",
     "download": "下载",