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

优化template的结构，包一层，否则唯一标识不会生效

Browse Source
This commit is contained in:
阿辉
2024-11-23 15:55:43 +08:00
parent dac7ea90ae
commit 422f86da22
1 changed files with 105 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,117 +1,119 @@
<template> <template>
<div v-show="props.showInput" style="width: 100%;" :class="props.class" :style="props.style"> <div>
<el-select v-if="props.inputType === 'selector'" v-model="data" suffix-icon="arrow-down" clearable <div v-show="props.showInput" style="width: 100%;" :class="props.class" :style="props.style">
:multiple="props.multiple" placeholder="请选择文件" @click="selectVisiable = true && !props.disabled" <el-select v-if="props.inputType === 'selector'" v-model="data" suffix-icon="arrow-down" clearable
:disabled="props.disabled" @clear="selectedInit" @remove-tag="selectedInit"> :multiple="props.multiple" placeholder="请选择文件" @click="selectVisiable = true && !props.disabled"
<el-option v-for="item, index in listAllData" :key="index" :value="String(item[props.valueKey])" :disabled="props.disabled" @clear="selectedInit" @remove-tag="selectedInit">
:label="item.name" /> <el-option v-for="item, index in listAllData" :key="index" :value="String(item[props.valueKey])"
</el-select> :label="item.name" />
<div v-if="props.inputType === 'image'" style="position: relative;" </el-select>
:style="{ width: props.inputSize + 'px', height: props.inputSize + 'px' }"> <div v-if="props.inputType === 'image'" style="position: relative;"
<el-image :src="data" fit="scale-down" :style="{ width: props.inputSize + 'px', aspectRatio: '1 / 1' }"> :style="{ width: props.inputSize + 'px', height: props.inputSize + 'px' }">
<template #error> <el-image :src="data" fit="scale-down" :style="{ width: props.inputSize + 'px', aspectRatio: '1 / 1' }">
<div></div> <template #error>
</template> <div></div>
</el-image> </template>
<div v-show="!(!!data)" </el-image>
style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"> <div v-show="!(!!data)"
<el-icon :size="24"> style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
<Plus /> <el-icon :size="24">
<Plus />
</el-icon>
</div>
<div @click="selectVisiable = true && !props.disabled" class="addControllorHover"
:style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"></div>
<el-icon v-show="!!data && !props.disabled" class="closeHover" :size="16" @click="dataClear">
<Close />
</el-icon> </el-icon>
</div> </div>
<div @click="selectVisiable = true && !props.disabled" class="addControllorHover" <div v-if="props.inputType === 'video'"
:style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"></div> style="position: relative; display: flex; align-items: center; justify-items: center;"
<el-icon v-show="!!data && !props.disabled" class="closeHover" :size="16" @click="dataClear"> :style="{ width: props.inputSize * 2 + 'px', height: props.inputSize + 'px' }">
<Close /> <video :src="data" :controls="false" :autoplay="true" :muted="true" :loop="true"
</el-icon> :style="{ maxWidth: props.inputSize * 2 + 'px', maxHeight: props.inputSize + 'px', margin: '0 auto' }"></video>
</div> <div v-show="!(!!data)"
<div v-if="props.inputType === 'video'" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
style="position: relative; display: flex; align-items: center; justify-items: center;" <el-icon :size="24">
:style="{ width: props.inputSize * 2 + 'px', height: props.inputSize + 'px' }"> <Plus />
<video :src="data" :controls="false" :autoplay="true" :muted="true" :loop="true" </el-icon>
:style="{ maxWidth: props.inputSize * 2 + 'px', maxHeight: props.inputSize + 'px', margin: '0 auto' }"></video> </div>
<div v-show="!(!!data)" <div @click="selectVisiable = true && !props.disabled" class="addControllorHover"
style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"> :style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"></div>
<el-icon :size="24"> <el-icon v-show="!!data && !props.disabled" class="closeHover" :size="16" @click="dataClear">
<Plus /> <Close />
</el-icon> </el-icon>
</div> </div>
<div @click="selectVisiable = true && !props.disabled" class="addControllorHover" <div v-if="props.inputType === 'audio'"
:style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"></div> style="position: relative; display: flex; align-items: center; justify-items: center;"
<el-icon v-show="!!data && !props.disabled" class="closeHover" :size="16" @click="dataClear"> :style="{ width: props.inputSize * 2 + 'px', height: props.inputSize + 'px' }">
<Close /> <audio :src="data" :controls="!!data" :autoplay="false" :muted="true" :loop="true"
</el-icon> style="width: 100%; z-index: 1;"></audio>
</div> <div v-show="!(!!data)"
<div v-if="props.inputType === 'audio'" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
style="position: relative; display: flex; align-items: center; justify-items: center;" <el-icon :size="24">
:style="{ width: props.inputSize * 2 + 'px', height: props.inputSize + 'px' }"> <Plus />
<audio :src="data" :controls="!!data" :autoplay="false" :muted="true" :loop="true" </el-icon>
style="width: 100%; z-index: 1;"></audio> </div>
<div v-show="!(!!data)" <div @click="selectVisiable = true && !props.disabled" class="addControllorHover"
style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"> :style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"></div>
<el-icon :size="24"> <el-icon v-show="!!data && !props.disabled" class="closeHover" :size="16" @click="dataClear">
<Plus /> <Close />
</el-icon> </el-icon>
</div> </div>
<div @click="selectVisiable = true && !props.disabled" class="addControllorHover"
:style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"></div>
<el-icon v-show="!!data && !props.disabled" class="closeHover" :size="16" @click="dataClear">
<Close />
</el-icon>
</div> </div>
</div> <el-dialog v-model="selectVisiable" :draggable="false" width="50%" :align-center="false"
<el-dialog v-model="selectVisiable" :draggable="false" width="50%" :align-center="false" @open="if (listData.length === 0) listRequest();" @closed="clear" modal-class="">
@open="if (listData.length === 0) listRequest();" @closed="clear" modal-class="_overlay"> <template #header>
<template #header> <span class="el-dialog__title">文件选择</span>
<span class="el-dialog__title">文件选择</span> <el-divider style="margin: 0;" />
<el-divider style="margin: 0;" /> </template>
</template> <div style="padding: 4px;">
<div style="padding: 4px;"> <el-tabs v-model="tabsActived" :type="props.tabsType" :stretch="true" @tab-change="handleTabChange">
<el-tabs v-model="tabsActived" :type="props.tabsType" :stretch="true" @tab-change="handleTabChange"> <el-tab-pane v-if="props.tabsShow & SHOW.IMAGE" :name="0" label="图片" />
<el-tab-pane v-if="props.tabsShow & SHOW.IMAGE" :name="0" label="图片" /> <el-tab-pane v-if="props.tabsShow & SHOW.VIDEO" :name="1" label="视频" />
<el-tab-pane v-if="props.tabsShow & SHOW.VIDEO" :name="1" label="视频" /> <el-tab-pane v-if="props.tabsShow & SHOW.AUDIO" :name="2" label="音频" />
<el-tab-pane v-if="props.tabsShow & SHOW.AUDIO" :name="2" label="音频" /> <el-tab-pane v-if="props.tabsShow & SHOW.OTHER" :name="3" label="其他" />
<el-tab-pane v-if="props.tabsShow & SHOW.OTHER" :name="3" label="其他" /> </el-tabs>
</el-tabs> <el-row justify="space-between" class="headerBar">
<el-row justify="space-between" class="headerBar"> <el-span :span="16">
<el-span :span="16"> <el-input v-model="filterForm.name" :placeholder="`请输入${TypeLabel[tabsActived]}名`" prefix-icon="search"
<el-input v-model="filterForm.name" :placeholder="`请输入${TypeLabel[tabsActived]}名`" prefix-icon="search" clearable @change="listRequest" />
clearable @change="listRequest" /> <div>
<div> <el-tag v-if="props.multiple" type="primary" effect="light">
<el-tag v-if="props.multiple" type="primary" effect="light"> 一共选中&nbsp;{{ data?.length || 0 }}&nbsp;个文件
一共选中&nbsp;{{ data?.length || 0 }}&nbsp;个文件 </el-tag>
</el-tag> </div>
</el-span>
<el-span :span="8">
<el-button type="default" circle icon="refresh" @click="listRequest" />
<!-- 这里 show-file-list 和 clearFiles 一起使用确保不会显示上传列表 -->
<el-upload ref="uploadRef" :action="getBaseURL() + 'api/system/file/'" :multiple="false"
:data="{ upload_method: 1 }" :drag="false" :show-file-list="false" :accept="AcceptList[tabsActived]"
:on-success="() => { listRequest(); listRequestAll(); uploadRef.clearFiles(); }">
<el-button type="primary" icon="plus">上传{{ TypeLabel[tabsActived] }}</el-button>
</el-upload>
</el-span>
</el-row>
<el-empty v-if="!listData.length" description="无内容，请上传"
style="width: 100%; height: calc(50vh); margin-top: 24px; padding: 4px;" />
<div ref="listContainerRef" class="listContainer" v-else>
<div v-for="item in listData" :style="{ width: (props.itemSize || 100) + 'px' }" :key="item.id"
@click="onItemClick($event)" :data-id="item[props.valueKey]">
<FileItem :fileData="item" />
</div> </div>
</el-span> </div>
<el-span :span="8"> <div class="listPaginator">
<el-button type="default" circle icon="refresh" @click="listRequest" /> <el-pagination background size="small" layout="total, sizes, prev, pager, next" :total="pageForm.total"
<!-- 这里 show-file-list 和 clearFiles 一起使用确保不会显示上传列表 --> v-model:page-size="pageForm.limit" :page-sizes="[10, 20, 30, 40, 50]" v-model:current-page="pageForm.page"
<el-upload ref="uploadRef" :action="getBaseURL() + 'api/system/file/'" :multiple="false" :hide-on-single-page="false" @change="handlePageChange" />
:data="{ upload_method: 1 }" :drag="false" :show-file-list="false" :accept="AcceptList[tabsActived]"
:on-success="() => { listRequest(); listRequestAll(); uploadRef.clearFiles(); }">
<el-button type="primary" icon="plus">上传{{ TypeLabel[tabsActived] }}</el-button>
</el-upload>
</el-span>
</el-row>
<el-empty v-if="!listData.length" description="无内容，请上传"
style="width: 100%; height: calc(50vh); margin-top: 24px; padding: 4px;" />
<div ref="listContainerRef" class="listContainer" v-else>
<div v-for="item in listData" :style="{ width: (props.itemSize || 100) + 'px' }" :key="item.id"
@click="onItemClick($event)" :data-id="item[props.valueKey]">
<FileItem :fileData="item" />
</div> </div>
</div> </div>
<div class="listPaginator"> <template #footer v-if="props.showInput">
<el-pagination background size="small" layout="total, sizes, prev, pager, next" :total="pageForm.total" <el-button type="default" @click="selectVisiable = false">取消</el-button>
v-model:page-size="pageForm.limit" :page-sizes="[10, 20, 30, 40, 50]" v-model:current-page="pageForm.page" <el-button type="primary" @click="selectVisiable = false">确定</el-button>
:hide-on-single-page="false" @change="handlePageChange" /> </template>
</div> </el-dialog>
</div> </div>
<template #footer v-if="props.showInput">
<el-button type="default" @click="selectVisiable = false">取消</el-button>
<el-button type="primary" @click="selectVisiable = false">确定</el-button>
</template>
</el-dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -259,10 +261,6 @@ onMounted(() => {
</script> </script>
<style scoped> <style scoped>
._overlay {
width: unset !important;
}
.headerBar>* { .headerBar>* {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;