index.jsx 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471
  1. import React, { Component } from 'react';
  2. import Taro from '@tarojs/taro';
  3. import { View, Picker, ScrollView, Button } from '@tarojs/components'
  4. import { getPublicReleaseList, techReject } from '../../utils/servers/servers';
  5. import dayjs from 'dayjs';
  6. import {
  7. AtSearchBar,
  8. AtTabs,
  9. AtTabsPane,
  10. AtIcon,
  11. AtModal,
  12. AtModalContent,
  13. AtModalAction,
  14. AtTextarea
  15. } from 'taro-ui';
  16. import { clockState } from '../../utils/tools/config';
  17. import './index.less';
  18. import 'taro-ui/dist/style/components/tabs.scss';
  19. import "taro-ui/dist/style/components/flex.scss";
  20. import "taro-ui/dist/style/components/action-sheet.scss";
  21. import "taro-ui/dist/style/components/icon.scss";
  22. import "taro-ui/dist/style/components/list.scss";
  23. import "taro-ui/dist/style/components/icon.scss";
  24. import "taro-ui/dist/style/components/modal.scss";
  25. import MyList from '../examine/myList';
  26. import MessageNoticebar from "../../components/common/messageNoticebar";
  27. class Examine extends Component {
  28. constructor(props) {
  29. super(props);
  30. this.state = {
  31. typeList: [
  32. { title: '我的公出' },
  33. { title: '我的协单' }],
  34. current: 0,
  35. isPickerRender: false,
  36. validDates: '',
  37. list: [],
  38. pageNo: 1,
  39. listState: 'LOADING',
  40. starts: {},
  41. clockInStarts: '',
  42. rangeEndVal: '',
  43. rangeStartVal: '',
  44. rangeEndMinuteVal: '',
  45. rangeStartMinuteVal: '',
  46. id: "",
  47. rmk: "",
  48. isOpen: false,
  49. }
  50. this.getPublicReleaseList = this.getPublicReleaseList.bind(this);
  51. this.getMyList = this.getMyList.bind(this);
  52. this.onSetPickerTime = this.onSetPickerTime.bind(this);
  53. this.onPickerHide = this.onPickerHide.bind(this)
  54. }
  55. componentDidShow() {
  56. Taro.eventCenter.on('listOperation', (data) => {
  57. if (!isNaN(parseInt(data.index))) {
  58. let arr = this.state.list.concat([]);
  59. arr[data.index] = {
  60. ...arr[data.index],
  61. ...data
  62. }
  63. this.setState({
  64. list: arr
  65. })
  66. }
  67. })
  68. }
  69. async componentDidMount() {
  70. await this.getPublicReleaseList();
  71. }
  72. onPullDownRefresh() {
  73. this.getPublicReleaseList();
  74. }
  75. onReachBottom() {
  76. this.getPublicReleaseList(true);
  77. }
  78. onTabItemTap(obj) {
  79. if (obj.index === 1) {
  80. this.onTabTap();
  81. }
  82. }
  83. onPickerHide() {
  84. this.setState({
  85. isPickerRender: false,
  86. });
  87. }
  88. async onSetPickerTime(val) {
  89. let data = val.detail;
  90. await this.setState({
  91. rangeStartMinuteVal: dayjs(data.selectStartTime).format("YYYY-MM-DD"),
  92. rangeEndMinuteVal: dayjs(data.selectEndTime).format("YYYY-MM-DD")
  93. })
  94. await this.getMyList(1);
  95. }
  96. async onTabTap() {
  97. await this.getMyList(1);
  98. }
  99. async getPublicReleaseList(lv) {
  100. await this.getMyList(lv ? this.state.pageNo + 1 : 1);
  101. Taro.stopPullDownRefresh();
  102. }
  103. async getMyList(pageNo) {
  104. this.setState({
  105. listState: 'LOADING'
  106. })
  107. let data = {
  108. pageNo: pageNo,
  109. pageSize: 10,
  110. type: '0',
  111. assist: this.state.current === 0 ? 0 : 2,
  112. releaseStarts: this.state.rangeStartMinuteVal || undefined,
  113. releaseEnds: this.state.rangeEndMinuteVal || undefined,
  114. status: isNaN(parseInt(this.state.starts.id)) ? undefined : String(this.state.starts.id),
  115. clockIn: this.state.clockInStarts || undefined,
  116. userName: this.state.searchValue || undefined,
  117. }
  118. for (let i in data) {
  119. if (!data[i]) {
  120. delete data[i]
  121. }
  122. }
  123. let msg = await getPublicReleaseList(data);
  124. if (msg.error.length === 0) {
  125. if (msg.data.totalCount === 0) {
  126. this.setState({
  127. listState: 'NO_DATA'
  128. })
  129. } else if (msg.data.totalCount === this.state.list.length && pageNo !== 1) {
  130. // 防止提示挡住驳回弹窗
  131. !this.state.isOpen && Taro.showToast({ title: '没有更多数据了', icon: 'none' });
  132. this.setState({
  133. listState: 'NO_MORE_DATA'
  134. })
  135. } else {
  136. if (msg.data.totalCount === (pageNo === 1 ? msg.data.list : this.state.list.concat(msg.data.list)).length) {
  137. this.setState({
  138. listState: 'NO_MORE_DATA'
  139. })
  140. }
  141. }
  142. this.setState({
  143. list: pageNo === 1 ? msg.data.list : this.state.list.concat(msg.data.list),
  144. pageNo: msg.data.list.length === 0 ? this.state.pageNo : msg.data.pageNo
  145. })
  146. } else {
  147. Taro.showToast({ title: msg.error[0].message, icon: 'none' });
  148. this.setState({
  149. listState: msg.error[0].field === '403' ? 'NO_DATA' : 'RELOAD'
  150. })
  151. }
  152. Taro.stopPullDownRefresh();
  153. }
  154. onPageScroll(event) {
  155. let touchMove = event.scrollTop;
  156. if (touchMove >= 37) {
  157. this.setState({
  158. openSearch: true
  159. })
  160. } else {
  161. this.setState({
  162. openSearch: false
  163. })
  164. }
  165. }
  166. submit() {
  167. if (!this.state.rmk) {
  168. Taro.showToast({ title: '请填写备注!', icon: 'none' });
  169. return
  170. }
  171. Taro.showLoading({ title: '正在提交...' });
  172. techReject({
  173. id: this.state.id,
  174. remarks: this.state.rmk,
  175. }).then(v => {
  176. Taro.hideLoading()
  177. if (v.error.length === 0) {
  178. Taro.showToast({ title: '提交成功', icon: 'none' });
  179. this.getPublicReleaseList();
  180. this.setState({
  181. isOpen: false,
  182. rmk: "",
  183. })
  184. } else {
  185. Taro.showToast({ title: v.error[0].message, icon: 'none' })
  186. }
  187. }).catch(() => {
  188. Taro.hideLoading()
  189. Taro.showToast({
  190. title: '系统错误,请稍后再试',
  191. icon: 'none'
  192. })
  193. })
  194. }
  195. render() {
  196. return (
  197. <View className='indexPage' >
  198. <MessageNoticebar />
  199. <View className='searchContent'>
  200. <View className='searchTop'>
  201. <AtSearchBar
  202. showActionButton
  203. placeholder='请输入企业/渠道'
  204. value={this.state.searchValue}
  205. onActionClick={() => {
  206. this.getPublicReleaseList();
  207. }}
  208. onChange={(value) => {
  209. this.setState({
  210. searchValue: value
  211. })
  212. }}
  213. onClear={() => {
  214. this.setState({
  215. searchValue: ''
  216. })
  217. }}
  218. />
  219. </View>
  220. <ScrollView className={this.state.openSearch ? 'searchBottomLOL' : ''} scrollX style={{ width: '100%' }}>
  221. <View className='searchBottom'>
  222. <View className='searchItem' style={{ paddingLeft: '5px' }}>
  223. <Picker
  224. value={this.state.starts.id}
  225. range={clockState} rangeKey='title' mode='selector'
  226. onChange={(e) => {
  227. this.setState({
  228. starts: clockState[e.detail.value],
  229. }, () => {
  230. this.getPublicReleaseList();
  231. })
  232. }}>
  233. {
  234. !this.state.starts.title ?
  235. <View className='shortValuecontent'>
  236. <View className='selectTitle'>审核状态</View>
  237. <View className='iconContent'><AtIcon value='chevron-down' size='10' color='#FFFFFF' /></View>
  238. </View> :
  239. <View className='shortValuecontent'>
  240. <View className='selectValue'>
  241. {this.state.starts.title}
  242. </View>
  243. <View className='iconContent' />
  244. </View>
  245. }
  246. </Picker>
  247. {
  248. this.state.starts.title &&
  249. <View className='searchSelectContent'>
  250. <View className='selectIcon'
  251. onClick={(e) => {
  252. e.stopPropagation();
  253. this.setState({
  254. starts: {}
  255. }, () => {
  256. this.getPublicReleaseList();
  257. })
  258. }}>
  259. <AtIcon value='close-circle' size='10' color='#FFFFFF' />
  260. </View>
  261. </View>
  262. }
  263. </View>
  264. <View className='searchItem' >
  265. <Picker
  266. value={this.state.clockInStarts}
  267. range={['未打卡', '已打卡', '异常打卡']}
  268. mode='selector'
  269. onChange={(e) => {
  270. this.setState({
  271. clockInStarts: String(e.detail.value)
  272. }, () => {
  273. this.getPublicReleaseList();
  274. })
  275. }}>
  276. {
  277. !this.state.clockInStarts ?
  278. <View className='shortValuecontent'>
  279. <View className='selectTitle'>打卡状态</View>
  280. <View className='iconContent'><AtIcon value='chevron-down' size='10' color='#FFFFFF' /></View>
  281. </View> :
  282. <View className='shortValuecontent'>
  283. <View className='selectValue'>
  284. {
  285. this.state.clockInStarts === '2'
  286. ? '异常打卡' : this.state.clockInStarts === '1'
  287. ? '已打卡' : this.state.clockInStarts === '0'
  288. ? '未打卡' : ''
  289. }
  290. </View>
  291. <View className='iconContent' />
  292. </View>
  293. }
  294. </Picker>
  295. {
  296. this.state.clockInStarts ?
  297. <View className='searchSelectContent'>
  298. <View className='selectIcon'
  299. onClick={(e) => {
  300. e.stopPropagation();
  301. this.setState({
  302. clockInStarts: '',
  303. }, () => {
  304. this.getPublicReleaseList();
  305. })
  306. }}>
  307. <AtIcon value='close-circle' size='10' color='#FFFFFF' />
  308. </View>
  309. </View> : null
  310. }
  311. </View>
  312. {/* */}
  313. {/* 多选时间框 */}
  314. <View className='searchItem' onClick={() => {
  315. this.setState({
  316. isPickerRender: true
  317. })
  318. }}>
  319. <View>
  320. {
  321. !this.state.rangeStartMinuteVal ?
  322. <View className='valuecontent' style={{ width: '200px' }}>
  323. <View className='selectTitle' style={{ paddingLeft: '50px' }}>开始及结束时间</View>
  324. <View className='iconContent' style={{ paddingLeft: '20px' }}><AtIcon value='chevron-down' size='10' color='#FFFFFF' /></View>
  325. </View> :
  326. <View className='valuecontent' style={{ width: '200px' }}>
  327. <View className='selectValue' >
  328. {this.state.rangeStartMinuteVal + "~" + this.state.rangeEndMinuteVal}
  329. </View>
  330. <View className='iconContent' />
  331. </View>
  332. }
  333. </View>
  334. {
  335. this.state.rangeStartMinuteVal &&
  336. <View className='searchSelectContent'>
  337. <View className='selectIcon'
  338. onClick={(e) => {
  339. e.stopPropagation();
  340. this.setState({
  341. rangeStartMinuteVal: '',
  342. rangeEndMinuteVal: '',
  343. }, () => {
  344. this.getPublicReleaseList();
  345. })
  346. }}>
  347. <AtIcon value='close-circle' size='10' color='#FFFFFF' />
  348. </View>
  349. </View>
  350. }
  351. </View>
  352. </View>
  353. </ScrollView>
  354. </View>
  355. <AtTabs
  356. swipeable={false}
  357. current={this.state.current || 0}
  358. tabList={this.state.typeList}
  359. onClick={(current) => {
  360. this.setState({
  361. list: [],
  362. pageNo: 1,
  363. current,
  364. }, () => {
  365. this.getPublicReleaseList();
  366. })
  367. }}>
  368. {
  369. this.state.typeList?.map((item, index) =>
  370. <AtTabsPane
  371. current={this.state.current}
  372. index={index}
  373. >
  374. <MyList
  375. type={0}
  376. title={item.title}
  377. typelist={this.state.typeList}
  378. seeView={this.state.current}
  379. list={this.state.list}
  380. listState={this.state.listState}
  381. onRefresh={() => {
  382. this.getPublicReleaseList(true);
  383. }}
  384. opens={e => {
  385. this.setState({
  386. id: e,
  387. isOpen: true,
  388. })
  389. }}
  390. />
  391. </AtTabsPane>
  392. )
  393. }
  394. </AtTabs>
  395. <timePicker
  396. config={{
  397. endDate: true,
  398. column: "minute",
  399. dateLimit: false,
  400. limitStartTime: dayjs().subtract(3, 'year').format('YYYY-MM-DD '),
  401. limitEndTime: dayjs().add(3, 'year').format('YYYY-MM-DD ')
  402. }}
  403. isPartition
  404. pickerShow={this.state.isPickerRender}
  405. onconditionaljudgment={(v) => {
  406. // let a = dayjs(dayjs(v.detail.endTime).second(0).format('YYYY-MM-DD'));
  407. // let b = dayjs(dayjs().second(0).format('YYYY-MM-DD'))
  408. // if(a.isBefore(b)){
  409. // Taro.showToast({
  410. // title:'结束时间不能小于当前时间',
  411. // icon:'none'
  412. // })
  413. // v.detail.setLv(false);
  414. // }
  415. }}
  416. onhidepicker={() => {
  417. this.onPickerHide()
  418. }}
  419. onsetpickertime={(v) => {
  420. this.onSetPickerTime(v)
  421. }}>
  422. </timePicker>
  423. {/* 驳回协单 */}
  424. {
  425. this.state.isOpen &&
  426. <AtModal
  427. isOpened={this.state.isOpen}
  428. >
  429. <AtModalContent>
  430. <AtTextarea
  431. value={this.state.rmk}
  432. onChange={e => {
  433. this.setState({ rmk: e })
  434. }}
  435. maxLength={200}
  436. placeholder='请填写备注~'
  437. />
  438. </AtModalContent>
  439. <AtModalAction>
  440. <Button type='secondary' onClick={() => { this.setState({ isOpen: false }) }}>取消</Button>
  441. <Button type='primary' onClick={this.submit.bind(this)}>提交</Button>
  442. </AtModalAction>
  443. </AtModal>
  444. }
  445. </View>
  446. )
  447. }
  448. }
  449. export default Examine