chooseCustomModal.vue 20 KB

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