@zscreate/zhxy-app-component 1.0.319 → 1.0.320-test.3

package/components/form-container/form-container.vue

@@ -9,11 +9,46 @@
                           <text>{{ item.name }}</text>
                         </view>
                         <view class="table-container">
+                          <template v-if="item.options.supportPage">
+                            <view class="table-item" v-for="(table, tableCIndex) in currTablePageData(item)"
+                                  :key="tablePageIndex(item.model,tableCIndex)"
+                                  :index="tablePageIndex(item.model,tableCIndex)"
+                                  >
+                                <view class="item">
+                                    <view class="index">{{table.index + 1}}</view>
+                                    <view class="delete icon-delete" v-if="!item.options.disabled&&!item.options.hiddenOperateBtn"
+                                          @click="handleDeleteRow(tablePageIndex(item.model,tableCIndex), item.model)">删除</view>
+                                    <view class="extend"
+                                          :class="{'icon-arrow-right': !tableRowsShow[item.model][tablePageIndex(item.model,tableCIndex)], 'icon-arrow-down':tableRowsShow[item.model][tablePageIndex(item.model,tableCIndex)]}"
+                                          @click="showTableRow(item.model, tablePageIndex(item.model,tableCIndex))">
+                                        {{tableRowsShow[item.model][tablePageIndex(item.model,tableCIndex)] ? '收起' : '展开'}}
+                                    </view>
+                                </view>
+                                <view class="view-port" v-show="tableRowsShow[item.model][tablePageIndex(item.model,tableCIndex)]">
+                                    <view v-for="(tableItem, tableItemIndex) in table.columns" :key="tableItemIndex">
+                                        <evan-form-item v-show="tableItem.options.canView"
+                                                        :labelPosition="labelPosition"
+                                                        @upDateWidget="data => upDateTableWidget(data, tableItemIndex, item.model, tablePageIndex(item.model,tableCIndex))" :itemkey="tableItemIndex"
+                                                        :curLoadedPages="(tablePageInfo[item.model].current - 1) * tablePageInfo[item.model].pageSize + tablePageInfo[item.model].pageSize"
+                                                        :parentTableKey="item.key" :tableKey="item.model" :tableIndex="tablePageIndex(item.model,tableCIndex)" :prop="tableItem.model"
+                                                        :ref="String(Math.random()).split('.')[1]" :models.sync="models"
+                                                        :rules="rules" :widget.sync="tableItem" :isDraft="isDraft" :formId="formId"
+                                                        :linkage="linkage" :isApply="isApply" :applyId="applyId">
+                                        </evan-form-item>
+                                    </view>
+                                </view>
+                            </view>
+                            <page-pagination :total="tablePageInfo[item.model]&&tablePageInfo[item.model].total" 
+                              :currentPage="tablePageInfo[item.model]&&tablePageInfo[item.model].current"
+                              @change="(...args) => tablePageChange(item,...args)"
+                              :numAround="true" :showBorder="false"></page-pagination>
+                          </template>
+                          <template v-else>
                             <view class="table-item" v-for="(table, tableCIndex) in tableData[item.model]"
                                   :key="tableCIndex">
                                 <view class="item">
                                     <view class="index">{{table.index + 1}}</view>
-                                    <view class="delete icon-delete" v-if="!item.options.disabled"
+                                    <view class="delete icon-delete" v-if="!item.options.disabled&&!item.options.hiddenOperateBtn"
                                           @click="handleDeleteRow(tableCIndex, item.model)">删除</view>
                                     <view class="extend"
                                           :class="{'icon-arrow-right': !tableRowsShow[item.model][tableCIndex], 'icon-arrow-down':tableRowsShow[item.model][tableCIndex]}"
@@ -21,6 +56,7 @@
                                         {{tableRowsShow[item.model][tableCIndex] ? '收起' : '展开'}}
                                     </view>
                                 </view>
+                                {{tableRowsShow[item.model][tableCIndex]}}
                                 <view class="view-port" v-show="tableRowsShow[item.model][tableCIndex]">
                                     <view v-for="(tableItem, tableItemIndex) in table.columns" :key="tableItemIndex">
                                         <evan-form-item v-show="tableItem.options.canView"
@@ -34,7 +70,8 @@
                                     </view>
                                 </view>
                             </view>
-                            <view class="add" v-if="isShowAdd && !item.options.disabled" :data-data="item"
+                          </template>
+                            <view class="add" v-if="isShowAdd && !item.options.disabled&&!item.options.hiddenOperateBtn" :data-data="item"
                                   :data-model="item.model" data-add-model="addModel"
                                   @click="addToTableData(item, item.model,'addModel')">+添加</view>
                         </view>
@@ -227,6 +264,7 @@ import {
 } from "../../utils/util.js";
 import Pubsub from 'pubsub-js'
 import evanFormItem from "../evan-form-item/evan-form-item";
+import pagePagination from '../page-pagination/page-pagination';
 import evanForm from "../evan-form/evan-form";
 import mTextarea from "../m-textarea/m-textarea";
 import packageJson from '../../package.json'
