count-pass-app/subpages/payment/collate.vue

<template>
	<view class="main">
		<u-sticky bgColor="#fff">
			<view class="search-wrap">
				<view class="input-wrap">
					<view @click="showPopup('popupTenantId')" class="input">
						<u--input prefixIcon="account-fill" readonly prefixIconStyle="font-size:46rpx" border="none"
							v-model="condition.tenantName" :showAction='false'></u--input>
					</view>
					<view @click="onClickRight" class="sx-btn">
						<uni-icons type="settings-filled" size='24'></uni-icons>
					</view>
				</view>
			</view>
			<view class="tabs-box">
				<view class="orderType-tab">
					<u-subsection :list="collateTabList" mode="subsection" fontSize="30rpx"
						activeColor="rgb(60, 156, 255)" :current="collateActive" @change="onCollateTabChange">
					</u-subsection>
				</view>
				<view class="orderStatus-tab" v-if="collateActive ==1">
					<span :class="condition.auditFlag == item.value?'active':''" v-for="item in auditList"
						@click="onAuditChange(item)" :key="item.name">
						{{item.name}}
					</span>
				</view>
				<view v-if="collateActive==0">
					<u-notice-bar :text="$t('payment.collate.warning')" speed="30" duration="3000"></u-notice-bar>
				</view>
			</view>

		</u-sticky>
		<view v-if="collateActive==0">
			<template v-if="collateData.length">
				<view>
					<view class="main" v-for="(item,index) in collateData" :key="index">
						<view class="main-title">
							<view class="row">
								<view class="info">
									<text class="info big">{{item.companyName}}</text>
								</view>
							</view>
						</view>
						<view class="main-info">
							<view class="row">
								<p class="cell">
									<text class="label">{{$t('payment.collate.preTotal')}}</text>
									<text class="info">{{item.preTotal}}</text>
								</p>
								<p class="cell">
									<text class="label">{{$t('payment.collate.receiptTotal')}}</text>
									<text class="info">{{item.receiptTotal}}</text>
								</p>
							</view>
							<view class="row">
								<p class="cell">
									<text class="label">{{$t('payment.collate.factNum')}}</text>
									<text class="info">{{item.factNum}}</text>
								</p>
								<p class="cell">
									<text class="label">{{$t('payment.collate.factTotal')}}</text>
									<text class="info">{{item.factTotal}}</text>
								</p>
							</view>
							<view class="row">
								<p class="cell">
									<text class="label">{{$t('payment.collate.endTotal')}}</text>
									<text class="info">{{item.endTotal}}</text>
								</p>
							</view>
							<view class="row">
								<p class="cell">
									<text class="label">{{$t('payment.collate.remark')}}</text>
									<u-input
										:placeholder="$t('base.common.placeholderI') + $t('payment.collate.remark')"
										border='none' v-model="item.remark" type="textarea" class="info">
									</u-input>
								</p>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="btn">
							<u-button type="success" size="small" @click="save"> {{$t('base.button.submit')}}
							</u-button>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<u-empty mode="history" text="." icon="https://cdn.uviewui.com/uview/empty/list.png">
					<u-icon name="edit-pen" color="#2979ff" size="28" :label="$t('payment.collate.createCollate')"
						@click="showSearch=true"></u-icon>
				</u-empty>
			</template>
		</view>
		<view v-if="collateActive==1">
			<template v-if="collateData.length">
				<view class="main" v-for="(item,index) in collateData" :key="index" @click="onDetailShow(item)">
					<view class="main-title">
						<view class="info">
							<u--text prefixIcon="account-fill" :text="item.companyName" :bold="true" size="12">
							</u--text>
						</view>
						<view class="info">
							<u-tag :text="(item.auditFlag=='' || item.auditFlag==0)?'未审核':item.auditFlag==1?'已审核':'未通过'"
								shape="circle"
								:type="(item.auditFlag=='' || item.auditFlag==0)?'warning':item.auditFlag==1?'success':'error'">
							</u-tag>
						</view>
					</view>
					<view class="main-info">
						<view class="row">
							<p class="cell">
								<text class="label">{{$t('payment.collate.intervalDate')}}</text>
								<text class="info">{{item.startDate}}</text>
							</p>
							<p class="cell">
								<text class="info">{{item.endDate}}</text>
							</p>
						</view>
						<view class="row">
							<p class="cell">
								<text class="label">{{$t('payment.collate.remark')}}</text>
								<text class="info">{{item.remark}}</text>
							</p>
						</view>
					</view>
					<view class="main-bottom" v-if="(item.auditFlag !='' && item.auditFlag !=0)">
						<view class="row">
							<p class="cell">
								<text class="label">{{$t('payment.collate.auditDescription')}}</text>
								<text
									:class="'info '+(item.auditFlag==1?'underline-success':'underline-error')">{{item.auditDescription}}</text>
							</p>
						</view>
						<view class="row">
							<text class="font-align">{{(item.auditUserName ||'')+' ' +(item.auditTime || '')}}</text>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<u-empty mode="history" text="没有账单信息" icon="https://cdn.uviewui.com/uview/empty/list.png">
				</u-empty>
			</template>
		</view>
		<!-- 选择企业 -->
		<PopupSelect ref="popupTenantId" :hasSearch='false' :option="tenantOption" @onConfirm="onTenantConfirm" />
		<u-popup :show="showSearch" :round="8" @close="showSearch=false" mode="bottom">
			<view class="search-dialog">
				<p class="dialog-title">对账条件</p>
				<view class="condition-wrap">
					<view class="row">
						<uni-datetime-picker :end='maxDate' :clear-icon="false" class="p-input" :value="range"
							type="daterange" @change="confirm" />
					</view>
					<view class="row">
						<p class="p-title">{{$t('order.vehicleType')}}</p>
						<u-radio-group v-model="condition.vehicleType" @change="onVehicleTypeChange" placement="row"
							class="p-input">
							<u-radio :customStyle="{marginRight: '20rpx'}" v-for="item in vehicleTypeOption"
								:key="item.value" :label="item.text" :name="item.value">
							</u-radio>
						</u-radio-group>
					</view>
					<view class="row" borderBottom prop="companyId" @click="showPopup('popupCompanyId')">
						<p class="p-title">{{$t('base.basics.companyName')}}</p>
						<u-input readonly v-model="condition.companyName" border="none" class="p-input"
							:placeholder="$t('base.common.placeholderS')+$t('base.basics.companyName')" />
					</view>

					<!-- 					<view class="row" @click="showPopup('popupMaterialId')">
							<p class="p-title">{{$t('base.basics.materialName')}}</p>
							<u-input readonly v-model="condition.materialName" border="none"
								:placeholder="$t('base.common.placeholderS')+$t('base.basics.materialName')" />
						</view> -->
				</view>
					<view class="sure-btn">
						<button class="btn" type='primary' shape="circle" color='#4680F9' size="small"
							@click="onCollateQueryClick">
							{{$t('base.button.query')}}
						</button>
					</view>
			</view>
			<!-- 选择供应商/客户 -->
			<PopupSelect ref="popupCompanyId" :hasSearch='false' :option="companyOption"
				@onConfirm="onCompanyIdConfirm" />
		</u-popup>

		<u-popup :show="showDetail" :round="8" @close="showDetail=false" mode="center"
			customStyle="width:95%;height:auto;">
			<view>
				<u-divider :text="$t('payment.collate.collateInfo')" textSize="16" lineColor="#303133"
					textColor="#303133"></u-divider>
			</view>
			<view class="main">
				<view class="main-title">
					<view class="info">
						<u--text prefixIcon="account-fill" :text="currentCollate.companyName" :bold="true" size="12">
						</u--text>
					</view>
					<view class="info">
						<u-tag
							:text="(currentCollate.auditFlag=='' || currentCollate.auditFlag==0)?'未审核':currentCollate.auditFlag==1?'已审核':'未通过'"
							shape="circle"
							:type="(currentCollate.auditFlag=='' || currentCollate.auditFlag==0)?'warning':currentCollate.auditFlag==1?'success':'error'">
						</u-tag>
					</view>
				</view>
				<view class="main-info">
					<view class="row">
						<p class="cell">
							<text class="label">{{$t('payment.collate.intervalDate')}}</text>
							<text class="info">{{currentCollate.startDate}}</text>
						</p>
						<p class="cell">
							<text class="info">{{currentCollate.endDate}}</text>
						</p>
					</view>
					<view class="row">
						<p class="cell">
							<text class="label">{{$t('payment.collate.preTotal')}}</text>
							<text class="info">{{currentCollate.preTotal}}</text>
						</p>
						<p class="cell">
							<text class="label">{{$t('payment.collate.receiptTotal')}}</text>
							<text class="info">{{currentCollate.receiptTotal}}</text>
						</p>
					</view>
					<view class="row">
						<p class="cell">
							<text class="label">{{$t('payment.collate.factNum')}}</text>
							<text class="info">{{currentCollate.factNum}}</text>
						</p>
						<p class="cell">
							<text class="label">{{$t('payment.collate.factTotal')}}</text>
							<text class="info">{{currentCollate.factTotal}}</text>
						</p>
					</view>
					<view class="row">
						<p class="cell">
							<text class="label">{{$t('payment.collate.endTotal')}}</text>
							<text class="info">{{currentCollate.endTotal}}</text>
						</p>
					</view>
					<view class="row">
						<p class="cell">
							<text class="label">{{$t('payment.collate.remark')}}</text>
							<text class="info">{{currentCollate.remark}}</text>
						</p>
					</view>

				</view>
				<view class="main-bottom" v-if="(currentCollate.auditFlag !='' && currentCollate.auditFlag !=0)">
					<view class="row">
						<p class="cell">
							<text class="label">{{$t('payment.collate.auditDescription')}}</text>
							<text
								:class="'info '+(currentCollate.auditFlag==1?'underline-success':'underline-error')">{{currentCollate.auditDescription}}</text>
						</p>
					</view>
					<view class="row">
						<text
							class="font-align">{{(currentCollate.auditUserName ||'')+' ' +(currentCollate.auditTime || '')}}</text>
					</view>
				</view>
			</view>

		</u-popup>
	</view>
