bm-admin-ui 1.0.34-alpha → 1.0.35-alpha

package/lib/components/form-designer/index.js

@@ -4,6 +4,71 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var withInstall = require('bm-admin-ui/lib/utils/with-install');
 var vue = require('vue');
+var uniqueId = require('bm-admin-ui/lib/utils/uniqueId');
+var Draggable = require('vuedraggable');
+var antDesignVue = require('ant-design-vue');
+var iconsVue = require('@ant-design/icons-vue');
+var components = require('bm-admin-ui/lib/components');
+var lodashEs = require('lodash-es');
+var FC = require('@form-create/ant-design-vue');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var uniqueId__default = /*#__PURE__*/_interopDefaultLegacy(uniqueId);
+var Draggable__default = /*#__PURE__*/_interopDefaultLegacy(Draggable);
+var FC__default = /*#__PURE__*/_interopDefaultLegacy(FC);
+
+var WidgetType;
+(function (WidgetType) {
+    WidgetType["RowWidget"] = "RowWidget";
+    WidgetType["TableWidget"] = "TableWidget";
+    WidgetType["UploadFile"] = "UploadFile";
+})(WidgetType || (WidgetType = {}));
+function getFieldRatioRule(rule, parentRule) {
+    let defaultValue = rule.config.fieldRatio;
+    const propRule = {
+        type: 'radio',
+        title: '字段占比',
+        options: [],
+        props: {
+            optionType: 'button',
+            buttonStyle: 'solid',
+        },
+    };
+    switch (parentRule === null || parentRule === void 0 ? void 0 : parentRule.type) {
+        case WidgetType.RowWidget:
+            defaultValue = defaultValue || 12;
+            propRule.options = [
+                { value: 6, label: '25%' },
+                { value: 12, label: '50%' },
+                { value: 18, label: '75%' },
+                { value: 24, label: '100%' },
+            ];
+            propRule.value = defaultValue;
+            break;
+        case WidgetType.TableWidget:
+            defaultValue = defaultValue || '140px';
+            propRule.title = '子字段宽度';
+            propRule.options = [
+                { value: '140px', label: '小' },
+                { value: '212px', label: '中' },
+                { value: '392px', label: '大' },
+                { value: '572px', label: '超大 ' },
+            ];
+            propRule.value = defaultValue;
+            break;
+        default:
+            defaultValue = defaultValue || '100%';
+            propRule.options = [
+                { value: '25%', label: '25%' },
+                { value: '50%', label: '50%' },
+                { value: '75%', label: '75%' },
+                { value: '100%', label: '100%' },
+            ];
+            propRule.value = defaultValue;
+    }
+    return propRule;
+}
 
 var _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
@@ -13,22 +78,4157 @@ var _export_sfc = (sfc, props) => {
   return target;
 };
 
