Web_TracerMethodology/pages/editCheckList/editCheckList.vue

<template>
	<view class="check-map-list">
		<view class="item"
			v-for="(item, index) in checkList"
			: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">
			 <view class="row" @click="checkEdit(item, index, '指派查核人员')">
			 	 <text class="label">查核人</text>
				 <view class="content">
				 	 <text :class="['base-text', item.empName ? 'black-color' : '']">
						 {{ item.empName ? item.empName : '选择查核成员'}}
					 </text>
				 </view>
				 <image class="arrow" src="/static/images/icon-more.png"></image>
			 </view>
			 <view class="row" @click="checkEdit(item, index, '设置查核时间')">
			 	 <text class="label">计划时间</text>
				 <view class="content">
				 	 <text :class="['base-text', item.startDate ? 'black-color' : '']">
					   {{ item.startDate ? item.startDate : '选择起始时间' }}
					 </text>
				 	 <text class="center-text">至</text>
					 <text :class="['base-text', item.endDate ? 'black-color' : '']">
					   {{ item.endDate ? item.endDate : '选择结束时间' }}
					 </text>
				 </view>
				 <image class="arrow" src="/static/images/icon-more.png"></image>
			 </view>
			</view>
		</view>
		<!-- <view class="null" v-if="checkList.length === 0">暂无数据</view> -->
	</view>
</template>

<script>
  // 查核列表(查核人和计划时间可编辑)
  import { mapState } from "vuex";
  import moment from 'moment';
	export default {
    computed: {
      ...mapState({
        checkList: state => state.editCheckList.checkList
      })
    },
		data() {
			return {
        // 查核组id
        checkGroupId: 0,
        // 情境id (批量修改有,不然为0)
        situationId: 0,
        // 查核id
        checkId: 0,
        // 计划开始时间
        startDate: '',
        // 计划结束时间
        endDate: ''
			};
		},
    onLoad({ situationId, checkId, checkGroupId, startDate, endDate }){
      console.log(99999)
      this.getCheckList(checkId);
      this.checkGroupId = checkGroupId;
      this.situationId = situationId;
      this.checkId = checkId;
      this.startDate = startDate;
      this.endDate = endDate;
    },
		methods: {
      checkEdit(data, index, title) {
        if(data.startDate){ // 分配开始时间有，需要与当前时间做对比
          this.$store.dispatch({
            type: "commActions",
            key: "getDateStr" ,
          }).then((dateStr) => {
            if(dateStr) {
              if (moment(data.startDate).valueOf() > moment(dateStr).valueOf()) { // 弹窗提示
                uni.showModal({
                  content: '因查核计划已开始，故不可修改',
                  showCancel: false
                });
              }else {
                this.gotoAllocationPerson(data, index, title);
              }
            }
          });
        }else {// 跳转编辑页面
          this.gotoAllocationPerson(data, index, title);
        }
      },
			// 打开人员列表页面
			gotoAllocationPerson(data, index, title) {
        let details = {
          index, // 修改的下标
          title, // 标题
          situationId: this.situationId,
          checkId: this.checkId,
          checkGroupId: this.checkGroupId,
          planStartDate: this.startDate + ' 00:00',
          planEndDate: this.endDate + ' 23:59',
          empId: data.empId,
          empName: data.empName,
          startDate: data.startDate,
          endDate: data.endDate
        }
        uni.navigateTo({
				   url: `/pages/allocationPerson/allocationPerson?details=${encodeURIComponent(JSON.stringify(details))}`
				});
			},
			// 打开日期选择页面
			openDatePickPage(data) {

      },
      // 获取查核列表
      getCheckList(checkId) {
        this.$store.dispatch({
          type: 'editCheckList/commActions',
          key: "getCheckList",
          data: { checkId }
        }).then(data => {
          this.$store.commit({
            type: 'editCheckList/comChangeState',
            key: 'checkList',
            data: data || []
          })
        });
      },
      // 获取当前时间
      getDateStr() {
        this.$store.dispatch({
          type: "commActions",
           key: "getDateStr" ,
        }).then((data) => {
          if (data) {
            console.log(8, data)
          }
        });
      },
		}
	}
</script>

<style lang="less">
	.check-map-list {
		padding: 25rpx;

		.footer {

			.row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 1px solid #DADEE6;
				height: 62.5rpx;
				padding: 0 25rpx;
				font-size: 22.5rpx;

				.label {
					color: #525866;
					width: 93.75rpx;
				}

				.content {
					display: flex;
					flex-direction: row;
					align-items: center;
					flex: 1;
					height: 100%;
					padding: 0 25rpx;

					.base-text {
						flex: 1;
						line-height: 62.5rpx;
						color: #B8BECC;
						font-weight: normal;
					}

					.center-text {
						padding: 0 25rpx;
						color: #292C33;
					}

					.black-color {
						color: #292C33;
					}
				}

				.arrow {
					width: 12.5rpx;
					height: 21.25rpx;
				}
			}
		}

		.null {
			text-align: center;
			color: #999;
		}
	}
</style>