webapp / GreenwayWeb

<template>
	<div style="background-color:#f7f7f7;padding:10px 10px;">
		<div class="zhuti" v-if="ontype == '1'">
			<div style="height:58px;line-height:58px;">
				<div style="color:#0006"> <span>联机交易</span> <span style="padding:0 5px;">></span> <span
						style="color:#000000e6">对账分析</span></div>
			</div>
			<!-- 搜索 -->
			<div class="formSearch">
				<el-form :inline="true" :model="formSel">
					<el-form-item label="年月">
						<el-date-picker style="width: 100%;" v-model="formSel.yytime" value-format="yyyy-MM"
							type="month" placeholder="选择日期">
						</el-date-picker>
					</el-form-item>


				</el-form>
				<div>
					<el-button style="background-color: #3F9B6A;color: #fff" @click="onSubmit">查询
					</el-button>
					<el-button class="buttonHover"
						style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" @click="resetting">重置
					</el-button>
				</div>

			</div>

			<div>
				<el-calendar v-model="morenCard">
					<template slot="dateCell" slot-scope="{date, data}">
						{{data.day.split("-").slice(2).join("-")}}
						<div style="overflow: auto;height:75px;">
							<div style="width:100%," v-for="(item,index) in tableData"
								@click="genjinMsg(item,data.day)">
								<div style="font-size:12px;margin-top:10px;">

									<div v-if="item.nowDay == data.day && val.count!=0" v-for="val in item.checkTypes"
										:style="val.checkType==0?'color:red':val.checkType==1?'color:green':val.checkType==2?'':''">
										{{val.checkType==0?'未对账':val.checkType==1?'平账':val.checkType==2?'金额不符':''}}:{{val.count}}
									</div>

								</div>
							</div>
						</div>
					</template>
				</el-calendar>
			</div>
			<div>
				<el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
					@click="closeGenjin">返回
				</el-button>
			</div>
		</div>
		<div class="zhuti" v-if="ontype == '3'">
			<div style="height:58px;line-height:58px;">
				<div style="color:#0006"> <span>联机交易</span> <span style="padding:0 5px;">></span> <span
						style="color:#000000e6">对账明细</span></div>
			</div>
			<div class="formSearch">
				<el-form :inline="true" :model="listIndex" label-position="left">
					<el-form-item label="账单金额">
						<div>
							<el-input placeholder="请输入" style="width: 168px" v-model="listIndex.minPrice">
							</el-input>
							至
							<el-input placeholder="请输入" style="width:168px" v-model="listIndex.maxPrice">
							</el-input>
						</div>
					</el-form-item>

					<el-form-item label="核对状态">
						<el-select v-model="listIndex.checkType" placeholder="请选择" style="width: 100px;">
							<el-option label="未对账" value="0" />
							<el-option label="平账" value="1" />
							<el-option label="金额不符" value="2" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button style="background-color: #3F9B6A;color: #fff;" @click="listSubmit">查询
						</el-button>
						<el-button class="buttonHover"
							style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
							@click="listResetting">重置
						</el-button>
					</el-form-item>
				</el-form>

			</div>
			<div style="margin-bottom: 20px;">
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="duiShow = true">对账规则设置
				</el-button>
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="biaoSet">对账标签设置
				</el-button>
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="tiaoSet">对账明细条件设置
				</el-button>

			</div>
			<div>
				<el-table :data="addziyuanData"
					:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
					style="width: 100%">
					<el-table-column label="序号" min-width="4%">
						<template slot-scope="scope">
							{{scope.$index+1}}
						</template>
					</el-table-column>
					<el-table-column prop="orderFormId" label="订单号" width="auto" min-width="10%">

					</el-table-column>
					<el-table-column prop="payId" label="交易号" width="auto" min-width="10%" show-overflow-tooltip>

					</el-table-column>
					<el-table-column label="支付金额" prop="price" width="auto" min-width="12%">

					</el-table-column>


					<el-table-column prop="payChannel" label="支付渠道" width="auto" min-width="10%">

					</el-table-column>

					<el-table-column prop="payTime" label="支付完成时间" width="auto" min-width="10%" show-overflow-tooltip>
						<template slot-scope="scope">
							{{formatIsoToDateTime(scope.row.payTime)}}
						</template>
					</el-table-column>
					<el-table-column prop="reconciliationTime" label="对账日期" width="auto" min-width="10%"
						show-overflow-tooltip>

						<template slot-scope="scope">
							{{formatIsoToDateTime(scope.row.reconciliationTime)}}
						</template>
					</el-table-column>
					<el-table-column prop="checkType" label="核对状态" width="auto" min-width="10%">
						<template slot-scope="scope">
							{{scope.row.checkType == '0'?'未对账':scope.row.checkType == '1'?'平账':scope.row.checkType == '2'?'金额不符':''}}
						</template>
					</el-table-column>

				</el-table>
				<div class="fenye">
					<div style="line-height: 34px">共{{total}}条</div>
					<el-pagination class="pagination" :hide-on-single-page="flag" background
						:current-page="listIndex.pageNumber+1" :page-sizes="[10, 20, 50, 100]"
						:page-size="listIndex.pageSize" layout="prev, pager,next" :total="total"
						@size-change="handleSizeChange" @current-change="handleCurrentChange" />
				</div>
			</div>
			<div style="display: flex;">
				<el-button @click="closeFn" class="buttonHover"
					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
			</div>
		</div>
		<el-dialog :visible.sync="duiShow" title="对账规则设置" style="padding: 0;" width="45%" center
			:close-on-click-modal="false" :show-close="false">
			<div style="padding:20px;">
				对账规则：
			<el-select v-model="duiSetCont" placeholder="请选择" style="width: 100px;">
				<el-option label="未对账" value="0" />
				<el-option label="平账" value="1" />
				<el-option label="金额不符" value="2" />
			</el-select>
			</div>
			<div style="display: flex;">
				<el-button @click="duiShow = false" class="buttonHover"
					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="duiShow = false">确定
				</el-button>
			</div>

		</el-dialog>
		<div class="zhuti" v-if="ontype == '4'">
			<div style="padding: 20px 0;">对账标签设置</div>
			<div style="margin-bottom: 20px;">
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="add(1)">新增
				</el-button>
			
			</div>
			<el-table :data="biaotable"
				:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
				style="width: 100%">
				<el-table-column label="标签名称" min-width="20%" prop="name">

				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="auto" min-width="10%">

				</el-table-column>
				<el-table-column label="操作" width="auto" min-width="10%">
				<template slot-scope="scope">
				              <div @click="deltab(scope.row.id)" class="tableBtn greens" >删除</div>
				            </template>
				</el-table-column>
			</el-table>
			<div style="display: flex;">
				<el-button @click="closeFn" class="buttonHover"
					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
			</div>
		</div>
		<div class="zhuti" v-if="ontype == '5'">
			<div style="padding: 20px 0;">对账明细条件设置</div>
			<div style="margin-bottom: 20px;">
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="add(2)">新增
				</el-button>
			
			</div>
			<el-table :data="biaotable"
				:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
				style="width: 100%">
				<el-table-column label="明细条件" min-width="20%" prop="name">

				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="auto" min-width="10%">

				</el-table-column>
				<el-table-column label="操作" width="auto" min-width="10%">
