lshcomment 1.0.0

package/src/components/select-date/select-date.vue

@@ -0,0 +1,137 @@
+<template>
+<div class="row">
+    <div class="col-md-7 inp-box">
+        <b-form-input v-model="date" readonly/>        
+    </div>
+    <div class="col-md-5 btn-box">
+        <span @click="prev">
+            <i class="el-icon-arrow-left"></i>
+        </span>
+        <span @click="next">
+            <i class="el-icon-arrow-right"></i>
+        </span>
+    </div>
+</div>
+
+</template>
+<script>
+
+import { formatDate } from 'common/api-common'
+
+/** 
+ * 
+ * creat by lwx on 2018-04-03 11:19
+ * @name select-date 简易选择时间组件  功能: 选择前一天, 后一天 
+ * @param setDate
+ * @event get-date 返回时间格式 yyyy-mm-dd
+ * 
+ */
+export default {
+    props: {
+        setDate: {
+            type: String,
+            default: formatDate(new Date())
+        }
+    },
+    data() {
+        return {
+            currentDate: formatDate(new Date()),
+            // year: new Date().getFullYear(),
+            // month: new Date().getMonth() + 1 < 10 ? `0${new Date().getMonth() + 1}` : new Date().getMonth() + 1,
+            // day: new Date().getDate() < 10 ? `0${new Date().getDate()}` : new Date().getDate()
+            year: this.setDate.split('-')[0],
+            month: this.setDate.split('-')[1],
+            day: this.setDate.split('-')[2]
+        }
+    },
+    computed: {
+        date: {
+            get() {
+                return `${this.year}-${this.month}-${this.day}`
+            },
+            set() {}
+        }
+    },
+    mounted() {
+        this.setDate !== this.currentDate 
+            ? this.$emit('get-date', this.setDate) 
+            : this.$emit('get-date', this.date)
+
+        // this.year = '2018'  test
+        // this.month = '01'
+        // this.day = '01'        
+    },
+    methods: {
+        prev() {
+            if(this.day != 1) {
+                let d = parseInt(this.day) - 1
+                this.day = d < 10 ? `0${d}` : d  
+            }else if(this.day == 1) {
+                if(this.month == 1) {
+                    this.year = parseInt(this.year) - 1
+                    this.month = '12'
+                    this.day = '31'
+                    return
+                }
+                let m = parseInt(this.month) - 1
+                this.month = m < 10 ? `0${m}` : m 
+                this.day = this.getDays(this.year, this.month)
+            }
+        },
+        next() {
+            if(this.day < this.getDays(this.year, this.month)) {
+                let d = parseInt(this.day) + 1
+                this.day = d < 10 ? `0${d}` : d  
+            }else if(this.day == this.getDays(this.year, this.month)) {
+                if(this.month == 12) {
+                    this.year = parseInt(this.year) + 1
+                    this.month = '01'
+                    this.day = '01'
+                    return
+                }
+                let m = parseInt(this.month) + 1
+                this.month = m < 10 ? `0${m}` : m 
+                this.day = '01'
+            }
+        },
+        getDays(year, month) {
+            // 31: 1, 3, 5, 7, 8, 10, 12
+            // 30: 4, 6, 9, 11
+            // 29: 2 ( 闰年: 年数能被4整除 )  
+            // 28: 2 ( 平年: 年数不能被4整除 )
+            let y = parseInt(year),
+                m = parseInt(month)
+            if(m === 2) {
+                return y % 4 === 0 ? 29 : 28
+            }else if(m === 4 || m === 6 || m === 9 || m === 11 ) {
+                return 30
+            }else {
+                return 31
+            }
+        }
+    },
+    watch: {
+        date(val) {
+            this.$emit('get-date', val)
+        }
+    }
+}
+</script>
+<style scoped>
+.inp-box .form-control[readonly] {
+    background-color: #fff !important;
+}
+.btn-box span{
+    display: inline-block;
+    width: 40px;
+    height: 30px;
+    text-align: center;
+    line-height: 30px;
+    background: #b2bec6;
+    color: #fff;
+    margin-top: 2px;
+    cursor: pointer;
+}
+</style>
+
+

