表单页设计

events: {
  click: async (instance) => {
    const { schema, env, context } = instance;

    try {
      // 1️⃣ 开启按钮 loading
      schema.control.loading = true;

      // 2️⃣ 发起请求
      const response = await env.runtime.request({
        url: "https://api.example.com/v1/generate",
        method: "post",
        data: {
          topic: context.model.topic,
          audience: context.model.target_audience
        }
      });

      // 3️⃣ 处理返回数据
      const list = response?.data?.data || [];

      // 4️⃣ 更新给指定组件（回填数据）
      // 场景A：更新给 textarea 组件（拼接为文本）
      context.model.article_content = list
        .map(item => item.content)
        .join("\n\n");

      // 场景B：更新给 table 组件（渲染为表格数据）
      context.model.articleTable = list.map((item, index) => ({
        id: index,
        content: item.content
      }));

      env.runtime.ElMessage.success("生成成功");
    } catch (err) {
      console.error(err);
      env.runtime.ElMessage.error("请求失败");
    } finally {
      // 5️⃣ 关闭按钮 loading
      schema.control.loading = false;
    }
  }
}

events: {
  submit: (instance) => {
    const { selected, model, env, context } = instance;

    console.warn("📌 子表单完整数据（model）:", model);
    console.warn("📌 表格已选数据（selected）:", selected);

    // =========================================================
    // 方式一：通过 selected 回填（仅表格已选中的行）
    // =========================================================
    // selected.articleTable 是数组，直接遍历提取 content
    const aiList = selected.articleTable || [];
    const aiText = aiList
      .filter(item => item && item.content)
      .map(item => String(item.content))
      .join("\n\n");

    const oldText = context.model.article_content || "";
    if (oldText && oldText.trim() !== "") {
      context.model.article_content = oldText + "\n\n" + aiText;
    } else {
      context.model.article_content = aiText;
    }

    // =========================================================
    // 方式二：通过 model 回填（子表单所有字段）
    // =========================================================
    // model.articleTable 是 JSON 字符串，可直接赋值给主表字段
    context.model.articleTableJson = model.articleTable;

    // 获取子表单普通字段的值
    context.model.topic = model.article_topic;
    context.model.audience = model.target_audience;
    context.model.style = model.writing_style;
    context.model.count = model.paragraph_count;

    env.runtime.ElMessage.success("回填成功");
  },
  cancel: (instance) => {
    console.log("子表单已取消");
  }
}

events: {
  before: (instance) => {
    const { headers, data, type, env } = instance;

    // 注入 token
    const newHeaders = {
      ...headers,
      Authorization: "Bearer " + (env?.user?.token || "")
    };

    // 修改请求参数
    const newData = {
      ...data,
      status: 1  // 只加载启用状态的选项
    };

    return {
      url: instance.url,
      method: instance.method || "post",
      headers: newHeaders,
      data: newData
    };
  }
}

events: {
  after: (instance) => {
    const { type, success, response } = instance;

    // 将后端返回的数据映射为组件所需的格式
    return {
      code: 200,
      data: response?.data?.data?.list,  // 提取选项数组
      msg: response?.data?.msg
    };
  }
}

{
  "type": "input",
  "name": "username",
  "control": {
    "modelValue": "",
    "type": "text",
    "placeholder": "请输入用户名",
    "maxlength": 20,
    "minlength": 3,
    "showWordLimit": true,
    "clearable": true,
    "disabled": false,
    "readonly": false,
    "autocomplete": "off",
    "autofocus": false,
    "tabindex": "1",
    "validateEvent": true,
    "inputStyle": {},
    "size": "default"
  },
  "formItem": {
    "label": "用户名",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!/^[a-zA-Z]/.test(value)) {
            callback(new Error("必须以字母开头"));
          } else {
            callback();
          }
        },
        "trigger": "blur"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请输入用户名",
      "trigger": "blur"
    },
    {
      "min": 3,
      "max": 20,
      "message": "长度在 3 到 20 个字符",
      "trigger": "blur"
    }
  ],
  "config": {}
}

