Columns 自定义

1. 引入

  import { ColumnsSetButton, useSetColumnsFun } from '../component/dropDragComp/_SetButton';

2. 定义

  const { columns } = units.useModel({ modelUrl: "XXXXXX", tableModelCode: "XXXXXX"  });
  //  columns原始值(useModel过来的)  columnsNeeds中间值(如下定义即可) columnsList最终值(table展示用的)
  const [columnsNeeds, setColumnsNeeds] = useState<typeof columns>([])
  const columnsList = useSetColumnsFun?.(columnsNeeds);

3. 使用

  // businessId唯一(模块.表)  下面控件最终展示效果是一个设置的Icon
  <ColumnsSetButton columns={columns} onSendColumns={setColumnsNeeds} businessId="purchase.PurchaseOrderHead" />

  <Table columns={columnsList} ...... />

返回上一页带参

1: 添加QuerySession Class类(设置与获取查询参数);

2: 修改_history对象(处理与上一路由不匹配清除session操作);

3: 修改Search组件(ref上添加两个方法 setValue, setIsVisible);

4: 修改PageHeader组件, 增加flag, 标记是来自breadcrumb的点击;

5: 修改table组件 处理pageIndex pageSize;

6: 页面中使用方式:

1: new Class创建实例

2: 通过实例获取参数赋值Tab, 简单搜索, 高级搜索等

3: 页面跳转设置参数

// Example
import QuerySession from '../component/querySession/_QuerySession';
const QuerySessionIns = new QuerySession();

const [searchForminItialValues, setSearchForminItialValues] = useState<any>();  // 高级搜索Form默认值

useEffect(() => {
  if(history._isFromBreadcrumb) { // 暂时只需要面包屑 做个判断 以后如果兼容到路由 去掉判断即可
    const queryObj = QuerySessionIns.getQuerySession();
    if(queryObj) {
      setCurrentId(queryObj?.status || tabInfo[0].id);  // 设置tab
      setQuery(queryObj || { status: '10', withProductLine: true }) // 设置查询条件
      searchCompRef.current?.setValue(queryObj.fuzzyValue)  // 设置搜索框值
      const {name, priority, project, serialNumbers, userIds} = queryObj; // 设置高级搜索框值
      if(name || priority || project || serialNumbers || userIds?.length) {
        const time = setInterval(() => {  // 必须等table渲染完成才能显示高级搜索
          const list = tableRef.current?.getDataSource();
          if(list?.length) {
            setTimeout(() => {
              searchCompRef.current?.setIsVisible(true);
              setSearchForminItialValues({name, priority, project, serialNumbers, userIds});
              searchCompRef.current?.resetScroll();
            }, 60)
            clearInterval(time);
          }
        }, 120)
      }
    }
    history._isFromBreadcrumb = false;
  }
}, [])

const goDetailFun = (record) => {
  // 这里需要注意, 假设有分页的, 获取table组件的query; 否则用当前的query
  const query = tableRef.current?.getQuery!();
  QuerySessionIns.setQuerySession(query); // 跳转路由设置查询条件
  history.push(`/assign/detail?id=${record.id}`, record);
}