index.jsx 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
  1. import React, { Component } from 'react';
  2. import Taro from '@tarojs/taro';
  3. import { View, Picker, ScrollView, } from '@tarojs/components'
  4. import { AtTabs, AtTabsPane, AtIcon, } from 'taro-ui';
  5. import { getRecordList, } from '../../utils/servers/servers';
  6. import dayjs from 'dayjs';
  7. import { getAccountName, removeNull } from '../../utils/tools';
  8. import { accountLtate, } from '../../utils/tools/config'
  9. import ListBottomStart from "../../components/common/listBottomStart";
  10. import AuditModal from "../../components/common/auditModal";
  11. import './index.less';
  12. import 'taro-ui/dist/style/components/tabs.scss';
  13. import "taro-ui/dist/style/components/flex.scss";
  14. import "taro-ui/dist/style/components/action-sheet.scss";
  15. import "taro-ui/dist/style/components/icon.scss";
  16. import "taro-ui/dist/style/components/list.scss";
  17. import "taro-ui/dist/style/components/icon.scss";
  18. import "taro-ui/dist/style/components/modal.scss";
  19. class Examine extends Component {
  20. constructor(props) {
  21. super(props);
  22. this.state = {
  23. typeList: [
  24. { title: '未审核' },
  25. { title: '已审核' }],
  26. current: 0,
  27. starts: {},
  28. list: [],
  29. visible: false,
  30. }
  31. }
  32. componentDidShow() {
  33. this.setState({
  34. visible: false,
  35. })
  36. this.getPublicReleaseList();
  37. }
  38. async componentDidMount() {
  39. await this.getPublicReleaseList();
  40. }
  41. onPullDownRefresh() {
  42. this.getPublicReleaseList();
  43. }
  44. onReachBottom() {
  45. this.getPublicReleaseList(true);
  46. }
  47. onTabItemTap(obj) {
  48. if (obj.index === 1) {
  49. this.onTabTap();
  50. }
  51. }
  52. onPickerHide() {
  53. this.setState({
  54. isPickerRender: false,
  55. });
  56. }
  57. async onSetPickerTime(val) {
  58. let data = val.detail;
  59. await this.setState({
  60. rangeStartMinuteVal: dayjs(data.selectStartTime).format("YYYY-MM-DD"),
  61. rangeEndMinuteVal: dayjs(data.selectEndTime).format("YYYY-MM-DD")
  62. })
  63. await this.getMyList(1);
  64. }
  65. async onTabTap() {
  66. await this.getMyList(1);
  67. }
  68. async getPublicReleaseList(lv) {
  69. await this.getMyList(lv ? this.state.pageNo + 1 : 1);
  70. Taro.stopPullDownRefresh();
  71. }
  72. async getMyList(pageNo) {
  73. this.setState({
  74. listState: 'LOADING'
  75. })
  76. let data = {
  77. pageNo: pageNo,
  78. pageSize: 10,
  79. startTime: this.state.rangeStartMinuteVal || undefined,
  80. endTime: this.state.rangeEndMinuteVal || undefined,
  81. status: isNaN(parseInt(this.state.starts.id)) ? undefined : String(this.state.starts.id),
  82. examineStatus: this.state.current,
  83. processStatus: 1,
  84. }
  85. let msg = await getRecordList(removeNull(data));
  86. if (msg.error.length === 0) {
  87. if (msg.data.totalCount === 0) {
  88. this.setState({
  89. listState: 'NO_DATA'
  90. })
  91. } else if (msg.data.totalCount === this.state.list.length && pageNo !== 1) {
  92. Taro.showToast({ title: '没有更多数据了', icon: 'none' });
  93. this.setState({
  94. listState: 'NO_MORE_DATA'
  95. })
  96. } else {
  97. if (msg.data.totalCount === (pageNo === 1 ? msg.data.list : this.state.list.concat(msg.data.list)).length) {
  98. this.setState({
  99. listState: 'NO_MORE_DATA'
  100. })
  101. }
  102. }
  103. this.setState({
  104. list: pageNo === 1 ? msg.data.list : this.state.list.concat(msg.data.list),
  105. pageNo: msg.data.list.length === 0 ? this.state.pageNo : msg.data.pageNo
  106. })
  107. } else {
  108. Taro.showToast({ title: msg.error[0].message, icon: 'none' });
  109. this.setState({
  110. listState: msg.error[0].field === '403' ? 'NO_DATA' : 'RELOAD'
  111. })
  112. }
  113. Taro.stopPullDownRefresh();
  114. }
  115. onPageScroll(event) {
  116. let touchMove = event.scrollTop;
  117. if (touchMove >= 37) {
  118. this.setState({
  119. openSearch: true
  120. })
  121. } else {
  122. this.setState({
  123. openSearch: false
  124. })
  125. }
  126. }
  127. render() {
  128. const { list } = this.state
  129. return (
  130. <View className='indexPage' >
  131. <View className='searchContent'>
  132. <ScrollView className={this.state.openSearch ? 'searchBottomLOL' : ''} scrollX style={{ width: '100%' }}>
  133. <View className='searchBottom'>
  134. <View className='searchItem' style={{ paddingLeft: '5px' }}>
  135. <Picker
  136. value={this.state.starts.id}
  137. range={accountLtate} rangeKey='title' mode='selector'
  138. onChange={(e) => {
  139. this.setState({
  140. starts: accountLtate[e.detail.value],
  141. }, () => {
  142. this.getPublicReleaseList();
  143. })
  144. }}>
  145. {
  146. !this.state.starts.title ?
  147. <View className='shortValuecontent'>
  148. <View className='selectTitle'>状态</View>
  149. <View className='iconContent'><AtIcon value='chevron-down' size='10' color='#FFFFFF' /></View>
  150. </View> :
  151. <View className='shortValuecontent'>
  152. <View className='selectValue'>
  153. {this.state.starts.title}
  154. </View>
  155. <View className='iconContent' />
  156. </View>
  157. }
  158. </Picker>
  159. {
  160. this.state.starts.title &&
  161. <View className='searchSelectContent'>
  162. <View className='selectIcon'
  163. onClick={(e) => {
  164. e.stopPropagation();
  165. this.setState({
  166. starts: {}
  167. }, () => {
  168. this.getPublicReleaseList();
  169. })
  170. }}>
  171. <AtIcon value='close-circle' size='10' color='#FFFFFF' />
  172. </View>
  173. </View>
  174. }
  175. </View>
  176. <View className='searchItem' onClick={() => {
  177. this.setState({
  178. isPickerRender: true
  179. })
  180. }}>
  181. <View>
  182. {
  183. !this.state.rangeStartMinuteVal ?
  184. <View className='valuecontent'>
  185. <View className='selectTitle'>开始及结束时间</View>
  186. <View className='iconContent' ><AtIcon value='chevron-down' size='10' color='#FFFFFF' /></View>
  187. </View> :
  188. <View className='valuecontent'>
  189. <View className='selectValue' >
  190. {this.state.rangeStartMinuteVal + "~" + this.state.rangeEndMinuteVal}
  191. </View>
  192. <View className='iconContent' />
  193. </View>
  194. }
  195. </View>
  196. {
  197. this.state.rangeStartMinuteVal &&
  198. <View className='searchSelectContent'>
  199. <View className='selectIcon'
  200. onClick={(e) => {
  201. e.stopPropagation();
  202. this.setState({
  203. rangeStartMinuteVal: '',
  204. rangeEndMinuteVal: '',
  205. }, () => {
  206. this.getPublicReleaseList();
  207. })
  208. }}>
  209. <AtIcon value='close-circle' size='10' color='#FFFFFF' />
  210. </View>
  211. </View>
  212. }
  213. </View>
  214. </View>
  215. </ScrollView>
  216. </View>
  217. <AtTabs
  218. swipeable={false}
  219. current={this.state.current || 0}
  220. tabList={this.state.typeList}
  221. onClick={(current) => {
  222. this.setState({
  223. list: [],
  224. pageNo: 1,
  225. current,
  226. }, () => {
  227. this.getMyList();
  228. })
  229. }}>
  230. {
  231. this.state.typeList?.map((item, index) =>
  232. <AtTabsPane
  233. current={this.state.current}
  234. index={index}
  235. >
  236. <View className='list'>
  237. {
  238. list?.map((item) =>
  239. <View className='item' key={item.id}
  240. onClick={() => {
  241. Taro.navigateTo({
  242. url: '/pages/draftsdetail/index?id=' + item.id
  243. })
  244. }}
  245. >
  246. {item.status == 1 && <View className='lbt' onClick={e => { e.stopPropagation(); this.setState({ visible: true, id: item.id }) }}>查看审核详情</View>}
  247. <View className='line'>报销类型:{getAccountName(item.type, item.typeOther)}</View>
  248. <View className='line'>报销金额(元):{item.totalAmount}</View>
  249. <View className='line'>报销人:{item.aname}</View>
  250. <View className='line'>报销时间:{item.createTimeStr}</View>
  251. <View className='lines'
  252. style={{ color: accountLtate[item.status].color }}
  253. >{item.status == 1 && `[${item.examineName}]`}{accountLtate[item.status].title}</View>
  254. </View>
  255. )
  256. }
  257. <ListBottomStart
  258. state={this.state.listState}
  259. reload={() => {
  260. this.getPublicReleaseList(true)
  261. }}
  262. />
  263. </View>
  264. </AtTabsPane>
  265. )
  266. }
  267. </AtTabs>
  268. <timePicker
  269. config={{
  270. endDate: true,
  271. column: "day",
  272. dateLimit: false,
  273. limitStartTime: dayjs().subtract(3, 'year').format('YYYY-MM-DD '),
  274. limitEndTime: dayjs().add(3, 'year').format('YYYY-MM-DD ')
  275. }}
  276. isPartition
  277. pickerShow={this.state.isPickerRender}
  278. onconditionaljudgment={(v) => {
  279. }}
  280. onhidepicker={() => {
  281. this.onPickerHide()
  282. }}
  283. onsetpickertime={(v) => {
  284. this.onSetPickerTime(v)
  285. }}>
  286. </timePicker>
  287. {this.state.visible &&
  288. <AuditModal
  289. id={this.state.id}
  290. isOpened={this.state.visible}
  291. onClose={() => {
  292. this.setState({
  293. visible: false
  294. })
  295. }}
  296. />}
  297. </View >
  298. )
  299. }
  300. }
  301. export default Examine