basicInfoModal.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. <template>
  2. <a-modal
  3. centered
  4. class="purchaseOrder-basicInfo-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="新增采购单"
  8. v-model="isShow"
  9. @cancel="cancel"
  10. :width="800">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. id="purchaseOrder-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="purchaseTargetSn">
  20. <a-radio-group
  21. name="radioGroup"
  22. v-model="form.purchaseTargetSn"
  23. @change="tragetTypeChange"
  24. id="purchaseOrder-basicInfo-purchaseTargetSn" >
  25. <a-radio v-for="item in purchaseTragetType" :key="item.purchaseTargetSn" :value="item.purchaseTargetSn" class="radio-s">{{ item.purchaseTargetName }}</a-radio>
  26. </a-radio-group>
  27. </a-form-model-item>
  28. <a-form-model-item label="支付方式" prop="settleStyleSn">
  29. <a-select placeholder="请选择支付方式" v-model="form.settleStyleSn">
  30. <a-select-option v-for="item in settleStyleList" :key="item.settleStyleSn" :value="item.settleStyleSn">
  31. {{ item.name }}
  32. </a-select-option>
  33. </a-select>
  34. </a-form-model-item>
  35. <a-form-model-item label="收货地址" prop="consigneeTel">
  36. {{ chooseAddr }}
  37. <a-button type="link" id="purchaseOrder-basicInfo-chooseAddr" @click="handleChoose">{{ addressVal }} >></a-button>
  38. </a-form-model-item>
  39. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
  40. <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">保存</a-button>
  41. <a-button @click="cancel" style="margin-left: 15px" id="chooseCustom-btn-back">取消</a-button>
  42. </a-form-model-item>
  43. </a-form-model>
  44. </a-spin>
  45. <!-- 选择地址 -->
  46. <choose-address-modal :openModal="openAddrModal" @ok="handleOk" @verify="verifyFun" @close="openAddrModal=false" />
  47. </a-modal>
  48. </template>
  49. <script>
  50. import { VSelect } from '@/components'
  51. import chooseAddressModal from './receivingAddress/chooseAddressModal.vue'
  52. import { settleStyleQueryAll } from '@/api/settleStyle'
  53. import { shippingAddressQuery } from '@/api/shippingAddress'
  54. import { purchaseSave, purchaseTargetList } from '@/api/purchase'
  55. export default {
  56. name: 'BasicInfoModal',
  57. components: { VSelect, chooseAddressModal },
  58. props: {
  59. openModal: { // 弹框显示状态
  60. type: Boolean,
  61. default: false
  62. }
  63. },
  64. data () {
  65. return {
  66. spinning: false,
  67. confirmLoading: false,
  68. isShow: this.openModal, // 是否打开弹框
  69. settleStyleList: [], // 支付方式
  70. formItemLayout: {
  71. labelCol: { span: 4 },
  72. wrapperCol: { span: 18 }
  73. },
  74. form: {
  75. purchaseTargetType: '', // 供应商
  76. shippingAddressProvinceName: '', // 省
  77. shippingAddressCityName: '', // 市
  78. shippingAddressCountyName: '', // 区
  79. shippingAddress: '', // 详细地址
  80. consigneeTel: '', // 联系电话
  81. consigneeName: '', // 联系人名称
  82. settleStyleSn: undefined, // 支付方式
  83. purchaseTargetSn: undefined,
  84. purchaseTargetName: ''
  85. },
  86. rules: {
  87. purchaseTargetSn: [
  88. { required: true, message: '请选择供应商', trigger: 'change' }
  89. ],
  90. settleStyleSn: [
  91. { required: true, message: '请选择支付方式', trigger: 'change' }
  92. ],
  93. consigneeTel: [
  94. { required: true, message: '请选择收货地址(联系电话不能为空)', trigger: 'change' }
  95. ]
  96. },
  97. purchaseTragetType: [],
  98. addressVal: '选择地址', // 选择地址/更换地址
  99. chooseAddr: '', // 当前已选地址信息
  100. addressId: undefined,
  101. openAddrModal: false // 选择地址弹框是否显示
  102. }
  103. },
  104. methods: {
  105. resetForm () {
  106. this.$refs.ruleForm.resetFields()
  107. this.chooseAddr = ''
  108. this.addressVal = '选择地址'
  109. this.form.shippingAddressProvinceName = ''// 省
  110. this.form.shippingAddressCityName = '' // 市
  111. this.form.shippingAddressCountyName = '' // 区
  112. this.form.shippingAddress = ''// 详细地址
  113. this.form.consigneeTel = '' // 联系电话
  114. this.form.consigneeName = ''
  115. this.form.purchaseTargetType = ''
  116. this.form.purchaseTargetSn = undefined
  117. this.form.purchaseTargetName = ''
  118. },
  119. // 供应商change
  120. tragetTypeChange (e) {
  121. const val = e.target.value
  122. const ind = this.purchaseTragetType.findIndex(item => item.purchaseTargetSn == val)
  123. if (ind != -1) {
  124. this.form.purchaseTargetType = this.purchaseTragetType[ind].purchaseTargetType
  125. this.form.purchaseTargetName = this.purchaseTragetType[ind].purchaseTargetName
  126. }
  127. },
  128. // 保存
  129. handleSubmit (e) {
  130. e.preventDefault()
  131. const _this = this
  132. this.$refs.ruleForm.validate(valid => {
  133. if (valid) {
  134. if (_this.form.consigneeTel == '') {
  135. _this.$message.info('请选择收货地址')
  136. return false
  137. }
  138. _this.spinning = true
  139. purchaseSave(_this.form).then(res => {
  140. if (res.status == 200) {
  141. _this.isShow = false
  142. _this.$emit('ok', res.data)
  143. _this.spinning = false
  144. _this.$message.info(res.message)
  145. } else {
  146. _this.spinning = false
  147. }
  148. })
  149. } else {
  150. return false
  151. }
  152. })
  153. },
  154. // 取消
  155. cancel () {
  156. this.$emit('cancel')
  157. },
  158. // 选择地址
  159. handleChoose () {
  160. this.openAddrModal = true
  161. },
  162. // 地址保存
  163. handleOk (data) {
  164. this.chooseAddr = (data.consigneeName || '') + '(' + (data.consigneeTel || '--') + ')' + ' ' + (data.address || '')
  165. this.addressVal = '更换地址'
  166. this.form.shippingAddressProvinceName = data.provinceName // 省
  167. this.form.shippingAddressCityName = data.cityName // 市
  168. this.form.shippingAddressCountyName = data.countyName // 区
  169. this.form.shippingAddress = data.addr// 详细地址
  170. this.form.consigneeTel = data.consigneeTel // 联系电话
  171. this.form.consigneeName = data.consigneeName
  172. this.openAddrModal = false
  173. },
  174. // 编辑信息
  175. setData (data) {
  176. this.form = JSON.parse(JSON.stringify(data))
  177. this.chooseAddr = data.consigneeName + '(' + (data.consigneeTel || '--') + ')' + ' ' + data.shippingAddressProvinceName + '-' + data.shippingAddressCityName + '-' + data.shippingAddressCountyName + ' ' + data.shippingAddress
  178. this.addressVal = '更换地址'
  179. },
  180. // 获取收款方式
  181. getSettleStyle () {
  182. settleStyleQueryAll().then(res => {
  183. if (res.status == 200) {
  184. this.settleStyleList = res.data
  185. }
  186. })
  187. },
  188. getParentDealer () {
  189. purchaseTargetList({}).then(res => {
  190. if (res.status == 200) {
  191. this.purchaseTragetType = res.data
  192. } else {
  193. this.purchaseTragetType = []
  194. }
  195. })
  196. },
  197. // 获取默认地址
  198. getDefaultAddress () {
  199. shippingAddressQuery({ defaultFlag: 1 }).then(res => {
  200. if (res.status == 200) {
  201. if (res.data.length == 1) {
  202. res.data[0].address = ''
  203. if (res.data[0].provinceName) {
  204. res.data[0].address += res.data[0].provinceName + '-'
  205. }
  206. if (res.data[0].cityName) {
  207. res.data[0].address += res.data[0].cityName + '-'
  208. }
  209. if (res.data[0].countyName) {
  210. res.data[0].address += res.data[0].countyName + '-'
  211. }
  212. res.data[0].address += res.data[0].addr
  213. this.addressId = res.data[0].id || undefined
  214. this.handleOk(res.data[0])
  215. }
  216. }
  217. })
  218. },
  219. verifyFun (id) {
  220. if (id == this.addressId) {
  221. this.chooseAddr = ''
  222. this.addressVal = '选择地址'
  223. this.form.shippingAddressProvinceName = ''// 省
  224. this.form.shippingAddressCityName = '' // 市
  225. this.form.shippingAddressCountyName = '' // 区
  226. this.form.shippingAddress = ''// 详细地址
  227. this.form.consigneeTel = '' // 联系电话
  228. this.form.consigneeName = ''
  229. }
  230. }
  231. },
  232. watch: {
  233. // 父页面传过来的弹框状态
  234. openModal (newValue, oldValue) {
  235. this.isShow = newValue
  236. },
  237. // 重定义的弹框状态
  238. isShow (newValue, oldValue) {
  239. if (!newValue) {
  240. this.$emit('close')
  241. this.resetForm()
  242. } else {
  243. this.getSettleStyle()
  244. this.getParentDealer()
  245. this.getDefaultAddress()
  246. }
  247. }
  248. }
  249. }
  250. </script>
  251. <style lang="less">
  252. .purchaseOrder-basicInfo-modal{
  253. .ant-modal-body {
  254. padding: 40px 40px 24px;
  255. }
  256. .radio-s{
  257. margin-bottom: 8px;
  258. }
  259. .btn-cont {
  260. text-align: center;
  261. margin: 35px 0 10px;
  262. }
  263. }
  264. </style>