parent
ceaf741dbc
commit
cffb0fcb65
@ -0,0 +1,415 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { useRequest } from 'umi';
|
||||
import { PlusOutlined, TagsOutlined, UploadOutlined } from '@ant-design/icons';
|
||||
import { Button, message, Input, Drawer, Modal, Col, Row, Space, Upload, Select } from 'antd';
|
||||
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 { 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';
|
||||
import UpdateForm from './components/UpdateForm';
|
||||
import { saveCertificate, removeCertificate, queryCertificateList } from '../service';
|
||||
import type { TableListItem, TableListPagination } from '../data';
|
||||
import type { DataItem } from '@antv/data-set/lib/transform/tag-cloud';
|
||||
|
||||
/**
|
||||
* 添加证书
|
||||
*
|
||||
* @param fields
|
||||
*/
|
||||
|
||||
const handleAdd = async (fields: TableListItem) => {
|
||||
const hide = message.loading('正在添加');
|
||||
|
||||
try {
|
||||
await saveCourse({ ...fields });
|
||||
hide();
|
||||
message.success('添加成功');
|
||||
return true;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error('添加失败请重试！');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新证书
|
||||
*
|
||||
* @param fields
|
||||
*/
|
||||
const handleUpdate = async (fields: FormValueType, currentRow?: TableListItem) => {
|
||||
const hide = message.loading('正在配置');
|
||||
|
||||
try {
|
||||
await saveCourse({
|
||||
...currentRow,
|
||||
...fields,
|
||||
});
|
||||
hide();
|
||||
message.success('配置成功');
|
||||
return true;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error('配置失败请重试！');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除证书
|
||||
*
|
||||
* @param selectedRows
|
||||
*/
|
||||
const handleRemove = async (selectedRows: TableListItem[]) => {
|
||||
const hide = message.loading('正在删除');
|
||||
if (!selectedRows) return true;
|
||||
|
||||
try {
|
||||
await removeCourse({
|
||||
key: selectedRows.map((row) => row.key),
|
||||
});
|
||||
hide();
|
||||
message.success('删除成功，即将刷新');
|
||||
return true;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error('删除失败，请重试');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const CourseList: React.FC = () => {
|
||||
/** 更新窗口的弹窗 */
|
||||
const [createModalVisible, handleCreateModalVisible] = useState<boolean>(false);
|
||||
const [detailModalVisible, handleDetailModalVisible] = useState<boolean>(false);
|
||||
const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
|
||||
|
||||
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [currentRow, setCurrentRow] = useState<TableListItem>();
|
||||
const [selectedRowsState, setSelectedRows] = useState<TableListItem[]>([]);
|
||||
|
||||
/** 列表项定义 */
|
||||
const columns: ProColumns<TableListItem>[] = [
|
||||
{
|
||||
title: '序号',
|
||||
key: 'index',
|
||||
valueType: 'indexBorder',
|
||||
width: 48,
|
||||
},
|
||||
{
|
||||
title: '证件名称',
|
||||
dataIndex: 'examination_name',
|
||||
valueType: 'text',
|
||||
hideInTable: false,
|
||||
hideInForm: false,
|
||||
hideInSearch: false,
|
||||
},
|
||||
{
|
||||
title: '创建日期',
|
||||
dataIndex: 'create_time',
|
||||
valueType: 'text',
|
||||
sorter: false,
|
||||
hideInTable: false,
|
||||
hideInForm: false,
|
||||
hideInSearch: true,
|
||||
renderText: (val: string) => `${val}`,
|
||||
},
|
||||
{
|
||||
title: '报名开始日期',
|
||||
dataIndex: 'apply_start_time',
|
||||
valueType: 'text',
|
||||
sorter: false,
|
||||
hideInTable: false,
|
||||
hideInForm: false,
|
||||
hideInSearch: true,
|
||||
renderText: (val: string) => `${val}`,
|
||||
},
|
||||
{
|
||||
title: '考试时间',
|
||||
valueType: 'dateTimeRange',
|
||||
dataIndex: 'examination_start_time',
|
||||
sorter: false,
|
||||
hideInTable: false,
|
||||
hideInForm: false,
|
||||
hideInSearch: false,
|
||||
render: (dom, entity) => {
|
||||
return entity.examination_start_time + " - " + entity.examination_end_time
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '试卷数量',
|
||||
dataIndex: 'paper_count',
|
||||
sorter: false,
|
||||
valueType: 'text',
|
||||
hideInForm: false,
|
||||
hideInSearch: true,
|
||||
renderText: (val: string) => `${val}`,
|
||||
},
|
||||
{
|
||||
title: '报考人数',
|
||||
dataIndex: 'apply_person_count',
|
||||
sorter: false,
|
||||
valueType: 'text',
|
||||
hideInForm: false,
|
||||
hideInSearch: true,
|
||||
|
||||
renderText: (val: string) => `${val}`,
|
||||
},
|
||||
{
|
||||
title: '通过人数',
|
||||
dataIndex: 'apply_person_count',
|
||||
sorter: false,
|
||||
valueType: 'text',
|
||||
hideInForm: false,
|
||||
hideInSearch: true,
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
title: '制证状态',
|
||||
dataIndex: 'status_type',
|
||||
sorter: false,
|
||||
valueType: 'text',
|
||||
hideInForm: false,
|
||||
hideInSearch: false,
|
||||
renderFormItem: (_, { type, defaultRender, formItemProps, fieldProps, ...rest }, form) => {
|
||||
if (type === 'form') {
|
||||
return null;
|
||||
}
|
||||
const status = form.getFieldValue('state');
|
||||
if (status !== 'open') {
|
||||
return (
|
||||
// value 和 onchange 会通过 form 自动注入。
|
||||
<Select defaultValue="0" >
|
||||
<Option value="0">待报名</Option>
|
||||
<Option value="1">报名中</Option>
|
||||
<Option value="2">待考试</Option>
|
||||
<Option value="3">考试中</Option>
|
||||
<Option value="4">考试完成</Option>
|
||||
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
return defaultRender(_);
|
||||
},
|
||||
valueEnum: {
|
||||
0: { text: '待报名' },
|
||||
1: { text: '报名中' },
|
||||
2: { text: '待考试' },
|
||||
3: { text: '考试中' },
|
||||
4: { text: '考试完成' },
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
render: (_dom: any, record: React.SetStateAction<TableListItem | undefined>) => [
|
||||
<a
|
||||
key="detail"
|
||||
onClick={() => {
|
||||
//console.log('entity', entity);
|
||||
setCurrentRow(record);
|
||||
handleDetailModalVisible(true);
|
||||
}}
|
||||
>
|
||||
查看
|
||||
</a>,
|
||||
<a
|
||||
key="update"
|
||||
onClick={() => {
|
||||
handleUpdateModalVisible(true);
|
||||
setCurrentRow(record);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</a>,
|
||||
<a key="subscribeAlert" href="https://procomponents.ant.design/">
|
||||
删除
|
||||
</a>,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<ProTable<TableListItem, TableListPagination>
|
||||
headerTitle={false}
|
||||
actionRef={actionRef}
|
||||
rowKey="course_id"
|
||||
options={false}
|
||||
search={{
|
||||
labelWidth: 120,
|
||||
}}
|
||||
// toolBarRender={() => [
|
||||
// <Button
|
||||
// type="primary"
|
||||
// key="primary"
|
||||
// onClick={() => {
|
||||
// handleCreateModalVisible(true);
|
||||
// }}
|
||||
// >
|
||||
// <PlusOutlined /> 新建课程
|
||||
// </Button>,
|
||||
// ]}
|
||||
request={async (value) => {
|
||||
console.log(value, 'form value')
|
||||
const { create_time } = value;
|
||||
if (create_time) {
|
||||
value.start_time = create_time[0]
|
||||
value.end_time = create_time[1]
|
||||
}
|
||||
const _data = await queryCertificateList();
|
||||
|
||||
return {
|
||||
current: _data?.pageNumber,
|
||||
data: _data?.table_List,
|
||||
pageSize: _data?.pageSize,
|
||||
total: _data?.totalRow || 0,
|
||||
};
|
||||
}}
|
||||
// dataSource={list}
|
||||
columns={columns}
|
||||
rowSelection={false}
|
||||
/>
|
||||
{selectedRowsState?.length > 0 && (
|
||||
<FooterToolbar
|
||||
extra={
|
||||
<div>
|
||||
已选择{' '}
|
||||
<a
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{selectedRowsState.length}
|
||||
</a>{' '}
|
||||
项
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
await handleRemove(selectedRowsState);
|
||||
setSelectedRows([]);
|
||||
actionRef.current?.reloadAndRest?.();
|
||||
}}
|
||||
>
|
||||
批量删除
|
||||
</Button>
|
||||
<Button type="primary">批量审批</Button>
|
||||
</FooterToolbar>
|
||||
)}
|
||||
<Modal
|
||||
title={currentRow?.course_name || '课程详细'}
|
||||
width="60%"
|
||||
visible={detailModalVisible}
|
||||
onCancel={() => {
|
||||
setCurrentRow(undefined); // 设置当前行
|
||||
handleDetailModalVisible(false);
|
||||
}}
|
||||
footer={null}
|
||||
centered
|
||||
>{console.log('currentRow', currentRow)}
|
||||
{currentRow?.name && (
|
||||
<ProDescriptions<TableListItem>
|
||||
column={2}
|
||||
/* title={currentRow?.name} */
|
||||
dataSource={currentRow}
|
||||
/*
|
||||
request={async () => ({
|
||||
data: currentRow || {},
|
||||
})}*/
|
||||
params={{
|
||||
id: currentRow?.course_id,
|
||||
}}
|
||||
columns={
|
||||
columns
|
||||
//columns.slice(0, columns.length - 1) as ProDescriptionsItemProps<TableListItem>[]
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
title="新建课程"
|
||||
//
|
||||
width="60%"
|
||||
visible={createModalVisible}
|
||||
destroyOnClose
|
||||
onCancel={() => {
|
||||
handleCreateModalVisible(false);
|
||||
}}
|
||||
footer={null}
|
||||
>
|
||||
<BetaSchemaForm<DataItem>
|
||||
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) => (
|
||||
<Row>
|
||||
<Col span={12} offset={8}>
|
||||
<Space>{doms}</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
),
|
||||
}}
|
||||
// action = ''
|
||||
title="新建"
|
||||
columns={columns}
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
title="编辑"
|
||||
width="60%"
|
||||
visible={updateModalVisible}
|
||||
destroyOnClose
|
||||
onCancel={() => {
|
||||
handleUpdateModalVisible(false);
|
||||
}}
|
||||
footer={null}
|
||||
>
|
||||
{currentRow?.name && (
|
||||
<BetaSchemaForm<DataItem>
|
||||
layout="horizontal"
|
||||
layoutType="Form"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 12 }}
|
||||
onFinish={async (values) => {
|
||||
console.log(values);
|
||||
}}
|
||||
submitter={{
|
||||
render: (props, doms) => (
|
||||
<Row>
|
||||
<Col span={12} offset={8}>
|
||||
<Space>{doms}</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
),
|
||||
}}
|
||||
// action = ''
|
||||
title="编辑"
|
||||
columns={getInitialValues(columns, currentRow)}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default CourseList;
|
||||
Loading…
Reference in new issue