@lambo-design/pro-layout 1.0.0-beta.44 → 1.0.0-beta.440

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

@@ -0,0 +1,144 @@
+<template>
+  <Tooltip :content="isFullScreen ? t('pro-layout.header.quit-fullscreen') : t('pro-layout.header.fullscreen')" placement="bottom">
+    <Icon  @click="handleFullScreen" :type="isFullScreen ? 'md-contract' : 'md-expand'" size="16" style="cursor: pointer"/>
+  </Tooltip>
+</template>
+
+<script>
+import Locale from "@lambo-design/core/src/mixins/locale";
+import Bus from '@lambo-design/shared/utils/bus'
+
+export default {
+  name: 'pro-layout-tools-quick-fullscreen',
+  mixins: [Locale],
+  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();
+        }
+      }
+      Bus.$emit('trigger-change-icon', this.isFullScreen)
+      // 改变当前全屏状态
+      // 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;
+    }
+  },
+  mounted() {
+    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,99 @@
+<template>
+  <Row class="pro-layout-tools-quick-icons">
+    <Col class="font-padding" v-show="rightTopOptButtonList.includes('collect')">
+      <ProLayoutToolsQuickCollect></ProLayoutToolsQuickCollect>
+    </Col>
+    <Col class="font-padding" v-show="rightTopOptButtonList.includes('document')">
+      <ProLayoutToolsQuickDocument></ProLayoutToolsQuickDocument>
+    </Col>
+    <Col class="font-padding" v-show="rightTopOptButtonList.includes('fullScreen')">
+      <ProLayoutToolsQuickFullscreen></ProLayoutToolsQuickFullscreen>
+    </Col>
+    <Col class="font-padding" v-show="rightTopOptButtonList.includes('todo')">
+      <ProLayoutToolsQuickTodo></ProLayoutToolsQuickTodo>
+    </Col>
+    <Col class="font-padding" v-show="shouldShowCustomSlot">
+      <slot name="pro-layout-custom-icons"></slot>
+    </Col>
+    <Col class="font-padding" v-show="rightTopOptButtonList.includes('notice')">
+      <ProLayoutToolsQuickNotice></ProLayoutToolsQuickNotice>
+    </Col>
+    <Col class="font-padding" v-show="rightTopOptButtonList.includes('search')">
+      <ProLayoutToolsQuickSearch></ProLayoutToolsQuickSearch>
+    </Col>
+    <Col class="font-padding" v-show="rightTopOptButtonList.includes('i18n')">
+      <ProLayoutToolsQuickIntl></ProLayoutToolsQuickIntl>
+    </Col>
+  </Row>
+</template>
+
+<script>
+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';
+import ProLayoutToolsQuickIntl from './pro-layout-tools-quick-intl';
+import ProLayoutToolsQuickDocument from './pro-layout-tools-quick-document';
+import Bus from '@lambo-design/shared/utils/bus'
+import {deepCopy} from "@lambo-design/shared/utils/assist";
+
+export default {
+  name: 'pro-layout-tools-quick-icons',
+  data() {
+    return {
+      rightTopOptButtonList: ['search','collect','document','fullScreen'],
+      rightTopOptButtonSlots: []
+    }
+  },
+  components:{
+    ProLayoutToolsQuickDocument,
+    ProLayoutToolsQuickSearch,
+    ProLayoutToolsQuickCollect,
+    ProLayoutToolsQuickFullscreen,
+    ProLayoutToolsQuickTodo,
+    ProLayoutToolsQuickNotice,
+    ProLayoutToolsQuickIntl
+  },
+  computed: {
+    shouldShowCustomSlot() {
+      let self = this;
+      return this.rightTopOptButtonList.some(item =>
+        self.rightTopOptButtonSlots.includes(item)
+      )
+    }
+  },
+  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)
+      }
+      if(data && data.rightTopOptButtonSlots){
+        this.rightTopOptButtonSlots = deepCopy(data.rightTopOptButtonSlots)
+      }
+    },
+  },
+  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-intl.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="user-avatar-dropdown">
+    <Dropdown @on-click="switchLang" :transfer="false">
+      <span>{{defaultLang}}</span>
+      <Icon type="ios-arrow-down"/>
+      <DropdownMenu slot="list">
+        <DropdownItem v-for="(item, index) in intlDictList" :key="index" :name="item.dictKey"><span>{{ item.dictValue }}</span></DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  </div>
+</template>
+
+
+<script>
+
+import Bus from "@lambo-design/shared/utils/bus";
+import {deepCopy} from "@lambo-design/shared/utils/assist";
+import config from "@lambo-design/shared/config/config";
+import Locale from "@lambo-design/core/src/mixins/locale";
+import ajax from "@lambo-design/shared/utils/ajax";
+
+export default {
+  name: 'pro-layout-tools-intl',
+  mixins: [Locale],
+  data() {
+    return {
+      defaultLang: this.t('pro-layout.header.language'),
+      langCodeDict:{},
+      intlDictList:[]
+    }
+  },
+  methods: {
+    initListener() {
+      Bus.$on('other-datas',(data) => {
+        this.initIntlDictList(data);
+      })
+    },
+    destroyListener() {
+      Bus.$off('other-datas')
+    },
+    initIntlDictList(data) {
+      if (data && data.intlDatas){
+        this.intlDictList = deepCopy(data.intlDatas);
+        this.intlDictList.forEach(item => {
+          this.langCodeDict[item.dictKey] = item.dictValue;
+        })
+      }
+
+      this.setDefaultLang();
+    },
+    callSwitchLangApi(langCode, reload = false) {
+      const self = this;
+      const url = config.upmsServerContext + '/anon/acIntlTexts/switchLang';
+      ajax.get(url + '?langCode=' + langCode)
+        .then(function (resp) {
+          if (resp.data.code === 1) {
+            if (reload) {
+              window.location.reload();
+            }
+          } else {
+            self.$Message.error(resp.data.data)
+          }
+        })
+        .catch(function (err) {
+          console.error(err)
+          self.$Message.error('操作失败，请联系系统管理员')
+        })
+    },
+    switchLang(name) {
+        window.sessionStorage.clear();
+        localStorage.removeItem(config.routerBase + '-tagNavList');
+        this.defaultLang = this.langCodeDict[name];
+        sessionStorage.setItem("lambo_lang_code", name);
+        this.callSwitchLangApi(name, true);
+    },
+    setDefaultLang() {
+      let langCode = 'zh';
+      if (sessionStorage.getItem("lambo_lang_code")) {
+        langCode = sessionStorage.getItem("lambo_lang_code");
+      } else if (this.$cookies.get("lambo_lang_code")) {
+        langCode = this.$cookies.get("lambo_lang_code");
+      } else {
+        this.callSwitchLangApi(langCode, false);
+      }
+      if(langCode){
+        this.defaultLang = this.langCodeDict[langCode];
+      }
+    }
+  },
+  mounted() {
+    this.setDefaultLang();
+  },
+  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/components/pro-layout-tools-quick-notice.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="pro-layout-tools-quick-notice">
+    <Dropdown >
+      <Badge :count="noticeDatas.length" class-name="badge-count">
+        <Icon type="ios-notifications-outline" size="20" style="cursor: pointer"></Icon>
+      </Badge>
+      <template #list>
+        <DropdownMenu slot="list" class="notice-dropdown-menu">
+          <DropdownItem v-for="(item, index) in noticeDatas" :key="index" class="dropdown-item" @click.native="getDetail(item)" >
+            <div class="item-image">
+              <Icon type="ios-mail" size="24"/>
+            </div>
+            <div class="item-title" :title="item.noticeTitle">
+              {{ item.noticeTitle }}
+            </div>
+            <div class="item-time">
+              {{ item.publishTime }}
+            </div>
+          </DropdownItem>
+          <div class="dropdown-footer" :class="[noticeDatas.length == 0 ? 'no-line' : '']">
+            <Button type="text" v-if="noticeDatas.length > 0" @click="getMore" class="display-more" >{{ t('pro-layout.header.notice-more') }}</Button>
+            <Button type="text" v-if="noticeDatas.length > 0" @click="markRead" class="mark-read" >{{ t('pro-layout.header.notice-read') }}</Button>
+            <div class="no-data" v-if="noticeDatas.length == 0" >{{ t('pro-layout.header.notice-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 Locale from "@lambo-design/core/src/mixins/locale";
+export default {
+  name: "pro-layout-tools-quick-notice",
+  mixins: [Locale],
+  data() {
+    return {
+      noticeDatas:[]
+    }
+  },
+  methods: {
+    initListener() {
+      Bus.$on('other-datas',(data) => {
+        this.initNoticeList(data);
+      })
+    },
+    destroyListener() {
+      Bus.$off('other-datas')
+    },
+    initNoticeList(data) {
+      if (data && data.noticeDatas) {
+        this.noticeDatas = deepCopy(data.noticeDatas);
+      }
+    },
+    getDetail(item){
+      Bus.$emit('other-operate','notice-detail',item)
+    },
+    markRead(){
+      Bus.$emit('other-operate','notice-mark-read')
+    },
+    getMore() {
+      Bus.$emit('other-operate','notice-more')
+    }
+  },
+  created() {
+    this.initListener()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  }
+}
+</script>
+
+<style lang="less">
+@import "@lambo-design/core/src/styles/default";
+.pro-layout-tools-quick-notice{
+  .badge-count{
+    top:12px;
+    height: 10px;
+    line-height: 8px;
+    min-width: 8px;
+    padding: 0;
+    font-size: 8px;
+    width: 10px;
+  }
+}
+.notice-dropdown-menu {
+  max-height: 300px;
+  width: 300px;
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+  .dropdown-item {
+    overflow: hidden;
+    line-height: 24px;
+    padding: 8px;
+    .item-image{
+      float: left;
+    }
+    .item-title{
+      float: left;
+      margin-left: 5px;
+      width: 120px;
+      white-space:nowrap;
+      overflow:hidden;
+      text-overflow: ellipsis;
+    }
+    .item-time{
+      float: right;
+    }
+  }
+  .dropdown-footer{
+    line-height: 24px;
+    border-top: 1px solid var(--layout-sider-line-color,@_layout-sider-line-color);
+    padding: 8px;
+    &.no-line{
+      border: 0;
+    }
+    .display-more{
+      float: left;
+    }
+    .mark-read{
+      float: right;
+    }
+    .no-data{
+      text-align: center;
+    }
+  }
+}
+</style>