epx-frame 3.5.0-shpgy.1

package/src/store/modules/router.js

@@ -0,0 +1,140 @@
+/**
+ * 获取页面配置
+ */
+import { PUSH_ROUTER, SET_ROUTER, PICK_ROUTER, DELETE_ROUTER, CLEAR_ROUTER, SET_ROUTER_QUERY, CLEAR_TABS_ROUTER, PUSH_MODULE_ROUTER, PUSH_MENU_ROUTER, POP_MODULE_ROUTER, POP_MENU_ROUTER, DELETE_MODULE_ROUTER, DELETE_MENU_ROUTER, SET_ROUTER_RELOAD } from '../actions'
+
+export default {
+  state: {
+    routers: [], // 新标签页路由
+    moduleRoute: {},
+    moduleRouters: [], // 模块路由
+    menuRoute: {},
+    menuRouters: [], // 菜单路由
+    currentRoute: {},
+    query: {},
+    reload: false
+  },
+  mutations: {
+    [PUSH_ROUTER] (state, route) {
+      // 创建唯一标识
+      state.routers.forEach(item => {
+        item.active = false
+      })
+      const date = new Date().getTime() + Math.random()
+      state.routers = [...state.routers, { ...route, key: String(route.key || date), active: true, time: date }]
+    },
+    [SET_ROUTER] (state, { key, router }) {
+      let index = -1
+      if (key) {
+        index = state.routers.findIndex(item => item.key === key)
+      } else {
+        index = state.routers.findIndex(item => item.active === true)
+      }
+      if (index !== -1) state.routers.splice(index, 1, { ...router, key })
+    },
+    [PICK_ROUTER] (state, key) {
+      state.routers.forEach(item => {
+        if (item.key === key) item.active = true
+        else item.active = false
+      })
+    },
+    [DELETE_ROUTER] (state, key) {
+      const { routers } = state
+      const index = routers.findIndex(item => item.key === key)
+      const router = routers[index]
+      if (router && router.active) {
+        if (routers[index - 1]) {
+          routers[index - 1].active = true
+        } else if (routers[index + 1]) {
+          routers[index + 1].active = true
+        }
+      }
+      routers.splice(index, 1)
+      state.routers = [...routers]
+    },
+    [CLEAR_ROUTER] (state) {
+      state.routers = []
+    },
+    [CLEAR_TABS_ROUTER] (state) {
+      state.routers = state.routers.filter(item => item.key && (item.key + '').includes('nav-'))
+    },
+    [PUSH_MODULE_ROUTER] (state, { key, router: moduleRouter }) {
+      let index = -1
+      if (key) {
+        index = state.routers.findIndex(item => item.key === key)
+      } else {
+        index = state.routers.findIndex(item => item.active === true)
+      }
+      if (index !== -1) {
+        const router = state.routers[index]
+        if (!router.children) router.children = []
+        router.children.push({ ...moduleRouter, key: new Date().getTime() })
+        state.routers.splice(index, 1, router)
+      }
+      // state.moduleRoute = { ...route }
+      // state.moduleRouters = [...state.moduleRouters, { ...route }]
+    },
+    [POP_MODULE_ROUTER] (state, { key } = {}) {
+      let index = -1
+      if (key) {
+        index = state.routers.findIndex(item => item.key === key)
+      } else {
+        index = state.routers.findIndex(item => item.active === true)
+      }
+      if (index !== -1) {
+        const routers = [...state.routers]
+        const router = state.routers[index]
+        if (router.children && router.children.length > 0) router.children.pop()
+        routers.splice(index, 1, router)
+        state.routers = [...routers]
+      }
+      // state.moduleRouters.pop()
+      // const currentRoute = state.moduleRouters[state.moduleRouters.length - 1] || {}
+      // state.moduleRoute = { ...currentRoute }
+    },
+    [DELETE_MODULE_ROUTER] (state, route) {
+      state.moduleRoute = {}
+      state.moduleRouters = []
+    },
+    [PUSH_MENU_ROUTER] (state, { router: menuRouter }) {
+      // state.menuRoute = { ...route }
+      // state.menuRouters = [...state.menuRouters, { ...route }]
+      // 获取moduleRoute
+      const index = state.routers.findIndex(item => item.active === true)
+      if (index !== -1) {
+        const moduleRouters = state.routers[index].children || []
+        const moduleRouter = moduleRouters[moduleRouters.length - 1] || {}
+        if (!moduleRouter.children) moduleRouter.children = []
+        moduleRouter.children.push({ ...menuRouter, key: new Date().getTime() })
+        const routers = [...state.routers]
+        routers.splice(index, 1, { ...state.routers[index], children: moduleRouters })
+        state.routers = [...routers]
+      }
+    },
+    [POP_MENU_ROUTER] (state, { key } = {}) {
+      const index = state.routers.findIndex(item => item.active === true)
+      if (index !== -1) {
+        const moduleRouters = state.routers[index].children || []
+        const moduleRouter = moduleRouters[moduleRouters.length - 1] || {}
+        if (moduleRouter.children && moduleRouter.children.length > 0) moduleRouter.children.pop()
+        state.routers.splice(index, 1, { ...state.routers[index], children: moduleRouters })
+      }
+      // state.menuRouters.pop()
+      // const currentRoute = state.menuRouters[state.menuRouters.length - 1] || {}
+      // state.menuRoute = currentRoute
+    },
+    [DELETE_MENU_ROUTER] (state) {
+      state.menuRoute = {}
+      state.menuRouters = []
+    },
+    [SET_ROUTER_QUERY] (state, query) {
+      const index = state.routers.findIndex(item => item.active === true)
+      if (index !== -1) state.routers.splice(index, 1, { ...state.routers[index], ...query })
+    },
+    [SET_ROUTER_RELOAD] (state, flag = false) {
+      state.reload = flag
+    }
+  },
+  actions: {
+  }
+}

