index.jsx 16 KB

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