查看文件组件

src/components/Detail/src/TemplateDetails.vue

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

src/components/UploadFile/src/Preview.vue

@@ -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>

src/components/UploadFile/src/UploadFile.vue

@@ -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)

src/utils/globalConst.js

@@ -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"]
+