addCustomer.vue 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. <template>
  2. <view class="addCustomer-content">
  3. <view class="content-form">
  4. <u-form :model="form" ref="uForm" label-width="150rpx" :error-type="['toast']">
  5. <u-form-item label="客户名称" required prop="customerName" ><u-input v-model.trim="form.customerName" placeholder="请输入客户名称(最多30个字符)" input-align="right" :maxlength="60"/></u-form-item>
  6. <u-form-item label="客户地址" required prop="provinceSn">
  7. <u-input v-model="areaInfo.label" type="select" input-align="right" placeholder="请选择客户地址" @click="openAddress"/>
  8. </u-form-item>
  9. <u-form-item label="详细地址">
  10. <u-input type="textarea" :auto-height="true" input-align="right" placeholder="请输入详细地址(最多60个字符)" :maxlength="60" v-model="form.customerAddr"/>
  11. </u-form-item>
  12. <u-form-item label="联系人">
  13. <u-input v-model="form.contactName" input-align="right" placeholder="请输入联系人(最多20个字符)" :maxlength="20"/>
  14. </u-form-item>
  15. <u-form-item label="联系电话">
  16. <u-input v-model.trim="form.contactTel" placeholder="请输入联系电话(最多15个字符)" input-align="right" :maxlength="15"/>
  17. </u-form-item>
  18. <u-form-item label="联系手机"><u-input v-model.trim="form.contactMobile" placeholder="请输入联系手机(最多11位字符)" input-align="right" :maxlength="11"/>
  19. </u-form-item>
  20. <u-form-item label="价格类型" required prop="priceType">
  21. <v-select ref="priceType" placeholder="请选择价格类型" input-align="right" @itemChange="chooseType" code="PRICE_TYPE" style="width: 100%"></v-select>
  22. </u-form-item>
  23. <u-form-item label="收款方式" required prop="settleStyleSn">
  24. <u-input v-model="settleStyleName" type="select" input-align="right" placeholder="请选择收款方式" @click="showSettle=true"/>
  25. </u-form-item>
  26. <u-form-item label="客户传真">
  27. <u-input v-model="form.fax" input-align="right" placeholder="请输入客户传真(最多30个字符)" :maxlength="30"/>
  28. </u-form-item>
  29. <u-form-item label="客户类型">
  30. <u-input v-model="custTypeName" input-align="right" type="select" placeholder="请选择客户类型" @click="showCust=true"/>
  31. </u-form-item>
  32. <u-form-item label="配送方式" >
  33. <v-select ref="dispatchType" placeholder="请选择配送方式" input-align="right" @itemChange="choosedispatchType" code="DISPATCH_TYPE" style="width: 100%"></v-select>
  34. </u-form-item>
  35. </u-form>
  36. </view>
  37. <view class="form-footer-btn">
  38. <u-button class="handle-btn" size="medium" shape="circle" hover-class="none" @click="customerSubmit" :custom-style="customBtnStyle">保存</u-button>
  39. </view>
  40. <!-- 省市区 -->
  41. <Address ref="applyAddress" :isJrMini="false" @onConfirm="areaConfirm"></Address>
  42. <!-- 选择收款方式 -->
  43. <u-picker v-model="showSettle" title="收款方式" @confirm="settleStyleChange" :range="settleTypeList" range-key="name" mode="selector" :default-selector="JSON.parse(JSON.stringify(defaultSettleIndex))"></u-picker>
  44. <!-- 客户类型 -->
  45. <u-picker v-model="showCust" title="客户类型" @confirm="custTypeChange" :range="custTypeList" range-key="name" mode="selector" :default-selector="JSON.parse(JSON.stringify(defaultCustIndex))"></u-picker>
  46. </view>
  47. </template>
  48. <script>
  49. import {settleStyleQueryAll} from '@/api/sales.js'
  50. import {customerDetail,custType,custSave,employeeAllList} from '@/api/customer.js'
  51. import Address from '@/components/address.vue'
  52. import vSelect from '@/components/select/v-select.vue'
  53. import { isvalidPhone } from '@/libs/validate.js'
  54. export default{
  55. components:{Address,vSelect},
  56. data(){
  57. return{
  58. customerData:null, // 客户信息
  59. customBtnStyle: { // 自定义按钮样式
  60. margin:0
  61. },
  62. // 客户form
  63. form:{
  64. id: undefined,
  65. customerName: '', // 客户名称
  66. contactTel: '', // 联系电话
  67. contactMobile: '', // 联系手机
  68. contactName: '', // 联系人
  69. provinceSn: undefined, // 省
  70. provinceName: '',
  71. citySn: undefined, // 市
  72. cityName: '',
  73. countySn: undefined, // 区
  74. countyName: '',
  75. customerAddr: '', // 详细地址
  76. fax: '', // 客户传真
  77. dispatchType: undefined, // 配送方式
  78. satelliteFlag: 0, // 是否卫星仓客户
  79. customerTypeSn: undefined, // 客户类型
  80. priceType: undefined, // 价格类型
  81. settleStyleSn: undefined // 收款方式
  82. },
  83. rules: {
  84. customerName: [{ required: true, message: '请输入客户名称', trigger: 'change' }],
  85. provinceSn: [{ required: true, message: '请选择客户地址', trigger: 'change' }],
  86. priceType: [{ required: true, message: '请选择价格类型', trigger: 'change' }],
  87. settleStyleSn: [{ required: true, message: '请选择收款方式', trigger: 'change' }],
  88. },
  89. showSettle:false,//结算方式初始值
  90. settleTypeList:[],//收款方式列表
  91. settleStyleName:'',//收款方式名称
  92. custTypeList:[] ,// 客户类型数据
  93. showCust:false, //客户类型下拉弹窗初始值
  94. custTypeName:'', // 客户类型名称
  95. areaInfo: {}, // 省市区
  96. areaIdArr: [], // 省市区id数组
  97. defaultSettleIndex:[0] ,//选中收款方式的下标
  98. defaultCustIndex:[0],//选中客户类型的下标
  99. backPage: ''
  100. }
  101. },
  102. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  103. onReady() {
  104. this.$refs.uForm.setRules(this.rules);
  105. },
  106. onLoad(option) {
  107. this.backPage = option.backPage
  108. this.getSettleStyle()
  109. this.getCustomerList()
  110. },
  111. methods:{
  112. // 选择价格类型
  113. chooseType(val){
  114. this.form.priceType=val
  115. },
  116. // 选择配送方式
  117. choosedispatchType(val){
  118. this.form.dispatchType=val
  119. },
  120. // 选择省区市
  121. areaConfirm(e) {
  122. console.log('已选择的省市区', e)
  123. this.areaInfo = e
  124. this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
  125. this.form.provinceSn=e.provinceCode
  126. this.form.citySn=e.cityCode
  127. this.form.countySn=e.areaCode
  128. this.form.provinceName=e.labelArr[0]
  129. this.form.cityName=e.labelArr[1]
  130. this.form.countyName=e.labelArr[2]
  131. },
  132. openAddress(){
  133. // 省市区 回显 参数为省市区id数组
  134. // console.log(this.areaIdArr,'this.areaIdArr')
  135. this.$refs.applyAddress.open(this.areaIdArr)
  136. },
  137. brandClean(){
  138. this.settleStyleName=''
  139. this.form.settleStyleSn=undefined
  140. },
  141. // 获取客户类型列表
  142. getCustomerList(){
  143. custType({}).then(res=>{
  144. if(res.status==200){
  145. this.custTypeList=res.data
  146. }else{
  147. this.custTypeList=[]
  148. }
  149. })
  150. },
  151. // 获取结算方式列表
  152. getSettleStyle(){
  153. settleStyleQueryAll({}).then(res=>{
  154. if(res.status==200){
  155. this.settleTypeList=res.data
  156. }else{
  157. this.settleTypeList=null
  158. }
  159. })
  160. },
  161. // 收款方式change
  162. settleStyleChange(e){
  163. console.log(e,'data')
  164. this.defaultSettleIndex=[e]
  165. this.settleStyleName=this.settleTypeList[e].name
  166. this.form.settleStyleSn=this.settleTypeList[e].settleStyleSn
  167. },
  168. // 客户类型change
  169. custTypeChange(e){
  170. this.defaultCustIndex=[e]
  171. this.custTypeName=this.custTypeList[e].name
  172. this.form.customerTypeSn=this.custTypeList[e].customerTypeSn
  173. },
  174. // 保存 (新增客户)
  175. customerSubmit(){
  176. this.$refs.uForm.validate(valid => {
  177. if (valid) {
  178. const params=Object.assign({},this.form)
  179. console.log(params,'params')
  180. if(this.form.id) {
  181. params.id = this.form.id
  182. }
  183. custSave(params).then(res=>{
  184. if(res.status == 200) {
  185. uni.showToast({
  186. title: res.message,
  187. icon: 'none'
  188. })
  189. if(!this.backPage){
  190. uni.redirectTo({
  191. url:'/pages/sales/addSales?pageType=add&nowId='+res.data.id
  192. })
  193. }else{
  194. // 门店审核通过
  195. if(this.backPage == 'authPass'){
  196. uni.$emit("addCustome",res.data)
  197. }
  198. // 货架设置关联客户
  199. if(this.backPage == 'shelfSeting'){
  200. uni.$emit("setCustome",res.data)
  201. }
  202. if(this.backPage == 'shelfEdit'){
  203. uni.$emit("editCustome",res.data)
  204. }
  205. uni.navigateBack({
  206. delta: 2
  207. })
  208. }
  209. }
  210. })
  211. } else {
  212. console.log('验证失败');
  213. }
  214. })
  215. },
  216. }
  217. }
  218. </script>
  219. <style lang="scss">
  220. page{
  221. height: 100vh;
  222. }
  223. .addCustomer-content{
  224. width: 100%;
  225. height: 100%;
  226. background-color: #fff;
  227. padding:0 40upx;
  228. display: flex;
  229. flex-direction: column;
  230. .content-form{
  231. flex:1;
  232. padding: 0 0.5rem;
  233. overflow: auto;
  234. }
  235. .form-footer-btn{
  236. background-color: #fff;
  237. width: 100%;
  238. padding: 20upx;
  239. .handle-btn{
  240. width: 100%;
  241. background-color: rgb(51, 95, 182);
  242. color: #fff;
  243. }
  244. }
  245. }
  246. </style>