n20-common-lib 1.3.46 → 1.3.49

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

@@ -1,428 +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>
+<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>