子表图片组件增加省略配置及显示方式在各模式下修改

src/business/platform/file/image/index.vue

@@ -5,38 +5,73 @@
             <vue-draggable
                 v-if="fileList && fileList.length"
                 v-model="fileList"
-                v-bind="draggableOptions"
+                v-bind="draggableBindOptions"
                 class="list-group"
                 @start="isDragging = true"
                 @end="()=>{isDragging= false}"
             >
-                <li
-                    v-for="(item, index) in fileList"
-                    :key="index"
-                    class="image-reader-item"
-                    :style="{
-                        'backgroundImage': 'url(' + getImageUrl(item.id) + ')',
-                        'backgroundPosition': 'center center',
-                        'backgroundRepeat': 'no-repeat',
-                        'backgroundSize': 'cover',
-                        'width': `${$utils.isEmpty(width) ? 100 : width}px`,
-                        'height': `${$utils.isEmpty(height) ? 100 : height}px`
-                    }"
-                    @click="clickHandler(item, index)"
-                    @mouseover="showTips(item, index)"
-                    @mouseout="hideTips(item, index)"
-                >
-                    <el-tag v-if="!disabled" class="image-reader-item-tag" @click.stop="onDeleteImage(index)">
-                        <i class="el-icon-delete" />
-                    </el-tag>
-                    <el-tag v-if="!disabled" class="image-reader-item-tag" @click.stop="onDownloadImage(index)">
-                        <i class="el-icon-download" />
-                    </el-tag>
-                    <el-tag v-if="!disabled" class="image-reader-item-tag draggable" @click.stop="onDownloadImage(index)">
-                        <i class="el-icon-rank" />
-                    </el-tag>
-                    <div :class="{ 'image-tip-visible': item.uid !== uid, 'image-tip': item.uid === uid }" v-text="tip" />
-                </li>
+                <template v-if="isEllipsis">
+                    <li class="image-reader-item image-reader-item--ellipsis">
+                        <div
+                            class="image-reader-item-thumb"
+                            :style="getItemStyle(0)"
+                            @click="clickHandler(fileList[0], 0)"
+                            @mouseover="showTips(fileList[0], 0)"
+                            @mouseout="hideTips(fileList[0], 0)"
+                        >
+                            <el-tag v-if="!disabled" class="image-reader-item-tag" @click.stop="onDeleteImage(0)">
+                                <i class="el-icon-delete" />
+                            </el-tag>
+                            <el-tag v-if="!disabled" class="image-reader-item-tag" @click.stop="onDownloadImage(0)">
+                                <i class="el-icon-download" />
+                            </el-tag>
+                            <el-tag v-if="!disabled" class="image-reader-item-tag draggable" @click.stop="onDownloadImage(0)">
+                                <i class="el-icon-rank" />
+                            </el-tag>
+                            <div :class="{ 'image-tip-visible': fileList[0].uid !== uid, 'image-tip': fileList[0].uid === uid }" v-text="tip" />
+                        </div>
+                        <div v-if="ellipsisFileList.length" class="image-reader-item-filenames">
+                            <div
+                                v-for="(item, index) in ellipsisFileList"
+                                :key="index + 1"
+                                class="image-reader-item-filename-row"
+                                @click.stop="clickHandler(item, index + 1)"
+                            >
+                                <span class="image-reader-item-filename" :title="getFileName(item)">{{ getFileName(item) }}</span>
+                                <span v-if="!disabled" class="image-reader-item-filename-actions">
+                                    <el-tag class="image-reader-item-tag" @click.stop="onDeleteImage(index + 1)">
+                                        <i class="el-icon-delete" />
+                                    </el-tag>
+                                    <el-tag class="image-reader-item-tag" @click.stop="onDownloadImage(index + 1)">
+                                        <i class="el-icon-download" />
+                                    </el-tag>
+                                </span>
+                            </div>
+                        </div>
+                    </li>
+                </template>
+                <template v-else>
+                    <li
+                        v-for="(item, index) in fileList"
+                        :key="index"
+                        class="image-reader-item"
+                        :style="getItemStyle(index)"
+                        @click="clickHandler(item, index)"
+                        @mouseover="showTips(item, index)"
+                        @mouseout="hideTips(item, index)"
+                    >
+                        <el-tag v-if="!disabled" class="image-reader-item-tag" @click.stop="onDeleteImage(index)">
+                            <i class="el-icon-delete" />
+                        </el-tag>
+                        <el-tag v-if="!disabled" class="image-reader-item-tag" @click.stop="onDownloadImage(index)">
+                            <i class="el-icon-download" />
+                        </el-tag>
+                        <el-tag v-if="!disabled" class="image-reader-item-tag draggable" @click.stop="onDownloadImage(index)">
+                            <i class="el-icon-rank" />
+                        </el-tag>
+                        <div :class="{ 'image-tip-visible': item.uid !== uid, 'image-tip': item.uid === uid }" v-text="tip" />
+                    </li>
+                </template>
             </vue-draggable>
         </ul>
         <template v-if="!disabled && (isBuilder || fileList.length < limit || !limit)">
