n20-common-lib 2.6.58 → 2.6.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.6.58",
+  "version": "2.6.59",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/Pagination/index.vue

@@ -1,78 +1,15 @@
-<template>
-  <div class="n20-pagination-1">
-    <el-pagination
-      layout="prev,next,slot"
-      :current-page.sync="pageObjC[pageKey.no]"
-      :page-size="pageObjC[pageKey.size]"
-      :total="pageObjC[pageKey.total]"
-      :size="size"
-      @current-change="setnoOrsize"
-    />
-    <span class="m-r-ss"
-      ><span class="color-primary">{{ pageObjC[pageKey.no] }}</span
-      >/{{ max }}</span
-    >
-    <span>{{ '到第' | $lc }}</span>
-    <el-input-number
-      v-model="toNo"
-      class="n20-pagination-jumper-1 m-r-ss"
-      :min="1"
-      :max="max"
-      :step="1"
-      :step-strictly="true"
-      :controls="false"
-      :size="size"
-      @change="setnoOrsize"
-    />
-    <span class="m-r-s">{{ '页' | $lc }}</span>
-    <el-popover v-model="settingV" placement="top" trigger="click">
-      <el-link slot="reference" icon="n20-icon-shezhi" :underline="false" style="font-size: 16px" />
-      <div>
-        <span>{{ '每页显示' | $lc }}</span>
-        <el-radio-group
-          v-model="pageObjC[pageKey.size]"
-          class="n20-pagination-sizes-1 m-l-s"
-          size="mini"
-          @change="
-            () => {
-              setnoOrsize()
-              settingV = false
-            }
-          "
-        >
-          <el-radio-button v-for="item in pageSizes" :key="item" class="m-r-s" :label="item" />
-        </el-radio-group>
-        <el-input-number
-          v-model="userSize"
-          class="n20-pagination-usersizes-1"
-          :class="{
-            'is-active': !pageSizes.includes(pageObjC[pageKey.size])
-          }"
-          :min="1"
-          :max="sizeMax"
-          :step="1"
-          :step-strictly="true"
-          :controls="false"
-          size="mini"
-          :placeholder="'自定义' | $lc"
-          @change="
-            () => {
-              setnoOrsize()
-              settingV = false
-            }
-          "
-        />
-      </div>
-    </el-popover>
-  </div>
-</template>
+
 
 <script>
-import mixins from './mixins/index.js'
-import { $lc } from '../../utils/i18n/index.js'
+import RemotePagination from './remotePagination.vue'
+import StaticPagination from './staticPagination.vue'
+
 export default {
   name: 'Pagination',
-  mixins: [mixins],
+  components: {
+    RemotePagination,
+    StaticPagination
+  },
   props: {
     size: {
       type: String,
@@ -111,71 +48,25 @@ export default {
       default: 'page/pId'
     }
   },
-  data() {
-    return {
-      settingV: false,
-      noOrsize: '',
-      pageObjC: {}
-    }
-  },
-  computed: {
-    max() {
-      let total = this.pageObj[this.pageKey.total]
-      let size = this.pageObj[this.pageKey.size]
-      return Math.ceil(total / size) || 1
-    },
-    toNo: {
-      get() {
-        return this.pageObjC[this.pageKey.no]
-      },
-      set(val) {
-        if (val) {
-          this.pageObjC[this.pageKey.no] = Math.ceil(val)
-        } else {
-          this.pageObjC[this.pageKey.no] = 1
-        }
-      }
-    },
-    userSize: {
-      get() {
-        return this.pageObjC[this.pageKey.size]
-      },
-      set(val) {
-        if (val) {
-          this.pageObjC[this.pageKey.size] = Math.ceil(val)
-        } else {
-          this.pageObjC[this.pageKey.size] = this.pageSizes[0]
-        }
-        this.pageObjC[this.pageKey.no] = !this.remote ? 1 : this.pageObjC[this.pageKey.no]
-      }
-    }
-  },
-  watch: {
-    noOrsize() {
-      this.pageObj[this.pageKey.no] = this.pageObjC[this.pageKey.no]
-      this.pageObj[this.pageKey.size] = this.pageObjC[this.pageKey.size]
-      this.pageObjC[this.pageKey.total] = this.pageObj[this.pageKey.total]
-      this.$emit('change', this.pageObjC)
-    },
-    pageObj: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        this.pageObjC = this.pageObj
-      }
-    }
-  },
-  methods: {
-    setnoOrsize() {
-      let no = this.pageObjC[this.pageKey.no]
-      let size = this.pageObjC[this.pageKey.size]
-
-      this.remote
-        ? this.setRemoteData(this.pageObjC).finally(() => {
-            this.noOrsize = no + ',' + size + Date.now()
-          })
-        : (this.noOrsize = no + ',' + size + Date.now())
-    }
+  render(h) {
+    const { remote } = this
+    // 判断是否为远程分页
+    return remote
+      ? h(RemotePagination, {
+          props: this.$props,
+          on: {
+            change: (page) => {
+              this.$set(this, 'pageObj',page)
+              this.$emit('change', page)
+            }
+          }
+        })
+      : h(StaticPagination, {
+          props: this.$props,
+          on: {
+            change: (page) => this.$emit('change', page)
+          }
+        })
   }
 }
 </script>