package/src/store/modules/tabs.js

@@ -0,0 +1,62 @@
+import { CREATE_TAB, SELECT_TAB, DESTORY_TAB, CLEAR_TABS, SET_TAB_QUERY } from '@/store/actions'
+const DELETE_TABS = 'DELETE_TABS'
+const randomString = () => {
+  const date = new Date().getTime()
+  const random = Math.random()
+  const floatRandom = String(random).split('.')[1]
+  return floatRandom + date
+}
+
+export default {
+  state: {
+    tabs: []
+  },
+  getters: {
+    getTab: (state) => (key) => {
+      return state.tabs.find(item => item.key === key)
+    }
+  },
+  mutations: {
+    [CREATE_TAB] (state, tab) {
+      // 创建为最新的tab
+      state.tabs.forEach(tab => {
+        tab.active = false
+      })
+      const key = randomString()
+      // 判断当前是不是最新的
+      state.tabs.push({ ...tab, active: true, key: tab.key || key })
+    },
+    [SELECT_TAB] (state, key) {
+      state.tabs.forEach(tab => {
+        if (tab.key === key) tab.active = true
+        else tab.active = false
+      })
+    },
+    [DESTORY_TAB] (state, key) {
+      const index = state.tabs.findIndex(tab => tab.key === key)
+      if (state.tabs[index - 1])state.tabs[index - 1].active = true
+      else state.tabs[index + 1].active = true
+      state.tabs.splice(index, 1)
+    },
+    [CLEAR_TABS] (state) {
+      state.tabs = state.tabs.filter(item => item.key.includes('default-'))
+      if (state.tabs.length > 0) {
+        state.tabs[0].active = true
+      }
+    },
+    [DELETE_TABS] (state) {
+      state.tabs = []
+    },
+    [SET_TAB_QUERY] (state, { key, query = {} }) {
+      const tabIndex = state.tabs.findIndex(item => (key ? item.key === key : item.active === true))
+      if (tabIndex !== -1) {
+        const tab = state.tabs[tabIndex]
+        state.tabs.splice(tabIndex, 1)
+        state.tabs.splice(tabIndex, 0, { ...tab, ...query })
+      }
+    }
+  },
+  actions: {
+
+  }
+}

