@lambo-design/pro-layout 1.0.0-beta.45 → 1.0.0-beta.451

package/src/components/pro-layout-header/pro-layout-tools/components/pro-layout-tools-quick-search.vue

@@ -0,0 +1,305 @@
+<template>
+  <div class="pro-layout-tools-quick-search">
+    <Tooltip :content="t('pro-layout.header.search-menu')" placement="bottom">
+      <Icon v-show="showSearchIcon" @click="handleIconClick" type="ios-search-outline" size="16" style="cursor: pointer" id="searchIcon"/>
+    </Tooltip>
+    <transition name="slide">
+      <div class="topInput" id="modalTopInput"  v-show="showTopInput" @click="handleTopInput">
+        <Input v-model="searchTopText" clearable :placeholder="t('pro-layout.header.search-menu')" ref="topInput"
+               :border="false" style="width: 200px;" @on-clear="handleTopInput"
+               @on-change="handleTopInput" @on-blur="handleTopBlur">
+          <template #prefix>
+            <Icon type="ios-search" size="23"/>
+          </template>
+        </Input>
+      </div>
+    </transition>
+    <Modal v-model="searchTopModal" class="quick-search-fast-con-modal" footer-hide :closable="false" :mask="false" id="topModalId"
+           :styles="{top: '55px',width: '420px',float:'right'}">
+      <div v-if="spinShowTop">
+        <Spin size="large"  v-if="spinShowTop" :show="spinShowTop">
+          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
+          <div>{{ t('pro-layout.header.search-loading') }}</div>
+        </Spin>
+      </div>
+      <div v-else class="modal-content">
+        <Tabs value="menu" :animated="false" @on-click="tabLabel" style="width:100%;height:100%">
+          <TabPane :label="t('pro-layout.header.search-type-menu')" name="menu">
+            <div v-if="tab==='menu'">
+              <div v-for="(item,index) in menuData" :key="index">
+                <div class="menu-style" @click="handleMenuClick(item)">
+                  <Icon :type="item.icon"/>
+                  <span class="label-style">{{ item.label }}</span>
+                </div>
+              </div>
+            </div>
+          </TabPane>
+          <TabPane :label="t('pro-layout.header.search-type-notice')" name="notice">
+            <div v-if="tab==='notice'">
+              <div v-for="(item,index) in noticeData" :key="index">
+                <div class="menu-style" @click="handleNoticeClick(item)">
+                  <Icon :type="item.icon"/>
+                  <span class="label-style">{{ item.noticeTitle }}</span>
+                </div>
+              </div>
+            </div>
+          </TabPane>
+          <TabPane :label="t('pro-layout.header.search-type-message')" name="message">
+            <div v-if="tab==='message'">
+              <div v-for="(item,index) in messageData" :key="index">
+                <div class="menu-style" @click="handleMessageClick(item)">
+                  <Icon :type="item.icon"/>
+                  <span class="label-style">{{ item.noticeTitle }}</span>
+                </div>
+              </div>
+            </div>
+          </TabPane>
+        </Tabs>
+
+        <Row type="flex" align="middle" justify="center" class="more" >
+          <Col><a @click="searchMore">{{ t('pro-layout.header.search-more') }}</a></Col>
+        </Row>
+        <div v-if="menuData.length === 0">
+          <span class="no-result">{{ t('pro-layout.header.search-no-data') }}</span>
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import Bus from '@lambo-design/shared/utils/bus'
+import {arraysEqual, getAllElements, getSessionStorage} from '@lambo-design/shared/utils/platform'
+import { mapActions } from 'vuex'
+import generatorMenuList from "@lambo-design/shared/utils/menu";
+import Locale from "@lambo-design/core/src/mixins/locale";
+
+export default {
+  name: 'pro-layout-tools-quick-search',
+  mixins: [Locale],
+  data() {
+    return {
+      menuList: [],
+      showSearchIcon:true,
+      searchTopModal:false,
+      searchTopText:'',
+      showTopInput:false,
+      spinShowTop:false,
+      menuData:[],
+      tab:'menu',
+      noticeData:[],
+      messageData:[],
+      perSearchMap:new Map(),
+      originalAllMenuList:[]
+    }
+  },
+  watch:{
+    searchTopText(keyword){
+      if (this.tab === 'notice'){
+        this.perSearchMap.set('notice',keyword)
+        Bus.$emit('change-search-keyword',keyword,this.tab)
+      }else if (this.tab === 'message'){
+        Bus.$emit('change-search-keyword',keyword,this.tab)
+        this.perSearchMap.set('message',keyword)
+      }
+    },
+    tab(val){
+      if (val === 'notice' && this.perSearchMap.get('notice') !== this.searchTopText){
+        this.perSearchMap.set('notice',this.searchTopText)
+        Bus.$emit('change-search-tab',this.searchTopText,val)
+      }else if (val === 'message' && this.perSearchMap.get('message') !== this.searchTopText){
+        Bus.$emit('change-search-tab',this.searchTopText,val)
+        this.perSearchMap.set('message',this.searchTopText)
+      }
+    }
+  },
+  methods: {
+    ...mapActions([
+      'getNoticeListData'
+    ]),
+    initListener() {
+      Bus.$on('other-datas',(data)=>{
+        this.initNoticeAndMessage(data)
+      });
+      Bus.$on('origin-all-menu-list',(data)=>{
+        this.initCanSearchMenu(data)
+      })
+    },
+    destroyListener() {
+      Bus.$off('other-datas')
+      Bus.$off('origin-all-menu-list')
+    },
+    initNoticeAndMessage(data){
+      if (data){
+        if(data.noticeList && data.noticeList.length > 0){
+          this.noticeData = data.noticeList
+        }
+        if (data.messageList && data.messageList.length > 0){
+          this.messageData = data.messageList
+        }
+      }
+    },
+    initCanSearchMenu(data){
+      if (arraysEqual(this.originalAllMenuList, data)) {
+        return;
+      }
+      let appList = getSessionStorage('appList')
+      let appIds = '';
+      let appIdList = [];
+      if (appList && appList.length > 0) {
+        for(let app of appList) {
+          appIdList.push(app.appId);
+        }
+        appIds = appIdList.join(",");
+      }
+      let treeMenuList = generatorMenuList(data,appIds,'menu');
+      let result = []
+      getAllElements(treeMenuList,result)
+      this.originalAllMenuList = data;
+      this.menuList = data.filter(menuItem => menuItem.type == '2' && menuItem.permissionId && result.includes(menuItem.permissionId))
+    },
+    filterMenu(){
+      if (this.searchTopText){
+        const regex = new RegExp(this.searchTopText, "i");
+        this.menuData = this.menuList.filter(menuItem => {
+          return menuItem.label.match(regex) && menuItem.type === 2;
+        });
+        return
+      }
+    },
+    async handleTopInput(){
+      this.searchTopModal = true
+      this.spinShowTop = true
+      if (this.tab === 'menu'){
+        this.filterMenu()
+      }
+      this.spinShowTop = false
+    },
+    handleTopBlur(){
+      this.searchTopModal = false
+      this.showTopInput = false
+      this.showSearchIcon = true
+    },
+    handleIconClick(){
+      this.showTopInput = true
+      this.showSearchIcon = false
+      this.searchTopModal = true
+    },
+    handleOutsideClick(event) {
+      if(document.getElementById("topModalId") && !document.getElementById("topModalId").contains(event.target)
+          && document.getElementById("modalTopInput") && !document.getElementById("modalTopInput").contains(event.target)
+          && document.getElementById("searchIcon") && !document.getElementById("searchIcon").contains(event.target)){
+        let clearButton = event.target.closest(".ivu-icon-ios-close-circle");
+        if (event.target.parentNode) {
+          if(clearButton){
+            this.searchTopModal = true;
+            this.showTopInput = true;
+            this.showSearchIcon = false;
+          } else {
+            setTimeout(() => {
+              this.searchTopModal = false;
+              this.showTopInput = false;
+              this.showSearchIcon = true
+            }, 525);
+          }
+        }
+      }
+    },
+    handleMenuClick(item){
+      Bus.$emit('select-menu',item.name,item)
+    },
+    handleNoticeClick(item){
+      Bus.$emit('other-operate','select-notice',item.noticeId)
+    },
+    handleMessageClick(item){
+      Bus.$emit('other-operate','select-message',item.noticeId)
+    },
+    searchMore(){
+      this.searchTopModal = false
+      this.showTopInput = false
+      this.showSearchIcon = true
+      Bus.$emit('other-operate','search-more',this.searchTopText)
+    },
+    async tabLabel(e){
+      this.tab = e
+      if (e === 'menu') {
+        this.filterMenu()
+      }
+    },
+  },
+  created() {
+    this.initListener()
+  },
+  mounted() {
+    window.addEventListener("click", this.handleOutsideClick);
+  },
+  beforeDestroy() {
+    this.destroyListener()
+    window.removeEventListener("click", this.handleOutsideClick);
+  }
+}
+</script>
+<style lang="less" scoped>
+.pro-layout-tools-quick-search{
+  .topInput{
+    float: right;
+    position: relative;
+    z-index: 1000;
+    margin-top: 0px;
+    margin-left: 10px;
+  }
+  .slide-enter-active,
+  .slide-leave-active{
+    transition: transform 0.5s;
+  }
+  .slide-enter{
+    transform: translateX(100%);
+  }
+  .slide-leave-to{
+    transform: translateX(175px);
+  }
+}
+</style>
+<style lang="less">
+@import '@lambo-design/core/src/styles/default.less';
+.quick-search-fast-con-modal {
+  .ivu-modal-body{
+    position: relative;
+    padding: 16px 16px 40px 16px;
+    font-size: var(--font-size-base, 14px);
+    line-height: 1.5;
+  }
+  .modal-content {
+    height: 300px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -ms-overflow-style: none;  /* Internet Explorer 10+ */
+    scrollbar-width: none;  /* Firefox */
+    &::-webkit-scrollbar {
+      display: none;  /* Chrome, Safari 和 Opera */
+    }
+    .menu-style {
+      margin    : 5px;
+      font-size : 16px;
+      display   : inline-block;
+      cursor    : pointer;
+      &:hover{
+        color: var(--primary-color,@_primary-color);
+      }
+    }
+    .label-style {
+      height      : 13px;
+      font-size   : 14px;
+      font-weight : 500;
+      margin-left : 5px;
+      line-height : 18px;
+    }
+  }
+}
+.more{
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  padding: 10px 0;
+}
+</style>

