@supermapgis/vue-iclient-leaflet 11.2.0 → 11.3.0

package/src/common/image/Image.vue

@@ -1,22 +1,36 @@
 <template>
   <div class="sm-component-image" :style="[getBackgroundStyle, getTextColorStyle]">
-    <a
-      :class="['sm-component-image__link', realHref ? '': 'sm-component-image__noLink']"
-      :href="realHref"
-      :target="target"
-    >
-      <div v-if="src" class="sm-component-image__content" :style="[repeatStyle,imgUrl]"></div>
+    <a :class="['sm-component-image__link']" :href="realHref" @click="handleLinkClick" :target="target">
+      <div v-if="src" @click="startPreview" class="sm-component-image__content" :style="[repeatStyle, imgUrl]">
+        <!-- 用img标签确保没有给定宽高时，能使用src图片的宽高 -->
+        <img :src="src" style="visibility: hidden; max-width: 100%; max-height: 100%" />
+      </div>
       <i v-else class="sm-components-icon-tupian sm-component-image__defaultImg"></i>
     </a>
+    <sm-modal
+      v-model="previewVisible"
+      :zIndex="1009"
+      centered
+      width="50%"
+      :dialogClass="fullScreenStyle.dialogClass"
+      :dialogStyle="fullScreenStyle.dialogStyle"
+      :bodyStyle="fullScreenStyle.bodyStyle"
+      :footer="null"
+    >
+      <img :src="src" @click="endPreview" :style="{ 'object-fit': 'contain', width: '100%', height: '100%' }" />
+    </sm-modal>
   </div>
 </template>
 
 <script>
 import Theme from 'vue-iclient/src/common/_mixin/Theme';
 import { parseUrl } from 'vue-iclient/src/common/_utils/util';
+import SmModal from 'vue-iclient/src/common/modal/Modal.vue';
+import Message from 'vue-iclient/src/common/message/index.js';
 
 export default {
   name: 'SmImage',
+  components: { SmModal },
   mixins: [Theme],
   props: {
     src: {
@@ -30,6 +44,10 @@ export default {
       type: String,
       default: ''
     },
+    previewMode: {
+      type: String,
+      default: 'none'
+    },
     target: {
       type: String,
       default: '_self'
@@ -37,12 +55,18 @@ export default {
   },
   data() {
     return {
+      previewVisible: false,
       repeatOption: {
         center: {
           backgroundRepeat: 'no-repeat',
           backgroundPosition: 'center',
           backgroundSize: 'contain'
         },
+        left: {
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'left center',
+          backgroundSize: 'contain'
+        },
         noRepeat: {
           backgroundSize: '100% 100%',
           backgroundRepeat: 'no-repeat'
@@ -63,6 +87,27 @@ export default {
     };
   },
   computed: {
+    fullScreenStyle() {
+      return this.previewMode === 'full'
+        ? {
+          dialogStyle: {
+            backgroundColor: 'transparent',
+            height: '100%'
+          },
+          dialogClass: 'sm-component-image__full',
+          bodyStyle: {
+            padding: 0,
+            width: '100%',
+            height: '100%'
+          }
+        }
+        : {
+          dialogClass: 'sm-component-image__preview',
+          bodyStyle: {
+            padding: 0
+          }
+        };
+    },
     repeatStyle() {
       return this.repeatOption[this.repeat];
     },
@@ -78,6 +123,23 @@ export default {
       }
       return href;
     }
+  },
+  methods: {
+    handleLinkClick(e) {
+      if (!this.href) {
+        e.preventDefault();
+      }
+    },
+    startPreview() {
+      if (this.previewMode === 'none') {
+        return;
+      }
+      Message.info(this.previewMode === 'popup' ? this.$t('info.pressEscToExit') : this.$t('info.pressEscOrClickToExit'), 3);
+      this.previewVisible = true;
+    },
+    endPreview() {
+      this.previewVisible = false;
+    }
   }
 };
 </script>

package/src/common/image/style/image.scss

@@ -17,6 +17,38 @@
       cursor: pointer;
     }
   }
+  @include e(preview) {
+    .sm-component-modal-content {
+      .sm-component-modal-close {
+        margin-left: -64px;
+        .sm-component-modal-close-x {
+          font-size: 40px;
+        }
+      }
+     
+    }
+  }
+  @include e(full) {
+    width: 100% !important;
+    padding: 0 !important;
+    .sm-component-modal-content {
+      background-color: transparent !important;
+      box-shadow: none !important;
+      width: 100%;
+      height: 100%;
+      .sm-component-modal-close {
+        display: none;
+      }
+      .sm-component-modal-close {
+        margin-left: -64px;
+        .sm-component-modal-close-x {
+          font-size: 40px;
+        }
+      }
+     
+    }
+  }
+
   @include e(noLink){
     pointer-events: none;
   }

package/src/common/message/style/message.scss

@@ -4,6 +4,7 @@
 @include b(message) {
   &-notice-content {
     background: $message-background;
+    color: $text-color-active;
   }
 
   &-error .#{$iconfont-css-prefix} {

package/src/common/modal/style/modal.scss

@@ -3,12 +3,32 @@
 @import '../../_utils/style/theme/theme.scss';
 
 @include b (modal) {
+  $modal-prefix: &;
+
   @include e(content, '-') {
     background-color: $modal-content-bg;
+
+    #{$modal-prefix}-header {
+      padding: 14px 24px;
+      border-color: $border-color-secondary;
+      #{$modal-prefix}-title {
+        line-height: 24px;
+      }
+    }
+    #{$modal-prefix}-footer {
+      padding: 10px 24px;
+      border-color: $border-color-secondary;
+    }
   }
 
   @include e(close, '-') {
     color: $text-color-secondary;
+    &-x {
+      line-height: 52px;
+      height: 52px;
+      width: 64px;
+    }
+
   }
 
   @include e(confirm, '-') {
@@ -19,5 +39,21 @@
     &-confirm &-body > .#{$iconfont-css-prefix} {
       color: $warning-color;
     }
+    &-body &-title {
+      line-height: 24px;
+    }
+    &-body {
+      .#{$iconfont-css-prefix} {
+        margin-right: 12px;
+        font-size: 24px;
+        
+        + #{$modal-prefix}-title + #{$modal-prefix}-content {
+          margin-left: 36px;
+        }
+      }
+    }
+    #{$modal-prefix}-body {
+      padding: 20px 24px;
+    }
   }
 }