package/src/store/modules/user.js

@@ -0,0 +1,71 @@
+/**
+ * 获取页面配置
+ */
+import { GET_USER, GET_USER_INFO, DELETE_USER } from '../actions'
+import http from '@/api'
+
+export default {
+  state: {
+    user: {},
+    userInfo: {}
+  },
+  mutations: {
+    [GET_USER] (state, data) {
+      state.user = { ...state.user, ...data }
+    },
+    [GET_USER_INFO] (state, data) {
+      state.userInfo = { ...state.userInfo, ...data }
+    },
+    [DELETE_USER] (state) {
+      state.user = {}
+      state.userInfo = {}
+    }
+  },
+  actions: {
+    [GET_USER] ({ commit }, payload) {
+      return new Promise((resolve, reject) => {
+        http.getUser()
+          .then(data => {
+            if (data) {
+              // 格式化用户信息
+              const bean = data.bean || {}
+              const { services = {}, roles = {} } = bean
+              const serviceRoles = {}
+              for (const key in services) {
+                const serviceRole = services[key]
+                const roleList = []
+                for (const roleKey in serviceRole) {
+                  const roleMap = roles[roleKey] || {}
+                  roleList.push({
+                    id: roleKey,
+                    isDefault: serviceRole[roleKey],
+                    name: roleMap.NAME,
+                    code: roleMap.CODE
+                  })
+                }
+                serviceRoles[key] = roleList
+              }
+              bean.serviceRoles = serviceRoles
+              commit(GET_USER, bean)
+              resolve(bean)
+            } else {
+              reject(new Error())
+            }
+          })
+          .catch(err => {
+            reject(err)
+          })
+      })
+    },
+    [GET_USER_INFO] ({ commit }) {
+      http.find({
+        entityId: 'FM_USER',
+        'scope.ID': '#{user.id}'
+      })
+        .then(data => {
+          const bean = data.data || {}
+          commit(GET_USER_INFO, bean)
+        })
+    }
+  }
+}

package/src/styles/index.scss

