@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/src/page-designer/setting-panel/CodeEditor.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="epx-page-designer-setting-code-editor">
+    <textarea class="editor" ref="textarea" name="" id="" cols="30" rows="3" v-model="content"></textarea>
+  </div>
+</template>
+<script>
+export default {
+  name: 'epx-page-designer-setting-code-editor',
+  props: {
+    value: Object
+  },
+  data () {
+    return {
+      content: ''
+    }
+  },
+  watch: {
+    content (v) {
+      try {
+      // eslint-disable-next-line no-eval
+        const json = eval('(' + v + ')')
+        this.$emit('change', json)
+      } catch (error) {
+        this.$message.error('JSON格式错误')
+      }
+    }
+  },
+  methods: {
+    editorInit () {
+      require.ensure([], () => {
+        const CodeMirror = require('codemirror')
+        globalThis.codemirror = CodeMirror
+        require('codemirror/addon/hint/show-hint.js')
+        require('codemirror/lib/codemirror.css')
+        require('codemirror/addon/hint/show-hint.css')
+        require('codemirror/addon/edit/matchbrackets.js')
+        require('codemirror/addon/edit/closebrackets.js')
+        require('codemirror/mode/javascript/javascript.js')
+        require('@epxing/theme/src/idea.css')
+
+        this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
+          theme: 'idea',
+          mode: { name: 'javascript', json: true },
+          matchBrackets: true,
+          autofocus: true,
+          showCursorWhenSelecting: true,
+          autoCloseBrackets: true,
+          extraKeys: { Ctrl: 'autocomplete' },
+          inputStyle: 'contenteditable',
+          hintOptions: { completeSingle: false, closeOnUnfocus: false }
+        })
+        this.editor.on('change', (editor, change) => { // 任意键触发autocomplete
+          if (change.origin === '+input') {
+            const text = change.text[0]
+            if (/\w+/.test(text)) {
+              setTimeout(function () { editor.execCommand('autocomplete') }, 200)
+            }
+          }
+        })
+        this.editor.on('blur', (editor) => {
+          this.content = editor.getValue()
+        })
+        this.editor.showHint()
+        if (this.value) {
+          this.editor.setValue(JSON.stringify(this.value, null, 2))
+          this.editor.focus()
+        }
+      }, (err) => {
+        console.error(err)
+      }, 'codemirror')
+    }
+  },
+  mounted () {
+    this.editorInit()
+  }
+}
+</script>
+
+<style lang="scss">
+.epx-page-designer-setting-code-editor {
+  width: 400px;
+  height: 400px;
+  border: 1px solid #e3e3e3;
+  .CodeMirror {
+    height: 100%;
+  }
+}
+</style>

package/src/page-designer/setting-panel/Property.vue

