shelfList.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  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. const ret = this.getChecked()
  110. let shelfName = ''
  111. if(ret.length == 1){
  112. shelfName = this.shelfList.find(item => item.shelfSn == ret[0]).shelfName
  113. }
  114. this.$emit("ok", ret, shelfName)
  115. },
  116. setChecked(){
  117. this.shelfList.map(item => {
  118. item.checked = this.checkEdList.find(k => k == item.shelfSn) ? true : false
  119. })
  120. },
  121. // 获取数字货架列表
  122. getShelfList(){
  123. const _this = this
  124. if(this.shelfName == ''){
  125. this.pageNo = 1
  126. this.total = 0
  127. }
  128. let params = {
  129. pageNo: this.pageNo,
  130. pageSize: this.pageSize,
  131. shelfName: this.shelfName
  132. }
  133. _this.status = 'loading'
  134. getShelfList(params).then(res => {
  135. uni.hideLoading()
  136. if(res.status == 200){
  137. let list = res.data.list
  138. if (list && list.length){
  139. // 分页 拼接数据
  140. if(_this.pageNo>1){
  141. _this.shelfList = _this.shelfList.concat(res.data.list || [])
  142. }else{
  143. _this.shelfList = res.data.list
  144. }
  145. _this.total = res.data.count
  146. console.log(res.data.count)
  147. if (_this.shelfList.length == res.data.count) {
  148. _this.status = 'nomore'
  149. } else {
  150. _this.status = 'loadmore'
  151. }
  152. } else {
  153. _this.shelfList = list || []
  154. _this.total = 0
  155. _this.status = 'nomore'
  156. _this.noDataText = '没有查询到相关货架'
  157. }
  158. _this.noDataText = '暂无货架'
  159. _this.setChecked()
  160. }else{
  161. _this.status = 'loadmore'
  162. _this.shelfList = []
  163. _this.total = 0
  164. _this.noDataText = res.message ? res.message : '网络似乎出错了,请稍后再试'
  165. }
  166. })
  167. },
  168. // 加载更多
  169. onreachBottom () {
  170. if(this.shelfList.length < this.total ){
  171. if(this.isGobleSearch&&this.shelfName==''){
  172. return
  173. }
  174. this.pageNo++
  175. this.getShelfList()
  176. }else{
  177. this.status = "nomore"
  178. }
  179. },
  180. }
  181. }
  182. </script>
  183. <style lang="less">
  184. .moreShelfPart{
  185. width: 100%;
  186. height: calc(100vh - 120rpx) ;
  187. .moreShelfPart-search{
  188. padding: 0 20rpx;
  189. background-color: #FFFFFF;
  190. }
  191. .moreShelfPart-body{
  192. flex-grow: 1;
  193. background-color: #fff;
  194. }
  195. .nav-right{
  196. padding: 0 20upx;
  197. height: calc(100vh - 250rpx);
  198. box-sizing: border-box;
  199. .nav-right-item{
  200. /deep/ .u-checkbox{
  201. border-bottom: 1rpx solid #f8f8f8;
  202. padding: 20upx 10upx;
  203. }
  204. /deep/ .u-checkbox__label{
  205. flex-grow: 1;
  206. margin-right: 0;
  207. }
  208. }
  209. }
  210. .batchPrint-manualPrint-footer{
  211. padding: 10upx;
  212. background-color: #fff;
  213. width: 100%;
  214. display: flex;
  215. align-items: center;
  216. justify-content: space-between;
  217. border-top: 1rpx solid #f8f8f8;
  218. > view{
  219. &:first-child{
  220. flex-grow: 1;
  221. width: 40%;
  222. font-size: 24rpx;
  223. }
  224. &:last-child{
  225. width: 60%;
  226. display: flex;
  227. justify-content: space-between;
  228. align-items: center;
  229. .handle-btn{
  230. width: 50%;
  231. margin-right: 15rpx;
  232. }
  233. }
  234. }
  235. }
  236. }
  237. </style>