跳到主要内容

多层二级分类存储及构建方案

一、准备工作​

数据模型结构​

  • 分类数据模型_级联选择：用来存储分类信息（支持一级分类、二级分类） alt text

  • 业务数据模型_学生：用来存储表单中用户选择的分类信息 以下图字段「兴趣 2」为例， 字段类型数组-对象，对象中添加 first 和 second 子元素 alt text alt text

二、前端构建​

  1. query 查询多条数据处理

    1.1. 新建 js 方法 treeSlectData 处理 query 返回数据结构

    1.2. 数组变量 select_list 存储上述 js 方法处理的 query 数据

    1.3. 级联组件绑定变量 select_list alt text


为了展示效果，js方法中的分类数据直接取 $w.query.data.records
/**
 *
 * 可通过 $page 获取或修改当前页面的 变量 状态 handler lifecycle 等信息
 * 可通过 app 获取或修改全局应用的 变量 状态 等信息
 * 具体可以console.info 在编辑器Console面板查看更多信息
 * 注意：该方法仅在所属的页面有效
 * 如果需要 async-await，请修改成 export default async function() {}
 * 帮助文档 https://cloud.tencent.com/document/product/1301/57912
 **/

/**
 * @param {Object} event - 事件对象
 * @param {string} event.type - 事件名
 * @param {any} event.detail - 事件携带自定义数据
 *
 * @param {Object} data
 * @param {any} data.target - 获取事件传参的数据
 **/
export default function ({ event, data }) {

    //获取query查询多条返回值，$w.query.data.records

    const select_data = [

        {
            owner: "1727993690338758658",
            createdAt: 1735629358052,
            flcj: "",
            createBy: "1727993690338758658",
            updateBy: "1727993690338758658",
            _openid: "1727993690338758658",
            _id: "b834edac67739a2e009613645dfa6164",
            flmc: "娱乐",
            updatedAt: 1735629358052,
        },

        {
            owner: "1727993690338758658",
            createdAt: 1735629396194,
            flcj: "b834edac67739a2e009613645dfa6164",
            createBy: "1727993690338758658",
            updateBy: "1727993690338758658",
            _openid: "1727993690338758658",
            _id: "ab52283f67739a540094fd4d6e2bf1f3",
            flmc: "轰趴",
            updatedAt: 1735629396194,
        },

        {
            owner: "1727993690338758658",
            createdAt: 1735629415179,
            flcj: "b834edac67739a2e009613645dfa6164",
            createBy: "1727993690338758658",
            updateBy: "1727993690338758658",
            _openid: "1727993690338758658",
            _id: "e33be08d67739a670095f7c801317948",
            flmc: "电玩",
            updatedAt: 1735629415179,
        },

        {
            owner: "1727993690338758658",
            createdAt: 1735629299016,
            flcj: "",
            createBy: "1727993690338758658",
            updateBy: "1727993690338758658",
            _openid: "1727993690338758658",
            _id: "b01b8517677399f3040e5aa27a368d9f",
            flmc: "体育",
            updatedAt: 1735629447882,
        },

        {
            owner: "1727993690338758658",
            createdAt: 1735629309635,
            createBy: "1727993690338758658",
            flcj: "b01b8517677399f3040e5aa27a368d9f",
            updateBy: "1727993690338758658",
            _openid: "1727993690338758658",
            _id: "ff47e010677399fd0094cf582aa7c440",
            flmc: "篮球",
            updatedAt: 1735629452408,
        },

        {
            owner: "1727993690338758658",
            createdAt: 1735629332198,
            flcj: "b01b8517677399f3040e5aa27a368d9f",
            createBy: "1727993690338758658",
            updateBy: "1727993690338758658",
            _openid: "1727993690338758658",
            _id: "4885635e67739a1400965f403f64c41a",
            flmc: "足球",
            updatedAt: 1735629332198,
        },
        {
            owner: "1727993690338758658",
            createdAt: 1735629350946,
            flcj: "b01b8517677399f3040e5aa27a368d9f",
            createBy: "1727993690338758658",
            updateBy: "1727993690338758658",
            _openid: "1727993690338758658",
            _id: "3a12ed1c67739a2600963a79184dcaf8",
            flmc: "游泳",
            updatedAt: 1735629350946,
        },
    ];

    function arrayToTree(data) {
        const map = {};
        const tree = [];

        // 将所有数据放入map中，方便查找
        data.forEach((item) => {
            map[item._id] = { ...item, label: item.flmc, value: item._id, children: [] }
        });

        // 构建树结构
        data.forEach((item) => {
            if (item.flcj) {
                if (map[item.flcj]) {
                    map[item.flcj].children.push(map[item._id]);
                }
            } else {
                tree.push(map[item._id]);
            }
        });

        return tree;
    }

    const treeData = arrayToTree(select_data);
   //赋值给变量
    $w.page.dataset.state.select_list = treeData

    console.log('treeData', treeData);
}
  1. 上述 js 方法触发及绑定级联组件

alt text

2.2. 绑定级联组件 alt text

2.3. 级联效果展示 alt text

  1. 表单容器改造 选择「业务数据模型-学生」生成表单结构，按下图指引操作 alt text

  2. 表单提交 alt text

信息

需要先改造表单入参（使存储结构包含 first 和 second） alt text

({data:({...$w.form1.submitParams.data,xq2:($w.form1.submitParams.data.xq2?.map(i=>({first:i.cascader1[0],second:i.cascader1[1]})))})})

  1. 前往数据模型参考入库数据 alt textalt text