test-web/src/views/fancongcong/addsupplyCardBalance/addsupplyCardBalance.vue

<template>
	<div class="app_container">
		<div class="menu">
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="卡号">
					<el-input v-model="formInline.user" placeholder="卡号" />
				</el-form-item>
				<el-form-item>
					<el-button :icon="Search" type="primary">查询</el-button>
					<el-button type="info">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-table :data="tableData" border style="width: 100%" class="table_box" stripe >
			<el-table-column prop="date" label="卡号" width="100px"/>
			<el-table-column prop="name" label="需要补交的金额" />
			<el-table-column prop="regtime" label="卡账生成时间" />
			<el-table-column prop="number" label="卡片所属渠道" />
			<el-table-column label="操作" class="table_btn" width="400px" align="center">
				<el-tooltip content="卡账正常" placement="top">
					<el-button type="primary" disabled>卡账正常</el-button>
				</el-tooltip>
				<el-tooltip content="补交明细" placement="top">
					<el-button type="primary" @click="dialogFormVisibles = true">补交明细</el-button>
				</el-tooltip>
				<el-tooltip content="卡帐名细" placement="top">
					<el-button type="primary" @click="dialogFormVisible = true">卡帐名细</el-button>
				</el-tooltip>
			</el-table-column>
		</el-table>

		<div class="page_box">
			<el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000" />
		</div>

		<el-dialog v-model="dialogFormVisible" title="卡账明细">
			<el-form :model="form">
				<el-form-item label="当前卡内余额" :label-width="formLabelWidth">
					<el-input v-model="form.balance" autocomplete="off" disabled />
				</el-form-item>
				<el-form-item label="总消费金额" :label-width="formLabelWidth" >
					<el-input v-model="form.balances" autocomplete="off" disabled/>
				</el-form-item>
				<el-form-item label="流水编号" :label-width="formLabelWidth">
					<el-input v-model="form.number" autocomplete="off" disabled/>
				</el-form-item>
				<el-form-item label="入站名" :label-width="formLabelWidth">
					<el-input v-model="form.intoName" autocomplete="off" disabled/>
				</el-form-item>
				<el-form-item label="出站名" :label-width="formLabelWidth">
					<el-input v-model="form.leaveName" autocomplete="off" disabled/>
				</el-form-item>
				<el-form-item label="入站时间" :label-width="formLabelWidth">
					<el-input v-model="form.intoTime" autocomplete="off" disabled/>
				</el-form-item>
				<el-form-item label="出站时间" :label-width="formLabelWidth">
					<el-input v-model="form.leaveTime" autocomplete="off" disabled />
				</el-form-item>
				<el-form-item label="金额" :label-width="formLabelWidth">
					<el-input v-model="form.Money" autocomplete="off" disabled/>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogFormVisible = false">确定</el-button>
					<el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
				</span>
			</template>
		</el-dialog>

		<el-dialog v-model="dialogFormVisibles" title="补交明细">
			<el-form :model="form">
				<el-form-item label="卡号" :label-width="formLabelWidth">
					<el-input v-model="form.carNumber" autocomplete="off" disabled />
				</el-form-item>
				<el-form-item label="金额" :label-width="formLabelWidth" >
					<el-input v-model="form.cardMoney" autocomplete="off" disabled/>
				</el-form-item>
				<el-form-item label="补交时间" :label-width="formLabelWidth">
					<el-input v-model="form.CardTime" autocomplete="off" disabled/>
				</el-form-item>
				<el-form-item label="补交编号" :label-width="formLabelWidth">
					<el-input v-model="form.Cardchannel" autocomplete="off" disabled/>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogFormVisibles = false">确定</el-button>
					<el-button type="primary" @click="dialogFormVisibles = false">关闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	//导入模块
	import {
		Search
	} from '@element-plus/icons-vue'
	import {
		reactive,
		ref
	} from 'vue'

	//变量定义
	const formInline = reactive({
		user: '',
		region: '',
	})
	let title = ref("对公账户信息")
	const options = [{
			value: '',
			label: '全部',
		},
		{
			value: '1',
			label: '驳回',
		},
		{
			value: '0',
			label: '待审核',
		},
		{
			value: '1',
			label: '已启用',
		},
		{
			value: '2',
			label: '待修改初始密码',
		},
	]
	let value1 = ref('')
	let value2 = ref('')
	let value3 = ref('')
	let value4 = ref('')
	let dialogTableVisible = ref(false)
	let dialogFormVisible = ref(false)
    let dialogFormVisibles = ref(false)
	let formLabelWidth = '140px'
	let form = reactive({
	  balance:'',//当前卡内余额
	  balances:'',//总消费金额
	  number:'',//流水编号
	  intoName:'',//进站名
	  leaveName:'',//离站名
	  intoTime:'',//进站时间
	  leaveTime:'',//离站时间
	  licenseNumber:"",//车牌号
	  Money:"",//金额
	  carNumber:'',//补交卡号
	  cardMoney:'',//需要补交的金额
	  CardTime:'',//卡账生成时间
	  Cardchannel:''//补交编号
	})
	const optiones = [{
			value: '2',
			label: '2',
		},
		{
			value: '6',
			label: '6',
		},
		{
			value: '10',
			label: '10',
		},
		{
			value: '15',
			label: '15',
		},
		{
			value: '30',
			label: '30',
		},
	]
	const defaultTime = new Date(2000, 1, 1, 12, 0, 0)
	const shortcuts = [{
			text: 'Today',
			value: new Date(),
		},
		{
			text: 'Yesterday',
			value: () => {
				const date = new Date()
				date.setTime(date.getTime() - 3600 * 1000 * 24)
				return date
			},
		},
		{
			text: 'A week ago',
			value: () => {
				const date = new Date()
				date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
				return date
			},
		},
	]

	const tableData = [{
			date: '52011750220200003674',
			name: '100.00',
			address: '安顺市顺安防雷安全检测站平坝分站',
			number: "黔通",
			time: "2021-06-22T12:52:17",
			type: "已启用",
			regname: "xn18096012008",
			regtime: "2021-06-23T15:08:39"
		}
	]

	//事件处理
	const onSubmit = () => {
		console.log('submit!')
	}
	onSubmit()
</script>

<style lang="scss">
	.app_container {
		padding: 20px;
		display: flex;
		flex-direction: column;

		.table_box {
			margin-top: 25px;
			.table_btn{
				display: flex;
				flex-direction: column;
				align-self: stretch;
				align-content: space-around;
				align-items: flex-start;
			}
		}

		.page_box {
			margin-top: 25px;
		}
	}
</style>