cosmoim-852 fix 补料创建 新增分页功能

src/components/wyb-pagination/iconfont.css

@@ -0,0 +1,20 @@
+@font-face {font-family: "iconfont";
+  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALUAAsAAAAABtwAAAKFAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfgqBQIE1ATYCJAMMCwgABCAFhG0HRBsBBhEVjCOyrw7sYPj4I0QqzNq3zfnzDrGGnxGGLSGIJLifI6jWsJ7dDaIDIM/lo6IIVFyEAVaJdC8Ma5KsX18DIvAAvNrML65E6KwwVPnjwadURdk9jquzLCnj43Q3FiERMuvuW6CtkLIwkLa2RJ8WB1673A9cYIWJ1mV/lpeyxOTL57kc310BZdH8QIGltvZ+PiZgggWyN0aRFViUecPYBS/wPoFG/WbFduUD1CvsZYG41DlCfSGsKCxXL9Q27C3iTY369JLe4zX6fPyzHJHUZPZDOxcuwfrP5M0rFXuZ6+WcYIfImEUhdhvTO7JgjKwxXYxyrGnBz/RX/EwCqzgqMxF/nVvdDCahKj2RxFN7NAk8IIEMapPsCjYQvTsQUof9hYqOoxqqWHWbqJ9LAh/W3Mq8UOvnzz9Gr1/8fZwsnhvGHNLy5fPH0Q1H/TAu1g7uN/MIVHJPFhG/fhEIau4W/277/5oK+Govv4JgpdC81J/RE/w9ycCuYshsSy6a2BNb3mx4ojMBhdynmu3v9GO6tmdwNaFeT4akTh+yeqNEoc+iRpNV1KonXkOjGfXhJl3YXpQGTPsACO0+kbR6h6zdQhT6ihq9/lGrPfZotBtdZzYZD33YYmwEe2jfQXfBk2uTQ1x7hWq2DedlEesOedIxKNK8nKvRIy+xYXpRpQgBcXBQgcfQ2gCRw4idpINIPGcZNb0o7YLbHGxhqCFQD7TeAa0TeBQMFofK+68gZWY1uKOuzn8HsYkeHhRS+QCiVvtBdY/yzOSFUhKCAMICB1RgFrKsAMTmWSPUEalhQjI6y5x+NFSdbq91P1DEmrDX5EiRo2g8a/yovQUS5ourYW68Kpg2GwAAAA==') format('woff2')
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-danjiantou:before {
+  content: "\e62d";
+}
+
+.icon-shuangjiantou:before {
+  content: "\e62e";
+}
+

src/components/wyb-pagination/wyb-pagination.vue

@@ -0,0 +1,424 @@
+<template>
+  <view
+    class="wyb-pagination-box"
+    :style="{
+      paddingLeft: padding + 'rpx',
+      paddingRight: padding + 'rpx',
+      '--hover': autoHover,
+    }"
+  >
+    <view class="wyb-pagination-left" :style="{ opacity: currentPage === 1 ? 0.5 : 1 }">
+      <view v-if="showFirst" :class="'wyb-pagination-first-page-' + (showIcon ? 'i' : 't')" :style="btnStyleStr" :hover-class="currentPage === 1 ? '' : 'wyb-pagination-hover'" @tap="onPageBtnTap('first-page')">
+        <view v-if="showIcon" class="iconfont icon-shuangjiantou left-arrow" />
+        <text v-else>{{ firstText }}</text>
+      </view>
+      <view :class="'wyb-pagination-prev-page-' + (showIcon ? 'i' : 't')" :style="btnStyleStr" :hover-class="currentPage === 1 ? '' : 'wyb-pagination-hover'" @tap="onPageBtnTap('prev-page')">
+        <view v-if="showIcon" class="iconfont icon-danjiantou left-arrow" />
+        <text v-else>{{ prevText }}</text>
+      </view>
+    </view>
+    <view class="wyb-pagination-info" @tap.stop="onInfoTap">
+      <view class="wyb-pagination-num" v-if="!infoClick">
+        <text :style="{ color: currentColor }">{{ currentPage }}</text>
+        <text class="wyb-pagination-span" :style="{ color: pageInfoColor }">/</text>
+        <text :style="{ color: pageInfoColor }">{{ totalPage }}</text>
+        <text v-if="showTotalItem" class="wyb-pagination-info-total" :style="{ color: RGBChange(pageInfoColor, 0.5, 'light') }"> ({{ totalItems }}) </text>
+      </view>
+      <!-- #ifndef MP-WEIXIN || APP-VUE || APP-NVUE || APP-PLUS || APP-PLUS-NVUE -->
+      <view class="wyb-pagination-input" v-else>
+        <input type="number" v-model="inputPage" :onpaste="false" :focus="infoFocus" :value="currentPage" :style="{ color: currentColor }" :cursor-spacing="cursorSpacing" @confirm="onInfoConfirm" @blur="onInfoBlur" />
+      </view>
+      <!-- #endif -->
+      <!-- #ifdef MP-WEIXIN || APP-VUE || APP-NVUE || APP-PLUS || APP-PLUS-NVUE -->
+      <!-- <view class="wyb-pagination-input" v-else>
+				<input 
+				 type="number" 
+				 v-model="inputPage" 
+				 :focus="infoFocus" 
+				 :name="currentPage"
+				 :style="{color: currentColor}"
+				 :cursor-spacing="cursorSpacing"
+				 @confirm="onInfoConfirm" 
+				 @blur="onInfoBlur" />
+			</view> -->
+      <!-- #endif -->
+    </view>
+    <view class="wyb-pagination-right" :style="{ opacity: currentPage === totalPage ? 0.5 : 1 }">
+      <view :class="'wyb-pagination-next-page-' + (showIcon ? 'i' : 't')" :style="btnStyleStr" :hover-class="currentPage === totalPage ? '' : 'wyb-pagination-hover'" @tap="onPageBtnTap('next-page')">
+        <view v-if="showIcon" class="iconfont icon-danjiantou right-arrow" />
+        <text v-else>{{ nextText }}</text>
+      </view>
+      <view v-if="showLast" :class="'wyb-pagination-last-page-' + (showIcon ? 'i' : 't')" :style="btnStyleStr" :hover-class="currentPage === totalPage ? '' : 'wyb-pagination-hover'" @tap="onPageBtnTap('last-page')">
+        <view v-if="showIcon" class="iconfont icon-shuangjiantou right-arrow" />
+        <text v-else>{{ lastText }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentPage: this.current || 1,
+      inputPage: '',
+      infoClick: false,
+      infoFocus: false,
+    };
+  },
+  computed: {
+    totalPage() {
+      return Math.ceil(parseFloat(this.totalItems) / parseFloat(this.pageItems));
+    },
+    autoHover() {
+      if (this.btnStyle.backgroundColor) {
+        return this.RGBChange(this.btnStyle.backgroundColor, 0.1, 'dark');
+      } else {
+        return this.RGBChange('#f8f8f8', 0.05, 'dark');
+      }
+    },
+    btnStyleStr() {
+      let styleStr = '';
+      for (let key in this.btnStyle) {
+        styleStr += `${this.sortFieldMatch(key)}: ${this.btnStyle[key]}; `;
+      }
+      return styleStr;
+    },
+  },
+  watch: {
+    current(val) {
+      const oPage = this.currentPage;
+      if (!Object.is(oPage, val)) {
+        this.currentPage = val;
+        this.$emit('change', {
+          type: 'prop-page',
+          current: this.currentPage,
+        });
+      }
+    },
+  },
+  props: {
+    totalItems: {
+      type: [String, Number],
+      default: 20,
+    },
+    pageItems: {
+      type: [String, Number],
+      default: 5,
+    },
+    current: {
+      type: Number,
+      default: 1,
+    },
+    prevText: {
+      type: String,
+      default: '上一页',
+    },
+    nextText: {
+      type: String,
+      default: '下一页',
+    },
+    firstText: {
+      type: String,
+      default: '首页',
+    },
+    lastText: {
+      type: String,
+      default: '尾页',
+    },
+    pageInfoColor: {
+      type: String,
+      default: '#494949',
+    },
+    currentColor: {
+      type: String,
+      default: '#007aff',
+    },
+    padding: {
+      type: [String, Number],
+      default: 15,
+    },
+    btnStyle: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    showIcon: {
+      type: Boolean,
+      default: false,
+    },
+    showTotalItem: {
+      type: Boolean,
+      default: false,
+    },
+    showFirst: {
+      type: Boolean,
+      default: true,
+    },
+    showLast: {
+      type: Boolean,
+      default: true,
+    },
+    couldInput: {
+      type: Boolean,
+      default: true,
+    },
+    cursorSpacing: {
+      type: Number,
+      default: 0,
+    },
+  },
+  methods: {
+    onPageBtnTap(type) {
+      switch (type) {
+        case 'first-page':
+          if (!Object.is(this.currentPage, 1)) {
+            this.currentPage = 1;
+            this.$emit('change', { type, current: this.currentPage });
+          }
+          break;
+        case 'prev-page':
+          if (!Object.is(this.currentPage, 1)) {
+            this.currentPage--;
+            this.$emit('change', { type, current: this.currentPage });
+          }
+          break;
+        case 'next-page':
+          if (!Object.is(this.currentPage, this.totalPage)) {
+            this.currentPage++;
+            this.$emit('change', { type, current: this.currentPage });
+          }
+          break;
+        case 'last-page':
+          if (!Object.is(this.currentPage, this.totalPage)) {
+            this.currentPage = this.totalPage;
+            this.$emit('change', { type, current: this.currentPage });
+          }
+          break;
+      }
+    },
+    onInfoTap() {
+      if (this.couldInput) {
+        this.infoClick = true;
+        this.inputPage = this.currentPage;
+        setTimeout(() => {
+          this.infoFocus = true;
+        }, 10);
+      }
+    },
+    onInfoConfirm(e) {
+      let input = e.detail.value;
+      const oPage = this.currentPage;
+      if (parseFloat(input) > this.totalPage) {
+        this.currentPage = this.totalPage;
+      } else if (parseFloat(input) < 1) {
+        this.currentPage = 1;
+      } else if (input === '') {
+        this.currentPage = oPage;
+      } else {
+        this.currentPage = parseFloat(input);
+      }
+      if (!Object.is(oPage, this.currentPage)) {
+        this.$emit('change', {
+          type: 'input-page',
+          current: this.currentPage,
+        });
+      }
+      this.infoClick = false;
+      this.$nextTick(() => {
+        this.infoFocus = false;
+      });
+    },
+    onInfoBlur(e) {
+      let input = e.detail.value;
+      const oPage = this.currentPage;
+      if (parseFloat(input) > this.totalPage) {
+        this.currentPage = this.totalPage;
+      } else if (parseFloat(input) < 1) {
+        this.currentPage = 1;
+      } else if (input === '') {
+        this.currentPage = oPage;
+      } else {
+        this.currentPage = parseFloat(input);
+      }
+      if (!Object.is(oPage, this.currentPage)) {
+        this.$emit('change', {
+          type: 'input-page',
+          current: this.currentPage,
+        });
+      }
+      this.infoClick = false;
+      this.$nextTick(() => {
+        this.infoFocus = false;
+      });
+    },
+    RGBChange(color, level, type) {
+      // 判断颜色类型
+      let r = 0,
+        g = 0,
+        b = 0,
+        hasAlpha = false,
+        alpha = 1;
+      if (color.indexOf('#') !== -1) {
+        // hex转rgb
+        if (color.length === 4) {
+          let arr = color.split('');
+          color = '#' + arr[1] + arr[1] + arr[2] + arr[2] + arr[3] + arr[3];
+        }
+        let color16List = [color.substring(1, 3), color.substring(3, 5), color.substring(5, 7)];
+        r = parseInt(color16List[0], 16);
+        g = parseInt(color16List[1], 16);
+        b = parseInt(color16List[2], 16);
+      } else {
+        hasAlpha = color.indexOf('a') !== -1;
+        let root = color.slice();
+        let idx = root.indexOf('(') + 1;
+        root = root.substring(idx);
+        let firstDotIdx = root.indexOf(',');
+        r = parseFloat(root.substring(0, firstDotIdx));
+        root = root.substring(firstDotIdx + 1);
+        let secondDotIdx = root.indexOf(',');
+        g = parseFloat(root.substring(0, secondDotIdx));
+        root = root.substring(secondDotIdx + 1);
+        if (hasAlpha) {
+          let thirdDotIdx = root.indexOf(',');
+          b = parseFloat(root.substring(0, thirdDotIdx));
+          alpha = parseFloat(root.substring(thirdDotIdx + 1));
+        } else {
+          b = parseFloat(root);
+        }
+      }
+
+      let rgbc = [r, g, b];
+      // 减淡或加深
+      for (var i = 0; i < 3; i++) type === 'light' ? (rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i])) : (rgbc[i] = Math.floor(rgbc[i] * (1 - level)));
+
+      if (hasAlpha) {
+        return `rgba(${rgbc[0]}, ${rgbc[1]}, ${rgbc[2]}, ${alpha})`;
+      } else {
+        return `rgb(${rgbc[0]}, ${rgbc[1]}, ${rgbc[2]})`;
+      }
+    },
+    sortFieldMatch(field) {
+      const stringArray = field.split('');
+      let newField = field;
+      stringArray.forEach((t) => {
+        if (/[A-Z]/.test(t)) {
+          newField = field.replace(t, `-${t.toLowerCase()}`);
+        }
+      });
+      return newField;
+    },
+  },
+};
+</script>
+
+<style>
+@import 'iconfont.css';
+.wyb-pagination-box {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  box-sizing: border-box;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+}
+
+.wyb-pagination-left {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+}
+
+.wyb-pagination-right {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+}
+
+.wyb-pagination-first-page-t,
+.wyb-pagination-prev-page-t,
+.wyb-pagination-next-page-t,
+.wyb-pagination-last-page-t {
+  font-size: 27rpx;
+  padding: 14rpx 25rpx;
+  box-sizing: border-box;
+  background-color: #f8f8f8;
+  border: 1px solid #e5e5e5;
+  white-space: nowrap;
+}
+
+.wyb-pagination-first-page-i,
+.wyb-pagination-prev-page-i,
+.wyb-pagination-next-page-i,
+.wyb-pagination-last-page-i {
+  font-size: 27rpx;
+  padding: 14rpx 33rpx;
+  box-sizing: border-box;
+  background-color: #f8f8f8;
+  border: 1px solid #e5e5e5;
+  white-space: nowrap;
+}
+
+.wyb-pagination-first-page-t,
+.wyb-pagination-first-page-i {
+  margin-right: 15rpx;
+}
+
+.wyb-pagination-last-page-t,
+.wyb-pagination-last-page-i {
+  margin-left: 15rpx;
+}
+
+.wyb-pagination-info {
+  font-size: 33rpx;
+  white-space: nowrap;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+
+.wyb-pagination-input input {
+  text-align: center;
+}
+
+.wyb-pagination-span {
+  margin: 0 2rpx;
+}
+
+.wyb-pagination-info-total {
+  margin-left: 10rpx;
+}
+
+.wyb-pagination-first-page-t:active,
+.wyb-pagination-prev-page-t:active,
+.wyb-pagination-next-page-t:active,
+.wyb-pagination-last-page-t:active,
+.wyb-pagination-first-page-i:active,
+.wyb-pagination-prev-page-i:active,
+.wyb-pagination-next-page-i:active,
+.wyb-pagination-last-page-i:active {
+  background-color: var(--hover) !important;
+}
+
+.left-arrow {
+  transform: scale(0.9);
+  margin-right: 5rpx;
+}
+
+.right-arrow {
+  margin-left: 5rpx;
+  transform: scale(0.9) rotate(180deg);
+  -webkit-transform: scale(0.8) rotate(180deg);
+}
+</style>

src/i18n/lang/cn.ts

@@ -149,6 +149,10 @@ export default {
     time: '请先选择时间',
     scrapForm: '请先扫描报废单',
     materialName: '物料名称',
+    previousPage: '上一页',
+    nextPage: '下一页',
+    HomePage: '首页',
+    TailPage: '尾页',
     finishedProduct: '请先选择成品编码',
     Pi_InputMrp: '请输入MRP',
     Pi_InputFactory: '请输入工厂代码',

src/i18n/lang/en.ts

@@ -260,6 +260,10 @@ export default {
     Closerepository: 'The memory function is disabled',
     quantityNum: 'Qty',
     recommended: 'Lock',
+    previousPage: 'prev',
+    nextPage: 'next',
+    HomePage: 'first',
+    TailPage: 'last',
     materialCode: 'Please enter the material number',
     receive: 'receiveLoc',
     Production: 'Order',

src/pages/raw/handover/feeding/create.vue

@@ -75,11 +75,12 @@
           <u-button type="primary" @click="query">{{ $t('message.Query') }}</u-button>
         </view>
       </view>
-      <scroll-view scroll-y="true" scroll-x="true" style="height: 385px; padding-top: 20px; white-space: nowrap">
+      <scroll-view scroll-y="true" scroll-x="true" style="height: 360px; padding-top: 20px; white-space: nowrap">
         <view style="display: inline-block">
-          <wyb-table class="table" ref="table" enable-check="single" show-left-and-right-border width="100%" :headers="PropoHeader" @onCheck="selectItem($event)" :contents="model.MaterialList" :show-vert-border="false"></wyb-table>
+          <wyb-table class="table" ref="table" enable-check="single" show-left-and-right-border width="100%" :headers="PropoHeader" @onCheck="selectItem($event)" :contents="PopupList" :show-vert-border="false"> </wyb-table>
         </view>
       </scroll-view>
+      <wyb-pagination @change="Change" :total-items="model.MaterialList.length" page-items="10" :prev-text="$t('message.previousPage')" :next-text="$t('message.nextPage')" :first-text="$t('message.HomePage')" :last-text="$t('message.TailPage')" v-if="PageShow" />
       <u-button type="primary" style="margin-top: 20px" @click="onOk">{{ $t('message.workArea_Confirm') }}</u-button>
     </u-popup>
     <view class="bottom-bar">
@@ -118,9 +119,12 @@ export default class RawReceiptDetail extends BasePage {
   model = model;
   border = true;
   show = false;
+  PageShow = true;
   List: any = [];
   some: any = {};
   qty: any = '';
+  PopupList: any = [];
+  obj: any;
   //生产订单号
   prdOrder: any = '';
   //物料号
@@ -130,15 +134,30 @@ export default class RawReceiptDetail extends BasePage {
     await this.query();
   }
   async query() {
+    this.PageShow = false;
     let params = {
       prdOrder: this.prdOrder,
       materialCode: this.materialCode,
     };
     await this.model.queryMaterialList(params);
+    this.obj = this.group(this.model.MaterialList, 10);
+    this.PopupList = this.obj[0];
+    this.PageShow = true;
+  }
+  group(array: any, subGroupLength: number) {
+    let index = 0;
+    let newArray = [];
+    while (index < array.length) {
+      newArray.push(array.slice(index, (index += subGroupLength)));
+    }
+    return newArray;
+  }
+  Change(e: any) {
+    this.PopupList = this.obj[e.current - 1];
   }
   selectItem(e: any) {
     console.log(e);
-    this.model.MaterialList.forEach((item: any) => {
+    this.PopupList.forEach((item: any) => {
       if (item.checked) {
         this.some = item;
       }
@@ -146,7 +165,7 @@ export default class RawReceiptDetail extends BasePage {
   }
   onOk() {
     let flag = false;
-    this.model.MaterialList.forEach((item: any) => {
+    this.PopupList.forEach((item: any) => {
       if (item.checked) {
         flag = true;
       }