@vipl520/dk-ui 1.0.12 → 1.0.14

package/es/page-diy/src/page-diy.vue.mjs

@@ -3,12 +3,16 @@ import is, { hasProperty } from '@form-create/utils/lib/type';
 import { lower } from '@form-create/utils/lib/tocase';
 import draggable from 'vuedraggable/src/vuedraggable';
 import PreviewPhone from './components/PreviewPhone.vue.mjs';
-import { createMenu, ruleList } from './config/rule/index.mjs';
+import { webRuleList, createWebMenu } from './config/rule/web/index.mjs';
+import { minRuleList, createMinMenu } from './config/rule/min/index.mjs';
 import './utils/index.mjs';
 import { defineComponent, toRefs, getCurrentInstance, ref, provide, toRef, computed, reactive, watch, nextTick, markRaw, createElementVNode, resolveComponent, resolveDirective, openBlock, createBlock, withCtx, createCommentVNode, createVNode, normalizeStyle, createElementBlock, Fragment, renderList, toDisplayString, normalizeClass, createTextVNode, withModifiers, renderSlot, withDirectives, vShow } from 'vue';
 import './config/base/index.mjs';
 import { isArray } from '@vipl520/utils';
 import { ElNotification } from 'element-plus';
+import { pageDiyProps } from './props.mjs';
+import views$1 from './views/min/index.mjs';
+import views from './views/web/index.mjs';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.mjs';
 import { designerForm } from './utils/form.mjs';
 import dkSetting from './config/base/dkSetting.mjs';
