yangjun
/
dbsd_kczx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改bug

This commit is contained in:
yangjun 2024-08-05 10:02:34 +08:00
parent b4a7b8f07e
commit 4bd1531ef5
9 changed files with 776 additions and 705 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

436
src/components/Form/src/jeecg/components/JUpload/JUpload.vue
View File

@ -28,30 +28,30 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, reactive, computed, watch, nextTick, createApp, unref } from 'vue'; import { ref, reactive, computed, watch, nextTick, createApp, unref } from 'vue';
import { Icon } from '/@/components/Icon'; import { Icon } from '/@/components/Icon';
import { getToken } from '/@/utils/auth'; import { getToken } from '/@/utils/auth';
import { uploadUrl, baseUploadUrl } from '/@/api/common/api'; import { uploadUrl, baseUploadUrl } from '/@/api/common/api';
import { propTypes } from '/@/utils/propTypes'; import { propTypes } from '/@/utils/propTypes';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import { createImgPreview } from '/@/components/Preview/index'; import { createImgPreview } from '/@/components/Preview/index';
import { useAttrs } from '/@/hooks/core/useAttrs'; import { useAttrs } from '/@/hooks/core/useAttrs';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '/@/hooks/web/useDesign';
import { UploadTypeEnum } from './upload.data'; import { UploadTypeEnum } from './upload.data';
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils'; import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
import UploadItemActions from './components/UploadItemActions.vue'; import UploadItemActions from './components/UploadItemActions.vue';
import { defHttp } from '/@/utils/http/axios'; import { defHttp } from '/@/utils/http/axios';
import { buildUUID } from '/@/utils/uuid'; import { buildUUID } from '/@/utils/uuid';
import CryptoJS from 'crypto-js'; import CryptoJS from 'crypto-js';
import { downloadFile as ajaxDownloadFileFn } from '/@/api/common/api'; import { downloadFile as ajaxDownloadFileFn } from '/@/api/common/api';
const spinning = ref<boolean>(false); const spinning = ref<boolean>(false);
const { createMessage, createConfirm } = useMessage(); const { createMessage, createConfirm } = useMessage();
const { prefixCls } = useDesign('j-upload'); const { prefixCls } = useDesign('j-upload');
const attrs = useAttrs(); const attrs = useAttrs();
const emit = defineEmits(['change', 'update:value']); const emit = defineEmits(['change', 'update:value']);
const props = defineProps({ const props = defineProps({
value: propTypes.oneOfType([propTypes.string, propTypes.array]), value: propTypes.oneOfType([propTypes.string, propTypes.array]),
text: propTypes.string.def('上传'), text: propTypes.string.def('上传'),
fileType: propTypes.string.def(UploadTypeEnum.all), fileType: propTypes.string.def(UploadTypeEnum.all),
@ -83,24 +83,24 @@
//后加的，查询biz参数 //后加的，查询biz参数
getBizParam: propTypes.object.def({}), getBizParam: propTypes.object.def({}),
disabled: propTypes.bool.def(false), disabled: propTypes.bool.def(false),
}); });
const otherData = ref<Object>({}); const otherData = ref<Object>({});
const otherClass = ref<Object>({}); const otherClass = ref<Object>({});
const headers = reactive({ const headers = reactive({
'X-Access-Token': getToken(), 'X-Access-Token': getToken(),
}); });
const fileList = ref<any[]>([]); const fileList = ref<any[]>([]);
const uploadGoOn = ref<boolean>(true); const uploadGoOn = ref<boolean>(true);
// refs // refs
const containerRef = ref(); const containerRef = ref();
// 是否达到了最大上传数量 // 是否达到了最大上传数量
const isMaxCount = computed(() => props.maxCount > 0 && fileList.value.length >= props.maxCount); const isMaxCount = computed(() => props.maxCount > 0 && fileList.value.length >= props.maxCount);
// 当前是否是上传图片模式 // 当前是否是上传图片模式
const isImageMode = computed(() => props.fileType === UploadTypeEnum.image); const isImageMode = computed(() => props.fileType === UploadTypeEnum.image);
// 合并 props 和 attrs // 合并 props 和 attrs
const bindProps = computed(() => { const bindProps = computed(() => {
const bind: any = Object.assign({}, props, unref(attrs)); const bind: any = Object.assign({}, props, unref(attrs));
bind.name = 'file'; bind.name = 'file';
bind.listType = isImageMode.value ? 'picture-card' : 'text'; bind.listType = isImageMode.value ? 'picture-card' : 'text';
@ -109,7 +109,7 @@
//update-begin-author:taoyan date:20220407 for: 自定义beforeUpload return false，并不能中断上传过程 //update-begin-author:taoyan date:20220407 for: 自定义beforeUpload return false，并不能中断上传过程
if (!bind.beforeUpload) { if (!bind.beforeUpload) {
bind.beforeUpload = onBeforeUpload; bind.beforeUpload = onBeforeUpload;
} else if(!bind.forceBeforeUploadFn){ } else if (!bind.forceBeforeUploadFn) {
//强制使用 //强制使用
bind.beforeUpload = onBeforeUpload; bind.beforeUpload = onBeforeUpload;
} }
@ -119,9 +119,9 @@
bind.accept = 'image/*'; bind.accept = 'image/*';
} }
return bind; return bind;
}); });
watch( watch(
() => props.value, () => props.value,
(val) => { (val) => {
if (Array.isArray(val)) { if (Array.isArray(val)) {
@ -135,34 +135,34 @@
} }
}, },
{ immediate: true } { immediate: true }
); );
watch(fileList, () => nextTick(() => addActionsListener()), { immediate: true }); watch(fileList, () => nextTick(() => addActionsListener()), { immediate: true });
const loadBizFn = (params) => defHttp.get({ url: '/ktgl/kcKetangbiao/getBizPath', params }, { isTransformResponse: false }) const loadBizFn = (params) => defHttp.get({ url: '/ktgl/kcKetangbiao/getBizPath', params }, { isTransformResponse: false });
function loadBiz(param){ function loadBiz(param) {
otherData.value.loading = true; otherData.value.loading = true;
// otherClass.value = { 'upload-disabled': true, } // otherClass.value = { 'upload-disabled': true, }
loadBizFn(param).then(res => { loadBizFn(param).then((res) => {
//otherData.value //otherData.value
if(res.success){ if (res.success) {
otherData.value.biz = res.result; otherData.value.biz = res.result;
}else{ } else {
delete otherData.value.biz; delete otherData.value.biz;
} }
// otherClass.value = {} // otherClass.value = {}
delete otherData.value.loading; delete otherData.value.loading;
}); });
} }
watch(
watch(() => props.getBizParam, () => props.getBizParam,
(param, oldParam) => { (param, oldParam) => {
if(JSON.stringify(param) != JSON.stringify(oldParam)){ if (JSON.stringify(param) != JSON.stringify(oldParam)) {
nextTick(() => { nextTick(() => {
console.log(`🚀 ~ props.isGetBiz:`, props.isGetBiz, bindProps.value.disabled, loadBiz); console.log(`🚀 ~ props.isGetBiz:`, props.isGetBiz, bindProps.value.disabled, loadBiz);
if(props.isGetBiz && !bindProps.value.disabled){ if (props.isGetBiz && !bindProps.value.disabled) {
//非被禁用状态，查询 //非被禁用状态，查询
nextTick(() => { nextTick(() => {
loadBiz(param); loadBiz(param);
@ -172,12 +172,12 @@
} }
}, },
{ immediate: true } { immediate: true }
); );
const antUploadItemCls = 'ant-upload-list-item'; const antUploadItemCls = 'ant-upload-list-item';
// Listener // Listener
function addActionsListener() { function addActionsListener() {
if (!isImageMode.value) { if (!isImageMode.value) {
return; return;
} }
@ -191,10 +191,10 @@
uploadItem.addEventListener('mouseover', onAddActionsButton); uploadItem.addEventListener('mouseover', onAddActionsButton);
} }
} }
} }
// 添加可左右移动的按钮 // 添加可左右移动的按钮
function onAddActionsButton(event) { function onAddActionsButton(event) {
const getUploadItem = () => { const getUploadItem = () => {
for (const path of event.path) { for (const path of event.path) {
if (path.classList.contains(antUploadItemCls)) { if (path.classList.contains(antUploadItemCls)) {
@ -226,10 +226,10 @@
actions[0].appendChild(div); actions[0].appendChild(div);
uploadItem.setAttribute('data-has-actions', 'true'); uploadItem.setAttribute('data-has-actions', 'true');
uploadItem.removeEventListener('mouseover', onAddActionsButton); uploadItem.removeEventListener('mouseover', onAddActionsButton);
} }
// 解析数据库存储的逗号分割 // 解析数据库存储的逗号分割
function parsePathsValue(paths) { function parsePathsValue(paths) {
if (!paths || paths.length == 0) { if (!paths || paths.length == 0) {
fileList.value = []; fileList.value = [];
return; return;
@ -246,10 +246,10 @@
}); });
} }
fileList.value = list; fileList.value = list;
} }
// 解析数组值 // 解析数组值
function parseArrayValue(array) { function parseArrayValue(array) {
if (!array || array.length == 0) { if (!array || array.length == 0) {
fileList.value = []; fileList.value = [];
return; return;
@ -266,10 +266,10 @@
}); });
} }
fileList.value = list; fileList.value = list;
} }
// 文件上传之前的操作 // 文件上传之前的操作
function onBeforeUpload(file) { function onBeforeUpload(file) {
uploadGoOn.value = true; uploadGoOn.value = true;
if (isImageMode.value) { if (isImageMode.value) {
if (file.type.indexOf('image') < 0) { if (file.type.indexOf('image') < 0) {
@ -279,15 +279,17 @@
} }
} }
//扩展验证(目前仅支持扩展名验证) //扩展验证(目前仅支持扩展名验证)
if(props.forceAcceptVerify){ if (props.forceAcceptVerify) {
let fileName = file?.name; let fileName = file?.name;
if(fileName.indexOf('.')){ console.log('👩‍⚕️', fileName);
let suffix = fileName.split('.')[1]; if (fileName.indexOf('.')) {
let suffix = fileName.split('.').pop().toLowerCase();
console.log('🤶', suffix);
let fileTypes = unref(bindProps).accept; let fileTypes = unref(bindProps).accept;
if(fileTypes){ if (fileTypes) {
if(fileTypes.indexOf(',')){ if (fileTypes.indexOf(',')) {
let typeList = fileTypes.split(','); let typeList = fileTypes.split(',');
if(typeList.indexOf('.' + suffix) == -1){ if (typeList.indexOf('.' + suffix) == -1) {
createMessage.warning('请上传【*' + typeList.join(',*') + '】格式的文件'); createMessage.warning('请上传【*' + typeList.join(',*') + '】格式的文件');
uploadGoOn.value = false; uploadGoOn.value = false;
return false; return false;
@ -299,13 +301,13 @@
// 扩展 beforeUpload 验证 // 扩展 beforeUpload 验证
if (typeof props.beforeUpload === 'function') { if (typeof props.beforeUpload === 'function') {
return props.beforeUpload(file, unref(bindProps), () => uploadGoOn.value = false ); return props.beforeUpload(file, unref(bindProps), () => (uploadGoOn.value = false));
} }
return true; return true;
} }
// 删除处理事件 // 删除处理事件
function onRemove() { function onRemove() {
if (props.removeConfirm) { if (props.removeConfirm) {
return new Promise((resolve) => { return new Promise((resolve) => {
createConfirm({ createConfirm({
@ -318,10 +320,10 @@
}); });
} }
return true; return true;
} }
// upload组件change事件 // upload组件change事件
function onFileChange(info) { function onFileChange(info) {
if (!info.file.status && uploadGoOn.value === false) { if (!info.file.status && uploadGoOn.value === false) {
info.fileList.pop(); info.fileList.pop();
} }
@ -367,16 +369,16 @@
fileSize: item.size, fileSize: item.size,
}; };
newFileList.push(fileJson); newFileList.push(fileJson);
}else{ } else {
return; return;
} }
} }
emitValue(newFileList); emitValue(newFileList);
} }
} }
} }
function handlePathChange() { function handlePathChange() {
let uploadFiles = fileList.value; let uploadFiles = fileList.value;
let path = ''; let path = '';
if (!uploadFiles || uploadFiles.length == 0) { if (!uploadFiles || uploadFiles.length == 0) {
@ -394,24 +396,24 @@
path = pathList.join(','); path = pathList.join(',');
} }
emitValue(path); emitValue(path);
} }
// 预览文件、图片 // 预览文件、图片
function onFilePreview(file) { function onFilePreview(file) {
if (isImageMode.value) { if (isImageMode.value) {
createImgPreview({ imageList: [file.url], maskClosable: true }); createImgPreview({ imageList: [file.url], maskClosable: true });
} else { } else {
// window.open(file.url); // window.open(file.url);
openWindowWithLoading(file.url); openWindowWithLoading(file.url);
} }
} }
/** /**
* 自定义下载事件，带加载中 * 自定义下载事件，带加载中
*/ */
function openWindowWithLoading(url){ function openWindowWithLoading(url) {
spinning.value = true; spinning.value = true;
let fileName = url.substring(url.lastIndexOf("/")+1); let fileName = url.substring(url.lastIndexOf('/') + 1);
let uploadAxiosHttpConfig = { let uploadAxiosHttpConfig = {
//超时时间，分钟 * 秒 * 毫秒 60分钟 //超时时间，分钟 * 秒 * 毫秒 60分钟
timeout: 60 * 60 * 1000, timeout: 60 * 60 * 1000,
@ -420,9 +422,17 @@
//自定义前缀 //自定义前缀
apiUrl: '', apiUrl: '',
//不自动处理 //不自动处理
isTransformResponse: false isTransformResponse: false,
} };
ajaxDownloadFileFn(url, fileName, {}, () => { spinning.value = false; }, uploadAxiosHttpConfig); ajaxDownloadFileFn(
url,
fileName,
{},
() => {
spinning.value = false;
},
uploadAxiosHttpConfig
);
//spinning.value = false; //spinning.value = false;
// let xhr = new XMLHttpRequest(); // let xhr = new XMLHttpRequest();
// xhr.open('GET',url,true); // xhr.open('GET',url,true);
@ -448,60 +458,60 @@
// } // }
// spinning.value = false; // spinning.value = false;
// } // }
} }
function emitValue(value) { function emitValue(value) {
emit('change', value); emit('change', value);
emit('update:value', value); emit('update:value', value);
} }
function uidGenerator() { function uidGenerator() {
return '-' + parseInt(Math.random() * 10000 + 1, 10); return '-' + parseInt(Math.random() * 10000 + 1, 10);
} }
function getFileName(path) { function getFileName(path) {
if (path.lastIndexOf('\\') >= 0) { if (path.lastIndexOf('\\') >= 0) {
let reg = new RegExp('\\\\', 'g'); let reg = new RegExp('\\\\', 'g');
path = path.replace(reg, '/'); path = path.replace(reg, '/');
} }
return path.substring(path.lastIndexOf('/') + 1); return path.substring(path.lastIndexOf('/') + 1);
} }
// //获取文件md5（仅支持小文件，，，弃用） // //获取文件md5（仅支持小文件，，，弃用）
// function calculateFileMd5(file) { // function calculateFileMd5(file) {
// return new Promise((resolve, reject) => { // return new Promise((resolve, reject) => {
// const reader = new FileReader(); // const reader = new FileReader();
// // 当文件被成功读取时调用onload事件 // // 当文件被成功读取时调用onload事件
// reader.onload = function (event) { // reader.onload = function (event) {
// const arrayBufferView = event.target.result; // const arrayBufferView = event.target.result;
// // 将ArrayBuffer转换为WordArray对象 // // 将ArrayBuffer转换为WordArray对象
// const wordArray = CryptoJS.lib.WordArray.create(arrayBufferView); // const wordArray = CryptoJS.lib.WordArray.create(arrayBufferView);
// // 计算MD5哈希值 // // 计算MD5哈希值
// const md5Hash = CryptoJS.MD5(wordArray).toString(); // const md5Hash = CryptoJS.MD5(wordArray).toString();
// resolve(md5Hash); // resolve(md5Hash);
// }; // };
// // 当发生错误时调用onerror事件 // // 当发生错误时调用onerror事件
// reader.onerror = function () { // reader.onerror = function () {
// reject('Failed to read file'); // reject('Failed to read file');
// }; // };
// // 开始读取文件内容 // // 开始读取文件内容
// reader.readAsArrayBuffer(file); // reader.readAsArrayBuffer(file);
// }); // });
// } // }
/** /**
* 计算文件md5（分批次计算，挺慢的，支持大文件） * 计算文件md5（分批次计算，挺慢的，支持大文件）
*/ */
function calFileMd5(file){ function calFileMd5(file) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let md5 = CryptoJS.algo.MD5.create(); let md5 = CryptoJS.algo.MD5.create();
//获取文件对象 //获取文件对象
let reader = new FileReader(); let reader = new FileReader();
let step = 1024* 1024; let step = 1024 * 1024;
let total = file.size; let total = file.size;
let cuLoaded = 0; let cuLoaded = 0;
let time=1; let time = 1;
console.info("文件大小：" + file.size); console.info('文件大小：' + file.size);
//读取一段成功 //读取一段成功
reader.onload = (e) => { reader.onload = (e) => {
//console.log("开始读取第"+time+"段"); //console.log("开始读取第"+time+"段");
@ -519,11 +529,11 @@
resolve(hash + buildUUID()); resolve(hash + buildUUID());
} }
time++; time++;
} };
reader.onerror = (e) => { reader.onerror = (e) => {
console.error('读取文件MD5出现错误 =>',e); console.error('读取文件MD5出现错误 =>', e);
reject(e); reject(e);
} };
//开始读取 //开始读取
readBlob(0); readBlob(0);
//指定开始位置，分块读取文件 //指定开始位置，分块读取文件
@ -533,18 +543,15 @@
reader.readAsArrayBuffer(blob); reader.readAsArrayBuffer(blob);
} }
}); });
} }
function calFileUid(file){ function calFileUid(file) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
resolve(buildUUID()); resolve(buildUUID());
}); });
} }
//请求接口的数据返回
//请求接口的数据返回
// function upSearch(data){ // function upSearch(data){
// return new Promise((resolve,reject)=>{ // return new Promise((resolve,reject)=>{
// setTimeout(()=>{ // setTimeout(()=>{
@ -585,30 +592,29 @@
//limitUp([1,2,3,4,5,6,7,8], 3) //limitUp([1,2,3,4,5,6,7,8], 3)
async function limitPromise(promises, limit) {
const results = [];
async function limitPromise(promises, limit) { for (let i = 0; i <= promises.length; i += limit) {
const results = [] const tasks = [];
for(let i=0; i<=promises.length; i+=limit) {
const tasks = []
// 切片 Promise.all 的参数 // 切片 Promise.all 的参数
for(const promise of promises.slice(i, i + limit)) { for (const promise of promises.slice(i, i + limit)) {
tasks.push(promise) tasks.push(promise);
} }
// 用 await 以确保后面的任务不会在执行当前任务时执行 // 用 await 以确保后面的任务不会在执行当前任务时执行
const result = await Promise.all(tasks) const result = await Promise.all(tasks);
results.push(...result) results.push(...result);
} }
return results return results;
} }
//分片大小 5m //分片大小 5m
const chunkSize = 5 * 1024 * 1024; const chunkSize = 5 * 1024 * 1024;
const runBatchNum = 20; const runBatchNum = 20;
const uploadAxiosHttpConfig = { const uploadAxiosHttpConfig = {
//超时时间，分钟 * 秒 * 毫秒 60分钟 //超时时间，分钟 * 秒 * 毫秒 60分钟
timeout: 60 * 60 * 1000, timeout: 60 * 60 * 1000,
//不自动拼接前缀 //不自动拼接前缀
@ -616,62 +622,64 @@
//自定义前缀 //自定义前缀
apiUrl: baseUploadUrl, apiUrl: baseUploadUrl,
//不自动处理 //不自动处理
isTransformResponse: false isTransformResponse: false,
} };
const defUploadFn = (params) => defHttp.post({ url: '/sys/common/upload', params }, uploadAxiosHttpConfig ); const defUploadFn = (params) => defHttp.post({ url: '/sys/common/upload', params }, uploadAxiosHttpConfig);
const bigFileUploadInit = (params) => defHttp.post({ url: '/sys/common/sectionUpload/init', params }, uploadAxiosHttpConfig ); const bigFileUploadInit = (params) => defHttp.post({ url: '/sys/common/sectionUpload/init', params }, uploadAxiosHttpConfig);
const bigFileUploadUpload = (params) => defHttp.post({ url: '/sys/common/sectionUpload/upload', params }, uploadAxiosHttpConfig ); const bigFileUploadUpload = (params) => defHttp.post({ url: '/sys/common/sectionUpload/upload', params }, uploadAxiosHttpConfig);
const bigFileUploadEnd = (params) => defHttp.post({ url: '/sys/common/sectionUpload/end', params }, uploadAxiosHttpConfig) const bigFileUploadEnd = (params) => defHttp.post({ url: '/sys/common/sectionUpload/end', params }, uploadAxiosHttpConfig);
/** /**
* 自定义文件上传方法，小于5m的走默认上传，大于5m的走切片上传 * 自定义文件上传方法，小于5m的走默认上传，大于5m的走切片上传
*/ */
function uploadFn(customRequestData){ function uploadFn(customRequestData) {
const { data, file, onProgress, onSuccess, onError } = customRequestData; // 解构出a-upload的内置的方法（进度条，成功失败等） const { data, file, onProgress, onSuccess, onError } = customRequestData; // 解构出a-upload的内置的方法（进度条，成功失败等）
let fileSize = file.size; let fileSize = file.size;
let uploadPromiseList = []; let uploadPromiseList = [];
if(fileSize <= chunkSize){ if (fileSize <= chunkSize) {
let formData = new FormData(); let formData = new FormData();
Object.keys(data).forEach(key => { Object.keys(data).forEach((key) => {
formData.append(key, data[key]); formData.append(key, data[key]);
}); });
formData.append('file', file); formData.append('file', file);
//传统直传 //传统直传
defUploadFn(formData).then(res => { defUploadFn(formData)
.then((res) => {
console.log(`🚀 ~ 传统直传 - defUploadFn ~ res:`, res); console.log(`🚀 ~ 传统直传 - defUploadFn ~ res:`, res);
if(res.success){ if (res.success) {
onProgress({ percent: 100 }, file) // 进度条 onProgress({ percent: 100 }, file); // 进度条
onSuccess(res, file) // 上传文件的状态 onSuccess(res, file); // 上传文件的状态
} else { } else {
onError(res, res, file); onError(res, res, file);
} }
}).catch(err => { })
.catch((err) => {
console.log(`🚀 ~ 传统直传 - defUploadFn ~ err:`, err); console.log(`🚀 ~ 传统直传 - defUploadFn ~ err:`, err);
onError(err, err, file); onError(err, err, file);
}); });
} else { } else {
//计算当前选择文件需要的分片数量 //计算当前选择文件需要的分片数量
const chunkCount = Math.ceil(fileSize / chunkSize); const chunkCount = Math.ceil(fileSize / chunkSize);
console.log("文件大小：",(file.size / 1024 / 1024) + "Mb","分片数：",chunkCount); console.log('文件大小：', file.size / 1024 / 1024 + 'Mb', '分片数：', chunkCount);
//获取文件md5 //获取文件md5
console.log('第一步，计算文件的md5',calFileMd5, file); console.log('第一步，计算文件的md5', calFileMd5, file);
calFileMd5(file).then(fileMd5 => { calFileMd5(file).then((fileMd5) => {
console.log(`🚀 ~ 文件的md5是:`, fileMd5); console.log(`🚀 ~ 文件的md5是:`, fileMd5);
const initUploadParams = { chunkCount, fileMd5 , ...data, }; const initUploadParams = { chunkCount, fileMd5, ...data };
let successNum = 0; let successNum = 0;
let taskAllList = []; let taskAllList = [];
//切片上传（开始） //切片上传（开始）
console.log('第二步，根据md5创建文件夹', initUploadParams); console.log('第二步，根据md5创建文件夹', initUploadParams);
bigFileUploadInit(initUploadParams).then(res => { bigFileUploadInit(initUploadParams).then((res) => {
console.log('第三步，准备切片文件', res); console.log('第三步，准备切片文件', res);
if(res.success){ if (res.success) {
onProgress({ percent: 0 }, file); // 进度条 onProgress({ percent: 0 }, file); // 进度条
//后台创建成功，下一步，分批次上传 //后台创建成功，下一步，分批次上传
for (let i = 1; i <= chunkCount; i++) { for (let i = 1; i <= chunkCount; i++) {
@ -679,94 +687,96 @@
partNumber: i, partNumber: i,
...initUploadParams, ...initUploadParams,
file: null, file: null,
} };
//分片开始位置 //分片开始位置
let start = (i - 1) * chunkSize let start = (i - 1) * chunkSize;
//分片结束位置 //分片结束位置
let end = Math.min(fileSize, start + chunkSize) let end = Math.min(fileSize, start + chunkSize);
//取文件指定范围内的byte，从而得到分片数据 //取文件指定范围内的byte，从而得到分片数据
let _chunkFile = file.slice(start, end) let _chunkFile = file.slice(start, end);
console.log("第四步，开始准备文件第" + i + "个分片" + "，切片范围从" + start + "到" + end) console.log('第四步，开始准备文件第' + i + '个分片' + '，切片范围从' + start + '到' + end);
uploadParams.file = _chunkFile; uploadParams.file = _chunkFile;
let uploadFormData = new FormData(); let uploadFormData = new FormData();
Object.keys(uploadParams).forEach(key => { Object.keys(uploadParams).forEach((key) => {
uploadFormData.append(key, uploadParams[key]); uploadFormData.append(key, uploadParams[key]);
}); });
console.log('第五步，准备切片文件上传参数', uploadFormData); console.log('第五步，准备切片文件上传参数', uploadFormData);
taskAllList.push(new Promise((resolve, reject) => { taskAllList.push(
new Promise((resolve, reject) => {
console.log('第六步，准备切片文件上传前，', uploadFormData); console.log('第六步，准备切片文件上传前，', uploadFormData);
bigFileUploadUpload(uploadFormData).then(res => { bigFileUploadUpload(uploadFormData)
.then((res) => {
console.log('第七步，切片文件上传后，', uploadFormData, res); console.log('第七步，切片文件上传后，', uploadFormData, res);
if(res.success) { if (res.success) {
successNum++; successNum++;
let percent = Number(Number(successNum/chunkCount*100).toFixed(0)) let percent = Number(Number((successNum / chunkCount) * 100).toFixed(0));
onProgress({ percent }, file) // 进度条 onProgress({ percent }, file); // 进度条
resolve(res); resolve(res);
}else{ } else {
reject(res); reject(res);
} }
}).catch(err => { })
reject(err) .catch((err) => {
reject(err);
}); });
})); })
);
} }
//任务分片,一次20片 //任务分片,一次20片
console.log('第八步，全部切片，根据指定线程数执行，', limitPromise, taskAllList); console.log('第八步，全部切片，根据指定线程数执行，', limitPromise, taskAllList);
limitPromise(taskAllList, runBatchNum).then(resList => { limitPromise(taskAllList, runBatchNum)
.then((resList) => {
console.log('第九步，全部切片，根据指定线程数执行完成后的结果，', resList); console.log('第九步，全部切片，根据指定线程数执行完成后的结果，', resList);
//完成后再执行一个合并 //完成后再执行一个合并
let endUploadParams = { let endUploadParams = {
...initUploadParams, ...initUploadParams,
fileName: file.name, fileName: file.name,
} };
console.log('第十步，全部切片，发生合并指令，', endUploadParams); console.log('第十步，全部切片，发生合并指令，', endUploadParams);
bigFileUploadEnd(endUploadParams).then(res => { bigFileUploadEnd(endUploadParams)
.then((res) => {
console.log(`第十一步 ~ 合并返回值 defHttp.post ~ res:`, res); console.log(`第十一步 ~ 合并返回值 defHttp.post ~ res:`, res);
//返回跟单个上传一样的返回值， //返回跟单个上传一样的返回值，
if(res.success){ if (res.success) {
onProgress({ percent: 100 }, file) // 进度条 onProgress({ percent: 100 }, file); // 进度条
onSuccess(res, file) // 上传文件的状态 onSuccess(res, file); // 上传文件的状态
} else { } else {
onError(res, res, file); onError(res, res, file);
} }
})
}).catch(err => { .catch((err) => {
console.error(`🚀 ~ 合并出现错误！ defHttp.post ~ err:`, err); console.error(`🚀 ~ 合并出现错误！ defHttp.post ~ err:`, err);
onError(err, err, file); onError(err, err, file);
});
}) })
}).catch(err => { .catch((err) => {
console.error(`🚀 ~ 全部完成后，其中有错误limitPromise ~ err:`, err); console.error(`🚀 ~ 全部完成后，其中有错误limitPromise ~ err:`, err);
//有错误，， //有错误，，
onError(err, err, file); onError(err, err, file);
}); });
} }
//return //return
}) });
});
})
} }
// Promise.all(uploadPromiseList).then(resList => { // Promise.all(uploadPromiseList).then(resList => {
// }); // });
} }
defineExpose({ defineExpose({
addActionsListener, addActionsListener,
}); });
</script> </script>
<style lang="less"> <style lang="less">
//noinspection LessUnresolvedVariable //noinspection LessUnresolvedVariable
@prefix-cls: ~'@{namespace}-j-upload'; @prefix-cls: ~'@{namespace}-j-upload';
.@{prefix-cls} { .@{prefix-cls} {
&-container { &-container {
position: relative; position: relative;
@ -834,14 +844,14 @@
} }
} }
} }
} }
.example { .example {
text-align: center; text-align: center;
background: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0);
border-radius: 4px; border-radius: 4px;
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
} }
</style> </style>

