addCustomer.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  1. <template>
  2. <view class="addCustomer-content">
  3. <view class="content-form">
  4. <u-form :model="form" ref="uForm" label-width="180" :error-type="['toast']">
  5. <u-form-item label="客户名称" required ><u-input v-model.trim="form.customerName" placeholder="请输入客户名称(最多30个字符)" input-align="right" :maxlength="60"/></u-form-item>
  6. <u-form-item label="客户地址" required >
  7. <u-input v-model="areaInfo.label" :disabled="true" input-align="right" placeholder="请选择客户地址" @click="openAddress"/>
  8. <u-icon name="arrow-right" color="#C0C4CC" slot="right" @click="openAddress"></u-icon>
  9. </u-form-item>
  10. <u-form-item label="详细地址">
  11. <textarea :auto-height="true" input-align="right" placeholder="请输入详细地址(最多60个字符)" :maxlength="60" v-model="form.customerAddr" class="receiveAddress" placeholder-style="color:#C0C4CC;font-size:28upx;"/>
  12. </u-form-item>
  13. <u-form-item label="联系人">
  14. <u-input v-model="form.contactName" input-align="right" placeholder="请输入联系人(最多30个字符)" :maxlength="11"/>
  15. </u-form-item>
  16. <u-form-item label="联系电话">
  17. <u-input v-model.trim="form.contactTel" placeholder="请输入联系电话(最多15个字符)" input-align="right" :maxlength="15"/>
  18. </u-form-item>
  19. <u-form-item label="联系手机"><u-input v-model.trim="form.contactMobile" placeholder="请输入联系手机(最多11位字符)" input-align="right" :maxlength="11"/>
  20. </u-form-item>
  21. <u-form-item label="价格类型" required >
  22. <v-select ref="priceType" :disabled="true" placeholder="请选择价格类型" @itemChange="chooseType" code="PRICE_TYPE" style="width: 100%"></v-select>
  23. <u-icon name="arrow-right" color="#C0C4CC" slot="right"></u-icon>
  24. </u-form-item>
  25. <u-form-item label="收款方式" required prop="settleStyleSn">
  26. <u-input v-model="settleStyleName" input-align="right" :disabled="true" placeholder="请选择收款方式" @click="showSettle=true"/>
  27. <u-icon name="arrow-right" color="#C0C4CC" slot="right"></u-icon>
  28. </u-form-item>
  29. <u-form-item label="客户传真">
  30. <u-input v-model="form.fax" input-align="right" placeholder="请输入客户传真(最多30个字符)" :maxlength="30"/>
  31. </u-form-item>
  32. <u-form-item label="客户类型">
  33. <u-input v-model="custTypeName" input-align="right" :disabled="true" placeholder="请选择客户类型" @click="showCust=true"/>
  34. <u-icon name="arrow-right" color="#C0C4CC" slot="right" @click="showCust=true"></u-icon>
  35. </u-form-item>
  36. <u-form-item label="配送方式" >
  37. <v-select ref="dispatchType" :disabled="true" placeholder="请选择配送方式" @itemChange="choosedispatchType" code="DISPATCH_TYPE" style="width: 100%"></v-select>
  38. <u-icon name="arrow-right" color="#C0C4CC" slot="right" @click="chooseType"></u-icon>
  39. </u-form-item>
  40. </u-form>
  41. </view>
  42. <view class="form-footer-btn">
  43. <u-button class="handle-btn" size="medium" shape="circle" hover-class="none" @click="customerSubmit" :custom-style="customBtnStyle">保存</u-button>
  44. </view>
  45. <!-- 省市区 -->
  46. <Address ref="applyAddress" @onConfirm="areaConfirm"></Address>
  47. <!-- 选择收款方式 -->
  48. <u-picker v-model="showSettle" title="收款方式" @confirm="settleStyleChange" :range="settleTypeList" range-key="name" mode="selector" :default-selector="JSON.parse(JSON.stringify(defaultSettleIndex))"></u-picker>
  49. <!-- 客户类型 -->
  50. <u-picker v-model="showCust" title="客户类型" @confirm="custTypeChange" :range="custTypeList" range-key="name" mode="selector" :default-selector="JSON.parse(JSON.stringify(defaultCustIndex))"></u-picker>
  51. </view>
  52. </template>
  53. <script>
  54. import {customerDetail,settleStyleQueryAll,custType,custSave,employeeAllList,salesSave} from '@/api/sales.js'
  55. import { getLookUpDatas } from '@/api/data'
  56. import Address from '@/components/address.vue'
  57. import vSelect from '@/components/select/v-select.vue'
  58. export default{
  59. components:{Address,vSelect},
  60. data(){
  61. return{
  62. customerData:null, // 客户信息
  63. priceTypeName:'', //客户类型名称
  64. customBtnStyle: { // 自定义按钮样式
  65. margin:0
  66. },
  67. // 客户form
  68. form:{
  69. id: null,
  70. customerName: '', // 客户名称
  71. contactTel: '', // 联系电话
  72. contactMobile: '', // 联系手机
  73. contactName: '', // 联系人
  74. provinceSn: undefined, // 省
  75. provinceName: '',
  76. citySn: undefined, // 市
  77. cityName: '',
  78. countySn: undefined, // 区
  79. countyName: '',
  80. customerAddr: '', // 详细地址
  81. fax: '', // 客户传真
  82. dispatchType: undefined, // 配送方式
  83. satelliteFlag: 0, // 是否卫星仓客户
  84. customerTypeSn: undefined, // 客户类型
  85. priceType: '', // 价格类型
  86. settleStyleSn: undefined // 收款方式
  87. },
  88. distributionFlag:0, //铺货出库
  89. showDispatch:false,// 配送方式下拉弹窗初始值
  90. dispatchTypeList:[], // 配送方式列表
  91. dispatchTypeName:'', // 配送方式名称
  92. showSettle:false,//结算方式初始值
  93. settleTypeList:[],//收款方式列表
  94. settleStyleName:'',//收款方式名称
  95. custTypeList:[] ,// 客户类型数据
  96. showCust:false, //客户类型下拉弹窗初始值
  97. custTypeName:'', // 客户类型名称
  98. areaInfo: {}, // 省市区
  99. areaIdArr: [], // 省市区id数组
  100. itemId:'',
  101. ckList:[{dispName: "是",code:1,lookupCode: "FLAG"},{dispName: "否",code:0,lookupCode: "FLAG"}],
  102. showUser:false,//业务员下拉框初始默认值
  103. defaultSettleIndex:[0] ,//选中收款方式的下标
  104. defaultIndex:[0] ,//选中收款方式的下标
  105. defaultCustIndex:[0],//选中客户类型的下标
  106. defaultUserIndex:[0],//选中业务员的下标
  107. }
  108. },
  109. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  110. onReady() {
  111. this.$refs.uForm.setRules(this.rules);
  112. },
  113. onUnload() {
  114. this.$u.vuex("vuex_OrderAddress",{})
  115. },
  116. onLoad(option) {
  117. console.log(option.nowId,'option')
  118. this.getSettleStyle()
  119. this.getCustomerList()
  120. },
  121. methods:{
  122. getCodeList(code){
  123. getLookUpDatas({type:code}).then(res=>{
  124. if(res.status==200){
  125. this.dispatchTypeList=res.data
  126. this.showDispatch=true
  127. }
  128. })
  129. },
  130. // getCustomerData(val){
  131. // customerDetail({id:val}).then(res=>{
  132. // if(res.status==200){
  133. // this.customerData=res.data
  134. // if(this.customerData.priceType || this.customerData.dispatchType){
  135. // setTimeout(()=>{
  136. // this.$refs.priceType.setVal(this.customerData.priceType)
  137. // this.$refs.dispatchType.setVal(this.customerData.dispatchType)
  138. // },200)
  139. // }
  140. // this.form=Object.assign(this.form,res.data)
  141. // }else{
  142. // this.customerData=null
  143. // }
  144. // })
  145. // },
  146. getCodeByName (dispName) {
  147. return this.dispatchTypeList.find((item) => {
  148. return item.dispName == dispName
  149. })
  150. },
  151. // 重新选择
  152. goBack(){
  153. uni.navigateBack({})
  154. },
  155. radioChange(e) {
  156. console.log(e);
  157. this.distributionFlag=e
  158. },
  159. // 选择价格类型
  160. chooseType(val){
  161. console.log(val,'vai')
  162. this.form.priceType=val
  163. },
  164. // 选择配送方式
  165. choosedispatchType(val){
  166. this.form.dispatchType=val
  167. },
  168. // 选择省区市
  169. areaConfirm(e) {
  170. console.log('已选择的省市区', e)
  171. this.areaInfo = e
  172. this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
  173. this.form.provinceSn=e.provinceCode
  174. this.form.citySn=e.cityCode
  175. this.form.countySn=e.areaCode
  176. this.form.provinceName=e.labelArr[0]
  177. this.form.cityName=e.labelArr[1]
  178. this.form.countyName=e.labelArr[2]
  179. },
  180. openAddress(){
  181. // 省市区 回显 参数为省市区id数组
  182. // console.log(this.areaIdArr,'this.areaIdArr')
  183. this.$refs.applyAddress.open(this.areaIdArr)
  184. },
  185. brandClean(){
  186. this.settleStyleName=''
  187. this.form.settleStyleSn=undefined
  188. },
  189. // 获取客户类型列表
  190. getCustomerList(){
  191. custType({}).then(res=>{
  192. if(res.status==200){
  193. this.custTypeList=res.data
  194. }else{
  195. this.custTypeList=[]
  196. }
  197. })
  198. },
  199. // 获取结算方式列表
  200. getSettleStyle(){
  201. settleStyleQueryAll({}).then(res=>{
  202. if(res.status==200){
  203. this.settleTypeList=res.data
  204. }else{
  205. this.settleTypeList=null
  206. }
  207. })
  208. },
  209. // 收款方式change
  210. settleStyleChange(e){
  211. console.log(e,'data')
  212. this.defaultSettleIndex=[e]
  213. this.settleStyleName=this.settleTypeList[e].name
  214. this.form.settleStyleSn=this.settleTypeList[e].settleStyleSn
  215. },
  216. custTypeChange(e){
  217. this.defaultCustIndex=[e]
  218. this.custTypeName=this.custTypeList[e].name
  219. this.form.customerTypeSn=this.custTypeList[e].customerTypeSn
  220. },
  221. userChange(e){
  222. this.defaultUserIndex=[e]
  223. this.custTypeName=this.custTypeList[e].name
  224. this.form.customerTypeSn=this.custTypeList[e].customerTypeSn
  225. },
  226. // 保存 (新增客户)
  227. customerSubmit(){
  228. console.log('保存===========')
  229. this.$refs.uForm.validate(valid => {
  230. if (valid) {
  231. console.log('验证通过');
  232. if (this.form.customerName ==='') {
  233. uni.showToast({
  234. title: '请输入客户名称',
  235. icon: 'none'
  236. })
  237. return false
  238. }
  239. // 省市区
  240. if(this.areaIdArr.length == 0){
  241. uni.showToast({icon: 'none',title: '请选择省市区'})
  242. return
  243. }
  244. if (this.form.priceType ==undefined) {
  245. uni.showToast({
  246. title: '请选择价格类型',
  247. icon: 'none'
  248. })
  249. return false
  250. }
  251. if (this.form.settleStyleSn ==undefined) {
  252. uni.showToast({
  253. title: '请选择收款方式',
  254. icon: 'none'
  255. })
  256. return false
  257. }
  258. const params=Object.assign({},this.form,this.areaIdArr)
  259. console.log(params,'params')
  260. if(this.form.id) {
  261. params.id = this.form.id
  262. }
  263. custSave(params).then(res=>{
  264. if(res.status == 200) {
  265. uni.showToast({
  266. title: res.message,
  267. icon: 'none'
  268. })
  269. // uni.$emit('setFun',res.data)
  270. setTimeout(()=>{
  271. uni.navigateTo({
  272. url:'/pages/sales/addSales?nowId='+res.data.id
  273. })
  274. },300)
  275. }
  276. })
  277. } else {
  278. console.log('验证失败');
  279. }
  280. })
  281. },
  282. }
  283. }
  284. </script>
  285. <style lang="scss">
  286. .addCustomer-content{
  287. width: 100%;
  288. height: 100vh;
  289. background-color: #fff;
  290. padding:0 40upx;
  291. display: flex;
  292. flex-direction: column;
  293. .content-customerName{
  294. // padding: 10upx;
  295. // border-radius: 10upx;
  296. // border: 1upx solid #e5e5e5;
  297. }
  298. .content-form{
  299. flex: 1;
  300. // box-shadow:0 8upx 24upx rgba(0,0,0,.1);
  301. // border: 1upx solid #e5e5e5;
  302. .receiveAddress{
  303. width: 100%;
  304. line-height: 1.5em;
  305. box-sizing: border-box;
  306. font-style: normal;
  307. text-align: end;
  308. }
  309. }
  310. .content-form:not(:last-child){
  311. border-bottom: none;
  312. }
  313. .form-footer-btn{
  314. background-color: #fff;
  315. position: fixed;
  316. bottom: 0;
  317. left: 0;
  318. width: 100%;
  319. padding: 16upx 20upx 12upx;
  320. z-index: 999;
  321. .handle-btn{
  322. width: 100%;
  323. background-color: rgb(51, 95, 182);
  324. color: #fff;
  325. }
  326. }
  327. }
  328. </style>