@ywfe/materials-design/lowcode_lib/_base/table-base-props.js

YwDesign for lowcode

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _index = require("./index");
var _jsonFormBaseProps = require("./json-form-base-props");
var _utils = require("../_utils");
var historyProps = [{
  display: 'block',
  title: {
    label: '按钮文字',
    tip: 'btnText | 按钮文字'
  },
  name: 'btnText',
  description: '按钮文字',
  supportVariable: false,
  setter: {
    componentName: 'StringSetter',
    initialValue: '按钮',
    props: {
      placeholder: '请输入'
    }
  }
}, {
  display: 'block',
  title: {
    label: '按钮类型',
    tip: 'btnType | 按钮类型'
  },
  supportVariable: false,
  name: 'btnType',
  description: '按钮类型',
  defaultValue: 'default',
  setter: {
    componentName: 'RadioGroupSetter',
    props: {
      options: [{
        label: '主按钮',
        value: 'primary'
      }, {
        label: '次按钮',
        value: 'default'
      }, {
        label: '自定义按钮',
        value: ''
      }]
    },
    initialValue: 'primary'
  }
}, {
  display: 'block',
  title: {
    label: '跳转地址',
    tip: '_url | 跳转地址 如 /a/b/c, '
  },
  name: '_url',
  setter: {
    componentName: 'MixedSetter',
    props: {
      setters: [{
        componentName: 'StringSetter'
      }, {
        componentName: 'VariableSetter'
      }]
    }
  },
  extraProps: {
    getValue: function getValue(target, value) {
      return value || '/';
    },
    setValue: function setValue(target, v) {
      var type = (0, _utils.getPropValueWithPath)(target, '.__optionType');
      var value = v.value || "'" + v + "'";
      var 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]
      });
    }
  }
}];
var tableButtonsProps = {
  title: '数据操作区配置',
  name: 'buttons',
  // display: 'accordion',
  supportVariable: false,
  setter: {
    componentName: 'ArraySetter',
    props: {
      itemSetter: {
        componentName: 'ObjectSetter',
        props: {
          descriptor: 'primaryKey',
          config: {
            items: [_jsonFormBaseProps.primaryKeyConfig, {
              name: '__optionType',
              display: 'block',
              title: {
                label: '操作类型',
                tip: '__optionType | 操作类型'
              },
              supportVariable: false,
              setter: {
                componentName: 'SelectSetter',
                isRequired: true,
                defaultValue: 'Button',
                props: {
                  options: [{
                    label: '普通按钮',
                    value: 'Button'
                  }, {
                    label: '页面跳转(当前页)',
                    value: 'HistoryPush'
                  }, {
                    label: '页面跳转(新开页面)',
                    value: 'HistoryOpen'
                  }, {
                    label: '新建数据(弹窗)',
                    value: 'DataAddDialog'
                  }, {
                    label: '数据记录(表格弹窗)',
                    value: 'TableDialog'
                  }, {
                    label: '批量操作',
                    value: 'Batch'
                  }, {
                    label: '导入数据（开发中）',
                    value: 'ConfirmModal'
                  }, {
                    label: '导出数据（开发中）',
                    value: 'ConfirmModal'
                  }, {
                    label: '导入记录（开发中）',
                    value: 'ConfirmModal'
                  }, {
                    label: '自定义操作',
                    value: ''
                  }]
                }
              },
              extraProps: {
                setValue: function setValue(target, v) {
                  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',
                          props: {
                            btnText: '新增',
                            btnType: 'primary',
                            title: '新增数据',
                            reload: {
                              type: 'JSExpression',
                              value: 'this.reload'
                            },
                            items: [{
                              component: 'Input',
                              title: '表单项',
                              name: "input_" + (0, _utils.uuid)()
                            }]
                          }
                        }]
                      });
                      break;
                    case 'TableDialog':
                      target.parent.setPropValue('type', 'action');
                      target.parent.setPropValue('children', {
                        type: 'JSSlot',
                        value: [{
                          componentName: 'YwTableDialog',
                          props: {
                            btnText: '查看记录',
                            btnType: 'primary',
                            title: '查看记录',
                            reload: {
                              type: 'JSExpression',
                              value: 'this.reload'
                            }
                          }
                        }]
                      });
                      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;
                  }
                }
              }
            }, {
              display: 'block',
              name: 'visible',
              title: {
                label: '是否显示',
                tip: 'visible | 是否显示'
              },
              setter: {
                componentName: 'MixedSetter',
                props: {
                  setters: ['VariableSetter']
                }
              }
            }, {
              title: '操作类型',
              name: 'type',
              setter: {
                componentName: 'SelectSetter',
                props: {
                  options: [{
                    label: '批量类（左侧）',
                    value: 'batch'
                  }, {
                    label: '新增类（右侧）',
                    value: 'action'
                  }
                  // {
                  //   label: '过滤条件',
                  //   value: 'filter',
                  // },
                  ]
                },
                initialValue: 'action'
              },
              condition: function condition(target) {
                return !(0, _utils.getPropValueWithPath)(target, '.__optionType');
              }
            }].concat((0, _utils.getPropsByDependence)(historyProps, ['HistoryPush', 'HistoryOpen'], '.__optionType'), (0, _utils.getPropsByDependence)(_index.YwButtonBaseProps, ['Button'], '.__optionType'), (0, _utils.getPropsByDependence)(_index.YwButtonBaseProps, ['Batch'], '.__optionType'), [{
              name: 'onClick',
              // 新增类事件
              title: '点击事件',
              display: 'block',
              supportVariable: false,
              setter: {
                componentName: 'SchemaFunctionSetter',
                props: {
                  title: 'onClick',
                  async: true,
                  properties: {
                    body: {
                      type: 'array',
                      items: [{
                        type: 'Function',
                        properties: {
                          template: 'SetStateFunction',
                          extraProps: {
                            state: 'visible',
                            value: '{{true}}'
                          }
                        }
                      }]
                    }
                  },
                  required: ['body']
                }
              },
              condition: function condition(target) {
                return (0, _utils.getPropValueWithPath)(target, '.btnType') !== '' && !(0, _utils.getPropValueWithPath)(target, '.children') && ['action'].includes((0, _utils.getPropValueWithPath)(target, '.type'));
              }
            }, {
              name: 'onClick',
              // 批量操作类事件
              title: '点击事件',
              supportVariable: false,
              setter: function setter(target) {
                var ref = (0, _utils.getPropValueWithPath)(target, '...ref');
                return {
                  componentName: 'SchemaFunctionSetter',
                  props: {
                    title: 'onBatchClick',
                    async: true,
                    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: {}
                          }
                        }, {
                          type: 'Function',
                          properties: {
                            template: 'DispatchFunction',
                            extraProps: {
                              path: ref,
                              type: 'batch',
                              data: '{{undefined}}'
                            }
                          }
                        }]
                      }
                    },
                    required: ['input', 'body']
                  }
                };
              },
              condition: function condition(target) {
                return (0, _utils.getPropValueWithPath)(target, '.btnType') !== '' && !(0, _utils.getPropValueWithPath)(target, '.children') && ['batch'].includes((0, _utils.getPropValueWithPath)(target, '.type'));
              }
            }, {
              name: 'children',
              title: {
                label: '自定义操作',
                tip: 'children | 自定义操作按钮'
              },
              propType: 'func',
              setter: {
                componentName: 'SlotSetter',
                title: '自定义操作按钮',
                props: {
                  hideParams: true
                },
                initialValue: {
                  type: 'JSSlot',
                  hideParams: true,
                  value: []
                }
              },
              condition: function condition(target) {
                return !(0, _utils.getPropValueWithPath)(target, '.__optionType');
              }
            }])
          }
        },
        initialValue: {
          __optionType: 'Button'
        }
      }
    }
  }
};
var TableBaseProps = [(0, _utils.getRefConfig)('table', [{
  type: 'reload'
}]), {
  name: 'columns',
  title: {
    label: '表格列',
    tip: '表格列的配置描述，具体项见下表'
  },
  supportVariable: false,
  display: 'accordion',
  setter: {
    componentName: 'ArraySetter',
    props: {
      itemSetter: {
        componentName: 'ObjectSetter',
        props: {
          descriptor: 'title',
          config: {
            items: [{
              display: 'block',
              name: 'title',
              title: {
                label: '标题',
                tip: 'title | 列头显示文字'
              },
              supportVariable: false,
              propType: {
                type: 'oneOfType',
                value: ['string', 'func']
              },
              isRequired: true,
              setter: {
                componentName: 'StringSetter',
                props: {
                  placeholder: '请输入列头名称'
                }
              }
            }, {
              display: 'block',
              name: 'dataIndex',
              title: {
                label: '字段',
                tip: 'dataIndex | 列数据在数据项中对应的路径，支持通过数组查询嵌套路径'
              },
              propType: 'string',
              // isRequired: true,
              supportVariable: false,
              defaultValue: 'id',
              setter: 'StringSetter',
              extraProps: {
                setValue: function 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);
                  }
                }
              }
            }, {
              display: 'block',
              name: 'width',
              supportVariable: false,
              title: {
                label: '宽度',
                tip: 'width | 列的宽度，建议区间 80 ~ 150'
              },
              propType: {
                type: 'oneOfType',
                value: ['number', 'string']
              },
              setter: 'NumberSetter'
            }, {
              display: 'block',
              name: 'component',
              title: {
                label: '渲染组件',
                tip: 'component | 提供简单类型的内容渲染模板，复杂类型请自定义'
              },
              supportVariable: false,
              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', // todo 渲染有问题 暂时不透出
                  //   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')),
            // },
            {
              display: 'block',
              name: '_render',
              title: {
                label: '自定义组件',
                tip: 'render | 选择组件库-基础组件-表格子元素内的模块'
              },
              propType: 'func',
              supportVariable: false,
              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`)'
              }
            }, {
              display: 'block',
              name: 'fixed',
              supportVariable: false,
              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'
                  }]
                }
              }
            }]
          }
        },
        initialValue: {
          title: '表头名称',
          dataIndex: (0, _utils.uuid)(),
          component: 'EmptyCol'
        } // component改为IndexCol，解决初始化切换数据字段setter时找不到dataIndex和key的报错
      }
    }
  }
}, {
  name: 'tableDataSource',
  title: '数据源',
  type: 'group',
  display: 'entry',
  items: [{
    display: 'block',
    name: 'rowKey',
    supportVariable: false,
    title: {
      label: '主键',
      tip: 'rowKey | 数据唯一标识'
    },
    setter: {
      componentName: 'StringSetter',
      props: {
        placeholder: '请输入'
      },
      isRequired: true,
      initialValue: 'id'
    }
  }, {
    display: 'block',
    name: 'getTableData',
    title: '数据请求',
    supportVariable: false,
    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']
      }
    }
  }, {
    display: 'block',
    name: 'dataSource',
    title: {
      label: '静态数据源',
      tip: 'dataSource | 静态数据源'
    },
    setter: {
      componentName: 'MixedSetter',
      props: {
        setters: ['VariableSetter']
      }
    }
  }, {
    display: 'block',
    name: 'filterProps',
    title: '查询参数',
    setter: {
      componentName: 'MixedSetter',
      props: {
        setters: ['VariableSetter']
      }
    },
    defaultValue: {
      type: 'JSExpression',
      value: 'this.state.filterProps'
    }
  }]
}, tableButtonsProps, {
  name: 'rowSelectConfig',
  title: '行选择器配置',
  display: 'entry',
  type: 'group',
  items: [{
    display: 'block',
    name: 'rowSelection',
    title: {
      label: '行选择',
      tip: 'rowSelection | 行选择'
    },
    setter: 'BoolSetter',
    defaultValue: false,
    extraProps: {
      setValue: function setValue(target, value) {
        if (value) {
          target.parent.setPropValue('rowSelection', {
            type: 'checkbox'
          });
        }
      }
    }
  }, {
    display: 'block',
    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")'
    }
  }, {
    display: 'block',
    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")'
    }
  }, {
    display: 'block',
    title: {
      label: '隐藏所选总数',
      tip: 'rowSelection.hideSelectTotal | 隐藏所选总数'
    },
    name: 'rowSelection.hideSelectTotal',
    setter: {
      componentName: 'BoolSetter'
    },
    supportVariable: false,
    condition: {
      type: 'JSFunction',
      value: 'target => !!target.getProps().getPropValue("rowSelection")'
    }
  }]
}, {
  name: 'scroll',
  title: '滚动条',
  display: 'entry',
  type: 'group',
  items: [{
    name: 'scroll.x',
    display: 'block',
    title: {
      label: '横向滚动',
      tip: 'scroll.x | 一般为1500 ~ 2000，开启后建议固定头尾列'
    },
    supportVariable: false,
    setter: {
      componentName: 'NumberSetter',
      props: {
        placeholder: '横向滚动距离，单位px'
      }
    },
    extraProps: {
      setValue: function setValue(target, value) {
        target.parent.setPropValue('sticky', !!value);
      }
    }
  }, {
    name: 'scroll.y',
    display: 'block',
    title: {
      label: '纵向滚动',
      tip: 'scroll.y | 一般不建议开启'
    },
    supportVariable: false,
    setter: {
      componentName: 'NumberSetter',
      props: {
        placeholder: '纵向滚动距离，单位px'
      }
    }
  }]
}, {
  name: 'otherConfig',
  title: '其它属性',
  display: 'entry',
  type: 'group',
  items: [
  // {
  //   display: 'block',
  //   name: 'ref',
  //   title: {
  //     label: '组件标识',
  //     tip: "ref | 通过 this.$('xxx') 获取到组件实例",
  //   },
  //   setter: {
  //     initialValue: `table_${uuid()}`,
  //     componentName: 'StringSetter',
  //     props: {
  //       placeholder: '请输入',
  //     },
  //   },
  //   supportVariable: false,
  //   extraProps: {
  //     setValue: (target, value) => {
  //       registerActions(target, [
  //         {
  //           path: value,
  //           type: 'reload',
  //         },
  //       ]);
  //     },
  //   },
  // },
  {
    display: 'block',
    title: {
      label: '总条数',
      tip: 'showTotal | 是否显示总条数'
    },
    supportVariable: false,
    setter: {
      componentName: 'BoolSetter',
      initialValue: true
    }
  }, {
    display: 'block',
    title: {
      label: '行对齐',
      tip: 'rowAlign | 行对齐方式'
    },
    supportVariable: false,
    name: 'rowAlign',
    setter: {
      componentName: 'RadioGroupSetter',
      props: {
        options: [{
          label: '顶部对齐',
          value: 'top'
        }, {
          label: '居中对齐',
          value: 'middle'
        }]
      },
      initialValue: 'top'
    }
  }, {
    display: 'block',
    title: {
      label: '表格类型',
      tip: 'rowSelection.tableType | 表格类型'
    },
    supportVariable: false,
    name: 'tableType',
    description: '类型',
    setter: {
      componentName: 'RadioGroupSetter',
      props: {
        options: [{
          label: '默认表格',
          value: 'default'
        }, {
          label: '分组表格',
          value: 'group'
        }]
      },
      initialValue: 'default'
    }
  }, {
    display: 'block',
    title: {
      label: '虚拟列表',
      tip: 'useVirtual | 是否开启虚拟列表'
    },
    name: 'useVirtual',
    description: '开启虚拟列表',
    supportVariable: false,
    setter: {
      componentName: 'BoolSetter',
      isRequired: false,
      initialValue: false
    }
  }, {
    display: 'block',
    title: {
      label: '分页器',
      tip: '是否展示分页器'
    },
    name: 'pagination',
    description: '是否展示分页器',
    supportVariable: false,
    setter: {
      componentName: 'MixedSetter',
      props: {
        setters: [{
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [{
                name: 'pageSize',
                title: {
                  label: '每页条数',
                  tip: 'pageSize | 每页条数'
                },
                setter: 'NumberSetter',
                supportVariable: false
              }, {
                name: 'showQuickJumper',
                title: {
                  label: '是否可以快速跳转至某页',
                  tip: 'showQuickJumper | 是否可以快速跳转至某页'
                },
                setter: 'BoolSetter',
                supportVariable: false
              }]
            }
          }
        }, {
          componentName: 'BoolSetter',
          initialValue: true
        }]
      },
      isRequired: false,
      initialValue: false
    }
  }, {
    display: 'block',
    title: {
      label: '表格合计',
      tip: 'summary | 表格合计'
    },
    name: 'summary',
    description: '表格合计',
    supportVariable: false,
    setter: {
      componentName: 'SlotSetter',
      title: '表格合计',
      initialValue: {
        type: 'JSSlot',
        params: ['pageData'],
        value: []
      }
    }
  }]
}];
var _default = exports["default"] = TableBaseProps;