chooseCustomModal.vue 20 KB

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