huatao-spc
/
huatao-spc-ui
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

查看文件组件

master
zhang_li 12 months ago
parent
223d181de4
commit
e098d44d29
4 changed files with 195 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/components/Detail/src/TemplateDetails.vue
  2. 100
      src/components/UploadFile/src/Preview.vue
  3. 7
      src/components/UploadFile/src/UploadFile.vue
  4. 90
      src/utils/globalConst.js

6
src/components/Detail/src/TemplateDetails.vue
View File

@ -281,8 +281,8 @@ const buttonTableClick = async (val, row) => {
/** 添加/修改操作 */
const basicFormRef = ref()
const openForm = (type: string, row?: any) => {
if(type=='update')
console.log(row)
if(type=='update'){
console.log(row)
TemplateItemDetails.allSchemas.formSchema.forEach(item=>{
if(item.component == 'UploadFile'){
if(row[item.field]){
@ -296,6 +296,8 @@ const openForm = (type: string, row?: any) => {
}
})
}
basicFormRef.value.open(type, row)
}

100
src/components/UploadFile/src/Preview.vue
View File

@ -1,11 +1,105 @@
<template>
<div class="preview">
1
<div class="file" v-for="(item, index) in fileList" :key="index" size="18">
<div class="name" @click="preview(item)">{{ item.name }}</div>
<Icon icon="ep:delete" class="cursor-pointer" />
</div>
<el-dialog v-model="dialogTableVisible" title="" width="80%">
<div class="dialog">
<Icon
icon="ep:close"
class="cursor-pointer close"
color="white"
size="32"
@click="dialogTableVisible = false"
/>
<img :src="chooseItem.url" alt="" v-if="isImg(chooseItem)" />
<video-player :options="playerOptions"/>
</div>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import {
FILE_IMG_MAP,
FILE_TYPE_LIST,
IMG_TYPE_LIST,
VIDEO_TYPE_LIST,
MUSIC_TYPE_LIST
} from '@/utils/globalConst.js'
import {videoPlayer} from 'vue-video-player'
const props = defineProps({
fileList: {
type: Array,
required: true
}
})
console.log(props.fileList)
const dialogTableVisible = ref(false)
const chooseItem = ref()
const preview = (item) => {
chooseItem.value = item
console.log(chooseItem.value)
dialogTableVisible.value = true
}
const isImg = (item) => {
const lastDotIndex = item.name.lastIndexOf('.')
const result = item.name.substring(lastDotIndex + 1)
return IMG_TYPE_LIST.includes(result)
}
const isVideo = (item) => {
return VIDEO_TYPE_LIST.includes(item.name)
}
const playerOptions = ref({
playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
autoplay: false, // 如果为true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 是否视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [{
// type: 'video/mp4', // 类型
src: 'https://tx.dogevideo.com/vcloud/17/v/20190424/1556036075_818c4125ec9c8cbc7a7a8a7cc1601512/1037/7d515b22c4958598c0fbd1e6290a5ca5.mp4?vkey=FFA4A7&tkey=16492405502eb7beec64&auth_key=1649254950-Ubt0D7z0CUeXs871-0-432e03b97493872cf0bf1f8a37d812db' // url地址
}],
poster: '', // 封面地址
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true, // 当前时间和持续时间的分隔符
durationDisplay: true, // 显示持续时间
remainingTimeDisplay: false, // 是否显示剩余时间功能
fullscreenToggle: true // 是否显示全屏按钮
}
})
</script>
<style scoped lang="scss">
.file {
display: flex;
align-items: center;
.name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 140px;
}
}
img {
width: 100%;
}
::v-deep(.el-dialog) {
background: none;
}
::v-deep(.el-dialog__header) {
display: none !important;
}
.dialog {
position: relative;
}
.close {
position: absolute;
right: 10px;
top: 10px;
}
</style>

7
src/components/UploadFile/src/UploadFile.vue
View File

