chooseCustomModal.vue 17 KB

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