From d875196da818420c690113e6a27314002b759509 Mon Sep 17 00:00:00 2001
From: zhang_li <2235006734@qqq.com>
Date: Thu, 7 Dec 2023 11:47:51 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |  4 +-
 package.json                                  |  3 +
 src/components/UploadFile/src/Preview.vue     | 98 +++++++++++++------
 src/components/UploadFile/src/UploadFile.vue  |  9 +-
 src/main.ts                                   |  5 +-
 src/utils/globalConst.js                      |  3 +-
 .../templateItemDetails.data.ts               | 11 ++-
 7 files changed, 89 insertions(+), 44 deletions(-)

diff --git a/.env.development b/.env.development
index 651af1b..661e703 100644
--- a/.env.development
+++ b/.env.development
@@ -4,11 +4,11 @@ NODE_ENV=development
 VITE_DEV=false
 
 # 请求路径
-VITE_BASE_URL='http://localhost:12080'
+VITE_BASE_URL='http://192.168.0.165:12080'
 
 # 上传路径
 #VITE_UPLOAD_URL='http://localhost:12080/admin-api/spc/template-item-details/upload'
-VITE_UPLOAD_URL='http://localhost:12080/admin-api/infra/file/upload'
+VITE_UPLOAD_URL='http://192.168.0.165:12080/admin-api/infra/file/upload'
 
 # 接口前缀
 VITE_API_BASEPATH=/dev-api
diff --git a/package.json b/package.json
index 2d240fe..97b46a1 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.10",
     "diagram-js": "^12.3.0",
+    "docx-preview": "^0.1.4",
     "echarts": "^5.4.3",
     "echarts-wordcloud": "^2.1.0",
     "element-plus": "2.3.14",
@@ -37,6 +38,7 @@
     "highlight.js": "^11.8.0",
     "intro.js": "^7.2.0",
     "jsencrypt": "^3.3.2",
+    "jszip": "^3.10.1",
     "lodash-es": "^4.17.21",
     "min-dash": "^4.1.1",
     "mitt": "^3.0.1",
@@ -54,6 +56,7 @@
     "vue-router": "^4.2.5",
     "vue-types": "^5.1.1",
     "vue-video-player": "^5.0.1",
+    "vue3-video-play": "^1.3.2",
     "vuedraggable": "^4.1.0",
     "web-storage-cache": "^1.1.1",
     "xml-js": "^1.6.11"
diff --git a/src/components/UploadFile/src/Preview.vue b/src/components/UploadFile/src/Preview.vue
index d683d10..1ac4f00 100644
--- a/src/components/UploadFile/src/Preview.vue
+++ b/src/components/UploadFile/src/Preview.vue
@@ -1,10 +1,15 @@
 <template>
   <div class="preview">
-    <div class="file" v-for="(item, index) in fileList" :key="index" size="18">
+    <div class="file" v-for="(item, index) in fileList" :key="index" size="18" >
+      <Icon icon="fa:file-word-o" class="cursor-pointer mr-6px color-#409eff" v-if="isWord(item)"/>
+      <Icon icon="fa:file-image-o" class="cursor-pointer mr-6px color-#409eff" v-if="isImg(item)"/>
+      <Icon icon="ep:video-camera" class="cursor-pointer mr-6px color-#409eff" v-if="isVideo(item)"/>
       <div class="name" @click="preview(item)">{{ item.name }}</div>
-      <Icon icon="ep:delete" class="cursor-pointer" />
+      <Icon icon="ep:close" class="cursor-pointer" @click="deleteFile(item, index)" />
+
+      <VueVideoPlayer />
     </div>
-    <el-dialog v-model="dialogTableVisible" title="" width="80%">
+    <el-dialog v-model="dialogTableVisible" title="" min-width="80%">
       <div class="dialog">
         <Icon
           icon="ep:close"
@@ -14,7 +19,13 @@
           @click="dialogTableVisible = false"
         />
         <img :src="chooseItem.url" alt="" v-if="isImg(chooseItem)" />
