chooseCustomModal.vue 21 KB

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