🐞 fix: 列表组件首字母小写

src/pages/transaction/components/tableLayout/index.tsx

+import React, { useRef, useState, useImperativeHandle } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Card } from 'antd';
+import { StandardTable } from 'god';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+import { ColumnType, TableRowSelection } from 'antd/lib/table/interface';
+import NiceForm from '@/components/NiceForm';
+import { createFormActions, FormEffectHooks } from '@formily/antd';
+import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
+import { searchSelectGetSelectCategoryOptionEffect } from '@/pages/transaction/effect/index';
+import { useLinkageUtils } from '@/utils/formEffectUtils';
+const { onFormMount$ } = FormEffectHooks
+
+interface Iprops {
+  /** 列表接口 */
+  // fetch?: () => Promise<unknown>,
+  fetch?: any,
+  /** 多选返回 */
+  fetchRowkeys?(e: any),
+  /** 操作按钮 */
+  controllerBtns?: React.ReactNode,
+  /** 搜索的schema */
+  schema?: any,
+  /** 列表表头 */
+  columns: ColumnType<any>[],
+  /** schema搜索第一个的name */
+  effects?: string,
+  /** 是否多选 */
+  selectedRow?: boolean,
+  /** 刷新 */
+  reload?: any,
+  /** 外部状态接口 */
+  externalStatusFetch?: Promise<unknown>,
+  /** 内部状态接口 */
+  interiorStatusFetch?: Promise<unknown>,
+  /** 状态选择接口 */
+  useStateEffects?: () => void,
+  /** rowKey */
+  rowKey?: string,
+  /** 禁用 */
+  getCheckboxProps?: (record: any) => void,
+}
+const formActions = createFormActions();
+const Table: React.FC<Iprops> = (props: any) => {
+  const {
+    schema,
+    columns,
+    effects,
+    fetch,
+    controllerBtns,
+    selectedRow,
+    reload,
+    fetchRowkeys,
+    externalStatusFetch,
+    interiorStatusFetch,
+    useStateEffects,
+    rowKey,
+    getCheckboxProps
+  } = props;
+  const tableRef = useRef<any>({});
+
+  /** 列表数据 */
+  const fetchData = (params?: any) => {
+    return new Promise((resolve, reject) => {
+      if (!Array.isArray(fetch)) {
+        fetch({ ...params }).then(res => {
+          resolve(res.data)
+        }).catch(error => {
+          console.warn(error)
+        })
+        return
+      }
+      resolve({
+        code: 1000,
+        data: fetch
+      })
+    })
+  }
+
+  /**多选 */
+  const [selectedRowKeys, setSelectedRowKeys] = useState<Array<number>>([]);
+  const rowSelection: TableRowSelection<any> = {
+    selectedRowKeys: selectedRowKeys,
+    onChange: (rowKeys: any) => {
+      fetchRowkeys(rowKeys)
+      setSelectedRowKeys(rowKeys);
+    },
+    getCheckboxProps: (record) => getCheckboxProps && getCheckboxProps(record)
+  }
+
+  useImperativeHandle(reload, () => ({
+    reload: () => {
+      tableRef.current.reload();
+    }
+  }));
+
+  // 搜索
+  const search = (values: any) => {
+    tableRef.current.reload(values)
+  }
+
+  const useBusinessEffects = () => {
+    const linkage = useLinkageUtils();
+    onFormMount$().subscribe(() => {
+      externalStatusFetch && externalStatusFetch.then(res => {
+        console.log(res, 10086)
+        const _enum = res.data.map((item) => { return { label: item.name, value: item.state } })
+        linkage.enum('externalState', _enum)
+        linkage.enum('externalStatusList', _enum)
+        linkage.enum('status', _enum);
+      }).catch(error => {
+        console.warn(error)
+      })
+      interiorStatusFetch && interiorStatusFetch.then(res => {
+        const _enum = res.data.map((item) => { return { label: item.name, value: item.state } })
+        linkage.enum('interiorState', _enum)
+        linkage.enum('innerStatusList', _enum)
+      }).catch(error => {
+        console.warn(error)
+      })
+    })
+
+  }
+
+  return (
+    <PageHeaderWrapper>
+      <Card>
+        <StandardTable
+          currentRef={tableRef}
+          columns={columns}
+          tableProps={{ rowKey: rowKey ? rowKey : 'id' }}
+          rowSelection={selectedRow && rowSelection}
+          fetchTableData={(params: any) => fetchData(params)}
+          controlRender={
+            <NiceForm
+              actions={formActions}
+              components={{
+                controllerBtns: () => controllerBtns,
+              }}
+              onSubmit={values => search(values)}
+              effects={($, actions) => {
+                useStateFilterSearchLinkageEffect($, actions, effects, FORM_FILTER_PATH)
+                FormEffectHooks.onFieldChange$('category').subscribe(state => {
+                  searchSelectGetSelectCategoryOptionEffect(actions, 'category')
+                })
+                useBusinessEffects();
+                useStateEffects && useStateEffects();
+              }}
+              schema={schema}
+            >
+            </NiceForm>
+          }
+        />
+      </Card>
+    </PageHeaderWrapper>
+  )
+}
+
+export default Table;

