dbsd_kczx/src/views/zy/zyInfoStudent/components/ZyInfoStudentPiyueForm.vue

485 lines
15 KiB
Vue
Raw Normal View History

2024-08-29 13:33:02 +08:00
<template>
<a-spin :spinning="confirmLoading">
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-row>
<a-col :push="leftSpan - 1" :span="0" :lg="{ span: 1 }">
<!-- <a-button style="margin-left: 28px;" type="primary" @click="changeSpan" size="small">{{ leftSpan == 12? '放大' : '缩小' }}</a-button> -->
<img v-show="leftSpan == 12" @click="changeSpan" style="width: 25px;margin-left: 50px;cursor: pointer;"
src="/resource/img/toright.png" />
<img v-show="leftSpan != 12" @click="changeSpan" style="width: 25px;margin-left: 50px;cursor: pointer;"
src="/resource/img/toleft.png" />
</a-col>
</a-row>
<a-row>
<a-col :xs="24" :lg="leftSpan">
<div v-show="showType == '1'">
<div class="wps-iframe" id="wpsiframeid" style="width:100%;height: 500px;"></div>
2024-10-08 08:29:29 +08:00
</div>
<div v-if="showType == '2'">
2024-10-08 20:49:49 +08:00
<div style="padding: 10px 20px;">
2024-10-11 17:12:06 +08:00
<a-button type="primary" @click="rotateImage">顺时针旋转</a-button>
<a-button type="primary" @click="rotateImage2" style="margin-left: 20px;">逆时针旋转</a-button>
2024-10-08 20:49:49 +08:00
</div>
2024-10-08 20:49:49 +08:00
<div class="image-container">
<img :src="ylurl" :style="{ transform: 'rotate(' + rotationAngle + 'deg)' }" class="rotated-image" />
2024-10-08 20:49:49 +08:00
</div>
2024-10-08 08:29:29 +08:00
</div>
<div v-if="showType == '3'">
<div class="video-container">
<video ref="videoPlayer" :controls="controls" :autoplay="autoplay" :loop="loop" :src="videoUrl"
@loadedmetadata="playVideoInFullscreen">
2024-10-08 08:29:29 +08:00
</video>
</div>
</div>
<!-- <div v-else>
2024-10-08 08:29:29 +08:00
<a-button type="primary">下载文件</a-button>
</div> -->
2024-08-29 13:33:02 +08:00
</a-col>
<a-col :xs="24" :lg="rightSpan">
2024-10-08 08:29:29 +08:00
<a-row>
<a-col :span="24">
<a-form-item label="作业名称">
{{ zyInfo.title }}
2024-10-08 08:29:29 +08:00
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="学生姓名">
{{ formData.studentName }}
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="学生学号">
{{ formData.createBy }}
2024-10-08 08:29:29 +08:00
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="评分" v-bind="validateInfos.score">
<a-input-number v-model:value="formData.score" style="width: 100%" placeholder="请填写评分"></a-input-number>
2024-10-08 08:29:29 +08:00
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="批阅内容" v-bind="validateInfos.pyContent">
<JEditor v-model:value="formData.pyContent" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="批阅附件" v-bind="validateInfos.pyFilePath">
<j-upload v-model:value="formData.pyFilePath" maxCount="1" :text="`上传批阅附件`"
style="background: #ededed; " :forceAcceptVerify="true"></j-upload>
2024-10-08 08:29:29 +08:00
</a-form-item>
</a-col>
<a-col :span="24" style="text-align: center;" v-if="disabled">
<div>
2024-10-08 08:29:29 +08:00
<a-button type="primary" @click="submitForm">保存</a-button>
<a-button type="primary" @click="submitNextForm" style="margin-left: 10px;">保存并下一个</a-button>
</div>
</a-col>
</a-row>
2024-08-29 13:33:02 +08:00
</a-col>
2024-08-29 13:33:02 +08:00
</a-row>
</a-form>
</a-spin>
</template>
<script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted, onUnmounted } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
import { getValueType } from '/@/utils';
import { saveOrUpdate } from '../ZyInfoStudent.api';
import { Form } from 'ant-design-vue';
import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
2024-10-08 08:29:29 +08:00
import { useGlobSetting } from '/@/hooks/setting';
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
import { getToken } from '/@/utils/auth';
import WebOfficeSDK from './wpsApi/web-office-sdk-solution-v2.0.7.es'
import { useUserStore } from '/@/store/modules/user';
const leftSpan = ref(12)
const rightSpan = ref(12)
const userStore = useUserStore();
const props = defineProps({
formDisabled: { type: Boolean, default: false },
formData: { type: Object, default: () => { } },
formBpm: { type: Boolean, default: true }
});
const formRef = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok', 'ok2']);
const formData = reactive<Record<string, any>>({
id: '',
score: '',
pyContent: '',
pyFilePath: '',
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false);
const showType = ref<string>('1');
const ylurl = ref<string>('');
2024-10-08 20:49:49 +08:00
const rotationAngle = ref(0);
const zyInfo = ref<any>({});
2024-10-08 08:29:29 +08:00
const globSetting = useGlobSetting();
const baseApiUrl = globSetting.domainUrl;
const videoPlayer = ref(null);
const videoOpen = ref<boolean>(false);
const controls = ref(true);
const autoplay = ref(false)
const loop = ref(false);
2024-10-08 08:29:29 +08:00
const videoUrl = ref<String>('');
const jssdkInfo = ref<any>({});
const record_ = ref(null)
2024-10-08 08:29:29 +08:00
function changeSpan() {
console.log('leftSpan', leftSpan.value)
console.log('rightSpan', rightSpan.value)
if (leftSpan.value == 12) {
leftSpan.value = 18
rightSpan.value = 6
} else {
leftSpan.value = 12
rightSpan.value = 12
}
console.log('leftSpan--》', leftSpan.value)
console.log('rightSpan--》', rightSpan.value)
edit(record_.value)
}
2024-10-08 20:49:49 +08:00
//表单验证
const validatorRules = {
score: [{ required: true, message: '请输入分数!' }],
};
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });
2024-08-29 13:33:02 +08:00
// 表单禁用
const disabled = computed(() => {
if (props.formBpm === true) {
if (props.formData.disabled === false) {
return false;
} else {
return true;
2024-08-29 13:33:02 +08:00
}
}
return props.formDisabled;
});
2024-08-29 13:33:02 +08:00
function handleJyfz(record) {
2024-08-29 13:33:02 +08:00
console.log(`🚀 ~ handleJyfz ~ record:`, record)
// if(zyInfo.score){
// if(parseInt(record) > parseInt(zyInfo.score)){
// createMessage.warning('评分不能超过预设作业分值!');
// formData.score = zyInfo.score;
// }
// }else{
// if(parseInt(record) > 100){
// createMessage.warning('评分不能超过100分!');
// formData.score = zyInfo.score;
// }
// }
if (parseInt(record) > 100) {
createMessage.warning('评分不能超过100分!');
formData.score = '';
2024-08-29 13:33:02 +08:00
}
if (parseInt(record) < 0) {
createMessage.warning('评分不能低于0分!');
formData.score = '';
}
}
2024-10-08 20:49:49 +08:00
function rotateImage() {
rotationAngle.value += 90; // 每次点击旋转90度
}
function rotateImage2() {
rotationAngle.value -= 90; // 每次点击旋转90度
}
/**
* 新增
*/
function add() {
edit({});
}
2024-08-29 13:33:02 +08:00
/**
* 编辑
*/
function edit(record) {
record_.value = record
showType.value = '1';
formData.pyContent = ''
nextTick(() => {
resetFields();
defHttp.get({ url: '/zyInfo/zyInfo/queryById', params: { id: record.mainId } }).then(res => {
console.log(`🚀 ~ defHttp.get ~ res:`, res)
zyInfo.value = res;
})
const parts = record.filePath.split('.');
const filetype = parts[parts.length - 1];
console.log(`🚀 ~ nextTick ~ filetype:`, filetype)
// var file = getFileAccessHttpUrl(record.filePath);
// ylurl.value = file;
let wpsType = "w";
if (filetype == 'jpg' || filetype == 'png' || filetype == 'jpeg' || filetype == 'xls' || filetype == 'xlsx' || filetype == 'text') {
showType.value = '2';
2024-12-13 13:21:42 +08:00
var file = getFileAccessHttpUrl(record.filePath);
ylurl.value = file;
} else if (filetype == 'doc' || filetype == 'docx') {
showType.value = '1';
wpsType = "w";
} else if (filetype == 'pdf') {
showType.value = '1';
wpsType = "f";
} else if (filetype == 'ppt' || filetype == 'pptx') {
showType.value = '1';
wpsType = "p";
} else if (filetype == 'xls' || filetype == 'xlsx') {
showType.value = '1';
wpsType = "s";
} else if (filetype == 'mp4' || filetype == 'avi' || filetype == 'mp3' || filetype == 'wav') {
showType.value = '3';
let url = getFileAccessHttpUrl(record.filePath);
console.log('视频预览-----》', url);
// videoOpen.value = true;
videoUrl.value = url;
} else {
showType.value = '0';
}
//赋值
Object.assign(formData, record);
2024-08-29 13:33:02 +08:00
formData.id = '1863389832580046849';
2024-12-13 13:21:42 +08:00
console.log("🚀 ~ nextTick ~ formData.id:", formData.id)
if (showType.value == '1') {// 获取元素
const element = document.getElementById('wpsiframeid');
// 清空内容
element.innerHTML = '';
const jssdk = WebOfficeSDK.init({
officeType: wpsType,
appId: 'SX20241118WSUGQN',
fileId: formData.id,
mount: document.querySelector('.wps-iframe'),
commonOptions: {
isShowDocMap: false, //是否开启目录功能,默认开启
// isShowTopArea: false, // 隐藏顶部区域(头部和工具栏)
// isShowHeader: false, // 隐藏头部区域
isBrowserViewFullscreen: true, // 是否在浏览器区域全屏
isIframeViewFullscreen: true, // 是否在 iframe 区域内全屏
acceptVisualViewportResizeEvent: true // 控制 WebOffice 是否接受外部的 VisualViewport
},
wordOptions: {
isShowDocMap: false, // 是否开启目录功能,默认开启
isBestScale: true, // 打开文档时,默认以最佳比例显示
isShowBottomStatusBar: false, // 是否展示底部状态栏
},
token: userStore.getUserInfo.username
})
}
});
console.log("🚀 ~ nextTick ~ userStore.getUserInfo.id:", userStore.getUserInfo.id)
console.log("🚀 ~ nextTick ~ userStore.getUserInfo.id:", userStore.getUserInfo.id)
console.log("🚀 ~ nextTick ~ userStore.getUserInfo.id:", userStore.getUserInfo.id)
}
// --------------------------视频------------------------------
2024-10-08 08:29:29 +08:00
const playVideo = () => {
videoPlayer.value.play();
};
const pauseVideo = () => {
videoPlayer.value.pause();
};
const handleFullScreenChange = () => {
if (!document.fullscreenElement) {
console.log('Video exited fullscreen');
// 这里可以执行取消全屏后的逻辑
videoOpen.value = false;
videoPlayer.value.pause();
}
};
function videoHandleCancel() {
2024-10-08 08:29:29 +08:00
pauseVideo();
videoOpen.value = false;
}
onMounted(() => {
document.addEventListener('fullscreenchange', handleFullScreenChange);
});
2024-10-08 08:29:29 +08:00
onUnmounted(() => {
document.removeEventListener('fullscreenchange', handleFullScreenChange);
});
//视频预览
function handleVideo(three) {
2024-10-08 08:29:29 +08:00
let url = getFileAccessHttpUrl(three.filePath);
console.log('视频预览-----》', url);
2024-10-08 08:29:29 +08:00
videoOpen.value = true;
videoUrl.value = url;
playVideoInFullscreen();
// setTimeout(() => {
// playVideo();
// }, 1000);
2024-10-08 08:29:29 +08:00
}
// --------------------------视频------------------------------
const playVideoInFullscreen = async () => {
2024-10-08 08:29:29 +08:00
if (videoPlayer.value) {
try {
// 使用原生DOM方法请求全屏
// await videoPlayer.value.requestFullscreen();
} catch (err) {
console.error(err);
}
}
};
/**
* 提交数据
*/
async function submitForm() {
// 触发表单验证
await validate();
confirmLoading.value = true;
const isUpdate = ref<boolean>(false);
//时间格式化
let model = formData;
if (model.id) {
isUpdate.value = true;
}
//循环数据
for (let data in model) {
//如果该数据是数组并且是字符串类型
if (model[data] instanceof Array) {
let valueType = getValueType(formRef.value.getProps, data);
//如果是字符串类型的需要变成以逗号分割的字符串
if (valueType === 'string') {
model[data] = model[data].join(',');
2024-08-29 13:33:02 +08:00
}
}
}
defHttp.post({ url: '/zyInfoStudent/zyInfoStudent/editPiyue', params: model }).then(res => {
emit('ok');
})
.finally(() => {
confirmLoading.value = false;
});
// await saveOrUpdate(model, isUpdate.value)
// .then((res) => {
// if (res.success) {
// createMessage.success(res.message);
// emit('ok');
// } else {
// createMessage.warning(res.message);
// }
// })
// .finally(() => {
// confirmLoading.value = false;
// });
}
2024-10-08 08:29:29 +08:00
/**
* 提交数据并下一个
*/
async function submitNextForm() {
// 触发表单验证
await validate();
confirmLoading.value = true;
const isUpdate = ref<boolean>(false);
//时间格式化
let model = formData;
if (model.id) {
isUpdate.value = true;
}
//循环数据
for (let data in model) {
//如果该数据是数组并且是字符串类型
if (model[data] instanceof Array) {
let valueType = getValueType(formRef.value.getProps, data);
//如果是字符串类型的需要变成以逗号分割的字符串
if (valueType === 'string') {
model[data] = model[data].join(',');
2024-10-08 08:29:29 +08:00
}
}
2024-10-08 08:29:29 +08:00
}
2024-08-29 13:33:02 +08:00
await defHttp.post({ url: '/zyInfoStudent/zyInfoStudent/editPiyue', params: model }).then(res => {
emit('ok2');
})
await defHttp.get({ url: '/zyInfoStudent/zyInfoStudent/getList2', params: { column: 'createTime', order: 'asc', pageNo: 1, pageSize: 10, ywid: zyInfo.value.id, rwbh: zyInfo.value.rwbh, queryType: 5 } }).then(res => {
console.log(`🚀 ~ awaitdefHttp.post ~ res:`, res)
var list = res.records;
if (list.length > 0) {
edit(list[0])
} else {
createMessage.warning('已批阅完毕,暂无下一条批阅数据!');
}
})
.finally(() => {
confirmLoading.value = false;
});
}
defineExpose({
add,
edit,
submitForm,
});
2024-08-29 13:33:02 +08:00
</script>
<style lang="less" scoped>
.antd-modal-form {
min-height: 150px !important;
overflow-y: auto;
padding: 24px 24px 24px 24px;
}
.video-container {
2024-10-08 08:29:29 +08:00
text-align: center;
}
2024-10-08 08:29:29 +08:00
video {
display: block;
max-width: 100%;
/* 确保视频宽度不超过其容器宽度 */
2024-10-08 08:29:29 +08:00
}
2024-10-08 20:49:49 +08:00
.image-container {
padding: 10px;
width: 100%;
/* 设置容器宽度 */
height: auto;
/* 设置容器高度 */
overflow: hidden;
/* 隐藏溢出的部分 */
2024-10-08 20:49:49 +08:00
display: flex;
align-items: center;
justify-content: center;
}
2024-10-08 20:49:49 +08:00
.rotated-image {
max-width: 100%;
/* 最大宽度为容器宽度 */
max-height: 100%;
/* 最大高度为容器高度 */
object-fit: contain;
/* 保持图片内容不失真 */
transform: rotate(90deg);
/* 假设图片已经旋转90度 */
2024-10-08 20:49:49 +08:00
}
2024-08-29 13:33:02 +08:00
</style>