basicInfoModal.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
  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.purchaseTargetNameInfo }}</a-radio>
  27. </a-radio-group>
  28. <span v-else>没有可选择的供应商</span>
  29. </a-form-model-item>
  30. <a-form-model-item label="产品类型" prop="orderType" v-if="systemFlag==1">
  31. <v-select
  32. code="ORDER_TYPE"
  33. id="purchaseOrder-basicInfo-orderType"
  34. v-model="form.orderType"
  35. allowClear
  36. placeholder="请选择产品类型"
  37. :notIn="notShowIn"
  38. showType="radio"
  39. ></v-select>
  40. </a-form-model-item>
  41. <a-form-model-item label="支付方式" prop="settleStyleSn">
  42. <v-select
  43. code="SETTLE_STYLE"
  44. id="purchaseOrder-basicInfo-settleStyleSn"
  45. v-model="form.settleStyleSn"
  46. allowClear
  47. placeholder="请选择支付方式"
  48. ></v-select>
  49. </a-form-model-item>
  50. <a-form-model-item label="收货地址" prop="consigneeTel">
  51. {{ chooseAddr }}
  52. <a-button type="link" id="purchaseOrder-basicInfo-chooseAddr" @click="handleChoose">{{ addressVal }} >></a-button>
  53. </a-form-model-item>
  54. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
  55. <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">保存</a-button>
  56. <a-button @click="isShow=false" style="margin-left: 15px" id="chooseCustom-btn-back">取消</a-button>
  57. </a-form-model-item>
  58. </a-form-model>
  59. </a-spin>
  60. <!-- 选择地址 -->
  61. <choose-address-modal :openModal="openAddrModal" @ok="handleOk" @verify="verifyFun" @close="openAddrModal=false" />
  62. </a-modal>
  63. </template>
  64. <script>
  65. import { commonMixin } from '@/utils/mixin'
  66. import { VSelect } from '@/components'
  67. import chooseAddressModal from '@/views/common/receivingAddress/chooseAddressModal.vue'
  68. import { shippingAddressQuery } from '@/api/shippingAddress'
  69. import { purchaseSave, purchaseTargetList } from '@/api/purchase'
  70. import { getParamValue } from '@/api/data'
  71. export default {
  72. name: 'BasicInfoModal',
  73. components: { VSelect, chooseAddressModal },
  74. mixins: [commonMixin],
  75. props: {
  76. openModal: { // 弹框显示状态
  77. type: Boolean,
  78. default: false
  79. }
  80. },
  81. data () {
  82. return {
  83. spinning: false,
  84. confirmLoading: false, // 按钮loading
  85. isShow: this.openModal, // 是否打开弹框
  86. formItemLayout: {
  87. labelCol: { span: 4 },
  88. wrapperCol: { span: 18 }
  89. },
  90. form: {
  91. purchaseTargetType: '', // 供应商
  92. shippingAddressProvinceName: '', // 省
  93. shippingAddressCityName: '', // 市
  94. shippingAddressCountyName: '', // 区
  95. shippingAddress: '', // 详细地址
  96. consigneeTel: '', // 联系电话
  97. consigneeName: '', // 联系人名称
  98. settleStyleSn: undefined, // 支付方式
  99. purchaseTargetSn: undefined, // 供应商sn
  100. purchaseTargetName: '', // 供应商名称
  101. orderType: undefined // 产品类型
  102. },
  103. rules: {
  104. purchaseTargetSn: [
  105. { required: true, message: '请选择供应商', trigger: 'change' }
  106. ],
  107. orderType: [{ required: true, message: '请选择产品类型', trigger: 'change' }],
  108. settleStyleSn: [
  109. { required: true, message: '请选择支付方式', trigger: 'change' }
  110. ],
  111. consigneeTel: [
  112. { required: true, message: '请选择收货地址(联系电话不能为空)', trigger: 'change' }
  113. ]
  114. },
  115. purchaseTragetType: [], // 供应商类型
  116. addressVal: '选择地址', // 选择地址/更换地址
  117. chooseAddr: '', // 当前已选地址信息
  118. addressId: undefined, // 地址id
  119. openAddrModal: false, // 选择地址弹框是否显示
  120. notShowIn: [], // 产品类型不显示
  121. systemFlag: null// 产品类型显示不显示
  122. }
  123. },
  124. methods: {
  125. // 重置表单
  126. resetForm () {
  127. this.$refs.ruleForm.resetFields()
  128. this.chooseAddr = ''
  129. this.addressVal = '选择地址'
  130. this.form.shippingAddressProvinceName = ''// 省
  131. this.form.shippingAddressCityName = '' // 市
  132. this.form.shippingAddressCountyName = '' // 区
  133. this.form.shippingAddress = ''// 详细地址
  134. this.form.consigneeTel = '' // 联系电话
  135. this.form.consigneeName = ''
  136. this.form.purchaseTargetType = ''
  137. this.form.purchaseTargetSn = undefined
  138. this.form.purchaseTargetName = ''
  139. this.form.orderType = undefined
  140. },
  141. // 选择供应商change
  142. tragetTypeChange (e) {
  143. const val = e.target.value
  144. const ind = this.purchaseTragetType.findIndex(item => item.purchaseTargetSn == val)
  145. if (ind != -1) {
  146. this.form.purchaseTargetType = this.purchaseTragetType[ind].purchaseTargetType
  147. this.form.purchaseTargetName = this.purchaseTragetType[ind].purchaseTargetName
  148. }
  149. if (this.systemFlag == 1) {
  150. // 经销商向“上级”或“省仓”采购时,默认勾选“非轮胎产品”,不显示轮胎产品
  151. if (this.form.purchaseTargetType != 'SUPPLIER_SYS') {
  152. this.notShowIn = ['TIRE']
  153. } else {
  154. this.notShowIn = []
  155. }
  156. this.form.orderType = 'OTHER'
  157. }
  158. },
  159. // 保存
  160. handleSubmit (e) {
  161. e.preventDefault()
  162. const _this = this
  163. this.$refs.ruleForm.validate(valid => {
  164. if (valid) {
  165. if (_this.form.consigneeTel == '') {
  166. _this.$message.info('请选择收货地址')
  167. return false
  168. }
  169. _this.spinning = true
  170. purchaseSave(_this.form).then(res => {
  171. if (res.status == 200) {
  172. _this.isShow = false
  173. _this.$emit('ok', res.data)
  174. _this.spinning = false
  175. _this.$message.info(res.message)
  176. } else {
  177. _this.spinning = false
  178. }
  179. })
  180. } else {
  181. return false
  182. }
  183. })
  184. },
  185. // 选择地址
  186. handleChoose () {
  187. this.openAddrModal = true
  188. },
  189. // 地址保存
  190. handleOk (data) {
  191. this.chooseAddr = (data.consigneeName || '') + '(' + (data.consigneeTel || '--') + ')' + ' ' + (data.address || '')
  192. this.addressVal = '更换地址'
  193. this.form.shippingAddressProvinceName = data.provinceName // 省
  194. this.form.shippingAddressCityName = data.cityName // 市
  195. this.form.shippingAddressCountyName = data.countyName // 区
  196. this.form.shippingAddress = data.addr// 详细地址
  197. this.form.consigneeTel = data.consigneeTel // 联系电话
  198. this.form.consigneeName = data.consigneeName
  199. this.openAddrModal = false
  200. },
  201. // 编辑信息
  202. setData (data) {
  203. this.form = JSON.parse(JSON.stringify(data))
  204. this.chooseAddr = data.consigneeName + '(' + (data.consigneeTel || '--') + ')' + ' ' + data.shippingAddressProvinceName + '-' + data.shippingAddressCityName + '-' + data.shippingAddressCountyName + ' ' + data.shippingAddress
  205. this.addressVal = '更换地址'
  206. },
  207. // 获取供应商列表
  208. getParentDealer () {
  209. const zb = this.$hasPermissions('B_SUPPLIER_ZB')
  210. const sj = this.$hasPermissions('B_SUPPLIER_SJ')
  211. let params = {}
  212. // 只能向上级采购
  213. if (sj) {
  214. params.purchaseTargetType = 'DEALER_UP'
  215. }
  216. // 只能向总部采购
  217. if (zb) {
  218. params.purchaseTargetType = 'SUPPLIER_SYS'
  219. }
  220. // 总部和上级都可以
  221. if (sj && zb) {
  222. params = {}
  223. }
  224. purchaseTargetList(params).then(res => {
  225. if (res.status == 200 && res.data[0]) {
  226. const purchaseList = res.data
  227. purchaseList.map(item => {
  228. if (item.purchaseTargetType === 'DEALER_SUPPLIER') {
  229. item.purchaseTargetNameInfo = item.purchaseTargetName + '(省仓)'
  230. } else {
  231. item.purchaseTargetNameInfo = item.purchaseTargetName
  232. }
  233. return item
  234. })
  235. if (this.systemFlag == 1) {
  236. this.form.purchaseTargetSn = purchaseList[0].purchaseTargetSn
  237. this.form.purchaseTargetName = purchaseList[0].purchaseTargetName
  238. this.form.purchaseTargetType = purchaseList[0].purchaseTargetType
  239. if (purchaseList[0].purchaseTargetType != 'SUPPLIER_SYS') {
  240. this.notShowIn = ['TIRE']
  241. } else {
  242. this.notShowIn = []
  243. }
  244. this.form.orderType = 'OTHER'
  245. }
  246. this.purchaseTragetType = purchaseList
  247. } else {
  248. this.purchaseTragetType = []
  249. }
  250. })
  251. },
  252. // 获取系统参数 判断是否显示产品类型
  253. getSystemInfo () {
  254. getParamValue({ code: 'TIRE_OPEN' }).then(res => {
  255. if (res.status == 200) {
  256. this.systemFlag = res.data
  257. this.$nextTick(() => {
  258. this.getParentDealer()
  259. })
  260. }
  261. })
  262. },
  263. // 获取默认地址
  264. getDefaultAddress () {
  265. shippingAddressQuery({ defaultFlag: 1 }).then(res => {
  266. if (res.status == 200) {
  267. if (res.data.length == 1) {
  268. res.data[0].address = ''
  269. if (res.data[0].provinceName) {
  270. res.data[0].address += res.data[0].provinceName + '-'
  271. }
  272. if (res.data[0].cityName) {
  273. res.data[0].address += res.data[0].cityName + '-'
  274. }
  275. if (res.data[0].countyName) {
  276. res.data[0].address += res.data[0].countyName + '-'
  277. }
  278. res.data[0].address += res.data[0].addr
  279. this.addressId = res.data[0].id || undefined
  280. this.handleOk(res.data[0])
  281. }
  282. }
  283. })
  284. },
  285. // 重置地址信息
  286. verifyFun (id) {
  287. if (id == this.addressId) {
  288. this.chooseAddr = ''
  289. this.addressVal = '选择地址'
  290. this.form.shippingAddressProvinceName = ''// 省
  291. this.form.shippingAddressCityName = '' // 市
  292. this.form.shippingAddressCountyName = '' // 区
  293. this.form.shippingAddress = ''// 详细地址
  294. this.form.consigneeTel = '' // 联系电话
  295. this.form.consigneeName = ''
  296. }
  297. }
  298. },
  299. watch: {
  300. // 父页面传过来的弹框状态
  301. openModal (newValue, oldValue) {
  302. this.isShow = newValue
  303. },
  304. // 重定义的弹框状态
  305. isShow (newValue, oldValue) {
  306. if (!newValue) {
  307. this.$emit('close')
  308. this.resetForm()
  309. } else {
  310. this.getDefaultAddress()
  311. this.getSystemInfo()
  312. }
  313. }
  314. }
  315. }
  316. </script>
  317. <style lang="less">
  318. .purchaseOrder-basicInfo-modal{
  319. .ant-modal-body {
  320. padding: 40px 40px 24px;
  321. }
  322. .radio-s{
  323. margin-bottom: 8px;
  324. }
  325. .btn-cont {
  326. text-align: center;
  327. margin: 35px 0 10px;
  328. }
  329. }
  330. </style>