src/pages/transaction/components/tableModal/index.tsx

+import { ISchema } from '@formily/antd';
+import React, { useEffect, useRef, useState } from 'react';
+import { Modal, Row, Col, Drawer, Button } from 'antd';
+import { createFormActions } from '@formily/antd';
+import { StandardTable } from 'god';
+import { ColumnsType } from 'antd/es/table';
+import NiceForm from '@/components/NiceForm';
+import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
+
+const formActions = createFormActions();
+
+interface Iprops {
+  modalType?: "Modal" | "Drawer"
+  /**
+   * 是否显示
+   */
+  visible: boolean,
+  /**
+   * Modal 标题
+   */
+  title: string,
+  /**
+   * 搜索schema
+   */
+  schema: ISchema,
+  /**
+   * table Ccolumn
+   */
+  columns: ColumnsType,
+  footer?: React.ReactNode,
+  tableProps?: {
+    rowKey: string | ((record) => any)
+
+  },
+  mode: 'checkbox' | 'radio',
+  customizeRadio?: boolean,
+  /**
+   * rowSelection
+   */
+  value?: { [key: string]: any }[],
+  /**
+   * onChange
+   */
+  expressionScope?: { [key: string]: any }
+  /**
+   * format话参数
+   */
+  format?: ((value) => any) | null,
+  effects?: ($, actions) => void,
+  fetchData: (params: any) => any,
+  onClose: () => void,
+  onOk: (selectRow: number[] | string[], selectedRows: { [key: string]: any }[]) => void,
+  /** customKey */
+  customKey?: string
+}
+
+const TableModal: React.FC<Iprops> = (props: Iprops) => {
+  const { title, visible, schema, columns, effects, tableProps, mode, expressionScope, fetchData, onClose, onOk, value, format, customizeRadio, modalType, footer, customKey } = props;
+  const ref = useRef<any>({});
+  const [rowSelection, RowCtl] = useRowSelectionTable({ type: customizeRadio && mode === 'radio' ? 'checkbox' : mode, customKey: customKey });
+  const isFirstLoad = useRef<boolean>(true);
+
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    RowCtl.setSelectRow(value)
+    RowCtl.setSelectedRowKeys(value.map(v => v[customKey]))
+  }, [visible])
+
+  const handleEffects = ($: any, actions: any) => {
+    effects?.($, actions);
+  }
+
+  const handleOnClose = () => {
+    onClose?.()
+  }
+
+  const handleOk = () => {
+    onOk?.(RowCtl.selectedRowKeys, RowCtl.selectRow)
+  }
+
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    if (!isFirstLoad.current) {
+      ref.current?.reload?.();
+    }
+    isFirstLoad.current = false;
+  }, [visible])
+
+  const handleSearch = (params: any) => {
+    const res = (format && format(params)) || params;
+    ref.current.reload(res)
+  }
+
+  const Component = modalType === 'Modal' ? Modal : Drawer;
+
+  const renderFooter = () => {
+    return (
+      <div style={{ textAlign: 'right' }}>
+        <Button onClick={handleOnClose} style={{ marginRight: 8 }}>
+          取消
+        </Button>
+        <Button onClick={handleOk} type="primary">
+          提交
+        </Button>
+      </div>
+    )
+  }
+
+  const otherProps = modalType === 'Drawer' ? { footer: renderFooter() } : { onOk: handleOk }
+
+
+  return (
+    <Component
+      title={title}
+      visible={visible}
+      onClose={handleOnClose}
+      onCancel={handleOnClose}
+      // onOk={handleOk}
+      width={900}
+      {...otherProps}
+    >
+      <StandardTable
+        keepAlive={false}
+        columns={columns}
+        tableProps={{
+          ...tableProps,
+          pagination: false
+        }}
+        tableType="small"
+        fetchTableData={fetchData}
+        currentRef={ref}
+        rowSelection={{
+          ...rowSelection,
+          hideSelectAll: customizeRadio,
+        }}
+        formRender={(child, ps) => <Row justify='space-between' style={{ marginBottom: 16 }}>
+          <Col span={18} style={{ zIndex: 99 }}>{child}</Col>
+          <Col style={{ marginTop: 4 }}>{ps}</Col>
+        </Row >}
+        controlRender={
+          <NiceForm
+            schema={schema}
+            actions={formActions}
+            onSubmit={handleSearch}
+            expressionScope={expressionScope}
+            effects={($, actions) => handleEffects($, actions)}
+          />
+        }
+      >
+
+      </StandardTable>
+    </Component>
+  )
+}
+
+TableModal.defaultProps = {
+  // rowSelection: null,
+  mode: 'radio',
+  tableProps: {
+    rowKey: 'memberId'
+  },
+  value: [],
+  expressionScope: {},
+  format: null,
+  customizeRadio: false,
+  modalType: "Modal",
+  footer: null
+}
+
+export default TableModal;

