shelfList.vue 6.0 KB

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