vue2-client 1.8.215 → 1.8.217

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.215",
+  "version": "1.8.217",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/LowCodeComponent/LowCodePageOrganization.vue

@@ -1,138 +1,138 @@
-<template>
-  <div>
-    <a-button @click="addComponent">添加组件</a-button>
-    <a-tree
-      @select="handleTreeSelect"
-      :tree-data="treeData"/>
-    <!--  新增组件弹框  -->
-    <a-modal
-      title="新增组件"
-      width="60%"
-      :z-index="1001"
-      :destroyOnClose="true"
-      @ok="handleModalOk"
-      @cancel="() => { showModal = false }"
-      :visible="showModal">
-      <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 12 }">
-        <!--    容器类型    -->
-        <a-form-item label="容器类型">
-          <a-select v-model="addComponentTemp.type" @change="componentTypeChange">
-            <a-select-option value="page">
-              页面
-            </a-select-option>
-            <a-select-option value="modal">
-              弹框
-            </a-select-option>
-            <a-select-option value="draw">
-              抽屉
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <template v-if="addComponentTemp.type !== 'page'">
-          <!--    标题    -->
-          <a-form-item label="标题">
-            <a-input v-model="addComponentTemp.title"/>
-          </a-form-item>
-          <!--    宽度    -->
-          <a-form-item label="宽度">
-            <a-input v-model="addComponentTemp.width"/>
-          </a-form-item>
-        </template>
-      </a-form>
-    </a-modal>
-  </div>
-</template>
-
-<script>
-import { nanoid } from 'nanoid'
-export default {
-  props: {
-    config: {
-      type: Object,
-      required: true
-    }
-  },
-  methods: {
-    // 处理架构树点击事件
-    handleTreeSelect (value) {
-      // 如果类型为string，证明点到的是组件
-      if (typeof value[0] === 'string') {
-        this.config.page.forEach(page => {
-          page.body.forEach(item => {
-            if (item.id === value[0]) {
-              this.$emit('treeOrganizationClick', item.id, 'component')
-            }
-          })
-        })
-        // 如果类型为number，证明点到的是容器
-      } else if (typeof value[0] === 'number') {
-        const target = this.treeData[value].title
-        const pageId = target.slice(target.length - 3, target.length - 1)
-        this.$emit('treeOrganizationClick', pageId, 'page')
-      }
-    },
-    addComponent () {
-      this.addComponentTemp = { type: 'page' }
-      this.showModal = true
-    },
-    handleModalOk () {
-      const result = {
-        id: nanoid(2),
-        type: this.addComponentTemp.type,
-        title: this.addComponentTemp.title,
-        width: this.addComponentTemp.width,
-        body: []
-      }
-      this.addComponentTemp = { type: 'page' }
-      this.$emit('addComponent', result)
-    },
-    componentTypeChange (value) {
-      if (value !== 'page') {
-        this.addComponentTemp = { width: '70%', type: value }
-      } else {
-        this.addComponentTemp = { type: value }
-      }
-    },
-    determinePageType (type) {
-      switch (type) {
-        case 'page':
-          return '页面'
-        case 'modal':
-          return '弹框'
-        case 'draw':
-          return '抽屉'
-      }
-    },
-  },
-  mounted () {
-    // 从配置中，抽取组件，初始化成树的格式
-    for (let i = 0; i < this.config.page.length; i++) {
-      const page = this.config.page[i]
-      this.treeData.push({
-        title: this.determinePageType(page.type) + '[' + page.id + ']',
-        key: i,
-        children: []
-      })
-      for (let j = 0; j < page.body.length; j++) {
-        const item = page.body[j]
-        this.treeData[i].children.push({
-          title: item.id,
-          key: item.id,
-          children: []
-        })
-      }
-    }
-  },
-  data () {
-    return {
-      treeData: [],
-      showModal: false,
-      addComponentTemp: { type: 'page' }
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-
-</style>
+<template>
+  <div>
+    <a-button @click="addComponent">添加组件</a-button>
+    <a-tree
+      @select="handleTreeSelect"
+      :tree-data="treeData"/>
+    <!--  新增组件弹框  -->
+    <a-modal
+      title="新增组件"
+      width="60%"
+      :z-index="1001"
+      :destroyOnClose="true"
+      @ok="handleModalOk"
+      @cancel="() => { showModal = false }"
+      :visible="showModal">
+      <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 12 }">
+        <!--    容器类型    -->
+        <a-form-item label="容器类型">
+          <a-select v-model="addComponentTemp.type" @change="componentTypeChange">
+            <a-select-option value="page">
+              页面
+            </a-select-option>
+            <a-select-option value="modal">
+              弹框
+            </a-select-option>
+            <a-select-option value="draw">
+              抽屉
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <template v-if="addComponentTemp.type !== 'page'">
+          <!--    标题    -->
+          <a-form-item label="标题">
+            <a-input v-model="addComponentTemp.title"/>
+          </a-form-item>
+          <!--    宽度    -->
+          <a-form-item label="宽度">
+            <a-input v-model="addComponentTemp.width"/>
+          </a-form-item>
+        </template>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { nanoid } from 'nanoid'
+export default {
+  props: {
+    config: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    // 处理架构树点击事件
+    handleTreeSelect (value) {
+      // 如果类型为string，证明点到的是组件
+      if (typeof value[0] === 'string') {
+        this.config.page.forEach(page => {
+          page.body.forEach(item => {
+            if (item.id === value[0]) {
+              this.$emit('treeOrganizationClick', item.id, 'component')
+            }
+          })
+        })
+        // 如果类型为number，证明点到的是容器
+      } else if (typeof value[0] === 'number') {
+        const target = this.treeData[value].title
+        const pageId = target.slice(target.length - 3, target.length - 1)
+        this.$emit('treeOrganizationClick', pageId, 'page')
+      }
+    },
+    addComponent () {
+      this.addComponentTemp = { type: 'page' }
+      this.showModal = true
+    },
+    handleModalOk () {
+      const result = {
+        id: nanoid(2),
+        type: this.addComponentTemp.type,
+        title: this.addComponentTemp.title,
+        width: this.addComponentTemp.width,
+        body: []
+      }
+      this.addComponentTemp = { type: 'page' }
+      this.$emit('addComponent', result)
+    },
+    componentTypeChange (value) {
+      if (value !== 'page') {
+        this.addComponentTemp = { width: '70%', type: value }
+      } else {
+        this.addComponentTemp = { type: value }
+      }
+    },
+    determinePageType (type) {
+      switch (type) {
+        case 'page':
+          return '页面'
+        case 'modal':
+          return '弹框'
+        case 'draw':
+          return '抽屉'
+      }
+    },
+  },
+  mounted () {
+    // 从配置中，抽取组件，初始化成树的格式
+    for (let i = 0; i < this.config.page.length; i++) {
+      const page = this.config.page[i]
+      this.treeData.push({
+        title: this.determinePageType(page.type) + '[' + page.id + ']',
+        key: i,
+        children: []
+      })
+      for (let j = 0; j < page.body.length; j++) {
+        const item = page.body[j]
+        this.treeData[i].children.push({
+          title: item.id,
+          key: item.id,
+          children: []
+        })
+      }
+    }
+  },
+  data () {
+    return {
+      treeData: [],
+      showModal: false,
+      addComponentTemp: { type: 'page' }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

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

@@ -1,8 +1,16 @@
 <template>
   <div>
+    <a-upload
+      v-if="uploadStyle === 'simple'"
+      :accept="model.accept?.join('')"
+      :customRequest="uploadFiles"
+      :file-list="uploadedFileList"
+      :remove="deleteFileItem">
+      <a-button style="margin-top: 2%"> <a-icon type="upload" /> 上传 </a-button>
+    </a-upload>
     <a-upload-dragger
-      v-if="model.type === 'file'"
-      :accept="model.accept.join('')"
+      v-else-if="model.type === 'file'"
+      :accept="model.accept?.join('')"
       :customRequest="uploadFiles"
       :file-list="uploadedFileList"
       :multiple="true"
@@ -18,30 +26,18 @@
         支持单个或多个文件
       </p>
     </a-upload-dragger>
-    <template v-if="uploadStyle === 'simple'">
-      <a-upload
-        v-if=" model.type === 'image'"
-        :accept="model.accept.join('')"
-        :customRequest="uploadFiles"
-        :file-list="uploadedFileList"
-        :remove="deleteFileItem">
-        <a-button style="margin-top: 2%"> <a-icon type="upload" /> 上传 </a-button>
-      </a-upload>
-    </template>
-    <template v-else>
-      <a-upload
-        v-if=" model.type === 'image'"
-        :accept="model.accept.join('')"
-        :customRequest="uploadFiles"
-        :file-list="uploadedFileList"
-        :remove="deleteFileItem"
-        list-type="picture-card">
-        <a-icon type="plus"/>
-        <div class="ant-upload-text">
-          Upload
-        </div>
-      </a-upload>
-    </template>
+    <a-upload
+      v-else
+      :accept="model.accept?.join('')"
+      :customRequest="uploadFiles"
+      :file-list="uploadedFileList"
+      :remove="deleteFileItem"
+      list-type="picture-card">
+      <a-icon type="plus"/>
+      <div class="ant-upload-text">
+        Upload
+      </div>
+    </a-upload>
   </div>
 </template>