src/pages/transaction/components/uploadFiles/index.less

+.uploadList {
+  // width: 575px;
+  .uploadListItem {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px 8px;
+    margin-bottom: 16px;
+    background-color: #ecf7ff;
+  }
+}

src/pages/transaction/components/uploadFiles/index.tsx

+import React, { useState } from 'react';
+import { Upload, Button, message, Typography } from 'antd';
+import data from '@/pages/transaction/common/uploadProps';
+import { DeleteOutlined, FilePdfOutlined, UploadOutlined } from '@ant-design/icons';
+import style from './index.less';
+import { isEmpty } from 'lodash';
+
+type fileType = {
+  /** 名字 */
+  name: string,
+  /** 链接 */
+  url: string
+}
+
+interface UploadFilesProps {
+  visible?: boolean,
+  /** label */
+  label?: React.ReactNode | string,
+  /** name */
+  name?: string,
+  /** 宽度 */
+  width?: string,
+  /** 对齐方式 */
+  labelAlign?: "left" | "right",
+  /** 限制文件类型 */
+  accept?: string,
+  /** 限制上传大小 */
+  size?: number,
+  /** 回显数据 */
+  fileList?: fileType[],
+  /** 返回数据 */
+  onChange?: (e?: any[]) => void,
+  /** 删除 */
+  onRemove?: (e?: number) => void,
+}
+
+
+const UploadFiles: React.FC<UploadFilesProps> = (props: any) => {
+  const { visible = true, width, accept, size, fileList, onChange, onRemove } = props;
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const beforeUpload = (file: any) => {
+    const isSize = (file.size / 1024 / 1024) < size;
+    let index = file['name'].lastIndexOf(".");
+    //获取后缀
+    let ext = file['name'].substr(index + 1);
+    const accepts = accept.split(",").some((item) => item === `.${ext}`);
+    if (!accepts) {
+      message.error(`文件类型必须为${accept}`);
+    }
+    if (!isSize) {
+      message.error(`上传文件大小不超过 ${size}M!`);
+    }
+    return (accepts && isSize)
+  }
+
+  const handleFilesChange = ({ file }) => {
+    setLoading(true);
+    if (file.status !== "done") {
+      return
+    }
+    const files: fileType[] = fileList;
+    files.push({
+      name: file.name,
+      url: file.response.data,
+    })
+    onChange([...files]);
+    setLoading(false);
+  }
+
+  return (
+    <>
+      <div className={style.uploadList} style={{ width: width ? width : '100%'}}>
+        {!isEmpty(fileList) && fileList.map((item: fileType, index: number) => (
+          <div className={style.uploadListItem} key={`file${index}_1`}>
+            <div className={style.uploadInfo}>
+              <Typography.Link
+                style={{ display: 'block' }}
+                href={`/api/contract/contractTemplate/downloadContract?contractName=${item.name}&contractUrl=${item.url}`}
+                target="_blank"
+              >
+                <FilePdfOutlined style={{ marginRight: '5px' }} />
+                {item.name}
+              </Typography.Link>
+            </div>
+            <div className={style.uploadOperate} onClick={() => onRemove(index)}>
+              <DeleteOutlined />
+            </div>
+          </div>
+        ))}
+      </div>
+      {visible && (
+        <Upload
+          {...data}
+          showUploadList={false}
+          accept={accept}
+          beforeUpload={beforeUpload}
+          onChange={handleFilesChange}
+        >
+          <Button loading={loading} icon={<UploadOutlined />}>上传文件</Button>
+          <div style={{ marginTop: '8px' }}>一次上传一个文件，每个附件大小不能超过 {size}M</div>
+        </Upload>
+      )}
+    </>
+  )
+}
+
+export default UploadFiles;