Web_TracerMethodology/pages/checkList/checkList.vue

<template>
	<view class="check-map-list">
		<view class="item"
			v-for="(item, index) in depList" 
			:key="index">
			<view class="title-wrap">
				<text>{{item.deptName}}</text>
				<view>
					<image src="../../static/icon-map.png"></image>
					<text>{{item.deptClassName}}</text>
				</view>
			</view>
			<view class="content">
				<text>{{item.decs}}</text>
				<text>
					要点概览：{{item.checkPointNames}}
				</text>
			</view>
			<view class="footer">
				<text>查核人：{{item.empName}}</text>
				<text>{{item.startDate}}~{{item.endDate}}</text>
			</view>
		</view>
		<view class="null" v-if="depList.length === 0">暂无数据</view>
		<view class="modal">
			<view class="content-list">
				<view class="list-item">
					<text>第1次查核计划（2020-09-21 ~ 2020-09-22）</text>
					<view class="item-icon">已完成</view>
				</view>
				<view class="list-item active">
					<text>第1次查核计划（2020-09-21 ~ 2020-09-22）</text>
					<view class="item-icon">进行中</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				depList: [
					{
						"checkId":30, //类型：Number  必有字段  备注：计划id
						"deptId":1, //类型：Number  必有字段  备注：单位id
						"deptName":"测试单位1", //类型：String  必有字段  备注：单位名称
						"deptClassId":1, //类型：Number  必有字段  备注：单位分组id
						"deptClassName":"单位分类1", //类型：String  必有字段  备注：单位分组名称
						"checkPointNames":"要点1", //类型：String  必有字段  备注：要点名称拼接
						"decs":"包含1个查核要点, 已完成0/2个查核项目", //类型：String  必有字段  备注：描述
						"empId":6, //类型：Number  必有字段  备注：分配查核人id
						"empName":"查核组员2", //类型：String  必有字段  备注：分配查核人名称
						"startDate":"2021-02-20 08:00", //类型：String  必有字段  备注：分配开始时间
						"endDate":"2021-02-21 05:00" //类型：String  必有字段  备注：分配结束时间
					}
				]
			};
		},
		created: function(){
			this.dispatch('depList', {checkId: ''}).then((data)=>{
				console.log(data);
				if(data) {
					// this.depList = data;
				}
			});
		},
		methods: {
			dispatch: function(key, data) {
				return this.$store.dispatch({type: 'checkList/commActions', key, data});
			},
		}
	}
</script>

<style lang="less">
	.check-map-list {
		padding: 25rpx;
		.footer {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin: 0 25rpx 16.87rpx;
			border-top: 1px solid #DADEE6;
			padding-top: 16.25rpx;
			font-size: 17.5rpx;
			line-height: 26.25rpx;
			color: #666E80;
		}
	}
	.null {
		text-align: center;
		color: #999;
	}
	.content-list {
		width: 100%;
		background-color: #fff;
		.list-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1px solid #DADEE6;
			padding: 0 25rpx;
			width: 100%;
			height: 87.5rpx;
			font-size: 22.5rpx;
			line-height: 33.75rpx;
			color: #292C33;
			.item-icon {
				border-radius: 5rpx;
				padding: 6.25rpx 11.25rpx;
				line-height: 26.25rpx;
				color: #29CC96;
				background-color: #e9f9f4;
			}
			&.active {
				color: #3377FF;
				.item-icon {
					color: #FFAA00;
					background-color: #fff9ef;
				}
			}
		}
	}
</style>