index.jsx 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472
  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 MyList from './myList';
  25. import MessageNoticebar from "../../components/common/messageNoticebar";
  26. class Examine extends Component {
  27. constructor(props) {
  28. super(props);
  29. this.state = {
  30. typeList: [
  31. { title: '审核', type: 1 },
  32. { title: '查看公出', type: 2 },
  33. { title: '查看协单', type: 3 }],
  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. const { current } = this.state
  105. this.setState({
  106. listState: 'LOADING'
  107. })
  108. let data = {
  109. pageNo: pageNo,
  110. pageSize: 10,
  111. type: current === 0
  112. ? "1" : current === 1
  113. ? "2" : current === 2 && "3",
  114. releaseStarts: this.state.rangeStartMinuteVal || undefined,
  115. releaseEnds: this.state.rangeEndMinuteVal || undefined,
  116. status: isNaN(parseInt(this.state.starts.id)) ? undefined : String(this.state.starts.id),
  117. clockIn: this.state.clockInStarts || undefined,
  118. userName: this.state.searchValue || undefined,
  119. }
  120. for (let i in data) {
  121. if (!data[i]) {
  122. delete data[i]
  123. }
  124. }
  125. let msg = await getPublicReleaseList(data);
  126. if (msg.error.length === 0) {
  127. if (msg.data.totalCount === 0) {
  128. this.setState({
  129. listState: 'NO_DATA'
  130. })
  131. } else if (msg.data.totalCount === this.state.list.length && pageNo !== 1) {
  132. !this.state.isOpen && Taro.showToast({ title: '没有更多数据了', icon: 'none' });
  133. this.setState({
  134. listState: 'NO_MORE_DATA'
  135. })
  136. } else {
  137. if (msg.data.totalCount === (pageNo === 1 ? msg.data.list : this.state.list.concat(msg.data.list)).length) {
  138. this.setState({
  139. listState: 'NO_MORE_DATA'
  140. })
  141. }
  142. }
  143. this.setState({
  144. list: pageNo === 1 ? msg.data.list : this.state.list.concat(msg.data.list),
  145. pageNo: msg.data.list.length === 0 ? this.state.pageNo : msg.data.pageNo
  146. })
  147. } else {
  148. Taro.showToast({ title: msg.error[0].message, icon: 'none' });
  149. this.setState({
  150. listState: msg.error[0].field === '403' ? 'NO_DATA' : 'RELOAD'
  151. })
  152. }
  153. Taro.stopPullDownRefresh();
  154. }
  155. onPageScroll(event) {
  156. let touchMove = event.scrollTop;
  157. if (touchMove >= 37) {
  158. this.setState({
  159. openSearch: true
  160. })
  161. } else {
  162. this.setState({
  163. openSearch: false
  164. })
  165. }
  166. }
  167. submit() {
  168. if (!this.state.rmk) {
  169. Taro.showToast({ title: '请填写备注!', icon: 'none' });
  170. return
  171. }
  172. Taro.showLoading({ title: '正在提交...' });
  173. techReject({
  174. id: this.state.id,
  175. remarks: this.state.rmk,
  176. }).then(v => {
  177. Taro.hideLoading()
  178. if (v.error.length === 0) {
  179. Taro.showToast({ title: '提交成功', icon: 'none' });
  180. this.getPublicReleaseList();
  181. this.setState({
  182. isOpen: false,
  183. rmk: "",
  184. })
  185. } else {
  186. Taro.showToast({ title: v.error[0].message, icon: 'none' })
  187. }
  188. }).catch(() => {
  189. Taro.hideLoading()
  190. Taro.showToast({
  191. title: '系统错误,请稍后再试',
  192. icon: 'none'
  193. })
  194. })
  195. }
  196. render() {
  197. return (
  198. <View className='indexPage' >
  199. <MessageNoticebar />
  200. <View className='searchContent'>
  201. <View className='searchTop'>
  202. <AtSearchBar
  203. showActionButton
  204. placeholder='请输入企业/渠道'
  205. value={this.state.searchValue}
  206. onActionClick={() => {
  207. this.getPublicReleaseList();
  208. }}
  209. onChange={(value) => {
  210. this.setState({
  211. searchValue: value
  212. })
  213. }}
  214. onClear={() => {
  215. this.setState({
  216. searchValue: ''
  217. })
  218. }}
  219. />
  220. </View>
  221. <ScrollView className={this.state.openSearch ? 'searchBottomLOL' : ''} scrollX style={{ width: '100%' }}>
  222. <View className='searchBottom'>
  223. <View className='searchItem' style={{ paddingLeft: '5px' }}>
  224. <Picker
  225. value={this.state.starts.id}
  226. range={clockState} rangeKey='title' mode='selector'
  227. onChange={(e) => {
  228. this.setState({
  229. starts: clockState[e.detail.value],
  230. }, () => {
  231. this.getPublicReleaseList();
  232. })
  233. }}>
  234. {
  235. !this.state.starts.title ?
  236. <View className='shortValuecontent'>
  237. <View className='selectTitle'>审核状态</View>
  238. <View className='iconContent'><AtIcon value='chevron-down' size='10' color='#FFFFFF' /></View>
  239. </View> :
  240. <View className='shortValuecontent'>
  241. <View className='selectValue'>
  242. {this.state.starts.title}
  243. </View>
  244. <View className='iconContent' />
  245. </View>
  246. }
  247. </Picker>
  248. {
  249. this.state.starts.title &&
  250. <View className='searchSelectContent'>
  251. <View className='selectIcon'
  252. onClick={(e) => {
  253. e.stopPropagation();
  254. this.setState({
  255. starts: {}
  256. }, () => {
  257. this.getPublicReleaseList();
  258. })
  259. }}>
  260. <AtIcon value='close-circle' size='10' color='#FFFFFF' />
  261. </View>
  262. </View>
  263. }
  264. </View>
  265. <View className='searchItem' >
  266. <Picker
  267. value={this.state.clockInStarts}
  268. range={['未打卡', '已打卡', '异常打卡']}
  269. mode='selector'
  270. onChange={(e) => {
  271. this.setState({
  272. clockInStarts: String(e.detail.value)
  273. }, () => {
  274. this.getPublicReleaseList();
  275. })
  276. }}>
  277. {
  278. !this.state.clockInStarts ?
  279. <View className='shortValuecontent'>
  280. <View className='selectTitle'>打卡状态</View>
  281. <View className='iconContent'><AtIcon value='chevron-down' size='10' color='#FFFFFF' /></View>
  282. </View> :
  283. <View className='shortValuecontent'>
  284. <View className='selectValue'>
  285. {
  286. this.state.clockInStarts === '2'
  287. ? '异常打卡' : this.state.clockInStarts === '1'
  288. ? '已打卡' : this.state.clockInStarts === '0'
  289. ? '未打卡' : ''
  290. }
  291. </View>
  292. <View className='iconContent' />
  293. </View>
  294. }
  295. </Picker>
  296. {
  297. this.state.clockInStarts ?
  298. <View className='searchSelectContent'>
  299. <View className='selectIcon'
  300. onClick={(e) => {
  301. e.stopPropagation();
  302. this.setState({
  303. clockInStarts: '',
  304. }, () => {
  305. this.getPublicReleaseList();
  306. })
  307. }}>
  308. <AtIcon value='close-circle' size='10' color='#FFFFFF' />
  309. </View>
  310. </View> : null
  311. }
  312. </View>
  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={item.type}
  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