|
|
@@ -40,17 +40,36 @@
|
|
|
<view class="time">{{item.createdAt}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="list_item_preview" @click="PreviewFile(item)">预览</view>
|
|
|
+ <!-- #ifdef APP-PLUS -->
|
|
|
+ <!-- app端处理 -->
|
|
|
+ <template v-if="['word','excel','pdf','txt'].includes(getFileTypeBySuffix(item?.documentName?.split('.')?.[1] || ''))">
|
|
|
+ <cjx-previewOffice :value="item.documentUrl" :name="item.documentName" :type="getFileTypeBySuffix(item?.documentName?.split('.')?.[1] || '')">
|
|
|
+ <view class="list_item_preview" @click="OpenPreviewFileDialog(item)">预览</view>
|
|
|
+ </cjx-previewOffice>
|
|
|
+ </template>
|
|
|
+ <view v-else class="list_item_preview" @click="OpenPreviewFileDialog(item)">预览</view>
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifndef APP-PLUS -->
|
|
|
+ <!-- 不包含app端 -->
|
|
|
+ <view class="list_item_preview" @click="OpenPreviewFileDialog(item)">预览</view>
|
|
|
+ <!-- #endif -->
|
|
|
</view>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<!-- maxSize:单文件上限 MB;0 表示不限制 maxCount:列表最多文件数 -->
|
|
|
- <kex-file-uploader ref="fileUploader" mode="headless" :max-count="20" :maxSize="100"></kex-file-uploader>
|
|
|
- <view class="upload_file_btn" @click="ChooseUploadFile">
|
|
|
+ <kex-file-uploader ref="fileUploader" mode="headless" :multiple="false" :upload-url="`${apiBaseUrl}/api/v1/teach/oss/file/oss/upload_filesSele`"
|
|
|
+ :upload-options="{
|
|
|
+ name: 'file',
|
|
|
+ header: {
|
|
|
+ Authorization: token
|
|
|
+ }
|
|
|
+ }"
|
|
|
+ :auto-upload="true" :max-count="20" :maxSize="100" @uploadSuccess="onUploadSuccess"></kex-file-uploader>
|
|
|
+ <view class="upload_file_btn" @click="FileChooseUploader">
|
|
|
<uni-icons class="upload_file_btn_icon" type="plusempty"></uni-icons>
|
|
|
<view class="upload_file_btn_text">上传佐证材料</view>
|
|
|
</view>
|
|
|
- <view class="upload_file_list_item" v-for="(item,i) in state.formData.docDatas" :key="item.createdAt" @click="PreviewFile(item)">
|
|
|
+ <view class="upload_file_list_item" v-for="(item,i) in state.formData.docDatas" :key="item.createdAt">
|
|
|
<image class="list_item_icon" src="/static/image/icon/file.png"></image>
|
|
|
<view class="list_item_content">
|
|
|
<view class="item_content_title">{{item.documentName}}</view>
|
|
|
@@ -73,8 +92,12 @@
|
|
|
</view>
|
|
|
<view class="page_foot" v-if="state.type!='view'"><button class="btn_submit" type="primary" :loading="state.loading" @click="honorTypeConfirm">确认</button></view>
|
|
|
</view>
|
|
|
- <!-- 提示框 -->
|
|
|
- <popupPreviewFile ref="popupDialogRef" :filePath="state.previewPopup.filePath"></popupPreviewFile>
|
|
|
+ <!-- 图片 视频预览 -->
|
|
|
+ <popupPreviewFile ref="imgVideoPreview" :fileType="state.previewPopup.fileType" :fileName="state.previewPopup.fileName" :filePath="state.previewPopup.filePath" @ToDownloadFile="ToDownloadFile"></popupPreviewFile>
|
|
|
+ <!-- 默认指H5端 此插件只支持h5 PDF、Word、Excel、PPTX、TXT预览-->
|
|
|
+ <!-- #ifdef H5 -->
|
|
|
+ <wg-h5-preview-file ref="webPreviewFile" />
|
|
|
+ <!-- #endif -->
|
|
|
<!-- 文件、图片下载 -->
|
|
|
<ss-download ref="ssdownload"></ss-download>
|
|
|
</template>
|
|
|
@@ -90,9 +113,15 @@
|
|
|
import uvUpload from '@/uni_modules/uv-upload/components/uv-upload/uv-upload.vue';
|
|
|
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
|
|
|
import ssDownload from '@/uni_modules/ss-download/components/ss-download/ss-download.vue';
|
|
|
- import popupPreviewFile from '@/components/popupPreviewFile.vue';
|
|
|
+ import popupPreviewFile from '@/components/popupPreviewFile.vue';//图片 音视频 zip等预览
|
|
|
+ // #ifdef H5
|
|
|
+ import wgH5PreviewFile from '@/components/wg-h5-preview-file/wg-h5-preview-file.vue';//web端文件预览 'word','excel','pptx','pdf','txt'
|
|
|
+ // #endif
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ import cjxPreviewOffice from '@/uni_modules/cjx-previewOffice/components/cjx-previewOffice/cjx-previewOffice.vue';//APP端文件预览 'word','excel','pdf','txt'
|
|
|
+ // #endif
|
|
|
import {queryHonorTypeDictList,queryHonorDataDetailById,addHonorCertData,updateHonorCertData} from '@/reqApi/teacherHonor.js';
|
|
|
- import { unioformDateTransform,fileSizeConvert } from '@/common/common.js';
|
|
|
+ import { unioformDateTransform,fileSizeConvert,getFileTypeBySuffix } from '@/common/common.js';
|
|
|
import config from '@/config.js'; // 引入配置文件
|
|
|
import {
|
|
|
reactive,
|
|
|
@@ -116,8 +145,10 @@
|
|
|
dynamicFormData:[],//动态表单
|
|
|
dictDatas:[],//动态表单传参
|
|
|
loading:false,
|
|
|
- previewPopup:{
|
|
|
- filePath:''
|
|
|
+ previewPopup:{//文件预览弹框
|
|
|
+ fileType:'',
|
|
|
+ filePath:'',
|
|
|
+ fileName:''
|
|
|
}
|
|
|
})
|
|
|
const todayStr = ref(new Date().toISOString().split('T')[0]);
|
|
|
@@ -126,8 +157,10 @@
|
|
|
certPicDatas: { rules: [{ required: true, errorMessage: '请上传荣誉证书' }] },
|
|
|
});
|
|
|
const fileUploader = ref(null);
|
|
|
- const popupDialogRef = ref(null);
|
|
|
const ssdownload = ref(null);
|
|
|
+ const imgVideoPreview = ref(null);//图片 视频
|
|
|
+ const webPreviewFile = ref(null);//web端文件预览
|
|
|
+ const appPreviewOfficeRef = ref(null);//APP端文件预览
|
|
|
const token = ref(uni.getStorageSync('token'));
|
|
|
const apiBaseUrl = ref('');
|
|
|
onLoad(async(option) => {
|
|
|
@@ -193,6 +226,15 @@
|
|
|
}
|
|
|
//设置动态表单的值
|
|
|
const SetDynamicFormData = (honorTypeDictData) => {
|
|
|
+ const defaultRules = ['honorTypeValue','certPicDatas'];
|
|
|
+ const defaultFormData = ['honorTypeValue','certPicDatas','docDatas','overruleContent','reviewTeacherName'];
|
|
|
+ for (let key in state.formData) {
|
|
|
+ if (!defaultFormData.includes(key)) delete state.formData[key];
|
|
|
+ }
|
|
|
+ for (let key in rules.value) {
|
|
|
+ if (!defaultRules.includes(key)) delete rules.value[key];
|
|
|
+ }
|
|
|
+ rules.value = {...state.defaultRules}
|
|
|
honorTypeDictData.forEach(item=>{
|
|
|
if(item.dictType == 2){//单选
|
|
|
state.formData[`${item.dictShowType}_${item.id}`] = '';
|
|
|
@@ -245,6 +287,7 @@
|
|
|
}
|
|
|
//提交
|
|
|
const honorTypeConfirm = () => {
|
|
|
+ console.log(state.formData,rules.value)
|
|
|
for (const key in rules.value) {
|
|
|
if (state.formData?.[key] === "" || state.formData?.[key] === null || state.formData?.[key]&&state.formData?.[key]?.length === 0) {
|
|
|
const errorMessage = rules.value[key].rules[0].errorMessage;
|
|
|
@@ -380,97 +423,122 @@
|
|
|
})
|
|
|
}
|
|
|
//上传 图片 视频 文档
|
|
|
- const ChooseUploadFile = () => {
|
|
|
- fileUploader.value.chooseFile({//选择上传文件
|
|
|
- count: 1,
|
|
|
- success: (files) => {
|
|
|
- fileUploader.value.upload({//上传单个文件
|
|
|
- url:`${apiBaseUrl.value}/api/v1/teach/oss/file/oss/upload_filesSele`,
|
|
|
- file: files[0],
|
|
|
- name: 'file',
|
|
|
- header: {Authorization: token.value},
|
|
|
- method: 'POST',
|
|
|
- // withCredentials: true, // iOS 本地测远程且要带 cookie
|
|
|
- success: (res) => {
|
|
|
- const result = JSON.parse(res.result);
|
|
|
- state.formData.docDatas.push({
|
|
|
- documentName:result.data.fileName,
|
|
|
- documentUrl:result.data.url,
|
|
|
- fileSize:fileSizeConvert(files?.[0]?.size || 0),
|
|
|
- createdAt:unioformDateTransform(new Date())
|
|
|
- })
|
|
|
- },
|
|
|
- fail: (e) => console.log(e,`${apiBaseUrl.value}/api/v1/teach/oss/file/oss/upload_filesSele`,9999)
|
|
|
- });
|
|
|
- // const fileItem = files[0]
|
|
|
- // // 不使用 fileUploader.value.upload,改用uni原生上传API
|
|
|
- // uni.uploadFile({
|
|
|
- // url: `${apiBaseUrl.value}/api/v1/teach/oss/file/oss/upload_filesSele`,
|
|
|
- // filePath: fileItem.path,
|
|
|
- // name: 'file', //后端接收文件字段名
|
|
|
- // header: {
|
|
|
- // Authorization: token.value
|
|
|
- // },
|
|
|
- // timeout: 120000, //上传超时时间,大文件2分钟
|
|
|
- // success: (res) => {
|
|
|
- // console.log('上传成功',res, res.statusCode, res.data)
|
|
|
- // const result = JSON.parse(res.data);
|
|
|
- // state.formData.docDatas.push({
|
|
|
- // documentName: result.data.fileName,
|
|
|
- // documentUrl: result.data.url,
|
|
|
- // fileSize: fileSizeConvert(fileItem?.size || 0),
|
|
|
- // createdAt: unioformDateTransform(new Date())
|
|
|
- // })
|
|
|
- // },
|
|
|
- // fail: (err) => {
|
|
|
- // //这里打印iOS原生真实错误,不再是组件包装后的“网络错误”
|
|
|
- // console.error('uni.uploadFile原生失败', err)
|
|
|
- // }
|
|
|
- // })
|
|
|
- }
|
|
|
- })
|
|
|
+ const FileChooseUploader = () => {
|
|
|
+ fileUploader.value && fileUploader.value.choose();
|
|
|
+ // fileUploader.value.chooseFile({//选择上传文件
|
|
|
+ // count: 1,
|
|
|
+ // success: (files) => {
|
|
|
+ // fileUploader.value.upload({//上传单个文件
|
|
|
+ // url:`${apiBaseUrl.value}/api/v1/teach/oss/file/oss/upload_filesSele`,
|
|
|
+ // file: files[0],
|
|
|
+ // name: 'file',
|
|
|
+ // header: {Authorization: token.value},
|
|
|
+ // method: 'POST',
|
|
|
+ // // withCredentials: true, // iOS 本地测远程且要带 cookie
|
|
|
+ // success: (res) => {
|
|
|
+ // const result = JSON.parse(res.result);
|
|
|
+ // state.formData.docDatas.push({
|
|
|
+ // documentName:result.data.fileName,
|
|
|
+ // documentUrl:result.data.url,
|
|
|
+ // fileSize:fileSizeConvert(files?.[0]?.size || 0),
|
|
|
+ // createdAt:unioformDateTransform(new Date())
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ // fail: (e) => console.log(e,`${apiBaseUrl.value}/api/v1/teach/oss/file/oss/upload_filesSele`,9999)
|
|
|
+ // });
|
|
|
+ // // const fileItem = files[0]
|
|
|
+ // // // 不使用 fileUploader.value.upload,改用uni原生上传API
|
|
|
+ // // uni.uploadFile({
|
|
|
+ // // url: `${apiBaseUrl.value}/api/v1/teach/oss/file/oss/upload_filesSele`,
|
|
|
+ // // filePath: fileItem.path,
|
|
|
+ // // name: 'file', //后端接收文件字段名
|
|
|
+ // // header: {
|
|
|
+ // // Authorization: token.value
|
|
|
+ // // },
|
|
|
+ // // timeout: 120000, //上传超时时间,大文件2分钟
|
|
|
+ // // success: (res) => {
|
|
|
+ // // console.log('上传成功',res, res.statusCode, res.data)
|
|
|
+ // // const result = JSON.parse(res.data);
|
|
|
+ // // state.formData.docDatas.push({
|
|
|
+ // // documentName: result.data.fileName,
|
|
|
+ // // documentUrl: result.data.url,
|
|
|
+ // // fileSize: fileSizeConvert(fileItem?.size || 0),
|
|
|
+ // // createdAt: unioformDateTransform(new Date())
|
|
|
+ // // })
|
|
|
+ // // },
|
|
|
+ // // fail: (err) => {
|
|
|
+ // // //这里打印iOS原生真实错误,不再是组件包装后的“网络错误”
|
|
|
+ // // console.error('uni.uploadFile原生失败', err)
|
|
|
+ // // }
|
|
|
+ // // })
|
|
|
+ // }
|
|
|
+ // })
|
|
|
}
|
|
|
- //预览
|
|
|
- const PreviewFile = (item) => {
|
|
|
- const fileType = item?.documentName?.split('.')?.[1] || '';
|
|
|
- if(IsImageExts(fileType)){//图片预览
|
|
|
- state.previewPopup.filePath = item.documentUrl;
|
|
|
- popupDialogRef.value.OpenDialog();
|
|
|
- }else{//文件预览
|
|
|
- ToDownloadFile(item)
|
|
|
+ //上传成功
|
|
|
+ const onUploadSuccess = ({
|
|
|
+ index,
|
|
|
+ file, // 当前文件
|
|
|
+ url, // 优先为解析出的远程地址
|
|
|
+ statusCode,
|
|
|
+ data, // 解析后的服务端 JSON(失败则为原始字符串)
|
|
|
+ res, // 原始回调
|
|
|
+ fileList // 当前全部
|
|
|
+ }) => {
|
|
|
+ const result = JSON.parse(res.data || res.result);
|
|
|
+ const fileObj = result?.data;
|
|
|
+ if(fileObj){
|
|
|
+ state.formData.docDatas.push({
|
|
|
+ documentName:fileObj.fileName,
|
|
|
+ documentUrl:fileObj.url,
|
|
|
+ fileSize:fileSizeConvert(file?.size || 0),
|
|
|
+ createdAt:unioformDateTransform(new Date())
|
|
|
+ })
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
- //判断是否是图片
|
|
|
- const IsImageExts = (fileType) => {
|
|
|
- const type = fileType?.toLowerCase();
|
|
|
- const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp','svg', 'tiff', 'tif', 'ico', 'avif', 'heic', 'heif'];
|
|
|
- return imageExts.includes(type)
|
|
|
- }
|
|
|
- //判断是不是视频
|
|
|
- const IsVideoExts = (fileType) => {
|
|
|
- const type = fileType?.toLowerCase();
|
|
|
- const videoExts = [
|
|
|
- 'mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv',
|
|
|
- 'webm', 'm4v', '3gp', 'mpeg', 'mpg', 'mts',
|
|
|
- 'm2ts', 'ts', 'vob', 'ogv', 'ogg', 'rm', 'rmvb'
|
|
|
- ];
|
|
|
- return videoExts.includes(type)
|
|
|
+ //预览
|
|
|
+ const OpenPreviewFileDialog = (item) => {
|
|
|
+ const fileNameSuffix = item?.documentName?.split('.')?.[1] || '';
|
|
|
+ const fileType = getFileTypeBySuffix(fileNameSuffix);
|
|
|
+ console.log(fileType,899)
|
|
|
+ state.previewPopup.fileType = fileType?fileType:fileNameSuffix;
|
|
|
+ state.previewPopup.filePath = item.documentUrl;
|
|
|
+ state.previewPopup.fileName = item.documentName;
|
|
|
+ if(['word','excel','pptx','pdf','txt'].includes(fileType)){
|
|
|
+ // #ifdef H5
|
|
|
+ nextTick(()=>{//h5文件预览
|
|
|
+ webPreviewFile.value && webPreviewFile.value.preview({
|
|
|
+ url: item.documentUrl,
|
|
|
+ type: fileType
|
|
|
+ });
|
|
|
+ })
|
|
|
+ // #endif
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ if(fileType == 'pptx'){
|
|
|
+ imgVideoPreview.value.OpenDialog();
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ }else{
|
|
|
+ imgVideoPreview.value.OpenDialog();
|
|
|
+ }
|
|
|
}
|
|
|
//下载
|
|
|
const ToDownloadFile = (item) => {
|
|
|
- const fileType = item?.documentName?.split('.')?.[1] || '';
|
|
|
+ const fileType = getFileTypeBySuffix(item.fileType);//文件类型
|
|
|
let type = '';
|
|
|
- if(IsImageExts(fileType)){
|
|
|
- type = '1';//1:图片 2 文档 3 视频
|
|
|
- }else if(IsVideoExts(fileType)){
|
|
|
- type = '3';
|
|
|
- }else{
|
|
|
+ if(fileType == 'image'){
|
|
|
+ type = '1';//1:图片 2 文档
|
|
|
+ }else if(['word','excel','pptx','pdf','txt'].includes(fileType)){
|
|
|
type = '2';
|
|
|
+ }else if(fileType == 'video'){
|
|
|
+ type = '3';
|
|
|
+ }else {
|
|
|
+ type = '';
|
|
|
}
|
|
|
ssdownload?.value?.toDownload({
|
|
|
- type:fileType,
|
|
|
- src:item.documentUrl,
|
|
|
- fileName:item.documentName
|
|
|
+ type:type,
|
|
|
+ src:item.filePath,
|
|
|
+ fileName:item.fileName
|
|
|
});
|
|
|
}
|
|
|
const GoBack = () => {
|
|
|
@@ -618,6 +686,7 @@
|
|
|
font-size: 28rpx;
|
|
|
color: #333333;
|
|
|
word-break: break-all;
|
|
|
+ text-align: left;
|
|
|
// white-space: nowrap;
|
|
|
// overflow: hidden;
|
|
|
// text-overflow: ellipsis;
|
|
|
@@ -649,6 +718,12 @@
|
|
|
color: #999999 !important;
|
|
|
font-size: 48rpx !important;
|
|
|
}
|
|
|
+ .container{
|
|
|
+ width: auto;
|
|
|
+ .file_content{
|
|
|
+ width: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
.list_item_preview{
|
|
|
flex-shrink: 0;
|
|
|
font-weight: 400;
|