chooseProduct.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418
  1. <template>
  2. <view class="content flex flex_column">
  3. <view class="searchBar">
  4. <view class="p-title flex align_center">
  5. <text></text>
  6. <view class="shelfName">
  7. <view>{{nowData.shelfName}}</view>
  8. </view>
  9. <view class="btns" @click="showTab = true">筛选<u-icon size="20" name="arrow-down"></u-icon></view>
  10. </view>
  11. <view class="search flex align_center">
  12. <view class="input">
  13. <u-search
  14. v-model="queryWord"
  15. @custom="getpartList"
  16. @search="getpartList"
  17. @clear="clearSearch"
  18. @input="$u.debounce(changeSearch, 800)"
  19. bg-color="#fff"
  20. :show-action="false"
  21. placeholder="请输入产品编码或名称搜索"></u-search>
  22. </view>
  23. <view class="icon" @click="toScan">
  24. <u-icon name="scan"></u-icon>
  25. </view>
  26. </view>
  27. </view>
  28. <view class="check-list">
  29. <productList ref="productList" noDataText="暂无产品" @updateNums="updateNums" @allChecked="allCheckedCallback"></productList>
  30. </view>
  31. <!-- 底部栏 -->
  32. <view class="footer-bar flex align_center" v-if="partList.length">
  33. <view class="f-left">
  34. <u-checkbox size="40" @change="allCheckeChange" v-model="allChecked" shape="circle">{{allChecked?'取消全选':'全选'}}</u-checkbox>
  35. </view>
  36. <view class="f-mid">
  37. <view v-if="totalCategory">
  38. 已选<text>{{totalCategory}}</text>款产品
  39. </view>
  40. </view>
  41. <view class="f-btns">
  42. <u-button size="medium" @click="submitOrder" :custom-style="customBtnStyle" shape="circle" type="primary" hover-class="none" >确定选择</u-button>
  43. </view>
  44. </view>
  45. <!-- 筛选项 -->
  46. <u-popup v-model="showTab" mode="right" width="70%">
  47. <view class="tabBox flex flex_column">
  48. <view class="tabs">
  49. <u-checkbox-group wrap @change="checkboxGroupChange">
  50. <u-checkbox
  51. v-model="item.checked"
  52. v-for="(item, index) in queryKeys" :key="index"
  53. :name="item.code"
  54. >{{item.name}}</u-checkbox>
  55. </u-checkbox-group>
  56. </view>
  57. <view class="btns">
  58. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" @click="handleClear">重置</u-button>
  59. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="changeSearch">查询</u-button>
  60. </view>
  61. </view>
  62. </u-popup>
  63. </view>
  64. </template>
  65. <script>
  66. import { queryProductListForReplenish } from '@/api/shelf'
  67. import { saveMainAndDetail } from '@/api/shelfReplenish'
  68. import productList from './productList.vue'
  69. import { clzConfirm } from '@/libs/tools'
  70. export default {
  71. components: {
  72. productList
  73. },
  74. data() {
  75. return {
  76. queryWord: '',
  77. nowData:null,
  78. detail:null,
  79. pageNo:1,
  80. pageSize: 20,
  81. total: 0, // 列表总数
  82. noDataText: '暂无产品',
  83. status: 'loading',
  84. partList: [],
  85. allChecked: false,
  86. showTab: false,
  87. customBtnStyle: { // 自定义按钮样式
  88. borderColor: this.$config('primaryColor'),
  89. backgroundColor: this.$config('primaryColor'),
  90. color: '#fff'
  91. },
  92. orderTotal: 0,
  93. chooseList: [],
  94. tempData: null,
  95. queryKeys: [
  96. {
  97. name: '库存充足',
  98. code: 'stockEnough',
  99. checked: false
  100. },
  101. {
  102. name: '部分缺货',
  103. code: 'portionStockout',
  104. checked: false
  105. },
  106. {
  107. name: '全部缺货',
  108. code: 'allStockout',
  109. checked: false
  110. }
  111. ],
  112. stockStateList:[]
  113. }
  114. },
  115. onNavigationBarButtonTap(e) {
  116. if(e.index == 0){
  117. uni.navigateTo({
  118. url: '/pages/stockCheck/checkRecord?shelfSn='+this.nowData.shelfSn
  119. })
  120. }
  121. },
  122. onBackPress(e) {
  123. if(this.showTab) {
  124. this.showTab = false;
  125. return true;
  126. }
  127. },
  128. onLoad(opts) {
  129. this.nowData = JSON.parse(decodeURIComponent(opts.data));
  130. this.getpartList()
  131. },
  132. computed: {
  133. totalCategory () {
  134. return this.chooseList.length
  135. },
  136. },
  137. methods: {
  138. checkboxGroupChange(e) {
  139. this.stockStateList = e
  140. },
  141. // 单击全选
  142. allCheckeChange(e){
  143. this.$refs.productList.allSelect(e.value)
  144. const list = this.$refs.productList.getAllData()
  145. list.map(item => {
  146. this.allCheckedCallback(true,item)
  147. })
  148. },
  149. // 选中事件
  150. allCheckedCallback(isAllChecked,row){
  151. console.log(isAllChecked,row)
  152. const has = this.chooseList.findIndex(k => k.id == row.id)
  153. // 在已选列表中
  154. if(has>=0){
  155. // 取消选中
  156. if(!row.checked){
  157. this.chooseList.splice(has,1)
  158. }
  159. }else{
  160. // 不在已选列表中,添加
  161. if(row.checked){
  162. this.chooseList.push(row)
  163. }
  164. }
  165. // 是否全选
  166. this.allChecked = isAllChecked
  167. },
  168. // 清空已选数据
  169. clearChoose(){
  170. this.chooseList = []
  171. this.allChecked = false
  172. if(this.$refs.productList){
  173. this.$refs.productList.allSelect(false)
  174. }
  175. },
  176. updateNums(){
  177. this.chooseList = this.$refs.productList.getAllChecked()
  178. },
  179. clearSearch(){
  180. this.queryWord = ''
  181. this.changeSearch()
  182. },
  183. handleClear(){
  184. this.stockStateList = []
  185. this.queryKeys.map(item => item.checked = false)
  186. this.changeSearch()
  187. },
  188. changeSearch(){
  189. this.pageNo = 1
  190. this.partList = []
  191. this.getpartList()
  192. },
  193. // 获取数字货架列表
  194. getpartList(){
  195. const _this = this
  196. let params = {
  197. shelfSn: this.nowData.shelfSn,
  198. queryWord: this.queryWord,
  199. stockStateList: this.stockStateList
  200. }
  201. uni.showLoading({
  202. mask:true,
  203. title:"正在加载..."
  204. })
  205. queryProductListForReplenish(params).then(res => {
  206. if(res.status == 200){
  207. let list = res.data
  208. if (list && list.length){
  209. _this.partList = list
  210. } else {
  211. _this.partList = list || []
  212. }
  213. }else{
  214. _this.partList = []
  215. }
  216. this.showTab = false
  217. // 赋值
  218. if(_this.nowData.chooseKey.length){
  219. _this.partList = _this.partList.filter(item => {
  220. const row = _this.nowData.chooseKey.findIndex(k => k == item.id)
  221. return !(row>=0)
  222. })
  223. }
  224. // 已选
  225. _this.partList.map(item => {
  226. const row = _this.chooseList.find(k => k.id == item.id)
  227. item.checked = !!row
  228. })
  229. this.$refs.productList.setData(_this.partList)
  230. setTimeout(()=>{
  231. uni.hideLoading()
  232. },_this.partList.length*40)
  233. })
  234. },
  235. // 提交
  236. submitOrder(){
  237. if(this.totalCategory){
  238. if(this.nowData.chooseKey.length){
  239. uni.$emit("chooseDbhProduct",this.chooseList)
  240. uni.navigateBack()
  241. }else{
  242. this.$store.state.vuex_tempData = this.chooseList
  243. uni.redirectTo({
  244. url: "/pages/soldOut/creatOrder?data="+encodeURIComponent(JSON.stringify(this.nowData))
  245. })
  246. }
  247. }else{
  248. uni.showToast({
  249. icon: 'none',
  250. title: '请选择产品'
  251. })
  252. }
  253. },
  254. // 扫描
  255. toScan(){
  256. this.mpaasScanModule = uni.requireNativePlugin("wss-scan")
  257. this.mpaasScanModule.scan(
  258. {
  259. "scanMode":"Customized",
  260. "scanStyle":{
  261. "scanFrameSizePlus":{"width":250,"height":250},
  262. "scanFrameSize":200,
  263. "scanLight":"visible",
  264. "scanText":"对准条形码/二维码进行识别",
  265. "scanTitle":"扫码搜索货位产品",
  266. }
  267. },
  268. (result) => {
  269. if(result.scanStatus == 1){
  270. this.scanResult(result)
  271. }
  272. })
  273. },
  274. // 扫描结果
  275. scanResult(data){
  276. // 二维码
  277. if(data.scanType == 'QRCODE'){
  278. const ret = data.scanValue.split("&")
  279. this.queryWord = ret[1] // 产品编码
  280. }else{
  281. this.queryWord = data.scanValue
  282. }
  283. this.stockStateList = []
  284. this.getpartList()
  285. }
  286. }
  287. }
  288. </script>
  289. <style lang="less">
  290. .content{
  291. height: 100vh;
  292. width: 100%;
  293. background: #fff;
  294. .searchBar{
  295. padding: 0 0.8rem 0.3rem;
  296. .p-title{
  297. padding: 0 15rpx;
  298. display: flex;
  299. align-items: center;
  300. color: #222;
  301. font-size: 30rpx;
  302. > text{
  303. display: block;
  304. height: 30rpx;
  305. width: 6rpx;
  306. background: #0485F6;
  307. margin-right: 10rpx;
  308. border-radius: 10rpx;
  309. }
  310. .shelfName{
  311. flex-grow: 1;
  312. font-weight: bold;
  313. width: 80%;
  314. > view{
  315. overflow: hidden;
  316. white-space: nowrap;
  317. text-overflow: ellipsis;
  318. }
  319. }
  320. .btns{
  321. width:100rpx;
  322. text-align: right;
  323. font-size: 28rpx;
  324. color: #0485F6;
  325. }
  326. }
  327. .search{
  328. margin-top: 15upx;
  329. padding: 0.1rem;
  330. border-radius: 50rpx;
  331. border:1rpx solid #eee;
  332. .input{
  333. flex-grow: 1;
  334. padding: 4rpx;
  335. }
  336. .icon{
  337. width: 13%;
  338. text-align: center;
  339. font-size: 46rpx;
  340. color: #999;
  341. }
  342. }
  343. }
  344. .check-list{
  345. padding: 0 0.8rem;
  346. flex-grow: 1;
  347. overflow: auto;
  348. }
  349. .footer-bar{
  350. background-color: #f8f8f8;
  351. padding: 20upx;
  352. .f-left{
  353. color: #fff;
  354. }
  355. .active{
  356. background-color: #0485F6;
  357. }
  358. .f-mid{
  359. flex-grow: 1;
  360. color: #666;
  361. > view{
  362. padding: 0 5upx;
  363. &:first-child{
  364. text{
  365. color: red;
  366. }
  367. }
  368. &:last-child{
  369. font-size: 0.8rem;
  370. }
  371. }
  372. }
  373. .f-btns{
  374. button{
  375. width: 200upx;
  376. }
  377. }
  378. }
  379. // 筛选
  380. .tabBox{
  381. height: 100vh;
  382. .tabs{
  383. overflow: auto;
  384. padding: 20rpx;
  385. > view{
  386. flex-wrap: wrap;
  387. justify-content: space-between;
  388. > view{
  389. width: 98%;
  390. border: 1rpx solid #eee;
  391. padding: 15rpx;
  392. border-radius: 50rpx;
  393. text-align: center;
  394. margin-bottom: 15rpx;
  395. /deep/ .u-checkbox__label{
  396. flex-grow: 1;
  397. }
  398. }
  399. &:first-child{
  400. > view{
  401. width: 100%;
  402. }
  403. }
  404. }
  405. }
  406. .btns{
  407. display: flex;
  408. padding: 40upx 20upx 20upx;
  409. justify-content: space-between;
  410. .handle-btn {
  411. font-size: 28upx;
  412. }
  413. }
  414. }
  415. }
  416. </style>