-        <!-- <video-player :options="playerOptions"/> -->
+        <video controls muted loop width="80%" v-if="isVideo(chooseItem)">
+          <source :src="chooseItem.url" />
+        </video>
+        <!-- <iframe  frameborder="0" 
+          :src="'https://view.officeapps.live.com/op/view.aspx?src=' +chooseItem.url" width='100%'   height="600" v-if="isWord(chooseItem)">
+          </iframe>] -->
+        <!-- <div ref="word" class="childRef" v-if="isWord(chooseItem)"></div> -->
       </div>
     </el-dialog>
   </div>
@@ -23,59 +34,74 @@
 import {
   FILE_IMG_MAP,
   FILE_TYPE_LIST,
+  FILE_WORD_TYPE_LIST,
   IMG_TYPE_LIST,
   VIDEO_TYPE_LIST,
   MUSIC_TYPE_LIST
 } from '@/utils/globalConst.js'
+// import axios from 'axios'
+// import { renderAsync } from 'docx-preview'
+// import request from '@/config/axios'
+// import JSZip from 'jszip'
+// let docx = import.meta.glob('docx-preview');
+
 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
+let word = ref(null)
+const preview = async (item) => {
+  if (isImg(item) || isVideo(item)) {
+    chooseItem.value = item
+    dialogTableVisible.value = true
+  } else {
+    window.open(item.url)
+  }
+  // request.get({
+  //   url: chooseItem.value.url,
+  // 	responseType: 'blob',
+  // 	needLoading: true,
+  // }).then((res) => {
+  //   nextTick(() => {
+  //     renderAsync(res, word.value)
+  //   })
+  // })
 }
 const isImg = (item) => {
+  // console.log('item',item)
   const lastDotIndex = item.name.lastIndexOf('.')
   const result = item.name.substring(lastDotIndex + 1)
+  console.log(11)
+  console.log(result)
+  console.log(IMG_TYPE_LIST)
+  console.log(22)
   return IMG_TYPE_LIST.includes(result)
 }
 const isVideo = (item) => {
-  return VIDEO_TYPE_LIST.includes(item.name)
+  const lastDotIndex = item.name.lastIndexOf('.')
+  const result = item.name.substring(lastDotIndex + 1)
+  return VIDEO_TYPE_LIST.includes(result)
+}
+const isWord = (item) => {
+  const lastDotIndex = item.name.lastIndexOf('.')
+  const result = item.name.substring(lastDotIndex + 1)
+  return FILE_WORD_TYPE_LIST.includes(result)
 }
