epx-frame 3.5.0-shpgy.1

package/src/frame/packages/org-chart/OrgChart.vue

@@ -0,0 +1,301 @@
+<template>
+  <div class="container">
+    <el-radio-group class="layout" size="medium" v-model="layout">
+      <el-radio-button label="t2b">{{$t('up and down the layout')}}</el-radio-button>
+      <el-radio-button label="l2r">{{$t('left and right the layout')}}</el-radio-button>
+    </el-radio-group>
+    <organization-chart v-if="load" :class="['org-chart', layout]" :datasource="data" :pan="true" :zoom="true">
+      <template slot-scope="{ nodeData }">
+        <!-- feel free to customize the internal structure of node -->
+        <div class="org-node">
+          <div class="org-node__title">
+            <span>{{nodeData.text}}</span>
+          </div>
+          <div class="org-node__operate">
+            <i class="el-icon-circle-plus-outline" @click="openAddDrawer(nodeData)"></i>
+            <i class="el-icon-edit-outline" v-if="nodeData.editable!==false" @click="openEditDrawer(nodeData)"></i>
+            <el-popconfirm
+              v-if="nodeData.editable!==false"
+              @confirm="deleteData(nodeData)"
+              :title="$t('You confirm to delete') + '?'"
+            >
+              <i slot="reference" class="el-icon-circle-close" ></i>
+            </el-popconfirm>
+          </div>
+        </div>
+      </template>
+    </organization-chart>
+    <el-drawer
+      :title="$t('new add agency')"
+      custom-class="org-chart__drawer"
+      :visible.sync="drawer"
+      direction="rtl"
+      :withHeader="false"
+      :before-close="handleClose"
+    >
+      <!-- 新增页面 -->
+      <div class="drawer-body">
+        <epx-add-form
+          ref="addForm"
+          v-if="drawer"
+          :current-query="{id: editId, defaultValue}"
+          :comp-configs="{
+            pageType: editId?'EDIT': 'ADD',
+            column:1,
+            operateFlag: false,
+            items: [{
+              title: this.$t('basic information'),
+              id: 'form-base',
+              contentType: 'add-form-item',
+              configs: $configs
+            }]
+          }"
+        >
+        </epx-add-form>
+        <div class="button-group">
+          <el-button class="button" size="medium" type="primary" @click="save">{{$t('save')}}</el-button>
+          <el-button class="button" size="medium" @click="handleClose">{{$t('cancel')}}</el-button>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import component from '@/utils/mixins/component'
+import OrganizationChart from 'vue-orgchart-direction'
+import 'vue-orgchart-direction/dist/orgchart.css'
+export default {
+  name: 'epx-org-chart',
+  mixins: [component],
+  components: { OrganizationChart },
+  orgDirection: 't2b',
+  data () {
+    return {
+      data: {},
+      editId: null,
+      drawer: false,
+      defaultValue: null,
+      layout: 't2b',
+      load: true
+    }
+  },
+  watch: {
+    layout (v) {
+      this.load = false
+      this.$nextTick(() => {
+        this.load = true
+      })
+    }
+  },
+  methods: {
+    getData () {
+      const { queryParams = {}, parentField = [] } = this.configs
+      this.$http.getTree({
+        entityId: this.$metaId,
+        ...this.orderParams,
+        ...this.$formatParams(queryParams),
+        node: 'root',
+        up_field: parentField[0]
+      })
+        .then(data => {
+          if (data.length > 1) {
+            this.data = {
+              text: this.$meta.name,
+              editable: false,
+              children: data
+            }
+          } else {
+            this.data = data[0]
+          }
+        })
+    },
+    openEditDrawer (data) {
+      this.editId = data.id
+      this.drawer = true
+    },
+    getUpLabel (data, id) {
+      for (let i = 0; i < data.length; i++) {
+        const item = data[i]
+        if (item.id === id) {
+          return item
+        } else if (item.children && item.children.length > 0) {
+          const up = this.getUpLabel(item.children, id)
+          if (up) return up
+        }
+      }
+    },
+    openAddDrawer (data) {
+      const { attributes = {} } = this.$meta
+      const upField = Object.values(attributes).find(item => item.relatedEntity === this.$meta.id)
+      if (upField) {
+        // 获取字段上级名称
+        this.defaultValue = {
+          [upField.name]: data.id,
+          [upField.name + '#']: data.text
+        }
+      // 传递默认值
+      }
+      this.drawer = true
+    },
+    save () {
+      this.$event.emit('submitForm', {}, () => {
+        this.getData()
+        this.handleClose()
+      })
+    },
+    handleClose () {
+      this.defaultValue = null
+      this.editId = null
+      this.drawer = false
+    },
+    deleteData (data) {
+      this.$http.removeMulti({
+        entityId: this.$metaId,
+        ids: data.id
+      })
+        .then(() => {
+          this.$message.success(this.$t('deleted successfully'))
+          this.getData()
+        })
+    }
+  },
+  created () {
+    this.getData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  .layout {
+    margin-bottom: 10px;
+  }
+  &::v-deep {
+    .org-chart__drawer {
+      .el-drawer__body {
+        height: 100%;
+        padding-bottom: 50px;
+        box-sizing: border-box;
+      }
+    }
+    .orgchart-container {
+      box-sizing: border-box;
+      height: calc(100% - 56px);
+      min-height: 320px;
+      overflow: hidden;
+      background: #fff;
+      .node:hover {
+        background: none;
+      }
+      .downLine {
+        width: 1px;
+         background: #ccc;
+       }
+
+       .leftLine, .topLine {
+        border-width: 1px;
+        border-color: #ccc;
+      }
+      .rightLine {
+         border-right: 1px solid transparent;
+       }
+       .orgchart {
+         background-image:linear-gradient(90deg,rgba(180,0,0,.1) 10%,transparent 0),linear-gradient(rgba(180,0,0,.1) 10%,transparent 0);
+       }
+    }
+  }
+}
+.org-chart.l2r {
+  position: relative;
+  &::v-deep {
+    .orgchart {
+      position: absolute;
+      left: 0;
+      top: 0;
+      transform: rotate(-90deg) rotateY(180deg);
+      transform-origin: left top;
+    }
+    .node {
+      width:50px;
+      height: 130px;
+    }
+  }
+  .org-node {
+    width: 130px;
+    transform: rotate(-90deg) translate(-20px,-40px) rotateY(180deg);
+    transform-origin: bottom center;
+  }
+}
+.org-node {
+  padding: 0 16px;
+  position: relative;
+  &:hover {
+    .org-node__title {
+       box-shadow: 2px 2px 5px 5px rgba(0,0,0,.2) ;
+    }
+    .org-node__operate {
+      display: flex;
+    }
+  }
+}
+.org-node__title {
+    cursor: pointer;
+    @include bg_color_primary;
+    color: #fff;
+    border: 1px solid;
+    @include border_color_primary;
+    font-size: 13px;
+    height: 40px;
+    line-height: 38px;
+    padding-top: 0;
+    padding-bottom: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    border-radius: 4px;
+}
+.org-node__operate {
+  position: absolute;
+  right:  -12px;
+  top: 0;
+  top: -50%;
+  color: #bbbec4;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 80px;
+  i {
+    display: block;
+    font-size: 20px;
+    padding: 2px 0;
+    cursor: pointer;
+  }
+}
+.button-group {
+    position: absolute;
+    height: 50px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 3;
+    background: #fff;
+    box-shadow: 0 -2px 16px rgba(0 ,0 ,0 , .1);
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  .button {
+    margin: 0 16x;
+  }
+
+}
+.drawer-body {
+  height: 100%;
+  overflow: auto;
+}
+</style>

package/src/frame/packages/org-chart/index.js

@@ -0,0 +1,8 @@
+import OrgChart from './OrgChart.vue'
+
+/* istanbul ignore next */
+OrgChart.install = function install (Vue) {
+  Vue.component(OrgChart.name, OrgChart)
+}
+
+export default OrgChart

package/src/frame/packages/page/Page.vue

@@ -0,0 +1,322 @@
+
+<template>
+  <div class="page" v-loading="loading">
+    <epx-header-nav ref="header" :title="headerTitle" v-if="showNav && !isTabItem && !inline && !loading" v-on="$listeners" :page="currentPage" :meta="currentMeta" />
+    <!-- 判断组件类型 -->
+    <keep-alive>
+      <component class="page-container" v-if="!loading" ref="component" is-page :is="componentName" @change-header="changeHeader"
+          v-bind="{...$attrs, inline}"
+          v-on="$listeners"
+        :currentQuery="currentQuery" :page="currentPage" :meta="currentMeta" :queryParams="queryParams"></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+import { mapState, mapGetters } from 'vuex'
+import { global } from '@/utils/mixins'
+export default {
+  name: 'epx-page',
+  mixins: [global],
+  props: {
+    type: {
+      type: String,
+      default: 'page'
+    },
+    query: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    metaId: {
+      type: String,
+      default () {
+        const { query = {} } = this.$route || {}
+        const { metaId } = query
+        return metaId
+      }
+    },
+    flag: {
+      type: String
+    },
+    pageId: {
+      type: String
+    },
+    component: {
+      type: String,
+      default () {
+        const { query = {} } = this.$route || {}
+        const { component } = query
+        return component
+      }
+    },
+    queryParams: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    isTabItem: {
+      type: Boolean,
+      default () {
+        return false
+      }
+    },
+    // 获取是否显示title
+    inline: {
+      type: Boolean,
+      default () {
+        return false
+      }
+    }
+  },
+  inheritAttrs: false,
+  data () {
+    return {
+      componentName: null,
+      loading: true,
+      componentConfig: {}, // 子节点配置
+      pageId_: this.pageId,
+      flag_: this.flag,
+      metaId_: this.metaId
+    }
+  },
+  computed: {
+    ...mapState({
+      pages: state => state.page.configs,
+      metas: state => state.meta.metas
+    }),
+    ...mapGetters([
+      'getPageByMetaId',
+      'getPageById',
+      'getMeta'
+    ]),
+    currentPage () {
+      let page = null
+      // 从query里获取
+      if (this.pageId_) {
+        page = this.getPageById(this.pageId_)
+      } else if (this.flag_) {
+        page = this.getPageByMetaId(this.metaId_, this.flag_)
+      }
+      return page
+    },
+    currentMeta () {
+      const metaId = this.metaId_
+      return this.getMeta(metaId) || null
+    },
+    // 导航栏配置
+    navConfigs () {
+      if (this.componentConfig) {
+        const page = this.currentPage || {}
+        const { navConfigs = {} } = this.$_.isEmpty(this.componentConfig) ? (page.config || {}) : this.componentConfig
+        return navConfigs
+      }
+      return null
+    },
+    navTitle () {
+      if (this.componentConfig) {
+        const page = this.currentPage || {}
+        const { navTitle = [] } = this.$_.isEmpty(this.componentConfig) ? (page.config || {}) : this.componentConfig
+        return navTitle[0]
+      }
+      return null
+    },
+    // 是否显示导航栏
+    showNav () {
+      if (this.navConfigs) {
+        // const tab = this.isTab
+        const { flag = false } = this.navConfigs
+        return flag
+      }
+      return false
+    },
+    headerTitle () {
+      const { title: queryTitle } = this.$query
+      const { title = queryTitle } = this.navConfigs || {}
+      const page = this.currentPage || {}
+      const meta = this.currentMeta || {}
+      return title || this.navTitle || (page.config && page.config.title) || page.label || meta.name
+    }
+  },
+  watch: {
+    currentPage: {
+      handler (page) {
+        if (page) {
+          const { pagePath } = page
+          // 获取组件
+          if (pagePath) {
+            this.getComponent(pagePath)
+          }
+        }
+      },
+      deep: true
+    },
+    loading (v) {
+      this.$emit('load', { page: this.currentPage, meta: this.currentMeta, component: this.$refs.component })
+    },
+    componentName (name) {
+      console.info(name)
+    }
+  },
+  methods: {
+    getPage () {
+      // pageId/metaId+flag
+      const { query = {} } = this.$route || {}
+      const { component } = query
+      if (!this.pageId_ && !this.flag_) {
+        if (!this.currentMeta && this.metaId_) this.getMetaByMetaId(this.metaId_)
+        if (!this.metaId_ || (this.currentMeta && this.metaId_)) this.loading = false
+        this.componentName = 'epx-' + this.component || component
+        return
+      }
+      this.$store.dispatch({ // 加回调
+        type: 'ADD_PAGE',
+        pageId: this.pageId_,
+        metaId: this.metaId,
+        flag: this.flag_
+      })
+        .then(page => {
+          const { metaId = '' } = this.currentPage || page
+          if (metaId) this.metaId_ = metaId
+
+          if (this.metaId_) {
+            // 获取meta信息
+            if (!this.currentMeta) {
+              this.getMetaByMetaId(this.metaId_)
+            } else {
+              this.loading = false
+            }
+          } else {
+            this.loading = false
+          }
+        })
+        .catch(() => {
+          // 获取meta信息
+          if (!this.currentMeta && this.metaId_) this.getMetaByMetaId(this.metaId_)
+          if (!this.metaId_ || (this.currentMeta && this.metaId_)) this.loading = false
+          this.componentName = 'epx-' + this.component || component
+        })
+    },
+    getMetaByMetaId (metaId) {
+      if (!metaId) return
+      this.$store.dispatch({ // 加回调
+        type: 'ADD_META',
+        metaId: metaId || this.metaId_
+      })
+        .then(data => {
+          if ((metaId || this.metaId_).includes('@')) this.metaId_ = data.id
+          this.loading = false
+        })
+        .catch(() => {
+          this.loading = false
+        })
+    },
+    getComponent (pagePath) {
+      this.componentName = this.$loadComponent(pagePath, this.component)
+    },
+    changeHeader (v) {
+      if (this.$refs.header) {
+        this.$refs.header.onChange(v)
+      }
+    }
+  },
+  created () {
+    this.delay = this.$_.debounce(pageConfig => {
+      this.componentConfig = pageConfig
+    }, 100, {
+      leading: true
+    })
+    if (!this.pageId_ && !this.flag_) {
+      // 从query获取flag 标识符
+      const { flag, pageId } = this.currentQuery
+      if (pageId) {
+        this.pageId_ = this.currentQuery.pageId
+      } else if (flag) {
+        this.flag_ = flag
+      } else {
+        const { pageId, flag } = this.$route.query
+        this.pageId_ = pageId
+        this.flag_ = flag
+      }
+    }
+
+    const { metaId } = this.currentPage || {}
+    if (metaId) {
+      this.metaId_ = metaId
+    }
+    if (this.currentPage) {
+      if (this.currentMeta) {
+        const { pagePath } = this.currentPage
+        this.getComponent(pagePath)
+        this.loading = false
+      } else if (!(this.metaId_)) {
+        const { pagePath, metaId } = this.currentPage
+        if (metaId) this.metaId_ = metaId
+        if (this.metaId_) {
+          // 获取meta信息
+          this.getMetaByMetaId(this.metaId_)
+        }
+        this.getComponent(pagePath)
+        this.loading = false
+      } else if (this.metaId_) {
+        const { pagePath } = this.currentPage
+        // 获取meta信息
+        this.getMetaByMetaId(this.metaId_)
+        this.getComponent(pagePath)
+      }
+    }
+    // 获取配置
+    if (!this.currentPage && this.type === 'page') this.getPage()
+    if (this.type === 'component') {
+      this.componentName = 'epx-' + this.component
+      if (this.currentMeta) {
+        this.loading = false
+      }
+    }
+
+    // 获取对应组件、生成页面
+  },
+  mounted () {
+    if (this.$refs.component) {
+      const { pageConfig = {} } = this.$refs.component
+      this.delay(pageConfig)
+    }
+  },
+  updated () {
+    if (this.$refs.component) {
+      const { pageConfig = {} } = this.$refs.component
+      // pageConfig有修改
+      if (!this.$_.isEqual(pageConfig, this.componentConfig)) {
+        this.delay(pageConfig)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.page {
+  width:100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.menu {
+  width: 320px;
+  flex-shrink: 0;
+  background: #fff
+}
+.content {
+  flex: 1;
+  padding: 16px;
+}
+.page-container {
+  width: 100%;
+  flex: 1;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+}
+</style>

package/src/frame/packages/page/index.js

@@ -0,0 +1,8 @@
+import Page from './Page.vue'
+
+/* istanbul ignore next */
+Page.install = function install (Vue) {
+  Vue.component(Page.name, Page)
+}
+
+export default Page

package/src/frame/packages/page-help/PageHelp.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="help" :style="$component.style">
+    <span v-html="pageHelp"></span>
+  </div>
+</template>
+
+<script>
+import component from '@/utils/mixins/component'
+export default {
+  name: 'epx-page-help',
+  mixins: [component],
+  computed: {
+    pageHelp () {
+      if (this.upPage && this.upPage.page) {
+        return this.upPage.page.help || ''
+      }
+      return ''
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.help {
+  background: #fff;
+  padding: 10px 12px;
+}
+</style>

package/src/frame/packages/page-help/Preview.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="help">
+    <span v-html="pageHelp"></span>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'epx-page-help--preview',
+  inject: ['pageId'],
+  computed: {
+    ...mapGetters([
+      'getPageById'
+    ]),
+    currentPage () {
+      const page = this.getPageById(this.pageId)
+      return page || {}
+    },
+    pageHelp () {
+      if (this.currentPage) {
+        return this.currentPage.help || ''
+      }
+      return ''
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.help {
+  background: #fff;
+  padding: 10px 12px;
+}
+</style>

package/src/frame/packages/page-help/index.js

@@ -0,0 +1,8 @@
+import PageHelp from './PageHelp.vue'
+
+/* istanbul ignore next */
+PageHelp.install = function install (Vue) {
+  Vue.component(PageHelp.name, PageHelp)
+}
+
+export default PageHelp