From de09420b18796c3fbc0df9a1f876e1c8cb7a8d77 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Thu, 15 May 2025 15:48:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=AC=E5=85=B1=E6=A0=B7=E5=BC=8F=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GlobalLoading1.vue |  98 +++++++++++++++++++++++++++++
 src/components/GuipTable.vue      | 127 +++++++++++++++++++++++++-------------
 src/style/theme/common.scss       |  26 +++++++-
 3 files changed, 207 insertions(+), 44 deletions(-)
 create mode 100644 src/components/GlobalLoading1.vue

diff --git a/src/components/GlobalLoading1.vue b/src/components/GlobalLoading1.vue
new file mode 100644
index 0000000..1f643fa
--- /dev/null
+++ b/src/components/GlobalLoading1.vue
@@ -0,0 +1,98 @@
+<template>
+    <div class="content-loading-overlay" v-if="isLoading">
+        <div class="loading-content">
+            <div ref="animationContainer" class="animation-container"></div>
+        </div>
+    </div>
+    <div v-else>
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+import lottie from 'lottie-web'
+import { mapState } from 'vuex'
+import defaultAnimation from '@/assets/loadingAni.json' // 导入JSON文件
+
+export default {
+    name: 'Loading',
+    data() {
+        return {
+            anim: null
+        }
+    },
+    computed: {
+        ...mapState(['isLoading', 'loadingText'])
+    },
+    watch: {
+        isLoading(newVal) {
+            if (newVal) {
+                this.$nextTick(()=>{
+                    this.playAnimation()
+                })
+            } else {
+                this.stopAnimation()
+            }
+        }
+    },
+    mounted() {
+        if (this.isLoading) {
+            this.playAnimation()
+        }
+    },
+    beforeDestroy() {
+        this.stopAnimation()
+    },
+    methods: {
+        playAnimation() {
+            this.anim = lottie.loadAnimation({
+                container: this.$refs.animationContainer,
+                renderer: 'svg',
+                loop: true,
+                autoplay: true,
+                animationData: defaultAnimation // 你的JSON动画路径
+            })
+            if (this.anim) {
+                this.anim.play()
+            }
+        },
+        stopAnimation() {
+            if (this.anim) {
+                this.anim.stop()
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+.content-loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.8);
+    z-index: 1000;
+    /* 确保高于内容 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.loading-content {
+    text-align: center;
+}
+
+.animation-container {
+    width: 180px;
+    height: 180px;
+    margin: 0 auto;
+}
+
+.loading-text {
+    margin-top: 20px;
+    font-size: 16px;
+    color: #333;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/GuipTable.vue b/src/components/GuipTable.vue
index cda0abf..52d3aec 100644
--- a/src/components/GuipTable.vue
+++ b/src/components/GuipTable.vue
@@ -1,63 +1,79 @@
 <template>
-  <el-table ref="guiptable" :data="tableData" height="250" :border="border" @selection-change="handleSelectionChange"
-    :style="{ width: width ? width : '100%' }">
-    <!-- 多选 -->
-    <template v-if="multiple">
-      <el-table-column type="selection" width="55">
-      </el-table-column>
-    </template>
-    <!-- 自定义header -->
-    <template v-if="autoColumn">
-      <slot name="header"></slot>
-    </template>
-    <!-- 通过json数据遍历渲染 -->
-    <template v-if="columns">
-      <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
-        :width="column.width">
-        <template #default="{ row }" v-if="column.popover">
-          <el-popover :visible="row[`popoverVisible_${column.prop}`]" class="tablePopover" placement="top" trigger="click">
-            <!-- 自定义内容插槽 -->
-            <slot :name="`popover-content-${column.prop}`" :row="row" :column="column">
-              <div>
-                <p>默认内容：{{ `popoverVisible_${column.prop}` }}</p>
-                <el-input v-model="row[`edit_${column.prop}`]" :placeholder="`请输入${column.label}`" />
+  <global-loading>
+    <el-table ref="guiptable" :data="tableData" :border="border" @selection-change="handleSelectionChange"
+      :style="{ width: width ? width : '100%', height: height ? height : '100%' }" v-loading="loading">
+      <!-- 多选 -->
+      <template v-if="multiple">
+        <el-table-column type="selection" width="55">
+        </el-table-column>
+      </template>
+      <!-- 自定义header -->
+      <slot></slot>
+      <!-- <template v-if="autoColumn">
+      <slot name="headerTop"></slot>
+    </template> -->
+      <!-- 通过json数据遍历渲染 -->
+      <template v-if="columns">
+        <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
+          :width="column.width">
+          <template #default="{ row }" v-if="column.popover">
+            <el-popover :visible="row[`popoverVisible_${column.prop}`]" class="tablePopover" placement="top"
+              trigger="click">
+              <!-- 自定义内容插槽 -->
+              <slot :name="`popover-content-${column.prop}`" :row="row" :column="column">
+                <div>
+                  <p>默认内容：{{ `popoverVisible_${column.prop}` }}</p>
+                  <el-input v-model="row[`edit_${column.prop}`]" :placeholder="`请输入${column.label}`" />
+                </div>
+              </slot>
+              <!-- 确定和取消按钮 -->
+              <div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
+                <GuipButton size="medium" @click="handleCancel(row, column.prop)">取消</GuipButton>
+                <GuipButton type="primary" @click="handleConfirm(row, column.prop)" size="medium">确定</GuipButton>
               </div>
-            </slot>
-            <!-- 确定和取消按钮 -->
-            <div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
-              <GuipButton size="medium" @click="handleCancel(row, column.prop)">取消</GuipButton>
-              <GuipButton type="primary" @click="handleConfirm(row, column.prop)" size="medium">确定</GuipButton>
-            </div>
-            <!-- 单元格内容 -->
-            <template #reference>
-              <span style="cursor: pointer">{{ row[column.prop] }}</span>
-            </template>
-          </el-popover>
-        </template>
+              <!-- 单元格内容 -->
+              <template #reference>
+                <span style="cursor: pointer">{{ row[column.prop] }}</span>
+              </template>
+            </el-popover>
+          </template>
 
-      </el-table-column>
-    </template>
+        </el-table-column>
+      </template>
+      <template #empty>
+        <!-- <div v-if="loading">
+          <i class="el-icon-loading"></i>
+          <span>数据加载中...</span>
+        </div> -->
+        <!-- <div class="custom-empty">
+          <img src="@/assets/table_empty.png" alt="无数据" class="empty-image">
+          <p class="empty-text">暂无数据</p>
+        </div> -->
+        <el-empty :image="emptyImg"></el-empty>
+      </template>
+    </el-table>
+  </global-loading>
 
-
-
-  </el-table>
 </template>
 
 <script>
 import GuipButton from '@/components/GuipButton.vue';
+import GlobalLoading from '@/components/GlobalLoading1.vue'
 
 export default {
   name: 'GuipTextarea',
-  props: ['tableData', 'width', 'autoColumn', 'columns', 'border', 'multiple'],
+  props: ['tableData', 'loading', 'width', 'height', 'autoColumn', 'columns', 'border', 'multiple'],
   data() {
     return {
-
+      emptyImg:require('@/assets/table_empty.png')
+      // loading:false
     }
   },
   components: {
-    GuipButton
+    GuipButton,
+    GlobalLoading
   },
-  mounted(){
+  mounted() {
   },
   methods: {
     handleSelectionChange(row) {
@@ -83,4 +99,29 @@ export default {
 }
 </script>
 <style scoped>
+.custom-empty {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.empty-image {
+  width: 160px;
+  height: 160px;
+}
+
+.empty-text {
+  color: #626573;
+  letter-spacing: 0.08em;
+  height: 18px;
+  line-height: 18px;
+}
+.el-empty{
+  padding: 0;
+}
+::v-deep .el-empty__description{
+  line-height: 20px;
+  margin-top: 0;
+}
 </style>
\ No newline at end of file
diff --git a/src/style/theme/common.scss b/src/style/theme/common.scss
index 686023e..0cdb989 100644
--- a/src/style/theme/common.scss
+++ b/src/style/theme/common.scss
@@ -638,6 +638,20 @@ body {
 
 
 // table start
+.el-table{
+    min-height: 258px;
+    th,td{
+        font-size: 14px;
+        font-weight: normal;
+        letter-spacing: 0.08em;
+        color: #1E2226;
+        height: 56px;
+        padding: 18px 16px !important;
+        box-sizing: border-box !important;
+    }
+    td{
+    }
+}
 .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
     background-color: #F6F7FA;
 }
@@ -674,12 +688,22 @@ body {
     padding-left: 16px;
     padding-right: 16px;
 }
-
 .el-table .el-form-item {
     margin-bottom: 0;
 }
 
+// 表格行内小图标 默认隐藏
+.svg-icon-wrapper{
+    display: none !important;
+}
+  //划过时 显示
+.el-table__row:hover{
+    .svg-icon-wrapper{
+        display: block !important;
+    }
+}
 // table end
+
 .el-pagination {
     margin-top: 16px;
     display: flex;