2
src/views/site/studentWdkc/teacherDbtx.vue
View File

@ -6,7 +6,7 @@
<a-tabs v-model:activeKey="activeKey" style="padding: 10px"> <a-tabs v-model:activeKey="activeKey" style="padding: 10px">
<a-tab-pane key="1" tab="未读"> <a-tab-pane key="1" tab="未读">
<div style="width: 100%; text-align: right; "> <div style="width: 100%; text-align: right; ">
<RouterLink target='_blank' to="/site/teacherYiyueMore">查看更多</RouterLink> <RouterLink target='_blank' to="/site/teacherWeiduMore">查看更多</RouterLink>
</div> </div>
<div style="min-height: 70px"> <div style="min-height: 70px">
<a-row> <a-row>

4
src/views/site/studentWdkc/teacherWeiduMore.vue
View File

@ -8,7 +8,7 @@
<a-layout-content> <a-layout-content>
<a-card class="rowGutter" id="jcgkkDom"> <a-card class="rowGutter" id="jcgkkDom">
<template #title> <template #title>
<div style="font-size: 24px; font-weight: bold">已读信息</div> <div style="font-size: 24px; font-weight: bold">未读信息</div>
</template> </template>
<a-row :gutter="[16, 16]" style="margin-top: 20px"> <a-row :gutter="[16, 16]" style="margin-top: 20px">
<a-col v-for="(item, index) in listData" :key="index" :span="24"> <a-col v-for="(item, index) in listData" :key="index" :span="24">
@ -17,7 +17,7 @@
<div style="margin-top: 5px">{{ index + 1 }}、{{ item.content }}</div> <div style="margin-top: 5px">{{ index + 1 }}、{{ item.content }}</div>
</a-col> </a-col>
<a-col :span="2" style="text-align: right"> <a-col :span="2" style="text-align: right">
<a-button type="primary" @click="openKecheng(item)" style="margin-left: 10px">已读</a-button> <a-button type="primary" @click="openKecheng(item)" style="margin-left: 10px">查看</a-button>
</a-col> </a-col>
</a-row> </a-row>
</a-col> </a-col>

