Práctica de código bajo de U-way: explicación detallada del procesamiento/transformación de datos

 

La columna de tecnología de código bajo de U-way es una nueva columna basada en tecnología escrita por miembros del comité técnico de U-way. presenta principalmente los principios técnicos y la arquitectura relacionados con la lógica de código bajo, el propósito es proporcionar una plataforma para el intercambio técnico y el aprendizaje para la mayoría del personal de operación y mantenimiento.

---

Serie de prácticas de código bajo de U-way n.° 8

"Explicación detallada del procesamiento/transformación de datos"

▽

1. Expresión

Cuando Visual Builder procesa datos, se pueden usar expresiones o funciones de microaplicaciones en la mayoría de los casos para cumplir con la escena; el uso de expresiones es principalmente para escenarios relativamente simples. Si la escena es demasiado complicada, aún recomendamos usar funciones de microaplicaciones, porque no solo puede tener una sintaxis más avanzada para las operaciones en funciones, sino también escribir casos de prueba para sus funciones para mejorar la solidez de las microaplicaciones.

En los capítulos anteriores, hemos introducido la escritura de algunas expresiones simples y sus significados. Esta lección presenta usos más avanzados. Volviendo a nuestro diseño, agregaremos una columna de tiempo de creación a nuestra tabla, entonces, ¿cómo lo hacemos? ?

 1.1 Modificación del diseño de la tabla

属性面板-属性:
  columns:
    # 略...
    # 以下ctime为新增列
    - dataIndex: ctime
      key: ctime
      title: 创建时间
    - dataIndex: operator
      title: 操作
      key: operator
      useChildren: '[operator]'

1.2 DATOS modificación de datos

# 查询字段入参增加 ctime
Args:
  - TASK_FOR_VB_LESSON
  - fields:
      - name
      - state
      - assignee
      - reporter
      - description
      # 新增查询字段
      - ctime
    page: '${QUERY.page=1|number}'
    pageSize: '${QUERY.pageSize=20|number}'
    query: <% CTX.query %>

Una vez completada la modificación, veremos la actualización de datos en el lienzo de vista previa, pero este tiempo es demasiado largo y no es lo que queremos, entonces, ¿qué debemos hacer?

En este momento, podemos usar expresiones para dar formato a la hora y mostrar solo la fecha. Veamos cómo modificar el arreglo.

1.3 Las expresiones de tabla agregan la capacidad de analizar ctime

属性面板-属性:
  # 其他不变
  dataSource: |-
    <% 
      "track context", 
      {
        # 解构，
        ...CTX.taskList ?? {},
        # CTX.taskList.list 遍历，将其中的ctime进行处理
        list: CTX.taskList?.list?.map(item => ({
          ...item,
          ctime: item.ctime.split(" ").shift()
        }))
      }
    %>

Después del procesamiento, los datos se convierten en nuestro resultado esperado, como se muestra a continuación:

 2. Función de microaplicación

Como se mencionó anteriormente, las expresiones solo son aplicables a algunos escenarios simples en la mayoría de los casos. Si se trata de un escenario más complejo, recomendamos usar funciones de microaplicaciones. Se recomienda que los estudiantes que estén interesados ​​puedan aprender "funciones de microaplicaciones", por lo que ¿cómo los escribimos?, ¿qué pasa con una función?

2.1 Nuevas funciones

 Seleccione el menú de funciones en el menú de la izquierda y luego haga clic en el botón Agregar función. El nombre de la función es prueba y el tipo es mecanografiado. Haga clic en Aceptar para crear la función correctamente y luego escriba nuestro método de la siguiente manera:

 

function test(
  params: Params = {
    list: [],
    totol: 0,
    page: 1,
    pageSize: 20,
  }
): Params {
  const colorMap = {
    待研发: "blue",
    研发中: "yellow",
    研发完成: "green",
  };
  const arr = params.list.map((item) => ({
    ...item,
    stateColor: colorMap[item.state],
    ctime: item.ctime.split(" ").shift(),
  }));


  return {
    ...params,
    list: arr,
  };
}


interface Params {
  list: Array<any>;
  totol: number;
  page: number;
  pageSize: number;
}

Finalmente, haga clic en Guardar, luego haga clic en el botón Crear y presionar, y la función se puede usar en el arreglo.

2.2 Modificación del arreglo

属性面板-属性:
  # 只需要改这行
  dataSource: '<% "track context", FN.test(CTX.taskList) %>'

Busque el componente Presentational-bricks.brick-tag en la ranura [estado] debajo del componente de la tabla y modifique las propiedades de la siguiente manera:

属性面板-属性:
  # 只增加 color 属性
  color: <% DATA.rowData.stateColor %>
  showCard: false
  tagList:
    - <% DATA.rowData.state ?? "待研发" %>

Finalmente, mire el lienzo de vista previa del diseño, que está en línea con nuestras expectativas

 3. Conclusión

En este punto, el simple procesamiento y transformación de datos ha terminado. Este capítulo es muy importante para el diseño de microaplicaciones ~