shelfList.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. <template>
  2. <view class="moreShelfPart flex flex_column">
  3. <view class="moreShelfPart-search">
  4. <u-search
  5. placeholder="请输入货架名称搜索"
  6. v-model="shelfName"
  7. :show-action="false"
  8. @input="$u.debounce(getShelfList, 800)"
  9. @custom="$u.debounce(getShelfList, 500)"
  10. @search="$u.debounce(getShelfList, 500)"
  11. @clear="clearSearch"
  12. :action-style="{'color': '#fff', 'font-size': '24upx', 'background-color': '#57a3f3', 'border-radius': '6upx', 'padding': '12upx 0'}">
  13. </u-search>
  14. </view>
  15. <view class="moreShelfPart-body">
  16. <scroll-view
  17. class="nav-right"
  18. scroll-y
  19. @scrolltolower="onreachBottom">
  20. <u-checkbox-group wrap class="nav-right-item" @change="checkboxGroupChange">
  21. <u-checkbox
  22. v-model="item.checked"
  23. v-for="(item, index) in shelfList"
  24. :key="item.shelfSn"
  25. :name="item.shelfSn"
  26. >{{item.shelfName}}</u-checkbox>
  27. </u-checkbox-group>
  28. <view v-if="shelfList&&shelfList.length==0">
  29. <u-empty v-if="status!='loading'" :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="180" :text="noDataText" mode="list" :margin-top="50"></u-empty>
  30. </view>
  31. <view style="padding: 20upx;" v-else>
  32. <u-loadmore :status="status" />
  33. </view>
  34. </scroll-view>
  35. </view>
  36. <view class="batchPrint-manualPrint-footer">
  37. <view style="color: #999;">
  38. 已选 {{checkList.length}} 个货架
  39. </view>
  40. <view>
  41. <u-button class="handle-btn" :loading="loading" shape="circle" size="medium" hover-class="none" @click="resetForm">重置</u-button>
  42. <u-button class="handle-btn" :loading="loading" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="submit">确定</u-button>
  43. </view>
  44. </view>
  45. </view>
  46. </template>
  47. <script>
  48. import { getShelfList } from '@/api/shelf'
  49. export default {
  50. props: {
  51. checkEdList: { // 默认查询条件
  52. type: Array,
  53. default: () => {
  54. return []
  55. }
  56. },
  57. },
  58. data() {
  59. return {
  60. shelfName: '',
  61. isGobleSearch: false,
  62. shelfList: [],
  63. pageNo:1,
  64. pageSize: 1000,
  65. total: 0, // 列表总数
  66. noDataText: '暂无货架',
  67. status: 'loading',
  68. tempData: null,
  69. allChecked: false,
  70. customBtnStyle: { // 自定义按钮样式
  71. borderColor: this.$config('primaryColor'),
  72. backgroundColor: this.$config('primaryColor'),
  73. color: '#fff'
  74. },
  75. checkList: [],
  76. loading: false
  77. }
  78. },
  79. mounted() {
  80. this.clearSearch()
  81. this.checkList = this.checkEdList
  82. },
  83. methods: {
  84. checkboxGroupChange(e) {
  85. console.log(e);
  86. this.getChecked()
  87. },
  88. clearSearch(){
  89. this.shelfName = ''
  90. this.pageNo = 1
  91. this.total = 0
  92. this.shelfList = []
  93. this.getShelfList()
  94. },
  95. resetForm(){
  96. this.checkList = []
  97. this.$emit("ok", [])
  98. },
  99. getChecked(){
  100. const ret = this.shelfList.filter(item => item.checked)
  101. const list = []
  102. ret.map(item => {
  103. list.push(item.shelfSn)
  104. })
  105. this.checkList = list
  106. return list
  107. },
  108. submit(){
  109. this.$emit("ok", this.getChecked())
  110. },
  111. setChecked(){
  112. this.shelfList.map(item => {
  113. item.checked = this.checkEdList.find(k => k == item.shelfSn) ? true : false
  114. })
  115. },
  116. // 获取数字货架列表
  117. getShelfList(){
  118. const _this = this
  119. if(this.shelfName == ''){
  120. this.pageNo = 1
  121. this.total = 0
  122. }
  123. let params = {
  124. pageNo: this.pageNo,
  125. pageSize: this.pageSize,
  126. shelfName: this.shelfName
  127. }
  128. _this.status = 'loading'
  129. getShelfList(params).then(res => {
  130. uni.hideLoading()
  131. if(res.status == 200){
  132. let list = res.data.list
  133. if (list && list.length){
  134. // 分页 拼接数据
  135. if(_this.pageNo>1){
  136. _this.shelfList = _this.shelfList.concat(res.data.list || [])
  137. }else{
  138. _this.shelfList = res.data.list
  139. }
  140. _this.total = res.data.count
  141. console.log(res.data.count)
  142. if (_this.shelfList.length == res.data.count) {
  143. _this.status = 'nomore'
  144. } else {
  145. _this.status = 'loadmore'
  146. }
  147. } else {
  148. _this.shelfList = list || []
  149. _this.total = 0
  150. _this.status = 'nomore'
  151. _this.noDataText = '没有查询到相关货架'
  152. }
  153. _this.noDataText = '暂无货架'
  154. _this.setChecked()
  155. }else{
  156. _this.status = 'loadmore'
  157. _this.shelfList = []
  158. _this.total = 0
  159. _this.noDataText = res.message ? res.message : '网络似乎出错了,请稍后再试'
  160. }
  161. })
  162. },
  163. // 加载更多
  164. onreachBottom () {
  165. if(this.shelfList.length < this.total ){
  166. if(this.isGobleSearch&&this.shelfName==''){
  167. return
  168. }
  169. this.pageNo++
  170. this.getShelfList()
  171. }else{
  172. this.status = "nomore"
  173. }
  174. },
  175. }
  176. }
  177. </script>
  178. <style lang="less">
  179. .moreShelfPart{
  180. width: 100%;
  181. height: calc(100vh - 120rpx) ;
  182. .moreShelfPart-search{
  183. padding: 0 20rpx;
  184. background-color: #FFFFFF;
  185. }
  186. .moreShelfPart-body{
  187. flex-grow: 1;
  188. background-color: #fff;
  189. }
  190. .nav-right{
  191. padding: 0 20upx;
  192. height: calc(100vh - 250rpx);
  193. box-sizing: border-box;
  194. .nav-right-item{
  195. /deep/ .u-checkbox{
  196. border-bottom: 1rpx solid #f8f8f8;
  197. padding: 20upx 10upx;
  198. }
  199. /deep/ .u-checkbox__label{
  200. flex-grow: 1;
  201. margin-right: 0;
  202. }
  203. }
  204. }
  205. .batchPrint-manualPrint-footer{
  206. padding: 10upx;
  207. background-color: #fff;
  208. width: 100%;
  209. display: flex;
  210. align-items: center;
  211. justify-content: space-between;
  212. border-top: 1rpx solid #f8f8f8;
  213. > view{
  214. &:first-child{
  215. flex-grow: 1;
  216. width: 40%;
  217. font-size: 24rpx;
  218. }
  219. &:last-child{
  220. width: 60%;
  221. display: flex;
  222. justify-content: space-between;
  223. align-items: center;
  224. .handle-btn{
  225. width: 50%;
  226. margin-right: 15rpx;
  227. }
  228. }
  229. }
  230. }
  231. }
  232. </style>