Web_TracerMethodology/pages/allocationPerson/allocationPerson.vue

<template>
	<view class="allocationPerson-page">
		<scroll-view class="scroll-y" scroll-y="true">
      <template v-if="title === '指派查核人员'">
       	<tm-radio-group
			    :list="empList"
			   	:defaultValue='details.empId'
			   	:setting="{
			   	  value: 'employeeId',
			   	  name: 'employeeName'
			    }"
          :openkeys="[0]"
          @change="changeDetails"
			  />
      </template>
      <template v-else>
        <div class="date-view">
          <view class="row">
           	<text class="label">开始时间</text>
						<view class="date-box">
							<date-time-picker
							  :height="100"
                :start="details.planStartDate"
                :end="details.planEndDate"
								:defaultValue="details.startDate"
								placeholder="请选择起始时间"
                pickType="startDate"
								@change="changeDateTime"
							/>
						</view>
          </view>
					<view class="row">
           	<text class="label">结束时间</text>
						<view class="date-box">
							<date-time-picker
							  :height="100"
                :start="details.planStartDate"
                :end="details.planEndDate"
								:defaultValue="details.endDate"
                placeholder="请选择结束时间"
                pickType="endDate"
								@change="changeDateTime"
							/>
						</view>
          </view>
        </div>
      </template>
		</scroll-view>
		<view class="fixed-buttom-btn" @click="sure">
			<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 {
        title: '', // 导航标题
        // 查核组员列表
        empList: [],
        // 组件信息
        details: {},
        // 服务器时间
        dateStr: '',
        timer: null,
        // 点击确定按钮是否直接保存
        isSubmit: false
			}
    },
    onLoad({ details }){
      const _details = details ? JSON.parse(details) : {};
      // 强制刷新返回查核列表页面
      if(getCurrentPages().length === 1){
        const {situationId, checkId, checkGroupId, planStartDate, planEndDate} = _details;
        uni.redirectTo({
          url: `/pages/editCheckList/editCheckList?situationId=${situationId}&checkId=${checkId}&checkGroupId=${checkGroupId}&startDate=${planStartDate}&endDate=${planEndDate}`
        });
      }
      this.getComponentInfo(_details);
    },
    watch: {
      title(newVal, oldVal){
        if(newVal === '设置查核时间'){
          this.getDateStr();
          !this.timer && (this.timer = setInterval(() => {
            this.getDateStr();
          }, 10000));
        }else {
          this.clearTimer();
        }
      }
    },
    destroyed() {
      this.clearTimer();
    },
    methods: {
      getComponentInfo(details) {
        this.setNavigationBarTitle(details.title);
        this.details = details;
        this.getEmpDeptTree(details.checkGroupId);
      },
      // 查询部门人员树
			getEmpDeptTree(checkGroupId) {
				this.$store.dispatch({
					type: 'allocationPerson/commActions',
          key: "getGroupEmpList",
          data: {checkGroupId}
				}).then(data => {
					if(data) {
            this.empList = data || [];
          }
				});
      },
      // 指派查核人员改变
      changeDetails(selectVal, selectData, index) {
        this.details = {
          ...this.details,
          empId: selectData.employeeId,
          empName: selectData.employeeName
        }
      },
			// 时间变化
			changeDateTime(dateObj, pickType) {
        if(pickType === 'startDate'){ // 开始时间变化
          this.diffDateTime(dateObj.f3, this.details.endDate);
        }else {
          this.diffDateTime(this.details.startDate, dateObj.f3);
        }
        this.details = {
          ...this.details,
          [pickType]: dateObj.f3
        };
      },
      // 开始时间和结束时间对比
      diffDateTime(startTime, endTime){
        if (moment(startTime).valueOf() > moment(endTime).valueOf()) {
          this.showModal('开始时间不能大于结束时间');
        }
      },
      // 点击确定
      sure() {
        const { empId, startDate, endDate} = this.details;
        if(this.isSubmit === true) {
         return this.changeCheckList(this.checkList);
        }
        if(this.title === '指派查核人员'){
          if(!empId){
            return this.showModal('请选择查核人');
          }
          this.setNavigationBarTitle('设置查核时间');
        }else {
          if(!startDate){
            return this.showModal('请选择开始时间');
          }
          if(!endDate){
            return this.showModal('请选择结束时间');
          }
          if(!empId){
            this.setNavigationBarTitle('指派查核人员');
            this.isSubmit = true;
          }else {
            this.changeCheckList(this.checkList);
          }
        }
      },
      // 更改查核列表数据
      changeCheckList(data) {
        const { situationId, checkId, checkGroupId } = this.details;
        let checkList = this.checkList.map((item, i) => {
          if(this.details.index === i) {
            return {
              ...item,
              ...this.details
            }
          }else {
            return item;
          }
        });
        this.$store.commit({
          type: 'editCheckList/comChangeState',
          key: 'checkList',
          data: checkList
        });
        // 关闭当前页面，返回上一页面
        uni.navigateBack({delta: 1});
      },
      // 修改导航名称
      setNavigationBarTitle(title) {
        this.title = title;
        uni.setNavigationBarTitle({
			  	title
        });
      },
     // 获取当前时间
      getDateStr() {
        this.$store.dispatch({
          type: "commActions",
           key: "getDateStr" ,
        }).then((data) => {
          if (data) {
            this.dateStr = data;
          }
        });
      },
      showModal(content) {
        uni.showModal({
          content,
          showCancel: false
        });
      },
      // 清除定时器
      clearTimer(){
        if(this.timer){
          clearInterval(this.timer);
          this.timer = null;
        }
      }
    },
	}
</script>

<style lang="less">
	.allocationPerson-page {
		height: 100%;

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

       .date-view {
         padding: 0 25rpx;
         background: #fff;

				 .row {
					 display: flex;
					 align-items: center;
					 height: 62.5rpx;
					 border-top: 0.62rpx solid #DADEE6;

					 	.label {
							width: 112.5rpx;
							font-size: 22.5rpx;
							color: #292C33;
						}

						.date-box {
							padding-left: 25rpx;
							flex: 1;
						}
				 }
			 }
		}
	}
</style>