列表页设计

opt = {
  columns: [...],       // 列配置
  tableProps: {...},    // 表格属性
  config: {...},        // 列表核心配置
  controlBtn: [...],    // 列表顶部按钮
  operateBtn: [...],    // 行操作按钮
  treeData: {...},      // 左侧树配置
  events: {...},        // 请求生命周期事件
  notice: {...}         // 顶部提示信息
}

{
  code: number,   // 200 成功，400 业务失败，401 未授权
  data: any,      // 业务数据（列表页通常为数组）
  msg: string     // 提示信息
}

opt = {
  columns: [
    {
      label: "多选",
      fixed: "left",
      type: "selection"
    },
    {
      prop: "label",
      label: "标题",
      help: "",
      width: "150px",
      headerAlign: "center",
      align: "center",
      config: {
        type: "copy"
      }
    },
    {
      prop: "category_id",
      label: "分类",
      help: "",
      config: {
        dictKey: "category_id",
        type: "dictKey"
      },
      width: "120px",
      sortable: true,
      headerAlign: "center",
      align: "center"
    },
    {
      prop: "task_type_id",
      label: "任务类型",
      help: "我是帮助信息",
      config: {
        dictKey: "task_type_id",
        type: "dictKey"
      },
      width: "135",
      sortable: true,
      align: "center",
      headerAlign: "center"
    },
    {
      prop: "user_id",
      label: "用户",
      help: "",
      config: {
        dictKey: "user_id",
        type: "dictKey"
      },
      width: "120",
      sortable: true,
      align: "center",
      headerAlign: "center"
    },
    {
      prop: "device_id",
      label: "设备",
      help: "",
      config: {
        dictKey: "device_id",
        type: "dictKey"
      },
      width: "120",
      align: "center",
      headerAlign: "center"
    },
    {
      prop: "status",
      label: "状态",
      help: "",
      minWidth: "80",
      config: {
        type: "tagList",
        control: {
          style: {
            color: "blue"
          }
        },
        tagList: {
          0: "danger",
          1: "success"
        }
      },
      align: "center",
      headerAlign: "center"
    },
    {
      prop: "uid",
      label: "UID",
      help: "",
      minWidth: "180",
      align: "center",
      headerAlign: "center",
      sortable: true
    },
    {
      prop: "created_at",
      label: "创建日期",
      help: "",
      width: "180",
      align: "center",
      headerAlign: "center",
      config: {
        type: "formatter",
        formatter: "{y}-{m}-{d} {h}:{i}:{s}"
      }
    },
    {
      label: "操作",
      prop: "__control",
      width: "400px",
      fixed: "right",
      align: "center",
      headerAlign: "center"
    }
  ],
  tableProps: {
    border: true
  },
  config: {
    operateDropdown: "4",
    openType: "dialog",
    pageSize: 10,
    getUrl: "http://47.94.105.29:66/api/DataListCaseList",
    deleteUrl: "http://47.94.105.29:66/api/deleteDataListCase",
    editUrl: "http://47.94.105.29:66/api/editDataListCase",
    sortField: "id desc",
    expand: true,
    searchJump: false,
    columnsSetting: true,
    width: "80%"
  },
  controlBtn: [
    {
      label: "新增",
      key: "add",
      type: "primary",
      size: "small",
      icon: "CirclePlus",
      plain: false,
      circle: false,
      link: false
    },
    {
      label: "批量新增",
      key: "add1",
      type: "primary",
      size: "small",
      icon: "Edit",
      plain: true,
      circle: false,
      link: false,
      config: {
        source: 485,
        openType: "drawer",
        width: "50%"
      }
    },
    {
      label: "导入Excel",
      key: "import",
      type: "primary",
      size: "small",
      icon: "Upload",
      plain: true,
      circle: false,
      link: false,
      config: {
        type: "excel",
        fileName: "云控数据表",
        sheetName: "Sheet1",
        template: [
          {
            label: "我是标题1",
            uid: "我是UID",
            link: "我是链接",
            name: "我是多余的"
          }
        ],
        addUrl: "http://47.94.105.29:66/api/addBatchDataListCase"
      }
    },
    {
      label: "导入文本",
      key: "import",
      type: "primary",
      size: "small",
      icon: "Upload",
      plain: true,
      circle: false,
      link: false,
      config: {
        type: "txt",
        fileName: "云控文本",
        template: ["我是标题1 | 我是UID | 我是链接 | 我是多余的"],
        addUrl: "http://47.94.105.29:66/api/addBatchDataListCase"
      }
    },
    {
      label: "导出Excel",
      key: "export",
      type: "primary",
      size: "small",
      icon: "Download",
      plain: true,
      circle: false,
      link: false,
      config: {
        type: "excel",
        fileName: "云控数据表",
        date: false,
        sheetName: "Sheet1"
      }
    },
    {
      label: "导出文本",
      key: "export",
      type: "primary",
      size: "small",
      icon: "Download",
      plain: true,
      circle: false,
      link: false,
      config: {
        type: "txt",
        fileName: "云控文本",
        date: false,
        separator: " | "
      }
    },
    {
      label: "批量编辑",
      key: "edit",
      type: "primary",
      size: "small",
      icon: "Edit",
      plain: true,
      circle: false,
      link: false,
      config: {
        source: 491
      }
    },
    {
      label: "批量编辑1",
      key: "edit1",
      type: "primary",
      size: "small",
      icon: "Edit",
      plain: true,
      circle: false,
      link: false,
      config: {
        source: 492,
        openType: "drawer",
        width: "50%"
      }
    },
    {
      label: "其他批量操作",
      key: "none",
      type: "warning",
      size: "small",
      plain: true,
      circle: false,
      link: false,
      events: {
        click: (instance) => {
          const { tableData, selected, refresh, env } = instance;
          console.log("全部表格数据：", tableData);
          console.log("选中行数据：", selected);
          console.log("刷新函数：", refresh);
          console.log("运行环境：", env);
          // 如果你需要刷新表格
          // refresh();
        }
      },
      icon: "Postcard"
    },
    {
      label: "批量AI生成文章",
      key: "edit1",
      type: "success",
      size: "small",
      icon: "Edit",
      plain: true,
      circle: false,
      link: false,
      config: {
        source: 495,
        openType: "drawer",
        width: "50%"
      }
    },
    {
      label: "跳转链接",
      key: "url",
      type: "primary",
      size: "small",
      icon: "ChromeFilled",
      plain: true,
      circle: false,
      link: false,
      config: {
        url: "https://www.baidu.com/"
      }
    },
    {
      label: "跳转链接1",
      key: "url1",
      type: "primary",
      size: "small",
      icon: "ChromeFilled",
      plain: true,
      circle: false,
      link: false,
      config: {
        url: "https://cn.bing.com/"
      }
    },
    {
      label: "批量删除",
      key: "del",
      type: "danger",
      size: "small",
      icon: "Delete",
      plain: true,
      circle: false,
      link: false
    }
  ],
  operateBtn: [
    {
      label: "编辑",
      key: "edit",
      type: "primary",
      size: "small",
      icon: "Edit",
      plain: true,
      circle: false,
      link: false
    },
    {
      label: "编辑1",
      key: "edit1",
      type: "primary",
      size: "small",
      icon: "Edit",
      plain: true,
      circle: false,
      link: false,
      config: {
        source: null,
        openType: "dialog"
      }
    },
    {
      label: "列表",
      key: "list",
      type: "primary",
      size: "small",
      icon: "Memo",
      plain: true,
      circle: false,
      link: false,
      config: {
        source: 475,
        openType: "dialog",
        key: "data_list_case_id",
        width: "100%",
        title: "记录"
      }
    },
    {
      label: "列表1",
      key: "list1",
      type: "primary",
      size: "small",
      icon: "Memo",
      plain: true,
      circle: false,
      link: false,
      config: {
        source: null,
        openType: null,
        key: "id",
        width: "70%"
      }
    },
    {
      label: "大屏",
      key: "screen",
      type: "primary",
      size: "small",
      icon: "Memo",
      plain: true,
      circle: false,
      link: false,
      config: {
        source: 59,
        openType: "dialog",
        key: "id",
        width: "100%"
      }
    },
    {
      label: "大屏1",
      key: "screen1",
      type: "primary",
      size: "small",
      icon: "Memo",
      plain: true,
      circle: false,
      link: false,
      config: {
        source: null,
        openType: null,
        key: "id"
      }
    },
    {
      label: "菜单页",
      key: "menu",
      type: "primary",
      size: "small",
      icon: "Tickets",
      plain: true,
      circle: false,
      link: false,
      config: {
        source: 358,
        openType: "newTab",
        key: "id"
      }
    },
    {
      label: "菜单页1",
      key: "menu1",
      type: "primary",
      size: "small",
      icon: "Tickets",
      plain: true,
      circle: false,
      link: false,
      config: {
        source: null,
        openType: null,
        key: "id"
      }
    },
    {
      label: "其他行操作",
      key: "none",
      type: "warning",
      size: "small",
      plain: true,
      circle: false,
      link: false,
      events: {
        click: (instance) => {
          const { tableData, selected, refresh, env } = instance;
          console.log("全部表格数据：", tableData);
          console.log("选中行数据：", selected);
          console.log("刷新函数：", refresh);
          console.log("运行环境：", env);
          // 如果你需要刷新表格
          // refresh();
        }
      },
      icon: "Coin"
    },
    {
      label: "删除",
      key: "del",
      type: "danger",
      size: "small",
      icon: "Delete",
      plain: true,
      circle: false,
      link: false
    }
  ],
  treeData: {
    show: true,
    nodeKey: "id",
    treeProps: {
      label: "label",
      value: "id",
      children: "children"
    },
    name: "category_id",
    method: "post",
    getUrl: "http://47.94.105.29:66/api/DataListCaseCategoryTree",
    events: {
      before: (instance) => {
        const { type, headers, data, env } = instance;

        console.groupCollapsed("🚀 [before] " + type);
        console.log("instance:", instance);
        console.groupEnd();

        const newHeaders = {
          ...headers,
          Authorization: "Bearer " + (env?.user?.token || ""),
          "Content-Type": "application/json"
        };

        let newData = { ...data };

        return {
          url: instance.url,
          method: instance.method || "post",
          headers: newHeaders,
          timeout: instance.timeout || 30000,
          data: newData
        };
      },
      after: (instance) => {
        const { type, success, response, env } = instance;

        console.groupCollapsed("📦 [after] " + type);
        console.log("instance:", instance);
        console.groupEnd();

        if (success) {
          env?.runtime?.ElMessage?.info(
            "get 数据处理区：可在此处处理树结构 / children 格式 / 层级整理"
          );
        }

        return {
          code: 200,
          data: response?.data?.data,
          msg: response?.data?.msg
        };
      }
    }
  },
  events: {
    before: (instance) => {
      const { type, headers, data, env } = instance;

      console.groupCollapsed("🚀 [before] " + type);
      console.log("instance:", instance);
      console.groupEnd();

      const newHeaders = {
        ...headers,
        Authorization: "Bearer " + (env?.user?.token || ""),
        "Content-Type": "application/json"
      };

      let newData = {};

      switch (type) {
        case "get": {
          env?.runtime?.ElMessage?.info("加载列表数据中（可在此处修改请求参数格式）");
          newData = { ...data };
          break;
        }
        case "delete": {
          env?.runtime?.ElMessage?.info("正在删除数据（可在此处修改请求参数格式）");
          newData = { ...data };
          break;
        }
        default: {
          newData = { ...data };
          break;
        }
      }

      return {
        url: instance.url,
        method: instance.method || "post",
        headers: newHeaders,
        timeout: instance.timeout || 30000,
        data: newData
      };
    },
    after: (instance) => {
      const { type, success, response, env } = instance;

      console.groupCollapsed("📦 [after] " + type);
      console.log("instance:", instance);
      console.groupEnd();

      if (success) {
        switch (type) {
          case "get": {
            env?.runtime?.ElMessage?.info(
              "get 数据处理区：可在此处统一处理列表结构 / 字段映射 / 分页格式"
            );
            break;
          }
          case "delete": {
            env?.runtime?.ElMessage?.info(
              "delete 数据处理区：可在此处统一删除后的返回结构"
            );
            break;
          }
          default: {
            env?.runtime?.ElMessage?.info(
              "未知 type：" + type + "，可在 default 中扩展处理逻辑"
            );
            break;
          }
        }
      }

      return {
        code: 200,
        data: response?.data?.data,
        msg: response?.data?.msg
      };
    }
  },
  notice: {
    content: "一个功能强大的页面管理系统，支持表单、列表和数据大屏页面，并具有自定义菜单路由功能。用户可以创建任意数量的菜单页面，并从各种组件中选择所需的功能。还支持批量导入、编辑、上传、删除、页面关联等操作，无需用户进行前端开发，只需提供后端接口即可实现可视化操作。所有数据将安全存储在用户自己的数据库中，并能解析云控用户的相关信息，如用户ID、用户名、密码版本和设备ID等。此外，用户可以共享创建的页面菜单给下级用户使用，并通过推广代理角色权限设置进行管理。",
    control: {
      style: {
        color: "#ff0000"
      }
    }
  }
};

