import snippets from "./snippets"; import button from "../button/meta"; const getI18n = (item: { "type": string, "key": string, "en": string, "zh-CN": string, "zh-HK": string } | string) => { if (typeof item === "string") { return item } if (item.type === 'i18n') { return item["zh-CN"] || item['zh-HK'] || item['en'] } } export default { snippets, componentName: "Table", title: "表格", category: "数据展示", docUrl: "", screenshot: "", devMode: "proCode", npm: { package: "@pisell/materials", version: "1.0.1", exportName: "Table", main: "src/index.tsx", destructuring: true, subName: "", }, props: [ { title: "数据源", display: "block", type: "group", items: [ { name: "dataSource", title: { label: "表格数据", tip: "dataSource | 表格数据" }, propType: "object", setter: "JsonSetter", supportVariable: true, }, { name: "loading", title: { label: "加载中", tip: "loading | 是否加载中" }, propType: "bool", setter: "BoolSetter", defaultValue: false, supportVariable: true, }, { name: "rowKey", title: { label: "行Key", tip: "rowKey | 表格行 key 的取值，可以是字符串或一个函数", }, propType: { type: "oneOfType", value: ["string", "func"] }, setter: [ "StringSetter", { componentName: "FunctionSetter", props: { template: "getRowKey(record,index,${extParams}){\n// 通过函数获取表格行 key\nreturn record.id;\n}", }, }, "VariableSetter", ], defaultValue: "id", }, { name: "currentSettingKey", title: { label: "currentSettingKey", tip: "currentSettingKey | 当前本地配置的key 用此hash是否改变用来判断是否清空本地配置 不填默认使用columns数据生成hash", }, propType: "string", setter: "StringSetter", }, { name: "currentComponentId", title: { label: "currentComponentId", tip: "currentComponentId | 当前本地配置的唯一值 不填默认使用currentSettingKey", }, propType: "string", setter: "StringSetter", } ], }, { name: "columns", title: { label: "表格列", tip: "表格列的配置描述，具体项见下表" }, setter: { componentName: "ArraySetter", props: { itemSetter: { componentName: "ObjectSetter", props: { config: { items: [ { name: "title", title: { label: "列标题", tip: "title | 列标题" }, propType: { type: "oneOfType", value: ["string", "func"] }, setter: [ "PisellI18nSetter", { componentName: "SlotSetter", title: "列标题插槽", initialValue: { type: "JSSlot", params: ["options"], value: [], }, }, ], }, { name: "dataIndex", title: { label: "数据字段", tip: "dataIndex | 数据字段" }, setter: [ "StringSetter", { componentName: "ArraySetter", props: { itemSetter: { componentName: "StringSetter", }, }, }, ], isRequired: true, }, { name: "key", title: { label: "React key", tip: "key | React需要的key" }, propType: "string", setter: "StringSetter", isRequired: true, }, { name: "align", title: { label: "对齐方式", tip: "align | 对齐方式" }, propType: { type: "oneOf", value: ["left", "right", "center"], }, defaultValue: "left", setter: [ { componentName: "RadioGroupSetter", props: { options: [ { title: "left", value: "left", }, { title: "right", value: "right", }, { title: "center", value: "center", }, ], }, }, "VariableSetter", ], }, { name: "fixed", title: { label: "列是否固定", tip: "fixed | 列是否固定" }, description: "（IE 下无效）列是否固定，可选 true (等效于 left) left right", defaultValue: "", propType: { type: "oneOf", value: ["", "left", "right"], }, setter: [ { componentName: "RadioGroupSetter", props: { options: [ { title: "不固定", value: "", }, { title: "固定在左侧", value: "left", }, { title: "固定在右侧", value: "right", }, ], }, }, "VariableSetter", ], }, { name: "className", title: { label: "列样式类名", tip: "className | 列样式类名", }, propType: "string", setter: "StringSetter", }, { name: "width", title: { label: "宽度", tip: "width | 宽度" }, propType: { type: "oneOfType", value: ["number", "string"], }, setter: ["NumberSetter", "StringSetter", "VariableSetter"], }, { name: "sorter", title: { label: "排序规则", tip: "sorter | 排序函数，本地排序使用一个函数，需要服务端排序可设为 true", }, propType: { type: "oneOfType", value: ["bool", "func"] }, setter: ["BoolSetter", "FunctionSetter", "VariableSetter"], }, { name: "defaultFilters", title: { label: "默认筛选", tip: "defaultFilters | 是否开启默认筛选", }, propType: "bool", setter: "BoolSetter", }, { name: "hidden", title: { label: "是否隐藏", tip: "hidden | 是否隐藏当前列", }, propType: "bool", setter: "BoolSetter", }, { name: "filters", title: { label: "筛选菜单项", tip: "filters | 表头的筛选菜单项", }, propType: "object", setter: "JsonSetter", }, { name: "other", title: { label: "其他拓展属性", tip: "其他拓展属性", }, propType: "object", setter: "JsonSetter", }, { name: "field_type", title: { label: "字段类型", tip: "所筛选的字段类型" }, propType: "string", setter: { componentName: "SelectSetter", mode: "single", defaultValue: "text", props: { options: [ { title: "文本", value: "text", }, { title: "单选", value: "select", }, { title: "数字", value: "number", }, { title: "日期", value: "date", }, { title: "链接", value: "link", }, ], }, }, }, { name: "render", title: { label: "自定义渲染", tip: "render | 插槽内的物料表达式可通过this.record获取当前行数据，this.index获取索引", }, propType: "func", setter: [ { componentName: "SlotSetter", title: "单元格插槽", initialValue: { type: "JSSlot", params: ["text", "record", "index"], value: [], }, }, "VariableSetter", ], }, { name: "action", title: { label: "Action", tip: "Action" }, propType: "string", setter: "StringSetter", }, { name: "contentClassName", title: { label: "内容样式类名", tip: "内容样式类名", }, propType: "string", setter: "StringSetter", }, ], }, }, initialValue: { title: "标题", width: 250, dataIndex: "" }, }, }, }, }, { title: "视图", display: "block", type: "group", items: [ { name: "view.defaultViewMode", title: { label: "默认视图", tip: "view.defaultViewMode | 组件默认展示视图", }, propType: "string", setter: { componentName: "RadioGroupSetter", props: { options: [ { title: "Grid", value: "grid", }, { title: "Gallery", value: "gallery", }, { title: "Kanban", value: "kanban", }, ], }, }, }, { name: "view.multiple", title: { label: "开启多视图", tip: "view.multiple | 开启多视图后可以进行不同组件类型切换", }, propType: "bool", setter: "BoolSetter", defaultValue: false, }, { name: "view.modeList", title: { label: "多视图", tip: "view.modeList | 组件多视图选项", }, condition(target) { return !!target.getProps().getPropValue("view.multiple"); }, setter: { componentName: "SelectSetter", props: { mode: "multiple", options: [ { title: "Grid", value: "grid", }, { title: "Gallery", value: "gallery", }, { title: "Kanban", value: "kanban", }, ], }, }, }, ], }, { title: "Gallery", display: "entry", type: "group", items: [ { name: "gallery.cardMinWidth", title: { label: "卡片最小宽度", tip: "卡片最小宽度，屏幕尺寸改变时卡片宽度始终保持在最大最小之间｜gallery.cardMinWidth" }, setter: "NumberSetter", defaultValue: 260, }, { name: "gallery.cardMaxWidth", title: { label: "卡片最大宽度", tip: "卡片最大宽度，屏幕尺寸改变时卡片宽度始终保持在最大最小之间｜gallery.cardMaxWidth" }, setter: "NumberSetter", defaultValue: 340, }, { name: "gallery.horizontalGutter", title: { label: "水平间隔", tip: "水平间隔｜gallery.horizontalGutter" }, setter: "NumberSetter", defaultValue: 32, }, { name: "gallery.verticalGutter", title: { label: "垂直间隔", tip: "垂直间隔｜gallery.verticalGutter" }, setter: "NumberSetter", defaultValue: 32, }, { name: "gallery.fixedHeight", title: { label: "高度固定", tip: "高度固定｜gallery.fixedHeight" }, setter: "BoolSetter", }, { name: "gallery.cardHeight", title: { label: "卡片高度", tip: "卡片高度｜gallery.cardHeight" }, setter: "NumberSetter", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("gallery.fixedHeight")', }, }, { name: "gallery.fixedHeader", title: { label: "固定顶部", tip: "是否固定顶部｜gallery.fixedHeader" }, setter: "BoolSetter", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("gallery.fixedHeight")', }, }, { name: "gallery.fixedFooter", title: { label: "固定底部", tip: "是否固定底部｜gallery.fixedFooter" }, setter: "BoolSetter", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("gallery.fixedHeight")', }, }, { name: "gallery.footer.render", title: { label: "底部渲染函数", tip: "底部渲染函数 ｜gallery.footer.render", }, propType: "func", setter: [ { componentName: "SlotSetter", title: "底部函数插槽", initialValue: { type: "JSSlot", params: ["record", "index"], value: [], }, }, { componentName: "FunctionSetter", props: { template: "footer(){\n// 自定义渲染底部\nreturn `Footer`;\n}", }, }, "VariableSetter", ], }, { name: "gallery.footer.height", title: { label: "底部高度", tip: "底部高度｜gallery.footer.height" }, setter: "NumberSetter", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("gallery.footer.render")', }, }, { name: "gallery.onItem", title: { label: "卡片点击事件", tip: "卡片点击事件｜gallery.onItem" }, setter: { componentName: "FunctionSetter", props: { template: "onItem(record,index){\n// 卡片点击事件\nconsole.log(record,index,'record,index');\n}", }, }, }, { title: "头部区域", display: "block", type: "group", items: [ { name: "gallery.cover.show", title: { label: "封面开启", tip: "封面开启｜gallery.cover.show" }, setter: "BoolSetter", defaultValue: true, }, { name: "gallery.cover.fields", title: { label: "封面内容", tip: "gallery.cover.fields | 封面内容字段", }, setter: { componentName: "SelectSetter", props: (target) => { const columns = target.parent.parent.parent.getPropValue("columns"); return { mode: "multiple", options: columns?.map?.((item) => ({ title: typeof item.title === "string" ? item.title : item.key, value: item.key, })) || [], }; }, }, condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("gallery.cover.show")', }, }, { name: "gallery.cover.height", title: { label: "封面高度", tip: "gallery.cover.height | 封面高度", }, propType: "number", setter: "NumberSetter", defaultValue: 230, condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("gallery.cover.show")', }, }, { name: "gallery.cover.objectFit", title: { label: "封面效果", tip: "gallery.cover.objectFit | 封面效果", }, propType: "string", setter: { componentName: "RadioGroupSetter", props: { options: [ { title: "适应", value: "fill", }, { title: "裁剪", value: "cover", }, ], }, initialValue: 'fill' }, condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("gallery.cover.show")', }, }, { name: "gallery.title.field", title: { label: "标题内容", tip: "gallery.title.field | 标题内容", }, propType: "string", setter: { componentName: "SelectSetter", props: (target) => { const columns = target.parent.parent.parent.getPropValue("columns"); return { mode: "single", options: columns?.map?.((item) => ({ title: typeof item.title === "string" ? item.title : item.key, value: item.key, })) || [], }; }, }, }, { name: "gallery.title.line", title: { label: "标题行数", tip: "gallery.title.line | 标题行数", }, propType: "number", setter: "NumberSetter", }, { name: "gallery.header.slot", title: { label: "开启插槽", tip: "gallery.header.slot | 开启插槽", }, propType: "func", setter: [ { componentName: "SlotSetter", title: "函数插槽", initialValue: { type: "JSSlot", params: ["record", "index"], value: [], }, }, "VariableSetter", ], }, { name: "gallery.header.fields.show", title: { label: "其他字段", tip: "gallery.header.fields.show | 其他字段", }, propType: "bool", setter: "BoolSetter", defaultValue: false, }, { name: "gallery.header.fields.list", title: { label: "其他字段", tip: "gallery.header.fields.list | 选择字段渲染在上方", }, condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("gallery.header.fields.show")', }, setter: { componentName: "SelectSetter", props: (target) => { const columns = target.parent.parent.parent.getPropValue("columns"); return { mode: "multiple", options: columns?.map?.((item) => ({ title: typeof item.title === "string" ? item.title : item.key, value: item.key, })) || [], }; }, }, }, ], }, { title: "内容区域", display: "block", type: "group", items: [ { name: "gallery.content.fields", title: "", setter: { componentName: "ArraySetter", props: { itemSetter: { componentName: "ObjectSetter", props: { config: { items: [ { name: "columnKey", title: { label: "渲染字段", tip: "渲染字段" }, isRequired: true, setter: { componentName: "SelectSetter", props: (target) => { const columns = target.parent.parent.parent.getPropValue( "columns" ); const fieldsKey = target.parent.parent.parent .getPropValue("gallery.content.fields") .map((item) => item?.columnKey) .filter(Boolean); return { mode: "single", options: columns?.map?.((item) => ({ title: typeof item.title === "string" ? item.title : item.key, value: item.key, disabled: fieldsKey.includes(item.key), })) || [], }; }, }, }, { name: "show", title: { label: "是否展示", tip: "是否展示" }, propType: "bool", setter: "BoolSetter", isRequired: true, }, ], }, }, initialValue: { columnKey: "", show: true, }, }, }, initialValue: (target) => { const columns = target.parent.parent.parent.getPropValue("columns"); return columns?.map?.((item) => ({ columnKey: item.key, show: true, })) || []; }, }, }, ], }, ], }, { title: "外观", display: "block", type: "group", items: [ { name: "showHeader", title: { label: "显示表头", tip: "showHeader | 是否显示表头" }, propType: "bool", setter: "BoolSetter", defaultValue: true, }, { name: "bordered", title: { label: "显示边框", tip: "bordered | 是否展示外边框和列边框", }, propType: "bool", setter: "BoolSetter", defaultValue: true, }, { name: "size", title: { label: "表格大小", tip: "size | 表格大小" }, propType: { type: "oneOf", value: ["default", "middle", "small"], }, setter: [ { componentName: "RadioGroupSetter", props: { options: [ { title: "默认", value: "default", }, { title: "中", value: "middle", }, { title: "小", value: "small", }, ], }, }, "VariableSetter", ], defaultValue: "default", }, { name: "tableLayout", title: { label: "表格布局", tip: "tableLayout | 表格布局" }, defaultValue: "", propType: { type: "oneOf", value: ["", "auto", "fixed"], }, setter: [ { componentName: "RadioGroupSetter", props: { options: [ { title: "默认", value: "", }, { title: "自动", value: "auto", }, { title: "固定", value: "fixed", }, ], }, }, "VariableSetter", ], }, { name: "virtual", title: { label: "虚拟列表", tip: "virtual | 支持虚拟列表，开启后不支持 components.body 自定义", }, propType: "bool", setter: "BoolSetter", defaultValue: true, }, ], }, { title: "分页", display: "block", type: "group", items: [ { name: "pagination", title: { label: "显示分页", tip: "pagination | 显示分页" }, propType: "object", setter: "BoolSetter", extraProps: { setValue: (target, value) => { if (value) { target.parent.setPropValue("pagination", { pageSize: 10, }); } }, }, }, { name: "pagination.pageSize", title: { label: "每页条数", tip: "pagination.pageSize | 每页条数" }, propType: "number", setter: "NumberSetter", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("pagination")', }, }, { name: "pagination.total", title: { label: "数据总数", tip: "pagination.total | 数据总数" }, propType: "number", setter: "NumberSetter", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("pagination")', }, }, { name: "pagination.defaultCurrent", title: { label: "默认当前页", tip: "pagination.defaultCurrent | 默认的当前页数", }, propType: "number", setter: "NumberSetter", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("pagination")', }, }, { name: "pagination.current", title: { label: "当前页数", tip: "pagination.current | 当前页数" }, propType: "number", setter: "NumberSetter", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("pagination")', }, }, { name: "pagination.showPagination", title: { label: "始终显示分页", tip: "pagination.showPagination | 当前数据总数大于10 则始终显示分页器", }, propType: "bool", setter: "BoolSetter", defaultValue: false, condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("pagination")', }, }, { name: "pagination.showTotal", title: { label: "显示总数", tip: "pagination.showTotal | 用于显示数据总量和当前数据顺序", }, propType: "func", setter: [ { componentName: "FunctionSetter", props: { template: "showTotal(total,range,${extParams}){\n// 用于格式化显示表格数据总量\nreturn `共 ${total} 条`;\n}", }, }, "VariableSetter", ], condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("pagination")', }, }, { name: "pagination.showSizeChanger", title: { label: "页数切换", tip: "pagination.showSizeChanger | 是否展示 pageSize 切换器", }, propType: "bool", setter: "BoolSetter", defaultValue: false, condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("pagination")', }, }, { name: "pagination.showSizeChange", title: { label: "页数改变", tip: "pagination.showSizeChange | pageSize 变化的回调", }, propType: "func", setter: [ { componentName: "FunctionSetter", props: { template: "showSizeChange(current,size,${extParams}){\n// pageSize 变化的回调\nconsole.log('showSizeChange', current, size);\n}", }, }, "VariableSetter", ], condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("pagination")', }, }, { name: "pagination.localPagination", title: { label: "前端分页", tip: "pagination.localPagination | 是否前端分页开启后表头搜索和分页前端处理", }, propType: "bool", setter: "BoolSetter", defaultValue: false, condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("pagination")', }, }, { name: "pagination.showQuickJumper", title: { label: "快速跳转", tip: "pagination.showQuickJumper | 是否可以快速跳转至某页", }, propType: "bool", setter: "BoolSetter", defaultValue: false, condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("pagination")', }, }, { name: "pagination.simple", title: { label: "简单分页", tip: "pagination.simple | 简单分页" }, propType: "bool", setter: "BoolSetter", defaultValue: false, condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("pagination")', }, }, { name: "pagination.size", title: { label: "分页尺寸", tip: "pagination.size | 分页尺寸" }, propType: { type: "oneOf", value: ["default", "small"], }, setter: [ { componentName: "RadioGroupSetter", props: { options: [ { title: "默认", value: "default", }, { title: "小", value: "small", }, ], }, }, "VariableSetter", ], defaultValue: "default", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("pagination")', }, }, { name: "pagination.position", title: { label: "分页位置", tip: "pagination.position | 分页位置" }, setter: { componentName: "ArraySetter", props: { itemSetter: { componentName: "SelectSetter", props: { options: [ { title: "上左", value: "topLeft", }, { title: "上中", value: "topCenter", }, { title: "上右", value: "topRight", }, { title: "下左", value: "bottomLeft", }, { title: "下中", value: "bottomCenter", }, { title: "下右", value: "bottomRight", }, ], }, initialValue: "bottomRight", }, }, }, condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("pagination")', }, }, ], }, { title: "滚动", display: "block", type: "group", items: [ { name: "scroll.autoCalc", title: { label: "自动计算", tip: "scroll.autoCalc | 是否自动计算scroll x y", }, propType: "bool", setter: "BoolSetter", defaultValue: false, }, { name: "scroll.scrollToFirstRowOnChange", title: { label: "自动滚动", tip: "scroll.scrollToFirstRowOnChange | 是否自动滚动到表格顶部", }, propType: "bool", setter: "BoolSetter", defaultValue: true, }, { name: "scroll.x", title: { label: "横向滚动", tip: "scroll.x | 设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比，true 和 max-content", }, propType: { type: "oneOfType", value: ["number", "bool"] }, setter: ["NumberSetter", "BoolSetter", "VariableSetter"], }, { name: "scroll.y", title: { label: "纵向滚动", tip: "scroll.y | 设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值", }, propType: "number", setter: ["NumberSetter", "VariableSetter"], }, ], }, { title: "行选择器", display: "block", type: "group", items: [ { name: "rowSelection", title: { label: "行选择", tip: "rowSelection | 行选择" }, propType: "object", setter: "BoolSetter", extraProps: { setValue: (target, value) => { if (value) { target.parent.setPropValue("rowSelection", { type: "radio", columnWidth: 48, }); } }, }, }, { name: "rowSelection.type", title: { label: "行选择类型", tip: "rowSelection.type | 多选/单选" }, propType: { type: "oneOf", value: ["checkbox", "radio"], }, setter: [ { componentName: "RadioGroupSetter", props: { options: [ { title: "多选", value: "checkbox", }, { title: "单选", value: "radio", }, ], }, }, "VariableSetter", ], condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("rowSelection")', }, }, { name: "rowSelection.fixed", title: { label: "固定左边", tip: "rowSelection.fixed | 把选择框列固定在左边", }, propType: "bool", setter: "BoolSetter", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("rowSelection")', }, }, { name: "rowSelection.columnWidth", title: { label: "自定义列表选择框宽度", tip: "rowSelection.columnWidth | 自定义列表选择框宽度" }, propType: { type: "oneOfType", value: ["number", "string"], }, setter: ["NumberSetter", "StringSetter", "VariableSetter"], condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("rowSelection")', }, }, { name: "rowSelection.selectedRowKeys", title: { label: "选中行Key", tip: "rowSelection.selectedRowKeys | 指定选中项的 key 数组", }, propType: "object", setter: "JsonSetter", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("rowSelection")', }, }, { name: "rowSelection.preserveSelectedRowKeys", title: { label: "保留选项", tip: "rowSelection.preserveSelectedRowKeys | 当数据被删除时仍然保留选项", }, propType: "bool", setter: "BoolSetter", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("rowSelection")', }, }, { name: "rowSelection.getCheckboxProps", title: { label: "默认属性", tip: "rowSelection.getCheckboxProps | 选择框的默认属性配置", }, propType: "func", setter: [ { componentName: "FunctionSetter", props: { template: "getCheckboxProps(record,${extParams}){\n// 选择框的默认属性配置\nreturn { disabled: false };\n}", }, }, "VariableSetter", ], condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("rowSelection")', }, }, ], }, { title: "行展开", display: "block", type: "group", items: [ { name: "expandable.expandedRowRender", title: { label: "展开行渲染", tip: "expandable.expandedRowRender | 额外的展开行", }, propType: "func", setter: [ { componentName: "SlotSetter", title: "展开行插槽", initialValue: { type: "JSSlot", params: ["record", "index", "indent", "expanded"], value: [], }, }, { componentName: "FunctionSetter", props: { template: "expandedRowRender(record,index,indent,expanded,${extParams}){\n// 展开行渲染\nreturn `${record.id}`}", }, }, "VariableSetter", ], }, { name: "expandable.rowExpandable", title: { label: "是否可展开", tip: "expandable.rowExpandable | 行是否可展开", }, propType: "func", setter: [ { componentName: "FunctionSetter", props: { template: "rowExpandable(record,${extParams}){\n// 行是否可展开\nreturn true;\n}", }, }, "VariableSetter", ], }, ], }, { title: "扩展", display: "block", type: "group", items: [ { name: "title", title: { label: "表格标题", tip: "title | 表格标题" }, propType: "func", setter: [ { componentName: "SlotSetter", title: "表格标题插槽", initialValue: { type: "JSSlot", params: ["currentPageData"], value: [], }, }, { componentName: "FunctionSetter", props: { template: 'renderTitle(currentPageData,${extParams}){\n// 自定义渲染表格顶部\nreturn "表格顶部";\n}', }, }, "VariableSetter", ], }, { name: "summary", title: { label: "统计栏" }, propType: "func", setter: [ { componentName: "SlotSetter", title: "统计栏插槽", initialValue: { type: "JSSlot", params: ["currentPageData"], value: [], }, }, ], }, { name: "onHeaderRow", title: { label: "头部行属性", tip: "onHeaderRow | 设置头部行属性" }, propType: "func", setter: [ { componentName: "FunctionSetter", props: { template: "onHeaderRow(columns,index,${extParams}){\n// 设置头部行属性\nreturn {onClick:()=>{}};\n}", }, }, "VariableSetter", ], }, { name: "onRow", title: { label: "行属性", tip: "onRow | 设置行属性" }, propType: "func", setter: [ { componentName: "FunctionSetter", props: { template: "onRow(record,index,${extParams}){\n// 设置行属性\nreturn {onClick:event=>{}};\n}", }, }, "VariableSetter", ], }, { name: "rowClassName", title: { label: "行类名", tip: "rowClassName | 表格行的类名" }, propType: "func", setter: [ { componentName: "FunctionSetter", props: { template: "rowClassName(record,index,${extParams}){\n// 表格行的类名\nreturn `className-${record.type}`;\n}", }, }, "VariableSetter", ], }, { name: "dragSort", title: { label: "拖拽排序", tip: "dragSort | 开启拖拽排序", }, propType: "bool", setter: "BoolSetter", defaultValue: false, }, ], }, { title: "本地记忆", display: "block", type: "group", items: [ { name: "localSettings.enable", title: { label: { type: 'i18n', 'en-US': 'Enable settings memory', 'zh-CN': '启用设置记忆', 'zh-HK': '啟用設置記憶', }, tip: { type: 'i18n', 'en-US': 'Automatically save and restore table settings', 'zh-CN': '自动保存和恢复表格设置', 'zh-HK': '自動保存和恢復表格設置', }, }, propType: "bool", setter: "BoolSetter", defaultValue: true, }, { name: "localSettings.scope", title: { label: { type: 'i18n', 'en-US': 'Memory scope', 'zh-CN': '记忆范围', 'zh-HK': '記憶範圍', }, tip: { type: 'i18n', 'en-US': 'Choose which settings to remember', 'zh-CN': '选择要记忆的设置项', 'zh-HK': '選擇要記憶的設置項', }, }, condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("localSettings.enable")', }, setter: { componentName: "SelectSetter", props: { mode: "multiple", options: [ { title: '筛选', value: "filters" }, { title: '排序', value: "sorting" }, { title: '列配置', value: "columns" }, ], }, }, defaultValue: ["filters", "sorting", "columns"], }, { name: "localSettings.excludedFilterFields", title: { label: { type: 'i18n', 'en-US': 'Excluded filter fields', 'zh-CN': '筛选排除字段', 'zh-HK': '篩選排除字段', }, tip: { type: 'i18n', 'en-US': 'Filter fields that should not be remembered', 'zh-CN': '不需要记忆的筛选字段', 'zh-HK': '不需要記憶的篩選字段', }, }, // condition: { // type: "JSFunction", // value: 'target => { const enable = !!target.getProps().getPropValue("settingsMemory.enable"); const scope = target.getProps().getPropValue("settingsMemory.scope") || []; return enable && Array.isArray(scope) && scope.includes("filters"); }', // }, condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("localSettings.enable")', }, setter: { componentName: "SelectSetter", props: (target: any) => { const filterList = (target.parent.parent.getPropValue("filter.list") || []) as any[]; return { mode: "multiple", options: filterList .map((item: any) => ({ title: (item && (item.label?.["zh-CN"] || item.label?.["zh-HK"] || item.label?.en)) || item?.key || item?.columnKey || "", value: item?.key || item?.columnKey || "", })) .filter((opt: any) => opt.value), }; }, }, }, ], }, { title: { label: "列配置", tip: "表格的列配置" }, display: "block", type: "group", items: [ { name: "columnSetting.show", title: { label: "开启列配置", tip: "columnSetting.show | 是否开启字段隐藏展示及顺序调整按钮", }, propType: "bool", setter: "BoolSetter", defaultValue: false, }, { name: "columnSetting.storageMode", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("columnSetting.show")', }, title: { label: "存储模式", tip: "columnSetting.storageMode | 列配置存储模式 关闭时刷新页面还原", }, propType: "string", setter: { componentName: "SelectSetter", mode: "single", defaultValue: "localStorage", props: { options: [ { title: "关闭", value: "", }, { title: "本地localStorage", value: "localStorage", }, ], }, }, }, ], }, { title: { label: "分组配置", tip: "表格的分组配置" }, display: "block", type: "group", items: [ { name: "dataSourceGroup.show", title: { label: "开启分组功能", tip: "dataSourceGroup.show | 是否开启针对字段分组功能", }, propType: "bool", setter: "BoolSetter", defaultValue: false, }, { name: "dataSourceGroup.storageMode", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("dataSourceGroup.show")', }, title: { label: "存储模式", tip: "dataSourceGroup.storageMode | 分组信息存储模式 关闭时刷新页面还原", }, propType: "string", setter: { componentName: "SelectSetter", mode: "single", defaultValue: "localStorage", props: { options: [ { title: "关闭", value: "", }, { title: "本地localStorage", value: "localStorage", }, ], }, }, }, { name: "dataSourceGroup.list", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("dataSourceGroup.show")', }, setter: { componentName: "ArraySetter", props: { itemSetter: { componentName: "ObjectSetter", props: { config: { items: [ { name: "isCustom", title: { label: "开启定制字段", tip: "开启定制字段，可自定义排序名和排序的key，关闭时可选择column中的title和dataIndex", }, setter: "BoolSetter", defaultValue: false, }, { name: "isHidden", title: { label: "是否隐藏", tip: "开启时，当前项展示， 关闭时，当前项隐藏", }, propType: "bool", setter: "BoolSetter", defaultValue: false, }, { name: "columnKey", title: { label: "选择字段", tip: "选择column中的title和dataIndex字段进行排序", }, isRequired: true, condition(target) { return !target.parent.getPropValue("isCustom"); }, setter: [ { componentName: "SelectSetter", mode: "single", props: (target) => { const fieldsKey = target.parent.parent.parent .getPropValue("dataSourceGroup.list") .map((item) => item?.columnKey) .filter(Boolean); return { options: target.parent.parent.parent .getPropValue("columns") ?.map?.((item) => ({ title: getI18n(item.title) || item.key, value: item.key, disabled: fieldsKey.includes(item.key), })) || [], }; }, }, "StringSetter", ], }, { name: "label", title: { label: "筛选项", tip: "筛选项" }, propType: "string", setter: "PisellI18nSetter", condition(target) { return target.parent.getPropValue("isCustom"); }, }, { name: "name", title: { label: "字段", tip: "所筛选的字段" }, setter: [ "StringSetter", { componentName: "ArraySetter", props: { itemSetter: { componentName: "StringSetter", }, }, }, ], condition(target) { return target.parent.getPropValue("isCustom"); }, }, ], }, }, initialValue: { label: "标题", name: "", columnKey: "", isCustom: false, isHidden: false }, }, }, }, }, ], }, { title: { label: "筛选项", tip: "表格的筛选项" }, display: "block", type: "group", items: [ { name: "filter.show", title: { label: "开启筛选", tip: "开启筛选" }, propType: "object", setter: "BoolSetter", defaultValue: false, }, { name: "filter.sortButtonShow", title: { label: "开启筛选排序按钮", tip: "开启筛选排序按钮" }, propType: "object", setter: "BoolSetter", defaultValue: false, }, { name: "filter.storageMode", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("filter.show")', }, title: { label: "存储模式", tip: "filter.storageMode | 筛选信息存储模式 关闭时刷新页面还原", }, propType: "string", setter: { componentName: "SelectSetter", mode: "single", defaultValue: "localStorage", props: { options: [ { title: "关闭", value: "", }, { title: "本地localStorage", value: "localStorage", }, ], }, }, }, { name: "filter.quickFilterMaxLength", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("filter.show")', }, title: { label: "快速筛选项", tip: "外层快速筛选项最大数量控制" }, propType: "number", setter: "NumberSetter", defaultValue: 3, }, { name: "filter.list", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("filter.show")', }, setter: { componentName: "ArraySetter", props: { itemSetter: { componentName: "ObjectSetter", props: { config: { items: [ { name: "isCustom", title: { label: "开启定制字段", tip: "开启定制字段，可自定义排序名和排序的key，关闭时可选择column中的title和dataIndex", }, setter: "BoolSetter", defaultValue: false, }, { name: "columnKey", title: { label: "选择字段", tip: "选择column中的title和dataIndex字段进行排序", }, isRequired: true, condition(target) { return !target.parent.getPropValue("isCustom"); }, setter: [ { componentName: "SelectSetter", mode: "single", props: (target) => { console.log(target.parent.parent.parent, this, 'target.parent.parent.parent\n' + ' .getPropValue("columns")') const fieldsKey = target.parent.parent.parent .getPropValue("filter.list") ?.map((item) => item?.columnKey) ?.filter(Boolean) || []; return { options: target.parent.parent.parent .getPropValue("columns") ?.map?.((item) => ({ title: getI18n(item.title) || item.key, value: item.key, disabled: fieldsKey.includes(item.key), })) || [], }; }, }, "StringSetter", ], }, { name: "label", title: { label: "筛选项", tip: "筛选项" }, propType: "string", setter: "PisellI18nSetter", condition(target) { return target.parent.getPropValue("isCustom"); }, }, { name: "name", title: { label: "字段", tip: "所筛选的字段" }, setter: [ "StringSetter", { componentName: "ArraySetter", props: { itemSetter: { componentName: "StringSetter", }, }, }, ], condition(target) { return target.parent.getPropValue("isCustom"); }, }, { name: "key", title: { label: "key", tip: "唯一标识" }, propType: "string", setter: "StringSetter", isRequired: true, }, { name: "type", title: { label: "字段类型", tip: "所筛选的字段类型" }, propType: "string", setter: { componentName: "SelectSetter", mode: "single", defaultValue: "single", props: { options: [ { title: "输入框", value: "text", }, { title: "搜索框", value: "search", }, { title: "数字输入框", value: "number", }, { title: "数字范围输入框", value: "numberRange", }, { title: "下拉选择框", value: "select", }, { title: "日期选择器", value: "date", }, { title: "日期范围选择器", value: "rangePicker", }, { title: "旧版日期范围选择器", value: "oldRangePicker", }, { title: "树选择", value: "treeSelect", }, ], }, }, }, { name: "sort", title: { label: "开启排序", tip: "开启字段排序可以对顺序及字段隐藏调整,关闭时筛选项只在最外层展示", }, propType: "bool", setter: "BoolSetter", defaultValue: false, }, { name: "localFilter", title: { label: "开启本地筛选", tip: "开启本地筛选时，字段值改变会走本地前端搜索，关闭时是调用接口对数据更新。", }, propType: "bool", setter: "BoolSetter", defaultValue: false, }, { name: "isHidden", title: { label: "是否隐藏", tip: "开启时，当前项展示， 关闭时，当前项隐藏", }, propType: "bool", setter: "BoolSetter", defaultValue: false, }, { name: "other", title: { label: "其他拓展属性", tip: "其他拓展属性", }, propType: "object", setter: "JsonSetter", }, ], }, }, initialValue: { label: "标题", type: "text", key: "name", columnKey: "", isCustom: false, isHidden: false }, }, }, }, }, ], }, { title: { label: "排序", tip: "表格的排序项" }, display: "block", type: "group", items: [ { name: "sort.show", title: { label: "开启排序", tip: "开启排序" }, propType: "object", setter: "BoolSetter", defaultValue: true, }, { name: "sort.storageMode", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("sort.show")', }, title: { label: "存储模式", tip: "filter.storageMode | 排序存储模式 关闭时刷新页面还原", }, propType: "string", setter: { componentName: "SelectSetter", mode: "single", defaultValue: "localStorage", props: { options: [ { title: "关闭", value: "", }, { title: "本地localStorage", value: "localStorage", }, ], }, }, }, { name: "sort.list", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("sort.show")', }, setter: { componentName: "ArraySetter", props: { itemSetter: { componentName: "ObjectSetter", props: { config: { items: [ { name: "isCustom", title: { label: "开启定制字段", tip: "开启定制字段，可自定义排序名和排序的key，关闭时可选择column中的title和dataIndex", }, setter: "BoolSetter", defaultValue: false, }, { name: "columnKey", title: { label: "选择字段", tip: "选择column中的title和dataIndex字段进行排序", }, isRequired: true, condition(target) { return !target.parent.getPropValue("isCustom"); }, setter: [ { componentName: "SelectSetter", mode: "single", props: (target) => { const fieldsKey = target.parent.parent.parent .getPropValue("sort.list") .map((item) => item?.columnKey) .filter(Boolean); return { options: target.parent.parent.parent .getPropValue("columns") ?.map?.((item) => ({ title: getI18n(item.title) || item.key, value: item.key, disabled: fieldsKey.includes(item.key), })) || [], }; }, }, "StringSetter", ], }, { name: "localFilter", title: { label: "开启本地排序", tip: "开启本地排序时，排序改变会走本地前端排序，关闭时是调用接口对数据更新。", }, propType: "bool", setter: "BoolSetter", defaultValue: true, }, { name: "label", title: { label: "排序项", tip: "排序项展示文案" }, propType: "string", setter: "PisellI18nSetter", condition(target) { return target.parent.getPropValue("isCustom"); }, }, { name: "name", title: { label: "字段", tip: "所排序的字段" }, setter: [ { componentName: "SelectSetter", mode: "single", props: (target) => { return { options: target.parent.parent.parent .getPropValue("columns") ?.map?.((item) => ({ title: typeof item.title === "string" ? item.title : item.key, value: item.dataIndex, })) || [], }; }, }, "StringSetter", { componentName: "ArraySetter", props: { itemSetter: { componentName: "StringSetter", }, }, }, ], condition(target) { return target.parent.getPropValue("isCustom"); }, }, { name: "isHidden", title: { label: "是否隐藏", tip: "开启时，当前项展示， 关闭时，当前项隐藏", }, propType: "bool", setter: "BoolSetter", defaultValue: false, }, { name: "type", title: { label: "字段类型", tip: "所排序的字段类型" }, propType: "string", isRequired: true, setter: { componentName: "SelectSetter", mode: "single", defaultValue: "single", props: { options: [ { title: "日期排序", value: "date", }, { title: "数字排序", value: "number", }, { title: "a-z排序", value: "string", }, ], }, }, }, ], }, }, initialValue: { label: "标题", type: "date", columnKey: "", isCustom: false, isHidden: false }, }, }, }, }, ], }, { title: { label: "导入导出", tip: "表单的导入导出" }, display: "block", type: "group", items: [ { name: "exportImport.show", title: { label: "开启导入导出", tip: "开启表单的导入导出" }, propType: "bool", setter: "BoolSetter", defaultValue: false, }, { name: "exportImport.hiddenKeys", title: { label: "隐藏字段", tip: "比如：['import'] '导入(import)|导出(export)|导出文件(export_file)|导入日志(import_log)'" }, setter: "ObjectSetter", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("exportImport.show")', }, }, { name: "exportImport.apiUrl", title: { label: "接口地址", tip: "接口地址 | [{export: '/shop/order/task'}]" }, setter: "ObjectSetter", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("exportImport.show")', }, }, // { // name: "exportImport.formId", // title: { label: "表单ID", tip: "表单ID" }, // propType: "string", // setter: "StringSetter", // condition: { // type: "JSFunction", // value: 'target => !!target.getProps().getPropValue("exportImport.show")', // }, // }, // { // name: "exportImport.formCode", // title: { label: "表单Code", tip: "表单Code｜表单的唯一标识" }, // propType: "string", // setter: "StringSetter", // condition: { // type: "JSFunction", // value: 'target => !!target.getProps().getPropValue("exportImport.show")', // }, // }, { name: "exportImport.otherParams", title: { label: "接口其他参数", tip: "接口其他参数" }, setter: "ObjectSetter", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("exportImport.show")', }, }, { name: "exportImport.title", title: { label: "标题", tip: "打开弹窗的标题" }, propType: "string", setter: "PisellI18nSetter", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("exportImport.show")', }, }, { name: "exportImport.templateFileUrl", title: { label: "导入模版链接", tip: "导入模版链接" }, propType: "string", setter: "StringSetter", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("exportImport.show")', }, }, { name: "exportImport.selectLists", title: { label: "当前所选项", tip: "当前所选择的需要导出的哪些数据" }, setter: "ObjectSetter", condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("exportImport.show")', }, }, ], }, { name: "buttons", title: { label: "标题按钮组", tip: "标题右侧按钮项" }, setter: { componentName: "ArraySetter", props: { itemSetter: { componentName: "ObjectSetter", props: { config: { items: [ { name: "title", title: { label: "按钮名称", tip: "按钮名称" }, propType: "string", setter: "PisellI18nSetter", isRequired: true, }, ...button.configure.props, { name: "onClick", title: { label: "点击事件", tip: "点击事件" }, propType: "func", }, { name: "action", title: { label: "功能", tip: "按钮的功能" }, propType: "string", setter: [ { componentName: "SelectSetter", mode: "single", defaultValue: "add", props: { options: [ { title: "Add", value: "add", }, { title: "Reset", value: "reset", }, ], }, }, ], }, { name: "other", title: { label: "其他拓展属性", tip: "其他拓展属性", }, propType: "object", setter: "JsonSetter", }, ], }, }, initialValue: { title: "按钮" }, }, }, }, }, { name: "actionButtons", title: { label: "表格按钮组", tip: "表格action右侧按钮项" }, setter: { componentName: "ArraySetter", props: { itemSetter: { componentName: "ObjectSetter", props: { config: { items: [ { name: "title", title: { label: "按钮名称", tip: "按钮名称" }, propType: "string", setter: "PisellI18nSetter", isRequired: true, }, ...button.configure.props, { name: "onClick", title: { label: "点击事件", tip: "点击事件" }, propType: "func", }, { name: "action", title: { label: "功能", tip: "按钮的功能" }, propType: "string", setter: [ { componentName: "SelectSetter", mode: "single", defaultValue: "add", props: { options: [ { title: "Add", value: "add", }, { title: "Reset", value: "reset", }, ], }, }, ], }, { name: "other", title: { label: "其他拓展属性", tip: "其他拓展属性", }, propType: "object", setter: "JsonSetter", }, ], }, }, initialValue: { title: "按钮" }, }, }, }, }, ], configure: { supports: { style: true, events: [ { name: "onChange", template: "onChange(pagination,filters,sorter,extra,${extParams}){\n// 表格翻页事件\nconsole.log('onChange', pagination);}", }, { name: "onSortChange", template: "onSortChange(detail){\n// 表格拖拽排序事件\nconsole.log('detail', detail);}", }, { name: "onValuesChange", template: "onValuesChange(changedValues, values){}", }, { name: "onDataSourceChange", template: "onDataSourceChange(currentDataSource) {}" }, { name: "rowSelection.onChange", template: "onRowSelectionChange(selectedRowKeys,selectedRows,${extParams}){\n// 选中项发生变化时的回调\nconsole.log('onRowSelectionChange', selectedRowKeys, selectedRows);}", }, { name: "expandable.onExpand", template: "onExpandableExpand(expanded,record){\n// 点击展开图标时触发\nconsole.log('onRowSelectionChange', expanded, record);}", }, { name: "onExportChange", template: "onExportChange(expanded,record){\n// 点击展开图标时触发\nconsole.log('onExport', expanded, record);}", }, { name: "onImportChange", template: "onImportChange(expanded,record){\n// 点击展开图标时触发\nconsole.log('onExport', expanded, record);}", }, { name: "onExportFileChange", template: "onExportFileChange(expanded,record){\n// 点击展开图标时触发\nconsole.log('onExport', expanded, record);}", }, { name: "onImportLogChange", template: "onImportLogChange(expanded,record){\n// 点击展开图标时触发\nconsole.log('onExport', expanded, record);}", }, ], }, }, };