addBackOrder.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491
  1. <template>
  2. <view class="modal-box">
  3. <view class="header_box">
  4. <view class="headerName u-flex">
  5. <text class="barBox"></text>
  6. <view class="shelfName u-line-1">{{ shelfName }}对方的观点和个人就一个人国服日服固定板</view>
  7. <view class="screeningBox" @click="chooseShow = true">
  8. <text>滞销天数</text>
  9. <u-icon color="#666666" size="36" name="shaixuan" custom-prefix="iscm-icon"></u-icon>
  10. </view>
  11. </view>
  12. <view class="searchBox">
  13. <view class="searchBox_l">
  14. <u-search
  15. placeholder="请输入产品编码或产品名称搜索"
  16. @change="getSearchCon"
  17. @search="getSearchCon"
  18. @custom="getSearchCon"
  19. @clear="clearSearch"
  20. v-model="keyword"
  21. bg-color="#FFF"
  22. shape="round"
  23. :show-action="false"
  24. ></u-search>
  25. </view>
  26. <view class="searchBox_r"><u-icon color="#666666" size="40" name="saomiao" custom-prefix="iscm-icon"></u-icon></view>
  27. </view>
  28. </view>
  29. <view class="backOrderCon">
  30. <scroll-view scroll-y class="scroll-view">
  31. <view class="partList-list-box">
  32. <view class="product flex align_center">
  33. <view class="checkbox"><u-checkbox v-model="checked" name="A" @change="checkChange" size="40" shape="circle"></u-checkbox></view>
  34. <view class="flex align_center flex_1">
  35. <view class="pimgs">
  36. <u-image src="`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
  37. </view>
  38. <view class="pinfo">
  39. <view class="pname">
  40. <text>A01</text>
  41. JQ-21026E
  42. </view>
  43. <view class="productName u-line-1">
  44. 名i嘻嘻嘻嘻嘻嘻
  45. </view>
  46. <view class="ptxt flex align_center">
  47. <view>
  48. 最大库容
  49. <text class="pnums">100</text>
  50. </view>
  51. <view>
  52. /货架库存
  53. <text class="pnums">20</text>
  54. </view>
  55. <view>
  56. /滞销
  57. <text class="pnums">12个月23天</text>
  58. </view>
  59. </view>
  60. </view>
  61. </view>
  62. </view>
  63. <view class="ptools flex align_center justify_between">
  64. <view class="ptools_l u-flex">
  65. <view>
  66. 补货在途
  67. <text class="pnums">1</text>
  68. </view>
  69. <view>
  70. /调回在途
  71. <text class="pnums">2</text>
  72. </view>
  73. </view>
  74. <view class="pcurnums flex align_center">
  75. <text>调回数量</text>
  76. <view class="u-ninput"><u-number-box color="#000" :input-height="60" bg-color="#fff" v-model="shifa" :min="0" :max="10"></u-number-box></view>
  77. </view>
  78. </view>
  79. </view>
  80. <!-- <u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="240" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty> -->
  81. </scroll-view>
  82. </view>
  83. <view class="backOrderFooter u-flex">
  84. <view class="checkBox">
  85. <u-checkbox-group><u-checkbox label-size="24" icon-size="26" v-model="allChecked" shape="circle">全选</u-checkbox></u-checkbox-group>
  86. </view>
  87. <view class="footerBox u-flex u-row-between">
  88. <view class="footerBox_m u-flex">
  89. <view class="middle_l">
  90. 已选
  91. <text>2</text>
  92. 款/
  93. <text>15</text>
  94. </view>
  95. <view class="middle_r" @click="detailFlag=true">
  96. <text>查看明细</text>
  97. <u-icon name="arrow-up" color="#999" size="28"></u-icon>
  98. </view>
  99. </view>
  100. <view class="footerBox_r"><u-button type="primary" shape="circle">新增调回单</u-button></view>
  101. </view>
  102. </view>
  103. <!-- 排序弹窗 -->
  104. <u-popup v-model="chooseShow" mode="right" width="60%">
  105. <view class="choosePopup">
  106. <view class="chooseTit">滞销天数</view>
  107. <view class="chooseDay u-flex">
  108. <u-input v-model="startDay" input-align="center" placeholder="起始天数" type="number" />
  109. <text>至</text>
  110. <u-input v-model="endDay" input-align="center" placeholder="截止天数" type="number" />
  111. </view>
  112. <view class="butBox u-flex">
  113. <u-button hover-class="none" shape="circle" size="medium" @click="reset">重置</u-button>
  114. <u-button hover-class="none" :custom-style="customBtnStyle" size="medium" shape="circle" @click="handelSort">查询</u-button>
  115. </view>
  116. </view>
  117. </u-popup>
  118. <!-- 查看明细弹窗 -->
  119. <detailModal :detailShow="detailFlag" @close="detailFlag=false"></detailModal>
  120. </view>
  121. </template>
  122. <script>
  123. import { reportPage } from '@/api/vinLog';
  124. import detailModal from './detailModal'
  125. export default {
  126. components: {
  127. detailModal
  128. },
  129. data() {
  130. return {
  131. detailFlag:false,
  132. chooseShow: false,
  133. checked: true,
  134. keyword: '',
  135. sortList: [
  136. {
  137. id: 1,
  138. name: '最近一次VIN扫描时间降序'
  139. },
  140. {
  141. id: 2,
  142. name: '适配有货降序'
  143. },
  144. {
  145. id: 3,
  146. name: '适配无货降序'
  147. }
  148. ],
  149. isSortFlag: 0,
  150. list: [],
  151. shelfSn: '',
  152. shelfName: '',
  153. pageNo: 1,
  154. pageSize: 10,
  155. noDataText: '暂无数据',
  156. status: 'loading',
  157. totalNum: 0,
  158. total: 0,
  159. theme: '',
  160. customBtnStyle: {
  161. // 自定义按钮样式
  162. borderColor: this.$config('primaryColor'),
  163. backgroundColor: this.$config('primaryColor'),
  164. color: '#fff'
  165. },
  166. startDay: null,
  167. endDay: null,
  168. allChecked: false
  169. };
  170. },
  171. onLoad(options) {
  172. this.theme = getApp().globalData.theme;
  173. this.shelfSn = options.shelfSn;
  174. this.shelfName = options.shelfName;
  175. let ajaxData = {
  176. pageNo: this.pageNo,
  177. pageSize: this.pageSize,
  178. shelfSn: this.shelfSn
  179. };
  180. this.loadData(ajaxData);
  181. },
  182. onBackPress(e) {
  183. if (this.sortShow) {
  184. this.sortShow = false;
  185. this.isSortFlag = 0;
  186. return true;
  187. }
  188. },
  189. methods: {
  190. // 获取数字货架列表
  191. loadData(params) {
  192. const _this = this;
  193. _this.status = 'loading';
  194. reportPage(params).then(res => {
  195. if (res.status == 200) {
  196. if (this.pageNo > 1) {
  197. this.list = this.list.concat(res.data.list || []);
  198. } else {
  199. this.list = res.data.list || [];
  200. }
  201. this.totalNum = res.data.count || 0;
  202. } else {
  203. this.list = [];
  204. this.totalNum = 0;
  205. this.noDataText = res.message;
  206. }
  207. this.status = 'loadmore';
  208. });
  209. },
  210. chooseSort(i) {
  211. this.isSortFlag = i;
  212. this.handelSort();
  213. },
  214. reset() {
  215. this.isSortFlag = 0;
  216. this.pageNo = 1;
  217. let ajaxData = {
  218. pageNo: 1,
  219. pageSize: this.pageSize,
  220. shelfSn: this.shelfSn
  221. };
  222. this.loadData(ajaxData);
  223. },
  224. // 搜索
  225. getSearchCon() {
  226. this.pageNo = 1;
  227. var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
  228. var ajaxData = null;
  229. if (reg.test(this.keyword)) {
  230. //包含汉字
  231. ajaxData = {
  232. pageNo: 1,
  233. pageSize: this.pageSize,
  234. shelfSn: this.shelfSn,
  235. productName: this.keyword.trim()
  236. };
  237. } else {
  238. ajaxData = {
  239. pageNo: 1,
  240. pageSize: this.pageSize,
  241. shelfSn: this.shelfSn,
  242. productCode: this.keyword.trim()
  243. };
  244. }
  245. if (this.isSortFlag == 0) {
  246. ajaxData.orderBy = 'xvfp.scan_vin_date desc,xp.code asc';
  247. } else if (this.isSortFlag == 1) {
  248. ajaxData.orderBy = 'xvfp.in_stock_count desc,xp.code asc';
  249. } else {
  250. ajaxData.orderBy = 'xvfp.not_stock_count desc,xp.code asc';
  251. }
  252. this.loadData(ajaxData);
  253. },
  254. // 清空搜索内容
  255. clearSearch() {
  256. this.keyword = '';
  257. this.reset();
  258. },
  259. handelSort() {
  260. this.pageNo = 1;
  261. var ajaxData = {
  262. shelfSn: this.shelfSn,
  263. pageNo: 1,
  264. pageSize: this.pageSize
  265. };
  266. if (this.keyword) {
  267. var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
  268. if (reg.test(this.keyword)) {
  269. ajaxData.productName = this.keyword.trim();
  270. } else {
  271. ajaxData.productCode = this.keyword.trim();
  272. }
  273. }
  274. if (this.isSortFlag == 0) {
  275. ajaxData.orderBy = 'xvfp.scan_vin_date desc,xp.code asc';
  276. } else if (this.isSortFlag == 1) {
  277. ajaxData.orderBy = 'xvfp.in_stock_count desc,xp.code asc';
  278. } else {
  279. ajaxData.orderBy = 'xvfp.not_stock_count desc,xp.code asc';
  280. }
  281. this.sortShow = false;
  282. this.loadData(ajaxData);
  283. }
  284. }
  285. };
  286. </script>
  287. <style lang="less" scoped>
  288. .modal-box {
  289. background: #ffffff;
  290. padding: 20rpx;
  291. width: 100%;
  292. height: 100vh;
  293. box-sizing: border-box;
  294. .header_box {
  295. width: 100%;
  296. height: 142rpx;
  297. padding: 0 20rpx 20rpx;
  298. .headerName {
  299. padding-bottom: 15rpx;
  300. color: #222;
  301. font-size: 30rpx;
  302. .barBox {
  303. display: block;
  304. height: 30rpx;
  305. width: 6rpx;
  306. background: #0485f6;
  307. margin-right: 10rpx;
  308. border-radius: 10rpx;
  309. }
  310. .shelfName {
  311. font-weight: bold;
  312. width: calc(100% - 166rpx);
  313. }
  314. .screeningBox {
  315. font-size: 26rpx;
  316. width: 150rpx;
  317. text-align: right;
  318. text {
  319. vertical-align: top;
  320. }
  321. }
  322. }
  323. .searchBox {
  324. width: 100%;
  325. display: flex;
  326. align-items: center;
  327. padding: 0 20rpx;
  328. border: 1rpx solid #e0e0e0;
  329. border-radius: 32rpx;
  330. box-sizing: border-box;
  331. .searchBox_l {
  332. width: 93%;
  333. }
  334. .searchBox_r {
  335. width: 7%;
  336. }
  337. }
  338. }
  339. .backOrderCon {
  340. width: 100%;
  341. height: calc(100vh - 280rpx);
  342. .partList-list-box {
  343. padding: 10px 0;
  344. border-bottom: 2rpx solid #f5f5f5;
  345. &:last-child {
  346. border: 0;
  347. }
  348. .product {
  349. flex-grow: 1;
  350. .checkbox {
  351. width: 60rpx;
  352. }
  353. .pinfo {
  354. flex-grow: 1;
  355. padding-left: 20rpx;
  356. .pname {
  357. font-size: 32rpx;
  358. color: #191919;
  359. margin-bottom: 10rpx;
  360. text {
  361. font-weight: normal;
  362. margin-right: 6rpx;
  363. padding: 0 10rpx;
  364. background: rgba(3, 54, 146, 0.15);
  365. border-radius: 100rpx;
  366. color: #033692;
  367. font-size: 28rpx;
  368. }
  369. }
  370. .productName{
  371. width: 90%;
  372. font-size: 32rpx;
  373. color: #191919;
  374. font-weight: bold;
  375. margin:10rpx 0;
  376. }
  377. .pno {
  378. background-color: rgba(3, 54, 146, 0.15);
  379. border-radius: 50rpx;
  380. padding: 0 20rpx;
  381. color: #033692;
  382. font-size: 24rpx;
  383. margin-right: 10rpx;
  384. }
  385. .ptxt {
  386. font-size: 24rpx;
  387. color: #999;
  388. .pnums {
  389. color: #222;
  390. padding: 0 4upx;
  391. }
  392. }
  393. }
  394. }
  395. .ptools {
  396. margin-top: 30rpx;
  397. margin-left: 60rpx;
  398. .ptools_l{
  399. font-size: 24rpx;
  400. color: #999;
  401. .pnums {
  402. color: #ff5500;
  403. padding: 0 4rpx;
  404. }
  405. }
  406. .pcurnums {
  407. > text {
  408. font-size: 24rpx;
  409. color: #999;
  410. margin-right: 20rpx;
  411. }
  412. }
  413. .u-ninput {
  414. border: 2rpx solid #eee;
  415. border-radius: 50rpx;
  416. padding: 0 6rpx;
  417. }
  418. /deep/ .u-icon-disabled {
  419. background: #fff !important;
  420. }
  421. /deep/ .u-number-input {
  422. margin: 0 0;
  423. border: 2rpx solid #eee;
  424. border-top: 0;
  425. border-bottom: 0;
  426. }
  427. /deep/ .u-icon-plus,
  428. /deep/ .u-icon-minus {
  429. border-radius: 50rpx;
  430. }
  431. }
  432. }
  433. }
  434. .backOrderFooter {
  435. height: 98rpx;
  436. box-sizing: border-box;
  437. padding: 10rpx 0;
  438. vertical-align: top;
  439. .checkBox {
  440. width: 20%;
  441. }
  442. .footerBox {
  443. width: 80%;
  444. .footerBox_m {
  445. .middle_l {
  446. text {
  447. color: #ff5500;
  448. margin: 0 6rpx;
  449. }
  450. }
  451. .middle_r {
  452. font-size: 24rpx;
  453. color: #999;
  454. margin-left: 10rpx;
  455. }
  456. }
  457. .footerBox_r {
  458. width: 200rpx;
  459. button {
  460. width: 100%;
  461. font-size: 26rpx;
  462. }
  463. }
  464. }
  465. }
  466. // 弹窗样式
  467. .choosePopup {
  468. padding: 30rpx 20rpx;
  469. box-sizing: border-box;
  470. .chooseTit {
  471. text-align: center;
  472. }
  473. .chooseDay {
  474. margin: 60rpx 0;
  475. .u-input {
  476. border-bottom: 1rpx solid #e0e0e0;
  477. }
  478. }
  479. .butBox {
  480. margin-top: 100rpx;
  481. .u-size-medium {
  482. padding: 0 60rpx !important;
  483. }
  484. }
  485. }
  486. }
  487. </style>