@kp-ui/lowcode 1.0.3 → 1.0.21

package/es/components/form-designer/widget-panel/containersEnums.js

@@ -0,0 +1,315 @@
+import { getUuidKey as t } from "../../../utils/util.js";
+const a = (e = {}) => ({
+  key: t(),
+  type: "grid",
+  // 组件类型
+  alias: "",
+  //组件别名，可以自定义
+  category: "container",
+  //容器类型
+  icon: "grid",
+  //icon
+  cols: [],
+  // 列配置
+  options: {
+    // 配置
+    name: "",
+    //名称
+    hidden: !1,
+    //是否隐藏
+    gutter: 12,
+    //'栅格间隔',
+    colHeight: null,
+    //栅格列统一高度属性，用于解决栅格列设置响应式布局浮动后被挂住的问题！！
+    customClass: [],
+    //自定义css类名
+    ...e
+  }
+}), n = (e = {}) => ({
+  key: t(),
+  type: "grid-col",
+  category: "container",
+  icon: "grid-col",
+  internal: !0,
+  widgetList: [],
+  options: {
+    name: "",
+    hidden: !1,
+    span: 12,
+    offset: 0,
+    push: 0,
+    pull: 0,
+    responsive: !1,
+    //是否开启响应式布局
+    md: 12,
+    sm: 12,
+    xs: 12,
+    customClass: [],
+    //自定义css类名
+    ...e
+  }
+}), s = (e = {}) => ({
+  key: t(),
+  type: "data-table",
+  //数据表格
+  category: "container",
+  icon: "data-table",
+  widgetList: [],
+  options: {
+    name: "",
+    label: "data-table",
+    hidden: !1,
+    tableHeight: "300px",
+    //高度，百分比或像素
+    tableWidth: "100%",
+    //宽度，百分比或像素宽度
+    customClass: [],
+    //自定义css样式
+    // stripe: true, // 是否斑马线
+    showIndex: !1,
+    // 是否显示行号列
+    showPagination: !0,
+    // 是否分页
+    border: !0,
+    // 是否带有纵向边框（拖拽）
+    tableSize: "small",
+    // 表格大小，large大、default中、small小
+    tableColumns: [
+      //表格列信息
+      {
+        columnId: 1,
+        dataIndex: "name",
+        title: "姓名",
+        width: 150,
+        show: !0,
+        align: "center",
+        fixed: "",
+        sorter: !1,
+        customRender: "",
+        ellipsis: !0,
+        resizable: !0,
+        showSorterTooltip: !1
+      }
+    ],
+    showButtonsColumn: !1,
+    // 是否显示操作列
+    buttonsColumnTitle: "操作",
+    buttonsColumnWidth: 200,
+    operationButtons: [
+      {
+        // 操作按钮配置
+        name: "detail",
+        label: "详情",
+        type: "link",
+        shape: "default",
+        size: "small",
+        hidden: !1,
+        disabled: !1,
+        onClick: ""
+      }
+    ],
+    dsEnabled: !1,
+    //是否使用数据源数据
+    http: {
+      url: "",
+      method: "get",
+      data: {},
+      params: {}
+    },
+    dataReqHandlerCode: "",
+    dataHandlerCode: "",
+    rowKey: "name",
+    //树形数据数据row-key
+    childrenKey: "children",
+    //树形数据children
+    dataSource: [
+      //表格数据
+      {
+        date: "2016-05-02",
+        date2: "2016-05-02 23:12:12",
+        date3: "2016-05-02 9:11:12",
+        name: "小二",
+        add: "上海市普陀区金沙江路 1518 弄",
+        age: 100
+      }
+    ],
+    onCreated: "",
+    onMounted: "",
+    //设置操作按钮是否隐藏回调事件（必须有返回值）
+    onHideOperationButton: "",
+    //设置操作按钮是否禁用回调事件（必须有返回值）
+    onDisableOperationButton: "",
+    //设置操作按钮文本回调事件（必须有返回值）
+    //操作按钮点击事件
+    onOperationButtonClick: "",
+    customRow: { onClick: "", onDblclick: "", onMouseenter: "", onMouseleave: "" },
+    //合并行、列事件
+    onTableChange: "",
+    //分页、排序、筛选变化时触发
+    pagination: {
+      pageSizeOptions: ["10", "20", "50", "100"],
+      current: 1,
+      //当前页数
+      hideOnSinglePage: !1,
+      //只有一页时是否隐藏分页器
+      pageSize: 20,
+      //每页条数
+      total: 0,
+      //数据总数
+      showQuickJumper: !0,
+      //是否可以快速跳转至某页
+      showSizeChanger: !0,
+      //是否展示 pageSize 切换器，当 total 大于 50 时默认为 true
+      position: ["bottomRight"],
+      showTotal: (o) => `共 ${o} 条`
+    },
+    colorRow: !0,
+    rowSelection: {
+      hasRowSelection: !1,
+      preserveSelectedRowKeys: !1,
+      //当数据被删除时仍然保留选项的 key
+      // type:"checkbox",//多选/单选，checkbox or radio
+      fixed: !0,
+      //把选择框列固定在左边
+      onChange: "console.log(122222,selectedRowKeys, selectedRows)",
+      //选中项发生变化时的回调 Function(selectedRowKeys, selectedRows)
+      columnWidth: 100
+    },
+    //antd 功能的配置
+    ...e
+  }
+}), l = (e = {}) => ({
+  key: t(),
+  type: "vf-dialog",
+  //弹窗
+  category: "container",
+  icon: "vf-dialog",
+  widgetList: [],
+  options: {
+    name: "",
+    title: "标题",
+    width: "50%",
+    height: "600px",
+    bodyStyle: "",
+    formCode: "",
+    showClose: !0,
+    closeOnClickModal: !1,
+    closeOnPressEscape: !1,
+    readMode: !1,
+    disabledMode: !1,
+    okButtonLabel: "",
+    okButtonHidden: !1,
+    cancelButtonLabel: "",
+    cancelButtonHidden: !1,
+    onOkButtonClick: "",
+    onCancelButtonClick: "",
+    onDialogOpened: "",
+    onDialogBeforeClose: "",
+    ...e
+  }
+}), i = (e = {}) => ({
+  key: t(),
+  type: "vf-collapse",
+  //折叠面板
+  category: "container",
+  icon: "zhediemianban",
+  widgetList: [],
+  headerRightSlotList: [],
+  defaultSlotsList: [],
+  cols: [],
+  options: {
+    name: "",
+    title: "标题",
+    height: "",
+    bodyStyle: "",
+    formCode: "",
+    collapseIcon: "xiangshang",
+    unCollapseIcon: "xiangxia",
+    isCollapse: !0,
+    rightSlotCss: [],
+    ...e
+  }
+}), r = (e = {}) => ({
+  key: t(),
+  type: "vf-box",
+  showName: "盒容器",
+  category: "container",
+  icon: "ccgl-zhouzhuanxiang-4",
+  widgetList: [],
+  options: {
+    name: "",
+    // title: '标题',
+    // width: '100%',
+    // height: '600px',
+    formCode: "",
+    customClass: []
+  }
+}), d = (e = {}) => ({
+  key: t(),
+  type: "tab",
+  category: "container",
+  icon: "tab",
+  displayType: "border-card",
+  tabs: [],
+  options: {
+    name: "",
+    hidden: !1,
+    customClass: [],
+    //自定义css类名
+    onTabClick: "",
+    //tab被选中时触发
+    tabBarGutter: 30,
+    tabPosition: "top",
+    type: "line",
+    onCreated: "",
+    onMounted: ""
+  }
+}), c = () => ({
+  key: t(),
+  type: "tab-pane",
+  category: "container",
+  icon: "tab-pane",
+  internal: !0,
+  widgetList: [],
+  options: {
+    name: "",
+    label: "",
+    hidden: !1,
+    active: !1,
+    disabled: !1,
+    customClass: []
+    //自定义css类名
+  }
+}), u = (e = {}) => ({
+  key: t(),
+  type: "grid-sub-form",
+  category: "container",
+  icon: "grid-sub-form",
+  widgetList: [],
+  options: {
+    name: "",
+    showBlankRow: !0,
+    showRowNumber: !0,
+    hidden: !1,
+    customClass: []
+    //自定义css类名
+    //   onSubFormRowAdd: '',
+    //   onSubFormRowInsert: '',
+    //   onSubFormRowDelete: '',
+    //   onSubFormRowChange: ''
+  }
+}), g = {
+  grid: a,
+  //   subForm,
+  gridSubForm: u,
+  gridCol: n,
+  dataTable: s,
+  vfDialog: l,
+  vfCollapse: i,
+  vfBox: r,
+  tab: d,
+  tabPane: c
+};
+export {
+  g as containersEnums
+};

