index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473
  1. <template>
  2. <view>
  3. <headerTo act_index="1" />
  4. <view class="list">
  5. <view class="search-user flex-y-center ">
  6. <view class="search-content flex-y-center">
  7. <icon type="search" size="18" />
  8. <input confirm-type="search" v-model="seTval" @confirm="confirm" @input="getSearch"
  9. class="flex-grow-1" type="text" placeholder-style="font-size:26rpx" placeholder="请输入关键词" />
  10. <view class="flex-center" style="margin-left: 10rpx;" @click.stop="onDel" v-if="seTval">
  11. <icon type="clear" size="18" />
  12. </view>
  13. </view>
  14. <view class="search-btn" @click="search">
  15. 搜索
  16. </view>
  17. </view>
  18. <view style="height: 100rpx;"></view>
  19. <view class="box-pack-between batch">
  20. <view class="flex-grow-1">
  21. <view class="flex-y-center">
  22. <view style="margin-right:0;" class="rund flex-center" v-if="checkedshow" @click="choiceAll()">
  23. <icon type="success_no_circle" size="12" v-if="checkedAll" />
  24. </view>
  25. <text style="margin-left: 10rpx;" class="ft28">全选</text>
  26. </view>
  27. </view>
  28. <button size="mini" type="default" @click="checkedshow=false" v-if="checkedshow"
  29. style="margin-right: 10rpx;">取消</button>
  30. <button size="mini" @click="choiceBatch" class="ft28 batch_btn">{{checkedshow?'确定入库':'批量入库'}}</button>
  31. </view>
  32. <view class="item flex-y-center" v-for="(item,index) of list" :key='index'>
  33. <view class="flex-grow-1">
  34. <view class="ft30 box-pack-between" @click="onFold(index)" >
  35. <view class="flex-y-center">
  36. <view v-if="checkedshow" class="rund flex-center" @click.stop="choice(index)">
  37. <icon type="success_no_circle" size="12" v-if="item.checked" />
  38. </view>
  39. <view class="text-1" style="width: 430rpx;">{{item.name}}</view>
  40. </view>
  41. <view class="flex-y-center">
  42. <button @click.stop="confirmSpecs(index)" size="mini"
  43. style="margin: 0;background: #3b93fc;color: #fff;" type="default">确定入库</button>
  44. <image class="down" :class="item.is_fold?'down_act':''"
  45. src="../static/images/down.png"></image>
  46. </view>
  47. </view>
  48. <view v-show="item.is_fold" class="fold">
  49. <block v-if="item.spec.length>0 && item.is_gg == 2">
  50. <view v-for="(goods,idx) of item.spec" :key='idx' class="item_spec">
  51. <view class="ft26 box-pack-between item-center">
  52. <view class="flex-y-center">
  53. <text class="stock">当前库存:{{goods.inventory}}</text>
  54. </view>
  55. <uni-number-box @change="changeValue" :value="goods.number" :min="-goods.inventory" :max="9999"
  56. :index='index' :idx='idx' />
  57. </view>
  58. <view class="box-pack-between ft26 pdt">
  59. <text class="specs"> 规格:¥{{goods.growth}}/{{goods.spec}}</text>
  60. <!-- <button @click="confirmSpecs(index,idx)" size="mini" style="margin: 0;background: #3b93fc;color: #fff;" type="default">确定入库</button> -->
  61. </view>
  62. </view>
  63. </block>
  64. <block v-else>
  65. <view class="ft26 box-pack-between item-center">
  66. <view class="flex-y-center">
  67. <text class="stock">当前库存:{{item.stock}}</text>
  68. </view>
  69. <uni-number-box @change="changeValue" :value="item.number" :min="-item.stock" :max="999"
  70. :index='index' />
  71. </view>
  72. <view class="box-pack-between ft26">
  73. <text class="specs"></text>
  74. </view>
  75. </block>
  76. </view>
  77. </view>
  78. </view>
  79. <view>
  80. <block v-if='list.length<=0'>
  81. <no-none></no-none>
  82. </block>
  83. </view>
  84. </view>
  85. <view style="height: 200rpx;"></view>
  86. <view class="wyb-pagination-page" v-if="count>0">
  87. <wyb-pagination :totalItems="count" :current='pages' :page-items="limit" @change="Change" />
  88. </view>
  89. <uni-popup ref="popup" type="center">
  90. <view class="skockHome">
  91. <view class="skockHomeTitle">
  92. 批量修改库存数量
  93. </view>
  94. <form @submit="formSubmit">
  95. <view class="skockHomeput">
  96. <input type="number" name="number" placeholder="请输入库存数量" />
  97. </view>
  98. <button form-type="submit" style="background: #007AFF;color: #FFFFFF;" class="skockHomebtn"
  99. type="default">确定</button>
  100. </form>
  101. </view>
  102. </uni-popup>
  103. </view>
  104. </template>
  105. <script>
  106. import wybPagination from "@/components/wyb-pagination/wyb-pagination";
  107. import headerTo from "../components/header";
  108. export default {
  109. components: {
  110. headerTo,
  111. wybPagination
  112. },
  113. data() {
  114. return {
  115. act_index: 1,
  116. seTval: '',
  117. keywords: '',
  118. checkedshow: false,
  119. checkedAll: false,
  120. count: 1,
  121. limit: 10,
  122. pages: 1,
  123. list: [],
  124. }
  125. },
  126. onLoad() {
  127. this.http();
  128. },
  129. methods: {
  130. onFold(index){
  131. this.list[index].is_fold = !this.list[index].is_fold;
  132. },
  133. Change(e) {
  134. this.pages = e.current;
  135. this.http();
  136. },
  137. getSearch(e) {
  138. if (!e.detail.value) {
  139. this.keywords = "";
  140. this.pages = 1;
  141. this.http();
  142. }
  143. this.keywords = e.detail.value;
  144. },
  145. onDel() {
  146. this.seTval = '';
  147. this.keywords = "";
  148. this.pages = 1;
  149. this.http();
  150. },
  151. confirm(e) {
  152. this.keywords = e.detail.value;
  153. this.pages = 1;
  154. this.http();
  155. },
  156. search(e) {
  157. this.pages = 1;
  158. this.http();
  159. },
  160. choiceBatch() {
  161. if (this.checkedshow) {
  162. let list = getData(this.list);
  163. function getData(col) {
  164. return col
  165. .filter(item => item.checked)
  166. }
  167. if (!list.length) {
  168. uni.showToast({
  169. title: "请选择商品",
  170. icon: "none"
  171. })
  172. return
  173. }
  174. this.$refs.popup.open();
  175. return
  176. }
  177. this.checkedshow = true
  178. },
  179. choiceAll() {
  180. if (this.checkedAll) {
  181. this.list.forEach((v, i) => {
  182. v.checked = false;
  183. })
  184. this.checkedAll = false
  185. } else {
  186. this.list.forEach((v, i) => {
  187. v.checked = true;
  188. })
  189. this.checkedAll = true
  190. }
  191. },
  192. choice(index) {
  193. let list = JSON.parse(JSON.stringify(this.list))
  194. list[index].checked = !list[index].checked;
  195. this.list = list;
  196. let allArr = getData(this.list);
  197. this.checkedAll = this.list.length === allArr.length ? true : false;
  198. function getData(col) {
  199. return col
  200. .filter(item => item.checked)
  201. .map(item => item.id);
  202. }
  203. },
  204. // 批量修改库存
  205. formSubmit({
  206. detail
  207. }) {
  208. console.log(detail)
  209. let arr = [];
  210. this.list.forEach((v, i) => {
  211. if (v.checked) {
  212. if (v.spec && v.is_gg == 2 && Array.isArray(v.spec)) {
  213. v.spec.forEach((g, l) => {
  214. // g.number = detail.value.number;
  215. g.inventory = Number(g.inventory) + Number(detail.value.number);
  216. })
  217. arr.push({
  218. id: v.id,
  219. spec: v.spec,
  220. })
  221. } else {
  222. v.stock = Number(v.stock) + Number(detail.value.number);
  223. arr.push({
  224. id: v.id,
  225. stock: v.stock,
  226. })
  227. }
  228. }
  229. })
  230. let data = {
  231. spec_arr: JSON.stringify(arr)
  232. }
  233. this.$refs.popup.close();
  234. this.enit(data)
  235. },
  236. // 新增减少库存
  237. changeValue({
  238. index,
  239. idx,
  240. inputValue
  241. }) {
  242. if (idx || idx === 0) {
  243. let inventory = Number(this.list[index].spec[idx].inventory)
  244. this.list[index].spec[idx].number = inputValue;
  245. } else {
  246. let stock = this.list[index].stock
  247. this.list[index].number = inputValue;
  248. }
  249. },
  250. confirmSpecs(index,idx) {
  251. let stock, specs, data;
  252. uni.showModal({
  253. title: '提示',
  254. content: `是否入库${this.list[index].name}?`,
  255. showCancel: true,
  256. cancelText: '取消',
  257. confirmText: '确定',
  258. success: res => {
  259. if(res.confirm){
  260. if (this.list[index].spec) {
  261. this.list[index].spec.forEach((v)=>{
  262. v.inventory = Number(v.inventory) + Number(v.number)
  263. })
  264. data = {
  265. spec_arr: JSON.stringify([{
  266. spec: this.list[index].spec,
  267. id: this.list[index].id,
  268. }])
  269. }
  270. } else {
  271. let stock = Number(this.list[index].stock) + Number(this.list[index].number);
  272. data = {
  273. spec_arr: JSON.stringify([{
  274. stock,
  275. id: this.list[index].id,
  276. }])
  277. }
  278. }
  279. this.enit(data)
  280. }
  281. },
  282. fail: () => {},
  283. complete: () => {}
  284. });
  285. },
  286. enit(data) {
  287. // console.log(data ," this.list")
  288. // return
  289. this.request({
  290. url: "Smdcshop/kucun_edit",
  291. data,
  292. }).then(res => {
  293. if (res.code == '200') {
  294. uni.showToast({
  295. title: res.message,
  296. icon: 'none'
  297. })
  298. this.checkedAll= false
  299. setTimeout(()=>{
  300. this.http();
  301. },2e3)
  302. }
  303. }).catch((res) => {
  304. uni.showToast({
  305. title: res.message,
  306. icon: 'none'
  307. })
  308. });
  309. },
  310. http() {
  311. this.request({
  312. url: "Smdcshop/kucun_goods_lists",
  313. data: {
  314. store_id: uni.getStorageSync("store_id"),
  315. page: this.pages,
  316. limit: this.limit,
  317. keywords: this.keywords,
  318. }
  319. }).then(res => {
  320. if (res.code == '200' || res.code == 200) {
  321. this.count = res.data.count;
  322. res.data.list.forEach((v, i) => {
  323. v.is_fold = false
  324. if (v.spec && v.is_gg == 2 && Array.isArray(v.spec)) {
  325. v.spec.forEach((g, l) => {
  326. g.number = 0;
  327. })
  328. } else {
  329. v.number = 0
  330. }
  331. })
  332. this.list = res.data.list;
  333. }
  334. }).catch((res) => {
  335. uni.showToast({
  336. title: res.message,
  337. icon: 'none'
  338. })
  339. });
  340. },
  341. },
  342. }
  343. </script>
  344. <style>
  345. .skockHome {
  346. width: 600rpx;
  347. height: 400rpx;
  348. background: #FFFFFF;
  349. padding: 50rpx;
  350. border-radius: 10rpx;
  351. text-align: center;
  352. }
  353. .skockHomeTitle {
  354. padding: 20rpx 0;
  355. font-size: 35rpx;
  356. }
  357. .skockHomeput {
  358. padding: 20rpx 0;
  359. font-size: 30rpx;
  360. border: 1rpx solid #f1f1f1;
  361. margin-bottom: 30rpx;
  362. }
  363. .list .item {
  364. padding: 20rpx;
  365. border-bottom: 1rpx solid #F1F1F1;
  366. }
  367. .item-center {
  368. padding: 30rpx 0;
  369. }
  370. .item_spec {
  371. padding: 0 20rpx;
  372. }
  373. .specs {
  374. color: #FF5722;
  375. }
  376. .stock {
  377. color: #C9271B;
  378. }
  379. .pof {
  380. position: fixed;
  381. bottom: 0;
  382. width: 100%;
  383. }
  384. .confirm {
  385. background: #007AFF;
  386. color: #fff;
  387. margin: 0 10rpx;
  388. }
  389. .cancel {
  390. margin: 0 10rpx;
  391. }
  392. .rund {
  393. height: 40rpx;
  394. width: 40rpx;
  395. margin-right: 10rpx;
  396. border: 1rpx solid #ccc;
  397. border-radius: 3px;
  398. }
  399. .batch {
  400. padding: 10rpx 10rpx;
  401. border-bottom: 1rpx solid #f1f1f1;
  402. }
  403. .batch_btn {
  404. color: #FFFFFF;
  405. background: #FF5722;
  406. font-size: 26rpx;
  407. padding: 6rpx 15rpx;
  408. }
  409. .wyb-pagination-page {
  410. position: fixed;
  411. width: 100%;
  412. bottom: 0;
  413. background: #FFFFFF;
  414. padding: 10rpx 0;
  415. z-index: 999;
  416. }
  417. .down{
  418. width: 40rpx;
  419. height: 40rpx;
  420. margin-left: 10rpx;
  421. }
  422. .item .down_act{
  423. transform: rotate(180deg)
  424. }
  425. .fold .item_spec{
  426. border-bottom: 1rpx solid #F1F1F1;
  427. }
  428. .fold .item_spec:last-child
  429. {
  430. border-bottom: none;
  431. }
  432. .pdt{
  433. padding-bottom: 20rpx;
  434. }
  435. </style>