文件选择器添加插槽

web/src/components/fileSelector/index.vue

@@ -90,16 +90,19 @@
           </el-tabs>
         </div>
         <el-row justify="space-between" class="headerBar">
-          <el-col :span="8">
+          <el-col :span="12">
-            <el-input v-model="filterForm.name" :placeholder="`请输入${TypeLabel[tabsActived % 4]}名`" prefix-icon="search"
+            <slot name="actionbar-left">
-              clearable @change="listRequest" />
+              <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;">
+            <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"
@@ -112,15 +115,21 @@
                   网络{{ TypeLabel[tabsActived % 4] }}
                 </el-button>
               </template>
+            </slot>
           </el-col>
         </el-row>
-        <el-empty v-if="!listData.length" description="无内容，请上传"
+        <div v-if="!listData.length">
-          style="width: 100%; height: calc(50vh); margin-top: 24px; padding: 4px;" />
+          <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' }">
+            <slot name="item" :data="item">
               <FileItem :fileData="item" :api="fileApi" :showClose="tabsActived < 4 || isSuperTenent"
                 @onDelFile="listRequest(); listRequestAll();" />
+            </slot>
           </div>
         </div>
         <div class="listPaginator">

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>('');