@@ -145,6 +180,10 @@ export default {
             type: String,
             default: 'attachment'
         },
+        isEllipsis: { // 是否省略显示
+            type: Boolean,
+            default: false
+        },
         store: {
             type: String,
             default: 'json',
@@ -194,6 +233,12 @@ export default {
         }
     },
     computed: {
+        draggableBindOptions () {
+            return {
+                ...this.draggableOptions,
+                disabled: this.isEllipsis || this.disabled
+            }
+        },
         flieLimit () {
             return this.$utils.isNotEmpty(this.limit) ? parseInt(this.limit) : null
         },
@@ -218,6 +263,12 @@ export default {
                 'lineHeight': `${this.$utils.isEmpty(height) ? 100 : height}px`,
                 'display': 'inline'
             }
+        },
+        ellipsisFileList () {
+            if (!this.isEllipsis || this.$utils.isEmpty(this.fileList) || this.fileList.length <= 1) {
+                return []
+            }
+            return this.fileList.slice(1)
         }
     },
     watch: {
@@ -518,6 +569,21 @@ export default {
         },
         getImageUrl (id) {
             return previewFile(id)
+        },
+        getFileName (item) {
+            const id = item[this.valueKey]
+            const source = this.cacheData[id] || item
+            return source[this.labelKey] || source.fileName || source.name || ''
+        },
+        getItemStyle (index) {
+            return {
+                'backgroundImage': 'url(' + this.getImageUrl(this.fileList[index].id) + ')',
+                'backgroundPosition': 'center center',
+                'backgroundRepeat': 'no-repeat',
+                'backgroundSize': 'cover',
+                'width': `${this.$utils.isEmpty(this.width) ? 100 : this.width}px`,
+                'height': `${this.$utils.isEmpty(this.height) ? 100 : this.height}px`
+            }
         }
     }
 }
@@ -569,6 +635,58 @@ export default {
                 font-size: 12px;
                 width: 100%;
             }
+            &--ellipsis {
+                float: none;
+                width: auto;
+                height: auto;
+                margin-bottom: 4px;
+                margin-right: 0;
+                padding-bottom: 0;
+                background: none;
+                box-shadow: none;
+                overflow: visible;
+                .image-reader-item-thumb {
+                    position: relative;
+                    background: #FFF;
+                    box-shadow: 0 5px 20px rgba(197, 202, 213, .25);
+                    border-radius: 4px;
+                    overflow: hidden;
+                }
+                .image-reader-item-filenames {
+                    margin-top: 4px;
+                }
+                .image-reader-item-filename-row {
+                    display: flex;
+                    align-items: center;
+                    min-height: 28px;
+                    margin-bottom: 2px;
+                    padding: 2px 8px;
+                    background: #f5f7fa;
+                    border-radius: 2px;
+                    cursor: pointer;
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+                .image-reader-item-filename {
+                    flex: 1;
+                    font-size: 12px;
+                    color: #606266;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    line-height: 24px;
+                }
+                .image-reader-item-filename-actions {
+                    flex-shrink: 0;
+                    margin-left: 4px;
+                    .image-reader-item-tag {
+                        float: none;
+                        display: inline-block;
+                        margin-left: 2px;
+                    }
+                }
+            }
         }
     }
 </style>

