partList.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. <template>
  2. <view class="partList-box">
  3. <view class="partList-title flex align_center justify_between">
  4. <text>{{title}}</text>
  5. <view>{{list.length}}款,共<text>{{totalNums}}</text>件</view>
  6. </view>
  7. <view class="partList-list">
  8. <view class="partList-list-box" v-for="item in partList" :key="item.id">
  9. <view class="product flex align_center">
  10. <view class="checkbox" v-if="model == 'checkbox'"><u-checkbox v-model="item.checked" :name="item.id" @change="checkChange" size="40" shape="circle"></u-checkbox></view>
  11. <view class="flex align_center flex_1">
  12. <view class="pimgs">
  13. <u-image :src="item.product&&item.product.productMsg?item.product.productMsg:`../../static/${theme}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
  14. </view>
  15. <view class="pinfo">
  16. <view class="pname">{{item.product&&item.product.name?item.product.name:'--'}}</view>
  17. <view class="ptxt flex align_center justify_between">
  18. <view>
  19. <text class="pcode">{{item.product&&item.product.code?item.product.code:'--'}}</text>
  20. </view>
  21. <view v-if="pageType=='replenishmentSign'||pageType=='manualPrint'||pageType=='scanCodePrint'">
  22. 实发数量:<text class="pnums">{{item.confirmQty||item.confirmQty==0?item.confirmQty:'--'}}{{item.product&&item.product.unit?item.product.unit:'--'}}</text>
  23. </view>
  24. <view v-if="pageType=='replenishmentOut'">
  25. x<text class="pnums">{{item.confirmQty||item.confirmQty==0?item.confirmQty:'--'}}</text>
  26. </view>
  27. <view v-if="pageType=='replenishmentDetail'">
  28. 应发<text class="pnums">{{item.qty||item.qty==0?item.qty:'--'}}</text>
  29. 实发<text class="pnums">{{item.confirmQty||item.confirmQty==0?item.confirmQty:'--'}}</text>
  30. 签收<text class="pnums">{{item.putQty||item.putQty==0?item.putQty:'--'}}</text>
  31. </view>
  32. <view v-if="pageType=='replenishmentDetailc'">
  33. <text class="pnums">{{item.qty||item.qty==0?item.qty:'--'}}</text>
  34. {{item.product&&item.product.unit?item.product.unit:'--'}}
  35. </view>
  36. <view v-if="pageType=='recall'">
  37. 调回数量:<text class="pnums">{{item.qty||item.qty==0?item.qty:'--'}}</text>
  38. {{item.product&&item.product.unit?item.product.unit:'--'}}
  39. </view>
  40. </view>
  41. </view>
  42. </view>
  43. </view>
  44. <!-- 有复选框 -->
  45. <view v-if="model == 'checkbox'" class="ptools flex align_center justify_between">
  46. <view></view>
  47. <view class="pcurnums flex align_center" v-if="pageType=='recall'">
  48. <text>实退数量</text>
  49. <view class="u-ninput">
  50. <u-number-box color="#000" bg-color="#fff" v-model="item.confirmQty" :min="1" :max="item.qty"></u-number-box>
  51. </view>
  52. </view>
  53. <view class="pcurnums flex align_center" v-if="pageType=='manualPrint'">
  54. <text>打印数量</text>
  55. <view class="u-ninput">
  56. <u-number-box color="#000" bg-color="#fff" v-model="item.printQty" :min="1" :max="item.confirmQty"></u-number-box>
  57. </view>
  58. </view>
  59. </view>
  60. <!-- 无复选框 -->
  61. <view v-if="model == 'view'" class="ptools flex align_center justify_between">
  62. <view></view>
  63. <view class="pcurnums flex align_center" v-if="pageType=='replenishmentSign'">
  64. <text>入库数量</text>
  65. <view class="u-ninput">
  66. <u-number-box color="#000" bg-color="#fff" v-model="item.putQty" @change="numberChange" :min="0" :max="item.confirmQty"></u-number-box>
  67. </view>
  68. </view>
  69. </view>
  70. </view>
  71. <view class="nodata" v-if="list.length==0">
  72. <u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="120" :text="noDataText" img-width="120" mode="list"></u-empty>
  73. </view>
  74. </view>
  75. </view>
  76. </template>
  77. <script>
  78. export default {
  79. props: {
  80. list: {
  81. type: Array,
  82. default: function(){
  83. return []
  84. }
  85. },
  86. noDataText: {
  87. type: String,
  88. default: '暂无配件'
  89. },
  90. title: {
  91. type: String,
  92. default: '列表'
  93. },
  94. // model: checkbox 可选择模式,view 只显示
  95. model: {
  96. type: String,
  97. default: 'checkbox'
  98. },
  99. // 那个功能页面调用,展示不同的字段,recall: 调回退库,replenishmentSign:补货签收,replenishmentOut:补货出库,manualPrint:手动打印,replenishmentDetail:补货详情-已完成,replenishmentDetailc:补货详情-已取消,scanCodePrint:扫码打印
  100. fromPage: {
  101. type: String,
  102. default: ''
  103. }
  104. },
  105. watch: {
  106. list(newValue, oldValue) {
  107. const _this = this
  108. this.totalNums = 0
  109. newValue.map(item => {
  110. if(_this.pageType=='replenishmentSign'){ // 补货签收
  111. this.totalNums = this.totalNums + item.confirmQty
  112. }else if(_this.pageType=='replenishmentOut'){ // 补货出库
  113. this.totalNums = this.totalNums + item.confirmQty
  114. }else if(_this.pageType=='manualPrint'){ // 补货-手动打印
  115. this.totalNums = this.totalNums + item.confirmQty
  116. }else if(_this.pageType=='scanCodePrint'){ // 补货-扫码打印
  117. this.totalNums = this.totalNums + item.confirmQty
  118. }else if(_this.pageType=='replenishmentDetail'){ // 补货详情-已完成
  119. this.totalNums = this.totalNums + item.putQty
  120. }else if(_this.pageType=='replenishmentDetailc'){ // 补货详情-已取消
  121. this.totalNums = this.totalNums + item.qty
  122. }else{
  123. this.totalNums = this.totalNums + item.qty
  124. }
  125. item.checked = false
  126. })
  127. this.partList = JSON.parse(JSON.stringify(newValue))
  128. this.pageType = this.fromPage
  129. }
  130. },
  131. onLoad() {
  132. this.theme = getApp().globalData.theme
  133. },
  134. data() {
  135. return {
  136. partList: this.list,
  137. totalNums: 0,
  138. pageType: this.fromPage,
  139. theme: ''
  140. }
  141. },
  142. methods: {
  143. // 全选
  144. allSelect(val){
  145. this.partList.map(item => {
  146. item.checked = val
  147. })
  148. this.partList.splice()
  149. },
  150. checkChange(e){
  151. const row = this.partList.find(item => item.id == e.name)
  152. console.log(row.checked)
  153. if(row){
  154. row.checked = !row.checked
  155. this.partList.splice()
  156. }
  157. // 判断是否全选
  158. const isAllNoChecked = this.partList.filter(item => !item.checked)
  159. this.$emit('allChecked',isAllNoChecked.length == 0)
  160. },
  161. // 获取所有选择的
  162. getAllChecked(){
  163. return this.partList.filter(item => item.checked)
  164. },
  165. // 获取所有数据
  166. getAllData(){
  167. return this.partList
  168. },
  169. // 数量 change
  170. numberChange(value, index){
  171. this.$emit('numberChange', value, index)
  172. }
  173. }
  174. }
  175. </script>
  176. <style lang="less" scoped>
  177. .partList-box{
  178. .nodata{
  179. padding: 10vh 0;
  180. }
  181. .partList-title{
  182. padding: 20rpx 0;
  183. > text{
  184. font-size: 32rpx;
  185. color: #222222;
  186. }
  187. > view{
  188. font-size: 32rpx;
  189. text{
  190. color: red;
  191. margin: 0 5rpx;
  192. }
  193. }
  194. }
  195. .partList-list-box{
  196. padding: 10px 0;
  197. border-bottom: 2rpx solid #f5f5f5;
  198. &:last-child{
  199. border:0;
  200. }
  201. .product{
  202. flex-grow: 1;
  203. .checkbox{
  204. width: 60rpx;
  205. }
  206. .pinfo{
  207. flex-grow: 1;
  208. padding-left: 20rpx;
  209. .pname{
  210. font-size: 32rpx;
  211. color: #191919;
  212. font-weight: bold;
  213. margin-bottom: 10rpx;
  214. }
  215. .pno{
  216. background-color: rgba(3, 54, 146, 0.15);
  217. border-radius: 50rpx;
  218. padding: 0 20rpx;
  219. color: #033692;
  220. font-size: 24rpx;
  221. margin-right: 10rpx;
  222. }
  223. .ptxt{
  224. font-size: 28rpx;
  225. color: #999;
  226. .pnums{
  227. color: #222;
  228. padding: 0 4upx;
  229. }
  230. }
  231. }
  232. }
  233. .ptools{
  234. margin-top: 20rpx;
  235. .pcurnums{
  236. > text{
  237. margin-right: 20rpx;
  238. }
  239. }
  240. .u-ninput{
  241. border: 2rpx solid #eee;
  242. border-radius: 50rpx;
  243. padding: 0 6rpx;
  244. }
  245. /deep/ .u-icon-disabled{
  246. background: #fff!important;
  247. }
  248. /deep/ .u-number-input{
  249. margin: 0 0;
  250. border: 2rpx solid #eee;
  251. border-top: 0;
  252. border-bottom: 0;
  253. }
  254. /deep/ .u-icon-plus, /deep/ .u-icon-minus{
  255. border-radius: 50rpx;
  256. }
  257. }
  258. }
  259. }
  260. </style>