@lambo-design/pro-layout 1.0.0-beta.271 → 1.0.0-beta.273

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/pro-layout",
-  "version": "1.0.0-beta.271",
+  "version": "1.0.0-beta.273",
   "description": "",
   "main": "index.js",
   "author": "lambo",

package/src/components/{pro-layout-header.vue → pro-layout-header/index.vue}

@@ -13,7 +13,7 @@
       <LamboProTools></LamboProTools>
     </div>
     <div v-show="systemInfo && systemInfo.navType && systemInfo.navType == 'slide'">
-      <LamboProNavSildeBtn></LamboProNavSildeBtn>
+      <LamboProNavSilde></LamboProNavSilde>
     </div>
   </div>
 </template>
@@ -22,7 +22,7 @@
 import LamboProTrigger from './pro-layout-trigger'
 import LamboProLogo from './pro-layout-logo'
 import LamboProNav from './pro-layout-nav'
-import LamboProNavSildeBtn from './pro-layout-nav-slide-btn'
+import LamboProNavSilde from './pro-layout-nav/index-slide'
 import LamboProTools from './pro-layout-tools'
 import Bus from "@lambo-design/shared/utils/bus";
 export default {
@@ -42,7 +42,7 @@ export default {
     LamboProTrigger,
     LamboProLogo,
     LamboProNav,
-    LamboProNavSildeBtn,
+    LamboProNavSilde,
     LamboProTools
   },
   computed:{

package/src/components/{pro-layout-logo.vue → pro-layout-header/pro-layout-logo/index.vue}

@@ -122,7 +122,7 @@ export default {
   .logo{
     width: 150px;
     height: 43px;
-    background: url("../styles/images/inspur.png") no-repeat;
+    background: url("../../../styles/images/inspur.png") no-repeat;
     background-size: 100%;
     background-position: center; /* 图片在背景区域内居中显示 */
     //float: left;

package/src/components/{pro-layout-nav-slide-btn.vue → pro-layout-header/pro-layout-nav/index-slide.vue}

@@ -1,7 +1,7 @@
 <template>
   <div class="pro-layout-nav-slide-wrapper">
     <div class="nav-box-slide">
-      <LamboProNavSlide :accept-int="pointer" @topMen-list="handleCustomEvent" @topMen-num="topMen"  @topMen-true="topMenTrue"></LamboProNavSlide>
+      <LamboProNavSlideMenu :accept-int="pointer" @topMen-list="handleCustomEvent" @topMen-num="topMen"  @topMen-true="topMenTrue"></LamboProNavSlideMenu>
     </div>
     <!--slide按钮-->
     <div class="tools-box-slide">
@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import LamboProNavSlide from './pro-layout-nav-slide.vue'
+import LamboProNavSlideMenu from './components/pro-layout-nav-slide-menu'
 export default {
   data(){
     return {
@@ -36,7 +36,7 @@ export default {
     }
   },
   components: {
-    LamboProNavSlide
+    LamboProNavSlideMenu
   },
   methods:{
     handleCustomEvent(data) {

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

@@ -0,0 +1,77 @@
+<template>
+  <Tooltip v-if="currentItem && currentItem.type == 2" content="收藏" placement="bottom">
+    <Icon @click="collectEvent" :type=" isCollected ? 'ios-star' : 'ios-star-outline'" size="16" style="cursor: pointer"/>
+  </Tooltip>
+</template>
+
+<script>
+import Bus from '@lambo-design/shared/utils/bus'
+import { deepCopy } from '@lambo-design/shared/utils/assist'
+
+export default {
+  name: 'pro-layout-tools-quick-collect',
+  data() {
+    return {
+      menuList: [],
+      currentName: '',
+      currentItem: {},
+      collectMenuList: [],
+      isCollected:false
+    }
+  },
+  watch: {
+    collectMenuList(){
+      this.changeCollectMenu();
+    },
+    currentName(){
+      this.changeCollectMenu();
+    }
+  },
+  methods: {
+    initListener() {
+      Bus.$on('menu-list', (data) => {
+        this.initMenu(data);
+      })
+      Bus.$on('menu-click',(name,item) => {
+        this.initMenuClick(name, item)
+      })
+      Bus.$on('collect-menu-list',(data)=>{
+        this.initCollectMenu(data)
+      });
+    },
+    destroyListener() {
+      Bus.$off('menu-list')
+      Bus.$off('menu-click')
+      Bus.$off('collect-menu-list')
+    },
+    initMenu(data){
+      this.menuList = deepCopy(data);
+    },
+    initMenuClick(name, item){
+      this.currentName = name
+      if(item) {
+        this.currentItem = item;
+      } else {
+        this.currentItem = this.menuList.find(menu => menu.name == name)
+      }
+    },
+    initCollectMenu(data){
+      this.collectMenuList = deepCopy(data);
+    },
+    changeCollectMenu(){
+      this.isCollected = false
+      let collectMenu = this.collectMenuList.find(item => item.name == this.currentName)
+      this.isCollected = !!collectMenu;
+    },
+    collectEvent(){
+      Bus.$emit('toggle-collect-menu',!this.isCollected,this.currentItem)
+    }
+  },
+  created() {
+    this.initListener()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  }
+}
+</script>

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

@@ -0,0 +1,142 @@
+<template>
+  <Tooltip :content="isFullScreen ? '退出全屏' : '全屏'" placement="bottom">
+    <Icon  @click="handleFullScreen" :type="isFullScreen ? 'md-contract' : 'md-expand'" size="16" style="cursor: pointer"/>
+  </Tooltip>
+</template>
+
+<script>
+import Bus from '@lambo-design/shared/utils/bus'
+import { deepCopy } from '@lambo-design/shared/utils/assist'
+
+export default {
+  name: 'pro-layout-tools-quick-fullscreen',
+  data() {
+    return {
+      isFullScreen:false
+    }
+  },
+  methods: {
+    handleKeyPress(event){
+      // 按下 F11 键时触发全屏切换
+      if (event.key === 'F11') {
+        event.preventDefault(); // 防止浏览器默认行为
+        this.handleFullScreen();
+      }
+    },
+    // 全屏事件
+    handleFullScreen() {
+      let element = document.documentElement;
+      // 如果是全屏，退出
+      if (this.isFullScreen) {
+        this.isFullScreen = !this.isFullScreen
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.webkitCancelFullScreen) {
+          document.webkitCancelFullScreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        }
+      } else {    // 否则，进入全屏
+        this.isFullScreen = !this.isFullScreen
+        if (element.requestFullscreen) {
+          element.requestFullscreen();
+        } else if (element.webkitRequestFullScreen) {
+          element.webkitRequestFullScreen();
+        } else if (element.mozRequestFullScreen) {
+          element.mozRequestFullScreen();
+        } else if (element.msRequestFullscreen) {
+          // IE11
+          element.msRequestFullscreen();
+        }
+      }
+      // 改变当前全屏状态
+      // this.isFullScreen = !this.isFullScreen;
+    },
+    handleResize(){
+      //增加 timer 定时器的原因是全屏和退出全屏的事件会触发两次窗口大小改变事件，做一次过滤
+      if (this.timer) return;
+      this.timer = setTimeout(() => {
+        // 如果是按 "Esc" 键退出全屏，窗口状态已经是非全屏，但是之前记录的状态还是全屏的状态
+        if (!this.checkFull() && this.isFullScreen) {
+          //退出全屏状态。。。
+          this.isFullScreen = false;
+        }else{
+          //进入全屏状态。。。
+        }
+        clearTimeout(this.timer);
+        this.timer = null;
+      }, 0);
+    },
+    //判断浏览器是否处于全屏状态
+    checkFull() {
+      let isFull = document.mozFullScreen ||
+          document.fullScreen ||
+          document.webkitIsFullScreen ||
+          document.webkitRequestFullScreen ||
+          document.mozRequestFullScreen ||
+          document.msFullscreenEnabled;
+      if (isFull === undefined) isFull = false;
+      return isFull;
+    }
+  },
+  created() {
+    document.addEventListener('keydown', this.handleKeyPress);
+    //由于 全屏状态下 ，按 "Esc" 键退出全屏，浏览器监听不到 "Esc" 键的事件，所以需要通过浏览器窗口大小改变的事件去触发退出全屏事件
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleKeyPress);
+    window.removeEventListener("resize", this.handleResize)
+  }
+}
+</script>
+<style lang="less" scoped>
+.pro-layout-tools-quick-icons{
+  float: left;
+  .font-padding {
+    padding-right: 10px
+  }
+  .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 {
+  .modal-content {
+    .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;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,65 @@
+<template>
+  <i-row class="pro-layout-tools-quick-icons">
+    <i-col v-for="(item,index) in rightTopOptButtonList" :key="index" class="font-padding">
+      <ProLayoutToolsQuickSearch v-if="item === 'search'"></ProLayoutToolsQuickSearch>
+      <ProLayoutToolsQuickCollect v-if="item === 'collect'"></ProLayoutToolsQuickCollect>
+      <ProLayoutToolsQuickFullscreen v-if="item === 'fullScreen'"></ProLayoutToolsQuickFullscreen>
+      <ProLayoutToolsQuickTodo v-if="item === 'todo'"></ProLayoutToolsQuickTodo>
+      <ProLayoutToolsQuickNotice v-if="item === 'notice'"></ProLayoutToolsQuickNotice>
+    </i-col>
+  </i-row>
+</template>
+
+<script>
+import Bus from '@lambo-design/shared/utils/bus'
+import ProLayoutToolsQuickSearch from './pro-layout-tools-quick-search';
+import ProLayoutToolsQuickCollect from './pro-layout-tools-quick-collect';
+import ProLayoutToolsQuickFullscreen from './pro-layout-tools-quick-fullscreen';
+import ProLayoutToolsQuickTodo from './pro-layout-tools-quick-todo';
+import ProLayoutToolsQuickNotice from './pro-layout-tools-quick-notice';
+
+export default {
+  name: 'pro-layout-tools-quick-icons',
+  data() {
+    return {
+      rightTopOptButtonList: ['search','collect','fullScreen']
+    }
+  },
+  components:{
+    ProLayoutToolsQuickSearch,
+    ProLayoutToolsQuickCollect,
+    ProLayoutToolsQuickFullscreen,
+    ProLayoutToolsQuickTodo,
+    ProLayoutToolsQuickNotice
+  },
+  methods: {
+    initListener() {
+      Bus.$on('system-info',(data) => {
+        this.initSystemInfo(data);
+      })
+    },
+    destroyListener() {
+      Bus.$off('system-info')
+    },
+    initSystemInfo(data){
+      if (data && data.rightTopOptButtonList) {
+        this.rightTopOptButtonList = deepCopy(data.rightTopOptButtonList)
+      }
+    },
+  },
+  created() {
+    this.initListener()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  }
+}
+</script>
+<style lang="less" scoped>
+.pro-layout-tools-quick-icons{
+  float: left;
+  .font-padding {
+    padding-right: 10px
+  }
+}
+</style>

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

@@ -0,0 +1,251 @@
+<template>
+  <div class="notice-nav">
+    <Dropdown >
+      <Badge :count="noticeDatas.length"  :offset=[-3,-1] size="small">
+        <Icon type="ios-notifications-outline" size="20" style="cursor: pointer"></Icon>
+      </Badge>
+      <template #list>
+        <DropdownMenu slot="list" class="demo-dropdown-menu">
+          <Tabs v-model="activeTab">
+            <TabPane :label="'通知(' + noticeDatas.length + ')'" name="notice">
+              <div class="dropdown-content">
+                <DropdownItem v-for="(item, index) in noticeDatas" :key="index" class="dropdown-item" @click.native="detail(item)" >
+                  <div class="item-image-container">
+                    <img src="../../../../styles/images/xiaoxitongzhi.png" class="item-image" alt=""/>
+                    <span class="red-dot"></span>
+                  </div>
+                  <div class="item-content">
+                    <div class="item-title" >{{ item.noticeTitle }}</div>
+                    <div class="item-time">
+                    <span>
+                          {{ item.publishTime.split(" ")[0] }}
+                    </span>
+                      <span style="margin-left: 5px">
+                          {{ item.publishTime.split(" ")[1] }}
+                    </span>
+                    </div>
+                  </div>
+                </DropdownItem>
+                <a @click="enterItem" class="display-more" v-if="noticeDatas.length>0">查看更多</a>
+                <div v-if="noticeDatas.length==0" style="text-align: center;font-size: 17px">暂无未读通知</div>
+              </div>
+            </TabPane>
+            <TabPane label="待办" name="todo">
+              <div class="dropdown-content">
+                <DropdownItem v-for="(item, index) in todos" :key="index" v-if="todos">
+                  <div class="item-content">
+                    <div class="item-title">{{ item.title }}</div>
+                    <div class="item-time">{{ item.time }}</div>
+                  </div>
+                </DropdownItem>
+                <dropdownItem>
+                  <div style="text-align: center;font-size: 17px">暂无数据</div>
+                </dropdownItem>
+              </div>
+            </TabPane>
+          </Tabs>
+          <div class="dropdown-footer">
+            <DropdownItem class="mark-read">
+              <Button @click.native="markAllAsRead(noticeDatas) "
+                      style="font-size: 13px;border-color:#3C7BF6;background-color: #3C7BF6;color: #FFFFFF;">一键已读
+              </Button>
+            </DropdownItem>
+          </div>
+        </DropdownMenu>
+      </template>
+    </Dropdown>
+  </div>
+</template>
+
+<script>
+import config from '@lambo-design/shared/config/config'
+import ajax from "@lambo-design/shared/utils/ajax";
+import Bus from "@lambo-design/shared/utils/bus";
+export default {
+  name: "pro-layout-tools-quick-notice",
+  data() {
+    return {
+      todos: [],
+      activeTab: 'notice',
+      noticeDatas:[],
+      noticeModel:false,
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+
+    detail(item){
+      let requestParams ={
+        noticeId: item.noticeId,
+        categoryId:item.categoryId
+      }
+      ajax.post(
+          config.smartMsgServerContext + "/manage/notices/created",
+          requestParams
+        )
+      this.init()
+      Bus.$emit('system-modalList',true,item.noticeId)
+    },
+    markAllAsRead(noticeData){
+      let self = this
+      const noticeIds = noticeData
+        .map((news) => news.noticeId); // 获取所有未读公告的id数组
+      const categoryIds = noticeData
+        .map((news) => news.categoryId); // 获取所有未读公告的栏目id数组
+      let requestParams = {
+        noticeId: noticeIds.join(),
+        categoryId: categoryIds.join(),
+      };
+      if (requestParams.categoryId) {
+        ajax.post(
+            config.smartMsgServerContext + "/manage/notices/created",
+            requestParams
+          ).then(function (resp) {
+            if (resp.data.code === 1) {
+              self.init()
+              self.$Message.info("已读成功")
+            } else {
+              alert("请求失败");
+            }
+          });
+      }
+    },
+
+    init() {
+      let self = this
+      ajax.get(config.smartMsgServerContext + "/manage/notices/gonggaoList").then(function (resp) {
+        console.log(resp)
+        self.noticeDatas = resp.data.data
+      });
+    },
+    enterItem(val) {
+      this.$router.push({name: 'receiveList'});
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.notice-nav {
+  .ivu-badge {
+    /deep/ .ivu-badge-count {
+      top: 0.5em !important;
+    }
+
+    .ivu-badge-count-primary {
+      background: #cd261d !important;
+      zoom: 90%
+    }
+  }
+}
+
+.notice-nav {
+  margin-right: 20px;
+}
+
+.demo-dropdown-menu {
+  width: 300px;
+}
+
+.dropdown-content {
+  max-height: 340px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  margin-top: -6px;
+}
+
+.dropdown-content::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.dropdown-item {
+  display: flex;
+  flex-direction: row; /* 修改为row，以便子元素水平排列 */
+  align-items: center; /* 确保所有子元素在交叉轴上居中对齐 */
+  padding: 14px 0; /* 根据需要添加一些垂直填充 */
+}
+
+.item-content {
+  flex-grow: 1; /* 允许内容区域填充剩余空间 */
+  overflow: hidden;
+  display: flex;
+  flex-direction: column; /* 保持文字内容的垂直布局 */
+}
+
+.item-title {
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  font-size: 13px;
+  text-overflow: ellipsis;
+}
+
+.item-time {
+  font-size: 12px;
+  color: #999999;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 10px;
+
+}
+
+/deep/ .ivu-tabs-nav-container {
+  width: 100%;
+}
+
+/deep/ .ivu-tabs-nav {
+  display: flex;
+  width: 100%;
+}
+
+/deep/ .ivu-tabs-tab {
+  flex: 1; /* 使所有标签平均分配空间 */
+  text-align: center; /* 使文本居中显示 */
+  border: none; /* 根据需要去除标签的边框 */
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+
+.item-image {
+  width: 40px; /* 或者您想要的任何尺寸 */
+  height: 37px; /* 或者您想要的任何尺寸 */
+  margin-left: 7px;
+}
+
+.display-more {
+  text-align: center;
+  margin: 22px 0 4px 0;
+}
+
+.dropdown-footer {
+  text-align: right;
+  border-top: 1px solid #bbbbbb;
+
+}
+
+.mark-read span {
+  margin-left: 5px;
+}
+
+.item-image-container {
+  position: relative;
+  display: inline-block; /* 或者 flex，根据需要 */
+  margin-right: 11px; /* 在图片和文本之间添加一些间距 */
+}
+
+.red-dot {
+  position: absolute;
+  margin: 0 0 0 -8px;
+  width: 10px; /* 小红点的大小 */
+  height: 10px; /* 小红点的大小 */
+  border-radius: 50%; /* 使其成为圆形 */
+  background-color: red; /* 红色背景 */
+}
+
+</style>