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

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

@@ -1,49 +1,49 @@
-import lwLoading from './index.vue'
-import Vue from "vue";
-
-/*lwLoading.install = Vue => Vue.component(lwLoading.name, lwLoading)
-
-export default lwLoading*/
-
-
-
-
-// 手动挂载加载框
-const toastCom = Vue.extend(lwLoading)
-let toastNew
-// 挂载加载框
-const lwLoadingDom = (msg) => {
-  toastNew = new toastCom({
-    el: document.createElement('div')
-  });
-  toastNew.msg = msg || msg === 0 ? msg : '加载中...'
-  toastNew.loading++
-  document.body.appendChild(toastNew.$el)
-  return toastNew
-}
-
-/**
-* 打开加载框
-* @param {String} msg 加载文字，默认“加载中...”
-* */
-export const lwShowLoading = (msg='加载中...') => {
-  if (toastNew){
-    toastNew.loading++
-    toastNew.msg = msg
-    return toastNew
-  }
-  return lwLoadingDom(msg)
-}
-
-// 关闭加载框
-export const lwCloseLoading = () => {
-  try{
-    if (toastNew){
-      toastNew.loading--
-
-      if (toastNew.loading <=0) toastNew.loading = 0
-    }
-  }catch (err){
-    console.warn('关闭加载框出错', err)
-  }
-}
+import lwLoading from './index.vue'
+import Vue from "vue";
+
+/*lwLoading.install = Vue => Vue.component(lwLoading.name, lwLoading)
+
+export default lwLoading*/
+
+
+
+
+// 手动挂载加载框
+const toastCom = Vue.extend(lwLoading)
+let toastNew
+// 挂载加载框
+const lwLoadingDom = (msg) => {
+  toastNew = new toastCom({
+    el: document.createElement('div')
+  });
+  toastNew.msg = msg || msg === 0 ? msg : '加载中...'
+  toastNew.loading++
+  document.body.appendChild(toastNew.$el)
+  return toastNew
+}
+
+/**
+* 打开加载框
+* @param {String} msg 加载文字，默认“加载中...”
+* */
+export const lwShowLoading = (msg='加载中...') => {
+  if (toastNew){
+    toastNew.loading++
+    toastNew.msg = msg
+    return toastNew
+  }
+  return lwLoadingDom(msg)
+}
+
+// 关闭加载框
+export const lwCloseLoading = () => {
+  try{
+    if (toastNew){
+      toastNew.loading--
+
+      if (toastNew.loading <=0) toastNew.loading = 0
+    }
+  }catch (err){
+    console.error('关闭加载框出错', err)
+  }
+}

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

@@ -19,6 +19,7 @@
     <slot name="content">
       <div
         class="lw-none-data-content"
+        :style="{color:color}"
       >{{ content || $lwLanguage.get('wms_project.pda.component.notData.null', '空空如也') + '...' }}</div>
     </slot>
 
@@ -27,6 +28,7 @@
 </template>
 
 <script>
+import noDataImage from '../../../assets/img/lwNotData/noneData.png'
 
 export default {
   name: "lwNotData",
@@ -36,13 +38,18 @@ export default {
     // 图片路径
     src:{
       type:String,
-      default: require('../../../assets/img/lwNotData/noneData.png')
+      default: noDataImage,
     },
     // 是否需要进入动画
     animation:{
       type:Boolean,
       default: true
-    }
+    },
+    // 底部描述文字的颜色
+    color:{
+      type:String,
+      default: '#969799'
+    },
   },
   data() {
     return {}
@@ -68,7 +75,6 @@ export default {
 
   .lw-none-data-content{
     margin-bottom: 10px;
-    color: @baseColor;
   }
 }
 

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

@@ -113,8 +113,8 @@ export default {
   },
   methods: {
     // 页码发生改变
-    pageChange(){
-      this.$emit('change',this.pageNum)
+    pageChange(page){
+      this.$emit('change', page)
 
       if (this.scrollTop){
         const dom = document.querySelector(this.scrollElement)
@@ -145,6 +145,7 @@ export default {
     border-radius: 6px;
     border: solid 1px @baseColor;
     flex-basis: 0;
+    flex-grow: 0;
 
     &+.van-pagination__item{
       margin-left: 10px;

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

@@ -0,0 +1,11 @@
+/*
+* 分页组件
+* @author: 张文
+* @date  2022-07-18
+* */
+
+import lwPagination from "./index.vue";
+
+lwPagination.install = Vue => Vue.component(lwPagination.name, lwPagination)
+
+export default lwPagination

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)