src/business/platform/form/constants/fieldTypes.js

@@ -786,6 +786,7 @@ const fieldTypes = {
                 accept: '',
                 multiple: true,
                 uploadType: 'attachment',
+                is_ellipsis: false,
                 required: false,
                 hide_rights: false,
                 read_rights: false,

src/business/platform/form/formbuilder/constants/helpTip.js

@@ -301,6 +301,13 @@ export default {
     title: '关于提示信息',
     content: ` 此属性用于设置选中图片中显示的信息。`
   },
+  imageEllipsis: {
+    title: '关于是否省略显示',
+    content: ` 此属性用于控制多图时的展示方式。</br>
+            【开启】：第一张图片正常显示，其余图片以文件名形式展示在其下方；</br>
+            【关闭】：所有图片均正常显示。</br>
+            【注意】：子表块状模式、编辑对话框内不生效，始终完整展示。`
+  },
 
   // =====================个性参数属性-选择器=====================
   selectorType: {

src/business/platform/form/formbuilder/form-main/widget-form-field.vue

@@ -272,6 +272,7 @@
             :tip="fieldOptions.tip"
             :size="fieldOptions.size"
             :upload-type="fieldOptions.uploadType"
+            :is-ellipsis="$utils.toBoolean(fieldOptions.is_ellipsis, false)"
         />
         <!-- =======================系统字段==============================-->
         <!-- 当前用户-->

src/business/platform/form/formbuilder/right-aside/editors/editor-field-image.vue

@@ -60,6 +60,10 @@
         <template slot="label">提示信息<help-tip prop="imagePlaceholder" /></template>
         <el-input v-model="fieldOptions.tip" rows="3" placeholder="" type="textarea" />
       </el-form-item>
+      <el-form-item>
+        <template slot="label">省略显示<help-tip prop="imageEllipsis" /></template>
+        <el-switch v-model="fieldOptions.is_ellipsis" />
+      </el-form-item>
     </div>
   </div>
 </template>
@@ -75,6 +79,14 @@ export default {
       uploadTypeOptions: uploadTypeOptions
     }
   },
+  created() {
+    if (this.$utils.isEmpty(this.fieldItem.field_options)) {
+      this.$set(this.fieldItem, 'field_options', {})
+    }
+    if (this.fieldItem.field_options.is_ellipsis === undefined) {
+      this.$set(this.fieldItem.field_options, 'is_ellipsis', false)
+    }
+  },
   methods: {
     changeImageSet(val, property) {
       const imagePropertyValue = parseInt(val)

src/business/platform/form/formbuilder/right-aside/field-types/ibps-field-image.vue

@@ -19,6 +19,7 @@
             :tip="fieldOptions.tip"
             :size="fieldOptions.size"
             :upload-type="fieldOptions.uploadType"
+            :is-ellipsis="$utils.toBoolean(fieldOptions.is_ellipsis, false)"
           />
         </template>
       </editor-base>

src/business/platform/form/formbuilder/utils/generateCode.js

@@ -1063,6 +1063,7 @@ function generateFieldTemplate(field, prop) {
         tip="${Utils.isNotEmpty(fieldOptions.tip) ? fieldOptions.tip : ''}"
         size="${Utils.isNotEmpty(fieldOptions.size) ? fieldOptions.size : ''}"
         upload-type="${Utils.isNotEmpty(fieldOptions.uploadType) ? fieldOptions.uploadType : ''}"
+        :is-ellipsis="${fieldOptions.is_ellipsis ? true : false}"
         :disabled="readonly"
       />
     `

src/business/platform/form/formrender/dynamic-form/dynamic-form-field.vue

@@ -490,6 +490,7 @@
             :tip="fieldOptions.tip"
             :size="fieldOptions.size"
             :upload-type="fieldOptions.uploadType"
+            :is-ellipsis="imageEllipsis"
             :disabled="readonly"
             v-on="$listeners"
         />
@@ -630,6 +631,10 @@
                 type: Boolean,
                 default: false
             },
+            isSubTableField: {
+                type: Boolean,
+                default: false
+            },
             // 所有字段数据,(包含主主子表)
             formData: [Object, Array],
             field: {
@@ -675,6 +680,16 @@
             fieldOptions() {
                 return this.field.field_options || {}
             },
+            imageEllipsis() {
+                if (!this.$utils.toBoolean(this.fieldOptions.is_ellipsis, false)) {
+                    return false
+                }
+                // 子表编辑对话框、块状模式内不省略
+                if ((this.params && this.params.isDialog) || this.isSubTableField) {
+                    return false
+                }
+                return true
+            },
             width() {
                 return this.fieldOptions.is_width ? (this.fieldOptions.width || 100) + (this.fieldOptions.width_unit || '%') : '100%'
             },

src/business/platform/form/formrender/dynamic-form/dynamic-form-item.vue

@@ -58,6 +58,7 @@
                     :row="row"
                     :code="code"
                     :params="params"
+                    :is-sub-table-field="isSubTableField"
                     v-on="listeners"
                 />
                 <!-- ######描述属性###### -->
@@ -179,6 +180,9 @@ export default {
         readonlyStyle () {
             return this.params.readonlyStyle
         },
+        isSubTableField () {
+            return this.$utils.isNotEmpty(this.row)
+        },
         formula () {
             return this.params.responseFormula
         },

src/business/platform/form/formrender/dynamic-form/dynamic-form-table-item.vue

@@ -29,6 +29,7 @@
             :readonly="readonly"
             :params="params"
             :is-table="true"
+            :is-sub-table-field="false"
             v-on="listeners"
         />
         <div

src/business/platform/form/formrender/dynamic-form/dynamic-form-table.vue

@@ -44,9 +44,10 @@
                             <el-table-column
                                 v-if="!columnHidden(column) && column.field_type != 'desc' && column.label != ''"
                                 :key="j"
-                                show-overflow-tooltip
+                                :show-overflow-tooltip="!isImageEllipsisColumn(column)"
                                 :prop="column.name"
                                 :width="column.field_options.custom_class || null"
+                                :class-name="isImageEllipsisColumn(column) ? 'dynamic-form-table__image-ellipsis' : ''"
                             >
                                 <template slot="header">
                                     {{ $utils.isNotEmpty(column.field_options.units) ? column.label + '(' + column.field_options.units + ')' : column.label }}
@@ -509,6 +510,9 @@ export default {
     },
     methods: {
         getShowData,
+        isImageEllipsisColumn (column) {
+            return column.field_type === 'image' && this.$utils.toBoolean(column.field_options.is_ellipsis, false)
+        },
         indexMethod (index) {
             return (this.currentPage - 1) * this.pageSize + index + 1
         },
@@ -1222,6 +1226,12 @@ export default {
         .panel-body {
             padding: 0;
         }
+        ::v-deep .dynamic-form-table__image-ellipsis {
+            .cell {
+                overflow: visible;
+                white-space: normal;
+            }
+        }
     }
 
     .dynamic-form-table__block {

src/business/platform/form/formrender/dynamic-form/dynamic-form.vue

@@ -249,7 +249,8 @@
                     labelSuffix: this.labelSuffix,
                     descPosition: this.descPosition,
                     formAttrs: this.formAttrs,
-                    invalidFields: this.invalidFields
+                    invalidFields: this.invalidFields,
+                    isDialog: this.isDialog
                 }
                 return Object.assign(params, this.params)
             }