Merge pull request #10823 from vhwweng/issue_10822

bug: 文件类型变量问题修复 #10822

src/frontend/devops-pipeline/src/components/ContainerPropertyPanel/BuildParams.vue

@@ -242,18 +242,12 @@
                                         >
                                             <file-param-input
                                                 name="defaultValue"
+                                                v-bind="param"
                                                 :required="valueRequired"
                                                 :disabled="disabled"
                                                 :value="param.defaultValue"
-                                                :upload-file-name="uploadFileName"
                                                 :handle-change="(name, value) => handleUpdateParam(name, value, index)"
                                             />
-                                            <file-upload
-                                                class="mt10"
-                                                name="fileName"
-                                                :file-path="param.defaultValue"
-                                                @handle-change="(value) => uploadPathFromFileName(value)"
-                                            ></file-upload>
                                         </bk-form-item>
                                     </div>
 
@@ -421,7 +415,6 @@
 </template>
 
 <script>
-    import FileUpload from '@/components/FileUpload'
     import FileParamInput from '@/components/FileParamInput'
     import Accordion from '@/components/atomFormField/Accordion'
     import AtomCheckbox from '@/components/atomFormField/AtomCheckbox'
@@ -481,7 +474,6 @@
             draggable,
             VuexTextarea,
             RequestSelector,
-            FileUpload,
             FileParamInput
         },
         mixins: [validMixins],
@@ -515,11 +507,9 @@
         data () {
             return {
                 paramIdCount: 0,
-                renderParams: [],
-                uploadFileName: ''
+                renderParams: []
             }
         },
-
         computed: {
             ...mapGetters('atom', [
                 'osList',
@@ -833,10 +823,6 @@
                         return false
                     }).map(opt => ({ id: opt.key, name: opt.value }))
                     : []
-            },
-
-            uploadPathFromFileName (value) {
-                this.uploadFileName = value
             }
         }
     }

src/frontend/devops-pipeline/src/components/FileParamInput/index.vue

@@ -1,37 +1,68 @@
 <template>
-    <section class="file-param">
-        <vuex-input
-            class="path-input"
-            :disabled="disabled"
-            :handle-change="(name, value) => updatePathFromDirectory(value)"
-            name="path"
-            v-validate="{ required: required }"
-            :data-vv-scope="'pipelineParam'"
-            :click-unfold="true"
-            :placeholder="$t('editPage.filePathTips')"
-            :value="fileDefaultVal.directory"
-        />
-        <vuex-input
-            class="file-name"
-            :disabled="disabled"
-            :handle-change="(name, value) => updatePathFromFileName(value)"
-            name="fileName"
-            v-validate="{ required: required }"
-            :data-vv-scope="'pipelineParam'"
-            :click-unfold="true"
-            :placeholder="$t('editPage.fileNameTips')"
-            :value="fileDefaultVal.fileName"
-        />
+    <section
+        :class="{
+            'file-param': true,
+            'flex-column': flex
+        }"
+    >
+        <div class="file-input">
+            <vuex-input
+                class="path-input"
+                :disabled="disabled"
+                :handle-change="(name, value) => updatePathFromDirectory(value)"
+                name="path"
+                v-validate="{ required: required }"
+                :data-vv-scope="'pipelineParam'"
+                :click-unfold="true"
+                :placeholder="$t('editPage.filePathTips')"
+                :value="fileDefaultVal.directory"
+                :class="{
+                    'is-diff-param': isDiffParam
+                }"
+            />
+            <vuex-input
+                class="file-name"
+                :disabled="disabled"
+                :handle-change="(name, value) => updatePathFromFileName(value)"
+                name="fileName"
+                v-validate="{ required: required }"
+                :data-vv-scope="'pipelineParam'"
+                :click-unfold="true"
+                :placeholder="$t('editPage.fileNameTips')"
+                :value="fileDefaultVal.fileName"
+                :class="{
+                    'is-diff-param': isDiffParam
+                }"
+            />
+        </div>
+        <div v-if="!flex" class="upload-tips">{{ $t('sizeLimit', [100]) }}</div>
+        <div
+            :class="{
+                'mt10': !flex,
+                'file-upload': flex
+            }">
+            <file-upload
+                name="fileName"
+                :file-path="value"
+                @handle-change="(value) => uploadPathFromFileName(value)"
+            />
+        </div>
     </section>
 </template>
 
 <script>
     import VuexInput from '@/components/atomFormField/VuexInput'
