253 lines
11 KiB
TypeScript
253 lines
11 KiB
TypeScript
import { ConnectState } from "@/models/global";
|
|
import { FormInstance, ProForm, ProFormDigit, ProFormList, ProFormRadio, ProFormSwitch, ProFormText, ProFormTextArea, ProFormTreeSelect } from "@ant-design/pro-components";
|
|
import { useImperativeHandle, useRef, useState } from "react";
|
|
import { connect } from "umi";
|
|
import { Col, message, Modal, Row } from "antd";
|
|
import { handleGetExamineTypeList, handleGetExamineTypeTreeList } from "../../index/service";
|
|
import { handleAddQuestion, handleEditQuestion } from "../service";
|
|
|
|
|
|
type DetailProps = {
|
|
parentRow: any
|
|
onRef: any
|
|
currentUser?: any
|
|
showQuestionModal: boolean
|
|
setShowQuestionModal?: any
|
|
parentActionRef?: any
|
|
setCurrentRow?: any
|
|
afterAdd?: any
|
|
}
|
|
const addQuestion = ({ parentRow, onRef, currentUser, showQuestionModal, setShowQuestionModal, parentActionRef, setCurrentRow, afterAdd }: DetailProps) => {
|
|
|
|
// 弹出框的表单实例
|
|
const modalRef = useRef<FormInstance>()
|
|
const [categoryIdObj, setCategoryIdObj] = useState<any>()
|
|
|
|
|
|
useImperativeHandle(onRef, () => ({
|
|
modalRef,
|
|
categoryIdObj
|
|
}));
|
|
|
|
|
|
return (
|
|
<div>
|
|
<Modal
|
|
width={800}
|
|
title={`${parentRow?.id ? '编辑' : '创建'}问题`}
|
|
open={showQuestionModal}
|
|
destroyOnClose
|
|
onOk={() => {
|
|
modalRef.current?.validateFields().then(async (res) => {
|
|
let req = {}
|
|
let data = {}
|
|
if (parentRow?.id) {
|
|
req = {
|
|
...parentRow,
|
|
categoryId: res.categoryId,// 题目id
|
|
type: `${res.selectType === 1 ? 'radio' : 'checked'}_choice`,// 题目类型
|
|
title: res.title,// 问题内容
|
|
required: res.required,// 是否必填
|
|
options: res.options,
|
|
status: res.status,
|
|
operator: currentUser?.operator,
|
|
description: `${res.categoryId && categoryIdObj ? categoryIdObj[res.categoryId] : ''}`,
|
|
category: undefined
|
|
}
|
|
console.log('req', req);
|
|
|
|
data = await handleEditQuestion(req)
|
|
} else {
|
|
req = {
|
|
categoryId: res.categoryId,// 题目id
|
|
type: `${res.selectType === 1 ? 'radio' : 'checked'}_choice`,// 题目类型
|
|
title: res.title,// 问题内容
|
|
required: res.required,// 是否必填
|
|
options: res.options,
|
|
sortOrder: 1,
|
|
status: res.status,
|
|
operator: currentUser?.operator,
|
|
defaultScore: 0,
|
|
images: [],
|
|
description: `${res.categoryId && categoryIdObj ? categoryIdObj[res.categoryId] : ''}`
|
|
}
|
|
data = await handleAddQuestion(req)
|
|
}
|
|
console.log('datadsadsa', data);
|
|
if (data.Result_Code === 100) {
|
|
if (modalRef) {
|
|
modalRef.current?.resetFields()
|
|
}
|
|
message.success(data.Result_Desc)
|
|
setShowQuestionModal(false)
|
|
if (parentActionRef) {
|
|
parentActionRef.current?.reload()
|
|
}
|
|
if (setCurrentRow) {
|
|
setCurrentRow(undefined)
|
|
}
|
|
if (afterAdd) {
|
|
afterAdd()
|
|
}
|
|
} else {
|
|
message.error(data.Result_Desc)
|
|
}
|
|
|
|
})
|
|
|
|
}}
|
|
onCancel={() => {
|
|
if (modalRef) {
|
|
modalRef.current?.resetFields()
|
|
}
|
|
setShowQuestionModal(false)
|
|
if (setCurrentRow) {
|
|
setCurrentRow(undefined)
|
|
}
|
|
}}
|
|
>
|
|
<ProForm formRef={modalRef} submitter={false} request={() => {
|
|
console.log('currentRow', parentRow);
|
|
return {
|
|
...parentRow,
|
|
selectType: parentRow.type.split('_')[0] === 'checked' ? 2 : 1
|
|
}
|
|
}}>
|
|
<Row gutter={8}>
|
|
<Col span={12}>
|
|
<ProFormTreeSelect
|
|
label={"问题分类"}
|
|
name={"categoryId"}
|
|
rules={[
|
|
{ required: true, message: '请选择问题分类！' }
|
|
]}
|
|
request={async () => {
|
|
|
|
|
|
const req = {}
|
|
const data = await handleGetExamineTypeTreeList(req)
|
|
console.log('dsadas', data);
|
|
let res = [
|
|
{
|
|
name: '/',
|
|
id: 0,
|
|
children: data
|
|
}
|
|
]
|
|
let obj: any = {}
|
|
const labelList = await handleGetExamineTypeList()
|
|
if (labelList && labelList.length > 0) {
|
|
labelList.forEach((item: any) => {
|
|
obj[item.id] = item.name
|
|
})
|
|
}
|
|
console.log('objobjobjobj', obj);
|
|
|
|
setCategoryIdObj(obj)
|
|
return data
|
|
}}
|
|
fieldProps={{
|
|
treeDefaultExpandAll: true,
|
|
// treeDefaultExpandedKeys: [0],
|
|
fieldNames: {
|
|
label: "name",
|
|
value: "id"
|
|
},
|
|
showSearch: true,
|
|
filterTreeNode: (input, treeNode) => {
|
|
return (treeNode?.name ?? '').toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
|
},
|
|
treeNodeFilterProp: 'name'
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<ProFormText
|
|
label={"问题内容"}
|
|
name={"title"}
|
|
rules={[
|
|
{ required: true, message: '请输入问题！' }
|
|
]}
|
|
/>
|
|
</Col>
|
|
|
|
<Col span={6}>
|
|
<ProFormSwitch
|
|
label={"是否必填"}
|
|
name={"required"}
|
|
initialValue={parentRow?.id ? parentRow.required : true}
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormSwitch
|
|
label={"有效状态"}
|
|
name={"status"}
|
|
initialValue={parentRow?.id ? parentRow.status : true}
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormRadio.Group
|
|
label={"题目类型"}
|
|
name={"selectType"}
|
|
fieldProps={{
|
|
options: [{ label: "单选", value: 1 }, { label: "多选", value: 2 }],
|
|
}}
|
|
initialValue={1}
|
|
/>
|
|
</Col>
|
|
<Col span={24}>
|
|
<ProFormList
|
|
name="options"
|
|
label="选项内容"
|
|
initialValue={[]}
|
|
creatorButtonProps={{
|
|
position: 'bottom',
|
|
creatorButtonText: '添加选项'
|
|
}}
|
|
copyIconProps={false}
|
|
style={{ width: '100%' }}
|
|
itemContainerStyle={{ width: '100%' }}
|
|
itemRender={({ listDom, action }, { record, index }) => (
|
|
<div style={{ width: '100%', display: 'flex', alignItems: 'flex-start', marginBottom: '10px' }}>
|
|
<div style={{ flex: 1, width: '100%' }}>{listDom}</div>
|
|
<div style={{ marginLeft: '8px', marginTop: '30px' }}>{action}</div>
|
|
</div>
|
|
)}
|
|
>
|
|
<Row gutter={6} style={{ width: '100%', margin: 0 }}>
|
|
<Col span={16}>
|
|
<ProFormTextArea
|
|
name="text"
|
|
label="选项"
|
|
fieldProps={{
|
|
style: { width: '100%' }
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={8}>
|
|
<ProFormDigit
|
|
name="mark"
|
|
label="分值"
|
|
fieldProps={{
|
|
style: { width: '100%' },
|
|
defaultValue: 0
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</ProFormList>
|
|
</Col>
|
|
</Row>
|
|
</ProForm>
|
|
</Modal>
|
|
|
|
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default connect(({ user }: ConnectState) => ({
|
|
currentUser: user.data
|
|
}))(addQuestion);
|