..

src/main/resources/static/assets/platform/js/util/commonUtil.js

@@ -221,7 +221,8 @@ const commonUtil = {
             })
             viewer.show()
         } else {
-            this.$message.warning("暂不支持预览该文件，请下载后查看")
+            // this.$message.warning("暂不支持预览该文件，请下载后查看")
+            alert("暂不支持预览该文件，请下载后查看")
         }
     },
 
@@ -317,5 +318,15 @@ function base64ToFile(base64Data, filename) {
     return new File([blob], filename, {type: contentType})
 }
 
+function createLoading(text= '加载中...'){
+    return ELEMENT.Loading.service({
+        lock: true,
+        text: text,
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+    })
+}
+
+
 
 

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

@@ -1,278 +1,293 @@
 <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>
-
-                    <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>
+  <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">{{ calcTitle(row) }}</div>
+              <enum-tag :value="row.instanceState" name="ProcessInstanceStateEnum" label_key="message"
+                        size="small"></enum-tag>
             </div>
-        </van-list>
-    </van-pull-refresh>
+          </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 style="width: 100%">
+              <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
-        },
-        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: ""
-        }
+  name: "TableList",
+  props: {
+    api: {
+      type: String,
+      required: true
     },
-    watch: {
-        page_form: {
-            handler(newVal, oldVal) {
-                this.localPageForm = { ...newVal }
-            },
-            deep: true,
-            immediate: true
-        }
-    },
-    data() {
+    page_form: {
+      type: Object,
+      required: true,
+      default: () => {
         return {
-            tableData: [],
-            tableLoading: false,
-            tableFinished: false,
-            tableRefreshing: false,
-            localPageForm: { ...this.page_form }
+          pageNumber: 1,
+          pageSize: 10,
+          totalCount: 0,
+          searchKeyword: ""
         }
+      }
     },
-    methods: {
-        onLoad() {
-            if (this.tableFinished) return
-            this.localPageForm.pageNumber++
-            this.$emit("update:page_form", { ...this.localPageForm })
-            this.pageData()
-        },
-
-        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 })
-                }
-            }).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()
-        }
+    json: {
+      type: Boolean,
+      default: false
     },
-    mounted() {
-        this.$emit("ready")
+    title: {
+      type: String,
+      default: ""
+    },
+    img: {
+      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: {
+    calcTitle(row) {
+      if (!this.title) return ""
+      // 处理key1.key2.key3 这样的形式
+      const keys = this.title.split(".")
+
+      let val = JSON.parse(JSON.stringify(row));
+      for (let key of keys) {
+        if (val == null || typeof val !== 'object') {
+          return "";
+        }
+        val = val[key];
+      }
+      return val == null ? "" : val;
+    },
+
+    onLoad() {
+      if (this.tableFinished) return
+      this.localPageForm.pageNumber++
+      this.$emit("update:page_form", {...this.localPageForm})
+      this.pageData()
+    },
+
+    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})
+        }
+      }).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")
+  }
 }
 </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;
+  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;
+  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>