n20-common-lib 1.3.10 → 1.3.13

package/nstc-g6/components/NstcPagination/NstcPagination.vue

@@ -0,0 +1,428 @@
+<template>
+  <div
+    :class="[
+      'pagination',
+      isInterFace ? 'pagination-interface' : 'pagination-default'
+    ]"
+  >
+    <div class="pagination-wrap">
+      <div class="arrow" @click="prev">
+        <i class="el-icon-arrow-left"></i>
+      </div>
+      <div class="arrow" @click="next">
+        <i class="el-icon-arrow-right"></i>
+      </div>
+      <div class="pages">
+        <span>{{ current }}</span
+        >/{{ totalPage }}
+      </div>
+
+      <el-select
+        v-if="isShowConfig ? false : true"
+        v-model="paginationChange"
+        class="pagination-total"
+        placeholder=""
+        @change="handleSizeChange"
+      >
+        <el-option
+          v-for="item in settings"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </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: flex-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/nstc-g6/components/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>
+