chooseCustomModal.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535
  1. <template>
  2. <a-modal
  3. v-model="opened"
  4. :title="title"
  5. centered
  6. :maskClosable="false"
  7. :confirmLoading="confirmLoading"
  8. width="80%"
  9. :footer="null"
  10. @cancel="cancel"
  11. >
  12. <a-form-model
  13. id="chooseCustom-form"
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol"
  19. >
  20. <a-row :gutter="15">
  21. <a-col :span="8">
  22. <a-form-model-item v-if="isNew" label="客户名称" prop="buyerName">
  23. <a-input
  24. id="chooseCustom-buyerName"
  25. :maxLength="60"
  26. v-model="form.buyerName"
  27. placeholder="请输入客户名称"
  28. allowClear />
  29. </a-form-model-item>
  30. <a-form-model-item v-else label="客户名称" prop="buyerSn">
  31. <a-select
  32. id="chooseCustom-buyerSn"
  33. show-search
  34. placeholder="请选择客户"
  35. v-model="form.buyerSn"
  36. :filter-option="filterOption"
  37. @select="custSelect"
  38. @change="custChange">
  39. <a-select-option v-for="item in custAllList" :key="item.id" :value="item.customerSn">{{ item.customerName }}</a-select-option>
  40. </a-select>
  41. </a-form-model-item>
  42. </a-col>
  43. <a-col :span="16">
  44. <a-form-model-item>
  45. <a-button type="dashed" @click="custModeChange" :icon="!isNew?'plus':'check'">{{ !isNew?'新增':'选择' }}</a-button>
  46. ({{ !isNew?'点击新增按钮直接输入客户名称':'点击选择按钮直接选择客户' }})
  47. </a-form-model-item>
  48. </a-col>
  49. </a-row>
  50. <a-row :gutter="15">
  51. <a-col :span="16">
  52. <a-form-model-item label="客户地址" required style="margin: 0;" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
  53. <a-row :gutter="15">
  54. <!-- 客户地址 -->
  55. <a-col span="8">
  56. <a-form-model-item prop="shippingAddressProvinceSn">
  57. <a-select id="chooseCustom-provinceSn" @change="getCityList" v-model="form.shippingAddressProvinceSn" placeholder="请选择省">
  58. <a-select-option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</a-select-option>
  59. </a-select>
  60. </a-form-model-item>
  61. </a-col>
  62. <a-col span="8">
  63. <a-form-model-item prop="shippingAddressCitySn">
  64. <a-select id="chooseCustom-citySn" @change="getAreaList" v-model="form.shippingAddressCitySn" placeholder="请选择市">
  65. <a-select-option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</a-select-option>
  66. </a-select>
  67. </a-form-model-item>
  68. </a-col>
  69. <a-col span="8">
  70. <a-form-model-item prop="shippingAddressCountySn">
  71. <a-select id="chooseCustom-countySn" @change="areaCharged" v-model="form.shippingAddressCountySn" placeholder="请选择区/县">
  72. <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
  73. </a-select>
  74. </a-form-model-item>
  75. </a-col>
  76. </a-row>
  77. </a-form-model-item>
  78. </a-col>
  79. <a-col :span="8">
  80. <a-form-model-item label="" prop="shippingAddress">
  81. <a-input
  82. id="chooseCustom-shippingAddress"
  83. :maxLength="60"
  84. v-model="form.shippingAddress"
  85. placeholder="请输入详细地址(最多60个字符)"
  86. allowClear />
  87. </a-form-model-item>
  88. </a-col>
  89. </a-row>
  90. <a-row :gutter="15">
  91. <a-col :span="8">
  92. <a-form-model-item label="联系人" prop="consigneeName">
  93. <a-input
  94. id="chooseCustom-consigneeName"
  95. :maxLength="30"
  96. v-model="form.consigneeName"
  97. placeholder="请输入联系人(最多30个字符)"
  98. allowClear />
  99. </a-form-model-item>
  100. </a-col>
  101. <a-col :span="8">
  102. <a-form-model-item label="联系电话" prop="consigneeTel">
  103. <a-input
  104. id="chooseCustom-consigneeTel"
  105. :maxLength="30"
  106. v-model="form.consigneeTel"
  107. placeholder="请输入联系电话(最多30个字符)"
  108. allowClear />
  109. </a-form-model-item>
  110. </a-col>
  111. </a-row>
  112. <a-row :gutter="15">
  113. <a-col :span="8">
  114. <a-form-model-item label="价格类型" prop="priceType">
  115. <a-row :gutter="15">
  116. <a-col :span="20">
  117. <v-select
  118. code="PRICE_TYPE"
  119. :disabled="isEdit"
  120. id="chooseCustom-priceType"
  121. v-model="form.priceType"
  122. allowClear
  123. placeholder="请选择价格类型" ></v-select>
  124. </a-col>
  125. <a-col :span="4">
  126. <a-popover>
  127. <template slot="content">(选择后在当前工单不可修改)</template>
  128. <a-icon type="question-circle" />
  129. </a-popover>
  130. </a-col>
  131. </a-row>
  132. </a-form-model-item>
  133. </a-col>
  134. <!-- <a-col :span="8">
  135. <a-form-model-item label="支付方式" prop="payType">
  136. <v-select code="PAY_TYPE" id="chooseCustom-payType" v-model="form.payType" allowClear placeholder="请选择支付方式" />
  137. </a-form-model-item>
  138. </a-col> -->
  139. <a-col :span="8">
  140. <a-form-model-item label="收款方式" prop="settleStyle">
  141. <v-select code="SETTLE_STYLE_NAME" id="chooseCustom-settleStyle" v-model="form.settleStyle" allowClear placeholder="请选择收款方式"></v-select>
  142. </a-form-model-item>
  143. </a-col>
  144. <a-col :span="8">
  145. <a-form-model-item label="配送方式" prop="dispatchType">
  146. <v-select code="DISPATCH_TYPE" id="chooseCustom-dispatchType" v-model="form.dispatchType" allowClear placeholder="请选择配送方式"></v-select>
  147. </a-form-model-item>
  148. </a-col>
  149. </a-row>
  150. <a-row :gutter="15">
  151. <a-col :span="8">
  152. <a-form-model-item label="业务员" prop="salesManSn">
  153. <a-select id="chooseCustom-salesManSn" @change="salesManChange" v-model="form.salesManSn" placeholder="请选择业务员">
  154. <a-select-option v-for="item in userList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
  155. </a-select>
  156. </a-form-model-item>
  157. </a-col>
  158. <a-col :span="8">
  159. <a-form-model-item label="铺货出库" prop="distributionFlag">
  160. <v-select code="FLAG" id="chooseCustom-distributionFlag" v-model="form.distributionFlag" allowClear placeholder="请选择"></v-select>
  161. </a-form-model-item>
  162. </a-col>
  163. </a-row>
  164. <a-row :gutter="15">
  165. <a-col :span="8">
  166. <a-form-model-item label="备注" prop="remarks">
  167. <a-input
  168. id="chooseCustom-remarks"
  169. type="textarea"
  170. :maxLength="100"
  171. v-model="form.remarks"
  172. placeholder="请输入联系电话(最多100个字符)"
  173. allowClear />
  174. </a-form-model-item>
  175. </a-col>
  176. <a-col :span="8">
  177. <a-form-model-item label="开单人">{{ $store.state.user.info.userNameCN }}</a-form-model-item>
  178. </a-col>
  179. </a-row>
  180. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
  181. <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">保存</a-button>
  182. <a-button @click="cancel" style="margin-left: 15px" id="chooseCustom-btn-back">取消</a-button>
  183. </a-form-model-item>
  184. </a-form-model>
  185. </a-modal>
  186. </template>
  187. <script>
  188. import { getArea } from '@/api/data'
  189. import { custAllList, custFindById, custSave, updateByCustomerSn } from '@/api/customer'
  190. import { salesSave } from '@/api/sales'
  191. import { getUserAllList } from '@/api/power-user'
  192. import { VSelect } from '@/components'
  193. export default {
  194. name: 'ChooseCustomModal',
  195. components: { VSelect },
  196. props: {
  197. show: [Boolean]
  198. },
  199. data () {
  200. return {
  201. opened: this.show,
  202. title: '选择客户',
  203. isNew: false,
  204. confirmLoading: false,
  205. formItemLayout: {
  206. labelCol: { span: 8 },
  207. wrapperCol: { span: 16 }
  208. },
  209. form: {
  210. buyerName: '', // 客户名称
  211. buyerSn: undefined, // 客户sn
  212. consigneeTel: '', // 联系电话
  213. consigneeName: '', // 联系人
  214. shippingAddressProvinceSn: undefined, // 省
  215. shippingAddressProvinceName: '',
  216. shippingAddressCitySn: undefined, // 市
  217. shippingAddressCityName: '',
  218. shippingAddressCountySn: undefined, // 区
  219. shippingAddressCountyName: '',
  220. shippingAddress: '', // 详细地址
  221. fax: '', // 客户传真
  222. dispatchType: undefined, // 配送方式
  223. satelliteFlag: 0, // 是否卫星仓客户
  224. priceType: undefined, // 价格类型
  225. settleStyle: '', // 收款方式
  226. salesManSn: undefined, // 业务员
  227. salesManName: '',
  228. distributionFlag: '0', // 铺货出库
  229. salesTragetType: 'C',
  230. remarks: '' // 备注
  231. },
  232. rules: {
  233. buyerName: [
  234. { required: true, message: '请输入客户名称', trigger: ['change', 'blur'] }
  235. ],
  236. buyerSn: [
  237. { required: true, message: '请选择客户', trigger: ['change', 'blur'] }
  238. ],
  239. consigneeTel: [
  240. { required: true, message: '请输入联系电话', trigger: 'blur' }
  241. ],
  242. shippingAddressProvinceSn: [
  243. { required: true, message: '请选择省', trigger: 'change' }
  244. ],
  245. shippingAddressCitySn: [
  246. { required: true, message: '请选择市', trigger: 'change' }
  247. ],
  248. shippingAddressCountySn: [
  249. { required: true, message: '请选择区/县', trigger: 'change' }
  250. ],
  251. shippingAddress: [
  252. { required: true, message: '请输入详细地址', trigger: 'blur' }
  253. ],
  254. priceType: [
  255. { required: true, message: '请选择价格类型', trigger: ['change', 'blur'] }
  256. ],
  257. settleStyle: [
  258. { required: true, message: '请选择收款方式', trigger: ['change', 'blur'] }
  259. ],
  260. distributionFlag: [
  261. { required: true, message: '请选择是否铺货出库', trigger: 'change' }
  262. ]
  263. // salesManSn: [
  264. // { required: true, message: '请选择业务员', trigger: 'change' }
  265. // ]
  266. },
  267. custAllList: [], // 客户 下拉数据
  268. addrProvinceList: [], // 省下拉
  269. addrCityList: [], // 市下拉
  270. addrDistrictList: [], // 区下拉
  271. userList: [], // 业务员 下拉
  272. custId: undefined, // 客户id
  273. isEdit: false, // 是否可编辑
  274. isChangeCust: false, // 是否更换客户
  275. interId: null
  276. }
  277. },
  278. methods: {
  279. custModeChange () {
  280. this.isNew = !this.isNew
  281. this.isEdit = false
  282. this.form.buyerName = ''
  283. this.$refs.ruleForm.resetFields()
  284. this.custId = undefined
  285. },
  286. // 业务员
  287. salesManChange (id) {
  288. this.form.salesManName = this.userList.find(item => item.id == id).name
  289. },
  290. // 客户 select
  291. custSelect (v) {
  292. console.log(v, 'custSelect')
  293. const _this = this
  294. const cust = this.custAllList.find(item => item.customerSn == v)
  295. if (this.isEdit) {
  296. // 变更了客户信息
  297. if (cust.customerSn !== this.form.customerSn) {
  298. this.isChangeCust = true
  299. this.$confirm({
  300. title: '提示',
  301. content: '更换客户后信息需要重新完善,确认要更换吗?',
  302. centered: true,
  303. onOk () {
  304. _this.custId = cust.id
  305. _this.form.buyerName = cust.customerName
  306. _this.isEdit = false
  307. _this.getDetail()
  308. }
  309. })
  310. return
  311. }
  312. }
  313. this.custId = cust.id
  314. this.form.buyerName = cust.customerName
  315. this.getDetail()
  316. },
  317. // 客户 change
  318. custChange (val) {
  319. this.$refs.ruleForm.resetFields()
  320. this.custId = undefined
  321. },
  322. // 编辑客户信息
  323. editCust (data) {
  324. console.log(data)
  325. this.title = '编辑客户信息'
  326. this.isEdit = true
  327. if (data.shippingAddressProvinceSn) { this.getArea('city', data.shippingAddressProvinceSn) }
  328. if (data.shippingAddressCitySn) { this.getArea('district', data.shippingAddressCitySn) }
  329. this.form = Object.assign(this.form, data)
  330. },
  331. // 获取详情
  332. getDetail () {
  333. custFindById({ id: this.custId }).then(res => {
  334. const data = res.data
  335. if (res.status == 200 && data) {
  336. if (data.provinceSn) { this.getArea('city', data.provinceSn) }
  337. if (data.citySn) { this.getArea('district', data.citySn) }
  338. this.form = Object.assign(this.form, {
  339. buyerName: data.customerName, // 客户名称
  340. buyerSn: data.customerSn, // 客户sn
  341. consigneeTel: data.contactTel, // 联系电话
  342. consigneeName: data.contactName, // 联系人
  343. shippingAddressProvinceSn: data.provinceSn, // 省
  344. shippingAddressProvinceName: data.provinceName,
  345. shippingAddressCitySn: data.citySn, // 市
  346. shippingAddressCityName: data.cityName,
  347. shippingAddressCountySn: data.countySn, // 区
  348. shippingAddressCountyName: data.countyName,
  349. shippingAddress: data.customerAddr, // 详细地址
  350. fax: data.fax, // 客户传真
  351. dispatchType: data.dispatchType, // 配送方式
  352. satelliteFlag: data.satelliteFlag, // 是否卫星仓客户
  353. priceType: data.priceType, // 价格类型
  354. settleStyle: data.settleStyleSn // 收款方式
  355. })
  356. } else {
  357. this.$message.error('获取客户信息失败')
  358. this.$refs.ruleForm.resetFields()
  359. }
  360. this.$refs.ruleForm.clearValidate()
  361. })
  362. },
  363. // 保存客户信息
  364. handleSaveCust () {
  365. const params = {
  366. customerName: this.form.buyerName,
  367. contactTel: this.form.consigneeTel, // 联系电话
  368. contactName: this.form.consigneeName, // 联系人
  369. provinceSn: this.form.shippingAddressProvinceSn, // 省
  370. provinceName: this.form.shippingAddressProvinceName,
  371. citySn: this.form.shippingAddressCitySn, // 市
  372. cityName: this.form.shippingAddressCityName,
  373. countySn: this.form.shippingAddressCountySn, // 区
  374. countyName: this.form.shippingAddressCountyName,
  375. customerAddr: this.form.shippingAddress, // 详细地址
  376. dispatchType: this.form.dispatchType, // 配送方式
  377. priceType: this.form.priceType, // 价格类型
  378. settleStyleSn: this.form.settleStyle // 收款方式
  379. }
  380. // 更新
  381. if (this.form.buyerSn) {
  382. params.customerSn = this.form.buyerSn
  383. updateByCustomerSn(params).then(res => {
  384. if (res.status != 200) {
  385. this.$message.error(res.message)
  386. }
  387. })
  388. } else {
  389. // 新建
  390. params.id = null
  391. params.satelliteFlag = 0 // 是否卫星仓客户
  392. custSave(params).then(res => {
  393. if (res.status != 200) {
  394. this.$message.error(res.message)
  395. }
  396. })
  397. }
  398. },
  399. // 保存
  400. handleSubmit (e) {
  401. e.preventDefault()
  402. const _this = this
  403. this.$refs.ruleForm.validate(valid => {
  404. if (valid) {
  405. // 保存客户信息
  406. _this.handleSaveCust()
  407. // 保存销售单
  408. if (_this.form.buyerSn) {
  409. _this.salesSaveFun()
  410. }
  411. } else {
  412. console.log('error submit!!')
  413. return false
  414. }
  415. })
  416. },
  417. // 新建或编辑销售单
  418. salesSaveFun () {
  419. const _this = this
  420. const form = this.form
  421. console.log(form, 'save data')
  422. salesSave(form).then(res => {
  423. if (res.status == 200) {
  424. _this.$message.success(res.message)
  425. _this.$emit('ok', res.data)
  426. if (_this.form.id) {
  427. _this.$emit('updateData')
  428. }
  429. _this.cancel()
  430. }
  431. })
  432. },
  433. cancel () {
  434. this.opened = false
  435. this.$refs.ruleForm.resetFields()
  436. this.$emit('cancel')
  437. },
  438. // 客户无分页列表数据
  439. getCustAllList () {
  440. const _this = this
  441. custAllList().then(res => {
  442. if (res.status == 200) {
  443. _this.custAllList = res.data || []
  444. } else {
  445. _this.custAllList = []
  446. }
  447. })
  448. },
  449. // 获取业务员列表数据
  450. getUserAllList () {
  451. getUserAllList({}).then(res => {
  452. if (res.status == 200) {
  453. this.userList = res.data || []
  454. } else {
  455. this.userList = []
  456. }
  457. })
  458. },
  459. // 获取城市列表
  460. getCityList (val) {
  461. console.log(val, '-------------')
  462. this.addrCityList = []
  463. this.addrDistrictList = []
  464. this.form.shippingAddressCitySn = undefined
  465. this.form.shippingAddressCityName = ''
  466. this.form.shippingAddressCountySn = undefined
  467. this.form.shippingAddressCountyName = ''
  468. this.form.shippingAddress = ''
  469. this.form.shippingAddressCountyName = this.addrProvinceList.find(item => item.id == val).name
  470. this.getArea('city', val)
  471. },
  472. // 获取区县列表
  473. getAreaList (val) {
  474. this.addrDistrictList = []
  475. this.form.shippingAddressCountySn = undefined
  476. this.form.shippingAddressCountyName = ''
  477. this.form.shippingAddress = ''
  478. this.form.shippingAddressCityName = this.addrCityList.find(item => item.id == val).name
  479. this.getArea('district', val)
  480. },
  481. // 区县变更
  482. areaCharged (val) {
  483. this.form.shippingAddress = ''
  484. this.form.shippingAddressCountyName = this.addrDistrictList.find(item => item.id == val).name
  485. },
  486. // 省/市/区
  487. getArea (type, sn) {
  488. let params
  489. if (type == 'province') {
  490. params = { level: '1' }
  491. } else {
  492. params = { psn: sn }
  493. }
  494. getArea(params).then(res => {
  495. if (res.status == 200) {
  496. if (type == 'province') {
  497. this.addrProvinceList = res.data || []
  498. } else if (type == 'city') {
  499. this.addrCityList = res.data || []
  500. } else if (type == 'district') {
  501. this.addrDistrictList = res.data || []
  502. }
  503. } else {
  504. if (type == 'province') {
  505. this.addrProvinceList = []
  506. } else if (type == 'city') {
  507. this.addrCityList = []
  508. } else if (type == 'district') {
  509. this.addrDistrictList = []
  510. }
  511. }
  512. })
  513. },
  514. filterOption (input, option) {
  515. return (
  516. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  517. )
  518. }
  519. },
  520. watch: {
  521. show (newValue, oldValue) {
  522. this.opened = newValue
  523. if (newValue) {
  524. this.getArea('province')
  525. this.getCustAllList()
  526. this.getUserAllList()
  527. }
  528. }
  529. }
  530. }
  531. </script>
  532. <style>
  533. </style>