diff --git a/admin/src/pages/examinationrules/normal/step/index.less b/admin/src/pages/examinationrules/normal/step/index.less index 23482a0..74c6c5b 100644 --- a/admin/src/pages/examinationrules/normal/step/index.less +++ b/admin/src/pages/examinationrules/normal/step/index.less @@ -10,10 +10,18 @@ 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/examinationrules/normal/step/index.tsx b/admin/src/pages/examinationrules/normal/step/index.tsx index c19d2b4..96d069e 100644 --- a/admin/src/pages/examinationrules/normal/step/index.tsx +++ b/admin/src/pages/examinationrules/normal/step/index.tsx @@ -11,10 +11,11 @@ import ProForm, { ProFormDateRangePicker, } from '@ant-design/pro-form'; import ProCard from '@ant-design/pro-card'; -import { Button, Checkbox, Col, Divider, List, message, Radio, Row, Space, Typography } from 'antd'; +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'; const waitTime = (time: number = 100) => { return new Promise((resolve) => { @@ -74,7 +75,7 @@ export default () => { placeholder="请输入名称" // rules={[{ required: true }]} // value="锦书" - disabled + // disabled /> { return true; }} > - - - - - 一. 单选题} - footer={false} - bordered - dataSource={numbers} - renderItem={item => ( - - {item.id} - - )} - style={{background:'#ffffff', margin:'-25px -24px 0 -24px'}} - /> - 二. 多选题} - footer={false} - bordered - dataSource={numbers} - renderItem={item => ( - - {item.id} - - )} - style={{background:'#ffffff', margin:'-1px -24px'}} - /> - 三. 判断题} - footer={false} - bordered - dataSource={numbers} - renderItem={item => ( - - {item.id} - - )} - style={{background:'#ffffff', margin:'-1px -24px -24px -24px'}} - /> - - - +
+ 生涯规划师初级认证考试 + {/** 一旦录入另一项将禁用，清空组卷后可选另一项 */} + {}} style={{ marginBottom: 16 }}> + 手动组卷 + 系统组卷 + + + + { - - + +
- 剩余时间 - 6分14秒 + 试卷信息与设置 + 共 {} 题 {} 分 - 答题序号 - 14/80 + + 单选题 共 {} 题 {} 分 + 多选题 共 {} 题 {} 分 + 判断题 共 {} 题 {} 分 + - - - + +
- - - + + +
{ onFinish={async () => { console.log(formRef.current?.getFieldsValue()); // 跳转到指定路由 - history.push('/registration/success'); + history.push('/examinationrules/normal'); return true; }} > - + { return Promise.resolve({ success: true, @@ -253,40 +219,16 @@ export default () => { extra={false} > - - + + - + + + - - - - { - 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} - > - - - - - - - - - - + diff --git a/admin/src/pages/questionbank/attestation/data.d.ts b/admin/src/pages/questionbank/attestation/data.d.ts index f1cfa66..c7e663f 100644 --- a/admin/src/pages/questionbank/attestation/data.d.ts +++ b/admin/src/pages/questionbank/attestation/data.d.ts @@ -4,7 +4,7 @@ export type Member = { id: string; }; -export type BasicListItemDataType = { +export type CardListItemDataType = { id: string; owner: string; title: string; diff --git a/admin/src/pages/questionbank/attestation/index.tsx b/admin/src/pages/questionbank/attestation/index.tsx index 95a14b7..6b3cba8 100644 --- a/admin/src/pages/questionbank/attestation/index.tsx +++ b/admin/src/pages/questionbank/attestation/index.tsx @@ -1,246 +1,207 @@ -import type { FC } from 'react'; -import React, { useState } from 'react'; -import { DownOutlined, PlusOutlined } from '@ant-design/icons'; -import { - Avatar, - Button, - Card, - Col, - Dropdown, - Input, - List, - Menu, - Modal, - Progress, - Radio, - Row, -} from 'antd'; - +/** 资质考试 */ +//import { AlignLeftOutlined, PlusOutlined } from '@ant-design/icons'; +import { Switch, Button, Card, Col, List, Menu, Progress, Row, Typography, Space, Divider, Radio, Checkbox, Tag, Dropdown } from 'antd'; import { PageContainer } from '@ant-design/pro-layout'; -import { useRequest } from 'umi'; -import moment from 'moment'; -import OperationModal from './components/OperationModal'; -import { addFakeList, queryFakeList, removeFakeList, updateFakeList } from './service'; -import type { BasicListItemDataType } from './data.d'; +//import { useRequest } from 'umi'; +//import { queryFakeList } from './service'; +//import type { CardListItemDataType } from './data'; import styles from './style.less'; - -const RadioButton = Radio.Button; -const RadioGroup = Radio.Group; -const { Search } = Input; - -const Info: FC<{ - title: React.ReactNode; - value: React.ReactNode; - bordered?: boolean; -}> = ({ title, value, bordered }) => ( -
- {title} -

{value}

- {bordered && } -
-); - -const ListContent = ({ - data: { owner, createdAt, percent, status }, -}: { - data: BasicListItemDataType; -}) => ( -
-
- Owner -

{owner}

-
-
- 开始时间 -

{moment(createdAt).format('YYYY-MM-DD HH:mm')}

-
-
- -
-
-); - -export const BasicList: FC = () => { - const [done, setDone] = useState(false); - const [visible, setVisible] = useState(false); - const [current, setCurrent] = useState | undefined>(undefined); - - const { - data: listData, - loading, - mutate, - } = useRequest(() => { - return queryFakeList({ - count: 50, - }); - }); - const { run: postRun } = useRequest( - (method, params) => { - if (method === 'remove') { - return removeFakeList(params); - } - if (method === 'update') { - return updateFakeList(params); - } - return addFakeList(params); +//import SubMenu from 'antd/lib/menu/SubMenu'; +//import ProCard from '@ant-design/pro-card'; +import ProList from '@ant-design/pro-list'; +import { ReactText, useState } from 'react'; +import { PlusOutlined, DeleteOutlined, DownloadOutlined, UploadOutlined, EditOutlined, EyeOutlined, EyeInvisibleOutlined, DownOutlined } from '@ant-design/icons'; +//const { Paragraph } = Typography; +const QuestionBank = () => { + const [selectedRowsState, setSelectedRows] = useState([]); + const [expandedDescRowKeys, setExpandedDescRowKeys] = useState([]); // 展开解析设置 + const [addType, setAddType] = useState(0); + const numbers = []; + for(let i=0;i<50;i++){ + numbers.push({id: `${i}`}) + } + + const dataSource = [ + { + id: 1, + name: '下面哪个词语能体现未来思维？', + type: '单选', + options: [ + {label: '井底之蛙', value: 'A'}, + {label: '鼠目寸光', value: 'B'}, + {label: '未雨绸缪', value: 'C'}, + {label: '即时行乐', value: 'D'}, + ], + + time: '2022/12/12', + tag: '生涯理论', + course: '特质因素理论', + + answer:'C', + desc: '该成语意思是天还没有下雨，先把门窗绑牢。比喻事先做好准备工作。该成语意思是天还没有下雨，先把门窗绑牢。比喻事先做好准备工作。该成语意思是天还没有下雨，先把门窗绑牢。比喻事先做好准备工作。该成语意思是天还没有下雨，先把门窗绑牢。比喻事先做好准备工作。', }, { - manual: true, - onSuccess: (result) => { - mutate(result); - }, + id: 2, + name: 'Ant Design', + type: '多选', + image: + 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg', + desc: '我是一条测试的描述', }, - ); - - const list = listData?.list || []; - - const paginationProps = { - showSizeChanger: true, - showQuickJumper: true, - pageSize: 5, - total: list.length, - }; - - const showEditModal = (item: BasicListItemDataType) => { - setVisible(true); - setCurrent(item); - }; - - const deleteItem = (id: string) => { - postRun('remove', { id }); - }; - - const editAndDelete = (key: string | number, currentItem: BasicListItemDataType) => { - if (key === 'edit') showEditModal(currentItem); - else if (key === 'delete') { - Modal.confirm({ - title: '删除任务', - content: '确定删除该任务吗？', - okText: '确认', - cancelText: '取消', - onOk: () => deleteItem(currentItem.id), - }); - } - }; - - const extraContent = ( -
- - 全部 - 进行中 - 等待中 - - ({})} /> -
- ); - - const MoreBtn: React.FC<{ - item: BasicListItemDataType; - }> = ({ item }) => ( - editAndDelete(key, item)}> - 编辑 1 - 删除 - - } - > - - 更多 - - - ); - - const handleDone = () => { - setDone(false); - setVisible(false); - setCurrent({}); - }; - - const handleSubmit = (values: BasicListItemDataType) => { - setDone(true); - const method = values?.id ? 'update' : 'add'; - postRun(method, values); - }; - + { + id: 3, + name: '蚂蚁金服体验科技', + type: '判断', + image: + 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg', + desc: '我是一条测试的描述', + }, + { + id: 4, + name: 'TechUI', + type: '单选', + image: + 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg', + desc: '我是一条测试的描述', + }, + ]; + return ( -
- -
- - - - - - - - - - - - - - - - ( - { - e.preventDefault(); - showEditModal(item); - }} - > - 编辑3 - , - , - ]} - > - } - title={{item.title}} - description={item.subDescription} - /> - - - )} - /> - -
- - + , + , + , + , + ]; + }} + onRow={(record: any) => { + return { + onMouseEnter: () => { + console.log(record); + }, + onClick: () => { + console.log(record); + }, + }; + }} + rowKey="id" + headerTitle={false} + tooltip={false} + dataSource={dataSource} + rowSelection={{ + onChange: (_, selectedRows) => { + setSelectedRows(selectedRows); + }, + }} + // grid={{ gutter: 16, column: 1 }} + showActions="always" + showExtra="always" + metas={{ + title: { + dataIndex: 'name', + render: (text: React.ReactNode, record: T, index: number) => `1. ${text}`, + }, + avatar: { + dataIndex: 'type', + valueType: 'text', + render: (text: React.ReactNode, record: T, index: number) => `[${record.type}]`, + }, + description: { + dataIndex: 'options', + valueType: 'checkbox', + render: (text: React.ReactNode, record: T, index: number) => { + return ( + ( + + {`${item?.value}. ${item?.label}`} + + )} + /> + ); + }, + }, + subTitle: { }, + content: { + render: (text: React.ReactNode, record: T, index: number) => { + return ( + + 正确答案：{record.answer} + 解析：{record.desc} + + ); + }, + }, + actions: { + cardActionProps: 'extra', + render: (text: React.ReactNode, record: T, _index: number) => { + return( + + + + 创建时间：{record.time} + 标签：{record.tag} + 所属课程：{record.course} + + + + + + 编辑 + + + 删除 + + { + setExpandedDescRowKeys([...expandedDescRowKeys, record.id]); + console.log('record id:', record.id); + console.log('expandedDescRowKeys', expandedDescRowKeys) + }} + > + 查看解析 + + + + + ) + } + }, }} - style={{ width: '100%', marginBottom: 8 }} - > - - 添加 - - -
+ ); }; -export default BasicList; +export default QuestionBank; diff --git a/admin/src/pages/questionbank/attestation/service.ts b/admin/src/pages/questionbank/attestation/service.ts index 4aa8f8d..fee9a31 100644 --- a/admin/src/pages/questionbank/attestation/service.ts +++ b/admin/src/pages/questionbank/attestation/service.ts @@ -1,50 +1,10 @@ import { request } from 'umi'; -import type { BasicListItemDataType } from './data.d'; +import type { CardListItemDataType } from './data.d'; -type ParamsType = { - count?: number; -} & Partial; - -export async function queryFakeList( - params: ParamsType, -): Promise<{ data: { list: BasicListItemDataType[] } }> { - return request('/api/get_list', { +export async function queryFakeList(params: { + count: number; +}): Promise<{ data: { list: CardListItemDataType[] } }> { + return request('/api/card_fake_list', { params, }); } - -export async function removeFakeList( - params: ParamsType, -): Promise<{ data: { list: BasicListItemDataType[] } }> { - return request('/api/post_fake_list', { - method: 'POST', - data: { - ...params, - method: 'delete', - }, - }); -} - -export async function addFakeList( - params: ParamsType, -): Promise<{ data: { list: BasicListItemDataType[] } }> { - return request('/api/post_fake_list', { - method: 'POST', - data: { - ...params, - method: 'post', - }, - }); -} - -export async function updateFakeList( - params: ParamsType, -): Promise<{ data: { list: BasicListItemDataType[] } }> { - return request('/api/post_fake_list', { - method: 'POST', - data: { - ...params, - method: 'update', - }, - }); -} diff --git a/admin/src/pages/questionbank/attestation/style.less b/admin/src/pages/questionbank/attestation/style.less index 2d3a58c..a59b424 100644 --- a/admin/src/pages/questionbank/attestation/style.less +++ b/admin/src/pages/questionbank/attestation/style.less @@ -1,195 +1,23 @@ @import '~antd/es/style/themes/default.less'; -@import './utils/utils.less'; - -.standardList { +.questionbank{ :global { - .ant-card-head { - border-bottom: none; + .ant-list-split.ant-list-something-after-last-item .ant-spin-container > .ant-list-items > .ant-list-item:last-child{ + border: none; } - .ant-card-head-title { - padding: 24px 0; - line-height: 32px; + .questionbank-list-item{ + //background: #f0f0f0; + border: solid 1px #f0f0f0 !important; + margin: 15px 0; } - .ant-card-extra { - padding: 24px 0; + .ant-list-vertical .ant-list-item-action{ + padding: 0 !important; + margin: 0 -18px -12px -24px !important; } - .ant-list-pagination { - margin-top: 24px; - text-align: right; - } - .ant-avatar-lg { - width: 48px; - height: 48px; - line-height: 48px; - } - } - .headerInfo { - position: relative; - text-align: center; - & > span { - display: inline-block; - margin-bottom: 4px; - color: @text-color-secondary; - font-size: @font-size-base; - line-height: 22px; - } - & > p { - margin: 0; - color: @heading-color; - font-size: 24px; - line-height: 32px; - } - & > em { - position: absolute; - top: 0; - right: 0; - width: 1px; - height: 56px; - background-color: @border-color-split; - } - } - .listContent { - font-size: 0; - .listContentItem { + .ant-list-item-action li{ + padding: 10px 18px; + background: #f0f0f0; display: inline-block; - margin-left: 40px; - color: @text-color-secondary; - font-size: @font-size-base; - vertical-align: middle; - > span { - line-height: 20px; - } - > p { - margin-top: 4px; - margin-bottom: 0; - line-height: 22px; - } - } - } - .extraContentSearch { - width: 272px; - margin-left: 16px; - } -} - -@media screen and (max-width: @screen-xs) { - .standardList { - :global { - .ant-list-item-content { - display: block; - flex: none; - width: 100%; - } - .ant-list-item-action { - margin-left: 0; - } - } - .listContent { - margin-left: 0; - & > div { - margin-left: 0; - } - } - .listCard { - :global { - .ant-card-head-title { - overflow: visible; - } - } - } - } -} - -@media screen and (max-width: @screen-sm) { - .standardList { - .extraContentSearch { width: 100%; - margin-left: 0; - } - .headerInfo { - margin-bottom: 16px; - & > em { - display: none; - } - } - } -} - -@media screen and (max-width: @screen-md) { - .standardList { - .listContent { - & > div { - display: block; - } - & > div:last-child { - top: 0; - width: 100%; - } - } - } - .listCard { - :global { - .ant-radio-group { - display: block; - margin-bottom: 8px; - } - } - } -} - -@media screen and (max-width: @screen-lg) and (min-width: @screen-md) { - .standardList { - .listContent { - & > div { - display: block; - } - & > div:last-child { - top: 0; - width: 100%; - } - } - } -} - -@media screen and (max-width: @screen-xl) { - .standardList { - .listContent { - & > div { - margin-left: 24px; - } - & > div:last-child { - top: 0; - } } } } - -@media screen and (max-width: 1400px) { - .standardList { - .listContent { - text-align: right; - & > div:last-child { - top: 0; - } - } - } -} - -.standardListForm { - :global { - .ant-form-item { - margin-bottom: 12px; - &:last-child { - margin-bottom: 32px; - padding-top: 4px; - } - } - } -} - -.formResult { - width: 100%; - [class^='title'] { - margin-bottom: 8px; - } -} diff --git a/admin/src/pages/training/option/index.tsx b/admin/src/pages/training/option/index.tsx index ae0cfb1..1bc35be 100644 --- a/admin/src/pages/training/option/index.tsx +++ b/admin/src/pages/training/option/index.tsx @@ -1,10 +1,10 @@ import { PlusOutlined } from '@ant-design/icons'; -import { Button, message, Input, Drawer } from 'antd'; +import { Button, message, Input, Drawer, Row, Col, Space, Modal } from 'antd'; import React, { useState, useRef } from 'react'; import { PageContainer, FooterToolbar } from '@ant-design/pro-layout'; import type { ProColumns, ActionType } from '@ant-design/pro-table'; import ProTable from '@ant-design/pro-table'; -import { ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-form'; +import { BetaSchemaForm, ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-form'; import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions'; import ProDescriptions from '@ant-design/pro-descriptions'; import type { FormValueType } from './components/UpdateForm'; @@ -31,12 +31,12 @@ const handleAdd = async (fields: TableListItem) => { return false; } }; + /** * 更新培训 * * @param fields */ - const handleUpdate = async (fields: FormValueType, currentRow?: TableListItem) => { const hide = message.loading('正在配置'); try { @@ -53,12 +53,12 @@ const handleUpdate = async (fields: FormValueType, currentRow?: TableListItem) = return false; } }; + /** * 删除培训 * * @param selectedRows */ - const handleRemove = async (selectedRows: TableListItem[]) => { const hide = message.loading('正在删除'); if (!selectedRows) return true; @@ -80,14 +80,12 @@ const handleRemove = async (selectedRows: TableListItem[]) => { const TableList: React.FC = () => { /** 新建窗口的弹窗 */ const [createModalVisible, handleModalVisible] = useState(false); - /** 分布更新窗口的弹窗 */ const [updateModalVisible, handleUpdateModalVisible] = useState(false); const [showDetail, setShowDetail] = useState(false); const actionRef = useRef(); const [currentRow, setCurrentRow] = useState(); const [selectedRowsState, setSelectedRows] = useState([]); - /** 国际化配置 */ const columns: ProColumns[] = [ { @@ -112,7 +110,7 @@ const TableList: React.FC = () => { title: '培训对象', dataIndex: 'org_names', sorter: false, - hideInForm: true, + hideInForm: false, renderText: (val: string) => `${val}`, }, { @@ -134,6 +132,7 @@ const TableList: React.FC = () => { sorter: false, dataIndex: 'total_course_hours', valueType: 'text', + hideInForm: true, renderText: (val: string) => `${val}小时`, }, { @@ -229,33 +228,42 @@ const TableList: React.FC = () => { )} - { - const success = await handleAdd(value as TableListItem); - if (success) { - handleModalVisible(false); - if (actionRef.current) { - actionRef.current.reload(); - } - } + destroyOnClose + onCancel={() => { + handleModalVisible(false); }} + footer={null} > - + layout="horizontal" + layoutType="Form" + labelCol={{ span: 8 }} + wrapperCol={{ span: 12 }} + onFinish={async (values: any) => { + // 表单处理 + console.log('columns:', columns); + console.log('values:', values); + + }} + submitter={{ + render: (props, doms) => ( + + + {doms} + + + ), + }} + // action = '' + title="新建" + columns={columns} /> - - + { const success = await handleUpdate(value, currentRow);