outWarehousingModal.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  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-form-model
  13. id="replenishmentManagement-outWarehousing-form"
  14. ref="ruleForm"
  15. layout="inline"
  16. :model="form"
  17. :rules="rules"
  18. style="margin-bottom: 10px;" >
  19. <a-row :gutter="15">
  20. <a-col :md="12" :sm="24">
  21. <a-form-model-item label="补货单号">{{ basicInfoData && basicInfoData.replenishBillNo || '--' }}</a-form-model-item>
  22. </a-col>
  23. <a-col :md="12" :sm="24">
  24. <a-form-model-item label="创建时间">{{ basicInfoData && basicInfoData.createDate || '--' }}</a-form-model-item>
  25. </a-col>
  26. <!-- <a-col :md="12" :sm="24">
  27. <a-form-model-item label="配送方式" prop="dispatchType" style="margin: 0;">
  28. <a-radio-group v-model="form.dispatchType">
  29. <a-radio v-for="(item,index) in dispatchTypeList" :key="index" :value="item.code">{{ item.dispName }}</a-radio>
  30. </a-radio-group>
  31. </a-form-model-item>
  32. </a-col> -->
  33. <a-col :md="24" :sm="24">
  34. <a-form-model-item label="出库备注">
  35. <a-input id="replenishmentManagement-outWarehousing-remarks" v-model.trim="form.remarks" allowClear placeholder="请输入出库备注"/>
  36. </a-form-model-item>
  37. </a-col>
  38. </a-row>
  39. </a-form-model>
  40. <!-- 列表 -->
  41. <s-table
  42. class="sTable"
  43. ref="table"
  44. size="small"
  45. :rowKey="(record) => record.id"
  46. :columns="columns"
  47. :data="loadData"
  48. :scroll="{ y: 400 }"
  49. :showPagination="false"
  50. :defaultLoadData="false"
  51. bordered>
  52. </s-table>
  53. <div class="btn-cont">
  54. <a-button type="primary" id="replenishmentManagement-outWarehousing-modal-save" @click="handleSave">确认出库</a-button>
  55. <a-button id="replenishmentManagement-outWarehousing-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  56. </div>
  57. </a-spin>
  58. </a-modal>
  59. </template>
  60. <script>
  61. import { commonMixin } from '@/utils/mixin'
  62. import { STable, VSelect } from '@/components'
  63. import { getLookUpItem } from '@/api/lookup'
  64. import { shelfReplenishDetailList, shelfReplenishDetail, shelfReplenishOutStock } from '@/api/shelfReplenish'
  65. export default {
  66. name: 'OutWarehousingModal',
  67. components: { STable, VSelect },
  68. mixins: [commonMixin],
  69. props: {
  70. openModal: { // 弹框显示状态
  71. type: Boolean,
  72. default: false
  73. },
  74. nowData: {
  75. type: Object,
  76. default: () => {
  77. return {}
  78. }
  79. }
  80. },
  81. data () {
  82. return {
  83. spinning: false,
  84. isShow: this.openModal, // 是否打开弹框
  85. columns: [
  86. { title: '序号', dataIndex: 'no', width: '8%', align: 'center' },
  87. { title: '产品编码', dataIndex: 'product.code', width: '22%', align: 'center', customRender: function (text) { return text || '--' } },
  88. { title: '产品名称', dataIndex: 'product.name', width: '32%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
  89. { title: '补货应发数量', dataIndex: 'qty', width: '15%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  90. { title: '实发数量', dataIndex: 'confirmQty', width: '15%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  91. { title: '单位', dataIndex: 'product.unit', width: '8%', align: 'center', customRender: function (text) { return text || '--' } }
  92. ],
  93. // 加载数据方法 必须为 Promise 对象
  94. loadData: parameter => {
  95. this.disabled = true
  96. this.spinning = true
  97. return shelfReplenishDetailList({ replenishBillSn: this.nowData && this.nowData.replenishBillSn }).then(res => {
  98. let data
  99. if (res.status == 200) {
  100. data = res.data
  101. for (var i = 0; i < data.length; i++) {
  102. data[i].no = i + 1
  103. }
  104. this.disabled = false
  105. this.listData = data || []
  106. }
  107. this.spinning = false
  108. return data
  109. })
  110. },
  111. form: {
  112. dispatchType: undefined,
  113. remarks: ''
  114. },
  115. rules: {
  116. 'dispatchType': [{ required: true, message: '请选择配送方式', trigger: ['blur', 'change'] }]
  117. },
  118. dispatchTypeList: [
  119. { name: '送货到店', val: 1 },
  120. { name: '快递到店', val: 2 }
  121. ],
  122. listData: [],
  123. basicInfoData: null
  124. }
  125. },
  126. computed: {
  127. modalTit () {
  128. const hjName = this.nowData && this.nowData.shelfInfo.shelfName ? this.nowData.shelfInfo.shelfName : ''
  129. return '补货单出库——' + hjName
  130. }
  131. },
  132. methods: {
  133. // 确认出库
  134. handleSave () {
  135. const _this = this
  136. this.$refs.ruleForm.validate(valid => {
  137. if (valid) {
  138. _this.$confirm({
  139. title: '提示',
  140. content: '确认信息无误并进行出库吗?',
  141. centered: true,
  142. onOk () {
  143. const arr = []
  144. _this.listData.map((item, index) => {
  145. arr.push({
  146. productSn: item.productSn,
  147. confirmQty: item.confirmQty,
  148. replenishBillDetailSn: item.replenishBillDetailSn,
  149. id: item.id
  150. })
  151. })
  152. const params = {
  153. replenishBillSn: _this.nowData && _this.nowData.replenishBillSn,
  154. detailList: arr,
  155. dispatchType: _this.form.dispatchType,
  156. remarks: _this.form.remarks,
  157. shelfSn: _this.nowData && _this.nowData.shelfSn
  158. }
  159. _this.spinning = true
  160. shelfReplenishOutStock(params).then(res => {
  161. if (res.status == 200) {
  162. _this.$message.success(res.message)
  163. _this.$emit('ok')
  164. _this.spinning = false
  165. _this.isShow = false
  166. } else {
  167. _this.spinning = false
  168. }
  169. })
  170. }
  171. })
  172. } else {
  173. console.log('error submit!!')
  174. return false
  175. }
  176. })
  177. },
  178. // 基本信息
  179. getDetail () {
  180. shelfReplenishDetail({ sn: this.nowData && this.nowData.replenishBillSn }).then(res => {
  181. if (res.status == 200) {
  182. this.basicInfoData = res.data
  183. } else {
  184. this.basicInfoData = null
  185. }
  186. })
  187. },
  188. // 配送方式
  189. getLookUpItem () {
  190. getLookUpItem({ lookupCode: 'DISTRIBUTION_MODE', pageNo: 1, pageSize: 1000 }).then(res => {
  191. if (res.status == 200 && res.data && res.data.list) {
  192. this.dispatchTypeList = res.data.list
  193. } else {
  194. this.basicInfoData = []
  195. }
  196. })
  197. }
  198. },
  199. watch: {
  200. // 父页面传过来的弹框状态
  201. openModal (newValue, oldValue) {
  202. this.isShow = newValue
  203. },
  204. // 重定义的弹框状态
  205. isShow (newValue, oldValue) {
  206. if (!newValue) {
  207. this.$emit('close')
  208. this.$refs.table.clearTable()
  209. this.form.remarks = ''
  210. this.$refs.ruleForm.resetFields()
  211. } else {
  212. const _this = this
  213. // this.getLookUpItem()
  214. this.getDetail()
  215. this.$nextTick(() => { // 页面渲染完成后的回调
  216. _this.$refs.table.refresh(true)
  217. })
  218. }
  219. }
  220. }
  221. }
  222. </script>
  223. <style lang="less">
  224. .replenishmentManagement-outWarehousing-modal {
  225. .btn-cont {
  226. text-align: center;
  227. margin: 35px 0 10px;
  228. }
  229. }
  230. </style>