{
  "type": "textarea",
  "name": "description",
  "control": {
    "modelValue": "",
    "placeholder": "请输入内容",
    "maxlength": 500,
    "minlength": 5,
    "rows": 4,
    "showWordLimit": true,
    "clearable": true,
    "disabled": false,
    "readonly": false,
    "resize": "vertical",
    "autofocus": false,
    "validateEvent": true,
    "inputStyle": {},
    "size": "default"
  },
  "formItem": {
    "label": "描述",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!value || value.trim() === "") {
            callback(new Error("请输入描述"));
          } else {
            callback();
          }
        },
        "trigger": "blur"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请输入描述",
      "trigger": "blur"
    }
  ],
  "config": {}
}

{
  "type": "radio",
  "name": "gender",
  "control": {
    "modelValue": "male",
    "options": [
      { "label": "男", "value": "male" },
      { "label": "女", "value": "female" }
    ],
    "disabled": false,
    "size": "default",
    "border": false
  },
  "formItem": {
    "label": "性别",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!value) {
            callback(new Error("请选择性别"));
          } else {
            callback();
          }
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请选择性别",
      "trigger": "change"
    }
  ],
  "config": {}
}

{
  "type": "checkbox",
  "name": "hobbies",
  "control": {
    "modelValue": ["reading", "traveling"],
    "options": [
      { "label": "阅读", "value": "reading" },
      { "label": "旅行", "value": "traveling" },
      { "label": "运动", "value": "sports" }
    ],
    "disabled": false,
    "size": "default",
    "min": 1,
    "max": 3
  },
  "formItem": {
    "label": "兴趣爱好",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!value || value.length === 0) {
            callback(new Error("请选择至少一个爱好"));
          } else {
            callback();
          }
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请选择至少一个爱好",
      "trigger": "change"
    },
    {
      "type": "array",
      "min": 1,
      "message": "请选择至少一个爱好",
      "trigger": "change"
    }
  ],
  "config": {}
}

{
  "type": "select",
  "name": "country",
  "control": {
    "modelValue": "",
    "options": [
      { "label": "中国", "value": "cn" },
      { "label": "美国", "value": "us" },
      { "label": "英国", "value": "uk" }
    ],
    "multiple": false,
    "disabled": false,
    "clearable": true,
    "placeholder": "请选择国家",
    "filterable": true,
    "size": "default"
  },
  "formItem": {
    "label": "国家",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!value) {
            callback(new Error("请选择国家"));
          } else {
            callback();
          }
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请选择国家",
      "trigger": "change"
    }
  ],
  "config": {}
}

{
  "type": "datePicker",
  "name": "birthday",
  "control": {
    "modelValue": null,
    "type": "date",
    "format": "yyyy-MM-dd",
    "valueFormat": "yyyy-MM-dd",
    "placeholder": "选择日期",
    "disabled": false,
    "clearable": true,
    "editable": true,
    "range": false,
    "size": "default"
  },
  "formItem": {
    "label": "生日",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!value) {
            callback(new Error("请选择日期"));
          } else {
            callback();
          }
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请选择日期",
      "trigger": "change"
    }
  ],
  "config": {}
}

{
  "type": "timePicker",
  "name": "meetingTime",
  "control": {
    "modelValue": null,
    "isRange": false,
    "format": "HH:mm:ss",
    "valueFormat": "HH:mm:ss",
    "placeholder": "选择时间",
    "disabled": false,
    "clearable": true,
    "size": "default"
  },
  "formItem": {
    "label": "会议时间",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!value) {
            callback(new Error("请选择时间"));
          } else {
            callback();
          }
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请选择时间",
      "trigger": "change"
    }
  ],
  "config": {}
}

{
  "type": "colorPicker",
  "name": "themeColor",
  "control": {
    "modelValue": "#409EFF",
    "disabled": false,
    "showAlpha": false,
    "size": "default"
  },
  "formItem": {
    "label": "主题颜色",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!value) {
            callback(new Error("请选择颜色"));
          } else {
            callback();
          }
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请选择颜色",
      "trigger": "change"
    }
  ],
  "config": {}
}

