update:表格优化

src/assets/styles/elementPlus.scss

@@ -17,6 +17,11 @@
     cursor: pointer;
   }
 }
+.el-dialog {
+  .el-dialog__footer {
+    text-align: center;
+  }
+}
 .el-upload {
   width: 100%;
   justify-content: flex-start;

src/components/common/dialog/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="comp-content">
-    <!-- <el-dialog
+    <el-dialog
       :title="diaTitle"
       @open="openFun"
       v-bind="$attrs"
@@ -8,8 +8,8 @@
       <template v-for="(name) in Object.keys($slots)" :key="name" #[name]="scope">
         <slot :name="name" v-bind="scope" />
       </template>
-    </el-dialog> -->
-    <vxe-modal
+    </el-dialog>
+    <!-- <vxe-modal
       :title="diaTitle"
       show-zoom
       resize
@@ -18,7 +18,7 @@
       <template v-for="(name) in Object.keys($slots)" :key="name" #[name]="scope">
         <slot :name="name" v-bind="scope" />
       </template>
-    </vxe-modal>
+    </vxe-modal> -->
   </div>
 </template>
 
@@ -31,8 +31,8 @@ withDefaults(defineProps<Props>(), {
   diaTitle: '',
 });
 
-// const emit = defineEmits(['show']);
-// const openFun = () => { // 兼容vxe-modal
-//   emit('show');
-// };
+const emit = defineEmits(['show']);
+const openFun = () => { // 兼容vxe-modal
+  emit('show');
+};
 </script>

src/components/common/table/baseTable.vue

@@ -102,13 +102,15 @@
                 </el-link>
               </template>
               <el-dropdown v-if="visibleNum(row) > 2">
-                <el-icon>
+                <el-icon class="more-icon">
                   <MoreFilled />
                 </el-icon>
                 <template #dropdown>
                   <el-dropdown-menu>
                     <template v-for="(action, aIndex) in actionList" :key="aIndex">
-                      <el-dropdown-item v-if="!(action.hide && action.hide(row)) && (aIndex >= visibleIndex(row))" @click="actionClickFun(row, action)">{{ action.title }}</el-dropdown-item>
+                      <el-dropdown-item v-if="!(action.hide && action.hide(row)) && (aIndex >= visibleIndex(row))" @click="actionClickFun(row, action)">
+                        <el-link :type="action.type">{{ action.title }}</el-link>
+                      </el-dropdown-item>
                     </template>
                   </el-dropdown-menu>
                 </template>
@@ -230,7 +232,7 @@ watch(() => props.actionList, (list: any) => {
     }
   });
   if (list.length > 2) {
-    width += 20; // 更多宽度
+    width += 30; // 更多宽度
   }
   actionAutoWidth.value = width;
 }, { immediate: true });
