n20-common-lib 1.2.41 → 1.3.0

package/src/components/NstcG6Components/NstcPagination/NstcPagination.vue

@@ -0,0 +1,430 @@
+<template>
+  <div
+      :class="[
+      'pagination',
+      isInterFace ? 'pagination-interface' : 'pagination-default',
+    ]"
+  >
+    <div class="pagination-wrap">
+      <div class="arrow" @click="prev">
+        <i class="el-icon-arrow-left"/>
+      </div>
+      <div class="arrow" @click="next">
+        <i class="el-icon-arrow-right"/>
+      </div>
+      <div class="pages">
+        <span>{{ current }}</span
+        >/{{ totalPage }}
+      </div>
+
+      <el-select
+          v-if="isShowConfig ? false : true"
+          class="pagination-total"
+          v-model="paginationChange"
+          placeholder=""
+          @change="handleSizeChange"
+      >
+        <el-option
+            v-for="item in settings"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+        >
+        </el-option>
+      </el-select>
+
+      <div class="page-jumper">
+        <span>至第</span>
+        <el-input
+            v-model="input"
+            class="el-pagination__editor is-in-pagination"
+            :min="1"
+            :max="totalPage"
+            type="number"
+            @keyup.enter.native="handleChange(input)"
+            @change="handleChange"
+        />
+<!--        v-nstc-number="{ min: 1 }"-->
+        <span>页</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {on, off} from "element-ui/src/utils/dom";
+import setPageNumIcon from "./setPageNum.png";
+import setPageDefaultIcon from "./setpagedefault.png";
+
+export default {
+  name: "NstcPagination",
+  props: {
+    configSettings: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    page: Number,
+    pageSize: Number,
+    total: Number,
+    isInterFace: {
+      type: Boolean,
+      default: false,
+    },
+    isShowConfig: {
+      type: Boolean,
+      default: false,
+    },
+    isNeedThousand: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      paginationChange: 20,
+      settings: [],
+      // settings: [20, 50, 100],
+      current: 1,
+      size: 20,
+      totalPage: 1,
+      input: 1,
+      sizeInput: "",
+      showSetting: false,
+      pagination: {
+        page: 1,
+        limit: 20,
+        total: 0,
+      },
+      setPageUrl: setPageDefaultIcon,
+    };
+  },
+  watch: {
+    size() {
+      let index = this.settings.indexOf(this.size);
+      if (index < 0) this.sizeInput = this.size;
+      else this.sizeInput = "";
+    },
+    page(newVal) {
+      this.current = newVal;
+      this.input = newVal;
+    },
+    pageSize: {
+      immediate: true,
+      handler(newVal) {
+        this.size = newVal;
+        console.log(newVal, "newVal----------");
+        this.paginationChange = newVal;
+        this.handleTotal();
+      },
+    },
+
+    total() {
+      this.handleTotal();
+    },
+  },
+
+  created() {
+    let settings = [
+      {value: 10, label: '10条/页'},
+      {value: 20, label:'20条/页'},
+      {value: 50, label: '50条/页'},
+      {value: 100, label: '100条/页'},
+    ];
+    if (this.configSettings && this.configSettings.length > 0) {
+      settings = this.configSettings;
+    }
+    this.isNeedThousand &&
+    settings.push({value: 1000, label: '1000条/页'});
+    this.settings = settings;
+  },
+
+  mounted() {
+    this.current = this.page;
+    this.handleTotal();
+  },
+  methods: {
+    prevent(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    handleTotal() {
+      if (this.total) {
+        this.totalPage = Math.ceil(this.total / this.size);
+        // this.totalPage = this.total % this.size === 0 ? count : count + 1;
+      } else {
+        this.totalPage = 1;
+      }
+    },
+    handleChange(v) {
+      v = v === "" ? 1 : v;
+      v = parseInt(v);
+      if (v > this.totalPage) v = this.totalPage;
+      if (v < 1) v = 1;
+
+      this.input = v;
+      this.current = v;
+
+      this.pagination = {
+        page: this.current !== "" ? this.current : 1,
+        limit: this.size,
+        total: this.total,
+      };
+      this.$emit("pagination-change", this.pagination);
+    },
+    handleSizeChange(v) {
+      v = parseInt(v);
+      if (v < 1) v = 1;
+
+      this.size = v;
+
+      this.current = 1;
+      this.handleTotal();
+      this.pagination = {
+        page: this.current !== "" ? this.current : 1,
+        limit: this.size,
+        total: this.totalPage,
+      };
+      this.$emit("pagination-change", this.pagination);
+    },
+    prev() {
+      this.handleChange(this.current - 1);
+    },
+    next() {
+      this.handleChange(this.current + 1);
+    },
+    goSetting(e) {
+      this.showSetting = !this.showSetting;
+      this.setPageUrl = this.showSetting ? setPageNumIcon : setPageDefaultIcon;
+      if (this.showSetting) {
+        setTimeout(() => {
+          on(document, "click", this.handleDocumentClick);
+        }, 100);
+      }
+
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    handleDocumentClick() {
+      this.showSetting = false;
+      off(document, "click", this.handleDocumentClick);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+
+.el-pagination__editor {
+  height: 26px;
+}
+
+.el-pagination__editor.el-input {
+  width: 46px;
+}
+
+.el-pagination__editor .el-input__inner {
+  padding: 0;
+  text-align: center;
+  font-size: 10px;
+
+  border: 1px solid #bac4cf;
+  border-radius: 2px;
+  box-sizing: border-box;
+}
+
+.el-pagination__editor.el-input .el-input__inner {
+  height: 26px !important;
+}
+
+.el-input.is-active .el-input__inner,
+.el-input__inner:focus {
+  // border-color: @primaryColor;
+  // background-color:#3d7fff;
+}
+
+.pagination-total {
+  height: 26px;
+  width: 89px !important;
+  margin-right: 6px;
+  font-size: 12px;
+
+  .el-input__inner, .el-input {
+    height: 26px !important;
+  }
+
+  .el-input {
+    display: flex;
+
+    .el-input__inner {
+      width: 100%;
+    }
+  }
+
+  .el-input__suffix-inner {
+    .el-select__caret {
+      width: 15px;
+      line-height: 24px;
+    }
+  }
+
+  .el-input--suffix .el-input__inner {
+    padding-right: 20px;
+    padding-left: 9px;
+  }
+}
+.cl-button {
+  margin-left: 4px;
+}
+
+.cl-button + .cl-button {
+  margin-left: 4px;
+}
+
+.border {
+  border: 1px solid #bac4cf;
+  border-radius: 2px;
+  box-sizing: border-box;
+}
+
+.cl-close {
+  width: calc(100% - 101px) !important;
+}
+
+.pagination-interface {
+  position: fixed;
+  right: -5px;
+  bottom: 0;
+  background-color: #fff;
+  transition: width 0.3s;
+  width: calc(100% - 258px);
+  height: 61px;
+  margin-right: 33px;
+  padding: 10px;
+  // border-radius: 10px;
+  z-index: 999;
+  border-radius: 0 0 10px 10px;
+  box-shadow: 0 -2px 6px 0 rgba(92, 100, 113, 0.11);
+}
+
+.pagination-default {
+  width: 100%;
+  height: 61px;
+  background-color: #fff;
+}
+
+.pagination {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: end;
+
+  .el-button--default {
+    background-color: #fff;
+    border: 1px solid #bac4cf;
+    color: #666;
+  }
+
+  .pagination-wrap {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+  }
+
+  .arrow {
+    width: 26px;
+    height: 26px;
+    line-height: 26px;
+    text-align: center;
+    font-size: 12px;
+    font-weight: bold;
+    color: #666;
+    cursor: pointer;
+    border: 1px solid #bac4cf;
+    border-radius: 2px;
+    box-sizing: border-box;
+
+    &:hover {
+      border: 1px solid #007AFF;
+      color: #007AFF;
+    }
+  }
+
+  .arrow + .arrow {
+    margin-left: 6px;
+  }
+
+  .pages {
+    font-size: 10px;
+    color: #3D4A57;
+    margin: 0 6px;
+
+    span {
+      color: #007AFF;
+    }
+  }
+
+  .page-jumper {
+    font-size: 10px;
+    color: #3D4A57;
+    margin-right: 12px;
+
+    .jumper-input {
+      width: 46px;
+    }
+  }
+
+  .pagination-button {
+    font-size: 10px;
+    width: 26px;
+    border-radius: 2px;
+    padding: 2px 0;
+  }
+
+  .setting {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+  }
+
+  .setting-wrapper {
+    position: absolute;
+    bottom: 40px;
+    right: -10px;
+
+    background: white;
+    padding: 16px 22px;
+
+    font-size: 10px;
+    color: #3D4A57;
+
+    border-radius: 5px 5px 0 5px;
+    box-shadow: 0px -2px 6px 0px rgba(92, 100, 113, 0.11);
+
+    z-index: 100;
+
+    .hint {
+      word-break: keep-all;
+      margin-right: 10px;
+      transform: translate(0, 2px);
+    }
+  }
+}
+.nstc-pagination-btn {
+  background-color: #fff;
+  border: 1px solid #bac4cf;
+  color: #666;
+
+  &:not(.is-disabled):hover {
+    background-color: #007aff !important;
+    color: #fff !important;
+  }
+
+  &:focus {
+    background-color: #007aff !important;
+    border: 1px solid #007aff !important;
+    color: #fff !important;
+  }
+}
+</style>

package/src/components/NstcG6Components/NstcScreenFull/NstcScreenFull.vue

@@ -0,0 +1,70 @@
+<!--
+  功能：    浏览器全屏
+  作者：    nstc
+  创建时间： 2021-02-05
+-->
+<template>
+  <div>
+    <nstc-svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
+  </div>
+</template>
+
+<script>
+import screenfull from 'screenfull'
+import NstcSvgIcon from '../NstcSvgIcon/NstcSvgIcon'
+export default {
+  name: 'NstcScreenFull',
+  components: {
+    NstcSvgIcon
+  },
+  data() {
+    return {
+      isFullscreen: false
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    this.destroy()
+  },
+  methods: {
+    click() {
+      console.log(screenfull)
+      if (!screenfull.isEnabled) {
+        this.$message({
+          message: '浏览器不允许全屏',
+          type: 'warning'
+        })
+        return false
+      }
+      screenfull.toggle()
+    },
+    change() {
+      this.isFullscreen = screenfull.isFullscreen
+    },
+    init() {
+      if (screenfull.isEnabled) {
+        screenfull.on('change', this.change)
+      }
+    },
+    destroy() {
+      if (screenfull.isEnabled) {
+        screenfull.off('change', this.change)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.screenfull-svg {
+  display: inline-block;
+  cursor: pointer;
+  fill: #5a5e66;;
+  width: 20px;
+  height: 20px;
+  vertical-align: 10px;
+}
+</style>
+