@lambo-design/pro-layout 1.0.0-beta.47 → 1.0.0-beta.470

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-quick-todoCenter.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="pro-layout-tools-quick-todo">
+    <Dropdown>
+      <Badge :count="todoCenterDatas.length" class-name="badge-count">
+        <Icon type="ios-list-box-outline" size="18" style="cursor: pointer"/>
+      </Badge>
+      <template #list>
+        <DropdownMenu slot="list" class="todo-dropdown-menu">
+          <!-- 滚动区域 -->
+          <div class="todo-list-scroll">
+            <DropdownItem v-for="(item, index) in displayedTodos" :key="index" class="dropdown-item" @click.native="getDetail(item)">
+              <div class="item-title" :title="item.taskTitle">
+                {{ item.taskTitle }}
+              </div>
+              <div class="item-time">
+                {{ formatTimestamp(item.taskInitTime,'YYYY-MM-DD HH:mm:ss') }}
+              </div>
+            </DropdownItem>
+          </div>
+          <!-- 固定的底部区域 -->
+          <div class="dropdown-footer" :class="[todoCenterDatas.length == 0 ? 'no-line' : '']">
+            <Button type="text" v-if="todoCenterDatas.length > 0" @click="getMore">{{ t('pro-layout.header.todo-more') }}</Button>
+            <div class="no-data" v-if="todoCenterDatas.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,
+      todoCenterDatas:[],
+      displayedTodos:[]
+    }
+  },
+  methods: {
+    initListener() {
+      Bus.$on('other-datas',(data) => {
+        this.initTodoList(data);
+      })
+    },
+    destroyListener() {
+      Bus.$off('other-datas')
+    },
+    initTodoList(data) {
+      if (data && data.todoCenterDatas) {
+        this.todoCenterDatas = deepCopy(data.todoCenterDatas);
+        this.displayedTodos = this.todoCenterDatas.slice(0, 10);
+      }
+    },
+    getDetail(item){
+      Bus.$emit('other-operate','todoCenter-detail',item)
+    },
+    getMore() {
+      Bus.$emit('other-operate','todoCenter-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 {
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  max-height: 300px;
+  padding: 0;
+
+  // 滚动区域
+  .todo-list-scroll {
+    flex: 1;
+    overflow-y: auto;
+    max-height: 260px; // 根据实际需要调整，留出底部footer的空间
+
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 0;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #c1c1c1;
+      border-radius: 2px;
+    }
+
+    .dropdown-item {
+      overflow: hidden;
+      padding: 8px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #f5f5f5;
+      }
+
+      .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;
+        font-size: 12px;
+      }
+
+      .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 {
+    flex-shrink: 0;
+    line-height: 24px;
+    border-top: 1px solid var(--layout-sider-line-color, @_layout-sider-line-color);
+    padding: 8px;
+    text-align: center;
+    background-color: #fff;
+
+    &.no-line {
+      border-top: 0;
+    }
+
+    .no-data {
+      text-align: center;
+    }
+  }
+}
+</style>