index.jsx 9.6 KB

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