vue2-client 1.8.205 → 1.8.207

package/docs/lowcode.md

@@ -1,161 +1,161 @@
-# 奥枫低代码平台
-
-> 低代码平台在使用时分为两个大部分
->
-> 1. 插件
-> 2. 渲染器
->
-> 所以在使用时要将这两个配置好，才可以正确的在编辑器中显示并编辑
-
-> ----------------  **注意**  ----------------
->
-> 所有文件中引用其他文件，请使用@vue2-client，而不是@。
-> 不然琉璃中会将@符解析到自己的src下
-
-
-## 组件注册使用
-
-> 组件要想在低代码平台中展示，并可编辑需要完成一下几点
-
-### 插件
-
-> 插件的用途是，在编辑器中定义该组件有哪些**事件**，哪些可以编辑的**属性**
-
-#### 插件定义
-
-> 以下是一个简单的插件声明示例
-```js
-export const XFormTableConfig = {
-  type: 'XFormTable',
-  properties: {
-    queryParamsName: {
-      type: 'string'
-    }
-  },
-  selfEvent: ['action']
-}
-```
-
-> `type`
->
-> 该字段用于描述本组件使用渲染器的类型，如type: '111'
-> 这个组件就会去找名称为'111'的渲染器，来将配置渲染为页面
-
-> `properties`
->
-> 该字段用于描述本组件右侧属性编辑栏中，可以展示哪些属性供编辑，
-> 通常所有的props都需要在这里声明
-
-> `selfEvent`
->
-> 该字段用于描述该组件中有哪些事件会交给编辑器统一调用
-
-#### 插件注册
-
-> 定义完成后的插件，需要注册，才会被低代码平台识别
->
-> 在src/utils/lowcode/registerComponentForEditor.js文件中注册插件
->
-> 以下是一个简单的实例，导入刚刚定义好的插件js文件，并将其暴露
->
-> 低代码平台会自动来扫描该文件中的定义
-
-
-```js
-import { XFormTableConfig } from '@vue2-client/base-client/components/common/XFormTable/lowcodeEditorRegister'
-
-export {
-  XFormTableConfig
-}
-```
-
-### 渲染器
-
-> 渲染器决定了配置中的每一个组件，该用哪个VUE对象来渲染
->
-> 渲染器不需要配置文件，只需要注册
->
-> 在src/utils/lowcode/registerComponentForRender.js文件中
->
-> 导入vue对象，并将其暴露即可
->
-> vue组件名，就是插件中的type类型
-```js
-import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
-
-export {
-  XFormTable
-}
-```
-
-### 组件本身修改
-
-> 在组件中有些内容需要做出修改以适配低代码平台
->
-> 1. mixin
-> 2. 事件emit
-> 3. props的定义
-
-#### mixin
-
-> 在低代码平台中，所有组件注册，组件通信都要依赖于mixin。
->
-> 在渲染器中，必须引入mixin
->
-> mixin所在位置为：src/utils/lowcode/lowcodeComponentMixin.js
-
-```js
-import lowcodeComponentMixin from '@vue2-client/utils/lowcode/lowcodeComponentMixin'
-
-export default {
-    ...
-  mixins: [lowcodeComponentMixin],
-    ...
-```
-#### 事件emit
-
-> 在低代码平台中，如果需要与其他组件进行通信，
-> 则必须使用低代码平台指定的传递事件的方式
->
-> 该方法已在mixin中定义，只需要调用即可
-
-```js
-    action (record, id, actionType, fun = 'action') {
-      this.$emit(fun, record, id, actionType)
-      this.$lowCodeEmit('action', record)
-    }
-```
-
-#### props
-
-> require不能为true
->
-> 如果require为true会导致组件无法正确初始化，要么给props一个默认值，
-> 要么从propsData中取值
->
-> 所有在插件中定义的properties，都会通过propsData传递，其格式为
-> { a: aValue, b: bValue}
-
-## 功能新增
-
-### 事件处理新增
-> 在mixin中，handleComponentCommunication函数新增新的case
-```js
-     handleComponentCommunication (actionType, data, targetKey = undefined, eventOriginalVM = undefined) {
-        ...
-      switch (actionType) {
-        case ...
-        case 'log':
-          this.handleComponentLog(data)
-          break
-      }
-      ...
-    }
-> ```
-> 将新增的处理方法，声明在supportedEventType数组中
-```js
-  supportedEventType: [
-    ...
-    'log'
-  ]
-```
+# 奥枫低代码平台
+
+> 低代码平台在使用时分为两个大部分
+>
+> 1. 插件
+> 2. 渲染器
+>
+> 所以在使用时要将这两个配置好，才可以正确的在编辑器中显示并编辑
+
+> ----------------  **注意**  ----------------
+>
+> 所有文件中引用其他文件，请使用@vue2-client，而不是@。
+> 不然琉璃中会将@符解析到自己的src下
+
+
+## 组件注册使用
+
+> 组件要想在低代码平台中展示，并可编辑需要完成一下几点
+
+### 插件
+
+> 插件的用途是，在编辑器中定义该组件有哪些**事件**，哪些可以编辑的**属性**
+
+#### 插件定义
+
+> 以下是一个简单的插件声明示例
+```js
+export const XFormTableConfig = {
+  type: 'XFormTable',
+  properties: {
+    queryParamsName: {
+      type: 'string'
+    }
+  },
+  selfEvent: ['action']
+}
+```
+
+> `type`
+>
+> 该字段用于描述本组件使用渲染器的类型，如type: '111'
+> 这个组件就会去找名称为'111'的渲染器，来将配置渲染为页面
+
+> `properties`
+>
+> 该字段用于描述本组件右侧属性编辑栏中，可以展示哪些属性供编辑，
+> 通常所有的props都需要在这里声明
+
+> `selfEvent`
+>
+> 该字段用于描述该组件中有哪些事件会交给编辑器统一调用
+
+#### 插件注册
+
+> 定义完成后的插件，需要注册，才会被低代码平台识别
+>
+> 在src/utils/lowcode/registerComponentForEditor.js文件中注册插件
+>
+> 以下是一个简单的实例，导入刚刚定义好的插件js文件，并将其暴露
+>
+> 低代码平台会自动来扫描该文件中的定义
+
+
+```js
+import { XFormTableConfig } from '@vue2-client/base-client/components/common/XFormTable/lowcodeEditorRegister'
+
+export {
+  XFormTableConfig
+}
+```
+
+### 渲染器
+
+> 渲染器决定了配置中的每一个组件，该用哪个VUE对象来渲染
+>
+> 渲染器不需要配置文件，只需要注册
+>
+> 在src/utils/lowcode/registerComponentForRender.js文件中
+>
+> 导入vue对象，并将其暴露即可
+>
+> vue组件名，就是插件中的type类型
+```js
+import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
+
+export {
+  XFormTable
+}
+```
+
+### 组件本身修改
+
+> 在组件中有些内容需要做出修改以适配低代码平台
+>
+> 1. mixin
+> 2. 事件emit
+> 3. props的定义
+
+#### mixin
+
+> 在低代码平台中，所有组件注册，组件通信都要依赖于mixin。
+>
+> 在渲染器中，必须引入mixin
+>
+> mixin所在位置为：src/utils/lowcode/lowcodeComponentMixin.js
+
+```js
+import lowcodeComponentMixin from '@vue2-client/utils/lowcode/lowcodeComponentMixin'
+
+export default {
+    ...
+  mixins: [lowcodeComponentMixin],
+    ...
+```
+#### 事件emit
+
+> 在低代码平台中，如果需要与其他组件进行通信，
+> 则必须使用低代码平台指定的传递事件的方式
+>
+> 该方法已在mixin中定义，只需要调用即可
+
+```js
+    action (record, id, actionType, fun = 'action') {
+      this.$emit(fun, record, id, actionType)
+      this.$lowCodeEmit('action', record)
+    }
+```
+
+#### props
+
+> require不能为true
+>
+> 如果require为true会导致组件无法正确初始化，要么给props一个默认值，
+> 要么从propsData中取值
+>
+> 所有在插件中定义的properties，都会通过propsData传递，其格式为
+> { a: aValue, b: bValue}
+
+## 功能新增
+
+### 事件处理新增
+> 在mixin中，handleComponentCommunication函数新增新的case
+```js
+     handleComponentCommunication (actionType, data, targetKey = undefined, eventOriginalVM = undefined) {
+        ...
+      switch (actionType) {
+        case ...
+        case 'log':
+          this.handleComponentLog(data)
+          break
+      }
+      ...
+    }
+> ```
+> 将新增的处理方法，声明在supportedEventType数组中
+```js
+  supportedEventType: [
+    ...
+    'log'
+  ]
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.8.205",
+  "version": "1.8.207",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/App.vue

@@ -114,12 +114,15 @@ export default {
       }
     },
     setMicroAppTheme (themeStore) {
-      let themeScheme = 'dark'
-      if (themeStore && themeStore.themeColor && themeStore.themeScheme) {
-        if (themeStore.themeScheme === 'dark') {
-          themeScheme = 'night'
+      try {
+        let themeScheme = 'dark'
+        if (themeStore && themeStore.themeColor && themeStore.themeScheme) {
+          if (themeStore.themeScheme === 'dark') {
+            themeScheme = 'night'
+          }
+          themeUtil.changeThemeColor(themeStore.themeColor, themeScheme)
         }
-        themeUtil.changeThemeColor(themeStore.themeColor, themeScheme)
+      }catch (e){
       }
     },
     setLanguage (lang) {

package/src/base-client/components/common/LowCodePageRender/editorPageRender.vue

@@ -31,7 +31,7 @@
                 </div>
                 <div style="height: auto; width: 1%;" class="dragDiv" @mousedown="dragStart($event, item.id, page.body)"></div>
               </div>
-              <div :class=" editMode ? 'componentInEditor' : '' " v-else>
+              <div :class=" editMode ? 'componentInEditor' : '' " v-else-if="editMode || (page.type !== 'modal' && page.type !== 'draw')">
                 <component
                   :is="resolveComponentType(item.type, item.id)"
                   :propsData="{...item.props}"
@@ -44,6 +44,48 @@
         </template>
       </a-row>
     </template>
+    <template v-for="(modal, modalIndex) in pageConfig.filter(page => page.type === 'modal')">
+      <a-modal
+        :key="'modalIndex_' + modalIndex"
+        :title="modal.title"
+        :width="modal.width"
+        :dialog-style="{ top: '5rem' }"
+        :visible="modalVisible"
+        :z-index="1003"
+        :maskClosable="false"
+        @cancel="() => { modalVisible = false }"
+        :destroyOnClose="true">
+        <template v-for="(item, itemIndex) in modal.body">
+          <component
+            :key="'modalItem_' + itemIndex"
+            :is="resolveComponentType(item.type)"
+            :propsData="{...item.props, showModalOrDraw: false}"
+            @componentDidMounted="componentDidMounted"
+            @onEvent="handleEvent"
+            :mixinComponentId="item.id"/>
+        </template>
+      </a-modal>
+    </template>
+    <template v-for="(draw, drawIndex) in pageConfig.filter(page => page.type === 'draw')">
+      <a-drawer
+        :key="'drawIndex_' + drawIndex"
+        :title="draw.title"
+        :width="draw.width"
+        :visible="drawVisible"
+        :z-index="1003"
+        @close="() => { drawVisible = false }"
+        :destroyOnClose="true">
+        <template v-for="(item, itemIndex) in draw.body">
+          <component
+            :key="'drawItem_' + itemIndex"
+            :is="resolveComponentType(item.type)"
+            :propsData="{...item.props, showModalOrDraw: false}"
+            @componentDidMounted="componentDidMounted"
+            @onEvent="handleEvent"
+            :mixinComponentId="item.id"/>
+        </template>
+      </a-drawer>
+    </template>
   </div>
 </template>
 
@@ -63,6 +105,14 @@ export default {
     editMode: {
       type: Boolean,
       default: true
+    },
+    showModal: {
+      type: Boolean,
+      default: false
+    },
+    showDraw: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -73,6 +123,8 @@ export default {
       beforeSpanThrough: -1,
       originalSpan: -1,
       nextOriginalSpan: -1,
+      modalVisible: false,
+      drawVisible: false
     }
   },
   inject: [
@@ -166,13 +218,6 @@ export default {
       document.addEventListener('mouseup', dragEnd)
       document.addEventListener('mousemove', onDrag)
     },
-    calcRowSpanTotal (page) {
-      let result = 0
-      page.body.forEach(item => {
-        result += item.span
-      })
-      return result
-    },
     resolveComponentType (type, componentId) {
       switch (type) {
         case 'XFormTable':
@@ -181,6 +226,12 @@ export default {
         //   return XTree
         case 'XTreeOne':
           return allComponents.XTreeOne
+        case 'XAddNativeFormForLowcode':
+          return allComponents.XAddNativeFormModal
+        case 'XAddNativeForm':
+          return allComponents.XAddNativeForm
+        case 'XDescriptions':
+          return allComponents.XDescriptions
       }
     },
     componentDidMounted (vm, id) {
@@ -192,7 +243,9 @@ export default {
           if (item.id === id) {
             const keys = Object.keys(item.props)
             keys.forEach(key => {
-              Vue.set(vm, key, item.props[key])
+              if (item.props[key] !== undefined && item.props[key] !== '') {
+                Vue.set(vm, key, item.props[key])
+              }
             })
           }
         })
@@ -226,33 +279,75 @@ export default {
       let targetComponentId = ''
 
       eventConfigs.forEach(eachEvent => {
-        // 寻找target
-        targetComponentId = eachEvent.target
-        const targetVM = this.componentsMap[targetComponentId]
         lowcodeLog(
           ` 事件数据：${data} \n 目标组件: ${targetComponentId}`,
           '开始遍历执行事件',
           eachEvent.eventName,
           false
         )
-        // 执行
-        // 是否存在js函数
-        if (eachEvent.JSFunction !== undefined && eachEvent.JSFunction !== '') {
+        if (eachEvent.eventType === 'showDraw') {
+          this.drawVisible = true
           lowcodeLog(
-            '发现自定义JS函数，开始执行',
-            '自定义函数',
             undefined,
-            false
+            '打开抽屉',
+            '',
+            false,
+            true
           )
-          // eslint-disable-next-line no-eval
-          const customFunction = eval('(' + eachEvent.JSFunction + ')')
-          const returnValue = customFunction(eachEvent.eventName, data, eachEvent.targetKey, vm, targetVM)
-          targetVM.handleComponentCommunication(returnValue.eventType, returnValue.data, returnValue.targetKey, vm)
-        } else {
-          targetVM.handleComponentCommunication(eachEvent.eventName, data, eachEvent.targetKey, vm)
+        } else if (eachEvent.eventType === 'showModal') {
+          this.modalVisible = true
+          lowcodeLog(
+            undefined,
+            '打开弹窗',
+            '',
+            false,
+            true
+          )
+        } else if (eachEvent.eventType === 'changeProps') {
+          const targetConfig = lowcodeUtils.getComponentConfig(eachEvent.target, this.pageConfig)
+          targetConfig.props[eachEvent.targetKey] = data
+          lowcodeLog(
+            `目标key：${eachEvent.targetKey}，新的值：${data.toString()}`,
+            '修改Props',
+            targetConfig.id,
+            false,
+            true
+          )
+        } else if (eachEvent.eventType === 'changeValue') {
+          // 寻找target
+          targetComponentId = eachEvent.target
+          const targetVM = this.componentsMap[targetComponentId]
+          // 执行
+          // 是否存在js函数
+          if (eachEvent.JSFunction !== undefined && eachEvent.JSFunction !== '') {
+            lowcodeLog(
+              '发现自定义JS函数，开始执行',
+              '自定义函数',
+              undefined,
+              false
+            )
+            // eslint-disable-next-line no-eval
+            const customFunction = eval('(' + eachEvent.JSFunction + ')')
+            const returnValue = customFunction(eachEvent.eventName, data, eachEvent.targetKey, vm, targetVM)
+            targetVM.handleComponentCommunication(returnValue.eventType, returnValue.data, returnValue.targetKey, vm)
+          } else {
+            targetVM.handleComponentCommunication(eachEvent.eventName, data, eachEvent.targetKey, vm)
+          }
         }
       })
     }
+  },
+  watch: {
+    showModal: {
+      handler () {
+        this.modalVisible = !this.modalVisible
+      }
+    },
+    showDraw: {
+      handler () {
+        this.drawVisible = !this.drawVisible
+      }
+    },
   }
 }
 </script>

package/src/base-client/components/common/XAddNativeForm/XAddNativeForm.vue

@@ -72,14 +72,25 @@
 import XFormItem from '@vue2-client/base-client/components/common/XForm/XFormItem'
 import { formatDate } from '@vue2-client/utils/util'
 import { mapState } from 'vuex'
-import { addOrModify, runLogic } from '@vue2-client/services/api/common'
+import { addOrModify, getConfigByName, runLogic } from '@vue2-client/services/api/common'
+import lowcodeComponentMixin from '@vue2-client/utils/lowcode/lowcodeComponentMixin'
 
 export default {
   name: 'XAddNativeForm',
   components: {
     XFormItem
   },
-  props: {},
+  props: {
+    configNameForLowCode: {
+      type: String,
+      default: undefined
+    },
+    systemNameForLowCode: {
+      type: String,
+      default: undefined
+    }
+  },
+  mixins: [lowcodeComponentMixin],
   data () {
     return {
       // 预览模式
@@ -182,6 +193,19 @@ export default {
     },
     ...mapState('account', { currUser: 'user' })
   },
+  mounted () {
+    if (this.configNameForLowCode !== undefined) {
+      getConfigByName(this.configNameForLowCode, this.systemNameForLowCode, (res) => {
+        this.init({
+          formItems: res.formJson,
+          title: this.modalTitle,
+          businessType: this.businessType,
+          layout: res.xAddFormLayout,
+          isKeyHandle: res.isKeyHandle
+        })
+      })
+    }
+  },
   methods: {
     init (params) {
       const {
@@ -536,6 +560,18 @@ export default {
         }
       }
     }
+  },
+  watch: {
+    configNameForLowCode: {
+      handler () {
+        this.init()
+      }
+    },
+    systemNameForLowCode: {
+      handler () {
+        this.init()
+      }
+    },
   }
 }
 </script>

package/src/base-client/components/common/XAddNativeForm/lowcodeEditorRegister.js

@@ -0,0 +1,12 @@
+export const XAddNativeFormConfig = {
+  type: 'XAddNativeForm',
+  properties: {
+    configNameForLowCode: {
+      type: 'string'
+    },
+    systemNameForLowCode: {
+      type: 'string'
+    }
+  },
+  selfEvent: ['onSubmit']
+}