@ywfe/materials-design
Version:
YwDesign for lowcode
960 lines (955 loc) • 31.1 kB
text/typescript
import { YwButtonBaseProps } from '../_base';
import { IPublicTypeFieldConfig } from '@alilc/lowcode-types';
import { tableFormItemProps } from './json-form-base-props';
import { getPropValueWithPath, getPropsByDependence, registerActions, uuid } from '../_utils';
const historyProps = [
{
title: {
label: '按钮文字',
tip: 'btnText | 按钮文字',
},
name: 'btnText',
description: '按钮文字',
supportVariable: false,
setter: {
componentName: 'StringSetter',
initialValue: '按钮',
},
},
{
title: {
label: '跳转地址',
tip: '_url | 跳转地址 如 /a/b/c, ',
},
name: '_url',
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'StringSetter',
},
{
componentName: 'VariableSetter',
},
],
},
},
extraProps: {
getValue: (target, value) => value || '/',
setValue: (target, v) => {
const type = getPropValueWithPath(target, '.__optionType');
const value = v.value || `'${v}'`;
const func = {
HistoryPush: `function (){this.props.appHelper.history.push(${value})}`,
HistoryOpen: `function (){this.props.appHelper.history.open(${value})}`,
};
target.parent.setPropValue('onClick', {
type: 'JSExpression',
value: func[type],
});
},
},
},
];
const buttonsProps = [
...YwButtonBaseProps,
{
name: 'disabeld',
title: { label: '是否禁用', tip: 'disabeld | 是否禁用' },
// 条件渲染setter 后面补充
setter: 'BoolSetter',
},
{
name: 'onClick',
title: { label: '点击回调', tip: '点击按钮时的回调' },
propType: 'func',
setter: {
componentName: 'FunctionSetter',
},
},
];
const batchButtonProps = [
...YwButtonBaseProps,
{
name: 'disabeld',
title: { label: '是否禁用', tip: 'disabeld | 是否禁用' },
// 条件渲染setter 后面补充
setter: 'BoolSetter',
},
{
name: 'onClick',
title: { label: '点击回调', tip: '点击按钮时的回调' },
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'SchemaFunctionSetter',
props: {
title: 'onOk',
async: true,
properties: {
input: {
type: 'object',
properties: {
keys: {
type: 'object',
},
data: {
type: 'object',
},
reload: {
type: 'object',
},
},
required: ['keys', 'data', 'reload'],
},
body: {
type: 'array',
items: [
{
type: 'Function',
properties: {
template: 'RequestFunction',
variable: 'requestRes',
extraProps: {
params: {
id: '{{value.id}}',
},
_params: false,
_paramsArr: [
{
name: 'id',
value: '{{value.id}}',
},
],
},
},
},
{
type: 'JSExpression',
run: 'if (requestRes) reload()',
},
],
},
},
},
},
{
componentName: 'FunctionSetter',
props: {
template: 'function (keys, data, reload) { }',
},
},
],
},
},
},
];
const tableButtonsProps = {
title: '操作按钮',
name: 'buttons',
setter: {
componentName: 'ArraySetter',
props: {
itemSetter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
{
name: '__optionType',
title: { label: '操作类型', tip: '__optionType | 操作类型' },
setter: {
componentName: 'SelectSetter',
isRequired: true,
defaultValue: 'Button',
props: {
options: [
{
label: '普通按钮',
value: 'Button',
},
{
label: '页面跳转(当前页)',
value: 'HistoryPush',
},
{
label: '页面跳转(新开页面)',
value: 'HistoryOpen',
},
{
label: '新建数据(弹窗)',
value: 'DataAddDialog',
},
{
label: '批量操作',
value: 'Batch',
},
{
label: '导入数据（开发中）',
value: 'ConfirmModal',
},
{
label: '导出数据（开发中）',
value: 'ConfirmModal',
},
{
label: '导入记录（开发中）',
value: 'ConfirmModal',
},
{
label: '自定义操作',
value: '',
},
],
},
},
extraProps: {
setValue: (target, v) => {
console.log(1, target.parent);
switch (v) {
case 'HistoryPush':
target.parent.setPropValue('btnText', '页面跳转');
target.parent.setPropValue('children', null);
target.parent.setPropValue('btnType', 'default');
target.parent.setPropValue('type', 'action');
break;
case 'HistoryOpen':
target.parent.setPropValue('btnText', '页面跳转');
target.parent.setPropValue('children', null);
target.parent.setPropValue('btnType', 'default');
target.parent.setPropValue('type', 'action');
break;
case 'Batch':
target.parent.setPropValue('btnText', '批量操作');
target.parent.setPropValue('children', null);
target.parent.setPropValue('btnType', 'default');
target.parent.setPropValue('type', 'batch');
break;
case 'DataAddDialog':
target.parent.setPropValue('type', 'action');
target.parent.setPropValue('children', {
type: 'JSSlot',
// params: ['initialValues', 'index', 'reload'],
value: [
{
componentName: 'DataAddDialog',
id: `node_${uuid()}`,
props: {
btnText: '新增',
btnType: 'primary',
title: '新增数据',
reload: {
type: 'JSExpression',
value: 'this.reload',
},
items: [
{
component: 'Input',
title: '表单项',
name: `input_${uuid()}`,
},
],
},
},
],
id: `node_${uuid()}`,
});
break;
case 'Button':
target.parent.setPropValue('type', 'action');
target.parent.setPropValue('btnType', 'default');
target.parent.setPropValue('btnText', '按钮');
target.parent.setPropValue('children', null);
break;
default:
break;
}
},
},
},
{
name: 'visible',
title: { label: '是否显示', tip: 'visible | 是否显示' },
setter: 'BoolSetter',
},
{
title: '操作类型',
name: 'type',
setter: {
componentName: 'SelectSetter',
props: {
options: [
{
label: '批量类（左侧）',
value: 'batch',
},
{
label: '新增类（右侧）',
value: 'action',
},
// {
// label: '过滤条件',
// value: 'filter',
// },
],
},
initialValue: 'action',
},
condition: (target: any) => !getPropValueWithPath(target, '.__optionType'),
},
...getPropsByDependence(
historyProps,
['HistoryPush', 'HistoryOpen'],
'.__optionType',
),
...getPropsByDependence(buttonsProps, ['Button'], '.__optionType'),
// 按钮相关setter
...getPropsByDependence(batchButtonProps, ['Batch'], '.__optionType'),
{
name: 'onClick', // 新增类事件
title: '点击事件',
supportVariable: false,
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'SchemaFunctionSetter',
props: {
title: 'onClick',
async: false,
properties: {
body: {
type: 'array',
items: [
{
type: 'Function',
properties: {
template: 'SetStateFunction',
extraProps: {
state: 'visible',
value: '{{true}}',
},
},
},
],
},
},
required: ['body'],
},
},
{
componentName: 'FunctionSetter',
props: {
template:
'function onClick() {\n this.setState({\n isShowDialog: true\n });\n}',
},
},
],
},
},
condition: (target: any) => {
return (
getPropValueWithPath(target, '.btnType') !== '' &&
['action'].includes(getPropValueWithPath(target, '.type'))
);
},
},
{
name: 'onClick', // 批量操作类事件
title: '点击事件',
supportVariable: false,
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'SchemaFunctionSetter',
props: {
title: 'onBatchClick',
async: false,
properties: {
input: {
type: 'object',
properties: {
keys: {
type: 'array',
},
data: {
type: 'array',
},
},
required: ['keys', 'data'],
},
body: {
type: 'array',
items: [
{
type: 'Function',
properties: {
template: 'RequestFunction',
variable: 'requestRes',
extraProps: {},
},
},
],
},
},
required: ['input', 'body'],
},
},
{
componentName: 'FunctionSetter',
props: {
template:
'function onBatchClick(keys, data) {\n console.log(keys, data); \n}',
},
},
],
},
},
condition: (target: any) => {
return (
getPropValueWithPath(target, '.btnType') !== '' &&
['batch'].includes(getPropValueWithPath(target, '.type'))
);
},
},
{
name: 'children',
title: {
label: '自定义操作',
tip: 'children | 自定义操作按钮',
},
propType: 'func',
setter: {
componentName: 'SlotSetter',
title: '自定义操作按钮',
props: {
hideParams: false,
},
initialValue: {
type: 'JSSlot',
hideParams: false,
supportParams: true,
params: ['initialValues', 'index', 'reload'],
value: [],
},
},
condition: (target: any) => !getPropValueWithPath(target, '.__optionType'),
},
],
},
},
initialValue: {
btnText: '操作',
},
},
},
},
};
const TableBaseProps: IPublicTypeFieldConfig[] = [
{
name: 'ref',
title: {
label: '组件标识',
tip: "ref | 通过 this.$('xxx') 获取到组件实例",
},
defaultValue: () => {
return `table_${uuid()}`;
},
setter: {
componentName: 'StringSetter',
},
supportVariable: false,
extraProps: {
setValue: (target, value) => {
registerActions(target, [
{
path: value,
type: 'reload',
},
]);
},
},
},
{
name: 'rowKey',
supportVariable: false,
title: { label: '主键', tip: 'rowKey | 主键' },
setter: {
componentName: 'StringSetter',
isRequired: true,
initialValue: 'id',
},
},
{
title: { label: '总条数', tip: 'showTotal | 是否显示总条数' },
supportVariable: false,
setter: {
componentName: 'BoolSetter',
initialValue: true,
},
},
{
name: 'scroll',
title: { label: '滚动条', tip: 'scroll | 滚动条' },
supportVariable: false,
setter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
{
name: 'x',
title: { label: '横向滚动', tip: 'x | 滚动条' },
setter: 'NumberSetter',
extraProps: {
setValue: (target, value) => {
target.parent.parent.setPropValue('sticky', !!value);
},
},
},
{
name: 'y',
title: { label: '纵向滚动', tip: 'y | 滚动条' },
setter: 'NumberSetter',
},
],
},
},
},
},
{
title: { label: '行对齐', tip: 'rowAlign | 行对齐方式' },
supportVariable: false,
name: 'rowAlign',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [
{
label: '顶部对齐',
value: 'top',
},
{
label: '居中对齐',
value: 'middle',
},
],
},
initialValue: 'top',
},
},
{
title: {
label: '表格类型',
tip: 'rowSelection.tableType | 表格类型',
},
supportVariable: false,
name: 'tableType',
description: '类型',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [
{
label: '默认表格',
value: 'default',
},
{
label: '分组表格',
value: 'group',
},
],
},
initialValue: 'default',
},
},
{
title: { label: '虚拟列表', tip: 'useVirtual | 是否开启虚拟列表' },
name: 'useVirtual',
description: '开启虚拟列表',
supportVariable: false,
setter: {
componentName: 'BoolSetter',
isRequired: false,
initialValue: false,
},
},
{
title: '行选择器',
display: 'block',
type: 'group',
items: [
{
name: 'rowSelection',
title: { label: '行选择', tip: 'rowSelection | 行选择' },
setter: 'BoolSetter',
defaultValue: false,
extraProps: {
setValue: (target, value) => {
if (value) {
target.parent.setPropValue('rowSelection', {
type: 'checkbox',
});
}
},
},
},
{
name: 'rowSelection.type',
title: { label: '行选择类型', tip: 'rowSelection.type | 多选/单选' },
propType: {
type: 'oneOf',
value: ['checkbox', 'radio'],
},
supportVariable: false,
setter: [
{
componentName: 'RadioGroupSetter',
props: {
options: [
{
title: '多选',
value: 'checkbox',
},
{
title: '单选',
value: 'radio',
},
],
},
initialValue: 'checkbox',
},
],
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: {
label: '展示所选总数',
tip: 'rowSelection.hideSelectTotal | 显示所选总数',
},
name: 'rowSelection.hideSelectTotal',
setter: {
componentName: 'BoolSetter',
},
supportVariable: false,
condition: {
type: 'JSFunction',
value: 'target => !!target.getProps().getPropValue("rowSelection")',
},
},
],
},
{
name: 'columns',
title: { label: '表格列', tip: '表格列的配置描述，具体项见下表' },
supportVariable: false,
setter: {
componentName: 'ArraySetter',
props: {
itemSetter: {
componentName: 'ObjectSetter',
props: {
descriptor: 'title',
config: {
items: [
{
name: 'title',
title: { label: '列标题', tip: 'title | 列标题' },
propType: { type: 'oneOfType', value: ['string', 'func'] },
isRequired: true,
setter: [
'StringSetter',
{
componentName: 'SlotSetter',
hideParams: true,
title: '列标题插槽',
initialValue: {
type: 'JSSlot',
params: ['options'],
value: [],
},
},
],
},
{
name: 'dataIndex',
title: { label: '数据字段', tip: 'dataIndex | 数据字段' },
propType: 'string',
isRequired: true,
defaultValue: 'id',
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'SelectSetter',
props: {
options: (window as any).NameOptions || [],
showSearch: true,
},
},
{
componentName: 'StringSetter',
},
],
},
},
extraProps: {
setValue: (target, value) => {
if (value) {
target.parent.parent
.getProps()
.setPropValue(`columns.${target.parent.name}.key`, value);
target.parent.parent
.getProps()
.setPropValue(`columns.${target.parent.name}.dataIndex`, value);
}
},
},
},
{
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: 'width',
title: { label: '宽度', tip: 'width | 宽度' },
propType: {
type: 'oneOfType',
value: ['number', 'string'],
},
setter: ['NumberSetter', 'StringSetter'],
},
{
name: 'component',
title: {
label: '组件',
tip: 'component | 提供简单类型的内容渲染模板，复杂类型请自定义',
},
propType: 'string',
setter: {
componentName: 'SelectSetter',
isRequired: false,
props: {
options: [
{
label: '序号 | IndexCol',
value: 'IndexCol',
},
{
label: '缺省占位 | EmptyCol',
value: 'EmptyCol',
},
{
label: '价格 | Price',
value: 'Price',
},
{
label: '可复制 | CopyCol',
value: 'CopyCol',
},
{
label: '时间 | Time',
value: 'Time',
},
{
label: '表单项 | YwJsonForm',
value: 'YwJsonForm',
},
{
label: '自定义渲染',
value: '',
},
],
},
initialValue: 'EmptyCol',
},
// condition: (target) => !!getPropValue(target, '.dataIndex'),
// condition: {
// type: 'JSFunction',
// value:
// 'target => !!target.parent.parent.getProps().getPropValue(`columns.${target.parent.name}.dataIndex`)',
// },
},
{
title: { label: '表单项配置', tip: 'componentProps | 表单项配置' },
name: 'componentProps',
display: 'accordion',
setter: {
componentName: 'ObjectSetter',
props: {
config: {
items: tableFormItemProps,
},
},
},
condition: (target: any) => ['YwJsonForm'].includes(getPropValueWithPath(target, '.component')),
},
{
name: '_render',
title: {
label: '内容',
tip: 'render | 选择组件库-基础组件-表格子元素内的模块',
},
propType: 'func',
setter: {
componentName: 'SlotSetter',
title: '表格内容插槽',
hideParams: true,
initialValue: {
type: 'JSSlot',
params: ['text', 'record', 'index', 'tableRef'],
value: [],
},
},
condition: {
type: 'JSFunction',
value:
'target => !target.parent.parent.getProps().getPropValue(`columns.${target.parent.name}.component`)',
},
},
],
},
},
initialValue: { title: '表格项', dataIndex: 'id', component: 'IndexCol' }, // component改为IndexCol，解决初始化切换数据字段setter时找不到dataIndex和key的报错
},
},
},
},
tableButtonsProps,
{
name: 'getTableData',
title: '数据请求',
// gpt: {
// type: 'api',
// name: '数据请求',
// description: '数据请求',
// funcParams: ['value', 'field'], // 配置函数的参数名字
// },
setter: {
componentName: 'SchemaFunctionSetter',
props: {
title: 'getTableData',
async: true,
properties: {
input: {
type: 'object',
properties: {
values: {
type: 'object',
},
},
required: ['values'],
},
body: {
type: 'array',
items: [
{
type: 'Function',
properties: {
template: 'RequestFunction',
variable: 'result',
extraProps: {
// apiId: 'API_344_77522_323217f643c3e3f1fe7532e72ac01bb0748c97be',
params: '{{values}}',
apiType: 5,
},
},
},
],
},
output: 'result',
},
required: ['input', 'body', 'output'],
},
// props:
},
},
{
name: 'dataSource',
title: '静态数据源',
supportVariable: false,
setter: {
componentName: 'MixedSetter',
props: {
setters: ['VariableSetter'],
},
},
},
{
name: 'filterProps',
title: '查询参数',
supportVariable: false,
setter: {
componentName: 'MixedSetter',
props: {
setters: ['VariableSetter'],
},
},
defaultValue: {
type: 'JSExpression',
value: 'this.state.filterProps',
},
},
];
export default TableBaseProps;