basicInfoModal.vue 9.2 KB

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