index.vue 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. <template>
  2. <view class="p-content">
  3. <view class="p-head">
  4. <view v-if="baseData">
  5. <view>
  6. <text>盘点单号:</text>
  7. <text style="color: crimson;">{{baseData.checkWarehouseNo}}</text>
  8. </view>
  9. <view>
  10. <button size="mini" :disabled="loading" type="warn" @click="submitIn"> 提交 <text class="iconfont icon-icon-test43"></text></button>
  11. </view>
  12. </view>
  13. <view>
  14. <view>
  15. <text>产品条码:</text>
  16. <view style="flex-grow: 1;display: flex;align-items: center;">
  17. <input
  18. :focus="true"
  19. style="width: 150px;text-align: left;font-size: 32rpx;padding: 6rpx 0 6rpx 7rpx;"
  20. class="uni-input"
  21. placeholder="扫描或输入条码"
  22. border="surround"
  23. v-model="code">
  24. <button size="mini" @click="queryProduct" :style="{padding:'2px 10px',color:'#00aaff'}">查询</button>
  25. </view>
  26. </view>
  27. <view></view>
  28. </view>
  29. <view v-if="curProduct">
  30. <view>
  31. <text style="width:180rpx">产品名称:</text>
  32. <view>
  33. {{curProduct.productName}}
  34. </view>
  35. </view>
  36. </view>
  37. <view v-if="curProduct">
  38. <view>盘点数量:<input class="uni-input" v-model="curProduct.checkQty" :min="0" @blur="updateCurr" type="digit"/></view>
  39. <view>库存数量:{{curProduct.stockQty}}</view>
  40. </view>
  41. <view v-if="countData" style="justify-content: flex-start;flex-wrap: wrap;">
  42. <view>共{{countData.totalCategory||0}}款</view>
  43. <view>总数量:{{countData.stockQty||0}}</view>
  44. <view>盈亏数量:<span :style="{ color: countData.totalCheckProfitLossQty>0?'red':countData.totalCheckProfitLossQty<0?'green':'' }">{{ (countData.totalCheckProfitLossQty || countData.totalCheckProfitLossQty==0) ? Math.abs(countData.totalCheckProfitLossQty) : '--' }}</span></view>
  45. </view>
  46. </view>
  47. <view class="p-body">
  48. <uni-table style="width: 100%;" border emptyText="暂无数据" :loading="loading" >
  49. <!-- 表头行 -->
  50. <uni-tr>
  51. <uni-td align="center">产品编码</uni-td>
  52. <uni-td align="center">库存</uni-td>
  53. <uni-td align="center">盈亏数量</uni-td>
  54. </uni-tr>
  55. <!-- 表格数据行 -->
  56. <uni-tr v-for="item in detailList" :key="item.id" :checkedRow="curProduct&&curProduct.qrCode == item.qrCode" @click="toDetail(item)">
  57. <uni-td width="40%" align="center">{{item.productCode}}</uni-td>
  58. <uni-td width="30%" align="center">{{item.stockQty}}</uni-td>
  59. <uni-td width="30%" align="center">
  60. <span :style="{ color: item.checkProfitLossQty>0?'red':item.checkProfitLossQty<0?'green':'' }">{{ (item.checkProfitLossQty || item.checkProfitLossQty==0) ? Math.abs(item.checkProfitLossQty) : '--' }}</span>
  61. </uni-td>
  62. </uni-tr>
  63. </uni-table>
  64. </view>
  65. <view class="p-footer">
  66. <button size="mini" type="warn" @click="addQty(false)"> <text class="iconfont icon-reduce-btn"> 减 </text></button>
  67. <button size="mini" type="primary" @click="addQty(true)"> <text class="iconfont icon-add-btn"> 加 </text></button>
  68. </view>
  69. <scanCode></scanCode>
  70. </view>
  71. </template>
  72. <script>
  73. import scanCode from '@/libs/scan-code.vue';
  74. import { playAudio } from '@/libs/tools.js'
  75. import {
  76. checkWarehouseDetailStockList,
  77. checkWarehouseDetailBySn,
  78. checkWarehouseDetailList,
  79. checkWarehouseDetailCount,
  80. checkWarehouseDetailSave,
  81. checkWarehouseDetailDel,
  82. checkWarehouseSubmit} from '@/config/api.js'
  83. export default {
  84. components: { scanCode },
  85. data() {
  86. return {
  87. checkWarehouseSn: '',
  88. checkWarehouseId: null,
  89. loading: false,
  90. detailList:[],
  91. countData: null,
  92. code:'',
  93. baseData: null,
  94. curProduct: null,
  95. };
  96. },
  97. onLoad(opts) {
  98. var _this = this
  99. this.checkWarehouseSn = opts.checkWarehouseSn
  100. this.checkWarehouseId = opts.id
  101. uni.$on('scancodedate', function(content) {
  102. console.log("扫描到的内容为:", content)
  103. _this.code = content||''
  104. _this.queryProduct()
  105. })
  106. this.getDetail()
  107. this.pageInit()
  108. },
  109. onShow() {
  110. this.pageInit()
  111. this.hideKeyborder()
  112. },
  113. onUnload() {
  114. uni.$off('scancodedate')
  115. },
  116. onNavigationBarButtonTap(e){
  117. if(e.index == 0){
  118. uni.navigateTo({
  119. url: "/pages/stockPan/list"
  120. })
  121. }
  122. },
  123. methods: {
  124. pageInit(){
  125. this.getTotal()
  126. this.getDetailList()
  127. },
  128. hideKeyborder(){
  129. uni.hideKeyboard()
  130. },
  131. // 修改数量和成本
  132. updateCurr(){
  133. if(this.curProduct.checkQty>0){
  134. this.addDetailProduct(this.curProduct, true)
  135. }else{
  136. // 删除
  137. this.delDetailProduct(this.curProduct)
  138. }
  139. },
  140. // 加减数量
  141. addQty(type){
  142. playAudio('info')
  143. const hasProduct = this.detailList.find(item => item.qrCode == this.code)
  144. if(hasProduct){
  145. hasProduct.checkQty = hasProduct.checkQty + (type ? 1 : -1)
  146. if(hasProduct.checkQty>0){
  147. this.addDetailProduct(hasProduct, true)
  148. }else{
  149. // 删除
  150. this.delDetailProduct(hasProduct)
  151. }
  152. }
  153. },
  154. // 删除
  155. delDetailProduct(item) {
  156. checkWarehouseDetailDel({ id: item.id, checkWarehouseSn: this.checkWarehouseSn }).then(res => {
  157. if (res.status == 200) {
  158. uni.$u.toast(res.message)
  159. this.pageInit()
  160. }
  161. })
  162. },
  163. // 查询产品
  164. queryProduct(){
  165. if(!this.code){
  166. uni.$u.toast("请扫码或输入条形码!")
  167. return
  168. }
  169. // 如果已添加产品,则累加数量
  170. const hasProduct = this.detailList.find(item => item.qrCode == this.code)
  171. console.log(hasProduct)
  172. if(!!hasProduct){
  173. this.addQty(true)
  174. return
  175. }
  176. if(this.code==''){
  177. uni.$u.toast("未识别到条形码!")
  178. playAudio('error')
  179. return
  180. }
  181. const params = {
  182. checkWarehouseId: this.checkWarehouseId,
  183. qrCode: this.code,
  184. pageNo:1,
  185. pageSize:1 ,
  186. }
  187. console.log(params)
  188. checkWarehouseDetailStockList(params).then(res => {
  189. console.log(res)
  190. if(res.status == 200){
  191. const curProduct = res.data && res.data.list[0] || null
  192. console.log(curProduct)
  193. if(curProduct){
  194. // 添加产品
  195. this.addDetailProduct(curProduct, false)
  196. }else{
  197. uni.$u.toast("此商品不存在!")
  198. playAudio('error')
  199. }
  200. }
  201. })
  202. },
  203. // 添加明细
  204. addDetailProduct(row, isEdit){
  205. const params = isEdit ? row : {
  206. checkWarehouseSn: this.checkWarehouseSn,
  207. checkCost: row.putCost,
  208. productSn: row.productSn,
  209. productCode: row.productCode,
  210. productOrigCode: row.productOrigCode || undefined,
  211. productTypeSn1: row.productTypeSn1,
  212. productTypeSn2: row.productTypeSn2,
  213. productTypeSn3: row.productTypeSn3,
  214. brandSn: row.brandSn,
  215. stockQty: row.currentQty,
  216. lastStockTime: row.lastStockTime,
  217. checkProfitLossCost: row.lastStockCost,
  218. stockBatchNo: row.stockBatchNo || undefined,
  219. productProduceDate: row.productProduceDate || undefined,
  220. productExpiryDate: row.productExpiryDate || undefined,
  221. warehouseSn: row.warehouseSn || undefined,
  222. warehouseLocationSn: row.warehouseLocationSn || undefined
  223. };
  224. console.log(params)
  225. this.loading = true
  226. checkWarehouseDetailSave(params).then(res => {
  227. console.log(res,'添加')
  228. if (res.status == 200) {
  229. this.loading = false
  230. this.pageInit()
  231. } else {
  232. this.loading = false
  233. }
  234. })
  235. },
  236. // 详情
  237. getDetail(){
  238. checkWarehouseDetailBySn({sn: this.checkWarehouseSn}).then(res => {
  239. if(res.status == 200){
  240. this.baseData = res.data
  241. }
  242. })
  243. },
  244. // 已添加产品列表
  245. getDetailList(){
  246. checkWarehouseDetailList({pageNo:1,pageSize:1000,checkWarehouseSn:this.checkWarehouseSn}).then(res => {
  247. console.log(res,'已添加产品列表')
  248. if(res.status == 200){
  249. this.detailList = res.data.list
  250. const curProduct = this.detailList.find(item => item.qrCode == this.code)
  251. this.curProduct = curProduct || null
  252. }
  253. })
  254. },
  255. getTotal(){
  256. checkWarehouseDetailCount({checkWarehouseSn:this.checkWarehouseSn}).then(res => {
  257. console.log(res,'getTotal')
  258. this.countData = res.data
  259. })
  260. },
  261. // 商品详情
  262. toDetail(item) {
  263. this.$store.state.vuex_tempData = item
  264. uni.navigateTo({
  265. url:"/pages/stockPan/detail?state="+this.baseData.state
  266. })
  267. },
  268. // 提交盘点
  269. submitIn(){
  270. checkWarehouseSubmit({id: this.checkWarehouseId, auditFlag: true}).then(res => {
  271. if(res.status == 200){
  272. uni.$emit("refashList")
  273. uni.navigateBack()
  274. }
  275. })
  276. }
  277. },
  278. }
  279. </script>
  280. <style lang="scss">
  281. .p-content{
  282. button{
  283. line-height: 1.7;
  284. }
  285. .p-head{
  286. font-size: 32upx;
  287. color: $uni-text-color;
  288. >view{
  289. display: flex;
  290. align-items: center;
  291. padding: 15upx 20upx;
  292. border-bottom: 1px solid #eee;
  293. justify-content: space-between;
  294. > view{
  295. display: flex;
  296. padding: 0 10upx;
  297. align-items: center;
  298. }
  299. }
  300. .uni-input{
  301. border: 1px solid #eee;
  302. width: 150upx;
  303. text-align: center;
  304. }
  305. }
  306. .p-body{
  307. overflow: auto;
  308. flex-grow: 1;
  309. height: 50%;
  310. }
  311. .p-footer{
  312. padding:20upx 30upx;
  313. display: flex;
  314. > button{
  315. width: 30%;
  316. }
  317. }
  318. }
  319. </style>