@gct-paas/design 0.1.4-dev.10 → 0.1.4-dev.11

package/es/schema/common-config/base-button-config.d.ts

@@ -0,0 +1,3 @@
+import { BaseButtonProps, LowCodeWidget } from '@gct-paas/schema';
+export declare const baseBtnProp: BaseButtonProps;
+export declare const baseBtnEditor: LowCodeWidget.PropEditor[];

package/es/schema/common-config/base-button-config.mjs

@@ -0,0 +1,84 @@
+import { ButtonSize, ButtonType, ButtonStyle, PropGroup } from '@gct-paas/core';
+import { displayProps } from './display-editor-config.mjs';
+
+const baseBtnProp = {
+  disabled: false,
+  icon: "icon-park:all-application",
+  iconColor: "",
+  /**标题 */
+  title: "${sys.pageDesigner.button}",
+  buttonStyle: ButtonStyle.ORDINARY,
+  /**二次确认 */
+  confirm: false,
+  confirmText: "",
+  // /**内置事件 */
+  // innerEvent: true,
+  /**系统事件类型 */
+  // sysMethedType: undefined,
+  // linkPage: '',
+  /**事件名称 */
+  // eventName: '',
+  hasIcon: false,
+  hasText: true,
+  type: ButtonType.PRIMARY,
+  danger: false,
+  size: ButtonSize.DEFAULT,
+  enableCustomColor: false,
+  backgroundColor: "",
+  fontColor: "",
+  ...displayProps
+};
+const baseBtnEditor = [
+  {
+    component: "text-editor",
+    name: "title",
+    label: "sys.pageDesigner.buttonName",
+    group: PropGroup.BASIC,
+    _config: {
+      i18n: true,
+      showCount: true,
+      maxlength: 32
+    },
+    changeCallback: (widget, val) => {
+      widget.alias = val;
+    }
+  },
+  {
+    component: "button-type-editor",
+    name: {
+      type: "type",
+      danger: "danger",
+      icon: "icon",
+      label: "label",
+      hasText: "hasText",
+      hasIcon: "hasIcon"
+    },
+    label: "sys.pageDesigner.buttonType",
+    group: PropGroup.BUTTON
+  },
+  {
+    component: "icon-editor",
+    name: { icon: "icon", iconColor: "iconColor" },
+    label: "sys.pageDesigner.buttonIcon",
+    group: PropGroup.BUTTON,
+    // _config: {
+    //   showColor: true,
+    // },
+    hidden: (widget) => {
+      return !widget.props.hasIcon;
+    }
+  },
+  {
+    component: "radio-bgc-editor",
+    name: "size",
+    label: "sys.pageDesigner.buttonSize",
+    group: PropGroup.BUTTON,
+    _config: {
+      options: Object.values(ButtonSize).map((i) => {
+        return { value: i, label: "sys.pageDesigner." + i };
+      })
+    }
+  }
+];
+
+export { baseBtnEditor, baseBtnProp };

package/es/schema/common-config/button-editor-config.d.ts

@@ -0,0 +1,4 @@
+import { ButtonBasicProps, LowCodeWidget } from '@gct-paas/schema';
+export declare const buttonProps: ButtonBasicProps;
+export declare const buttonEditor: LowCodeWidget.PropEditor[];
+export declare const buttonStyleEditor: LowCodeWidget.StyleEditor[];

package/es/schema/common-config/button-editor-config.mjs

