basicInfoModal.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <template>
  2. <a-modal
  3. centered
  4. class="storeTransferOut-basicInfo-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="新增店内调出单"
  8. v-model="isShow"
  9. @cancle="isShow = false"
  10. :width="800">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. id="storeTransferOut-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="putPersonType">
  21. <a-radio-group v-model="form.putPersonType" @change="putPersonTypeChange">
  22. <a-radio v-for="(item,index) in putPersonTypeList" :key="index" :value="item.code">{{ item.dispName }}</a-radio>
  23. </a-radio-group>
  24. </a-form-model-item>
  25. <a-form-model-item label="调往对象名称" :prop="isCustomer ? 'putPersonSn' : 'putPersonName'">
  26. <custList ref="custList" :isValidateEnabled="true" v-if="isCustomer" @change="custChange" v-model="form.putPersonSn"></custList>
  27. <a-input v-if="!isCustomer" v-model="form.putPersonName" placeholder="请输入调往对象名称(最多30个字符)" allowClear :maxLength="30" />
  28. </a-form-model-item>
  29. <a-form-model-item label="调拨类型" prop="callOutType">
  30. <a-select v-model="form.callOutType" placeholder="请选择调拨类型" allowClear >
  31. <a-select-option v-for="item in storeCallOutTypeList" :key="item.storeCallOutTypeSn" :value="item.storeCallOutTypeSn">{{ item.name }}</a-select-option>
  32. </a-select>
  33. </a-form-model-item>
  34. <a-form-model-item label="备注" prop="remark">
  35. <a-textarea id="storeTransferOut-basicInfo-remark" :maxLength="120" v-model="form.remark" placeholder="请输入备注(最多120个字符)" allowClear />
  36. </a-form-model-item>
  37. </a-form-model>
  38. <div class="btn-cont">
  39. <a-button type="primary" id="storeTransferOut-basicInfo-modal-save" @click="handleSave">保存</a-button>
  40. <a-button id="storeTransferOut-basicInfo-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  41. </div>
  42. </a-spin>
  43. </a-modal>
  44. </template>
  45. <script>
  46. import { VSelect } from '@/components'
  47. import { storeCallOutSave } from '@/api/storeCallOut'
  48. import { getLookUpData } from '@/api/data'
  49. import custList from '@/views/common/custList.vue'
  50. import { storeCallOutTypeAllList } from '@/api/storeCallOutType'
  51. export default {
  52. name: 'StoreTransferOutBasicInfoModal',
  53. components: { VSelect, custList },
  54. props: {
  55. openModal: {
  56. // 弹框显示状态
  57. type: Boolean,
  58. default: false
  59. }
  60. },
  61. data () {
  62. return {
  63. spinning: false,
  64. isShow: this.openModal, // 是否打开弹框
  65. formItemLayout: {
  66. labelCol: { span: 4 },
  67. wrapperCol: { span: 18 }
  68. },
  69. form: {
  70. putPersonType: 'CUSTOMER',
  71. putPersonSn: undefined,
  72. putPersonName: '',
  73. callOutType: undefined,
  74. remark: ''
  75. },
  76. rules: {
  77. putPersonType: [{ required: true, message: '请选择调往对象', trigger: 'change' }],
  78. putPersonSn: [{ required: true, message: '请选择调往对象名称', trigger: 'change' }],
  79. putPersonName: [{ required: true, message: '请输入调往对象名称', trigger: 'blur' }],
  80. callOutType: [{ required: true, message: '请选择调拨类型', trigger: 'change' }]
  81. },
  82. putPersonTypeList: [], // 调往对象类型
  83. storeCallOutTypeList: [] // 调拨类型
  84. }
  85. },
  86. computed: {
  87. // 当前所选调往对象是否为客户
  88. isCustomer () {
  89. return this.form.putPersonType == 'CUSTOMER'
  90. }
  91. },
  92. methods: {
  93. // 保存
  94. handleSave () {
  95. const _this = this
  96. this.$refs.ruleForm.validate(valid => {
  97. if (valid) {
  98. const form = JSON.parse(JSON.stringify(_this.form))
  99. _this.spinning = true
  100. storeCallOutSave(form).then(res => {
  101. if (res.status == 200) {
  102. _this.$message.success(res.message)
  103. setTimeout(() => {
  104. _this.isShow = false
  105. _this.$emit('ok', res.data)
  106. _this.spinning = false
  107. }, 1000)
  108. } else {
  109. _this.spinning = false
  110. }
  111. })
  112. } else {
  113. console.log('error submit!!')
  114. return false
  115. }
  116. })
  117. },
  118. // 调往对象名称 change
  119. custChange (obj) {
  120. this.form.putPersonSn = obj.key || undefined
  121. this.form.putPersonName = obj.row.customerName
  122. },
  123. // 调往对象 change
  124. putPersonTypeChange (e) {
  125. this.$refs.ruleForm.resetFields()
  126. this.form.putPersonSn = undefined
  127. this.form.putPersonName = ''
  128. this.form.putPersonType = e.target.value
  129. },
  130. // 调往对象类型
  131. getPutPersonTypeList () {
  132. const _this = this
  133. getLookUpData({
  134. pageNo: 1,
  135. pageSize: 1000,
  136. lookupCode: 'PUT_PERSON_TYPE'
  137. }).then(res => {
  138. if (res.status == 200) {
  139. _this.putPersonTypeList = res.data.list
  140. } else {
  141. _this.putPersonTypeList = []
  142. }
  143. })
  144. },
  145. // 调拨类型
  146. getStoreCallOutTypeAllList () {
  147. storeCallOutTypeAllList().then(res => {
  148. if (res.status == 200) {
  149. this.storeCallOutTypeList = res.data
  150. } else {
  151. this.storeCallOutTypeList = []
  152. }
  153. })
  154. }
  155. },
  156. watch: {
  157. // 父页面传过来的弹框状态
  158. openModal (newValue, oldValue) {
  159. this.isShow = newValue
  160. },
  161. // 重定义的弹框状态
  162. isShow (newValue, oldValue) {
  163. if (!newValue) {
  164. this.$emit('close')
  165. this.$refs.ruleForm.resetFields()
  166. this.$refs.custList.resetForm()
  167. } else {
  168. this.getPutPersonTypeList()
  169. this.getStoreCallOutTypeAllList()
  170. }
  171. }
  172. }
  173. }
  174. </script>
  175. <style lang="less">
  176. .storeTransferOut-basicInfo-modal {
  177. .ant-modal-body {
  178. padding: 40px 40px 24px;
  179. }
  180. .btn-cont {
  181. text-align: center;
  182. margin: 35px 0 10px;
  183. }
  184. }
  185. </style>