3.10 工程代码同步master
This commit is contained in:
jl-zhoujl2
358
src/pages/Questionnaire/questionAdd/index.tsx
Normal file
358
src/pages/Questionnaire/questionAdd/index.tsx
Normal file
@ -0,0 +1,358 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { saveQuestForm, findQuestForm } from './service';
|
||||
import { Button, Card, Checkbox, Col, DatePicker, Drawer, Form, Input, message, Modal, Radio, Row, Switch } from 'antd';
|
||||
import '@/assets/ld_style.less'
|
||||
import { DeleteOutlined, DeleteTwoTone, EditTwoTone, ExclamationCircleOutlined } from '@ant-design/icons';
|
||||
import { getURLInformation } from '@/utils/CommonUtils';
|
||||
import { history } from 'umi';
|
||||
import moment from 'moment';
|
||||
import { values } from 'lodash';
|
||||
|
||||
const { TextArea } = Input;
|
||||
const { confirm } = Modal;
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
const Index: React.FC<{}> = () => {
|
||||
const [form] = Form.useForm();
|
||||
const formId = getURLInformation('formId');
|
||||
const [dataList, setDataList] = useState<any>([]); // 题目列表
|
||||
const [drawerVisible, setDrawerVisible] = useState<boolean>(false); // 抽屉
|
||||
const [subjectType, setSubjectType] = useState<any>(); // 当前题目类型
|
||||
const [subjectTit, setSubjectTit] = useState<any>(); // 当前题目标题
|
||||
const [subjectAns, setSubjectAns] = useState<any>([]); // 当前题目答案
|
||||
const [subjectIndex, setSubjectIndex] = useState<any>(); // 当前题目在数组中的位置
|
||||
const [remark, setSubRemark] = useState<any>(); // 当前问答题备注
|
||||
const [subFlag, setSubFlag] = useState<any>(); // 当前题目是否必填
|
||||
const [previewVisible, setPreviewVisible] = useState<boolean>(false); // 预览
|
||||
const modalHeight = (innerHeight * 96) / 100;
|
||||
|
||||
const addDate = (type: any) => { // 新增题目类型
|
||||
let dateArr: any = [...dataList]
|
||||
if(type == '1'){
|
||||
dateArr.push({type: '1', requiredFlag: '0', questTitle: '单选题', questItemList: [{itemTitle: '选项1'},{itemTitle: '选项2'}, {itemTitle: '选项3'}]})
|
||||
}else if(type == '2'){
|
||||
dateArr.push({type: '2', requiredFlag: '0', questTitle: '多选题', questItemList: [{itemTitle: '选项1'},{itemTitle: '选项2'}, {itemTitle: '选项3'}]})
|
||||
} else {
|
||||
dateArr.push({type: '3', requiredFlag: '0', questTitle: '问答题', questItemList: [], remark: ''})
|
||||
}
|
||||
setDataList(dateArr)
|
||||
setTimeout(() => {
|
||||
let divDom = document.getElementById('scrollH') || document.body;
|
||||
divDom.scrollTop = divDom.scrollHeight;
|
||||
}, 100);
|
||||
|
||||
}
|
||||
|
||||
function showConfirm(index: any) { // 删除题目二次确认
|
||||
confirm({
|
||||
title: '确定要删除问题么？',
|
||||
icon: <ExclamationCircleOutlined />,
|
||||
onOk() {
|
||||
let dateArr: any = [...dataList]
|
||||
dateArr.splice(index, 1)
|
||||
setDataList(dateArr)
|
||||
message.success('删除成功！')
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const showDefaultDrawer = (item: any, index: any) => { // 修改当前题目
|
||||
setSubjectTit(item.questTitle)
|
||||
setSubjectAns(item.questItemList)
|
||||
setSubRemark(item.remark)
|
||||
setSubFlag(item.requiredFlag)
|
||||
setSubjectIndex(index)
|
||||
if(item.type == '1'){
|
||||
setSubjectType('单选题')
|
||||
} else if(item.type == '2'){
|
||||
setSubjectType('多选题')
|
||||
} else {
|
||||
setSubjectType('问答题')
|
||||
}
|
||||
setDrawerVisible(true);
|
||||
}
|
||||
|
||||
const addOption = () => { // 当前题目添加选项
|
||||
let answerArr: any = [...dataList]
|
||||
let dateLen: any = answerArr[subjectIndex]?.questItemList?.length+1
|
||||
answerArr[subjectIndex].questItemList.push({itemTitle: '选项'+dateLen})
|
||||
setDataList(answerArr)
|
||||
}
|
||||
|
||||
const delOption = (index: any) => { // 当前题目删除选项
|
||||
let answerArr: any = [...dataList]
|
||||
if(answerArr[subjectIndex].questItemList.length >= 2){
|
||||
answerArr[subjectIndex].questItemList.splice(index, 1)
|
||||
setDataList(answerArr)
|
||||
}
|
||||
}
|
||||
|
||||
const changeSwitch = (checked: any) => { // 修改是否必填
|
||||
let answerArr: any = [...dataList]
|
||||
if(checked){
|
||||
answerArr[subjectIndex].requiredFlag = '1'
|
||||
} else {
|
||||
answerArr[subjectIndex].requiredFlag = '0'
|
||||
}
|
||||
setDataList(answerArr)
|
||||
}
|
||||
|
||||
const changeTitle = (e: any) => { // 修改题目
|
||||
let answerArr: any = [...dataList]
|
||||
answerArr[subjectIndex].questTitle = e.target.value
|
||||
setDataList(answerArr)
|
||||
}
|
||||
|
||||
const changeOption = (e: any, index: any) => { // 修改答案
|
||||
let answerArr: any = [...dataList]
|
||||
answerArr[subjectIndex].questItemList[index].itemTitle = e.target.value
|
||||
setDataList(answerArr)
|
||||
}
|
||||
|
||||
const textChange = (e: any) => { // 问答题提示
|
||||
let answerArr: any = [...dataList]
|
||||
answerArr[subjectIndex].remark = e.target.value
|
||||
setDataList(answerArr)
|
||||
}
|
||||
|
||||
const onPreview = () => { // 预览
|
||||
if(dataList.length == 0){
|
||||
message.warn('请添加字段！')
|
||||
} else {
|
||||
form.validateFields().then(res => {
|
||||
setPreviewVisible(true)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const onSave = () => { // 保存
|
||||
let data = {
|
||||
id: formId,
|
||||
title: form.getFieldValue("formTitle"),
|
||||
desc: form.getFieldValue("remarks"),
|
||||
startTime: form.getFieldValue("time")[0].format('YYYY-MM-DD HH:mm:ss'),
|
||||
endTime: form.getFieldValue("time")[1].format('YYYY-MM-DD HH:mm:ss'),
|
||||
questList: dataList
|
||||
}
|
||||
saveQuestForm(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
message.success('新增成功！')
|
||||
history.push('/Questionnaire/questionList')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if(formId){
|
||||
findQuestForm(formId).then((res) => {
|
||||
if (res.code == 200) {
|
||||
form.setFieldsValue({
|
||||
formTitle: res.data.title,
|
||||
remarks: res.data.desc,
|
||||
time: [moment(res.data.startTime, 'YYYY-MM-DD HH:mm:ss'), moment(res.data.endTime, 'YYYY-MM-DD HH:mm:ss')]
|
||||
});
|
||||
setDataList(res.data.questList)
|
||||
}
|
||||
})
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card title="新增" className="cardH"
|
||||
extra={<><Button onClick={onPreview} style={{marginRight:'10px'}} type="default">预览</Button><Button style={{marginRight:'10px'}} onClick={onSave} type="primary">保存</Button><Button onClick={()=> history.push('/Questionnaire/questionList')} type="default">返回</Button></>}>
|
||||
<div className="left-btn">
|
||||
<Button type="link" onClick={()=> addDate('1')} danger>单选题</Button>
|
||||
<Button type="link" onClick={()=> addDate('2')} danger>多选题</Button>
|
||||
<Button type="link" onClick={()=> addDate('3')} danger>问答题</Button>
|
||||
</div>
|
||||
<div className="right-main" id="scrollH">
|
||||
<Form
|
||||
name="basic"
|
||||
form={form}
|
||||
preserve={false}
|
||||
>
|
||||
<Form.Item label="标题" rules={[{ required: true, message: '标题不可为空' }]} name="formTitle">
|
||||
<Input placeholder="请输入标题" />
|
||||
</Form.Item>
|
||||
<Form.Item name="time" label="时间" rules={[{ required: true, message: '时间不可为空' }]}>
|
||||
<RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
|
||||
</Form.Item>
|
||||
<Form.Item label="说明" name="remarks">
|
||||
<TextArea rows={3} placeholder="请填写说明" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<div>
|
||||
{
|
||||
dataList.map((item: any, index: any)=> {
|
||||
return (
|
||||
<div className="block">
|
||||
<Row>
|
||||
<Col flex="auto">
|
||||
<p>
|
||||
{
|
||||
item.requiredFlag == '1' ? <span className="red">*</span> : null
|
||||
}
|
||||
{index+1+'.'+item.questTitle}
|
||||
{
|
||||
item.type == '1' ? <span className="radio">单选</span> :
|
||||
item.type == '2' ? <span className="check">多选</span> : null
|
||||
}
|
||||
</p>
|
||||
</Col>
|
||||
<Col flex="70px">
|
||||
<Button type="link" onClick={()=>showDefaultDrawer(item, index)} icon={<EditTwoTone />} />
|
||||
<Button onClick={()=>showConfirm(index)} type="link" icon={<DeleteTwoTone />} />
|
||||
</Col>
|
||||
</Row>
|
||||
{
|
||||
item.type == '1' ?
|
||||
<Radio.Group name="radiogroup" defaultValue=''>
|
||||
{
|
||||
item.questItemList.map((val: any, ind: any)=> {
|
||||
return (
|
||||
<Radio value={val.itemTitle}>{val.itemTitle}</Radio>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Radio.Group> :
|
||||
item.type == '2' ?
|
||||
<Checkbox.Group style={{ width: '100%' }}>
|
||||
{
|
||||
item.questItemList.map((val: any, ind: any)=> {
|
||||
return (
|
||||
<Checkbox value={val.itemTitle}>{val.itemTitle}</Checkbox>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Checkbox.Group>
|
||||
:
|
||||
<TextArea rows={4} placeholder={item.remark} />
|
||||
}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
drawerVisible?
|
||||
<Drawer
|
||||
title={subjectType}
|
||||
placement="right"
|
||||
width={360}
|
||||
onClose={()=> setDrawerVisible(false)}
|
||||
visible={drawerVisible}
|
||||
maskClosable={false}
|
||||
// closable={false}
|
||||
// footer={[<Button onClick={()=> setDrawerVisible(false)}>关闭</Button>]}
|
||||
>
|
||||
<p><span className="width100">题目</span><input className="input-style" onChange={changeTitle} defaultValue={subjectTit} /></p>
|
||||
{
|
||||
subjectType != "问答题" ?
|
||||
<div>
|
||||
<p>选项</p>
|
||||
{
|
||||
subjectAns.map((item: any, index: any)=>{
|
||||
return(
|
||||
<div className="mt10"><input className="input-style" onChange={(e)=>changeOption(e, index)} defaultValue={item.itemTitle} />
|
||||
<DeleteOutlined onClick={()=>delOption(index)} style={{fontSize: '20px', marginLeft: '10px'}} />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
<Button onClick={()=> addOption()} className="add-option" type="link" danger>添加选项</Button>
|
||||
</div> :
|
||||
<div><span className="width100" style={{verticalAlign: 'top'}}>提示文字</span><TextArea onChange={textChange} rows={4} className="input-style" placeholder={remark} /></div>
|
||||
}
|
||||
<div className="mt10">
|
||||
<span className="width100">必填</span>
|
||||
{subFlag == '1' ? <Switch defaultChecked onChange={changeSwitch} /> : <Switch onChange={changeSwitch} />}
|
||||
</div>
|
||||
</Drawer> : null
|
||||
}
|
||||
</Card>
|
||||
{
|
||||
previewVisible?
|
||||
<Modal
|
||||
title="预览"
|
||||
width={800}
|
||||
centered
|
||||
style={{ maxHeight: modalHeight }}
|
||||
bodyStyle={{ maxHeight: modalHeight - 107, overflowY: 'auto' }}
|
||||
visible={previewVisible}
|
||||
onCancel={()=> setPreviewVisible(false)}
|
||||
footer={[<Button onClick={()=>setPreviewVisible(false)}>关闭</Button>]}
|
||||
>
|
||||
<div className="form-width">
|
||||
<Form
|
||||
name="basic"
|
||||
form={form}
|
||||
preserve={false}
|
||||
>
|
||||
<Form.Item label="标题" rules={[{ required: true, message: '标题不可为空' }]} name="formTitle">
|
||||
<Input disabled placeholder="请输入标题" />
|
||||
</Form.Item>
|
||||
<Form.Item name="time" label="时间" rules={[{ required: true, message: '时间不可为空' }]}>
|
||||
<RangePicker disabled showTime format="YYYY-MM-DD HH:mm:ss" />
|
||||
</Form.Item>
|
||||
<Form.Item label="说明" name="remarks">
|
||||
<TextArea disabled rows={3} placeholder="请填写说明" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
<div>
|
||||
{
|
||||
dataList.map((item: any, index: any)=> {
|
||||
return (
|
||||
<div className="block">
|
||||
<Row>
|
||||
<Col flex="auto">
|
||||
<p>
|
||||
{
|
||||
item.requiredFlag == '1' ? <span className="red">*</span> : null
|
||||
}
|
||||
{index+1+'.'+item.questTitle}
|
||||
{
|
||||
item.type == '1' ? <span className="radio">单选</span> :
|
||||
item.type == '2' ? <span className="check">多选</span> : null
|
||||
}
|
||||
</p>
|
||||
</Col>
|
||||
</Row>
|
||||
{
|
||||
item.type == '1' ?
|
||||
<Radio.Group name="radiogroup" defaultValue=''>
|
||||
{
|
||||
item.questItemList.map((val: any, ind: any)=> {
|
||||
return (
|
||||
<Radio value={val.itemTitle}>{val.itemTitle}</Radio>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Radio.Group> :
|
||||
item.type == '2' ?
|
||||
<Checkbox.Group style={{ width: '100%' }}>
|
||||
{
|
||||
item.questItemList.map((val: any, ind: any)=> {
|
||||
return (
|
||||
<Checkbox value={val.itemTitle}>{val.itemTitle}</Checkbox>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Checkbox.Group>
|
||||
:
|
||||
<TextArea readOnly rows={4} placeholder={item.remark} />
|
||||
}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</Modal> : null
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Index;
|
||||
14
src/pages/Questionnaire/questionAdd/service.ts
Normal file
14
src/pages/Questionnaire/questionAdd/service.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
export async function saveQuestForm(data: any) { // 新建保存
|
||||
return request('/api/biz-service-ebtp-quest/mongdb/questForm/saveQuestForm', {
|
||||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
|
||||
export async function findQuestForm(id: any) { // 编辑
|
||||
return request('/api/biz-service-ebtp-quest/mongdb/questForm/findQuestForm?id='+id, {
|
||||
method: 'post',
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user