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

169 lines
5.0 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="text-align:center;margin-top:30px;">
<span style="color:red;font-weight:bold;">作业上传后不可修改请仔细检查后提交</span>
</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']);
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);
//表单验证
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 edit(record) {
nextTick(() => {
resetFields();
//赋值
Object.assign(formData, record);
isYl.value = record.isYl;
});
}
/**
* 提交数据
*/
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(',');
}
}
}
createConfirm({
iconType: 'warning',
title: '确认提交',
content: '是否确认提交数据',
okText: '确认',
cancelText: '取消',
onOk: () => {
zyscStu(model, isUpdate.value)
.then((res) => {
if (res.success) {
createMessage.success(res.message);
emit('ok');
} else {
createMessage.warning(res.message);
}
})
.finally(() => {
confirmLoading.value = false;
});
}
});
}
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>