在使用React+ant中的一些问题

在使用React+ant中的一些问题

1.合并表格

(73条消息) Ant Design的Table合并单元格处理rowSpan_Candice_C的博客-CSDN博客_ant table合并单元格

2.往QueryFilter的输入框插值

Form表单的运用

import {Form } from 'antd';
const [form] = Form.useForm();
const setValue = ()=>{
    form.setFieldsValue({
      test: '内容'
    })
}
<QueryFilter
  form={form}
>
<ProFormText
    name="test"
    rules={[
            {
                required: true,
                message: '***必填项',
            },
        ]}

    />
</QueryFilter>

3.ProTabled 搜索表单搜索框插值

import {Form } from 'antd';
const [form] = Form.useForm();
const columns = [
    {
        title:'测试内容',
        dataIndex:'test'
    }
]
const setValue = ()=>{
    form.setFieldsValue({
      test: '内容'
    })
}
<ProTable
  search={{
     form:form
  }}
>
</ProTable>

4.ProTable搜索表单（条件添加必填的查询表单）

const columns: ProColumns<GithubIssueItem>[] = [
  {
    title: '标题',
    dataIndex: 'title',
    copyable: true,
    ellipsis: true,
    tip: '标题过长会自动收缩',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '此项为必填项',
        },
      ],
    },
    width: '30%',
  }
]

<ProTable
	form={{
      ignoreRules: false,
     }}
/>

5.ProTbale搜索表单按钮、工具栏修改、勾选数量提示

<ProTable
    rowKey={'ORG_NO'}
    columns={columnsTmp}
    request={allow ? getListData : async () => {
        return {
            data: [],
            total: 0,
            success: true
        }
    }}
    dataSource={dataSource}
    pagination={{
        pageSize: 10,
        total: total,
    }}
    actionRef={actionRef}
    tableAlertRender={false}//勾选数量提示
    rowSelection={{
      selectedRowKeys,
      alwaysShowAlert: false,
      onChange: (selectedRowKeys, selectedRows) => {
        setSelectedRowKeys([...selectedRowKeys])
        setSelectedRows([...selectedRows])
      },
    }}
	//-------------搜索表单按钮修改-----------
    search={searchFlag?{
          defaultCollapsed: false,
          collapseRender: false,
          optionRender: (props) => {
            return [
              <Button type="primary" key="submit" onClick={() => {props.form?.submit?.();
                                                                  setSelectedRowKeys([]);
                setSelectedRows([])}} icon={<SearchOutlined />}>
                查询
              </Button >,
              <Button key="rest" onClick={() => props.form?.resetFields()} icon={<RedoOutlined />}>重置					</Button >,
            ];
          },
          form:form
        }:false}
    //--------------工具栏修改-----------------
    //右上角
    className={style.configTable}
    toolbar={{
        actions: [
            <Tooltip placement="top" title={'隐藏/显示搜索'} className={'iconSearch'}>
                <SearchOutlined style={{ fontSize: 18 }}
                    onClick={() => {
                        setSearchFlag(!searchFlag)
                    }}
                    />
            </Tooltip>,
        ],
    }}
    //左上角
    headerTitle={
        <div className={'buttonGroup'}>
            <Button style={{ marginRight: 10 }} icon={<DownloadOutlined />} type="primary" 
                onClick={() => { exportExcel() }}>
                导出
            </Button>
        </div>
    }
    bordered
    scroll={{ x: 1500 }}//, y: 300 //可滚动
>

6.动态校验输入内容

  //校验名字是否重复
  const ruleCode = [{
    required: true,
    message: '考核内容名称为必填项',
  },
  {
	validator: (rule, value, callback) => {
  	if (type == 'create') {
      checkNo(rule, value, callback)
     } else {
      	return
      }
    }}
  ]
  const checkNo = async (rule, value, callback) => {
    console.log(123);

    let jsons = {
      trgTypeName: trgTypeName,
      nickName: trgTypeName
    }
    let result = await checkNameA(jsons)
    if (result.code == '200') {
      callback()
    } else {
      callback(new Error(result.msg))
    }

  }