@@ -0,0 +1,206 @@
+import { ButtonStyle, ButtonColorType, ButtonColorTheme, PropGroup, ButtonSize, StyleGroup } from '@gct-paas/core';
+import { hiddenButtonProps } from './button-props-func.mjs';
+
+const buttonProps = {
+  disabled: false,
+  buttonTheme: ButtonColorTheme.DEFAULT,
+  buttonType: ButtonColorType.DEFAULT,
+  icon: "",
+  iconColor: "",
+  confirm: false,
+  confirmText: "",
+  buttonStyle: ButtonStyle.ORDINARY,
+  enableCustomColor: false,
+  backgroundColor: "",
+  fontColor: ""
+};
+const buttonEditor = [
+  // {
+  //   component: 'switch-editor',
+  //   name: 'disabled',
+  //   label: 'sys.pageDesigner.disabled',
+  //   group: PropGroup.DISPLAY,
+  //   hidden: (widget): boolean => {
+  //     return hiddenButtonProps(widget);
+  //   },
+  // },
+  // {
+  //   component: 'radio-editor',
+  //   name: 'basic.buttonType',
+  //   label: 'sys.pageDesigner.buttonType',
+  //   group: PropGroup.ButtonStyle,
+  //   _config: {
+  //     options: Object.values(ButtonColorType).map((i) => {
+  //       return { value: i, label: 'sys.pageDesigner.' + i };
+  //     }),
+  //   },
+  //   hidden: (widget): boolean => {
+  //     return hiddenButtonProps(widget);
+  //   },
+  // },
+  // {
+  //   component: 'radio-editor',
+  //   name: 'buttonStyle',
+  //   label: 'sys.pageDesigner.buttonStyle',
+  //   group: PropGroup.ButtonStyle,
+  //   hidden: (widget): boolean => {
+  //     return hiddenButtonProps(widget) || platform.value === Platform.MOBILE;
+  //   },
+  //   _config: {
+  //     options: Object.values(ButtonStyle).map((key) => {
+  //       return { label: 'sys.pageDesigner.' + key, value: key };
+  //     }),
+  //   },
+  // },
+  {
+    component: "button-type-editor",
+    name: {
+      type: "type",
+      danger: "danger",
+      icon: "icon",
+      label: "label",
+      hasText: "hasText",
+      hasIcon: "hasIcon"
+    },
+    label: "sys.pageDesigner.buttonType",
+    group: PropGroup.ButtonStyle,
+    hidden: (widget) => {
+      return hiddenButtonProps(widget);
+    }
+  },
+  {
+    component: "icon-editor",
+    name: { icon: "icon", iconColor: "iconColor" },
+    label: "sys.pageDesigner.buttonIcon",
+    group: PropGroup.ButtonStyle,
+    hidden: (widget) => {
+      return !widget.props.hasIcon || hiddenButtonProps(widget);
+    },
+    _config: {
+      clearable: false
+    }
+  },
+  {
+    component: "switch-editor",
+    name: "enableCustomColor",
+    label: "sys.pageDesigner.customBtnColor",
+    group: PropGroup.ButtonStyle,
+    hidden: (widget) => {
+      return hiddenButtonProps(widget);
+    }
+  },
+  {
+    component: "button-color-editor",
+    name: "fontColor",
+    label: "sys.pageDesigner.buttonNameColor",
+    group: PropGroup.ButtonStyle,
+    _config: {
+      isInRow: true
+    },
+    hidden: (widget) => {
+      return !widget.props.enableCustomColor;
+    }
+  },
+  {
+    component: "button-color-editor",
+    name: "backgroundColor",
+    label: "sys.pageDesigner.buttonStyleColor",
+    group: PropGroup.ButtonStyle,
+    _config: {
+      isInRow: true
+    },
+    hidden: (widget) => {
+      return !widget.props.enableCustomColor || widget.props.type === "link";
+    }
+  },
+  {
+    component: "radio-bgc-editor",
+    name: "size",
+    label: "sys.pageDesigner.buttonSize",
+    group: PropGroup.ButtonStyle,
+    hidden: (widget) => {
+      return hiddenButtonProps(widget);
+    },
+    _config: {
+      options: Object.values(ButtonSize).map((i) => {
+        return { value: i, label: "sys.pageDesigner." + i };
+      })
+    }
+  },
+  {
+    component: "switch-editor",
+    name: "confirm",
+    label: "sys.pageDesigner.confirm",
+    group: PropGroup.ButtonStyle,
+    hidden: (widget) => {
+      return hiddenButtonProps(widget);
+    },
+    _config: {
+      tooltip: "sys.pageDesigner.buttonConfirm"
+    }
+  },
+  {
+    component: "texteare-editor",
+    name: "confirmText",
+    label: "sys.pageDesigner.regHint",
+    group: PropGroup.ButtonStyle,
+    _config: {
+      i18n: true,
+      placeholder: "sys.pageDesigner.confirmTodo"
+    },
+    hidden: (widget) => {
+      return !widget.props.confirm || hiddenButtonProps(widget);
+    }
+  }
+  // {
+  //   component: 'select-editor',
+  //   name: 'basic.buttonTheme',
+  //   label: 'sys.pageDesigner.buttonTheme',
+  //   group: PropGroup.ButtonStyle,
+  //   _config: {
+  //     options: Object.values(ButtonColorTheme).map((i) => {
+  //       return { value: i, label: 'sys.pageDesigner.' + i };
+  //     }),
+  //   },
+  //   hidden: (widget): boolean => {
+  //     return hiddenButtonProps(widget);
+  //   },
+  // },
+  // {
+  //   component: 'icon-editor',
+  //   name: { icon: 'basic.icon', iconColor: 'basic.iconColor' },
+  //   label: 'sys.pageDesigner.icon',
+  //   group: PropGroup.ButtonStyle,
+  //   _config: {
+  //     showColor: true,
+  //   },
+  //   hidden: (widget): boolean => {
+  //     return hiddenButtonProps(widget);
+  //   },
+  // },
+];
+const buttonStyleEditor = [
+  {
+    component: "position-editor",
+    name: "position",
+    label: "sys.pageDesigner.position",
+    group: StyleGroup.LAYOUT,
+    // 按钮容器中的按钮不需要样式属性
+    hidden: (widget) => {
+      return !!widget.props.parentWidgetId || !!widget.preLocation;
+    }
+  },
+  {
+    component: "margin-editor",
+    group: StyleGroup.MARGIN,
+    // 按钮容器中的按钮不需要样式属性
+    hidden: (widget) => {
+      return !!widget.props.parentWidgetId || !!widget.preLocation;
+    },
+    _config: {
+      hiddenMarginOrPadding: "padding"
+    }
+  }
+];
+
+export { buttonEditor, buttonProps, buttonStyleEditor };

