import React,{Component} from 'react'; import Taro from '@tarojs/taro'; import {Text, View} from '@tarojs/components' import dayjs from 'dayjs'; import './index.less'; import ImagePicker from '../../components/common/imagePicker' import {AtButton, AtTextarea, AtIcon, AtCalendar} from 'taro-ui' import {addPublicRelease,getWorkingHoursList} from '../../utils/servers/servers'; import {getHours, getNumHourse, getUserWordTimes} from '../../utils/tools'; import 'taro-ui/dist/style/components/form.scss'; import 'taro-ui/dist/style/components/button.scss'; import 'taro-ui/dist/style/components/loading.scss'; import 'taro-ui/dist/style/components/icon.scss'; import 'taro-ui/dist/style/components/icon.scss'; import 'taro-ui/dist/style/components/textarea.scss'; import 'taro-ui/dist/style/components/calendar.scss'; import './publicContent.less'; import InquiryModal from "../../components/common/inquiryModal"; class PublicContent extends Component{ constructor(props) { super(props); this.state={ rangeStartVal:'', rangeEndVal:'', rangeEndMinuteVal:'', rangeStartMinuteVal:'', reason:'', imgs:[], validDates:[], totalDuration:0, loading:false, workTypeList:[], workType:0, isPickerRender:false, } this.onSubmit = this.onSubmit.bind(this); this.selectArrder = this.selectArrder.bind(this); this.onChange = this.onChange.bind(this); this.getWorkingHoursList = this.getWorkingHoursList.bind(this); this.onPickerHide = this.onPickerHide.bind(this); this.onSetPickerTime = this.onSetPickerTime.bind(this); this.getNumHourse = this.getNumHourse.bind(this); } componentDidMount() { Taro.eventCenter.on('result', () => { this.imagePickerRef && this.imagePickerRef.clear(); this.setState({ rangeStartVal:'', rangeEndVal:'', rangeEndMinuteVal:'', rangeStartMinuteVal:'', reason:'', imgs:[], validDates:[], totalDuration:0, loading:false, }) }) this.getWorkingHoursList(); } getNumHourse(startTime,endTime){ this.setState({ totalDuration:getNumHourse(startTime,endTime,this.state.validDates.length) }) } onSubmit(){ if(!this.state.rangeStartMinuteVal){ Taro.showToast({title:'请选择公出时间',icon:'none'}) return ; } if(!this.state.rangeEndMinuteVal){ Taro.showToast({title:'请选择公出时间',icon:'none'}) return ; } if(!(this.props.selectArrderLocation.longitude && this.props.selectArrderLocation.latitude)){ Taro.showToast({title:'请选择公出地点',icon:'none'}) return ; } if(!this.state.reason){ Taro.showToast({title:'请输入公出事由',icon:'none'}) return ; } if(this.state.totalDuration === 0){ Taro.showToast({title:'公出时间不足0小时',icon:'none'}) return ; } this.setState({ loading:true }) addPublicRelease({ uid:this.props.enterpriseInfor.id, releaseStarts:this.state.rangeStartMinuteVal, releaseEnds:this.state.rangeEndMinuteVal, remarks:this.state.reason, userName: this.props.selectArrderLocation.name, longitude: this.props.selectArrderLocation.longitude, latitude: this.props.selectArrderLocation.latitude, annexUrl: this.state.imgs.length === 0 ? '' : this.state.imgs.join(','), duration: this.state.totalDuration, validDate: JSON.stringify(this.state.validDates) }).then(v=>{ this.setState({ loading:false }) if(v.error.length === 0){ Taro.eventCenter.trigger('publicContent',v.data) }else{ Taro.showToast({ title:v.error[0].message, icon:'none' }) } }).catch(()=>{ this.setState({ loading:false }) }); } selectArrder(){ const key = 'AWBBZ-GRAC2-JFYUO-CLA7I-JAHXK-YFFGT'; //使用在腾讯位置服务申请的key const referer = '科德打卡定位'; //调用插件的app的名称 const category = '公司企业,房产小区'; Taro.navigateTo({ url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&category=' + category }); } onChange(value,type){ let arr = this.state.imgs.concat([]); if(type === 'add'){ arr.push(value) }else if(type === 'remove'){ arr.splice(value,1) } this.setState({ imgs: arr, }) } getWorkingHoursList(){ getWorkingHoursList({}).then((v)=>{ if(v.error.length === 0){ let obj = Taro.getStorageSync('userInfor'); let index = v.data.findIndex(value=>value.type === obj.workTimeInfor.type); this.setState({ workType:index !== -1 ? index : 0 }) this.setState({ workTypeList:v.data }) }else{ Taro.showToast({ title:v.error[0].message, icon:'none' }) } }).catch(err=>{ console.log(err) }) } onPickerHide(){ this.setState({ isPickerRender: false, }); } onSetPickerTime(val){ let data = val.detail; this.setState({ rangeStartMinuteVal: data.selectStartTime, rangeEndMinuteVal: data.selectEndTime }); let arr = []; if(data.startTime && data.endTime){ let a = dayjs(data.startTime); let b = dayjs(data.endTime); let num = b.diff(a, 'day')+1; let strAdd = data.startTime; for(let i = 0;i{ let a1 = dayjs(dayjs(data.endTime).format('YYYY-MM-DD HH:mm:ss')); let b1 = dayjs(dayjs(data.startTime).format('YYYY-MM-DD HH:mm:ss')); this.getNumHourse(b1,a1) }) } render() { return ( 公出企业: {this.props.enterpriseInfor.name} 作息时间类型: { this.setState({ workType: e.detail.value }) if(this.state.workTypeList[e.detail.value]){ let obj = Taro.getStorageSync('userInfor'); obj.workTimeInfor = this.state.workTypeList[e.detail.value]; Taro.setStorageSync('userInfor', obj); this.setState({ rangeStartVal:'', rangeStartMinuteVal: '', rangeEndMinuteVal:'', rangeEndVal:'', validDates:[], totalDuration:0 }) } }} value={this.state.workType} rangeKey='name' range={this.state.workTypeList}> {this.state.workTypeList[this.state.workType] ? this.state.workTypeList[this.state.workType].name : ''} 公出时间: { this.setState({ isPickerRender:true }) }}> { this.state.rangeStartMinuteVal && this.state.rangeEndMinuteVal ? 开始时间:{this.state.rangeStartMinuteVal} 结束时间:{this.state.rangeEndMinuteVal} : '请选择公出时间' } { let a = dayjs(dayjs(v.detail.endTime).second(0).format('YYYY-MM-DD HH:mm:ss')); let b = dayjs(dayjs().second(0).format('YYYY-MM-DD HH:mm:ss')) if(a.isBefore(b)){ Taro.showToast({ title:'结束时间不能小于当前时间', icon:'none' }) v.detail.setLv(false); } }} onhidepicker={()=>{ this.onPickerHide() }} onsetpickertime={(v)=>{ this.onSetPickerTime(v) }}/> 总时长: {this.state.totalDuration}小时 {this.state.validDates.length !== 0? 去除放假时间: 绿色方块为公出时间,长按即可去除放假时间 { if(!(dayjs(item.value).isSame(this.state.rangeStartVal) || dayjs(item.value).isSame(this.state.rangeEndVal))){ if(!(dayjs(item.value).isAfter(this.state.rangeStartVal) && dayjs(item.value).isBefore(this.state.rangeEndVal))){ return; } }else{ Taro.showToast({title:'开始结束时间不能取消',icon:'none'}) return } let index = this.state.validDates.findIndex(v=>{ let lv = dayjs(v.value).isSame(item.value); return lv }) const {start,end} = getUserWordTimes(); let totalDuration = getHours(dayjs().format('YYYY-MM-DD')+start,dayjs(dayjs().format('YYYY-MM-DD')+end)); //一天工作时长 if(index<0){ let arr = item.value.split('-'); this.state.validDates.push({value:arr.join('-')}) this.setState({ validDates:this.state.validDates, totalDuration: this.state.totalDuration + totalDuration }) }else{ this.state.validDates.splice(index,1) this.setState({ validDates:this.state.validDates, totalDuration: this.state.totalDuration - totalDuration }) } }} /> : null} 公出地点: {this.props.selectArrderLocation.name} 移动红标只需要拖动地图即可 公出事由: { this.setState({ reason:v }) }} maxLength={200} placeholder='请输入公出事由' /> 附件: this.imagePickerRef = ref} url='/api/admin/release/upload' onChange={this.onChange} /> { Taro.eventCenter.trigger('enterpriseBack') }}> 上一步 { if(this.state.loading){ return; } this.setState({ isInquiryOpened:true, inquiryTitle:'提醒', inquiryContent:'您确定要提交此申请吗?', inquiryFn:()=>{ this.onSubmit(); } }) }}> 提交申请 { this.setState({ isInquiryOpened:false, inquiryTitle:'', inquiryContent:'', }) }} onDetermine={()=>{ this.state.inquiryFn(); this.setState({ isInquiryOpened:false, inquiryTitle:'', inquiryContent:'', inquiryFn:()=>{} }) }} /> ) } } export default PublicContent;