package/src/components/pro-layout-header/pro-layout-tools/components/pro-layout-tools-quick-todo.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="pro-layout-tools-quick-todo">
+    <Dropdown >
+      <Badge :count="todoDatas.length" class-name="badge-count">
+        <Icon type="ios-alarm-outline" size="18" style="cursor: pointer"/>
+      </Badge>
+      <template #list>
+        <DropdownMenu slot="list" class="todo-dropdown-menu">
+          <DropdownItem v-for="(item, index) in displayedTodos" :key="index" class="dropdown-item" @click.native="getDetail(item)" >
+            <div class="item-title" :title="item.procName">
+              {{ item.procName }}
+            </div>
+            <div class="item-time">
+              {{ formatTimestamp(item.createTime,'YYYY-MM-DD HH:mm:ss') }}
+            </div>
+            <div class="item-des">
+              {{ item.busKeyDes }}
+            </div>
+          </DropdownItem>
+          <div class="dropdown-footer" :class="[todoDatas.length == 0 ? 'no-line' : '']">
+            <Button type="text" v-if="todoDatas.length > 0" @click="getMore" >{{ t('pro-layout.header.todo-more') }}</Button>
+            <div class="no-data" v-if="todoDatas.length == 0" >{{ t('pro-layout.header.todo-no-data') }}</div>
+          </div>
+        </DropdownMenu>
+      </template>
+    </Dropdown>
+  </div>
+</template>
+
+<script>
+import Bus from '@lambo-design/shared/utils/bus';
+import {deepCopy} from '@lambo-design/shared/utils/assist';
+import {formatTimestamp} from '@lambo-design/shared/utils/date'
+import Locale from "@lambo-design/core/src/mixins/locale";
+
+export default {
+  name: "pro-layout-tools-quick-todo",
+  mixins: [Locale],
+  data() {
+    return {
+      formatTimestamp: formatTimestamp,
+      todoDatas:[],
+      displayedTodos:[]
+    }
+  },
+  methods: {
+    initListener() {
+      Bus.$on('other-datas',(data) => {
+        this.initTodoList(data);
+      })
+    },
+    destroyListener() {
+      Bus.$off('other-datas')
+    },
+    initTodoList(data) {
+      if (data && data.todoDatas) {
+        this.todoDatas = deepCopy(data.todoDatas);
+        this.displayedTodos = this.todoDatas.slice(0, 10);
+      }
+    },
+    getDetail(item){
+      Bus.$emit('other-operate','todo-detail',item)
+    },
+    getMore() {
+      Bus.$emit('other-operate','todo-more')
+    }
+  },
+  created() {
+    this.initListener()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  }
+}
+</script>
+
+<style lang="less">
+@import "@lambo-design/core/src/styles/default";
+.pro-layout-tools-quick-todo{
+  .badge-count{
+    top:12px;
+    height: 10px;
+    line-height: 8px;
+    min-width: 8px;
+    padding: 0;
+    font-size: 8px;
+    width: 10px;
+  }
+}
+.todo-dropdown-menu {
+  max-height: 300px;
+  width: 300px;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+  .dropdown-item {
+    overflow: hidden;
+    padding: 8px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    .item-title{
+      font-family: "黑体", Arial, sans-serif;
+      margin-left: 5px;
+      flex: 1 0 auto;
+      width: 100%;
+      margin-right: auto;
+      white-space:nowrap;
+      overflow:hidden;
+      text-overflow: ellipsis;
+    }
+    .item-time{
+      font-family: "黑体", Arial, sans-serif;
+      font-weight: normal;
+      flex: 0 0 auto;
+      margin-top: 3px;
+      margin-left: auto;
+      color: #808695;
+    }
+    .item-des{
+      flex: 1 0 80%;
+      height: auto;
+      margin: 3px 20px 0;
+      font-size: 12px;
+      color: #808695;
+      white-space: normal;
+      word-wrap: break-word;
+    }
+  }
+  .dropdown-footer{
+    line-height: 24px;
+    border-top: 1px solid var(--layout-sider-line-color,@_layout-sider-line-color);
+    padding: 8px;
+    text-align: center;
+    &.no-line{
+      border: 0;
+    }
+    .no-data{
+      text-align: center;
+    }
+  }
+}
+</style>

