epx-frame 3.5.0-shpgy.1

package/src/frame/packages/visual-config-page/VisualConfigPage.vue

@@ -0,0 +1,632 @@
+<template>
+<div class="config-container">
+  <!-- 头部 -->
+  <div class="page-header">
+    <div class="page-header__left">
+      <i class="page-header__back el-icon-arrow-left" @click="backPage({reload: true })"></i>
+      <p class="page-title">
+        <span class="page-header__subtitle">{{$t('Editing the page')}}：</span>
+        <span class="page-header__title">{{currentPage.title}}</span>
+      </p>
+    </div>
+    <div class="page-header__operate">
+      <p class="header-operate__item" @click="this.pageSetting">{{$t('page setup')}}</p>
+      <!-- <el-button size="medium">{{$t('preview')}}</el-button> -->
+      <el-button type="primary" size="medium" @click="saveConfigs">{{$t('save')}}</el-button>
+    </div>
+  </div>
+  <div class="page-content">
+    <!-- 导航tabs -->
+    <ul class="page-tabs">
+      <li :class="{'page-tabs__item': true, 'active': showPanel==='selectComponent'}" @click="showPanel='selectComponent'">
+        <i class="epx-icon-dagang"></i>
+      </li>
+      <li :class="{'page-tabs__item': true, 'active': showPanel==='componentLibrary'}" @click="showPanel='componentLibrary'">
+        <i class="epx-icon-yingyong"></i>
+      </li>
+      <li :class="{'page-tabs__item': true, 'active': showPanel==='jsPanel'}" @click="showPanel='jsPanel'">
+        <i class="epx-icon-js"></i>
+      </li>
+    </ul>
+    <!-- 功能面板 -->
+    <div class="function-panel">
+      <epx-visual-config-component-list
+        v-if="showPanel==='selectComponent'"
+        :all-component-list="this.componentList"
+        :component-list="this.selectComponentList"
+        :component="selectComponent"
+        @delete="deleteSelectComponent"
+        @add="([component, upId]) => addComponent(component, upId)"
+        @change-configs="changeConfigs"
+        @click="clickComponent"
+        @close="showPanel=null"
+      />
+      <epx-visual-config-component-library
+        v-if="showPanel==='componentLibrary'"
+        :all-component-list="this.componentList"
+        :component-list="this.selectComponentList"
+        @close="showPanel=null"
+      />
+      <div class="js-panel" v-if="showPanel==='jsPanel'"  @click.stop>
+        <p class="js-panel-title">
+          <span>{{$t('Page JS')}}</span>
+          <i class="el-icon-close" @click="showPanel=null"></i>
+        </p>
+        <epx-js-panel :value="pageGlobalConfigs.JS" @change="v=>changeItemConfigs('page', { JS: v })"></epx-js-panel>
+      </div>
+    </div>
+    <!-- 页面预览 -->
+    <div class="page-preview">
+      <epx-visual-config-page-preview
+        :globalConfigs="pageGlobalConfigs"
+        :itemConfigs="allComponentConfigs"
+        :all-component-list="componentList"
+        :component-list="this.selectComponentList"
+        :selectComponent="selectComponent"
+        @click="clickComponent"
+        @delete="deleteSelectComponent"
+      />
+    </div>
+    <!-- 组件配置面板 -->
+    <div class="config-panel" v-if="selectComponent">
+      <!-- 获取组件对应的配置面板 -->
+      <epx-visual-config-panel
+        :component="selectComponent"
+        :metaId="currentMetaId"
+        :globalConfigs="pageGlobalConfigs"
+        :itemConfigs="allComponentConfigs"
+        :relationList="relationList"
+        :pageParams="pageParams"
+        :scopeConfigs="scopeConfigs"
+      ></epx-visual-config-panel>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+// 页面可视化配置
+import { mapGetters } from 'vuex'
+export default {
+  name: 'epx-visual-config-page',
+  navConfigs: {
+    flag: false
+  },
+  provide () {
+    const { id } = this.$query
+    return {
+      pageMetaId: this.currentMetaId,
+      pageId: id,
+      pageConfigs: this.page_config,
+      getAllComponentList: () => this.componentList,
+      getItemConfigs: () => this.allComponentConfigs,
+      getDefaultContainerItems: () => this.defaultContainerItems,
+      setContainerDefaultItems: this.setContainerDefaultItems,
+      changeItemConfigs: this.changeItemConfigs
+    }
+  },
+  data () {
+    return {
+      componentList: [],
+      selectComponentList: [],
+      selectComponent: null,
+      showPanel: 'selectComponent',
+      pageGlobalConfigs: {},
+      allComponentConfigs: {},
+      pageMetaId: null,
+      relationList: [],
+      pageParams: [],
+      scopeConfigs: {}
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getPageById'
+    ]),
+    currentPage () {
+      const page = this.getPageById(this.$query.id)
+      return page || {}
+    },
+    currentMetaId () {
+      return this.$query.entityId || this.pageMetaId
+    },
+    currentMeta () {
+      return this.metas[this.currentMetaId] || null
+    },
+    page_config () {
+      const { config = '{}' } = this.$query
+      if (typeof config === 'string') {
+        try {
+          // eslint-disable-next-line no-eval
+          return eval('(' + config + ')')
+        } catch (error) {
+          return {}
+        }
+      }
+      return config
+    }
+  },
+  methods: {
+    getPageInfo () {
+      this.getPageId()
+        .then(page => {
+          const { metaId } = page
+          if (metaId) this.pageMetaId = metaId
+          this.getMetaId()
+            .then(() => {
+              this.getDefaultConfig()
+              this.loadConfig = true
+            })
+        })
+    },
+    getPageId () {
+      // 获取当前page
+      if (!this.$query.id || !this.$_.isEmpty(this.currentPage)) {
+        return Promise.resolve(this.currentPage)
+      }
+      return this.$store.dispatch({
+        type: 'ADD_PAGE',
+        pageId: this.$query.id
+      })
+    },
+    getMetaId () {
+      if (!this.currentMetaId || this.currentMeta) {
+        return Promise.resolve(this.currentMeta)
+      } else {
+        return this.$store.dispatch({
+          type: 'ADD_META',
+          metaId: this.currentMetaId
+        })
+      }
+    },
+    getDefaultConfig () {
+      // 获取默认组件
+      const { config: pageConfigs = {} } = this.currentPage || {}
+      const { itemConfigs = {}, items = [], ...globalConfigs } = pageConfigs
+      // 深度拷贝 防止修改pageConfigs参数
+      this.allComponentConfigs = this.$_.cloneDeep(itemConfigs) // 组件配置
+      this.selectComponentList = this.$_.cloneDeep(items) // 已选组件
+      this.pageGlobalConfigs = this.$_.cloneDeep(globalConfigs) // 页面全局配置
+      this.pageSetting()
+      this.getPageParams()
+      this.getScopeConfigs()
+      this.getEntityRelation()
+    },
+    getEntityRelation () {
+      this.$http.$get({
+        entityId: 'FM_ENTITY_RELATION',
+        action: 'getEntityRelationTree',
+        mainEntity: this.currentMetaId
+      })
+        .then(data => {
+          data.forEach(relation => {
+            relation.label = relation.title
+            relation.value = relation.flag
+            relation.children = relation.childrens
+            if (relation.childrens) {
+              relation.childrens.forEach(childRelation => {
+                childRelation.value = relation.flag + '#' + childRelation.flag
+                childRelation.label = childRelation.title
+              })
+            }
+          })
+          this.relationList = data
+        })
+    },
+    // 获取页面参数
+    getPageParams () {
+      this.$http.list({
+        entityId: 'FM_PAGE_PARAM',
+        'scope.PAGE': this.currentPage.templateId
+      })
+        .then(data => {
+          this.pageParams = [...data.entitys]
+        })
+    },
+    /**
+     * 获取查询配置
+     */
+    getScopeConfigs () {
+      this.$http.list({
+        action: 'getAllSearchConfig',
+        entityId: 'FM_SEARCH_CONFIG'
+      })
+        .then(data => {
+          this.scopeConfigs = data
+        })
+    },
+    getComponetName (component) {
+      if (component && component.PATH) {
+        let project = 'frame'
+        let pathName = ''
+        const pagePath = component.PATH
+        const rootMatch = pagePath.match(/^@\/\w+\//)
+        if (rootMatch) {
+          project = rootMatch[0].replace(/[@|/]/g, '')
+          pathName = pagePath.split(rootMatch)[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()
+        const componentName = (project === 'frame' ? '' : (project + '-')) + componentPath
+
+        return componentName
+      }
+      return null
+    },
+    getVisualComponent (component) {
+      if (component && component.VISUAL_CONFIG_PATH) {
+        let pathName = ''
+        const pagePath = component.VISUAL_CONFIG_PATH
+        const rootMatch = pagePath.match(/^@\/(frame\/|product\/|project\/)?/)
+        if (rootMatch) {
+          pathName = pagePath.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()
+        const componentName = componentPath
+
+        return componentName
+      }
+      return null
+    },
+    getComponentList () {
+      this.$http.list({
+        entityId: 'FM_PAGE',
+        'scope.TYPE': '01'
+      })
+        .then(data => {
+          const componentList = data.entitys
+          componentList.forEach(item => {
+            item.componentName = item.CODE
+            if (item.COMPONENT_TYPE === 'page') {
+              const componentName = this.getComponetName(item)
+              item.componentName = componentName
+            }
+            const visualComponentName = this.getVisualComponent(item)
+            item.visualComponentName = visualComponentName
+          })
+          this.componentList = [...componentList]
+        })
+    },
+    changeItemConfigs (key, configs = {}, type) {
+      if (key === 'page') {
+        this.pageGlobalConfigs = { ...this.pageGlobalConfigs, ...configs }
+      } else {
+        const itemConfig = this.allComponentConfigs[key] || {}
+        let componentConfigs = {}
+        const componentAttris = ['flex', 'layout', 'direction', 'justify', 'align', 'style', 'componentName', 'span', 'xsspan', 'items', 'countScopeParams', 'tabCount']
+        let componentAttriMap = {}
+        for (const key in configs) {
+          const isAttri = componentAttris.find(item => item === key || item + '.i18n' === key)
+          if (isAttri || type === 'component') {
+            componentAttriMap = { ...componentAttriMap, [key.replace(/^componentName(.i18n)?$/, 'title$1')]: configs[key] }
+          } else {
+            componentConfigs = { ...componentConfigs, [key]: configs[key] }
+          }
+        }
+        // 设置组件配置
+        this.$set(this.allComponentConfigs, key, { ...itemConfig, ...componentConfigs })
+        // 设置组件属性
+        const selectComponentList = [...this.selectComponentList]
+        const ids = key.split('-')
+        ids.reduce((componentList, id, index) => {
+          const component = componentList.find(item => item.id === id) || {}
+          if (index === ids.length - 1) {
+            for (const attri in componentAttriMap) {
+              if (componentAttriMap[attri] !== undefined) {
+                component[attri] = componentAttriMap[attri]
+                if (component[attri] === null) delete component[attri]
+              }
+            }
+
+            return null
+          }
+          if (!component.items) component.items = []
+          return component.items
+        }, selectComponentList)
+        this.selectComponentList = [...selectComponentList]
+      }
+    },
+    addComponent (component, upId) {
+      const newComp = {
+        id: component.id,
+        title: component.TITLE,
+        contentType: component.componentName
+      }
+      if (upId === 'root') {
+        // 增加upId配置
+        this.selectComponentList.push(newComp)
+      } else {
+        // 查找其父组件
+        const selectComponentList = [...this.selectComponentList]
+        const ids = upId.split('-')
+        const componentList = ids.reduce((componentList, id) => {
+          const componentItem = componentList.find(item => item.id === id) || {}
+          if (!componentItem.items) componentItem.items = []
+          return componentItem.items
+        }, selectComponentList)
+        componentList.push(newComp)
+        this.selectComponentList = selectComponentList
+        this.$forceUpdate()
+      }
+    },
+    deleteSelectComponent (id, e) {
+      e && e.stopPropagation()
+      const selectComponentList = [...this.selectComponentList]
+      const ids = id.split('-')
+      ids.reduce((componentList, id, index) => {
+        if (index === ids.length - 1) {
+          const componentIndex = componentList.findIndex(item => item.id === id) || {}
+          componentList.splice(componentIndex, 1)
+        } else {
+          const componentItem = componentList.find(item => item.id === id) || {}
+          return componentItem.items
+        }
+      }, selectComponentList)
+      this.selectComponentList = selectComponentList
+      this.$forceUpdate()
+    },
+    changeConfigs (id, newConfigs) {
+      const configs = this.componentConfigs[id] || {}
+      this.$set(this.componentConfigs, id, { ...configs, ...newConfigs })
+    },
+    pageSetting () {
+      const { visualConfigPath } = this.currentPage
+      const name = this.getVisualComponent({ VISUAL_CONFIG_PATH: visualConfigPath })
+      this.selectComponent = { type: 'page', id: 'page', ...this.currentPage, visualComponentName: name, config: this.pageGlobalConfigs }
+    },
+    clickComponent (componentId, componentInfo, component, upId) {
+      this.selectComponent = { id: componentId, ...componentInfo, config: component, upId }
+    },
+    scrollToConfig (componentId) {
+      // const component = this.$refs.visualComponent
+      // if (!component) return
+      // const configComponent = component.$refs[`config-${componentId}`]
+      // if (configComponent) {
+      //   const el = configComponent.$el || configComponent
+      //   const configContainer = this.$refs.configContainer
+      //   configContainer.scrollTop = el.offsetTop - 20
+      // }
+    },
+    setComponentConfig (componentList, itemConfigs = {}, upId) {
+      componentList.forEach(component => {
+        const componentId = upId ? upId + '-' + component.id : component.id
+        const configComponentOuter = this.$refs[`config-${component.id}`]
+        if (configComponentOuter) {
+          const configComponent = configComponentOuter.$refs.component
+          if (configComponent) {
+            const configs = configComponent.getConfigs() || {}
+            const { span, flex, componentName } = configs
+            if (span) component.span = span
+            delete component.configs
+            if (componentName) {
+              component.title = componentName
+              delete configs.componentName
+            }
+            if (flex) {
+              component.flex = flex
+              delete configs.flex
+            }
+            const defaulConfigs = itemConfigs[componentId] || {}
+            itemConfigs[componentId] = { ...defaulConfigs, ...configs }
+          }
+        }
+        const { items = [] } = component
+        if (items.length > 0) {
+          this.setComponentConfig(items, itemConfigs, componentId)
+        }
+      })
+    },
+    setContainerDefaultItems (id, items) {
+      if (id === 'page') {
+        const { config: pageConfigs = {} } = this.currentPage || {}
+        if (!pageConfigs.items) this.selectComponentList = items
+      } else {
+        const selectComponentList = [...this.selectComponentList]
+        const ids = id.split('-')
+        ids.reduce((componentList, id, index) => {
+          const componentItem = componentList.find(item => item.id === id) || {}
+          if (!componentItem.items) {
+            if (index === ids.length - 1) componentItem.items = items
+            else componentItem.items = []
+          }
+          return componentItem.items
+        }, selectComponentList)
+
+        this.selectComponentList = selectComponentList
+      }
+    },
+    saveConfigs (event, next, errorFn) {
+      const selectComponentList = [...this.selectComponentList]
+      const itemConfigs = { ...this.allComponentConfigs }
+      this.setComponentConfig(selectComponentList, itemConfigs, '')
+      for (const key in itemConfigs) {
+        const itemConfig = itemConfigs[key]
+        for (const itemKey in itemConfig) {
+          if (itemConfig[itemKey] === null || itemConfig[itemKey] === undefined) {
+            delete itemConfig[itemKey]
+          }
+        }
+        if (this.$_.isEmpty(itemConfig)) {
+          delete itemConfigs[key]
+        }
+      }
+      // 获取所有的配置
+      this.selectComponentList = [...selectComponentList]
+      // 保存当前配置
+      const config = { ...this.pageGlobalConfigs }
+      // 更改组件名称和flex布局
+      config.items = selectComponentList
+      config.itemConfigs = itemConfigs
+      import('@babel/standalone')
+        .then(babel => {
+          // 获取页面全局配置
+          const es5 = babel.transform(config.JS, { presets: ['env'] })
+          config.compileJS = es5.code
+          for (const key in config) {
+            if (config[key] === null) {
+              delete config[key]
+            }
+          }
+          this.savePageConfigs(config, next, errorFn)
+        })
+    },
+    savePageConfigs (config) {
+      // 获取全局参数
+      let formParams = {}
+      const globalConfig = this.$refs.globalConfig
+      if (globalConfig) {
+        const formComp = this.getComponentById('form', globalConfig)
+        if (formComp) {
+          formParams = formComp.getFormData()
+          if (!formParams) return
+        }
+      }
+      this.$http.update({
+        entityId: this.$metaId,
+        ...formParams,
+        [`bean.${this.$metaKey}`]: this.$query.id,
+        'bean.CONTENT': JSON.stringify(config, null, '\t')
+      })
+        .then(data => {
+          this.$message.success(this.$t('save successfully'))
+          this.$store.commit('DELETE_PAGE', { pageId: this.$query.id })
+          // 重新获取页面
+          this.$store.dispatch('ADD_PAGE', { pageId: this.$query.id })
+        })
+        .catch(err => {
+          this.$message.error(err.message || this.$t('fail to save'))
+        })
+    }
+  },
+  created () {
+    const { openType } = this.$query
+    if (openType !== '2') {
+      this.$store.commit('SWITCH_MENU_SHOW', false)
+      this.$store.commit('SWITCH_APP_NAV_SHOW', false)
+    }
+    this.getPageInfo()
+    this.getDefaultConfig()
+    this.getComponentList()
+  },
+  beforeDestroy () {
+    this.$store.commit('SWITCH_MENU_SHOW', true)
+    this.$store.commit('SWITCH_APP_NAV_SHOW', true)
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+.config-container {
+  position: relative;
+  left: -10px;
+  top: -10px;
+  width: calc(100% + 20px);
+  height: calc(100% + 20px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 60px;
+  background: #FFFFFF;
+  padding: 0 20px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.page-header__left {
+  display: flex;
+}
+
+.page-header__back {
+  font-size: 24px;
+  color: #666;
+  margin-right: 16px;
+  cursor: pointer;
+}
+
+.page-header__title {
+  font-size: 16px;
+  font-weight: 600;
+}
+.page-header__subtitle {
+  font-size: 14px;
+  color: #666;
+}
+.page-header__operate {
+  display: flex;
+  align-items: center;
+}
+.header-operate__item {
+  color: #666;
+  cursor: pointer;
+  margin: 20px;
+  &:hover {
+    @include font_color_primary
+  }
+}
+.page-content {
+  flex:1;
+  display: flex;
+  overflow: hidden;
+}
+.page-tabs {
+  width: 50px;
+  height: 100%;
+  background: #FFFFFF;
+  box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.1);
+  padding:  20px 0;
+  flex-shrink: 0;
+}
+.page-tabs__item {
+  width: 100%;
+  height: 40px;
+  margin-bottom: 10px;
+  text-align: center;
+  line-height: 40px;
+  font-size: 24px;
+  cursor: pointer;
+  &:hover, &.active {
+    @include bg_color_primary(.2);
+    @include font_color_primary
+  }
+}
+.page-preview {
+  flex: 1;
+  overflow: hidden;
+}
+.config-panel {
+  width: 360px;
+  flex-shrink: 0;
+}
+.function-panel {
+  position: relative;
+  flex-shrink: 0;
+}
+.js-panel {
+  position: absolute;
+  top: 0;
+  width: 600px;
+  height: 100%;
+  z-index: 10;
+}
+.js-panel-title {
+  background: #fff;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 36px;
+  color: #666;
+  i {
+    cursor: pointer;
+    color: #999;
+    font-size: 18px;
+  }
+}
+</style>

package/src/frame/packages/visual-config-page/index.js

@@ -0,0 +1,24 @@
+import VisualConfigPage from './VisualConfigPage.vue'
+import componentLibrary from './ComponentLibrary.vue'
+import ComponentList from './ComponentList.vue'
+import ComponentPreview from './ComponentPreview.vue'
+import ConfigOption from './ConfigOption.vue'
+import ConfigPanel from './ConfigPanel.vue'
+import PagePreview from './PagePreview.vue'
+
+/* istanbul ignore next */
+VisualConfigPage.install = function install (Vue) {
+  Vue.component(VisualConfigPage.name, VisualConfigPage)
+  Vue.component(componentLibrary.name, componentLibrary)
+  Vue.component(ComponentList.name, ComponentList)
+  Vue.component(ComponentPreview.name, ComponentPreview)
+  Vue.component(ConfigOption.name, ConfigOption)
+  Vue.component(ConfigPanel.name, ConfigPanel)
+  Vue.component(PagePreview.name, PagePreview)
+}
+
+export default VisualConfigPage
+
+export {
+  VisualConfigPage
+}

package/src/frame/popup.js

@@ -0,0 +1,31 @@
+import Popup from '@/frame/components/Popup'
+export default function (Vue, { router, store }) {
+  Vue.prototype.$popup = (options) => {
+    const comp = new Vue({
+      router,
+      store,
+      render: h => h(Popup, {
+        props: {
+          ...options,
+          query: { ...options }
+        },
+        ref: 'popup'
+      })
+    })
+    comp.$mount()
+    document.body.appendChild(comp.$el)
+    Vue.nextTick(() => {
+      comp.$refs.popup.dialogVisible = true
+    })
+    return {
+      opener: options.opener,
+      close: (refesh, callback) => {
+        comp.$refs.popup.close()
+        if (refesh && options.$refesh) {
+          options.$refesh()
+        }
+        if (callback) callback.call(options.opener)
+      } // 暴露出去一个关闭的方法
+    }
+  }
+}