addSales.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417
  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="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>
  59. <view class="form-footer-btn">
  60. <u-button class="handle-btn" size="medium" shape="circle" hover-class="none" @click="handleSaveCust" :custom-style="customBtnStyle">新增销售单</u-button>
  61. </view>
  62. <!-- 省市区 -->
  63. <Address ref="applyAddress" :isJrMini="false" @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="showUser" title="业务员" @confirm="userChange" :range="userList" range-key="name" mode="selector"></u-picker>
  68. </view>
  69. </template>
  70. <script>
  71. import {settleStyleQueryAll,salesSave} from '@/api/sales.js'
  72. import {customerDetail,employeeAllList,updateByCustomerSn} from '@/api/customer.js'
  73. import Address from '@/components/address.vue'
  74. import vSelect from '@/components/select/v-select.vue'
  75. export default{
  76. components:{Address,vSelect},
  77. data(){
  78. return{
  79. title:'',
  80. customerData:null, // 客户信息
  81. priceTypeName:'', //客户类型名称
  82. customBtnStyle: { // 自定义按钮样式
  83. margin:0
  84. },
  85. showDispatch:false,// 配送方式下拉弹窗初始值
  86. showSettle:false,//结算方式初始值
  87. settleTypeList:[],//收款方式列表
  88. settleStyleName:'',//收款方式名称
  89. areaInfo: {}, // 省市区
  90. areaIdArr: [], // 省市区id数组
  91. itemId:'',
  92. ckList:[{dispName: "是",code:1,lookupCode: "FLAG"},{dispName: "否",code:0,lookupCode: "FLAG"}],
  93. showUser:false,//业务员下拉框初始默认值
  94. userList:[], //业务员数据
  95. userName:'', //业务员姓名
  96. salesManSn:'', //业务员sn
  97. defaultSettleIndex:[0] ,//选中收款方式的下标
  98. defaultIndex:[0] ,//选中收款方式的下标
  99. defaultCustIndex:[0],//选中客户类型的下标
  100. defaultUserIndex:[0],//选中业务员的下标
  101. //销售单form
  102. form:{
  103. buyerName: '', // 客户名称
  104. buyerSn: undefined, // 客户sn
  105. consigneeTel: '', // 联系电话
  106. contactMobile: '',
  107. consigneeName: '', // 联系人
  108. shippingAddressProvinceSn: undefined, // 省
  109. shippingAddressProvinceName: '',
  110. shippingAddressCitySn: undefined, // 市
  111. shippingAddressCityName: '',
  112. shippingAddressCountySn: undefined, // 区
  113. shippingAddressCountyName: '',
  114. shippingAddress: '', // 详细地址
  115. fax: '', // 客户传真
  116. dispatchType: undefined, // 配送方式
  117. satelliteFlag: 0, // 是否卫星仓客户
  118. priceType: undefined, // 价格类型
  119. settleStyleSn: undefined, // 收款方式
  120. salesManSn: undefined, // 业务员
  121. salesManName: '',
  122. distributionFlag: '0', // 铺货出库
  123. salesTragetType: 'CUSTOMER',
  124. remarks: '' ,// 备注
  125. addrProvinceList:[],
  126. addrDistrictList:[],
  127. addrCityList:[]
  128. }
  129. }
  130. },
  131. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  132. onReady() {
  133. this.$refs.uForm.setRules(this.rules);
  134. },
  135. onLoad(option) {
  136. console.log(option.nowId,'option')
  137. this.itemId=option.nowId
  138. this.pageInit()
  139. },
  140. methods:{
  141. async pageInit(){
  142. const a = await employeeAllList({}) // 获取业务员列表数据
  143. const b = await settleStyleQueryAll({}) // 获取结算方式列表
  144. this.userList = a.status == 200 ? a.data : []
  145. this.settleTypeList = b.status == 200 ? b.data : []
  146. if(this.itemId){
  147. this.getCustomerData(this.itemId)
  148. }
  149. },
  150. getCustomerData(val){
  151. uni.showLoading({title:'加载中...',mask:true})
  152. customerDetail({id:val}).then(res=>{
  153. if(res.status==200){
  154. uni.hideLoading({})
  155. this.customerData=res.data
  156. this.areaIdArr=[this.customerData.provinceSn,this.customerData.citySn,this.customerData.countySn]
  157. this.areaInfo={label:this.customerData.provinceName+'-'+this.customerData.cityName+'-'+this.customerData.countyName}
  158. // this.setFun(res.data)
  159. this.form = Object.assign(this.form, {
  160. buyerName: this.customerData.customerName, // 客户名称
  161. buyerSn: this.customerData.customerSn, // 客户sn
  162. consigneeTel: this.customerData.contactTel, // 联系电话
  163. contactMobile: this.customerData.contactMobile,
  164. consigneeName: this.customerData.contactName, // 联系人
  165. shippingAddressProvinceSn: this.customerData.provinceSn, // 省
  166. shippingAddressProvinceName: this.customerData.provinceName,
  167. shippingAddressCitySn: this.customerData.citySn, // 市
  168. shippingAddressCityName: this.customerData.cityName,
  169. shippingAddressCountySn: this.customerData.countySn, // 区
  170. shippingAddressCountyName: this.customerData.countyName,
  171. shippingAddress: this.customerData.customerAddr, // 详细地址
  172. fax: this.customerData.fax, // 客户传真
  173. dispatchType: this.customerData.dispatchType, // 配送方式
  174. satelliteFlag: this.customerData.satelliteFlag, // 是否卫星仓客户
  175. priceType: this.customerData.priceType, // 价格类型
  176. settleStyleSn: this.customerData.settleStyleSn // 收款方式
  177. })
  178. if(this.customerData.priceType){
  179. setTimeout(()=>{
  180. this.$refs.priceType.setVal(this.customerData.priceType)
  181. },200)
  182. }
  183. if(this.customerData.dispatchType){
  184. setTimeout(()=>{
  185. this.$refs.dispatchType.setVal(this.customerData.dispatchType)
  186. },200)
  187. }
  188. this.form=Object.assign(this.form,res.data)
  189. // 回显收款方式并下拉数据默认高亮选中
  190. const ind=this.settleTypeList.findIndex((item)=>{
  191. return item.settleStyleSn==this.customerData.settleStyleSn
  192. })
  193. if(ind){
  194. this.settleStyleName=this.settleTypeList[ind].name
  195. this.defaultSettleIndex=[ind]
  196. }
  197. // 回显业务员并下拉数据默认高亮选中
  198. if(this.customerData.salesManSn){
  199. const userInd=this.userList.findIndex((item)=>{
  200. return item.customerSn==this.customerData.salesManSn
  201. })
  202. this.defaultUserIndex=[userInd]
  203. this.form.salesManName=this.userList[userInd].name
  204. this.form.salesManSn=this.userList[userInd].salesManSn
  205. }
  206. }else{
  207. this.customerData=null
  208. }
  209. })
  210. },
  211. // 客户信息信息更改后先保存
  212. handleSaveCust () {
  213. const params = {
  214. customerName: this.form.buyerName,
  215. customerSn: this.form.buyerSn,
  216. contactTel: this.form.consigneeTel, // 联系电话
  217. contactMobile: this.form.contactMobile,
  218. contactName: this.form.consigneeName, // 联系人
  219. provinceSn: this.form.shippingAddressProvinceSn, // 省
  220. provinceName: this.form.shippingAddressProvinceName,
  221. citySn: this.form.shippingAddressCitySn, // 市
  222. cityName: this.form.shippingAddressCityName,
  223. countySn: this.form.shippingAddressCountySn, // 区
  224. countyName: this.form.shippingAddressCountyName,
  225. customerAddr: this.form.shippingAddress, // 详细地址
  226. dispatchType: this.form.dispatchType, // 配送方式
  227. priceType: this.form.priceType, // 价格类型
  228. settleStyleSn: this.form.settleStyleSn // 收款方式
  229. }
  230. updateByCustomerSn(params).then(res => {
  231. if (res.status == 200) {
  232. // 保存销售单
  233. this.salesSbmit()
  234. }
  235. })
  236. },
  237. // 重新选择
  238. goBack(){
  239. uni.redirectTo({
  240. url: '/pages/sales/chooseCustomer?backPage=addSales'
  241. })
  242. },
  243. radioChange(e) {
  244. console.log(e);
  245. this.form.distributionFlag=e
  246. },
  247. // 选择价格类型
  248. chooseType(val){
  249. console.log(val,'vai')
  250. this.form.priceType=val
  251. },
  252. // 选择配送方式
  253. choosedispatchType(val){
  254. this.form.dispatchType=val
  255. },
  256. // 选择省区市
  257. areaConfirm(e) {
  258. console.log('已选择的省市区', e)
  259. this.areaInfo = e
  260. this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
  261. this.form.shippingAddressProvinceSn=e.provinceCode
  262. this.form.shippingAddressCitySn=e.cityCode
  263. this.form.shippingAddressCountySn=e.areaCode
  264. this.form.shippingAddressProvinceName=e.labelArr[0]
  265. this.form.shippingAddressCityName=e.labelArr[1]
  266. this.form.shippingAddressCountyName=e.labelArr[2]
  267. },
  268. openAddress(){
  269. // 省市区 回显 参数为省市区id数组
  270. // console.log(this.areaIdArr,'this.areaIdArr')
  271. this.$refs.applyAddress.open(this.areaIdArr)
  272. },
  273. // 收款方式change
  274. settleStyleChange(e){
  275. this.defaultSettleIndex=[e]
  276. this.settleStyleName=this.settleTypeList[e].name
  277. this.form.settleStyleSn=this.settleTypeList[e].settleStyleSn
  278. },
  279. // 业务员change
  280. userChange(e){
  281. this.defaultUserIndex=[e]
  282. this.form.salesManName=this.userList[e].name
  283. this.form.salesManSn=this.userList[e].salesManSn
  284. },
  285. // 保存 (新增销售单)
  286. salesSbmit(){
  287. console.log('保存===========')
  288. this.$refs.uForm.validate(valid => {
  289. if (valid) {
  290. console.log('验证通过');
  291. if (this.form.customerName ==='') {
  292. uni.showToast({
  293. title: '请输入客户名称',
  294. icon: 'none'
  295. })
  296. return false
  297. }
  298. // 省市区
  299. if(this.areaIdArr.length == 0){
  300. uni.showToast({icon: 'none',title: '请选择省市区'})
  301. return
  302. }
  303. if (this.form.priceType ==undefined) {
  304. uni.showToast({
  305. title: '请选择价格类型',
  306. icon: 'none'
  307. })
  308. return false
  309. }
  310. if (this.form.settleStyleSn ==undefined) {
  311. uni.showToast({
  312. title: '请选择收款方式',
  313. icon: 'none'
  314. })
  315. return false
  316. }
  317. const params={
  318. buyerName:this.customerData.customerName , // 客户名称
  319. buyerSn: this.customerData.customerSn, // 客户sn
  320. consigneeTel: this.form.consigneeTel?this.form.consigneeTel: this.customerData.contactTel, // 联系电话
  321. contactMobile:this.form.contactMobile?this.form.contactMobile: this.customerData.contactMobile, // 联系手机
  322. consigneeName:this.form.consigneeName?this.form.consigneeName: this.customerData.contactName, // 联系人
  323. shippingAddressProvinceSn:this.form.shippingAddressProvinceSn?this.form.shippingAddressProvinceSn: this.customerData.provinceSn, // 省
  324. shippingAddressProvinceName:this.form.shippingAddressProvinceName?this.form.shippingAddressProvinceName: this.customerData.customerName,
  325. shippingAddressCitySn:this.form.shippingAddressCitySn?this.form.shippingAddressCitySn: this.customerData.citySn, // 市
  326. shippingAddressCityName:this.form.shippingAddressCityName?this.form.shippingAddressCityName: this.customerData.cityName,
  327. shippingAddressCountySn:this.form.shippingAddressCountySn?this.form.shippingAddressCountySn: this.customerData.countySn, // 区
  328. shippingAddressCountyName:this.form.shippingAddressCountyName?this.form.shippingAddressCountyName: this.customerData.countyName,
  329. shippingAddress:this.form.customerAddr?this.form.customerAddr: this.customerData.customerAddr, // 详细地址
  330. fax:this.form.fax?this.form.fax: this.customerData.fax, // 客户传真
  331. dispatchType:this.form.dispatchType?this.form.dispatchType: this.customerData.dispatchType, // 配送方式
  332. satelliteFlag: 0, // 是否卫星仓客户
  333. priceType:this.form.priceType?this.form.priceType: this.customerData.priceType, // 价格类型
  334. settleStyleSn:this.form.settleStyleSn?this.form.settleStyleSn: this.customerData.settleStyleSn, // 收款方式
  335. salesManSn:this.form.salesManSn ||undefined, // 业务员
  336. salesManName: '',
  337. distributionFlag: this.form.distributionFlag, // 铺货出库
  338. salesTragetType: 'CUSTOMER',
  339. remarks: this.form.remarks // 备注
  340. }
  341. console.log(params,'params')
  342. salesSave(params).then(res=>{
  343. if(res.status == 200) {
  344. uni.showToast({
  345. title: res.message,
  346. icon: 'none'
  347. })
  348. uni.$emit("refreshSalesHomeBL")
  349. setTimeout(()=>{
  350. uni.redirectTo({
  351. url:'/pages/sales/edit?pageType=edit&data='+JSON.stringify(res.data)
  352. })
  353. },300)
  354. }
  355. })
  356. } else {
  357. console.log('验证失败');
  358. }
  359. })
  360. },
  361. }
  362. }
  363. </script>
  364. <style lang="scss">
  365. page{
  366. height: 100vh;
  367. }
  368. .addCustomer-content{
  369. width: 100%;
  370. height: 100vh;
  371. display: flex;
  372. flex-direction: column;
  373. .content-customerName{
  374. width: 100%;
  375. .customerName{
  376. width: 100%;
  377. color: #000000;
  378. font-size: 30upx;
  379. font-weight: 1000;
  380. background-color: #fff;
  381. padding:10upx 40upx 20upx;
  382. }
  383. }
  384. .content-box{
  385. padding:0 40upx;
  386. background-color: #fff;
  387. flex-grow: 1;
  388. overflow: auto;
  389. }
  390. .content-form{
  391. .receiveAddress{
  392. width: 100%;
  393. line-height: 1.5em;
  394. box-sizing: border-box;
  395. font-style: normal;
  396. text-align: end;
  397. }
  398. }
  399. .content-form:not(:last-child){
  400. border-bottom: none;
  401. }
  402. .form-footer-btn{
  403. background-color: #fff;
  404. width: 100%;
  405. padding:8px 30upx ;
  406. .handle-btn{
  407. width: 100%;
  408. background-color: rgb(51, 95, 182);
  409. color: #fff;
  410. }
  411. }
  412. }
  413. </style>