putWarehousingModal.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  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. // 弹框标题
  119. modalTit () {
  120. const hjName = this.nowData && this.nowData.shelfInfo.shelfName ? this.nowData.shelfInfo.shelfName : ''
  121. return '补货单签收——' + hjName
  122. }
  123. },
  124. methods: {
  125. // 确认签收
  126. handleSave () {
  127. const _this = this
  128. this.$confirm({
  129. title: '提示',
  130. content: '签收后数字货架的产品数量将增加,确认签收吗?',
  131. centered: true,
  132. onOk () {
  133. const arr = []
  134. const arrInd = []
  135. _this.listData.map((item, index) => {
  136. if (item.putQty || item.putQty == 0) {
  137. arr.push({
  138. productSn: item.productSn,
  139. putQty: item.putQty,
  140. replenishBillDetailSn: item.replenishBillDetailSn,
  141. shelfPlaceSn: item.shelfPlaceSn,
  142. shelfPlaceCode: item.shelfPlaceCode,
  143. id: item.id
  144. })
  145. } else if ((item.confirmQty || item.confirmQty == 0) && !(item.putQty || item.putQty == 0)) {
  146. arrInd.push(index + 1)
  147. }
  148. })
  149. if (arrInd.length > 0) {
  150. _this.$message.warning('操作失败!签收数量不能为空')
  151. return
  152. }
  153. const params = {
  154. replenishBillSn: _this.nowData && _this.nowData.replenishBillSn,
  155. detailList: arr
  156. }
  157. _this.spinning = true
  158. shelfReplenishPutStock(params).then(res => {
  159. if (res.status == 200) {
  160. _this.$message.success(res.message)
  161. _this.$emit('ok')
  162. _this.spinning = false
  163. _this.isShow = false
  164. } else {
  165. _this.spinning = false
  166. }
  167. })
  168. }
  169. })
  170. },
  171. // 基本信息
  172. getDetail () {
  173. shelfReplenishDetail({ sn: this.nowData && this.nowData.replenishBillSn }).then(res => {
  174. if (res.status == 200) {
  175. this.basicInfoData = res.data
  176. } else {
  177. this.basicInfoData = null
  178. }
  179. })
  180. }
  181. },
  182. watch: {
  183. // 父页面传过来的弹框状态
  184. openModal (newValue, oldValue) {
  185. this.isShow = newValue
  186. },
  187. // 重定义的弹框状态
  188. isShow (newValue, oldValue) {
  189. if (!newValue) {
  190. this.$emit('close')
  191. this.$refs.table.clearTable()
  192. } else {
  193. const _this = this
  194. this.getDetail()
  195. this.$nextTick(() => { // 页面渲染完成后的回调
  196. _this.$refs.table.refresh(true)
  197. })
  198. }
  199. }
  200. }
  201. }
  202. </script>
  203. <style lang="less">
  204. .replenishmentManagement-outWarehousing-modal {
  205. .text-ellipsis{
  206. margin: 0;
  207. overflow:hidden;
  208. text-overflow:ellipsis;
  209. display:-webkit-box;
  210. -webkit-box-orient:vertical;
  211. -webkit-line-clamp:1;
  212. }
  213. .btn-cont {
  214. text-align: center;
  215. margin: 35px 0 10px;
  216. }
  217. }
  218. </style>