basicInfoModal.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  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. @cancel="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.trim="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 { commonMixin } from '@/utils/mixin'
  47. import { VSelect } from '@/components'
  48. import { storeCallOutSave } from '@/api/storeCallOut'
  49. import { getLookUpData } from '@/api/data'
  50. import custList from '@/views/common/custList.vue'
  51. import { storeCallOutTypeAllList } from '@/api/storeCallOutType'
  52. export default {
  53. name: 'StoreTransferOutBasicInfoModal',
  54. components: { VSelect, custList },
  55. mixins: [commonMixin],
  56. props: {
  57. openModal: {
  58. // 弹框显示状态
  59. type: Boolean,
  60. default: false
  61. }
  62. },
  63. data () {
  64. return {
  65. spinning: false,
  66. isShow: this.openModal, // 是否打开弹框
  67. formItemLayout: {
  68. labelCol: { span: 4 },
  69. wrapperCol: { span: 18 }
  70. },
  71. form: {
  72. putPersonType: 'CUSTOMER',
  73. putPersonSn: undefined,
  74. putPersonName: '',
  75. callOutType: undefined,
  76. remark: ''
  77. },
  78. rules: {
  79. putPersonType: [{ required: true, message: '请选择调往对象', trigger: 'change' }],
  80. putPersonSn: [{ required: true, message: '请选择调往对象名称', trigger: 'change' }],
  81. putPersonName: [{ required: true, message: '请输入调往对象名称', trigger: 'blur' }],
  82. callOutType: [{ required: true, message: '请选择调拨类型', trigger: 'change' }]
  83. },
  84. putPersonTypeList: [], // 调往对象类型
  85. storeCallOutTypeList: [] // 调拨类型
  86. }
  87. },
  88. computed: {
  89. // 当前所选调往对象是否为客户
  90. isCustomer () {
  91. return this.form.putPersonType == 'CUSTOMER'
  92. }
  93. },
  94. methods: {
  95. // 保存
  96. handleSave () {
  97. const _this = this
  98. this.$refs.ruleForm.validate(valid => {
  99. if (valid) {
  100. const form = JSON.parse(JSON.stringify(_this.form))
  101. _this.spinning = true
  102. storeCallOutSave(form).then(res => {
  103. if (res.status == 200) {
  104. _this.$message.success(res.message)
  105. setTimeout(() => {
  106. _this.isShow = false
  107. _this.$emit('ok', res.data)
  108. _this.spinning = false
  109. }, 1000)
  110. } else {
  111. _this.spinning = false
  112. }
  113. })
  114. } else {
  115. console.log('error submit!!')
  116. return false
  117. }
  118. })
  119. },
  120. // 调往对象名称 change
  121. custChange (obj) {
  122. this.form.putPersonSn = obj.key || undefined
  123. this.form.putPersonName = obj.row.customerName
  124. },
  125. // 调往对象 change
  126. putPersonTypeChange (e) {
  127. this.$refs.ruleForm.resetFields()
  128. this.form.putPersonSn = undefined
  129. this.form.putPersonName = ''
  130. this.form.putPersonType = e.target.value
  131. },
  132. // 调往对象类型
  133. getPutPersonTypeList () {
  134. const _this = this
  135. getLookUpData({
  136. pageNo: 1,
  137. pageSize: 1000,
  138. lookupCode: 'PUT_PERSON_TYPE'
  139. }).then(res => {
  140. if (res.status == 200) {
  141. _this.putPersonTypeList = res.data.list
  142. } else {
  143. _this.putPersonTypeList = []
  144. }
  145. })
  146. },
  147. // 调拨类型
  148. getStoreCallOutTypeAllList () {
  149. storeCallOutTypeAllList().then(res => {
  150. if (res.status == 200) {
  151. this.storeCallOutTypeList = res.data
  152. } else {
  153. this.storeCallOutTypeList = []
  154. }
  155. })
  156. }
  157. },
  158. watch: {
  159. // 父页面传过来的弹框状态
  160. openModal (newValue, oldValue) {
  161. this.isShow = newValue
  162. },
  163. // 重定义的弹框状态
  164. isShow (newValue, oldValue) {
  165. if (!newValue) {
  166. this.$emit('close')
  167. this.$refs.ruleForm.resetFields()
  168. this.$refs.custList.resetForm()
  169. } else {
  170. this.getPutPersonTypeList()
  171. this.getStoreCallOutTypeAllList()
  172. }
  173. }
  174. }
  175. }
  176. </script>
  177. <style lang="less">
  178. .storeTransferOut-basicInfo-modal {
  179. .ant-modal-body {
  180. padding: 40px 40px 24px;
  181. }
  182. .btn-cont {
  183. text-align: center;
  184. margin: 35px 0 10px;
  185. }
  186. }
  187. </style>