You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

483 lines
13 KiB

/** 考试维护 */
import React, { useState, useRef } from 'react';
import { useRequest, history } from 'umi';
import { PlusOutlined, TagsOutlined, UploadOutlined } from '@ant-design/icons';
import { Button, message, Input, Drawer, Modal, Col, Row, Space, Upload, Form } 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 { querySubjectList, saveExamination, removeExamination, queryExaminationList, queryRulesList } from '../service';
import type { TableListItem, TableListPagination } from './data';
import type { DataItem } from '@antv/data-set/lib/transform/tag-cloud';
import RegistrationList from '../registration';
/**
* 添加考试
*
* @param fields
*/
const handleAdd = async (fields: TableListItem) => {
const hide = message.loading('正在添加');
try {
await saveExamination({ ...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 saveExamination({
...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 removeExamination({
key: selectedRows.map((row) => row.key),
});
hide();
message.success('删除成功,即将刷新');
return true;
} catch (error) {
hide();
message.error('删除失败,请重试');
return false;
}
};
const ExaminationList: React.FC = () => {
/** 更新窗口的弹窗 */
const [createModalVisible, handleCreateModalVisible] = useState<boolean>(false);
const [detailModalVisible, handleDetailModalVisible] = useState<boolean>(false);
const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
//const [registrationModalVisible, handleRegistrationModalVisible] = useState<boolean>(false);
const [schemaForm] = Form.useForm();
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: true,
hideInSearch: true,
renderText: (val: string) => `${val}`,
},
{
title: '报名日期',
dataIndex: 'apply_start_time',
valueType: 'datetimeRange',
sorter: false,
hideInTable: false,
hideInForm: false,
hideInSearch: true,
render: (dom, entity) => {
return entity.apply_start_time + " - " + entity.apply_end_time;
},
},
{
title: '考试时间',
valueType: 'datetimeRange',
dataIndex: 'examination_start_time',
sorter: false,
hideInTable: false,
hideInForm: false,
hideInSearch: true,
render: (dom, entity) => {
return entity.examination_start_time + " - " + entity.examination_end_time;
},
},
{
title: '关联主题',
dataIndex: 'subject_id',
valueType: 'text',
hideInTable: true,
hideInForm: false,
hideInSearch: true,
request: async () => {
const { data: Items } = await querySubjectList({});
// console.log(Items, ')))');
const sinfo = []
for (let i = 0; i < Items.list.length; i++) {
// console.log(Items.list[i], ">>>")
sinfo.push({ label: Items.list[i].subject_name, value: Items.list[i].subject_id })
}
console.log(sinfo, 'sinfo');
return sinfo;
},
formItemProps: {
rules: [
{
required: true,
message: '此项为必填项',
},
]
},
},
{
title: '关联的规则',
dataIndex: 'subject_id2',
valueType: 'text',
hideInTable: true,
hideInForm: false,
hideInSearch: true,
request: async (e, a) => {
console.log(e, a, 'OOOOOOOOO');
const { data: Items } = await queryRulesList({});
// console.log(Items, ')))');
const sinfo = []
for (let i = 0; i < Items.list.length; i++) {
// console.log(Items.list[i], ">>>")
sinfo.push({ label: Items.list[i].subject_name, value: Items.list[i].subject_id })
}
console.log(sinfo, 'sinfo');
return sinfo;
},
formItemProps: {
rules: [
{
required: true,
message: '此项为必填项',
},
]
},
},
{
title: '试卷数量',
dataIndex: 'paper_count',
sorter: false,
valueType: 'text',
hideInForm: false,
renderText: (val: string) => `${val}`,
},
{
title: '报考人数',
dataIndex: 'apply_person_count',
sorter: false,
valueType: 'text',
hideInForm: false,
renderText: (val: string) => `${val}`,
},
{
title: '状态',
dataIndex: 'status_type',
sorter: false,
hideInForm: true,
hideInSearch: true,
renderText: (val: string) => `${val}`,
},
{
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>,
<a
key="registration"
onClick={() => {
history.push(`/examination/option/registration/${record.examination_id}`);
//setCurrentRow(record);
}}
>
</a>,
],
},
];
return (
<PageContainer>
<ProTable<TableListItem, TableListPagination>
headerTitle={false}
actionRef={actionRef}
rowKey="examination_id"
options={false}
search={{
labelWidth: 120,
}}
toolBarRender={() => [
<Button
type="primary"
key="primary"
onClick={() => {
handleCreateModalVisible(true);
}}
>
<PlusOutlined />
</Button>,
]}
request={async (value) => {
const { create_time } = value;
if (create_time) {
value.start_time = create_time[0]
value.end_time = create_time[1]
}
const _data = await queryExaminationList(
{
...value,
page_number: value.current,
page_size: value.pageSize
}
);
console.log(_data, 'form _data')
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>{' '}
&nbsp;&nbsp;
</div>
}
>
<Button
onClick={async () => {
await handleRemove(selectedRowsState);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}}
>
</Button>
<Button type="primary"></Button>
</FooterToolbar>
)}
<Modal
title={currentRow?.examination_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 (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 getExaminationList(
{
...value,
rules_type: 0,
page_number: value.current,
page_size: value.pageSize
}
);
return {
current: _data?.pageNumber,
data: _data?.table_List,
pageSize: _data?.pageSize,
total: _data?.totalRow || 0,
};
}}
params={{
id: currentRow?.examination_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>
form={schemaForm}
layout="horizontal"
layoutType="Form"
labelCol={{ span: 8 }}
wrapperCol={{ span: 12 }}
onValuesChange={(values: any) => {
console.log('values:', values);
const { subject_id } = values
schemaForm.setFields({ subject_id2: [{ name: "1", value: "1" }, { name: "2", value: "2" }] })
}}
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 ExaminationList;