creatReplenishmentOrder.vue 10 KB

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