creatReplenishmentOrder.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. <template>
  2. <a-modal
  3. centered
  4. class="creatReplenish-confirm-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="modalTit"
  8. v-model="isShow"
  9. @cancel="isShow = false"
  10. width="80%">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <!-- 搜索条件 -->
  13. <div class="table-page-search-wrapper">
  14. <a-form-model
  15. ref="ruleForm"
  16. class="form-model-con"
  17. layout="inline"
  18. :model="queryParam"
  19. @keyup.enter.native="$refs.table.refresh(true)" >
  20. <a-row :gutter="5">
  21. <a-col :md="6" :sm="24">
  22. <a-form-model-item label="产品编码">
  23. <a-input id="chooseShelf-code" ref="searchProductCode" v-model.trim="queryParam.productCode" allowClear placeholder="请输入产品编码"/>
  24. </a-form-model-item>
  25. </a-col>
  26. <a-col :md="6" :sm="24">
  27. <a-form-model-item label="产品名称">
  28. <a-input id="chooseShelf-name" v-model.trim="queryParam.productName" allowClear placeholder="请输入产品名称"/>
  29. </a-form-model-item>
  30. </a-col>
  31. <a-col :md="10" :sm="24">
  32. <a-form-model-item label="库存情况">
  33. <a-checkbox-group :options="options" v-model="queryParam.stockStateList" @change="onStockChange" />
  34. </a-form-model-item>
  35. </a-col>
  36. <a-col :md="24" :sm="24" style="margin-bottom: 10px;text-align:right;">
  37. <a-button type="primary" @click="$refs.table.refresh(true)" id="chooseShelf-refresh">查询</a-button>
  38. <a-button style="margin-left: 5px" @click="resetSearchForm" id="chooseShelf-reset">重置</a-button>
  39. </a-col>
  40. </a-row>
  41. </a-form-model>
  42. </div>
  43. <div>
  44. <div class="table-operator">
  45. <div>
  46. <a-button type="primary" @click="handleSave">创建补货单</a-button>
  47. <span style="margin-left:20px;">已选{{ totalCategory }}款产品,共{{ totalQty }}件</span>
  48. </div>
  49. <div style="margin-left:20px;">
  50. <a-checkbox @change="changeShowChecked">
  51. 仅显示已选产品
  52. </a-checkbox>
  53. </div>
  54. </div>
  55. <!-- 列表 -->
  56. <s-table
  57. class="sTable"
  58. ref="table"
  59. size="small"
  60. :rowKey="(record) => record.id"
  61. :row-selection="{columnWidth: 40}"
  62. @rowSelection="rowSelectionFun"
  63. :columns="columns"
  64. :data="loadData"
  65. :style="{ height: '480px' }"
  66. :scroll="{ y: 450 }"
  67. :showPagination="false"
  68. bordered>
  69. <template slot="action" slot-scope="text, record">
  70. <a-input-number
  71. size="small"
  72. v-model="record.replenishQty"
  73. :precision="0"
  74. :min="1"
  75. placeholder="请输入"
  76. style="width: 100%" />
  77. </template>
  78. </s-table>
  79. </div>
  80. </a-spin>
  81. </a-modal>
  82. </template>
  83. <script>
  84. import { commonMixin } from '@/utils/mixin'
  85. import { STable, VSelect } from '@/components'
  86. import { queryProductListForReplenish } from '@/api/shelf'
  87. import { saveMainAndDetail } from '@/api/shelfReplenish'
  88. export default {
  89. name: 'CreatReplenishmentOrder',
  90. components: { STable, VSelect },
  91. mixins: [commonMixin],
  92. props: {
  93. openModal: { // 弹框显示状态
  94. type: Boolean,
  95. default: false
  96. },
  97. nowData: {
  98. type: Object,
  99. default: () => {
  100. return {}
  101. }
  102. }
  103. },
  104. computed: {
  105. modalTit () {
  106. const hjName = this.nowData ? this.nowData.shelfName : ''
  107. return '待补货产品 —— ' + hjName
  108. },
  109. columns () {
  110. const arr = [
  111. { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
  112. { title: '货位号', dataIndex: 'shelfPlaceCode', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  113. { title: '产品编码', dataIndex: 'productCode', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
  114. { title: '产品名称', dataIndex: 'productName', width: '18%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
  115. { title: '最大库容', dataIndex: 'maxQty', width: '8%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  116. { title: '货架库存', dataIndex: 'qty', width: '8%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  117. { title: '补货在途', dataIndex: 'replenishBillQty', width: '8%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  118. { title: '调回在途', dataIndex: 'recallBillQty', width: '8%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  119. { title: '待补货数量', dataIndex: 'replenishBillWaitQty', width: '8%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  120. { title: '门店库存数量', dataIndex: 'qplsStockQty', width: '8%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  121. { title: '单位', dataIndex: 'productUnit', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  122. { title: '本次补货数量', scopedSlots: { customRender: 'action' }, width: '10%', align: 'center' }
  123. ]
  124. return arr
  125. },
  126. totalCategory () {
  127. return this.rowSelectionInfo && this.rowSelectionInfo.selectedRows.length
  128. },
  129. totalQty () {
  130. let ret = 0
  131. this.rowSelectionInfo && this.rowSelectionInfo.selectedRows.map(item => {
  132. ret = ret + item.replenishQty
  133. })
  134. return ret
  135. }
  136. },
  137. data () {
  138. return {
  139. spinning: false,
  140. isShow: this.openModal, // 是否打开弹框
  141. options: [
  142. { label: '库存充足', value: 'stockEnough' },
  143. { label: '部分缺货', value: 'portionStockout' },
  144. { label: '全部缺货', value: 'allStockout' }
  145. ],
  146. queryParam: {
  147. productCode: '', // 产品编码
  148. productName: '', // 产品名称
  149. stockStateList: []
  150. },
  151. // 加载数据方法 必须为 Promise 对象
  152. loadData: parameter => {
  153. this.spinning = true
  154. this.disabled = true
  155. this.queryParam.shelfSn = this.nowData.shelfSn
  156. return queryProductListForReplenish(this.queryParam).then(res => {
  157. let data
  158. if (res.status == 200) {
  159. data = res.data
  160. if (this.showChecked) {
  161. data = this.rowSelectionInfo && this.rowSelectionInfo.selectedRows || []
  162. }
  163. for (var i = 0; i < data.length; i++) {
  164. data[i].no = i + 1
  165. const row = this.rowSelectionInfo && this.rowSelectionInfo.selectedRows || []
  166. const cur = row.find(item => item.id == data[i].id)
  167. data[i].replenishQty = cur ? cur.replenishQty : (data[i].replenishBillWaitQty || 1)
  168. }
  169. this.disabled = false
  170. }
  171. this.spinning = false
  172. return data
  173. })
  174. },
  175. rowSelectionInfo: null,
  176. showChecked: false
  177. }
  178. },
  179. methods: {
  180. onStockChange (val) {
  181. this.queryParam.stockStateList = val
  182. },
  183. // 显示已选产品
  184. changeShowChecked (e) {
  185. this.showChecked = e.target.checked
  186. this.$refs.table.refresh(true)
  187. },
  188. // 表格选中项
  189. rowSelectionFun (obj) {
  190. this.rowSelectionInfo = obj || null
  191. },
  192. // 重置
  193. resetSearchForm () {
  194. this.queryParam = {
  195. productCode: '', // 产品编码
  196. productName: '', // 产品名称
  197. stockStateList: []
  198. }
  199. this.showChecked = false
  200. this.$refs.table.clearSelected()
  201. this.$refs.table.refresh(true)
  202. },
  203. // 确认补货
  204. handleSave () {
  205. if (this.totalCategory) {
  206. const data = this.rowSelectionInfo && this.rowSelectionInfo.selectedRows || []
  207. const dataList = []
  208. data.map(item => {
  209. dataList.push({
  210. shelfPlaceSn: item.shelfPlaceSn,
  211. shelfPlaceCode: item.shelfPlaceCode,
  212. productSn: item.productSn,
  213. productCode: item.productCode,
  214. qty: item.replenishQty
  215. })
  216. })
  217. // 开始提交
  218. this.spinning = true
  219. saveMainAndDetail({
  220. shelfSn: this.nowData.shelfSn,
  221. dealerSn: this.nowData.dealerSn,
  222. detailList: dataList
  223. }).then(res => {
  224. if (res.status == 200) {
  225. this.$message.success(res.message)
  226. this.$emit('ok')
  227. this.$emit('close')
  228. }
  229. this.spinning = false
  230. })
  231. } else {
  232. this.$message.info('请选择产品')
  233. }
  234. }
  235. },
  236. watch: {
  237. // 父页面传过来的弹框状态
  238. openModal (newValue, oldValue) {
  239. this.isShow = newValue
  240. },
  241. // 重定义的弹框状态
  242. isShow (newValue, oldValue) {
  243. if (!newValue) {
  244. this.$emit('close')
  245. } else {
  246. this.$nextTick(() => {
  247. this.resetSearchForm()
  248. })
  249. }
  250. }
  251. }
  252. }
  253. </script>
  254. <style lang="less">
  255. .creatReplenish-confirm-modal {
  256. .table-operator {
  257. padding:0 10px 10px 0;
  258. display:flex;
  259. align-items: center;
  260. }
  261. }
  262. </style>