@cainiaofe/cn-ui-m-lowcode/src/lowcode/cn-table/prototype/columns.js

## 在线文档

import { generateIndex } from '@/common/util/util';
import { ButtonPosition } from '@/type/button-position';
import { DisplayPosition } from '@/type/display-position';
import { createFormatSetters } from '@/lowcode/cn-table/prototype/format';
import { getJSExpressionPrototype } from "@/common/manager/common-style";
import { getJSXTemplate, getMixedSetterSnippet } from '@/common/manager/setter-snippet';
import TipSetter from '@/common/setter/tip-setter';

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: '宽度',
    //   display: 'inline',
    //   setter: 'NumberSetter',
    // },
    // {
    //   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: '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: getMixedSetterSnippet({
            setters: [
              <TipSetter tip={'请点击右侧切换按钮写JS表达式'}/>,
              getJSXTemplate({
                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,
  };
}