package/src/components/Pagination/remotePagination.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="n20-pagination-1">
+    <el-pagination
+      layout="prev,next,slot"
+      :current-page.sync="pageRemote[pageKey.no]"
+      :page-size="pageRemote[pageKey.size]"
+      :total="pageRemote[pageKey.total]"
+      :size="size"
+      @current-change="setnoOrsize"
+    />
+    <span class="m-r-ss"
+      ><span class="color-primary">{{ pageRemote[pageKey.no] }}</span
+      >/{{ max }}</span
+    >
+    <span>{{ '到第' | $lc }}</span>
+    <el-input-number
+      v-model="toNo"
+      class="n20-pagination-jumper-1 m-r-ss"
+      :min="1"
+      :max="max"
+      :step="1"
+      :step-strictly="true"
+      :controls="false"
+      :size="size"
+      @change="setnoOrsize"
+    />
+    <span class="m-r-s">{{ '页' | $lc }}</span>
+    <el-popover v-model="settingV" placement="top" trigger="click">
+      <el-link slot="reference" icon="n20-icon-shezhi" :underline="false" style="font-size: 16px" />
+      <div>
+        <span>{{ '每页显示' | $lc }}</span>
+        <el-radio-group
+          v-model="pageRemote[pageKey.size]"
+          class="n20-pagination-sizes-1 m-l-s"
+          size="mini"
+          @change="handleChange"
+        >
+          <el-radio-button v-for="item in pageSizes" :key="item" class="m-r-s" :label="item" />
+        </el-radio-group>
+        <el-input-number
+          v-model="userSize"
+          class="n20-pagination-usersizes-1"
+          :class="{
+            'is-active': !pageSizes.includes(pageRemote[pageKey.size])
+          }"
+          :min="1"
+          :max="sizeMax"
+          :step="1"
+          :step-strictly="true"
+          :controls="false"
+          size="mini"
+          :placeholder="'自定义' | $lc"
+          @change="handleChange"
+        />
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import axios from '../../utils/axios.js'
+import { $lc } from '../../utils/i18n/index.js'
+
+export default {
+  name: 'RemotePagination',
+  props: {
+    size: {
+      type: String,
+      default: 'mini'
+    },
+    pageObj: {
+      type: Object,
+      default: () => ({
+        no: 1,
+        size: 20,
+        total: 0
+      })
+    },
+    pageKey: {
+      type: Object,
+      default: () => ({
+        no: 'no',
+        size: 'size',
+        total: 'total'
+      })
+    },
+    pageSizes: {
+      type: Array,
+      default: () => [20, 50, 100]
+    },
+    sizeMax: {
+      type: Number,
+      default: 1000
+    },
+    remote: {
+      type: Boolean,
+      default: false
+    },
+    pId: {
+      type: String,
+      default: 'page/pId'
+    }
+  },
+  data() {
+    return {
+      settingV: false,
+      userNo: sessionStorage.getItem('userNo'),
+      noOrsize: '',
+      pageRemote: {}
+    }
+  },
+  computed: {
+    max() {
+      let total = this.pageRemote[this.pageKey.total]
+      let size = this.pageRemote[this.pageKey.size]
+      return Math.ceil(total / size) || 1
+    },
+    toNo: {
+      get() {
+        return this.pageRemote[this.pageKey.no]
+      },
+      set(val) {
+        this.pageRemote[this.pageKey.no] = val ? Math.ceil(val) : 1
+      }
+    },
+    userSize: {
+      get() {
+        return this.pageRemote[this.pageKey.size]
+      },
+      set(val) {
+        this.pageRemote[this.pageKey.size] = val ? Math.ceil(val) : this.pageSizes[0]
+      }
+    }
+  },
+  watch: {
+    noOrsize() {
+      this.$set(this.pageObj, this.pageKey.no, this.pageRemote[this.pageKey.no])
+      this.$set(this.pageObj, this.pageKey.size, this.pageRemote[this.pageKey.size])
+      this.$set(this.pageObj, this.pageKey.total, this.pageRemote[this.pageKey.total])
+      this.$emit('change', this.pageRemote)
+    }
+  },
+  mounted() {
+    this.getSessionData()
+  },
+  methods: {
+    async getSessionData() {
+      const { data } = await axios.post(
+        `/bems/prod_1.0/user/pageHabit/list?t=${Date.now()}`,
+        {
+          userNo: this.userNo,
+          pageId: this.pId
+        },
+        { loading: false, noMsg: true }
+      )
+      this.pageRemote = this.$set(this, 'pageRemote', JSON.parse(data))
+      console.log('pageRemote', JSON.parse(data))
+      this.$emit('change', JSON.parse(data))
+    },
+    async setRemoteData(data) {
+      return await axios.post(
+        '/bems/prod_1.0/user/pageHabit',
+        {
+          userNo: this.userNo,
+          pageId: this.pId,
+          showStructure: JSON.stringify(data)
+        },
+        { loading: false, onMsg: true }
+      )
+    },
+    setnoOrsize() {
+      let no = this.pageRemote[this.pageKey.no]
+      let size = this.pageRemote[this.pageKey.size]
+      this.setRemoteData(this.pageRemote).finally(() => {
+        this.noOrsize = no + ',' + size + Date.now()
+      })
+    },
+    handleChange() {
+      this.setnoOrsize()
+      this.settingV = false
+    }
+  }
+}
+</script>

