修改主题

master
zhengpengju 4 years ago
parent 9c165d9435
commit 3be3b690a9

@ -80,6 +80,12 @@ export default defineConfig({
path: '/course/subject',
component: './course/subject',
},
{
name: '新建主题',
icon: 'smile',
path: '/course/subject/step',
component: './course/subject/step',
},
{
name: '课程设置',
icon: 'smile',

@ -9,7 +9,7 @@ import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import ProDescriptions from '@ant-design/pro-descriptions';
import type { FormValueType } from './components/UpdateForm';
import UpdateForm from './components/UpdateForm';
import { rule, addRule, updateRule, removeRule, querySubjectList } from './service';
import { Subject, addSubject, updateSubject, removeSubject, querySubjectList } from './service';
import type { TableListItem, TableListPagination } from './data';
/**
*
@ -21,7 +21,7 @@ const handleAdd = async (fields: TableListItem) => {
const hide = message.loading('正在添加');
try {
await addRule({ ...fields });
await addSubject({ ...fields });
hide();
message.success('添加成功');
return true;
@ -31,17 +31,16 @@ const handleAdd = async (fields: TableListItem) => {
return false;
}
};
/**
*
*
* @param fields
*/
const handleUpdate = async (fields: FormValueType, currentRow?: TableListItem) => {
const hide = message.loading('正在配置');
try {
await updateRule({
await updateSubject({
...currentRow,
...fields,
});
@ -54,18 +53,18 @@ const handleUpdate = async (fields: FormValueType, currentRow?: TableListItem) =
return false;
}
};
/**
*
*
* @param selectedRows
*/
const handleRemove = async (selectedRows: TableListItem[]) => {
const hide = message.loading('正在删除');
if (!selectedRows) return true;
try {
await removeRule({
await removeSubject({
key: selectedRows.map((row) => row.key),
});
hide();
@ -193,7 +192,7 @@ const TableList: React.FC = () => {
<ProTable<TableListItem, TableListPagination>
headerTitle="查询表格"
actionRef={actionRef}
rowKey="key"
rowKey="subject_id"
search={{
labelWidth: 120,
}}
@ -208,7 +207,15 @@ const TableList: React.FC = () => {
<PlusOutlined />
</Button>,
]}
request={querySubjectList}
request={async () => {
const { data } = await querySubjectList({page_size: 20}); // 解构后不用套data
//console.log('datalist', data?.list )
return {
success: true,
data: data?.list || [],
total: data?.total_page || 0,
};
}}
columns={columns}
rowSelection={false}
/>
@ -259,7 +266,7 @@ const TableList: React.FC = () => {
}}
>
<ProFormText
rules={[
Subjects={[
{
required: true,
message: '主题名称为必填项',
@ -273,7 +280,6 @@ const TableList: React.FC = () => {
<UpdateForm
onSubmit={async (value) => {
const success = await handleUpdate(value, currentRow);
if (success) {
handleUpdateModalVisible(false);
setCurrentRow(undefined);
@ -290,8 +296,6 @@ const TableList: React.FC = () => {
updateModalVisible={updateModalVisible}
values={currentRow || {}}
/>
</PageContainer>
);
};

@ -63,7 +63,8 @@ export async function removeRule(data: { key: number[] }, options?: { [key: stri
* @returns
*/
export async function querySubjectList(params: {
count: number;
page_size: number;
//count: number;
}): Promise<{ data: { list: CardListItemDataType[] } }> {
return request('/dsideal_yy/ypt/careerTraining/subject/listSubject', {
params,

@ -0,0 +1,27 @@
@import '~antd/es/style/themes/default.less';
.error_icon {
color: @highlight-color;
}
.title {
margin-bottom: 16px;
color: @heading-color;
font-weight: 500;
font-size: 16px;
}
.examinationrules{
:global {
.ant-pro-steps-form-step{
min-width: 960px;
}
.ant-space-align-center{
padding:24px;
display: block;
text-align: center;
.ant-space-item{
display: inline-block;
}
}
}
}

@ -0,0 +1,247 @@
import React, { useRef } from 'react';
import { history } from 'umi';
import { ProFormInstance, ProFormRadio } from '@ant-design/pro-form';
import ProForm, {
StepsForm,
ProFormText,
ProFormDatePicker,
ProFormSelect,
ProFormTextArea,
ProFormCheckbox,
ProFormDateRangePicker,
} from '@ant-design/pro-form';
import ProCard from '@ant-design/pro-card';
import { Button, Checkbox, Col, Divider, List, Menu, message, Radio, Row, Space, Typography } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import ProDescriptions from '@ant-design/pro-descriptions';
import styles from './index.less'
import { MailOutlined, AppstoreOutlined } from '@ant-design/icons';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'
const waitTime = (time: number = 100) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, time);
});
};
const numbers = [];
for(let i=0;i<50;i++){
numbers.push({id: `${i}`})
}
export default () => {
const formRef = useRef<ProFormInstance>();
return (
<PageContainer content={''} extraContent={''}>
<ProCard className={styles.examinationrules}>
<StepsForm<{
name: string;
}>
formRef={formRef}
onFinish={async () => {
await waitTime(1000);
message.success('提交成功');
}}
formProps={{
layout: "horizontal",
labelCol: { span: 8 },
wrapperCol: { span: 12 },
validateMessages: {
required: '此项为必填项',
},
}}
>
<StepsForm.StepForm<{
name: string;
}>
name="base"
title="主题基本信息"
stepProps={{
description: false,
}}
onFinish={async () => {
console.log(formRef.current?.getFieldsValue());
await waitTime(2000);
return true;
}}
>
<Row gutter={24}>
<Col lg={24} md={24} sm={24}>
<ProFormText
name="name"
label="主题名称"
width="md"
// tooltip="最长为 6 位汉字,需要与考生身份证一致"
placeholder="请输入名称"
// rules={[{ required: true }]}
// value="锦书"
// disabled
/>
<ReactQuill
theme="snow"
value=''
onChange={(val)=>{
// val === 转化出来的html
}}
/>
<ProFormSelect
width="md"
options={[
{
value: '1',
label: '主题1',
},
{
value: '2',
label: '主题3',
},
]}
name="unusedMode"
label="关联主题"
/>
</Col>
</Row>
</StepsForm.StepForm>
<StepsForm.StepForm<{
checkbox: string;
}>
name="object"
title="组卷"
stepProps={{
description: false,
}}
onFinish={async () => {
console.log(formRef.current?.getFieldsValue());
return true;
}}
>
<div style={{margin:'0'}}>
<Typography style={{padding:24, fontSize: 24, textAlign: 'center'}}></Typography>
{/** 一旦录入另一项将禁用,清空组卷后可选另一项 */}
<Radio.Group value={1} onChange={()=>{}} style={{ marginBottom: 16 }}>
<Radio.Button value={1}></Radio.Button>
<Radio.Button value={2}></Radio.Button>
</Radio.Group>
<Divider style={{margin:'6px 0', opacity: 0.5}}/>
<Row>
<Col span={18} style={{background:'#ffffff', padding:0}}>
<ProCard
title="一. 单选题 共50分每题1分"
extra={false}
split='vertical'
bordered
headerBordered
>
<Space direction="vertical" style={{width:'100%', padding: '24px 48px'}}>
<Typography style={{marginBottom:16, fontSize:18}}>
4.
</Typography>
<Radio.Group onChange={()=>{return true}} value={0} size="large">
<Space direction="vertical" style={{fontSize:16}}>
<Radio value={1} style={{padding:5, fontSize:16}}>A. 退</Radio>
<Radio value={2} style={{padding:5, fontSize:16}}>B. </Radio>
<Radio value={3} style={{padding:5, fontSize:16}}>C. </Radio>
<Radio value={4} style={{padding:5, fontSize:16}}>D. </Radio>
</Space>
</Radio.Group>
<Typography style={{marginBottom:16, fontSize:18}}>
5. ()
</Typography>
<Checkbox.Group onChange={()=>{return true}}>
<Space direction="vertical" style={{}}>
<Checkbox value={1} style={{padding:5, fontSize:16}}>A. 退</Checkbox>
<Checkbox value={2} style={{padding:5, fontSize:16}}>B. </Checkbox>
<Checkbox value={3} style={{padding:5, fontSize:16}}>C. </Checkbox>
<Checkbox value={4} style={{padding:5, fontSize:16}}>D. </Checkbox>
</Space>
</Checkbox.Group>
<Typography style={{marginBottom:16, fontSize:18}}>
6. 退
</Typography>
<Radio.Group onChange={()=>{return true}} value={0} size="large">
<Space direction="vertical" style={{fontSize:16}}>
<Radio value={1} style={{padding:5, fontSize:16}}></Radio>
<Radio value={2} style={{padding:5, fontSize:16}}></Radio>
</Space>
</Radio.Group>
</Space>
</ProCard>
</Col>
<Col span={6} style={{paddingLeft:24}}>
<div style={{background:'#ffffff', padding:24}}>
<Space direction="vertical" style={{width:'100%'}}>
<strong></strong>
<Typography> {} {} </Typography>
<Divider style={{margin:'6px 0', opacity: 0.5}}/>
<Space direction="vertical">
<Typography> {} {} </Typography>
<Typography> {} {} </Typography>
<Typography> {} {} </Typography>
</Space>
<Divider style={{margin:'6px 0', opacity: 0.5}}/>
<Button size="large" block></Button>
<Button size="large" type="primary" block></Button>
</Space>
</div>
</Col>
</Row>
</div>
</StepsForm.StepForm>
<StepsForm.StepForm
name="time"
title="完成"
stepProps={{
description: false,
}}
onFinish={async () => {
console.log(formRef.current?.getFieldsValue());
// 跳转到指定路由
history.push('/examinationrules/normal');
return true;
}}
>
<Row gutter={24}>
<Col lg={12} md={12} sm={12} offset={8}>
<ProDescriptions
layout='horizontal'
column={1}
//actionRef={actionRef}
title="模拟考试"
request={async () => {
return Promise.resolve({
success: true,
data: { id: '这是一段文本', object:'', date: '2020-07-30 08:00', duration:'', grade:100, through:'>60', learn: '>20 min', times: 2 },
});
}}
extra={false}
>
<ProDescriptions.Item dataIndex="id" hideInDescriptions />
<ProDescriptions.Item dataIndex="object" label="考试名称" valueType="text" />
<ProDescriptions.Item dataIndex="date" label="关联培训主题" valueType="text" />
<ProDescriptions.Item dataIndex="duration" label="考试时长" valueType="text" />
<ProDescriptions.Item dataIndex="grade" label="考试信息" valueType="text" />
<ProDescriptions.Item dataIndex="through" label="通过标准" valueType="text" />
<ProDescriptions.Item dataIndex="times" label="考试次数" valueType="text" />
</ProDescriptions>
</Col>
</Row>
</StepsForm.StepForm>
</StepsForm>
</ProCard>
</PageContainer>
);
};

@ -1,6 +1,6 @@
import { DingdingOutlined } from '@ant-design/icons';
import { Button, Card, Steps, Result, Descriptions, Modal } from 'antd';
import { Fragment, useState } from 'react';
import { Button, Card, Steps, Result, Descriptions, Modal, Input } from 'antd';
import { Fragment, useRef, useState } from 'react';
import { GridContent } from '@ant-design/pro-layout';
import styles from './index.less';
@ -13,6 +13,7 @@ const { Step } = Steps;
export default () => {
const [modalVisible, handleModalVisible] = useState<boolean>(false);
const saveInputRef = useRef();
//const currentRow = {course_name:'课程0001'};
const currentRow = {course_name1:'课程0001'};
const columns = [
@ -23,6 +24,11 @@ export default () => {
];
return(
<>
<Input value={123} ref={saveInputRef} />
<a onClick={()=>{
saveInputRef.current.focus({})
console.log('ref', saveInputRef.current)
}}></a>
<a onClick={()=>{handleModalVisible(true)}}></a>
<ReactQuill
theme="snow"
@ -59,6 +65,7 @@ export default () => {
columns.slice(0, columns.length - 1) as ProDescriptionsItemProps<TableListItem>[]
}
/>
</Modal>
</>
)

Loading…
Cancel
Save