cnhis-design-vue 2.1.78 → 2.1.79

package/packages/big-table/src/components/player-vod/video-modal.vue

@@ -1,126 +1,126 @@
-<template>
-  <a-modal
-    :visible="previewVisible"
-    :footer="null"
-    @cancel="handleCancel"
-    wrapClassName="image-modal"
-    width="65vw"
-    :bodyStyle="{
-      height: '600px',
-      overflowY: 'auto'
-    }"
-  >
-    <div class="preview-wrap">
-      <div class="preview">
-        <playerVod :playerOptions="playerOptions" v-if="fileList && fileList.length === 0"></playerVod>
-        <a-carousel v-else arrows :initialSlide="palyerIndex">
-          <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
-            <a-icon type="left-circle" />
-          </div>
-          <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
-            <a-icon type="right-circle" />
-          </div>
-          <template v-for="(v, i) in fileList">
-            <playerVod :playerOptions="v.playerOptions" :key="i"></playerVod>
-          </template>
-        </a-carousel>
-      </div>
-    </div>
-  </a-modal>
-</template>
-
-<script>
-import playerVod from './index';
-import { Carousel, Icon, Modal } from 'ant-design-vue';
-export default {
-  name: 'videoModal',
-  data() {
-    return {
-      previewVisible: this.visible
-    };
-  },
-  props: {
-    visible: Boolean,
-    playerOptions: {
-      type: Object,
-      default: () => ({
-        sources: [
-          {
-            type: 'video/mp4',
-            src: ''
-          }
-        ]
-      })
-    },
-    fileList: {
-      type: Array,
-      default: () => []
-    },
-    palyerIndex: {
-      type: Number,
-      default: 0
-    }
-  },
-  computed: {},
-  watch: {
-    visible(value) {
-      this.previewVisible = value;
-    }
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  activated() {},
-  methods: {
-    handleCancel() {
-      this.$emit('update:visible', false);
-      this.previewVisible = false;
-    }
-  },
-  components: {
-    playerVod,
-    [Modal.name]: Modal,
-    [Carousel.name]: Carousel,
-    [Icon.name]: Icon
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.preview-wrap {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  .preview {
-    padding: 20px 0;
-    width: 60vw;
-    height: 100%;
-    // height: 60vh;
-    // display: flex;
-    // justify-content: center;
-    // align-items: center;
-  }
-}
-.ant-carousel /deep/ .custom-slick-arrow {
-  width: 25px;
-  height: 25px;
-  font-size: 25px;
-  color: #fff;
-  background-color: rgba(31, 45, 61, 0.11);
-  opacity: 0.5;
-}
-.ant-carousel /deep/ .custom-slick-arrow:before {
-  display: none;
-}
-.ant-carousel /deep/ .custom-slick-arrow:hover {
-  opacity: 0.5;
-  color: #fff;
-}
-</style>
+<template>
+  <a-modal
+    :visible="previewVisible"
+    :footer="null"
+    @cancel="handleCancel"
+    wrapClassName="image-modal"
+    width="65vw"
+    :bodyStyle="{
+      height: '600px',
+      overflowY: 'auto'
+    }"
+  >
+    <div class="preview-wrap">
+      <div class="preview">
+        <playerVod :playerOptions="playerOptions" v-if="fileList && fileList.length === 0"></playerVod>
+        <a-carousel v-else arrows :initialSlide="palyerIndex">
+          <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
+            <a-icon type="left-circle" />
+          </div>
+          <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
+            <a-icon type="right-circle" />
+          </div>
+          <template v-for="(v, i) in fileList">
+            <playerVod :playerOptions="v.playerOptions" :key="i"></playerVod>
+          </template>
+        </a-carousel>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import playerVod from './index';
+import { Carousel, Icon, Modal } from 'ant-design-vue';
+export default {
+  name: 'videoModal',
+  data() {
+    return {
+      previewVisible: this.visible
+    };
+  },
+  props: {
+    visible: Boolean,
+    playerOptions: {
+      type: Object,
+      default: () => ({
+        sources: [
+          {
+            type: 'video/mp4',
+            src: ''
+          }
+        ]
+      })
+    },
+    fileList: {
+      type: Array,
+      default: () => []
+    },
+    palyerIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {},
+  watch: {
+    visible(value) {
+      this.previewVisible = value;
+    }
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  activated() {},
+  methods: {
+    handleCancel() {
+      this.$emit('update:visible', false);
+      this.previewVisible = false;
+    }
+  },
+  components: {
+    playerVod,
+    [Modal.name]: Modal,
+    [Carousel.name]: Carousel,
+    [Icon.name]: Icon
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.preview-wrap {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .preview {
+    padding: 20px 0;
+    width: 60vw;
+    height: 100%;
+    // height: 60vh;
+    // display: flex;
+    // justify-content: center;
+    // align-items: center;
+  }
+}
+.ant-carousel /deep/ .custom-slick-arrow {
+  width: 25px;
+  height: 25px;
+  font-size: 25px;
+  color: #fff;
+  background-color: rgba(31, 45, 61, 0.11);
+  opacity: 0.5;
+}
+.ant-carousel /deep/ .custom-slick-arrow:before {
+  display: none;
+}
+.ant-carousel /deep/ .custom-slick-arrow:hover {
+  opacity: 0.5;
+  color: #fff;
+}
+</style>

package/packages/big-table/src/utils/CustomPagination.vue

@@ -1,86 +1,86 @@
-<template>
-  <ul unselectable="unselectable" class="ant-pagination">
-    <li class="ant-pagination-total-text">
-      <a-icon v-show="showEye" type="eye" @click="triggerEye(false)" />
-      <a-icon v-show="!showEye" type="eye-invisible" @click="triggerEye(true)" />
-    </li>
-    <li v-if="!showEye" class="ant-pagination-total-text">****</li>
-    <slot v-if="showEye">
-      <li v-if="!spinning" class="ant-pagination-total-text">
-        {{
-          `${1 + (pageIndex - 1) * pageSize}-${
-            pageSize * pageIndex > asyncCountRecords ? asyncCountRecords : pageSize * pageIndex
-          }`
-        }}
-        共{{ asyncCountRecords }}条
-      </li>
-      <slot v-if="spinning">
-        <a-spin :spinning="spinning" class="custom-spin" :indicator="indicator" />
-      </slot>
-    </slot>
-    <li
-      title="上一页"
-      aria-disabled="true"
-      :class="[{ 'ant-pagination-disabled': pageIndex <= 1 }, 'ant-pagination-prev']"
-    >
-      <a class="ant-pagination-item-link" :disabled="pageIndex <= 1" @click="prevPage">
-        <a-icon type="left" />
-      </a>
-    </li>
-    <li
-      title="下一页"
-      aria-disabled="true"
-      :class="[{ 'ant-pagination-disabled': !hasNextPage }, 'ant-pagination-next']"
-    >
-      <a class="ant-pagination-item-link" :disabled="!hasNextPage" @click="nextPage">
-        <a-icon type="right" />
-      </a>
-    </li>
-    <li class="ant-pagination-options">
-      <a-select @change="onChange" :default-value="`${pageSize}/页`">
-        <a-select-option v-for="o in pageSizeOptions" :key="o" :value="o">
-          {{ o }}/页
-        </a-select-option>
-      </a-select>
-    </li>
-  </ul>
-</template>
-<script>
-export default {
-  name: "CustomPagination",
-  props: {
-    pageSizeOptions: Array, // 每页显示数量分组
-    spinning: Boolean, // 异步统计数据状态
-    asyncCountRecords: [Number, String], // 异步统计数量
-    pageSize: [Number, String], // 每页展示条数
-    hasNextPage: Boolean, // 能否点击下一页
-    pageIndex: Number // 当前第几页
-  },
-  data() {
-    return {
-      indicator: <a-icon type="loading-3-quarters" style="font-size: 20px" spin />,
-      showEye: false
-    };
-  },
-  methods: {
-    onChange(value) {
-      this.$emit("showSizeChange", "", Number(value));
-    },
-    nextPage() {
-      this.$emit("pageChange", this.pageIndex + 1, true);
-    },
-    prevPage() {
-      this.$emit("pageChange", this.pageIndex - 1, true);
-    },
-    triggerEye(bool) {
-      this.showEye = bool;
-      this.$emit("triggerEye", bool);
-    }
-  }
-};
-</script>
-<style lang="less" scoped>
-.custom-spin {
-  margin: 4px 16px 0 6px;
-}
-</style>
+<template>
+  <ul unselectable="unselectable" class="ant-pagination">
+    <li class="ant-pagination-total-text">
+      <a-icon v-show="showEye" type="eye" @click="triggerEye(false)" />
+      <a-icon v-show="!showEye" type="eye-invisible" @click="triggerEye(true)" />
+    </li>
+    <li v-if="!showEye" class="ant-pagination-total-text">****</li>
+    <slot v-if="showEye">
+      <li v-if="!spinning" class="ant-pagination-total-text">
+        {{
+          `${1 + (pageIndex - 1) * pageSize}-${
+            pageSize * pageIndex > asyncCountRecords ? asyncCountRecords : pageSize * pageIndex
+          }`
+        }}
+        共{{ asyncCountRecords }}条
+      </li>
+      <slot v-if="spinning">
+        <a-spin :spinning="spinning" class="custom-spin" :indicator="indicator" />
+      </slot>
+    </slot>
+    <li
+      title="上一页"
+      aria-disabled="true"
+      :class="[{ 'ant-pagination-disabled': pageIndex <= 1 }, 'ant-pagination-prev']"
+    >
+      <a class="ant-pagination-item-link" :disabled="pageIndex <= 1" @click="prevPage">
+        <a-icon type="left" />
+      </a>
+    </li>
+    <li
+      title="下一页"
+      aria-disabled="true"
+      :class="[{ 'ant-pagination-disabled': !hasNextPage }, 'ant-pagination-next']"
+    >
+      <a class="ant-pagination-item-link" :disabled="!hasNextPage" @click="nextPage">
+        <a-icon type="right" />
+      </a>
+    </li>
+    <li class="ant-pagination-options">
+      <a-select @change="onChange" :default-value="`${pageSize}/页`">
+        <a-select-option v-for="o in pageSizeOptions" :key="o" :value="o">
+          {{ o }}/页
+        </a-select-option>
+      </a-select>
+    </li>
+  </ul>
+</template>
+<script>
+export default {
+  name: "CustomPagination",
+  props: {
+    pageSizeOptions: Array, // 每页显示数量分组
+    spinning: Boolean, // 异步统计数据状态
+    asyncCountRecords: [Number, String], // 异步统计数量
+    pageSize: [Number, String], // 每页展示条数
+    hasNextPage: Boolean, // 能否点击下一页
+    pageIndex: Number // 当前第几页
+  },
+  data() {
+    return {
+      indicator: <a-icon type="loading-3-quarters" style="font-size: 20px" spin />,
+      showEye: false
+    };
+  },
+  methods: {
+    onChange(value) {
+      this.$emit("showSizeChange", "", Number(value));
+    },
+    nextPage() {
+      this.$emit("pageChange", this.pageIndex + 1, true);
+    },
+    prevPage() {
+      this.$emit("pageChange", this.pageIndex - 1, true);
+    },
+    triggerEye(bool) {
+      this.showEye = bool;
+      this.$emit("triggerEye", bool);
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.custom-spin {
+  margin: 4px 16px 0 6px;
+}
+</style>