package/es/schema/common-config/button-props-func.d.ts

@@ -0,0 +1,5 @@
+import { LowCodeWidget } from '@gct-paas/schema';
+/**
+ * 按钮组件属性显隐控制判断
+ */
+export declare function hiddenButtonProps(widget: LowCodeWidget.BasicSchema): boolean;

package/es/schema/common-config/button-props-func.mjs

@@ -0,0 +1,11 @@
+function hiddenButtonProps(widget) {
+  if (Object.prototype.hasOwnProperty.call(widget.props, "model")) {
+    return !widget.props.model;
+  }
+  if (Object.prototype.hasOwnProperty.call(widget.props, "refForm")) {
+    return !widget.props.refForm;
+  }
+  return false;
+}
+
+export { hiddenButtonProps };

package/es/schema/common-config/common-event-config.d.ts

@@ -0,0 +1,6 @@
+export declare const deviceEvent: {
+    name: string;
+    title: string;
+    params: string[];
+    hidden: (widget: IObject) => boolean;
+}[];

package/es/schema/common-config/common-event-config.mjs

@@ -0,0 +1,14 @@
+import { Platform, MaterialEnum } from '@gct-paas/core';
+
+const deviceEvent = [
+  {
+    name: "afterDeviceFill",
+    title: "sys.pageDesigner.afterDeviceFill",
+    params: ["value", "deviceData", "formData"],
+    hidden: (widget) => {
+      return widget.platform !== Platform.WEB || ![MaterialEnum.MaterialFormField].includes(widget.materialType);
+    }
+  }
+];
+
+export { deviceEvent };

package/es/schema/common-config/common-field-editor-config.d.ts

@@ -0,0 +1,17 @@
+import { BindCmpStyleEnum, BindCmpStyleTypeEnum } from '@gct-paas/core';
+import { LowCodeModal, LowCodeWidget } from '@gct-paas/schema';
+/** 字段名称和显示标题config */
+export declare const basicFieldEditor: LowCodeWidget.PropEditor[];
+/** 获取输入属性config */
+export declare const getInputAttrEditor: (needFieldAttrs: string[]) => LowCodeWidget.PropEditor[];
+/** 获取组件类型config */
+export declare const getBindCmpTypeEditor: ({ name, type, hiddenCallback, filterOptionsCallback, groupName, }: {
+    name: string;
+    type: BindCmpStyleTypeEnum | ((arg: LowCodeWidget.BasicSchema) => BindCmpStyleTypeEnum);
+    hiddenCallback?: (arg: LowCodeWidget.BasicSchema | LowCodeModal.Modal) => boolean;
+    filterOptionsCallback?: (arg: BindCmpStyleEnum, widget?: LowCodeWidget.BasicSchema) => boolean;
+    groupName?: string;
+}) => LowCodeWidget.PropEditor[];
+/** 填写说明config */
+export declare const explainEditor: LowCodeWidget.PropEditor[];
+export declare const validatorEditor: LowCodeWidget.PropEditor[];

