vue2-client 1.8.259 → 1.8.261

package/docs/lowcodeForDeveloper.md

@@ -1,192 +1,200 @@
-# 奥枫低代码平台 —— 开发篇
-
-> 低代码平台在使用时分为两个大部分
->
-> 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的定义
-> 4. 暴露data
-
-#### 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}
-
-
-
-#### 暴露data
-
-> 组件经常会改变自身的状态，在低代码平台中，组件在交互时，会用到很多其他组件的状态
->
-> 比如在XFormTable中，点击了一条信息，弹出一个弹框。在这个弹框编辑完成的时候，我希望给XFormTable点击的那条信息新增几个属性。这个时候就需要在XFormTable点击的时候，就将id保存下来。但我们又不能将这个属性保存为低代码平台全局属性，因为那样会加大日后排查问题的难度
->
-> 所以需要每个组件，把自身会被调用的属性自己定义，自己暴露给外界
-
-> 组件在引入了mixin之后，会携带一个属性
->
-> 这个属性就是会暴露给外界的属性，dataForLowCode
-
-> **实现方法**
->
-> 1. 直接修改属性
->
->    直接修改本组件的dataForLowCode即可
->
-> 2. 调用方法
->
->    调用$lowCodeSetData（key, value）方法
->
-> 3. 在emit时自动保存
->
->    在emit时，大概率是要向外界传递参数的，所以我们在$lowCodeEmit方法中，将emit的数据直接保存在了dataForLowCode中，它的key为emit的事件名
-
-
-
-## 功能新增
-
-### 事件处理新增
-> 在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',
+      label: '查询配置名',
+      desc: '在琉璃CRUD表单中配置好的查询配置名'
+    }
+  },
+  selfEvent: ['action']
+}
+```
+
+> `type`
+>
+> 该字段用于描述本组件使用渲染器的类型，如type: '111'
+> 这个组件就会去找名称为'111'的渲染器，来将配置渲染为页面
+
+> `properties`
+>
+> 该字段用于描述本组件右侧属性编辑栏中，可以展示哪些属性供编辑，
+> 通常所有的props都需要在这里声明
+>
+> 每一个properties含有三个属性
+>
+> * type：为其指定类型
+> * label：用于给用户展示该属性的中文名
+> * desc：用户将鼠标放在标题上显示该属性的描述
+
+> `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的定义
+> 4. 暴露data
+
+#### 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}
+
+
+
+#### 暴露data
+
+> 组件经常会改变自身的状态，在低代码平台中，组件在交互时，会用到很多其他组件的状态
+>
+> 比如在XFormTable中，点击了一条信息，弹出一个弹框。在这个弹框编辑完成的时候，我希望给XFormTable点击的那条信息新增几个属性。这个时候就需要在XFormTable点击的时候，就将id保存下来。但我们又不能将这个属性保存为低代码平台全局属性，因为那样会加大日后排查问题的难度
+>
+> 所以需要每个组件，把自身会被调用的属性自己定义，自己暴露给外界
+
+> 组件在引入了mixin之后，会携带一个属性
+>
+> 这个属性就是会暴露给外界的属性，dataForLowCode
+
+> **实现方法**
+>
+> 1. 直接修改属性
+>
+>    直接修改本组件的dataForLowCode即可
+>
+> 2. 调用方法
+>
+>    调用$lowCodeSetData（key, value）方法
+>
+> 3. 在emit时自动保存
+>
+>    在emit时，大概率是要向外界传递参数的，所以我们在$lowCodeEmit方法中，将emit的数据直接保存在了dataForLowCode中，它的key为emit的事件名
+
+
+
+## 功能新增
+
+### 事件处理新增
+> 在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/index.js

