parts_shop_ui_LT/pages/views/supplier/customerDetails.vue

<template>
	<view :class="mask ? 'tl-show': ''">
		<u-cell-group :border="false">
			<u-cell :border="false" center title="基础信息"></u-cell>
		</u-cell-group>
		<u--form labelPosition="left" :model="form" ref="form" labelWidth="150rpx"
			style="margin-top: 10rpx;margin-bottom: 150rpx;">
			<view style="width: calc(96%);margin: 0 auto;background-color: #fff;border-radius: 20rpx;">
				<view style="padding: 0 10rpx;">
					<u-form-item label="全称" prop="cname" borderBottom>
						<u-input v-model="form.cname" inputAlign="right" border="none" placeholder="请输入客户名称" />
					</u-form-item>
					
					<u-form-item label="供货商分类" borderBottom
						@click="filterAll(['corpsTypeName','corpsTypeId'])">
						<u-input border="corpsTypeId" inputAlign="right" disabled placeholder="请选择供货商分类"
							 v-model="form.corpsTypeName" disabledColor="#ffffff" />
					</u-form-item>
					
					<u-form-item label="电话" prop="tel" borderBottom>
						<u-input v-model="form.tel" inputAlign="right" border="none" placeholder="请输入电话" />
					</u-form-item>
					<u-form-item label="业务员" borderBottom
						@click="filterAll(['salesmanName','salesmanId'])">
						<u-input border="none" inputAlign="right" disabled placeholder="请选择业务员"
							 v-model="form.salesmanName" disabledColor="#ffffff" />
					</u-form-item>
					<u-form-item label="备注" prop="cname" borderBottom>
						<u--textarea v-model="form.remarks" border="none" placeholder="请输入备注" ></u--textarea>
					</u-form-item>

				</view>
			</view>
			
			<u-cell-group :border="false">
				<u-cell :border="false" center title="联系人信息" :arrow-direction="customerContact==false?'up':'down'"
					:value="customerContact==false?'展开':'收起'" :isLink="true" @click="customerContact = !customerContact">
					<view slot="title" class="u-slot-title" style="display: flex; align-items: center;">
						<text style="color: #244e96;width: 150rpx;">联系人信息</text>
						<view style="margin-left: 10rpx; background: #fd4b09;color: #fff;border-radius: 10rpx;padding: 5rpx 10px;" 
						@click.stop="contactsAddfun">
							新增
						</view>
					</view>
				</u-cell>
			</u-cell-group>
			<view style="width: calc(96%);margin: 0 auto;border-radius: 20rpx;"
			 v-if="customerContact">
				<view style="padding: 10rpx 20rpx;margin: 20rpx 0;background-color: #fff;box-sizing: border-box;" 
				v-for="(item,index) in form.corpsAttnList" :key="index">
				<view style="display: flex;align-items: center;justify-content: space-between;font-size: 32rpx;margin: 10rpx 0;">
					<view style="color: #fd4b09;">序号{{index + 1}}</view>
					<view style="margin-left: 10rpx; background: #fd4b09;color: #fff;border-radius: 10rpx;padding: 5rpx 10px;" 
					@click="contactsDelfun('联系人',index,item.id)" >
						删除
					</view>
				</view>
					<u-form-item label="联系人" prop="cname" borderBottom>
						<u-input v-model="item.cname" inputAlign="right" border="none" placeholder="请输入联系人" />
					</u-form-item>
					<u-form-item label="电话" prop="cname" borderBottom>
						<u-input v-model="item.tel" inputAlign="right" border="none" placeholder="请输入电话" />
					</u-form-item>
					<u-form-item label="备注" prop="cname" borderBottom>
						<u--textarea v-model="item.remarks" border="none" placeholder="请输入备注" ></u--textarea>
					</u-form-item>
				</view>
			</view>
			
			<u-cell-group :border="false">
				<u-cell :border="false" center title="地址信息" :arrow-direction="addressInformation==false?'up':'down'"
					:value="addressInformation==false?'展开':'收起'" :isLink="true" @click="addressInformation = !addressInformation">
					<view slot="title" class="u-slot-title" style="display: flex; align-items: center;">
						<text style="color: #244e96;width: 150rpx;">地址信息</text>
						<view style="margin-left: 10rpx; background: #fd4b09;color: #fff;border-radius: 10rpx;padding: 5rpx 10px;" 
						@click.stop="corpsAddrfun">
							新增
						</view>
					</view>
				</u-cell>
			</u-cell-group>
			<view style="width: calc(96%);margin: 0 auto;border-radius: 20rpx;"
			 v-if="addressInformation">
				<view style="padding: 10rpx 20rpx;margin: 20rpx 0;background-color: #fff;box-sizing: border-box;" 
				v-for="(item,index) in form.corpsAddrList" :key="index">
				<view style="display: flex;align-items: center;justify-content: space-between;font-size: 32rpx;margin: 10rpx 0;">
					<view style="color: #fd4b09;">序号{{index + 1}}</view>
					<view style="margin-left: 10rpx; background: #fd4b09;color: #fff;border-radius: 10rpx;padding: 5rpx 10px;" 
					@click="contactsDelfun('地址',index,item.id)" >
						删除
					</view>
				</view>
					<u-form-item label="地址" prop="cname" borderBottom 
					@click="belongtoareafun(index)" >
						<u-input v-model="item.belongtoarea" inputAlign="right" border="none" placeholder="请输入地址" />
					</u-form-item>
					<u-form-item label="详细地址" prop="cname" borderBottom>
						<u--textarea v-model="item.detailedAddress" border="none" placeholder="请输入详细地址" ></u--textarea>
					</u-form-item>
					<u-form-item label="备注" prop="cname" borderBottom>
						<u--textarea v-model="item.remarks" border="none" placeholder="请输入备注" ></u--textarea>
					</u-form-item>
				</view>
			</view>
			
			
			
			<u-cell-group :border="false">
				<u-cell :border="false" center title="图片信息" :arrow-direction="enclosure==false?'up':'down'"
					:value="enclosure==false?'展开':'收起'" :isLink="true" @click="enclosure = !enclosure"></u-cell>
			</u-cell-group>
			<view style="width: calc(96%);margin: 0 auto;background-color: #fff;border-radius: 20rpx;" v-if="enclosure">
				<view style="padding: 10rpx 10rpx;">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10"></u-upload>
				</view>
			</view>
			
		</u--form>
		
		
		
		
		<view style="width: 100%;position: fixed;bottom: 0;background-color: #fff;">
			<view style="width: 96%;;margin: 20rpx auto;">
				<u-button @click="corpsDescSubmitfun" type="success" color="#fd4b09" shape="circle" text="确认提交"></u-button>
			</view>
		</view>
		
		<!-- 单列的选择框 -->
		<u-picker :show="pickerShow" :columns="pickerColumns" :keyName="pickerKeyName" 
		@cancel="pickerShow = false" @confirm="pickerConfirm"></u-picker>
		
		<!-- 地址信息多级选择 -->
		<u-picker :show="belongtoareaShow" ref="belongtoareaUPicker" keyName="name"
			:columns="regionSelectData" 
			@confirm="belongtoareaConfirm" @change="belongtoareaChange" @cancel="belongtoareaShow = false">
		</u-picker>
		
		
		<!-- <u-popup :show="DZpopupShow" @close="DZpopupShow = false,mask = false,formTwo = {}" closeable :closeOnClickOverlay="false"
			zIndex="10070">
			<view style="width: 96%;margin: auto auto;margin-top: 20rpx;padding-bottom: 20rpx;">
				<text>添加地址</text>
				<u-divider style="margin-top: 0rpx;"></u-divider>
				<u--form labelPosition="left" :model="formTwo" labelWidth="150rpx">
					<u-form-item label="详细地址" borderBottom>
						<u-input v-model="formTwo.detailedAddress" border="none" placeholder="请输入">
							<template slot="suffix">
								<u-button @tap="getMap" type="success" size="mini" icon="map" color="#fd4b09"></u-button>
							</template>
						</u-input>
					</u-form-item>
				</u--form>
				<view style="display: flex;justify-content: space-between;padding-top: 20rpx;">
					<view style="width: 96%;margin: 0 auto;background-color: red;">
						<u-button text="保存" type="primary" @click="confirmSearch" color="#fd4b09"></u-button>
					</view>
				</view>
			</view>
		</u-popup> -->
		
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		clientGetUserByRole,
		regionSelectList,
		corpsDescSubmit,
		corpsAttnUpdate,
		corpstypeTree
	} from "@/api/views/customer/index.js"
	import { storageDescListAll } from '@/api/OutboundTask/index.js'
	import {corpsDescDetail } from '@/api/views/sale/index.js'
	import { queryBrand } from '@/api/views/stock/index.js'
	
	import http from '@/http/api.js'
	import {corpsDescList} from '@/api/views/sale/salesOrderList.js'
	import {
		clientId,
		clientSecret
	} from '@/common/setting'
	export default {
		data() {
			return {
				// 数据绑定的对象
				form: {
					corpsAttnList:[{}], //联系人信息
					corpsAddrList:[{}] //地址信息
				},
				corpsTypeData:[],
				// 业务员请求到的数据
				clientGetUserByData:[],
				// 发货仓库请求到的数据
				storageDescData:[],
				// 商品价格接口数据
				queryBrandData:[],
				
				// 地理位置接口数据
				regionSelectData:[],
				// 省市区地理位置弹窗
				belongtoareaShow:false,
				
				// 地址信息当前选择的下标
				corpsAddrIndex:0,
				
				// 单列弹窗的开启和关闭
				pickerShow:false,
				// 单列弹窗的数据
				pickerColumns:[],
				// 弹窗展示的key值
				pickerKeyName:'',
				
				// 联系人信息的展开和收起
				customerContact:true,
				// 地址信息的展开和收起
				addressInformation:true,
				// 图片的展开收起
				enclosure:false,
				// 地址弹窗
				DZpopupShow:false,
				mask:false,
				// 图片集合
				fileList1:[]
				
			}
		},
		onLoad(data) {
			// 客户分类接口
			this.corpstypeTreefun()
			// 业务员接口
			this.clientGetUserByRolefun()
			// 发货仓库接口
			this.storageDescListAllfun()
			// 商城价格接口
			this.queryBrandfun()
			// 地理位置接口
			this.regionSelectListfun()
			
			if (data.id) {
				uni.setNavigationBarTitle({
					title: '客户详情'
				})
				// 供应商详情
				this.corpsDescDetailfun(data.id)
			}
		},
		methods: {
			newCategory(){
				uni.$u.route('/pages/views/product/customerType',{
					corpType:'KH'
				});
			},
			// 联系人信息新增
			contactsAddfun(){
				this.form.corpsAttnList.push({})
			},
			// 联系人信息删除
			corpsAttnUpdatefun(index,id){
				if (id) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					corpsAttnUpdate({id:id}).then(res=>{
						this.form.corpsAttnList.splice(index, 1)
						uni.hideLoading();
					})
				}else {
					this.form.corpsAttnList.splice(index, 1)
				}
				uni.showToast({
					title: '删除成功',
					icon: 'none',
					mask: true
				});
			},
			// 联系人删除地址删除
			contactsDelfun(type,index,id){
				uni.showModal({
					title: '提示',
					content: '是否确认删除',
					success: (rest)=> {
						if (rest.confirm == true) {
							if (type == '联系人') {
								this.corpsAttnUpdatefun(index,id)
							}else {
								this.corpsAddrUpdatefun(index,id)
							}
						}
					},
				})
			},
			// 地址信息新增
			corpsAddrfun(){
				this.form.corpsAddrList.push({})
			},
			// 地址信息删除
			corpsAddrUpdatefun(index,id){
				if (id) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					corpsAddrUpdate().then(res=>{
						this.form.corpsAddrList.splice(index, 1)
						uni.hideLoading();
					})
				}else {
					this.form.corpsAddrList.splice(index, 1)
				}
				uni.showToast({
					title: '删除成功',
					icon: 'none',
					mask: true
				});
			},
			// 获取供应商分类数据
			corpstypeTreefun(){
				corpstypeTree({corpType:'GYS'}).then(res=>{
					console.log(res.data,323);
					this.corpsTypeData = res.data
				})
			},
			// 获取业务员数据
			clientGetUserByRolefun(){
				clientGetUserByRole().then(res=>{
					this.clientGetUserByData = res
				})
			},
			// 获取发货仓库数据
			storageDescListAllfun(){
				storageDescListAll().then(res=>{
					this.storageDescData = res.data
				})
			},
			// 获取商品价格
			queryBrandfun(){
				queryBrand({code: 'mall_price'}).then(res=>{
					this.queryBrandData = res.data
				})
			},
			// 获取地理位置
			regionSelectListfun(){
				regionSelectList().then(res=>{
					this.regionSelectData = res.data
				})
			},
			
			// 省市区地理位置弹窗chenge
			belongtoareaChange(e) {
				const {
					columnIndex,
					index,
					value,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.belongtoareaUPicker
				} = e
				if (columnIndex !== 2) {
					regionSelectList({
						parentCode: value[columnIndex].code
					}).then(res => {
						if (columnIndex == 0) {
							picker.setColumnValues(columnIndex + 1, res.data[0])
							picker.setColumnValues(columnIndex + 2, res.data[1])
						} else {
							picker.setColumnValues(columnIndex + 1, res.data[0])
						}
					})
				}
			},
			// 省市区地理位置弹窗确认事件
			belongtoareaConfirm(e){
				console.log(e);
				this.form.corpsAddrList[this.corpsAddrIndex].belongtoarea = `${e.value[0].name},${e.value[1].name},${e.value[2].name}`
				this.belongtoareaShow = false
			},
			belongtoareafun(index){
				this.corpsAddrIndex = index
				this.belongtoareaShow = true
			},
			
			// 详情
			corpsDescDetailfun(id) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				corpsDescDetail({
					id: id
				}).then(res => {
					this.form = res.data
					this.fileList1 = res.data.corpsFilesList
					
					for(let item of this.clientGetUserByData) {
						if (item.id == this.form.salesmanId) {
							this.form.salesmanName = item.name
						}
					}
					
					uni.hideLoading();
				})
			},
			//提交保存
			corpsDescSubmitfun() {
				if (!this.form.cname) {
					return uni.showToast({
						title: '客户名称不能为空',
						icon: 'none',
						mask: true
					});
				}
				if (!this.form.corpsTypeName) {
					return uni.showToast({
						title: '客户分类不能为空',
						icon: 'none',
						mask: true
					});
				}
				if (!this.form.salesmanId) {
					return uni.showToast({
						title: '业务员不能为空',
						icon: 'none',
						mask: true
					});
				}
				for(let index in this.form.corpsAttnList) {
					if (!this.form.corpsAttnList[index].cname) {
						return uni.showToast({
							title: `联系人信息序号${Number(index) + 1}联系人不能为空`,
							icon: 'none',
							mask: true
						});
					}
					if (!this.form.corpsAttnList[index].tel) {
						return uni.showToast({
							title: `联系人信息序号${Number(index) + 1}电话不能为空`,
							icon: 'none',
							mask: true
						});
					}
				}
				for(let index in this.form.corpsAddrList) {
					if (!this.form.corpsAddrList[index].belongtoarea) {
						return uni.showToast({
							title: `地址信息序号${Number(index) + 1}地址不能为空`,
							icon: 'none',
							mask: true
						});
					}
					if (!this.form.corpsAddrList[index].detailedAddress) {
						return uni.showToast({
							title: `地址信息序号${Number(index) + 1}详细地址不能为空`,
							icon: 'none',
							mask: true
						});
					}
				}
				uni.showModal({
					title: '提示',
					content: '是否确认保存',
					success: (rest)=> {
						if (rest.confirm == true) {
							uni.showLoading({
								title: '加载中',
								mask: true
							});
							corpsDescSubmit({
								...this.form,
								// billType: 1,
								// code: this.form.cname,
								corpType: "GYS",
								corpsFilesList:this.fileList1
							}).then(res => {
								uni.hideLoading();
								this.$refs.uToast.show({
									type: 'success',
									message: "保存成功",
								})
								this.corpsDescDetailfun(res.data.id)
								
							})
						}
					}
				})
			},
			//集合筛选条件 
			// 第一项是 绑定id ,第二项是 绑定的name
			filterAll(screen) {
				this.screen = screen
				switch (screen[1]) {
					case "salesmanId":
						this.pickerColumns = [this.clientGetUserByData]
						this.pickerShow = true,
						this.pickerKeyName = 'name'
						break;
					case "corpsTypeId":
						this.pickerColumns = [this.corpsTypeData]
						
						this.pickerShow = true,
						this.pickerKeyName = 'title'
						break;
				}
			},
			// 弹窗复制
			pickerConfirm(e) {
				switch (this.screen[1]) {
					case "salesmanId":
						this.form.salesmanId = e.value[0].id
						this.form.salesmanName = e.value[0].name
						break;
					case "corpsTypeId":
						this.form.corpsTypeId = e.value[0].id
						this.form.corpsTypeName = e.value[0].title
						break;
				}
				this.pickerShow = false
			},
			
			
			
			
			// 删除图片
			deletePic(event) {
				let this_ = this
				uni.showModal({
					title: '提示',
					content: '是否确认删除',
					success: function(rest) {
						if (rest.confirm == true) {
							if (this_[`fileList${event.name}`][event.index].id) {
								removeFile({
									ids: this_[`fileList${event.name}`][event.index].id
								}).then(res => {
									this_[`fileList${event.name}`].splice(event.index, 1)
								})
							} else {
								this_[`fileList${event.name}`].splice(event.index, 1)
							}
						}
					}
				})
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						sort: this.fileList1.length,
						fileName: JSON.parse(result).data.originalName,
						url: JSON.parse(result).data.link
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: http.config.baseURL +
							'/blade-resource/oss/endpoint/put-file', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						header: {
							// 客户端认证参数
							'Authorization': 'Basic ' + Base64.encode(clientId + ':' + clientSecret),
							'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken')
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tl-show {
		overflow: hidden;
		position: fixed;
		height: 100%;
		width: 100%;
	}

	::v-deep .u-cell__body {
		padding: 0rpx 25rpx;
		margin: 10rpx 0;
	}

	::v-deep .u-cell__title-text {
		color: #244e96;
	}

	::v-deep .u-form-item__body__left__content__label {
		color: #fd4b09;
	}

	.selectedAddress {
		border-bottom: 1rpx solid #fd4b09;
		color: #fd4b09;
	}
</style>