package/es/components/form-designer/widget-panel/index.vue.js

@@ -0,0 +1,338 @@
+import _ from "../../svg-icon/index.vue.js";
+import { containers as w, basicFields as C, advancedFields as T, customFields as N, businessFields as D } from "./widgetsConfig.js";
+import { formTemplates as L } from "./templatesConfig.js";
+import { generateId as c, addWindowResizeHandler as B } from "../../../utils/util.js";
+import W from "../../../utils/i18n.js";
+import x from "axios";
+import { TpfConfirm as H } from "../../../hooks/TpfConfirm.js";
+import { resolveComponent as r, createElementBlock as M, openBlock as F, createElementVNode as a, createVNode as t, withCtx as l, createCommentVNode as b, createBlock as $, createTextVNode as m, toDisplayString as g } from "vue";
+/* empty css           */
+import E from "../../../_virtual/_plugin-vue_export-helper.js";
+const K = {
+  name: "FieldPanel",
+  mixins: [W],
+  components: { SvgIcon: _ },
+  props: {
+    designer: Object
+  },
+  inject: ["getBannedWidgets", "getDesignerConfig"],
+  data() {
+    return {
+      designerConfig: this.getDesignerConfig(),
+      firstTab: "componentLib",
+      scrollerHeight: 0,
+      activeNames: [
+        "containerTitle",
+        "basicFieldTitle",
+        "advancedFieldTitle",
+        "yyzj",
+        "customFieldTitle"
+      ],
+      containers: [],
+      basicFields: [],
+      advancedFields: [],
+      customFields: [],
+      businessFields: [],
+      formTemplates: L,
+      ftImages: []
+    };
+  },
+  computed: {
+    //
+  },
+  created() {
+    this.loadWidgets();
+  },
+  mounted() {
+    this.scrollerHeight = window.innerHeight - 56 + "px", B(() => {
+      this.$nextTick(() => {
+        this.scrollerHeight = window.innerHeight - 56 + "px";
+      });
+    });
+  },
+  methods: {
+    isBanned(e) {
+      return this.getBannedWidgets().indexOf(e) > -1;
+    },
+    showFormTemplates() {
+      return this.designerConfig.formTemplates === void 0 ? !0 : !!this.designerConfig.formTemplates;
+    },
+    loadWidgets() {
+      this.containers = w.map((e) => ({
+        key: c(),
+        ...e,
+        displayName: this.i18n2t(
+          `designer.widgetLabel.${e.type}`,
+          `extension.widgetLabel.${e.type}`
+        )
+      })).filter((e) => !e.internal && !this.isBanned(e.type)), this.basicFields = C.map((e) => ({
+        key: c(),
+        ...e,
+        displayName: this.i18n2t(
+          `designer.widgetLabel.${e.type}`,
+          `extension.widgetLabel.${e.type}`
+        )
+      })).filter((e) => !this.isBanned(e.type)), this.advancedFields = T.map((e) => ({
+        key: c(),
+        ...e,
+        displayName: this.i18n2t(
+          `designer.widgetLabel.${e.type}`,
+          `extension.widgetLabel.${e.type}`
+        )
+      })).filter((e) => !this.isBanned(e.type)), this.customFields = N.map((e) => ({
+        key: c(),
+        ...e,
+        displayName: this.i18n2t(
+          `designer.widgetLabel.${e.type}`,
+          `extension.widgetLabel.${e.type}`
+        )
+      })).filter((e) => !this.isBanned(e.type)), this.businessFields = D.map((e) => ({
+        key: c(),
+        ...e,
+        displayName: this.i18n2t(
+          `designer.widgetLabel.${e.type}`,
+          `extension.widgetLabel.${e.type}`
+        )
+      })).filter((e) => !this.isBanned(e.type));
+    },
+    handleContainerWidgetClone(e) {
+      return this.designer.copyNewContainerWidget(e);
+    },
+    handleFieldWidgetClone(e) {
+      return this.designer.copyNewFieldWidget(e);
+    },
+    /* draggable组件的move钩子是在内部子组件被拖放到其他draggable组件时触发！！ */
+    checkContainerMove(e) {
+      return this.designer.checkWidgetMove(e);
+    },
+    /* draggable组件的move钩子是在内部子组件被拖放到其他draggable组件时触发！！ */
+    checkFieldMove(e) {
+      return this.designer.checkFieldMove(e);
+    },
+    onContainerDragEnd(e) {
+    },
+    addContainerByDbClick(e) {
+      this.designer.addContainerByDbClick(e);
+    },
+    addFieldByDbClick(e) {
+      this.designer.addFieldByDbClick(e);
+    },
+    loadFormTemplate(e) {
+      H({
+        type: "confirm",
+        content: this.i18nt("designer.setting.loadFormTemplateHint"),
+        title: this.i18nt("render.hint.prompt"),
+        okText: this.i18nt("render.hint.confirm"),
+        cancelText: this.i18nt("render.hint.cancel")
+      }).then(() => {
+        x.get(e).then((n) => {
+          let p = !1;
+          typeof n.data == "string" ? p = this.designer.loadFormJson(JSON.parse(n.data)) : n.data.constructor === Object && (p = this.designer.loadFormJson(n.data)), p && this.designer.emitHistoryChange(), this.$message.success(this.i18nt("designer.hint.loadFormTemplateSuccess"));
+        }).catch((n) => {
+          this.$message.error(
+            this.i18nt("designer.hint.loadFormTemplateFailed") + ":" + n
+          );
+        });
+      }).catch((n) => {
+        console.error(n);
+      });
+    }
+  }
+}, j = { class: "side-scroll-bar" }, G = { class: "panel-container" }, I = ["title", "onDblclick"], O = ["title", "onDblclick"], S = ["title", "onDblclick"], V = ["title", "onDblclick"];
+function J(e, n, p, z, o, s) {
+  const d = r("svg-icon"), h = r("draggable"), u = r("a-collapse-panel"), v = r("a-collapse"), k = r("a-tab-pane");
+  r("a-popover"), r("a-button"), r("a-card");
+  const f = r("a-tabs");
+  return F(), M("div", j, [
+    a("div", G, [
+      t(f, {
+        activeKey: o.firstTab,
+        "onUpdate:activeKey": n[1] || (n[1] = (i) => o.firstTab = i),
+        class: "no-bottom-margin indent-left-margin"
+      }, {
+        default: l(() => [
+          t(k, { key: "componentLib" }, {
+            tab: l(() => [
+              a("span", null, [
+                t(d, { "icon-class": "el-set-up" }),
+                m(" " + g(e.i18nt("designer.componentLib")), 1)
+              ])
+            ]),
+            default: l(() => [
+              t(v, {
+                activeKey: o.activeNames,
+                "onUpdate:activeKey": n[0] || (n[0] = (i) => o.activeNames = i),
+                class: "widget-collapse"
+              }, {
+                default: l(() => [
+                  t(u, {
+                    key: "containerTitle",
+                    header: e.i18nt("designer.containerTitle")
+                  }, {
+                    default: l(() => [
+                      t(h, {
+                        tag: "ul",
+                        list: o.containers,
+                        "item-key": "key",
+                        group: { name: "dragGroup", pull: "clone", put: !1 },
+                        clone: s.handleContainerWidgetClone,
+                        "ghost-class": "ghost",
+                        sort: !1,
+                        move: s.checkContainerMove,
+                        onEnd: s.onContainerDragEnd
+                      }, {
+                        item: l(({ element: i }) => [
+                          a("li", {
+                            class: "container-widget-item",
+                            title: i.displayName,
+                            onDblclick: (y) => s.addContainerByDbClick(i)
+                          }, [
+                            a("span", null, [
+                              t(d, {
+                                "icon-class": i.icon,
+                                "class-name": "color-svg-icon"
+                              }, null, 8, ["icon-class"]),
+                              m(" " + g(i.showName || e.i18n2t(
+                                `designer.widgetLabel.${i.type}`,
+                                `extension.widgetLabel.${i.type}`
+                              )), 1)
+                            ])
+                          ], 40, I)
+                        ]),
+                        _: 1
+                      }, 8, ["list", "clone", "move", "onEnd"])
+                    ]),
+                    _: 1
+                  }, 8, ["header"]),
+                  t(u, {
+                    key: "basicFieldTitle",
+                    header: e.i18nt("designer.basicFieldTitle")
+                  }, {
+                    default: l(() => [
+                      t(h, {
+                        tag: "ul",
+                        list: o.basicFields,
+                        "item-key": "key",
+                        group: { name: "dragGroup", pull: "clone", put: !1 },
+                        move: s.checkFieldMove,
+                        clone: s.handleFieldWidgetClone,
+                        "ghost-class": "ghost",
+                        sort: !1
+                      }, {
+                        item: l(({ element: i }) => [
+                          a("li", {
+                            class: "field-widget-item",
+                            title: i.displayName,
+                            onDblclick: (y) => s.addFieldByDbClick(i)
+                          }, [
+                            a("span", null, [
+                              t(d, {
+                                "icon-class": i.icon,
+                                "class-name": "color-svg-icon"
+                              }, null, 8, ["icon-class"]),
+                              m(" " + g(i.showName || e.i18n2t(
+                                `designer.widgetLabel.${i.type}`,
+                                `extension.widgetLabel.${i.type}`
+                              )), 1)
+                            ])
+                          ], 40, O)
+                        ]),
+                        _: 1
+                      }, 8, ["list", "move", "clone"])
+                    ]),
+                    _: 1
+                  }, 8, ["header"]),
+                  t(u, {
+                    key: "advancedFieldTitle",
+                    header: e.i18nt("designer.advancedFieldTitle")
+                  }, {
+                    default: l(() => [
+                      t(h, {
+                        tag: "ul",
+                        list: o.advancedFields,
+                        "item-key": "key",
+                        group: { name: "dragGroup", pull: "clone", put: !1 },
+                        move: s.checkFieldMove,
+                        clone: s.handleFieldWidgetClone,
+                        "ghost-class": "ghost",
+                        sort: !1
+                      }, {
+                        item: l(({ element: i }) => [
+                          a("li", {
+                            class: "field-widget-item",
+                            title: i.displayName,
+                            onDblclick: (y) => s.addFieldByDbClick(i)
+                          }, [
+                            a("span", null, [
+                              t(d, {
+                                "icon-class": i.icon,
+                                "class-name": "color-svg-icon"
+                              }, null, 8, ["icon-class"]),
+                              m(" " + g(i.showName || e.i18n2t(
+                                `designer.widgetLabel.${i.type}`,
+                                `extension.widgetLabel.${i.type}`
+                              )), 1)
+                            ])
+                          ], 40, S)
+                        ]),
+                        _: 1
+                      }, 8, ["list", "move", "clone"])
+                    ]),
+                    _: 1
+                  }, 8, ["header"]),
+                  b("", !0),
+                  o.customFields.length ? (F(), $(u, {
+                    key: "customFieldTitle",
+                    header: e.i18nt("designer.customFieldTitle")
+                  }, {
+                    default: l(() => [
+                      t(h, {
+                        tag: "ul",
+                        list: o.customFields,
+                        "item-key": "key",
+                        group: { name: "dragGroup", pull: "clone", put: !1 },
+                        move: s.checkFieldMove,
+                        clone: s.handleFieldWidgetClone,
+                        "ghost-class": "ghost",
+                        sort: !1
+                      }, {
+                        item: l(({ element: i }) => [
+                          a("li", {
+                            class: "field-widget-item",
+                            title: i.displayName,
+                            onDblclick: (y) => s.addFieldByDbClick(i)
+                          }, [
+                            a("span", null, [
+                              t(d, {
+                                "icon-class": i.icon,
+                                "class-name": "color-svg-icon"
+                              }, null, 8, ["icon-class"]),
+                              m(" " + g(e.i18n2t(
+                                `designer.widgetLabel.${i.type}`,
+                                `extension.widgetLabel.${i.type}`
+                              )), 1)
+                            ])
+                          ], 40, V)
+                        ]),
+                        _: 1
+                      }, 8, ["list", "move", "clone"])
+                    ]),
+                    _: 1
+                  }, 8, ["header"])) : b("", !0)
+                ]),
+                _: 1
+              }, 8, ["activeKey"])
+            ]),
+            _: 1
+          }),
+          b("", !0)
+        ]),
+        _: 1
+      }, 8, ["activeKey"])
+    ])
+  ]);
+}
+const ie = /* @__PURE__ */ E(K, [["render", J], ["__scopeId", "data-v-9380bfaa"]]);
+export {
+  ie as default
+};