package/es/schema/common-config/common-field-editor-config.mjs

@@ -0,0 +1,213 @@
+import '../../hooks/design-view/design-state.mjs';
+import { PropGroup, MaterialEnum, Platform, FIELD_TYPE, TreeHelper } from '@gct-paas/core';
+import 'vue';
+import { has } from 'lodash-es';
+import { useScope } from '../../hooks/design-view/layout/useScope.mjs';
+import '../../hooks/design-view/global/useGlobal.mjs';
+import '../modal/modal.mjs';
+import './common-style.mjs';
+import './display-editor-config.mjs';
+import './base-button-config.mjs';
+import './permission-editor-config.mjs';
+import './button-editor-config.mjs';
+import './formItem-editor-config.mjs';
+import { isFormFieldType } from '@gct-paas/schema';
+import '@vueuse/core';
+import '../../hooks/develop/useCacheHistory.mjs';
+import '../../components/user-occupy/user-occupy.css';import '../../components/user-occupy/user-lock.css';import '../../components/field-transfer/components/field-transfer-modal.css';import '../../components/field-transfer/less/AdvancedTransfer.css';import '../../components/field-transfer/less/TransferTree.css';import '../../components/field-transfer/less/TreeItem.css';import '../../components/field-cascader/src/FieldCascader.css';import '../../components/design-view-layout/design-view-layout.css';import '../../components/modal-name-editor/modal-name-editor.css';import '../../components/design-step-check/design-step-check.css';import '../../components/design-save-tip/design-save-tip.css';import '../../components/mobile-container/mobile-container.css';import '../../components/design-icon-button/design-icon-button.css';import '../../components/editor/style/font-editor/align-group.css';import '../../components/editor/style/font-editor/font-style-group.css';import '../../components/editor/style/position-editor/position-editor.css';import '../../components/editor/style/spacing-editor/spacing-editor.css';import '../../components/editor/style/border-editor/border-editor.css';import '../../components/editor/style/border-editor/border-radius.css';import '../../components/editor/style/border-editor/border-box.css';/* empty css                                                          */
+/* empty css                                                             */
+/* empty css                                                             */
+/* empty css                                                               */
+import '../../components/icon/upleft-icon.vue.mjs';
+import '../../components/icon/downleft-icon.vue.mjs';
+import '../../components/icon/downright-icon.vue.mjs';
+import '../../components/icon/upright-icon.vue.mjs';
+/* empty css                                                                 */
+import '@ant-design/icons-vue';
+import '../../components/editor/style/font-editor/util.mjs';
+/* empty css                                                              */
+/* empty css                                                         */
+/* empty css                                                           */
+import 'dayjs';
+/* empty css                                                       */
+/* empty css                                                     */
+/* empty css                                                         */
+/* empty css                                                         */
+/* empty css                                                           */
+import '../../components/field-cascader/src/hooks.mjs';
+/* empty css                                                      */
+import '@gct-paas/core-web';
+import '../../components/field-transfer/components/Cascader/FieldCascader.mjs';
+import 'ant-design-vue';
+/* empty css                                                  */
+/* empty css                                                      */
+/* empty css                                                          */
+/* empty css                                                                   */
+import '../../components/user-occupy/useUserOccupy.mjs';
+/* empty css                                           */
+/* empty css                                             */
+import '../../hooks/design-view/widget/useSelectedWidget.mjs';
+import '../../utils/begin-drag/begin-drag.mjs';
+import 'axios';
+import '../../utils/design-view/index.mjs';
+import '../../utils/field-attrs/basicAttrs.mjs';
+import '../../utils/field-filter/index.mjs';
+import '../../utils/find-deep-types/find-deep-types.mjs';
+import '../../hooks/design-view/widget/useWidget.mjs';
+import '../../hooks/design-view/page/usePage.mjs';
+import '../../hooks/design-view/page/usePageOccupy.mjs';
+import '../../hooks/design-view/layout/useToolkit.mjs';
+import '../../hooks/use-model-field/use-model-field.mjs';
+import 'qx-util';
+
+const basicFieldEditor = [
+  // 字段名称
+  {
+    component: "custom-name-editor",
+    name: "label",
+    label: "sys.pageDesigner.fieldTitle",
+    formItemStyle: { marginBottom: "12px" },
+    group: PropGroup.BASIC,
+    changeCallback(widget) {
+      widget.alias = widget.props.label;
+    },
+    _config: {
+      formItemCheckbox: {
+        label: "sys.pageDesigner.displayLabelText",
+        propsKey: "displayLabelText"
+      }
+    }
+  }
+];
+const getInputAttrEditor = (needFieldAttrs) => {
+  return [
+    // 输入属性
+    {
+      component: "input-attr-editor",
+      name: "",
+      label: "sys.pageDesigner.inputAttr",
+      group: PropGroup.FIELD_CONFIG,
+      _config: {
+        needFieldAttrs,
+        getFilterAttrs: (widget) => {
+          if (widget.platform !== Platform.WEB || !isFormFieldType(widget) || widget.props.readonly || widget.props.fieldReadonly) {
+            return ["getFocus"];
+          }
+          return [];
+        }
+      },
+      changeCallback(widget, value) {
+        if (value.includes("getFocus")) {
+          const { scopeData } = useScope();
+          const fields = TreeHelper.findNodeAll(scopeData.value, (res) => {
+            return res.isField && has(res.props, "getFocus") && res.id !== widget.id;
+          });
+          fields.forEach((field) => {
+            field.props.getFocus = false;
+          });
+        }
+      },
+      hidden(widget) {
+        return widget.props.field === "operating_state_" || widget.props.bindFieldKey || widget.materialType === MaterialEnum.DescriptionsFormField || widget.props.fieldReadonly;
+      }
+    }
+  ];
+};
+const getBindCmpTypeEditor = ({
+  name,
+  type,
+  hiddenCallback,
+  filterOptionsCallback,
+  groupName
+}) => {
+  return [
+    // 组件类型
+    {
+      component: "bind-cmp-type-editor",
+      name,
+      label: "sys.pageDesigner.bindCmpStyleLabel",
+      group: groupName ? groupName : PropGroup.FIELD_CONFIG,
+      hidden: hiddenCallback ? hiddenCallback : (widget) => {
+        if ([
+          FIELD_TYPE.TEXT,
+          FIELD_TYPE.USER,
+          FIELD_TYPE.USER_MULTI,
+          FIELD_TYPE.ORG,
+          FIELD_TYPE.ORG_MULTI
+        ].includes(widget.props.fieldType) && (widget.props.bindFieldKey || !isFormFieldType(widget) || widget.props.fieldReadonly)) {
+          return true;
+        }
+        return name === "selectType" && widget.platform !== Platform.WEB;
+      },
+      _config: {
+        bindCmpStyleKey: type,
+        filterOptionsCallback
+      },
+      changeCallback(widget) {
+        if ([
+          FIELD_TYPE.BOOLEAN,
+          FIELD_TYPE.USER,
+          FIELD_TYPE.USER_MULTI,
+          FIELD_TYPE.ORG,
+          FIELD_TYPE.ORG_MULTI,
+          FIELD_TYPE.DATA_TABLE_FORMULA
+        ].includes(widget.props.fieldType)) {
+          return;
+        }
+        if ([
+          FIELD_TYPE.EXPRESSION,
+          FIELD_TYPE.AGG,
+          FIELD_TYPE.INTEGER,
+          FIELD_TYPE.LONG
+        ].includes(widget.props.fieldType)) {
+          widget.props.currency = "￥";
+          widget.props.displayTimeType = "d:h:m:s";
+          return;
+        }
+      }
+    }
+  ];
+};
+const explainEditor = [
+  // 填写说明开关
+  {
+    component: "switch-editor",
+    name: "showExplain",
+    label: "sys.pageDesigner.explain",
+    formItemStyle: { marginBottom: "12px" },
+    group: PropGroup.FIELD_CONFIG,
+    hidden: (widget) => {
+      if (widget.props.bindFieldKey || widget.props.fieldReadonly) {
+        return true;
+      }
+      if ((widget.materialType === MaterialEnum.MaterialFormField || widget.materialType === MaterialEnum.MaterialSubTableModalField) && widget.platform === Platform.PAD) {
+        return true;
+      }
+      return widget.platform !== Platform.WEB && widget.platform !== Platform.PAD;
+    }
+  },
+  // 填写说明内容
+  {
+    component: "texteare-editor",
+    name: "explain",
+    label: "",
+    group: PropGroup.FIELD_CONFIG,
+    hidden: (widget) => {
+      return !widget.props.showExplain;
+    },
+    _config: {
+      i18n: true
+    }
+  }
+];
+const validatorEditor = [
+  {
+    component: "switch-editor",
+    name: "closeValidator",
+    label: "sys.pageDesigner.closeValidator",
+    group: PropGroup.FIELD_CONFIG,
+    formField: true
+  }
+];
+
+export { basicFieldEditor, explainEditor, getBindCmpTypeEditor, getInputAttrEditor, validatorEditor };