</template>

<script>
	import PopupSelect from '../../components/popup-select/index'
	import dayjs from 'dayjs'
	import {
		getReconcile,
		saveReconcile,
		queryReconcile
	} from '../../api/payment'
	import {
		getOption
	} from '../../api/order'
	import {
		getTenantCacheList
	} from '../../utils/util.js'
	export default {
		components: {
			PopupSelect
		},
		data() {
			return {
				showSearch: false,
				showDetail: false,
				currentCollate: {},
				maxDate: dayjs().format('YYYY-MM-DD'),
				range: [dayjs().add(-30, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
				isSellComapny: false,
				condition: {
					setDate: dayjs().format('YYYY-MM-DD'),
					startDate: dayjs().add(-30, 'day').format('YYYY-MM-DD'),
					endDate: dayjs().format('YYYY-MM-DD'),
					tenantId: "",
					tenantName: "",
					companyId: "", //客商
					companyName: "",
					auditFlag: "",
					// materialId: "", //物料
					// materialName: "",
					vehicleType: "101", //只针对客户
				},
				collateActive: 0,
				collateTabList: [{
					name: this.$t('payment.collate.createCollate')
				}, {
					name: this.$t('payment.collate.historyCollate')
				}],
				auditList: [{
						name: this.$t("mine.all"),
						value: ''
					},
					{
						name: this.$t("mine.noneAudit"),
						value: '0'
					},
					{
						name: this.$t("mine.nonePass"),
						value: '2'
					},
					{
						name: this.$t("mine.alreadyAudit"),
						value: '1'
					},
				],
				tenantOption: [{
					text: this.$t('base.common.noData'),
					value: null
				}], //企业选项
				vehicleTypeOption: [{
					text: this.$t('base.common.noData'),
					value: null
				}, ],
				companyOption: [{
					text: this.$t('base.common.noData'),
					value: null
				}], //客户选项
				// materialOption: [{
				// 	text: this.$t('base.common.noData'),
				// 	value: null
				// }], //物料选项
				collateData: null,
				remark: "", //业务对应的客户信息
				//业务对应的客户信息
				vehicleTypeCompanyList: [],
				//客户对应的物料信息
				companyMaterialList: [],
			};
		},
		onLoad(options) {
			this.bindTenant()
		},
		methods: {
			onDetailShow(item) {
				this.currentCollate = item;
				this.showDetail = true
			},
			onAuditChange(item) {
				if (item.value == this.condition.auditFlag) {
					this.condition.auditFlag = "";
				} else {
					this.condition.auditFlag = item.value
				}
				this.onCollateQueryClick()
			},
			//点击右侧筛选
			onClickRight() {
				this.showSearch = true
			},
			//确定选择日期
			confirm(item) {
				this.range = item
				this.condition.startDate = this.range[0] || ''
				this.condition.endDate = this.range[1] || ''
			},
			onTimeChange() {
				this.collateData = []
			},
			onCollateTabChange(index) {
				this.range = [dayjs().add(-30, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
					this.condition.startDate = this.range[0] || ''
				this.condition.endDate = this.range[1] || ''
				this.collateActive = index;
				this.collateData = [];
				if (index == 1) {
					this.onCollateQueryClick()
				}
			},
			//查询对账
			onCollateQueryClick() {
				this.showSearch = false
				let data = {
					tenantId: this.condition.tenantId,
					companyId: this.condition.companyId,
					startDate: this.condition.startDate,
					endDate: this.condition.endDate,
					auditFlag: this.condition.auditFlag,
					// materialId: this.condition.materialId,
					vehicleType: this.condition.vehicleType,
				}
				if (this.collateActive == 0) {
					this.collateData=[]
					getReconcile(data).then(res => {
						if (res.data.code == 0) {
							if (res.data.data) {
								this.collateData = res.data.data
								console.log("获取到的对账信息、", this.collateData);
							}
						}
					})
				} else {
					queryReconcile(data).then(res => {
						if (res.data.code == 0) {
							if (res.data.data) {
								this.collateData = res.data.data
								console.log("获取到的对账信息、", this.collateData);
							}
						}
					})
				}
			},
			//确认对账
			save() {
				let _this = this
				uni.showModal({
					content: '确认对账信息无误!',
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							let data = {
								..._this.condition,
								"orderInfos": _this.collateData
							}
							data.remark = _this.remark
							saveReconcile(data).then(res => {
								if (res.statusCode == 200 && res.data.code == 0) {
									uni.showToast({
										title: '对账成功',
										icon: 'success',
										duration: 2000,
									})
									_this.collateData = []
								}
							})
						} else if (res.cancel) {

						}
					}
				})
			},

			bindTenant() {
				this.tenantOption = getTenantCacheList();
				if (this.tenantOption.length > 0) {
					this.condition.tenantId = this.tenantOption[0].value
					this.condition.tenantName = this.tenantOption[0].text
				}
				this.bindOption();
			},
			//选择订单类型后加载选项 //获取品种信息 101:销售，102：采购
			bindOption() {
				this.clear();
				this.vehicleTypeOption = []
				console.log("订单租户信息、", this.condition.tenantId);
				if (!this.condition.tenantId) {
					console.log("订单业务租户信息");
					return;
				}
				var that = this;
				console.log("当前租户ID、", that.condition.tenantId);
				if (that.condition.tenantId) {
					let data = JSON.parse(JSON.stringify(that.condition))
					getOption(data).then(res => {
						console.log("查询基础数据返回、", res);
						if (res.statusCode === 200) {
							that.vehicleTypeOption = res.data.data.appVehicleType;
							console.log("用户客户信息、", res.data.data.appCompany)
							// console.log("用户品种信息、", res.data.data.appMaterial)
							that.vehicleTypeCompanyList = res.data.data.appCompany
							that.bindCompany();
							// that.companyMaterialList = res.data.data.appMaterial;
							// that.bindMaterial();

						}
					})
				}
			},
			bindCompany() {
				var vehicleType = this.condition.vehicleType;
				if (vehicleType && this.vehicleTypeCompanyList) {
					this.companyOption = [{
						text: this.$t('order.notSelected'),
						value: null
					}] //物料选项
					var companyInfos = this.vehicleTypeCompanyList.filter(function(company) {
						return company.vehicleType == vehicleType;
					});
					if (companyInfos && companyInfos.length > 0) {
						companyInfos[0].companyList.forEach(item => {
							this.companyOption.push({
								text: item.companyName,
								value: item.companyId
							})
						})
						this.condition.companyId = this.companyOption[1].value
						this.condition.companyName = this.companyOption[1].text
					}
					console.log("客户信息、", this.companyOption);
				}
			},
			// bindMaterial() {
			// 	var companyId = this.condition.companyId;
			// 	if (companyId && this.companyMaterialList) {
			// 		this.materialOption = [{
			// 			text: this.$t('order.notSelected'),
			// 			value: null
			// 		}] //物料选项
			// 		var materialInfos = this.companyMaterialList.filter(function(company) {
			// 			return company.companyId == companyId;
			// 		});
			// 		if (materialInfos && materialInfos.length > 0) {
			// 			materialInfos[0].materialList.forEach(item => {
			// 				this.materialOption.push({
			// 					text: item.name,
			// 					value: item.id
			// 				})
			// 			})
			// 		}
			// 		console.log("品种信息、", this.materialOption);
			// 	}
			// },
			//选择企业后
			onTenantConfirm(value) {
				this.condition.tenantId = ''
				this.condition.tenantName = ''
				if (value.value) {
					this.condition.tenantId = value.value
					this.condition.tenantName = value.text
				}
				this.bindOption();
			},
			//选择企业和订单类型后
			onVehicleTypeChange() {
				this.clear();
				if (this.condition.tenantId && this.condition.vehicleType) {
					console.log('开始根据业务类型选择数据信息,租户和业务为、', this.condition.tenantId, this.condition.vehicleType);
					this.bindCompany();
					// this.bindMaterial();
				}
			},
			//选择客户
			onCompanyIdConfirm(value) {
				this.condition.companyId = ''
				this.condition.companyName = ''
				if (value.value) {
					this.condition.companyId = value.value
					this.condition.companyName = value.text
				}
				this.collateData = [];
			},
			//选择物料
			// onMaterialIdConfirm(value) {

			// 	this.condition.materialId = ''
			// 	this.condition.materialName = ''
			// 	if (value.value) {
			// 		this.condition.materialId = value.value
			// 		this.condition.materialName = value.text
			// 	}
			// 	this.collateData = [];
			// },
			//显示选择
			showPopup(refs) {
				this.$refs[refs].showPicker = true
			},
			clear() {
				this.companyOption = [{
					text: this.$t('base.common.noData'),
					value: null
				}] //客户选项
				// this.materialOption = [{
				// 	text: this.$t('base.common.noData'),
				// 	value: null
				// }] //物料选项
				this.collateData = []
				this.condition.companyId = ''
				// this.condition.materialId = ''
				this.condition.companyName = ''
				// this.condition.materialName = ''
			},
		},
	};
</script>
<style>
	page {
		background-color: #f5f7fa;
	}
</style>
<style lang="scss" scoped>
	@import '../../common/css/public.scss';
	/deep/ .uni-date-x {
		padding: 0;
	}
</style>