3.10 工程代码同步master
This commit is contained in:
jl-zhoujl2
217
src/pages/Questionnaire/questionAnswer/index.tsx
Normal file
217
src/pages/Questionnaire/questionAnswer/index.tsx
Normal file
@ -0,0 +1,217 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Button, Card, Checkbox, Divider, Form, Input, message, Radio, Result, Space, Spin, Typography } from 'antd';
|
||||
import { getAnswerList, getQuestList, saveQuestList } from './service';
|
||||
import { getURLInformation, isEmpty, isNotEmpty } from '@/utils/CommonUtils';
|
||||
import '@/assets/ld_style.less'
|
||||
import banner from '../../../images/answer/banner.jpg'
|
||||
import { ScheduleOutlined } from '@ant-design/icons';
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: { span: 0 },
|
||||
wrapperCol: { span: 24 },
|
||||
};
|
||||
|
||||
const typeEnum = ['', '单选题', '多选题', '填空题'] //1-单选 2-多选 3-文本
|
||||
|
||||
const Answer: React.FC<{}> = () => {
|
||||
const { Title, Text } = Typography;
|
||||
const { TextArea } = Input;
|
||||
const [form] = Form.useForm();
|
||||
//获取url参数
|
||||
const id = getURLInformation('code');
|
||||
const answerId = getURLInformation('n');
|
||||
//存储数据
|
||||
const [questData, setQuestData] = useState<any>({});
|
||||
//问卷状态
|
||||
const [questStatus, setQuestStatus] = useState<number>(-2);//-2-初始值 -1-问卷截止 0-未提交 1-已提交(已发布) 2-撤回 3-终止 10-查看
|
||||
//loading
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
//提交数据
|
||||
const onFinish = async (values: any) => {
|
||||
const questList = JSON.parse(JSON.stringify(questData?.questList));//深拷贝初始数组
|
||||
for (const key in values) {
|
||||
if (Object.prototype.hasOwnProperty.call(values, key)) {
|
||||
const ele = values[key];
|
||||
const val = typeof ele === 'object' ? ele : isEmpty(ele) ? [] : [ele];
|
||||
if (val.length > 0) {
|
||||
questList.forEach((item: any) => {
|
||||
if (item.id == key) {
|
||||
item.answerItemList = val;
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
const params = {
|
||||
formId: questData?.id,
|
||||
questList,
|
||||
}
|
||||
await saveQuestList(params).then(res => {
|
||||
if (res?.code == 200 && res?.success) {
|
||||
setQuestStatus(2);//问卷提交完成转为已提交
|
||||
}
|
||||
})
|
||||
};
|
||||
//表单校验不通过的
|
||||
const onFinishFailed = (values: any) => {
|
||||
const errorList = JSON.parse(JSON.stringify(values?.errorFields)) as Array<any>;//深拷贝不通过数组
|
||||
const indexList: any[] = []
|
||||
errorList.forEach(ele => {
|
||||
questData?.questList.forEach((e: any, index: number) => {
|
||||
if (e.id == ele.name[0]) {
|
||||
indexList.push(index + 1)
|
||||
return
|
||||
}
|
||||
});
|
||||
});
|
||||
message.info(`请作答第${indexList.toString()}题`)
|
||||
};
|
||||
//通用关闭
|
||||
const closeWebPage = () => {
|
||||
if (navigator.userAgent.indexOf("MSIE") > 0) {
|
||||
if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
|
||||
window.opener = null;
|
||||
window.close();
|
||||
} else {
|
||||
window.open('', '_top');
|
||||
window.top?.close();
|
||||
}
|
||||
} else if (navigator.userAgent.indexOf("Firefox") > 0 || navigator.userAgent.indexOf("Chrome") > 0) {
|
||||
window.location.href = "about:blank";
|
||||
window.close();
|
||||
} else {
|
||||
window.opener = null;
|
||||
window.open('', '_self');
|
||||
window.close();
|
||||
}
|
||||
}
|
||||
//查询问卷数据
|
||||
const getQuestData = async () => {
|
||||
setLoading(true);
|
||||
await getQuestList({ id }).then(res => {
|
||||
if (res?.code == 200 && res?.success) {
|
||||
const data = res?.data;
|
||||
setQuestData(data);
|
||||
setQuestStatus(data?.status);
|
||||
} else {
|
||||
setQuestStatus(-1);//异常情况页面处理
|
||||
}
|
||||
}).finally(() => {
|
||||
setLoading(false);
|
||||
})
|
||||
}
|
||||
//查询答案数据
|
||||
const getAnswerData = async () => {
|
||||
setLoading(true);
|
||||
await getAnswerList({ id: answerId }).then(res => {
|
||||
if (res?.code == 200 && res?.success) {
|
||||
const data = res?.data;
|
||||
const obj = {};
|
||||
setQuestData(data?.questForm);
|
||||
setQuestStatus(10);//转为查看
|
||||
data?.questList.forEach((ele: any) => {
|
||||
if (ele.type == 3 && ele.requiredFlag == 1) {//当前为文本型
|
||||
obj[ele.id] = ele.answerItemList[0];
|
||||
} else {
|
||||
obj[ele.id] = ele.answerItemList?.toString();
|
||||
}
|
||||
});
|
||||
form.setFieldsValue(obj);
|
||||
}
|
||||
}).finally(() => {
|
||||
setLoading(false);
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (isNotEmpty(answerId)) {
|
||||
getAnswerData();
|
||||
} else {
|
||||
getQuestData();
|
||||
}
|
||||
}, [id, answerId]);
|
||||
|
||||
return (
|
||||
<div className="answer-bg">
|
||||
<Spin spinning={loading}>
|
||||
{questStatus == 1 || questStatus == 10 ? (
|
||||
<div>
|
||||
<div><img style={{width: '100%'}} src={banner} /></div>
|
||||
<div className="center-main">
|
||||
<Title className="answer-tit" level={4}>{questData?.title}</Title>
|
||||
<div className="gray" style={{textIndent: '2em'}}>{questData?.desc}</div>
|
||||
<Divider orientation="right" style={{ margin: '18px 0px' }} plain>
|
||||
<ScheduleOutlined style={{color: '#b30000', marginRight: '6px', fontSize: '17px', verticalAlign: '-4px'}} />截止时间：{questData?.endTime}
|
||||
</Divider>
|
||||
<Form
|
||||
name="question_form"
|
||||
form={form}
|
||||
{...formItemLayout}
|
||||
onFinish={onFinish}
|
||||
onFinishFailed={onFinishFailed}
|
||||
className='question-form'
|
||||
>
|
||||
<Space direction="vertical">
|
||||
{questData?.questList?.map((item: any, index: number) => {
|
||||
return (
|
||||
<div key={index}>
|
||||
<div style={{marginBottom: '8px'}}>
|
||||
{item.requiredFlag == 1 ? <Text style={{ color: '#ff4d4f' }}>*</Text> : null}
|
||||
{index + 1}.[{typeEnum[item.type]}] {item.questTitle}
|
||||
</div>
|
||||
<Form.Item
|
||||
name={item.id}
|
||||
rules={[{ required: item.requiredFlag == 1, message: item.type == 3 ? '请填写' : '请选择' }]}
|
||||
>
|
||||
{item.type == 1 ? (//单选
|
||||
<Radio.Group style={{ width: '100%' }} disabled={questStatus == 10}>
|
||||
<Space direction="vertical">
|
||||
{item.questItemList.map((e: any) => (<Radio value={e.id} key={e.id}>{e.itemTitle}</Radio>))}
|
||||
</Space>
|
||||
</Radio.Group>
|
||||
) : item.type == 2 ? (//多选
|
||||
<Checkbox.Group style={{ width: '100%' }} disabled={questStatus == 10}>
|
||||
<Space direction="vertical">
|
||||
{item.questItemList.map((e: any) => (<Checkbox value={e.id} key={e.id}>{e.itemTitle}</Checkbox>))}
|
||||
</Space>
|
||||
</Checkbox.Group>
|
||||
) : (//文本
|
||||
<TextArea autoSize style={{ width: '100%' }} disabled={questStatus == 10} />
|
||||
)}
|
||||
</Form.Item>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</Space>
|
||||
</Form>
|
||||
{questStatus == 1 && (
|
||||
<div style={{ textAlign: 'center', marginTop: '20px' }}>
|
||||
<Space direction="vertical">
|
||||
<p>您已完成本次问卷，感谢您的帮助与支持！</p>
|
||||
<Button type='primary' style={{ padding: '4px 40px' }} onClick={() => form.submit()}>提交</Button>
|
||||
</Space>
|
||||
</div>)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
) : questStatus != -2 ? (
|
||||
<Result
|
||||
status={questStatus == -1 ? "info" : "success"}
|
||||
title={questStatus == -1 ? "问卷已结束" : "问卷已提交，感谢您的帮助与支持"}
|
||||
subTitle={null}
|
||||
extra={[
|
||||
<Button key="close" type='link' onClick={() => closeWebPage()}>关闭</Button>,
|
||||
]}
|
||||
/>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</Spin>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Answer;
|
||||
32
src/pages/Questionnaire/questionAnswer/service.ts
Normal file
32
src/pages/Questionnaire/questionAnswer/service.ts
Normal file
@ -0,0 +1,32 @@
|
||||
import request from '@/utils/request';
|
||||
/**
|
||||
* 查询问卷数据
|
||||
* @param params {id: string}
|
||||
*/
|
||||
export async function getQuestList(params?: any) {
|
||||
return request(`/api/biz-service-ebtp-quest/mongdb/questForm/findQuestFormForUser`, {
|
||||
method: 'POST',
|
||||
requestType: 'form',
|
||||
data: params,
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 查询答案
|
||||
* @param params {id: string}
|
||||
*/
|
||||
export async function getAnswerList(params?: any) {
|
||||
return request(`/api/biz-service-ebtp-quest/mongdb/questForm/findQuestAnswer`, {
|
||||
method: 'POST',
|
||||
data: params,
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 问卷提交
|
||||
* @param params {}
|
||||
*/
|
||||
export async function saveQuestList(params?: any) {
|
||||
return request(`/api/biz-service-ebtp-quest/mongdb/questForm/saveAnswer`, {
|
||||
method: 'POST',
|
||||
data: params,
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user