package/es/schema/common-config/common-style.d.ts

@@ -0,0 +1,3 @@
+import { LowCodeWidget } from '@gct-paas/schema';
+export declare const commonStyle: LowCodeWidget.BasicStyle;
+export declare const notNeedPxStyle: string[];

package/es/schema/common-config/common-style.mjs

@@ -0,0 +1,85 @@
+import { BorderStyle, TagTypeEnum, TextDecoration } from '@gct-paas/core';
+
+const commonStyle = {
+  position: "",
+  top: "",
+  left: "",
+  right: "",
+  bottom: "",
+  width: "",
+  height: "",
+  backgroundColor: "",
+  marginAll: "",
+  marginTop: "",
+  marginRight: "",
+  marginBottom: "",
+  marginLeft: "",
+  paddingAll: "",
+  paddingTop: "",
+  paddingRight: "",
+  paddingBottom: "",
+  paddingLeft: "",
+  labelFont: {
+    align: "left",
+    fontSize: "",
+    bold: false,
+    italic: false,
+    textDecoration: TextDecoration.NONE,
+    color: ""
+  },
+  contentFont: {
+    align: "left",
+    fontSize: "",
+    bold: false,
+    italic: false,
+    textDecoration: TextDecoration.NONE,
+    color: ""
+  },
+  tagStyle: {
+    color: "",
+    tagType: TagTypeEnum.RADIUS
+  },
+  tagStyleOpen: false,
+  borderAll: {
+    borderStyle: BorderStyle.NONE,
+    borderColor: "#F0F0F0",
+    borderWidth: "1"
+  },
+  borderLeft: {
+    borderStyle: BorderStyle.NONE,
+    borderColor: "#F0F0F0",
+    borderWidth: "1"
+  },
+  borderRight: {
+    borderStyle: BorderStyle.NONE,
+    borderColor: "#F0F0F0",
+    borderWidth: "1"
+  },
+  borderBottom: {
+    borderStyle: BorderStyle.NONE,
+    borderColor: "#F0F0F0",
+    borderWidth: "1"
+  },
+  borderTop: {
+    borderStyle: BorderStyle.NONE,
+    borderColor: "#F0F0F0",
+    borderWidth: "1"
+  },
+  borderTopRightRadius: "0",
+  borderTopLeftRadius: "0",
+  borderBottomRightRadius: "0",
+  borderBottomLeftRadius: "0",
+  borderAllRadius: "0"
+};
+const notNeedPxStyle = [
+  "position",
+  "backgroundColor",
+  "bold",
+  "italic",
+  "textDecoration",
+  "color",
+  "borderStyle",
+  "borderColor"
+];
+
+export { commonStyle, notNeedPxStyle };

package/es/schema/common-config/display-editor-config.d.ts

@@ -0,0 +1,3 @@
+import { LowCodeWidget } from '@gct-paas/schema';
+export declare const displayProps: LowCodeWidget.DisplayProps;
+export declare const displayEditor: LowCodeWidget.PropEditor[];