@logwire/logwire-wms-pda-ui 1.1.17 → 1.2.0

package/src/components/ui/Pagination/index.vue

@@ -0,0 +1,274 @@
+<!--
+  分页组件
+  @author: 张文
+  @date: 2022-07-18
+-->
+<template>
+  <div v-if="pageTotal !== 0" class="lw-global-flex-between pagination-box">
+
+    <!-- 统计信息 -->
+    <div>
+      <span>{{ $lwLanguage.get('wms_project.pda.components.ui.Pagination.kzdeljrg','共') }}</span>
+      <span class="lw-global-value-bold">{{ pageTotal }}</span>
+      <span>{{ $lwLanguage.get('wms_project.pda.components.ui.Pagination.jckytjtx','条') }}</span>
+    </div>
+
+    <!-- 每页的数据条数 -->
+    <div
+      class="lw-global-click-style"
+      @click="changSizePopupShow=true"
+    >
+      <span style="margin-right: 5px">{{ size }} {{ $lwLanguage.get('wms_project.pda.components.ui.Pagination.ymqlzcsc','条/页') }}</span>
+      <van-icon name="arrow-down" />
+    </div>
+
+    <!-- 页码切换 -->
+    <div
+      class="lw-global-flex-between"
+      style="min-width: 40%"
+    >
+      <!-- 上一页 -->
+      <div
+        :class="[isMin ? 'no-click' : 'lw-global-click-style']"
+         @click="leftClick"
+      >
+        <slot name="prevBtn">
+          {{ prevText }}
+          <van-icon v-if="!prevText" name="arrow-left" />
+        </slot>
+      </div>
+
+      <!-- 页面指示 -->
+      <div
+        class="lw-global-click-style"
+        @click="pageNumPopupShow=true"
+      >
+        <span class="lw-global-value-bold-red">{{ num }}</span>
+        <span> / </span>
+        <span class="lw-global-value-bold">{{ allPageNum }}</span>
+      </div>
+
+      <!-- 下一页 -->
+      <div
+        :class="[isMax ? 'no-click' : 'lw-global-click-style']"
+        @click="rightClick"
+      >
+        <slot name="nextBtn">
+          {{ nextText }}
+          <van-icon v-if="!nextText" name="arrow" />
+        </slot>
+      </div>
+    </div>
+
+
+
+    <!-- 调整页码条数的弹框-->
+    <lw-popup-radio
+      :title="$lwLanguage.get('wms_project.pda.components.ui.Pagination.eezadkoh','调整数据条数')"
+      v-model="changSizePopupShow"
+      :columns="pageSizeList"
+      @confirm="confirmSize"
+    />
+
+    <!-- 调整页码的弹框-->
+    <lw-popup-radio
+      :title="$lwLanguage.get('wms_project.pda.components.ui.Pagination.qijgqhla','快速跳转')"
+      v-model="pageNumPopupShow"
+      :columns="pageNumList"
+      @confirm="confirmNum"
+    />
+
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "lwPagination",
+  props:{
+    // 当前页
+    value:{
+      type: Number,
+      default: 1
+    },
+
+    // 总条数
+    pageTotal: {
+      type: Number,
+      default: 0
+    },
+
+    // 每页大小
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+
+    // 每页显示条数
+    pageSizes:{
+      type: Array,
+      default: () => [10, 20, 30]
+    },
+
+    // 点击分页切换时，是否滚动到页面顶部，默认滚动到顶部
+    scrollTop:{
+      type:Boolean,
+      default:true
+    },
+    // 滚动到顶部的元素
+    scrollElement:{
+      type:String,
+      default:'#app'
+    },
+
+    // 上一页按钮文字
+    prevText: String,
+    // 下一页按钮文字
+    nextText: String
+  },
+  computed:{
+
+    // 当前页
+    num:{
+      get(){
+        return this.value
+      },
+      set(v){
+        this.$emit('input', v)
+      }
+    },
+
+    // 总页码
+    allPageNum(){
+      return Math.ceil(this.pageTotal / this.size)
+    },
+
+    // 分页大小
+    size:{
+      get(){
+        return this.pageSize
+      },
+      set(v){
+        this.$emit('update:pageSize', v)
+      }
+    },
+
+    // 总页码列表
+    pageNumList(){
+      let list = []
+      for (let i = 1; i <= this.allPageNum; i++) {
+        list.push({
+          value: i,
+          label: i
+        })
+      }
+      return list
+    },
+
+    // 页面条数可选项列表
+    pageSizeList(){
+      return this.pageSizes.map(item=>{
+        return {
+          label: item + this.$lwLanguage.get('wms_project.pda.components.ui.Pagination.ymqlzcsc','条/页'),
+          value: item
+        }
+      })
+    },
+
+    // 是否是最大页码
+    isMax(){
+      return this.allPageNum <= this.num
+    },
+
+    // 是否是最小页码
+    isMin(){
+      return this.num === 1
+    }
+  },
+  data() {
+    return {
+      // 调整数据条数的弹框
+      changSizePopupShow: false,
+
+      // 调整页码的弹框
+      pageNumPopupShow: false
+    }
+  },
+  methods: {
+    // 页码、分页大小发生改变
+    pageChange(){
+      this.$nextTick(()=>{
+        this.$emit('change', {
+          pageSize: this.size,
+          pageNum: this.num
+        })
+      })
+
+      if (this.scrollTop){
+        const dom = document.querySelector(this.scrollElement)
+        dom && dom.scrollIntoView({
+          behavior: "smooth",
+          block:'start',
+        });
+      }
+
+    },
+
+    // 左边按钮点击
+    leftClick(){
+      if (this.isMin) return
+      this.num--
+      this.pageChange()
+    },
+
+    // 右边按钮点击
+    rightClick(){
+      if (this.isMax) return
+      this.num++
+      this.pageChange()
+    },
+
+    // 确认页面数据条数
+    confirmSize(item){
+      this.size = item.value
+
+      this.$nextTick(()=>{
+        if (this.allPageNum < this.num){
+          this.num = this.allPageNum
+        }
+
+        this.pageChange()
+      })
+    },
+
+    // 确认页面跳转页数
+    confirmNum(item){
+      this.num = item.value
+      this.pageChange()
+    }
+
+
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "./../../../assets/css/var.less";
+.pagination-box{
+  margin: 15px auto 5px;
+  max-width: 300px;
+  font-size: 14px;
+
+  .lw-global-value-bold{
+    display: inline-block;
+    margin: 0 3px;
+  }
+}
+
+// 禁止点击
+.no-click{
+  cursor: no-drop;
+  color: #c0c4cc;
+}
+</style>

package/src/components/ui/Pagination//345/210/206/351/241/265V2.md

@@ -0,0 +1 @@
+# 分页V2 [查看文档](https://www.yuque.com/docs/share/649c4153-9370-49b0-8fec-82c7f5df5679)

package/src/components/ui/Popup/index.js

@@ -1,5 +1,5 @@
-import lwPopup from './index.vue'
-
-lwPopup.install = Vue => Vue.component(lwPopup.name, lwPopup)
-
-export default lwPopup
+import lwPopup from './index.vue'
+
+lwPopup.install = Vue => Vue.component(lwPopup.name, lwPopup)
+
+export default lwPopup

package/src/components/ui/Popup/index.vue

@@ -47,7 +47,7 @@
         :color="btnColor"
         :plain="btnPlain"
         @click="offBtnClick"
-      >{{ offBtnText }}</lw-button>
+      >{{ offBtnText || $lwLanguage.get('wms_project.pda.components.ui.popup.off','关闭') }}</lw-button>
       <slot name="button"></slot>
     </div>
 
@@ -103,10 +103,7 @@ export default {
       default:true
     },
     // 关闭按钮的文字
-    offBtnText:{
-      type:String,
-      default:'关闭'
-    },
+    offBtnText:String,
     // 关闭按钮点击后触发的方法
     offBtnFn:Function,
     // 关闭按钮是否mini
@@ -209,7 +206,7 @@ export default {
 
 .lw-bottom-popup-title{
   text-align: center;
-  height: @bottomPopupTitleHeight;
+  height: 40px;
   width: 100%;
   font-weight: bold;
   border-bottom: solid 1px @borderColor;

package/src/components/ui/PopupCheckbox/index.js

@@ -1,5 +1,5 @@
-import lwPopupCheckbox from './index.vue'
-
-lwPopupCheckbox.install = Vue => Vue.component(lwPopupCheckbox.name, lwPopupCheckbox)
-
-export default lwPopupCheckbox
+import lwPopupCheckbox from './index.vue'
+
+lwPopupCheckbox.install = Vue => Vue.component(lwPopupCheckbox.name, lwPopupCheckbox)
+
+export default lwPopupCheckbox