basicInfoModal.vue 6.5 KB

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