vue2-client 1.8.214 → 1.8.216

package/package.json

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

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

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <!--  实时预览  -->
+    <json-viewer
+      :copyable="{copyText: '复制', copiedText: '已复制'}"
+      :expand-depth="parseInt('100')"
+      :value="globalVariable"
+      style="overflow: auto;max-height: 440px"></json-viewer>
+    <a-button @click="addVariable">添加变量</a-button>
+    <!--  添加变量弹框  -->
+    <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 }">
+        <!--    key    -->
+        <a-form-item label="定义Key">
+          <a-input v-model="defineKey"/>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import JsonViewer from 'vue-json-viewer'
+export default {
+  components: {
+    JsonViewer
+  },
+  props: {
+    globalVariable: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      showModal: false,
+      defineKey: ''
+    }
+  },
+  methods: {
+    addVariable () {
+      this.defineKey = ''
+      this.showModal = true
+    },
+    handleModalOk () {
+      this.$emit('addVariable', this.defineKey)
+      this.defineKey = ''
+      this.showModal = false
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

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

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

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

@@ -1,7 +1,8 @@
 <template>
   <div>
-    <template v-for="(page,pageIndex) in pageConfig">
+    <template v-for="(page,pageIndex) in pageConfig.page">
       <a-row :key="pageIndex">
+        <!--   拖拽时显示宽度   -->
         <template v-if="showDragSpan">
           <div style="display: flex">
             <template v-for="item in dragConfig">
@@ -14,6 +15,7 @@
         <template v-else>
           <template v-for="item in page.body">
             <a-col :span="item.span" :key="item.id" @click="clickComponentInEditor(item)">
+              <!--   显示容器   -->
               <div v-if="item.type === 'container' && editMode" style="display: flex">
                 <div :class="item.selected ? 'selected_container' : 'container'">
                   <div>
@@ -31,6 +33,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-if="editMode || (page.type !== 'modal' && page.type !== 'draw')">
                 <component
                   :is="resolveComponentType(item.type, item.id)"
@@ -44,16 +47,17 @@
         </template>
       </a-row>
     </template>
-    <template v-for="(modal, modalIndex) in pageConfig.filter(page => page.type === 'modal')">
+    <!--   弹框渲染   -->
+    <template v-for="(modal, modalIndex) in pageConfig.page.filter(page => page.type === 'modal')">
       <a-modal
         :key="'modalIndex_' + modalIndex"
         :title="modal.title"
         :width="modal.width"
         :dialog-style="{ top: '5rem' }"
-        :visible="modalVisible"
+        :visible="modalVisible[modal.id]"
         :z-index="1003"
         :maskClosable="false"
-        @cancel="() => { modalVisible = false }"
+        @cancel="closeModalOrDraw(modal.id, 'modal')"
         :destroyOnClose="true">
         <template v-for="(item, itemIndex) in modal.body">
           <component
@@ -66,14 +70,15 @@
         </template>
       </a-modal>
     </template>
-    <template v-for="(draw, drawIndex) in pageConfig.filter(page => page.type === 'draw')">
+    <!--   抽屉渲染   -->
+    <template v-for="(draw, drawIndex) in pageConfig.page.filter(page => page.type === 'draw')">
       <a-drawer
         :key="'drawIndex_' + drawIndex"
         :title="draw.title"
         :width="draw.width"
-        :visible="drawVisible"
+        :visible="drawVisible[draw.id]"
         :z-index="1003"
-        @close="() => { drawVisible = false }"
+        @close="closeModalOrDraw(draw.id, 'draw')"
         :destroyOnClose="true">
         <template v-for="(item, itemIndex) in draw.body">
           <component
@@ -95,55 +100,90 @@ import Vue from 'vue'
 import * as allComponents from '@vue2-client/utils/lowcode/registerComponentForRender'
 import lowcodeLog from '@vue2-client/utils/lowcode/lowcodeLog'
 import * as lowcodeUtils from '@vue2-client/utils/lowcode/lowcodeUtils'
+import { runLogic } from '@vue2-client/services/api/common'
 
 export default {
   props: {
+    // 页面配置
     pageConfig: {
-      type: Array,
+      type: Object,
       required: true
     },
+    // 是否为编辑模式
     editMode: {
       type: Boolean,
       default: true
-    },
-    showModal: {
-      type: Boolean,
-      default: false
-    },
-    showDraw: {
-      type: Boolean,
-      default: false
     }
   },
   data () {
     return {
+      // 全局变量
+      globalVariable: {},
+      // 传递给组件的Props合集
       propsData: {},
+      // 是否为拖拽模式
       showDragSpan: false,
+      // 拖拽的缓存
       dragConfig: [],
+      // 记录拖拽位移单位量
       beforeSpanThrough: -1,
+      // 记录拖拽之前的span
       originalSpan: -1,
+      // 记录拖拽目标下一个元素的原始span
       nextOriginalSpan: -1,
-      modalVisible: false,
-      drawVisible: false
+      // 弹框显示集合
+      modalVisible: {},
+      // 抽屉显示集合
+      drawVisible: {}
     }
   },
   inject: [
     'componentsMap'
   ],
+  mounted () {
+    // 如果有全局变量，则将全局变量初始化
+    if (this.pageConfig.data) {
+      this.globalVariable = { ...this.pageConfig.data }
+    }
+    // 初始化控制弹框和抽屉的变量合集
+    this.pageConfig.page.forEach(page => {
+      if (page.type === 'modal') {
+        this.modalVisible[page.id] = false
+      } else if (page.type === 'draw') {
+        this.drawVisible[page.id] = false
+      }
+    })
+  },
   methods: {
+    // 关闭弹窗或抽屉
+    closeModalOrDraw (id, type) {
+      if (type === 'modal') {
+        this.modalVisible[id] = false
+      } else if (type === 'draw') {
+        this.drawVisible[id] = false
+      }
+      this.$forceUpdate()
+    },
+    // 开始拖拽
     dragStart (event, id, page) {
+      // 获取目标html元素
       const targetElement = event.srcElement
+      // 获取外层元素用于计算总宽度
       const outerElement = targetElement.parentNode.parentNode.parentNode
       const outerWidth = outerElement.offsetWidth
+      // 计算每一个span对应的像素
       const outerSpanWidth = outerWidth / 24
 
+      // 记录初始X
       const startX = event.clientX
 
+      // 记录兄弟元素
       const targetElementBros = outerElement.childNodes
 
       let targetComponent
       let targetNextComponent
 
+      // 缓存拖拽组件，用于显示拖拽时的实时Span，拖拽完成后再统一赋值
       this.dragConfig = []
       for (let i = 0; i < page.length; i++) {
         this.dragConfig.push({
@@ -155,40 +195,49 @@ export default {
 
       this.showDragSpan = true
 
-      for (let i = 0; i < this.pageConfig.length; i++) {
-        for (let j = 0; j < this.pageConfig[i].body.length; j++) {
-          if (id === this.pageConfig[i].body[j].id) {
+      // 保存目标容器，和目标的下一个容器，用于改变宽度
+      for (let i = 0; i < this.pageConfig.page.length; i++) {
+        for (let j = 0; j < this.pageConfig.page[i].body.length; j++) {
+          if (id === this.pageConfig.page[i].body[j].id) {
             targetComponent = this.dragConfig[j]
             targetNextComponent = this.dragConfig[j + 1]
           }
         }
       }
 
+      // 如果鼠标之后没有组件，禁止移动
       if (!targetComponent || !targetNextComponent) {
         this.$message.error('单个组件无法移动！')
         this.showDragSpan = false
         return
       }
 
+      // 保存原始的像素宽度
       const orignalTargetWidth = targetComponent.width
       const orignalTargetNextWidth = targetNextComponent.width
 
+      // 保存原始的span
       this.originalSpan = targetComponent.span
       this.nextOriginalSpan = targetNextComponent.span
 
+      // 拖拽事件
       const onDrag = (e) => {
+        // 计算出移动的像素数
         let deltaX = e.clientX - startX
+        // 判断移动方向
         let direction = 1
         if (deltaX < 0) {
           direction = -1
           deltaX = 0 - deltaX
         }
 
+        // 根据移动像素数计算出移动了多少个span
         const throughSpanNum = Math.floor(deltaX / outerSpanWidth)
         if (this.beforeSpanThrough === -1) {
           this.beforeSpanThrough = throughSpanNum
         }
 
+        // 将移动的距离更新到临时显示的span中
         if (direction > 0) {
           targetComponent.width = orignalTargetWidth + deltaX
           targetNextComponent.width = orignalTargetNextWidth - deltaX
@@ -208,37 +257,38 @@ export default {
         }
       }
 
+      // 拖拽结束
       const dragEnd = (e) => {
+        // 解绑事件，更新数据
         this.showDragSpan = false
         document.removeEventListener('mouseup', dragEnd)
         document.removeEventListener('mousemove', onDrag)
         this.$emit('spanDrag', targetComponent, targetNextComponent)
       }
 
+      // 绑定拖拽事件和结束事件
       document.addEventListener('mouseup', dragEnd)
       document.addEventListener('mousemove', onDrag)
     },
+    // 解析配置中的type，找出对应的渲染器
     resolveComponentType (type, componentId) {
-      switch (type) {
-        case 'XFormTable':
-          return allComponents.XFormTable
-        // case 'XTree':
-        //   return XTree
-        case 'XTreeOne':
-          return allComponents.XTreeOne
-        case 'XAddNativeFormForLowcode':
-          return allComponents.XAddNativeFormModal
-        case 'XAddNativeForm':
-          return allComponents.XAddNativeForm
-        case 'XDescriptions':
-          return allComponents.XDescriptions
+      // 从组件注册中拿到所有注册的组件
+      const allComponentKeys = Object.keys(allComponents)
+      for (let i = 0; i < allComponentKeys.length; i++) {
+        const keyStr = allComponentKeys[i].toString()
+        if (type === keyStr) {
+          return allComponents[keyStr]
+        }
       }
     },
+    // mixin中组件mounted后的回调
     componentDidMounted (vm, id) {
+      // 将组件注册到全局的Map中
       if (vm && id) {
         this.componentsMap[id] = vm
       }
-      this.pageConfig.forEach(page => {
+      // 如果组件中有props，将其挨个set到vm中
+      this.pageConfig.page.forEach(page => {
         page.body.forEach(item => {
           if (item.id === id) {
             const keys = Object.keys(item.props)
@@ -260,8 +310,11 @@ export default {
     handelContainerDelete (id, pageIndex) {
       this.$emit('containerDelete', id, pageIndex)
     },
+    // 处理组件的事件
     handleEvent (data, eventTiggerType, id) {
-      const targetConfig = lowcodeUtils.getComponentConfig(id, this.pageConfig)
+      // 找到目标对象的配置
+      const targetConfig = lowcodeUtils.getComponentConfig(id, this.pageConfig.page)
+      // 找到目标对象对应触发事件的配置
       const eventConfigs = targetConfig.onEvent[eventTiggerType]
 
       if (!eventConfigs) {
@@ -278,41 +331,84 @@ export default {
 
       let targetComponentId = ''
 
+      // 遍历该类型触发事件，挨个执行
       eventConfigs.forEach(eachEvent => {
         lowcodeLog(
           ` 事件数据：${data} \n 目标组件: ${targetComponentId}`,
           '开始遍历执行事件',
-          eachEvent.eventName,
+          eachEvent.eventType,
           false
         )
+        // 修改弹窗显隐
         if (eachEvent.eventType === 'showDraw') {
-          this.drawVisible = true
+          this.drawVisible[eachEvent.containerId] = eachEvent.visible === 'open'
+          this.$forceUpdate()
           lowcodeLog(
-            undefined,
-            '打开抽屉',
-            '',
+            eachEvent.containerId,
+            '修改抽屉可见性',
+            eachEvent.visible === 'open' ? '可见' : '隐藏',
             false,
             true
           )
+          // 修改抽屉显隐
         } else if (eachEvent.eventType === 'showModal') {
-          this.modalVisible = true
+          this.modalVisible[eachEvent.containerId] = eachEvent.visible === 'open'
+          this.$forceUpdate()
+          lowcodeLog(
+            eachEvent.containerId,
+            '修改弹窗可见性',
+            eachEvent.visible === 'open' ? '可见' : '隐藏',
+            false,
+            true
+          )
+          // 运行Logic
+        } else if (eachEvent.eventType === 'runLogic') {
+          // eslint-disable-next-line no-eval
+          const logicCallBackFunction = eval('(' + eachEvent.logicCallBackFunction + ')')
+          // eslint-disable-next-line no-eval
+          const logicParamFunction = eval('(' + eachEvent.logicParamFunction + ')')
+          const param = logicParamFunction(this.globalVariable, data)
+          lowcodeLog(
+            JSON.stringify(param),
+            '执行Logic',
+            eachEvent.logicName,
+            false,
+            true
+          )
+          runLogic(eachEvent.logicName, param, eachEvent.serviceName).then(logicCallBackFunction(this.componentsMap))
+          // 为全局组件赋值
+        } else if (eachEvent.eventType === 'changeGlobalVariable') {
+          this.globalVariable[eachEvent.globalVariableKey] = data
           lowcodeLog(
-            undefined,
-            '打开弹窗',
             '',
+            '修改全局变量',
+            eachEvent.globalVariableKey,
             false,
             true
           )
+          // 通知外侧编辑器修改全局组件的值，在编辑模式中，可以实时掌握全局变量的值
+          this.$emit('changeGlobalVariable', eachEvent.globalVariableKey, data)
+          // 修改组件的props
         } else if (eachEvent.eventType === 'changeProps') {
-          const targetConfig = lowcodeUtils.getComponentConfig(eachEvent.target, this.pageConfig)
+          const targetConfig = lowcodeUtils.getComponentConfig(eachEvent.target, this.pageConfig.page)
           targetConfig.props[eachEvent.targetKey] = data
           lowcodeLog(
-            `目标key：${eachEvent.targetKey}，新的值：${data.toString()}`,
+            `目标key：${eachEvent.targetKey}，新的值：${JSON.stringify(data)}`,
             '修改Props',
             targetConfig.id,
             false,
             true
           )
+          // 打印日志
+        } else if (eachEvent.eventType === 'log') {
+          lowcodeLog(
+            JSON.stringify(data),
+            '打印日志',
+            targetConfig.id,
+            false,
+            true
+          )
+          // 修改组件的值
         } else if (eachEvent.eventType === 'changeValue') {
           // 寻找target
           targetComponentId = eachEvent.target
@@ -336,18 +432,6 @@ export default {
         }
       })
     }
-  },
-  watch: {
-    showModal: {
-      handler () {
-        this.modalVisible = !this.modalVisible
-      }
-    },
-    showDraw: {
-      handler () {
-        this.drawVisible = !this.drawVisible
-      }
-    },
   }
 }
 </script>

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>