putWarehousingModal.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. <template>
  2. <a-modal
  3. centered
  4. class="replenishmentManagement-outWarehousing-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="modalTit"
  8. v-model="isShow"
  9. @cancel="isShow = false"
  10. :width="800">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-descriptions>
  13. <a-descriptions-item label="补货单号">{{ basicInfoData && basicInfoData.replenishBillNo || '--' }}</a-descriptions-item>
  14. <a-descriptions-item label="创建时间">{{ basicInfoData && basicInfoData.createDate || '--' }}</a-descriptions-item>
  15. <!-- <a-descriptions-item label="配送方式">{{ basicInfoData && basicInfoData.dispatchTypeDictValue || '--' }}</a-descriptions-item> -->
  16. </a-descriptions>
  17. <div style="padding-bottom: 16px;display: flex;">
  18. <p style="margin: 0;display: inline-block;flex-shrink: 0;">出库备注:</p>
  19. <div style="display: inline-block;vertical-align: bottom;flex-grow: 1;max-width: 90%;cursor: pointer;">
  20. <a-tooltip placement="bottom">
  21. <template slot="title">
  22. <span>{{ basicInfoData && basicInfoData.remarks || '--' }}</span>
  23. </template>
  24. <p class="text-ellipsis">{{ basicInfoData && basicInfoData.remarks || '--' }}</p>
  25. </a-tooltip>
  26. </div>
  27. </div>
  28. <!-- 列表 -->
  29. <s-table
  30. class="sTable"
  31. ref="table"
  32. size="small"
  33. :rowKey="(record) => record.id"
  34. :columns="columns"
  35. :data="loadData"
  36. :scroll="{ y: 400 }"
  37. :showPagination="false"
  38. :defaultLoadData="false"
  39. bordered>
  40. <!-- 签收数量 -->
  41. <template slot="putQty" slot-scope="text, record">
  42. <a-input-number
  43. v-if="record.qty&&record.qty!=0"
  44. size="small"
  45. id="replenishmentManagement-outWarehousing-putQty"
  46. v-model="record.putQty"
  47. :precision="0"
  48. :min="0"
  49. :max="999999"
  50. placeholder="请输入"
  51. style="width: 100%" />
  52. <span v-else>--</span>
  53. </template>
  54. </s-table>
  55. <div class="btn-cont">
  56. <a-button type="primary" id="replenishmentManagement-outWarehousing-modal-save" @click="handleSave">确认签收</a-button>
  57. <a-button id="replenishmentManagement-outWarehousing-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  58. </div>
  59. </a-spin>
  60. </a-modal>
  61. </template>
  62. <script>
  63. import { commonMixin } from '@/utils/mixin'
  64. import { STable, VSelect } from '@/components'
  65. import { shelfReplenishDetailList, shelfReplenishDetail, shelfReplenishPutStock } from '@/api/shelfReplenish'
  66. export default {
  67. name: 'PutWarehousingModal',
  68. components: { STable, VSelect },
  69. mixins: [commonMixin],
  70. props: {
  71. openModal: { // 弹框显示状态
  72. type: Boolean,
  73. default: false
  74. },
  75. nowData: {
  76. type: Object,
  77. default: () => {
  78. return {}
  79. }
  80. }
  81. },
  82. data () {
  83. return {
  84. spinning: false,
  85. isShow: this.openModal, // 是否打开弹框
  86. columns: [
  87. { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
  88. { title: '产品编码', dataIndex: 'product.code', width: '22%', align: 'center', customRender: function (text) { return text || '--' } },
  89. { title: '产品名称', dataIndex: 'product.name', width: '28%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
  90. { title: '补货数量', dataIndex: 'qty', width: '12%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  91. { title: '签收数量', scopedSlots: { customRender: 'putQty' }, width: '15%', align: 'center' },
  92. { title: '单位', dataIndex: 'product.unit', width: '6%', align: 'center', customRender: function (text) { return text || '--' } }
  93. ],
  94. // 加载数据方法 必须为 Promise 对象
  95. loadData: parameter => {
  96. this.disabled = true
  97. this.spinning = true
  98. return shelfReplenishDetailList({ replenishBillSn: this.nowData && this.nowData.replenishBillSn }).then(res => {
  99. let data
  100. if (res.status == 200) {
  101. data = res.data
  102. for (var i = 0; i < data.length; i++) {
  103. data[i].no = i + 1
  104. data[i].putQty = data[i].qty
  105. }
  106. this.disabled = false
  107. this.listData = data || []
  108. }
  109. this.spinning = false
  110. return data
  111. })
  112. },
  113. listData: [],
  114. basicInfoData: null
  115. }
  116. },
  117. computed: {
  118. modalTit () {
  119. const hjName = this.nowData && this.nowData.shelfInfo.shelfName ? this.nowData.shelfInfo.shelfName : ''
  120. return '补货单签收——' + hjName
  121. }
  122. },
  123. methods: {
  124. // 确认签收
  125. handleSave () {
  126. const _this = this
  127. this.$confirm({
  128. title: '提示',
  129. content: '签收后数字货架的产品数量将增加,确认签收吗?',
  130. centered: true,
  131. onOk () {
  132. const arr = []
  133. const arrInd = []
  134. _this.listData.map((item, index) => {
  135. if (item.putQty || item.putQty == 0) {
  136. arr.push({
  137. productSn: item.productSn,
  138. putQty: item.putQty,
  139. replenishBillDetailSn: item.replenishBillDetailSn,
  140. shelfPlaceSn: item.shelfPlaceSn,
  141. shelfPlaceCode: item.shelfPlaceCode,
  142. id: item.id
  143. })
  144. } else if ((item.confirmQty || item.confirmQty == 0) && !(item.putQty || item.putQty == 0)) {
  145. arrInd.push(index + 1)
  146. }
  147. })
  148. if (arrInd.length > 0) {
  149. _this.$message.warning('操作失败!签收数量不能为空')
  150. return
  151. }
  152. const params = {
  153. replenishBillSn: _this.nowData && _this.nowData.replenishBillSn,
  154. detailList: arr
  155. }
  156. _this.spinning = true
  157. shelfReplenishPutStock(params).then(res => {
  158. if (res.status == 200) {
  159. _this.$message.success(res.message)
  160. _this.$emit('ok')
  161. _this.spinning = false
  162. _this.isShow = false
  163. } else {
  164. _this.spinning = false
  165. }
  166. })
  167. }
  168. })
  169. },
  170. // 基本信息
  171. getDetail () {
  172. shelfReplenishDetail({ sn: this.nowData && this.nowData.replenishBillSn }).then(res => {
  173. if (res.status == 200) {
  174. this.basicInfoData = res.data
  175. } else {
  176. this.basicInfoData = null
  177. }
  178. })
  179. }
  180. },
  181. watch: {
  182. // 父页面传过来的弹框状态
  183. openModal (newValue, oldValue) {
  184. this.isShow = newValue
  185. },
  186. // 重定义的弹框状态
  187. isShow (newValue, oldValue) {
  188. if (!newValue) {
  189. this.$emit('close')
  190. this.$refs.table.clearTable()
  191. } else {
  192. const _this = this
  193. this.getDetail()
  194. this.$nextTick(() => { // 页面渲染完成后的回调
  195. _this.$refs.table.refresh(true)
  196. })
  197. }
  198. }
  199. }
  200. }
  201. </script>
  202. <style lang="less">
  203. .replenishmentManagement-outWarehousing-modal {
  204. .text-ellipsis{
  205. margin: 0;
  206. overflow:hidden;
  207. text-overflow:ellipsis;
  208. display:-webkit-box;
  209. -webkit-box-orient:vertical;
  210. -webkit-line-clamp:1;
  211. }
  212. .btn-cont {
  213. text-align: center;
  214. margin: 35px 0 10px;
  215. }
  216. }
  217. </style>