test-web/src/views/fancongcong/supplyCardBalance/supplyCardBalance.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 type="primary">读卡</el-button>
					<el-button :icon="Search" type="primary">查询</el-button>
					<el-button type="info">重置</el-button>
					<el-button :icon="download" type="primary">人工录入</el-button>
					
				</el-form-item>
			</el-form>
		</div>
		<el-table :data="tableData" border style="width: 100%" class="table_box" scrollbar-always-on="true" stripe >
			<el-table-column prop="date" label="序号" width="100px"/>
			<el-table-column prop="name" label="卡号" />
			<el-table-column prop="address" label="客户名称" />
			<el-table-column prop="number" label="车牌号码" />
			<el-table-column prop="time" label="车牌颜色" />
			<el-table-column prop="type" label="补卡金额" />
			<el-table-column prop="regname" label="录入时间" />
			<el-table-column label="操作" class="table_btn" width="150px" align="center">
				<el-tooltip content="驳回" placement="top">
					<el-button type="warning" @click="dialogFormVisible = true">驳回审核</el-button>
				</el-tooltip>
				<el-tooltip content="审核通过" placement="top">
					<el-button type="warning" @click="dialogFormVisible = true">审核通过</el-button>
				</el-tooltip>
				<el-tooltip content="详细" placement="top">
					<el-button type="warning" @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="title">
			<el-form :model="form" v-if="delivery">
				<el-form-item label="手机号" :label-width="formLabelWidth">
					<el-input v-model="form.phone" autocomplete="off" disabled />
				</el-form-item>
				<el-form-item label="验证码" :label-width="formLabelWidth">
					<el-input v-model="form.region" autocomplete="off" />
				</el-form-item>
			</el-form>
			
			<el-form :model="form" v-else>
				<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.region" autocomplete="off" />
				</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>
	</div>
</template>

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

	const formInline = reactive({
		user: '',
		region: '',
	})

	const onSubmit = () => {
		console.log('submit!')
	}
	
	let title = ref("对公账户信息")

	const options = [{
			value: '',
			label: '全部',
		},
		{
			value: '1',
			label: '驳回',
		},
		{
			value: '0',
			label: '待审核',
		},
		{
			value: '1',
			label: '已启用',
		},
		{
			value: '2',
			label: '待修改初始密码',
		},
	]

	const value1 = ref('')
	const value2 = ref('')
	const value3 = ref('')
	const value4 = ref('')
	
	const dialogTableVisible = ref(false)
	const dialogFormVisible = ref(false)
	const formLabelWidth = '140px'
	
	const form = reactive({
	  phone: '13078580843',//手机号
	  region: '',//验证码
	  delivery: false,//是否展示详细
	  number:''//对公账户资金账户编号
	  
	})
	
	
	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: '01',
			name: 'Liu461185',
			address: '安顺市顺安防雷安全检测站平坝分站',
			number: "91520421MA6EBM14XC",
			time: "2021-06-22T12:52:17",
			type: "已启用",
			regname: "xn18096012008",
			regtime: "2021-06-23T15:08:39"
		},
		{
			date: '02',
			name: 'Liu461185',
			address: '安顺市顺安防雷安全检测站平坝分站',
			number: "91520421MA6EBM14XC",
			time: "2021-06-22T12:52:17",
			type: "已启用",
			regname: "xn18096012008",
			regtime: "2021-06-23T15:08:39"
		},
		{
			date: '03',
			name: 'Liu461185',
			address: '安顺市顺安防雷安全检测站平坝分站',
			number: "91520421MA6EBM14XC",
			time: "2021-06-22T12:52:17",
			type: "已启用",
			regname: "xn18096012008",
			regtime: "2021-06-23T15:08:39"
		}
	]
</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>