outWarehousingModal.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  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" :maxLength="100" v-model.trim="form.remarks" allowClear placeholder="请输入出库备注(最多100字符)"/>
  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: '29%', align: 'center', customRender: function (text) { return text || '--' } },
  88. { title: '产品名称', dataIndex: 'product.name', width: '40%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
  89. { title: '补货数量', dataIndex: 'confirmQty', width: '15%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  90. { title: '单位', dataIndex: 'product.unit', width: '8%', align: 'center', customRender: function (text) { return text || '--' } }
  91. ],
  92. // 加载数据方法 必须为 Promise 对象
  93. loadData: parameter => {
  94. this.disabled = true
  95. this.spinning = true
  96. return shelfReplenishDetailList({ replenishBillSn: this.nowData && this.nowData.replenishBillSn }).then(res => {
  97. let data
  98. if (res.status == 200) {
  99. data = res.data
  100. for (var i = 0; i < data.length; i++) {
  101. data[i].no = i + 1
  102. }
  103. this.disabled = false
  104. this.listData = data || []
  105. }
  106. this.spinning = false
  107. return data
  108. })
  109. },
  110. form: {
  111. dispatchType: undefined,
  112. remarks: ''
  113. },
  114. rules: {
  115. 'dispatchType': [{ required: true, message: '请选择配送方式', trigger: ['blur', 'change'] }]
  116. },
  117. dispatchTypeList: [
  118. { name: '送货到店', val: 1 },
  119. { name: '快递到店', val: 2 }
  120. ],
  121. listData: [],
  122. basicInfoData: null
  123. }
  124. },
  125. computed: {
  126. modalTit () {
  127. const hjName = this.nowData && this.nowData.shelfInfo.shelfName ? this.nowData.shelfInfo.shelfName : ''
  128. return '补货单出库——' + hjName
  129. }
  130. },
  131. methods: {
  132. // 确认出库
  133. handleSave () {
  134. const _this = this
  135. this.$refs.ruleForm.validate(valid => {
  136. if (valid) {
  137. _this.$confirm({
  138. title: '提示',
  139. content: '确认信息无误并进行出库吗?',
  140. centered: true,
  141. onOk () {
  142. const arr = []
  143. _this.listData.map((item, index) => {
  144. arr.push({
  145. productSn: item.productSn,
  146. confirmQty: item.confirmQty,
  147. replenishBillDetailSn: item.replenishBillDetailSn,
  148. id: item.id
  149. })
  150. })
  151. const params = {
  152. replenishBillSn: _this.nowData && _this.nowData.replenishBillSn,
  153. detailList: arr,
  154. dispatchType: _this.form.dispatchType,
  155. remarks: _this.form.remarks,
  156. shelfSn: _this.nowData && _this.nowData.shelfSn
  157. }
  158. _this.spinning = true
  159. shelfReplenishOutStock(params).then(res => {
  160. if (res.status == 200) {
  161. _this.$message.success(res.message)
  162. _this.$emit('ok')
  163. _this.spinning = false
  164. _this.isShow = false
  165. } else {
  166. _this.spinning = false
  167. }
  168. })
  169. }
  170. })
  171. } else {
  172. console.log('error submit!!')
  173. return false
  174. }
  175. })
  176. },
  177. // 基本信息
  178. getDetail () {
  179. shelfReplenishDetail({ sn: this.nowData && this.nowData.replenishBillSn }).then(res => {
  180. if (res.status == 200) {
  181. this.basicInfoData = res.data
  182. } else {
  183. this.basicInfoData = null
  184. }
  185. })
  186. },
  187. // 配送方式
  188. getLookUpItem () {
  189. getLookUpItem({ lookupCode: 'DISTRIBUTION_MODE', pageNo: 1, pageSize: 1000 }).then(res => {
  190. if (res.status == 200 && res.data && res.data.list) {
  191. this.dispatchTypeList = res.data.list
  192. } else {
  193. this.basicInfoData = []
  194. }
  195. })
  196. }
  197. },
  198. watch: {
  199. // 父页面传过来的弹框状态
  200. openModal (newValue, oldValue) {
  201. this.isShow = newValue
  202. },
  203. // 重定义的弹框状态
  204. isShow (newValue, oldValue) {
  205. if (!newValue) {
  206. this.$emit('close')
  207. this.$refs.table.clearTable()
  208. this.form.remarks = ''
  209. this.$refs.ruleForm.resetFields()
  210. } else {
  211. const _this = this
  212. // this.getLookUpItem()
  213. this.getDetail()
  214. this.$nextTick(() => { // 页面渲染完成后的回调
  215. _this.$refs.table.refresh(true)
  216. })
  217. }
  218. }
  219. }
  220. }
  221. </script>
  222. <style lang="less">
  223. .replenishmentManagement-outWarehousing-modal {
  224. .btn-cont {
  225. text-align: center;
  226. margin: 35px 0 10px;
  227. }
  228. }
  229. </style>