addSales.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473
  1. <template>
  2. <view class="addCustomer-content">
  3. <view class="content-customerName">
  4. <view class="flex justify_between align_center customerName">
  5. <text>{{customerData?customerData.customerName:''}}</text>
  6. <u-button size="mini" :hair-line="false" plain type="primary" hover-class="none" @click="goBack" :custom-style="customBtnStyle">重新选择</u-button>
  7. </view>
  8. </view>
  9. <view class="flex_1 content-box">
  10. <view class="content-form">
  11. <u-form :model="form" ref="uForm" label-width="180" :error-type="['toast']">
  12. <u-form-item label="客户地址" required >
  13. <u-input v-model="areaInfo.label" :disabled="true" input-align="right" placeholder="请选择客户地址" @click="openAddress"/>
  14. <u-icon name="arrow-right" color="#C0C4CC" slot="right" @click="openAddress"></u-icon>
  15. </u-form-item>
  16. <u-form-item label="详细地址">
  17. <textarea :auto-height="true" input-align="right" placeholder="请输入详细地址(最多60个字符)" :maxlength="60" v-model="form.shippingAddress" class="receiveAddress" placeholder-style="color:#C0C4CC;font-size:28upx;"/>
  18. </u-form-item>
  19. <u-form-item label="联系人">
  20. <u-input v-model="form.consigneeName" input-align="right" placeholder="请输入联系人(最多30个字符)" :maxlength="11"/>
  21. </u-form-item>
  22. <u-form-item label="联系电话">
  23. <u-input v-model.trim="form.consigneeTel" placeholder="请输入联系电话(最多15个字符)" input-align="right" :maxlength="15"/>
  24. </u-form-item>
  25. <u-form-item label="联系手机"><u-input v-model.trim="form.contactMobile" placeholder="请输入联系手机(最多11位字符)" input-align="right" :maxlength="11"/>
  26. </u-form-item>
  27. <u-form-item label="价格类型" required >
  28. <v-select ref="priceType" :disabled="true" placeholder="请选择价格类型" @itemChange="chooseType" code="PRICE_TYPE" style="width: 100%"></v-select>
  29. </u-form-item>
  30. <u-form-item label="收款方式" required prop="settleStyleSn">
  31. <u-input v-model="settleStyleName" input-align="right" :disabled="true" placeholder="请选择收款方式" @click="showSettle=true"/>
  32. <u-icon name="arrow-right" color="#C0C4CC" slot="right"></u-icon>
  33. </u-form-item>
  34. <u-form-item label="铺货出库" required v-if="itemId">
  35. <view style="width: 100%;display:flex;justify-content: flex-end;">
  36. <u-radio-group v-model="form.distributionFlag" @change="radioChange" >
  37. <u-radio
  38. v-for="(item, index) in ckList" :key="index"
  39. :name="item.code"
  40. >
  41. {{item.dispName}}
  42. </u-radio>
  43. </u-radio-group>
  44. </view>
  45. </u-form-item>
  46. <u-form-item label="配送方式" >
  47. <v-select ref="dispatchType" :disabled="true" placeholder="请选择配送方式" @itemChange="choosedispatchType" code="DISPATCH_TYPE" style="width: 100%"></v-select>
  48. </u-form-item>
  49. <u-form-item label="业务员">
  50. <u-input v-model="userName" input-align="right" :disabled="true" placeholder="请选择业务员" @click="showUser=true"/>
  51. <u-icon name="arrow-right" color="#C0C4CC" slot="right" @click="showUser=true"></u-icon>
  52. </u-form-item>
  53. <u-form-item label="备注">
  54. <textarea :auto-height="true" input-align="right" placeholder="请输入备注(最多100个字符)" :maxlength="100" v-model="form.remarks" class="receiveAddress" placeholder-style="color:#C0C4CC;font-size:28upx;"/>
  55. </u-form-item>
  56. </u-form>
  57. </view>
  58. <view class="form-footer-btn">
  59. <u-button class="handle-btn" size="medium" shape="circle" hover-class="none" @click="handleSaveCust" :custom-style="customBtnStyle">新增销售单</u-button>
  60. </view>
  61. </view>
  62. <!-- 省市区 -->
  63. <Address ref="applyAddress" @onConfirm="areaConfirm"></Address>
  64. <!-- 选择收款方式 -->
  65. <u-picker v-model="showSettle" title="收款方式" @confirm="settleStyleChange" :range="settleTypeList" range-key="name" mode="selector" :default-selector="JSON.parse(JSON.stringify(defaultSettleIndex))"></u-picker>
  66. <!-- 客户类型 -->
  67. <u-picker v-model="showCust" title="客户类型" @confirm="custTypeChange" :range="custTypeList" range-key="name" mode="selector" :default-selector="JSON.parse(JSON.stringify(defaultCustIndex))"></u-picker>
  68. <!-- 业务员 -->
  69. <u-picker v-model="showUser" title="业务员" @confirm="userChange" :range="userList" range-key="name" mode="selector"></u-picker>
  70. </view>
  71. </template>
  72. <script>
  73. import {settleStyleQueryAll,salesSave} from '@/api/sales.js'
  74. import {customerDetail,custType,employeeAllList,updateByCustomerSn} from '@/api/customer.js'
  75. import Address from '@/components/address.vue'
  76. import vSelect from '@/components/select/v-select.vue'
  77. export default{
  78. components:{Address,vSelect},
  79. data(){
  80. return{
  81. title:'',
  82. customerData:null, // 客户信息
  83. priceTypeName:'', //客户类型名称
  84. customBtnStyle: { // 自定义按钮样式
  85. margin:0
  86. },
  87. showDispatch:false,// 配送方式下拉弹窗初始值
  88. showSettle:false,//结算方式初始值
  89. settleTypeList:[],//收款方式列表
  90. settleStyleName:'',//收款方式名称
  91. custTypeList:[] ,// 客户类型数据
  92. showCust:false, //客户类型下拉弹窗初始值
  93. custTypeName:'', // 客户类型名称
  94. areaInfo: {}, // 省市区
  95. areaIdArr: [], // 省市区id数组
  96. itemId:'',
  97. ckList:[{dispName: "是",code:1,lookupCode: "FLAG"},{dispName: "否",code:0,lookupCode: "FLAG"}],
  98. showUser:false,//业务员下拉框初始默认值
  99. userList:[], //业务员数据
  100. userName:'', //业务员姓名
  101. salesManSn:'', //业务员sn
  102. defaultSettleIndex:[0] ,//选中收款方式的下标
  103. defaultIndex:[0] ,//选中收款方式的下标
  104. defaultCustIndex:[0],//选中客户类型的下标
  105. defaultUserIndex:[0],//选中业务员的下标
  106. //销售单form
  107. form:{
  108. buyerName: '', // 客户名称
  109. buyerSn: undefined, // 客户sn
  110. consigneeTel: '', // 联系电话
  111. contactMobile: '',
  112. consigneeName: '', // 联系人
  113. shippingAddressProvinceSn: undefined, // 省
  114. shippingAddressProvinceName: '',
  115. shippingAddressCitySn: undefined, // 市
  116. shippingAddressCityName: '',
  117. shippingAddressCountySn: undefined, // 区
  118. shippingAddressCountyName: '',
  119. shippingAddress: '', // 详细地址
  120. fax: '', // 客户传真
  121. dispatchType: undefined, // 配送方式
  122. satelliteFlag: 0, // 是否卫星仓客户
  123. priceType: undefined, // 价格类型
  124. settleStyleSn: undefined, // 收款方式
  125. salesManSn: undefined, // 业务员
  126. salesManName: '',
  127. distributionFlag: '0', // 铺货出库
  128. salesTragetType: 'CUSTOMER',
  129. remarks: '' ,// 备注
  130. addrProvinceList:[],
  131. addrDistrictList:[],
  132. addrCityList:[]
  133. }
  134. }
  135. },
  136. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  137. onReady() {
  138. this.$refs.uForm.setRules(this.rules);
  139. },
  140. onLoad(option) {
  141. console.log(option.nowId,'option')
  142. if(option.nowId){
  143. // if(option.pageType=='edit'){
  144. // uni.setNavigationBarTitle({
  145. //   title:'编辑销售单'
  146. // })
  147. // }else{
  148. // uni.setNavigationBarTitle({
  149. //   title:'新增销售单'
  150. // })
  151. // }
  152. this.itemId=option.nowId
  153. this.getCustomerData(this.itemId)
  154. this.getUserAllList()
  155. setTimeout(()=>{
  156. // 回显收款方式并下拉数据默认高亮选中
  157. const ind=this.settleTypeList.findIndex((item)=>{
  158. return item.settleStyleSn==this.customerData.settleStyleSn
  159. })
  160. console.log(ind,'ind')
  161. this.settleStyleName=this.settleTypeList[ind].name
  162. this.defaultSettleIndex=[ind]
  163. // 回显业务员并下拉数据默认高亮选中
  164. if(this.customerData.salesManSn){
  165. const userInd=this.userList.findIndex((item)=>{
  166. return item.customerSn==this.customerData.salesManSn
  167. })
  168. this.defaultUserIndex=[userInd]
  169. this.form.salesManName=this.userList[userInd].name
  170. this.form.salesManSn=this.userList[userInd].salesManSn
  171. }
  172. console.log(ind,'a',JSON.parse(JSON.stringify(this.defaultSettleIndex)) )
  173. },200)
  174. }
  175. this.getSettleStyle()
  176. this.getCustomerList()
  177. },
  178. methods:{
  179. getCustomerData(val){
  180. uni.showLoading({title:'加载中...',mask:true})
  181. customerDetail({id:val}).then(res=>{
  182. if(res.status==200){
  183. uni.hideLoading({})
  184. this.customerData=res.data
  185. this.areaIdArr=[this.customerData.provinceSn,this.customerData.citySn,this.customerData.countySn]
  186. this.areaInfo={label:this.customerData.provinceName+'-'+this.customerData.cityName+'-'+this.customerData.countyName}
  187. // this.setFun(res.data)
  188. this.form = Object.assign(this.form, {
  189. buyerName: this.customerData.customerName, // 客户名称
  190. buyerSn: this.customerData.customerSn, // 客户sn
  191. consigneeTel: this.customerData.contactTel, // 联系电话
  192. contactMobile: this.customerData.contactMobile,
  193. consigneeName: this.customerData.contactName, // 联系人
  194. shippingAddressProvinceSn: this.customerData.provinceSn, // 省
  195. shippingAddressProvinceName: this.customerData.provinceName,
  196. shippingAddressCitySn: this.customerData.citySn, // 市
  197. shippingAddressCityName: this.customerData.cityName,
  198. shippingAddressCountySn: this.customerData.countySn, // 区
  199. shippingAddressCountyName: this.customerData.countyName,
  200. shippingAddress: this.customerData.customerAddr, // 详细地址
  201. fax: this.customerData.fax, // 客户传真
  202. dispatchType: this.customerData.dispatchType, // 配送方式
  203. satelliteFlag: this.customerData.satelliteFlag, // 是否卫星仓客户
  204. priceType: this.customerData.priceType, // 价格类型
  205. settleStyleSn: this.customerData.settleStyleSn // 收款方式
  206. })
  207. if(this.customerData.priceType || this.customerData.dispatchType){
  208. setTimeout(()=>{
  209. this.$refs.priceType.setVal(this.customerData.priceType)
  210. },200)
  211. }
  212. if(this.customerData.dispatchType){
  213. setTimeout(()=>{
  214. this.$refs.dispatchType.setVal(this.customerData.dispatchType)
  215. },200)
  216. }
  217. this.form=Object.assign(this.form,res.data)
  218. }else{
  219. this.customerData=null
  220. }
  221. })
  222. },
  223. // 客户信息信息更改后先保存
  224. handleSaveCust () {
  225. const params = {
  226. customerName: this.form.buyerName,
  227. customerSn: this.form.buyerSn,
  228. contactTel: this.form.consigneeTel, // 联系电话
  229. contactMobile: this.form.contactMobile,
  230. contactName: this.form.consigneeName, // 联系人
  231. provinceSn: this.form.shippingAddressProvinceSn, // 省
  232. provinceName: this.form.shippingAddressProvinceName,
  233. citySn: this.form.shippingAddressCitySn, // 市
  234. cityName: this.form.shippingAddressCityName,
  235. countySn: this.form.shippingAddressCountySn, // 区
  236. countyName: this.form.shippingAddressCountyName,
  237. customerAddr: this.form.shippingAddress, // 详细地址
  238. dispatchType: this.form.dispatchType, // 配送方式
  239. priceType: this.form.priceType, // 价格类型
  240. settleStyleSn: this.form.settleStyleSn // 收款方式
  241. }
  242. updateByCustomerSn(params).then(res => {
  243. if (res.status == 200) {
  244. // 保存销售单
  245. this.salesSbmit()
  246. }
  247. })
  248. },
  249. // 重新选择
  250. goBack(){
  251. uni.$emit('clear')
  252. setTimeout(()=>{
  253. uni.navigateBack({})
  254. },500)
  255. },
  256. radioChange(e) {
  257. console.log(e);
  258. this.form.distributionFlag=e
  259. },
  260. // 选择价格类型
  261. chooseType(val){
  262. console.log(val,'vai')
  263. this.form.priceType=val
  264. },
  265. // 选择配送方式
  266. choosedispatchType(val){
  267. this.form.dispatchType=val
  268. },
  269. // 选择省区市
  270. areaConfirm(e) {
  271. console.log('已选择的省市区', e)
  272. this.areaInfo = e
  273. this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
  274. this.form.shippingAddressProvinceSn=e.provinceCode
  275. this.form.shippingAddressCitySn=e.cityCode
  276. this.form.shippingAddressCountySn=e.areaCode
  277. this.form.shippingAddressProvinceName=e.labelArr[0]
  278. this.form.shippingAddressCityName=e.labelArr[1]
  279. this.form.shippingAddressCountyName=e.labelArr[2]
  280. },
  281. openAddress(){
  282. // 省市区 回显 参数为省市区id数组
  283. // console.log(this.areaIdArr,'this.areaIdArr')
  284. this.$refs.applyAddress.open(this.areaIdArr)
  285. },
  286. // 获取业务员列表数据
  287. getUserAllList () {
  288. employeeAllList({}).then(res => {
  289. if (res.status == 200) {
  290. this.userList = res.data || []
  291. } else {
  292. this.userList = []
  293. }
  294. })
  295. },
  296. // 获取客户类型列表
  297. getCustomerList(){
  298. custType({}).then(res=>{
  299. if(res.status==200){
  300. this.custTypeList=res.data
  301. }else{
  302. this.custTypeList=[]
  303. }
  304. })
  305. },
  306. // 获取结算方式列表
  307. getSettleStyle(){
  308. settleStyleQueryAll({}).then(res=>{
  309. if(res.status==200){
  310. this.settleTypeList=res.data
  311. }else{
  312. this.settleTypeList=null
  313. }
  314. })
  315. },
  316. // 收款方式change
  317. settleStyleChange(e){
  318. console.log(e,'data')
  319. this.defaultSettleIndex=[e]
  320. this.settleStyleName=this.settleTypeList[e].name
  321. this.form.settleStyleSn=this.settleTypeList[e].settleStyleSn
  322. },
  323. // 客户类型change
  324. custTypeChange(e){
  325. this.defaultCustIndex=[e]
  326. this.custTypeName=this.custTypeList[e].name
  327. this.form.customerTypeSn=this.custTypeList[e].customerTypeSn
  328. },
  329. // 业务员change
  330. userChange(e){
  331. this.defaultUserIndex=[e]
  332. this.form.salesManName=this.userList[e].name
  333. this.form.salesManSn=this.userList[e].salesManSn
  334. },
  335. // 保存 (新增销售单)
  336. salesSbmit(){
  337. console.log('保存===========')
  338. this.$refs.uForm.validate(valid => {
  339. if (valid) {
  340. console.log('验证通过');
  341. if (this.form.customerName ==='') {
  342. uni.showToast({
  343. title: '请输入客户名称',
  344. icon: 'none'
  345. })
  346. return false
  347. }
  348. // 省市区
  349. if(this.areaIdArr.length == 0){
  350. uni.showToast({icon: 'none',title: '请选择省市区'})
  351. return
  352. }
  353. if (this.form.priceType ==undefined) {
  354. uni.showToast({
  355. title: '请选择价格类型',
  356. icon: 'none'
  357. })
  358. return false
  359. }
  360. if (this.form.settleStyleSn ==undefined) {
  361. uni.showToast({
  362. title: '请选择收款方式',
  363. icon: 'none'
  364. })
  365. return false
  366. }
  367. const params={
  368. buyerName:this.customerData.customerName , // 客户名称
  369. buyerSn: this.customerData.customerSn, // 客户sn
  370. consigneeTel: this.form.consigneeTel?this.form.consigneeTel: this.customerData.contactTel, // 联系电话
  371. contactMobile:this.form.contactMobile?this.form.contactMobile: this.customerData.contactMobile, // 联系手机
  372. consigneeName:this.form.consigneeName?this.form.consigneeName: this.customerData.contactName, // 联系人
  373. shippingAddressProvinceSn:this.form.shippingAddressProvinceSn?this.form.shippingAddressProvinceSn: this.customerData.provinceSn, // 省
  374. shippingAddressProvinceName:this.form.shippingAddressProvinceName?this.form.shippingAddressProvinceName: this.customerData.customerName,
  375. shippingAddressCitySn:this.form.shippingAddressCitySn?this.form.shippingAddressCitySn: this.customerData.citySn, // 市
  376. shippingAddressCityName:this.form.shippingAddressCityName?this.form.shippingAddressCityName: this.customerData.cityName,
  377. shippingAddressCountySn:this.form.shippingAddressCountySn?this.form.shippingAddressCountySn: this.customerData.countySn, // 区
  378. shippingAddressCountyName:this.form.shippingAddressCountyName?this.form.shippingAddressCountyName: this.customerData.countyName,
  379. shippingAddress:this.form.customerAddr?this.form.customerAddr: this.customerData.customerAddr, // 详细地址
  380. fax:this.form.fax?this.form.fax: this.customerData.fax, // 客户传真
  381. dispatchType:this.form.dispatchType?this.form.dispatchType: this.customerData.dispatchType, // 配送方式
  382. satelliteFlag: 0, // 是否卫星仓客户
  383. priceType:this.form.priceType?this.form.priceType: this.customerData.priceType, // 价格类型
  384. settleStyleSn:this.form.settleStyleSn?this.form.settleStyleSn: this.customerData.settleStyleSn, // 收款方式
  385. salesManSn:this.form.salesManSn ||undefined, // 业务员
  386. salesManName: '',
  387. distributionFlag: this.form.distributionFlag, // 铺货出库
  388. salesTragetType: 'CUSTOMER',
  389. remarks: this.remarks // 备注
  390. }
  391. console.log(params,'params')
  392. salesSave(params).then(res=>{
  393. if(res.status == 200) {
  394. uni.showToast({
  395. title: res.message,
  396. icon: 'none'
  397. })
  398. setTimeout(()=>{
  399. uni.navigateTo({
  400. url:'/pages/sales/edit?pageType=edit&data='+JSON.stringify(res.data)
  401. })
  402. },300)
  403. }
  404. })
  405. } else {
  406. console.log('验证失败');
  407. }
  408. })
  409. },
  410. }
  411. }
  412. </script>
  413. <style lang="scss">
  414. .addCustomer-content{
  415. width: 100%;
  416. height: 100vh;
  417. // background-color: #fff;
  418. display: flex;
  419. flex-direction: column;
  420. .content-customerName{
  421. width: 100%;
  422. .customerName{
  423. position: fixed;
  424. width: 100%;
  425. z-index: 999;
  426. color: #000000;
  427. font-size: 30upx;
  428. font-weight: 1000;
  429. background-color: #fff;
  430. padding:10upx 40upx 20upx;
  431. }
  432. }
  433. .content-box{
  434. display: flex;
  435. flex-direction: column;
  436. margin-top: 100upx;
  437. padding:0 40upx;
  438. background-color: #fff;
  439. }
  440. .content-form{
  441. flex: 1;
  442. .receiveAddress{
  443. width: 100%;
  444. line-height: 1.5em;
  445. box-sizing: border-box;
  446. font-style: normal;
  447. text-align: end;
  448. }
  449. }
  450. .content-form:not(:last-child){
  451. border-bottom: none;
  452. }
  453. .form-footer-btn{
  454. background-color: #fff;
  455. position: fixed;
  456. bottom: 0;
  457. left: 0;
  458. width: 100%;
  459. padding: 30upx;
  460. z-index: 999;
  461. .handle-btn{
  462. width: 100%;
  463. background-color: rgb(51, 95, 182);
  464. color: #fff;
  465. }
  466. }
  467. }
  468. </style>