package/src/common/notification/style/notification.scss

@@ -3,7 +3,9 @@
 
 @include b(notification) {
   &-notice {
+    $notice-prefix: &;
     background: $message-background;
+    padding: 20px 24px 24px;
 
     &-message {
       color: $heading-color;
@@ -11,6 +13,7 @@
 
     @at-root {
       .#{$iconfont-css-prefix}#{&}-icon {
+        margin-left: 0;
         &-warning {
           color: $warning-color;
         }
@@ -26,5 +29,11 @@
         color: $text-color;
       }
     }
+
+    &-with-icon {
+      #{$notice-prefix}-message, #{$notice-prefix}-description {
+        margin-left: 36px;
+      }
+    }
   }
 }

package/src/common/slideshow/Slideshow.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { CreateElement, VNode } from 'vue';
+import type { CreateElement } from 'vue';
 import Theme from 'vue-iclient/src/common/_mixin/Theme';
 import Swiper from './Swiper';
 import BaseCard from 'vue-iclient/src/common/_mixin/Card';
@@ -11,22 +11,23 @@ import { addListener, removeListener } from 'resize-detector';
 import 'swiper/swiper-bundle.min.css';
 
 interface swiperOptionsType {
-  initialSlide: Number;
-  direction: String;
-  speed: Number;
-  loopedSlides: Number;
-  loop: Boolean;
-  grabCursor: Boolean;
-  mousewheel: Boolean;
-  keyboard: Boolean;
-  autoplay: Boolean | Object;
-  effect: String;
+  initialSlide: number;
+  direction: string;
+  speed: number;
+  loopedSlides: number;
+  loop: boolean;
+  grabCursor: boolean;
+  mousewheel: boolean;
+  keyboard: boolean;
+  autoplay: boolean | Object;
+  effect: string;
   navigation?: Object;
   pagination?: Object;
   scrollbar?: Object;
-  observer: Boolean;
-  observeParents: Boolean;
-  observeSlideChildren: Boolean;
+  observer: boolean;
+  observeParents: boolean;
+  observeSlideChildren: boolean;
+  on: Object;
 }
 
 @Component({
@@ -39,7 +40,7 @@ interface swiperOptionsType {
 class Slideshow extends Mixins(Theme, BaseCard) {
   __resizeHandler: Function;
   swiper: any;
-  isRefresh: boolean = true;
+  swiperCmptKey: number = +new Date();
   manualUpdateProps: string[] = [
     'speed',
     'loop',
@@ -52,8 +53,6 @@ class Slideshow extends Mixins(Theme, BaseCard) {
     'direction'
   ];
 
-  activeIndexData: number = 0;
-
   // 当 loop 为 true && effect 为 cube, 幻灯片页数等于3会出现重叠。
   loopedSlides: number = 3;
 
@@ -89,7 +88,7 @@ class Slideshow extends Mixins(Theme, BaseCard) {
 
   get swiperOptions() {
     let options: swiperOptionsType = {
-      initialSlide: this.defaultActiveIndex,
+      initialSlide: this.activeIndex ?? this.defaultActiveIndex,
       direction: this.direction,
       speed: this.speed,
       loop: this.loop,
@@ -101,7 +100,10 @@ class Slideshow extends Mixins(Theme, BaseCard) {
       effect: this.effect,
       observer: true,
       observeParents: true,
-      observeSlideChildren: true
+      observeSlideChildren: true,
+      on: {
+        init: this.slideInit
+      }
     };
     this.navigation && (options.navigation = this.navigation);
     this.pagination && (options.pagination = this.pagination);
@@ -134,13 +136,7 @@ class Slideshow extends Mixins(Theme, BaseCard) {
     this.autoResizeHandler();
   }
 
-  created() {
-    this.activeIndexData = this.defaultActiveIndex || this.activeIndex;
-  }
-
   mounted() {
-    // @ts-ignore
-    this.swiper = this.$refs.mySwiper.$swiper;
     this.watchOptions();
     this.autoResizeHandler();
   }
@@ -150,6 +146,12 @@ class Slideshow extends Mixins(Theme, BaseCard) {
     removeListener(this.$el, this.__resizeHandler);
   }
 
+  slideInit(swiper: any) {
+    this.swiper = swiper;
+    this.goTo(this.swiperOptions.initialSlide, 0);
+    this.$emit('init', swiper);
+  }
+
   slideChange() {
     let changeParameter = {
       progress: this.swiper.progress,
@@ -159,62 +161,11 @@ class Slideshow extends Mixins(Theme, BaseCard) {
     };
     this.$emit('change', changeParameter);
     this.$emit('indexChange', this.swiper.realIndex);
-    this.activeIndexData = this.swiper.realIndex;
   }
 
   _activeIndexChangedHandler(newIndex: number) {
-    const prevActiveIndexData = this.activeIndexData;
-    if (prevActiveIndexData === newIndex) {
-      return;
-    }
-    this.activeIndexData = newIndex;
-    if (this.loop) {
-      const changeType = this._getChangeType(newIndex, prevActiveIndexData);
-      if (['next', 'loopToFirst'].includes(changeType)) {
-        this.next();
-        return;
-      }
-      if (['prev', 'loopToLast'].includes(changeType)) {
-        this.prev();
-        return;
-      }
-    }
-    this.goTo(newIndex, this.speed);
-  }
-
-  _getChangeType(newIndex, oldIndex) {
-    const childrenLength = this._getChildrenLength();
-    const offset = newIndex - oldIndex;
-    if (offset === 1) {
-      return 'next';
-    }
-    if (offset === -1) {
-      return 'prev';
-    }
-    if (oldIndex === childrenLength - 1 && newIndex === 0) {
-      return 'loopToFirst';
-    }
-    if (oldIndex === 0 && newIndex === childrenLength - 1) {
-      return 'loopToLast';
-    }
-    return 'jump';
-  }
-
-  _observerUpdate(swiper, mutationRecord) {
-    if (mutationRecord.type === 'childList') {
-      this.goTo(this.activeIndexData, 0);
-      this.$emit('childrenlistchange');
-    }
-  }
-
-  _reload() {
-    this.isRefresh = false;
     this.$nextTick(() => {
-      this.isRefresh = true;
-      this.$nextTick(() => {
-        // @ts-ignore
-        this.swiper = this.$refs.mySwiper.$swiper;
-      });
+      this.goTo(newIndex, 0);
     });
   }
 
@@ -231,7 +182,7 @@ class Slideshow extends Mixins(Theme, BaseCard) {
     this.swiper.slidePrev(speed);
   }
 
-  goTo(index: number, speed?: number) {
+  goTo(index: number, speed: number) {
     if (this.swiper) {
       this.loop ? this.swiper.slideToLoop(index, speed) : this.swiper.slideTo(index, speed);
     }
@@ -255,7 +206,7 @@ class Slideshow extends Mixins(Theme, BaseCard) {
         item,
         function (newVal, oldVal) {
           if (!isequal(newVal, oldVal)) {
-            this._reload();
+            this.swiperCmptKey = +new Date();
           }
         },
         { deep: true }
@@ -313,23 +264,19 @@ class Slideshow extends Mixins(Theme, BaseCard) {
       textColor: this.textColor,
       splitLine: this.splitLine
     };
-    let SwiperCompt: VNode | null = null;
-    if (this.isRefresh) {
-      SwiperCompt = h(
-        // @ts-ignore
-        Swiper,
-        {
-          domProps: { realIndex: this.activeIndex },
-          props: { options: this.swiperOptions },
-          on: {
-            slideChange: this.slideChange,
-            observerUpdate: this._observerUpdate
-          },
-          ref: 'mySwiper'
+    const SwiperCompt = h(
+      // @ts-ignore
+      Swiper,
+      {
+        domProps: { realIndex: this.activeIndex },
+        props: { options: this.swiperOptions },
+        on: {
+          slideChange: this.slideChange
         },
-        slots
-      );
-    }
+        key: this.swiperCmptKey
+      },
+      slots
+    );
     return h(
       'sm-collapse-card',
       {

package/src/common/slideshow/Swiper.js

@@ -26,4 +26,4 @@ SwiperClass.use([
 const { Swiper, SwiperSlide } = getAwesomeSwiper(SwiperClass);
 
 export default Swiper;
-export { SwiperSlide };
+export { SwiperSlide, SwiperClass };

package/src/common/table/style/table.scss

@@ -7,6 +7,7 @@
   
   &-thead > tr > th {
     background: $table-header-bg;
+    position: relative;
     // .#{$iconfont-css-prefix}-filter,
     // #{$table-prefix}-filter-icon {
     //   color: $table-header-icon-color;
@@ -116,6 +117,41 @@
       }
     }
   }
+  &:not(&-bordered) {
+    #{$table-prefix}-thead > tr > th::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      right: 0;
+      width: 1px;
+      height: 14px;
+      background-color: $border-color-secondary;
+      transform: translateY(-50%);
+    }
+  }
+
+  &-thead > tr > th,
+  &-tbody > tr > td {
+    padding: 13px 24px;
+  }
+
+  &-middle {
+    > #{$table-prefix}-content > #{$table-prefix}-body > table {
+      > #{$table-prefix}-thead > tr > th,
+      > #{$table-prefix}-tbody > tr > td {
+        padding: 9px 24px;
+      }
+    }
+  }
+
+  &-small {
+    > #{$table-prefix}-content > #{$table-prefix}-body > table {
+      > #{$table-prefix}-thead > tr > th,
+      > #{$table-prefix}-tbody > tr > td {
+        padding: 5px 24px;
+      }
+    }
+  }
 
   // &-selection {
   //   .#{$iconfont-css-prefix}-down {

package/src/common/table-popup/TablePopup.vue

@@ -9,6 +9,7 @@
       :columns="columns"
       :rowKey="(record, index) => index"
       :pagination="false"
+      :showHeader="showHeader"
     />
   </div>
 </template>
@@ -39,6 +40,10 @@ export default {
     splitLine: {
       type: Boolean,
       default: true
+    },
+    showHeader: {
+      type: Boolean,
+      default: true
     }
   },
   watch: {

package/src/common/tooltip/style/tooltip.scss

@@ -2,4 +2,7 @@
 @import '../../_utils/style/theme/theme.scss';
 
 @include b (tooltip) {
+  &-inner {
+    padding: 6px 12px;
+  }
 }

package/src/common/video-player/VideoPlayer.vue

@@ -6,7 +6,6 @@
       :options="playerOptions"
       :playsinline="true"
       :data-autoplay="autoplay"
-      :data-isLive="isRtmp"
       :data-popupplay="`${options.popupToPlay}`"
       :events = "['fullscreenchange']"
       @play="onPlayerPlay($event)"
@@ -30,7 +29,6 @@
         :options="modalPlayerOptions"
         :playsinline="true"
         :data-autoplay="autoplay"
-        :data-isLive="isRtmp"
         :data-popupplay="`${options.popupToPlay}`"
         @play="onModalPlayerPlay($event)"
         @loadeddata="onModalPlayerLoadeddata($event)"
@@ -49,7 +47,6 @@ import flvjs from 'flv.js';
 import 'videojs-flvjs-es6';
 import 'videojs-flash';
 import { videoPlayer } from 'vue-videojs7';
-import clonedeep from 'lodash.clonedeep';
 import SmModal from 'vue-iclient/src/common/modal/main';
 import Message from 'vue-iclient/src/common/message/index.js';
 
@@ -98,8 +95,6 @@ class SmVideoPlayer extends Vue {
 
   @Prop({ default: 'https://vjs.zencdn.net/swf/5.4.2/video-js.swf' }) swf: string;
 
-  @Prop({ default: 3000 }) replayTime: number; // 黑屏重新播放rtmp
-
   @Prop({ default: false }) isFullscreen: Boolean;
 
   @Prop({ default: 'origin' }) ratio: String;
@@ -118,10 +113,6 @@ class SmVideoPlayer extends Vue {
     poster?:string; // 封面
   };
 
-  get isRtmp() {
-    return this.checkUrl(this.url) && this.url.includes('rtmp://');
-  }
-
   get isFlv() {
     if (!flvjs && this.checkUrl(this.url) && this.url.includes('.flv')) {
       console.error(this.$t('warning.flvPlayer'));
@@ -158,7 +149,6 @@ class SmVideoPlayer extends Vue {
   @Watch('url')
   urlChanged() {
     this.handlePlayerOptions();
-    this.replayRtmp();
   }
 
   @Watch('playerOptions')
@@ -197,9 +187,6 @@ class SmVideoPlayer extends Vue {
       this.smPlayer = this.$refs.videoPlayer && this.$refs.videoPlayer.player;
       // @ts-ignore
       this.modalVideoPlayer = this.$refs.modalVideoPlayer && this.$refs.modalVideoPlayer.player;
-      setTimeout(() => {
-        this.replayRtmp();
-      });
       const player = this.modalVisible ? this.modalVideoPlayer : this.smPlayer;
       if (player) {
         player.muted(this.options.muted);
@@ -211,24 +198,6 @@ class SmVideoPlayer extends Vue {
     });
   }
 
-  replayRtmp(player = this.player) {
-    if (this.isRtmp && player && player.el_) {
-      player.one('play', () => {
-        // @ts-ignore
-        this.timer = setTimeout(() => {
-          // @ts-ignore
-          clearTimeout(this.timer);
-          player.reset();
-          player.src(clonedeep(this.playerOptions.sources));
-        }, this.replayTime);
-      });
-      player.one('canplay', () => {
-        // @ts-ignore
-        clearTimeout(this.timer);
-      });
-    }
-  }
-
   clearSrc() {
     if (this.playerOptions.sources) {
       this.playerOptions.sources[0].src = '';
@@ -289,7 +258,7 @@ class SmVideoPlayer extends Vue {
       },
       notSupportedMessage: this.$t('warning.unavailableVideo')
     };
-    if (!this.url.includes('rtmp') && this.url.includes('.flv')) {
+    if (this.url.includes('.flv')) {
       commonOptions.techOrder = ['html5', 'flvjs'];
       // @ts-ignore
       commonOptions.sources[0].type = 'video/x-flv';
@@ -298,16 +267,11 @@ class SmVideoPlayer extends Vue {
       // @ts-ignore
       commonOptions.sources[0].type = 'video/mp4';
     }
-    if (this.url.includes('rtmp')) {
-      // @ts-ignore
-      commonOptions.techOrder = ['flash', 'html5'];
-      commonOptions.sources[0].type = 'rtmp/flv';
-    }
     if (this.url.includes('.m3u8')) {
       // @ts-ignore
       commonOptions.sources[0].type = 'application/x-mpegURL';
     }
-    this.playerOptions = Object.assign({}, commonOptions, { autoplay: this.isRtmp || options.autoplay });
+    this.playerOptions = Object.assign({}, commonOptions, { autoplay: options.autoplay });
     this.modalPlayerOptions = Object.assign({}, commonOptions, { autoplay: true, preload: 'none', height: '600' });
     return commonOptions;
   }
@@ -388,8 +352,7 @@ class SmVideoPlayer extends Vue {
         url.indexOf('mp4') < 0 &&
         url.indexOf('webm') < 0 &&
         url.indexOf('m3u8') < 0 &&
-        url.indexOf('flv') < 0 &&
-        url.indexOf('rtmp') < 0)
+        url.indexOf('flv') < 0)
     ) {
       match = false;
     } else {
@@ -402,7 +365,7 @@ class SmVideoPlayer extends Vue {
     if (!str) return false;
     const isFilePath = this.isMatchFileUrl(str);
     if(isFilePath) return true;
-    const reg = new RegExp('(https?|http|file|ftp|rtmp)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]');
+    const reg = new RegExp('(https?|http|file|ftp)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]');
     return reg.test(str);
   }