+    import FileUpload from '@/components/FileUpload'
     export default {
         components: {
-            VuexInput
+            VuexInput,
+            FileUpload
         },
         props: {
+            id: {
+                type: String,
+                default: ''
+            },
             name: {
                 type: String,
                 default: ''
@@ -49,27 +80,35 @@
                 type: Boolean,
                 default: false
             },
-            uploadFileName: {
+            isDiffParam: {
                 type: String,
-                default: ''
+                default: false
+            },
+            flex: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
             return {
                 fileDefaultVal: {
                     directory: '',
                     fileName: ''
-                }
+                },
+                uploadFileName: ''
             }
         },
         watch: {
             uploadFileName (val) {
                 this.updatePathFromFileName(val)
+            },
+            value: {
+                handler () {
+                    this.splitFilePath()
+                },
+                immediate: true
             }
         },
-        created () {
-            this.splitFilePath()
-        },
         methods: {
             splitFilePath () {
                 const lastSlashIndex = this.value.lastIndexOf('/')
@@ -85,6 +124,10 @@
                 this.fileDefaultVal.fileName = value
                 const val = `${this.fileDefaultVal.directory}/${this.fileDefaultVal.fileName}`
                 this.handleChange(this.name, val)
+            },
+            uploadPathFromFileName (value) {
+                if (this.fileDefaultVal.fileName) return
+                this.uploadFileName = value
             }
         }
     }
@@ -93,6 +136,24 @@
 <style lang="scss" scoped>
     .file-param {
         width: 100%;
+    }
+    .flex-column {
+        display: flex;
+        .file-upload {
+            margin-left: 10px;
+            margin-top: 0;
+            ::v-deep .bk-upload.button {
+                .all-file {
+                    width: 100%;
+                    position: absolute;
+                    right: 0;
+                    top: 0;
+                }
+            }
+        }
+    }
+    .file-input {
+        width: 100%;
         display: flex;
         .path-input {
             border-radius: 2px 0 0 2px;
@@ -102,4 +163,43 @@
             border-left: 0;
         }
     }
+    .is-diff-param {
+        border-color: #FF9C01 !important;
+    }
+    .upload-tips {
+        font-size: 12px;
+    }
+    .file-upload {
+        display: flex;
+        color: #737987;
+        ::v-deep .bk-upload.button {
+            position: static;
+            display: flex;
+            .file-wrapper {
+                margin-bottom: 0;
+                height: 32px;
+                background: white;
+            }
+            p.tip {
+                white-space: nowrap;
+                position: static;
+                margin-left: 8px;
+            }
+            .all-file {
+                width: 100%;
+                position: absolute;
+                right: 0;
+                top: 80;
+                .file-item {
+                    margin-bottom: 0;
+                    &.file-item-fail {
+                        background: rgb(254,221,220);
+                    }
+                }
+                .error-msg {
+                    margin: 0
+                }
+            }
+        }
+    }
 </style>

src/frontend/devops-pipeline/src/components/FileUpload/index.vue

@@ -2,7 +2,6 @@
     <bk-upload
         ref="uploadRef"
         theme="button"
-        :tip="tip"
         :files="files"
         name="file"
         :delay-time="delayTime"
@@ -27,7 +26,6 @@
         },
         data () {
             return {
-                tip: this.$t('sizeLimit', [this.size]),
                 delayTime: 500,
                 files: []
             }

src/frontend/devops-pipeline/src/components/PipelineEditTabs/components/children/param-value-option.vue

@@ -73,7 +73,6 @@
                 :required="valueRequired"
                 :disabled="disabled"
                 :value="param.defaultValue"
-                :upload-file-name="uploadFileName"
                 :handle-change="handleChange"
             />
             <vuex-textarea
@@ -241,17 +240,6 @@
                 ></selector>
             </form-field>
         </template>
-
-        <form-field
-            :hide-colon="true"
-            v-if="isFileParam(param.type)"
-        >
-            <file-upload
-                name="fileName"
-                :file-path="param.defaultValue"
-                @handle-change="(value) => uploadPathFromFileName(value)"
-            ></file-upload>
-        </form-field>
     </section>
 </template>
 
@@ -264,7 +252,6 @@
     import RequestSelector from '@/components/atomFormField/RequestSelector'
     import EnumInput from '@/components/atomFormField/EnumInput'
     import Selector from '@/components/atomFormField/Selector'
-    import FileUpload from '@/components/FileUpload'
     import FileParamInput from '@/components/FileParamInput'
     import validMixins from '@/components/validMixins'
     import {
@@ -309,7 +296,6 @@
             Selector,
             VuexTextarea,
             RequestSelector,
-            FileUpload,
             FileParamInput
         },
         mixins: [validMixins],
@@ -336,8 +322,7 @@
             return {
                 optionList: [],
                 selectDefautVal: '',
-                remoteParamOption: {},
-                uploadFileName: ''
+                remoteParamOption: {}
             }
         },
         computed: {
@@ -498,10 +483,6 @@
                     value = value.join(',')
                 }
                 this.handleUpdateParam(key, value)
-            },
-
-            uploadPathFromFileName (value) {
-                this.uploadFileName = value
             }
         }
     }