fix:文件共享优化

src/views/main/fileList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="common-box" style="margin-top: 20px">
-    <TopTitle :messageType="messageType" :title="title" icon="laba" />
+    <TopTitle :messageType="messageType" :title="title" icon="laba"/>
     <div>
       <el-input
         v-model="searchText"
@@ -10,39 +10,54 @@
         @clear="getDataList"
       >
         <template #append>
-          <el-button :icon="Search" @click="getDataList" />
+          <el-button :icon="Search" @click="getDataList"/>
         </template>
       </el-input>
     </div>
     <div class="list-box">
       <el-scrollbar style="width: 100%; height: 200px">
-        <div>
-          <div class="line">
-            <div class="text-ellipsis">文件标题</div>
-            <div class="text-ellipsis">文件名称</div>
-            <div class="text-ellipsis">创建时间</div>
-            <div class="text-ellipsis">操作</div>
-          </div>
-        </div>
-        <div v-for="(item, index) in dataList" :key="index" class="line">
-          <div class="text-ellipsis" :content="item.fileTitle">
-            {{ item.fileTitle }}
-          </div>
-          <div class="text-ellipsis">{{ item.fileName }}</div>
-          <div class="date">{{ item.created }}</div>
-          <div
-            v-show="item.fileUrl != null && item.fileUrl != ''"
-            class="message-time download-btn"
-          >
-            <el-button
-              @click="downloadFile(item)"
-              :loading="downloadBtnLoading = false"
-              type="primary"
-              size="small"
+        <!--        <div>-->
+        <!--          <div class="line">-->
+        <!--            <div style="width: 100%" class="title">-->
+        <!--              <h4>文件标题</h4></div>-->
+        <!--            <div style="width: 100%" class="title"><h4>文件名称</h4></div>-->
+        <!--            <div style="width: 20%" class="title"><h4>操作</h4></div>-->
+        <!--          </div>-->
+        <!--        </div>-->
+
+        <!--          <el-descriptions v-for="item in dataList">-->
+        <!--            <el-descriptions-item label="Username">{{item.fileTitle}}</el-descriptions-item>-->
+        <!--            <el-descriptions-item label="Telephone">{{item.fileTitle}}</el-descriptions-item>-->
+        <!--            <el-descriptions-item label="Place">Suzhou</el-descriptions-item>-->
+        <!--          </el-descriptions>-->
+
+        <el-table :data="dataList" style="width: 100%">
+          <el-table-column prop="fileName" label="文件名称"/>
+          <el-table-column prop="fileTitle" label="文件属性"/>
+          <el-table-column prop="created" label="创建时间"/>
+          <el-table-column label="操作">
+            <template #default="scope">
+              <el-button
+                @click="downloadFile(scope.row)"
+                :loading="scope.row.downloadBtnLoading"
+                type="primary"
+                size="small"
               >下载
-            </el-button>
-          </div>
-        </div>
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!--        <div v-for="(item, index) in dataList" :key="index" class="line">-->
+        <!--          <div class="text-ellipsis" :content="item.fileTitle">-->
+        <!--            {{ item.fileTitle }}-->
+        <!--          </div>-->
+        <!--          <div class="text-ellipsis">{{ item.fileName }}</div>-->
+        <!--          <div-->
+        <!--            v-show="item.fileUrl != null && item.fileUrl != ''"-->
+        <!--            class="message-time download-btn"-->
+        <!--          >-->
+        <!--
+              </div>-->
       </el-scrollbar>
     </div>
     <!--    <MessageDetail ref="messageDetailRef" />-->
@@ -55,7 +70,7 @@ import {
   getUserMessageNoPageList,
 } from "@/api/message";
 // import MessageDetail from "@/views/messages/MessageDetail.vue";
-import { Search } from "@element-plus/icons-vue";
+import {Search} from "@element-plus/icons-vue";
 import buttonPermission from "@/common/configs/buttonPermission";
 
 const props = defineProps({
@@ -78,7 +93,8 @@ onMounted(() => {
 });
 const downloadBtnLoading = ref(false);
 const downloadFile = async (row: any) => {
-  downloadBtnLoading.value = true;
+  console.log(row)
+  row.downloadBtnLoading = true;
   let url = import.meta.env.VITE_APP_UPLOAD_URL + row.fileUrl;
   // 1. 获取资源并转为Blob
   const response = await fetch(url);
@@ -109,6 +125,9 @@ const getDataList = () => {
   getFileShareNoPageList(searchText.value).then((res) => {
     console.log(res.data);
     dataList.value = res.data ?? [];
+    dataList.value.forEach((item) => {
+      item.downloadBtnLoading = false
+    });
   });
 };
 </script>

src/views/sets/files.vue

@@ -70,17 +70,17 @@ option.value = Object.assign(option.value, {
   menu: true, //是否显示操作列
   column: [
     {
-      label: "文件标题",
-      prop: "fileTitle",
-      search: true,
-    },
-    {
       label: "文件名",
       prop: "fileName",
       search: true,
       display: false,
     },
     {
+      label: "文件标题",
+      prop: "fileTitle",
+      search: true,
+    },
+    {
       label: "描述",
       prop: "remark",
       search: false,