-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 // 是否显示全屏按钮
-					}
-				})
+const deleteFile = (item, index) => {
+  emit('deleteFile', item, index)
+}
+// 传递给父类
+const emit = defineEmits(['deleteFile'])
 </script>
 <style scoped lang="scss">
 .file {
   display: flex;
   align-items: center;
+  cursor: pointer;
   .name {
     flex: 1;
     overflow: hidden;
@@ -83,6 +109,11 @@ const playerOptions = ref({
     white-space: nowrap;
     width: 140px;
   }
+  &:hover{
+    .name {
+    color: #409eff;
+  }
+  }
 }
 img {
   width: 100%;
@@ -95,6 +126,9 @@ img {
 }
 .dialog {
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .close {
   position: absolute;
diff --git a/src/components/UploadFile/src/UploadFile.vue b/src/components/UploadFile/src/UploadFile.vue
index 1921838..787f964 100644
--- a/src/components/UploadFile/src/UploadFile.vue
+++ b/src/components/UploadFile/src/UploadFile.vue
@@ -29,7 +29,7 @@
         <div style="font-size: 8px;line-height: initial;">
           格式为 <b style="color: #f56c6c">{{ fileType.join(',') }}</b> 的文件
         </div>
-        <Preview :fileList="fileList" v-if="!isShowFileList"/>
+        <Preview :fileList="fileList" v-if="!isShowFileList" @deleteFile="deleteFile"/>
       </template>
       <template  v-if="!isShowFile" #file >
           <div>
@@ -65,10 +65,10 @@ const props = defineProps({
   autoUpload: propTypes.bool.def(true), // 自动上传
   isShowTip: propTypes.bool.def(true), // 是否显示提示
   isShowFile: propTypes.bool.def(true), // 是否显示上传的文件
-  isShowFileList: propTypes.bool.def(false), // 是否显示上传的文件
+  isShowFileList: propTypes.bool.def(true), // 是否显示上传的文件
   
 })
-console.log('props.upData',props.upData)
+console.log('props.upData',props.fileType)
 // ========== 上传相关 ==========
 const valueRef = ref(props.modelValue)
 const uploadRef = ref<UploadInstance>()
@@ -154,6 +154,9 @@ const listToString = (list: UploadUserFile[], separator?: string) => {
   }
   return strs != '' ? strs.substr(0, strs.length - 1) : ''
 }
+const deleteFile=(item,index)=>{
+  fileList.value.splice(index,1)
+}
 </script>
 <style scoped lang="scss">
 .upload-file-uploader {
diff --git a/src/main.ts b/src/main.ts
index c91a2fd..b7c8001 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -49,7 +49,8 @@ import VueVideoPlayer from 'vue-video-player/src'
 import 'video.js/dist/video-js.css'
 import 'vue-video-player/src/custom-theme.css'
 
-
+// import vue3videoPlay from 'vue3-video-play' // 引入组件
+// import 'vue3-video-play/dist/style.css' // 引入css
 
 
 
@@ -74,7 +75,7 @@ const setupAll = async () => {
   await router.isReady()
 
   app.use(VueDOMPurifyHTML)
-
+  // app.use(vue3videoPlay)
   app.mount('#app')
   app.config.warnHandler = () => null;
 }
diff --git a/src/utils/globalConst.js b/src/utils/globalConst.js
index 6e9911a..c169ae5 100644
--- a/src/utils/globalConst.js
+++ b/src/utils/globalConst.js
@@ -87,4 +87,5 @@ export const FILE_TYPE_LIST = [
 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"]
-
+//  可以识别的文件类型
+export const FILE_WORD_TYPE_LIST = ['docx','doc','ppt','pptx','xls','xlsx','pdf','txt']
diff --git a/src/views/spc/detectiontemplate/templateItemDetails.data.ts b/src/views/spc/detectiontemplate/templateItemDetails.data.ts
index b6eddfa..34d5de8 100644
--- a/src/views/spc/detectiontemplate/templateItemDetails.data.ts
+++ b/src/views/spc/detectiontemplate/templateItemDetails.data.ts
@@ -109,13 +109,14 @@ export const TemplateItemDetails = useCrudSchemas(reactive<CrudSchema[]>([
     form:{
       component:'UploadFile',
       componentProps:{
-        fileType:['image/jpeg', 'image/png', 'image/gif','video/mp4','video/webm'],
+        fileType:['image/jpeg', 'image/png', 'image/gif','video/mp4','video/webm','doc','docx', 'xls', 'ppt', 'txt', 'pdf'],
         fileSize:20,
         limit:1,
         upData:{
           tableId:0,tableName:"detection_template_item_details"
         },
-        modelValue:[]
+        modelValue:[],
+        isShowFileList:false
       }
     }
   },
@@ -133,7 +134,8 @@ export const TemplateItemDetails = useCrudSchemas(reactive<CrudSchema[]>([
         limit:1,
         upData:{
           tableId:0,tableName:"detection_template_item_details"
-         }
+        },
+        isShowFileList:false
       }
     }
   },
@@ -151,7 +153,8 @@ export const TemplateItemDetails = useCrudSchemas(reactive<CrudSchema[]>([
         limit:1,
         upData:{
           tableId:0,tableName:"detection_template_item_details"
-         }
+         },
+         isShowFileList:false
       }
     }
   },