addSales.vue 17 KB

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