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

YwDesign for lowcode

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _base = require("../_base");
var _jsonFormBaseProps = require("./json-form-base-props");
var _utils = require("../_utils");
var 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: 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 buttonsProps = [].concat(_base.YwButtonBaseProps, [{
  name: 'disabeld',
  title: {
    label: '是否禁用',
    tip: 'disabeld | 是否禁用'
  },
  //   条件渲染setter 后面补充
  setter: 'BoolSetter'
}, {
  name: 'onClick',
  title: {
    label: '点击回调',
    tip: '点击按钮时的回调'
  },
  propType: 'func',
  setter: {
    componentName: 'FunctionSetter'
  }
}]);
var batchButtonProps = [].concat(_base.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) { }'
        }
      }]
    }
  }
}]);
var 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: function 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_" + (0, _utils.uuid)(),
                          props: {
                            btnText: '新增',
                            btnType: 'primary',
                            title: '新增数据',
                            reload: {
                              type: 'JSExpression',
                              value: 'this.reload'
                            },
                            items: [{
                              component: 'Input',
                              title: '表单项',
                              name: "input_" + (0, _utils.uuid)()
                            }]
                          }
                        }],
                        id: "node_" + (0, _utils.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: function condition(target) {
                return !(0, _utils.getPropValueWithPath)(target, '.__optionType');
              }
            }].concat((0, _utils.getPropsByDependence)(historyProps, ['HistoryPush', 'HistoryOpen'], '.__optionType'), (0, _utils.getPropsByDependence)(buttonsProps, ['Button'], '.__optionType'), (0, _utils.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: function condition(target) {
                return (0, _utils.getPropValueWithPath)(target, '.btnType') !== '' && ['action'].includes((0, _utils.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: function condition(target) {
                return (0, _utils.getPropValueWithPath)(target, '.btnType') !== '' && ['batch'].includes((0, _utils.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: function condition(target) {
                return !(0, _utils.getPropValueWithPath)(target, '.__optionType');
              }
            }])
          }
        },
        initialValue: {
          btnText: '操作'
        }
      }
    }
  }
};
var TableBaseProps = [{
  name: 'ref',
  title: {
    label: '组件标识',
    tip: "ref | 通过 this.$('xxx') 获取到组件实例"
  },
  defaultValue: function defaultValue() {
    return "table_" + (0, _utils.uuid)();
  },
  setter: {
    componentName: 'StringSetter'
  },
  supportVariable: false,
  extraProps: {
    setValue: function setValue(target, value) {
      (0, _utils.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: function 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: function 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.NameOptions || [],
                      showSearch: true
                    }
                  }, {
                    componentName: '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);
                  }
                }
              }
            }, {
              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: _jsonFormBaseProps.tableFormItemProps
                  }
                }
              },
              condition: function condition(target) {
                return ['YwJsonForm'].includes((0, _utils.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'
  }
}];
var _default = exports["default"] = TableBaseProps;