{
  "type": "switch",
  "name": "isActive",
  "control": {
    "modelValue": true,
    "disabled": false,
    "activeText": "开",
    "inactiveText": "关",
    "activeColor": "#409EFF",
    "inactiveColor": "#C0CCDA"
  },
  "formItem": {
    "label": "是否激活",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          callback();
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [],
  "config": {}
}

{
  "type": "inputNumber",
  "name": "age",
  "control": {
    "modelValue": 18,
    "min": 0,
    "max": 120,
    "step": 1,
    "disabled": false,
    "size": "default"
  },
  "formItem": {
    "label": "年龄",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (value === null || value === undefined) {
            callback(new Error("请输入年龄"));
          } else if (value < 0 || value > 120) {
            callback(new Error("年龄范围为 0-120"));
          } else {
            callback();
          }
        },
        "trigger": "blur"
      }
    ]
  },
  "customRules": [
    {
      "type": "number",
      "min": 0,
      "max": 120,
      "message": "年龄范围为 0-120",
      "trigger": "blur"
    }
  ],
  "config": {}
}

{
  "type": "cascader",
  "name": "address",
  "control": {
    "modelValue": [],
    "options": [
      {
        "label": "浙江",
        "value": "zj",
        "children": [
          { "label": "杭州", "value": "hz" },
          { "label": "宁波", "value": "nb" }
        ]
      },
      {
        "label": "江苏",
        "value": "js",
        "children": [
          { "label": "南京", "value": "nj" },
          { "label": "苏州", "value": "sz" }
        ]
      }
    ],
    "disabled": false,
    "clearable": true,
    "placeholder": "请选择地址",
    "size": "default"
  },
  "formItem": {
    "label": "地址",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!value || value.length === 0) {
            callback(new Error("请选择地址"));
          } else {
            callback();
          }
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请选择地址",
      "trigger": "change"
    }
  ],
  "config": {}
}

{
  "type": "rate",
  "name": "score",
  "control": {
    "modelValue": 3,
    "max": 5,
    "disabled": false,
    "allowHalf": true,
    "showText": false,
    "showScore": false,
    "size": "default"
  },
  "formItem": {
    "label": "评分",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (value === null || value === undefined || value === 0) {
            callback(new Error("请评分"));
          } else {
            callback();
          }
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请评分",
      "trigger": "change"
    }
  ],
  "config": {}
}

{
  "type": "slider",
  "name": "volume",
  "control": {
    "modelValue": 50,
    "min": 0,
    "max": 100,
    "step": 1,
    "disabled": false,
    "range": false,
    "showTooltip": true,
    "size": "default"
  },
  "formItem": {
    "label": "音量",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (value === null || value === undefined) {
            callback(new Error("请选择音量"));
          } else {
            callback();
          }
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [],
  "config": {}
}

{
  "type": "treeSelect",
  "name": "category",
  "control": {
    "modelValue": [],
    "treeData": [
      {
        "label": "电子产品",
        "id": 1,
        "children": [
          { "label": "手机", "id": 2 },
          { "label": "电脑", "id": 3 }
        ]
      }
    ],
    "multiple": true,
    "disabled": false,
    "clearable": true,
    "placeholder": "请选择类别",
    "size": "default"
  },
  "formItem": {
    "label": "类别",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!value || (Array.isArray(value) && value.length === 0)) {
            callback(new Error("请选择类别"));
          } else {
            callback();
          }
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请选择类别",
      "trigger": "change"
    }
  ],
  "config": {}
}

{
  "type": "txt",
  "name": "descriptionText",
  "control": {
    "modelValue": "这是只读文本"
  },
  "formItem": {
    "label": "说明",
    "rules": []
  },
  "customRules": [],
  "config": {}
}

{
  "type": "title",
  "name": "pageTitle",
  "control": {
    "modelValue": "用户管理"
  },
  "formItem": {},
  "customRules": [],
  "config": {}
}

{
  "type": "tabs",
  "name": "mainTabs",
  "control": {
    "modelValue": "tab1",
    "tabs": [
      { "label": "标签1", "name": "tab1" },
      { "label": "标签2", "name": "tab2" }
    ]
  },
  "formItem": {},
  "customRules": [],
  "config": {}
}