shelfList.vue 6.1 KB

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