package/src/components/service-info/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+
+    </div>
+</template>
+<script>
+export default {
+    
+}
+</script>
+<style>
+
+</style>

package/src/components/sidebar/Sidebar.vue

@@ -0,0 +1,456 @@
+<template>
+  <div class="sidebar">
+    <div class="user-info">
+    <div class="user-avator">
+        <!-- <div class="user-photo"><img :src="userImgPath" alt=""></div> -->
+    </div>
+    <div class="user-info-name">
+        <div>
+        <div class="orgName">{{ orgName }}</div>
+        <b-dropdown id="ddown1" :text="empName">
+            <b-dropdown-item @click="Org()" v-show="flag">
+            <i class="fa fa-users"></i> 切换组织
+            </b-dropdown-item>
+            <b-dropdown-item @click="changePwd()">
+            <i class="fa fa-shield"></i> 修改密码
+            </b-dropdown-item>
+            <b-dropdown-item @click="loginOut()">
+            <i class="fa fa-lock"></i> 退出
+            </b-dropdown-item>
+        </b-dropdown>
+        </div>
+    </div>
+    <div class="search-menu" v-if="searchMenuList.length">
+        <el-autocomplete
+        popper-class="search-menu-list"
+        placeholder="search..."
+        v-model="selectMenu"
+        :fetch-suggestions="querySearch"
+        @select="handleSelect"
+        />
+    </div>
+    </div>
+    <nav class="sidebar-nav">
+      <ul class="nav">
+        <li class="nav-item" v-for="(item, index) in menuList" :key="index">
+          <template>
+            <!-- 一级菜单并且有子菜单 -->
+            <template v-if="item.children">
+              <SidebarNavDropdown
+                class="first-menu"
+                :opened="firstMenuIndex == index ? 'open' : ''"
+                :name="item.resourceName"
+                :url="item.resourcePath"
+                :icon="item.addField1"
+                @handleSecondMenu="handleSecondMenu"
+              >
+                <!-- 二级菜单 -->
+                <template v-for="(child, i) in item.children">
+                  <SidebarNavDropdown
+                    class="second-menu"
+                    v-if="!child.resourcePath"
+                    :opened="secondMenuIndex == i ? 'open' : ''"
+                    :name="child.resourceName"
+                    :url="child.resourcePath"
+                    :icon="child.addField1"
+                    :key="child.resourceCode"
+                  >
+                    <!-- 三级菜单 -->
+                    <li
+                      class="nav-item"
+                      v-for="(grandson, j) in child.children"
+                      :key="j"
+                      @click="toGoMenu(grandson, index, i)"
+                    >
+                      <SidebarNavLink
+                        class="third-link"
+                        :class="{'nav-active': grandson.resourcePath === isCurrent}"
+                        :name="grandson.resourceName"
+                        :url="grandson.resourcePath"
+                        :isNative="grandson.addField2"
+                        :icon="grandson.addField1"
+                        :title="grandson.resourceName"
+                        :levels="grandson.levels"
+                        :itemInfo="grandson"
+                      />
+                    </li>
+                  </SidebarNavDropdown>
+                  <li
+                    class="nav-item"
+                    v-else
+                    @click="toGoMenu(child, index, i)"
+                    :key="child.code"
+                  >
+                    <SidebarNavLink
+                      class="second-link"
+                      :class="{'nav-active': child.resourcePath === isCurrent}"
+                      :name="child.resourceName"
+                      :url="child.resourcePath"
+                      :isNative="child.addField2"
+                      :itemInfo="child"
+                    />
+                  </li>
+                </template>
+              </SidebarNavDropdown>
+            </template>
+            <!-- 一级菜单没有子菜单 -->
+            <template v-else>
+              <SidebarNavLink
+                :class="{'nav-active': item.resourcePath === isCurrent}"
+                :name="item.resourceName"
+                :url="item.resourcePath"
+                :isNative="item.addField2"
+                :icon="item.addField1"
+                :itemInfo="item"
+              />
+            </template>
+          </template>
+        </li>
+      </ul>
+      <slot></slot>
+      <div slot="footer"></div>
+    </nav>
+  </div>
+</template>
+<script>
+import Vue from 'vue'
+import { Autocomplete } from 'element-ui'
+import SidebarNavDropdown from "./SidebarNavDropdown";
+import SidebarNavLink from "./SidebarNavLink";
+import SidebarNavTitle from "./SidebarNavTitle";
+import Api from "../../common/api.js";
+import common from "../../common/common.js";
+import config from "../../common/config.js";
+import menuData from "../../common/menuData.js";
+import changeOrg from "../header/changeOrg.vue";
+import { mapState, mapGetters, mapActions } from "vuex";
+import { MENUFLAG } from 'common/ref-code.js'
+import { jsonTree } from 'common/api-common'
+
+Vue.use(Autocomplete)
+
+export default {
+  name: "sidebar",
+  data() {
+    return {
+      firstMenuIndex: -1,
+      secondMenuIndex: -1,
+      selectMenu: '', // 被选中的菜单
+      searchMenuList: [], // 菜单下拉列表
+      menuList: [],
+      parentIndex: 0,
+      childIndex: 0,
+      isCurrent: "",
+      showModal: false,
+      orgTitle: "切换组织",
+      userImgPath: (common.env() == 'development' ? '/static/image/userimg.jpg': '/resources/image/userimg.jpg'),
+
+      userInfo: {},
+      orgName: '',
+      empName: '',
+      // orgNameAndEmpName: '',
+      flag: false
+    };
+  },
+  props: {
+    navItems: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  },
+  computed: {
+    ...mapGetters('finance', [
+      'changedOrg'
+    ])
+  },
+  created() {
+    this.initMenu()
+  },
+  mounted() {
+    window.vue = this
+    if(this.userInfo) {
+      this.init()
+
+      this.defaultValue = this.userInfo.inCharegOrgVo.orgCode
+    }
+    // 切换项目后，重新定位菜单栏位置
+    if(document.getElementsByClassName('sidebar-nav') && document.getElementsByClassName('sidebar-nav').length){
+      document.getElementsByClassName('sidebar-nav')[0].addEventListener('scroll', (e) => {
+        let timer = 0
+        if (timer) clearTimeout(timer)
+        timer = setTimeout(() => {
+          sessionStorage.setItem('sidebarNavScrollTop', e.target.scrollTop)
+          timer = 0
+        }, 500)
+      })
+      this.$nextTick(() => {
+        document.getElementsByClassName('sidebar-nav')[0].scrollTop = sessionStorage.getItem('sidebarNavScrollTop') || 0
+      });
+    }
+  },
+  components: {
+    SidebarNavDropdown,
+    SidebarNavLink,
+    SidebarNavTitle,
+    changeOrg
+  },
+  methods: {
+    init() {
+      this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
+      const { orgName } = this.userInfo.inCharegSubOrgVo
+      const { empCnName } = this.userInfo.empVo
+
+      this.orgName = orgName
+      this.empName = empCnName
+      // this.orgNameAndEmpName = `${orgName} - ${empCnName}`
+
+      this.flag = this.userInfo.orgCodes.length > 1
+    },
+
+    // 切换组织
+    Org() {
+      this.$store.dispatch("finance/organize", true)
+    },
+
+    // 更换密码
+    changePwd() {
+      let url = window.location.href
+      this.$store.dispatch("login/getBackPage", url)
+      this.$router.push('/resetPassword')
+    },
+
+    // 退出
+    loginOut() {
+      Api.toLogin.logout({}).then(res => {
+        if (res.status == 200) {
+          common.clearSession()
+          let neworigin = ''
+          neworigin = common.env() == 'development' ? 'http://dev.iris.com' : window.location.origin
+          window.location.href = neworigin + config.loginUrl
+			sessionStorage.removeItem('fakeSession')
+        }
+      });
+    },
+
+    // 初始化菜单
+    initMenu() {
+      if(!sessionStorage.getItem('resourceInfo')) {
+        const userInfo = sessionStorage.getItem('userInfo') && JSON.parse(sessionStorage.getItem('userInfo'))
+        const groupCode = userInfo.userAvailableInfo.orgCode
+        const postCodes = userInfo.postnCodes
+        const orgCode = userInfo.inCharegSubOrgVo.orgCode
+        const params = { groupCode, postCodes, orgCode, resourceChannelCode: 'MenuPC' }
+
+        Api.toLogin.queryPostUsableGroupResourceInfo(params, res => {
+          if (res && res.data.code == 'success') {
+            if (res.data.obj) {
+
+              sessionStorage.setItem("resourceInfo", JSON.stringify(res.data.obj))
+
+              this.searchMenuList = []
+              const menuList = res.data.obj.menu || []
+              common.setSession('menuList', JSON.stringify(menuList))
+              const config = { id: 'resourceCode', pid: 'fatherResourceCode' }
+              this.menuList = jsonTree(menuList, config)
+
+              menuList.forEach(item => {
+                if (item.resourcePath) {
+                  item.value = item.resourceName
+                  this.searchMenuList.push(item)
+                }
+              })
+
+              this.matchUrl(this.menuList, window.location.pathname)
+            } else {
+              // this.$router.push('/dashboard')
+            }
+          }
+        })
+      }else {
+        this.searchMenuList = []
+        const menuList = JSON.parse(sessionStorage.getItem('resourceInfo')).menu || []
+        const config = { id: 'resourceCode', pid: 'fatherResourceCode' }
+        this.menuList = jsonTree(menuList, config)
+
+        menuList.forEach(item => {
+          if (item.resourcePath) {
+            item.value = item.resourceName
+            this.searchMenuList.push(item)
+          }
+        })
+
+        this.matchUrl(this.menuList, window.location.pathname)
+      }
+    },
+
+    // 点击一级菜单的时候，二级菜单默认都收起
+    handleSecondMenu() {
+      this.secondMenuIndex = -1
+    },
+
+    // 切换菜单
+    toGoMenu(child, index, i) {
+      this.isCurrent = child.resourcePath
+      this.firstMenuIndex = index
+      this.secondMenuIndex = i
+    },
+
+    // 跨项目跳转时 根据 url 匹配左侧菜单
+    matchUrl(menuList, pathName) {
+
+      const isLocal = common.env() == 'development' ? true : false
+
+      menuList.forEach((menu, i) => {
+        ;(menu.children || []).forEach((secondMenu, j) => {
+          const path = isLocal ? secondMenu.resourcePath : '/' + secondMenu.addField2 + secondMenu.resourcePath
+          if (path == pathName)
+            this.toGoMenu(secondMenu, i, j)
+          else
+            ;(secondMenu.children || []).forEach(thirdMenu => {
+              const path = isLocal ? thirdMenu.resourcePath : '/' + thirdMenu.addField2 + thirdMenu.resourcePath
+              if (path == pathName)
+                this.toGoMenu(thirdMenu, i, j)
+            })
+        })
+      })
+    },
+
+    // 菜单搜索
+    querySearch(queryString, cb) {
+      const results = queryString ? this.searchMenuList.filter(this.createFilter(queryString)) : []
+      cb(results)
+    },
+
+    // 过滤未选中的菜单
+    createFilter(queryString) {
+      return (searchMenuList) => {
+        return (searchMenuList.value.toLowerCase().includes(queryString.toLowerCase()))
+      }
+    },
+
+    // 选择菜单
+    handleSelect(item) {
+      this.matchUrl(this.menuList, item.resourcePath)
+      if (item.addField2 == 'livecs') this.$router.push(item.resourcePath)
+      else {
+        const classify = item.addField2 == 'live' ? 'web' : item.addField2
+        window.location.href = `${window.location.origin}/${classify}${item.resourcePath}`
+      }
+    }
+  },
+  watch: {
+    // 切换组织成功, 重新初始化需要初始化的东西
+    changedOrg(val) {
+      // this.init()
+      // this.initMenu()
+      location.reload()
+    },
+    '$route'(val) {
+       this.$data.isCurrent = val.fullPath
+       this.matchUrl(this.menuList, window.location.pathname)
+     }
+  }
+}
+</script>
+
+<style lang="scss">
+  .search-menu-list {
+    .el-autocomplete-suggestion__wrap {
+      padding: 0;
+    }
+    .el-autocomplete-suggestion__list {
+      li {
+        line-height: 32px;
+        color: #214A80;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      li:hover {
+        text-decoration: underline;
+      }
+      li:active, .highlighted {
+        background: #e4e8f1;
+      }
+    }
+    .el-scrollbar__wrap {
+      border-radius: 0;
+      border: none;
+    }
+  }
+  .sidebar {
+    .dropdown-menu {
+      width: 120px;
+      min-width: 120px !important;
+      left: 40px !important;
+      transform: translate3d(0, 0, 0) !important;
+    }
+    .orgName {
+      font-size: 12px;
+      opacity: 0.8;
+      background-color: transparent;
+      white-space: nowrap;
+      border: none;
+      color: #fff;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+    }
+    .font-18 {
+      font-size: 18px !important
+    }
+    .nav-item .nav-link {
+      height: 45px;
+      i {
+        vertical-align: baseline !important;
+      }
+    }
+    .user-avator, #ddown1 {
+      // padding-left: 20px;
+      display: flex;
+      justify-content: center;
+    }
+    .el-autocomplete {
+      display: block;
+      margin-top: 5px;
+    }
+    .el-input__inner {
+      line-height: 32px;
+    }
+    .search-menu {
+      box-sizing: border-box;
+      padding: 0 10px 10px;
+    }
+    .el-input {
+      background: url('../../../static/image/search.png') no-repeat right center;
+      background-size: 12px;
+      background-position: 160px 15px;
+    }
+    .el-input__inner {
+      background: no-repeat bottom,50% calc(100%);
+      background-size: 0 100%,100% 100%;
+      transition: background 0s ease-out;
+      background-image: linear-gradient(0deg,#B3504A 1px,rgba(156,39,176,0) 0),linear-gradient(0deg,#d2d2d2 1px,hsla(0,0%,82%,0) 0);
+      color: #fff;
+      border: none;
+    }
+    .el-input__inner:focus{
+      background-size: 100% 100%,100% 100%;
+      transition-duration: .3s;
+      box-shadow: none;
+    }
+    ::-webkit-input-placeholder {
+      color:#fff !important;
+    }
+    :-moz-placeholder {
+      color:#fff !important;
+    }
+    ::-moz-placeholder {
+      color:#fff !important;
+    }
+    :-ms-input-placeholder {
+      color:#fff !important;
+    }
+  }
+</style>

package/src/components/sidebar/SidebarNavDropdown.vue

@@ -0,0 +1,66 @@
+<template>
+  <router-link tag="li" class="nav-item nav-dropdown" :class="opened" :to="url" disabled>
+    <div class="nav-link nav-dropdown-toggle" @click="handleClick">
+      <i class="SidebarNavDropdown" :class="icon"></i> {{name}}
+    </div>
+    <ul class="nav-dropdown-items">
+      <slot></slot>
+    </ul>
+  </router-link>
+</template>
+
+<script>
+export default {
+  props: {
+    opened: {
+      type: String,
+      defalult: ''
+    },
+    name: {
+      type: String,
+      default: ""
+    },
+    url: {
+      type: String,
+      default: ""
+    },
+    icon: {
+      type: String,
+      default: ""
+    }
+  },
+  methods: {
+    handleClick(e) {
+      e.preventDefault()
+      if(e.target.parentElement.classList.contains('open')) {
+        e.target.parentElement.classList.toggle('open')
+      } else {
+
+        const firstMenu = document.getElementsByClassName('first-menu')
+        const secondMenu = document.getElementsByClassName('second-menu')
+        const classList = e.target.parentElement.classList
+
+        classList.contains('first-menu') && this.toggleClass(firstMenu, classList)
+        classList.contains('second-menu') && this.toggleClass(secondMenu, classList)
+      }
+      this.$emit('handleSecondMenu')        
+    },
+    toggleClass(ele, classList) {
+      for (let i = 0; i < ele.length; i++) {
+        ele[i].classList.remove('open')
+      }
+      setTimeout(() => {
+        classList.toggle('open')
+      }, 200)
+    }
+  }
+};
+</script>
+<style scoped>
+.SidebarNavDropdown {
+  color: aliceblue !important;
+}
+.second-menu > div.nav-link{
+  padding-left: 40px !important;
+}
+</style>