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

package/src/components/PageCatalog.vue

@@ -0,0 +1,458 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+// import component from '@epxing/core/src/mixins/component'
+import AddForm from '@epxing/components/src/add-form'
+import shallowSame from '@epxing/core/src/shallow-same'
+export default {
+  name: 'epx-page-catalog',
+  // mixins: [component],
+  mixins: [AddForm],
+  data () {
+    return {
+      catalogComponent: {},
+      compElemMap: {},
+      activeItem: null,
+      activeIndex: null,
+      scrollTop: 0,
+      // compElemArr: [],
+      catalogComponentConfigs: {},
+      loadComponents: {},
+      catalogList: []
+    }
+  },
+  // computed: {
+  //   operates () {
+  //     const { operates = [] } = this.$configs
+  //     return operates
+  //   }
+  // },
+  methods: {
+    getComponents (items, upId = '') {
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i]
+        const id = !this.$configVersion && upId ? (upId + '-' + item.id) : item.id
+        if (id === this.$component.id) {
+          // 获取其下一个组件
+          // if (i + 1 < items.length) {
+          const catalogComponent = item
+          const compId = !this.$configVersion && upId ? (upId + '-' + catalogComponent.id) : catalogComponent.id
+          catalogComponent.compId = compId
+          catalogComponent.upId = upId
+          return catalogComponent
+          // }
+        } else {
+          if (item.items) {
+            const comp = this.getComponents(item.items, item.id)
+            if (comp) return comp
+          }
+        }
+      }
+    },
+    getCompElems (vnode) {
+      const { items = [] } = this.catalogComponent
+      const compElems = []
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i]
+        if (item.items) {
+          for (let i = 0; i < item.items.length; i++) {
+            const child = item.items[i]
+            const elemId = !this.$configVersion && this.loadComponents[child.id].upId ? this.loadComponents[child.id].upId + '-' + child.id : child.id
+            const elem = this.$getPageComponent(elemId)
+            if (!elem) return null
+            compElems.push({ elem, item: child, upId: item.id })
+          }
+        } else {
+          const elemId = !this.$configVersion && this.loadComponents[item.id].upId ? this.loadComponents[item.id].upId + '-' + item.id : item.id
+          const elem = this.$getPageComponent(elemId)
+          if (!elem) return null
+          compElems.push({ elem, item })
+        }
+      }
+      return compElems
+    },
+    flatten (ary) {
+      return ary.reduce((pre, cur) => {
+        // item
+        return pre.concat(cur, Array.isArray(cur.items) ? this.flatten(cur.items) : [])
+      }, [])
+    },
+    addScrollListener () {
+      // if (this.upPage) {
+      // const scrollContainer = this.upPage.$refs.container
+      const scrollContainer = this.$refs.scroll
+      if (scrollContainer) {
+        scrollContainer.addEventListener('scroll', () => {
+          const scrollTop = scrollContainer.scrollTop
+          this.scrollTop = scrollTop
+          if (!this.compElemArr) {
+            this.compElemArr = this.getCompElems()
+            return
+          }
+          const distance = []
+          this.compElemArr.forEach(item => {
+            distance.push({
+              ...item,
+              dis: Math.abs(item.elem.$el.offsetTop - 130 - scrollTop)
+            })
+          })
+          distance.sort((a, b) => a.dis - b.dis)
+          const item = distance[0].item
+          this.activeIndex = item.id
+          // 指定元素选中
+          if (item.id) {
+            this.activeItem = item.id
+            if (distance[0].upId) {
+              if (this.$refs.menu) this.$refs.menu.open(distance[0].upId)
+            }
+          }
+        })
+      }
+      // }
+    },
+    compAnchor (id) {
+      // 获取组件所在位置
+      // this.activeItem = id
+      let elem = null
+      // const elem = this.$getPageComponent(id)
+      if (this.compElemMap[id]) {
+        elem = this.compElemMap[id]
+      } else if (this.compElemArr) {
+        const component = this.compElemArr.find(item => {
+          return item.item.id === id
+        })
+        elem = component.elem
+        if (elem) {
+          this.compElemMap[id] = elem
+          // this.$refs.scroll.scrollTop = elem.$el.offsetTop - 60
+        }
+      } else {
+        const elemId = !this.$configVersion && this.loadComponents[id].upId ? this.loadComponents[id].upId + '-' + id : id
+        elem = this.$getPageComponent(elemId)
+        this.compElemMap[id] = elem
+        // this.$refs.scroll.scrollTop = elem.$el.offsetTop - 60
+      }
+      this.$refs.scroll.scrollTop = elem.$el.offsetTop - 120
+    },
+    renderNavButton () {
+      // <el-button type="primary">提交个人材料</el-button>
+      if (this.operates.length > 0) {
+        return (
+          <div class="nav-btn">
+            {
+              this.operates.map(operate => (
+                <el-button size="default" key={operate.text} type={operate.ui} onClick={this.$handler.bind(this, operate, null)}>
+                  { operate.icon && <i class={['operate-icon', operate.icon]}></i>}
+                  {operate.text}
+                </el-button>
+              ))
+            }
+          </div>
+        )
+      }
+    },
+    renderNav () {
+      return (
+        <div class="form-nav">
+          {this.renderNavButton()}
+          <el-menu ref="menu" class="menu-con">
+            {this.renderNavItem([...this.$component.items])}
+          </el-menu>
+        </div>
+      )
+    },
+    renderNavItem (components) {
+      return components.map(item => {
+        if (item.items && item.items.length > 0) {
+          return (
+            <el-sub-menu class="nav-submenu" index={item.id} v-slots={{
+              // JSX 里必须用 v-slots 传具名插槽，v-slot 不生效（分组名会渲染不出来）
+              title: () => <span class="nav-submenu__title">{item.title}</span>
+            }}>
+              {this.renderNavItem(item.items)}
+            </el-sub-menu>
+          )
+        } else {
+          return (
+            <el-menu-item onClick={this.switchComponent.bind(this, item.id, item)} class={ this.activeIndex === item.id ? 'menu-item-active nav-menu-item' : 'nav-menu-item'} index={item.id}>{item.title}</el-menu-item>
+          )
+        }
+      })
+    },
+    renderContent () {
+      return (
+        <div class="nav-form-content">{
+          Object.keys(this.loadComponents).map(key => (
+            <div>
+              { this.loadComponents[key].items && this.loadComponents[key].items.length > 0
+                ? this.loadComponents[key].items.map(item => this.renderContentItem(this.$configVersion ? item.id : key + '-' + item.id, item))
+                : this.renderContentItem(key, this.loadComponents[key])
+              }
+            </div>
+          ))}
+        </div>
+      )
+    },
+    renderContentItem (id, component) {
+      return (
+        <div
+          class={['field-item', { 'm-field-item': this.$isMobile }, { fold: this.foldList.includes('comp-' + id) }]}
+          key={id}
+        >
+          <div class="form-content">
+            {/** 备注说明 */}
+            { this.renderComponent(id, component)}
+          </div>
+        </div>
+      )
+    },
+    // comp-configs / onGetComponent 必须身份稳定，理由见
+    // AddForm.getCompBindings 上的注释（本组件同样是「切过的分组不卸载、
+    // 父组件一重渲染全都跟着重渲染」的结构）。缓存键用渲染槽 id。
+    getCatalogCompBindings (id, component) {
+      const cache = this._catalogCompBindings || (this._catalogCompBindings = Object.create(null))
+      const hit = cache[id]
+      if (hit && hit.metaId === this.$metaId && shallowSame(hit.configsSrc, component.configs)) return hit
+      const entry = {
+        configsSrc: component.configs ? { ...component.configs } : component.configs,
+        metaId: this.$metaId,
+        compConfigs: { metaId: this.$metaId, ...component.configs },
+        onGetComponent: v => this.getComponent(component.id, v)
+      }
+      cache[id] = entry
+      return entry
+    },
+    renderComponent (id, component) {
+      const bind = this.getCatalogCompBindings(id, component)
+      return (
+        <epx-component
+          ref={'component-' + component.id}
+          name={component.contentType}
+          { ...component }
+          compId={this.$configVersion ? id : component.upId + '-' + id}
+          compTitle={component.title}
+          contentType={component.contentType}
+          comp-configs={bind.compConfigs}
+          items={component.items}
+          formData={this.data}
+          showTitle={true}
+          pageType={this.editComponent && this.editComponent.id === component.id ? 'EDIT' : this.pageType}
+          formConfigs={this.$configs}
+          form={this}
+          field-relations={this.fieldRelations}
+          onGetComponent={bind.onGetComponent}
+        ></epx-component>
+      )
+    },
+    getFirstIndex (items, upId) {
+      items.forEach(item => {
+        const firstItem = { ...item, upId }
+        const compId = !this.$configVersion ? firstItem.upId + '-' + firstItem.id : firstItem.id
+        if (this.catalogComponentConfigs[compId]) {
+          firstItem.configs = this.catalogComponentConfigs[compId]
+        }
+        if (firstItem.items && firstItem.items.length > 0) {
+          return this.getFirstIndex(firstItem.items, compId)
+        } else {
+          this.loadComponents[firstItem.id] = firstItem
+          return firstItem.id
+        }
+      })
+    },
+    switchComponent (id, component) {
+      this.activeIndex = id
+      this.compAnchor(id)
+    }
+  },
+  created () {
+    this.catalogComponentConfigs = { ...this.upPage.$component.itemConfigs }
+    // 获取目录
+    // const { items = [] } = this.$component
+    const { items = [] } = this.upPage.$component
+    this.catalogComponent = this.getComponents(items)
+    this.getFirstIndex(this.catalogComponent.items, this.$component.id)
+  },
+  mounted () {
+    this.addScrollListener()
+  },
+  render () {
+    if (!this.data || !this.fieldScope) return
+    return (
+      <div class="page-container">
+        <div class="nav-menu">
+          {this.renderNav()}
+        </div>
+        <div class="content" ref="scroll">
+          { this.renderContent() }
+        </div>
+      </div>
+    )
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+  // height: 100%;
+  display: flex;
+  height: 80vh;
+}
+.content{
+  margin-left: 10px;
+  height: 100%;
+  overflow: auto;
+  // background-color: var(--epx-bg-card);
+}
+.nav-menu {
+  border-right: 0;
+  >.nav-submenu:first-child {
+
+      :deep(>.el-sub-menu__title) {
+        font-weight: bold;
+      }
+
+  }
+  // position: relative;
+  // z-index: 1;
+  // top: 140px;
+}
+.form-nav{
+  width: 280px;
+  margin-right: 10px;
+  flex-shrink: 0;
+  background: var(--epx-bg-card);
+}
+.menu-con{
+  padding-bottom: 20px;
+  border-right: none;
+}
+.nav-submenu{
+
+    :deep(.el-sub-menu__title) {
+      height: 48px;
+      line-height: 48px;
+    }
+
+}
+.nav-submenu__title {
+  font-size: var(--epx-font-size-l);
+}
+.nav-menu-item {
+  height: 40px;
+  line-height: 40px;
+  position: relative;
+
+    &.is-active {
+      background: none;
+      border: none;
+      color: var(--epx-text);
+    }
+
+  &.active {
+    @include font_color_primary;
+    @include bg_color_primary(.2);
+     &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        width: 0;
+        height: 100%;
+        border-left: 2px solid;
+        @include border_color_primary;
+        @include bg_color_primary(.2)
+      }
+  }
+}
+.nav-menu-item.menu-item-active {
+    @include font_color_primary;
+    @include bg_color_primary(.2);
+     &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        width: 0;
+        height: 100%;
+        border-left: 2px solid;
+        @include border_color_primary;
+        @include bg_color_primary(.2)
+      }
+  }
+.field-item {
+  margin-bottom: 16px;
+  &.fold {
+    i {
+      transform: rotate(180deg);
+    }
+    .form-content {
+      display: none;
+    }
+  }
+}
+.form-title {
+  background: var(--epx-bg-card);
+  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: var(--epx-border);
+  }
+  .form-title-fold__icon {
+    @include font_color_primary;
+    font-size: var(--epx-font-size-xl);
+    cursor: pointer;
+    transition: all .5s;
+    line-height: 36px;
+    margin-left: 10px;
+  }
+}
+.form-tilte__simple {
+  margin-bottom: -20px;
+  padding: 6px 12px 0;
+  &::after {
+    display: none;
+  }
+  .form-title-border {
+    border: 0;
+    padding-left: 0;
+  }
+  .form-title__operate {
+    display: none;
+  }
+  .form-title-fold__icon {
+    display: none;
+  }
+}
+.form-title-border{
+  border-left: 3px solid;
+  @include border_color_primary;
+  padding-left: 6px;
+}
+
+.form-title-edit {
+  font-size: var(--epx-font-size-base);
+  line-height: 36px;
+  cursor: pointer;
+  @include font_color_primary;
+  i {
+    margin-right: 4px;
+  }
+}
+.nav-btn{
+  padding: 10px 0 0;
+  text-align: center;
+  .el-button{
+    width: 80%;
+    margin: 0;
+    margin-bottom: 10px;
+  }
+  border-bottom: 1px solid var(--epx-border);
+}
+</style>