<ModalForm>
	 <ProFormText
            name='trgTypeName'
            fieldProps={{
              value: trgTypeName,
              onChange: (e) => {
                setTrgTypeName(e.target.value)
              }
            }}
            disabled={type == 'create' ? false : true}
            rules={type === 'create' ? ruleCode : []}
          >
          </ProFormText>
</ModalForm>

7.columns的一些处理

7.1时间区间的转化

 const columns = [
     {
      title: '开始时间',
      hideInTable: true,
      dataIndex: 'startDateRange',
      valueType: 'dateRange',
      search: {
        transform: (value: any) => ({ startTimeGE: value[0], startTimeLE: value[1] }),
      },
    },
 ]

7.2表头的合并（表头分组）

const columns = [
     {
      title: '对公存款',
      dataIndex: 'startDateRange',
      children: [
          {
            title: '任务值',
            dataIndex: '_ptValue',
          },
          {
            title: '完成值',
            dataIndex: '_fsValue',
          },
          {
            title: '完成比例(%)',
            dataIndex: '_rate',
          },
        ],
    },
 ]

7.3异步获取显示内容

 const getBusiness = async () => {
    let arr:any[] = []
    let res = await sysDictDataType()
    if(res.code == '200'){
      let arr = res.data.map((item:any)=>{
        let obj = {
          value:'',
          label:''
        }
        obj.label = item.dictLabel
        obj.value = item.dictValue
      })
    }
    return arr
  }
const columns = [
    {
      title: '操作类型',
      dataIndex: 'businessType',
      valueType: 'select',
      request: getBusiness,
      render: (_, record) => (
        <Space key={record.operId}>
          {
            businessList.map(item => {
              if (item.value == record.businessType) {
                return (
                  <Tag key={item.value} color={item.color} >
                    {item.label}
                  </Tag>
                )
              }
            })
          }
        </Space>
      ),
    },
]

8.可编辑表格

8.1自定义添加按钮

<Col span={20}>
          <EditableProTable
            columns={columns}
            rowKey="id"
            value={dataSource}
            onChange={setDataSource}
            recordCreatorProps={false}
            editable={{
              type: 'multiple',
              editableKeys,
              actionRender: (row, config, defaultDoms) => {
                return [defaultDoms.save, defaultDoms.delete];
              },
              onChange: setEditableRowKeys,
            }}
            actionRef={actionRef}
          >
          </EditableProTable>
          <div className='buttonDroup'>
            <Button
              onClick={async () => {//添加一行事件
                  actionRef.current?.addEditRecord?.({
                    id: (Math.random() * 1000000).toFixed(0),
                    trgTwoName: '',
                    trgTwoRate: '',
                    trgTwoCode: ''
                  });
              }
              }
              icon={<PlusOutlined />}
            >
              添加
            </Button>
          </div>
</Col>

8.2实时保存

      <div className='tableStyle'>
        <EditableProTable<DataSourceType>
          columns={columnsTmp}
          rowKey="EMP_NO"
          request={allow ? getListData : async () => {
            return {
              data: [],
              total: 0,
              success: true
            }
          }}
          value={dataSource}
          onChange={setDataSource}
          recordCreatorProps={false}
          headerTitle={
            <div className={'buttonGroup'}>
              <Button
                style={{ marginRight: 10 }}
                type="primary"
                key="save"
                onClick={() => {
                  // dataSource 就是当前数据，可以调用 api 将其保存
                  onSave(dataSource)
                }}
              >
                保存数据
              </Button>
            </div>
          }
          editable={{
            type: 'multiple',
            editableKeys,
            actionRender: (row, config, defaultDoms) => {
              return [defaultDoms.delete];
            },
            onValuesChange: (record, recordList) => {
              setDataSource(recordList);
            },
            onChange: setEditableRowKeys,
            form:form2
          }}
          search={false}
          bordered
          tableAlertRender={false}
          pagination={{
            pageSize: 10,
            total: total,
          }}
          actionRef={actionRef}
        />
      </div>

