index.jsx 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. import React,{Component} from "react";
  2. import { View,Image,Button } from '@tarojs/components'
  3. import Taro, { getCurrentInstance } from "@tarojs/taro";
  4. import {AtButton, AtIcon, AtTextarea} from 'taro-ui'
  5. import {examinePublicRelease,getReleasetDails,getListPublicReleaseLog} from '../../utils/servers/servers';
  6. import {resourceAddress} from '../../utils/config';
  7. import { AtModal, AtTimeline, AtModalContent, AtModalAction } from "taro-ui"
  8. import './index.less';
  9. import 'taro-ui/dist/style/components/icon.scss';
  10. import 'taro-ui/dist/style/components/textarea.scss'
  11. import 'taro-ui/dist/style/components/modal.scss';
  12. import 'taro-ui/dist/style/components/timeline.scss';
  13. import 'taro-ui/dist/style/components/icon.scss';
  14. import Rejected from '../../image/rejected.png';
  15. import Passed from '../../image/passed.png';
  16. import Reviewed from '../../image/reviewed.png';
  17. import ImagePicker from "../../components/common/imagePicker";
  18. class EgressDetails extends Component{
  19. $instance = getCurrentInstance()
  20. constructor(props) {
  21. super(props);
  22. this.state={
  23. dtails:{},
  24. opinion:'',
  25. publicReleaseLog:[]
  26. }
  27. this.examinePublicRelease= this.examinePublicRelease.bind(this);
  28. this.getReleasetDails= this.getReleasetDails.bind(this);
  29. this.getListPublicReleaseLog= this.getListPublicReleaseLog.bind(this);
  30. }
  31. componentDidShow() {
  32. this.getReleasetDails();
  33. }
  34. getReleasetDails(){
  35. getReleasetDails({
  36. id:21
  37. }).then(v=>{
  38. if(v.error.length === 0){
  39. let list = [];
  40. for(let i of v.data.annexUrl.split(',')){
  41. if(i){
  42. list.push({'url':resourceAddress + i})
  43. }
  44. }
  45. v.data.annexUrl = list;
  46. this.setState({
  47. dtails:v.data,
  48. })
  49. }else{
  50. Taro.showToast({title:v.error[0].message,icon:'none'})
  51. }
  52. }).catch(err=>{
  53. Taro.showToast({title:'系统错误,请稍后再试',icon:'none'});
  54. console.log(err)
  55. })
  56. }
  57. examinePublicRelease(status){
  58. if(!this.state.opinion){
  59. Taro.showToast({title:'请填写审批意见',icon:'none'})
  60. return;
  61. }
  62. examinePublicRelease({
  63. status,
  64. remarks:this.state.opinion,
  65. id:this.state.dtails.id
  66. }).then(v=>{
  67. if(v.error.length === 0){
  68. Taro.showToast({title:status===0?'驳回成功':'通过成功',icon:'none'});
  69. this.state.dtails.status=status;
  70. this.setState({
  71. dtails:this.state.dtails
  72. })
  73. }else{
  74. Taro.showToast({title:v.error[0].message,icon:'none'})
  75. }
  76. }).catch(()=>{
  77. Taro.showToast({title:'系统错误,请稍后再试',icon:'none'})
  78. })
  79. }
  80. getListPublicReleaseLog(){
  81. getListPublicReleaseLog({
  82. id:21
  83. }).then(v=>{
  84. if(v.error.length === 0){
  85. let arr = [];
  86. for (let i of v.data){
  87. arr.push({
  88. title:
  89. i.status === 0 ? '驳回' :
  90. i.status === 1 ? '发起' :
  91. i.status === 2 ? '通过' : '',
  92. content: ['审核员:'+i.aname,i.remarks ? '审核意见:'+i.remarks : null],
  93. color: i.status === 0 ? '#f31212' :
  94. i.status === 1 ? '#1d4fea' :
  95. i.status === 2 ? '#34de38' : ''
  96. })
  97. }
  98. this.setState({
  99. publicReleaseLog:arr,
  100. isOpened:true
  101. })
  102. }else{
  103. Taro.showToast({title:v.error[0].message,icon:'none'})
  104. }
  105. }).catch(err=>{
  106. Taro.showToast({title:'系统错误.请稍后重试',icon:'none'})
  107. console.log(err)
  108. })
  109. }
  110. render() {
  111. const {dtails} = this.state;
  112. return (
  113. <View className='egressDetails'>
  114. <View className='titleContent'>
  115. <View className='title'>{dtails.aname}提交的公出申请</View>
  116. <View className='address'>
  117. <AtIcon value='map-pin' size='15' color='#767272'/>
  118. 公出企业:{dtails.nickname}
  119. </View>
  120. <View className='state' style={{
  121. color:dtails.status === 0 ? '#f31212' :
  122. dtails.status === 1 ? '#1d4fea' :
  123. dtails.status === 2 ? '#34de38' : ''
  124. }}>
  125. {
  126. dtails.status === 0 ? '驳回' :
  127. dtails.status === 1 ? '发起' :
  128. dtails.status === 2 ? '通过' : ''
  129. }
  130. </View>
  131. <Image src={
  132. dtails.status === 0 ? Rejected :
  133. dtails.status === 1 ? Reviewed :
  134. dtails.status === 2 ? Passed : ''} className='startIcon'/>
  135. </View>
  136. <View className='valueContent'>
  137. {/*<View className='item'>*/}
  138. {/* <View className='title'>公出编号</View>*/}
  139. {/* <View className='value'>20212584646465495462</View>*/}
  140. {/*</View>*/}
  141. {/*<View className='item'>*/}
  142. {/* <View className='title'>企业类型</View>*/}
  143. {/* <View className='value'>稀有企业</View>*/}
  144. {/*</View>*/}
  145. {/*<View className='item'>*/}
  146. {/* <View className='title'>审核人</View>*/}
  147. {/* <View className='value'>营销经理</View>*/}
  148. {/*</View>*/}
  149. <View className='item'>
  150. <View className='title'>公出地点:</View>
  151. <View className='value'>{dtails.userName}</View>
  152. <View className='timeContent'>
  153. <View className='time'>
  154. <View className='num'>公出{dtails.duration}小时</View>
  155. <View className='journal'>明细</View>
  156. </View>
  157. <View className='timeAxis'>
  158. <View className='startTime'>
  159. <View className='circle'/>
  160. {dtails.releaseStarts}
  161. </View>
  162. <View className='axis'/>
  163. <View className='endTime'>
  164. <View className='circle'/>
  165. {dtails.releaseEnds}
  166. </View>
  167. </View>
  168. </View>
  169. </View>
  170. <View className='item'>
  171. <View className='title'>申请时间</View>
  172. <View className='value'>{dtails.createTimes}</View>
  173. </View>
  174. <View className='item'>
  175. <View className='title'>公出原因</View>
  176. <View className='value'>
  177. {dtails.remarks}
  178. </View>
  179. </View>
  180. <View className='item'>
  181. <View className='title'>附件</View>
  182. <View className='value'>
  183. {dtails.annexUrl && dtails.annexUrl.length > 0 ? <ImagePicker
  184. files={dtails.annexUrl}
  185. showAddBtn={false} /> : null}
  186. </View>
  187. </View>
  188. {
  189. this.$instance.router.params.type === '1' ?
  190. <View className='item'>
  191. <View className='title'>填写审批意见</View>
  192. <AtTextarea
  193. value={this.state.opinion}
  194. onChange={(value)=>{
  195. this.setState({
  196. opinion:value
  197. })
  198. }}
  199. maxLength={200}
  200. placeholder='请填写审批意见'
  201. />
  202. </View> : null
  203. }
  204. {
  205. this.$instance.router.params.type === '1' ?
  206. <View className='operation'>
  207. <AtButton type='secondary' circle loading={this.state.loading} onClick={()=>{
  208. this.examinePublicRelease(0);
  209. }}>
  210. 驳回
  211. </AtButton>
  212. <AtButton type='primary' loading={this.state.loading} circle onClick={()=>{
  213. this.examinePublicRelease(2);
  214. }}>
  215. 同意
  216. </AtButton>
  217. </View> : null
  218. }
  219. </View>
  220. <View className='valueContent history' onClick={this.getListPublicReleaseLog}>
  221. 查看TA的历史记录
  222. <AtIcon value='chevron-right' size='20' color='#767272'/>
  223. </View>
  224. <AtModal isOpened={this.state.isOpened}>
  225. <AtModalContent>
  226. <AtTimeline
  227. pending
  228. items={this.state.publicReleaseLog}
  229. />
  230. </AtModalContent>
  231. <AtModalAction>
  232. <Button onClick={()=>{
  233. this.setState({
  234. isOpened:false
  235. })
  236. }}>确定</Button>
  237. </AtModalAction>
  238. </AtModal>
  239. </View>
  240. )
  241. }
  242. }
  243. export default EgressDetails;