vue2-client 1.8.195 → 1.8.197

package/docs/lowcode.md

@@ -0,0 +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'
+  ]
+```

package/package.json

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

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

@@ -11,7 +11,7 @@ export default {
   props: {
     config: {
       type: Array,
-      require: true
+      required: true
     }
   },
   provide () {

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

@@ -164,12 +164,20 @@ export default {
       })
     },
     formItemLayout () {
-      return this.layout === 'horizontal'
-        ? {
+      if (this.layout === 'horizontal') {
+        return {
           labelCol: { span: 4, offset: 2 },
           wrapperCol: { span: 14 },
         }
-        : {}
+      }
+      if (this.layout === 'vertical') {
+        return {
+        }
+      }
+      return {
+        labelCol: { span: 8 },
+        wrapperCol: { span: 16 },
+      }
     },
     ...mapState('account', { currUser: 'user' })
   },
@@ -521,3 +529,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+:deep(.ant-form-inline .ant-form-item ){
+  display: block !important;
+}
+</style>

package/src/base-client/components/common/XForm/XFormItem.vue

@@ -246,38 +246,41 @@
     </a-form-model-item>
   </x-form-col>
   <!-- 文本域 -->
-  <x-form-col
+  <a-col
     v-else-if="attr.type === 'textarea'"
-    :flex="{
-      xs: 24,
-      sm: 24,
-      md: 24,
-      lg: 24,
-      xl: 24,
-      xxl: 24
-    }">
+    :style="layout === 'inline'?{width:'calc(100% - 60px)'}:{}"
+    :xs="24"
+    :sm="24"
+    :md="24"
+    :lg="24"
+    :xl="24"
+    :xxl="24">
     <a-form-model-item
+      :labelCol="layout === 'inline'?{span:2}:undefined"
       :ref="attr.model"
       :label="attr.name"
       :prop="attr.prop ? attr.prop : attr.model">
       <a-textarea v-model="form[attr.model]" :disabled="disabled" :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')" :rows="4"/>
     </a-form-model-item>
-  </x-form-col>
+  </a-col>
   <!-- 文件上传 -->
-  <x-form-col
+  <a-col
     v-else-if="attr.type === 'file' || attr.type === 'image'"
-    :flex="{
-      xs: 24,
-      sm: 24,
-      md: 24,
-      lg: 24,
-      xl: 24,
-      xxl: 24
-    }">
-    <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.prop ? attr.prop : attr.model">
+    :style="layout === 'inline'?{width:'calc(100% - 60px)'}:{}"
+    :xs="24"
+    :sm="24"
+    :md="24"
+    :lg="24"
+    :xl="24"
+    :xxl="24">
+    <a-form-model-item
+      :labelCol="layout === 'inline'?{span:2}:undefined"
+      :ref="attr.model"
+      :label="attr.name"
+      :prop="attr.prop ? attr.prop : attr.model">
       <upload :files="files" :images="images" :model="attr" :service-name="serviceName" @setFiles="setFiles"></upload>
     </a-form-model-item>
-  </x-form-col>
+  </a-col>
   <!-- 省市区选择框 -->
   <x-form-col
     v-else-if="attr.type === 'citySelect'"
@@ -442,14 +445,27 @@ export default {
   },
   methods: {
     init () {
-      if (this.mode === '新增/修改' && !this.attr.flex && this.layout === 'horizontal') {
-        this.attr.flex = {
-          xs: 24,
-          sm: 24,
-          md: 24,
-          lg: 24,
-          xl: 24,
-          xxl: 24
+      if (this.mode === '新增/修改' && !this.attr.flex) {
+        if (['horizontal', 'vertical'].includes(this.layout)) {
+          // 新增修改表单 horizontal 模式下默认为一行
+          this.attr.flex = {
+            xs: 24,
+            sm: 24,
+            md: 24,
+            lg: 24,
+            xl: 24,
+            xxl: 24
+          }
+        } else {
+          // 新增修改表单 vertical 模式下默认为1列
+          this.attr.flex = {
+            xs: 24,
+            sm: 24,
+            md: 24,
+            lg: 12,
+            xl: 8,
+            xxl: 8
+          }
         }
       }
       if (this.attr.keyName && this.attr.keyName.indexOf('logic@') !== -1) {

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

@@ -338,6 +338,7 @@ export default {
      */
     action (record, id, actionType, fun = 'action') {
       this.$emit(fun, record, id, actionType)
+      this.$lowCodeEmit('action', record)
     },
     treeOnChecked (checkedKeys, deepNodes, deepKeys) {
       this.$emit('treeOnChecked', checkedKeys, deepNodes, deepKeys)
@@ -359,6 +360,7 @@ export default {
         serviceName: this.serviceName,
         fixedAddForm: this.fixedAddForm,
         getDataParams: this.getDataParams,
+        layout: res.xAddFormLayout || 'horizontal',
         env: this.env
       })
     },
@@ -381,6 +383,7 @@ export default {
         fixedAddForm: this.fixedAddForm,
         getDataParams: this.getDataParams,
         modifyModelData: modifyModelData,
+        layout: res.xAddFormLayout || 'horizontal',
         env: this.env
       })
     },

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

@@ -5,5 +5,5 @@ export const XFormTableConfig = {
       type: 'string'
     }
   },
-  selfEvent: ['action', '2222']
+  selfEvent: ['action']
 }

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

@@ -97,7 +97,7 @@
       },
       onSelect (selectedKeys, e) {
         this.$emit('onSelect', selectedKeys, e)
-        this.handleComponentEmit('onChange', selectedKeys[0])
+        this.$lowCodeEmit('onChange', selectedKeys[0])
       }
     }
   }

package/src/pages/lowCode/lowCodeEditor.vue

@@ -38,7 +38,7 @@
               组件容器
             </a-card-grid>
             <template v-for="(item, index) in getRegisteredComponents()">
-              <a-card-grid style="width: 50%;text-align: center" :key="index" class="ui-item" @click="addComponentToContainer(item)">
+              <a-card-grid style="width: 50%;text-align: center;overflow-wrap: break-word;padding: 7%" :key="index" class="ui-item" @click="addComponentToContainer(item)">
                 {{ item }}
               </a-card-grid>
             </template>
@@ -58,11 +58,14 @@
         </a-col>
         <!--    右侧属性面板    -->
         <a-col :span="5">
-          <a-card :title="editorPropertiesConfig.id ? editorPropertiesConfig.id : ''">
+          <a-card>
             <template v-if="editorPropertiesConfig === 'unregistered'">
               <p>所选组件并未注册</p>
             </template>
             <template v-else>
+              <div v-if="editorPropertiesConfig.id">
+                <a-statistic title="组件ID" :value="editorPropertiesConfig.id" valueStyle="font-size: 1.2em"/>
+              </div>
               <!--    切换    -->
               <a-menu v-model="editorPanelCurrent" mode="horizontal" @click="handelEditorPanelTitleClick">
                 <a-menu-item key="properties">属性</a-menu-item>
@@ -108,6 +111,9 @@
                 <a-button v-if="editorPropertiesConfig.id !== undefined" @click="addEvent">添加事件</a-button>
                 <p v-else>您未选择任何组件</p>
               </div>
+              <div style="margin-top: 5%" v-if="editorPropertiesConfig.id !== undefined">
+                <a-button type="danger" @click="deleteComponent">删除组件</a-button>
+              </div>
             </template>
           </a-card>
         </a-col>
@@ -149,13 +155,13 @@
         <!--    目标组件执行事件名    -->
         <a-form-item label="目标组件执行事件名">
           <a-select @change="handleEventEditorTargetEventTypeChange" :default-value="eventEditorContent.eventName">
-            <a-select-option value="changeValue">
-              changeValue
+            <a-select-option :value="eventType" v-for="(eventType,eventTypeIndex) in supportedEventType" :key="'eventType_' + eventTypeIndex">
+              {{ eventType }}
             </a-select-option>
           </a-select>
         </a-form-item>
         <!--    目标组件修改值对应的key    -->
-        <a-form-item label="目标组件修改值对应的key">
+        <a-form-item label="目标组件修改值对应的key" v-if="eventEditorContent.eventName === 'changeValue'">
           <a-input v-model="eventEditorContent.targetKey"/>
         </a-form-item>
         <!--    自定义JS方法    -->
@@ -211,6 +217,9 @@ import * as registeredRender from '@vue2-client/utils/lowcode/registerComponentF
 import * as lowcodeUtils from '@vue2-client/utils/lowcode/lowcodeUtils'
 import codeMirror from '@vue2-client/components/CodeMirror/inedx.vue'
 import { nanoid } from 'nanoid'
+import lowcodeComponentMixin from '@vue2-client/utils/lowcode/lowcodeComponentMixin'
+// eslint-disable-next-line no-unused-vars
+import lowcodeLog from '@vue2-client/utils/lowcode/lowcodeLog'
 
 export default {
   components: {
@@ -269,7 +278,8 @@ export default {
       renderPreview: true,
       editorPanelCurrent: ['properties'],
       eventEditorContent: {},
-      eventEditorCurrent: undefined
+      eventEditorCurrent: undefined,
+      supportedEventType: undefined
     }
   },
   provide () {
@@ -278,6 +288,24 @@ export default {
     }
   },
   methods: {
+    deleteComponent () {
+      this.config.forEach(page => {
+        for (let i = 0; i < page.body.length; i++) {
+          if (page.body[i].id === this.editorPropertiesConfig.id) {
+            const deletedSpan = page.body[i].span
+            page.body.splice(i, 1)
+            if (i !== 0) {
+              page.body[i - 1].span += deletedSpan
+            }
+            delete this.$children[0]._provided.componentsMap[this.editorPropertiesConfig.id]
+            this.targetContainer = undefined
+            this.editorPropertiesConfig = {}
+            lowcodeUtils.configPageRemoveIfIsNull(this.config)
+            return
+          }
+        }
+      })
+    },
     openEventJSEditor () {
       if (!this.eventEditorContent.JSFunction) {
         this.eventEditorContent.JSFunction = 'function(eventType, data, targetKey, sourceVM, targetVM) {\n  \n  return {\n    "eventType": eventType,\n    "data": data,\n    "targetKey": targetKey\n  }\n}'
@@ -333,11 +361,13 @@ export default {
         }
       }
       target.body.splice(targetIndex, 1)
+      this.targetContainer = undefined
       if (target.body.length === 0) {
         this.config.splice(pageIndex, 1)
       } else if (target.body.length === 1) {
         target.body[0].span = 24
       }
+      lowcodeUtils.configPageRemoveIfIsNull(this.config)
     },
     handleEventEditorOk () {
       if (this.eventEditorCurrent) {
@@ -383,6 +413,7 @@ export default {
     },
     handleEventEditorTargetEventTypeChange (type) {
       this.eventEditorContent.eventName = type
+      this.$forceUpdate()
     },
     handleJSEventEditorOk () {
       this.showJSEventEditor = false
@@ -399,16 +430,18 @@ export default {
               {
                 span: 24,
                 type: type,
-                id: type + '_' + nanoid(),
+                id: type + '_' + nanoid(6),
               }
             ]
           })
+        } else {
+          this.$message.error('单组件页面只可以存在一个组件，如需多个组件请先添加组件容器！')
         }
         return
       }
       const target = lowcodeUtils.getComponentConfig(this.targetContainer.id, this.config)
       target.type = type
-      target.id = target.type + '_' + nanoid()
+      target.id = target.type + '_' + nanoid(6)
     },
     handleWidthChange (id, type, pageIndex) {
       const target = lowcodeUtils.getComponentConfig(id, this.config)
@@ -430,12 +463,12 @@ export default {
             {
               type: 'container',
               span: 12,
-              id: 'container_' + nanoid()
+              id: 'container_' + nanoid(6)
             },
             {
               type: 'container',
               span: 12,
-              id: 'container_' + nanoid()
+              id: 'container_' + nanoid(6)
             }
           ]
         })
@@ -456,11 +489,11 @@ export default {
         this.config[targetPageIndex].body.splice(targetIndex, 1, {
           type: 'container',
           span: Math.floor(maxWidth / 2),
-          id: 'container_' + nanoid()
+          id: 'container_' + nanoid(6)
         }, {
           type: 'container',
           span: Math.ceil(maxWidth / 2),
-          id: 'container_' + nanoid()
+          id: 'container_' + nanoid(6)
         })
       }
     },
@@ -551,10 +584,12 @@ export default {
       console.warn('map', this.$children[0]._provided.componentsMap)
     },
     exportConfig () {
+      console.warn('导出', this.config)
       this.$emit('exportConfig', this.config)
     }
   },
   mounted () {
+    this.supportedEventType = [...lowcodeComponentMixin.supportedEventType]
     this.config = JSON.parse(JSON.stringify(this.originalConfig))
   }
 }

package/src/utils/lowcode/lowcodeComponentMixin.js

@@ -25,8 +25,16 @@ export default {
       switch (actionType) {
         case 'changeValue':
           this.handleComponentChangeValue(data, targetKey)
+          break
+        case 'log':
+          this.handleComponentLog(data)
+          break
       }
     },
+    handleComponentLog (data) {
+      console.warn('vm', this)
+      console.warn('data', data)
+    },
     handleComponentChangeValue (data, targetKey = undefined) {
       if (targetKey) {
         this[targetKey] = data
@@ -39,11 +47,15 @@ export default {
       })
     },
     // 处理本组件发出的事件
-    handleComponentEmit (eventType, data) {
+    $lowCodeEmit (eventType, data) {
       this.$emit('onEvent', data, eventType, this.mixinComponentId)
     }
   },
   mounted () {
     this.$emit('componentDidMounted', this, this.mixinComponentId)
-  }
+  },
+  supportedEventType: [
+    'changeValue',
+    'log'
+  ],
 }

package/src/utils/lowcode/lowcodeUtils.js

@@ -41,3 +41,11 @@ export function getComponentConfigPageIndex (componentId, config) {
     }
   }
 }
+
+export function configPageRemoveIfIsNull (config) {
+  for (let i = 0; i < config.length; i++) {
+    if (config[i].body.length === 0) {
+      config.splice(i, 1)
+    }
+  }
+}

package/src/base-client/plugins/lowcodeUtils/lowcodeComponentMixin.js

@@ -1,49 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-import Vue from 'vue'
-import lowcodeLog from '@/utils/lowcode/lowcodeLog'
-export default {
-  props: {
-    mixinComponentId: {
-      type: String,
-      required: true
-    },
-    propsData: {
-      type: Object,
-      default: {}
-    }
-  },
-  methods: {
-    // 处理目标为本组件的通信
-    handleComponentCommunication (actionType, data, targetKey = undefined, eventOriginalVM = undefined) {
-      lowcodeLog(
-        ` 事件数据：${data},\n 目标key：${targetKey}`,
-        '响应组件接收到事件',
-        actionType,
-        false,
-        true
-      )
-      switch (actionType) {
-        case 'changeValue':
-          this.handleComponentChangeValue(data, targetKey)
-      }
-    },
-    handleComponentChangeValue (data, targetKey = undefined) {
-      if (targetKey) {
-        this[targetKey] = data
-        return
-      }
-
-      const keys = Object.keys(data)
-      keys.forEach(key => {
-        this[key] = data[key]
-      })
-    },
-    // 处理本组件发出的事件
-    handleComponentEmit (eventType, data) {
-      this.$emit('onEvent', data, eventType, this.mixinComponentId)
-    }
-  },
-  mounted () {
-    this.$emit('componentDidMounted', this, this.mixinComponentId)
-  }
-}

package/src/base-client/plugins/lowcodeUtils/lowcodeLog.js

@@ -1,29 +0,0 @@
-const banner = `
-        _____         .__                                 .___
-_____ _/ ____\\        |  |   ______  _  __ ____  ____   __| _/____
-\\__  \\\\   __\\  ______ |  |  /  _ \\ \\/ \\/ // ___\\/  _ \\ / __ |/ __ \\
- / __ \\|  |   /_____/ |  |_(  <_> )     /\\  \\__(  <_> ) /_/ \\  ___/
-(____  /__|           |____/\\____/ \\/\\_/  \\___  >____/\\____ |\\___  >
-     \\/                                       \\/           \\/    \\/
-`
-
-const end = '========事件处理结束========'
-
-const styleTitle1 = ` font-size: 20px; font-weight: 600; color: rgb(244,167,89); `
-const styleTitle2 = ` font-style: oblique; font-size:14px; color: rgb(244,167,89); font-weight: 400; `
-const styleContent = ` color:rgb(30,152,255);margin-top:15px `
-
-export default function lowcodeLog (content, title1 = '', title2 = '', withBanner = false, withEnd = false) {
-  if (withBanner) {
-    console.log(banner)
-  }
-  console.log(
-    `%c${title1} %c${title2} %c${content}`,
-    styleTitle1,
-    styleTitle2,
-    styleContent
-  )
-  if (withEnd) {
-    console.log(`%c${end}`, styleTitle1)
-  }
-}

package/src/base-client/plugins/lowcodeUtils/lowcodeUtils.js

@@ -1,43 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-import * as registeredConfig from './registerComponentForEditor'
-export function getEditorConfigById (componentId, config) {
-  for (let i = 0; i < config.length; i++) {
-    for (let j = 0; j < config[i].body.length; j++) {
-      if (config[i].body[j].id === componentId) {
-        return getEditorConfigByType(config[i].body[j].type)
-      }
-    }
-  }
-  return undefined
-}
-
-export function getEditorConfigByType (componentType) {
-  let result
-  const registeredConfigKeys = Object.keys(registeredConfig)
-  registeredConfigKeys.forEach(key => {
-    if (registeredConfig[key].type === componentType) {
-      result = registeredConfig[key]
-    }
-  })
-  return result
-}
-
-export function getComponentConfig (componentId, config) {
-  for (let i = 0; i < config.length; i++) {
-    for (let j = 0; j < config[i].body.length; j++) {
-      if (config[i].body[j].id === componentId) {
-        return config[i].body[j]
-      }
-    }
-  }
-}
-
-export function getComponentConfigPageIndex (componentId, config) {
-  for (let i = 0; i < config.length; i++) {
-    for (let j = 0; j < config[i].body.length; j++) {
-      if (config[i].body[j].id === componentId) {
-        return i
-      }
-    }
-  }
-}

package/src/base-client/plugins/lowcodeUtils/registerComponentForEditor.js

@@ -1,7 +0,0 @@
-import { XFormTableConfig } from '@/base-client/components/common/XFormTable/lowcodeEditorRegister'
-import { XTreeOneConfig } from '@/base-client/components/common/XTreeOne/lowcodeEditorRegister'
-
-export {
-  XFormTableConfig,
-  XTreeOneConfig
-}

package/src/base-client/plugins/lowcodeUtils/registerComponentForRender.js

@@ -1,7 +0,0 @@
-import XFormTable from '@/base-client/components/common/XFormTable/XFormTable.vue'
-import XTreeOne from '@/base-client/components/common/XTreeOne/XTreeOne.vue'
-
-export {
-  XFormTable,
-  XTreeOne
-}