9.对于流形式的文件处理（excel上传下载）

9.1excel下载

https://www.jb51.net/article/173033.htm

import { request } from "umi";

/** 模版下载 GET  */
export async function empExport(
  params: {

  },
  options?: { [key: string]: any },
) {
  return request('/config/listdownload1', {
    method: 'POST',

    data:params,
    ...(options || {}),
   responseType:'blob',//乱码数据流
  });
}

  //下载模版
  const downLoad = async (values: any) => {
    let param = {

    }
    const result = await empExport(param)
    const link = document.createElement('a')
    let blob = new Blob([result], {type: 'application/vnd.ms-excel'})
    console.log(result);
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob)
    // link.download = res.headers['content-disposition'] //下载后文件名
    link.download = '员工手工定量考评指标' //下载的文件名
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

9.2excel上传

export async function empImport(data: { [key: string]: any }, options?: { [key: string]: any }) {
  return request('/config/importData',{
    data,
    method: 'POST',
    ...(options || {}),
  })
}

  const upLoadFun = async()=>{
    if (!file) {
      message.warn("请上传正确的文件，在进行下一步操作！")
      return false
    }
    let param = new FormData(); //创建form对象
    param.append('file', file);//通过append向form对象添加数据,file通过upload标签选中的excel文件
    param.append('targetDateImport', targetDate)//添加日期

    // param.append('date',)//添加日期
    let res = await empImport(param)
   }

10.树形控件

10.1异步加载

 //初始化树
  const getListTreeData = async (params: {}) => {
    let result = await listTreeData(params)
    const initTreeData = result.map(item => {
      let obj = {
        key: '',
        title: '',
        isLeaf: false,
        icon: <FolderOpenTwoTone twoToneColor="#FFCB3D" />,
        orgLevel: 0
      }
      obj.key = item.orgNo
      obj.title = item.orgName
      obj.isLeaf = !item.isParent
      obj.orgLevel = item.orgLevel
      return obj
    })
    setTreeData(initTreeData)
    setCurrentNode(initTreeData[0])
    setSelectedKeys([result[0].orgNo])
  }
  //异步加载
  const [currentNode, setCurrentNode] = useState()
  const onLoadData = async (node: any) => {
    let key = node.key
    let param = {
      porgNo: key
    }
    let result = await listTreeData(param)
    let childrentmp = result.map(item => {
      let obj = {
        key: '',
        title: '',
        isLeaf: false,
        icon: <FolderOpenTwoTone twoToneColor="#FFCB3D" />,
        orgLevel: 0
      }
      obj.key = item.orgNo
      obj.title = item.orgName
      obj.isLeaf = item.isParent != 'true'
      obj.icon = item.isParent != 'true' ? <FileTwoTone /> : <FolderOpenTwoTone twoToneColor="#FFCB3D" />
      obj.orgLevel = item.orgLevel
      return obj
    })
    let tmp = updateTreeData(treeData, key, childrentmp)
    setTreeData(tmp)
  }
  //更新树
  const updateTreeData = (list: any, key: any, children: any) => {
    return list.map((node: { key: any; children: any; }) => {
      if (node.key === key) {
        return { ...node, children };
      }
      if (node.children) {
        return { ...node, children: updateTreeData(node.children, key, children) };
      }
      return node;
    });
  }

<Tree
    treeData={treeData}//初始化数据
    loadData={onLoadData}//异步加载
    // loadedKeys//已经加载的节点
    onSelect={onSelect}
    showIcon//显示图标
    defaultSelectedKeys={['vmhome']}//默认选择节点
    selectedKeys={selectedKeys}
/>