package/src/components/pro-layout-header/pro-layout-tools/components/pro-layout-tools-user.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="user-avatar-dropdown">
+    <Dropdown @on-click="handleClick" :transfer="false">
+      <span>{{ t('pro-layout.header.user-welcome') }}，{{ userInfo.userName }}</span>
+      <Icon v-if="userInfo.dropList.length > 0" type="ios-arrow-down"/>
+      <DropdownMenu v-if="userInfo.dropList.length > 0" slot="list">
+        <DropdownItem v-if="userInfo.dropList.includes('theme')" name="theme"><span>{{ t('pro-layout.header.user-change-theme') }}</span></DropdownItem>
+        <DropdownItem v-if="userInfo.dropList.includes('showTheme')" name="showTheme"><span>{{ t('pro-layout.header.user-custom-theme') }}</span></DropdownItem>
+        <DropdownItem v-if="userInfo.dropList.includes('personalCenter')" name="personalCenter"><span>{{ t('pro-layout.header.user-person-center') }}</span></DropdownItem>
+        <DropdownItem v-if="userInfo.dropList.includes('noticeList')" name="noticeList"><span>{{ t('pro-layout.header.user-notice') }}</span></DropdownItem>
+        <DropdownItem v-if="userInfo.dropList.includes('logout')" name="logout"><span>{{ t('pro-layout.header.user-logout') }}</span></DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  </div>
+</template>
+
+<script>
+import Bus from '@lambo-design/shared/utils/bus'
+import Locale from "@lambo-design/core/src/mixins/locale";
+
+export default {
+  name: 'pro-layout-tools-user',
+  mixins: [Locale],
+  data() {
+    return {
+      userInfo: {
+        userName: this.t('pro-layout.header.user-default-name'),
+        dropList: ['theme', 'personalCenter', 'noticeList', 'logout'],
+      }
+    }
+  },
+  methods: {
+    initListener() {
+      Bus.$on('user-info', (data) => {
+        this.handleUser(data)
+      })
+    },
+    destroyListener() {
+      Bus.$off('user-info')
+    },
+    handleUser(data) {
+      this.userInfo = Object.assign(this.userInfo, data)
+    },
+    handleClick(name) {
+      Bus.$emit('user-action', name)
+    }
+  },
+  created() {
+    this.initListener()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  }
+}
+</script>
+<style lang="less" scoped>
+@import '@lambo-design/core/src/styles/default.less';
+.user-avatar-dropdown {
+  float: left;
+  cursor: pointer;
+  vertical-align: middle;
+  font-size: var(--font-size-base, @_font-size-base);
+}
+</style>

