Web_TracerMethodology/pages/editCheckList/editCheckList.vue

<template>
	<view class="check-map-list">
    <scroll-view class="scroll-y" scroll-y="true" v-if="checkList.length > 0">
      <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>
    </scroll-view>
		<view class="null" v-else>暂无数据</view>
    <view class="fixed-buttom-btn" @click="submit" v-if="checkList.length > 0">
			<text class="btn-text">完成</text>
		</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: '',
        multiple: 'false',
        planList: []
			};
		},
    onLoad({ situationId, checkId, checkGroupId, startDate, endDate, multiple }){
      this.getCheckList(checkId);
      this.checkGroupId = checkGroupId ? +checkGroupId : 0;
      this.situationId = situationId ? +situationId : 0;
      this.checkId = checkId ? +checkId : 0;
      this.startDate = startDate;
      this.endDate = endDate;
      this.multiple = multiple;
    },
		methods: {
      // 完成
      submit() {
        // baseEmpList: 第一次计划修改的数据; changePlanList: 批量分配,记录第一次计划修改数据的信息;  multipleEmpList: 批量修改的数据
        let baseEmpList = [], changePlanList = [], multipleEmpList = [];
        // planStartTimestamp: 开始计划时间戳;
        let planStartTimestamp = this.dateToTimestamp(this.startDate);
        this.checkList.map((item, i) => {
          const {checkId, deptId, empId, empName, startDate, endDate} = item;
          if(empId && startDate && endDate){
            baseEmpList.push({
              checkId,
              deptId,
              empId,
              empName,
              startDate: startDate || '',
              endDate: endDate || ''
            });
            if(this.multiple === 'true'){ // 批量分配
              changePlanList.push({
                index: i, // 第一次计划修改的下标
                baseEmpListIndex: baseEmpList.length -1,
                startDiffTimestamp: startDate ? this.dateToTimestamp(startDate) - planStartTimestamp : 0, // 开始时间差
                endDifTimestamp: endDate ? this.dateToTimestamp(endDate) - planStartTimestamp : 0 // 结束时间差
              });
            }
          }
        });
        if(this.multiple === 'true') { // 批量分配
          this.$store.dispatch({
		      	type: 'planList/commActions',
		      	payload: {
		      		key: 'planList',
		      		data:{situationId: this.situationId}
		      	}
		      }).then((planList) => {
            (planList || []).map(((planItem, planI) => {
               if(planI != 0){ // 过滤掉第一条
                 // 计划开始时间戳
                 let planStartTimestamp = planItem.startDate ? this.dateToTimestamp(planItem.startDate + ' 00:00') : 0;
                 // 计划结束时间戳
                 let planEndTimestamp = planItem.endDate ? this.dateToTimestamp(planItem.endDate + ' 23:59') : 0;

                 planItem.empList && planItem.empList.map((empItem, empI) => {
                   // 当前分配明细
                   let currentEmp = changePlanList.find(item => item.index === empI);
                   if(currentEmp){
                     const { baseEmpListIndex, startDiffTimestamp, endDifTimestamp } = currentEmp;
                     const { empId, empName } = baseEmpList[baseEmpListIndex] || {};
                     multipleEmpList.push({
                       empId,
                       empName,
                       checkId: empItem.checkId,
                       deptId: empItem.deptId,
                       startDate: (planStartTimestamp && startDiffTimestamp)
                         ? this.getDateStr(planStartTimestamp, planEndTimestamp, startDiffTimestamp, planItem.endDate)
                         : '',
                       endDate: (planStartTimestamp && endDifTimestamp)
                         ? this.getDateStr(planStartTimestamp, planEndTimestamp, endDifTimestamp, planItem.endDate)
                         : ''
                     });
                   }
                })
               }
            }))
            multipleEmpList = [...baseEmpList, ...multipleEmpList];
            // console.log('批量',multipleEmpList )
            this.batchDistribute(multipleEmpList);
          })
        }else { // 单个分配
          this.batchDistribute(baseEmpList);
        }
      },
      /**
       * 获取时间字符串
       * @param {Number} startTimestamp 计划开始时间戳
			 * @param {Number} endTimestamp 计划结束时间戳
			 * @param {Number} diffTimestamp 第一次计划中的时间差
			 * @param {String} endDateStr 计划结束时间字符串
       */
      getDateStr(startTimestamp, endTimestamp, diffTimestamp, endDateStr) {
        if((startTimestamp + diffTimestamp) > endTimestamp){ // 超出计划结束时间, 则取计划结束时间
          return endDateStr;
        }else {
          return moment(startTimestamp + diffTimestamp).format('YYYY-MM-DD HH:mm');
        }
      },
      // 分配单位查核人员
      batchDistribute(empList) {
        if(empList.length === 0) { // 未作修改直接跳转页面
          return this.redirectToPlanList();
        }
        this.$store.dispatch({
          type: 'editCheckList/commActions',
          key: "batchDistribute",
          data: { empList }
        }).then(data => {
          if(data){
            this.redirectToPlanList();
          }
        });
      },
      // 跳转页面
      redirectToPlanList() {
        uni.redirectTo({
          url: `/pages/planList/planList?situationId=${this.situationId}&checkGroupId=${this.checkGroupId}`
        });
      },
      // 日期时间转换为时间戳
      dateToTimestamp(dataStr) {
        return dataStr ? moment(dataStr).valueOf() : 0
      },
      checkEdit(data, index, title) {
        if(data.completeState){ // 计划已开始, 不能编辑查核人和计划时间
          uni.showModal({
            content: '因查核计划已开始，故不可修改',
            showCancel: false
          });
        }else {// 跳转编辑页面
          const { empId, empName, startDate, endDate } = data;
          let details = {
            index, // 修改的下标
            title, // 标题
            empId,
            empName,
            startDate,
            endDate,
            situationId: this.situationId, //  情境id (批量修改有,不然为0)
            checkId: this.checkId, // 查核id
            checkGroupId: this.checkGroupId, //查核组id
            planStartDate: this.startDate, // 计划开始时间
            planEndDate: this.endDate // 计划结束时间
          }
          uni.navigateTo({
			  	  url: `/pages/allocationPerson/allocationPerson?details=${encodeURIComponent(JSON.stringify(details))}`
			  	});
        }
      },
      // 获取查核列表
      getCheckList(checkId) {
        this.$store.dispatch({
          type: 'editCheckList/commActions',
          key: "getCheckList",
          data: { checkId }
        }).then(data => {
          this.$store.dispatch({
            type: "commActions",
            key: "getDateStr",
          }).then((dateStr) => {
            if (dateStr) {
              this.$store.commit({
                type: 'editCheckList/comChangeState',
                key: 'checkList',
                data: (data || []).map(item => {
                  if (item.startDate && moment(item.startDate).valueOf() < moment(dateStr).valueOf()) {
                    return {
                      ...item,
                      completeState: true // true:说明计划已开始, 不能编辑查核人和计划时间
                    }
                  }else {
                    return item
                  }
                })
              });
            }
          });
        });
      },
      // 获取计划列表
      getPlanList() {
        this.$store.dispatch({
		    	type: 'planList/commActions',
		    	payload: {
		    		key: 'planList',
		    		data:{
		    			situationId: this.situationId
		    		}
		    	}
		    }).then((data) => {
          this.planList = data || [];
        })
      }
		}
	}
</script>

<style lang="less">
	.check-map-list {
    height: 100%;

    .scroll-y {
			height: calc(100% - 87.5rpx);
      padding-top: 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;
              margin-bottom: 0;
	    			}

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

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

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

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