diff --git a/README.md b/README.md index a5d78e2..42d419a 100644 --- a/README.md +++ b/README.md @@ -96,9 +96,12 @@ $ yarn umi block add templates/blank $ yarn umi block add https://github.com/umijs/umi-blocks/tree/master/templates/blank $ yarn umi block add https://github.com/ant-design/pro-blocks/tree/master/EmptyPage $ yarn umi block add http://10.10.14.176:3000/web/kwgl-web/src/branch/master/blocks/procomponents -``` - +``` +#### 本地区块 yarn umi block add [文件夹]/[区块] --path [路由] +```bash +$ yarn umi block add ./blocks/procomponents --path Demo +``` #### umi-block-convertor Q&A diff --git a/config/config.ts b/config/config.ts index 9fa4787..f8822ea 100644 --- a/config/config.ts +++ b/config/config.ts @@ -316,30 +316,6 @@ export default defineConfig({ path: '/', redirect: '/dashboard/analysis', }, - { - name: 'hello09', - icon: 'smile', - path: '/hello09', - component: './Hello09', - }, - { - name: 'hello10', - icon: 'smile', - path: '/hello10', - component: './Hello10', - }, - { - name: 'hello11', - icon: 'smile', - path: '/hello11', - component: './Hello11', - }, - { - name: 'hello12', - icon: 'smile', - path: '/hello12', - component: './Hello12', - }, { component: '404', }, diff --git a/src/pages/Hello09/index.less b/src/pages/Hello09/index.less deleted file mode 100644 index f7b3489..0000000 --- a/src/pages/Hello09/index.less +++ /dev/null @@ -1,3 +0,0 @@ -.container { - color: blue; - } \ No newline at end of file diff --git a/src/pages/Hello09/index.tsx b/src/pages/Hello09/index.tsx deleted file mode 100644 index 5af7670..0000000 --- a/src/pages/Hello09/index.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import { Button } from 'antd'; -import styles from './index.less'; - -export default () => { - return ; -} \ No newline at end of file diff --git a/src/pages/Hello10/_mock.ts b/src/pages/Hello10/_mock.ts deleted file mode 100644 index 2672478..0000000 --- a/src/pages/Hello10/_mock.ts +++ /dev/null @@ -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; - 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, -}; diff --git a/src/pages/Hello10/data.d.ts b/src/pages/Hello10/data.d.ts deleted file mode 100644 index 8be6eee..0000000 --- a/src/pages/Hello10/data.d.ts +++ /dev/null @@ -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; -}; - -export type TableListParams = { - status?: string; - name?: string; - desc?: string; - key?: number; - pageSize?: number; - currentPage?: number; - filter?: Record; - sorter?: Record; -}; diff --git a/src/pages/Hello10/index.less b/src/pages/Hello10/index.less deleted file mode 100644 index f7b3489..0000000 --- a/src/pages/Hello10/index.less +++ /dev/null @@ -1,3 +0,0 @@ -.container { - color: blue; - } \ No newline at end of file diff --git a/src/pages/Hello10/index.tsx b/src/pages/Hello10/index.tsx deleted file mode 100644 index d6e6296..0000000 --- a/src/pages/Hello10/index.tsx +++ /dev/null @@ -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(); - const [showDetail, setShowDetail] = useState(false); - const [showCreate, setShowCreate] = useState(false); - const [showUpdate, setShowUpdate] = useState(false); - const [columns, setColumns] = useState([]); - const ref = useRef(); - - /** 获取数据结构体 */ - 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) => ( - <> - {text?.realname} - {text?.tel} - {text?.mobile} - - ) - } - } - - /** 添加序号和操作列 */ - 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) => [ - { - console.log('entity', entity); - setCurrentRow(entity); - setShowDetail(true); - }} >查看, - { - console.log('columns1', columns) - setCurrentRow(entity); - setShowUpdate(true); - console.log('columns2', columns) - }} >编辑, - { - // - }} >删除, - ], - } - ] - ); - }, [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 ( - - - columns={columns} - request={dataExamination} - rowKey="id" - actionRef={ref} - pagination={{ - showQuickJumper: true, - }} - search={{ - layout: 'vertical', - defaultCollapsed: false, - }} - dateFormatter="string" - /*toolbar={{ - title: '高级表格', - tooltip: '这是一个标题提示', - }}*/ - toolBarRender={() => [ - - ]} - /> - { - setCurrentRow(undefined); // 设置当前行 - setShowDetail(false); - }} - footer={null}> - {currentRow?.name && ( - - column={2} - /* title={currentRow?.name} */ - dataSource={currentRow} - /* - request={async () => ({ - data: currentRow || {}, - })}*/ - params={{ - id: currentRow?.id, - }} - columns={columns.slice(0, columns.length - 1) as ProDescriptionsItemProps[]} - /> - )} - - { - setShowCreate(false); - }} - footer={null} - > - - layout = 'horizontal' - layoutType = 'Form' - labelCol = {{ span: 8 }} - wrapperCol={{ span: 12 }} - onFinish={async (values) => { - console.log(values); - }} - submitter={{ - render: (props, doms) => ( - - - {doms} - - - ), - }} - // action = '' - title = "新建" - columns = {columns} - /> - - - { - setShowUpdate(false); - }} - footer={null}> - {currentRow?.name && ( - - layout = 'horizontal' - layoutType = 'Form' - labelCol = {{ span: 8 }} - wrapperCol={{ span: 12 }} - onFinish={async (values) => { - console.log(values); - }} - submitter={{ - render: (props, doms) => ( - - - {doms} - - - ), - }} - // action = '' - title = "编辑" - columns = {getInitialValues(columns, currentRow)} - /> - )} - - - - ); -}; \ No newline at end of file diff --git a/src/pages/Hello10/service.ts b/src/pages/Hello10/service.ts deleted file mode 100644 index bbf18fe..0000000 --- a/src/pages/Hello10/service.ts +++ /dev/null @@ -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('/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('/api/examination', { - data, - method: 'POST', - ...(options || {}), - }); -} - -/** 删除考点 DELETE /api/dataSource?key=examination */ -export async function removeExamination(data: { key: number[] }, options?: { [key: string]: any }) { - return request>('/api/examination', { - data, - method: 'DELETE', - ...(options || {}), - }); -} diff --git a/src/pages/Hello11/_mock.ts b/src/pages/Hello11/_mock.ts deleted file mode 100644 index 4873d7c..0000000 --- a/src/pages/Hello11/_mock.ts +++ /dev/null @@ -1,404 +0,0 @@ -/** - * 全局Mock数据请在/mock中配置 - * 当前模块Mock数据请参照/mock/dataSource.ts - */ - import { Request, Response } from 'express'; - - const getDataSource = (req: Request, res: Response) => { - const { key = '' , schema = '', data = ''} = req.query; - switch (key) { - case 'users': - res.json({ - data: [ - { - uid: '1', - name: 'John Brown', - age: 32, - address: 'New York No. 1 Lake Park', - idcard: '220101190101012001' - }, - { - uid: '2', - name: 'Jim Green', - age: 42, - address: 'London No. 1 Lake Park', - idcard: '220101190101012002' - }, - { - uid: '3', - name: 'Joe Black', - age: 32, - address: 'Sidney No. 1 Lake Park', - idcard: '220101190101012003' - } - ] - }) - break; - /* - * 考点数据 - */ - case 'examination': - let obj = {}; - if( schema === 'true' ){ - obj = { - data: [ - /*{ title: '序号', - dataIndex: 'index', - valueType: 'indexBorder', - width: 48 - },*/ - { - key: '1', // 确定这个列的唯一值,一般用于 dataIndex 重复的情况 - dataIndex: 'code', // 与实体映射的 key，数组会被转化 [a,b] => Entity.a.b - valueType: 'text', // 数据的渲渲染方式，我们自带了一部分，你可以可以自定义 valueType 参照 https://procomponents.ant.design/components/schema/ - title: '考点代码', // 标题的内容，在 form 中是 label - tooltip: '参照准考证考点', // 会在 title 旁边展示一个 icon，鼠标浮动之后展示 - valueEnum: '', // 支持 object 和 Map，Map 是支持其他基础类型作为 key - fieldProps: '', // 传给渲染的组件的 props，自定义的时候也会传递 - formItemProps: { - // 参照 https://ant.design/components/form-cn/#Rule - rules: [ - { - required: true, - message: '此项为必填项', - }, - { - max: 6, - message: '最大长度为6字符', - } - ], - }, // 传递给 Form.Item 的配置 - proFieldProps: '', // 设置到 ProField 上面的 props，内部属性 - //renderText: '', // 修改的数据是会被 valueType 定义的渲染组件消费 - //render: '', // 自定义只读模式的 dom,render 方法只管理的只读模式，编辑模式需要使用 renderFormItem - //renderFormItem: '', // 自定义编辑模式,返回一个 ReactNode，会自动包裹 value 和 onChange - request: null, // 从远程请求网络数据，一般用于选择类组件 - params: null, // 额外传递给 request 的参数，组件不做处理,但是变化会引起request 重新请求数据 - hideInDescriptions: true, // 在 descriptions 中隐藏 - hideInForm: false, // 在 Form 中隐藏 - hideInTable: false, // 在 Table 中隐藏 - hideInSearch: false, // 在 Table 的查询表格中隐藏 - columns:[], // 嵌套子项，valueType 为 dependency 时，请使用(values) => ProFormColumnsType[]其他情况使用 ProFormColumnsType[] - width: 150 - }, - { - key: '2', // 确定这个列的唯一值,一般用于 dataIndex 重复的情况 - dataIndex: 'name', // 与实体映射的 key，数组会被转化 [a,b] => Entity.a.b - valueType: 'text', // 数据的渲渲染方式，我们自带了一部分，你可以可以自定义 valueType https://procomponents.ant.design/components/schema/ - title: '考点名称', // 标题的内容，在 form 中是 label - tooltip: '参照准考证考点', // 会在 title 旁边展示一个 icon，鼠标浮动之后展示 - valueEnum: '', // 支持 object 和 Map，Map 是支持其他基础类型作为 key - fieldProps: '', // 传给渲染的组件的 props，自定义的时候也会传递 - formItemProps: { - rules: [ - { - required: true, - message: '此项为必填项', - }, - { - type: 'string', - message: '此项为文本内容', - }, - { - max: 50, - message: '最大长度50', - } - ], - }, // 传递给 Form.Item 的配置 - proFieldProps: '', // 设置到 ProField 上面的 props，内部属性 - //renderText: '', // 修改的数据是会被 valueType 定义的渲染组件消费 - //render: '', // 自定义只读模式的 dom,render 方法只管理的只读模式，编辑模式需要使用 renderFormItem - //renderFormItem: '', // 自定义编辑模式,返回一个 ReactNode，会自动包裹 value 和 onChange - request: null, // 从远程请求网络数据，一般用于选择类组件 - params: null, // 额外传递给 request 的参数，组件不做处理,但是变化会引起request 重新请求数据 - hideInDescriptions: true, // 在 descriptions 中隐藏 - hideInForm: false, // 在 Form 中隐藏 - hideInTable: false, // 在 Table 中隐藏 - hideInSearch: false, // 在 Table 的查询表格中隐藏 - columns:[ - { - key: '2-1', // 确定这个列的唯一值,一般用于 dataIndex 重复的情况 - dataIndex: 'realname', // 与实体映射的 key，数组会被转化 [a,b] => Entity.a.b - valueType: 'text', // 数据的渲渲染方式，我们自带了一部分，你可以可以自定义 valueType https://procomponents.ant.design/components/schema/ - title: '姓名', // 标题的内容，在 form 中是 label - tooltip: '', // 会在 title 旁边展示一个 icon，鼠标浮动之后展示 - valueEnum: '', // 支持 object 和 Map，Map 是支持其他基础类型作为 key - fieldProps: '', // 传给渲染的组件的 props，自定义的时候也会传递 - formItemProps: { - rules: [ - { - required: true, - message: '此项为必填项', - }, - { - type: 'string', - message: '此项为文本内容', - }, - { - max: 20, - message: '最大长度20', - } - ], - }, // 传递给 Form.Item 的配置 - proFieldProps: '', // 设置到 ProField 上面的 props，内部属性 - //renderText: '', // 修改的数据是会被 valueType 定义的渲染组件消费 - //render: '', // 自定义只读模式的 dom,render 方法只管理的只读模式，编辑模式需要使用 renderFormItem - //renderFormItem: '', // 自定义编辑模式,返回一个 ReactNode，会自动包裹 value 和 onChange - request: null, // 从远程请求网络数据，一般用于选择类组件 - params: null, // 额外传递给 request 的参数，组件不做处理,但是变化会引起request 重新请求数据 - hideInDescriptions: true, // 在 descriptions 中隐藏 - hideInForm: true, // 在 Form 中隐藏 - hideInTable: false, // 在 Table 中隐藏 - hideInSearch: false, // 在 Table 的查询表格中隐藏 - //columns:[] // 嵌套子项，valueType 为 dependency 时，请使用(values) => ProFormColumnsType[]其他情况使用 ProFormColumnsType[] - } - ] // 嵌套子项，valueType 为 dependency 时，请使用(values) => ProFormColumnsType[]其他情况使用 ProFormColumnsType[] - }, - { - key: '3', // 确定这个列的唯一值,一般用于 dataIndex 重复的情况 - dataIndex: 'examiner', // 与实体映射的 key，数组会被转化 [a,b] => Entity.a.b - valueType: 'text', // 数据的渲渲染方式，我们自带了一部分，你可以可以自定义 valueType https://procomponents.ant.design/components/schema/ - title: '主考姓名及联系方式', // 标题的内容，在 form 中是 label - tooltip: '', // 会在 title 旁边展示一个 icon，鼠标浮动之后展示 - valueEnum: '', // 支持 object 和 Map，Map 是支持其他基础类型作为 key - fieldProps: '', // 传给渲染的组件的 props，自定义的时候也会传递 - formItemProps: { - rules: [ - { - required: true, - message: '此项为必填项', - }, - { - type: 'string', - message: '此项为文本内容', - }, - { - max: 50, - message: '最大长度50', - } - ], - }, // 传递给 Form.Item 的配置 - proFieldProps: '', // 设置到 ProField 上面的 props，内部属性 - //renderText: '', // 修改的数据是会被 valueType 定义的渲染组件消费 - //render: '', // 自定义只读模式的 dom,render 方法只管理的只读模式，编辑模式需要使用 renderFormItem - //renderFormItem: '', // 自定义编辑模式,返回一个 ReactNode，会自动包裹 value 和 onChange - request: null, // 从远程请求网络数据，一般用于选择类组件 - params: null, // 额外传递给 request 的参数，组件不做处理,但是变化会引起request 重新请求数据 - hideInDescriptions: true, // 在 descriptions 中隐藏 - hideInForm: true, // 在 Form 中隐藏 - hideInTable: false, // 在 Table 中隐藏 - hideInSearch: false, // 在 Table 的查询表格中隐藏 - columns:[] // 嵌套子项，valueType 为 dependency 时，请使用(values) => ProFormColumnsType[]其他情况使用 ProFormColumnsType[] - }, - { - key: '4', // 确定这个列的唯一值,一般用于 dataIndex 重复的情况 - dataIndex: 'examinationRoomTotal', // 与实体映射的 key，数组会被转化 [a,b] => Entity.a.b - valueType: 'digit', // 数据的渲渲染方式，我们自带了一部分，你可以可以自定义 valueType https://procomponents.ant.design/components/schema/ - title: '考场数', // 标题的内容，在 form 中是 label - hideInSearch: true, // 在 Table 的查询表格中隐藏 - width: 150 - }, - { - key: '5', // 确定这个列的唯一值,一般用于 dataIndex 重复的情况 - dataIndex: 'publicTelephone', // 与实体映射的 key，数组会被转化 [a,b] => Entity.a.b - valueType: 'text', // 数据的渲渲染方式，我们自带了一部分，你可以可以自定义 valueType https://procomponents.ant.design/components/schema/ - title: '公开电话', // 标题的内容，在 form 中是 label - }, - { - key: '6', // 确定这个列的唯一值,一般用于 dataIndex 重复的情况 - dataIndex: 'address', // 与实体映射的 key，数组会被转化 [a,b] => Entity.a.b - valueType: 'text', // 数据的渲渲染方式，我们自带了一部分，你可以可以自定义 valueType https://procomponents.ant.design/components/schema/ - title: '地址', // 标题的内容，在 form 中是 label - formItemProps: { - rules: [ - { - required: true, - message: '此项为必填项', - }, - { - type: 'string', - message: '此项为文本内容', - }, - { - max: 50, - message: '最大长度200', - } - ], - }, // 传递给 Form.Item 的配置 - }, - { - key: '7', // 确定这个列的唯一值,一般用于 dataIndex 重复的情况 - dataIndex: 'busRoute', // 与实体映射的 key，数组会被转化 [a,b] => Entity.a.b - valueType: 'text', // 数据的渲渲染方式，我们自带了一部分，你可以可以自定义 valueType https://procomponents.ant.design/components/schema/ - title: '乘车路线', // 标题的内容，在 form 中是 label - hideInTable: true, // 在 Table 中隐藏 - hideInSearch: true, // 在 Table 的查询表格中隐藏 - }, - { - key: '8', // 确定这个列的唯一值,一般用于 dataIndex 重复的情况 - dataIndex: 'electricLine', // 与实体映射的 key，数组会被转化 [a,b] => Entity.a.b - valueType: 'text', // 数据的渲渲染方式，我们自带了一部分，你可以可以自定义 valueType https://procomponents.ant.design/components/schema/ - title: '用电线路', // 标题的内容，在 form 中是 label - hideInTable: true, // 在 Table 中隐藏 - } - ] - } - } - if( data === 'true' ){ - let _data = []; - for(let i=1; i<=30; i++){ - const _str = i.toString().padStart(2, '0') - _data.push( - { - id: '000000001'+ _str, - code: '2017' + _str, // 考点代码 - name: '长春高新第'+_str+'实验学校', - examiner: // 主考姓名及联系方式 - { - realname: '张安开', // 姓名 - tel: '819629' + _str, // 电话 - mobile: '130214563' + _str // 手机 - }, - contact: // 考点联系人方式 - { - realname: '安若昂', // 姓名 - tel: '819625' + _str, // 电话 - mobile: '130214567' + _str // 手机 - }, - secretRoom: // 保密室 - { - tel: '819625' + _str // 电话 - }, - monitorRoom: // 监控室 - { - tel: '819625' + _str // 电话 - }, - examinationRoomTotal: 30, // 考场数 - publicTelephone: '819612' + _str, // 公开电话 - address: '长春市高新区飞跃路' + _str + '号', // 地址 - busRoute: _str +'225路，202路', // 乘车路线 - electricLine: '飞跃路线' + _str // 用电线路 - } - ) - } - - obj = { - // DATA 数据记录 - data: _data - } - } - - res.json(obj) - break; - case 'notices': - res.json({ - data: [ - { - id: '000000001', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png', - title: '你收到了 14 份新周报', - datetime: '2017-08-09', - type: 'notification', - }, - { - id: '000000002', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png', - title: '你推荐的 曲妮妮 已通过第三轮面试', - datetime: '2017-08-08', - type: 'notification', - }, - { - id: '000000003', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png', - title: '这种模板可以区分多种通知类型', - datetime: '2017-08-07', - read: true, - type: 'notification', - }, - { - id: '000000004', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png', - title: '左侧图标用于区分不同的类型', - datetime: '2017-08-07', - type: 'notification', - }, - { - id: '000000005', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png', - title: '内容不要超过两行字，超出时自动截断', - datetime: '2017-08-07', - type: 'notification', - }, - { - id: '000000006', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg', - title: '曲丽丽 评论了你', - description: '描述信息描述信息描述信息', - datetime: '2017-08-07', - type: 'message', - clickClose: true, - }, - { - id: '000000007', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg', - title: '朱偏右 回复了你', - description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像', - datetime: '2017-08-07', - type: 'message', - clickClose: true, - }, - { - id: '000000008', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg', - title: '标题', - description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像', - datetime: '2017-08-07', - type: 'message', - clickClose: true, - }, - { - id: '000000009', - title: '任务名称', - description: '任务需要在 2017-01-12 20:00 前启动', - extra: '未开始', - status: 'todo', - type: 'event', - }, - { - id: '000000010', - title: '第三方紧急代码变更', - description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务', - extra: '马上到期', - status: 'urgent', - type: 'event', - }, - { - id: '000000011', - title: '信息安全考试', - description: '指派竹尔于 2017-01-09 前完成更新并发布', - extra: '已耗时 8 天', - status: 'doing', - type: 'event', - }, - { - id: '000000012', - title: 'ABCD 版本发布', - description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务', - extra: '进行中', - status: 'processing', - type: 'event', - }, - ], - }); - break; - default: - res.json({data:[]}) - break; - } - - } - - export default { - 'GET /api/dataSource': getDataSource, - }; - \ No newline at end of file diff --git a/src/pages/Hello11/data.d.ts b/src/pages/Hello11/data.d.ts deleted file mode 100644 index 8be6eee..0000000 --- a/src/pages/Hello11/data.d.ts +++ /dev/null @@ -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; -}; - -export type TableListParams = { - status?: string; - name?: string; - desc?: string; - key?: number; - pageSize?: number; - currentPage?: number; - filter?: Record; - sorter?: Record; -}; diff --git a/src/pages/Hello11/index.less b/src/pages/Hello11/index.less deleted file mode 100644 index f7b3489..0000000 --- a/src/pages/Hello11/index.less +++ /dev/null @@ -1,3 +0,0 @@ -.container { - color: blue; - } \ No newline at end of file diff --git a/src/pages/Hello11/index.tsx b/src/pages/Hello11/index.tsx deleted file mode 100644 index fc2fbd4..0000000 --- a/src/pages/Hello11/index.tsx +++ /dev/null @@ -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(); - const [showDetail, setShowDetail] = useState(false); - const [showCreate, setShowCreate] = useState(false); - const [showUpdate, setShowUpdate] = useState(false); - const [columns, setColumns] = useState([]); - const ref = useRef(); - - /** 获取数据结构体 */ - 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) => ( - <> - {text?.realname} - {text?.tel} - {text?.mobile} - - ) - } - } - - /** 添加序号和操作列 */ - 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) => [ - { - console.log('entity', entity); - setCurrentRow(entity); - setShowDetail(true); - }} >查看, - { - console.log('columns1', columns) - setCurrentRow(entity); - setShowUpdate(true); - console.log('columns2', columns) - }} >编辑, - { - // - }} >删除, - ], - } - ] - ); - }, [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 ( - - - columns={columns} - request={dataExamination} - rowKey="id" - actionRef={ref} - pagination={{ - showQuickJumper: true, - }} - search={{ - layout: 'vertical', - defaultCollapsed: false, - }} - dateFormatter="string" - /*toolbar={{ - title: '高级表格', - tooltip: '这是一个标题提示', - }}*/ - toolBarRender={() => [ - - ]} - /> - { - setCurrentRow(undefined); // 设置当前行 - setShowDetail(false); - }} - footer={null}> - {currentRow?.name && ( - - column={2} - /* title={currentRow?.name} */ - dataSource={currentRow} - /* - request={async () => ({ - data: currentRow || {}, - })}*/ - params={{ - id: currentRow?.id, - }} - columns={columns.slice(0, columns.length - 1) as ProDescriptionsItemProps[]} - /> - )} - - { - setShowCreate(false); - }} - footer={null} - > - - layout = 'horizontal' - layoutType = 'Form' - labelCol = {{ span: 8 }} - wrapperCol={{ span: 12 }} - onFinish={async (values) => { - console.log(values); - }} - submitter={{ - render: (props, doms) => ( - - - {doms} - - - ), - }} - // action = '' - title = "新建" - columns = {columns} - /> - - - { - setShowUpdate(false); - }} - footer={null}> - {currentRow?.name && ( - - layout = 'horizontal' - layoutType = 'Form' - labelCol = {{ span: 8 }} - wrapperCol={{ span: 12 }} - onFinish={async (values) => { - console.log(values); - }} - submitter={{ - render: (props, doms) => ( - - - {doms} - - - ), - }} - // action = '' - title = "编辑" - columns = {getInitialValues(columns, currentRow)} - /> - )} - - - - ); -}; \ No newline at end of file diff --git a/src/pages/Hello11/service.ts b/src/pages/Hello11/service.ts deleted file mode 100644 index bbf18fe..0000000 --- a/src/pages/Hello11/service.ts +++ /dev/null @@ -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('/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('/api/examination', { - data, - method: 'POST', - ...(options || {}), - }); -} - -/** 删除考点 DELETE /api/dataSource?key=examination */ -export async function removeExamination(data: { key: number[] }, options?: { [key: string]: any }) { - return request>('/api/examination', { - data, - method: 'DELETE', - ...(options || {}), - }); -} diff --git a/src/pages/Hello12/_mock.ts b/src/pages/Hello12/_mock.ts deleted file mode 100644 index 4873d7c..0000000 --- a/src/pages/Hello12/_mock.ts +++ /dev/null @@ -1,404 +0,0 @@ -/** - * 全局Mock数据请在/mock中配置 - * 当前模块Mock数据请参照/mock/dataSource.ts - */ - import { Request, Response } from 'express'; - - const getDataSource = (req: Request, res: Response) => { - const { key = '' , schema = '', data = ''} = req.query; - switch (key) { - case 'users': - res.json({ - data: [ - { - uid: '1', - name: 'John Brown', - age: 32, - address: 'New York No. 1 Lake Park', - idcard: '220101190101012001' - }, - { - uid: '2', - name: 'Jim Green', - age: 42, - address: 'London No. 1 Lake Park', - idcard: '220101190101012002' - }, - { - uid: '3', - name: 'Joe Black', - age: 32, - address: 'Sidney No. 1 Lake Park', - idcard: '220101190101012003' - } - ] - }) - break; - /* - * 考点数据 - */ - case 'examination': - let obj = {}; - if( schema === 'true' ){ - obj = { - data: [ - /*{ title: '序号', - dataIndex: 'index', - valueType: 'indexBorder', - width: 48 - },*/ - { - key: '1', // 确定这个列的唯一值,一般用于 dataIndex 重复的情况 - dataIndex: 'code', // 与实体映射的 key，数组会被转化 [a,b] => Entity.a.b - valueType: 'text', // 数据的渲渲染方式，我们自带了一部分，你可以可以自定义 valueType 参照 https://procomponents.ant.design/components/schema/ - title: '考点代码', // 标题的内容，在 form 中是 label - tooltip: '参照准考证考点', // 会在 title 旁边展示一个 icon，鼠标浮动之后展示 - valueEnum: '', // 支持 object 和 Map，Map 是支持其他基础类型作为 key - fieldProps: '', // 传给渲染的组件的 props，自定义的时候也会传递 - formItemProps: { - // 参照 https://ant.design/components/form-cn/#Rule - rules: [ - { - required: true, - message: '此项为必填项', - }, - { - max: 6, - message: '最大长度为6字符', - } - ], - }, // 传递给 Form.Item 的配置 - proFieldProps: '', // 设置到 ProField 上面的 props，内部属性 - //renderText: '', // 修改的数据是会被 valueType 定义的渲染组件消费 - //render: '', // 自定义只读模式的 dom,render 方法只管理的只读模式，编辑模式需要使用 renderFormItem - //renderFormItem: '', // 自定义编辑模式,返回一个 ReactNode，会自动包裹 value 和 onChange - request: null, // 从远程请求网络数据，一般用于选择类组件 - params: null, // 额外传递给 request 的参数，组件不做处理,但是变化会引起request 重新请求数据 - hideInDescriptions: true, // 在 descriptions 中隐藏 - hideInForm: false, // 在 Form 中隐藏 - hideInTable: false, // 在 Table 中隐藏 - hideInSearch: false, // 在 Table 的查询表格中隐藏 - columns:[], // 嵌套子项，valueType 为 dependency 时，请使用(values) => ProFormColumnsType[]其他情况使用 ProFormColumnsType[] - width: 150 - }, - { - key: '2', // 确定这个列的唯一值,一般用于 dataIndex 重复的情况 - dataIndex: 'name', // 与实体映射的 key，数组会被转化 [a,b] => Entity.a.b - valueType: 'text', // 数据的渲渲染方式，我们自带了一部分，你可以可以自定义 valueType https://procomponents.ant.design/components/schema/ - title: '考点名称', // 标题的内容，在 form 中是 label - tooltip: '参照准考证考点', // 会在 title 旁边展示一个 icon，鼠标浮动之后展示 - valueEnum: '', // 支持 object 和 Map，Map 是支持其他基础类型作为 key - fieldProps: '', // 传给渲染的组件的 props，自定义的时候也会传递 - formItemProps: { - rules: [ - { - required: true, - message: '此项为必填项', - }, - { - type: 'string', - message: '此项为文本内容', - }, - { - max: 50, - message: '最大长度50', - } - ], - }, // 传递给 Form.Item 的配置 - proFieldProps: '', // 设置到 ProField 上面的 props，内部属性 - //renderText: '', // 修改的数据是会被 valueType 定义的渲染组件消费 - //render: '', // 自定义只读模式的 dom,render 方法只管理的只读模式，编辑模式需要使用 renderFormItem - //renderFormItem: '', // 自定义编辑模式,返回一个 ReactNode，会自动包裹 value 和 onChange - request: null, // 从远程请求网络数据，一般用于选择类组件 - params: null, // 额外传递给 request 的参数，组件不做处理,但是变化会引起request 重新请求数据 - hideInDescriptions: true, // 在 descriptions 中隐藏 - hideInForm: false, // 在 Form 中隐藏 - hideInTable: false, // 在 Table 中隐藏 - hideInSearch: false, // 在 Table 的查询表格中隐藏 - columns:[ - { - key: '2-1', // 确定这个列的唯一值,一般用于 dataIndex 重复的情况 - dataIndex: 'realname', // 与实体映射的 key，数组会被转化 [a,b] => Entity.a.b - valueType: 'text', // 数据的渲渲染方式，我们自带了一部分，你可以可以自定义 valueType https://procomponents.ant.design/components/schema/ - title: '姓名', // 标题的内容，在 form 中是 label - tooltip: '', // 会在 title 旁边展示一个 icon，鼠标浮动之后展示 - valueEnum: '', // 支持 object 和 Map，Map 是支持其他基础类型作为 key - fieldProps: '', // 传给渲染的组件的 props，自定义的时候也会传递 - formItemProps: { - rules: [ - { - required: true, - message: '此项为必填项', - }, - { - type: 'string', - message: '此项为文本内容', - }, - { - max: 20, - message: '最大长度20', - } - ], - }, // 传递给 Form.Item 的配置 - proFieldProps: '', // 设置到 ProField 上面的 props，内部属性 - //renderText: '', // 修改的数据是会被 valueType 定义的渲染组件消费 - //render: '', // 自定义只读模式的 dom,render 方法只管理的只读模式，编辑模式需要使用 renderFormItem - //renderFormItem: '', // 自定义编辑模式,返回一个 ReactNode，会自动包裹 value 和 onChange - request: null, // 从远程请求网络数据，一般用于选择类组件 - params: null, // 额外传递给 request 的参数，组件不做处理,但是变化会引起request 重新请求数据 - hideInDescriptions: true, // 在 descriptions 中隐藏 - hideInForm: true, // 在 Form 中隐藏 - hideInTable: false, // 在 Table 中隐藏 - hideInSearch: false, // 在 Table 的查询表格中隐藏 - //columns:[] // 嵌套子项，valueType 为 dependency 时，请使用(values) => ProFormColumnsType[]其他情况使用 ProFormColumnsType[] - } - ] // 嵌套子项，valueType 为 dependency 时，请使用(values) => ProFormColumnsType[]其他情况使用 ProFormColumnsType[] - }, - { - key: '3', // 确定这个列的唯一值,一般用于 dataIndex 重复的情况 - dataIndex: 'examiner', // 与实体映射的 key，数组会被转化 [a,b] => Entity.a.b - valueType: 'text', // 数据的渲渲染方式，我们自带了一部分，你可以可以自定义 valueType https://procomponents.ant.design/components/schema/ - title: '主考姓名及联系方式', // 标题的内容，在 form 中是 label - tooltip: '', // 会在 title 旁边展示一个 icon，鼠标浮动之后展示 - valueEnum: '', // 支持 object 和 Map，Map 是支持其他基础类型作为 key - fieldProps: '', // 传给渲染的组件的 props，自定义的时候也会传递 - formItemProps: { - rules: [ - { - required: true, - message: '此项为必填项', - }, - { - type: 'string', - message: '此项为文本内容', - }, - { - max: 50, - message: '最大长度50', - } - ], - }, // 传递给 Form.Item 的配置 - proFieldProps: '', // 设置到 ProField 上面的 props，内部属性 - //renderText: '', // 修改的数据是会被 valueType 定义的渲染组件消费 - //render: '', // 自定义只读模式的 dom,render 方法只管理的只读模式，编辑模式需要使用 renderFormItem - //renderFormItem: '', // 自定义编辑模式,返回一个 ReactNode，会自动包裹 value 和 onChange - request: null, // 从远程请求网络数据，一般用于选择类组件 - params: null, // 额外传递给 request 的参数，组件不做处理,但是变化会引起request 重新请求数据 - hideInDescriptions: true, // 在 descriptions 中隐藏 - hideInForm: true, // 在 Form 中隐藏 - hideInTable: false, // 在 Table 中隐藏 - hideInSearch: false, // 在 Table 的查询表格中隐藏 - columns:[] // 嵌套子项，valueType 为 dependency 时，请使用(values) => ProFormColumnsType[]其他情况使用 ProFormColumnsType[] - }, - { - key: '4', // 确定这个列的唯一值,一般用于 dataIndex 重复的情况 - dataIndex: 'examinationRoomTotal', // 与实体映射的 key，数组会被转化 [a,b] => Entity.a.b - valueType: 'digit', // 数据的渲渲染方式，我们自带了一部分，你可以可以自定义 valueType https://procomponents.ant.design/components/schema/ - title: '考场数', // 标题的内容，在 form 中是 label - hideInSearch: true, // 在 Table 的查询表格中隐藏 - width: 150 - }, - { - key: '5', // 确定这个列的唯一值,一般用于 dataIndex 重复的情况 - dataIndex: 'publicTelephone', // 与实体映射的 key，数组会被转化 [a,b] => Entity.a.b - valueType: 'text', // 数据的渲渲染方式，我们自带了一部分，你可以可以自定义 valueType https://procomponents.ant.design/components/schema/ - title: '公开电话', // 标题的内容，在 form 中是 label - }, - { - key: '6', // 确定这个列的唯一值,一般用于 dataIndex 重复的情况 - dataIndex: 'address', // 与实体映射的 key，数组会被转化 [a,b] => Entity.a.b - valueType: 'text', // 数据的渲渲染方式，我们自带了一部分，你可以可以自定义 valueType https://procomponents.ant.design/components/schema/ - title: '地址', // 标题的内容，在 form 中是 label - formItemProps: { - rules: [ - { - required: true, - message: '此项为必填项', - }, - { - type: 'string', - message: '此项为文本内容', - }, - { - max: 50, - message: '最大长度200', - } - ], - }, // 传递给 Form.Item 的配置 - }, - { - key: '7', // 确定这个列的唯一值,一般用于 dataIndex 重复的情况 - dataIndex: 'busRoute', // 与实体映射的 key，数组会被转化 [a,b] => Entity.a.b - valueType: 'text', // 数据的渲渲染方式，我们自带了一部分，你可以可以自定义 valueType https://procomponents.ant.design/components/schema/ - title: '乘车路线', // 标题的内容，在 form 中是 label - hideInTable: true, // 在 Table 中隐藏 - hideInSearch: true, // 在 Table 的查询表格中隐藏 - }, - { - key: '8', // 确定这个列的唯一值,一般用于 dataIndex 重复的情况 - dataIndex: 'electricLine', // 与实体映射的 key，数组会被转化 [a,b] => Entity.a.b - valueType: 'text', // 数据的渲渲染方式，我们自带了一部分，你可以可以自定义 valueType https://procomponents.ant.design/components/schema/ - title: '用电线路', // 标题的内容，在 form 中是 label - hideInTable: true, // 在 Table 中隐藏 - } - ] - } - } - if( data === 'true' ){ - let _data = []; - for(let i=1; i<=30; i++){ - const _str = i.toString().padStart(2, '0') - _data.push( - { - id: '000000001'+ _str, - code: '2017' + _str, // 考点代码 - name: '长春高新第'+_str+'实验学校', - examiner: // 主考姓名及联系方式 - { - realname: '张安开', // 姓名 - tel: '819629' + _str, // 电话 - mobile: '130214563' + _str // 手机 - }, - contact: // 考点联系人方式 - { - realname: '安若昂', // 姓名 - tel: '819625' + _str, // 电话 - mobile: '130214567' + _str // 手机 - }, - secretRoom: // 保密室 - { - tel: '819625' + _str // 电话 - }, - monitorRoom: // 监控室 - { - tel: '819625' + _str // 电话 - }, - examinationRoomTotal: 30, // 考场数 - publicTelephone: '819612' + _str, // 公开电话 - address: '长春市高新区飞跃路' + _str + '号', // 地址 - busRoute: _str +'225路，202路', // 乘车路线 - electricLine: '飞跃路线' + _str // 用电线路 - } - ) - } - - obj = { - // DATA 数据记录 - data: _data - } - } - - res.json(obj) - break; - case 'notices': - res.json({ - data: [ - { - id: '000000001', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png', - title: '你收到了 14 份新周报', - datetime: '2017-08-09', - type: 'notification', - }, - { - id: '000000002', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png', - title: '你推荐的 曲妮妮 已通过第三轮面试', - datetime: '2017-08-08', - type: 'notification', - }, - { - id: '000000003', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png', - title: '这种模板可以区分多种通知类型', - datetime: '2017-08-07', - read: true, - type: 'notification', - }, - { - id: '000000004', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png', - title: '左侧图标用于区分不同的类型', - datetime: '2017-08-07', - type: 'notification', - }, - { - id: '000000005', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png', - title: '内容不要超过两行字，超出时自动截断', - datetime: '2017-08-07', - type: 'notification', - }, - { - id: '000000006', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg', - title: '曲丽丽 评论了你', - description: '描述信息描述信息描述信息', - datetime: '2017-08-07', - type: 'message', - clickClose: true, - }, - { - id: '000000007', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg', - title: '朱偏右 回复了你', - description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像', - datetime: '2017-08-07', - type: 'message', - clickClose: true, - }, - { - id: '000000008', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg', - title: '标题', - description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像', - datetime: '2017-08-07', - type: 'message', - clickClose: true, - }, - { - id: '000000009', - title: '任务名称', - description: '任务需要在 2017-01-12 20:00 前启动', - extra: '未开始', - status: 'todo', - type: 'event', - }, - { - id: '000000010', - title: '第三方紧急代码变更', - description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务', - extra: '马上到期', - status: 'urgent', - type: 'event', - }, - { - id: '000000011', - title: '信息安全考试', - description: '指派竹尔于 2017-01-09 前完成更新并发布', - extra: '已耗时 8 天', - status: 'doing', - type: 'event', - }, - { - id: '000000012', - title: 'ABCD 版本发布', - description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务', - extra: '进行中', - status: 'processing', - type: 'event', - }, - ], - }); - break; - default: - res.json({data:[]}) - break; - } - - } - - export default { - 'GET /api/dataSource': getDataSource, - }; - \ No newline at end of file diff --git a/src/pages/Hello12/data.d.ts b/src/pages/Hello12/data.d.ts deleted file mode 100644 index 8be6eee..0000000 --- a/src/pages/Hello12/data.d.ts +++ /dev/null @@ -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; -}; - -export type TableListParams = { - status?: string; - name?: string; - desc?: string; - key?: number; - pageSize?: number; - currentPage?: number; - filter?: Record; - sorter?: Record; -}; diff --git a/src/pages/Hello12/index.less b/src/pages/Hello12/index.less deleted file mode 100644 index f7b3489..0000000 --- a/src/pages/Hello12/index.less +++ /dev/null @@ -1,3 +0,0 @@ -.container { - color: blue; - } \ No newline at end of file diff --git a/src/pages/Hello12/index.tsx b/src/pages/Hello12/index.tsx deleted file mode 100644 index fc2fbd4..0000000 --- a/src/pages/Hello12/index.tsx +++ /dev/null @@ -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(); - const [showDetail, setShowDetail] = useState(false); - const [showCreate, setShowCreate] = useState(false); - const [showUpdate, setShowUpdate] = useState(false); - const [columns, setColumns] = useState([]); - const ref = useRef(); - - /** 获取数据结构体 */ - 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) => ( - <> - {text?.realname} - {text?.tel} - {text?.mobile} - - ) - } - } - - /** 添加序号和操作列 */ - 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) => [ - { - console.log('entity', entity); - setCurrentRow(entity); - setShowDetail(true); - }} >查看, - { - console.log('columns1', columns) - setCurrentRow(entity); - setShowUpdate(true); - console.log('columns2', columns) - }} >编辑, - { - // - }} >删除, - ], - } - ] - ); - }, [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 ( - - - columns={columns} - request={dataExamination} - rowKey="id" - actionRef={ref} - pagination={{ - showQuickJumper: true, - }} - search={{ - layout: 'vertical', - defaultCollapsed: false, - }} - dateFormatter="string" - /*toolbar={{ - title: '高级表格', - tooltip: '这是一个标题提示', - }}*/ - toolBarRender={() => [ - - ]} - /> - { - setCurrentRow(undefined); // 设置当前行 - setShowDetail(false); - }} - footer={null}> - {currentRow?.name && ( - - column={2} - /* title={currentRow?.name} */ - dataSource={currentRow} - /* - request={async () => ({ - data: currentRow || {}, - })}*/ - params={{ - id: currentRow?.id, - }} - columns={columns.slice(0, columns.length - 1) as ProDescriptionsItemProps[]} - /> - )} - - { - setShowCreate(false); - }} - footer={null} - > - - layout = 'horizontal' - layoutType = 'Form' - labelCol = {{ span: 8 }} - wrapperCol={{ span: 12 }} - onFinish={async (values) => { - console.log(values); - }} - submitter={{ - render: (props, doms) => ( - - - {doms} - - - ), - }} - // action = '' - title = "新建" - columns = {columns} - /> - - - { - setShowUpdate(false); - }} - footer={null}> - {currentRow?.name && ( - - layout = 'horizontal' - layoutType = 'Form' - labelCol = {{ span: 8 }} - wrapperCol={{ span: 12 }} - onFinish={async (values) => { - console.log(values); - }} - submitter={{ - render: (props, doms) => ( - - - {doms} - - - ), - }} - // action = '' - title = "编辑" - columns = {getInitialValues(columns, currentRow)} - /> - )} - - - - ); -}; \ No newline at end of file diff --git a/src/pages/Hello12/service.ts b/src/pages/Hello12/service.ts deleted file mode 100644 index bbf18fe..0000000 --- a/src/pages/Hello12/service.ts +++ /dev/null @@ -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('/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('/api/examination', { - data, - method: 'POST', - ...(options || {}), - }); -} - -/** 删除考点 DELETE /api/dataSource?key=examination */ -export async function removeExamination(data: { key: number[] }, options?: { [key: string]: any }) { - return request>('/api/examination', { - data, - method: 'DELETE', - ...(options || {}), - }); -}