epx-frame 3.5.0-shpgy.1

package/src/frame/components/HeaderNav.vue

@@ -0,0 +1,417 @@
+<template>
+  <!-- 移动端导航栏 -->
+  <div class="mobile-header" v-if="$isMobile">
+    <div class="title">
+      <i class="el-icon-arrow-left" @click="backPage"></i>
+      <span>{{title || appConfig.TITLE}}</span>
+    </div>
+    <div class="mobile-opera">
+      <el-popover
+        popper-class="popper"
+        placement="bottom"
+        trigger="click"
+      >
+        <ul class="setting-list">
+          <li><i class="el-icon-question"></i>帮助</li>
+          <li @click="pageSetting"><i class="el-icon-document-copy"></i>页面设置</li>
+          <li @click="metaSetting"><i class="el-icon-coin"></i>对象设置</li>
+        </ul>
+        <i slot="reference" class="el-icon-more" :style="{transform:'rotate(90deg)'}"></i>
+      </el-popover>
+       <i class="menu-icon el-icon-s-fold" v-if="menu" @click="isMenuShow=true"></i>
+      <van-popup v-model="isMenuShow" position="right" :style="{ width: '60%',height: 'calc(100% + 1px)',marginTop: '-1px',maxHeight: 'auto' }">
+        <div class="menu-container">
+          <epx-menu class="menu"  v-if="menu" :modules="menu" :moduleId="module.ID" :moduleName="module.NAME" >
+          </epx-menu>
+          <div class="to-index" @click="backIndex">
+            <i class="el-icon-house"></i>
+            返回首页
+          </div>
+        </div>
+      </van-popup>
+
+      <!-- <i class="el-icon-more" :style="{transform:'rotate(90deg)'}"></i> -->
+    </div>
+  </div>
+  <!-- pc端 -->
+  <div class="header" v-else>
+    <div class="header-inner">
+      <div class="title">
+        <i class="el-icon-arrow-left" @click="backPage"></i>
+        <span class="">{{title || appConfig.TITLE}}</span>
+      </div>
+      <ul class="tabs" v-if="tabs && tabs.length>0">
+        <li :class="['tab-item', { 'active': tab.active}]" v-for="(tab, index) in tabs" :key="index" @click="change(tab, index)">{{tab | tabTitle(index) }}</li>
+      </ul>
+      <div class="opera">
+          <slot name="opera">
+            <el-dropdown v-if="showPageConfigBtn">
+              <span class="el-dropdown-link">
+                <el-button class="more" plain size="medium"><i class="el-icon-more"></i></el-button>
+              </span>
+                <el-dropdown-menu slot="dropdown">
+                  <!-- <el-dropdown-item @click.native="pageSetting">帮助</el-dropdown-item> -->
+                  <!-- <el-dropdown-item @click.native="pageSetting">页面设置</el-dropdown-item> -->
+                  <el-dropdown-item v-if="pageMode==='pageTab'" @click.native="pageSetting( 'tab')">导航栏配置</el-dropdown-item>
+                  <el-dropdown-item @click.native="pageSettingVisual">页面可视化配置</el-dropdown-item>
+                  <el-dropdown-item @click.native="pageSetting">页面代码模式配置</el-dropdown-item>
+                  <el-dropdown-item @click.native="metaSetting">对象设置</el-dropdown-item>
+
+                </el-dropdown-menu>
+            </el-dropdown>
+          </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { CREATE_TAB } from '@/store/actions'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'epx-header-nav',
+  props: {
+    title: {
+      type: String,
+      default () {
+        return ''
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getPageByMetaId',
+      'getPageById',
+      'getTab'
+    ])
+  },
+  data () {
+    return {
+      tabs: [],
+      showMobileMenu: false,
+      isMenuShow: false,
+      pageMode: '',
+      activeTab: {},
+      module: {},
+      menu: null,
+      showPageConfigBtn: false
+    }
+  },
+  inject: {
+    getMenuInfo: {
+      default: () => null
+    }
+  },
+  filters: {
+    tabTitle (tab, index) {
+      const title = tab.title || '标签页' + (index + 1)
+      if (tab.countFlag) {
+        return title + '（' + (tab.count || 0) + '）'
+      }
+      return title
+    }
+  },
+  methods: {
+    back () {
+      this.backPage()
+    },
+    pageSettingVisual (mode) {
+      // 当前页面id
+      if (!this.$pageId) {
+        this.$message.error('系统默认页面，无法编辑')
+        return
+      }
+      let pageId = this.$pageId
+      // 标签页模式
+      if (this.pageMode === 'pageTab' && mode !== 'tab') {
+        const { pageMetaId, pageFlag } = this.activeTab
+        const page = this.getPageByMetaId(pageMetaId, pageFlag)
+        if (page && page.pageId) {
+          pageId = page.pageId
+        }
+      }
+      const route = {
+        metaId: 'FM_PAGE_CONFIG',
+        flag: 'v_visual_config',
+        id: pageId,
+        entityId: this.$metaId,
+        title: this.title || this.appConfig.TITLE,
+        pageType: 'EDIT'
+      }
+      this.$createPage(route)
+      // if (this.currentMenuRouters.length > 0) {
+      //   this.$pushMenuRoute(route)
+      // } else {
+      //   this.$pushModuleRoute(route)
+      // }
+    },
+    pageSetting (mode) {
+      // 当前页面id
+      if (!this.$pageId) {
+        this.$message.error('系统默认页面，无法编辑')
+        return
+      }
+      let pageId = this.$pageId
+      // 标签页模式
+      if (this.pageMode === 'pageTab' && mode !== 'tab') {
+        const { pageMetaId, pageFlag } = this.activeTab
+        const page = this.getPageByMetaId(pageMetaId, pageFlag)
+        if (page && page.pageId) {
+          pageId = page.pageId
+        }
+      }
+      const route = {
+        metaId: 'FM_PAGE_CONFIG',
+        // flag: 'v_page_info',
+        flag: 'v_page_tabs',
+        id: pageId,
+        entityId: this.$metaId,
+        title: this.title || this.appConfig.TITLE,
+        pageType: 'EDIT'
+      }
+      this.$createPage(route)
+      // if (this.currentMenuRouters.length > 0) {
+      //   this.$pushMenuRoute(route)
+      // } else {
+      //   this.$pushModuleRoute(route)
+      // }
+    },
+    metaSetting () {
+      if (!this.$metaId) {
+        this.$message.error('当前页面没有配置对象')
+        return
+      }
+      const route = {
+        metaId: 'FM_ENTITY',
+        flag: 'v_edit',
+        id: this.$metaId,
+        component: 'add',
+        pageType: 'EDIT'
+      }
+      this.$createPage(route)
+    },
+    change (tab, index) {
+      const tabs = [...this.tabs]
+      tabs.forEach(item => (item.active = false))
+      tabs[index].active = true
+      this.tabs = [...tabs]
+      this.$bus.emit('changeTab', tab, tabs)
+    },
+    pageShortcutOperation () {
+      this.$http.get({
+        action: 'pageShortcutOperation',
+        entityId: 'FM_ENTITY_RIGHT',
+        metaId: this.$metaId
+      })
+        .then(data => {
+          this.showPageConfigBtn = data
+        })
+    },
+    onChange ({ key, ...props }) {
+      if (key === 'pageTab') {
+        const { activeTab } = props
+        this.pageMode = 'pageTab'
+        this.activeTab = activeTab
+      }
+    },
+    backIndex () {
+      const tab = this.getTab('default-index')
+      this.$store.commit(CREATE_TAB, { ...tab, key: 'default-index' + new Date().getTime() })
+    }
+  },
+  created () {
+    if (this.getMenuInfo) {
+      const { module, menu } = this.getMenuInfo()
+      this.menu = menu
+      this.module = module
+    }
+    this.pageShortcutOperation()
+
+    // this.$bus.on('tabs', tabs => {
+    //   this.tabs = [...tabs]
+    // })
+  },
+  mounted () {
+    // 如果其子组件
+    const that = this
+    this.$bus.on('showMobileMenu', v => {
+      that.showMobileMenu = true
+    })
+  },
+  beforeDestroy () {
+    this.$bus.off('showMobileMenu')
+    this.tabs = []
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.header {
+  height: 60px;
+  margin-bottom: 10px;
+}
+.header-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  position: relative;
+  // top: -10px;
+  // left: -9px;
+  // width: calc(100% + 19px);
+  height: 60px;
+  padding: 0 16px;
+  box-sizing: border-box;
+  .title {
+    font-size: 16px;
+    color: #333333;
+    i {
+      font-size: 22px;
+      position: relative;
+      top: 2px;
+      cursor: pointer;
+    }
+  }
+  .tabs {
+    display: flex;
+    flex: 1;
+    padding-left: 20px;
+  }
+  .tab-item {
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1;
+    color: #666;
+    padding: 0 12px;
+    border-right: 1px solid #ccc;
+    &.active {
+      @include font_color_primary;
+    }
+    &:last-child {
+      border: 0
+    }
+  }
+  .opera {
+    &::v-deep {
+      .el-button {
+        padding: 8px 16px;
+      }
+    }
+    .more {
+      font-size: 20px;
+      padding: 5px 14px;
+    }
+    .opera-text {
+      border: 1px solid #999;
+      padding: 0 12px;
+      font-size: 20px;
+      color: #8395a7;
+      line-height: 1;
+      cursor: pointer;
+      i {
+        margin-right: 4px;
+      }
+      margin-left: 24px;
+    }
+  }
+}
+.epx-header {
+  margin-bottom: 10px;
+  padding: 6px 12px;
+  display: flex;
+}
+.mobile-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  font-size: 16px;
+  color: #333;
+  .title {
+    line-height: 20px;
+    i {
+      font-size: 20px;
+      margin: 0;
+    }
+  }
+  i {
+    font-size: 18px;
+    color: #666;
+    margin-left: 8px;
+  }
+}
+.setting-list {
+  li {
+    padding: 8px 2px;
+    border-bottom: 1px solid #e3e3e3 ;
+    i {
+      margin-right: 6px;
+    }
+    &:last-child {
+      border:0
+    }
+  }
+}
+@media screen and (max-width: 992px){
+  .epx-header {
+    margin-bottom: 0;
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background: #e3e3e3;
+      transform: scaleY(0.5);
+    }
+    &::v-deep {
+      .el-page-header__title {
+        display: none;
+      }
+      .el-page-header__left {
+        margin-right: 0;
+        &::after {
+          display: none;
+        }
+      }
+      .el-page-header__content {
+        flex: 1;
+        text-align: center;
+        font-size: 16px;
+      }
+    }
+  }
+}
+.menu-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .menu {
+    flex: 1;
+  }
+  .to-index {
+    flex-shrink: 0;
+    width: 100%;
+    height: 44px;
+    border-top: 1px solid #e3e3e3;
+    font-size: 14px;
+    @include font_color_primary;
+    text-align: center;
+    line-height: 44px;
+    i {
+      @include font_color_primary;
+      position: relative;
+      top: 1px;
+      margin-right: 4px;
+    }
+  }
+}
+</style>
+<style>
+.popper {
+  min-width: 100px;
+  padding: 0 10px;
+}
+</style>

