addModal.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. <template>
  2. <a-modal
  3. centered
  4. class="purchaseReturn-basicInfo-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="itemSn?'编辑':'新增'"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="800">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. id="purchaseReturn-basicInfo-form"
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol" >
  19. <a-form-model-item label="供应商名称" prop="supplierSn">
  20. <supplier v-model="form.supplierSn" :disabledFlag="itemSn?true:false" placeholder="请输入供应商名称"></supplier>
  21. </a-form-model-item>
  22. <a-form-model-item label="退货原因" prop="returnReason">
  23. <v-select
  24. v-model="form.returnReason"
  25. ref="returnReason"
  26. id="purchaseReturn-basicInfo-returnReason"
  27. code="SPARE_PARTS_RETURN_REASON"
  28. placeholder="请选择退货原因"
  29. allowClear></v-select>
  30. </a-form-model-item>
  31. <a-form-model-item label="退货仓库" prop="warehouseSn" v-show="isShowWarehouse">
  32. <warehouse
  33. v-model="form.warehouseSn"
  34. id="purchaseReturn-basicInfo-warehouseSn"
  35. :disabled="itemSn?true:false"
  36. isPermission
  37. placeholder="请选择退货仓库"
  38. />
  39. </a-form-model-item>
  40. <a-form-model-item label="补充说明" prop="explainInfo">
  41. <a-textarea
  42. id="purchaseReturn"
  43. :maxLength="60"
  44. v-model="form.explainInfo"
  45. placeholder="具体描述下退货原因"
  46. allowClear />
  47. </a-form-model-item>
  48. <a-form-model-item label="附件" help="(支持图片、word、excel、PDF等格式,最多10个附件)">
  49. <Upload
  50. style="height: 100%;"
  51. id="allocateBill-attachList"
  52. v-model="form.attachmentList"
  53. ref="attachList"
  54. :fileSize="10"
  55. :maxNums="10"
  56. fileType="*"
  57. uploadType="attach"
  58. :action="attachAction"
  59. @change="changeAttach"
  60. upText="上传附件"></Upload>
  61. </a-form-model-item>
  62. </a-form-model>
  63. <div class="btn-cont">
  64. <a-button id="purchaseReturn-basicInfo-modal-back" @click="isShow = false">取消</a-button>
  65. <a-button style="margin-left: 15px;" type="primary" id="purchaseReturn-modal-save" @click="handleSave">确定</a-button>
  66. </div>
  67. </a-spin>
  68. </a-modal>
  69. </template>
  70. <script>
  71. import { commonMixin } from '@/utils/mixin'
  72. import { VSelect, Upload } from '@/components'
  73. import supplier from '@/views/common/supplier.js'
  74. import warehouse from '@/views/common/chooseWarehouse.js'
  75. import { sparePartsReturnSave, sparePartsReturnInfo } from '@/api/sparePartsReturn'
  76. export default {
  77. name: 'PurchaseReturnBasicInfoModal',
  78. mixins: [commonMixin],
  79. components: { VSelect, Upload, supplier, warehouse },
  80. props: {
  81. openModal: { // 弹框显示状态
  82. type: Boolean,
  83. default: false
  84. },
  85. itemSn: {
  86. type: [Number, String],
  87. default: ''
  88. }
  89. },
  90. data () {
  91. return {
  92. isShow: this.openModal, // 是否打开弹框
  93. spinning: false,
  94. formItemLayout: {
  95. labelCol: { span: 5 },
  96. wrapperCol: { span: 16 }
  97. },
  98. form: {
  99. supplierSn: undefined, // 供应商
  100. returnReason: '', // 退货原因
  101. explainInfo: '', // 补充说明
  102. warehouseSn: undefined,
  103. attachmentList: ''
  104. },
  105. attachList: [], // 附件
  106. rules: {
  107. supplierSn: [
  108. { required: true, message: '请选择供应商名称', trigger: 'change' }
  109. ],
  110. returnReason: [
  111. { required: true, message: '请选择退货原因', trigger: 'change' }
  112. ],
  113. warehouseSn: [{ required: true, message: '请选择退货仓库', trigger: 'change' }],
  114. },
  115. attachAction: process.env.VUE_APP_API_BASE_URL + '/uploadGetFileInfo'
  116. }
  117. },
  118. methods: {
  119. // 附件上传
  120. changeAttach (file) {
  121. this.attachList = JSON.parse(file)
  122. this.attachList.map(item => {
  123. item.fileType = item.extName
  124. })
  125. },
  126. // 保存
  127. handleSave () {
  128. const _this = this
  129. this.$refs.ruleForm.validate(valid => {
  130. if (valid) {
  131. const form = JSON.parse(JSON.stringify(_this.form))
  132. form.attachmentList = _this.attachList
  133. _this.spinning = true
  134. sparePartsReturnSave(form).then(res => {
  135. if (res.status == 200) {
  136. _this.$message.success(res.message)
  137. setTimeout(() => {
  138. _this.isShow = false
  139. _this.$emit('ok', res.data)
  140. _this.spinning = false
  141. }, 1000)
  142. } else {
  143. _this.spinning = false
  144. }
  145. })
  146. } else {
  147. return false
  148. }
  149. })
  150. },
  151. // 获取编辑详情
  152. getDetail () {
  153. sparePartsReturnInfo({ sn: this.itemSn }).then(res => {
  154. if (res.status == 200) {
  155. const resultObj = res.data
  156. this.attachList = resultObj.attachmentList
  157. const obj = {
  158. supplierSn: resultObj.supplierSn,
  159. returnReason: resultObj.returnReason, // 退货原因
  160. explainInfo: resultObj.explainInfo, // 补充说明
  161. warehouseSn: resultObj.warehouseSn,
  162. sparePartsReturnSn: this.itemSn
  163. }
  164. this.$nextTick(() => {
  165. this.$refs.attachList.setFileList(this.attachList)
  166. })
  167. this.form = { ...this.form, ...obj }
  168. } else {
  169. this.detailsData = null
  170. }
  171. })
  172. }
  173. },
  174. watch: {
  175. // 父页面传过来的弹框状态
  176. openModal (newValue, oldValue) {
  177. this.isShow = newValue
  178. },
  179. // 重定义的弹框状态
  180. isShow (newValue, oldValue) {
  181. if (!newValue) {
  182. this.$emit('close')
  183. this.attachList = []
  184. this.supplierName = null
  185. this.$nextTick(() => {
  186. this.$refs.attachList.setFileList('')
  187. this.$refs.ruleForm.resetFields()
  188. // 默认仓库
  189. this.form.warehouseSn = this.isShowWarehouse ? undefined : this.defWarehouse&&this.defWarehouse.warehouseSn
  190. })
  191. } else {
  192. if (this.itemSn) {
  193. this.getDetail()
  194. }
  195. }
  196. }
  197. }
  198. }
  199. </script>
  200. <style lang="less" scoped>
  201. .purchaseReturn-basicInfo-modal{
  202. .ant-modal-body {
  203. padding: 40px 40px 24px;
  204. }
  205. .btn-cont {
  206. text-align: center;
  207. margin: 35px 0 10px;
  208. }
  209. .ant-form-item:nth-child(4){
  210. margin-bottom: 0px !important;
  211. }
  212. }
  213. </style>