opt = {
  columns: [
    {
      label: "多选",
      fixed: "left",
      type: "selection"
    },
    {
      prop: "label",
      label: "标题",
      help: "",
      headerAlign: "center",
      align: "center",
      config: {},
      minWidth: "180"
    },
    {
      prop: "category_id",
      label: "分类",
      help: "我是帮助信息，树状选择器",
      config: {
        dictKey: "category_id",
        type: "field",
        field: "treeSelect",
        control: {
          style: {
            width: "150px"
          }
        }
      },
      width: "180px",
      sortable: true,
      headerAlign: "center",
      align: "center"
    },
    {
      prop: "task_type_id",
      label: "任务类型",
      help: "我是帮助信息，选择器",
      config: {
        dictKey: "task_type_id",
        type: "field",
        field: "select",
        control: {
          style: {
            width: "150px"
          }
        }
      },
      width: "180",
      sortable: true,
      align: "center",
      headerAlign: "center"
    },
    {
      prop: "input",
      label: "输入框",
      help: "",
      width: "120",
      headerAlign: "center",
      align: "center",
      config: {
        type: "field",
        field: "input",
        control: {
          clearable: true
        }
      }
    },
    {
      prop: "textarea",
      label: "多行文本",
      help: "",
      width: "180",
      headerAlign: "center",
      align: "center",
      config: {
        type: "field",
        field: "textarea"
      }
    },
    {
      prop: "inputNumber",
      label: "计数器",
      help: "",
      headerAlign: "center",
      align: "center",
      config: {
        type: "field",
        field: "inputNumber"
      },
      width: "180"
    },
    {
      prop: "switch",
      label: "开关",
      help: "",
      width: "160",
      headerAlign: "center",
      align: "center",
      config: {
        type: "field",
        field: "switch",
        editUrl: "http://47.94.105.29:66/api/editDataListCase",
        control: {
          activeValue: 1,
          inactiveValue: 0,
          activeText: "开启",
          inactiveText: "关闭"
        }
      }
    },
    {
      prop: "timePicker",
      label: "时间选择器",
      help: "",
      width: "160",
      headerAlign: "center",
      align: "center",
      config: {
        type: "field",
        field: "timePicker",
        control: {
          style: {
            width: "120px"
          }
        }
      }
    },
    {
      prop: "datePicker",
      label: "日期选择器",
      help: "",
      headerAlign: "center",
      align: "center",
      config: {
        type: "field",
        field: "datePicker",
        control: {
          style: {
            width: "180px"
          }
        }
      },
      width: "210"
    },
    {
      prop: "colorPicker",
      label: "取色器",
      help: "",
      width: "80",
      headerAlign: "center",
      align: "center",
      config: {
        type: "field",
        field: "colorPicker"
      }
    },
    {
      prop: "slider",
      label: "滑块",
      help: "",
      headerAlign: "center",
      align: "center",
      config: {
        type: "field",
        field: "slider"
      },
      width: "150"
    },
    {
      prop: "rate",
      label: "评分",
      help: "",
      headerAlign: "center",
      align: "center",
      config: {
        type: "field",
        field: "rate"
      },
      width: "180"
    },
    {
      label: "操作",
      prop: "__control",
      width: "200px",
      fixed: "right",
      align: "center",
      headerAlign: "center"
    }
  ],
  tableProps: {
    border: true
  },
  config: {
    operateDropdown: "4",
    openType: "drawer",
    pageSize: 30,
    getUrl: "http://47.94.105.29:66/api/DataListCaseList",
    editUrl: "http://47.94.105.29:66/api/editDataListCase",
    deleteUrl: "http://47.94.105.29:66/api/deleteDataListCase",
    sortField: "id desc",
    expand: true,
    searchJump: false,
    dialogWidth: "500"
  },
  controlBtn: [
    {
      label: "新增",
      key: "add",
      type: "primary",
      size: "small",
      icon: "CirclePlus",
      plain: false,
      circle: false,
      link: false
    },
    {
      label: "批量新增",
      key: "add1",
      type: "primary",
      size: "small",
      icon: "Edit",
      plain: true,
      circle: false,
      link: false,
      config: {
        source: 485,
        openType: "drawer",
        width: "50%"
      }
    },
    {
      label: "导入Excel",
      key: "import",
      type: "primary",
      size: "small",
      icon: "Upload",
      plain: true,
      circle: false,
      link: false,
      config: {
        type: "excel",
        fileName: "云控数据表",
        sheetName: "Sheet1",
        template: [
          {
            label: "我是标题1",
            uid: "我是UID",
            link: "我是链接",
            name: "我是多余的"
          }
        ],
        addUrl: "http://47.94.105.29:66/api/addBatchDataListCase"
      }
    },
    {
      label: "导出Excel",
      key: "export",
      type: "primary",
      size: "small",
      icon: "Download",
      plain: true,
      circle: false,
      link: false,
      config: {
        type: "excel",
        fileName: "云控数据表",
        date: false,
        sheetName: "Sheet1"
      }
    },
    {
      label: "批量编辑",
      key: "edit",
      type: "primary",
      size: "small",
      icon: "Edit",
      plain: true,
      circle: false,
      link: false,
      config: {
        source: 491
      }
    },
    {
      label: "跳转链接",
      key: "url",
      type: "primary",
      size: "small",
      icon: "ChromeFilled",
      plain: true,
      circle: false,
      link: false,
      config: {
        url: "https://www.baidu.com/"
      }
    },
    {
      label: "批量删除",
      key: "del",
      type: "danger",
      size: "small",
      icon: "Delete",
      plain: true,
      circle: false,
      link: false
    }
  ],
  operateBtn: [
    {
      label: "编辑",
      key: "edit",
      type: "primary",
      size: "small",
      icon: "Edit",
      plain: true,
      circle: false,
      link: false
    },
    {
      label: "编辑1",
      key: "edit1",
      type: "primary",
      size: "small",
      icon: "Edit",
      plain: true,
      circle: false,
      link: false,
      config: {
        source: null,
        openType: "dialog"
      }
    },
    {
      label: "列表",
      key: "list",
      type: "primary",
      size: "small",
      icon: "Memo",
      plain: true,
      circle: false,
      link: false,
      config: {
        source: 475,
        openType: "dialog",
        key: "data_list_case_id",
        width: "100%",
        title: "记录"
      }
    },
    {
      label: "大屏",
      key: "screen",
      type: "primary",
      size: "small",
      icon: "Memo",
      plain: true,
      circle: false,
      link: false,
      config: {
        source: 59,
        openType: "dialog",
        key: "id",
        width: "100%"
      }
    },
    {
      label: "菜单页",
      key: "menu",
      type: "primary",
      size: "small",
      icon: "Tickets",
      plain: true,
      circle: false,
      link: false,
      config: {
        source: 358,
        openType: "newTab",
        key: "id"
      }
    },
    {
      label: "删除",
      key: "del",
      type: "danger",
      size: "small",
      icon: "Delete",
      plain: true,
      circle: false,
      link: false
    }
  ],
  treeData: {},
  notice: {
    content: "一个功能强大的页面管理系统，支持表单、列表和数据大屏页面，并具有自定义菜单路由功能。用户可以创建任意数量的菜单页面，并从各种组件中选择所需的功能。还支持批量导入、编辑、上传、删除、页面关联等操作，无需用户进行前端开发，只需提供后端接口即可实现可视化操作。所有数据将安全存储在用户自己的数据库中，并能解析云控用户的相关信息，如用户ID、用户名、密码版本和设备ID等。此外，用户可以共享创建的页面菜单给下级用户使用，并通过推广代理角色权限设置进行管理。",
    control: {
      style: {
        color: "#ff0000"
      }
    }
  }
};