46
src/views/zy/jiaoXueDanYuanNeiRong/index.vue
View File

@ -380,7 +380,7 @@ import { Input, Popover, Pagination, Empty, Affix as aAffix } from 'ant-design-v
import { defHttp } from '/@/utils/http/axios'; import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { randomString, simpleDebounce, getFileAccessHttpUrl } from '/@/utils/common/compUtils'; import { randomString, simpleDebounce, getFileAccessHttpUrl, baseApiUrl } from '/@/utils/common/compUtils';
import { useFileList } from '/@/components/jeecg/comment/useComment'; import { useFileList } from '/@/components/jeecg/comment/useComment';
import draggable from 'vuedraggable'; import draggable from 'vuedraggable';
@ -391,6 +391,11 @@ import stuIndex from './stuIndex.vue';
import { downloadFile as ajaxDownloadFileFn } from '/@/api/common/api'; import { downloadFile as ajaxDownloadFileFn } from '/@/api/common/api';
import zykYylistPage from '/@/views/zyk/ZykInfoYinyongModal.vue'; import zykYylistPage from '/@/views/zyk/ZykInfoYinyongModal.vue';
import Base64 from 'crypto-js/enc-base64';
import { dataURLtoBlob, urlToBase64 } from '/@/utils/file/base64Conver';
import UTF8 from 'crypto-js/enc-utf8';
import { encryptByBase64 } from '/@/utils/cipher';
const spinning = ref<boolean>(false); const spinning = ref<boolean>(false);
//当前路由信息 //当前路由信息
const { currentRoute } = useRouter(); const { currentRoute } = useRouter();
@ -416,6 +421,8 @@ const videoOpen = ref<boolean>(false);
const controls = ref(true); const controls = ref(true);
const autoplay = ref(false); const autoplay = ref(false);
const loop = ref(false); const loop = ref(false);
// 文件预览地址的domain 在后台配置的
let onlinePreviewDomain = '';
const playVideoInFullscreen = async () => { const playVideoInFullscreen = async () => {
console.log('💋', videoPlayer); console.log('💋', videoPlayer);
@ -472,7 +479,7 @@ enum Api {
delThree = '/teachingunitcontent/kcTeachingUnitContentThree/delete', delThree = '/teachingunitcontent/kcTeachingUnitContentThree/delete',
} }
function handleView(urlPath){ function handleView(urlPath) {
// var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址 // var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址
// window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(base64Encode(url))); // window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(base64Encode(url)));
} }
@ -801,20 +808,47 @@ function editThreePage(two, three, threeIndex) {
threePageData.value = { two, three, threeIndex }; threePageData.value = { two, three, threeIndex };
} }
function viewThreePage(three) { async function viewThreePage(three) {
console.log('🙇‍♂️', three); console.log('🙇‍♂️', three);
if (three.value.type == 'video') { if (three.type == 'video') {
handleVideo(three); handleVideo(three);
} else if (three.value.type == 'document') { } else if (three.type == 'document') {
// var file = 'https://kczxcs.nenu.edu.cn/jeecg-boot/temp/0731课程作业问题汇总_1722673666833.docx';
// var file = baseApiUrl + "/"+three.filePath;
// console.log('🤬', file);
// let url = getFileAccessHttpUrl(encodeURIComponent(file));
// var t2 = encryptByBase64(url);
// window.open('https://fileview.jeecg.com/onlinePreview?url=' + encodeURIComponent(t2));
} else if (three.value.type == 'richText') { // var file = 'https://kczxcs.nenu.edu.cn/jeecg-boot/temp/ylhpsf.pdf';
var file = baseApiUrl + "/"+three.filePath;
console.log('🤬', file);
// let url = getFileAccessHttpUrl(encodeURIComponent(file));
// var t2 = encryptByBase64(url);
window.open('https://fileview.jeecg.com/onlinePreview?url=' + encodeURIComponent(encryptByBase64(file)));
} else if (three.type == 'richText') {
threePageOpen.value = true; threePageOpen.value = true;
threePageDisableSubmit.value = true; threePageDisableSubmit.value = true;
threePageData.value = { three }; threePageData.value = { three };
} }
} }
const getViewFileDomain = () => defHttp.get({ url: '/sys/comment/getFileViewDomain' });
/**
* 初始化domain
*/
async function initViewDomain() {
if (!onlinePreviewDomain) {
onlinePreviewDomain = await getViewFileDomain();
}
if (!onlinePreviewDomain.startsWith('http')) {
onlinePreviewDomain = 'http://' + onlinePreviewDomain;
}
}
function delThree(e, two, three) { function delThree(e, two, three) {
stop(e); stop(e);
delThreeFetch({ id: three.id }).then((res) => { delThreeFetch({ id: three.id }).then((res) => {

11
src/views/zy/jiaoXueDanYuanNeiRong/stuIndex.vue
View File

@ -213,12 +213,13 @@
import { defHttp } from '/@/utils/http/axios'; import { defHttp } from '/@/utils/http/axios';
import { useMessage } from "/@/hooks/web/useMessage"; import { useMessage } from "/@/hooks/web/useMessage";
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { randomString, simpleDebounce, getFileAccessHttpUrl } from '/@/utils/common/compUtils' import { randomString, simpleDebounce, getFileAccessHttpUrl, baseApiUrl } from '/@/utils/common/compUtils'
import draggable from 'vuedraggable'; import draggable from 'vuedraggable';
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue'; import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue'; import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
import downloadAssembly from '/@/views/zy/jiaoXueDanYuanNeiRong/downloadAssembly.vue'; import downloadAssembly from '/@/views/zy/jiaoXueDanYuanNeiRong/downloadAssembly.vue';
import { encryptByBase64 } from '/@/utils/cipher';
//当前路由信息 //当前路由信息
const { currentRoute } = useRouter(); const { currentRoute } = useRouter();
@ -550,11 +551,19 @@ function handleVideo(three){
} }
function viewThreePage(three) { function viewThreePage(three) {
if (three.type == 'video') {
handleVideo(three);
} else if (three.type == 'document') {
var file = baseApiUrl + "/"+three.filePath;
window.open('https://fileview.jeecg.com/onlinePreview?url=' + encodeURIComponent(encryptByBase64(file)));
} else if (three.type == 'richText') {
threePageOpen.value = true; threePageOpen.value = true;
threePageDisableSubmit.value = true; threePageDisableSubmit.value = true;
threePageData.value = { three }; threePageData.value = { three };
} }
}
function threePageHandleOk(){ function threePageHandleOk(){
threePageOpen.value = false; threePageOpen.value = false;
} }

2
src/views/zy/zyInfo/StudentZyInfoList.vue
View File

@ -35,7 +35,7 @@
<a-col :span="24" class="zyCon"> <a-col :span="24" class="zyCon">
<span style="text-align: left;width:50%;display: block;float:left;">作业得分：{{ item.stuscore ? item.stuscore : '未评' }}分</span> <span style="text-align: left;width:50%;display: block;float:left;">作业得分：{{ item.stuscore ? item.stuscore : '未评' }}分</span>
<span style="text-align: right;width:50%;display: block;float:left;" class="wpopen" v-if="handleSfkshp(item)" @click="handleHpfs(item)">互评分数:{{ item.xshpfs ? item.xshpfs : '未评' }}分</span> <span style="text-align: right;width:50%;display: block;float:left;" class="wpopen" v-if="handleSfkshp(item)" @click="handleHpfs(item)">互评分数:{{ item.xshpfs ? item.xshpfs : '未评' }}分</span>
<span style="text-align: left;width:50%;display: block;float:left;" v-if="handleSfkshp(item)">绩效分数：{{ item.jxfs ? item.jxfs : '未评' }}分</span> <span style="text-align: left;width:50%;display: block;float:left;" v-if="handleSfkshp(item)">互评奖励：{{ item.jxfs ? item.jxfs : '未评' }}分</span>
<span style="text-align: right;width:50%;display: block;float:left;">总分:{{ item.zzdf ? item.zzdf : '未评' }}分</span> <span style="text-align: right;width:50%;display: block;float:left;">总分:{{ item.zzdf ? item.zzdf : '未评' }}分</span>
</a-col> </a-col>
<a-col :span="24" class="zyCon"> <a-col :span="24" class="zyCon">

12
src/views/zy/zyInfo/ZyInfoV2List.vue
View File

@ -113,7 +113,8 @@ d<template>
<a-form-item label="作业要求" v-bind="validateInfos.content"> <a-form-item label="作业要求" v-bind="validateInfos.content">
<j-editor v-model:value="zyInfo.content" v-if="zyyqShow" @blur="handleZyyqShow(0)" /> <j-editor v-model:value="zyInfo.content" v-if="zyyqShow" @blur="handleZyyqShow(0)" />
<div style="color: #777777" v-html="zyInfo.content" v-if="!zyyqShow"></div> <div style="color: #777777" v-html="zyInfo.content" v-if="!zyyqShow"></div>
<div @click="handleZyyqShow(1)"><span style="cursor: pointer; color: #18a689">温馨提示：点击可编辑作业要求</span></div> <div @click="handleZyyqShow(1)" class="tishi" v-if="zyInfo.xshpkg == '1'">温馨提示：点击可编辑作业要求</div>
<!-- <div @click="handleZyyqShow(1)"><span style="cursor: pointer; color: #18a689">温馨提示：点击可编辑作业要求</span></div> -->
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="24"> <a-col :span="24">
@ -143,6 +144,7 @@ d<template>
<a-col :span="24"> <a-col :span="24">
<div class="region"> <div class="region">
<div class="region-title">学生互评</div> <div class="region-title">学生互评</div>
<div style="float:right;margin-right:8px;" v-if="zyInfo.xshpkg == '1'"><span style="color:#18a689; cursor: pointer;" @click="handleHpsf">预览互评算法</span></div>
<a-form-item label="学生互评"> <a-form-item label="学生互评">
<div class="tishi" v-if="zyInfo.xshpkg == '1'">温馨提示：每份作业至少互评3次，每个学生互评5份作业</div> <div class="tishi" v-if="zyInfo.xshpkg == '1'">温馨提示：每份作业至少互评3次，每个学生互评5份作业</div>
<j-dict-select-tag <j-dict-select-tag
@ -183,7 +185,7 @@ d<template>
style="margin-top: 15px" style="margin-top: 15px"
/> --> /> -->
</a-form-item> </a-form-item>
<a-form-item label="互评开始时间" :labelCol="labelCol3" :wrapperCol="wrapperCol3"> <a-form-item label="互评开始时间" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
<a-date-picker <a-date-picker
placeholder="请选择互评开始时间" placeholder="请选择互评开始时间"
v-model:value="zyInfo.xshpkssj" v-model:value="zyInfo.xshpkssj"
@ -194,7 +196,7 @@ d<template>
style="width: 100%" style="width: 100%"
/> />
</a-form-item> </a-form-item>
<a-form-item label="互评结束时间" :labelCol="labelCol3" :wrapperCol="wrapperCol3"> <a-form-item label="互评结束时间" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
<a-date-picker <a-date-picker
placeholder="请选择互评结束时间" placeholder="请选择互评结束时间"
v-model:value="zyInfo.xshpjssj" v-model:value="zyInfo.xshpjssj"
@ -249,7 +251,7 @@ d<template>
</a-form-item> </a-form-item>
</div> </div>
</a-col> </a-col>
<a-col :span="24" style="text-align: left; margin-top: 10px; margin-bottom: 40px; margin-left: 140px"> <a-col :span="24" style="text-align: center; margin-top: 10px; margin-bottom: 40px; ">
<a-button type="primary" @click="submitForm">保存</a-button> <a-button type="primary" @click="submitForm">保存</a-button>
<a-button type="primary" @click="reloadZy" style="margin-left: 15px">返回</a-button> <a-button type="primary" @click="reloadZy" style="margin-left: 15px">返回</a-button>
</a-col> </a-col>
@ -1154,7 +1156,7 @@ const columnsCcjg = [
}, },
}, },
{ {
title: '查重率', title: '查重率（%）',
dataIndex: 'percentage', dataIndex: 'percentage',
key: 'percentage', key: 'percentage',
}, },

2
src/views/zy/zyInfoStudent/ZyInfoStudent.data.ts
View File

@ -94,7 +94,7 @@ export const newcolumns: BasicColumn[] = [
slots: { customRender: 'xshpfsaction' }, slots: { customRender: 'xshpfsaction' },
}, },
{ {
title: '绩效分', title: '互评奖励',
align: "center", align: "center",
dataIndex: 'jxzf', dataIndex: 'jxzf',
}, },

18
src/views/zy/zyInfoStudentHp/ZyhpMainList.vue
View File

@ -1,6 +1,11 @@
<template> <template>
<div style="background: #fff; margin: 10px 0;padding:10px;"> <div style="background: #fff; margin: 10px 0;padding:10px;">
<div style="text-align: right;width:100%;"><a-button type="primary" @click="handleback">返回</a-button></div> <div style="width:100%;">
<a-row>
<a-col :span="12" style="text-align: left;"><span style="color:#18a689; cursor: pointer;" @click="handleHpsf">预览互评算法</span></a-col>
<a-col :span="12" style="text-align: right;"><a-button type="primary" @click="handleback">返回</a-button></a-col>
</a-row>
</div>
<a-tabs v-model:activeKey="activeKey" @change="handleChange"> <a-tabs v-model:activeKey="activeKey" @change="handleChange">
<a-tab-pane key="1" tab="待互评"> <a-tab-pane key="1" tab="待互评">
<ZyInfoStudentHpList ref="dhpPage"/> <ZyInfoStudentHpList ref="dhpPage"/>
@ -20,9 +25,12 @@ import { ref, reactive, onMounted, unref } from 'vue';
import ZyInfoStudentHpList from '/@/views/zy/zyInfoStudentHp/ZyInfoStudentHpList.vue' import ZyInfoStudentHpList from '/@/views/zy/zyInfoStudentHp/ZyInfoStudentHpList.vue'
import ZyInfoStudentHpYpyList from '/@/views/zy/zyInfoStudentHp/ZyInfoStudentHpYpyList.vue' import ZyInfoStudentHpYpyList from '/@/views/zy/zyInfoStudentHp/ZyInfoStudentHpYpyList.vue'
import ZyInfoStudentHpMyhpfsList from '/@/views/zy/zyInfoStudentHp/ZyInfoStudentHpMyhpfsList.vue' import ZyInfoStudentHpMyhpfsList from '/@/views/zy/zyInfoStudentHp/ZyInfoStudentHpMyhpfsList.vue'
import { useGlobSetting } from '/@/hooks/setting';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { defHttp } from '/@/utils/http/axios'; import { defHttp } from '/@/utils/http/axios';
const globSetting = useGlobSetting();
const baseApiUrl = globSetting.domainUrl;
var activeKey = ref('1'); var activeKey = ref('1');
const dhpPage = ref(); const dhpPage = ref();
const yhpPage = ref(); const yhpPage = ref();
@ -42,6 +50,14 @@ function handleChange(record) {
wdhpPage.value.reload(); wdhpPage.value.reload();
} }
} }
//预览互评算法
function handleHpsf(){
// openByUrl({url:'/downPath/ylhpsf.pdf',target: '_blank',fileName:'算法说明.pdf'})
// window.open(pdfUrl.value, '_blank');
// window.open(require('../../../downPath/ylhpsf.pdf'), '_blank');
window.open(baseApiUrl+'/temp/ylhpsf.pdf');
}
function handleback(){ function handleback(){
var href = "/stuzy/studentDqzy"; var href = "/stuzy/studentDqzy";
router.push({path:href,query: {rwbh,xqxn,type,teano}}); router.push({path:href,query: {rwbh,xqxn,type,teano}});