@cainiaofe/cn-ui-lowcode
Version:
545 lines (540 loc) • 16.1 kB
JavaScript
import {
generateIndex,
getItemDefaultProps,
handleI18nLabel,
} from '@/common/util/util';
import {
getButtonListByPosition,
getButtonPrototypeListByPosition,
} from '@/common/manager/button';
import { ButtonPosition } from '@/common/manager/position/button-position';
import { TableAddOneBtn } from '../component/table-add-one';
import { DisplayPosition } from '@/common/manager/position/display-position';
import { createFormatSetters } from '@/lowcode/cn-table-alc/prototype/format';
import { getJSExpressionPrototype } from '@/common/manager/common-style';
import NumberPickerSetter from '@/common/setter/number-picker-setter';
import { getJSXTemplate } from '@/common/manager/setter-snippet';
import DocLinkSetter from '@/common/setter/doc-link-setter';
import { CnIcon, CnTooltip } from '@cainiaofe/cn-ui'
// import ListSetter2 from '../../../../../../../../uidesigner/lego/vs-list/src/index'
// const createColumnsSetters = () => {
// const buttonList = ['link','request','dialog'];
// const tempButtonList = getButtonList(buttonList)
// return (
// <ListSetter
// descriptor="title"
// checkField={null}
// display="drawer"
// configure={[
// {
// name: 'title',
// title: '标题',
// display: 'inline',
// initialValue:'姓名',
// editable: true,
// setter: <TextSetter />,
// },
// {
// name: 'dataIndex',
// title: '数据字段',
// display: 'inline',
// initialValue:'name',
// // supportVariable: true,
// // initialValue: function init(val) {
// // if (val) return val;
// // return uniqueId(null, 'dataIndex');
// // },
// editable: true,
// setter: <TextSetter />,
// },
// {
// name: 'format',
// title: '数据类型',
// display: 'inline',
// setter: <SelectSetter
// options={[
// { value: 'text', title: '文本' },
// { value: 'number', title: '数字' },
// { value: 'currency', title: '金额展示' },
// { value: 'currency-with-unit', title: '金额展示（带币种）' },
// { value: 'percent', title: '百分比' },
// { value: 'bank', title: '银行卡号' },
// { value: 'date-time', title: '时间' },
// ]}
// />,
// },
// {
// title: '配置单元格的点击行为',
// type:'group',
// display: 'accordion',
// collapsed:true,
// },
// {
// name: 'optType',
// title: '按钮类型',
// // isRequired:true,
// display:'inline',
// extraProps: {
// setValue(target,value){
// const currentRowValue = target?.parent?.getValue()
// const newButtonInitialValue = getButtonInitialValue(value)
// target?.parent.setValue({
// ...currentRowValue,
// optType: value,
// options:newButtonInitialValue,
// })
// },
// },
// // editable: true,
// setter: {
// componentName: "SelectSetter",
// props:{
// options:tempButtonList,
// }
// },
// },
// {
// name: 'options',
// display: 'block',
// title: '按钮配置项',
// setter: {
// componentName: "ObjectSetter",
// props: {
// config: {
// items: [
// ...getButtonPrototypeList(buttonList)
// ]
// }
// }
// }
// },
// {
// title: '样式',
// type:'group',
// display: 'accordion',
// collapsed:true,
// },
// {
// name: 'width',
// title: '宽度',
// tip:'设计规范规定，不建议修改',
// display: 'inline',
// setter: <NumberSetter />,
// },
// // {
// // name: 'align',
// // title: '对齐方式',
// // display: 'inline',
// // initialValue: 'left',
// // setter: (
// // <ChoiceSetter
// // options={[
// // { value: 'left', title: '居左' },
// // { value: 'center', title: '居中' },
// // { value: 'right', title: '居右' },
// // ]}
// // />
// // ),
// // },
// {
// name: 'lock',
// title: '列固定',
// display: 'inline',
// initialValue: false,
// setter: (
// <ChoiceSetter
// options={[
// { value: false, title: '不固定' },
// { value: 'left', title: '左侧' },
// { value: 'right', title: '右侧' },
// ]}
// />
// ),
// },
// {
// name: 'hidden',
// title: '是否隐藏',
// display: 'inline',
// // supportVariable: true,
// // initialValue: false,
// setter: <BoolSetter />,
// },
// {
// name: 'sortable',
// title: '开启排序',
// display: 'inline',
// initialValue: false,
// setter: <BoolSetter />,
// // supportVariable: true,
// },
// {
// name: 'filter',
// title: '开启过滤',
// display: 'inline',
// initialValue: false,
// setter: <BoolSetter />,
// // supportVariable: true,
// },
// // {
// // name: 'sizeFixed',
// // title: '列宽自动',
// // display: 'inline',
// // initialValue: true,
// // setter: <BoolSetter />,
// // supportVariable: true,
// // },
// // ...(hasChildren
// // ? [
// // {
// // name: 'children',
// // title: '子表头',
// // display: 'accordion',
// // setter: createColumnsSetters(false),
// // },
// // ]
// // : []),
// ]}
// />
// );
// };
const createColumnsSetters2 = () => {
const buttonPosition = ButtonPosition.tableCell;
const configure = [
{
name: 'title',
title: '列头文案',
display: 'inline',
// initialValue:'姓名',
editable: true,
isRequired: true,
setter: 'CnI18nSetter',
},
{
name: 'dataIndex',
title: '数据字段',
display: 'inline',
editable: true,
isRequired: true,
setter: 'StringSetter',
},
...createFormatSetters({
position: DisplayPosition.tableCell,
}),
{
title: '配置单元格的点击行为',
type: 'group',
display: 'accordion',
collapsed: true,
extraProps: {
defaultCollapsed: true,
},
items: [
{
name: 'optType',
title: '按钮功能',
// isRequired:true,
display: 'inline',
extraProps: {
setValue(target, value) {
const newButtonInitialValue = getItemDefaultProps(
buttonPosition,
value,
);
if (newButtonInitialValue) {
const oldOptions =
target?.parent?.getPropValue?.('options') || {};
target?.parent?.setPropValue?.('options', {
...oldOptions,
...newButtonInitialValue,
});
}
},
},
// editable: true,
setter: {
componentName: 'CnSelectSetter',
props: {
selectProps: {
hasClear: true,
},
options: getButtonListByPosition(buttonPosition),
},
},
},
{
name: 'options',
display: 'plain',
title: '按钮配置项',
setter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [...getButtonPrototypeListByPosition(buttonPosition)],
},
},
},
},
],
},
{
title: '样式',
type: 'group',
display: 'accordion',
collapsed: true,
extraProps: {
defaultCollapsed: true,
},
items: [
{
name: 'width',
title: {
label: (
<div style={{display:'flex',alignItems:'center'}}>
列宽度 <CnTooltip
align={'b'}
trigger={<CnIcon type={'help'}/>}>
{/* 当表格有剩余宽度时，<br/>列的宽度会按比例增加 */}
列宽设置后，<br/>将不再根据屏幕宽度自适应
</CnTooltip>
</div>
),
},
// tip: '当表格有富余宽度时，列宽会按比例增加',
display: 'inline',
setter: (
<NumberPickerSetter
style={{ width: '100%' }}
placeholder={'请输该列宽度的像素值（单位：px）'}
/>
),
},
// {
// name: 'sizeFixed',
// title: '固定列宽度',
// display: 'inline',
// tip: '列的宽度为固定像素值，不会按比例增加',
// setter: 'BoolSetter'
// },
{
name: 'lock',
title: '列固定',
display: 'inline',
// initialValue: false,
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [
{ value: false, title: '不固定' },
{ value: 'left', title: '固定在左侧' },
{ value: 'right', title: '固定在右侧' },
],
},
},
},
{
name: 'align',
title: '内容对齐方式',
display: 'inline',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [
{ value: undefined, title: '不设置' },
{ value: 'left', title: '靠左' },
{ value: 'center', title: '居中' },
{ value: 'right', title: '靠右' },
],
},
},
},
{
name: 'hidden',
title: '是否隐藏',
display: 'inline',
// supportVariable: true,
// initialValue: false,
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'BoolSetter',
title: '布尔（true/false）',
},
getJSExpressionPrototype({ type: 'base' }),
],
},
},
},
{
name: 'sortable',
title: '开启排序',
display: 'inline',
// initialValue: false,
setter: 'BoolSetter',
// supportVariable: true,
},
{
name: 'filter',
title: '开启过滤',
display: 'inline',
// initialValue: false,
setter: 'BoolSetter',
// supportVariable: true,
},
{
name: 'tip',
title: '表头提示',
display: 'inline',
setter: 'CnI18nSetter',
},
{
name: 'parent',
title: '列嵌套（选择成为哪一列的子级）',
display: 'inline',
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'CnSelectSetter',
props: (field) => {
const options = [];
const columns = field
?.getNode?.()
?.getPropValue?.('columns');
if (Array.isArray(columns)) {
columns.forEach((item) => {
const { title, dataIndex } = item || {};
if (dataIndex) {
const label = handleI18nLabel(title) || dataIndex;
options.push({
value: dataIndex,
label,
});
}
});
}
return {
options,
selectProps: {
hasClear: true,
},
};
},
},
],
},
},
},
],
},
{
title: '高级',
type: 'group',
display: 'accordion',
collapsed: true,
extraProps: {
defaultCollapsed: true,
},
items: [
{
name: 'cellRender',
title: '自定义单元格渲染（已废弃）',
display: 'inline',
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: (
<DocLinkSetter
disabled
content={
<div
style={{ color: 'red', whiteSpace: 'break-spaces' }}
>
请使用内置数据类型，自定义渲染因投诉过多暂时关闭
</div>
}
/>
),
title: '不使用自定义渲染',
},
// position: DisplayPosition.tableCell,
// }),
],
},
},
},
],
},
];
return {
componentName: 'ArraySetter',
props: {
mode: 'list',
extraProps: {
renderFooter(props) {
return <TableAddOneBtn {...props} />;
},
},
itemSetter: {
componentName: 'ObjectSetter',
// initialValue: {
// "type": "JSFunction",
// "value": "() => {return {primaryKey: String(Math.floor(Math.random() * 10000)),children: \"Title\",optType:\"link\" };}"
// },
// initialValue:{
// title:'字段名',
// dataIndex: 'field',
// lock: false,
// sortable: false,
// filter: false
// },
initialValue(prop) {
const existFields = prop.getValue() || [];
const defaultLabel = '字段名';
const defaultName = 'field';
const newNameIndex = generateIndex(
existFields,
defaultName,
'dataIndex',
);
return {
// primaryKey: String(Math.floor(Math.random() * 10000)),
title: `${defaultLabel}${newNameIndex}`,
dataIndex: `${defaultName}${newNameIndex}`,
// format: 'text',
lock: false,
sortable: false,
filter: false,
};
},
props: {
config: {
items: configure,
},
},
},
},
};
};
export default function () {
return {
name: 'columns',
title: '表格列配置',
display: 'accordion',
initialValue: [
// {
// title: "姓名",
// dataIndex: "name",
// lock: false,
// sortable: false,
// filter: false
// }
],
setter: createColumnsSetters2(),
// supportVariable: true,
};
}