笔记

52 阅读1分钟

1.antdesign select的下拉数据二次处理

比如返回数据格式为

"customer": [
            {
                "key": 401111,
                "val": "赵艳"
            },
            {
                "key": 401211,
                "val": "尹艳"
            },
            {
                "key": 401311,
                "val": "阎桂英"
            },
            {
                "key": 401411,
                "val": "江杰"
            }
        ],

与antdesign数据不符。需要二处理。

//设置下拉框DOM
  const getOptions = (optionItem: any[]) => {
    if (optionItem && optionItem.length != 0) {
      return optionItem.map((item: any, index: number) => (
        <Option value={item.key} key={index} label={item.val}>
          {item.val}
        </Option>
      ))
    } else {
      return null
    }
  }

form表单中的使用demo

  <Form.Item
          label="客户名称"
          name="customer_id"
          style={{ marginBottom: '10px' }}
        >
          <Select
            placeholder="请选择"
            maxTagCount={0}
            allowClear
            style={{ width: 120 }}
            optionFilterProp="label"
            showSearch
            filterOption={filterOption}
          >
            {getOptions(customer)}
          </Select>
        </Form.Item>

2.导出 react 接口模式 demo演示

// 导出方法
        const {run:runEx} = useRequest(GET_REC_EXPORT,{
            manual: true,
            onSuccess:(data: {error_code: number, file_large:any}) => {
                if(data.file_large == 0) {
                    window.location.href = `${href}&force_export=1`
                }else if(data.file_large == 2){
                    Modal.warning({
                        title: '警告信息',
                        content: '导出数量已超过3万条,请筛选范围后再导出!',
                    });
                }else{
                    Modal.warning({
                        title: '警告信息',
                        content: '当前文件过大,系统正在导出,未避免您长时间等待,请稍后去“文件导出-导出任务管理”页进行数据下载!',
                    });
                }
            }
        })
        // 导出操作
        const handleDown = () => {
            runEx(params_export)
        }
        
           <Button style={{ margin: "0 8px" }} onClick={handleDown}>
                  导出按钮
          </Button>