parent
f713f62cac
commit
8ebc45ad83
@ -1,3 +0,0 @@
|
||||
.container {
|
||||
color: blue;
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import styles from './index.less';
|
||||
|
||||
export default () => {
|
||||
return <Button className={styles.container}>Hello UmiJS!</Button>;
|
||||
}
|
||||
@ -1,177 +0,0 @@
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import type { Request, Response } from 'express';
|
||||
import { parse } from 'url';
|
||||
import type { TableListItem, TableListParams } from './data.d';
|
||||
|
||||
// mock tableListDataSource
|
||||
const genList = (current: number, pageSize: number) => {
|
||||
const tableListDataSource: TableListItem[] = [];
|
||||
|
||||
for (let i = 0; i < pageSize; i += 1) {
|
||||
const index = (current - 1) * 10 + i;
|
||||
tableListDataSource.push({
|
||||
key: index,
|
||||
disabled: i % 6 === 0,
|
||||
href: 'https://ant.design',
|
||||
avatar: [
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
|
||||
][i % 2],
|
||||
name: `TradeCode ${index}`,
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: Math.floor(Math.random() * 1000),
|
||||
status: (Math.floor(Math.random() * 10) % 4).toString(),
|
||||
updatedAt: new Date(),
|
||||
createdAt: new Date(),
|
||||
progress: Math.ceil(Math.random() * 100),
|
||||
});
|
||||
}
|
||||
tableListDataSource.reverse();
|
||||
return tableListDataSource;
|
||||
};
|
||||
|
||||
let tableListDataSource = genList(1, 100);
|
||||
|
||||
function getRule(req: Request, res: Response, u: string) {
|
||||
let realUrl = u;
|
||||
if (!realUrl || Object.prototype.toString.call(realUrl) !== '[object String]') {
|
||||
realUrl = req.url;
|
||||
}
|
||||
const { current = 1, pageSize = 10 } = req.query;
|
||||
const params = parse(realUrl, true).query as unknown as TableListParams;
|
||||
|
||||
let dataSource = [...tableListDataSource].slice(
|
||||
((current as number) - 1) * (pageSize as number),
|
||||
(current as number) * (pageSize as number),
|
||||
);
|
||||
if (params.sorter) {
|
||||
const sorter = JSON.parse(params.sorter as any);
|
||||
dataSource = dataSource.sort((prev, next) => {
|
||||
let sortNumber = 0;
|
||||
Object.keys(sorter).forEach((key) => {
|
||||
if (sorter[key] === 'descend') {
|
||||
if (prev[key] - next[key] > 0) {
|
||||
sortNumber += -1;
|
||||
} else {
|
||||
sortNumber += 1;
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (prev[key] - next[key] > 0) {
|
||||
sortNumber += 1;
|
||||
} else {
|
||||
sortNumber += -1;
|
||||
}
|
||||
});
|
||||
return sortNumber;
|
||||
});
|
||||
}
|
||||
if (params.filter) {
|
||||
const filter = JSON.parse(params.filter as any) as Record<string, string[]>;
|
||||
if (Object.keys(filter).length > 0) {
|
||||
dataSource = dataSource.filter((item) => {
|
||||
return Object.keys(filter).some((key) => {
|
||||
if (!filter[key]) {
|
||||
return true;
|
||||
}
|
||||
if (filter[key].includes(`${item[key]}`)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (params.name) {
|
||||
dataSource = dataSource.filter((data) => data.name.includes(params.name || ''));
|
||||
}
|
||||
|
||||
let finalPageSize = 10;
|
||||
if (params.pageSize) {
|
||||
finalPageSize = parseInt(`${params.pageSize}`, 10);
|
||||
}
|
||||
|
||||
const result = {
|
||||
data: dataSource,
|
||||
total: tableListDataSource.length,
|
||||
success: true,
|
||||
pageSize: finalPageSize,
|
||||
current: parseInt(`${params.currentPage}`, 10) || 1,
|
||||
};
|
||||
|
||||
return res.json(result);
|
||||
}
|
||||
|
||||
function postRule(req: Request, res: Response, u: string, b: Request) {
|
||||
let realUrl = u;
|
||||
if (!realUrl || Object.prototype.toString.call(realUrl) !== '[object String]') {
|
||||
realUrl = req.url;
|
||||
}
|
||||
|
||||
const body = (b && b.body) || req.body;
|
||||
const { name, desc, key } = body;
|
||||
|
||||
switch (req.method) {
|
||||
/* eslint no-case-declarations:0 */
|
||||
case 'DELETE':
|
||||
tableListDataSource = tableListDataSource.filter((item) => key.indexOf(item.key) === -1);
|
||||
break;
|
||||
case 'POST':
|
||||
(() => {
|
||||
const i = Math.ceil(Math.random() * 10000);
|
||||
const newRule = {
|
||||
key: tableListDataSource.length,
|
||||
href: 'https://ant.design',
|
||||
avatar: [
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
|
||||
][i % 2],
|
||||
name,
|
||||
owner: '曲丽丽',
|
||||
desc,
|
||||
callNo: Math.floor(Math.random() * 1000),
|
||||
status: (Math.floor(Math.random() * 10) % 2).toString(),
|
||||
updatedAt: new Date(),
|
||||
createdAt: new Date(),
|
||||
progress: Math.ceil(Math.random() * 100),
|
||||
};
|
||||
tableListDataSource.unshift(newRule);
|
||||
return res.json(newRule);
|
||||
})();
|
||||
return;
|
||||
|
||||
case 'PUT':
|
||||
(() => {
|
||||
let newRule = {};
|
||||
tableListDataSource = tableListDataSource.map((item) => {
|
||||
if (item.key === key) {
|
||||
newRule = { ...item, desc, name };
|
||||
return { ...item, desc, name };
|
||||
}
|
||||
return item;
|
||||
});
|
||||
return res.json(newRule);
|
||||
})();
|
||||
return;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
const result = {
|
||||
list: tableListDataSource,
|
||||
pagination: {
|
||||
total: tableListDataSource.length,
|
||||
},
|
||||
};
|
||||
|
||||
res.json(result);
|
||||
}
|
||||
|
||||
export default {
|
||||
'GET /api/rule': getRule,
|
||||
'POST /api/rule': postRule,
|
||||
'DELETE /api/rule': postRule,
|
||||
'PUT /api/rule': postRule,
|
||||
};
|
||||
@ -1,41 +0,0 @@
|
||||
export type DataItem = {
|
||||
name: string;
|
||||
state: string;
|
||||
};
|
||||
|
||||
export type TableListItem = {
|
||||
key: number;
|
||||
disabled?: boolean;
|
||||
href: string;
|
||||
avatar: string;
|
||||
name: string;
|
||||
owner: string;
|
||||
desc: string;
|
||||
callNo: number;
|
||||
status: string;
|
||||
updatedAt: Date;
|
||||
createdAt: Date;
|
||||
progress: number;
|
||||
};
|
||||
|
||||
export type TableListPagination = {
|
||||
total: number;
|
||||
pageSize: number;
|
||||
current: number;
|
||||
};
|
||||
|
||||
export type TableListData = {
|
||||
list: TableListItem[];
|
||||
pagination: Partial<TableListPagination>;
|
||||
};
|
||||
|
||||
export type TableListParams = {
|
||||
status?: string;
|
||||
name?: string;
|
||||
desc?: string;
|
||||
key?: number;
|
||||
pageSize?: number;
|
||||
currentPage?: number;
|
||||
filter?: Record<string, any[]>;
|
||||
sorter?: Record<string, any>;
|
||||
};
|
||||
@ -1,3 +0,0 @@
|
||||
.container {
|
||||
color: blue;
|
||||
}
|
||||
@ -1,241 +0,0 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { useRequest } from 'ahooks';
|
||||
import type { ActionType } from '@ant-design/pro-table';
|
||||
// import type { ProFormColumnsType } from '@ant-design/pro-form';
|
||||
|
||||
import { PageContainer } from '@ant-design/pro-layout';
|
||||
import ProTable from '@ant-design/pro-table';
|
||||
import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
|
||||
import ProDescriptions from '@ant-design/pro-descriptions';
|
||||
import { BetaSchemaForm} from '@ant-design/pro-form';
|
||||
|
||||
import { Button, Col, Modal, Row, Space } from 'antd';
|
||||
import { MobileOutlined, PhoneOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
|
||||
import { schemaExamination, dataExamination } from './service';
|
||||
import type { DataItem } from './data';
|
||||
|
||||
export type TableListItem = {
|
||||
id: string;
|
||||
code: number;
|
||||
name: string;
|
||||
creator: string;
|
||||
status: string;
|
||||
createdAt: number;
|
||||
progress: number;
|
||||
money: number;
|
||||
memo: string;
|
||||
};
|
||||
|
||||
export default () => {
|
||||
const [currentRow, setCurrentRow] = useState<TableListItem>();
|
||||
const [showDetail, setShowDetail] = useState<boolean>(false);
|
||||
const [showCreate, setShowCreate] = useState<boolean>(false);
|
||||
const [showUpdate, setShowUpdate] = useState<boolean>(false);
|
||||
const [columns, setColumns] = useState<any[]>([]);
|
||||
const ref = useRef<ActionType>();
|
||||
|
||||
/** 获取数据结构体 */
|
||||
const { data } = useRequest(schemaExamination);
|
||||
console.log('debug1');
|
||||
useEffect(() => {
|
||||
const _data = data || [];
|
||||
let idx = -1;
|
||||
idx = _data?.findIndex((val: { dataIndex: string; })=>{ return val.dataIndex === 'publicTelephone' }) || -1;
|
||||
if(idx !== -1){
|
||||
_data[idx] = {..._data[idx], renderText: (val: string) => `${(val || '').replace(/(\d{2})(\d{2})(\d{4})/,"$1**$3")}`}
|
||||
}
|
||||
|
||||
/** 渲染复合数据项 */
|
||||
idx = _data?.findIndex((val: { dataIndex: string; })=>{ return val.dataIndex === 'examiner' }) || -1;
|
||||
if(idx !== -1){
|
||||
_data[idx] = {
|
||||
..._data[idx],
|
||||
render: (text: any) => (
|
||||
<>
|
||||
<span style={{ display: 'block' }}>{text?.realname}</span>
|
||||
<small style={{ display: 'inline-block', marginRight: 5 }}><PhoneOutlined /> {text?.tel}</small>
|
||||
<small style={{ display: 'inline-block', marginRight: 5 }}><MobileOutlined /> {text?.mobile}</small>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/** 添加序号和操作列 */
|
||||
setColumns(
|
||||
[
|
||||
{
|
||||
title: '序号',
|
||||
key: 'index',
|
||||
valueType: 'indexBorder',
|
||||
render: (text: React.ReactNode, _: any, index: number) =>{
|
||||
if(ref && ref?.current && ref?.current?.pageInfo){
|
||||
return `${(ref?.current?.pageInfo?.current - 1) * (ref.current.pageInfo?.pageSize) + (index + 1)}`;
|
||||
}else{
|
||||
return '';
|
||||
}
|
||||
},
|
||||
width: 48,
|
||||
},
|
||||
..._data,
|
||||
{
|
||||
title: '操作',
|
||||
width: 180,
|
||||
key: 'option',
|
||||
valueType: 'option',
|
||||
render: (_dom: any, entity: React.SetStateAction<TableListItem | undefined>) => [
|
||||
<a key="detail" onClick={() => {
|
||||
console.log('entity', entity);
|
||||
setCurrentRow(entity);
|
||||
setShowDetail(true);
|
||||
}} >查看</a>,
|
||||
<a key="update" onClick={() => {
|
||||
console.log('columns1', columns)
|
||||
setCurrentRow(entity);
|
||||
setShowUpdate(true);
|
||||
console.log('columns2', columns)
|
||||
}} >编辑</a>,
|
||||
<a key="delete" onClick={() => {
|
||||
//
|
||||
}} >删除</a>,
|
||||
],
|
||||
}
|
||||
]
|
||||
);
|
||||
}, [data]);
|
||||
|
||||
/** 获取列数据初始值 */
|
||||
const getInitialValues = (cols: any[], vals: any) => {
|
||||
console.log('getInitialValues-columns', columns)
|
||||
console.log('getInitialValues-values', vals)
|
||||
const initialValues: any[] = [];
|
||||
cols.forEach((column: { dataIndex: string; }) => {
|
||||
const key: any = column?.dataIndex || '';
|
||||
initialValues.push({...column, initialValue: key ? vals[key] : ''})
|
||||
})
|
||||
console.log('initialValues::',initialValues)
|
||||
return initialValues || []
|
||||
}
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<ProTable<TableListItem | any>
|
||||
columns={columns}
|
||||
request={dataExamination}
|
||||
rowKey="id"
|
||||
actionRef={ref}
|
||||
pagination={{
|
||||
showQuickJumper: true,
|
||||
}}
|
||||
search={{
|
||||
layout: 'vertical',
|
||||
defaultCollapsed: false,
|
||||
}}
|
||||
dateFormatter="string"
|
||||
/*toolbar={{
|
||||
title: '高级表格',
|
||||
tooltip: '这是一个标题提示',
|
||||
}}*/
|
||||
toolBarRender={() => [
|
||||
<Button type="primary" key="primary" onClick={() => {
|
||||
console.log('columns::::', columns);
|
||||
setShowCreate(true)
|
||||
}}><PlusOutlined /> 新建 </Button>
|
||||
]}
|
||||
/>
|
||||
<Modal
|
||||
title={currentRow?.name || '详细'}
|
||||
width='60%'
|
||||
visible={showDetail}
|
||||
onCancel={() => {
|
||||
setCurrentRow(undefined); // 设置当前行
|
||||
setShowDetail(false);
|
||||
}}
|
||||
footer={null}>
|
||||
{currentRow?.name && (
|
||||
<ProDescriptions<TableListItem>
|
||||
column={2}
|
||||
/* title={currentRow?.name} */
|
||||
dataSource={currentRow}
|
||||
/*
|
||||
request={async () => ({
|
||||
data: currentRow || {},
|
||||
})}*/
|
||||
params={{
|
||||
id: currentRow?.id,
|
||||
}}
|
||||
columns={columns.slice(0, columns.length - 1) as ProDescriptionsItemProps<TableListItem>[]}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
<Modal
|
||||
title='新建考点'
|
||||
//
|
||||
width='60%'
|
||||
visible={showCreate}
|
||||
destroyOnClose
|
||||
onCancel={() => {
|
||||
setShowCreate(false);
|
||||
}}
|
||||
footer={null}
|
||||
>
|
||||
<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 = {columns}
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
title='编辑'
|
||||
width='60%'
|
||||
visible={showUpdate}
|
||||
destroyOnClose
|
||||
onCancel={() => {
|
||||
setShowUpdate(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>
|
||||
);
|
||||
};
|
||||
@ -1,76 +0,0 @@
|
||||
import { request } from 'umi';
|
||||
import { TableListItem } from './data';
|
||||
import type { ProFormColumnsType } from '@ant-design/pro-form';
|
||||
|
||||
/** 获取考点数据结构 GET /api/dataSource?key=examination&schema=true&data=false */
|
||||
export async function schemaExamination(
|
||||
params: {
|
||||
// query
|
||||
},
|
||||
options?: { [key: string]: any },
|
||||
) {
|
||||
return request<{
|
||||
data: any[];
|
||||
/** 字段总数 */
|
||||
total?: number;
|
||||
success?: boolean;
|
||||
}>('/api/dataSource?key=examination&schema=true&data=false', {
|
||||
method: 'GET',
|
||||
params: {
|
||||
...params,
|
||||
},
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
|
||||
/** 获取考点列表数据 GET /api/dataSource?key=examination&schema=false&data=true */
|
||||
export async function dataExamination(
|
||||
params: {
|
||||
// query
|
||||
/** 当前的页码 */
|
||||
current?: number;
|
||||
/** 页面的容量 */
|
||||
pageSize?: number;
|
||||
},
|
||||
options?: { [key: string]: any },
|
||||
) {
|
||||
return request<{
|
||||
data: TableListItem[];
|
||||
/** 列表的内容总数 */
|
||||
total?: number;
|
||||
success?: boolean;
|
||||
}>('/api/dataSource?key=examination&schema=false&data=true', {
|
||||
method: 'GET',
|
||||
params: {
|
||||
...params,
|
||||
},
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
|
||||
/** 新建考点 PUT /api/dataSource?key=examination */
|
||||
export async function updateExamination(data: { [key: string]: any }, options?: { [key: string]: any }) {
|
||||
return request<TableListItem>('/api/examination', {
|
||||
data,
|
||||
method: 'PUT',
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
|
||||
/** 新建考点 POST /api/dataSource?key=examination */
|
||||
export async function addExamination(data: { [key: string]: any }, options?: { [key: string]: any }) {
|
||||
return request<TableListItem>('/api/examination', {
|
||||
data,
|
||||
method: 'POST',
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除考点 DELETE /api/dataSource?key=examination */
|
||||
export async function removeExamination(data: { key: number[] }, options?: { [key: string]: any }) {
|
||||
return request<Record<string, any>>('/api/examination', {
|
||||
data,
|
||||
method: 'DELETE',
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
export type DataItem = {
|
||||
name: string;
|
||||
state: string;
|
||||
};
|
||||
|
||||
export type TableListItem = {
|
||||
key: number;
|
||||
disabled?: boolean;
|
||||
href: string;
|
||||
avatar: string;
|
||||
name: string;
|
||||
owner: string;
|
||||
desc: string;
|
||||
callNo: number;
|
||||
status: string;
|
||||
updatedAt: Date;
|
||||
createdAt: Date;
|
||||
progress: number;
|
||||
};
|
||||
|
||||
export type TableListPagination = {
|
||||
total: number;
|
||||
pageSize: number;
|
||||
current: number;
|
||||
};
|
||||
|
||||
export type TableListData = {
|
||||
list: TableListItem[];
|
||||
pagination: Partial<TableListPagination>;
|
||||
};
|
||||
|
||||
export type TableListParams = {
|
||||
status?: string;
|
||||
name?: string;
|
||||
desc?: string;
|
||||
key?: number;
|
||||
pageSize?: number;
|
||||
currentPage?: number;
|
||||
filter?: Record<string, any[]>;
|
||||
sorter?: Record<string, any>;
|
||||
};
|
||||
@ -1,3 +0,0 @@
|
||||
.container {
|
||||
color: blue;
|
||||
}
|
||||
@ -1,241 +0,0 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { useRequest } from 'umi';
|
||||
import type { ActionType } from '@ant-design/pro-table';
|
||||
// import type { ProFormColumnsType } from '@ant-design/pro-form';
|
||||
|
||||
import { PageContainer } from '@ant-design/pro-layout';
|
||||
import ProTable from '@ant-design/pro-table';
|
||||
import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
|
||||
import ProDescriptions from '@ant-design/pro-descriptions';
|
||||
import { BetaSchemaForm} from '@ant-design/pro-form';
|
||||
|
||||
import { Button, Col, Modal, Row, Space } from 'antd';
|
||||
import { MobileOutlined, PhoneOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
|
||||
import { schemaExamination, dataExamination } from './service';
|
||||
import type { DataItem } from './data';
|
||||
|
||||
export type TableListItem = {
|
||||
id: string;
|
||||
code: number;
|
||||
name: string;
|
||||
creator: string;
|
||||
status: string;
|
||||
createdAt: number;
|
||||
progress: number;
|
||||
money: number;
|
||||
memo: string;
|
||||
};
|
||||
|
||||
export default () => {
|
||||
const [currentRow, setCurrentRow] = useState<TableListItem>();
|
||||
const [showDetail, setShowDetail] = useState<boolean>(false);
|
||||
const [showCreate, setShowCreate] = useState<boolean>(false);
|
||||
const [showUpdate, setShowUpdate] = useState<boolean>(false);
|
||||
const [columns, setColumns] = useState<any[]>([]);
|
||||
const ref = useRef<ActionType>();
|
||||
|
||||
/** 获取数据结构体 */
|
||||
const { data } = useRequest(schemaExamination);
|
||||
console.log('debug1');
|
||||
useEffect(() => {
|
||||
const _data = data || [];
|
||||
let idx = -1;
|
||||
idx = _data?.findIndex((val: { dataIndex: string; })=>{ return val.dataIndex === 'publicTelephone' }) || -1;
|
||||
if(idx !== -1){
|
||||
_data[idx] = {..._data[idx], renderText: (val: string) => `${(val || '').replace(/(\d{2})(\d{2})(\d{4})/,"$1**$3")}`}
|
||||
}
|
||||
|
||||
/** 渲染复合数据项 */
|
||||
idx = _data?.findIndex((val: { dataIndex: string; })=>{ return val.dataIndex === 'examiner' }) || -1;
|
||||
if(idx !== -1){
|
||||
_data[idx] = {
|
||||
..._data[idx],
|
||||
render: (text: any) => (
|
||||
<>
|
||||
<span style={{ display: 'block' }}>{text?.realname}</span>
|
||||
<small style={{ display: 'inline-block', marginRight: 5 }}><PhoneOutlined /> {text?.tel}</small>
|
||||
<small style={{ display: 'inline-block', marginRight: 5 }}><MobileOutlined /> {text?.mobile}</small>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/** 添加序号和操作列 */
|
||||
setColumns(
|
||||
[
|
||||
{
|
||||
title: '序号',
|
||||
key: 'index',
|
||||
valueType: 'indexBorder',
|
||||
render: (text: React.ReactNode, _: any, index: number) =>{
|
||||
if(ref && ref?.current && ref?.current?.pageInfo){
|
||||
return `${(ref?.current?.pageInfo?.current - 1) * (ref.current.pageInfo?.pageSize) + (index + 1)}`;
|
||||
}else{
|
||||
return '';
|
||||
}
|
||||
},
|
||||
width: 48,
|
||||
},
|
||||
..._data,
|
||||
{
|
||||
title: '操作',
|
||||
width: 180,
|
||||
key: 'option',
|
||||
valueType: 'option',
|
||||
render: (_dom: any, entity: React.SetStateAction<TableListItem | undefined>) => [
|
||||
<a key="detail" onClick={() => {
|
||||
console.log('entity', entity);
|
||||
setCurrentRow(entity);
|
||||
setShowDetail(true);
|
||||
}} >查看</a>,
|
||||
<a key="update" onClick={() => {
|
||||
console.log('columns1', columns)
|
||||
setCurrentRow(entity);
|
||||
setShowUpdate(true);
|
||||
console.log('columns2', columns)
|
||||
}} >编辑</a>,
|
||||
<a key="delete" onClick={() => {
|
||||
//
|
||||
}} >删除</a>,
|
||||
],
|
||||
}
|
||||
]
|
||||
);
|
||||
}, [data]);
|
||||
|
||||
/** 获取列数据初始值 */
|
||||
const getInitialValues = (cols: any[], vals: any) => {
|
||||
console.log('getInitialValues-columns', columns)
|
||||
console.log('getInitialValues-values', vals)
|
||||
const initialValues: any[] = [];
|
||||
cols.forEach((column: { dataIndex: string; }) => {
|
||||
const key: any = column?.dataIndex || '';
|
||||
initialValues.push({...column, initialValue: key ? vals[key] : ''})
|
||||
})
|
||||
console.log('initialValues::',initialValues)
|
||||
return initialValues || []
|
||||
}
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<ProTable<TableListItem | any>
|
||||
columns={columns}
|
||||
request={dataExamination}
|
||||
rowKey="id"
|
||||
actionRef={ref}
|
||||
pagination={{
|
||||
showQuickJumper: true,
|
||||
}}
|
||||
search={{
|
||||
layout: 'vertical',
|
||||
defaultCollapsed: false,
|
||||
}}
|
||||
dateFormatter="string"
|
||||
/*toolbar={{
|
||||
title: '高级表格',
|
||||
tooltip: '这是一个标题提示',
|
||||
}}*/
|
||||
toolBarRender={() => [
|
||||
<Button type="primary" key="primary" onClick={() => {
|
||||
console.log('columns::::', columns);
|
||||
setShowCreate(true)
|
||||
}}><PlusOutlined /> 新建 </Button>
|
||||
]}
|
||||
/>
|
||||
<Modal
|
||||
title={currentRow?.name || '详细'}
|
||||
width='60%'
|
||||
visible={showDetail}
|
||||
onCancel={() => {
|
||||
setCurrentRow(undefined); // 设置当前行
|
||||
setShowDetail(false);
|
||||
}}
|
||||
footer={null}>
|
||||
{currentRow?.name && (
|
||||
<ProDescriptions<TableListItem>
|
||||
column={2}
|
||||
/* title={currentRow?.name} */
|
||||
dataSource={currentRow}
|
||||
/*
|
||||
request={async () => ({
|
||||
data: currentRow || {},
|
||||
})}*/
|
||||
params={{
|
||||
id: currentRow?.id,
|
||||
}}
|
||||
columns={columns.slice(0, columns.length - 1) as ProDescriptionsItemProps<TableListItem>[]}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
<Modal
|
||||
title='新建考点'
|
||||
//
|
||||
width='60%'
|
||||
visible={showCreate}
|
||||
destroyOnClose
|
||||
onCancel={() => {
|
||||
setShowCreate(false);
|
||||
}}
|
||||
footer={null}
|
||||
>
|
||||
<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 = {columns}
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
title='编辑'
|
||||
width='60%'
|
||||
visible={showUpdate}
|
||||
destroyOnClose
|
||||
onCancel={() => {
|
||||
setShowUpdate(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>
|
||||
);
|
||||
};
|
||||
@ -1,76 +0,0 @@
|
||||
import { request } from 'umi';
|
||||
import { TableListItem } from './data';
|
||||
import type { ProFormColumnsType } from '@ant-design/pro-form';
|
||||
|
||||
/** 获取考点数据结构 GET /api/dataSource?key=examination&schema=true&data=false */
|
||||
export async function schemaExamination(
|
||||
params: {
|
||||
// query
|
||||
},
|
||||
options?: { [key: string]: any },
|
||||
) {
|
||||
return request<{
|
||||
data: any[];
|
||||
/** 字段总数 */
|
||||
total?: number;
|
||||
success?: boolean;
|
||||
}>('/api/dataSource?key=examination&schema=true&data=false', {
|
||||
method: 'GET',
|
||||
params: {
|
||||
...params,
|
||||
},
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
|
||||
/** 获取考点列表数据 GET /api/dataSource?key=examination&schema=false&data=true */
|
||||
export async function dataExamination(
|
||||
params: {
|
||||
// query
|
||||
/** 当前的页码 */
|
||||
current?: number;
|
||||
/** 页面的容量 */
|
||||
pageSize?: number;
|
||||
},
|
||||
options?: { [key: string]: any },
|
||||
) {
|
||||
return request<{
|
||||
data: TableListItem[];
|
||||
/** 列表的内容总数 */
|
||||
total?: number;
|
||||
success?: boolean;
|
||||
}>('/api/dataSource?key=examination&schema=false&data=true', {
|
||||
method: 'GET',
|
||||
params: {
|
||||
...params,
|
||||
},
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
|
||||
/** 新建考点 PUT /api/dataSource?key=examination */
|
||||
export async function updateExamination(data: { [key: string]: any }, options?: { [key: string]: any }) {
|
||||
return request<TableListItem>('/api/examination', {
|
||||
data,
|
||||
method: 'PUT',
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
|
||||
/** 新建考点 POST /api/dataSource?key=examination */
|
||||
export async function addExamination(data: { [key: string]: any }, options?: { [key: string]: any }) {
|
||||
return request<TableListItem>('/api/examination', {
|
||||
data,
|
||||
method: 'POST',
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除考点 DELETE /api/dataSource?key=examination */
|
||||
export async function removeExamination(data: { key: number[] }, options?: { [key: string]: any }) {
|
||||
return request<Record<string, any>>('/api/examination', {
|
||||
data,
|
||||
method: 'DELETE',
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
export type DataItem = {
|
||||
name: string;
|
||||
state: string;
|
||||
};
|
||||
|
||||
export type TableListItem = {
|
||||
key: number;
|
||||
disabled?: boolean;
|
||||
href: string;
|
||||
avatar: string;
|
||||
name: string;
|
||||
owner: string;
|
||||
desc: string;
|
||||
callNo: number;
|
||||
status: string;
|
||||
updatedAt: Date;
|
||||
createdAt: Date;
|
||||
progress: number;
|
||||
};
|
||||
|
||||
export type TableListPagination = {
|
||||
total: number;
|
||||
pageSize: number;
|
||||
current: number;
|
||||
};
|
||||
|
||||
export type TableListData = {
|
||||
list: TableListItem[];
|
||||
pagination: Partial<TableListPagination>;
|
||||
};
|
||||
|
||||
export type TableListParams = {
|
||||
status?: string;
|
||||
name?: string;
|
||||
desc?: string;
|
||||
key?: number;
|
||||
pageSize?: number;
|
||||
currentPage?: number;
|
||||
filter?: Record<string, any[]>;
|
||||
sorter?: Record<string, any>;
|
||||
};
|
||||
@ -1,3 +0,0 @@
|
||||
.container {
|
||||
color: blue;
|
||||
}
|
||||
@ -1,241 +0,0 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { useRequest } from 'umi';
|
||||
import type { ActionType } from '@ant-design/pro-table';
|
||||
// import type { ProFormColumnsType } from '@ant-design/pro-form';
|
||||
|
||||
import { PageContainer } from '@ant-design/pro-layout';
|
||||
import ProTable from '@ant-design/pro-table';
|
||||
import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
|
||||
import ProDescriptions from '@ant-design/pro-descriptions';
|
||||
import { BetaSchemaForm} from '@ant-design/pro-form';
|
||||
|
||||
import { Button, Col, Modal, Row, Space } from 'antd';
|
||||
import { MobileOutlined, PhoneOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
|
||||
import { schemaExamination, dataExamination } from './service';
|
||||
import type { DataItem } from './data';
|
||||
|
||||
export type TableListItem = {
|
||||
id: string;
|
||||
code: number;
|
||||
name: string;
|
||||
creator: string;
|
||||
status: string;
|
||||
createdAt: number;
|
||||
progress: number;
|
||||
money: number;
|
||||
memo: string;
|
||||
};
|
||||
|
||||
export default () => {
|
||||
const [currentRow, setCurrentRow] = useState<TableListItem>();
|
||||
const [showDetail, setShowDetail] = useState<boolean>(false);
|
||||
const [showCreate, setShowCreate] = useState<boolean>(false);
|
||||
const [showUpdate, setShowUpdate] = useState<boolean>(false);
|
||||
const [columns, setColumns] = useState<any[]>([]);
|
||||
const ref = useRef<ActionType>();
|
||||
|
||||
/** 获取数据结构体 */
|
||||
const { data } = useRequest(schemaExamination);
|
||||
console.log('debug1');
|
||||
useEffect(() => {
|
||||
const _data = data || [];
|
||||
let idx = -1;
|
||||
idx = _data?.findIndex((val: { dataIndex: string; })=>{ return val.dataIndex === 'publicTelephone' }) || -1;
|
||||
if(idx !== -1){
|
||||
_data[idx] = {..._data[idx], renderText: (val: string) => `${(val || '').replace(/(\d{2})(\d{2})(\d{4})/,"$1**$3")}`}
|
||||
}
|
||||
|
||||
/** 渲染复合数据项 */
|
||||
idx = _data?.findIndex((val: { dataIndex: string; })=>{ return val.dataIndex === 'examiner' }) || -1;
|
||||
if(idx !== -1){
|
||||
_data[idx] = {
|
||||
..._data[idx],
|
||||
render: (text: any) => (
|
||||
<>
|
||||
<span style={{ display: 'block' }}>{text?.realname}</span>
|
||||
<small style={{ display: 'inline-block', marginRight: 5 }}><PhoneOutlined /> {text?.tel}</small>
|
||||
<small style={{ display: 'inline-block', marginRight: 5 }}><MobileOutlined /> {text?.mobile}</small>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/** 添加序号和操作列 */
|
||||
setColumns(
|
||||
[
|
||||
{
|
||||
title: '序号',
|
||||
key: 'index',
|
||||
valueType: 'indexBorder',
|
||||
render: (text: React.ReactNode, _: any, index: number) =>{
|
||||
if(ref && ref?.current && ref?.current?.pageInfo){
|
||||
return `${(ref?.current?.pageInfo?.current - 1) * (ref.current.pageInfo?.pageSize) + (index + 1)}`;
|
||||
}else{
|
||||
return '';
|
||||
}
|
||||
},
|
||||
width: 48,
|
||||
},
|
||||
..._data,
|
||||
{
|
||||
title: '操作',
|
||||
width: 180,
|
||||
key: 'option',
|
||||
valueType: 'option',
|
||||
render: (_dom: any, entity: React.SetStateAction<TableListItem | undefined>) => [
|
||||
<a key="detail" onClick={() => {
|
||||
console.log('entity', entity);
|
||||
setCurrentRow(entity);
|
||||
setShowDetail(true);
|
||||
}} >查看</a>,
|
||||
<a key="update" onClick={() => {
|
||||
console.log('columns1', columns)
|
||||
setCurrentRow(entity);
|
||||
setShowUpdate(true);
|
||||
console.log('columns2', columns)
|
||||
}} >编辑</a>,
|
||||
<a key="delete" onClick={() => {
|
||||
//
|
||||
}} >删除</a>,
|
||||
],
|
||||
}
|
||||
]
|
||||
);
|
||||
}, [data]);
|
||||
|
||||
/** 获取列数据初始值 */
|
||||
const getInitialValues = (cols: any[], vals: any) => {
|
||||
console.log('getInitialValues-columns', columns)
|
||||
console.log('getInitialValues-values', vals)
|
||||
const initialValues: any[] = [];
|
||||
cols.forEach((column: { dataIndex: string; }) => {
|
||||
const key: any = column?.dataIndex || '';
|
||||
initialValues.push({...column, initialValue: key ? vals[key] : ''})
|
||||
})
|
||||
console.log('initialValues::',initialValues)
|
||||
return initialValues || []
|
||||
}
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<ProTable<TableListItem | any>
|
||||
columns={columns}
|
||||
request={dataExamination}
|
||||
rowKey="id"
|
||||
actionRef={ref}
|
||||
pagination={{
|
||||
showQuickJumper: true,
|
||||
}}
|
||||
search={{
|
||||
layout: 'vertical',
|
||||
defaultCollapsed: false,
|
||||
}}
|
||||
dateFormatter="string"
|
||||
/*toolbar={{
|
||||
title: '高级表格',
|
||||
tooltip: '这是一个标题提示',
|
||||
}}*/
|
||||
toolBarRender={() => [
|
||||
<Button type="primary" key="primary" onClick={() => {
|
||||
console.log('columns::::', columns);
|
||||
setShowCreate(true)
|
||||
}}><PlusOutlined /> 新建 </Button>
|
||||
]}
|
||||
/>
|
||||
<Modal
|
||||
title={currentRow?.name || '详细'}
|
||||
width='60%'
|
||||
visible={showDetail}
|
||||
onCancel={() => {
|
||||
setCurrentRow(undefined); // 设置当前行
|
||||
setShowDetail(false);
|
||||
}}
|
||||
footer={null}>
|
||||
{currentRow?.name && (
|
||||
<ProDescriptions<TableListItem>
|
||||
column={2}
|
||||
/* title={currentRow?.name} */
|
||||
dataSource={currentRow}
|
||||
/*
|
||||
request={async () => ({
|
||||
data: currentRow || {},
|
||||
})}*/
|
||||
params={{
|
||||
id: currentRow?.id,
|
||||
}}
|
||||
columns={columns.slice(0, columns.length - 1) as ProDescriptionsItemProps<TableListItem>[]}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
<Modal
|
||||
title='新建考点'
|
||||
//
|
||||
width='60%'
|
||||
visible={showCreate}
|
||||
destroyOnClose
|
||||
onCancel={() => {
|
||||
setShowCreate(false);
|
||||
}}
|
||||
footer={null}
|
||||
>
|
||||
<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 = {columns}
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
title='编辑'
|
||||
width='60%'
|
||||
visible={showUpdate}
|
||||
destroyOnClose
|
||||
onCancel={() => {
|
||||
setShowUpdate(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>
|
||||
);
|
||||
};
|
||||
@ -1,76 +0,0 @@
|
||||
import { request } from 'umi';
|
||||
import { TableListItem } from './data';
|
||||
import type { ProFormColumnsType } from '@ant-design/pro-form';
|
||||
|
||||
/** 获取考点数据结构 GET /api/dataSource?key=examination&schema=true&data=false */
|
||||
export async function schemaExamination(
|
||||
params: {
|
||||
// query
|
||||
},
|
||||
options?: { [key: string]: any },
|
||||
) {
|
||||
return request<{
|
||||
data: any[];
|
||||
/** 字段总数 */
|
||||
total?: number;
|
||||
success?: boolean;
|
||||
}>('/api/dataSource?key=examination&schema=true&data=false', {
|
||||
method: 'GET',
|
||||
params: {
|
||||
...params,
|
||||
},
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
|
||||
/** 获取考点列表数据 GET /api/dataSource?key=examination&schema=false&data=true */
|
||||
export async function dataExamination(
|
||||
params: {
|
||||
// query
|
||||
/** 当前的页码 */
|
||||
current?: number;
|
||||
/** 页面的容量 */
|
||||
pageSize?: number;
|
||||
},
|
||||
options?: { [key: string]: any },
|
||||
) {
|
||||
return request<{
|
||||
data: TableListItem[];
|
||||
/** 列表的内容总数 */
|
||||
total?: number;
|
||||
success?: boolean;
|
||||
}>('/api/dataSource?key=examination&schema=false&data=true', {
|
||||
method: 'GET',
|
||||
params: {
|
||||
...params,
|
||||
},
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
|
||||
/** 新建考点 PUT /api/dataSource?key=examination */
|
||||
export async function updateExamination(data: { [key: string]: any }, options?: { [key: string]: any }) {
|
||||
return request<TableListItem>('/api/examination', {
|
||||
data,
|
||||
method: 'PUT',
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
|
||||
/** 新建考点 POST /api/dataSource?key=examination */
|
||||
export async function addExamination(data: { [key: string]: any }, options?: { [key: string]: any }) {
|
||||
return request<TableListItem>('/api/examination', {
|
||||
data,
|
||||
method: 'POST',
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除考点 DELETE /api/dataSource?key=examination */
|
||||
export async function removeExamination(data: { key: number[] }, options?: { [key: string]: any }) {
|
||||
return request<Record<string, any>>('/api/examination', {
|
||||
data,
|
||||
method: 'DELETE',
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
Loading…
Reference in new issue