import React,{Component} from "react"; import { View,Image,Button } from '@tarojs/components' import Taro, { getCurrentInstance } from "@tarojs/taro"; import {AtButton, AtCalendar, AtIcon, AtTextarea} from 'taro-ui' import {examinePublicRelease,getReleasetDails,getListPublicReleaseLog} from '../../utils/servers/servers'; import {resourceAddress} from '../../utils/config'; import { AtModal, AtTimeline, AtModalContent, AtModalAction } from "taro-ui"; import Modify from './modify'; import './index.less'; import 'taro-ui/dist/style/components/icon.scss'; import 'taro-ui/dist/style/components/textarea.scss' import 'taro-ui/dist/style/components/modal.scss'; import 'taro-ui/dist/style/components/timeline.scss'; import 'taro-ui/dist/style/components/icon.scss'; import 'taro-ui/dist/style/components/calendar.scss'; import Rejected from '../../image/rejected.png'; import Passed from '../../image/passed.png'; import Reviewed from '../../image/reviewed.png'; import ImagePicker from "../../components/common/imagePicker"; import switchIocn from '../../image/switch.png'; class EgressDetails extends Component{ $instance = getCurrentInstance() constructor(props) { super(props); this.state={ dtails:{}, opinion:'', publicReleaseLog:[], isDetailedOpened:false, isOpened:false, isModifyOpened:false, modifyType:0, selectArrderLocation:{} } this.examinePublicRelease= this.examinePublicRelease.bind(this); this.getReleasetDails= this.getReleasetDails.bind(this); this.getListPublicReleaseLog= this.getListPublicReleaseLog.bind(this); } componentDidMount() { this.getReleasetDails(); } componentDidShow() { //获取地区选定数据 const chooseLocation = requirePlugin('chooseLocation'); const location = chooseLocation.getLocation(); if(location){ this.setState({ selectArrderLocation: location }) } } getReleasetDails(){ getReleasetDails({ id:this.$instance.router.params.id }).then(v=>{ if(v.error.length === 0){ let list = []; for(let i of v.data.annexUrl.split(',')){ if(i){ list.push({'url':resourceAddress + i}) } } v.data.annexUrl = list; this.setState({ dtails:v.data, selectArrderLocation:{ longitude:parseFloat(v.data.longitude), latitude:parseFloat(v.data.latitude), name:v.data.userName } }) }else{ Taro.showToast({title:v.error[0].message,icon:'none'}) } }).catch(err=>{ Taro.showToast({title:'系统错误,请稍后再试',icon:'none'}); console.log(err) }) } examinePublicRelease(status){ if(!this.state.opinion){ Taro.showToast({title:'请填写审批意见',icon:'none'}) return; } examinePublicRelease({ status, remarks:this.state.opinion, id:this.state.dtails.id }).then(v=>{ if(v.error.length === 0){ Taro.showToast({title:status===0?'驳回成功':'通过成功',icon:'none'}); this.state.dtails.status=status; this.setState({ dtails:this.state.dtails }) }else{ Taro.showToast({title:v.error[0].message,icon:'none'}) } }).catch(()=>{ Taro.showToast({title:'系统错误,请稍后再试',icon:'none'}) }) } getListPublicReleaseLog(){ getListPublicReleaseLog({ id:this.$instance.router.params.id }).then(v=>{ if(v.error.length === 0){ let arr = []; for (let i of v.data){ arr.push({ title: i.status === 0 ? '驳回' : i.status === 1 ? '审核中' : i.status === 2 ? '通过' : '', content: ['审核员:'+i.aname,i.remarks ? '审核意见:'+i.remarks : null], color: i.status === 0 ? '#f31212' : i.status === 1 ? '#1d4fea' : i.status === 2 ? '#34de38' : '' }) } this.setState({ publicReleaseLog:arr, isOpened:true }) }else{ Taro.showToast({title:v.error[0].message,icon:'none'}) } }).catch(err=>{ Taro.showToast({title:'系统错误.请稍后重试',icon:'none'}) console.log(err) }) } render() { const {dtails} = this.state; return ( <View className='egressDetails'> <View className='titleContent'> <View className='title'>{dtails.aname}提交的公出申请</View> <View className='address'> {/*<AtIcon value='map-pin' size='15' color='#767272'/>*/} 公出企业: {dtails.nickname} {this.$instance.router.params.type === '0' && dtails.status === 0 ? <Image src={switchIocn} className='switchItem' onClick={()=>{ this.setState({ isModifyOpened:true, modifyType:1, }) }}/> : null} </View> <View className='state' style={{ color:dtails.status === 0 ? '#f31212' : dtails.status === 1 ? '#1d4fea' : dtails.status === 2 ? '#34de38' : '' }}> { dtails.status === 0 ? '驳回' : dtails.status === 1 ? '审核中' : dtails.status === 2 ? '通过' : '' } </View> <Image src={ dtails.status === 0 ? Rejected : dtails.status === 1 ? Reviewed : dtails.status === 2 ? Passed : ''} className='startIcon'/> </View> <View className='valueContent'> {/*<View className='item'>*/} {/* <View className='title'>公出编号</View>*/} {/* <View className='value'>20212584646465495462</View>*/} {/*</View>*/} {/*<View className='item'>*/} {/* <View className='title'>企业类型</View>*/} {/* <View className='value'>稀有企业</View>*/} {/*</View>*/} {/*<View className='item'>*/} {/* <View className='title'>审核人</View>*/} {/* <View className='value'>营销经理</View>*/} {/*</View>*/} <View className='item'> <View className='title'> 公出地点: {this.$instance.router.params.type === '0' && dtails.status === 0 ? <AtIcon value='edit' size='18' color='#3864ef' onClick={()=>{ this.setState({ isModifyOpened:true, modifyType:2, }) }}/> : null} </View> <View className='value'>{dtails.userName}</View> <View className='timeContent'> <View className='time'> <View className='num'>公出{dtails.duration}小时</View> <View className='journal' onClick={()=>{ this.setState({ isDetailedOpened:true }) }}>明细</View> </View> <View className='timeAxis'> <View className='startTime'> <View className='circle'/> {dtails.releaseStarts} </View> <View className='axis'/> <View className='endTime'> <View className='circle'/> {dtails.releaseEnds} </View> </View> </View> </View> <AtModal isOpened={this.state.isDetailedOpened}> <AtModalContent> {dtails.validDate ? <AtCalendar isSwiper={false} validDates={JSON.parse(dtails.validDate)} /> : null } </AtModalContent> <AtModalAction> <Button onClick={()=>{ this.setState({ isDetailedOpened:false }) }}>确定</Button> </AtModalAction> </AtModal> <View className='item'> <View className='title'> 申请时间 </View> <View className='value'>{dtails.createTimes}</View> </View> <View className='item'> <View className='title'>公出原因</View> <View className='value'> {dtails.remarks} </View> </View> <View className='item'> <View className='title'>附件</View> <View className='value'> {dtails.annexUrl && dtails.annexUrl.length > 0 ? <ImagePicker files={dtails.annexUrl} showAddBtn={false} /> : null} </View> </View> { this.$instance.router.params.type === '1' ? <View className='item'> <View className='title'>填写审批意见</View> <AtTextarea value={this.state.opinion} onChange={(value)=>{ this.setState({ opinion:value }) }} maxLength={200} placeholder='请填写审批意见' /> </View> : null } { this.$instance.router.params.type === '1' ? <View className='operation'> <AtButton type='secondary' circle loading={this.state.loading} onClick={()=>{ this.examinePublicRelease(0); }}> 驳回 </AtButton> <AtButton type='primary' loading={this.state.loading} circle onClick={()=>{ this.examinePublicRelease(2); }}> 同意 </AtButton> </View> : null } </View> <View className='valueContent history' onClick={this.getListPublicReleaseLog}> 查看TA的历史记录 <AtIcon value='chevron-right' size='20' color='#767272'/> </View> <AtModal isOpened={this.state.isOpened}> <AtModalContent> <AtTimeline pending items={this.state.publicReleaseLog} /> </AtModalContent> <AtModalAction> <Button onClick={()=>{ this.setState({ isOpened:false }) }}>确定</Button> </AtModalAction> </AtModal> <Modify dtails={dtails} locationInfor={this.state.selectArrderLocation} id={this.$instance.router.params.id} isOpened={this.state.isModifyOpened} modifyType={this.state.modifyType} onClose={()=>{ this.setState({ isModifyOpened:false, dtails:{} },()=>{ this.getReleasetDails(); }) }}/> </View> ) } } export default EgressDetails;