@@ -0,0 +1,163 @@
+<template>
+  <div>
+    <epx-component
+      :key="widget.id"
+      :id="widget.id"
+      :designer="designer"
+      :widget="widget"
+      :metaId="designer.page.metaId"
+      ref="component"
+      :name="visualComponent"
+      :comp-config="componentConfigs"
+      :globalConfigs="designer.pageConfig"
+      :component-info="widgetInfo"
+      :pageParams="variableSets"
+      :pageRelationList="relationList"
+      :upMetaId="upWidgetMetaId"
+    ></epx-component>
+  </div>
+</template>
+<script>
+export default {
+  name: 'epx-page-designer-setting-property',
+  props: {
+    designer: {
+      type: Object
+    },
+    relationList: {
+      type: Array
+    }
+  },
+  data () {
+    return {
+      visualComponent: 'visual-component'
+    }
+  },
+  provide () {
+    return {
+      pageId: this.designer.page.pageId,
+      getPageMetaId: () => this.designer.page.metaId,
+      pageMetaId: this.designer.page.metaId,
+      getItemConfigs: this.getItemConfigs,
+      changeItemConfigs: this.changeItemConfigs,
+      setContainerDefaultItems: this.setContainerDefaultItems,
+      updateWidget: this.designer.updateWidget
+    }
+  },
+  computed: {
+    type () {
+      if (this.selectedWidget) return 'widget'
+      return 'page'
+    },
+    widget () {
+      if (this.type === 'page') return this.designer.page
+      return this.designer.selectedWidget
+    },
+    selectedWidget () {
+      return this.designer.selectedWidget
+    },
+    widgetInfo () {
+      if (this.type === 'page') return this.designer.page
+      const { contentType, type } = this.selectedWidget
+      return this.designer.getWidgetByType(contentType, type)
+    },
+    variableSets: {
+      get () {
+        return this.designer.pageConfig?.variableSets || []
+      }
+    },
+    componentConfigs () {
+      // 如果是页面 查找页面默认配置
+      if (this.type === 'page') return this.designer.pageConfig
+      const { configs = {}, id, contentType, items, css, ...otherConfigs } = this.selectedWidget
+      const widgetConfig = this.designer.widgetConfig[this.selectedWidget.id] || {}
+      const _configs = {}
+      let hasTitle = false
+      for (const key in otherConfigs) {
+        if (/^title(.i18n)?$/.test(key)) {
+          hasTitle = true
+          _configs[key.replace(/^title(.i18n)?$/, 'componentName$1')] = otherConfigs[key]
+        } else if (key !== 'componentName') {
+          _configs[key] = otherConfigs[key]
+        }
+      }
+      // 组件本体有标题时，配置里残留的 componentName 不参与合并（此前是在 computed 里直接 delete store 里的字段）
+      const { componentName, ...restWidgetConfig } = widgetConfig
+      return { ..._configs, ...configs, ...(hasTitle ? restWidgetConfig : widgetConfig) }
+    },
+    upWidgetMetaId () {
+      const upWidget = this.getUpWidget()
+      if (upWidget) {
+        const upWidgetConfig = this.designer.widgetConfig[upWidget.id]
+        if (upWidgetConfig && upWidgetConfig.metaId) {
+          return upWidgetConfig.metaId
+        }
+      }
+      return null
+    }
+  },
+  methods: {
+    getItemConfigs () {
+      return this.designer.widgetConfig
+    },
+    getUpWidget () {
+      if (this.type !== 'page') {
+        const findUpWidget = (arr = this.designer.widgetList, parent) => {
+          for (const item of arr) {
+            if (item.id === this.designer.selectedWidget.id) {
+              return parent
+            } else if (item.items) {
+              const upItem = findUpWidget(item.items, item)
+              if (upItem) return upItem
+            }
+          }
+        }
+        return findUpWidget()
+      }
+      return null
+    },
+    changeItemConfigs (key, configs = {}, type) {
+      if (key && key !== 'page') {
+        this.designer.updateWidgetConfig(key, configs, type)
+      } else {
+        this.designer.updatePageConfig(configs)
+      }
+    },
+    setContainerDefaultItems (key, items) {
+      if (!key && this.designer.widgetList.length === 0) {
+        this.designer.widgetList = [...items]
+      }
+    }
+  },
+  async created () {
+    let visualPath = ''
+    if (this.type === 'page') {
+      visualPath = this.designer.page.visualConfigPath
+    } else {
+      visualPath = this.widgetInfo.VISUAL_CONFIG_PATH
+      if (!visualPath && this.widgetInfo.UP_PAGE) {
+        await this.$http.get({
+          entityId: 'FM_PAGE',
+          id: this.widgetInfo.UP_PAGE
+        })
+          .then(data => {
+            if (data && data.data) visualPath = data.data.VISUAL_CONFIG_PATH
+          })
+      }
+    }
+    if (visualPath) {
+      let pathName = ''
+      const rootMatch = visualPath.match(/^@\/(frame\/|product\/|project\/)?/)
+      if (rootMatch) {
+        pathName = visualPath.split(rootMatch[0])[1].replace('.vue', '')
+      }
+      // 根据路径定义组件名 SubList  转为 sub-list  layout/SubList 转为 layout-sub-list
+      const componentPath = pathName.replace('views/', '').replace('components/', '').replace('packages/', '').replace(/\//g, '-').replace(/(\w)([A-Z])/g, '$1-$2').toLowerCase()
+      this.visualComponent = componentPath
+    }
+  },
+  mounted () {
+
+  }
+}
+</script>

package/src/page-designer/setting-panel/Setting.vue

@@ -0,0 +1,271 @@
+<template>
+   <el-container v-if="designer.selectedWidget || (designer.mode!=='template' && designer.mode!=='component')" class="epx-page-designer-setting">
+     <el-tabs class="epx-page-designer-setting__tabs" v-model="activeTab" :stretch="true" >
+       <el-tab-pane :label="$t('property')" name="property">
+        <div class="epx-page-designer-setting__widget-title" v-if="!designer.selectedWidget">
+          <label class="epx-page-designer-setting__widget-title-label">页面</label>{{designer.page.title}}
+          <i class="el-icon-copy-document" title="复制ID" @click="copyPageId"></i>
+        </div>
+        <template  v-else>
+          <div class="epx-page-designer-setting__widget-title">
+            <label class="epx-page-designer-setting__widget-title-label">组件类型</label>{{widgetInfo.TITLE || widgetInfo.NAME}}
+            <i v-if="widgetInfo.HELP" class="epx-page-designer-setting__widget-help epx-icon-question-circle" title="点击进入帮助页面" @click="openComponentHelp"></i>
+            <span v-if="designer.selectedWidget.type==='template'" class="epx-page-designer-setting__widget-split" @click="splitTemplate">
+              <i class="epx-icon-quxiaofenzu" title="拆分模板"></i>
+              <span>拆分</span>
+            </span>
+            <el-popover
+              ref="codeEditorPopover"
+              placement="bottom"
+              width="400"
+              trigger="click"
+              @before-enter="showCodeEditor=true"
+              @after-leave="showCodeEditor=false"
+            >
+              <template v-slot:reference><el-button class="epx-page-designer-setting__widget-code" round size="small">
+                <i class="epx-icon-code"></i>
+              </el-button></template>
+              <code-editor v-if="showCodeEditor" :value="widgetConfig" @change="updateWidgetConfig"></code-editor>
+            </el-popover>
+          </div>
+        </template>
+        <epx-page-designer-setting-property :key="widgetId" :designer="designer" :relationList="relationList">
+        </epx-page-designer-setting-property>
+       </el-tab-pane>
+       <el-tab-pane :label="$t('style')" name="style" lazy>
+          <epx-page-designer-setting-style :designer="designer">
+          </epx-page-designer-setting-style>
+       </el-tab-pane>
+       <el-tab-pane label="高级" name="advance" v-if="designer.selectedWidget" lazy>
+        <epx-page-designer-setting-advance :key="widgetId" :designer="designer"></epx-page-designer-setting-advance>
+       </el-tab-pane>
+     </el-tabs>
+   </el-container>
+</template>
+
+<script>
+import CodeEditor from './CodeEditor.vue'
+export default {
+  name: 'epx-page-designer-setting-panel',
+  components: {
+    CodeEditor
+  },
+  props: {
+    designer: {
+      type: Object
+    },
+    relationList: {
+      type: Array
+    }
+  },
+  data () {
+    return {
+      activeTab: 'property',
+      showCodeEditor: false
+    }
+  },
+  computed: {
+    widgetInfo () {
+      if (!this.designer.selectedWidget) return {}
+      const { contentType, type } = this.designer.selectedWidget
+      const widgetInfo = this.designer.getWidgetByType(contentType, type) || {}
+      return widgetInfo
+    },
+    widgetId () {
+      if (!this.designer.selectedWidget) return this.designer.page.pageId
+      return this.designer.selectedWidget.id
+    },
+    widgetConfig () {
+      const { configs = {}, id } = this.designer.selectedWidget
+      const widgetConfig = this.designer.widgetConfig[id] || {}
+      const allConfigs = { ...configs, ...widgetConfig }
+      delete allConfigs.componentName
+      return allConfigs
+    }
+  },
+  watch: {
+    widgetId () {
+      if (this.$refs.codeEditorPopover) this.$refs.codeEditorPopover.hide()
+    }
+  },
+  methods: {
+    createElement (text) {
+      var isRTL = document.documentElement.getAttribute('dir') === 'rtl'
+      var element = document.createElement('textarea')
+      // 防止在ios中产生缩放效果
+      element.style.fontSize = '12pt'
+      // 重置盒模型
+      element.style.border = '0'
+      element.style.padding = '0'
+      element.style.margin = '0'
+      // 将元素移到屏幕外
+      element.style.position = 'absolute'
+      element.style[isRTL ? 'right' : 'left'] = '-9999px'
+      // 移动元素到页面底部
+      const yPosition = window.pageYOffset || document.documentElement.scrollTop
+      element.style.top = `${yPosition}px`
+      // 设置元素只读
+      element.setAttribute('readonly', '')
+      element.value = text
+      document.body.appendChild(element)
+      return element
+    },
+    copyPageId () {
+      var element = this.createElement(this.designer.page.pageId)
+      element.select()
+      element.setSelectionRange(0, element.value.length)
+      document.execCommand('copy')
+      element.remove()
+      this.$message.success('复制成功')
+    },
+    openComponentHelp () {
+      this.$http.get({
+        entityId: 'FM_SERVICE_HELP',
+        id: this.component.HELP,
+        link: 'help,help#system,help#client'
+      })
+        .then(data => {
+          if (!data) {
+            const { 'CLIENT|CODE': clientCode, 'SYSTEM|CODE': systemCode, CODE } = this.appConfig
+            window.open(`#/help/${clientCode}/${systemCode}/${CODE}/${this.component.HELP}`)
+          } else {
+            const { ID, 'HELP|CLIENT|CODE': clientCode, 'HELP|SYSTEM|CODE': systemCode, 'HELP|CODE': code } = data.data
+            window.open(`#/help/${clientCode}/${systemCode}/${code}/${ID}`)
+          }
+        })
+    },
+    updateWidgetConfig (v) {
+      this.designer.updateWidgetConfig(this.designer.selectedWidget.id, v)
+    },
+    splitTemplate () {
+      const { CONTENT } = this.widgetInfo
+      if (CONTENT) {
+        const config = JSON.parse(CONTENT)
+        const { id } = this.designer.selectedWidget
+        const { items, itemConfigs, JS: templateJs } = config
+        const formatConfig = (arr) => {
+          arr.forEach(compItem => {
+            const oldId = compItem.id
+            const newId = compItem.contentType + '_' + this.$util.genId()
+            if (itemConfigs[oldId]) {
+              itemConfigs[newId] = itemConfigs[oldId]
+              delete itemConfigs[oldId]
+            }
+            compItem.id = newId
+            if (compItem.items) {
+              formatConfig(compItem.items)
+            }
+          })
+        }
+        formatConfig(items)
+        const findWidgetPos = (arr, parent) => {
+          for (let i = 0; i < arr.length; i++) {
+            const item = arr[i]
+            if (item.id === id) {
+              return { parent: parent, index: i }
+            } else if (item.items) {
+              const child = findWidgetPos(item.items, item)
+              if (child) return child
+            }
+          }
+        }
+        const widgetPos = findWidgetPos(this.designer.widgetList, null)
+        if (widgetPos) {
+          const { parent, index } = widgetPos
+          if (parent) {
+            parent.items.splice(index, 1, ...items)
+          } else {
+            this.designer.widgetList.splice(index, 1, ...items)
+          }
+          this.designer.mergeWidgetConfig(itemConfigs)
+          delete this.designer.widgetConfig[id]
+          if (templateJs) {
+            let { JS = '' } = this.designer.pageConfig
+            const result = JS.match(/export\sfunction\s(\w+)/g)
+            const events = []
+            if (result) {
+              result.forEach(item => {
+                events.push(item.replace(/export\sfunction\s/, ''))
+              })
+            }
+            const templateJsResult = templateJs.split(/export\s+function\s+/)
+            templateJsResult.forEach(item => {
+              const funtionStr = item.replace(/\/\*(\n|.)+?\*\/[\n\s]+$/, '')
+              if (funtionStr.replace(/[\n\s]+/g, '').length > 0) {
+                const funtionName = funtionStr.split(/\s+\(/)[0]
+                if (![...new Set(events)].includes(funtionName)) {
+                  JS += 'export function ' + funtionStr.replace(/^\w+/, funtionName)
+                }
+              }
+            })
+            this.designer.updatePageConfig({ JS })
+          }
+          this.designer.setSelected(items[0])
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@include b(page-designer-setting) {
+  width: 360px;
+  background: var(--epx-bg-card);
+  height: 100%;
+  @include e(tabs) {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .el-tabs__content {
+      flex: 1;
+      overflow: auto;
+    }
+  }
+  @include e(widget-title) {
+    color: #606266;
+    padding: 16px ;
+     >i {
+      @include font_color_primary;
+      cursor: pointer;
+    }
+  }
+  @include e(widget-title-label) {
+    display: inline-block;
+    box-sizing: border-box;
+    width: 100px;
+    padding-right: 12px;
+    text-align: left;
+  }
+  @include e(widget-help) {
+    font-size: var(--epx-font-size-l);
+    cursor: pointer;
+    margin-top: -2px;
+  }
+  @include e(widget-split) {
+    @include font_color_primary;
+    font-size: var(--epx-font-size-base);
+    line-height: 20px;
+    margin-left: 4px;
+    cursor: pointer;
+    i {
+      font-size: var(--epx-font-size-l);
+      margin-right: 2px;
+    }
+  }
+  @include e(widget-code) {
+    &.el-button--mini {
+      float: right;
+      border: 0;
+      background: rgba(8,116,231,0.1);
+      border-radius: 12px;
+      font-size: var(--epx-font-size-l);
+      @include font_color_primary;
+      padding: 4px 8px;
+      line-height: 1;
+      margin-top: -2px;
+    }
+  }
+}
+</style>