<template slot-scope="scope">
              <div @click="deltab(scope.row.id)" class="tableBtn greens" >删除</div>
            </template>
				</el-table-column>
			</el-table>
			<div style="display: flex;">
				<el-button @click="closeFn" class="buttonHover"
					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
			</div>
		</div>
		<el-dialog :visible.sync="tiaoAdd" title="对账规则设置" style="padding: 0;" width="45%" center
			:close-on-click-modal="false" :show-close="false">
			<div style="padding:20px;">
			{{msg}}：
				<el-input v-model="tiaoObj.name"></el-input>
				
			</div>
			<div style="display: flex;">
				<el-button @click="close" class="buttonHover"
					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="tiaoChek">确定
				</el-button>
			</div>
		
		</el-dialog>
	</div>
</template>

<script>
	import {
		reconciliationAnalysis,
		reconciliationDetail,
		liationByPage,
		liationAdds,
		liationDelete
	} from '../../../api/online.js'
	export default {
		data() {
			return {
				ontype: "1",
				formSel: {
					yytime: ''
				},
				addziyuanData: [],
				morenCard: new Date(),
				pageSize: 10,
				currentPage: 1,
				flag: false,
				total: 0,
				pageindex: {
					startTime: '',
					endTime: '',
				pageNumber: 0,
				pageSize: 10,
				},
				listIndex: {
					minPrice: '',
					maxPrice: '',
					checkType: '',
					pageSize: 10,
					pageNumber: 0,
					nowTime: '',
				},
				tableData: [],
				biaotable: [],
				tiaotable: [],
				duiShow: false,
				biaoShow: false,
				tiaoShow: false,
				duiSetCont:'',
				tiaoAdd:false,
				msg:'标签名称',
				tiaoObj:{
					name:'',
					createTime:'',
					type:1
				},
			}
		},
		created() {

		},
		mounted() {
			this.getCurrentMonthStartAndEnd()
			this.getAll()
		},
		methods: {
			async tiaoChek(){
			 this.tiaoObj.createTime = this.currentTime()
				await liationAdds(this.tiaoObj)	
				this.tiaoAdd = false
				this.setTable(this.tiaoObj.type)
			},
			close(){
				this.tiaoAdd = false
				this.tiaoObj.name  = ''
			},
			add(val){
				this.tiaoObj.name  = ''
				if(val == 1){
				this.msg =  '标签名称'	
				
				}else{
					this.msg = '明细条件'	
				}
				this.tiaoObj.type = val
				this.tiaoAdd = true
			},
			async deltab(ids){
				console.log(ids)
				await liationDelete(ids)
				this.setTable(this.tiaoObj.type)
			},
			biaoSet() {
				this.biaoShow = true
				this.ontype = '4'
				this.setTable(1)
			},
			tiaoSet() {
				this.tiaoShow = true
				this.ontype = '5'
				this.setTable(2)
			},
		async	setTable(val){
					let obj ={
						pageNumber: 0,
						pageSize: 100,
						type:val
					}
				let res = await liationByPage(obj)
				console.log(res.data.content)
				this.biaotable = res.data.content
				// if(val == 1){
				// 	this.biaotable = res.data.content

				// }else{
				// 	this.tiaotable = res.data.content
				// }
			},
			getCurrentMonthStartAndEnd() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				if (month > 12) {
					month = 1;
					year++;
				}
				if (month < 10) {
					month = '0' + month
				}
				let monthLastDay = new Date(year, month, 0).getDate();
				let firstDate = year + '-' + month + '-' + '01';
				let lastDate = year + '-' + month + '-' + monthLastDay;
				this.pageindex.startTime = firstDate
				this.pageindex.endTime = lastDate

			},
			changimg(e, type) {
				this.formInline[type] = e
			},
			async getAll() {
				const res = await reconciliationAnalysis(this.pageindex)
				this.tableData = res.data.onlineTransactionTimeByNowDayVOS

			},
			async genjinMsg(item, data) {
				this.listIndex.nowTime = data
				this.ontype = '3'
				const res = await reconciliationDetail(this.listIndex)
				this.addziyuanData = res.data.content
				this.total = res.data.totalElements
			},
			onSubmit() {
				this.morenCard = this.formSel.yytime
				if (this.formSel.yytime != '') {
					this.getfirstDateAndlastDate(this.formSel.yytime)
				}

				this.getAll()
			},
			resetting() {
				this.morenCard = new Date()
				this.formSel.yytime = ''
				this.getCurrentMonthStartAndEnd()
				this.getAll()
			},
			getfirstDateAndlastDate(dateStr) {
				let date = new Date(dateStr);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				if (month > 12) {
					month = 1;
					year++;
				}
				if (month < 10) {
					month = '0' + month
				}
				let monthLastDay = new Date(year, month, 0).getDate();
				let firstDate = year + '-' + month + '-' + '01';
				let lastDate = year + '-' + month + '-' + monthLastDay;
				this.pageindex.startTime = firstDate
				this.pageindex.endTime = lastDate
			},

			closeGenjin() {
				this.ontype = '1'
				this.addziyuanData = []
			},

			closeFn(val) {
				this.ontype = '3'
			},
			handleSizeChange() {

			},
			handleCurrentChange(val) {
				this.listIndex.pageNumber = val
				this.getAll()
			},
			formatIsoToDateTime(isoTime) {
				// 1. 空值/非法值处理
				if (!isoTime) return '';
				if (typeof isoTime !== 'string') return '';

				// 2. 解析时间（兼容带时区的ISO格式，如2025-03-11T14:19:54+08:00）
				const date = new Date(isoTime.replace('T', ' ').replace(/-/g, '/'));
				if (isNaN(date.getTime())) return '';

				// 3. 补零函数（确保两位数）
				const pad = (num) => num.toString().padStart(2, '0');

				// 4. 提取时间分量（注意：月份从0开始，需+1）
				return [
					date.getFullYear(), // 年
					pad(date.getMonth() + 1), // 月（0→1月）
					pad(date.getDate()), // 日
					pad(date.getHours()), // 时
					pad(date.getMinutes()), // 分
					pad(date.getSeconds()) // 秒
				].join('-').replace(/(\d{4})-(\d{2})-(\d{2})/, '$1-$2-$3 ').slice(0, 19);
				// 最终格式：YYYY-MM-DD HH:mm:ss（精确到秒，共19位）
			},
			async listSubmit() {
				const res = await reconciliationDetail(this.listIndex)
				this.addziyuanData = res.data.content
				this.total = res.data.totalElements
			},
			async listResetting() {
				this.listIndex = {
					minPrice: '',
					maxPrice: '',
					checkType: '',
					pageSize: 10,
					pageNumber: 0,
					nowTime: '',
				}
				const res = await reconciliationDetail(this.listIndex)
				this.addziyuanData = res.data.content
				this.total = res.data.totalElements
			},
			// 获取时间
			currentTime() {
			 let date = new Date();
			  let year = date.getFullYear();
			  let month = date.getMonth() + 1; // 月份从0~11，所以加一
			  let day = date.getDate();
			  let hours = date.getHours();
			  let minutes = date.getMinutes();
			  let seconds = date.getSeconds();
			
			  // 为月、日、小时、分钟和秒添加前导零（如果需要）
			  month = month < 10 ? '0' + month : month;
			  day = day < 10 ? '0' + day : day;
			  hours = hours < 10 ? '0' + hours : hours;
			  minutes = minutes < 10 ? '0' + minutes : minutes;
			  seconds = seconds < 10 ? '0' + seconds : seconds;
			
			  // 返回格式化的日期和时间字符串
			  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fenye {
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	::v-deep .el-calendar button-group {
		display: none;
	}

	.zhuti {
		padding: 0 20px 20px 20px;
		min-height: calc(100vh - 50px - 20px);
		background-color: #fff;
		box-sizing: border-box;
	}

	.formSearch {

		display: flex;
		width: 100%;
		font-size: 14px;
		justify-content: space-between;

	}

	::v-deep .el-calendar-table:not(.is-range)td.next {
		display: none;
	}

	::v-deep .el-calendar-table:not(.is-range)td.prev {
		visibility: hidden;
	}

	::v-deep .el-calendar__button-group {
		display: none;
	}
	::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active{
		  background-color: #3F9B6A;
	 }
	
</style>