creatReplenishmentOrder.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  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. return queryProductListForReplenish(this.queryParam).then(res => {
  162. let data
  163. if (res.status == 200) {
  164. data = res.data
  165. if (this.showChecked) {
  166. data = this.rowSelectionInfo && this.rowSelectionInfo.selectedRows || []
  167. }
  168. for (var i = 0; i < data.length; i++) {
  169. data[i].no = i + 1
  170. const row = this.rowSelectionInfo && this.rowSelectionInfo.selectedRows || []
  171. const cur = row.find(item => item.id == data[i].id)
  172. data[i].replenishQty = cur ? cur.replenishQty : (data[i].replenishBillWaitQty || 1)
  173. data[i].checked = !cur
  174. }
  175. this.disabled = false
  176. }
  177. this.spinning = false
  178. this.allData = data
  179. return data
  180. })
  181. },
  182. rowSelectionInfo: null,
  183. showChecked: false
  184. }
  185. },
  186. methods: {
  187. onStockChange (val) {
  188. this.queryParam.stockStateList = val
  189. },
  190. // 显示已选产品
  191. changeShowChecked (e) {
  192. this.showChecked = e.target.checked
  193. this.$refs.table.refresh(true)
  194. },
  195. // 表格选中项
  196. rowSelectionFun (obj) {
  197. this.rowSelectionInfo = obj || null
  198. },
  199. hasChecked: function (value) {
  200. const row = this.rowSelectionInfo && this.rowSelectionInfo.selectedRows || []
  201. const cur = row.find(item => item.id == value)
  202. return !cur
  203. },
  204. changeNums (data) {
  205. const row = this.rowSelectionInfo && this.rowSelectionInfo.selectedRows || []
  206. const cur = row.find(item => item.id == data.id)
  207. if (cur) {
  208. cur.replenishQty = data.replenishQty
  209. }
  210. row.splice()
  211. },
  212. // 重置
  213. resetSearchForm () {
  214. this.queryParam = {
  215. productCode: '', // 产品编码
  216. productName: '', // 产品名称
  217. stockStateList: []
  218. }
  219. this.$refs.table.refresh(true)
  220. },
  221. // 确认补货
  222. handleSave () {
  223. if (this.totalCategory) {
  224. const data = this.rowSelectionInfo && this.rowSelectionInfo.selectedRows || []
  225. const dataList = []
  226. data.map(item => {
  227. dataList.push({
  228. shelfPlaceSn: item.shelfPlaceSn,
  229. shelfPlaceCode: item.shelfPlaceCode,
  230. productSn: item.productSn,
  231. productCode: item.productCode,
  232. qty: item.replenishQty
  233. })
  234. })
  235. // 开始提交
  236. this.spinning = true
  237. saveMainAndDetail({
  238. shelfSn: this.nowData.shelfSn,
  239. dealerSn: this.nowData.dealerSn,
  240. detailList: dataList
  241. }).then(res => {
  242. if (res.status == 200) {
  243. this.$message.success(res.message)
  244. this.$emit('ok')
  245. this.$emit('close')
  246. }
  247. this.spinning = false
  248. })
  249. } else {
  250. this.$message.info('请选择产品')
  251. }
  252. }
  253. },
  254. watch: {
  255. // 父页面传过来的弹框状态
  256. openModal (newValue, oldValue) {
  257. this.isShow = newValue
  258. },
  259. // 重定义的弹框状态
  260. isShow (newValue, oldValue) {
  261. if (!newValue) {
  262. this.$emit('close')
  263. } else {
  264. this.$nextTick(() => {
  265. this.resetSearchForm()
  266. this.$refs.table.clearSelected()
  267. this.showChecked = false
  268. })
  269. }
  270. }
  271. }
  272. }
  273. </script>
  274. <style lang="less">
  275. .creatReplenish-confirm-modal {
  276. .table-operator {
  277. padding:0 10px 10px 0;
  278. display:flex;
  279. align-items: center;
  280. }
  281. }
  282. </style>