commit

src/main/resources/static/components/plugins/h5/TableList.vue

@@ -10,7 +10,7 @@
                   @load="onLoad">
             <div class="table-list-container">
                 <div v-for="(row, index) in tableData" :key="index" class="table-list-item">
-          <slot name="header" :index="index" :row="row">
+                    <slot name="header" :index="index" :row="row" v-if="$slots.header">
                         <div class="item-header">
                             <div class="item-title">{{ row[title] }}</div>
                             <enum-tag :value="row.instanceState" name="ProcessInstanceStateEnum" label_key="message"
@@ -18,8 +18,15 @@
                         </div>
                     </slot>
 
+                    <div style="display: flex;column-gap: 10px"
+                         :style="{'max-height':img ? '100px':'unset', 'overflow': img ? 'hidden':'unset' }">
+                        <div class="img-container" v-if="img">
+                            <img :src="row[img]" alt="" style="object-fit: cover">
+                        </div>
+                        <div class="">
                             <slot :index="index" :row="row"></slot>
-
+                        </div>
+                    </div>
                     <div class="item-actions">
                         <slot name="actions" :index="index" :row="row"></slot>
                     </div>
@@ -54,8 +61,12 @@ module.exports = {
         },
         title: {
             type: String,
-      default: ''
+            default: ""
         },
+        img: {
+            type: String,
+            default: ""
+        }
     },
     watch: {
         page_form: {
@@ -79,7 +90,7 @@ module.exports = {
         onLoad() {
             if (this.tableFinished) return
             this.localPageForm.pageNumber++
-      this.$emit('update:page_form', {...this.localPageForm});
+            this.$emit("update:page_form", { ...this.localPageForm })
             this.pageData()
         },
 
@@ -94,7 +105,7 @@ module.exports = {
                     if (this.tableData.length >= this.localPageForm.totalCount) {
                         this.tableFinished = true
                     }
-          this.$emit('update:page_form', {...this.localPageForm});
+                    this.$emit("update:page_form", { ...this.localPageForm })
                 }
             }).finally(() => {
                 loading.close()
@@ -108,17 +119,17 @@ module.exports = {
             this.tableFinished = false
             this.tableData = []
             this.localPageForm.pageNumber = 1
-      this.$emit('update:page_form', {...this.localPageForm});
+            this.$emit("update:page_form", { ...this.localPageForm })
             this.pageData()
         },
         onRefresh() {
             this.localPageForm.pageNumber = 1
-      this.$emit('update:page_form', {...this.localPageForm});
+            this.$emit("update:page_form", { ...this.localPageForm })
             this.doSearch()
-    },
+        }
     },
     mounted() {
-    this.$emit('ready');
+        this.$emit("ready")
     }
 }
 </script>
@@ -160,6 +171,20 @@ module.exports = {
     padding-right: 10px;
 }
 
+.table-list-container .table-list-item .img-container {
+    width: 100px;
+    height: 100px;
+    flex-shrink: 0;
+    border-radius: 6px;
+}
+
+.table-list-container .table-list-item .img-container img {
+    width: 100%;
+    height: 100%;
+    border-radius: 6px;
+}
+
+
 .table-list-container .table-list-item .item-meta {
     display: flex;
     color: #606266;