123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251 |
- <template>
- <view class="addCustomer-content">
- <view class="content-form">
- <u-form :model="form" ref="uForm" label-width="150rpx" :error-type="['toast']">
- <u-form-item label="客户名称" required prop="customerName" ><u-input v-model.trim="form.customerName" placeholder="请输入客户名称(最多30个字符)" input-align="right" :maxlength="60"/></u-form-item>
- <u-form-item label="客户地址" required prop="provinceSn">
- <u-input v-model="areaInfo.label" :disabled="true" input-align="right" placeholder="请选择客户地址" @click="openAddress"/>
- <u-icon name="arrow-right" color="#C0C4CC" slot="right" @click="openAddress"></u-icon>
- </u-form-item>
- <u-form-item label="详细地址">
- <u-input type="textarea" :auto-height="true" input-align="right" placeholder="请输入详细地址(最多60个字符)" :maxlength="60" v-model="form.customerAddr"/>
- </u-form-item>
- <u-form-item label="联系人">
- <u-input v-model="form.contactName" input-align="right" placeholder="请输入联系人(最多20个字符)" :maxlength="20"/>
- </u-form-item>
- <u-form-item label="联系电话">
- <u-input v-model.trim="form.contactTel" placeholder="请输入联系电话(最多15个字符)" input-align="right" :maxlength="15"/>
- </u-form-item>
- <u-form-item label="联系手机"><u-input v-model.trim="form.contactMobile" placeholder="请输入联系手机(最多11位字符)" input-align="right" :maxlength="11"/>
- </u-form-item>
- <u-form-item label="价格类型" required prop="priceType">
- <v-select ref="priceType" :disabled="true" placeholder="请选择价格类型" @itemChange="chooseType" code="PRICE_TYPE" style="width: 100%"></v-select>
- </u-form-item>
- <u-form-item label="收款方式" required prop="settleStyleSn">
- <u-input v-model="settleStyleName" input-align="right" :disabled="true" placeholder="请选择收款方式" @click="showSettle=true"/>
- <u-icon name="arrow-right" color="#C0C4CC" slot="right"></u-icon>
- </u-form-item>
- <u-form-item label="客户传真">
- <u-input v-model="form.fax" input-align="right" placeholder="请输入客户传真(最多30个字符)" :maxlength="30"/>
- </u-form-item>
- <u-form-item label="客户类型">
- <u-input v-model="custTypeName" input-align="right" :disabled="true" placeholder="请选择客户类型" @click="showCust=true"/>
- <u-icon name="arrow-right" color="#C0C4CC" slot="right" @click="showCust=true"></u-icon>
- </u-form-item>
- <u-form-item label="配送方式" >
- <v-select ref="dispatchType" :disabled="true" placeholder="请选择配送方式" @itemChange="choosedispatchType" code="DISPATCH_TYPE" style="width: 100%"></v-select>
- </u-form-item>
- </u-form>
- </view>
- <view class="form-footer-btn">
- <u-button class="handle-btn" size="medium" shape="circle" hover-class="none" @click="customerSubmit" :custom-style="customBtnStyle">保存</u-button>
- </view>
- <!-- 省市区 -->
- <Address ref="applyAddress" :isJrMini="false" @onConfirm="areaConfirm"></Address>
- <!-- 选择收款方式 -->
- <u-picker v-model="showSettle" title="收款方式" @confirm="settleStyleChange" :range="settleTypeList" range-key="name" mode="selector" :default-selector="JSON.parse(JSON.stringify(defaultSettleIndex))"></u-picker>
- <!-- 客户类型 -->
- <u-picker v-model="showCust" title="客户类型" @confirm="custTypeChange" :range="custTypeList" range-key="name" mode="selector" :default-selector="JSON.parse(JSON.stringify(defaultCustIndex))"></u-picker>
- </view>
- </template>
- <script>
- import {settleStyleQueryAll} from '@/api/sales.js'
- import {customerDetail,custType,custSave,employeeAllList} from '@/api/customer.js'
- import Address from '@/components/address.vue'
- import vSelect from '@/components/select/v-select.vue'
- import { isvalidPhone } from '@/libs/validate.js'
- export default{
- components:{Address,vSelect},
- data(){
- return{
- customerData:null, // 客户信息
- customBtnStyle: { // 自定义按钮样式
- margin:0
- },
- // 客户form
- form:{
- id: undefined,
- customerName: '', // 客户名称
- contactTel: '', // 联系电话
- contactMobile: '', // 联系手机
- contactName: '', // 联系人
- provinceSn: undefined, // 省
- provinceName: '',
- citySn: undefined, // 市
- cityName: '',
- countySn: undefined, // 区
- countyName: '',
- customerAddr: '', // 详细地址
- fax: '', // 客户传真
- dispatchType: undefined, // 配送方式
- satelliteFlag: 0, // 是否卫星仓客户
- customerTypeSn: undefined, // 客户类型
- priceType: undefined, // 价格类型
- settleStyleSn: undefined // 收款方式
- },
- rules: {
- customerName: [{ required: true, message: '请输入客户名称', trigger: 'change' }],
- provinceSn: [{ required: true, message: '请选择客户地址', trigger: 'change' }],
- priceType: [{ required: true, message: '请选择价格类型', trigger: 'change' }],
- settleStyleSn: [{ required: true, message: '请选择收款方式', trigger: 'change' }],
- },
- showSettle:false,//结算方式初始值
- settleTypeList:[],//收款方式列表
- settleStyleName:'',//收款方式名称
- custTypeList:[] ,// 客户类型数据
- showCust:false, //客户类型下拉弹窗初始值
- custTypeName:'', // 客户类型名称
- areaInfo: {}, // 省市区
- areaIdArr: [], // 省市区id数组
- defaultSettleIndex:[0] ,//选中收款方式的下标
- defaultCustIndex:[0],//选中客户类型的下标
- backPage: ''
- }
- },
- // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
- onReady() {
- this.$refs.uForm.setRules(this.rules);
- },
- onLoad(option) {
- this.backPage = option.backPage
- this.getSettleStyle()
- this.getCustomerList()
- },
- methods:{
- // 选择价格类型
- chooseType(val){
- this.form.priceType=val
- },
- // 选择配送方式
- choosedispatchType(val){
- this.form.dispatchType=val
- },
- // 选择省区市
- areaConfirm(e) {
- console.log('已选择的省市区', e)
- this.areaInfo = e
- this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
- this.form.provinceSn=e.provinceCode
- this.form.citySn=e.cityCode
- this.form.countySn=e.areaCode
- this.form.provinceName=e.labelArr[0]
- this.form.cityName=e.labelArr[1]
- this.form.countyName=e.labelArr[2]
- },
- openAddress(){
- // 省市区 回显 参数为省市区id数组
- // console.log(this.areaIdArr,'this.areaIdArr')
- this.$refs.applyAddress.open(this.areaIdArr)
- },
- brandClean(){
- this.settleStyleName=''
- this.form.settleStyleSn=undefined
- },
- // 获取客户类型列表
- getCustomerList(){
- custType({}).then(res=>{
- if(res.status==200){
- this.custTypeList=res.data
- }else{
- this.custTypeList=[]
- }
- })
- },
- // 获取结算方式列表
- getSettleStyle(){
- settleStyleQueryAll({}).then(res=>{
- if(res.status==200){
- this.settleTypeList=res.data
- }else{
- this.settleTypeList=null
- }
- })
- },
- // 收款方式change
- settleStyleChange(e){
- console.log(e,'data')
- this.defaultSettleIndex=[e]
- this.settleStyleName=this.settleTypeList[e].name
- this.form.settleStyleSn=this.settleTypeList[e].settleStyleSn
- },
- // 客户类型change
- custTypeChange(e){
- this.defaultCustIndex=[e]
- this.custTypeName=this.custTypeList[e].name
- this.form.customerTypeSn=this.custTypeList[e].customerTypeSn
- },
- // 保存 (新增客户)
- customerSubmit(){
- this.$refs.uForm.validate(valid => {
- if (valid) {
- const params=Object.assign({},this.form)
- console.log(params,'params')
- if(this.form.id) {
- params.id = this.form.id
- }
- custSave(params).then(res=>{
- if(res.status == 200) {
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- if(!this.backPage){
- uni.redirectTo({
- url:'/pages/sales/addSales?pageType=add&nowId='+res.data.id
- })
- }else{
- // 门店审核通过
- if(this.backPage == 'authPass'){
- uni.$emit("addCustome",res.data)
- }
- // 货架设置关联客户
- if(this.backPage == 'shelfSeting'){
- uni.$emit("setCustome",res.data)
- }
- if(this.backPage == 'shelfEdit'){
- uni.$emit("editCustome",res.data)
- }
- uni.navigateBack({
- delta: 2
- })
- }
- }
- })
- } else {
- console.log('验证失败');
- }
- })
- },
- }
- }
- </script>
- <style lang="scss">
- page{
- height: 100vh;
- }
- .addCustomer-content{
- width: 100%;
- height: 100%;
- background-color: #fff;
- padding:0 40upx;
- display: flex;
- flex-direction: column;
- .content-form{
- flex:1;
- padding: 0 0.5rem;
- overflow: auto;
- }
- .form-footer-btn{
- background-color: #fff;
- width: 100%;
- padding: 20upx;
- .handle-btn{
- width: 100%;
- background-color: rgb(51, 95, 182);
- color: #fff;
- }
- }
- }
- </style>
|