From 8c21833204c3738c792e394e63067e9e41073807 Mon Sep 17 00:00:00 2001
From: "@jyuhsin" <729757837@qq.com>
Date: Fri, 12 Sep 2025 11:22:58 +0800
Subject: [PATCH] commit

---
 .../components/plugins/h5/TableList.vue       | 389 ++++++++++--------
 1 file changed, 207 insertions(+), 182 deletions(-)

diff --git a/src/main/resources/static/components/plugins/h5/TableList.vue b/src/main/resources/static/components/plugins/h5/TableList.vue
index eca9b7cd..b07e5ca6 100644
--- a/src/main/resources/static/components/plugins/h5/TableList.vue
+++ b/src/main/resources/static/components/plugins/h5/TableList.vue
@@ -1,253 +1,278 @@
 <template>
-  <van-pull-refresh v-model="tableRefreshing" @refresh="onRefresh">
-    <div v-if="tableData.length === 0" class="empty-state">
-      <van-empty description="暂无数据"></van-empty>
-    </div>
-    <van-list v-if="tableData && tableData.length>0"
-              v-model="tableLoading"
-              :finished="tableFinished"
-              finished-text=""
-              @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">
-            <div class="item-header">
-              <div class="item-title">{{ row[title] }}</div>
-              <enum-tag :value="row.instanceState" name="ProcessInstanceStateEnum" label_key="message"
-                        size="small"></enum-tag>
-            </div>
-          </slot>
-
-          <slot :index="index" :row="row"></slot>
-
-          <div class="item-actions">
-            <slot name="actions" :index="index" :row="row"></slot>
-          </div>
+    <van-pull-refresh v-model="tableRefreshing" @refresh="onRefresh">
+        <div v-if="tableData.length === 0" class="empty-state">
+            <van-empty description="暂无数据"></van-empty>
         </div>
