From 3be3b690a9d05a49093db25d33b444f505b157f4 Mon Sep 17 00:00:00 2001 From: zhengpengju Date: Thu, 20 Jan 2022 15:16:30 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin/config/config.ts | 6 + admin/src/pages/course/subject/index.tsx | 30 ++- admin/src/pages/course/subject/service.ts | 3 +- .../src/pages/course/subject/step/index.less | 27 ++ admin/src/pages/course/subject/step/index.tsx | 247 ++++++++++++++++++ admin/src/pages/demo/index.tsx | 11 +- 6 files changed, 308 insertions(+), 16 deletions(-) create mode 100644 admin/src/pages/course/subject/step/index.less create mode 100644 admin/src/pages/course/subject/step/index.tsx diff --git a/admin/config/config.ts b/admin/config/config.ts index 1cc206c..a3267df 100644 --- a/admin/config/config.ts +++ b/admin/config/config.ts @@ -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', diff --git a/admin/src/pages/course/subject/index.tsx b/admin/src/pages/course/subject/index.tsx index 712a669..16c2a57 100644 --- a/admin/src/pages/course/subject/index.tsx +++ b/admin/src/pages/course/subject/index.tsx @@ -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 = () => { headerTitle="查询表格" actionRef={actionRef} - rowKey="key" + rowKey="subject_id" search={{ labelWidth: 120, }} @@ -208,7 +207,15 @@ const TableList: React.FC = () => { 新建 , ]} - 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 = () => { }} > { { const success = await handleUpdate(value, currentRow); - if (success) { handleUpdateModalVisible(false); setCurrentRow(undefined); @@ -290,8 +296,6 @@ const TableList: React.FC = () => { updateModalVisible={updateModalVisible} values={currentRow || {}} /> - - ); }; diff --git a/admin/src/pages/course/subject/service.ts b/admin/src/pages/course/subject/service.ts index 810e88a..3ea9dfb 100644 --- a/admin/src/pages/course/subject/service.ts +++ b/admin/src/pages/course/subject/service.ts @@ -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, diff --git a/admin/src/pages/course/subject/step/index.less b/admin/src/pages/course/subject/step/index.less new file mode 100644 index 0000000..74c6c5b --- /dev/null +++ b/admin/src/pages/course/subject/step/index.less @@ -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; + } + } + } +} diff --git a/admin/src/pages/course/subject/step/index.tsx b/admin/src/pages/course/subject/step/index.tsx new file mode 100644 index 0000000..2d26c63 --- /dev/null +++ b/admin/src/pages/course/subject/step/index.tsx @@ -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(); + + return ( + + + + formRef={formRef} + onFinish={async () => { + await waitTime(1000); + message.success('提交成功'); + }} + formProps={{ + layout: "horizontal", + labelCol: { span: 8 }, + wrapperCol: { span: 12 }, + validateMessages: { + required: '此项为必填项', + }, + }} + > + + name="base" + title="主题基本信息" + stepProps={{ + description: false, + }} + onFinish={async () => { + console.log(formRef.current?.getFieldsValue()); + await waitTime(2000); + return true; + }} + > + + + + { + // val === 转化出来的html + }} + /> + + + + + + + + + + name="object" + title="组卷" + stepProps={{ + description: false, + }} + onFinish={async () => { + console.log(formRef.current?.getFieldsValue()); + return true; + }} + > +
+ 生涯规划师初级认证考试 + {/** 一旦录入另一项将禁用，清空组卷后可选另一项 */} + {}} style={{ marginBottom: 16 }}> + 手动组卷 + 系统组卷 + + + + + + + + + 4. 以下哪些是符合法律规定的 ？ + + {return true}} value={0} size="large"> + + A. 单位在试用期辞退员工 + B. 社会中介收取中介费 + C. 单位不缴纳五险一金 + D. 要求员工支付押金 + + + + + 5. 以下哪些是不符合法律规定的(多选) ？ + + {return true}}> + + A. 单位在试用期辞退员工 + B. 社会中介收取中介费 + C. 单位不缴纳五险一金 + D. 要求员工支付押金 + + + + + 6. 单位在试用期辞退员工是符合法律规定的 ？ + + {return true}} value={0} size="large"> + + 正确 + 错误 + + + + + + +
+ + 试卷信息与设置 + 共 {} 题 {} 分 + + + 单选题 共 {} 题 {} 分 + 多选题 共 {} 题 {} 分 + 判断题 共 {} 题 {} 分 + + + + + +
+ + +
+ + + { + console.log(formRef.current?.getFieldsValue()); + // 跳转到指定路由 + history.push('/examinationrules/normal'); + return true; + }} + > + + + + { + 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} + > + + + + + + + + + + + + + + + + + + ); +}; \ No newline at end of file diff --git a/admin/src/pages/demo/index.tsx b/admin/src/pages/demo/index.tsx index f0bb144..6e4a376 100644 --- a/admin/src/pages/demo/index.tsx +++ b/admin/src/pages/demo/index.tsx @@ -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(false); + const saveInputRef = useRef(); //const currentRow = {course_name:'课程0001'}; const currentRow = {course_name1:'课程0001'}; const columns = [ @@ -23,6 +24,11 @@ export default () => { ]; return( <> + + { + saveInputRef.current.focus({}) + console.log('ref', saveInputRef.current) + }}>焦点 {handleModalVisible(true)}}>课程 { columns.slice(0, columns.length - 1) as ProDescriptionsItemProps[] } /> + )