admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

文件选择器添加插槽

Browse Source
This commit is contained in:
阿辉
2024-12-05 14:37:38 +08:00
parent d8f41919ea
commit 0c38343aca
2 changed files with 52 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
web/src/components/fileSelector/index.vue
View File

@@ -90,37 +90,46 @@
</el-tabs> </el-tabs>
</div> </div>
<el-row justify="space-between" class="headerBar"> <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]}名`"
<div> prefix-icon="search" clearable @change="listRequest" />
<el-tag v-if="props.multiple" type="primary" effect="light"> <div>
一共选中&nbsp;{{ data?.length || 0 }}&nbsp;个文件 <el-tag v-if="props.multiple" type="primary" effect="light">
</el-tag> 一共选中&nbsp;{{ data?.length || 0 }}&nbsp;个文件
</div> </el-tag>
</div>
</slot>
</el-col> </el-col>
<el-col :span="12" style="width: 100%; display: flex; gap: 12px; justify-content: flex-end;"> <el-col :span="12" style="width: 100%; display: flex; gap: 12px; justify-content: flex-end;">
<el-button type="default" circle icon="refresh" @click="listRequest" /> <slot name="actionbar-right" v-bind="{}">
<template v-if="tabsActived > 3 ? isSuperTenent : true"> <el-button type="default" circle icon="refresh" @click="listRequest" />
<el-upload ref="uploadRef" :action="getBaseURL() + 'api/system/file/'" :multiple="false" :drag="false" <template v-if="tabsActived > 3 ? isSuperTenent : true">
:data="{ upload_method: 1 }" :show-file-list="true" :accept="AcceptList[tabsActived % 4]" <el-upload ref="uploadRef" :action="getBaseURL() + 'api/system/file/'" :multiple="false" :drag="false"
:on-success="() => { listRequest(); listRequestAll(); uploadRef.clearFiles(); }" :data="{ upload_method: 1 }" :show-file-list="true" :accept="AcceptList[tabsActived % 4]"
v-if="props.showUploadButton"> :on-success="() => { listRequest(); listRequestAll(); uploadRef.clearFiles(); }"
<el-button type="primary" icon="plus">上传{{ TypeLabel[tabsActived % 4] }}</el-button> v-if="props.showUploadButton">
</el-upload> <el-button type="primary" icon="plus">上传{{ TypeLabel[tabsActived % 4] }}</el-button>
<el-button type="info" icon="link" @click="netVisiable = true" v-if="props.showNetButton"> </el-upload>
网络{{ TypeLabel[tabsActived % 4] }} <el-button type="info" icon="link" @click="netVisiable = true" v-if="props.showNetButton">
</el-button> 网络{{ TypeLabel[tabsActived % 4] }}
</template> </el-button>
</template>
</slot>
</el-col> </el-col>
</el-row> </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 ref="listContainerRef" class="listContainer" v-else>
<div v-for="item, index in listData" :key="index" @click="onItemClick($event)" :data-id="item[props.valueKey]" <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' }"> :style="{ width: (props.itemSize || 100) + 'px', cursor: props.selectable ? 'pointer' : 'normal' }">
<FileItem :fileData="item" :api="fileApi" :showClose="tabsActived < 4 || isSuperTenent" <slot name="item" :data="item">
@onDelFile="listRequest(); listRequestAll();" /> <FileItem :fileData="item" :api="fileApi" :showClose="tabsActived < 4 || isSuperTenent"
@onDelFile="listRequest(); listRequestAll();" />
</slot>
</div> </div>
</div> </div>
<div class="listPaginator"> <div class="listPaginator">

21
web/src/views/system/fileList/index.vue
View File

@@ -1,5 +1,23 @@
<template> <template>
<fs-page> <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"> <fs-crud ref="crudRef" v-bind="crudBinding">
<template #actionbar-left="scope"> <template #actionbar-left="scope">
<el-upload :action="getBaseURL() + 'api/system/file/'" :multiple="false" <el-upload :action="getBaseURL() + 'api/system/file/'" :multiple="false"
@@ -44,8 +62,6 @@
</el-icon> </el-icon>
</div> </div>
</div> </div>
<FileSelector :showInput="false" ref="fileSelectorRef" :tabsShow="SHOW.ALL" :itemSize="120" :multiple="false"
:selectable="false" />
</fs-page> </fs-page>
</template> </template>
@@ -75,6 +91,7 @@ const { crudOptions } = createCrudOptions({ crudExpose, context: { openAddHandle
// 初始化crud配置 // 初始化crud配置
const { resetCrudOptions } = useCrud({ crudExpose, crudOptions }); const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
const selected = ref<any>([]);
const openPreview = ref<boolean>(false); const openPreview = ref<boolean>(false);
const videoPreviewSrc = ref<string>(''); const videoPreviewSrc = ref<string>('');
const audioPreviewSrc = ref<string>(''); const audioPreviewSrc = ref<string>('');