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

209 lines
6.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<a-spin :spinning="confirmLoading">
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-row>
<a-col :span="24" style=";padding: 30px 0 0 75px;">
<div style="line-height:40px;">作业名称{{zyInfo.title}}</div>
<div style="line-height:40px;">作业要求{{zyInfo.content?zyInfo.content:'无'}}</div>
<div style="line-height:40px;">上传时间{{zyInfo.startTime}} ~ {{zyInfo.endTime}}</div>
<div style="line-height:40px;">检测方式是否网络查重-{{zyInfo.wwcc=='1'?'是':'否'}} 是否课程内查重-{{zyInfo.nwcc=='1'?'是':'否'}} Aigc是否查重-{{zyInfo.nwcc=='1'?'是':'否'}} 是否校内查重-{{zyInfo.xncc=='1'?'是':'否'}} </div>
<div v-if="zyInfo.filePath">附件:
<a-button type="primary" style="margin-left: 10px" @click="downLoad(zyInfo.filePath)">下载</a-button></div>
</a-col>
<a-col :span="24" style="margin-top:30px;" v-if="!isYl">
<a-form-item label="上传作业" v-bind="validateInfos.filePath">
<j-upload v-model:value="formData.filePath" :disabled="disabled" maxCount="1" accept=".doc,.docx,.pdf" :forceAcceptVerify="true" ></j-upload>
</a-form-item>
</a-col>
<a-col :span="24" style="margin-top:30px;" v-if="isYl">
<span style="width:300px;float: left;">
<span style="float:left;">
<j-upload v-model:value="formData.stuFilePath" maxCount="1" accept=".doc,.docx,.pdf" :forceAcceptVerify="true"></j-upload>
</span>
</span>
<span style="float: right;">
<a-button type="primary" style="margin-left:10px;" @click="openPdf(formData)">预览</a-button>
</span>
</a-col>
</a-row>
</a-form>
</a-spin>
</template>
<script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } 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,zyscStu } from '../ZyInfoStudent.api';
import { Form } from 'ant-design-vue';
import {getFileAccessHttpUrl} from "/@/utils/common/compUtils";
import {useGlobSetting} from "/@/hooks/setting";
const globSetting = useGlobSetting();
const baseApiUrl = globSetting.domainUrl;
const { createConfirm } = useMessage();
const props = defineProps({
formDisabled: { type: Boolean, default: false },
formData: { type: Object, default: ()=>{} },
formBpm: { type: Boolean, default: true }
});
const formRef = ref();
const isYl = ref<boolean>(false);
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok','closeLoading']);
const formData = reactive<Record<string, any>>({
id: '',
filePath: '',
});
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);
let zyInfo = ref<any>({});
//表单验证
const validatorRules = {
filePath: [{ required: true, message: '请上传作业附件!'},],
};
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });
// 表单禁用
const disabled = computed(()=>{
if(props.formBpm === true){
if(props.formData.disabled === false){
return false;
}else{
return true;
}
}
return props.formDisabled;
});
/**
* 新增
*/
function add() {
edit({});
}
function downLoad(file) {
if (file) {
let url = getFileAccessHttpUrl(file);
if (url) {
window.open(url);
}
} else {
createMessage.warning('暂无文件或文件上传中');
}
}
/**
* 编辑
*/
function edit(record) {
console.log(`🚀 ~ edit ~ record:`, record)
nextTick(() => {
resetFields();
defHttp.get({url:'/zyInfo/zyInfo/queryZyinfoByStuId',params:{id:record.id}}).then((res) => {
console.log(`🚀 ~ defHttp.get ~ res:`, res)
zyInfo.value = res;
console.log(`🚀 ~ defHttp.get ~ zyInfo:`, zyInfo)
});
//赋值
Object.assign(formData, record);
isYl.value = record.isYl;
});
}
/**
* 提交数据
*/
async function submitForm() {
// 触发表单验证
// var t = 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(',');
}
}
}
if(!model.filePath){
emit('closeLoading');
confirmLoading.value = false;
createMessage.warning("请上传作业附件");
return;
}
createConfirm({
iconType: 'warning',
title: '确认提交',
content: '是否确认提交数据',
okText: '确认',
cancelText: '取消',
onOk: () => {
zyscStu(model, isUpdate.value)
.then((res) => {
console.log(`🚀 ~ .then ~ res:`, res)
if (res.success) {
createMessage.success(res.message);
emit('ok');
} else {
createMessage.warning(res.message);
}
emit('closeLoading');
})
.finally(() => {
confirmLoading.value = false;
emit('closeLoading');
});
},
onCancel: () => {
confirmLoading.value = false;
emit('closeLoading');
},
});
}
function openPdf(record){
if(record.stuPdfPath){
var url2 = getFileAccessHttpUrl(record.stuPdfPath)
let url = baseApiUrl+"/generic/web/viewer.html?file="+encodeURIComponent(url2);
window.open(url,"_blank")
}else{
createMessage.warning("暂无文件或文件上传中")
}
}
defineExpose({
add,
edit,
submitForm,
});
</script>
<style lang="less" scoped>
.antd-modal-form {
min-height: 300px !important;
overflow-y: auto;
padding: 24px 24px 24px 24px;
}
</style>