@@ -37,7 +41,7 @@ const _sfc_main = defineComponent({
     PreviewPhone,
     DragForm: designerForm.$form(),
   },
-  props: ['menu', 'height', 'config', 'mask', 'locale', 'loading'],
+  props: pageDiyProps,
   setup(props) {
     const { menu, height, mask, locale } = toRefs(props);
     const vm = getCurrentInstance();
@@ -45,6 +49,20 @@ const _sfc_main = defineComponent({
     provide('fcx', fcx);
     provide('diy', vm);
     const config = toRef(props, 'config', {});
+    //  区别小程序和网页
+    const ruleList = props.type === 'web' ? webRuleList : minRuleList;
+    const createMenu = props.type === 'web' ? createWebMenu : createMinMenu;
+    // 导入不同的view
+    if (props.type === 'web') {
+      for (const name in views) {
+        designerForm.component(name, views[name]);
+      }
+    } else {
+      for (const name in views$1) {
+        designerForm.component(name, views$1[name]);
+      }
+    }
+
     const getRuleItems = (item) => {
       const gl = ['DragTool', 'DragBox'];
       const items = [];
@@ -101,32 +119,6 @@ const _sfc_main = defineComponent({
       }
       return obj
     });
-    // let _t = globalT
-    // if (locale.value) {
-    //   _t = useLocale(locale).t
-    // }
-    // const t = (...args) => _t(...args)
-    // const tidyRuleConfig = (orgRule, configRule, ...args) => {
-    //   console.log('tidyRuleConfig', orgRule, configRule, ...args)
-    //   if (configRule) {
-    //     if (is.Function(configRule)) {
-    //       console.log('isfun')
-    //       return configRule(...args)
-    //     }
-    //     if (configRule.rule) {
-    //       console.log('isrule')
-    //       let rule = configRule.rule(...args)
-    //       if (configRule.append) {
-    //         console.log('isappend')
-    //         rule = [...rule, ...orgRule(...args)]
-    //       }
-    //       return rule
-    //     }
-    //   }
-    //   console.log('isorg')
-    //   return orgRule(...args)
-    // }
-
     const data = reactive({
       cacheProps: {},
       moveRule: null,
@@ -218,12 +210,12 @@ const _sfc_main = defineComponent({
       stopChangeBound: null,
       rightAside: {
         style: {
-          width: '300px',
+          width: props.rightAsideWidth,
         },
         hide: false,
       },
       leftAside: {
-        style: { width: '285px' },
+        style: { width: props.leftAsideWidth },
         hide: false,
       },
       treeAside: {
@@ -236,6 +228,7 @@ const _sfc_main = defineComponent({
         treeData: [],
       },
     });
+
     function cleanTreeData(node) {
       if (Array.isArray(node)) {
         // 遍历数组中的每个元素
@@ -244,9 +237,7 @@ const _sfc_main = defineComponent({
         // 处理对象节点
         if (Array.isArray(node.children)) {
           // 只保留 children 数组中的对象类型元素
-          node.children = node.children.filter(
-            (child) => typeof child === 'object' && child !== null
-          );
+          node.children = node.children.filter((child) => typeof child === 'object' && child !== null);
           // 递归处理每个子节点
           node.children = cleanTreeData(node.children);
         }
@@ -259,10 +250,7 @@ const _sfc_main = defineComponent({
     watch(
       () => data.dragForm,
       () => {
-        data.treeAside.treeData = methods.parseRule(
-          deepCopy(data.dragForm.api.rule[0].children),
-          true
-        );
+        data.treeAside.treeData = methods.parseRule(deepCopy(data.dragForm.api.rule[0].children), true);
         data.treeAside.treeData = cleanTreeData(data.treeAside.treeData);
       },
       {
@@ -282,32 +270,6 @@ const _sfc_main = defineComponent({
 
     let unWatchActiveRule = null;
 
-    // watch(
-    //   () => locale.value,
-    //   (n) => {
-    //     _t = n ? useLocale(locale).t : globalT
-    //     const baseFormVal =
-    //       data.baseForm.api.formData && data.baseForm.api.formData()
-    //     data.baseForm.rule = tidyRuleConfig(field, baseRule.value, { t })
-    //     data.cacheProps = {}
-    //     const rule = data.activeRule
-    //     let propsVal = null
-    //     if (rule) {
-    //       propsVal =
-    //         data.propsForm.api.formData && data.propsForm.api.formData()
-    //       data.propsForm.rule = data.cacheProps[rule._id] = tidyRuleConfig(
-    //         rule.config.config.props,
-    //         componentRule.value && componentRule.value[rule.config.config.name],
-    //         rule,
-    //         { t, api: data.dragForm.api }
-    //       )
-    //     }
-    //     nextTick(() => {
-    //       baseFormVal && data.baseForm.api.setValue(baseFormVal)
-    //       propsVal && data.propsForm.api.setValue(propsVal)
-    //     })
-    //   }
-    // )
     const methods = {
       // 清除所有配置项
       clear(type = 'all') {
@@ -484,38 +446,11 @@ const _sfc_main = defineComponent({
           rules = [];
         }
         data.children = methods.makeChildren(
-          methods.loadRule(
-            is.String(rules) ? designerForm.parseJson(rules) : deepCopy(rules)
-          )
+          methods.loadRule(is.String(rules) ? designerForm.parseJson(rules) : deepCopy(rules))
         );
         methods.clearActiveRule();
         data.dragForm.rule = methods.makeDragRule(data.children);
       },
-      // setBaseRuleConfig(rule, append) {
-      // baseRule.value = { rule, append }
-      // data.baseForm.rule = field()
-      // },
-      // setComponentRuleConfig(name, rule, append) {
-      //   // TODO未使用，不知道干啥的
-      //   componentRule.value[name] = { rule, append }
-      //   data.cacheProps = {}
-      //   const activeRule = data.activeRule
-      //   if (activeRule) {
-      //     const propsVal =
-      //       data.propsForm.api.formData && data.propsForm.api.formData()
-      //     data.propsForm.rule = data.cacheProps[activeRule._id] =
-      //       tidyRuleConfig(
-      //         activeRule.config.config.props,
-      //         componentRule.value &&
-      //           componentRule.value[activeRule.config.config.name],
-      //         activeRule,
-      //         { t, api: data.dragForm.api }
-      //       )
-      //     nextTick(() => {
-      //       propsVal && data.propsForm.api.setValue(propsVal)
-      //     })
-      //   }
-      // },
       clearActiveRule() {
         data.activeRule = null;
         data.activeTab = 'page';
@@ -630,15 +565,9 @@ const _sfc_main = defineComponent({
             field = lower(field);
             if (field.indexOf('effect') === 0 && field.indexOf('>') > -1) {
               delete data.activeRule.effect[field.split('>')[1]];
-            } else if (
-              field.indexOf('props') === 0 &&
-              field.indexOf('>') > -1
-            ) {
+            } else if (field.indexOf('props') === 0 && field.indexOf('>') > -1) {
               delete data.activeRule.props[field.split('>')[1]];
-            } else if (
-              field.indexOf('attrs') === 0 &&
-              field.indexOf('>') > -1
-            ) {
+            } else if (field.indexOf('attrs') === 0 && field.indexOf('>') > -1) {
               data.activeRule.attrs[field.split('>')[1]] = value;
             } else if (field === 'child') {
               delete data.activeRule.children[0];
@@ -667,15 +596,9 @@ const _sfc_main = defineComponent({
             field = lower(field);
             if (field.indexOf('effect') === 0 && field.indexOf('>') > -1) {
               data.activeRule.effect[field.split('>')[1]] = value;
-            } else if (
-              field.indexOf('props') === 0 &&
-              field.indexOf('>') > -1
-            ) {
+            } else if (field.indexOf('props') === 0 && field.indexOf('>') > -1) {
               data.activeRule.props[field.split('>')[1]] = value;
-            } else if (
-              field.indexOf('attrs') === 0 &&
-              field.indexOf('>') > -1
-            ) {
+            } else if (field.indexOf('attrs') === 0 && field.indexOf('>') > -1) {
               data.activeRule.attrs[field.split('>')[1]] = value;
             } else if (field === 'child') {
               data.activeRule.children[0] = value;
@@ -787,25 +710,15 @@ const _sfc_main = defineComponent({
         ;['props', 'effect', 'attrs'].forEach((name) => {
           rule[name] &&
             Object.keys(rule[name]).forEach((k) => {
-              formData['formCreate' + upper(name) + '>' + k] = deepCopy(
-                rule[name][k]
-              );
+              formData['formCreate' + upper(name) + '>' + k] = deepCopy(rule[name][k]);
             });
         });
         // console.log('formData', formData)
         data.propsForm.value = formData;
 
         data.showBaseRule =
-          hasProperty(rule, 'field') &&
-          rule.input !== false &&
-          (!config.value || config.value.showBaseForm !== false);
+          hasProperty(rule, 'field') && rule.input !== false && (!config.value || config.value.showBaseForm !== false);
         if (data.showBaseRule) {
-          // data.baseForm.value = {
-          //   field: rule.field,
-          //   title: rule.title || '',
-          //   info: rule.info,
-          //   _control: rule._control,
-          // }
           data.dragForm.api.refreshValidate();
         }
       },
@@ -831,9 +744,7 @@ const _sfc_main = defineComponent({
           const rule = methods.makeRule(ruleList[menu.name]);
           const config = rule.children[0].config.config;
           const count = config.count ? config.count : 99;
-          const _count = countObj.value[config.name]
-            ? countObj.value[config.name]
-            : 0;
+          const _count = countObj.value[config.name] ? countObj.value[config.name] : 0;
           if (_count >= count) {
             ElNotification({
               title: '警告',
@@ -847,10 +758,7 @@ const _sfc_main = defineComponent({
         data.added = true;
       },
       dragEnd(children, { newIndex, oldIndex }) {
-        if (
-          !data.added &&
-          !(data.moveRule === children && newIndex === oldIndex)
-        ) {
+        if (!data.added && !(data.moveRule === children && newIndex === oldIndex)) {
           const rule = data.moveRule.splice(oldIndex, 1);
           children.splice(newIndex, 0, rule[0]);
         }
@@ -872,24 +780,14 @@ const _sfc_main = defineComponent({
         let drag;
         if (config.drag) {
           rule.children.push(
-            (drag = methods.makeDrag(
-              config.drag,
-              rule.type,
-              methods.makeChildren([]),
-              {
-                end: (inject, evt) =>
-                  methods.dragEnd(inject.self.children, evt),
-                add: (inject, evt) =>
-                  methods.dragAdd(inject.self.children, evt),
-                start: (inject, evt) =>
-                  methods.dragStart(inject.self.children, evt),
-                unchoose: (inject, evt) =>
-                  methods.dragUnchoose(inject.self.children, evt),
-              }
-            ))
+            (drag = methods.makeDrag(config.drag, rule.type, methods.makeChildren([]), {
+              end: (inject, evt) => methods.dragEnd(inject.self.children, evt),
+              add: (inject, evt) => methods.dragAdd(inject.self.children, evt),
+              start: (inject, evt) => methods.dragStart(inject.self.children, evt),
+              unchoose: (inject, evt) => methods.dragUnchoose(inject.self.children, evt),
+            }))
           );
         }
-
         if (config.children && !_rule) {
           for (let i = 0; i < (config.childrenLen || 1); i++) {
             const child = methods.makeRule(ruleList[config.children])
@@ -897,10 +795,7 @@ const _sfc_main = defineComponent({
           }
         }
 
-        const dragMask =
-          mask.value !== undefined
-            ? mask.value !== false
-            : config.mask !== false;
+        const dragMask = mask.value !== undefined ? mask.value !== false : config.mask !== false;
         if (config.inside) {
           rule.children = methods.makeChildren([
             {
@@ -936,10 +831,9 @@ const _sfc_main = defineComponent({
                   const config = top.parent.config.config;
                   const item = ruleList[config.children];
                   if (!item) return
-                  ;(!config.drag
-                    ? top.parent
-                    : top.parent.children[0]
-                  ).children[0].children.push(methods.makeRule(item));
+                  ;(!config.drag ? top.parent : top.parent.children[0]).children[0].children.push(
+                    methods.makeRule(item)
+                  );
                 },
                 copy: ({ self }) => {
                   const top = methods.getParent(self);
@@ -992,10 +886,7 @@ const _sfc_main = defineComponent({
                 const config = self.children[0].config.config;
                 const item = ruleList[config.children];
                 if (!item) return
-                ;(!config.drag
-                  ? self
-                  : self.children[0]
-                ).children[0].children.push(methods.makeRule(item));
+                ;(!config.drag ? self : self.children[0]).children[0].children.push(methods.makeRule(item));
               },
               copy: ({ self }) => {
                 vm.emit('copy', self.children[0]);
@@ -1003,11 +894,7 @@ const _sfc_main = defineComponent({
                 const copyRule = designerForm.copyRule(top.parent);
                 // 解决复制后，组件的setting配置失效
                 copyRule.props.setting = copyRule.children[0].setting;
-                top.root.children.splice(
-                  top.root.children.indexOf(top.parent) + 1,
-                  0,
-                  copyRule
-                );
+                top.root.children.splice(top.root.children.indexOf(top.parent) + 1, 0, copyRule);
               },
               active: ({ self }) => {
                 vm.emit('active', self.children[0]);
@@ -1025,18 +912,15 @@ const _sfc_main = defineComponent({
         data.dragName = name;
         if (name === 'left') {
           // 获取._fc-l的宽度
-          data.asideValue =
-            document.getElementsByClassName('_fc-l')[0].offsetWidth;
+          data.asideValue = document.getElementsByClassName('_fc-l')[0].offsetWidth;
         }
         if (name === 'right') {
-          data.asideValue =
-            document.getElementsByClassName('_fc-r')[0].offsetWidth;
+          data.asideValue = document.getElementsByClassName('_fc-r')[0].offsetWidth;
         }
         document.body.style.cursor = 'ew-resize';
         if (name === 'tree') {
           data.startValue = e.clientY;
-          data.asideValue =
-            document.getElementsByClassName('children-list')[0].offsetHeight;
+          data.asideValue = document.getElementsByClassName('children-list')[0].offsetHeight;
           console.log('data.startValue', data.startValue);
           console.log('data.asideValue', data.asideValue);
           document.body.style.cursor = 'n-resize';
@@ -1128,20 +1012,11 @@ const _sfc_main = defineComponent({
         const draggingRule = draggingNode.data.config.config;
         const dropRule = dropNode.data.config.config;
         //  内部元素放到指定的外部才可以放置
-        if (
-          type === 'inner' &&
-          draggingRule.inside &&
-          draggingRule.name === dropRule.children
-        ) {
+        if (type === 'inner' && draggingRule.inside && draggingRule.name === dropRule.children) {
           return true
         }
         // 同样父级
-        if (
-          type !== 'inner' &&
-          draggingRule.name === dropRule.name &&
-          draggingRule.inside &&
-          dropRule.inside
-        ) {
+        if (type !== 'inner' && draggingRule.name === dropRule.name && draggingRule.inside && dropRule.inside) {
           return true
         }
 
@@ -1164,13 +1039,10 @@ const _sfc_main = defineComponent({
       },
       nodeDrop(node, dropNode, type, event) {
         // 拖拽成功完成时触发的事件
-        // console.log('nodeDrop', node, dropNode, type, event)
         methods.setRule(data.treeAside.treeData);
       },
     };
-    data.dragForm.rule = methods.makeDragRule(
-      methods.makeChildren(data.children)
-    );
+    data.dragForm.rule = methods.makeDragRule(methods.makeChildren(data.children));
     return {
       ...toRefs(data),
       ...methods,
@@ -1238,11 +1110,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                   item: withCtx(({ element }) => [
                     (openBlock(), createElementBlock("div", {
                       key: element.id,
-                      class: normalizeClass(["_fc-l-item", 
-                    element.count - (_ctx.countObj[element.name] || 0) <= 0
-                      ? 'not-drag'
-                      : ''
-                  ])
+                      class: normalizeClass(["_fc-l-item", element.count - (_ctx.countObj[element.name] || 0) <= 0 ? 'not-drag' : ''])
                     }, [
                       createElementVNode("div", _hoisted_3, [
                         createVNode(_component_dk_icon, {
@@ -1287,9 +1155,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }, {
               default: withCtx(({ data }) => [
                 createElementVNode("div", {
-                  style: normalizeStyle(
-                _ctx.activeRule && _ctx.activeRule._id === data._id ? 'color:red' : ''
-              )
+                  style: normalizeStyle(_ctx.activeRule && _ctx.activeRule._id === data._id ? 'color:red' : '')
                 }, [
                   createTextVNode(toDisplayString(data.type) + " ", 1 /* TEXT */),
                   (data.config?.config.label)
@@ -1499,7 +1365,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3 /* FORWARDED */
   }))
 }
-var _PageDiy = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',"E:\\project\\monster-admin\\system\\dkgs-ui_test\\dk-ui-all\\packages\\dk-ui\\src\\page-diy\\src\\page-diy.vue"]]);
+var _PageDiy = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',"E:\\project\\monster-admin\\system\\dkgs-ui-back\\packages\\dk-ui\\src\\page-diy\\src\\page-diy.vue"]]);
 
 export { _PageDiy as default };
 //# sourceMappingURL=page-diy.vue.mjs.map