+const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  __name: "widget-instruction",
+  props: ["rule"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        style: vue.normalizeStyle({ minHeight: "22px", color: __props.rule.style.color })
+      }, vue.toDisplayString(__props.rule.value), 5);
+    };
+  }
+});
+var WidgetInstruction = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__file", "widget-instruction.vue"]]);
+
+const _hoisted_1$g = {
+  key: 2,
+  class: "bm-drag-tool-mask"
+};
+const _hoisted_2$d = /* @__PURE__ */ vue.createTextVNode("\u590D\u5236");
+const _hoisted_3$b = /* @__PURE__ */ vue.createTextVNode("\u5220\u9664");
+const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+  __name: "drag-tool",
+  props: ["rule", "activeRule", "parentRule"],
+  emits: [
+    "copy",
+    "delete",
+    "mouseenter",
+    "mouseleave",
+    "setActiveRule",
+    "widgetAdd"
+  ],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const isActive = vue.computed(() => props.rule.field === props.activeRule?.field);
+    const option = vue.computed(() => ({
+      form: {
+        layout: "vertical"
+      },
+      submitBtn: {
+        show: false
+      },
+      parentType: props.parentRule?.type,
+      childRules: props.parentRule?.config?.childRules
+    }));
+    function emitCopyEvt(rule, parentRule = void 0) {
+      emits("copy", rule, parentRule);
+    }
+    function emitDeleteEvt(rule, parentRule = void 0) {
+      emits("delete", rule, parentRule);
+    }
+    function handleCopy() {
+      emitCopyEvt(props.rule);
+    }
+    function handleDelete() {
+      emitDeleteEvt(props.rule);
+    }
+    function handleMouseenter() {
+      props.rule.config.isHover = true;
+      emits("mouseenter");
+    }
+    function handleMouseleave() {
+      props.rule.config.isHover = false;
+      emits("mouseleave");
+    }
+    function handleRowWidgetMouseenter() {
+      props.rule.config.isHover = false;
+    }
+    function handleRowWidgetMouseleave() {
+      props.rule.config.isHover = true;
+    }
+    function handleRowWidgetSetActiveRule(element) {
+      emits("setActiveRule", element, props.rule);
+    }
+    function handleRowWidgetCopy(rule) {
+      emitCopyEvt(rule, props.rule);
+    }
+    function handleRowWidgetDelete(rule) {
+      emitDeleteEvt(rule, props.rule);
+    }
+    function handleRowWidgetAdd(rule) {
+      emits("widgetAdd", rule, props.rule);
+    }
+    return (_ctx, _cache) => {
+      const _component_FormCreate = vue.resolveComponent("FormCreate");
+      const _component_Copy = vue.resolveComponent("Copy");
+      const _component_ACol = vue.resolveComponent("ACol");
+      const _component_Delete = vue.resolveComponent("Delete");
+      const _component_ARow = vue.resolveComponent("ARow");
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass([
+          "bm-drag-tool",
+          __props.rule.type === vue.unref(WidgetType).RowWidget ? "is-row" : "",
+          vue.unref(isActive) ? "is-active" : "",
+          __props.rule?.config?.putDisabled ? "is-put-disabled" : ""
+        ]),
+        onMouseenter: handleMouseenter,
+        onMouseleave: handleMouseleave
+      }, [
+        __props.rule.type ? (vue.openBlock(), vue.createBlock(_component_FormCreate, {
+          key: 0,
+          option: vue.unref(option),
+          rule: [__props.rule],
+          onNestMouseenter: handleRowWidgetMouseenter,
+          onNestMouseleave: handleRowWidgetMouseleave,
+          onNestSetActiveRule: handleRowWidgetSetActiveRule,
+          onNestCopy: handleRowWidgetCopy,
+          onNestDelete: handleRowWidgetDelete,
+          onNestAdd: handleRowWidgetAdd
+        }, null, 8, ["option", "rule"])) : (vue.openBlock(), vue.createBlock(WidgetInstruction, {
+          key: 1,
+          rule: __props.rule
+        }, null, 8, ["rule"])),
+        __props.rule.type !== vue.unref(WidgetType).RowWidget && __props.rule.type !== vue.unref(WidgetType).TableWidget ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g)) : vue.createCommentVNode("v-if", true),
+        __props.rule.config.isHover || vue.unref(isActive) ? (vue.openBlock(), vue.createBlock(_component_ARow, {
+          key: 3,
+          class: "bm-drag-tool-btn",
+          gutter: [16, 0]
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_ACol, { class: "bm-drag-tool-btn-col" }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(antDesignVue.Tooltip), { placement: "top" }, {
+                  title: vue.withCtx(() => [
+                    _hoisted_2$d
+                  ]),
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_component_Copy, {
+                      class: "bm-drag-tool-btn-icon is-copy",
+                      onClick: vue.withModifiers(handleCopy, ["stop"])
+                    }, null, 8, ["onClick"])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            vue.createVNode(_component_ACol, { class: "bm-drag-tool-btn-col" }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(antDesignVue.Tooltip), { placement: "top" }, {
+                  title: vue.withCtx(() => [
+                    _hoisted_3$b
+                  ]),
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_component_Delete, {
+                      class: "bm-drag-tool-btn-icon is-delete",
+                      onClick: vue.withModifiers(handleDelete, ["stop"])
+                    }, null, 8, ["onClick"])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })) : vue.createCommentVNode("v-if", true)
+      ], 34);
+    };
+  }
+});
+var DragTool = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__file", "drag-tool.vue"]]);
+
+const _hoisted_1$f = { class: "bm-drag-placeholder" };
+const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  __name: "drag-placeholder",
+  props: {},
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f);
+    };
+  }
+});
+var DragPlaceholder = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__file", "drag-placeholder.vue"]]);
+
+const _hoisted_1$e = { class: "bm-widget-row-wrap" };
+const _hoisted_2$c = {
+  key: 0,
+  class: "bm-widget-row-tip"
+};
+const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+  __name: "widget-row",
+  props: ["activeRule", "formCreateInject"],
+  emits: [
+    "mouseenter",
+    "mouseleave",
+    "set-active-rule",
+    "copy",
+    "delete",
+    "add"
+  ],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const childRules = vue.computed(() => props.formCreateInject.rule.config.childRules);
+    function handleMouseenter() {
+      emits("mouseenter");
+    }
+    function handleMouseleave() {
+      emits("mouseleave");
+    }
+    function emitSetActiveRuleEvt(rule) {
+      emits("set-active-rule", rule);
+    }
+    function handleClick(element) {
+      emitSetActiveRuleEvt(element);
+    }
+    function handleRowWidgetAdd({ newIndex }) {
+      emits("add", childRules.value[newIndex]);
+    }
+    function handleRowWidgetUpdate({ newIndex }) {
+      const rule = childRules.value[newIndex];
+      if (rule)
+        emitSetActiveRuleEvt(rule);
+    }
+    function handleCopy(rule) {
+      emits("copy", rule);
+    }
+    function handleDelete(rule) {
+      emits("delete", rule);
+    }
+    return (_ctx, _cache) => {
+      const _component_ACol = vue.resolveComponent("ACol");
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
+        !vue.unref(childRules).length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$c, " \u53EF\u62D6\u5165\u591A\u4E2A\u63A7\u4EF6 ")) : vue.createCommentVNode("v-if", true),
+        vue.createVNode(vue.unref(Draggable__default["default"]), {
+          "component-data": {
+            field: __props.formCreateInject.rule.field,
+            type: vue.unref(WidgetType).RowWidget
+          },
+          class: "bm-widget-row",
+          tag: "ARow",
+          group: {
+            name: "rowWidget",
+            pull: true,
+            put: ["widget", "rowWidget", "formWidget"]
+          },
+          "ghost-class": vue.unref(childRules).length ? "row-drag-ghost" : "row-drag-ghost__is-empty",
+          list: vue.unref(childRules),
+          "force-fallback": true,
+          delay: 50,
+          "item-key": "field",
+          direction: "vertical",
+          onAdd: handleRowWidgetAdd,
+          onUpdate: handleRowWidgetUpdate
+        }, {
+          item: vue.withCtx(({ element }) => [
+            vue.createVNode(_component_ACol, {
+              span: element.config.fieldRatio
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(DragTool, {
+                  rule: element,
+                  "active-rule": __props.activeRule,
+                  "parent-rule": __props.formCreateInject.rule,
+                  onMouseenter: handleMouseenter,
+                  onMouseleave: handleMouseleave,
+                  onClick: vue.withModifiers(($event) => handleClick(element), ["stop"]),
+                  onCopy: handleCopy,
+                  onDelete: handleDelete
+                }, null, 8, ["rule", "active-rule", "parent-rule", "onClick"]),
+                vue.createVNode(DragPlaceholder)
+              ]),
+              _: 2
+            }, 1032, ["span"])
+          ]),
+          _: 1
+        }, 8, ["component-data", "ghost-class", "list"])
+      ]);
+    };
+  }
+});
+var WidgetRow = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__file", "widget-row.vue"]]);
+
+const label$h = '分栏';
+const fieldsMap$h = {
+    'title.title': 'title.title',
+    'config.title': 'config.title',
+    'config.showTitle': 'config.showTitle',
+};
+function handleTitle(title) {
+    return title + '(该标题不会显示在表单)';
+}
+const name$h = 'row';
+var row = {
+    icon: 'RowIcon',
+    name: name$h,
+    label: label$h,
+    rule() {
+        return {
+            type: WidgetType.RowWidget,
+            component: WidgetRow,
+            title: {
+                title: label$h,
+            },
+            field: uniqueId__default["default"](),
+            props: {
+                field: '',
+                list: [],
+                activeRule: {},
+            },
+            emit: [
+                'mouseenter',
+                'mouseleave',
+                'set-active-rule',
+                'copy',
+                'delete',
+                'add',
+            ],
+            emitPrefix: 'nest',
+            config: {
+                title: label$h,
+                showTitle: true,
+                childRules: [],
+                propsFields: Object.values(fieldsMap$h),
+            },
+        };
+    },
+    props(rule) {
+        return [
+            {
+                type: 'input',
+                title: '标题',
+                field: fieldsMap$h['config.title'],
+                value: rule.config.title,
+                effect: {
+                    required: '请输入标题',
+                },
+                props: {
+                    placeholder: '请输入',
+                    maxlength: 10,
+                },
+                inject: true,
+                on: {
+                    change({ api, self }, $event) {
+                        const showTitle = rule.config.showTitle;
+                        let title = $event.target.value;
+                        if (!showTitle) {
+                            title = handleTitle(title);
+                        }
+                        api.emit('change', 'title.title', title, self, api, true);
+                    },
+                },
+            },
+            {
+                type: 'switch',
+                title: '是否显示标题',
+                field: fieldsMap$h['config.showTitle'],
+                value: rule.config.showTitle,
+                inject: true,
+                on: {
+                    change({ api, self }, value) {
+                        let title = rule.config.title;
+                        if (!value) {
+                            title = handleTitle(title);
+                        }
+                        api.emit('change', 'title.title', title, self, api, true);
+                    },
+                },
+            },
+        ];
+    },
+    parse(rule) {
+        return {
+            name: name$h,
+            field: rule.field,
+            title: {
+                title: rule.title.title,
+            },
+            config: {
+                title: rule.config.title,
+                showTitle: rule.config.showTitle,
+            },
+        };
+    },
+};
+
+const label$g = '单行输入框';
+const fieldsMap$g = {
+    'title.title': 'title.title',
+    'props.placeholder': 'props.placeholder',
+    value: 'value',
+    'config.fieldRatio': 'config.fieldRatio',
+    'effect.required': 'effect.required',
+};
+const name$g = 'input';
+var input = {
+    icon: 'InputIcon',
+    name: name$g,
+    label: label$g,
+    rule() {
+        return {
+            type: 'input',
+            field: uniqueId__default["default"](),
+            title: {
+                title: label$g,
+                style: {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                },
+            },
+            effect: {
+                required: true,
+                formRule: 'formRule',
+            },
+            props: {
+                maxlength: 200,
+                placeholder: '请输入',
+            },
+            config: {
+                propsFields: Object.values(fieldsMap$g),
+            },
+        };
+    },
+    props(rule, parentRule) {
+        return [
+            {
+                type: 'input',
+                title: '标题',
+                field: fieldsMap$g['title.title'],
+                value: rule.title.title,
+                effect: {
+                    required: '请输入标题',
+                },
+                props: {
+                    placeholder: '请输入',
+                    maxlength: 10,
+                },
+            },
+            {
+                type: 'input',
+                title: '提示文字',
+                field: fieldsMap$g['props.placeholder'],
+                props: {
+                    placeholder: '请输入',
+                },
+                value: rule.props.placeholder,
+            },
+            {
+                type: 'input',
+                title: '默认值',
+                field: fieldsMap$g['value'],
+                props: {
+                    placeholder: '请输入',
+                },
+                value: rule.value,
+            },
+            Object.assign({ field: fieldsMap$g['config.fieldRatio'] }, getFieldRatioRule(rule, parentRule)),
+            {
+                type: 'switch',
+                title: '是否必填',
+                field: fieldsMap$g['effect.required'],
+                value: rule.effect.required,
+            },
+        ];
+    },
+    parse(rule) {
+        return {
+            name: name$g,
+            field: rule.field,
+            title: {
+                title: rule.title.title,
+            },
+            props: {
+                placeholder: rule.props.placeholder,
+            },
+            value: rule.value,
+            config: {
+                fieldRatio: rule.config.fieldRatio,
+            },
+            effect: {
+                required: rule.effect.required,
+            },
+        };
+    },
+};
+
+const label$f = '多行输入框';
+const fieldsMap$f = {
+    'title.title': 'title.title',
+    'props.placeholder': 'props.placeholder',
+    value: 'value',
+    'config.fieldRatio': 'config.fieldRatio',
+    'effect.required': 'effect.required',
+};
+const name$f = 'textarea';
+var textarea = {
+    icon: 'TextareaIcon',
+    name: name$f,
+    label: label$f,
+    rule() {
+        return {
+            type: 'input',
+            field: uniqueId__default["default"](),
+            title: {
+                title: label$f,
+                style: {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                },
+            },
+            effect: {
+                required: true,
+                formRule: 'formRule',
+            },
+            props: {
+                type: 'textarea',
+                placeholder: '请输入',
+                maxlength: 5000,
+            },
+            config: {
+                propsFields: Object.values(fieldsMap$f),
+            },
+        };
+    },
+    props(rule, parentRule) {
+        return [
+            {
+                type: 'input',
+                title: '标题',
+                field: fieldsMap$f['title.title'],
+                value: rule.title.title,
+                effect: {
+                    required: '请输入标题',
+                },
+                props: {
+                    placeholder: '请输入',
+                    maxlength: 10,
+                },
+            },
+            {
+                type: 'input',
+                title: '提示文字',
+                field: fieldsMap$f['props.placeholder'],
+                props: {
+                    placeholder: '请输入',
+                },
+                value: rule.props.placeholder,
+            },
+            {
+                type: 'input',
+                title: '默认值',
+                field: fieldsMap$f['value'],
+                props: {
+                    placeholder: '请输入',
+                },
+                value: rule.value,
+            },
+            Object.assign({ field: fieldsMap$f['config.fieldRatio'] }, getFieldRatioRule(rule, parentRule)),
+            {
+                type: 'switch',
+                title: '是否必填',
+                field: fieldsMap$f['effect.required'],
+                value: rule.effect.required,
+            },
+        ];
+    },
+    parse(rule) {
+        return {
+            name: name$f,
+            field: rule.field,
+            title: {
+                title: rule.title.title,
+            },
+            props: {
+                placeholder: rule.props.placeholder,
+            },
+            value: rule.value,
+            config: {
+                fieldRatio: rule.config.fieldRatio,
+            },
+            effect: {
+                required: rule.effect.required,
+            },
+        };
+    },
+};
+
+const label$e = '数字输入框';
+const fieldsMap$e = {
+    'title.title': 'title.title',
+    'props.placeholder': 'props.placeholder',
+    value: 'value',
+    'config.fieldRatio': 'config.fieldRatio',
+    'config.count': 'config.count',
+    'effect.required': 'effect.required',
+};
+const name$e = 'numInput';
+var numInput = {
+    icon: 'NumInput',
+    name: name$e,
+    label: label$e,
+    rule() {
+        return {
+            type: 'inputNumber',
+            field: uniqueId__default["default"](),
+            title: {
+                title: label$e,
+                style: {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                },
+            },
+            effect: {
+                required: true,
+                formRule: 'formRule',
+            },
+            props: {
+                placeholder: '请输入',
+            },
+            config: {
+                propsFields: Object.values(fieldsMap$e),
+            },
+            style: {
+                width: '100%',
+            },
+        };
+    },
+    props(rule, parentRule) {
+        return [
+            {
+                type: 'input',
+                title: '标题',
+                field: fieldsMap$e['title.title'],
+                value: rule.title.title,
+                effect: {
+                    required: '请输入标题',
+                },
+                props: {
+                    placeholder: '请输入',
+                    maxlength: 10,
+                },
+            },
+            {
+                type: 'input',
+                title: '提示文字',
+                field: fieldsMap$e['props.placeholder'],
+                props: {
+                    placeholder: '请输入',
+                },
+                value: rule.props.placeholder,
+            },
+            {
+                type: 'inputNumber',
+                title: '默认值',
+                field: fieldsMap$e['value'],
+                props: {
+                    placeholder: '请输入',
+                    type: 'number',
+                },
+                value: rule.value,
+                style: {
+                    width: '100%',
+                },
+            },
+            Object.assign({ field: fieldsMap$e['config.fieldRatio'] }, getFieldRatioRule(rule, parentRule)),
+            {
+                type: 'switch',
+                title: '统计总数',
+                info: '仅当该控件结合“表格”控件使用时应用',
+                field: fieldsMap$e['config.count'],
+                value: rule.config.count,
+                props: {
+                    disabled: (parentRule === null || parentRule === void 0 ? void 0 : parentRule.type) !== WidgetType.TableWidget,
+                },
+            },
+            {
+                type: 'switch',
+                title: '是否必填',
+                field: fieldsMap$e['effect.required'],
+                value: rule.effect.required,
+                info: '勾选后可作为流程条件',
+            },
+        ];
+    },
+    parse(rule) {
+        return {
+            name: name$e,
+            field: rule.field,
+            title: {
+                title: rule.title.title,
+            },
+            props: {
+                placeholder: rule.props.placeholder,
+            },
+            value: rule.value,
+            config: {
+                count: rule.config.count,
+                fieldRatio: rule.config.fieldRatio,
+            },
+            effect: {
+                required: rule.effect.required,
+            },
+        };
+    },
+};
+
+const _hoisted_1$d = { class: "bm-handle-options" };
+const _hoisted_2$b = {
+  key: 0,
+  class: "bm-handle-options__error-tip"
+};
+const _hoisted_3$a = /* @__PURE__ */ vue.createTextVNode(" \u6279\u91CF\u7F16\u8F91 ");
+const _hoisted_4$7 = /* @__PURE__ */ vue.createTextVNode(" \u6DFB\u52A0\u9009\u9879 ");
+const _hoisted_5$4 = /* @__PURE__ */ vue.createTextVNode(" \u6BCF\u884C\u5BF9\u5E94\u4E00\u4E2A\u9009\u9879 ");
+const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+  __name: "handle-options",
+  props: ["options"],
+  emits: ["setValue"],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const handleClass = "bm-handle-options__drag-icon";
+    const visible = vue.ref(false);
+    const text = vue.ref("");
+    const repeatOption = vue.ref([]);
+    function edit() {
+      visible.value = true;
+      text.value = makeText(props.options);
+    }
+    function add() {
+      const index = props.options.length;
+      const value = `\u9009\u9879${index + 1}`;
+      props.options.push({ value, label: value });
+    }
+    function makeText(options) {
+      return options.reduce((pre, cur) => {
+        if (!pre) {
+          return cur.label;
+        } else {
+          return pre + "\n" + cur.label;
+        }
+      }, "");
+    }
+    function handleOk() {
+      const options = text.value.split("\n").reduce((pre, cur) => {
+        if (cur) {
+          pre.push({ value: cur, label: cur });
+        }
+        return pre;
+      }, []);
+      props.options.splice(0, props.options.length);
+      props.options.push(...options);
+      visible.value = false;
+    }
+    function handleBlur(element) {
+      element.value = element.label;
+    }
+    function handleRepeatOption(val) {
+      repeatOption.value = [];
+      const cache = {};
+      val.forEach(({ value }) => {
+        if (!cache[value]) {
+          cache[value] = 1;
+        } else {
+          cache[value]++;
+          if (cache[value] === 2) {
+            repeatOption.value.push(value);
+          }
+        }
+      });
+    }
+    function emitSetValue(val) {
+      emits("setValue", val);
+    }
+    vue.watch(
+      props.options,
+      (val) => {
+        handleRepeatOption(val);
+        emitSetValue(val);
+      },
+      { deep: true }
+    );
+    return (_ctx, _cache) => {
+      const _component_Delete = vue.resolveComponent("Delete");
+      const _component_ARow = vue.resolveComponent("ARow");
+      const _component_a_textarea = vue.resolveComponent("a-textarea");
+      const _component_a_modal = vue.resolveComponent("a-modal");
+      return vue.openBlock(), vue.createElementBlock("div", null, [
+        vue.createVNode(vue.unref(Draggable__default["default"]), {
+          tag: "transition-group",
+          "component-data": {
+            name: "flip-list"
+          },
+          animation: 200,
+          list: __props.options,
+          handle: `.${handleClass}`,
+          "force-fallback": true
+        }, {
+          item: vue.withCtx(({ element, index }) => [
+            vue.createElementVNode("div", _hoisted_1$d, [
+              vue.createVNode(_component_ARow, { align: "middle" }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(iconsVue.HolderOutlined), {
+                    class: vue.normalizeClass([handleClass])
+                  }, null, 8, ["class"]),
+                  vue.createVNode(vue.unref(antDesignVue.FormItemRest), null, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(antDesignVue.Input), {
+                        value: element.label,
+                        "onUpdate:value": ($event) => element.label = $event,
+                        class: vue.normalizeClass([
+                          "bm-handle-options__input",
+                          repeatOption.value.length && repeatOption.value.includes(element.value) ? "is-error" : ""
+                        ]),
+                        onBlur: ($event) => handleBlur(element)
+                      }, null, 8, ["value", "onUpdate:value", "class", "onBlur"])
+                    ]),
+                    _: 2
+                  }, 1024),
+                  vue.createVNode(_component_Delete, {
+                    class: "bm-handle-options__del-icon",
+                    onClick: ($event) => __props.options.splice(index, 1)
+                  }, null, 8, ["onClick"])
+                ]),
+                _: 2
+              }, 1024),
+              repeatOption.value.length && repeatOption.value.includes(element.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$b, " \u8BF7\u66F4\u6539\u91CD\u590D\u9009\u9879 ")) : vue.createCommentVNode("v-if", true)
+            ])
+          ]),
+          _: 1
+        }, 8, ["list", "handle"]),
+        vue.createVNode(vue.unref(antDesignVue.Button), {
+          style: { "margin-left": "24px", "margin-top": "8px" },
+          onClick: edit
+        }, {
+          icon: vue.withCtx(() => [
+            vue.createVNode(vue.unref(iconsVue.EditOutlined))
+          ]),
+          default: vue.withCtx(() => [
+            _hoisted_3$a
+          ]),
+          _: 1
+        }),
+        vue.createVNode(vue.unref(antDesignVue.Button), {
+          style: { "margin-left": "8px", "margin-top": "8px" },
+          onClick: add
+        }, {
+          icon: vue.withCtx(() => [
+            vue.createVNode(vue.unref(iconsVue.PlusOutlined))
+          ]),
+          default: vue.withCtx(() => [
+            _hoisted_4$7
+          ]),
+          _: 1
+        }),
+        vue.createVNode(_component_a_modal, {
+          visible: visible.value,
+          "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
+          title: "\u9009\u9879\u6279\u91CF\u7F16\u8F91",
+          onOk: handleOk
+        }, {
+          default: vue.withCtx(() => [
+            _hoisted_5$4,
+            vue.createVNode(_component_a_textarea, {
+              value: text.value,
+              "onUpdate:value": _cache[0] || (_cache[0] = ($event) => text.value = $event),
+              style: { "margin-top": "8px" },
+              placeholder: "\u8BF7\u8F93\u5165",
+              "auto-size": { minRows: 8 }
+            }, null, 8, ["value"])
+          ]),
+          _: 1
+        }, 8, ["visible"])
+      ]);
+    };
+  }
+});
+var HandleOptionsCom = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__file", "handle-options.vue"]]);
+
+const label$d = '单选框';
+const ruleType$1 = {
+    checkedValue: 'radio',
+    unCheckedValue: 'select',
+};
+const fieldsMap$d = {
+    'title.title': 'title.title',
+    'props.placeholder': 'props.placeholder',
+    options: 'options',
+    type: 'type',
+    'config.fieldRatio': 'config.fieldRatio',
+    'effect.required': 'effect.required',
+};
+const name$d = 'radio';
+var radio = {
+    icon: 'RadioIcon',
+    name: name$d,
+    label: label$d,
+    rule() {
+        return {
+            type: ruleType$1.unCheckedValue,
+            field: uniqueId__default["default"](),
+            title: {
+                title: label$d,
+                style: {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                },
+            },
+            effect: {
+                required: true,
+                formRule: 'formRule',
+            },
+            options: [
+                {
+                    value: '选项1',
+                    label: '选项1',
+                },
+                {
+                    value: '选项2',
+                    label: '选项2',
+                },
+                {
+                    value: '选项3',
+                    label: '选项3',
+                },
+            ],
+            props: {
+                placeholder: '请选择',
+            },
+            config: {
+                propsFields: Object.values(fieldsMap$d),
+            },
+        };
+    },
+    props(rule, parentRule) {
+        return [
+            {
+                type: 'input',
+                title: '标题',
+                field: fieldsMap$d['title.title'],
+                value: rule.title.title,
+                effect: {
+                    required: '请输入标题',
+                },
+                props: {
+                    placeholder: '请输入',
+                    maxlength: 10,
+                },
+            },
+            {
+                type: 'input',
+                title: '提示文字',
+                field: fieldsMap$d['props.placeholder'],
+                props: {
+                    placeholder: '请输入',
+                },
+                value: rule.props.placeholder,
+            },
+            {
+                type: 'HandleOptions',
+                component: HandleOptionsCom,
+                title: '选项',
+                field: fieldsMap$d['options'],
+                props: {
+                    options: rule.options,
+                },
+                value: rule.options,
+                inject: true,
+                on: {
+                    setValue(inject, options) {
+                        const rule = inject.self;
+                        const api = inject.api;
+                        api.changeValue(rule.field, options);
+                        api.emit('change', rule.field, rule.value, rule, api, true);
+                    },
+                },
+            },
+            {
+                hidden: (parentRule === null || parentRule === void 0 ? void 0 : parentRule.type) === WidgetType.TableWidget,
+                type: 'switch',
+                title: '选项平铺',
+                field: fieldsMap$d['type'],
+                value: rule.type,
+                props: Object.assign({}, ruleType$1),
+            },
+            Object.assign({ field: fieldsMap$d['config.fieldRatio'] }, getFieldRatioRule(rule, parentRule)),
+            {
+                type: 'switch',
+                title: '是否必填',
+                field: fieldsMap$d['effect.required'],
+                value: rule.effect.required,
+            },
+        ];
+    },
+    parse(rule) {
+        return {
+            name: name$d,
+            field: rule.field,
+            type: rule.type,
+            title: {
+                title: rule.title.title,
+            },
+            props: {
+                placeholder: rule.props.placeholder,
+            },
+            options: rule.options,
+            config: {
+                fieldRatio: rule.config.fieldRatio,
+            },
+            effect: {
+                required: rule.effect.required,
+            },
+        };
+    },
+};
+
+const label$c = '多选框';
+const ruleType = {
+    checkedValue: 'checkbox',
+    unCheckedValue: 'select',
+};
+const fieldsMap$c = {
+    'title.title': 'title.title',
+    'props.placeholder': 'props.placeholder',
+    options: 'options',
+    type: 'type',
+    'config.fieldRatio': 'config.fieldRatio',
+    'effect.required': 'effect.required',
+};
+const name$c = 'checkbox';
+var checkbox = {
+    icon: 'CheckboxIcon',
+    name: name$c,
+    label: label$c,
+    rule() {
+        return {
+            type: ruleType.unCheckedValue,
+            field: uniqueId__default["default"](),
+            title: {
+                title: label$c,
+                style: {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                },
+            },
+            effect: {
+                required: true,
+                formRule: 'formRule',
+            },
+            options: [
+                {
+                    value: '选项1',
+                    label: '选项1',
+                },
+                {
+                    value: '选项2',
+                    label: '选项2',
+                },
+                {
+                    value: '选项3',
+                    label: '选项3',
+                },
+            ],
+            props: {
+                placeholder: '请选择',
+            },
+            config: {
+                propsFields: Object.values(fieldsMap$c),
+            },
+        };
+    },
+    props(rule, parentRule) {
+        return [
+            {
+                type: 'input',
+                title: '标题',
+                field: fieldsMap$c['title.title'],
+                value: rule.title.title,
+                effect: {
+                    required: '请输入标题',
+                },
+                props: {
+                    placeholder: '请输入',
+                    maxlength: 10,
+                },
+            },
+            {
+                type: 'input',
+                title: '提示文字',
+                field: fieldsMap$c['props.placeholder'],
+                props: {
+                    placeholder: '请输入',
+                },
+                value: rule.props.placeholder,
+            },
+            {
+                type: 'HandleOptions',
+                component: HandleOptionsCom,
+                title: '选项',
+                field: fieldsMap$c['options'],
+                props: {
+                    options: rule.options,
+                },
+                value: rule.options,
+                inject: true,
+                on: {
+                    setValue(inject, options) {
+                        const rule = inject.self;
+                        const api = inject.api;
+                        api.changeValue(rule.field, options);
+                        api.emit('change', rule.field, rule.value, rule, api, true);
+                    },
+                },
+            },
+            {
+                hidden: (parentRule === null || parentRule === void 0 ? void 0 : parentRule.type) === WidgetType.TableWidget,
+                type: 'switch',
+                title: '选项平铺',
+                field: fieldsMap$c['type'],
+                value: rule.type,
+                props: Object.assign({}, ruleType),
+            },
+            Object.assign({ field: fieldsMap$c['config.fieldRatio'] }, getFieldRatioRule(rule, parentRule)),
+            {
+                type: 'switch',
+                title: '是否必填',
+                field: fieldsMap$c['effect.required'],
+                value: rule.effect.required,
+            },
+        ];
+    },
+    parse(rule) {
+        return {
+            name: name$c,
+            field: rule.field,
+            type: rule.type,
+            title: {
+                title: rule.title.title,
+            },
+            props: {
+                placeholder: rule.props.placeholder,
+            },
+            options: rule.options,
+            config: {
+                fieldRatio: rule.config.fieldRatio,
+            },
+            effect: {
+                required: rule.effect.required,
+            },
+        };
+    },
+};
+
+const _hoisted_1$c = { class: "bm-default-date" };
+const _hoisted_2$a = /* @__PURE__ */ vue.createTextVNode(" \u5F53\u524D\u65F6\u95F4(\u5E74/\u6708/\u65E5) ");
+const _hoisted_3$9 = /* @__PURE__ */ vue.createTextVNode(" \u83B7\u53D6\u7528\u6237\u5B9E\u9645\u586B\u5199\u65F6\u7684\u65F6\u95F4 ");
+const _hoisted_4$6 = /* @__PURE__ */ vue.createTextVNode("\u81EA\u5B9A\u4E49");
+const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+  __name: "default-date",
+  props: ["defaultRadioValue", "defalueDateValue"],
+  emits: ["change"],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const radioValue = vue.ref(props.defaultRadioValue);
+    const dateValue = vue.ref(props.defalueDateValue);
+    function emitChange(dateValue2) {
+      emits("change", radioValue.value, dateValue2);
+    }
+    function handleRadioChange(evt) {
+      radioValue.value = evt.target.value;
+      dateValue.value = "";
+      emitChange("");
+    }
+    function handleDateChange(date) {
+      dateValue.value = date;
+      emitChange(date);
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
+        vue.createVNode(vue.unref(antDesignVue.FormItemRest), null, {
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(antDesignVue.RadioGroup), {
+              value: radioValue.value,
+              onChange: handleRadioChange
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(antDesignVue.Radio), { value: 0 }, {
+                  default: vue.withCtx(() => [
+                    _hoisted_2$a,
+                    vue.createVNode(vue.unref(antDesignVue.Tooltip), null, {
+                      title: vue.withCtx(() => [
+                        _hoisted_3$9
+                      ]),
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(iconsVue.QuestionCircleOutlined), { style: { "color": "#babac1" } })
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }),
+                vue.createVNode(vue.unref(antDesignVue.Radio), { value: 1 }, {
+                  default: vue.withCtx(() => [
+                    _hoisted_4$6
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["value"]),
+            radioValue.value === 1 ? (vue.openBlock(), vue.createBlock(vue.unref(antDesignVue.DatePicker), {
+              key: 0,
+              style: { width: "100%", marginTop: "8px" },
+              value: dateValue.value,
+              format: "YYYY-MM-DD",
+              "value-format": "YYYY-MM-DD",
+              placeholder: "\u8BF7\u9009\u62E9",
+              onChange: handleDateChange
+            }, null, 8, ["value"])) : vue.createCommentVNode("v-if", true)
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+var DefaultDate = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__file", "default-date.vue"]]);
+
+const label$b = '日期';
+const fieldsMap$b = {
+    'title.title': 'title.title',
+    'props.format': 'props.format',
+    'props.placeholder': 'props.placeholder',
+    value: 'value',
+    'config.defaultValue': 'config.defaultValue',
+    'config.fieldRatio': 'config.fieldRatio',
+    'effect.required': 'effect.required',
+};
+const name$b = 'date';
+var date = {
+    icon: 'Date',
+    name: name$b,
+    label: label$b,
+    rule() {
+        return {
+            type: 'datePicker',
+            field: uniqueId__default["default"](),
+            title: {
+                title: label$b,
+                style: {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                },
+            },
+            effect: {
+                required: true,
+                formRule: 'formRule',
+            },
+            props: {
+                placeholder: '请选择',
+                format: 'YYYY-MM',
+            },
+            config: {
+                propsFields: Object.values(fieldsMap$b),
+                defaultValue: 1,
+            },
+            style: {
+                width: '100%',
+            },
+        };
+    },
+    props(rule, parentRule) {
+        return [
+            {
+                type: 'input',
+                title: '标题',
+                field: fieldsMap$b['title.title'],
+                value: rule.title.title,
+                effect: {
+                    required: '请输入标题',
+                },
+                props: {
+                    placeholder: '请输入',
+                    maxlength: 10,
+                },
+            },
+            {
+                type: 'select',
+                title: '日期类型',
+                field: fieldsMap$b['props.format'],
+                effect: {
+                    required: '请选择日期类型',
+                },
+                props: {
+                    placeholder: '请选择',
+                },
+                options: [
+                    {
+                        value: 'YYYY-MM',
+                        label: '年-月',
+                    },
+                    {
+                        value: 'YYYY-MM-DD',
+                        label: '年-月-日',
+                    },
+                    {
+                        value: 'YYYY-MM-DD HH:mm',
+                        label: '年-月-日 时:分',
+                    },
+                ],
+                value: rule.props.format,
+            },
+            {
+                type: 'input',
+                title: '提示文字',
+                field: fieldsMap$b['props.placeholder'],
+                props: {
+                    placeholder: '请输入',
+                },
+                value: rule.props.placeholder,
+            },
+            {
+                type: 'DefaultDate',
+                component: DefaultDate,
+                title: '默认值',
+                field: fieldsMap$b['config.defaultValue'],
+                props: {
+                    defaultRadioValue: rule.config.defaultValue,
+                    defalueDateValue: rule.value,
+                },
+                inject: true,
+                on: {
+                    change({ api, self }, radioValue, dateValue) {
+                        self.props.defaultRadioValue = radioValue;
+                        self.props.defalueDateValue = dateValue;
+                        api.emit('change', 'config.defaultValue', radioValue, self, api, true);
+                        api.emit('change', 'value', dateValue, self, api, true);
+                    },
+                },
+            },
+            Object.assign({ field: fieldsMap$b['config.fieldRatio'] }, getFieldRatioRule(rule, parentRule)),
+            {
+                type: 'switch',
+                title: '是否必填',
+                field: fieldsMap$b['effect.required'],
+                value: rule.effect.required,
+            },
+        ];
+    },
+    parse(rule) {
+        return {
+            name: name$b,
+            field: rule.field,
+            title: {
+                title: rule.title.title,
+            },
+            props: {
+                format: rule.props.format,
+                placeholder: rule.props.placeholder,
+            },
+            value: rule.value,
+            config: {
+                defaultValue: rule.config.defaultValue,
+                fieldRatio: rule.config.fieldRatio,
+            },
+            effect: {
+                required: rule.effect.required,
+            },
+        };
+    },
+};
+
+const label$a = '日期区间';
+const fieldsMap$a = {
+    'title.title': 'title.title',
+    'props.format': 'props.format',
+    'props.placeholder.0': 'props.placeholder.0',
+    'props.placeholder.1': 'props.placeholder.1',
+    'config.fieldRatio': 'config.fieldRatio',
+    'effect.required': 'effect.required',
+};
+const name$a = 'dateRange';
+var dateRange = {
+    icon: 'DateRange',
+    name: name$a,
+    label: label$a,
+    rule() {
+        return {
+            type: 'datePicker',
+            field: uniqueId__default["default"](),
+            title: {
+                title: label$a,
+                style: {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                },
+            },
+            effect: {
+                required: true,
+                formRule: 'formRule',
+            },
+            props: {
+                range: true,
+                placeholder: ['开始日期', '结束日期'],
+                format: 'YYYY-MM',
+                separator: '~',
+            },
+            config: {
+                propsFields: Object.values(fieldsMap$a),
+                defaultValue: 1,
+            },
+            style: {
+                width: '100%',
+            },
+        };
+    },
+    props(rule, parentRule) {
+        return [
+            {
+                type: 'input',
+                title: '标题',
+                field: fieldsMap$a['title.title'],
+                value: rule.title.title,
+                effect: {
+                    required: '请输入标题',
+                },
+                props: {
+                    placeholder: '请输入',
+                    maxlength: 10,
+                },
+            },
+            {
+                type: 'select',
+                title: '日期类型',
+                field: fieldsMap$a['props.format'],
+                effect: {
+                    required: '请选择日期类型',
+                },
+                props: {
+                    placeholder: '请选择',
+                },
+                options: [
+                    {
+                        value: 'YYYY-MM',
+                        label: '年-月',
+                    },
+                    {
+                        value: 'YYYY-MM-DD',
+                        label: '年-月-日',
+                    },
+                    {
+                        value: 'YYYY-MM-DD HH:mm',
+                        label: '年-月-日 时:分',
+                    },
+                ],
+                value: rule.props.format,
+            },
+            {
+                type: 'input',
+                title: '提示文字1',
+                field: fieldsMap$a['props.placeholder.0'],
+                props: {
+                    placeholder: '请输入',
+                },
+                value: rule.props.placeholder[0],
+            },
+            {
+                type: 'input',
+                title: '提示文字2',
+                field: fieldsMap$a['props.placeholder.1'],
+                props: {
+                    placeholder: '请输入',
+                },
+                value: rule.props.placeholder[1],
+            },
+            Object.assign({ field: fieldsMap$a['config.fieldRatio'] }, getFieldRatioRule(rule, parentRule)),
+            {
+                type: 'switch',
+                title: '是否必填',
+                field: fieldsMap$a['effect.required'],
+                value: rule.effect.required,
+            },
+        ];
+    },
+    parse(rule) {
+        return {
+            name: name$a,
+            field: rule.field,
+            title: {
+                title: rule.title.title,
+            },
+            props: {
+                format: rule.props.format,
+                placeholder: rule.props.placeholder,
+            },
+            config: {
+                fieldRatio: rule.config.fieldRatio,
+            },
+            effect: {
+                required: rule.effect.required,
+            },
+        };
+    },
+};
+
+const label$9 = '说明文字';
+const fieldsMap$9 = {
+    value: 'value',
+    'style.color': 'style.color',
+};
+const name$9 = 'instruction';
+var Colors;
+(function (Colors) {
+    Colors["Black"] = "#242633";
+    Colors["Blue"] = "#2F4EED";
+})(Colors || (Colors = {}));
+var instruction = {
+    icon: 'Instruction',
+    name: name$9,
+    label: label$9,
+    rule() {
+        return {
+            field: uniqueId__default["default"](),
+            config: {
+                propsFields: Object.values(fieldsMap$9),
+            },
+            style: {
+                color: Colors.Black,
+            },
+            value: '请输入说明文字',
+        };
+    },
+    props(rule, parentRule) {
+        return [
+            {
+                type: 'input',
+                props: {
+                    type: 'textarea',
+                    autoSize: {
+                        minRows: 5,
+                    },
+                },
+                title: label$9,
+                field: fieldsMap$9.value,
+                value: rule.value,
+                prefix: {
+                    type: 'TextColor',
+                    props: {
+                        rule,
+                    },
+                },
+            },
+        ];
+    },
+    parse(rule) {
+        return {
+            name: name$9,
+            field: rule.field,
+            value: rule.value,
+            style: {
+                color: rule.style.color,
+            },
+        };
+    },
+};
+
+const label$8 = '图片';
+const fieldsMap$8 = {
+    'title.title': 'title.title',
+    'props.extraProps.maxCount': 'props.extraProps.maxCount',
+    'effect.required': 'effect.required',
+};
+const name$8 = 'picture';
+var picture = {
+    icon: 'Picture',
+    name: name$8,
+    label: label$8,
+    rule() {
+        return {
+            type: 'UploadPicture',
+            component: components.BmUpload,
+            field: uniqueId__default["default"](),
+            title: {
+                title: label$8,
+                style: {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                },
+            },
+            effect: {
+                required: true,
+                formRule: 'formRule',
+            },
+            props: {
+                uploadProps: {
+                    listType: 'picture-card',
+                    text: '请选择',
+                },
+                extraProps: {
+                    maxCount: 9,
+                },
+            },
+            config: {
+                propsFields: Object.values(fieldsMap$8),
+            },
+        };
+    },
+    props(rule, parentRule) {
+        return [
+            {
+                type: 'input',
+                title: '标题',
+                field: fieldsMap$8['title.title'],
+                value: rule.title.title,
+                effect: {
+                    required: '请输入标题',
+                },
+                props: {
+                    placeholder: '请输入',
+                    maxlength: 10,
+                },
+            },
+            {
+                type: 'radio',
+                field: 'props.extraProps.maxCount',
+                title: '图片上传限制',
+                info: '单张图片的大小需在10M以内',
+                options: [
+                    {
+                        label: '最多可上传9张',
+                        value: 9,
+                    },
+                    {
+                        label: '仅允许上传1张图片',
+                        value: 1,
+                    },
+                ],
+                value: rule.props.extraProps.maxCount,
+                className: 'form-designer-props-radio-label',
+                inject: true,
+                on: {
+                    change({ api, self }, { target }) {
+                        const value = target.value;
+                        self.value = value;
+                        api.emit('change', self.field, value, self, api, true);
+                    },
+                },
+            },
+            {
+                type: 'switch',
+                title: '是否必填',
+                field: fieldsMap$8['effect.required'],
+                value: rule.effect.required,
+            },
+        ];
+    },
+    parse(rule) {
+        return {
+            name: name$8,
+            field: rule.field,
+            title: {
+                title: rule.title.title,
+            },
+            props: {
+                extraProps: {
+                    maxCount: rule.props.extraProps.maxCount,
+                },
+            },
+            effect: {
+                required: rule.effect.required,
+            },
+        };
+    },
+};
+
+const _hoisted_1$b = { class: "bm-widget-table-wrap" };
+const _hoisted_2$9 = { class: "bm-widget-table-top-bar" };
+const _hoisted_3$8 = /* @__PURE__ */ vue.createTextVNode(" \u65B0\u589E ");
+const _hoisted_4$5 = /* @__PURE__ */ vue.createTextVNode(" \u6279\u91CF\u5220\u9664 ");
+const _hoisted_5$3 = /* @__PURE__ */ vue.createTextVNode(" \u6279\u91CF\u5BFC\u5165 ");
+const _hoisted_6$3 = /* @__PURE__ */ vue.createTextVNode(" \u4E0B\u8F7D\u5BFC\u5165\u6A21\u677F ");
+const _hoisted_7$2 = { class: "bm-widget-table-outer" };
+const _hoisted_8$2 = { class: "bm-widget-table" };
+const _hoisted_9$1 = {
+  key: 0,
+  class: "bm-widget-table__virtual"
+};
+const _hoisted_10 = /* @__PURE__ */ vue.createElementVNode("div", { class: "bm-widget-table__virtual__head" }, null, -1);
+const _hoisted_11 = /* @__PURE__ */ vue.createElementVNode("div", { class: "bm-widget-table__virtual__content" }, null, -1);
+const _hoisted_12 = [
+  _hoisted_10,
+  _hoisted_11
+];
+const _hoisted_13 = {
+  key: 1,
+  class: "bm-widget-table__tip"
+};
+const _hoisted_14 = {
+  key: 0,
+  class: "bm-widget-table__checkbox"
+};
+const _hoisted_15 = { class: "bm-widget-table__checkbox__head" };
+const _hoisted_16 = { class: "bm-widget-table__checkbox__content" };
+const _hoisted_17 = { class: "bm-widget-table__operateColumn" };
+const _hoisted_18 = /* @__PURE__ */ vue.createElementVNode("div", { class: "bm-widget-table__operateColumn__head" }, "\u64CD\u4F5C", -1);
+const _hoisted_19 = { class: "bm-widget-table__operateColumn__content" };
+const _hoisted_20 = /* @__PURE__ */ vue.createElementVNode("a", null, "\u590D\u5236", -1);
+const _hoisted_21 = /* @__PURE__ */ vue.createElementVNode("span", null, null, -1);
+const _hoisted_22 = /* @__PURE__ */ vue.createElementVNode("a", null, "\u5220\u9664", -1);
+const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+  __name: "widget-table",
+  props: ["formCreateInject", "activeRule"],
+  emits: [
+    "add",
+    "mouseenter",
+    "mouseleave",
+    "set-active-rule",
+    "copy",
+    "delete"
+  ],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const rule = vue.computed(() => props.formCreateInject.rule);
+    const childRules = vue.computed(() => rule.value.config.childRules);
+    const showDelete = vue.computed(() => showFeature("delete"));
+    const showImport = vue.computed(() => showFeature("import"));
+    const showCopy = vue.computed(() => showFeature("copy"));
+    function showFeature(featureId) {
+      return rule.value.config.tableAdvancedFeatures.includes(featureId);
+    }
+    function handleAdd({ newIndex }) {
+      emits("add", childRules.value[newIndex]);
+    }
+    function handleMouseenter() {
+      emits("mouseenter");
+    }
+    function handleMouseleave() {
+      emits("mouseleave");
+    }
+    function emitSetActiveRuleEvt(rule2) {
+      emits("set-active-rule", rule2);
+    }
+    function handleClick(element) {
+      emitSetActiveRuleEvt(element);
+    }
+    function handleUpdate({ newIndex }) {
+      emitSetActiveRuleEvt(childRules.value[newIndex]);
+    }
+    function handleCopy(rule2) {
+      emits("copy", rule2);
+    }
+    function handleDelete(rule2) {
+      emits("delete", rule2);
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+        vue.createElementVNode("div", _hoisted_2$9, [
+          vue.createVNode(vue.unref(antDesignVue.Button), { type: "primary" }, {
+            icon: vue.withCtx(() => [
+              vue.createVNode(vue.unref(iconsVue.PlusOutlined))
+            ]),
+            default: vue.withCtx(() => [
+              _hoisted_3$8
+            ]),
+            _: 1
+          }),
+          vue.unref(showDelete) ? (vue.openBlock(), vue.createBlock(vue.unref(antDesignVue.Button), { key: 0 }, {
+            default: vue.withCtx(() => [
+              _hoisted_4$5
+            ]),
+            _: 1
+          })) : vue.createCommentVNode("v-if", true),
+          vue.unref(showImport) ? (vue.openBlock(), vue.createBlock(vue.unref(antDesignVue.Button), { key: 1 }, {
+            default: vue.withCtx(() => [
+              _hoisted_5$3
+            ]),
+            _: 1
+          })) : vue.createCommentVNode("v-if", true),
+          vue.unref(showImport) ? (vue.openBlock(), vue.createBlock(vue.unref(antDesignVue.Button), { key: 2 }, {
+            default: vue.withCtx(() => [
+              _hoisted_6$3
+            ]),
+            _: 1
+          })) : vue.createCommentVNode("v-if", true)
+        ]),
+        vue.createElementVNode("div", _hoisted_7$2, [
+          vue.createElementVNode("div", {
+            class: "bm-widget-table-inner",
+            style: vue.normalizeStyle({
+              paddingLeft: vue.unref(showDelete) ? "32px" : 0,
+              paddingRight: vue.unref(showCopy) ? "81px" : "60px"
+            })
+          }, [
+            vue.createElementVNode("div", _hoisted_8$2, [
+              vue.unref(childRules).length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$1, _hoisted_12)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, "\u53EF\u62D6\u5165\u591A\u4E2A\u63A7\u4EF6")),
+              vue.createVNode(vue.unref(Draggable__default["default"]), {
+                "component-data": {
+                  field: vue.unref(rule).field,
+                  type: vue.unref(WidgetType).TableWidget
+                },
+                class: "bm-widget-table__drag-content",
+                group: {
+                  name: "tableWidget",
+                  pull: true,
+                  put: ["widget", "tableWidget"]
+                },
+                list: vue.unref(childRules),
+                "ghost-class": vue.unref(childRules).length ? "table-drag-ghost" : "table-drag-ghost__is-empty",
+                "item-key": "field",
+                direction: "vertical",
+                "force-fallback": true,
+                "scroll-sensitivity": 100,
+                delay: 50,
+                onAdd: handleAdd,
+                onUpdate: handleUpdate
+              }, {
+                item: vue.withCtx(({ element }) => [
+                  vue.createElementVNode("div", {
+                    class: "bm-widget-table__drag-item",
+                    style: vue.normalizeStyle({ width: element.config.fieldRatio })
+                  }, [
+                    vue.createVNode(DragTool, {
+                      rule: element,
+                      "active-rule": __props.activeRule,
+                      "parent-rule": __props.formCreateInject.rule,
+                      onMouseenter: handleMouseenter,
+                      onMouseleave: handleMouseleave,
+                      onClick: vue.withModifiers(($event) => handleClick(element), ["stop"]),
+                      onCopy: handleCopy,
+                      onDelete: handleDelete
+                    }, null, 8, ["rule", "active-rule", "parent-rule", "onClick"]),
+                    vue.createVNode(DragPlaceholder)
+                  ], 4)
+                ]),
+                _: 1
+              }, 8, ["component-data", "list", "ghost-class"])
+            ])
+          ], 4),
+          vue.unref(showDelete) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14, [
+            vue.createElementVNode("div", _hoisted_15, [
+              vue.createVNode(vue.unref(antDesignVue.FormItemRest), null, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(antDesignVue.Checkbox))
+                ]),
+                _: 1
+              })
+            ]),
+            vue.createElementVNode("div", _hoisted_16, [
+              vue.createVNode(vue.unref(antDesignVue.FormItemRest), null, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(antDesignVue.Checkbox))
+                ]),
+                _: 1
+              })
+            ])
+          ])) : vue.createCommentVNode("v-if", true),
+          vue.createElementVNode("div", _hoisted_17, [
+            _hoisted_18,
+            vue.createElementVNode("div", _hoisted_19, [
+              vue.unref(showCopy) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                _hoisted_20,
+                _hoisted_21
+              ], 64)) : vue.createCommentVNode("v-if", true),
+              _hoisted_22
+            ])
+          ])
+        ])
+      ]);
+    };
+  }
+});
+var WidgetTable = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__file", "widget-table.vue"]]);
+
+const label$7 = '表格';
+const fieldsMap$7 = {
+    'title.title': 'title.title',
+    'config.childRules': 'config.childRules',
+    'config.tableAdvancedFeatures': 'config.tableAdvancedFeatures',
+};
+const name$7 = 'table';
+var table = {
+    icon: 'Table',
+    name: name$7,
+    label: label$7,
+    rule() {
+        const childRules = [];
+        return {
+            type: WidgetType.TableWidget,
+            component: WidgetTable,
+            field: uniqueId__default["default"](),
+            title: {
+                type: 'TableHeadCount',
+                title: label$7,
+                props: {
+                    childRules,
+                },
+                style: {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                },
+            },
+            effect: {
+                formRule: 'formRule',
+            },
+            config: {
+                childRules,
+                tableAdvancedFeatures: ['copy', 'delete', 'import'],
+                propsFields: Object.values(fieldsMap$7),
+            },
+            emit: [
+                'mouseenter',
+                'mouseleave',
+                'set-active-rule',
+                'copy',
+                'delete',
+                'add',
+            ],
+            emitPrefix: 'nest',
+        };
+    },
+    props(rule) {
+        return [
+            {
+                type: 'input',
+                title: '标题',
+                field: fieldsMap$7['title.title'],
+                value: rule.title.title,
+                effect: {
+                    required: '请输入标题',
+                },
+                props: {
+                    placeholder: '请输入',
+                    maxlength: 10,
+                },
+            },
+            {
+                type: 'TableColumn',
+                title: '子字段设置',
+                field: fieldsMap$7['config.childRules'],
+                effect: {
+                    required: true,
+                },
+                value: rule.config.childRules,
+            },
+            {
+                type: 'checkbox',
+                title: '表格的高级操作',
+                field: fieldsMap$7['config.tableAdvancedFeatures'],
+                value: rule.config.tableAdvancedFeatures,
+                options: [
+                    {
+                        value: 'copy',
+                        label: '复制行',
+                    },
+                    {
+                        value: 'delete',
+                        label: '批量删除',
+                    },
+                    {
+                        value: 'import',
+                        label: '批量导入',
+                    },
+                ],
+                className: 'bfd-sider-right__form__table-checkbox',
+            },
+        ];
+    },
+    parse(rule) {
+        return {
+            name: name$7,
+            field: rule.field,
+            title: {
+                title: rule.title.title,
+            },
+            config: {
+                tableAdvancedFeatures: rule.config.tableAdvancedFeatures,
+            },
+        };
+    },
+};
+
+const label$6 = '附件';
+const fieldsMap$6 = {
+    'title.title': 'title.title',
+    'effect.required': 'effect.required',
+};
+const name$6 = 'file';
+var file = {
+    icon: 'File',
+    name: name$6,
+    label: label$6,
+    rule() {
+        return {
+            type: WidgetType.UploadFile,
+            component: components.BmUpload,
+            field: uniqueId__default["default"](),
+            title: {
+                title: label$6,
+                style: {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                },
+            },
+            effect: {
+                required: true,
+                formRule: 'formRule',
+            },
+            config: {
+                propsFields: Object.values(fieldsMap$6),
+            },
+        };
+    },
+    props(rule, parentRule) {
+        return [
+            {
+                type: 'input',
+                title: '标题',
+                field: fieldsMap$6['title.title'],
+                value: rule.title.title,
+                effect: {
+                    required: '请输入标题',
+                },
+                props: {
+                    placeholder: '请输入',
+                    maxlength: 10,
+                },
+            },
+            {
+                type: 'switch',
+                title: '是否必填',
+                field: fieldsMap$6['effect.required'],
+                value: rule.effect.required,
+            },
+        ];
+    },
+    parse(rule) {
+        return {
+            name: name$6,
+            field: rule.field,
+            title: {
+                title: rule.title.title,
+            },
+            effect: {
+                required: rule.effect.required,
+            },
+        };
+    },
+};
+
+const label$5 = '员工';
+const fieldsMap$5 = {
+    'title.title': 'title.title',
+    'props.placeholder': 'props.placeholder',
+    'props.limit': 'props.limit',
+    'config.fieldRatio': 'config.fieldRatio',
+    'effect.required': 'effect.required',
+};
+const name$5 = 'people';
+var people = {
+    icon: 'People',
+    name: name$5,
+    label: label$5,
+    rule() {
+        return {
+            type: 'select',
+            field: uniqueId__default["default"](),
+            title: {
+                title: label$5,
+                style: {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                },
+            },
+            effect: {
+                required: true,
+                formRule: 'formRule',
+            },
+            props: {
+                limit: 0,
+                placeholder: '请选择',
+            },
+            config: {
+                propsFields: Object.values(fieldsMap$5),
+            },
+        };
+    },
+    props(rule, parentRule) {
+        return [
+            {
+                type: 'input',
+                title: '标题',
+                field: fieldsMap$5['title.title'],
+                value: rule.title.title,
+                effect: {
+                    required: '请输入标题',
+                },
+                props: {
+                    placeholder: '请输入',
+                    maxlength: 10,
+                },
+            },
+            {
+                type: 'input',
+                title: '提示文字',
+                field: fieldsMap$5['props.placeholder'],
+                props: {
+                    placeholder: '请输入',
+                },
+                value: rule.props.placeholder,
+            },
+            {
+                type: 'radio',
+                title: '选项',
+                field: fieldsMap$5['props.limit'],
+                options: [
+                    {
+                        value: 1,
+                        label: '只能选择一人',
+                    },
+                    {
+                        value: 0,
+                        label: '可同时选择多人',
+                    },
+                ],
+                value: rule.props.limit,
+                effect: {
+                    required: true,
+                },
+                inject: true,
+                on: {
+                    change({ api, self }, { target }) {
+                        const value = target.value;
+                        self.value = value;
+                        api.emit('change', self.field, value, self, api, true);
+                    },
+                },
+                className: 'form-designer-props-radio-label',
+            },
+            Object.assign({ field: fieldsMap$5['config.fieldRatio'] }, getFieldRatioRule(rule, parentRule)),
+            {
+                type: 'switch',
+                title: '是否必填',
+                info: '勾选后可作为流程条件',
+                field: fieldsMap$5['effect.required'],
+                value: rule.effect.required,
+            },
+        ];
+    },
+    parse(rule) {
+        return {
+            name: name$5,
+            field: rule.field,
+            title: {
+                title: rule.title.title,
+            },
+            props: {
+                placeholder: rule.props.placeholder,
+                limit: rule.props.limit,
+            },
+            config: {
+                fieldRatio: rule.config.fieldRatio,
+            },
+            effect: {
+                required: rule.effect.required,
+            },
+        };
+    },
+};
+
+const label$4 = '部门';
+const fieldsMap$4 = {
+    'title.title': 'title.title',
+    'props.placeholder': 'props.placeholder',
+    'props.limit': 'props.limit',
+    'config.fieldRatio': 'config.fieldRatio',
+    'effect.required': 'effect.required',
+};
+const name$4 = 'department';
+var department = {
+    icon: 'Department',
+    name: name$4,
+    label: label$4,
+    rule() {
+        return {
+            type: 'select',
+            field: uniqueId__default["default"](),
+            title: {
+                title: label$4,
+                style: {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                },
+            },
+            effect: {
+                required: true,
+                formRule: 'formRule',
+            },
+            props: {
+                limit: 0,
+                placeholder: '请选择',
+            },
+            config: {
+                propsFields: Object.values(fieldsMap$4),
+            },
+        };
+    },
+    props(rule, parentRule) {
+        return [
+            {
+                type: 'input',
+                title: '标题',
+                field: fieldsMap$4['title.title'],
+                value: rule.title.title,
+                effect: {
+                    required: '请输入标题',
+                },
+                props: {
+                    placeholder: '请输入',
+                    maxlength: 10,
+                },
+            },
+            {
+                type: 'input',
+                title: '提示文字',
+                field: fieldsMap$4['props.placeholder'],
+                props: {
+                    placeholder: '请输入',
+                },
+                value: rule.props.placeholder,
+            },
+            {
+                type: 'radio',
+                title: '选项',
+                field: fieldsMap$4['props.limit'],
+                options: [
+                    {
+                        value: 1,
+                        label: '只能选择一部门',
+                    },
+                    {
+                        value: 0,
+                        label: '可同时选择多个部门',
+                    },
+                ],
+                value: rule.props.limit,
+                effect: {
+                    required: true,
+                },
+                inject: true,
+                on: {
+                    change({ api, self }, { target }) {
+                        const value = target.value;
+                        self.value = value;
+                        api.emit('change', self.field, value, self, api, true);
+                    },
+                },
+                className: 'form-designer-props-radio-label',
+            },
+            Object.assign({ field: fieldsMap$4['config.fieldRatio'] }, getFieldRatioRule(rule, parentRule)),
+            {
+                type: 'switch',
+                title: '是否必填',
+                info: '勾选后可作为流程条件',
+                field: fieldsMap$4['effect.required'],
+                value: rule.effect.required,
+            },
+        ];
+    },
+    parse(rule) {
+        return {
+            name: name$4,
+            field: rule.field,
+            title: {
+                title: rule.title.title,
+            },
+            props: {
+                placeholder: rule.props.placeholder,
+                limit: rule.props.limit,
+            },
+            config: {
+                fieldRatio: rule.config.fieldRatio,
+            },
+            effect: {
+                required: rule.effect.required,
+            },
+        };
+    },
+};
+
+const _hoisted_1$a = { style: { "margin-top": "16px", "line-height": "32px" } };
+const _hoisted_2$8 = /* @__PURE__ */ vue.createTextVNode(" \u660E\u7EC6\u5217\u8868 ");
+const _hoisted_3$7 = { style: { "float": "right" } };
+const _hoisted_4$4 = /* @__PURE__ */ vue.createTextVNode(" \u4E0B\u8F7D\u5BFC\u5165\u6A21\u677F ");
+const _hoisted_5$2 = /* @__PURE__ */ vue.createTextVNode(" \u5BFC\u5165\u660E\u7EC6 ");
+const _hoisted_6$2 = /* @__PURE__ */ vue.createTextVNode(" \u6279\u91CF\u5220\u9664 ");
+const _hoisted_7$1 = /* @__PURE__ */ vue.createTextVNode(" \u65B0\u589E ");
+const _hoisted_8$1 = /* @__PURE__ */ vue.createElementVNode("div", { class: "bm-material-temp__table-tip" }, "\u7CFB\u7EDF\u81EA\u52A8\u83B7\u53D6\u8868\u683C\u5B57\u6BB5", -1);
+const _hoisted_9 = { class: "bm-material-temp__add" };
+const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+  __name: "widget-material-temp",
+  props: ["formCreateInject"],
+  setup(__props) {
+    const props = __props;
+    const panes = [
+      {
+        key: "\u7D20\u67501",
+        title: "\u7D20\u67501"
+      }
+    ];
+    let activeKey = "\u7D20\u67501";
+    const option = {
+      form: {
+        layout: "vertical"
+      },
+      submitBtn: {
+        show: false
+      },
+      row: {
+        gutter: [24, 24]
+      },
+      col: {
+        span: 12
+      }
+    };
+    const uploadPicField = "uploadPicture";
+    const rules = vue.ref([
+      {
+        type: "button",
+        field: "materialTemp",
+        title: "\u7D20\u6750\u6A21\u677F",
+        effect: {
+          required: true
+        },
+        children: [
+          {
+            type: "PlusOutlined",
+            component: iconsVue.PlusOutlined
+          },
+          "\u9009\u62E9\u6A21\u677F"
+        ]
+      },
+      {
+        type: "span",
+        field: "materialType",
+        title: "\u7D20\u6750\u7C7B\u578B",
+        children: ["\u7CFB\u7EDF\u81EA\u52A8\u83B7\u53D6"],
+        style: {
+          color: "#9393A3"
+        }
+      },
+      {
+        type: "span",
+        field: "size",
+        title: "\u5C3A\u5BF8",
+        children: ["\u7CFB\u7EDF\u81EA\u52A8\u83B7\u53D6"],
+        style: {
+          color: "#9393A3"
+        }
+      },
+      {
+        type: "span",
+        field: "coverPicture",
+        title: "\u5C01\u9762\u56FE",
+        children: ["\u7CFB\u7EDF\u81EA\u52A8\u83B7\u53D6"],
+        style: {
+          color: "#9393A3"
+        }
+      },
+      {
+        type: "span",
+        field: "templateStructureDiagram",
+        title: "\u6A21\u677F\u7ED3\u6784\u56FE",
+        children: ["\u7CFB\u7EDF\u81EA\u52A8\u83B7\u53D6"],
+        style: {
+          color: "#9393A3"
+        }
+      },
+      {
+        hidden: false,
+        type: "UploadPicture",
+        component: components.BmUpload,
+        field: uploadPicField,
+        title: "\u4E0A\u4F20\u53C2\u8003\u56FE",
+        effect: {
+          required: false
+        },
+        props: {
+          uploadProps: {
+            listType: "picture-card",
+            text: "\u4E0A\u4F20\u7167\u7247"
+          },
+          extraProps: {
+            maxSize: 9
+          }
+        }
+      }
+    ]);
+    function getUploadPicRule() {
+      return rules.value.find((rule) => rule.field === uploadPicField);
+    }
+    function handleUploadPicRule(uploadPictureRule) {
+      const uploadPicRule = getUploadPicRule();
+      uploadPicRule.effect.required = uploadPictureRule.required;
+      uploadPicRule.hidden = uploadPictureRule.hidden;
+      rules.value = [...rules.value];
+    }
+    vue.watch(
+      () => props.formCreateInject.rule.config.uploadPictureRule,
+      handleUploadPicRule,
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    return (_ctx, _cache) => {
+      const _component_FormCreate = vue.resolveComponent("FormCreate");
+      return vue.openBlock(), vue.createBlock(vue.unref(antDesignVue.Tabs), {
+        activeKey: vue.unref(activeKey),
+        "onUpdate:activeKey": _cache[0] || (_cache[0] = ($event) => vue.isRef(activeKey) ? activeKey.value = $event : activeKey = $event),
+        class: "bm-material-temp",
+        type: "editable-card",
+        "hide-add": "",
+        size: "small"
+      }, {
+        rightExtra: vue.withCtx(() => [
+          vue.createElementVNode("span", _hoisted_9, [
+            vue.createVNode(vue.unref(iconsVue.PlusOutlined))
+          ])
+        ]),
+        default: vue.withCtx(() => [
+          (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(panes, (pane) => {
+            return vue.createVNode(vue.unref(antDesignVue.TabPane), {
+              key: pane.key,
+              tab: pane.title
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_FormCreate, {
+                  option,
+                  rule: rules.value
+                }, null, 8, ["rule"]),
+                vue.createElementVNode("div", _hoisted_1$a, [
+                  _hoisted_2$8,
+                  vue.createElementVNode("div", _hoisted_3$7, [
+                    vue.createVNode(vue.unref(antDesignVue.Button), null, {
+                      default: vue.withCtx(() => [
+                        _hoisted_4$4
+                      ]),
+                      _: 1
+                    }),
+                    vue.createVNode(vue.unref(antDesignVue.Button), null, {
+                      default: vue.withCtx(() => [
+                        _hoisted_5$2
+                      ]),
+                      _: 1
+                    }),
+                    vue.createVNode(vue.unref(antDesignVue.Button), null, {
+                      default: vue.withCtx(() => [
+                        _hoisted_6$2
+                      ]),
+                      _: 1
+                    }),
+                    vue.createVNode(vue.unref(antDesignVue.Button), { type: "primary" }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(iconsVue.PlusOutlined)),
+                        _hoisted_7$1
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ]),
+                _hoisted_8$1
+              ]),
+              _: 2
+            }, 1032, ["tab"]);
+          }), 64))
+        ]),
+        _: 1
+      }, 8, ["activeKey"]);
+    };
+  }
+});
+var WidgetMaterialTemp = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__file", "widget-material-temp.vue"]]);
+
+const _hoisted_1$9 = { class: "bm-use-instruction" };
+const _hoisted_2$7 = { class: "bm-use-instruction__title" };
+const _hoisted_3$6 = /* @__PURE__ */ vue.createTextVNode(" \u4F7F\u7528\u8BF4\u660E ");
+const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+  __name: "use-instruction",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+        vue.createElementVNode("div", _hoisted_2$7, [
+          vue.createVNode(vue.unref(iconsVue.InfoCircleFilled), { class: "bm-use-instruction__title__icon" }),
+          _hoisted_3$6
+        ]),
+        vue.renderSlot(_ctx.$slots, "default")
+      ]);
+    };
+  }
+});
+var UseInstruction = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__file", "use-instruction.vue"]]);
+
+const label$3 = '素材模板';
+const fieldsMap$3 = {
+    'config.uploadPictureRule.required': 'config.uploadPictureRule.required',
+    'config.uploadPictureRule.hidden': 'config.uploadPictureRule.hidden',
+};
+const name$3 = 'materialTemp';
+var materialTemp = {
+    icon: 'MaterialTemp',
+    name: name$3,
+    label: label$3,
+    rule() {
+        return {
+            type: 'WidgetMaterialTemp',
+            component: WidgetMaterialTemp,
+            title: {
+                title: label$3,
+            },
+            field: uniqueId__default["default"](),
+            config: {
+                propsFields: Object.values(fieldsMap$3),
+                uploadPictureRule: {
+                    required: false,
+                    hidden: false,
+                },
+            },
+        };
+    },
+    props(rule) {
+        return [
+            {
+                type: 'UseInstruction',
+                component: UseInstruction,
+                children: [
+                    {
+                        type: 'span',
+                        children: [
+                            '·该套件打通店铺与素材模板的数据关联，可根据店铺获取该店铺可用的素材模板。',
+                        ],
+                    },
+                    {
+                        type: 'span',
+                        children: [
+                            '·满足一个素材申请单可使用多个素材类型对应的素材模板申请素材。',
+                        ],
+                        style: {
+                            display: 'inline-block',
+                            marginTop: '8px',
+                        },
+                    },
+                ],
+                style: {
+                    marginBottom: '24px',
+                },
+            },
+            {
+                type: 'span',
+                title: '素材模板',
+                field: 'materialTemp',
+                children: [
+                    '用于选择对应可用的素材模板信息（编号、名称、尺寸、封面图、结构图）。此项必填并获取所选择的模板的编号及名称显示。',
+                ],
+                style: {
+                    color: '#505259',
+                },
+            },
+            {
+                type: 'span',
+                title: '素材类型/尺寸/封面图/结构图',
+                field: 'systemGeneration',
+                children: ['通过所选模板，系统自动获取此模板对应的相关内容。'],
+                style: {
+                    color: '#505259',
+                },
+            },
+            {
+                type: 'span',
+                title: '上传参考图',
+                field: 'uploadPicture',
+                prefix: {
+                    type: 'CheckboxSwitch',
+                    props: {
+                        rule,
+                    },
+                },
+                children: ['用于上传当次申请的素材参考的图片。可最多上传9张图。'],
+                style: {
+                    color: '#505259',
+                },
+            },
+            {
+                type: 'span',
+                title: '明细列表',
+                field: 'detailList',
+                children: [
+                    '根据所选的素材模板，系统自动获取该模板需填写的内容字段列表以及批量导入的模板。列表允许操作：下载所选素材模板的导入模板、批量导入明细、新增、编辑、删除。',
+                ],
+                style: {
+                    color: '#505259',
+                },
+            },
+        ];
+    },
+    parse(rule) {
+        return {
+            name: name$3,
+            field: rule.field,
+            config: {
+                uploadPictureRule: {
+                    hidden: rule.config.uploadPictureRule.hidden,
+                    required: rule.config.uploadPictureRule.required,
+                },
+            },
+        };
+    },
+};
+
+const _hoisted_1$8 = /* @__PURE__ */ vue.createElementVNode("div", { class: "bm-product-info-item__title" }, "\u5546\u54C1\u7F16\u53F7", -1);
+const _hoisted_2$6 = { class: "bm-product-info-item__content" };
+const _hoisted_3$5 = { class: "bm-product-info-item__title" };
+const _hoisted_4$3 = /* @__PURE__ */ vue.createElementVNode("div", { class: "bm-product-info-item__content" }, "\u7CFB\u7EDF\u81EA\u52A8\u5E26\u51FA", -1);
+const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  __name: "product-info",
+  props: ["formCreateInject"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(antDesignVue.Row), null, {
+        default: vue.withCtx(() => [
+          vue.createVNode(vue.unref(antDesignVue.Col), {
+            class: "bm-product-info-item",
+            span: 12
+          }, {
+            default: vue.withCtx(() => [
+              _hoisted_1$8,
+              vue.createElementVNode("div", _hoisted_2$6, [
+                vue.createVNode(vue.unref(antDesignVue.Input), { placeholder: "\u8BF7\u8F93\u5165\u5546\u54C1\u7F16\u53F7" })
+              ])
+            ]),
+            _: 1
+          }),
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.formCreateInject.rule.config.associatedFields, (item) => {
+            return vue.openBlock(), vue.createBlock(vue.unref(antDesignVue.Col), {
+              key: item.value,
+              class: "bm-product-info-item",
+              span: 12
+            }, {
+              default: vue.withCtx(() => [
+                vue.createElementVNode("div", _hoisted_3$5, vue.toDisplayString(item.label), 1),
+                _hoisted_4$3
+              ]),
+              _: 2
+            }, 1024);
+          }), 128))
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+var ProductInfo = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__file", "product-info.vue"]]);
+
+const _hoisted_1$7 = /* @__PURE__ */ vue.createElementVNode("div", { class: "bm-associated-fields-item" }, [
+  /* @__PURE__ */ vue.createElementVNode("span", { class: "bm-associated-fields-item__content" }, "\u5546\u54C1\u7F16\u53F7")
+], -1);
+const _hoisted_2$5 = { class: "bm-associated-fields-item__content" };
+const _hoisted_3$4 = /* @__PURE__ */ vue.createTextVNode(" \u6DFB\u52A0\u5B50\u5B57\u6BB5 ");
+const _hoisted_4$2 = { style: { "text-align": "right", "margin": "6px 0 4px", "padding-right": "8px" } };
+const _hoisted_5$1 = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
+const _hoisted_6$1 = /* @__PURE__ */ vue.createTextVNode("\u786E\u5B9A");
+const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+  __name: "associated-fields",
+  props: ["associatedFields"],
+  emits: ["change"],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const visible = vue.ref(false);
+    const checkList = vue.ref([]);
+    const options = [
+      {
+        value: "\u5546\u54C1\u540D\u79F0",
+        label: "\u5546\u54C1\u540D\u79F0"
+      },
+      {
+        value: "\u5546\u54C1\u7B80\u79F0",
+        label: "\u5546\u54C1\u7B80\u79F0"
+      },
+      {
+        value: "\u5546\u54C1\u56FE\u7247",
+        label: "\u5546\u54C1\u56FE\u7247"
+      },
+      {
+        value: "\u5EFA\u8BAE\u96F6\u552E\u4EF7",
+        label: "\u5EFA\u8BAE\u96F6\u552E\u4EF7"
+      },
+      {
+        value: "\u5546\u54C1\u7BB1\u89C4",
+        label: "\u5546\u54C1\u7BB1\u89C4"
+      },
+      {
+        value: "\u5546\u54C1\u5355\u4F4D",
+        label: "\u5546\u54C1\u5355\u4F4D"
+      }
+    ];
+    function emitChangeEvt() {
+      emits(
+        "change",
+        options.filter((op) => checkList.value.includes(op.value))
+      );
+    }
+    function handOk() {
+      visible.value = false;
+      emitChangeEvt();
+    }
+    function init() {
+      checkList.value = props.associatedFields.map((item) => item.value);
+    }
+    function visibleChange(visible2) {
+      if (visible2) {
+        init();
+      }
+    }
+    function handleDel(value) {
+      checkList.value = checkList.value.filter((cl) => cl !== value);
+      emitChangeEvt();
+    }
+    init();
+    vue.watch(visible, (val) => {
+      visibleChange(val);
+    });
+    return (_ctx, _cache) => {
+      const _component_Delete = vue.resolveComponent("Delete");
+      return vue.openBlock(), vue.createElementBlock("div", null, [
+        _hoisted_1$7,
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.associatedFields, (item) => {
+          return vue.openBlock(), vue.createElementBlock("div", {
+            key: item.value,
+            class: "bm-associated-fields-item"
+          }, [
+            vue.createElementVNode("span", _hoisted_2$5, vue.toDisplayString(item.label), 1),
+            vue.createVNode(_component_Delete, {
+              class: "bm-associated-fields-item__icon",
+              onClick: ($event) => handleDel(item.value)
+            }, null, 8, ["onClick"])
+          ]);
+        }), 128)),
+        vue.createVNode(vue.unref(antDesignVue.Dropdown), {
+          visible: visible.value,
+          "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => visible.value = $event),
+          trigger: ["click"]
+        }, {
+          overlay: vue.withCtx(() => [
+            vue.createVNode(vue.unref(antDesignVue.Menu), null, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(antDesignVue.FormItemRest), null, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(antDesignVue.CheckboxGroup), {
+                      value: checkList.value,
+                      "onUpdate:value": _cache[0] || (_cache[0] = ($event) => checkList.value = $event),
+                      style: { "width": "100%" }
+                    }, {
+                      default: vue.withCtx(() => [
+                        (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(options, (item) => {
+                          return vue.createVNode(vue.unref(antDesignVue.MenuItem), {
+                            key: item.value
+                          }, {
+                            default: vue.withCtx(() => [
+                              vue.createVNode(vue.unref(antDesignVue.Checkbox), {
+                                value: item.value,
+                                style: { "width": "100%" }
+                              }, {
+                                default: vue.withCtx(() => [
+                                  vue.createTextVNode(vue.toDisplayString(item.label), 1)
+                                ]),
+                                _: 2
+                              }, 1032, ["value"])
+                            ]),
+                            _: 2
+                          }, 1024);
+                        }), 64))
+                      ]),
+                      _: 1
+                    }, 8, ["value"])
+                  ]),
+                  _: 1
+                }),
+                vue.createVNode(vue.unref(antDesignVue.Divider), { style: { "margin": "0" } }),
+                vue.createElementVNode("div", _hoisted_4$2, [
+                  vue.createVNode(vue.unref(antDesignVue.Button), {
+                    onClick: _cache[1] || (_cache[1] = ($event) => visible.value = false)
+                  }, {
+                    default: vue.withCtx(() => [
+                      _hoisted_5$1
+                    ]),
+                    _: 1
+                  }),
+                  vue.createVNode(vue.unref(antDesignVue.Button), {
+                    type: "primary",
+                    style: { "margin-left": "8px" },
+                    onClick: handOk
+                  }, {
+                    default: vue.withCtx(() => [
+                      _hoisted_6$1
+                    ]),
+                    _: 1
+                  })
+                ])
+              ]),
+              _: 1
+            })
+          ]),
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(antDesignVue.Button), {
+              style: { "margin-top": "8px" },
+              block: ""
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(iconsVue.PlusOutlined)),
+                _hoisted_3$4
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["visible"])
+      ]);
+    };
+  }
+});
+var AssociatedFields = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__file", "associated-fields.vue"]]);
+
+const _hoisted_1$6 = /* @__PURE__ */ vue.createElementVNode("div", { style: { "margin": "18px 0 6px" } }, "\u4EC5\u83B7\u53D6", -1);
+const _hoisted_2$4 = /* @__PURE__ */ vue.createElementVNode("div", { style: { "margin-top": "7px" } }, "\u4E2D\u53EF\u5206\u9500\u7684\u5546\u54C1\u6570\u636E", -1);
+const _hoisted_3$3 = /* @__PURE__ */ vue.createTextVNode("\u8BF7\u5148\u6DFB\u52A0\u5173\u8054\u8868\u5355\u4E2D\u7684\u5E97\u94FA\u7EC4\u4EF6");
+const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+  __name: "shop-data-filter",
+  props: ["widgetFormRules", "defaultSelectValue"],
+  emits: ["change"],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const checkedValue = vue.ref(!!props.defaultSelectValue);
+    const selectValue = vue.ref(props.defaultSelectValue);
+    const shopRules = vue.computed(
+      () => props.widgetFormRules.reduce((pre, cur) => {
+        const name = cur.config.config.name;
+        if (name === "row" || name === "table") {
+          cur.config.childRules.forEach((rule) => {
+            getShop(rule, pre);
+          });
+        } else {
+          getShop(cur, pre);
+        }
+        return pre;
+      }, [])
+    );
+    const shops = vue.computed(() => {
+      return shopRules.value.map((shopRule) => ({
+        value: shopRule.field,
+        label: shopRule.title.title
+      }));
+    });
+    function getShop(rule, target) {
+      if (rule.config.config.name === "shop")
+        target.push(rule);
+    }
+    function checkedValueChange(val) {
+      if (val) {
+        if (shops.value.length === 1) {
+          selectValue.value = shops.value[0].value;
+        }
+      }
+      if (!val)
+        selectValue.value = void 0;
+    }
+    function selectValueChange(val) {
+      if (val) {
+        checkedValue.value = true;
+      }
+    }
+    function handleChange(val) {
+      emits("change", val);
+    }
+    function shopLinkProduct(newField, oldField) {
+      shopRules.value.forEach((shop) => {
+        if (shop.field === oldField) {
+          shop.config.linkProductCount--;
+        }
+        if (shop.field === newField) {
+          if (!shop.config.linkProductCount) {
+            shop.config.linkProductCount = 0;
+          }
+          shop.config.linkProductCount++;
+        }
+      });
+    }
+    vue.watch(checkedValue, (checkedValue2) => {
+      checkedValueChange(checkedValue2);
+    });
+    vue.watch(selectValue, (selectValue2, oldSelectValue) => {
+      selectValueChange(selectValue2);
+      shopLinkProduct(selectValue2, oldSelectValue);
+      handleChange(selectValue2);
+    });
+    return (_ctx, _cache) => {
+      const _component_a_tooltip = vue.resolveComponent("a-tooltip");
+      return vue.openBlock(), vue.createBlock(vue.unref(antDesignVue.FormItemRest), null, {
+        default: vue.withCtx(() => [
+          vue.unref(shops).length ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+            vue.createVNode(vue.unref(antDesignVue.Switch), {
+              checked: checkedValue.value,
+              "onUpdate:checked": _cache[0] || (_cache[0] = ($event) => checkedValue.value = $event)
+            }, null, 8, ["checked"]),
+            checkedValue.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+              _hoisted_1$6,
+              vue.createVNode(vue.unref(antDesignVue.Select), {
+                value: selectValue.value,
+                "onUpdate:value": _cache[1] || (_cache[1] = ($event) => selectValue.value = $event),
+                options: vue.unref(shops),
+                disabled: vue.unref(shops).length === 1,
+                "show-arrow": vue.unref(shops).length > 1,
+                placeholder: "\u8BF7\u9009\u62E9"
+              }, null, 8, ["value", "options", "disabled", "show-arrow"]),
+              _hoisted_2$4
+            ], 64)) : vue.createCommentVNode("v-if", true)
+          ], 64)) : (vue.openBlock(), vue.createBlock(_component_a_tooltip, {
+            key: 1,
+            placement: "bottomLeft"
+          }, {
+            title: vue.withCtx(() => [
+              _hoisted_3$3
+            ]),
+            default: vue.withCtx(() => [
+              vue.createVNode(vue.unref(antDesignVue.Switch), { disabled: "" })
+            ]),
+            _: 1
+          }))
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+var ShopDataFilter = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__file", "shop-data-filter.vue"]]);
+
+const label$2 = '商品';
+const fieldsMap$2 = {
+    'effect.required': 'effect.required',
+    'config.associatedFields': 'config.associatedFields',
+    'config.dataFiltering': 'config.dataFiltering',
+};
+const name$2 = 'product';
+var product = {
+    icon: 'Product',
+    name: name$2,
+    label: label$2,
+    rule() {
+        return {
+            type: 'ProductInfo',
+            component: ProductInfo,
+            field: uniqueId__default["default"](),
+            title: {
+                title: label$2,
+                style: {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                },
+            },
+            effect: {
+                required: true,
+                formRule: 'formRule',
+            },
+            config: {
+                propsFields: Object.values(fieldsMap$2),
+                associatedFields: [],
+            },
+        };
+    },
+    props(rule, parentRule, widgetFormRules) {
+        return [
+            {
+                type: 'AssociatedFields',
+                component: AssociatedFields,
+                title: '关联字段',
+                field: fieldsMap$2['config.associatedFields'],
+                props: {
+                    associatedFields: rule.config.associatedFields,
+                },
+                effect: {
+                    required: true,
+                },
+                inject: true,
+                on: {
+                    change({ api, self }, list) {
+                        api.emit('change', self.field, list, self, api, true);
+                        self.props.associatedFields = list;
+                        vue.nextTick(() => {
+                            api.refresh();
+                        });
+                    },
+                },
+            },
+            {
+                type: 'ShopDataFilter',
+                component: ShopDataFilter,
+                title: '数据过滤',
+                field: fieldsMap$2['config.dataFiltering'],
+                info: '1.开启后，可以与当前表单的“店铺”控件关联进行商品数据过滤，在填写表单时满足仅可选择所选店铺下的可分销商品。' +
+                    '2.若不启用数据过滤，则不进行店铺限制，用户填写表单时可选择所有未冻结的商品数据。' +
+                    '3.开启前，请确认当前表单中已存在“店铺”控件。',
+                props: {
+                    widgetFormRules,
+                    defaultSelectValue: rule.config.dataFiltering,
+                },
+                inject: true,
+                on: {
+                    change({ api, self }, value) {
+                        api.emit('change', self.field, value, self, api, true);
+                        self.props.defaultSelectValue = value;
+                        vue.nextTick(() => {
+                            api.refresh();
+                        });
+                    },
+                },
+            },
+            {
+                type: 'switch',
+                title: '是否必填',
+                field: fieldsMap$2['effect.required'],
+                value: rule.effect.required,
+            },
+        ];
+    },
+    parse(rule) {
+        return {
+            name: name$2,
+            field: rule.field,
+            effect: {
+                required: rule.effect.required,
+            },
+            config: {
+                associatedFields: rule.config.associatedFields,
+                dataFiltering: rule.config.dataFiltering,
+            },
+        };
+    },
+};
+
+const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+  __name: "shop-associated-fields",
+  setup(__props) {
+    const associatedFields = [
+      {
+        value: "\u5E97\u94FA\u7F16\u53F7",
+        label: "\u5E97\u94FA\u7F16\u53F7"
+      },
+      {
+        value: "\u5E97\u94FA\u540D\u79F0",
+        label: "\u5E97\u94FA\u540D\u79F0"
+      }
+    ];
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", null, [
+        (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(associatedFields, (item) => {
+          return vue.createElementVNode("span", {
+            key: item.value,
+            class: "bm-shop-associated-fields-item"
+          }, vue.toDisplayString(item.label), 1);
+        }), 64))
+      ]);
+    };
+  }
+});
+var ShopAssociatedFields = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__file", "shop-associated-fields.vue"]]);
+
+let i = 0;
+const label$1 = '店铺';
+const fieldsMap$1 = {
+    'effect.required': 'effect.required',
+    'config.dataFiltering': 'config.dataFiltering',
+    'config.isMain': 'config.isMain',
+};
+const name$1 = 'shop';
+var shop = {
+    icon: 'Shop',
+    name: name$1,
+    label: label$1,
+    rule() {
+        return {
+            type: 'Select',
+            field: uniqueId__default["default"](),
+            title: {
+                title: label$1 + ++i,
+                style: {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                },
+            },
+            effect: {
+                required: true,
+                formRule: 'formRule',
+            },
+            props: {
+                placeholder: '请选择',
+            },
+            config: {
+                propsFields: Object.values(fieldsMap$1),
+            },
+        };
+    },
+    props(rule, parentRule) {
+        return [
+            {
+                type: 'ShopAssociatedFields',
+                component: ShopAssociatedFields,
+                title: '关联字段',
+                field: 'config.associatedFields',
+                effect: {
+                    required: true,
+                },
+            },
+            {
+                type: 'checkbox',
+                title: '数据过滤',
+                field: fieldsMap$1['config.dataFiltering'],
+                options: [
+                    {
+                        value: true,
+                        label: '当前节点操作人所负责的店铺',
+                    },
+                ],
+                value: [rule.config.dataFiltering],
+                inject: true,
+                on: {
+                    change({ api, self }, value) {
+                        api.emit('change', self.field, value[0], self, api, true);
+                    },
+                },
+            },
+            {
+                type: 'switch',
+                title: '设为主控件',
+                info: '店铺控件在流程流转过程中涉及数据权限的控制，当表单中设置了多个店铺控件时，需设置其中1个店铺控件作为主控件。被设为主控件的店铺控件，流程流转过程中将以此店铺控件输入的数据作为数据权限判断依据。',
+                field: fieldsMap$1['config.isMain'],
+                value: rule.config.isMain,
+                hidden: !!parentRule,
+            },
+            {
+                type: 'switch',
+                title: '是否必填',
+                field: fieldsMap$1['effect.required'],
+                value: rule.effect.required,
+            },
+        ];
+    },
+    parse(rule) {
+        return {
+            name: name$1,
+            field: rule.field,
+            title: {
+                title: rule.title.title,
+            },
+            effect: {
+                required: rule.effect.required,
+            },
+            config: {
+                dataFiltering: rule.config.dataFiltering,
+                isMain: rule.config.isMain,
+            },
+        };
+    },
+};
+function resetIndex() {
+    i = 0;
+}
+
+const label = '素材类型';
+const fieldsMap = {
+    'effect.required': 'effect.required',
+    'config.format': 'config.format',
+    'props.multiple': 'props.multiple',
+};
+const name = 'materialType';
+var materialType = {
+    icon: 'MaterialType',
+    name,
+    label,
+    rule() {
+        return {
+            type: 'Select',
+            field: uniqueId__default["default"](),
+            title: {
+                title: label,
+                style: {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                },
+            },
+            effect: {
+                required: true,
+                formRule: 'formRule',
+            },
+            props: {
+                placeholder: '请选择',
+                multiple: false,
+            },
+            config: {
+                propsFields: Object.values(fieldsMap),
+                format: 1,
+            },
+        };
+    },
+    props(rule, parentRule) {
+        return [
+            {
+                type: 'radio',
+                title: '格式',
+                field: fieldsMap['config.format'],
+                effect: {
+                    required: true,
+                },
+                options: [
+                    {
+                        value: 1,
+                        label: '一级分类',
+                    },
+                    {
+                        value: 2,
+                        label: '一级分类-二级分类',
+                    },
+                    {
+                        value: 3,
+                        label: '一级分类-二级分类-三级分类',
+                    },
+                ],
+                value: rule.config.format,
+                className: 'form-designer-props-radio-label',
+            },
+            {
+                type: 'radio',
+                title: '选项',
+                field: fieldsMap['props.multiple'],
+                effect: {
+                    required: true,
+                },
+                options: [
+                    {
+                        value: false,
+                        label: '只能选择一种类型',
+                    },
+                    {
+                        value: true,
+                        label: '可同时选择多种类型',
+                    },
+                ],
+                value: rule.props.multiple,
+                className: 'form-designer-props-radio-label',
+            },
+            {
+                type: 'switch',
+                title: '是否必填',
+                info: '勾选后可作为流程条件',
+                field: fieldsMap['effect.required'],
+                value: rule.effect.required,
+            },
+        ];
+    },
+    parse(rule) {
+        return {
+            name,
+            field: rule.field,
+            props: {
+                multiple: rule.props.multiple,
+            },
+            config: {
+                format: rule.config.format,
+            },
+            effect: {
+                required: rule.effect.required,
+            },
+        };
+    },
+};
+
+function createTab() {
+    return [
+        {
+            key: 'controlLibrary',
+            tab: '控件库',
+            menuList: [
+                {
+                    name: 'layout',
+                    title: '布局控件',
+                    list: [row],
+                },
+                {
+                    name: 'basic',
+                    title: '基础控件',
+                    list: [
+                        input,
+                        textarea,
+                        numInput,
+                        radio,
+                        checkbox,
+                        date,
+                        dateRange,
+                        instruction,
+                    ],
+                },
+                {
+                    name: 'enhance',
+                    title: '增强控件',
+                    list: [picture, table, file, people, department],
+                },
+            ],
+        },
+        {
+            key: 'kit',
+            tab: '套件',
+            menuList: [
+                {
+                    name: 'materialKit',
+                    title: '素材套件',
+                    list: [materialTemp],
+                },
+            ],
+        },
+        {
+            key: 'associatedForm',
+            tab: '关联表单',
+            menuList: [
+                {
+                    name: 'dataForm',
+                    title: '数据表单',
+                    list: [product, shop, materialType],
+                },
+            ],
+        },
+    ];
+}
+
+const _hoisted_1$5 = {
+  style: { "vertical-align": "middle" },
+  width: "199px",
+  height: "107px",
+  viewBox: "0 0 199 107",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_2$3 = /* @__PURE__ */ vue.createStaticVNode('<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-826.000000, -249.000000)"><g transform="translate(667.000000, 71.000000)"><g transform="translate(159.000000, 178.000000)"><path d="M2,0 L197,0 C198.104569,-6.46995335e-16 199,0.8954305 199,2 L199,105 C199,106.104569 198.104569,107 197,107 L2,107 C0.8954305,107 1.3527075e-16,106.104569 0,105 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" fill="#F9FBFF"></path><path d="M41,6 C41.5522847,6 42,6.44771525 42,7 L42,100 C42,100.552285 41.5522847,101 41,101 L7,101 C6.44771525,101 6,100.552285 6,100 L6,7 C6,6.44771525 6.44771525,6 7,6 L41,6 Z M192,6 C192.552285,6 193,6.44771525 193,7 L193,100 C193,100.552285 192.552285,101 192,101 L159,101 C158.447715,101 158,100.552285 158,100 L158,7 C158,6.44771525 158.447715,6 159,6 L192,6 Z M151,35 C151.552285,35 152,35.4477153 152,36 L152,100 C152,100.552285 151.552285,101 151,101 L49,101 C48.4477153,101 48,100.552285 48,100 L48,36 C48,35.4477153 48.4477153,35 49,35 L151,35 Z M151,6 C151.552285,6 152,6.44771525 152,7 L152,30 C152,30.5522847 151.552285,31 151,31 L49,31 C48.4477153,31 48,30.5522847 48,30 L48,7 C48,6.44771525 48.4477153,6 49,6 L151,6 Z" fill="#EFF3FF"></path><rect stroke="#8FAAFF" fill="#D0DCFF" x="12.5" y="17.5" width="23" height="13" rx="0.5"></rect><rect fill="#E4E8F7" x="12" y="47" width="24" height="14" rx="0.5"></rect><rect fill="#E4E8F7" x="12" y="75" width="24" height="14" rx="0.5"></rect><use stroke="#AEC2FF" mask="url(#mask-2)" stroke-width="2" fill-opacity="0.26" fill="#AFC3FF" stroke-dasharray="2" xlink:href="#path-1"></use><path d="M33.5,20 C35.9852814,20 38,22.0147186 38,24.5 C38,26.9852814 35.9852814,29 33.5,29 C31.0147186,29 29,26.9852814 29,24.5 C29,22.0147186 31.0147186,20 33.5,20 Z M33.5,22 C32.1192881,22 31,23.1192881 31,24.5 C31,25.8807119 32.1192881,27 33.5,27 C34.8807119,27 36,25.8807119 36,24.5 C36,23.1192881 34.8807119,22 33.5,22 Z" fill="#2F4EED"></path><circle fill="#F9FBFF" cx="33.5" cy="24.5" r="2.5"></circle><path d="M42.5,22 C65.8354499,22 85.7454723,36.6659986 93.5155164,57.2834451 L93.7801465,55.3991118 C93.8570096,54.8522019 94.3626777,54.4711537 94.9095876,54.5480169 C95.4564976,54.6248801 95.8375458,55.1305481 95.7606826,55.677458 L94.925644,61.6190665 C94.8487808,62.1659764 94.3431128,62.5470246 93.7962028,62.4701614 L93.7673315,62.4658857 C93.5875459,62.4468789 93.4107192,62.3789077 93.2577621,62.2594045 L88.5296976,58.5654356 C88.0944913,58.2254152 88.0173279,57.5969697 88.3573483,57.1617634 C88.6973688,56.7265571 89.3258142,56.6493937 89.7610205,56.9894141 L91.887337,58.6494477 C84.582156,38.4419045 65.2276218,24 42.5,24 C40.4254117,24 38.3789284,24.1203318 36.367149,24.3543965 L36.022518,22.3809268 C38.1466458,22.1293826 40.3082134,22 42.5,22 Z" fill="#2F4EED"></path></g></g></g></g>', 1);
+const _hoisted_3$2 = [
+  _hoisted_2$3
+];
+const _hoisted_4$1 = /* @__PURE__ */ vue.createElementVNode("div", { style: { "line-height": "20px", "margin-top": "12px", "color": "#505259" } }, " \u8BF7\u62D6\u62FD\u6216\u70B9\u51FB\u5DE6\u4FA7\u5B57\u6BB5\u521B\u5EFA\u8868\u5355 ", -1);
+const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  __name: "no-data-tip",
+  props: {},
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", null, [
+        (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$5, _hoisted_3$2)),
+        _hoisted_4$1
+      ]);
+    };
+  }
+});
+var NoDataTip = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__file", "no-data-tip.vue"]]);
+
+const formDesignerProps = {
+    formRules: {
+        type: Array,
+        default() {
+            return [];
+        },
+    },
+    presetRules: {
+        type: Array,
+        default() {
+            return [];
+        },
+    },
+    flowCondition: {
+        type: Object,
+        default() {
+            return {};
+        },
+    },
+};
+
+const _hoisted_1$4 = {
+  key: 0,
+  style: { "font-weight": "normal" }
+};
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  __name: "table-head-count",
+  props: ["childRules"],
+  setup(__props) {
+    const props = __props;
+    const text = vue.computed(
+      () => props.childRules.filter((rule) => rule.type === "inputNumber" && rule.config.count).reduce((pre, item, index) => {
+        if (index > 0)
+          pre += "\u3001";
+        return pre + `${item.title.title}: 0`;
+      }, "")
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", null, [
+        vue.renderSlot(_ctx.$slots, "default"),
+        vue.unref(text) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$4, "\uFF08" + vue.toDisplayString(vue.unref(text)) + "\uFF09", 1)) : vue.createCommentVNode("v-if", true)
+      ]);
+    };
+  }
+});
+var TableHeadCount = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__file", "table-head-count.vue"]]);
+
+const _hoisted_1$3 = { style: { "position": "absolute", "right": "0", "top": "-30px", "display": "flex", "align-items": "center" } };
+const _hoisted_2$2 = /* @__PURE__ */ vue.createTextVNode("\u5FC5\u586B");
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  __name: "checkbox-switch",
+  props: ["rule"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$3, [
+        vue.createVNode(vue.unref(antDesignVue.FormItemRest), null, {
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(antDesignVue.Checkbox), {
+              checked: __props.rule.config.uploadPictureRule.required,
+              "onUpdate:checked": _cache[0] || (_cache[0] = ($event) => __props.rule.config.uploadPictureRule.required = $event)
+            }, {
+              default: vue.withCtx(() => [
+                _hoisted_2$2
+              ]),
+              _: 1
+            }, 8, ["checked"]),
+            vue.createVNode(vue.unref(antDesignVue.Switch), {
+              checked: __props.rule.config.uploadPictureRule.hidden,
+              "onUpdate:checked": _cache[1] || (_cache[1] = ($event) => __props.rule.config.uploadPictureRule.hidden = $event),
+              style: { "margin-left": "8px" },
+              "checked-children": "\u5F00",
+              "un-checked-children": "\u5173",
+              "checked-value": false,
+              "un-checked-value": true
+            }, null, 8, ["checked"])
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+var CheckboxSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__file", "checkbox-switch.vue"]]);
+
+const widgetsTableAccept = {
+    [input.name]: input,
+    [textarea.name]: textarea,
+    [numInput.name]: numInput,
+    [radio.name]: radio,
+    [checkbox.name]: checkbox,
+    [date.name]: date,
+    [dateRange.name]: dateRange,
+    [people.name]: people,
+    [department.name]: department,
+    [product.name]: product,
+    [shop.name]: shop,
+    [materialType.name]: materialType,
+};
+const widgetNamesRowAccept = [
+    input.name,
+    textarea.name,
+    numInput.name,
+    radio.name,
+    checkbox.name,
+    date.name,
+    dateRange.name,
+    picture.name,
+    table.name,
+    file.name,
+    people.name,
+    department.name,
+    product.name,
+    shop.name,
+    materialType.name,
+];
+var ruleList = {
+    [row.name]: row,
+    [input.name]: input,
+    [textarea.name]: textarea,
+    [numInput.name]: numInput,
+    [radio.name]: radio,
+    [checkbox.name]: checkbox,
+    [date.name]: date,
+    [dateRange.name]: dateRange,
+    [instruction.name]: instruction,
+    [picture.name]: picture,
+    [table.name]: table,
+    [file.name]: file,
+    [people.name]: people,
+    [department.name]: department,
+    [materialTemp.name]: materialTemp,
+    [product.name]: product,
+    [shop.name]: shop,
+    [materialType.name]: materialType,
+};
+
+const _hoisted_1$2 = { class: "bm-table-column__main" };
+const _hoisted_2$1 = { class: "bm-table-column-btn-wrap" };
+const _hoisted_3$1 = /* @__PURE__ */ vue.createTextVNode(" \u6DFB\u52A0\u5B50\u5B57\u6BB5 ");
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  __name: "table-column",
+  props: ["formCreateInject"],
+  setup(__props) {
+    const props = __props;
+    const handleClass = "bm-table-column__drag-icon";
+    const btnCom = vue.ref();
+    const open = vue.ref(false);
+    const childRules = vue.computed(() => props.formCreateInject.rule.value);
+    const api = vue.computed(() => props.formCreateInject.api);
+    const options = vue.computed(() => Object.values(widgetsTableAccept));
+    function handleEdit(rule) {
+      api.value.emit("setActive", rule);
+    }
+    function show() {
+      open.value = true;
+    }
+    function hide() {
+      open.value = false;
+    }
+    function handleSelect(value, config) {
+      api.value.emit("addChildRule", config);
+      open.value = false;
+      btnCom.value.$el.blur();
+    }
+    function getPopupContainer() {
+      return document.body;
+    }
+    return (_ctx, _cache) => {
+      const _component_Delete = vue.resolveComponent("Delete");
+      const _component_ARow = vue.resolveComponent("ARow");
+      return vue.openBlock(), vue.createElementBlock("div", null, [
+        vue.createVNode(vue.unref(Draggable__default["default"]), {
+          tag: "transition-group",
+          "component-data": {
+            name: "flip-list",
+            tag: "div"
+          },
+          animation: 200,
+          list: vue.unref(childRules),
+          handle: `.${handleClass}`,
+          "force-fallback": true
+        }, {
+          item: vue.withCtx(({ element, index }) => [
+            vue.createVNode(_component_ARow, {
+              class: "bm-table-column",
+              align: "middle"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(iconsVue.HolderOutlined), {
+                  class: vue.normalizeClass([handleClass])
+                }, null, 8, ["class"]),
+                vue.createElementVNode("div", _hoisted_1$2, vue.toDisplayString(element.title.title), 1),
+                vue.createVNode(vue.unref(iconsVue.EditOutlined), {
+                  class: "bm-table-column__icon is-edit",
+                  onClick: ($event) => handleEdit(element)
+                }, null, 8, ["onClick"]),
+                vue.createVNode(_component_Delete, {
+                  class: "bm-table-column__icon is-del",
+                  onClick: ($event) => vue.unref(childRules).splice(index, 1)
+                }, null, 8, ["onClick"])
+              ]),
+              _: 2
+            }, 1024)
+          ]),
+          _: 1
+        }, 8, ["list", "handle"]),
+        vue.createElementVNode("div", _hoisted_2$1, [
+          vue.createVNode(vue.unref(antDesignVue.FormItemRest), null, {
+            default: vue.withCtx(() => [
+              vue.createVNode(vue.unref(antDesignVue.Select), {
+                value: "",
+                class: "bm-table-column__select",
+                options: vue.unref(options),
+                "field-names": { value: "name" },
+                open: open.value,
+                "get-popup-container": getPopupContainer,
+                placeholder: "\u8BF7\u9009\u62E9",
+                onSelect: handleSelect
+              }, null, 8, ["options", "open"])
+            ]),
+            _: 1
+          }),
+          vue.createVNode(vue.unref(antDesignVue.Button), {
+            ref_key: "btnCom",
+            ref: btnCom,
+            class: "bm-table-column__btn",
+            block: "",
+            onFocus: show,
+            onBlur: hide
+          }, {
+            icon: vue.withCtx(() => [
+              vue.createVNode(vue.unref(iconsVue.PlusOutlined))
+            ]),
+            default: vue.withCtx(() => [
+              _hoisted_3$1
+            ]),
+            _: 1
+          }, 512)
+        ])
+      ]);
+    };
+  }
+});
+var TableColumn = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "table-column.vue"]]);
+
+const _hoisted_1$1 = /* @__PURE__ */ vue.createTextVNode("change");
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  __name: "text-color",
+  props: ["rule"],
+  setup(__props) {
+    const props = __props;
+    function handleClick() {
+      const rule = props.rule;
+      rule.style.color = rule.style.color === Colors.Black ? Colors.Blue : Colors.Black;
+    }
+    return (_ctx, _cache) => {
+      const _component_ColorPanel = vue.resolveComponent("ColorPanel");
+      return vue.openBlock(), vue.createBlock(_component_ColorPanel, {
+        style: vue.normalizeStyle({
+          position: "absolute",
+          top: "-29px",
+          right: 0,
+          width: "1em",
+          height: "1em",
+          fontSize: "20px",
+          color: __props.rule.style.color,
+          cursor: "pointer"
+        }),
+        onClick: vue.withModifiers(handleClick, ["prevent", "stop"])
+      }, {
+        default: vue.withCtx(() => [
+          _hoisted_1$1
+        ]),
+        _: 1
+      }, 8, ["style", "onClick"]);
+    };
+  }
+});
+var TextColor = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "text-color.vue"]]);
+
+const _hoisted_1 = { class: "bm-menu-title" };
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = { class: "bfd-main__warp" };
+const _hoisted_4 = { class: "bm-widget-form-item" };
+const _hoisted_5 = {
+  key: 0,
+  class: "bfd-sider-right__title"
+};
+const _hoisted_6 = /* @__PURE__ */ vue.createTextVNode(" \u5355\u4E2A\u6587\u4EF6\u5927\u5C0F\u9700\u572820M\u4EE5\u5185 ");
+const _hoisted_7 = { class: "bfd-sider-right__form" };
+const _hoisted_8 = {
+  key: 0,
+  class: "bfd-sider-right__form__flow-releated"
+};
 const __default__ = {
   name: "BmFormDesigner"
 };
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...__default__,
-  setup(__props) {
-    const rule = [
+  props: formDesignerProps,
+  setup(__props, { expose }) {
+    const props = __props;
+    FC__default["default"].component("TableHeadCount", TableHeadCount);
+    FC__default["default"].component("TableColumn", TableColumn);
+    FC__default["default"].component("TextColor", TextColor);
+    FC__default["default"].component("CheckboxSwitch", CheckboxSwitch);
+    FC__default["default"].register({
+      name: "formRule",
+      init(effect, rule, api) {
+        const config = api.config;
+        const parentType = config.parentType;
+        if (!rule.config.fieldRatio) {
+          resetFieldRatio(rule, parentType);
+        }
+        if (rule?.props?.type === "textarea" && parentType === WidgetType.TableWidget) {
+          rule.props.autoSize = true;
+        }
+        if (rule.config.config.name === "product" && parentType === WidgetType.TableWidget) {
+          rule.type = "input";
+          delete rule.component;
+          rule.title.title = "\u5546\u54C1\u7F16\u53F7";
+          rule.props = {};
+          rule.props.placeholder = "\u8BF7\u8F93\u5165";
+        }
+      }
+    });
+    const showDragTip = vue.ref(true);
+    const tabData = createTab();
+    const activeKey = vue.ref("controlLibrary");
+    const widgetFormRules = vue.reactive([]);
+    const activeRule = vue.ref({});
+    const cacheProps = vue.reactive({});
+    const fApi = vue.ref();
+    const activeParentRule = vue.ref();
+    const menuList = vue.computed(
+      () => tabData.find((tab) => tab.key === activeKey.value).menuList
+    );
+    const activeProps = vue.computed(() => cacheProps[activeRule.value.field]);
+    const activeRuleInList = vue.computed(
+      () => activeParentRule.value?.config?.childRules || widgetFormRules
+    );
+    function hideShowDragTip() {
+      showDragTip.value = false;
+    }
+    function handleTabChange(key) {
+      activeKey.value = key;
+    }
+    function cloneMenuItem(original) {
+      return makeRule(original);
+    }
+    function checkDragMove(evt) {
+      const draggedData = evt.dragged._underlying_vm_ || {};
+      const toComponentData = evt.to.__draggable_component__.componentData || {};
+      const widgetNameDragged = draggedData?.config?.config?.name;
+      if (toComponentData.type === WidgetType.RowWidget && !widgetNamesRowAccept.includes(widgetNameDragged) || toComponentData.type === WidgetType.TableWidget && !Object.keys(widgetsTableAccept).includes(widgetNameDragged)) {
+        widgetFormRules.forEach((rule) => {
+          rule.config.putDisabled = rule.field === toComponentData.field;
+        });
+        return false;
+      } else {
+        widgetFormRules.forEach((rule) => {
+          rule.config.putDisabled = false;
+        });
+      }
+    }
+    function moveMenuItem(evt) {
+      return checkDragMove(evt);
+    }
+    function moveFormItem(evt) {
+      return checkDragMove(evt);
+    }
+    function handleMenuItemDragStart(evt) {
+      const item = evt.item.children[0];
+      const cloneItem = evt.clone.children[0];
+      item.style.opacity = 0.3;
+      cloneItem.style.opacity = 0.3;
+      item.style.color = "#2F4EED";
+      cloneItem.style.color = "#2F4EED";
+    }
+    function resetPutDisabled() {
+      widgetFormRules.forEach((rule) => {
+        rule.config.putDisabled = false;
+      });
+    }
+    function handleMenuItemDragEnd(evt) {
+      evt.item.children[0].style.opacity = "";
+      evt.item.children[0].style.color = "";
+      resetPutDisabled();
+    }
+    function handleMenuItemClick(config) {
+      const rule = makeRule(config);
+      const activeParentRuleName = activeParentRule.value?.config?.config?.name;
+      if (!widgetNamesRowAccept.includes(config.name) && activeParentRuleName === "row" || !Object.keys(widgetsTableAccept).includes(config.name) && activeParentRuleName === "table") {
+        disabledTip(activeParentRule.value.config.config.name);
+      } else {
+        const index = activeRuleInList.value.findIndex(
+          (item) => item.field === activeRule.value.field
+        );
+        activeRuleInList.value.splice(index + 1, 0, rule);
+        setActiveRule(rule, activeParentRule.value);
+        hideShowDragTip();
+      }
+    }
+    function makeRule(config) {
+      const rule = config.rule();
+      rule.config.config = config;
+      return rule;
+    }
+    function disabledTip(name) {
+      antDesignVue.message.warning({
+        content: name === "table" ? "\u8BE5\u63A7\u4EF6\u6682\u4E0D\u652F\u6301\u62D6\u5165\u8868\u683C\u4E2D" : "\u8BE5\u63A7\u4EF6\u6682\u4E0D\u652F\u6301\u5206\u680F",
+        class: "bm-form-designer__message-warning"
+      });
+    }
+    function putDisabledTip() {
+      const targetRule = widgetFormRules.find((rule) => rule.config.putDisabled);
+      if (targetRule) {
+        disabledTip(targetRule.config.config.name);
+      }
+    }
+    function dragAdd(rule, parentRule = void 0) {
+      resetFieldRatio(rule, parentRule?.type);
+      if (cacheProps[rule.field])
+        delete cacheProps[rule.field];
+      setActiveRule(rule, parentRule);
+      putDisabledTip();
+    }
+    function handleFormItemAdd({ newIndex }) {
+      const rule = widgetFormRules[newIndex];
+      dragAdd(rule);
+      hideShowDragTip();
+    }
+    function handleFormItemUpdate({ newIndex }) {
+      const rule = widgetFormRules[newIndex];
+      if (rule)
+        setActiveRule(widgetFormRules[newIndex]);
+    }
+    function handleFormItemDragEnd() {
+      putDisabledTip();
+      resetPutDisabled();
+    }
+    function handleFormItemClick(rule) {
+      setActiveRule(rule);
+    }
+    function makeChildRules(ruleList2) {
+      return ruleList2.map((rule) => makeRule(rule.config.config));
+    }
+    function handleFormItemCopy(rule, parentRule) {
+      const newRule = makeRule(rule.config.config);
+      const list = parentRule?.config?.childRules || widgetFormRules;
+      const index = list.findIndex((ruleItem) => ruleItem.field === rule.field);
+      if (rule.config.childRules?.length) {
+        newRule.config.childRules.push(...makeChildRules(rule.config.childRules));
+      }
+      list.splice(index + 1, 0, newRule);
+      copyPropValue(rule, newRule);
+      setActiveRule(newRule, parentRule);
+    }
+    function handleFormItemDelete(targetRule, parentRule) {
+      if (targetRule.config.linkProductCount > 0) {
+        antDesignVue.message.error("\u8BE5\u63A7\u4EF6\u5DF2\u88AB\u8BBE\u4E3A\u6570\u636E\u8FC7\u6EE4\u6761\u4EF6\uFF0C\u4E0D\u53EF\u5220\u9664\u3002");
+        return;
+      }
+      const parentList = parentRule?.config?.childRules || widgetFormRules;
+      const index = parentList.findIndex((rule) => rule.field === targetRule.field);
+      parentList.splice(index, 1);
+      delete cacheProps[targetRule.field];
+      if (targetRule.field === activeRule.value.field) {
+        const newIndex = Math.min(parentList.length - 1, index);
+        if (newIndex >= 0) {
+          setActiveRule(parentList[newIndex]);
+        } else if (parentRule) {
+          setActiveRule(parentRule);
+        } else {
+          activeRule.value = {};
+        }
+      } else if (targetRule?.config?.childRules?.some(
+        (rule) => rule.field === activeRule.value.field
+      )) {
+        const newIndex = Math.min(parentList.length - 1, index);
+        if (newIndex >= 0) {
+          setActiveRule(parentList[newIndex]);
+        } else {
+          activeRule.value = {};
+          activeParentRule.value = widgetFormRules;
+        }
+      }
+    }
+    function makePropRule(rule, parentRule) {
+      return rule.config.config.props(rule, parentRule, widgetFormRules);
+    }
+    function setActiveRule(rule, parentRule = void 0) {
+      activeRule.value = rule;
+      activeParentRule.value = parentRule;
+      widgetFormRules.forEach((item) => {
+        if (item.type === WidgetType.RowWidget || item.type === WidgetType.TableWidget) {
+          vue.nextTick(() => {
+            item.props.activeRule = rule;
+          });
+        }
+      });
+      if (!cacheProps[rule.field]) {
+        cacheProps[rule.field] = makePropRule(rule, parentRule);
+      }
+    }
+    function propChange(field, value) {
+      setRulePropValue(field, value, activeRule.value);
+    }
+    function setRulePropValue(field, value, rule) {
+      field.split(".").reduce((pre, cur, index, arr) => {
+        if (index === arr.length - 1) {
+          pre[cur] = value;
+        } else {
+          if (!pre[cur]) {
+            pre[cur] = {};
+          }
+        }
+        return pre[cur];
+      }, rule);
+    }
+    function copyPropValue(oldRule, newRule) {
+      newRule.config.propsFields.forEach((field) => {
+        if (field !== "config.childRules")
+          setRulePropValue(field, lodashEs.cloneDeep(getValue(field, oldRule)), newRule);
+      });
+      if (newRule.config.childRules?.length) {
+        newRule.config.childRules.forEach((rule, index) => {
+          copyPropValue(oldRule.config.childRules[index], rule);
+        });
+      }
+    }
+    function handleWidgetAdd(rule, parentRule) {
+      dragAdd(rule, parentRule);
+    }
+    function handlePropsSetActive(rule) {
+      setActiveRule(rule, activeRule.value);
+    }
+    function handleAddChildRule(config) {
+      const rule = makeRule(config);
+      activeRule.value.config.childRules.push(rule);
+    }
+    function getValue(field, oldRule) {
+      return field.split(".").reduce((pre, cur) => {
+        return pre[cur];
+      }, oldRule);
+    }
+    function resetFieldRatio(rule, parentRuleType) {
+      if (!parentRuleType) {
+        rule.config.fieldRatio = "100%";
+      } else if (parentRuleType === WidgetType.RowWidget) {
+        const ruleName = rule.config.config.name;
+        rule.config.fieldRatio = ruleName === "table" || ruleName === "product" ? 24 : 12;
+      } else if (parentRuleType === WidgetType.TableWidget) {
+        rule.config.fieldRatio = "140px";
+      }
+    }
+    function getFormRule() {
+      return widgetFormRules.map((rule) => {
+        const ruleParsed = parseRule(rule);
+        const childRules = rule?.config?.childRules;
+        if (childRules?.length) {
+          const childRulesParsed = ruleParsed.config.childRules = [];
+          childRules.forEach((ruleItem) => {
+            childRulesParsed.push(parseRule(ruleItem));
+          });
+        }
+        return ruleParsed;
+      });
+    }
+    function parseRule(rule) {
+      return rule.config.config.parse(rule);
+    }
+    function edit(formRules) {
+      formRules.forEach((item) => {
+        const rule = makeRule(ruleList[item.name]);
+        delete item.name;
+        if (item?.config?.childRules?.length) {
+          rule.config.childRules = item.config.childRules.map((childItem) => {
+            const childRule = makeRule(ruleList[childItem.name]);
+            delete childItem.name;
+            return childRule;
+          });
+        }
+        lodashEs.merge(rule, item);
+        widgetFormRules.push(rule);
+      });
+    }
+    function getRule(name) {
+      return makeRule(ruleList[name]);
+    }
+    vue.watch(
+      () => props.presetRules,
+      (presetRules) => {
+        widgetFormRules.push(...presetRules);
+      },
       {
-        type: "input",
-        title: "\u5546\u54C1\u540D\u79F0",
-        field: "goods_name"
+        immediate: true
       }
-    ];
+    );
+    vue.watch(
+      () => props.formRules,
+      (formRules) => {
+        edit(formRules);
+      },
+      {
+        immediate: true
+      }
+    );
+    vue.onBeforeUnmount(() => {
+      resetIndex();
+    });
+    expose({
+      getFormRule,
+      getRule
+    });
     return (_ctx, _cache) => {
-      const _component_form_create = vue.resolveComponent("form-create");
-      return vue.openBlock(), vue.createBlock(_component_form_create, { rule });
+      const _component_ACol = vue.resolveComponent("ACol");
+      const _component_ARow = vue.resolveComponent("ARow");
+      const _component_FormCreate = vue.resolveComponent("FormCreate");
+      return vue.openBlock(), vue.createBlock(vue.unref(antDesignVue.Layout), { class: "bm-form-designer" }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(vue.unref(antDesignVue.LayoutSider), {
+            class: "bfd-sider-left",
+            width: "260"
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_ARow, { class: "bm-tabs" }, {
+                default: vue.withCtx(() => [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(tabData), (item) => {
+                    return vue.openBlock(), vue.createBlock(_component_ACol, {
+                      key: item.key,
+                      class: vue.normalizeClass(["bm-tabs-item", activeKey.value === item.key ? "active" : ""]),
+                      onClick: ($event) => handleTabChange(item.key)
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode(vue.toDisplayString(item.tab), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["class", "onClick"]);
+                  }), 128))
+                ]),
+                _: 1
+              }),
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(menuList), (item, index) => {
+                return vue.openBlock(), vue.createElementBlock("div", { key: index }, [
+                  vue.createElementVNode("div", _hoisted_1, vue.toDisplayString(item.title), 1),
+                  vue.createVNode(vue.unref(Draggable__default["default"]), {
+                    class: "bm-menu-wrap",
+                    list: item.list,
+                    group: { name: "widget", pull: "clone", put: false },
+                    "item-key": "name",
+                    sort: false,
+                    clone: cloneMenuItem,
+                    move: moveMenuItem,
+                    "force-fallback": true,
+                    "scroll-sensitivity": 100,
+                    delay: 50,
+                    onStart: handleMenuItemDragStart,
+                    onEnd: handleMenuItemDragEnd
+                  }, {
+                    item: vue.withCtx(({ element }) => [
+                      vue.createElementVNode("div", {
+                        style: vue.normalizeStyle({ flexBasis: item.name === "dataForm" ? "100%" : "50%" }),
+                        class: "bm-menu-item-wrap"
+                      }, [
+                        vue.createElementVNode("div", {
+                          class: "bm-menu-item",
+                          onClick: ($event) => handleMenuItemClick(element)
+                        }, [
+                          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(element.icon), { class: "bm-menu-icon" })),
+                          vue.createTextVNode(" " + vue.toDisplayString(element.label), 1)
+                        ], 8, _hoisted_2),
+                        vue.createVNode(DragPlaceholder)
+                      ], 4)
+                    ]),
+                    _: 2
+                  }, 1032, ["list"])
+                ]);
+              }), 128))
+            ]),
+            _: 1
+          }),
+          vue.createVNode(vue.unref(antDesignVue.LayoutContent), { class: "bfd-main" }, {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_3, [
+                vue.createVNode(vue.unref(Draggable__default["default"]), {
+                  list: widgetFormRules,
+                  class: "bm-widget-form",
+                  group: {
+                    name: "formWidget",
+                    pull: true,
+                    put: ["widget", "formWidget", "rowWidget"]
+                  },
+                  "item-key": "field",
+                  "ghost-class": "form-item-drag-ghost",
+                  move: moveFormItem,
+                  "force-fallback": true,
+                  delay: 50,
+                  onAdd: handleFormItemAdd,
+                  onUpdate: handleFormItemUpdate,
+                  onEnd: handleFormItemDragEnd
+                }, {
+                  item: vue.withCtx(({ element }) => [
+                    vue.createElementVNode("div", _hoisted_4, [
+                      vue.createVNode(DragTool, {
+                        rule: element,
+                        "active-rule": activeRule.value,
+                        style: vue.normalizeStyle({
+                          width: element.config.fieldRatio
+                        }),
+                        onCopy: handleFormItemCopy,
+                        onDelete: handleFormItemDelete,
+                        onClick: ($event) => handleFormItemClick(element),
+                        onSetActiveRule: setActiveRule,
+                        onWidgetAdd: handleWidgetAdd
+                      }, null, 8, ["rule", "active-rule", "style", "onClick"]),
+                      vue.createVNode(DragPlaceholder)
+                    ])
+                  ]),
+                  _: 1
+                }, 8, ["list"]),
+                showDragTip.value && !_ctx.formRules.length ? (vue.openBlock(), vue.createBlock(NoDataTip, {
+                  key: 0,
+                  class: "bm-no-data-tip"
+                })) : vue.createCommentVNode("v-if", true)
+              ])
+            ]),
+            _: 1
+          }),
+          vue.createVNode(vue.unref(antDesignVue.LayoutSider), {
+            class: "bfd-sider-right",
+            width: "288"
+          }, {
+            default: vue.withCtx(() => [
+              activeRule.value.field ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(activeRule.value.config?.config.icon))),
+                vue.createTextVNode(" " + vue.toDisplayString(activeRule.value.config?.config.label) + " ", 1),
+                activeRule.value.type === vue.unref(WidgetType).UploadFile ? (vue.openBlock(), vue.createBlock(vue.unref(antDesignVue.Tooltip), { key: 0 }, {
+                  title: vue.withCtx(() => [
+                    _hoisted_6
+                  ]),
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(iconsVue.QuestionCircleOutlined), { style: { "color": "#babac1", "font-size": "14px", "margin-left": "5px" } })
+                  ]),
+                  _: 1
+                })) : vue.createCommentVNode("v-if", true)
+              ])) : vue.createCommentVNode("v-if", true),
+              vue.createElementVNode("div", _hoisted_7, [
+                _ctx.flowCondition[activeRule.value.field] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+                  vue.createVNode(vue.unref(iconsVue.ExclamationCircleFilled), { style: { "color": "#2f4eed" } }),
+                  vue.createTextVNode(" \u8BE5\u7EC4\u4EF6\u5728\u201C" + vue.toDisplayString(_ctx.flowCondition[activeRule.value.field]) + "\u201D\u5DF2\u88AB\u8BBE\u4E3A\u5BA1\u6279\u6761\u4EF6\uFF0C\u9664\u201C\u5FC5\u586B\u3001\u9009\u9879\u201D\u8BBE\u7F6E\u4E0D\u53EF\u4FEE\u6539\uFF0C\u5176\u4ED6\u4FE1\u606F\u53EF\u4FEE\u6539 ", 1)
+                ])) : vue.createCommentVNode("v-if", true),
+                vue.createVNode(_component_FormCreate, {
+                  api: fApi.value,
+                  "onUpdate:api": _cache[0] || (_cache[0] = ($event) => fApi.value = $event),
+                  option: {
+                    form: {
+                      layout: "vertical"
+                    },
+                    submitBtn: {
+                      show: false
+                    },
+                    info: {
+                      type: "tooltip",
+                      align: "left",
+                      arrowPointAtCenter: true,
+                      overlayStyle: {
+                        width: "184px"
+                      }
+                    }
+                  },
+                  rule: vue.unref(activeProps),
+                  onChange: propChange,
+                  onSetActive: handlePropsSetActive,
+                  onAddChildRule: handleAddChildRule
+                }, null, 8, ["api", "rule"])
+              ])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
     };
   }
 });