chooseProduct.vue 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412
  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. console.log(e);
  140. this.stockStateList = e
  141. },
  142. // 全选
  143. allCheckeChange(e){
  144. this.$refs.productList.allSelect(e.value)
  145. this.chooseList = this.$refs.productList.getAllChecked()
  146. },
  147. allCheckedCallback(val){
  148. this.allChecked = val
  149. this.chooseList = this.$refs.productList.getAllChecked()
  150. },
  151. // 创建补货单
  152. creatOrder(data){
  153. uni.showLoading({
  154. title:"正在保存.."
  155. })
  156. stockCheckSave({
  157. shelfSn: this.nowData.shelfSn,
  158. totalCategory: this.nowData.totalCategory,
  159. totalStockQty: this.nowData.totalStockQty,
  160. totalFreezeQty: this.nowData.totalFreezeQty
  161. }).then(res => {
  162. if(res.status == 200){
  163. this.detail = res.data || null
  164. this.stockCheckSn = res.data.stockCheckSn
  165. }else{
  166. uni.hideLoading()
  167. }
  168. })
  169. },
  170. // 清空已选数据
  171. clearChoose(){
  172. this.chooseList = []
  173. this.allChecked = false
  174. if(this.$refs.productList){
  175. this.$refs.productList.allSelect(false)
  176. }
  177. },
  178. updateNums(){
  179. this.chooseList = this.$refs.productList.getAllChecked()
  180. },
  181. clearSearch(){
  182. this.queryWord = ''
  183. this.changeSearch()
  184. },
  185. handleClear(){
  186. this.stockStateList = []
  187. this.queryKeys.map(item => item.checked = false)
  188. this.changeSearch()
  189. },
  190. changeSearch(){
  191. this.pageNo = 1
  192. this.partList = []
  193. this.getpartList()
  194. },
  195. // 获取数字货架列表
  196. getpartList(){
  197. const _this = this
  198. let params = {
  199. shelfSn: this.nowData.shelfSn,
  200. queryWord: this.queryWord,
  201. stockStateList: this.stockStateList
  202. }
  203. _this.clearChoose()
  204. _this.partList = []
  205. _this.$refs.productList && _this.$refs.productList.setData(_this.partList)
  206. _this.status = 'loading'
  207. uni.showLoading({
  208. mask:true,
  209. title:"正在加载..."
  210. })
  211. queryProductListForReplenish(params).then(res => {
  212. if(res.status == 200){
  213. let list = res.data
  214. if (list && list.length){
  215. _this.partList = list
  216. } else {
  217. _this.partList = list || []
  218. }
  219. }else{
  220. _this.partList = []
  221. }
  222. this.showTab = false
  223. // 赋值
  224. if(_this.nowData.chooseKey.length){
  225. _this.partList = _this.partList.filter(item => {
  226. const row = _this.nowData.chooseKey.findIndex(k => k == item.id)
  227. return !(row>=0)
  228. })
  229. }
  230. this.$refs.productList.setData(_this.partList)
  231. setTimeout(()=>{
  232. uni.hideLoading()
  233. },_this.partList.length*40)
  234. })
  235. },
  236. // 提交
  237. submitOrder(){
  238. if(this.totalCategory){
  239. uni.$emit("chooseDbhProduct",this.chooseList)
  240. uni.navigateBack()
  241. }else{
  242. uni.showToast({
  243. icon: 'none',
  244. title: '请选择产品'
  245. })
  246. }
  247. },
  248. // 扫描
  249. toScan(){
  250. this.mpaasScanModule = uni.requireNativePlugin("wss-scan")
  251. this.mpaasScanModule.scan(
  252. {
  253. "scanMode":"Customized",
  254. "scanStyle":{
  255. "scanFrameSizePlus":{"width":250,"height":250},
  256. "scanFrameSize":200,
  257. "scanLight":"visible",
  258. "scanText":"对准条形码/二维码进行识别",
  259. "scanTitle":"扫码搜索货位产品",
  260. }
  261. },
  262. (result) => {
  263. if(result.scanStatus == 1){
  264. this.scanResult(result)
  265. }
  266. })
  267. },
  268. // 扫描结果
  269. scanResult(data){
  270. // 二维码
  271. if(data.scanType == 'QRCODE'){
  272. const ret = data.scanValue.split("&")
  273. this.queryWord = ret[1] // 产品编码
  274. }else{
  275. this.queryWord = data.scanValue
  276. }
  277. this.stockStateList = []
  278. this.getpartList()
  279. }
  280. }
  281. }
  282. </script>
  283. <style lang="less">
  284. .content{
  285. height: 100vh;
  286. width: 100%;
  287. background: #fff;
  288. .searchBar{
  289. padding: 0 0.8rem 0.3rem;
  290. .p-title{
  291. padding: 0 15rpx;
  292. display: flex;
  293. align-items: center;
  294. color: #222;
  295. font-size: 30rpx;
  296. > text{
  297. display: block;
  298. height: 30rpx;
  299. width: 6rpx;
  300. background: #0485F6;
  301. margin-right: 10rpx;
  302. border-radius: 10rpx;
  303. }
  304. .shelfName{
  305. flex-grow: 1;
  306. font-weight: bold;
  307. width: 80%;
  308. > view{
  309. overflow: hidden;
  310. white-space: nowrap;
  311. text-overflow: ellipsis;
  312. }
  313. }
  314. .btns{
  315. width:100rpx;
  316. text-align: right;
  317. font-size: 28rpx;
  318. color: #0485F6;
  319. }
  320. }
  321. .search{
  322. margin-top: 15upx;
  323. padding: 0.1rem;
  324. border-radius: 50rpx;
  325. border:1rpx solid #eee;
  326. .input{
  327. flex-grow: 1;
  328. padding: 4rpx;
  329. }
  330. .icon{
  331. width: 13%;
  332. text-align: center;
  333. font-size: 46rpx;
  334. color: #999;
  335. }
  336. }
  337. }
  338. .check-list{
  339. padding: 0 0.8rem;
  340. flex-grow: 1;
  341. overflow: auto;
  342. }
  343. .footer-bar{
  344. background-color: #f8f8f8;
  345. padding: 20upx;
  346. .f-left{
  347. color: #fff;
  348. }
  349. .active{
  350. background-color: #0485F6;
  351. }
  352. .f-mid{
  353. flex-grow: 1;
  354. color: #666;
  355. > view{
  356. padding: 0 5upx;
  357. &:first-child{
  358. text{
  359. color: red;
  360. }
  361. }
  362. &:last-child{
  363. font-size: 0.8rem;
  364. }
  365. }
  366. }
  367. .f-btns{
  368. button{
  369. width: 200upx;
  370. }
  371. }
  372. }
  373. // 筛选
  374. .tabBox{
  375. height: 100vh;
  376. .tabs{
  377. overflow: auto;
  378. padding: 20rpx;
  379. > view{
  380. flex-wrap: wrap;
  381. justify-content: space-between;
  382. > view{
  383. width: 98%;
  384. border: 1rpx solid #eee;
  385. padding: 15rpx;
  386. border-radius: 50rpx;
  387. text-align: center;
  388. margin-bottom: 15rpx;
  389. /deep/ .u-checkbox__label{
  390. flex-grow: 1;
  391. }
  392. }
  393. &:first-child{
  394. > view{
  395. width: 100%;
  396. }
  397. }
  398. }
  399. }
  400. .btns{
  401. display: flex;
  402. padding: 40upx 20upx 20upx;
  403. justify-content: space-between;
  404. .handle-btn {
  405. font-size: 28upx;
  406. }
  407. }
  408. }
  409. }
  410. </style>