@ -6,7 +6,7 @@
name="file"
v-model="valueRef"
v-model:file-list="fileList"
:show-file-list="true"
:show-file-list="isShowFileList"
:auto-upload="autoUpload"
:action="updateUrl + '?tableId=' + upData?.tableId + '&tableName=' + upData?.tableName"
:headers="uploadHeaders"
@ -29,7 +29,7 @@
<div style="font-size: 8px;line-height: initial;">
格式为 <b style="color: #f56c6c">{{ fileType.join(',') }}</b> 的文件
</div>
<Preview/>
<Preview :fileList="fileList" v-if="!isShowFileList"/>
</template>
<template v-if="!isShowFile" #file >
<div>
@ -40,7 +40,7 @@
</template>
<script lang="ts" setup>
import { PropType } from 'vue'
// import Preview from '@/components/UploadFile/src/Preview'
import Preview from '@/components/UploadFile/src/Preview.vue'
import { propTypes } from '@/utils/propTypes'
import { getAccessToken, getTenantId } from '@/utils/auth'
@ -65,6 +65,7 @@ const props = defineProps({
autoUpload: propTypes.bool.def(true), // 自动上传
isShowTip: propTypes.bool.def(true), // 是否显示提示
isShowFile: propTypes.bool.def(true), // 是否显示上传的文件
isShowFileList: propTypes.bool.def(false), // 是否显示上传的文件
})
console.log('props.upData',props.upData)

90
src/utils/globalConst.js
View File

@ -0,0 +1,90 @@
// 文件图片Map映射
// export const FILE_IMG_MAP = {
// dir: require('@/assets/images/dir.png'),
// chm: require('@/assets/images/file_chm.png'),
// css: require('@/assets/images/file_css.png'),
// csv: require('@/assets/images/file_csv.png'),
// png: require('@/assets/images/file_pic.png'),
// jpg: require('@/assets/images/file_pic.png'),
// jpeg: require('@/assets/images/file_pic.png'),
// docx: require('@/assets/images/file_word.png'),
// doc: require('@/assets/images/file_word.png'),
// ppt: require('@/assets/images/file_ppt.png'),
// pptx: require('@/assets/images/file_ppt.png'),
// xls: require('@/assets/images/file_excel.png'),
// xlsx: require('@/assets/images/file_excel.png'),
// webm: require('@/assets/images/file_video.png'),
// ogg: require('@/assets/images/file_video.png'),
// mkv: require('@/assets/images/file_video.png'),
// ts: require('@/assets/images/file_video.png'),
// wmv: require('@/assets/images/file_video.png'),
// vob: require('@/assets/images/file_video.png'),
// mxf: require('@/assets/images/file_video.png'),
// rm: require('@/assets/images/file_video.png'),
// mp4: require('@/assets/images/file_video.png'),
// avi: require('@/assets/images/file_avi.png'),
// rar: require('@/assets/images/file_rar.png'),
// zip: require('@/assets/images/file_zip.png'),
// dmg: require('@/assets/images/file_dmg.png'),
// mp3: require('@/assets/images/file_music.png'),
// flac: require('@/assets/images/file_music.png'),
// open: require('@/assets/images/file_open.png'),
// pdf: require('@/assets/images/file_pdf.png'),
// rtf: require('@/assets/images/file_rtf.png'),
// txt: require('@/assets/images/file_txt.png'),
// oa: require('@/assets/images/file_oa.png'),
// md: require('@/assets/images/file_md.png'),
// unknown: require('@/assets/images/file_unknown.png'),
// js: require('@/assets/images/file_js.png'),
// html: require('@/assets/images/file_html.png'),
// img: require('@/assets/images/file_img.png'),
// sql: require('@/assets/images/file_sql.png'),
// jar: require('@/assets/images/file_jar.png'),
// svg: require('@/assets/images/file_svg.png'),
// gif: require('@/assets/images/file_gif.png'),
// json: require('@/assets/images/file_json.png'),
// exe: require('@/assets/images/file_exe.png')
// }
// 可以识别的文件类型
export const FILE_TYPE_LIST = [
'png',
'jpg',
'jpeg',
'docx',
'doc',
'ppt',
'pptx',
'xls',
'xlsx',
'avi',
'mp4',
'css',
'csv',
'chm',
'rar',
'zip',
'dmg',
'mp3',
'flac',
'open',
'pdf',
'rtf',
'txt',
'oa',
'js',
'html',
'img',
'sql',
'jar',
'svg',
'gif',
'json',
'exe',
'md',
"webm","ogg","mkv","ts","wmv","vob","mxf","rm"
]
export const IMG_TYPE_LIST = ["bmp", "jpg", "png", "tif", "gif", "jpeg"]
export const VIDEO_TYPE_LIST = ["avi", "mp4", "mpg", "mov", "swf", "flv", "webm", "ogg", "mkv", "ts", "wmv", "vob", "mxf", "rm"]
export const MUSIC_TYPE_LIST = ["wav", "aif", "au", "mp3", "ram", "wma", "mmf", "amr", "aac", "flac"]
Write Preview
Loading…
Cancel
Save