基础组件

public/index.html

@@ -39,6 +39,7 @@
   <!-- 开发环境 -->
   <% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
     <script>window.SITE_CONFIG['apiURL'] = 'http://124.225.17.80:8060';</script>
+    <!-- <script>window.SITE_CONFIG['apiURL'] = '/api';</script> -->
   <% } %>
   <!-- 集成测试环境 -->
   <% if (process.env.VUE_APP_NODE_ENV === 'prod:sit') { %>

src/assets/scss/smp.scss

@@ -52,6 +52,12 @@ $smp--box-shadow-1: 0 0 5px rgba(0,0,0,0.1);
   background-color: $smp--color-blue;
   color: $smp--color-white;
 }
+@mixin normal-shadow() {
+  box-shadow: $smp--box-shadow;
+}
+@mixin normal-shadow-1() {
+  box-shadow: $smp--box-shadow-1;
+}
 
 .smp-btn-hollow{
   @include smp-btn;
@@ -187,6 +193,29 @@ $smp--box-shadow-1: 0 0 5px rgba(0,0,0,0.1);
     }
   }
 }
+/* 滚动条
+------------------------------ */
+.scrollbar-transparent{
+  overflow:auto;
+  // padding-right:15px;
+  &::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
+    height: 0;
+  }
+  &::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    background: transparent;
+  }
+  &::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+    background: transparent;
+    // box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.2);
+  }
+  &:hover::-webkit-scrollbar-thumb{
+    background: rgba(0,0,0,0.1);
+  }
+}
 /* smp mini-table
 ------------------------------ */
 .smp-mini-table.el-table{
@@ -194,7 +223,7 @@ $smp--box-shadow-1: 0 0 5px rgba(0,0,0,0.1);
     display: none;
   }
   th{
-    background-color: $smp--color-gray_ef;
+    background-color: $smp--color-gray_f5;
     border-bottom:none;
   }
   tr{
@@ -225,6 +254,23 @@ ul,li{
 
 /* Reset element-ui
 ------------------------------ */
+.smp-normal-input{
+  .el-input__inner{
+    // padding:0 25px 0 0;
+    @include smp-no-radius;
+    @include smp-input;
+    border-right:none;
+  }
+  .el-input-group__append{
+    @include smp-no-radius;
+    background-color: $smp--color-blue;
+    border-color: $smp--color-blue;
+    color:#fff;
+    width:54px;
+    padding:0;
+    text-align: center;
+  }
+}
 .aui-wrapper {
   .smp-table.el-table{
     border:1px solid $smp--color-gray_ef;
@@ -290,13 +336,6 @@ ul,li{
       }
     }
   }
-  // .smp-normal-input{
-  //   .el-input__inner{
-  //     // padding:0 25px 0 0;
-  //     @include smp-no-radius;
-  //     @include smp-input;
-  //   }
-  // }
   // .smp-date-picker{
   //   &.el-input__inner{
   //     // padding:0 25px 0 0;
@@ -1646,4 +1685,151 @@ html,body{
 // 主导航菜单下无子菜单，左侧隐藏
 .aui-wrapper.all-main-wraper .smp_main-r.main-no-left{
   padding-left:10px;
+}
+
+// 基础组件
+.basic-com{
+  height:100%;
+  display: flex;
+  flex-direction: column;
+  .bc-top-search{
+    width:743px;
+    margin:0 auto;
+    @include normal-shadow-1();
+    flex-shrink: 0;
+    .smp-normal-input{
+      width:100%;
+    }
+  }
+  .bc-bd{
+    padding:20px 0;
+    flex:1;
+    height:0;
+  }
+  .bc-wraper{
+    padding:0 47px;
+    height:100%;
+  }
+  // .bc-wraper{
+  //   padding:0 47px;
+  //   height:100%;
+  //   .bc-item{
+  //     display: inline-block;
+  //     vertical-align: top;
+  //     width:32%;
+  //     height:200px;
+  //     background-color: $smp--color-blue;
+  //     margin:0 2% 20px 0;
+  //     &:nth-child(3n){
+  //       margin-right:0;
+  //     }
+  //   }
+  // }
+}
+// 瀑布流
+.water-fall{
+  position: relative;
+  width:100%;
+  .wf-item{
+    position:absolute;
+    top:0;
+    left:0;
+    width:100px;
+    // height:0;
+    background-color: $smp--color-warn-lv-1;
+  }
+}
+
+// 基础组件方框
+.com-one{
+  width:100%;
+  background-color: $smp--color-white;
+  @include normal-shadow();
+  .co-hd{
+    position:relative;
+    width:100%;
+    height:41px;
+    .icon-title-bg{
+      width:35px;
+      height:41px;
+      background: url('~@/assets/img/common/icon-pop-title.png') 0 0 no-repeat;
+      display: block;
+    }
+    .title-box{
+      position:absolute;
+      top:0;
+      left:0;
+      height:41px;
+      display: flex;
+      align-items: center;
+      font-size:18px;
+      color:$smp--color-font-color-3;
+      font-weight:bold;
+      text-indent: 11px;
+    }
+  }
+  .co-bd{
+    min-height:295px;
+  }
+  
+}
+
+// 基础组件子组件
+.com-menu{
+  .cm-subwraper{
+    display: flex;
+    flex-wrap: wrap;
+    padding:5px 4.8% 0;
+  }
+}
+.com-sub-menu{
+  width:33.3%;
+  flex-shrink: 0;
+  padding:0 5.1% 0 0;
+  margin:0 0 20px 0;
+  &:nth-child(3n){
+    padding:0;
+  }
+  .csm-item{
+    background-color: #f00;
+    @include smp-radius-normal();
+    height:68px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    .csm-icon{
+      width:38px;
+      height:38px;
+      border-radius:100px;
+      background-color: #ff0;
+      flex-shrink: 0;
+      margin:0 6.25% 0 9.375%;
+    }
+    .csm-name{
+      flex:1;
+      line-height: 20px;
+      font-size:14px;
+      color:$smp--color-font-color-3;
+      max-height:60px;
+      overflow:hidden;
+      padding:0 8% 0 0;
+      white-space:pre-wrap;
+    }
+  }
+}
+.csm-zk-menu{
+  width:auto!important;
+  .el-submenu__title{
+    padding:0!important;
+    height:auto;
+  }
+  .el-menu-item{
+    padding:0!important;
+    height:auto;
+  }
+  .csm-point{
+    color:$smp--color-font-color-6;
+    font-size:30px;
+    padding:0 5px 0 8px;
+  }
 }

src/mock/index.js

@@ -11,12 +11,12 @@ import * as sysUser from './modules/sys-user'
 // tips
 // 1. 开启/关闭[业务模块]拦截, 通过调用fnCreate方法[isOpen参数]设置.
 // 2. 开启/关闭[业务模块中某个请求]拦截, 通过函数返回对象中的[isOpen属性]设置.
-fnCreate(common, false)
+fnCreate(common, true)
 fnCreate(jobSchedule, true)
 fnCreate(oss, true)
 fnCreate(sysConfig, true)
 fnCreate(sysLog, true)
-fnCreate(sysMenu, false)
+fnCreate(sysMenu, true)
 fnCreate(sysRole, true)
 fnCreate(sysUser, true)
 

src/mock/modules/sys-menu.js

@@ -590,7 +590,7 @@ var navDataList4 = [
     'name': '表单',
     'ename': 'biaodan1',
     'path': 'biaodan1',
-    'componentPath': 'modules/demo/all-form-type',
+    'componentPath': 'modules/demo/formType/form-type',
     'children': []
   },
   {
@@ -599,7 +599,7 @@ var navDataList4 = [
     'name': '表单2',
     'ename': 'biaodan2',
     'path': 'biaodan2',
-    'componentPath': 'modules/demo/all-form-type',
+    'componentPath': 'modules/demo/formType/form-type',
     'children': []
   },
   {
@@ -611,6 +611,15 @@ var navDataList4 = [
     'url': 'http://localhost:8003',
     // 'componentPath': 'modules/demo/all-form-type',
     'children': []
+  },
+  {
+    'UUID': '5',
+    'parentUUID': 0,
+    'name': '基础组件',
+    'ename': 'basiccom',
+    'path': 'basiccom',
+    'componentPath': 'modules/demo/basicComponent/basic-com',
+    'children': []
   }
 ]
 

src/mock/modules/sys-role.js

@@ -99,3 +99,38 @@ export function del () {
     }
   }
 }
+
+// 获取当前管理员信息
+export function userinfo () {
+  return {
+    // isOpen: false,
+    url: '/user/info',
+    type: 'get',
+    data: {
+      'msg': 'success',
+      'code': 0,
+      'userInfo': {
+        'displayName': '我的名字',
+        'organizations': [
+          {
+            'organizationName': '部门名字'
+          }
+        ]
+      }
+    }
+  }
+}
+
+// 获取权限
+export function buttonList () {
+  return {
+    // isOpen: false,
+    url: '/sys/button/list',
+    type: 'get',
+    data: {
+      'msg': 'success',
+      'code': 0,
+      'list': []
+    }
+  }
+}

src/router/index.js

@@ -69,6 +69,7 @@ router.beforeEach((to, from, next) => {
       return next({name: 'login'})
     }
     let firstPath = getParent(res.list)
+    console.log(res.list, firstPath)
     // console.log(firstPath)
     // if (!firstPath) {
     //   let homePage = {
@@ -141,7 +142,7 @@ function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
     // if (!url) {
     //   continue
     // }
-
+    // console.log(url)
     // 组装路由
     var route = {
       path: path,
@@ -161,7 +162,11 @@ function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
       route.component = () => import(`@/views/modules/home`)
     } else {
       route.meta.iframeURL = ''
-      route.component = () => import(`@/views/main/main-no-url-page`)
+      if (componentPath) {
+        route.component = () => import(`@/views/${componentPath}`)
+      } else {
+        route.component = () => import(`@/views/main/main-no-url-page`)
+      }
       // route.component = () => import(`@/views/${componentPath}`)
     }
     // console.log(route)

src/views/main/main-content.vue

@@ -35,6 +35,9 @@ export default {
       return isURL(url)
     },
     addParams (url) {
+      if (!this.tabIsIframe(this.$route.meta.iframeURL)) {
+        return ''
+      }
       let prevWord = '?'
       if (url.indexOf(prevWord) > -1) {
         prevWord = '&'

src/views/modules/demo/basicComponent/basic-com.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="basic-com">
+    <div class="bc-top-search">
+      <el-autocomplete value-key="name" :trigger-on-focus="false" placeholder="请输入关键字" @select="gotoMenuTop" :fetch-suggestions="FindMenu" v-model="keyValue" class="smp-normal-input">
+        <el-button slot="append" icon="el-icon-search"></el-button>
+      </el-autocomplete>
+    </div>
+    <div class="bc-bd">
+      <div class="bc-wraper scrollbar-transparent">
+      <pubuliu :list="list"></pubuliu>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import cloneDeep from 'lodash/cloneDeep'
+import pubuliu from './pubuliu'
+export default {
+  components: {
+    pubuliu
+  },
+  data () {
+    return {
+      keyValue: '',
+      list: [
+        // {
+        //   name: 'cs二级导航名',
+        //   id: 11,
+        //   style: {}
+        // },
+        // {
+        //   name: 'cs二级导航名',
+        //   id: 12,
+        //   style: {}
+        // },
+        // {
+        //   name: 'cs二级导航名',
+        //   id: 13,
+        //   style: {}
+        // },
+        // {
+        //   name: 'cs二级导航名',
+        //   id: 14,
+        //   style: {}
+        // },
+        // {
+        //   name: 'cs二级导航名',
+        //   id: 15,
+        //   style: {}
+        // },
+        // {
+        //   name: 'cs二级导航名',
+        //   id: 16,
+        //   style: {}
+        // },
+        {
+          name: '二级导航名',
+          id: 1,
+          style: {},
+          children: [
+            {
+              name: '三级导航名2',
+              id: 2,
+              pid: 1,
+              lv: 1,
+              icon: 'iconName'
+            },
+            {
+              name: '三级导航名2',
+              id: 3,
+              pid: 1,
+              lv: 1,
+              icon: 'iconName',
+              children: [
+                {
+                  name: '四级导航名2',
+                  id: 4,
+                  pid: 3,
+                  lv: 2,
+                  icon: 'iconName',
+                  children: [
+                    {
+                      name: '五级导航名2',
+                      id: 6,
+                      pid: 4,
+                      lv: 3,
+                      icon: 'iconName'
+                    }
+                  ]
+                },
+                {
+                  name: '四级导航名2',
+                  id: 5,
+                  pid: 3,
+                  lv: 2,
+                  icon: 'iconName'
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      treeArr: [],
+      treeObj: {}
+    }
+  },
+  watch: {
+
+  },
+  mounted () {
+    this.ceshi()
+    this.setTreeToArr()
+  },
+  methods: {
+    ceshi () {
+      for (let i = 11; i < 17; i++) {
+        this.list.unshift({
+          name: 'cs二级导航名' + i,
+          id: i,
+          style: {}
+        })
+      }
+    },
+    FindMenu (str, cb) {
+      let itemArr = this.treeArr.filter((e) => {
+        return e.name.indexOf(str) > -1
+      })
+      console.log(itemArr)
+      cb(itemArr)
+    },
+    gotoMenuTop (item) {
+      let rootParent = this.findParent(item)
+      // let rootItem = document.querySelector('#root' + rootParent.id)
+      let jqRoot = window.$('#root' + rootParent.id).parent()
+      let top = jqRoot.position().top
+      window.$('.bc-wraper').animate({scrollTop: top}, 300)
+    },
+    setTreeToArr () {
+      this.flatData(this.list)
+      // this.treeArr = this.treeArr.map((e) => {
+      //   return cloneDeep(e)
+      // })
+      this.treeArr.forEach((e) => {
+        this.treeObj[e.id] = e
+      })
+      // console.log(this.treeObj)
+      // console.log(this.findParent(this.treeArr[2]))
+    },
+    findParent (item) {
+      // console.log(item.id)
+      let parent = this.treeObj[item.pid]
+      if (parent) {
+        return this.findParent(parent)
+      } else {
+        return item
+      }
+    },
+    flatData (arr) {
+      arr.forEach((e, i) => {
+        let item = Object.assign({}, e)
+        this.treeArr.push(item)
+        if (item.children && item.children.length > 0) {
+          this.flatData(item.children)
+        }
+        item.children = ''
+        delete item.children
+        // item = cloneDeep(e)
+      })
+    }
+  }
+}
+</script>

src/views/modules/demo/basicComponent/com-menu.vue

@@ -0,0 +1,44 @@
+<template>
+  <comOne class="com-menu" :title="menuItem.name">
+    <div class="cm-subwraper">
+      <comSubmenu v-for="(item,index) in menuItem.children" :menuItem="item" :key="index"></comSubmenu>
+    </div>
+  </comOne>
+</template>
+<script>
+import comOne from './com-one'
+import comSubmenu from './com-sub-menu'
+export default {
+  components: {
+    comOne,
+    comSubmenu
+  },
+  props: {
+    menuItem: {
+      default () {
+        return {
+
+        }
+      }
+    }
+  },
+  data () {
+    return {
+
+    }
+  },
+  computed: {},
+  created () {
+
+  },
+  mounted () {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+<style lang="scss">
+
+</style>

src/views/modules/demo/basicComponent/com-one.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="com-one">
+    <div class="co-hd">
+      <i class="icon-title-bg"></i>
+      <span class="title-box">{{title}}</span>
+    </div>
+    <div class="co-bd">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: ''
+  },
+  data () {
+    return {
+
+    }
+  },
+  computed: {},
+  created () {
+
+  },
+  mounted () {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+<style lang="scss">
+
+</style>

src/views/modules/demo/basicComponent/com-sub-menu.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="com-sub-menu">
+    <template>
+      <el-menu
+        :unique-opened="false"
+        :collapseTransition="false"
+        :collapse="true"
+        class="csm-zk-menu">
+        <sub-menu :menuItem="menuItem" />
+      </el-menu>
+    </template>
+    <!-- <div class="csm-item" v-else>
+      <i class="csm-icon"></i>
+      <div class="csm-name" :title="menuItem.name">{{menuItem.name}}</div>
+    </div> -->
+  </div>
+</template>
+<script>
+import subMenu from './com-third-menu'
+export default {
+  components: {
+    subMenu
+  },
+  props: {
+    menuItem: {
+      default () {
+        return {
+
+        }
+      }
+    }
+  },
+  data () {
+    return {
+
+    }
+  },
+  computed: {},
+  created () {
+
+  },
+  mounted () {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+<style lang="scss">
+
+</style>

src/views/modules/demo/basicComponent/com-third-menu.vue

@@ -0,0 +1,62 @@
+<template>
+  <el-submenu v-if="menuItem.children && menuItem.children.length >= 1" :index="menuItem.id+'sub'" :popper-append-to-body="false">
+    <template slot="title">
+      <template v-if="menuItem.lv===1" class="cs">
+        <div class="csm-item">
+          <i class="csm-icon"></i>
+          <div class="csm-name" :title="menuItem.name">{{menuItem.name}}</div>
+        </div>
+      </template>
+      <template v-if="menuItem.lv>=2">
+        <em class="csm-point">&middot;</em>
+        <span class="csm-sec-name" :title=" menuItem.name">
+          {{ menuItem.name }}
+        </span>
+      </template>
+    </template>
+    <com-thirdmenu v-for="item in menuItem.children" :key="item.id+'sub'" :menuItem="item"></com-thirdmenu>
+  </el-submenu>
+  <el-menu-item v-else :index="menuItem.id+'sub'" @click="gotoRouteHandle(menuItem)">
+    <template v-if="menuItem.lv===1">
+      <div class="csm-item">
+        <i class="csm-icon"></i>
+        <div class="csm-name" :title="menuItem.name">{{menuItem.name}}</div>
+      </div>
+    </template>
+    <template v-if="menuItem.lv>=2">
+      <em class="csm-point">&middot;</em>
+      <span class="csm-sec-name" :title=" menuItem.name">
+        {{ menuItem.name }}
+      </span>
+    </template>
+  </el-menu-item>
+</template>
+
+<script>
+import comThirdmenu from './com-third-menu'
+export default {
+  name: 'com-thirdmenu',
+  data () {
+    return {
+
+    }
+  },
+  props: {
+    menuItem: {
+      type: Object,
+      required: true
+    }
+  },
+  components: {
+    comThirdmenu
+  },
+  methods: {
+    gotoRouteHandle (item) {
+      console.log(item)
+      if (item.url) {
+        this.$router.push({ path: item.url })
+      }
+    }
+  }
+}
+</script>

src/views/modules/demo/basicComponent/pubuliu.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="water-fall">
+    <div class="wf-item" v-for="(item, index) in list" :key="index" :style="item.style" ref="wfitem">
+      <comMenu :menuItem="item" :id="'root'+item.id"></comMenu>
+    </div>
+  </div>
+</template>
+<script>
+// const itemTop = [];
+import comMenu from './com-menu'
+export default {
+  components: {
+    comMenu
+  },
+  props: {
+    list: {
+      default () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      colNum: 3,
+      gap: 20,
+      lastItem: [],
+      wfitemW: '',
+      boxW: document.body.clientWidth // 屏幕宽度
+    }
+  },
+  computed: {},
+  created () {
+
+  },
+  mounted () {
+    this.init()
+    this.$nextTick(() => {
+      this.setPosition()
+    })
+  },
+  methods: {
+    init () {
+      this.boxW = document.querySelector('.water-fall').getBoundingClientRect().width
+      this.wfitemW = (this.boxW - this.gap * (this.colNum - 1)) / this.colNum
+    },
+    setPosition () {
+      let nodeList = document.querySelectorAll('.wf-item')
+      nodeList.forEach((e, i) => {
+        console.log(e.getBoundingClientRect())
+        let itemH = e.getBoundingClientRect().height
+        let itemW = this.wfitemW
+        let itemT = 0
+        let itemL = 0
+        // let colIndex = i % 3
+        // let rowIndex = Math.floot(i / 3)
+        // let itemT = rowIndex*itemW +
+        if (i < 3) {
+          itemL = i * (itemW + this.gap)
+          this.lastItem.push({
+            t: itemT + itemH + this.gap,
+            l: itemL
+          })
+        } else {
+          let minItem = this.findMinTopItem()
+          itemL = minItem.item.l
+          itemT = minItem.item.t
+          this.lastItem[minItem.index] = {
+            t: itemT + itemH + this.gap,
+            l: itemL
+          }
+        }
+        this.list[i].style = {
+          width: `${itemW}px`,
+          height: `${itemH}px`,
+          top: `${itemT}px`,
+          left: `${itemL}px`
+        }
+        // this.list[i].style.width =
+        // this.list[i].style.height = `${itemH}px`
+        // this.list[i].style.top = `${itemT}px`
+        // this.list[i].style.left = `${itemL}px`
+        // this.list[i].style = Object.assign({}, this.list[i].style)
+      })
+      // for (let i = 0; i < nodeList.length; i++) {
+      //   nodeList[i].style.position = 'absolute'
+      //   const domHeight = nodeList[i].clientHeight
+      //   let top
+      //   let left
+      //   let itemH
+      //   if (leftH > rightH) {
+      //     left = gap * 2 + this.waterfallW
+      //     top = rightH + gap
+      //     itemH = domHeight
+      //     rightH += gap + domHeight
+      //   } else {
+      //     left = gap
+      //     top = leftH + gap
+      //     itemH = domHeight
+      //     leftH += gap + domHeight
+      //   }
+      //   this.list[i].top = top
+      //   this.list[i].left = left
+      //   this.list[i].itemH = itemH
+      //   this.list[i].itemW = this.waterfallW
+      // }
+    },
+    findMinTopItem () {
+      let item = ''
+      let index = ''
+      this.lastItem.forEach((e, i) => {
+        if (!item) {
+          item = e
+          index = i
+        } else {
+          if (item.t > e.t) {
+            item = e
+            index = i
+          }
+        }
+      })
+      return {
+        item,
+        index
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+
+</style>