@@ -0,0 +1,143 @@
+@import "./theme/element.scss";
+
+/** css初始化 **/
+body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,dt,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
+body{font:16px "微软雅黑"; line-height: 1.5;background: #f0f2f6}
+a{text-decoration:none; @include font_color_primary;}
+li{list-style:none}
+img{border:0;vertical-align:middle}
+table{border-collapse:collapse;border-spacing:0}
+p{word-wrap:break-word}
+*:focus { outline: none; }
+
+/** font图标 **/
+[class*="epx-icon-"], [class^=epx--icon-] {
+  font-family: "epx-icon"!important;
+  font-style: normal;
+  vertical-align: middle;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+[class*="epx-icon-color-"], [class^=epx--icon-color-] {
+  font-family: "epx-icon-color"!important;
+  font-style: normal;
+  vertical-align: middle;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  box-sizing: border-box;
+  -webkit-overflow-scrolling: unset;
+}
+
+.body{
+  flex: 1;
+  overflow: auto;
+  overflow-x: hidden;
+  position: relative;
+}
+
+#app {
+  font-family: '微软雅黑', Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  width: 100%;
+  height: 100vh;
+  box-sizing: border-box;
+  background: #F3F5FA;
+  display: flex;
+  flex-direction: column;
+}
+
+.fl {
+  float: left;
+}
+.fr {
+  float: right;
+}
+
+/***element***/
+.el-tree {
+  transform: translate(0, 0);
+  z-index: 0;
+}
+.el-popconfirm__main {
+  margin: 10px 0;
+}
+.el-table {
+  font-size: 16px;
+}
+.el-tabs__item {
+  font-size: 16px;
+}
+.el-button--medium {
+  font-size: 16px;
+}
+.el-dialog__body {
+  font-size: 16px;
+}
+input[type=number] {
+    -moz-appearance:textfield;
+    appearance: textfield;
+}
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+@media screen and (min-width: 992px) {
+  // 滚动背景
+  ::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+      // background-image: linear-gradient(135deg, #1DE9B6 0%, rgba(8, 196, 219, 0.50) 72%, rgba(0, 182, 234, 0.30) 100%);
+  }
+
+  ::-webkit-scrollbar-track {
+      background: none;
+  }
+  // 滚动条
+  ::-webkit-scrollbar-thumb {
+      border-radius: 0;
+      background:#aebcc8;
+      transition: all .2s;
+      border-radius: 8px;
+
+      &:hover {
+          background-color: rgba(95, 95, 95, .7);
+      }
+    // text-align: center;
+    @include font_color_primary
+    // margin-top: 60px;
+  }
+}
+
+
+@media only screen and (max-width: 992px) {
+  body{
+    font:12px
+  }
+  ::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+    // background-image: linear-gradient(135deg, #1DE9B6 0%, rgba(8, 196, 219, 0.50) 72%, rgba(0, 182, 234, 0.30) 100%);
+  }
+}
+
+/**主题色**/
+.primary-color {
+  @include font_color_primary;
+}
+
+
+@supports (bottom: env(safe-area-inset-bottom)){
+  html {
+    overflow: hidden;
+  }
+  .body, .footer{
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}

package/src/styles/theme/element.scss

@@ -0,0 +1,240 @@
+@import "./utils/mixins.scss";
+
+/** element主题样式调整
+ -------------------------- */
+ // 按钮
+.el-button:not(.el-button--primary):not(.el-button--text):not(.el-button--danger) {
+  &:hover {
+    @include border_color_primary(.6);
+    @include bg_color_primary(.2);
+    @include font_color_primary;
+  }
+}
+.el-button--primary {
+  @include border_color_primary;
+  @include bg_color_primary;
+  &:hover {
+    @include border_color_primary_mixin(.2);
+    @include bg_color_primary_mixin(.2);
+  }
+}
+.el-button--primary.is-plain {
+  @include border_color_primary(.6);
+  @include bg_color_primary(.2);
+  @include font_color_primary;
+  &:hover {
+    @include border_color_primary;
+    @include bg_color_primary;
+    color: #fff!important;
+  }
+}
+
+.el-button--default {
+  &:hover {
+    @include border_color_primary(.3);
+    @include bg_color_primary(.2);
+    @include font_color_primary;
+  }
+}
+.el-button--text {
+  @include font_color_primary;
+  &:hover {
+    @include font_color_primary_mixin( .2);
+  }
+}
+.el-radio-button__orig-radio:checked+.el-radio-button__inner {
+  @include border_color_primary;
+  @include bg_color_primary;
+}
+
+// switch
+.el-switch.is-checked .el-switch__core {
+  @include border_color_primary;
+  @include bg_color_primary;
+}
+
+// 分页器
+.el-pager li.active {
+  @include font_color_primary;
+}
+
+// 标签页
+.el-tabs--card > .el-tabs__header .el-tabs__item {
+  &:hover, &.is-active {
+    @include font_color_primary;
+  }
+}
+// 文本框
+.el-select .el-input.is-focus .el-input__inner {
+  @include border_color_primary;
+}
+
+.el-input__inner {
+  &:focus {
+    @include border_color_primary;
+  }
+}
+
+// radio
+.el-radio__input.is-checked .el-radio__inner{
+  @include border_color_primary;
+  @include bg_color_primary;
+}
+.el-radio__input.is-checked + .el-radio__label{
+  @include font_color_primary;
+}
+// 加载loading
+.el-loading-spinner .path {
+  @include stroke_color_primary;
+}
+
+//下拉列表
+.el-select-dropdown__item.selected {
+  @include font_color_primary;
+}
+
+.el-dropdown-menu__item {
+  &:hover {
+    @include font_color_primary;
+    @include bg_color_primary(.2);
+  }
+}
+
+
+// 菜单
+.el-submenu .el-menu-item , .el-submenu__title, .el-menu-item {
+  &:hover {
+    @include bg_color_primary_mixin(.8);
+  }
+}
+
+
+// 表格
+.el-table .ascending .sort-caret.ascending {
+  @include border_color_primary(1, bottom);
+}
+
+ .el-table .descending .sort-caret.descending {
+  @include border_color_primary(1, top);
+}
+
+// 复选框
+.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  @include bg_color_primary;
+  @include border_color_primary;
+}
+// 步骤条
+// .el-step__icon.is-text{
+//   @include border_color_primary;
+// }
+// .el-step__head.is-success .el-step__icon.is-text{
+//   @include font_color_primary;
+// }
+.el-step__title.is-process{
+  @include font_color_primary;
+}
+// 树 
+.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+  @include bg_color_primary(.1);
+}
+// 进度条
+.el-progress-bar__inner{
+  @include bg_color_primary; 
+}
+.el-progress__text{
+  @include font_color_primary;
+}
+// 上传框
+.el-upload:hover {
+  @include border_color_primary;
+}
+// 导入、导出页面换肤
+.el-checkbox__input.is-checked + .el-checkbox__label{
+  @include font_color_primary;
+}
+.el-step__head.is-finish{
+  @include font_color_primary;
+}
+.el-step__title.is-finish{
+  @include font_color_primary;
+}
+.el-step__line-inner{
+  @include border_color_primary;
+}
+.el-tabs__item.is-active{
+  @include font_color_primary;
+}
+
+.el-cascader-panel {
+  max-width: 100vw;
+  .el-cascader-menu {
+    flex: 1;
+    min-width: auto;
+    .el-cascader-node {
+      padding: 10px 15px!important;
+      line-height: 20px;
+      .el-cascader-node__label {
+        white-space: pre-wrap;
+      }
+    }
+  }
+}
+
+/** 弹窗样式 **/
+body .el-dialog__body {
+  padding: 10px 20px;
+}
+
+.dialog--noheader {
+  .el-dialog__header {
+    padding-top: 10px;
+    border: none;
+    .el-dialog__title {
+      display: none;
+    }
+  }
+  .el-dialog__headerbtn {
+    top: 0px;
+    font-size: 18px;
+  }
+}
+
+/** 轮播图 **/
+body .el-carousel__button {
+  width: 20px;
+  height: 6px;
+  border-radius: 0;
+}
+body .el-carousel__indicator.is-active button {
+  @include bg_color_primary 
+}
+
+.el-tooltip__popper.is-dark {
+  max-width: 50%;
+  line-height: 1.4;
+}
+
+// 表格错位
+body .el-table th.gutter{
+  display: table-cell!important;
+}
+// element组件初始化
+.el-message-box {
+  max-width: 90%;
+}
+div.el-message {
+  max-width: 90%;
+  min-width: 300px;
+}
+
+/** vant 样式
+-------------------------- */
+body {
+  .van-nav-bar .van-icon {
+    color: #666;
+    font-size: 18px;
+  }
+}
+ .van-tabbar-item--active {
+  @include font_color_primary;
+ }

package/src/styles/theme/utils/config.scss

@@ -0,0 +1,4 @@
+$namespace: 'el';
+$element-separator: '__';
+$modifier-separator: '--';
+$state-prefix: 'is-';

package/src/styles/theme/utils/function.scss

@@ -0,0 +1,44 @@
+@import "config";
+
+/* BEM support Func
+ -------------------------- */
+@function selectorToString($selector) {
+  $selector: inspect($selector);
+  $selector: str-slice($selector, 2, -2);
+  @return $selector;
+}
+
+@function containsModifier($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, $modifier-separator) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containWhenFlag($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, '.' + $state-prefix) {
+    @return true
+  } @else {
+    @return false
+  }
+}
+
+@function containPseudoClass($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, ':') {
+    @return true
+  } @else {
+    @return false
+  }
+}
+
+@function hitAllSpecialNestRule($selector) {
+
+  @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
+}