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

package/src/visual/Config.vue

@@ -0,0 +1,881 @@
+<script>
+// @jsx-vue3（T30 JSX 批②：Vue3 JSX 语法）
+import { mapGetters } from 'vuex'
+import { captureRef } from '@epxing/core/src/capture-ref'
+export default {
+  name: 'epx-visual-config',
+  navConfigs: {
+    flag: false
+  },
+  data () {
+    return {
+      pageMetaId: null,
+      loadConfig: false,
+      pageGlobalConfigs: {},
+      showPageComponent: true,
+      resetDCModalVisible: false,
+      pageConfigs: {},
+      selectComponentList: [],
+      componentList: [],
+      selectTab: 'component',
+      allComponentConfigs: {},
+      defaultContainerItems: {},
+      actionList: [],
+      ruleList: [],
+      relationList: [],
+      pageParams: [],
+      allFieldList: [],
+      scopeConfigs: {},
+      isSaveConfig: false
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getPageById'
+    ]),
+    currentMetaId () {
+      return this.$query.entityId || this.pageMetaId
+    },
+    currentPage () {
+      const page = this.getPageById(this.$query.id)
+      return page
+    },
+    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
+    },
+    items () {
+      const { items = [] } = this.pageConfigs
+      return items
+    },
+    getComponentConfigs () {
+      return component => {
+        // 如果是页面 查找页面默认配置
+        const { configs = {}, flex, title } = component
+        const itemConfig = this.allComponentConfigs[component.id] || {}
+        return { ...configs, ...itemConfig, flex, componentName: title }
+      }
+    },
+    getComponentInfo () {
+      return component => {
+        const componentInfo = this.componentList.find(item => (item.componentName || item.CODE) === component.contentType) || {}
+        return { ...componentInfo }
+      }
+    },
+    getPageItems () {
+      return id => {
+        const configComponentOuter = this.$refs[`config-${id}`]
+        if (configComponentOuter) {
+          const configComponent = configComponentOuter.$refs.component
+
+          return configComponent.getConfigs()
+        }
+      }
+    }
+  },
+  provide () {
+    const { id } = this.$query
+    return {
+      pageId: id,
+      pageConfigs: this.page_config,
+      getPageMetaId: () => this.currentMetaId,
+      getItemConfigs: () => this.allComponentConfigs,
+      getDefaultContainerItems: () => this.defaultContainerItems,
+      changeItemConfigs: this.changeItemConfigs,
+      setContainerDefaultItems: this.setContainerDefaultItems,
+      getVisualComponent: this.getVisualComponent
+    }
+  },
+  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.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.getAllFieldList()
+      this.getActionList()
+      this.getRuleList()
+      this.getScopeConfigs()
+      this.getEntityRelation()
+    },
+    /**
+     * 获取组件列表
+     */
+    getAllComponents () {
+      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]
+        })
+    },
+    // getAllFieldList () {
+    //   if (!this.currentMetaId) return
+    //   this.$http.entityFieldTreeStore({
+    //     metaId: this.currentMetaId,
+    //     allSub: true,
+    //     node: 'root'
+    //   })
+    //     .then(data => {
+    //       // eslint-disable-next-line no-eval
+    //       const treeFieldStore = eval('(' + data + ')')
+    //       if (treeFieldStore && treeFieldStore[0] && treeFieldStore[0].code === this.currentMetaId) {
+    //         treeFieldStore[0].isUnFold = true
+    //         this.allFieldList = [...treeFieldStore]
+    //       }
+    //     })
+    // },
+    formatFields (arr, flag = '') {
+      arr.forEach(item => {
+        if (!item.field) item.field = flag ? flag.toUpperCase() + '|' + item.code : item.code
+        if (!item.codeKey) item.codeKey = item.relatedEntity
+        if (item.relationMeta) {
+          const { children, linkFlag, relationMetaList } = item.relationMeta
+          item.children = children
+          item.linkFlag = flag ? flag + '|' + linkFlag : linkFlag
+          if (relationMetaList) {
+            relationMetaList.forEach(meta => {
+              meta.isSub = true
+              meta.type = 'meta'
+              meta.linkFlag = item.linkFlag + '|' + meta.linkFlag
+              meta.field = item.linkFlag
+              meta.children = meta.children.map(child => ({ ...child, relationSort: '1' }))
+            })
+            item.children.push(...relationMetaList)
+          }
+        }
+        if (item.children) this.formatFields(item.children, item.linkFlag)
+      })
+    },
+    // 筛选条件字段
+    getAllFieldList (v) {
+      if (!this.currentMetaId || (v === this.pageMetaId && this.pageAllFieldList)) return
+      this.$http.get({
+        action: 'metaRelationTree',
+        entityId: 'FM_ENTITY',
+        metaId: this.currentMetaId,
+        allSub: true
+      })
+        .then(data => {
+          if (data) {
+            if (data.relationMetaList) {
+              data.relationMetaList.forEach(meta => {
+                meta.isSub = true
+                meta.type = 'meta'
+                meta.field = meta.linkFlag
+                meta.children = meta.children.map(child => ({ ...child, relationSort: '1', field: meta.linkFlag.toUpperCase() + '|' + child.code }))
+              })
+              data.children.push(...data.relationMetaList)
+            }
+            data.isMain = true
+            data.isUnFold = true
+            const fields = [data]
+            this.formatFields(fields)
+            console.log(fields)
+            if (data.id === this.currentMetaId) {
+              this.allFieldList = [...fields]
+              this.componentTreeFieldStore = [...fields]
+            }
+          }
+        })
+    },
+    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
+        })
+    },
+    // 获取对象接口
+    getActionList () {
+      this.$http.list({
+        action: 'getEntityAllApi',
+        entityId: 'FM_ENTITY_API',
+        metaId: this.currentMetaId
+      })
+        .then(data => {
+          this.actionList = data.entitys.map(item => ({ label: item.LABEL || item.NAME, value: item.NAME }))
+        })
+    },
+    // 获取对象接口
+    getRuleList () {
+      this.$http.list({
+        entityId: 'ACT_RE_MODEL',
+        'scope.ENTITY': this.currentMetaId,
+        'scope.CATEGORY': '2'
+      })
+        .then(data => {
+          this.ruleList = data.entitys.map(item => ({ label: item.NAME || item.KEY, value: item.KEY }))
+        })
+    },
+    /**
+     * 获取查询配置
+     */
+    getScopeConfigs () {
+      this.$http.list({
+        action: 'getAllSearchConfig',
+        entityId: 'FM_SEARCH_CONFIG'
+      })
+        .then(data => {
+          this.scopeConfigs = data
+        })
+    },
+    changeItemConfigs (key, configs = {}, type) {
+      if (key === 'page') {
+        this.pageGlobalConfigs = { ...this.pageGlobalConfigs, ...configs }
+      } else {
+        const itemConfig = this.allComponentConfigs[key] || {}
+        let componentConfigs = {}
+        //  'tabCount'
+        const componentAttris = ['flex', 'layout', 'direction', 'justify', 'align', 'style', 'componentName', 'span', 'xsspan', 'items', 'countScopeParams']
+        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.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]
+      }
+    },
+    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('packages/', '').replace('components/', '').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|components|packages)\//, '').replace(/\//g, '-').replace(/(\w)([A-Z])/g, '$1-$2').toLowerCase()
+        const componentName = componentPath
+
+        return componentName
+      }
+      return null
+    },
+    resetToDefautComponents () {
+      const { pageInstance = {} } = this.$query
+      const { items = [] } = pageInstance.$options || {} // 页面默认组件
+      // 获取页面默认组件
+      items.forEach(item => {
+        const selectItem = this.componentList.find(comp => comp.CODE === item.contentType)
+        const componentName = this.getVisualComponent(selectItem)
+        item.visualComponentName = componentName
+        item.componentType = selectItem.COMPONENT_TYPE
+      })
+      this.selectComponentList = [...items]
+      this.resetDCModalVisible = false
+    },
+    clickSelectComponent (component) {
+      this.scrollToComponent(component.id)
+    },
+    foldComponent (component) {
+      if (component.componentType === 'container') {
+        const componentList = [...this.selectComponentList]
+        this.setFoldComponentItem(componentList, component.id)
+        this.selectComponentList = [...componentList]
+      }
+    },
+    setFoldComponentItem (componentList, id) {
+      for (let i = 0; i < componentList.length; i++) {
+        const component = componentList[i]
+        if (component.id === id) {
+          component.fold = !component.fold
+          return component
+        } else {
+          const { items = [] } = component.configs || {}
+          if (items.length > 0) {
+            this.setFoldComponentItem(component.configs.items, id)
+          }
+        }
+      }
+    },
+    scrollToComponent (componentId) {
+      const configComponent = this.$refs[`config-${componentId}`]
+      if (configComponent) {
+        const el = configComponent.$el || configComponent
+        const configContainer = this.$refs.configContainer
+        configContainer.scrollTop = el.offsetTop - 50
+      }
+    },
+    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
+      }
+    },
+    setSelectComponent (componentList, upId, comp) {
+      for (let i = 0; i < componentList.length; i++) {
+        const component = componentList[i]
+        if (component.id === upId) {
+          if (!component.configs) component.configs = {}
+          if (!component.configs.items) component.configs.items = []
+          component.configs.items.push(comp)
+          return component
+        } else {
+          const { items = [] } = component.configs || {}
+          if (items.length > 0) {
+            this.setSelectComponent(component.configs.items, upId, comp)
+          }
+        }
+      }
+    },
+    deleteSelectComponentItem (componentList, id) {
+      for (let i = 0; i < componentList.length; i++) {
+        const component = componentList[i] || {}
+        if (component.id === id) {
+          // 如果是
+          componentList.splice(i, 1)
+        } else {
+          const { items = [] } = component.configs || this.allComponentConfigs[component.id] || {}
+          if (items.length > 0) {
+            this.deleteSelectComponentItem(items, id)
+          }
+        }
+      }
+    },
+    deleteSelectComponent (id, 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()
+    },
+    addComponentItem (ids, index, componentList, comp) {
+      const id = ids[index]
+      const componentItem = componentList.find(item => item.id === id) || {}
+      if (!componentItem.items) componentItem.items = []
+      if (index === ids.length - 1) {
+        componentItem.items.push(comp)
+      } else {
+        this.addComponentItem(ids, index + 1, componentItem.items, comp)
+      }
+    },
+    addComponent (component, upId) {
+      const newComp = {
+        id: component.id,
+        title: component.TITLE,
+        contentType: component.componentName || component.CODE
+      }
+      if (component.CONTAINER === '1') {
+        newComp.items = []
+      }
+      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()
+      }
+    },
+    changeConfigs (id, configs) {
+      const componentConfigs = this.allComponentConfigs[id] || {}
+      this.allComponentConfigs[id] = { ...componentConfigs, ...configs }
+    },
+    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
+      }
+    },
+    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)
+        }
+      })
+    },
+    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
+      this.isSaveConfig = true
+      // 添加script
+      import(/* webpackChunkName: "standalone" */'@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)
+        // T29/$children：getComponentById 返回的是 <epx-component> 包装，
+        // 真正的业务组件在它模板里带 ref="component"。Vue3 已移除 $children。
+        const inner = formComp && formComp.$refs.component
+        if (inner && inner.getFormData) {
+          formParams = inner.getFormData() || {}
+        }
+      }
+      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.$store.commit('DELETE_PAGE', { pageId: this.$query.id })
+          this.backPage({ reload: true })
+          this.isSaveConfig = false
+        })
+        .catch(err => {
+          this.$message.error(err.message || '保存失败')
+          this.isSaveConfig = false
+        })
+    },
+    renderComponent () {
+      return (
+        <div class="component-config">
+          <div class="component-container">
+            {/** 已选组件列表 */}
+            <p class="select-components__header">
+              <i class="epx-icon-component"></i>
+              <span>已选组件</span>
+            </p>
+            <div class="select-components">
+              <div class={['component-config__item', { fold: !this.showPageComponent }]}>
+                <p class="select-component-item__header" onClick={this.scrollToComponent.bind(this, 'page')}>
+                  <span>
+                    {this.currentPage.title}
+                    <i class={['el-icon-arrow-up', 'fr']} onClick={() => (this.showPageComponent = !this.showPageComponent)}></i>
+                  </span>
+                </p>
+                {this.showPageComponent && (
+                  <epx-config-select-items
+                    metaId={this.currentMetaId}
+                    all-component-list={this.componentList}
+                    component-list={this.selectComponentList}
+                    onDelete={this.deleteSelectComponent.bind(this)}
+                    onAdd={([component, upId]) => this.addComponent(component, upId)}
+                    onChangeConfigs={this.changeConfigs.bind(this)}
+                    onScrollToConfig={this.scrollToConfig}
+                  />
+                )}
+              </div>
+            </div>
+            <el-popover
+              placement="top"
+              width="160"
+              value={this.resetDCModalVisible}
+              trigger="manual"
+              v-slots={{ reference: () => (<el-button type="primary" link style={{ marginTop: '10px', color: '#999' }} onClick={() => (this.resetDCModalVisible = true)}>初始化页面组件</el-button>) }}>
+              <p>是否初始化页面组件？</p>
+              <div style="text-align: right; margin: 0">
+                <el-button size="small" type="primary" link onClick={() => (this.resetDCModalVisible = false)}>取消</el-button>
+                <el-button type="primary" size="small" onClick={this.resetToDefautComponents.bind(this)}>确定</el-button>
+              </div>
+
+            </el-popover>
+          </div>
+          <div ref="configContainer" class="component-config__container">
+            {/** 循环生成组件配置 */}
+            <epx-visual-config-item
+              ref="visualComponent"
+              metaId={this.currentMetaId}
+              all-component-list={this.componentList}
+              component-list={this.selectComponentList}
+              globalConfigs={this.pageGlobalConfigs}
+              pageActionList={this.actionList}
+              pageRuleList={this.ruleList}
+              pageAllFieldList={this.allFieldList}
+              pageRelationList={this.relationList}
+              pageParams={this.pageParams}
+              scopeConfigs={this.scopeConfigs}
+            >
+            </epx-visual-config-item>
+          </div>
+        </div>
+      )
+    },
+    /**
+     * 头部区域
+     */
+    renderHeader () {
+      return (
+        <div class="header">
+          <div class="title fl">
+            <i class="el-icon-arrow-left" onClick={this.backPage}></i>
+            <span class="">{this.currentPage.title}</span>
+          </div>
+          <div class="operate fr">
+            <el-button type="primary" size="default" onClick={this.saveConfigs.bind(this)} loading={this.isSaveConfig}>保存页面配置</el-button>
+          </div>
+        </div>
+      )
+    },
+    renderBody () {
+      return (
+        <el-tabs class="config-tabs" type="card" modelValue={this.selectTab} onTabClick={(tab) => (this.selectTab = tab.name)}>
+          <el-tab-pane lazy label="页面组件" name="component" >
+            {this.renderComponent()}
+          </el-tab-pane>
+          <el-tab-pane lazy label="全局设置" name="global">
+            <epx-page ref={captureRef(this, 'globalConfig')} metaId="FM_PAGE_CONFIG" flag="v_page_global_config" current-query={{ ...this.$query, pageType: 'EDIT' }}></epx-page>
+          </el-tab-pane>
+          {
+            this.currentMetaId && (
+              <el-tab-pane lazy label="对象信息" name="meta">
+                <epx-add-form comp-configs={{
+                  metaId: 'FM_ENTITY',
+                  pageType: 'EDIT'
+                }} pageType='EDIT' currentQuery={{ id: this.currentMetaId, pageType: 'EDIT' }}></epx-add-form>
+              </el-tab-pane>
+            )
+          }
+          <el-tab-pane lazy label="关联页面" name="page">
+            <epx-page-chart page={this.currentPage} pageConfigs={this.currentPage.config} selectComponentList={this.selectComponentList} componentList={this.componentList}></epx-page-chart>
+          </el-tab-pane>
+          <el-tab-pane lazy label="JS事件" name="js">
+            <epx-js-panel value={this.pageGlobalConfigs.JS} onChange={v => (this.pageGlobalConfigs.JS = v)}></epx-js-panel>
+          </el-tab-pane>
+        </el-tabs>
+      )
+    }
+  },
+  render (h) {
+    if (!this.loadConfig) return
+    return (
+      <div class="config">
+        { this.renderHeader() }
+        { this.renderBody() }
+      </div>
+    )
+  },
+  created () {
+    // 获取模板内容
+    this.getPageInfo()
+    this.getAllComponents()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.config {
+  width: 100%;
+  height: 100%;
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--epx-bg-card);
+  width: 100%;
+  height: 60px;
+  margin-bottom: 10px;
+  padding: 0 16px;
+  box-sizing: border-box;
+  .title {
+    font-size: var(--epx-font-size-l);
+    color: #333333;
+    i {
+      font-size: 22px;
+      position: relative;
+      top: 2px;
+      cursor: pointer;
+    }
+  }
+}
+.config-tabs {
+  height: calc(100% - 76px);
+  display: flex;
+  flex-direction: column;
+  background: var(--epx-bg-card);
+
+    :deep(.el-tabs__header) {
+      margin: 0;
+    }
+    :deep(.el-tabs__content) {
+      flex: 1;
+      .el-tab-pane {
+        height: 100%;
+        overflow: auto
+      }
+    }
+
+}
+.all-componet-container {
+  max-height: 400px;
+}
+.component-config {
+  height: 100%;
+  display: flex;
+  background: var(--epx-bg-card);
+}
+.component-config__item {
+&.fold {
+    i {
+      transform: rotate(180deg);
+    }
+    .component-config__item--content {
+      display: none;
+    }
+  }
+}
+
+.component-config__item--title {
+  padding: 6px 24px;
+  position: relative;
+  overflow: hidden;
+  font-size: var(--epx-font-size-l);
+  line-height: 36px;
+  &::after {
+    content: '';
+    position: absolute;
+    left: -24px;
+    bottom: 0;
+    width: calc(100% + 48px);
+    height: 1px;
+    background: #e3e3e3;
+  }
+  i {
+    @include font_color_primary;
+    font-size: var(--epx-font-size-xl);
+    float: right;
+    cursor: pointer;
+    transition: all .5s;
+    line-height: 36px;
+  }
+
+}
+.component-config__item--border{
+  border-left: 3px solid;
+  @include border_color_primary;
+  padding-left: 6px;
+}
+.component-container {
+  width: 260px;
+  height: 100%;
+  background: var(--epx-bg-card);
+  padding: 0 32px;
+  border-right: 1px solid #e3e3e3;
+  overflow: auto;
+}
+.select-components__header {
+  @include font_color_primary;
+  font-size: var(--epx-font-size-l);
+  line-height: 30px;
+  padding: 16px 0;
+  i {
+    font-size: 30px;
+    margin-right: 8px;
+    line-height: 1;
+    position: relative;
+    top: 4px;
+  }
+}
+.el-icon-arrow-up {
+  cursor: pointer;
+}
+
+.component-config__container {
+  flex: 1;
+  overflow: auto;
+}
+
+.button-group {
+  margin: 16px 0;
+  text-align: center;
+}
+.page-global__config {
+  padding: 16px ;
+}
+</style>