epx-frame 3.5.0-shpgy.1

package/src/frame/packages/m-entity-tree-find/MEntityTreeFind.vue

@@ -0,0 +1,339 @@
+<script>
+import { mapGetters } from 'vuex'
+import component from '@/utils/mixins/component'
+export default {
+  name: 'epx-m-entity-tree-find',
+  mixins: [component],
+  props: {
+    cancel: Function,
+    fieldConfig: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    change: {
+      type: Function
+    },
+    multiple: { // 是否多选
+      type: Boolean,
+      default: false
+    },
+    value: {
+      // type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      renderComponents: [this.renderHeader, this.renderSearch, this.renderTree, this.renderFooter],
+      treeData: null,
+      selection: [],
+      filterText: ''
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getCodeById',
+      'getTreeById',
+      'getTreeCountById'
+    ]),
+    isSearch () {
+      const { state } = this.fieldConfig || {}
+      return state === 'SEARCH'
+    },
+    data () {
+      const { expand } = this.$configs
+      const { codeKey = this.$metaId, upId } = this.fieldConfig || {}
+      if (this.dataType === 'treeList') {
+        let codes = this.getCodeById(codeKey)
+        if (upId) {
+          codes = this.getChildrenById(codes, upId)
+        }
+        if (codes && expand === 'first' && !this.defaultValue) {
+          const firstCode = codes[0]
+          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+          if (firstCode) this.defaultExpandedKeys = [firstCode.code]
+        }
+        return codes || []
+      } else {
+        if (this.treeData && expand === 'first' && !this.defaultValue) {
+          const firstCode = this.treeData[0]
+          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+          if (firstCode) this.defaultExpandedKeys = [firstCode.id]
+        }
+        return this.treeData || []
+      }
+    },
+    isTreeList () {
+      return this.dataType === 'treeList'
+    },
+    nodeKey () {
+      return this.isTreeList ? 'code' : 'id'
+    },
+    dataType () {
+      const { dataType, attribute = {} } = this.fieldConfig || {}
+      const { optionType, datePrecision } = attribute
+      if (dataType === 'list') {
+        return optionType || dataType
+      }
+      if (dataType === 'date') {
+        return datePrecision || dataType
+      }
+      return dataType
+    }
+  },
+  wtach: {
+    filterText (val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  methods: {
+    formatData (data) {
+      const { onlySelectLeaf } = this.fieldConfig
+      data.forEach(item => {
+        item.name = item.text
+        if (onlySelectLeaf) {
+          item.disabled = !item.leaf
+        }
+        if (item.children) {
+          this.formatData(item.children)
+        }
+      })
+    },
+    getData () {
+      const { codeKey = this.$metaId, upId, showLevel } = this.fieldConfig
+      const { queryParams = {} } = this.$configs
+      // 请求
+      if (this.dataType === 'treeList') {
+        if (!this.getCodeById(codeKey)) {
+          this.$store.dispatch('ADD_LIST', {
+            dataType: 'treeList',
+            key: codeKey,
+            upId
+          })
+        }
+      } else {
+        if (!this.treeData) {
+          // 获取
+          const params = { entityId: codeKey }
+          if (showLevel) params.showLevel = showLevel
+          this.$http.getTree({
+            ...params,
+            ...this.$formatParams(queryParams)
+          })
+            .then(data => {
+              this.formatData(data)
+              this.treeData = data
+            })
+        }
+      }
+      // 设置默认选中
+    },
+    confirm () {
+      const result = this.selection.map(item => ({ id: item[this.nodeKey], name: item.text || item.name }))
+      this.change(result)
+    },
+    nodeCheckChange (item) {
+      const checkNodes = this.$refs.tree.getCheckedNodes()
+      if (!this.multiple && checkNodes.length > 1) {
+        this.$refs.tree.setCheckedKeys([])
+        this.$refs.tree.setChecked(item[this.nodeKey], true)
+      }
+      this.selection = [...checkNodes]
+    },
+    nodeClick (item, e) {
+      const { onlySelectLeaf } = this.fieldConfig
+      if (onlySelectLeaf && !item.leaf) return
+      const index = this.selection.findIndex(select => select[this.nodeKey] === item[this.nodeKey])
+      if (index === -1) {
+        if (this.multiple) {
+          this.$refs.tree.setChecked(item[this.nodeKey], true)
+        } else {
+          this.$refs.tree.setCheckedKeys([])
+          this.$refs.tree.setChecked(item[this.nodeKey], true)
+        }
+      } else {
+        this.$refs.tree.setChecked(item[this.nodeKey], false)
+      }
+    },
+    expandNode (item, e) {
+      e.stopPropagation()
+      this.defaultExpandedKeys = [item[this.nodeKey]]
+
+      const node = e.target.parentNode.parentNode
+      const expandIcon = node.querySelector('.el-tree-node__expand-icon')
+      expandIcon.click()
+    },
+    getChildrenById (codes, id) {
+      for (let i = 0; i < codes.length; i++) {
+        const code = codes[i]
+        if (code.code === id) {
+          return code.children
+        }
+        if (code.children) {
+          this.getChildrenById(code.children, id)
+        }
+      }
+    },
+    renderHeader () {
+      return (
+        <van-nav-bar
+          title={this.title}
+          left-text=""
+          right-text=""
+          left-arrow
+          onClick-left={this.cancel}
+        />
+      )
+    },
+    filter () {
+      this.$refs.tree.filter(this.filterText)
+    },
+    filterNode (value, data) {
+      if (!value) return true
+      return (data.name || data.text).indexOf(value) !== -1
+    },
+    treeNodeRender (h, { node, data, store }) {
+      return (
+        <span class="tree-node">
+          <span>{ data.name }</span>
+          { data.children && data.children.length > 0 && <i onClick={this.expandNode.bind(this, data)} class="fr tree-node__icon el-icon-arrow-right"></i> }
+        </span>
+      )
+    },
+    renderSearch () {
+      return (
+        <div class="m-search" >
+          <el-input class="m-search-input" vModel={this.filterText} onChange={this.filter.bind(this)} type="search" prefix-icon="el-icon-search" placeholder={this.$t('please enter your search terms')} clearable ></el-input>
+        </div>
+      )
+    },
+    renderTree () {
+      const { onlySelectLeaf } = this.fieldConfig
+      return (
+        <el-tree
+          ref="tree"
+          class={{ tree: true, 'only-allow-select-leaf': onlySelectLeaf }}
+          data={this.data}
+          showCheckbox={true}
+          onCheck-change={this.nodeCheckChange.bind(this)}
+          props={{ label: 'name', children: 'children' }}
+          autoExpandParent={false}
+          draggable={true}
+          filter-node-method={this.filterNode}
+          check-strictly={true}
+          nodeKey={this.nodeKey}
+          defaultExpandAll={this.$configs.expand === 'all'}
+          accordion={this.$configs.expandOne}
+          defaultExpandedKeys={this.defaultExpandedKeys}
+          defaultCheckedKeys={this.defaultValue}
+          onNode-click={this.nodeClick.bind(this)}
+          expandOnClickNode={onlySelectLeaf}
+          renderContent={this.treeNodeRender}
+        >
+        </el-tree>
+      )
+    },
+    renderFooter () {
+      return (
+        <div class="list-find__operates">
+          <el-button class="list-find__operate" type="primary" onClick={this.confirm}>{this.$t('complete')}</el-button>
+        </div>
+      )
+    }
+  },
+  created () {
+    this.getData()
+  },
+  mounted () {
+    if (this.value && Array.isArray(this.value)) {
+      this.value.forEach(id => {
+        this.$refs.tree.setChecked(id, true)
+      })
+    }
+  },
+  render () {
+    return (
+      <div class="container">
+        {
+          this.renderComponents.map(componentFn => componentFn())
+        }
+      </div>
+    )
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.m-search {
+  background: #fff;
+  box-sizing: border-box;
+  padding: 10px 12px;
+  border-bottom: 1px solid #e3e3e3;
+}
+.m-search-input {
+  &::v-deep {
+     >.el-input__inner {
+      border: none;
+      outline: none;
+      background: #f5f5f5;
+      border-radius: 3px;
+      height: 35px;
+      line-height: 35px;
+    }
+    .el-input__icon {
+      line-height: 35px;
+    }
+  }
+}
+.tree {
+  flex: 1;
+  &::v-deep {
+    .el-tree-node {
+      .tree-node__icon {
+        transition: all .5s;
+        font-size: 16px;
+      }
+      &.is-expanded > .el-tree-node__content {
+        .tree-node__icon {
+          transform: rotate(90deg);
+        }
+      }
+    }
+    .el-tree-node__content {
+      margin: 0 16px;
+      height: 56px;
+      display: flex;
+      border-bottom: 1px solid #e3e3e3;
+      &:hover {
+        background-color: transparent;
+      }
+      .el-tree-node__expand-icon {
+        width: 0;
+        height: 0;
+        opacity: 0;
+      }
+    }
+    .tree-node {
+      flex: 1;
+    }
+  }
+}
+
+.list-find__operates {
+  padding: 20px 36px;
+  background: #fff;
+  border-top: 1px solid #e3e3e3;
+}
+.list-find__operate {
+  width: 100%
+}
+</style>

package/src/frame/packages/m-entity-tree-find/index.js

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

package/src/frame/packages/menu/Menu.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="menu">
+    <el-row class="tac">
+      <el-col>
+        <h5 :class="['header', {'active': isActive }]" @click="backModule" v-if="showNav">
+          <p class="module-name">
+            <i v-if="back" @click="$emit('back')" class="menu-back el-icon-arrow-left"></i>
+            <i v-else class="el-icon-s-data"></i>
+            {{moduleName}}
+          </p>
+          <p class="sub-title" v-if="subTitle">（{{subTitle}}）</p>
+          </h5>
+        <el-menu
+          :default-active="currentModuleId"
+          :default-openeds="defaultOpenMenuId"
+          class="el-menu-vertical"
+          :unique-opened="true"
+         >
+          <template  v-for="item in modules">
+            <epx-menu-item v-if="item.HIDDEN_MENU!=='1'" :key="item.ID" :module="item" :select="handleSelect"></epx-menu-item>
+          </template>
+        </el-menu>
+        <slot></slot>
+      </el-col>
+    </el-row>
+    <slot name="footer"></slot>
+  </div>
+</template>
+
+<script>
+import Container from '@/frame/views/Container'
+import { DELETE_MENU_ROUTER, CREATE_TAB, DESTORY_TAB } from '@/store/actions'
+export default {
+  name: 'epx-menu',
+  extends: Container,
+  props: {
+    back: Boolean,
+    backRefresh: Boolean,
+    modules: Array,
+    moduleName: String,
+    toPages: Function,
+    subTitle: String,
+    activeMenuId: String,
+    showNav: {
+      type: Boolean,
+      default: true
+    },
+    clickItem: Function,
+    openMenu: String
+  },
+  data () {
+    return {
+      activeIndex: this.currentModuleId
+    }
+  },
+  computed: {
+    currentModuleId () {
+      if (this.activeMenuId) {
+        return this.activeMenuId
+      } else if (!this.$_.isEmpty(this.route)) {
+        return this.route.moduleId
+      } else {
+        return this.$route.query.moduleId
+      }
+    },
+    isActive () {
+      return this.$_.isEmpty(this.route)
+    },
+    defaultOpenMenuId () {
+      if (this.openMenu === 'all') {
+        return this.modules.map(item => item.ID)
+      } else if (this.openMenu === 'first' && this.modules[0]) {
+        return [this.modules[0].ID]
+      }
+      return []
+    }
+  },
+  methods: {
+    handleSelect (module) {
+      if (this.clickItem) return this.clickItem(module)
+      this.dispatch('menuIndex', 'clearPage')
+      this.dispatch('menuIndex', 'createPage', {
+        moduleId: module.ID,
+        pageId: module.MAIN_PAGE
+      })
+      if (this.toPages) {
+        return this.toPages(module)
+      }
+      if (module.MAIN_PAGE) {
+        // this.$createPage({
+        //   moduleId: module.ID,
+        //   pageId: module.MAIN_PAGE
+        // })
+      }
+    },
+    backModule () {
+      // 返回模块首页
+      this.$parent.$emit('backModule')
+      this.$store.commit(DELETE_MENU_ROUTER)
+      if (this.backRefresh) {
+        const newTab = { ...this.$tab }
+        delete newTab.active
+        this.$store.commit(DESTORY_TAB, this.$tab.key)
+        this.$nextTick(() => {
+          this.$store.commit(CREATE_TAB, {
+            ...newTab
+          })
+        })
+      }
+    }
+  },
+
+  watch: {
+    route (v) {
+      this.activeIndex = v.moduleId
+    },
+    modules (v) {
+      console.log(v)
+    }
+  },
+  created () {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.menu{
+  // width: 100%;
+  // @include bg_color_primary;
+  overflow: auto;
+}
+
+.menu-back {
+  font-size: 22px;
+  font-weight: bold;
+  margin-right: 0;
+  position: relative;
+  top: 1px;
+}
+.header{
+  height: 50px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-size: 18px;
+  padding: 0 24px;
+  font-weight: normal;
+  background-color: #fff;
+  color: #8395a7;
+  border-bottom: 1px solid #e3e3e3;
+  cursor: pointer;
+  .module-name {
+    // white-space: nowrap;
+    @include font_color_primary;
+    display: flex;
+    align-items: center;
+  }
+  i {
+    margin-right: 4px;
+  }
+}
+.sub-title {
+  font-size: 16px;
+  margin-top: 4px;
+  text-align: center;
+}
+.el-menu-vertical {
+  border: 0;
+}
+// .el-menu-vertical::v-deep .el-menu{
+//   // background-color: #f0f2f6;
+// }
+</style>

package/src/frame/packages/menu/MenuItem.vue

@@ -0,0 +1,94 @@
+<template>
+  <el-submenu v-if="module.HIDDEN_SUB_MENU!=='1' &&module.children && module.children.length>0" :index="module.ID" class="menu-item" >
+    <template slot="title">
+      <epx-icon class="menu-icon" :name="module.FONT_ICON || 'el-icon-monitor'"></epx-icon>
+      <span>{{module.text}}</span>
+    </template>
+    <el-menu-item-group>
+      <epx-menu-item v-for="menuItem in module.children" :key="menuItem.ID" :module="menuItem" :select="select"></epx-menu-item>
+    </el-menu-item-group>
+  </el-submenu>
+  <!-- 一级菜单 -->
+  <el-menu-item class="menu-item" v-else-if="module.HIDDEN_MENU!=='1'" :index="module.ID" @click.native="select(module)">
+    <epx-icon class="menu-icon" :name="module.FONT_ICON || 'el-icon-monitor'"></epx-icon>
+    <span>{{module.text}}</span>
+  </el-menu-item>
+</template>
+
+<script>
+export default {
+  name: 'epx-menu-item',
+  props: {
+    module: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    select: {
+      type: Function,
+      default () {
+        return () => {}
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.menu-item {
+  &::v-deep {
+    &.menu-item {
+      &.el-menu-item {
+        height: 48px;
+      }
+      line-height: 48px;
+      color: #676d8f;
+      i {
+        color: #676d8f;
+      }
+      &.is-active:not(.el-submenu) {
+        @include bg_color_primary(.1);
+        @include font_color_primary;
+        i {
+          @include font_color_primary;
+        }
+      }
+    }
+    .el-submenu__title {
+      height: 48px;
+      line-height: 48px;
+      color: #676d8f;
+      i {
+        color: #676d8f;
+      }
+    }
+    .el-menu-item-group__title {
+      padding: 0
+    }
+  }
+  .submenu-item {
+    color: #90a6bb;
+    height: 40px;
+    line-height: 40px;
+    i {
+      font-size: 18px;
+      color: #90a6bb;
+    }
+    &.is-active {
+      @include bg_color_primary(.1);
+      @include font_color_primary;
+      i {
+        @include font_color_primary;
+      }
+    }
+  }
+}
+.menu-icon {
+ vertical-align: middle;
+  margin-right: 5px;
+  width: 24px;
+  text-align: center;
+  font-size: 18px;
+}
+</style>

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

@@ -0,0 +1,16 @@
+import Menu from './Menu.vue'
+import MenuItem from './MenuItem.vue'
+
+Menu.install = function install (Vue) {
+  Vue.component(Menu.name, Menu)
+}
+
+MenuItem.install = function install (Vue) {
+  Vue.component(MenuItem.name, MenuItem)
+}
+
+export default Menu
+
+export {
+  MenuItem
+}