From 5700c002c48b1bf037c234779b50070ffb8094fa Mon Sep 17 00:00:00 2001 From: zhengpengju Date: Fri, 26 Nov 2021 11:26:04 +0800 Subject: [PATCH] fix eslint --- mock/dataSource.ts | 5 +- src/pages/ListTableList2/index.tsx | 254 +++++++++++++--------------- src/pages/ListTableList2/service.ts | 4 +- 3 files changed, 120 insertions(+), 143 deletions(-) diff --git a/mock/dataSource.ts b/mock/dataSource.ts index 2fadb6f..d5c769f 100644 --- a/mock/dataSource.ts +++ b/mock/dataSource.ts @@ -75,7 +75,7 @@ const getDataSource = (req: Request, res: Response) => { hideInTable: false, // 在 Table 中隐藏 hideInSearch: false, // 在 Table 的查询表格中隐藏 columns:[], // 嵌套子项，valueType 为 dependency 时，请使用(values) => ProFormColumnsType[]其他情况使用 ProFormColumnsType[] - width: 100 + width: 150 }, { key: '2', // 确定这个列的唯一值,一般用于 dataIndex 重复的情况 @@ -189,9 +189,10 @@ const getDataSource = (req: Request, res: Response) => { { key: '4', // 确定这个列的唯一值,一般用于 dataIndex 重复的情况 dataIndex: 'examinationRoomTotal', // 与实体映射的 key，数组会被转化 [a,b] => Entity.a.b - valueType: 'text', // 数据的渲渲染方式，我们自带了一部分，你可以可以自定义 valueType https://procomponents.ant.design/components/schema/ + valueType: 'digit', // 数据的渲渲染方式，我们自带了一部分，你可以可以自定义 valueType https://procomponents.ant.design/components/schema/ title: '考场数', // 标题的内容，在 form 中是 label hideInSearch: true, // 在 Table 的查询表格中隐藏 + width: 150 }, { key: '5', // 确定这个列的唯一值,一般用于 dataIndex 重复的情况 diff --git a/src/pages/ListTableList2/index.tsx b/src/pages/ListTableList2/index.tsx index 8f36402..fe2012b 100644 --- a/src/pages/ListTableList2/index.tsx +++ b/src/pages/ListTableList2/index.tsx @@ -1,5 +1,5 @@ -import React, { useRef, useState } from 'react'; -import { useRequest } from 'ahooks'; +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'; @@ -9,7 +9,7 @@ import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions'; import ProDescriptions from '@ant-design/pro-descriptions'; import { BetaSchemaForm} from '@ant-design/pro-form'; -import { Button, Modal } from 'antd'; +import { Button, Col, Modal, Row, Space } from 'antd'; import { MobileOutlined, PhoneOutlined, PlusOutlined } from '@ant-design/icons'; import { schemaExamination, dataExamination } from './service'; @@ -26,99 +26,31 @@ export type TableListItem = { money: number; memo: string; }; -//const initialValues = [] export default () => { const [currentRow, setCurrentRow] = useState(); const [showDetail, setShowDetail] = useState(false); - const [showModify, setShowModify] = useState(false); - - const setInitialValues = (columns: any[], values: any) => { - console.log('setInitialValues', values) - const initialValues: any[] = []; - columns.forEach((column) => { - const key: any = column?.dataIndex || ''; - initialValues.push({...column, initialValue: key ? values[key] : ''}) - }) - return initialValues || [] - } - + const [showCreate, setShowCreate] = useState(false); + const [showUpdate, setShowUpdate] = useState(false); + const [columns, setColumns] = useState([]); const ref = useRef(); - /* - setValues([{ - title: '序号', - dataIndex: 'index', - valueType: 'indexBorder', - render: (text, record, index) => - `${(this.state.page - 1) * (this.state.pageSize) + (index + 1)}`, - width: 48, - }]) - - const { data } = useRequest(() => { - return schemaExamination({}); - }); - console.log('schema-data', data) - // console.log('columns', columns) - */ - console.log('proTable init..'); - /* - let columns: ProColumns[] = [ - { - title: '序号', - dataIndex: 'index', - valueType: 'indexBorder', - // render: (text, record, index) => - // `${(this.state.page - 1) * (this.state.pageSize) + (index + 1)}`, - width: 48, - }, - { - title: '操作', - width: 180, - key: 'option', - valueType: 'option', - render: () => [ - { - handleUpdateModalVisible(true); - // setCurrentRow(record); - }} - >查看, - { - handleUpdateModalVisible(true); - // setCurrentRow(record); - }} - >编辑, - 删除, - ], - }, - ]; - */ /** 获取数据结构体 */ const { data } = useRequest(schemaExamination); - console.log('data---', data); - let columns: any - if(data && data.hasOwnProperty('data')){ - console.log('in data') - console.log(data.data) - columns = data.data; - /** - * 获取数据结构体 - * 可通过key 或 dataIndex 查找到字段项索引 - */ + console.log('debug1'); + useEffect(() => { + const _data = data || []; let idx = -1; - idx = columns.findIndex((val: { dataIndex: string; })=>{ return val.dataIndex === 'publicTelephone' }) + idx = _data?.findIndex((val: { dataIndex: string; })=>{ return val.dataIndex === 'publicTelephone' }) || -1; if(idx !== -1){ - columns[idx] = {...columns[idx], renderText: (val: string) => `${(val || '').replace(/(\d{2})(\d{2})(\d{4})/,"$1**$3")}`} + _data[idx] = {..._data[idx], renderText: (val: string) => `${(val || '').replace(/(\d{2})(\d{2})(\d{4})/,"$1**$3")}`} } - idx = columns.findIndex((val: { dataIndex: string; })=>{ return val.dataIndex === 'examiner' }) + /** 渲染复合数据项 */ + idx = _data?.findIndex((val: { dataIndex: string; })=>{ return val.dataIndex === 'examiner' }) || -1; if(idx !== -1){ - columns[idx] = { - ...columns[idx], + _data[idx] = { + ..._data[idx], render: (text: any) => ( <> {text?.realname} @@ -129,54 +61,62 @@ export default () => { } } - /** 添加序号列 */ - idx = columns.findIndex((val: { key: string; }) => { return val.key === 'option' }) - if(idx === -1){ // 没有操作项时添加，避免重复添加 - columns.unshift( + /** 添加序号和操作列 */ + setColumns( + [ { title: '序号', - dataIndex: 'index', + key: 'index', valueType: 'indexBorder', - render: (index: number) =>{ + 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 index; + 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) + }} >编辑, + { + // + }} >删除, + ], } - ) - } - /** 追加操作列 */ - idx = columns.findIndex((val: { key: string; }) => { return val.key === 'option' }) - if(idx === -1){ // 没有操作项时添加，避免重复添加 - columns.push({ - title: '操作', - width: 180, - key: 'option', - valueType: 'option', - render: (_dom: any, entity: React.SetStateAction) => [ - { - console.log('entity', entity); - setCurrentRow(entity); - setShowDetail(true); - }} >查看, - { - setCurrentRow(entity); - setShowModify(true); - }} >编辑, - { + ] + ); + }, [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 || [] } - // - //console.log('columns---', columns); -console.log('ref.current', ref.current); + return ( @@ -192,29 +132,19 @@ console.log('ref.current', ref.current); defaultCollapsed: false, }} dateFormatter="string" - toolbar={{ + /*toolbar={{ title: '高级表格', tooltip: '这是一个标题提示', - }} + }}*/ toolBarRender={() => [ - - layout='horizontal' - trigger={} - layoutType="ModalForm" - labelCol = {{ span: 8 }} - wrapperCol={{ span: 12 }} - onFinish={async (values) => { - console.log(values); - }} - // action='' - title="新建" - columns={columns} - /> - , + ]} /> { @@ -238,30 +168,74 @@ console.log('ref.current', ref.current); /> )} + { + 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} + /> + + { - setCurrentRow(undefined); // 设置当前行 - setShowModify(false); + 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 = {setInitialValues(columns, currentRow)} + columns = {getInitialValues(columns, currentRow)} /> )} + ); }; \ No newline at end of file diff --git a/src/pages/ListTableList2/service.ts b/src/pages/ListTableList2/service.ts index 90be80f..f4b5486 100644 --- a/src/pages/ListTableList2/service.ts +++ b/src/pages/ListTableList2/service.ts @@ -11,7 +11,9 @@ type DataItem = { /** 获取考点数据结构 GET /api/dataSource?key=examination&schema=true&data=false */ export async function schemaExamination( - params: any, + params: { + // query + }, options?: { [key: string]: any }, ) { return request<{