package/es/components/form-designer/widget-panel/templatesConfig.js

@@ -0,0 +1,53 @@
+const s = [
+  {
+    title: "单列表单",
+    imgUrl: "https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t1.png",
+    jsonUrl: "https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json1.txt",
+    description: "表单模板详细说明..."
+  },
+  {
+    title: "多列表单",
+    imgUrl: "https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t2.png",
+    jsonUrl: "https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json2.txt",
+    description: "表单模板详细说明..."
+  },
+  {
+    title: "分组表单",
+    imgUrl: "https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t3.png",
+    jsonUrl: "https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json3.txt",
+    description: "表单模板详细说明..."
+  },
+  {
+    title: "标签页表单",
+    imgUrl: "https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t4.png",
+    jsonUrl: "https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json4.txt",
+    description: "表单模板详细说明..."
+  },
+  {
+    title: "主从表单",
+    imgUrl: "https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t5.png",
+    jsonUrl: "https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json5.txt",
+    description: "表单模板详细说明..."
+  },
+  {
+    title: "响应式表单",
+    imgUrl: "https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t6.png",
+    jsonUrl: "https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json6.txt",
+    description: "表单模板详细说明..."
+  },
+  {
+    title: "问卷调查表",
+    imgUrl: "https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t7.png",
+    jsonUrl: "https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json7.txt",
+    description: "表单模板详细说明..."
+  },
+  {
+    title: "固定表格表单",
+    imgUrl: "https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t8.png",
+    jsonUrl: "https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json8.txt",
+    description: "表单模板详细说明..."
+  }
+];
+export {
+  s as formTemplates
+};