Przeglądaj źródła

增加详情加载样式

HW 3 lat temu
rodzic
commit
35a50679da
1 zmienionych plików z 164 dodań i 144 usunięć
  1. 164 144
      src/pages/egressDetails/index.jsx

+ 164 - 144
src/pages/egressDetails/index.jsx

@@ -6,6 +6,7 @@ import {examinePublicRelease,getReleasetDails,getListPublicReleaseLog} from '../
 import {resourceAddress} from '../../utils/config';
 import { AtModal, AtTimeline, AtModalContent, AtModalAction } from "taro-ui";
 import Modify from './modify';
+import Skeleton from 'taro-skeleton'
 import './index.less';
 
 import 'taro-ui/dist/style/components/icon.scss';
@@ -174,160 +175,179 @@ class EgressDetails extends Component{
     return (
       <View className='egressDetails'>
         <MessageNoticebar/>
-        <View className='titleContent'>
-          <View className='title'>{dtails.aname}提交的公出申请</View>
-          <View className='address'>
-            申请时间: {dtails.createTimes}
-          </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 className='titleContent' style={{
+          padding:Object.keys(dtails).length === 0? '0 30px' : '20px 30px'
+        }}>
+          {Object.keys(dtails).length === 0?
+            <Skeleton title row={3} animateName='elastic' avatarShape='square' loading/>:
+            <View>
+              <View className='title'>{dtails.aname}提交的公出申请</View>
+              <View className='address'>
+                申请时间: {dtails.createTimes}
+              </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>
-        <View className='valueContent'>
-          <View className='item'>
-            <View className='title'>
-              公出地点:
-              {dtails.permission === 0 && dtails.status === 0 ?
-                <View className='edit' onClick={()=>{
+        {Object.keys(dtails).length === 0?
+          <View style={{margin: '20px'}}>
+            <Skeleton title row={3} avatarShape='square' loading/>
+          </View>:
+          <View className='valueContent'>
+            <View className='item'>
+              <View className='title'>
+                公出地点:
+                {dtails.permission === 0 && dtails.status === 0 ?
+                  <View className='edit' onClick={()=>{
+                    this.setState({
+                      isModifyOpened:true,
+                      modifyType:2,
+                    })
+                  }}>
+                    <AtIcon value='edit' size='18' color='#3864ef'/>
+                  </View> : null}
+              </View>
+              <View className='value'>{dtails.userName}</View>
+              <View className='timeContent'>
+                <View className='time'>
+                  <View className='num'>公出{dtails.duration}小时</View>
+                  <View className='journal' onClick={(e)=>{
+                    e.stopPropagation();
+                    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 onClose={()=>{
+              this.setState({
+                isDetailedOpened:false
+              })
+            }} isOpened={this.state.isDetailedOpened}>
+             <AtModalContent>
+               {dtails.validDate ?  <AtCalendar
+                    isSwiper={false}
+                    validDates={JSON.parse(dtails.validDate)}
+                  /> : null
+               }
+              </AtModalContent>
+              <AtModalAction>
+                <Button onClick={()=>{
                   this.setState({
-                    isModifyOpened:true,
-                    modifyType:2,
+                    isDetailedOpened:false
                   })
-                }}>
-                  <AtIcon value='edit' size='18' color='#3864ef'/>
-                </View> : null}
-            </View>
-            <View className='value'>{dtails.userName}</View>
-            <View className='timeContent'>
-              <View className='time'>
-                <View className='num'>公出{dtails.duration}小时</View>
-                <View className='journal' onClick={(e)=>{
-                  e.stopPropagation();
+                }}>确定</Button>
+              </AtModalAction>
+            </AtModal>
+            <View className='item'>
+              <View className='title'>
+                公出企业
+                {dtails.permission === 0 && dtails.status === 0 ? <Image src={switchIocn} className='switchItem' onClick={()=>{
                   this.setState({
-                    isDetailedOpened:true
+                    isModifyOpened:true,
+                    modifyType:1,
                   })
-                }}>明细</View>
+                }}/> : null}
               </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 className='value'>
+                {dtails.nickname}
               </View>
             </View>
-          </View>
-          <AtModal onClose={()=>{
-            this.setState({
-              isDetailedOpened:false
-            })
-          }} 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'>
-              公出企业
-              {dtails.permission === 0 && dtails.status === 0 ? <Image src={switchIocn} className='switchItem' onClick={()=>{
-                this.setState({
-                  isModifyOpened:true,
-                  modifyType:1,
-                })
-              }}/> : null}
-            </View>
-            <View className='value'>
-              {dtails.nickname}
-            </View>
-          </View>
-          <View className='item'>
-            <View className='title'>公出原因</View>
-            <View className='value'>
-              {dtails.remarks}
-            </View>
-          </View>
-          {dtails.annexUrl && dtails.annexUrl.length > 0 ? <View className='item'>
-            <View className='title'>附件</View>
-            <View className='value'>
-              <ImagePicker
-                files={dtails.annexUrl}
-                showAddBtn={false} />
+            <View className='item'>
+              <View className='title'>公出原因</View>
+              <View className='value'>
+                {dtails.remarks}
+              </View>
             </View>
-          </View> : null}
-          {
-            dtails.permission === 1 && dtails.status === 1 ?
-              <View className='item'>
-                <View className='title'>填写审批意见</View>
-                <AtTextarea
-                  value={this.state.opinion}
-                  onChange={(value)=>{
-                    this.setState({
-                      opinion:value
-                    })
-                  }}
-                  maxLength={20}
-                  placeholder='请填写审批意见'
-                />
-              </View> : null
-          }
-          {
-            dtails.permission === 1 && dtails.status === 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={(e)=>{
-          e.stopPropagation();
-          this.getListPublicReleaseLog();
-        }}>
-          查看TA的历史记录
+            {dtails.annexUrl && dtails.annexUrl.length > 0 ? <View className='item'>
+              <View className='title'>附件</View>
+              <View className='value'>
+                <ImagePicker
+                  files={dtails.annexUrl}
+                  showAddBtn={false} />
+              </View>
+            </View> : null}
+            {
+              dtails.permission === 1 && dtails.status === 1 ?
+                <View className='item'>
+                  <View className='title'>填写审批意见</View>
+                  <AtTextarea
+                    value={this.state.opinion}
+                    onChange={(value)=>{
+                      this.setState({
+                        opinion:value
+                      })
+                    }}
+                    maxLength={20}
+                    placeholder='请填写审批意见'
+                  />
+                </View> : null
+            }
+            {
+              dtails.permission === 1 && dtails.status === 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>}
+        {Object.keys(dtails).length === 0?
+          <View style={{margin: '20px'}}>
+            <Skeleton title row={3} avatarShape='square' loading/>
+          </View>:
+          <View className='valueContent history' onClick={(e)=>{
+            e.stopPropagation();
+            this.getListPublicReleaseLog();
+          }}>
+            查看TA的历史记录
           <AtIcon value='chevron-right' size='20' color='#767272'/>
-        </View>
-        <View className='valueContent history'>
-          <View className='shareContent'>
-            <Button open-type='share' className='share'>
-              <Image src={Wx} className='shareIcon'/>
-            </Button>
-            <View className='shareTitle'>微信分享</View>
-          </View>
-        </View>
+        </View>}
+        {Object.keys(dtails).length === 0?
+          <View style={{margin: '20px'}}>
+            <Skeleton title row={3} avatarShape='square' loading/>
+          </View>:
+          <View className='valueContent history'>
+            <View className='shareContent'>
+              <Button open-type='share' className='share'>
+                <Image src={Wx} className='shareIcon'/>
+              </Button>
+              <View className='shareTitle'>微信分享</View>
+            </View>
+          </View>}
         <AtModal onClose={()=>{
           this.setState({
             isOpened:false