parking_operation/pages/patrolManagement/patrolRecords/patrolRecords.vue

<!-- 巡检记录 -->
<template>
	<view class="records">
		<view class="records-search">
			<view class="int">
				<u--input placeholder="开始日期" border="surround" v-model="form.startDate" :readonly="true"
					prefixIcon="clock" @focus="startDateShow = true">
				</u--input>
				<u-calendar :show="startDateShow" @confirm="startDateConfirm" @close="startDateShow = false">
				</u-calendar>
			</view>
			<text>至</text>
			<view class="int">
				<u--input placeholder="结束日期" border="surround" v-model="form.endDate" :readonly="true"
					prefixIcon="clock" @focus="endDateShow = true"></u--input>
				<u-calendar :show="endDateShow" @confirm="endDateConfirm" @close="endDateShow = false"></u-calendar>
			</view>
		</view>
		<view class="records-table">
			<t-table>
				<t-tr style="width: 1270rpx; background-color: #e6e6e6;">
					<t-th v-for="(item, index) in table.header" :key="index" style="width: 140rpx;height: 100rpx;">
						{{ item }}
					</t-th>
				</t-tr>
				<t-tr style="width: 1270rpx;background-color: #fff;height: 100rpx;" v-for="(item, index) in table.list"
					:key="index" :class="{'last-child': index === table.list.length - 1}">
					<t-td style="width: 140rpx;">{{ item.user }}</t-td>
					<t-td style="width: 140rpx;">{{ item.road }}</t-td>
					<t-td style="width: 140rpx;">{{ item.device }}</t-td>
					<t-td style="width: 140rpx;">{{ item.situation }}</t-td>
					<t-td style="width: 140rpx; color: #008CFF;">评价</t-td>
				</t-tr>
			</t-table>
		</view>
	</view>
</template>

<script>
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd
		},
		data() {
			return {
				form: {
					startDate: '',
					endDate: ''
				},
				startDateShow: false,
				endDateShow: false,
				table: {
					header: ['巡检人', '巡检路段', '巡检设备', '巡检情况', '详情'],
					list: [{
							user: '张刚',
							road: '丰林路',
							device: '日常任务',
							situation: 'FL001、FL002未巡检'
						}, {
							user: '张倩',
							road: '丰林路',
							device: '日常任务',
							situation: 'FL001、FL002未巡检'
						},
						{
							user: '运维人员',
							road: '丰林路',
							device: '日常任务',
							situation: 'FL001、FL002未巡检'
						},
						{
							user: '李明',
							road: '丰林路',
							device: '日常任务',
							situation: 'FL001、FL002未巡检'
						},
						{
							user: '陈静',
							road: '丰林路',
							device: '日常任务',
							situation: 'FL001、FL002未巡检'
						},
						{
							user: '孟大顺',
							road: '丰林路',
							device: '日常任务',
							situation: 'FL001、FL002未巡检'
						},
						{
							user: '张强',
							road: '丰林路',
							device: '日常任务',
							situation: 'FL001、FL002未巡检'
						}
					]
				}
			}
		},
		methods: {
			startDateConfirm(val) {
				console.log(val)
				this.form.startDate = val[0]
				this.startDateShow = false
			},
			endDateConfirm(val) {
				console.log(val)
				this.form.endDate = val[0]
				this.endDateShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.records {
		padding: 14rpx;

		&-search {
			display: flex;
			align-items: center;

			.int {
				width: 260rpx;
			}

			text {
				padding: 0 10rpx;
			}
		}

		&-table {
			margin-top: 40rpx;
		}
	}
</style>