-      </div>
-    </van-list>
-  </van-pull-refresh>
+        <van-list v-if="tableData && tableData.length>0"
+                  v-model="tableLoading"
+                  :finished="tableFinished"
+                  finished-text=""
+                  @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" 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"
+                                      size="small"></enum-tag>
+                        </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>
+                </div>
+            </div>
+        </van-list>
+    </van-pull-refresh>
 </template>
 <script>
 module.exports = {
-  name: "TableList",
-  props: {
-    api: {
-      type: String,
-      required: true
+    name: "TableList",
+    props: {
+        api: {
+            type: String,
+            required: true
+        },
+        page_form: {
+            type: Object,
+            required: true,
+            default: () => {
+                return {
+                    pageNumber: 1,
+                    pageSize: 10,
+                    totalCount: 0,
+                    searchKeyword: ""
+                }
+            }
+        },
+        json: {
+            type: Boolean,
+            default: false
+        },
+        title: {
+            type: String,
+            default: ""
+        },
+        img: {
+            type: String,
+            default: ""
+        }
     },
-    page_form: {
-      type: Object,
-      required: true,
-      default: () => {
+    watch: {
+        page_form: {
+            handler(newVal, oldVal) {
+                this.localPageForm = { ...newVal }
+            },
+            deep: true,
+            immediate: true
+        }
+    },
+    data() {
         return {
-          pageNumber: 1,
-          pageSize: 10,
-          totalCount: 0,
-          searchKeyword: ""
+            tableData: [],
+            tableLoading: false,
+            tableFinished: false,
+            tableRefreshing: false,
+            localPageForm: { ...this.page_form }
         }
-      }
-    },
-    json: {
-      type: Boolean,
-      default: false
-    },
-    title: {
-      type: String,
-      default: ''
-    },
-  },
-  watch: {
-    page_form: {
-      handler(newVal, oldVal) {
-        this.localPageForm = {...newVal}
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  data() {
-    return {
-      tableData: [],
-      tableLoading: false,
-      tableFinished: false,
-      tableRefreshing: false,
-      localPageForm: {...this.page_form}
-    }
-  },
-  methods: {
-    onLoad(){
-      if (this.tableFinished) return
-      this.localPageForm.pageNumber++
-      this.$emit('update:page_form', {...this.localPageForm});
-      this.pageData()
     },
+    methods: {
+        onLoad() {
+            if (this.tableFinished) return
+            this.localPageForm.pageNumber++
+            this.$emit("update:page_form", { ...this.localPageForm })
+            this.pageData()
+        },
 
-    pageData() {
-      this.tableLoading = true
+        pageData() {
+            this.tableLoading = true
 
-      const loading = createListLoading()
-      this.$axios.post(this.api, this.json ? ({pageForm: JSON.stringify(this.localPageForm)}) : this.localPageForm).then((res) => {
-        if (res.code === 0) {
-          this.tableData = this.tableData.concat(res.data.list)
-          this.localPageForm.totalCount = res.data.totalCount
-          if (this.tableData.length >= this.localPageForm.totalCount) {
-            this.tableFinished = true
-          }
-          this.$emit('update:page_form', {...this.localPageForm});
+            const loading = createListLoading()
+            this.$axios.post(this.api, this.json ? ({ pageForm: JSON.stringify(this.localPageForm) }) : this.localPageForm).then((res) => {
+                if (res.code === 0) {
+                    this.tableData = this.tableData.concat(res.data.list)
+                    this.localPageForm.totalCount = res.data.totalCount
+                    if (this.tableData.length >= this.localPageForm.totalCount) {
+                        this.tableFinished = true
+                    }
+                    this.$emit("update:page_form", { ...this.localPageForm })
+                }
+            }).finally(() => {
+                loading.close()
+                console.log(this.tableLoading)
+                this.tableLoading = false
+                console.log(this.tableLoading)
+                this.tableRefreshing = false
+            })
+        },
+        doSearch() {
+            this.tableFinished = false
+            this.tableData = []
+            this.localPageForm.pageNumber = 1
+            this.$emit("update:page_form", { ...this.localPageForm })
+            this.pageData()
+        },
+        onRefresh() {
+            this.localPageForm.pageNumber = 1
+            this.$emit("update:page_form", { ...this.localPageForm })
+            this.doSearch()
         }
-      }).finally(() => {
-        loading.close()
-        console.log(this.tableLoading)
-        this.tableLoading = false
-        console.log(this.tableLoading)
-        this.tableRefreshing = false
-      })
     },
-    doSearch() {
-      this.tableFinished = false
-      this.tableData = []
-      this.localPageForm.pageNumber = 1
-      this.$emit('update:page_form', {...this.localPageForm});
-      this.pageData()
-    },
-    onRefresh() {
-      this.localPageForm.pageNumber = 1
-      this.$emit('update:page_form', {...this.localPageForm});
-      this.doSearch()
-    },
-  },
-  mounted() {
-    this.$emit('ready');
-  }
+    mounted() {
+        this.$emit("ready")
+    }
 }
 </script>
 
 <style scoped>
 .table-list-container {
-  padding: 0;
-  margin-top: 10px;
+    padding: 0;
+    margin-top: 10px;
 }
 
 .table-list-container .table-list-item {
-  background-color: #fff;
-  border-bottom: 1px solid #eaecef;
-  padding: 16px;
-  position: relative;
-  margin-bottom: 10px;
+    background-color: #fff;
+    border-bottom: 1px solid #eaecef;
+    padding: 16px;
+    position: relative;
+    margin-bottom: 10px;
 }
 
 .table-list-container .table-list-item:last-child {
-  border-bottom: none;
-  margin-bottom: 0;
+    border-bottom: none;
+    margin-bottom: 0;
 }
 
 .table-list-container .table-list-item .item-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 10px;
 }
 
 .table-list-container .table-list-item .item-title {
-  font-size: 16px;
-  font-weight: 500;
-  color: #1f2f3d;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  padding-right: 10px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #1f2f3d;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    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;
-  font-size: 14px;
-  margin-bottom: 5px;
-  padding: 4px 0;
+    display: flex;
+    color: #606266;
+    font-size: 14px;
+    margin-bottom: 5px;
+    padding: 4px 0;
 }
 
 .table-list-container .table-list-item .meta-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
 }
 
 .table-list-container .table-list-item .meta-item i {
-  font-size: 14px;
-  color: #909399;
-  width: 16px;
-  text-align: center;
+    font-size: 14px;
+    color: #909399;
+    width: 16px;
+    text-align: center;
 }
 
 .table-list-container .table-list-item .item-content {
-  color: #606266;
-  font-size: 14px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  line-height: 1.5;
+    color: #606266;
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    line-height: 1.5;
 }
 
 .table-list-container .table-list-item .item-footer {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 12px;
-  padding-top: 8px;
-  border-top: 1px dashed #eaecef;
-  color: #909399;
-  font-size: 13px;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 12px;
+    padding-top: 8px;
+    border-top: 1px dashed #eaecef;
+    color: #909399;
+    font-size: 13px;
 }
 
 .table-list-container .table-list-item .item-actions {
-  display: flex;
-  column-gap: 20px;
-  justify-content: end;
-  margin-top: 15px;
-  padding-top: 12px;
-  border-top: 1px solid #eaecef;
+    display: flex;
+    column-gap: 20px;
+    justify-content: end;
+    margin-top: 15px;
+    padding-top: 12px;
+    border-top: 1px solid #eaecef;
 }
 
 .table-list-container .table-list-item .action-btn {
-  display: flex;
-  align-items: center;
-  justify-content: end;
-  font-size: 14px;
-  color: var(--color-primary);
-  padding: 4px 0;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    font-size: 14px;
+    color: var(--color-primary);
+    padding: 4px 0;
 }
 
 .table-list-container .table-list-item .action-btn i {
-  margin-right: 6px;
-  font-size: 16px;
+    margin-right: 6px;
+    font-size: 16px;
 }
 
 .table-list-container .table-list-item .action-btn.delete {
-  color: #ff0000;
+    color: #ff0000;
 }
 
 .table-list-container .table-list-item .action-btn.review {
-  color: #67c23a;
+    color: #67c23a;
 }
 
 .table-list-container .empty-state {
-  text-align: center;
-  padding: 60px 20px;
-  color: #909399;
+    text-align: center;
+    padding: 60px 20px;
+    color: #909399;
 }
 
 .table-list-container .empty-state i {
-  font-size: 60px;
-  margin-bottom: 16px;
-  color: #dcdee0;
+    font-size: 60px;
+    margin-bottom: 16px;
+    color: #dcdee0;
 }
 
 .table-list-container .empty-state p {
-  margin-top: 10px;
-  font-size: 14px;
+    margin-top: 10px;
+    font-size: 14px;
 }
 </style>