@@ -248,7 +286,7 @@ export default {
     props: ['dataObj', 'value', 'isButton', 'verifyNode', 'verifyLogs', 'suggest', 'isCorrect', 'isDraft', 'formId', 'linkage', "labelPosition",
         'isApply','applyId'
     ],
-    components: { evanFormItem ,evanForm, mTextarea },
+    components: { evanFormItem ,evanForm, mTextarea, pagePagination, },
     provide() {
       return {
         formContext: this,
@@ -317,6 +355,7 @@ export default {
             formDesignFlag: false,
             unwatch:null,
             publish_linkage_array:[],
+            tablePageInfo: {}
         }
     },
     watch: {
@@ -412,7 +451,6 @@ export default {
                     this.generateModle(this.data.list);
                     this.initFormLinkage();
                     this.updateFormDataToModels()
-                    console.log(JSON.stringify(this.models))
                 }
             },
           immediate: true
@@ -445,6 +483,23 @@ export default {
               this.fillVerifySignSeal(item)
             }
         },
+        tableData: {
+          handler(val) {
+              const keys = Object.keys(this.tableData)
+              keys.forEach(key => {
+                if (!this.tablePageInfo[key]) {
+                  this.$set(this.tablePageInfo, key, {
+                    current: 1,
+                    pageSize: 10,
+                    total: this.tableData[key].length
+                  })
+                }
+                this.tablePageInfo[key].total = this.tableData[key].length
+              })
+          },
+          immediate: true,
+          deep: true
+        },
         // linkage:{
         // 	deep: true,
         // 	handler(v){
@@ -521,6 +576,25 @@ export default {
         // this.initPo();
     },
     methods: {
+      tablePageIndex(model,index){
+        return (this.tablePageInfo[model].current - 1) * this.tablePageInfo[model].pageSize  + index
+      },
+      currTablePageData(item) {
+        // TODO 处理首次加载页面很多select需要请求远程字典问题(分页,只请求前十条)
+        const startPage = (this.tablePageInfo[item.model]?.current - 1)* this.tablePageInfo[item.model]?.pageSize
+        const endPage = (this.tablePageInfo[item.model]?.current - 1) * this.tablePageInfo[item.model]?.pageSize + this.tablePageInfo[item.model]?.pageSize
+        let pageData = this.tableData[item.model]?.slice(startPage, endPage)
+        return pageData
+      },
+      async tablePageChange(item, page) {
+        let pageSize=10;
+        await this.$nextTick()
+        if (this.tablePageInfo[item.model].pageSize !== pageSize) page = 1
+        this.tablePageInfo[item.model].pageSize = pageSize
+        await this.$nextTick()
+        this.tablePageInfo[item.model].current = page
+        await this.$nextTick()
+      },
       // 表单联动部分组件并未放入evanFormItem,所以并未订阅相关事件，此方法将相关组件放入订阅模式
       initFormLinkage() {
         if(this.data?.list){
@@ -761,18 +835,17 @@ export default {
             // 	}).exec()
             // this.$set(this.tableFlag,'flag',[true])
             // this.tableFlag.flag = [true];
-            console.log(this.tableFlag)
-            this.tableRowsShow[model][index] = !this.tableRowsShow[model][index];
+            // this.tableRowsShow[model][index] = !this.tableRowsShow[model][index];
+            this.$set(this.tableRowsShow[model], index, !this.tableRowsShow[model][index]);
             /***解决小程序不能深度监听***/
             var tempObj = cloneObj(this.tableRowsShow)
-            console.log(this.tableRowsShow = tempObj)
-            console.log(this.tableRowsShow)
-            // console.log(this.tableRowsShow[model][index])
+            // console.log(this.tableRowsShow[model][index],index)
 
             // console.log(this.tableRowsShow[model][index])
         },
         //删除子表单row
         handleDeleteRow(index, model) {
+          console.log('删除子表单row',index, model)
             // //更新tableData
             //更新models
             this.models[model].splice(index, 1);
@@ -819,9 +892,7 @@ export default {
             } else {
                 dataTemp.options.isCorrect = true;
             }
-            console.log(`dataTemp`, dataTemp);
             this.tableData[model].push(dataTemp);
-            console.log('===', this.tableData[model])
             // console.log(this.tableData[model])
         },
         //tableData init
@@ -849,9 +920,10 @@ export default {
                 this.models[model] instanceof Array &&
                 this.models[model].length > 0
             ) {
-                // console.log('--',this.tableModel[model], model)
-                this.models[model].forEach((item, index) => {
+                console.log('--',this.tableModel[model], model)
+                this.models[model].forEach(async(item, index) => {
                     this.originIndex++;
+                    await timeout(0)
                     this.addToTableData(this.tableModel[model], model);
                 });
             }

package/components/page-pagination/changelog.md

@@ -0,0 +1,38 @@
+## 1.2.1（2024-03-13）
+优化代码
+## 1.2.0（2023-06-21）
+1. 更改样式使用scss，未安装的请自行安装；
+2. 样式单位rpx更改为px;
+3. 新增 不显示页码边框 属性；
+4. 新增属性layout，自定义分页排版；
+5. 新增每页条数预设值属性(pageSizes)，可选择每页条数，同时新增每页条数切换时触发的事件；
+6. 移除showAround、showPageInfo和showGoPage属性，功能合并到layout中；
+## 1.1.2（2022-11-09）
+解决nvue页面样式错乱问题
+## 1.1.0（2021-09-07）
+1. 解决 currentPage设置初始值时，页码不准确；
+2. 解决打开非第一页后再重新查询 ，当前页和跳转页都变成0；
+## 1.0.9（2021-08-26）
+1. 解决支付宝小程序在真机中，上页下页图标不显问题；
+2. 优化支付宝小程序中自定义分页显示；
+3. 优化图标，只取需要的图标，减小icon图标文件；
+## 1.0.8（2021-07-29）
+解决总页数为1时，仍可以点击下页或尾页的问题
+## 1.0.6（2021-06-25）
+1. 解决在 nvue 页面下显示不正常问题；
+2. 去掉 css 部分使用的scss，方便在没有安装scss编译插件下也能够运行项目；
+## 1.0.5（2021-05-25）
+解决页数从0开始的问题；
+## 1.0.4（2021-05-10）
+1. 新增 设置显示页码的个数；
+2. 新增 是否显示分页信息(总条数、每页条数等)；
+3. 新增 页码input输入框，方便跳转页面；
+## 1.0.3（2021-05-09）
+修改部分样式
+## 1.0.2（2021-05-09）
+1. 新增 可设置页码按钮大小 ，设置属性 size；
+2. 新增 可自定义页码颜色，设置属性 color;
+## 1.0.1（2021-04-27）
+修改事件的返回值，去掉上页下页等事件，合并为一个 change 事件，详细信息见下面事件说明。
+## 1.0.0（2021-04-22）
+第一次提交

package/components/page-pagination/icon/iconfont.css

@@ -0,0 +1,35 @@
+@font-face {
+	font-family: "icon";
+	/* Project id 2498003 */
+	src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAN0AAsAAAAACIwAAAMlAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDQAqEAIMbATYCJAMYCw4ABCAFhGcHThtVB8iemjxpZAwBC7GBVYDAaYggGvvf7Nl3a6pJDIsmiUz6kChFLAUankgFqpfw/ldn6oBYhwiGL8UJyzos2a9b0gloBx62o6mAuHXr2HdEw7tPMwtANtEZzawY/uHexS1L9FEfgJpz4ccsD6hAxpoWybix7OiA/BbZnUFe1DUCvXY1cb/WNTCBgi8EbkXxPFnVQRofFwoVkK8oUVriQ7fQoFOLeIcq6bn7Q7wNXz7+m/iS1Mza6fbjThnt//bZK1k70DzKH93pinD3hIqMzY3J4lm75imP2LPJQ2+dy9MVSHd1S9KkuT178Lut00EwtpVxNF6vrSFN8o9XVKKxYvvBdeyt/PJxERK//BAyv2oQgl+tCIVfbQUqaBN26cELvEeJm5pkISSpB337SFh4eFTkvHNb23Ht6btBkZLSG16KM0e+quXCtUJonkqu63uuDEur+O3OXT1//YwWOTF55vzVi9HkrB5Dz7kEqaXptBY1OXH6/IVrl64IogS9soJzhVKY5+TTtL8dNnp/NAy9MzGUVglVadpWelW613haFVSmIagJKf07GTsH1o9bziZ/vE5P+pTzESd/yg4KUuXoUden3H4/dP/lLTPGH9IiZVptkS49zLorf3d7Tsej8mlIQj53f4y59BdB8IN/OrEc0vCvuwv4OfDhFLJ0PA3zdkuAKb+VC4hadCut1JV3dxBo1niAxO8r+pOGUZ+n4o2BXYTuHFWApMscZN3mMYWwDlWffWi6nUKvDZ2z+4yx8xClB8uOIwjDrkEy6Btkw+5gCuENVJP+QDPsP/R6GEHL9VmO1M5A4CBjcRMrks1KHD4P6x0DumoWWJVzCpiqYDsuLSop+rvBCmyMEeoaLeOcYMJsFtzFdwOz2YbtzGYEiRcZOLfXFReTupsUSTYLascAAQdkmGgTppDYWBEfneff3hhArTITMCBmSsWolEzqx0oVKQFgujlWUNmNrKJaQ5XhOAIjGPJZYF2iCpg1jw1mr+9kBCRcEcMAl12dYhuNQDlFy/Msr7gGelnHtUiRo0SNFl3KExsDTzMQ7sUUavDJiaTUm6tLEQIAAAA=') format('woff2'),
+		url('//at.alicdn.com/t/font_2498003_mr6aek1y1y8.woff?t=1629946644041') format('woff'),
+		url('//at.alicdn.com/t/font_2498003_mr6aek1y1y8.ttf?t=1629946644041') format('truetype');
+}
+
+.icon {
+	font-family: "icon" !important;
+	font-size: 16px;
+	font-style: normal;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.icon-more:before {
+	content: "\e638";
+}
+
+.icon-left:before {
+	content: "\e607";
+}
+
+.icon-right:before {
+	content: "\e609";
+}
+
+.icon-left1:before {
+	content: "\e641";
+}
+
+.icon-right1:before {
+	content: "\e642";
+}

package/components/page-pagination/page-pagination.vue

@@ -0,0 +1,733 @@
+<template>
+	<view class="contact page-pagination" :class="size=='large'?'size-large':size=='small'?'size-small':''">
+		<view class="page-con" :class="!showBorder&&'no-border'">
+			<view class="page-scroll">
+				<!-- #ifdef APP-NVUE -->
+				<scroll-view scroll-x="true">
+					<!-- #endif -->
+					<view class="page-scroll-child">
+						<view v-for="(item, index) in setLayout" :key="index">
+							<template v-if="item == 'total'">
+								<!-- 总条数 -->
+								<text class="page-total pc-page">共 {{total}} 条</text>
+							</template>
+							<template v-if="item == 'first'">
+								<!-- 首页 -->
+								<view class="pag-btn start" v-if="!numAround" :style="{color}"
+									:class="[nowPage==1&&'btn-ban',btnText&&'btn-text']" @click="clickStart">
+									<!-- #ifdef APP-NVUE -->
+									<text>首页</text>
+									<!-- #endif -->
+									<!-- #ifndef APP-NVUE -->
+									<text v-if="btnText">首页</text>
+									<text v-else class="icon icon-left1"></text>
+									<!-- #endif -->
+								</view>
+							</template>
+							<template v-if="item == 'prev'">
+								<!-- 上页 -->
+								<view class="pag-btn prev" :style="{color}" :class="[nowPage==1&&'btn-ban',btnText&&'btn-text']"
+									@click="clickPrev">
+									<!-- #ifdef APP-NVUE -->
+									<text>上页</text>
+									<!-- #endif -->
+									<!-- #ifndef APP-NVUE -->
+									<text v-if="btnText">上页</text>
+									<text v-else class="icon icon-left"></text>
+									<!-- #endif -->
+								</view>
+							</template>
+							<template v-if="item == 'page'">
+								<!-- 简单模式 -->
+								<view v-if="mode=='simple'" class="page-num simple">
+									<text :style="{color}" style="margin-right: 5px;">{{nowPage}}</text>/ {{pageNum}}
+								</view>
+								<!-- 复杂模式 -->
+								<view class="page-num" v-else>
+									<template v-if="pageNum <= showPageSize">
+										<view v-for="page in pageNumArr" :key="page" class="pag-btn" :class="page==nowPage&&'active'"
+											:style="{color, backgroundColor:(page==nowPage?color:''), borderColor:(page==nowPage?color:'')}"
+											@click="clickPage(page)">{{page}}</view>
+									</template>
+									<template v-else>
+										<!-- 第一页页码 -->
+										<view class="pag-btn" :class="nowPage==1&&'active'"
+											:style="{color, backgroundColor:(nowPage==1?color:''), borderColor:(nowPage==1?color:'')}"
+											v-if="numAround" @click="clickPage(1)">1</view>
+										<!-- 左侧省略号 -->
+										<view class="pag-btn ellipsis-btn"
+											v-if="(forceEllipses && getFirstPage != 1) || (numAround && getFirstPage != 2)">
+											<text class="icon icon-more"></text>
+										</view>
+										<template v-for="(p, i) in showPageSize">
+											<template v-if="i<showPageSize-2">
+												<!-- 中间页码 -->
+												<view :key="i" class="pag-btn" :class="(getFirstPage+i)==nowPage&&'active'"
+													:style="{color, backgroundColor:((getFirstPage+i)==nowPage?color:''),borderColor:((getFirstPage+i)==nowPage?color:'')}"
+													@click="clickPage(getFirstPage+i)">
+													{{getFirstPage+i}}
+												</view>
+											</template>
+											<template v-else>
+												<!-- 若显示省略号，则页码只显示 showPageSize-2 页 -->
+												<view :key="i" v-if="!forceEllipses && !numAround" class="pag-btn"
+													:class="(getFirstPage+i)==nowPage&&'active'"
+													:style="{color, backgroundColor:((getFirstPage+i)==nowPage?color:''), borderColor:((getFirstPage+i)==nowPage?color:'')}"
+													@click="clickPage(getFirstPage+i)">
+													{{getFirstPage+i}}
+												</view>
+											</template>
+										</template>
+										<!-- 右侧省略号 -->
+										<view class="pag-btn ellipsis-btn"
+											v-if="(forceEllipses && getFirstPage<pageNum-(showPageSize-3)) || (numAround && getFirstPage < pageNum-(showPageSize-2))">
+											<text class="icon icon-more"></text>
+										</view>
+										<!-- 最后一页页码 -->
+										<view class="pag-btn last-page" :class="nowPage==pageNum&&'active'"
+											:style="{color,backgroundColor:(nowPage==pageNum?color:''),borderColor:(nowPage==pageNum?color:'')}"
+											v-if="numAround && getFirstPage < pageNum-(showPageSize-3)" @click="clickPage(pageNum)">{{pageNum}}</view>
+									</template>
+								</view>
+							</template>
+							<template v-if="item == 'next'">
+								<!-- 下页 -->
+								<view class="pag-btn next" :style="{color}" :class="[pageNum<=nowPage&&'btn-ban',btnText&&'btn-text']"
+									@click="clickNext">
+									<!-- #ifdef APP-NVUE -->
+									<text>下页</text>
+									<!-- #endif -->
+									<!-- #ifndef APP-NVUE -->
+									<text v-if="btnText">下页</text>
+									<text v-else class="icon icon-right"></text>
+									<!-- #endif -->
+								</view>
+							</template>
+							<template v-if="item == 'last'">
+								<!-- 尾页 -->
+								<view class="pag-btn end" v-if="!numAround" :style="{color}"
+									:class="[pageNum<=nowPage&&'btn-ban',btnText&&'btn-text']" @click="clickEnd">
+									<!-- #ifdef APP-NVUE -->
+									<text>尾页</text>
+									<!-- #endif -->
+									<!-- #ifndef APP-NVUE -->
+									<text v-if="btnText">尾页</text>
+									<text v-else class="icon icon-right1"></text>
+									<!-- #endif -->
+								</view>
+							</template>
+							<template v-if="item == 'limit'">
+								<!-- 选择每页条数 -->
+								<view class="page-limit pc-page">
+									<picker v-model="pageSizeIndex" :range="newPageSizes" @change="changePageSize">
+										<text class="page-input">{{newPageSizes[pageSizeIndex]}}</text>
+										<text class="icon icon-left"></text>
+									</picker>
+								</view>
+							</template>
+							<template v-if="item == 'jumper'">
+								<!-- 前往页数 -->
+								<view class="page-go pc-page">前往第
+									<template v-if="trigger=='blur'">
+										<input class="page-input" v-model="inputPage" @blur="goPage" @input="onInput" />页
+									</template>
+									<template v-else>
+										<input class="page-input" v-model="inputPage" @input="onInput" />页
+										<text class="page-input-btn" @click="goPage">跳转</text>
+									</template>
+								</view>
+							</template>
+						</view>
+						<!-- #ifndef MP-WEIXIN -->
+						<view class="custom-info pc-page">
+							<slot />
+						</view>
+						<!-- #endif -->
+					</view>
+					<!-- #ifdef APP-NVUE -->
+				</scroll-view>
+				<!-- #endif -->
+			</view>
+		</view>
+		<view class="mobile-page">
+			<view class="custom-info">
+				<slot />
+			</view>
+			<view v-for="(item, index) in mLayout" :key="index">
+				<template v-if="item == 'total'">
+					<!-- 总条数 -->
+					<view class="page-total">共 {{total}} 条</view>
+				</template>
+				<template v-if="item == 'limit'">
+					<!-- 选择每页条数 -->
+					<view class="page-limit">
+						<picker v-model="pageSizeIndex" :range="newPageSizes" @change="changePageSize">
+							<text class="page-input">{{newPageSizes[pageSizeIndex]}}</text>
+							<text class="icon icon-left"></text>
+						</picker>
+					</view>
+				</template>
+				<template v-if="item == 'jumper'">
+					<!-- 前往页数 -->
+					<view class="page-go">前往第
+						<template v-if="trigger=='blur'">
+							<input class="page-input" v-model="inputPage" @blur="goPage" @input="onInput" />页
+						</template>
+						<template v-else>
+							<input class="page-input" v-model="inputPage" @input="onInput" />页
+							<text class="page-input-btn" @click="goPage">跳转</text>
+						</template>
+					</view>
+				</template>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+	/**
+	 * @property {Number} total 数据总条数，默认0
+	 * @property {Number} pageSize 每页显示条数，默认10
+	 * @property {Number} currentPage 当前页，默认1
+	 * @property {String} mode = [multi|simple] 显示模式，默认multi
+	 *  @value multi 标准模式(默认)
+	 *  @value simple 简单模式，只显示当前页/总页数
+	 * @property {Boolean} btnText = [true|false] 上页、下页、首页和尾页按钮是否显示汉字，默认false使用箭头表示
+	 * @property {Boolean} numAround = [true|false] 是否用页码中的第一页和最后一页表示首尾页，将不在显示首尾页，默认false
+	 * @property {Boolean} forceEllipses = [true|false] 是否显示省略号，默认false
+	 * @property {Number} showPageSize 中间页码显示的个数，默认5
+	 * @property {String} size = [large|normal|small] 按钮大小，默认normal
+	 *  @value large 大号按钮
+	 *  @value normal 普通按钮(默认)
+	 *  @value small 小型按钮
+	 * @property {String} color 自定义页码颜色，默认#1989FA
+	 * @property {Boolean} showBorder = [true|false] 是否显示页码边框，默认true
+	 * @property {String} layout 自定义分页排版，及是否显示 总条数(total)、首页(first)、上页(prev)、页码(page)、下页(next)、尾页(last)、每页条数选项(limit)和页码跳转(jumper)，默认顺序和排版为：first,prev,page,next,last
+	 * @property {String} trigger = [blur|click] 页码跳转触发方式，默认blur
+	 *  @value blur 失去焦点时触发(默认)
+	 *  @value click 点击跳转按钮触发
+	 * @property {Array} pageSizes 每页条数选项预设值，默认[10, 20, 50]
+	 * @event {Function} change 当页码改变时触发事件，返回参数e={currentPage,type}，详情参数见文档
+	 * @event {Function} sizeChange 每页条数(pageSize)改变时会触发，返回参数e={pageSize}
+	 */
+	export default {
+		name: 'PagePagination',
+		props: {
+			total: { // 总条数
+				type: Number,
+				default: 0
+			},
+			pageSize: { // 每页条数
+				type: Number,
+				default: 10
+			},
+			currentPage: { // 当前页
+				type: Number,
+				default: 1
+			},
+			showPageSize: { // 显示的页码个数
+				type: Number,
+				default: 5
+			},
+			mode: { //显示模式
+				type: String,
+				default: "multi"
+			},
+			forceEllipses: { // 是否显示省略号
+				type: Boolean,
+				default: false
+			},
+			btnText: { // 是否显示汉字
+				type: Boolean,
+				default: false
+			},
+			numAround: { // 是否用页码表示首尾页
+				type: Boolean,
+				default: false
+			},
+			size: { // 按钮大小
+				type: String,
+				default: "normal"
+			},
+			color: { // 页码颜色
+				type: String,
+				default: "#1989FA"
+			},
+			trigger: { // 跳转页码触发方式
+				type: String,
+				default: "blur"
+			},
+			layout: { // 自定义布局
+				type: String,
+				default: "first,prev,page,next,last"
+			},
+			showBorder: { // 是否显示页码边框
+				type: Boolean,
+				default: true
+			},
+			pageSizes: { // 每页条数选项预设值
+				type: Array,
+				default () {
+					return [10, 20, 50]
+				}
+			}
+		},
+		data() {
+			return {
+				nowPage: this.currentPage, //当前页
+				inputPage: this.currentPage, //input输入框绑定值
+				mLayout: [],
+				nowPageSize: this.pageSize, // 当前每页条数
+				pageSizeIndex: this.pageSizes.indexOf(this.pageSize),
+				newPageSizes: this.pageSizes.map(item => item + "条/页"),
+			}
+		},
+		watch: {
+			currentPage(val) {
+				this.nowPage = val > this.pageNum ? this.pageNum : val;
+				this.inputPage = val > this.pageNum ? this.pageNum : val;
+				if (val == 1) {
+					this.nowPage = 1;
+					this.inputPage = 1;
+				}
+			},
+			pageSize(val) {
+				this.nowPageSize = val;
+				this.pageSizeIndex = this.pageSizes.indexOf(val);
+				this.pageSizeEvent();
+			}
+		},
+		computed: {
+			// 总页数
+			pageNum() {
+				return Math.ceil(this.total / this.nowPageSize)
+			},
+			pageNumArr() { // 解决uni-app某些版本中，存在v-for中循环数字时从0开始
+				var pageNumArr = [];
+				for (let i = 0; i < this.pageNum; i++) {
+					pageNumArr.push(i + 1);
+				}
+				return pageNumArr;
+			},
+			// 计算显示的第一个页码
+			getFirstPage() {
+				let firstPage = 0;
+				let a = Math.floor((this.showPageSize - 1) / 2);
+				let b = Math.floor(this.showPageSize / 2) - 1;
+				if (this.nowPage <= a) {
+					if (!this.numAround) firstPage = 1;
+					else firstPage = 2;
+				} else if (this.nowPage >= this.pageNum - b) {
+					if (this.forceEllipses || this.numAround) firstPage = this.pageNum - this.showPageSize + 3;
+					else firstPage = this.pageNum - this.showPageSize + 1;
+				} else {
+					if (this.forceEllipses || this.numAround) firstPage = this.nowPage - a + 1;
+					else firstPage = this.nowPage - a;
+				}
+				return firstPage;
+			},
+			// 设置布局
+			setLayout() {
+				let layoutArr = this.layout.replace(/\s/g, "").split(",");
+				let arr = ["total", "limit", "jumper"];
+				this.mLayout = layoutArr.filter(item => arr.includes(item));
+				return layoutArr;
+			}
+		},
+		methods: {
+			//选择页码
+			clickPage(page) {
+				if (this.nowPage != page) {
+					this.nowPage = page;
+					this.change(page, 'page');
+				}
+			},
+			//点击上页
+			clickPrev() {
+				if (this.nowPage > 1) {
+					let nowPage = this.nowPage - 1;
+					this.nowPage = nowPage;
+					this.change(nowPage, 'prev');
+				}
+			},
+			//点击下页
+			clickNext() {
+				if (this.nowPage < this.pageNum) {
+					let nowPage = this.nowPage + 1;
+					this.nowPage = nowPage;
+					this.change(nowPage, 'next');
+				}
+			},
+			//点击首页
+			clickStart() {
+				if (this.nowPage != 1) {
+					let nowPage = 1;
+					this.nowPage = nowPage;
+					this.change(nowPage, 'homePage');
+				}
+			},
+			//点击尾页
+			clickEnd() {
+				if (this.nowPage != this.pageNum) {
+					let nowPage = this.pageNum;
+					this.nowPage = nowPage;
+					this.change(nowPage, 'endPage');
+				}
+			},
+			//页码改变时触发
+			change(nowPage, type) {
+				this.inputPage = nowPage;
+				this.$emit('change', nowPage, type);
+			},
+			onInput(e) {
+				let val = parseInt(e.target.value.replace(/[^\d]/g, ''));
+				setTimeout(_ => {
+					this.inputPage = val ? (val > this.pageNum ? this.pageNum : val) : '';
+				}, 10)
+			},
+			goPage() {
+				this.nowPage = parseInt(this.inputPage ? this.inputPage : '1');
+				this.inputPage = parseInt(this.inputPage ? this.inputPage : '1');
+				this.change(parseInt(this.inputPage), 'goPage');
+			},
+			changePageSize(e) { // 更改每页条数
+				this.pageSizeIndex = e.detail.value;
+				this.nowPageSize = this.pageSizes[e.detail.value];
+				this.pageSizeEvent();
+			},
+			pageSizeEvent() {
+				if (this.nowPage > this.pageNum) {
+					this.nowPage = this.pageNum;
+					this.inputPage = this.pageNum;
+				}
+				this.$emit('sizeChange', this.nowPageSize);
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import 'icon/iconfont.css';
+
+	$font-size: 14px;
+	$font-color: #606266;
+
+	@mixin page-input {
+		font-size: $font-size;
+		color: $font-color;
+		height: 28px;
+		line-height: 28px;
+		border: 1px solid #DCDFE6;
+		background-color: #FFF;
+		border-radius: 3px;
+		text-align: center;
+		/* #ifndef APP-NVUE */
+		cursor: not-allowed;
+		/* #endif */
+	}
+
+	.page-pagination {
+		width: 100%;
+		/* #ifdef APP-NVUE */
+		width: 750rpx;
+		/* #endif */
+
+		.page-con {
+			width: 100%;
+			display: flex;
+			justify-content: center;
+			/* #ifdef APP-NVUE */
+			width: 750rpx;
+			/* #endif */
+
+			.page-scroll {
+				width: 100%;
+				display: flex;
+				/* #ifndef APP-NVUE */
+				overflow-x: auto;
+				overflow-y: hidden;
+				/* #endif */
+				/* #ifdef APP-NVUE */
+				width: 750rpx;
+				/* #endif */
+
+				.page-scroll-child {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					height: 32px;
+					line-height: 30px;
+					/* #ifndef APP-NVUE */
+					margin: 0 auto;
+					padding: 0 0 0 10px;
+
+					/* #endif */
+
+					.pag-btn {
+						background-color: #FFF;
+						color: #1989FA;
+						font-size: 12px;
+						border: 1px solid #EBEEF5;
+						padding: 0 11px;
+						/* #ifndef APP-NVUE */
+						cursor: pointer;
+						white-space: nowrap;
+						/* #endif */
+						margin-left: -1px;
+						display: flex;
+					}
+
+					.page-num {
+						display: flex;
+						flex-direction: row;
+					}
+
+					.pag-btn.active {
+						background-color: #1989FA;
+						color: #FFFFFF !important;
+					}
+
+					.pag-btn.btn-ban {
+						color: #C0C4CC !important;
+						/* #ifndef APP-NVUE */
+						cursor: not-allowed;
+						/* #endif */
+					}
+
+					.ellipsis-btn {
+						padding: 0 1px;
+						color: #999999;
+						/* #ifndef APP-NVUE */
+						cursor: auto;
+						/* #endif */
+					}
+
+					.pag-btn.start,
+					.pag-btn.prev,
+					.pag-btn.next,
+					.pag-btn.end,
+					.pag-btn .icon-more {
+						padding: 0 7px;
+					}
+
+					.icon-left,
+					.icon-right {
+						font-size: 13px;
+					}
+
+					.icon-left1,
+					.icon-right1 {
+						font-size: 17px;
+					}
+
+					// 简单模式
+					.page-num.simple {
+						padding: 0 40px;
+						line-height: 34px;
+						color: #303133;
+						font-size: 16px;
+					}
+				}
+			}
+		}
+
+		// 无边框模式
+		.no-border .page-scroll .page-scroll-child {
+			.pag-btn {
+				/* #ifndef APP-NVUE */
+				border: none;
+				background: none;
+				/* #endif */
+				/* #ifdef APP-NVUE */
+				border: rgba(255, 255, 255, 0);
+				background-color: rgba(255, 255, 255, 0);
+				/* #endif */
+			}
+
+			.pag-btn.active {
+				border-radius: 4px;
+			}
+
+			.pag-btn.start,
+			.pag-btn.prev,
+			.pag-btn.next,
+			.pag-btn.end {
+				background-color: #F0F0F0 !important;
+				border-radius: 4px;
+				margin: 0 3px;
+			}
+
+			.page-num {
+				margin: 0 3px;
+			}
+		}
+
+		// 移动端
+		.mobile-page {
+			display: flex;
+			justify-content: center;
+			flex-direction: row;
+			align-items: center;
+			line-height: 28px;
+			margin-top: 5px;
+		}
+
+		/* 附加功能样式 */
+		// 总条数
+		.page-total {
+			display: flex;
+			color: $font-color;
+			font-size: $font-size;
+			margin: 0 5px;
+			/* #ifndef APP-NVUE */
+			white-space: nowrap;
+			/* #endif */
+		}
+
+		// 每页条数
+		.page-limit {
+			margin: 0 5px;
+			display: flex;
+			align-items: center;
+			position: relative;
+			/* #ifndef APP-NVUE */
+			white-space: nowrap;
+			/* #endif */
+
+			.page-input {
+				@include page-input;
+				/* #ifndef APP-NVUE */
+				outline: none;
+				/* #endif */
+				padding: 0 18px 0 6px;
+				display: flex;
+			}
+
+			.icon-left {
+				position: absolute;
+				right: 3px;
+				top: 1px;
+				color: #C0C4CC;
+				font-size: 12px;
+				font-weight: 100;
+				transform: rotate(-90deg);
+			}
+		}
+
+		// 跳转页码
+		.page-go {
+			color: $font-color;
+			font-size: $font-size;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			margin: 0 5px;
+			/* #ifndef APP-NVUE */
+			white-space: nowrap;
+			/* #endif */
+
+			.page-input {
+				@include page-input;
+				width: 46px;
+				margin: 0 5px;
+			}
+
+			.page-input-btn {
+				@include page-input;
+				padding: 0 10px;
+				margin-left: 5px;
+			}
+		}
+
+		// 自定义页码信息
+		.custom-info {
+			margin: 0 10px;
+			color: $font-color;
+			font-size: $font-size;
+		}
+	}
+
+	// 大号模式
+	.page-pagination.size-large .page-con .page-scroll-child {
+		height: 40px;
+		line-height: 38px;
+
+		.pag-btn {
+			padding: 0 15px;
+			font-size: 15px;
+		}
+
+		.pag-btn.start,
+		.pag-btn.prev,
+		.pag-btn.next,
+		.pag-btn.end,
+		.ellipsis-btn {
+			padding: 0 12px;
+		}
+
+		.pag-btn.btn-text {
+			padding: 0 6px;
+		}
+
+		.icon-left,
+		.icon-right {
+			font-size: 15px;
+		}
+
+		.icon-left1,
+		.icon-right1 {
+			font-size: 19px;
+		}
+	}
+
+	// 小号按钮
+	.page-pagination.size-small .page-con .page-scroll-child {
+		height: 24px;
+		line-height: 22px;
+
+		.pag-btn {
+			padding: 0 7px;
+		}
+
+		.pag-btn.start,
+		.pag-btn.prev,
+		.pag-btn.next,
+		.pag-btn.end {
+			padding: 0 5px;
+		}
+
+		.ellipsis-btn {
+			padding: 0 5px;
+		}
+
+		.icon-left,
+		.icon-right {
+			font-size: 12px;
+		}
+
+		.icon-left1,
+		.icon-right1 {
+			font-size: 15px;
+		}
+	}
+
+	/* #ifndef APP-NVUE */
+	.page-pagination .pc-page {
+		display: none;
+	}
+
+	.page-pagination .mobile-page {
+		display: flex;
+	}
+
+	@media screen and (min-width: 450px) {
+		.page-pagination .pc-page {
+			display: block;
+		}
+
+		.page-pagination .mobile-page {
+			display: none;
+		}
+	}
+
+	/* #endif */
+</style>

package/components/page-pagination/readme.md

@@ -0,0 +1,136 @@
+## 分页器
+### 简单介绍
+- 组件需要依赖 sass 插件 ，请自行安装；
+- 可自定义显示分页信息，如总条数，每页条数等；
+- 欢迎大家下载使用，项目源码示例：[https://gitee.com/lunc9932/pagination](https://gitee.com/lunc9932/pagination)
+- 若有插件导入失败，重启编辑器；
+
+### API
+#### 属性说明
+| 属性名           | 类型      | 默认值   | 说明              |
+|---------------|---------|---------|-----------------------|
+| total         | Number  | 0       | 数据总条数             |
+| pageSize      | Number  | 10      | 每页显示条数           |
+| currentPage   | Number  | 1       | 当前页数               |
+| mode          | String  | multi   | 显示模式，可选值：multi / simple<br>multi：标准模式；simple：简单模式，只显示当前页/总页数  |
+| btnText       | Boolean | false   | 上页、下页、首页和尾页是否使用汉字，默认使用箭头表示  |
+| numAround     | Boolean | false   | 是否保留页码中的第一页和最后一个，为true时不再显示首页和尾页，且中间默认使用省略号    |
+| forceEllipses | Boolean | false   | 总页码数 超过`showPageSize`时，两端页码是否显示省略号   |
+| showPageSize  | Number  | 5       | 显示的页码个数，当使用`numAround`和`forceEllipses`属性时，中间显示的页码个数将 减2   |
+| size          | String  | normal  | 按钮大小，可选值：large / normal / small<br>large：大号按钮；normal：普通按钮(默认)；small：小型按钮    |
+| color         | String  | #1989FA | 自定义按钮文字颜色   |
+| showBorder    | Boolean | true    | 是否显示按钮页码边框     |
+| layout        | String  | first,prev,page,next,last    | 自定义分页排版，是否显示 总条数(total)、首页(first)、上页(prev)、页码(page)、下页(next)、尾页(last)、每页条数选项(limit)和页码跳转(jumper)，中间用英文逗号分隔     |
+| trigger       | String  | blur    | 页码input输入框跳转页码触发方式，当`layout`值中包含 jumper 此项才生效，可选值：blur / click<br>blur：失去焦点时触发(不显示跳转按钮)；click：点击跳转按钮触发   |
+| pageSizes     | Array   | [10, 20, 50]      | 每页条数选项预设值，可选择每页条数，当`layout`值中包含 limit 此项才生效        |
+
+注意：
+1. 当`showPageSize`属性数值过大时，可能会出现横向滚动条；
+2. 当`showPageSize`属性数值小于3，且`forceEllipses`或`numAround`为 true 时，中间页码将无法显示；
+3. 只有当 总页码数 超过`showPageSize`，且属性`forceEllipses`或`numAround`为 true 时，省略号才能显示出来；
+4. `layout`分页排版，同样可自定义分页信息显示顺序；
+5. 自定义分页信息只需在`<page-pagination>`标签内自定义即可，并不需要写属性；
+6. **原`showAround`(是否显示首尾页)、`showPageInfo`(是否显示分页信息)和`showGoPage`(是否显示input输入框)属性已失效，功能已合并到`layout`属性中；**
+7. 由于移动端屏幕宽度限制，total、limit和jumper 将显示在页码的下面；PC端(>=450px，可自行在组件样式中修改)显示一行且按照`layout`属性中的顺序显示；
+8. 总条数(total)和当前页数(currentPage)是可以动态改变的，请参考项目示例；
+
+#### 事件说明
+| 事件名        | 说明                | 返回值                            |
+|--------------|---------------------|-----------------------------------|
+| @change      | 页码改变时触发       | 返回值e={currentPage(Number),type(String)}，currentPage：当前页；type：点击的类型，详细见下面说明      |
+| @sizeChange  | 切换每页条数选项预设值 改变`pageSize`时触发| 返回值e={pageSize(Number)}，pageSize：每页条数                              |
+
+##### type返回类型
+| 类型     | 说明 |
+| -------- | ---- |
+| page     | 表示点击的是页码 |
+| prev     | 点击的是上页 |
+| next     | 点击的是下页 |
+| homePage | 点击的是首页 |
+| endPage  | 点击的是尾页 |
+| goPage   | 页码input输入框触发 |
+
+注意：
+1. 重复点击同一个页码，不会触发 change 事件，避免不必要的刷新；
+
+### 基本用法
+在`template`中使用组件
+
+```
+<view class="example-con">总页数：{{page.total}}，当前第{{page.currentPage}}页</view>
+<view class="example-btn">
+  <view @click="changeTotal">更改总页数555条</view>
+  <view style="margin-left: 50px;" @click="changeCurrentPage">更改到第3页</view>
+</view>
+
+<view class="title">默认</view>
+<page-pagination :total="page.total" :pageSize="page.pageSize" :currentPage="page.currentPage"
+  @change="change"></page-pagination>
+
+<view class="title">简单模式（mode="simple"）</view>
+<page-pagination :total="page.total" mode="simple"></page-pagination>
+
+<view class="title">无边框（showBorder="false"）</view>
+<page-pagination :total="page.total" :currentPage="page.currentPage" :showBorder="false"></page-pagination>
+
+<view class="title">使用汉字表示(btnText)及显示省略号(forceEllipses)</view>
+<page-pagination :total="page.total" :btnText="true" :forceEllipses="true"></page-pagination>
+
+<view class="title">保留页码中的第一页和最后一页(numAround)</view>
+<page-pagination :total="page.total" :numAround="true" :showBorder="false"></page-pagination>
+
+<view class="title">附加功能(总条数、每页条数 及 页码跳转)(layout)</view>
+<page-pagination :total="page.total" layout="total,first,prev,page,next,last,limit,jumper"></page-pagination>
+
+<view class="title">附加功能自定义显示分页项及排列顺序 和<br>自定义每页显示个数选择器的选项设置(pageSizes)</view>
+<page-pagination class="test-pagination" :numAround="true" :total="page.total" layout="page,prev,next,limit,total"
+  :pageSizes="[10,50,60,100]" @sizeChange="sizeChange">
+</page-pagination>
+
+<view class="title">自定义显示分页信息</view>
+<page-pagination :total="page.total" :pageSize="page.pageSize" :showBorder="false" :numAround="true">
+  <view>total：{{page.total}}，pageSize：{{page.pageSize}}</view>
+</page-pagination>
+
+<view class="title">大号按钮(size="large")</view>
+<page-pagination :total="page.total" :showBorder="false" :showPageSize="4" size="large"></page-pagination>
+
+<view class="title">小型按钮(size="small")</view>
+<page-pagination :total="page.total" :showBorder="false" :showPageSize="6" size="small"></page-pagination>
+
+<view class="title">自定义颜色(color="#F56C6C")</view>
+<page-pagination :total="page.total" :forceEllipses="true" :btnText="true" color="#F56C6C"></page-pagination>
+<page-pagination :total="page.total" :forceEllipses="true" :btnText="true" color="#67C23A"></page-pagination>
+<page-pagination :total="page.total" :forceEllipses="true" :btnText="true" color="#FF00E3"></page-pagination>
+```
+在`script`中使用
+
+```
+export default {
+  data() {
+    return {
+      page: {
+        total: 10000,
+        pageSize: 50,
+        currentPage: 2
+      }
+    }
+  },
+  methods: {
+    change(currentPage, type) { // 当前页改变
+      this.page.currentPage = currentPage;
+      console.log("点击了" + type + "，当前页：" + currentPage);
+    },
+    sizeChange(pageSize) { // 每页条数改变
+      this.page.pageSize = pageSize;
+      console.log("每页", pageSize, "条");
+    },
+    changeTotal() { // 更改总条数
+      this.page.total = 555
+    },
+    changeCurrentPage() { // 更改当前页
+      this.page.currentPage = 3
+    }
+  }
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@zscreate/zhxy-app-component",
-	"version": "1.0.319",
+	"version": "1.0.320-test.3",
 	"private": false,
 	"description": "zhxy-app-component",
 	"main": "index.js",