@@ -1,31 +1,31 @@
-import Vue from 'vue'
-import { initRouter } from '@vue2-client/router/index.js'
-import { initI18n } from '@vue2-client/utils/i18n'
-import bootstrap from '@vue2-client/bootstrap'
-import { modules } from '@vue2-client/store'
-import '@vue2-client/theme/index.less'
-import '@vue2-client/utils/filter'
-import 'animate.css/source/animate.css'
-import 'moment/locale/zh-cn'
-import Antd from 'ant-design-vue'
-import Viser from 'viser-vue'
-// 插件
-import Plugins from '@vue2-client/base-client/plugins'
-
-const routerOptions = initRouter()
-const i18n = initI18n('CN', 'US')
-
-Vue.use(Antd)
-Vue.use(Viser)
-Vue.use(Plugins)
-
-Vue.config.productionTip = false
-const message = Vue.prototype.$message
-
-export {
-  routerOptions,
-  modules,
-  i18n,
-  message,
-  bootstrap
-}
+import Vue from 'vue'
+import { initRouter } from '@vue2-client/router/index.js'
+import { initI18n } from '@vue2-client/utils/i18n'
+import bootstrap from '@vue2-client/bootstrap'
+import { modules } from '@vue2-client/store'
+import '@vue2-client/theme/index.less'
+import '@vue2-client/utils/filter'
+import 'animate.css/source/animate.css'
+import 'moment/locale/zh-cn'
+import Antd from 'ant-design-vue'
+import Viser from 'viser-vue'
+// 插件
+import Plugins from '@vue2-client/base-client/plugins'
+
+const routerOptions = initRouter()
+const i18n = initI18n('CN', 'US')
+
+Vue.use(Antd)
+Vue.use(Viser)
+Vue.use(Plugins)
+
+Vue.config.productionTip = false
+const message = Vue.prototype.$message
+
+export {
+  routerOptions,
+  modules,
+  i18n,
+  message,
+  bootstrap
+}

package/jest-transform-stub.js

@@ -1,8 +1,8 @@
-module.exports = {
-    process () {
-      return 'module.exports = {};'
-    },
-    getCacheKey () {
-      return 'lessTransform'
-    },
-  }
+module.exports = {
+    process () {
+      return 'module.exports = {};'
+    },
+    getCacheKey () {
+      return 'lessTransform'
+    },
+  }

package/jest.config.js

@@ -1,21 +1,21 @@
-const path = require('path')
-require('dotenv').config({ path: path.resolve(__dirname, '.env') })
-
-module.exports = {
-    setupFiles: ['<rootDir>/jest.setup.js'],
-    moduleNameMapper: {
-      '^@vue2-client/(.*)$': '<rootDir>/src/$1',
-      '\\.(css|less)$': 'identity-obj-proxy',
-    },
-    moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'node', 'vue'], // 注意 'vue' 在这里
-    testEnvironment: 'jsdom',
-    transform: {
-      '^.+\\.js$': 'babel-jest',
-      '^.+\\.vue$': 'vue-jest',
-      '^.+\\.less$': 'jest-transform-stub', // 添加这一行
-    },
-    transformIgnorePatterns: [
-      '/node_modules/(?!ant-design-vue)',
-    ]
-    // 其他 Jest 配置项...
-  }
+const path = require('path')
+require('dotenv').config({ path: path.resolve(__dirname, '.env') })
+
+module.exports = {
+    setupFiles: ['<rootDir>/jest.setup.js'],
+    moduleNameMapper: {
+      '^@vue2-client/(.*)$': '<rootDir>/src/$1',
+      '\\.(css|less)$': 'identity-obj-proxy',
+    },
+    moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'node', 'vue'], // 注意 'vue' 在这里
+    testEnvironment: 'jsdom',
+    transform: {
+      '^.+\\.js$': 'babel-jest',
+      '^.+\\.vue$': 'vue-jest',
+      '^.+\\.less$': 'jest-transform-stub', // 添加这一行
+    },
+    transformIgnorePatterns: [
+      '/node_modules/(?!ant-design-vue)',
+    ]
+    // 其他 Jest 配置项...
+  }

package/jest.setup.js

@@ -1,7 +1,7 @@
-global.matchMedia = global.matchMedia || function () {
-  return {
-    matches: false,
-    addListener: function () {},
-    removeListener: function () {}
-  }
-}
+global.matchMedia = global.matchMedia || function () {
+  return {
+    matches: false,
+    addListener: function () {},
+    removeListener: function () {}
+  }
+}