From 0c38343aca4647115b934a765886cb4c7964551e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E8=BE=89?= <a@a.com>
Date: Thu, 5 Dec 2024 14:37:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E4=BB=B6=E9=80=89=E6=8B=A9=E5=99=A8?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8F=92=E6=A7=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/fileSelector/index.vue | 57 +++++++++++++----------
 web/src/views/system/fileList/index.vue   | 21 ++++++++-
 2 files changed, 52 insertions(+), 26 deletions(-)

diff --git a/web/src/components/fileSelector/index.vue b/web/src/components/fileSelector/index.vue
index 44c058b..55b1fa2 100644
--- a/web/src/components/fileSelector/index.vue
+++ b/web/src/components/fileSelector/index.vue
@@ -90,37 +90,46 @@
           </el-tabs>
         </div>
         <el-row justify="space-between" class="headerBar">
-          <el-col :span="8">
-            <el-input v-model="filterForm.name" :placeholder="`请输入${TypeLabel[tabsActived % 4]}名`" prefix-icon="search"
-              clearable @change="listRequest" />
-            <div>
-              <el-tag v-if="props.multiple" type="primary" effect="light">
-                一共选中&nbsp;{{ data?.length || 0 }}&nbsp;个文件
-              </el-tag>
-            </div>
+          <el-col :span="12">
+            <slot name="actionbar-left">
+              <el-input v-model="filterForm.name" :placeholder="`请输入${TypeLabel[tabsActived % 4]}名`"
+                prefix-icon="search" clearable @change="listRequest" />
+              <div>
+                <el-tag v-if="props.multiple" type="primary" effect="light">
+                  一共选中&nbsp;{{ data?.length || 0 }}&nbsp;个文件
+                </el-tag>
+              </div>
+            </slot>
           </el-col>
           <el-col :span="12" style="width: 100%; display: flex; gap: 12px; justify-content: flex-end;">
-            <el-button type="default" circle icon="refresh" @click="listRequest" />
-            <template v-if="tabsActived > 3 ? isSuperTenent : true">
-              <el-upload ref="uploadRef" :action="getBaseURL() + 'api/system/file/'" :multiple="false" :drag="false"
-                :data="{ upload_method: 1 }" :show-file-list="true" :accept="AcceptList[tabsActived % 4]"
-                :on-success="() => { listRequest(); listRequestAll(); uploadRef.clearFiles(); }"
-                v-if="props.showUploadButton">
-                <el-button type="primary" icon="plus">上传{{ TypeLabel[tabsActived % 4] }}</el-button>
-              </el-upload>
-              <el-button type="info" icon="link" @click="netVisiable = true" v-if="props.showNetButton">
-                网络{{ TypeLabel[tabsActived % 4] }}
-              </el-button>
-            </template>
+            <slot name="actionbar-right" v-bind="{}">
+              <el-button type="default" circle icon="refresh" @click="listRequest" />
+              <template v-if="tabsActived > 3 ? isSuperTenent : true">
+                <el-upload ref="uploadRef" :action="getBaseURL() + 'api/system/file/'" :multiple="false" :drag="false"
+                  :data="{ upload_method: 1 }" :show-file-list="true" :accept="AcceptList[tabsActived % 4]"
+                  :on-success="() => { listRequest(); listRequestAll(); uploadRef.clearFiles(); }"
+                  v-if="props.showUploadButton">
+                  <el-button type="primary" icon="plus">上传{{ TypeLabel[tabsActived % 4] }}</el-button>
+                </el-upload>
+                <el-button type="info" icon="link" @click="netVisiable = true" v-if="props.showNetButton">
+                  网络{{ TypeLabel[tabsActived % 4] }}
+                </el-button>
+              </template>
+            </slot>
           </el-col>
         </el-row>
-        <el-empty v-if="!listData.length" description="无内容，请上传"
-          style="width: 100%; height: calc(50vh); margin-top: 24px; padding: 4px;" />
+        <div v-if="!listData.length">
+          <slot name="empty">
+            <el-empty description="无内容，请上传" style="width: 100%; height: calc(50vh); margin-top: 24px; padding: 4px;" />
+          </slot>
+        </div>
         <div ref="listContainerRef" class="listContainer" v-else>
           <div v-for="item, index in listData" :key="index" @click="onItemClick($event)" :data-id="item[props.valueKey]"
             :style="{ width: (props.itemSize || 100) + 'px', cursor: props.selectable ? 'pointer' : 'normal' }">
-            <FileItem :fileData="item" :api="fileApi" :showClose="tabsActived < 4 || isSuperTenent"
-              @onDelFile="listRequest(); listRequestAll();" />
+            <slot name="item" :data="item">
+              <FileItem :fileData="item" :api="fileApi" :showClose="tabsActived < 4 || isSuperTenent"
+                @onDelFile="listRequest(); listRequestAll();" />
+            </slot>
           </div>
         </div>
         <div class="listPaginator">
diff --git a/web/src/views/system/fileList/index.vue b/web/src/views/system/fileList/index.vue
index 3a990cf..7141809 100644
--- a/web/src/views/system/fileList/index.vue
+++ b/web/src/views/system/fileList/index.vue
@@ -1,5 +1,23 @@
 <template>
   <fs-page>
+    <FileSelector v-model="selected" :showInput="false" ref="fileSelectorRef" :tabsShow="SHOW.ALL" :itemSize="120"
+      :multiple="true" :selectable="false">
+      <!-- <template #input="scope">
+        input：{{ scope }}
+      </template> -->
+      <!-- <template #actionbar-left="scope">
+        actionbar-left：{{ scope }}
+      </template> -->
+      <!-- <template #actionbar-right="scope">
+        actionbar-right：{{ scope }}
+      </template> -->
+      <!-- <template #empty="scope">
+        empty：{{ scope }}
+      </template> -->
+      <!-- <template #item="{ data }">
+        {{ data }}
+      </template> -->
+    </FileSelector>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #actionbar-left="scope">
         <el-upload :action="getBaseURL() + 'api/system/file/'" :multiple="false"
@@ -44,8 +62,6 @@
         </el-icon>
       </div>
     </div>
-    <FileSelector :showInput="false" ref="fileSelectorRef" :tabsShow="SHOW.ALL" :itemSize="120" :multiple="false"
-      :selectable="false" />
   </fs-page>
 </template>
 
@@ -75,6 +91,7 @@ const { crudOptions } = createCrudOptions({ crudExpose, context: { openAddHandle
 // 初始化crud配置
 const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
 
+const selected = ref<any>([]);
 const openPreview = ref<boolean>(false);
 const videoPreviewSrc = ref<string>('');
 const audioPreviewSrc = ref<string>('');