package/src/frame/components/IconCard.vue

@@ -0,0 +1,158 @@
+<template>
+  <el-col :span="24/mcolumn" :md="24/column" >
+    <el-card  class="icon-card" shadow="hover" @click.native="routerLink(link)">
+      <div slot="header" v-if="cardTitle" >
+        <slot name="header">
+          <div class="card-title">
+            {{cardTitle}}
+          </div>
+        </slot>
+      </div>
+      <div class="card-container">
+        <div class="icon" :style="iconStyle">
+          <slot name="icon" class="icon">
+            <img v-if="icon" :src="icon" alt="">
+          </slot>
+        </div>
+        <div class="content">
+          <slot name="title">
+            <p :class="`title ${cardTitle? 'sub-title' : ''}`" v-if="title">{{title}}</p>
+          </slot>
+          <slot name="desc">
+            <p class="desc" v-if="desc">{{desc}}</p>
+          </slot>
+          <slot name="rate">
+            <el-rate
+              v-if="rate"
+              v-model="rate"
+              disabled
+              show-score
+              text-color="#ff9900">
+          </el-rate>
+          </slot>
+        </div>
+      </div>
+    </el-card>
+  </el-col>
+</template>
+
+<script>
+export default {
+  name: 'epx-icon-card',
+  inject: ['column', 'mcolumn'],
+  props: {
+    title: String,
+    icon: String,
+    desc: String,
+    rate: String,
+    cardTitle: String,
+    iconStyle: Object,
+    link: String
+  },
+  methods: {
+    routerLink (link) {
+      if (link) this.$router.push(link)
+    }
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+.icon-card {
+  margin-bottom: 20px;
+  border: 0;
+  background: #f8f8fb;
+  cursor: pointer;
+  &::v-deep {
+    >.el-card__header {
+      padding: 12px 20px;
+    }
+    >.el-card__body {
+      padding: 20px 14px
+    }
+    .el-rate__icon{
+      margin-right: 0;
+    }
+  }
+}
+
+.card-title{
+  // font-size: 16px;
+  font-size: 14px;
+  color: #000;
+  // font-weight: 600;
+  line-height: 1;
+}
+
+.card-container {
+  display: flex;
+  align-items: center;
+}
+.icon {
+  margin-right: 12px;
+  height: 50px;
+  img {
+    height: 100%;
+  }
+}
+.title {
+  // font-size: 16px;
+  font-size: 14px;
+  color: #000000;
+  // font-weight: 600;
+  white-space: nowrap;
+  line-height: 1;
+  margin-bottom: 4px;
+}
+.sub-title {
+  font-weight: normal;
+  // font-size: 14px;
+  font-size: 12px;
+  color: #333;
+}
+.desc {
+  // font-size: 14px;
+  font-size: 12px;
+  line-height: 20px;
+  color: #999;
+}
+@media only screen and (max-width: 992px) {
+  .card-container{
+    display: block;
+    text-align: center;
+    .icon{
+      margin-right: 0px;
+      margin-bottom: 9px;
+    }
+    .title{
+      // overflow: hidden;
+      // white-space: nowrap;
+      // text-overflow: ellipsis;
+      white-space:pre-wrap;
+      font-size: 13px;
+      color: #333;
+      line-height: 16px;
+    }
+  }
+  .el-col{
+    padding-left: 0!important;
+    padding-right: 0!important;
+  }
+  .icon-card::v-deep .el-card__body{
+    height: 142px;
+    box-sizing: border-box;
+  }
+  .card-title{
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    // white-space:pre-wrap;
+  }
+  .el-card{
+    border: none;
+    border-right: 1px solid #EBEEF5;
+    border-bottom: 1px solid #EBEEF5;
+  }
+}
+</style>

package/src/frame/components/IconFontLibrary.vue

@@ -0,0 +1,59 @@
+<script>
+import EntityFindVue from '@/frame/packages/entity-list-find'
+export default {
+  name: 'epx-icon-font-library',
+  extends: EntityFindVue,
+  pageFlag: true,
+  pageSize: 100,
+  data () {
+    return {
+      renderComponents: [this.renderSearch, this.renderTable]
+    }
+  },
+  methods: {
+    renderTable () {
+      return (
+        <div ref="grid" >
+          <van-grid gutter="10" style={{ minHeight: '40px' }}>
+            {
+              this.data.length === 0 && (
+                <van-grid-item text="暂无更多">
+                  <i slot="icon" style={{ fontSize: '30px', marginBottom: '12px' }} class="el-icon-folder"></i>
+                </van-grid-item>
+              )
+            }
+            {
+              this.data.map(item => (
+                <van-grid-item key={item.ID} text={item.NAME} onClick={this.selectEntity.bind(this, null, item)}>
+                  <i slot="icon" style={{ fontSize: '30px', marginBottom: '12px' }} class={[item.TYPE !== '2' && 'fa', item.CODE]}></i>
+                </van-grid-item>
+              ))
+            }
+          </van-grid>
+          {
+            this.$configs.pageFlag && (
+              <div class="pagination">
+                <el-pagination
+                  v-loading={this.loading}
+                  currentPage={this.currentPage}
+                  pageSizes={[5, 10, 15, 20, 30, 50, 100, 200]}
+                  pageSize={this.pageSize}
+                  layout="prev, pager, next, jumper, sizes,total"
+                  total={this.total}
+                  onSize-change={this.sizeChange}
+                  onCurrent-change={this.currentChange}
+                >
+                </el-pagination>
+              </div>
+            )
+          }
+        </div>
+      )
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/frame/components/IconFontList.vue

@@ -0,0 +1,75 @@
+<script>
+import List from '@/frame/packages/entity-list'
+export default {
+  name: 'epx-icon-font-list',
+  extends: List,
+  methods: {
+    renderField (field) {
+      const { isLabel } = field.attribute || {}
+      return {
+        scopedSlots: {
+          default: ({ row }) => {
+            if (field.dataType === 'blob' || field.dataType === 'photo') {
+              return (
+                <epx-file values={row} fieldConfigs={{ ...field, state: 'DETAIL' }}></epx-file>
+              )
+            }
+            if (field.dataType === 'rule') {
+              return (
+                <font color={field.color}>
+                  {this.getChineseValue(row[field.attriName])}
+                </font>
+              )
+            }
+            if (field.dataType === 'icon') {
+              return (
+                <i style={{ fontSize: '20px' }} class={row[field.attriName]}></i>
+              )
+            }
+            if (field.dataType === 'scope') {
+              return (
+                <font color={field.color}>
+                  {this.getScopeChinese(row[field.attriName])}
+                </font>
+              )
+            }
+            if (field.dataType === 'date' || field.dataType === 'date_ym') {
+              return (
+                <font color={field.color}>
+                  {row[field.attriName] === '2050-01-01' || row[field.attriName] === '2050-01' ? '至今' : row[field.attriName]}
+                </font>
+              )
+            }
+            if (field.dataType === 'tag') {
+              if (!row[field.attriName]) return null
+              const tagList = row[field.attriName].split(',')
+              return (
+                <span>
+                  {
+                    tagList.map((item, index) => (
+                      <el-tag style={{ marginRight: '8px' }} key={item}>{ item }
+                        { index < tagList.length - 1 &&
+                          <span style={{ opacity: 0, width: 0, float: 'left' }}>、</span>
+                        }
+                      </el-tag>
+                    ))
+                  }
+                </span>
+              )
+            }
+            return (
+              <font class={{ 'is-label': (field.isLabel || isLabel === '1' || field.detailPageId) }} color={field.color} onClick={this.clickField.bind(this, field, row)}>
+                { row[field.attriName + '#'] || row[field.attriName] }
+              </font>
+            )
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>