package/src/components/Pagination/staticPagination.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="n20-pagination-1">
+    <el-pagination
+      layout="prev,next,slot"
+      :current-page.sync="pageObj[pageKey.no]"
+      :page-size="pageObj[pageKey.size]"
+      :total="pageObj[pageKey.total]"
+      :size="size"
+      @current-change="setnoOrsize"
+    />
+    <span class="m-r-ss"
+      ><span class="color-primary">{{ pageObj[pageKey.no] }}</span
+      >/{{ max }}</span
+    >
+    <span>{{ '到第' | $lc }}</span>
+    <el-input-number
+      v-model="toNo"
+      class="n20-pagination-jumper-1 m-r-ss"
+      :min="1"
+      :max="max"
+      :step="1"
+      :step-strictly="true"
+      :controls="false"
+      :size="size"
+      @change="setnoOrsize"
+    />
+    <span class="m-r-s">{{ '页' | $lc }}</span>
+    <el-popover v-model="settingV" placement="top" trigger="click">
+      <el-link slot="reference" icon="n20-icon-shezhi" :underline="false" style="font-size: 16px" />
+      <div>
+        <span>{{ '每页显示' | $lc }}</span>
+        <el-radio-group
+          v-model="pageObj[pageKey.size]"
+          class="n20-pagination-sizes-1 m-l-s"
+          size="mini"
+          @change="
+            () => {
+              setnoOrsize()
+              settingV = false
+            }
+          "
+        >
+          <el-radio-button v-for="item in pageSizes" :key="item" class="m-r-s" :label="item" />
+        </el-radio-group>
+        <el-input-number
+          v-model="userSize"
+          class="n20-pagination-usersizes-1"
+          :class="{
+            'is-active': !pageSizes.includes(pageObj[pageKey.size])
+          }"
+          :min="1"
+          :max="sizeMax"
+          :step="1"
+          :step-strictly="true"
+          :controls="false"
+          size="mini"
+          :placeholder="'自定义' | $lc"
+          @change="
+            () => {
+              setnoOrsize()
+              settingV = false
+            }
+          "
+        />
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import { $lc } from '../../utils/i18n/index'
+export default {
+  name: 'StaticPagination',
+  props: {
+    size: {
+      type: String,
+      default: 'mini'
+    },
+    pageObj: {
+      type: Object,
+      default: () => ({
+        no: 1,
+        size: 20,
+        total: 0
+      })
+    },
+    pageKey: {
+      type: Object,
+      default: () => ({
+        no: 'no',
+        size: 'size',
+        total: 'total'
+      })
+    },
+    pageSizes: {
+      type: Array,
+      default: () => [20, 50, 100]
+    },
+    sizeMax: {
+      type: Number,
+      default: 1000
+    }
+  },
+  data() {
+    return {
+      settingV: false,
+      noOrsize: ''
+    }
+  },
+  computed: {
+    max() {
+      let total = this.pageObj[this.pageKey.total]
+      let size = this.pageObj[this.pageKey.size]
+
+      return Math.ceil(total / size) || 1
+    },
+    toNo: {
+      get() {
+        return this.pageObj[this.pageKey.no]
+      },
+      set(val) {
+        if (val) {
+          this.pageObj[this.pageKey.no] = Math.ceil(val)
+        } else {
+          this.pageObj[this.pageKey.no] = 1
+        }
+      }
+    },
+    userSize: {
+      get() {
+        return this.pageObj[this.pageKey.size]
+      },
+      set(val) {
+        if (val) {
+          this.pageObj[this.pageKey.size] = Math.ceil(val)
+        } else {
+          this.pageObj[this.pageKey.size] = this.pageSizes[0]
+        }
+        this.pageObj[this.pageKey.no] = 1
+      }
+    }
+  },
+  watch: {
+    noOrsize() {
+      this.$emit('change', this.pageObj)
+    }
+  },
+  methods: {
+    setnoOrsize() {
+      let no = this.pageObj[this.pageKey.no]
+      let size = this.pageObj[this.pageKey.size]
+      this.noOrsize = no + ',' + size + Date.now()
+    }
+  }
+}
+</script>

package/src/components/Pagination/mixins/index.js

@@ -1,39 +0,0 @@
-import axios from '../../../utils/axios.js'
-export default {
-  data() {
-    return {
-      userNo: sessionStorage.getItem('userNo')
-    }
-  },
-  mounted() {
-    this.remote &&
-      this.getSessionData().then((data) => {
-        this.pageObjC = JSON.parse(data) || this.pageObj
-      })
-    this.pageObjC = this.pageObj
-  },
-  methods: {
-    async getSessionData() {
-      const { data } = await axios.post(
-        `/bems/prod_1.0/user/pageHabit/list?t=${Date.now()}`,
-        {
-          userNo: this.userNo,
-          pageId: this.pId
-        },
-        { loading: false, noMsg: true }
-      )
-      return data
-    },
-    async setRemoteData(data) {
-      return await axios.post(
-        '/bems/prod_1.0/user/pageHabit',
-        {
-          userNo: this.userNo,
-          pageId: this.pId,
-          showStructure: JSON.stringify(data)
-        },
-        { loading: false, onMsg: true }
-      )
-    }
-  }
-}