basicInfoModal.vue 8.6 KB

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