@@ -466,7 +468,7 @@ defineExpose({
   .actions {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-start;
     &::after {
       content: '';
       position: absolute;
@@ -480,6 +482,9 @@ defineExpose({
     .action-item {
       padding: 0 4px;
     }
+    .more-icon {
+      margin-left: 10px;
+    }
   }
   .pagination {
     width: 100%;

src/components/common/table/tableFormDia.vue

@@ -6,6 +6,7 @@
       top="2vh"
       width="80%"
       height="80%"
+      body-class="table-form-dia"
       show-footer
       @close="closeFun"
     >
@@ -244,6 +245,12 @@ const closeFun = () => {
 };
 </script>
 
+<style lang="scss">
+.table-form-dia {
+  height: 75vh;
+}
+</style>
+
 <style lang="scss" scoped>
 .comp-content {
   .content {

src/components/common/table/treeTable.vue

@@ -139,13 +139,15 @@
                 </el-link>
               </template>
               <el-dropdown v-if="visibleNum(row) > 2">
-                <el-icon>
+                <el-icon class="more-icon">
                   <MoreFilled />
                 </el-icon>
                 <template #dropdown>
                   <el-dropdown-menu>
                     <template v-for="(action, aIndex) in actionList" :key="aIndex">
-                      <el-dropdown-item v-if="!(action.hide && action.hide(row)) && (aIndex >= visibleIndex(row))" @click="actionClickFun(row, action)">{{ action.title }}</el-dropdown-item>
+                      <el-dropdown-item v-if="!(action.hide && action.hide(row)) && (aIndex >= visibleIndex(row))" @click="actionClickFun(row, action)">
+                        <el-link :type="action.type">{{ action.title }}</el-link>
+                      </el-dropdown-item>
                     </template>
                   </el-dropdown-menu>
                 </template>
@@ -254,7 +256,7 @@ watch(() => props.actionList, (list: any) => {
     }
   });
   if (list.length > 2) {
-    width += 20; // 更多宽度
+    width += 30; // 更多宽度
   }
   actionAutoWidth.value = width;
 }, { immediate: true });
@@ -541,7 +543,7 @@ defineExpose({
   .actions {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-start;
     &::after {
       content: '';
       position: absolute;
@@ -555,6 +557,9 @@ defineExpose({
     .action-item {
       padding: 0 4px;
     }
+    .more-icon {
+      margin-left: 10px;
+    }
   }
   .table {
     width: 100%;

src/components/common/uploadList/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="comp-upload-list">
+    <!-- <div class="btn" @click="listVisible = true">
+      <el-icon :size="22">
+        <Upload />
+      </el-icon>
+    </div> -->
+    <el-drawer
+      title="上传列表"
+      v-model="listVisible"
+      size="400"
+    >
+      <div class="content">
+        <div class="list">
+          <div class="item">
+            <div class="icon">
+              <el-icon :size="24">
+                <Document />
+              </el-icon>
+            </div>
+            <div class="main">
+              <div class="name">文件名称文件名称文件名称文件名称.pdf</div>
+              <div class="progress">
+                <el-progress :show-text="false" :percentage="100" :stroke-width="5" status="format" />
+              </div>
+            </div>
+            <div class="options">
+              <el-icon :size="16">
+                <Delete />
+              </el-icon>
+            </div>
+          </div>
+          <div class="item">
+            <div class="icon">
+              <el-icon :size="24">
+                <Document />
+              </el-icon>
+            </div>
+            <div class="main">
+              <div class="name">文件名称文件名称文件名称文件名称.pdf</div>
+              <div class="progress">
+                <el-progress :show-text="false" :percentage="100" :stroke-width="5" status="success" />
+              </div>
+            </div>
+            <div class="options">
+              <el-icon :size="16">
+                <Delete />
+              </el-icon>
+            </div>
+          </div>
+          <div class="item">
+            <div class="icon">
+              <el-icon :size="24">
+                <Document />
+              </el-icon>
+            </div>
+            <div class="main">
+              <div class="name">文件名称文件名称文件名称文件名称.pdf</div>
+              <div class="progress">
+                <el-progress :show-text="false" :percentage="90" :stroke-width="5" status="exception" />
+              </div>
+            </div>
+            <div class="options">
+              <el-icon :size="16">
+                <Delete />
+              </el-icon>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+  // Upload,
+  Document, Delete } from '@element-plus/icons-vue';
+
+const listVisible = ref(false);
+</script>
+
+<style lang="scss" scoped>
+.comp-upload-list {
+  .btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    width: 40px;
+    height: 40px;
+    background-color: var(--el-color-primary);
+    box-shadow: 0 0 10px var(--el-text-color-primary);
+    border-radius: 50%;
+    z-index: 999;
+    color: var(--el-bg-color);
+    cursor: pointer;
+  }
+  .content {
+    .list {
+      .item {
+        display: flex;
+        border-bottom: solid 1px var(--el-border-color);
+        padding: 10px 0;
+        .icon {
+          color: var(--el-color-primary);
+          width: 25px;
+          height: 25px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .main {
+          padding: 0 10px;
+          flex: 1;
+          .name {
+            font-size: 12px;
+            height: 20px;
+            line-height: 20px;
+          }
+          .progress {
+            height: 5px;
+          }
+        }
+        .options {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: var(--el-color-danger);
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>

src/layouts/cid.vue

@@ -6,12 +6,14 @@
         <div v-else class="loading" v-loading="loading" />
       </div>
     </div>
+    <UploadList />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { getAllDictDataFun } from '@/utils/common';
+import UploadList from '@/components/common/uploadList/index.vue';
 
 const w: any = window;
 const $wujie: any = w.$wujie;

src/layouts/default.vue

@@ -15,6 +15,7 @@
         <div v-else class="loading" v-loading="loading" />
       </div>
     </div>
+    <UploadList />
   </div>
 </template>
 
@@ -23,6 +24,7 @@ import { ref, onMounted } from 'vue';
 import Aside from '@/components/layout/aside.vue';
 import Head from '@/components/layout/head.vue';
 import Nav from '@/components/layout/nav.vue';
+import UploadList from '@/components/common/uploadList/index.vue';
 import { getAllDictDataFun } from '@/utils/common';
 
 const loading = ref(true);