🧐[问题] protable colums 动态渲染问题
wqp9204 opened this issue · comments
提问前先看看:
https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md
protable colums 动态渲染问题
通过其他页面跳转过来的在路径上写了表的id,然后想在页面protable渲染后 获取表在数据库定义的名称和类型,
动态渲染下列明下,现在的问题是,我跳转到当前页面没有变化,我点了查询他把列明渲染出来。这个怎么改
💻 示例代码
package.json
"dependencies": {
"@ant-design/icons": "^4.8.0",
"@ant-design/pro-components": "^2.6.35",
"@ant-design/use-emotion-css": "1.0.4",
"@umijs/route-utils": "^2.2.2",
"antd": "^5.11.0",
"classnames": "^2.3.2",
"js-yaml": "^4.1.0",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"omit.js": "^2.0.2",
"rc-menu": "^9.8.2",
"rc-util": "^5.27.2",
"react": "^18.2.0",
"react-dev-inspector": "^1.8.4",
"react-dom": "^18.2.0",
"react-helmet-async": "^1.3.0"
},
"devDependencies": {
"@ant-design/pro-cli": "^2.1.5",
"@testing-library/react": "^13.4.0",
"@types/classnames": "^2.3.1",
"@types/express": "^4.17.17",
"@types/history": "^4.7.11",
"@types/jest": "^29.4.0",
"@types/js-yaml": "^4.0.9",
"@types/lodash": "^4.14.191",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@types/react-helmet": "^6.1.6",
"@umijs/fabric": "^2.14.1",
"@umijs/lint": "^4.0.52",
"@umijs/max": "^4.0.52",
"@umijs/plugin-access": "^2.4.3",
"cross-env": "^7.0.3",
"eslint": "^8.34.0",
"express": "^4.18.2",
"gh-pages": "^3.2.3",
"husky": "^7.0.4",
"jest": "^29.4.3",
"jest-environment-jsdom": "^29.4.3",
"lint-staged": "^10.5.4",
"mockjs": "^1.1.0",
"prettier": "^2.8.4",
"swagger-ui-dist": "^4.15.5",
"ts-node": "^10.9.1",
"typescript": "^4.9.5",
"umi-presets-pro": "^2.0.2"
},
"engines": {
"node": ">=12.0.0"
}
import React, {useEffect, useMemo, useRef, useState} from "react";
import {ActionType, PageContainer, ProColumns, ProTable} from "@ant-design/pro-components";
import {FormattedMessage, useIntl} from "@umijs/max";
import {Button} from "antd";
import {PlusOutlined} from "@ant-design/icons";
import {ResponseCode} from "@/models/Response";
import DangerConfirmModal from "@/components/DangerConfirmModal";
import MdmInstanceModalForm, {MdmInstanceModel} from "@/pages/mdmInstance/components/MdmInstanceModalForm";
import {Access, useAccess} from "@@/plugin-access";
import {deleteInstance, instanceTable} from "@/services/ExtMdmService";
import {history, useSearchParams} from "@@/exports";
import {MdmMainColumnsModel} from "@/pages/mdmMainColumns/components/MdmMainColumnsModalForm";
import {searchMdmMainColumnsList} from "@/services/BaseMdmMainColumnsService";
import {MdmMainColumnsSearchIModel} from "@/models/in/MdmMainColumnsSearchIModel";
const MdmInstance: React.FC = () => {
const intl = useIntl();
const access = useAccess();
const [searchParams, setSearchParams] = useSearchParams();
/**
* 新增弹框页面 控制状态
*/
const [addModalVisible, setAddModalVisible] = useState<boolean>(false);
/**
* 修改弹框页面 控制状态
*/
const [modifyModalVisible, setModifyModalVisible] = useState<boolean>(false);
/**
* proTable 选中的行的数据
*/
const [selectRow, setSelectRow] = useState<MdmInstanceModel>();
/**
* proTable 批量选择 选中的行的key列的值
*/
const [selectRowKeys, setSelectRowKeys] = useState<[]>([]);
/**
* proTable的ref
*/
const actionRef = useRef<ActionType>();
/**
* 列表字段内容
*/
const tableColumns: ProColumns[] = [
{
title: <FormattedMessage
id="col.dataId"
/>,
dataIndex: 'dataId',
valueType: 'text',
ellipsis: true,
hideInSearch: true,
},
{
title: <FormattedMessage
id="title.operate"
/>,
valueType: 'option',
render: (_, row) => [
<a
key="modify"
onClick={() => {
setSelectRow(row)
setModifyModalVisible(true)
}}>
<FormattedMessage
id={access.canMdmInstancePageModify ? "button.modify" : "button.info"}
/>
</a>,
<Access accessible={access.canMdmInstancePageAdd} key="copy">
<a
type="text"
onClick={() => {
const newRow: MdmInstanceModel = {...row}
newRow.instanceId = undefined
setSelectRow(newRow)
setAddModalVisible(true)
}}
>
<FormattedMessage
id="button.copy"
/>
</a>
</Access>,
<Access accessible={access.canMdmInstancePageModify && !row.instanceFlag} key="copy">
<a
key={"instance"}
type="text"
onClick={() => {
instanceTable(row.instanceId).then(res => {
if (res.code === ResponseCode.OK) {
actionRef.current?.reloadAndRest?.();
return true;
} else {
return false;
}
})
}}
>
<FormattedMessage
id="button.instance"
/>
</a>
</Access>,
<Access accessible={row.instanceFlag === true} key="copy">
<a
key={"instanceData"}
type="text"
onClick={() => {
}}
>
<FormattedMessage
id="button.instanceData"
/>
</a>
</Access>,
]
}]
const [columns, setColumns] = useState(tableColumns);
useEffect(() => {
let instanceId = searchParams.get('instanceId');
let mainId = searchParams.get('mainId');
if (instanceId !== null && mainId !== null) {
let search: MdmMainColumnsSearchIModel = new MdmMainColumnsSearchIModel();
search.mainId = Number.parseInt(mainId)
search.order = "+seq"
searchMdmMainColumnsList(search).then(res => {
let i = 1;
for (let one of res) {
tableColumns.splice(i, 0,
{
title: one.columnName,
dataIndex: one.columnId,
valueType: 'text',
ellipsis: true,
},
)
i += 1;
}
setColumns(tableColumns);
})
} else {
//跳回实例夜
history.push('/mdmInstance');
}
}, []);
return (
<>
{/*新增*/}
<MdmInstanceModalForm
accessible={access.canMdmInstancePageAdd}
onCancel={(value) => {
if (!value) {
setAddModalVisible(false)
}
}}
onSubmit={async (values) => {
// return await addOneMdmInstance(values).then(res => {
// if (res.code === ResponseCode.OK) {
// actionRef.current?.reloadAndRest?.();
// return true;
// } else {
// return false;
// }
// })
return false
}}
modalVisible={addModalVisible}
values={selectRow || {}}
/>
{/*修改*/}
<MdmInstanceModalForm
accessible={access.canMdmInstancePageModify}
onCancel={(value) => {
if (!value) {
setModifyModalVisible(false)
}
}}
onSubmit={async (values) => {
// return await modifyOneMdmInstanceWithNull(values).then(res => {
// if (res.code === ResponseCode.OK) {
// actionRef.current?.reloadAndRest?.();
// return true;
// } else {
// return false;
// }
// })
return false
}}
modalVisible={modifyModalVisible}
values={selectRow || {}}
/>
{/*列表*/}
<PageContainer>
<ProTable
headerTitle={intl.formatMessage({
id: 'title.table'
})}
search={{labelWidth: "auto"}}
scroll={{x: 'max-content'}}
pagination={{showQuickJumper: true}}
//配置列名和查询条件
columns={columns}
//配置返回参数的接口方法
request={async (params = {}, sort) => {
// let search: MdmInstanceSearchIModel = new MdmInstanceSearchIModel();
// copy(search, params)
// setSearchOrder(search, sort)
// return searchMdmInstancePage(search)
return []
}}
//加新增按钮
toolBarRender={() => [
<Access accessible={access.canMdmInstancePageAdd} key={"add"}>
<Button
type="primary"
onClick={() => {
setSelectRow({})
setAddModalVisible(true)
}}
>
<PlusOutlined/> <FormattedMessage id="button.add"/>
</Button>
</Access>,
<DangerConfirmModal
key={"batchDelete"}
buttonType={"button"}
buttonI18nCode={"button.batchDelete"}
accessible={access.canMdmInstancePageDelete && selectRowKeys.length > 0}
onSubmit={() => {
deleteInstance(selectRowKeys).then(res => {
if (ResponseCode.OK === res.code) {
actionRef.current?.reloadAndRest?.();
}
})
}}
values={{contentValue: {name: intl.formatMessage({id: "button.batchDelete"})}}}/>,
<DangerConfirmModal
key={"disable"}
buttonType={"button"}
buttonI18nCode={"button.disable"}
accessible={access.canMdmInstancePageModify && selectRowKeys.length > 0}
onSubmit={() => {
// modifyListMdmInstanceIgnoreNull({instanceIdList: selectRowKeys, disabled: true}).then(res => {
// if (ResponseCode.OK === res.code) {
// actionRef.current?.reloadAndRest?.();
// }
// })
}}
values={{contentValue: {name: intl.formatMessage({id: "button.disable"})}}}/>,
<DangerConfirmModal
key={"enable"}
buttonType={"button"}
buttonI18nCode={"button.enable"}
accessible={access.canMdmInstancePageModify && selectRowKeys.length > 0}
onSubmit={() => {
// modifyListMdmInstanceIgnoreNull({instanceIdList: selectRowKeys, disabled: false}).then(res => {
// if (ResponseCode.OK === res.code) {
// actionRef.current?.reloadAndRest?.();
// }
// })
}}
values={{contentValue: {name: intl.formatMessage({id: "button.enable"})}}}/>
]}
//批量选择的时候 主键字段名称
rowKey={"dataId"}
rowSelection={{
onChange: (keys) => {
// @ts-ignore
setSelectRowKeys(keys)
},
}}
//column的ref
actionRef={actionRef}
/>
</PageContainer>
</>
)
}
export default MdmInstance;
🚑 其他信息
![72d52619e244dc2d7f6526a8804a0852378c98fcb25405e728055577f2b4a67dRDpcRGluZ1RhbGtBcHBEYXRhXERpbmdUYWxrXDEwMzIwNTIwOV92MlxJbWFnZUZpbGVzXDE3MTk1NDE1NTgzNzhfMTU4OEE3MDEtMzZGMi00ZDc3LUI3NDEtNDYwQjdCRjlFREVGLnBuZw==](https://private-user-images.githubusercontent.com/67537857/344007951-267e50b2-dd89-4570-9625-ec28cf929d7d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1MjkzNDEsIm5iZiI6MTcyNDUyOTA0MSwicGF0aCI6Ii82NzUzNzg1Ny8zNDQwMDc5NTEtMjY3ZTUwYjItZGQ4OS00NTcwLTk2MjUtZWMyOGNmOTI5ZDdkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI0VDE5NTA0MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE0YjY5YTI4NGIyYTNlZDBjM2I1N2ZiODFmZWU3MDhhZjY4N2VmNzg1ZWIyOWFkMWUwYWE4ZGFhNDZmMDIzNmImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.XUdhv5fffIy-KjKParQxFqJanKT9BZ3eYjOtnTbwCRQ)
![325256911b5222dce11b6cfa043a4da14fc8ec75fe52a6c6d314ed1e2bd0c2e9RDpcRGluZ1RhbGtBcHBEYXRhXERpbmdUYWxrXDEwMzIwNTIwOV92MlxJbWFnZUZpbGVzXDE3MTk1NDE1OTk5NTZfRTAxOTg0MzMtNkU3RC00MzFmLThBQzgtQkY0RkRGREE4QTlELnBuZw==](https://private-user-images.githubusercontent.com/67537857/344007955-6544fb64-d66c-485e-b762-42b895a3b194.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1MjkzNDEsIm5iZiI6MTcyNDUyOTA0MSwicGF0aCI6Ii82NzUzNzg1Ny8zNDQwMDc5NTUtNjU0NGZiNjQtZDY2Yy00ODVlLWI3NjItNDJiODk1YTNiMTk0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI0VDE5NTA0MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTA5YjFlNTQ4MThjYTY3ZjZiODFhMjlmMGE5MDk3ZTdiN2FjMmRkMjY1MGQ1MmYxNTlkYjRjYjk1MWVkMjc3YmYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.pxrwi-vOIWLrHmcaOqiQLjB2vKWJU4UXT--j5iTyBIU)
以下的 Issues 可能会帮助到你 / The following issues may help you
- [#8529][🧐[问题] protable colums 动态渲染问题][100%]