basicInfoModal.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. <template>
  2. <a-modal
  3. centered
  4. class="purchaseReceipt-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="purchaseReceipt-basicInfo-form"
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol" >
  19. <!-- 只显示福麦斯供应商-->
  20. <a-form-model-item label="供应商名称" prop="supplierSn">
  21. <supplier v-model="form.supplierSn" enableFlag="1" pageSn="福麦斯" isPermission placeholder="请输入供应商名称"></supplier>
  22. </a-form-model-item>
  23. <a-form-model-item label="仓库仓位" prop="warehouseSn">
  24. <a-select
  25. v-if="warehouseCascadeData && warehouseCascadeData.length>0"
  26. id="purchaseReceipt-basicInfo-warehouseSn"
  27. @change="changeWarehouse"
  28. placeholder="请选择仓库"
  29. :allowClear="false"
  30. v-model="form.warehouseSn"
  31. style="width: 49%;margin-right:1%;">
  32. <a-select-option v-for="item in warehouseCascadeData" :value="item.warehouseSn">
  33. {{ item.name }}
  34. </a-select-option>
  35. </a-select>
  36. <a-select
  37. id="purchaseReceipt-basicInfo-warehouseLocationSn"
  38. placeholder="请选择仓位"
  39. :allowClear="false"
  40. v-model="form.warehouseLocationSn"
  41. :disabled="!cascadeList"
  42. style="width: 50%;">
  43. <a-select-option v-for="con in cascadeList" :value="con.warehouseLocationSn">
  44. {{ con.name }}
  45. </a-select-option>
  46. </a-select>
  47. </a-form-model-item>
  48. <a-form-model-item label="客户名称" >
  49. <span>{{ (itemData&&itemData.dealerName)||'--' }}</span>
  50. </a-form-model-item>
  51. <a-form-model-item label="关联单号" >
  52. <span>{{ (itemData&&itemData.lockBizNo)||'--' }}</span>
  53. </a-form-model-item>
  54. <a-form-model-item label="备注">
  55. <span>{{ (itemData&&itemData.bizRemark)||'--' }}</span>
  56. </a-form-model-item>
  57. </a-form-model>
  58. <div class="btn-cont">
  59. <a-button id="purchaseReceipt-basicInfo-modal-cancle" @click="isShow = false">取消</a-button>
  60. <a-button style="margin-left: 15px;" type="primary" id="purchaseReceipt-basicInfo-modal-save" @click="handleSave">确定</a-button>
  61. </div>
  62. </a-spin>
  63. </a-modal>
  64. </template>
  65. <script>
  66. import { commonMixin } from '@/utils/mixin'
  67. // 组件
  68. import { VSelect } from '@/components'
  69. import supplier from '@/views/common/supplier.js'
  70. import warehouse from '@/views/common/chooseWarehouse.js'
  71. // 接口
  72. import { detailBaseSave } from '@/api/purchase'
  73. import { warehouseCascadeList } from '@/api/warehouse'
  74. export default {
  75. name: 'PurchaseReceiptBasicInfoModal',
  76. mixins: [commonMixin],
  77. components: { VSelect, supplier, warehouse },
  78. props: {
  79. openModal: { // 弹框显示状态
  80. type: Boolean,
  81. default: false
  82. },
  83. itemSn: {
  84. type: [Number, String],
  85. default: ''
  86. },
  87. itemData: {
  88. type: Object,
  89. default: () => {}
  90. }
  91. },
  92. data () {
  93. return {
  94. spinning: false,
  95. isShow: this.openModal, // 是否打开弹框
  96. // form 表单样式设置
  97. formItemLayout: {
  98. labelCol: { span: 5 },
  99. wrapperCol: { span: 16 }
  100. },
  101. warehouseCascadeData: [], // 仓库仓位级联列表
  102. cascadeList: null, // 仓位列表
  103. form: {
  104. supplierSn: undefined, // 供应商
  105. warehouseSn: undefined, // 仓库
  106. warehouseLocationSn: undefined // 仓位
  107. },
  108. // 表单验证规则
  109. rules: {
  110. supplierSn: [
  111. { required: true, message: '请选择供应商名称', trigger: 'change' }
  112. ],
  113. warehouseSn: [{ required: true, message: '请选择入库仓库', trigger: 'change' }]
  114. }
  115. }
  116. },
  117. methods: {
  118. // 获取仓库仓位 级联列表
  119. getWarehouseCascade () {
  120. const _this = this
  121. warehouseCascadeList({}).then(res => {
  122. if (res.status == 200) {
  123. _this.warehouseCascadeData = res.data
  124. _this.form.supplierSn = '544577718475575296'
  125. } else {
  126. _this.warehouseCascadeData = []
  127. }
  128. })
  129. },
  130. // 仓库 change
  131. changeWarehouse (val) {
  132. const pos = this.warehouseCascadeData.findIndex(item => item.warehouseSn === val)
  133. if (pos != -1) {
  134. this.cascadeList = this.warehouseCascadeData[pos].warehouseLocationList || null
  135. this.form.warehouseLocationSn = (this.cascadeList && this.cascadeList.length > 0) ? this.cascadeList[0].warehouseLocationSn : undefined
  136. }
  137. },
  138. // 保存
  139. handleSave () {
  140. const _this = this
  141. this.$refs.ruleForm.validate(valid => {
  142. if (valid) {
  143. const form = JSON.parse(JSON.stringify(_this.form))
  144. if (!form.warehouseLocationSn) {
  145. _this.$message.warning('请选择仓位')
  146. return
  147. }
  148. form.sparePartsSn = _this.itemSn
  149. _this.spinning = true
  150. detailBaseSave(form).then(res => {
  151. if (res.status == 200) {
  152. _this.$message.success(res.message)
  153. setTimeout(() => {
  154. _this.isShow = false
  155. _this.$emit('ok')
  156. _this.spinning = false
  157. }, 1000)
  158. } else {
  159. _this.spinning = false
  160. }
  161. })
  162. } else {
  163. return false
  164. }
  165. })
  166. }
  167. },
  168. watch: {
  169. // 父页面传过来的弹框状态
  170. openModal (newValue, oldValue) {
  171. this.isShow = newValue
  172. },
  173. 'form.supplierSn' (newVal, oldVal) {
  174. if (newVal == '544577718475575296') {
  175. this.form.warehouseSn = '546323677073133568'
  176. this.changeWarehouse('546323677073133568')
  177. }
  178. },
  179. // 重定义的弹框状态
  180. isShow (newValue, oldValue) {
  181. if (!newValue) {
  182. this.$emit('close')
  183. this.$nextTick(() => {
  184. this.$refs.ruleForm.resetFields()
  185. })
  186. } else {
  187. this.getWarehouseCascade()
  188. }
  189. }
  190. }
  191. }
  192. </script>
  193. <style lang="less" scoped>
  194. .purchaseReceipt-basicInfo-modal{
  195. .ant-modal-body {
  196. padding: 40px 40px 24px;
  197. }
  198. .btn-cont {
  199. text-align: center;
  200. margin: 35px 0 10px;
  201. }
  202. .ant-form-item:nth-child(5){
  203. margin-bottom: 0px !important;
  204. }
  205. }
  206. </style>