Web_TracerMethodology/pages/mission/mission.vue

<template>
	<view class="mission-page">
	 	<scroll-view class="scroll-y" scroll-y="true">
			<list-item
				v-for="(item, i) in improvingTaskList"
				:key="item.id"
				:task="item"
			/>
			<view class="completed-box">
				<view class="btn-box" >
					<view class="btn" v-show="completeTaskList.length > 0" @click="toggleBtn">
						<image class="icon" :src="`/static/${btnSetting.icon}.png`"></image>
						<text class="text">
						  {{ btnSetting.name }}
						</text>
					</view>
				</view>
				<template v-if="showCloseList">
					<list-item
						v-for="(item, i) in completeTaskList"
						:key="item.id"
						:task="item"
						:isComplete="true"
					/>
				</template>
			</view>
		</scroll-view>
		<tm-tabbar />
	</view>
</template>

<script>
	// 任务列表
	import listItem from './components/list-item.vue';
	export default {
		data(){
			return {
				// 是否展开历史任务
				showCloseList: false,
				btnSetting: {
					icon: 'up-icon', // 图标名
					name: '展示历史任务' // 按钮显示名字
				},
				// 改善中任务
				improvingTaskList: [
					// {
					// 	appointFlag: false, // 已指派标志, 0 未指派 1已指派
					// 	checkGroupId: 1, // 查核组id
					// 	checkGroupName: "测试群组", // 查核组名称
					// 	checkId: 1,
					// 	checkItemId: 1, // 查核项目id
					// 	checkItemName: "测试点", // 查核项目名称
					// 	checkPlan: "第1/3次查核计划", // 查核计划
					// 	checkPointId: 1, // 查核要点id
					// 	checkPointName: "测试", // 查核要点名称(查核项)
					// 	createDate: "2021-02-03T01:44:09.000+0000", // 任务创建时间
					// 	createEmpId: 1, //创建人
					// 	createEmpName: "管理员", // 创建人姓名
					// 	delFlag: false,
					// 	deptId: 1, // 单位id
					// 	deptName: "测试部门", // 单位名称
					// 	desicion: "", // 改善工具:0,进行PDCA改善 1,暂不改善
					// 	endFlag: false, // 完结标识
					// 	id: 1, // 任务id
					// 	needApproveFlag: false, // 需要审核标志
					// 	recordTime: "2021-02-03 09:44:17", // 最终修改时间
					// 	situationId: 1, // 情景id
					// 	situationName: "测试情景", // 情景名称
					// 	taskType: 0, // 任务当前状态
          //   updateTime: "2021-02-03T01:44:17.000+0000", // 修改时间 (发送时间)
          //   improveEmpName: '', //改善人
          //   improveEmpId: '', //改善人id
					// }
				],
				// 历史任务
				completeTaskList: [],
			}
		},
		created() {
			this.getMissionList()
		},
		methods: {
			toggleBtn() {
				let flag = !this.showCloseList;
				this.showCloseList = flag;
				this.btnSetting = {
					icon: flag ? 'up-icon' : 'down-icon',
					name: flag ? '收起历史任务' : '展示历史任务'
				}
			},
			// 获取改善任务列表
			getMissionList(data) {
				this.$store.dispatch({
					type: 'mission/commActions',
					payload: {
						key: "getMissionList",
						data
					}
				}).then(data => {
					if(data) {
						this.improvingTaskList = data.improvingTaskResponses || [];
						this.completeTaskList = data.improveCompleteResponses || [];
					}
				});
				/** 请求参数 data
				 * situationId: 情境id 当管路员或者查核者通过情境进入任务列表时 必传
				 * checkItemId 单位负责人通过 查核要点进入改善任务列表时 必传
				 */
			}
		},
		components: {
			listItem
		}
	}
</script>

<style lang="less">
 .mission-page {
   height: 100%;
   padding-top: 15rpx;

   	.scroll-y {
			height: calc(100% - 87.5rpx);

			.completed-box {

				.btn-box {
					display: flex;
					justify-content: center;
					margin-bottom: 25rpx;
					height: 50rpx;

					.btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 225rpx;
						height: 50rpx;
						border-radius: 37.5rpx;
						border: 1.25rpx solid #98A1B3;

						.icon {
							margin-right: 6.25rpx;
							width: 21.25rpx;
							height: 12.5rpx;
						}

						.text {
							font-size: 22.5rpx;
							color: #98A1B3;
						}
					}
				}
			}
		}
 }
</style>