react中文本内容转换成json参数传递给后端

48 阅读1分钟

1、需求描述

目前公司前端使用的是react和ts作为前端的一个主要技术,现有一个坐标转换的需求,需要批量将坐标转换成想要的坐标,如下图:

image.png

2、代码实现

//重点方法
const onFinish = async (values: any) => {
   //将文本内容转成数组
  const coordinatePairs = form.getFieldValue('gpsLocations').split('\n'); // 假设坐标数据使用换行符分隔
  const formattedCoordinates = coordinatePairs.map(pair => {
    const [lng, lat] = pair.split(',');
    //实现
    return { "lng": parseFloat(lng), "lat": parseFloat(lat) };
  });

  const parms = {
    type: form.getFieldValue('type'),
    gpsLocations:JSON.parse(JSON.stringify(formattedCoordinates))
  };
  const newVar = await convertLocation(parms);
  //转换前端展示格式
  const formattedData = newVar.map(item => `${item.lng}  ,  ${item.lat}`).join('\n');
  form.setFieldValue("conversionResults",formattedData)
};


/**
 * 转换坐标
 * @param params
 */
export async function convertLocation(params: any) {
  const { data } =  await request(`/api/front/convertLocation`,  { data: params, method: 'POST' });
  return data;
}


return (

  <PageContainer title="坐标转换">
    <Card>
      <ProForm
        form={form}
        layout="horizontal"
        {...formMainLayout}
        onFinish={onFinish}
        submitter={{
          render: renderSubmit,
        }}
      >

        <ProFormRadio.Group
          label="原始坐标系"
          name="type"
          rules={[
            {
              required: true,
              message: `请选择原始坐标系`,
            },
          ]}
          valueEnum={coordinateEnum}
          fieldProps={{
            onChange: (e) => setDirection(e.target.value),
          }}
        />

        <ProFormTextArea
          label="原始坐标"
          name="gpsLocations"
          placeholder="原始坐标"
          rules={[{required: true, message: '原始坐标'}]}
          extra={<div dangerouslySetInnerHTML={{ __html: extraContent }} />}
        />

        <ProFormTextArea
          label="转换结果"
          name="conversionResults"
          extra={<span>转换结果,',' 前表示经度,后表示纬度</span>}
        />

      </ProForm>
    </Card>
  </PageContainer>
);