import React, { Component } from "react"; import Taro from "@tarojs/taro"; import { Button, 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"; //提示弹窗 import UserQuery from "../../components/common/userquery"; //选择协单人弹窗 class PublicContent extends Component { constructor(props) { super(props); this.state = { rangeStartVal: "", rangeEndVal: "", rangeEndMinuteVal: "", rangeStartMinuteVal: "", reason: "", plan: "", expectedEffect: "", imgs: [], validDates: [], totalDuration: 0, loading: false, workTypeList: [], workType: 0, isPickerRender: false, coorderList: [], cList: [], popup: 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: "", plan: "", expectedEffect: "", 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.plan && this.props.enterpriseInfor.type != 2) { Taro.showToast({ title: "请输入公出计划", icon: "none" }); return; } if (!this.state.expectedEffect && this.props.enterpriseInfor.type != 2) { Taro.showToast({ title: "请输入预计效果", icon: "none" }); return; } if (this.state.totalDuration === 0) { Taro.showToast({ title: "请选择公出时间,目前设置公出时间不足0.5小时", icon: "none", }); return; } this.setState({ loading: true, }); let datas = { uid: this.props.enterpriseInfor.id, releaseStarts: this.state.rangeStartMinuteVal, releaseEnds: this.state.rangeEndMinuteVal, remarks: this.state.reason, // plan: this.state.plan, // expectedEffect: this.state.expectedEffect, 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, type: this.props.enterpriseInfor.type, validDate: JSON.stringify(this.state.validDates), assist: this.state.coorderList.length === 0 ? 0 : 1, assistAid: this.state.coorderList.length === 0 ? "" : this.state.coorderList.join(","), }; if (this.props.enterpriseInfor.type == 0) { datas = { ...datas, ...{ plan: this.state.plan, expectedEffect: this.state.expectedEffect, } }; } else if (this.props.enterpriseInfor.type == 2) { datas = datas; } else { datas = { ...datas, ...{ plan: this.state.plan, expectedEffect: this.state.expectedEffect, orderNo: this.props.enterpriseInfor.orderNo, } }; } addPublicRelease(datas) .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; if (a.hour() <= b.hour()) { num = b.diff(a, "day") + 1; } else { num = b.diff(a, "day") + 2; } let strAdd = data.startTime; for (let i = 0; i < num; i++) { let time = dayjs(strAdd).add(i, "days").format("YYYY-MM-DD"); arr.push({ value: time }); } } this.setState( { rangeEndVal: dayjs(data.endTime).format("YYYY-MM-DD"), rangeStartVal: dayjs(data.startTime).format("YYYY-MM-DD"), validDates: arr, }, () => { 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); } ); } // 新增技术协单 setList(list, arr) { this.setState({ cList: list, coorderList: arr }) } // 弹窗开关 popupClick() { this.setState({ popup: !this.state.popup }) } render() { const { cList, coorderList, popup } = this.state return ( <View className="publicContent"> <View className="formItem"> <View className="formName">公出企业:</View> <View className="formValue">{this.props.enterpriseInfor.name}</View> </View> <View className="formItem"> <View className="formName">公出类型:</View> <View className="formValue"> {this.props.enterpriseInfor.type == 0 ? "业务公出" : this.props.enterpriseInfor.type == 1 ? "技术公出" : this.props.enterpriseInfor.type == 2 ? "行政公出" : this.props.enterpriseInfor.type == 3 ? "技术协单" : ""} </View> </View> {this.props.enterpriseInfor.contractNo ? ( <View className="formItem"> <View className="formName">合同编号:</View> <View className="formValue"> {this.props.enterpriseInfor.contractNo} </View> </View> ) : ( "" )} <View className="formItem"> <View className="formName">作息时间类型:</View> <View className="formValue"> <picker onChange={(e) => { 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} > <view style={{ display: "flex", alignItems: "center" }}> {this.state.workTypeList[this.state.workType] ? this.state.workTypeList[this.state.workType].name : ""} <AtIcon value="chevron-right" size="20" color="#bbbbbb" /> </view> </picker> </View> </View> <View className="formItem"> <View className="formName">公出时间:</View> <View className="formValue"> <View className="time" onClick={() => { this.setState({ isPickerRender: true, }); }} > {this.state.rangeStartMinuteVal && this.state.rangeEndMinuteVal ? ( <View className="timeContent"> <View>开始时间:{this.state.rangeStartMinuteVal}</View> <View>结束时间:{this.state.rangeEndMinuteVal}</View> </View> ) : ( "请选择公出时间" )} </View> <timePicker config={{ endDate: true, column: "minute", dateLimit: false, // initStartTime: "2019-01-01 12:32:44", //默认开始时间 // initEndTime: "2019-12-01 12:32:44", //默认结束时间 limitStartTime: dayjs() .subtract(3, "year") .format("YYYY-MM-DD HH:mm:ss"), limitEndTime: dayjs() .add(3, "year") .format("YYYY-MM-DD HH:mm:ss"), }} isPartition pickerShow={this.state.isPickerRender} onconditionaljudgment={(v) => { 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); }} /> </View> </View> <View className="formItem"> <View className="formName">总时长:</View> <View className="formValue">{this.state.totalDuration}小时</View> </View> {this.state.validDates.length !== 0 ? ( <View className="formItem" style={{ display: "block", paddingTop: "15px" }} > <View className="formName"> <View>去除放假时间:</View> </View> <View className="tips"> 绿色方块为公出时间,长按即可去除放假时间 </View> <AtCalendar currentDate={this.state.rangeStartVal} minDate={this.state.rangeStartVal} maxDate={this.state.rangeEndVal} isSwiper={false} validDates={this.state.validDates} onDayLongClick={(item) => { 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, }); } }} /> </View> ) : null} <View className="formItem" style={{ paddingBottom: 0 }}> <View className="formName">公出地点:</View> <View className="formValue" onClick={this.selectArrder}> <Text className="formValueText"> {this.props.selectArrderLocation.name} </Text> <AtIcon value="chevron-right" size="30" color="#bbbbbb" /> </View> </View> <View className="tips"> 以地图为中心100米范围为可打卡区域,移动红标只需要拖动地图即可 </View> <View className="formItems" style={{ paddingBottom: 0, marginTop: 10 }}> <View className="formNames">技术协单: </View> <View className="formValues"> { cList.length == 0 ? <Text>无</Text> : cList.map((item, index) => <View className="fitems" key={index}> {item.name} <View className="fclose" onClick={() => { coorderList.includes(item.id) && ( cList.splice(coorderList.indexOf(item.id), 1), coorderList.splice(coorderList.indexOf(item.id), 1) ) this.setState({ cList, coorderList, }) }} ><AtIcon value="close-circle" size="15" color="#bbbbbb" /></View> </View> ) } {cList.length < 5 && <Button className="addbuttom" type='primary' onClick={this.popupClick.bind(this)}>新增技术协单</Button>} </View> </View> <View className="formItem" style={{ display: "block", paddingTop: "15px" }} > {/* 公出目标 */} <View className="formName"> <Text style={{ color: "red" }}>*公出目标:</Text> <View className="formValue" style={{ paddingTop: "10px", textAlign: "left" }} > <AtTextarea height={46} value={this.state.reason} onChange={(v) => { this.setState({ reason: v, }); }} maxLength={200} placeholder={ this.props.enterpriseInfor.type == 2 ? "详细说明本次公出的内容,预计完成的内容" : "本次公出目标,谈的思路与步骤?" } /> </View> </View> {/* 公出计划 */} {this.props.enterpriseInfor.type != 2 && ( <View className="formName"> <Text style={{ color: "red" }}>*公出计划:</Text> <View className="formValue" style={{ paddingTop: "10px", textAlign: "left" }} > <AtTextarea height={46} value={this.state.plan} onChange={(v) => { this.setState({ plan: v, }); }} maxLength={200} placeholder="本次公出准备工作" /> </View> </View> )} {/* 预计效果 */} {this.props.enterpriseInfor.type != 2 && ( <View className="formName"> <Text style={{ color: "red" }}>*预计效果:</Text> <View className="formValue" style={{ paddingTop: "10px", textAlign: "left" }} > <AtTextarea height={46} value={this.state.expectedEffect} onChange={(v) => { this.setState({ expectedEffect: v, }); }} maxLength={200} placeholder="预计本次公出效果" /> </View> </View> )} </View> {/* */} <View className="formItem" style={{ display: "block" }}> <View className="formName">附件:</View> <View className="formValue" style={{ paddingTop: "10px", textAlign: "left" }} > <ImagePicker showAddBtn ref={(ref) => (this.imagePickerRef = ref)} url="/api/admin/release/upload" onChange={this.onChange} /> </View> </View> <View className="operation"> <AtButton disabled={this.state.loading} type="secondary" circle onClick={() => { Taro.eventCenter.trigger("enterpriseBack"); }} > 上一步 </AtButton> <AtButton type="primary" loading={this.state.loading} circle onClick={() => { if (this.state.loading) { return; } this.setState({ isInquiryOpened: true, inquiryTitle: "提醒", inquiryContent: "您确定要提交此申请吗?", inquiryFn: () => { this.onSubmit(); }, }); }} > 提交申请 </AtButton> </View> <InquiryModal isOpened={this.state.isInquiryOpened} title={this.state.inquiryTitle} content={this.state.inquiryContent} onClose={() => { this.setState({ isInquiryOpened: false, inquiryTitle: "", inquiryContent: "", }); }} onDetermine={() => { this.state.inquiryFn(); this.setState({ isInquiryOpened: false, inquiryTitle: "", inquiryContent: "", inquiryFn: () => { }, }); }} /> {popup && <UserQuery isOpened={popup} onDesc={this.popupClick.bind(this)} cList={cList} coorderList={coorderList} setList={this.setList.bind(this)} /> } </View> ); } } export default PublicContent;