package/src/components/pro-layout-header/pro-layout-tools/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="pro-layout-tools-wrapper">
+    <slot name="pro-layout-icons">
+      <LamboProLayoutToolsQuickIcons v-show="showToolsQuickIcons">
+        <template slot="pro-layout-custom-icons">
+            <slot name="pro-layout-custom-icons"></slot>
+        </template>
+      </LamboProLayoutToolsQuickIcons>
+    </slot>
+    <slot name="pro-layout-user">
+      <LamboProLayoutToolsUser></LamboProLayoutToolsUser>
+    </slot>
+  </div>
+</template>
+
+<script>
+import LamboProLayoutToolsQuickIcons from './components/pro-layout-tools-quick-icons'
+import LamboProLayoutToolsUser from './components/pro-layout-tools-user'
+export default {
+  name: "pro-layout-tools",
+  components: {
+    LamboProLayoutToolsQuickIcons,
+    LamboProLayoutToolsUser
+  },
+  props: {
+    showToolsQuickIcons: {
+      type: Boolean,
+      default: true
+    }
+  },
+}
+</script>
+
+<style scoped lang="less">
+  .pro-layout-tools-wrapper{
+    margin-right: 15px;
+  }
+</style>

package/src/components/pro-layout-header/pro-layout-trigger/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <a @click="handleChange" type="text" :class="['sider-trigger-a', collapsed ? 'collapsed' : '']">
+    <Icon type="md-menu" size="26" v-show="hideMenuLogo" />
+  </a>
+</template>
+
+<script>
+import Bus from '@lambo-design/shared/utils/bus'
+export default {
+  name: "pro-layout-trigger",
+  props:{
+    hideMenuLogo: {
+      type: Boolean,
+      default:true
+    },
+    menuScalingStatus: {
+      type: String,
+      default:'1'
+    }
+  },
+  data(){
+    return {
+      collapsed: false
+    }
+  },
+  created(){
+    this.initCollapsed();
+    this.initListener();
+  },
+  beforeDestroy(){
+    this.destroyListener();
+  },
+  watch: {
+    menuScalingStatus(val) {
+      this.initCollapsed();
+    }
+  },
+  methods: {
+    initListener(){
+      Bus.$on('trigger-change-icon',(data)=>{
+        this.collapsed = data
+        Bus.$emit('trigger-change', data)
+      });
+    },
+    destroyListener(){
+      Bus.$off('trigger-change-icon')
+    },
+    handleChange(){
+      this.collapsed = !this.collapsed
+      Bus.$emit('trigger-change', this.collapsed)
+    },
+    initCollapsed(){
+      if(this.menuScalingStatus==='0'){
+        this.collapsed=true
+      }
+      Bus.$emit('trigger-change', this.collapsed)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.trans{
+  transition: transform .2s ease;
+}
+@size: 64px;
+.sider-trigger-a{
+  float: left;
+  padding: 6px;
+  width: @size;
+  height: @size;
+  display: inline-block;
+  text-align: center;
+  margin-top: 12px;
+  i{
+    .trans;
+    vertical-align: top;
+  }
+  &.collapsed i{
+    transform: rotateZ(90deg);
+    .trans;
+  }
+}
+</style>