index.jsx 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649
  1. import React, { Component } from "react";
  2. import { View, Image, Button } from "@tarojs/components";
  3. import Taro, { getCurrentInstance } from "@tarojs/taro";
  4. import {
  5. AtButton,
  6. AtCalendar,
  7. AtIcon,
  8. AtTextarea,
  9. AtModal,
  10. AtModalContent,
  11. AtModalAction,
  12. } from "taro-ui";
  13. import Skeleton from "taro-skeleton";
  14. import InquiryModal from "../../components/common/inquiryModal";
  15. import Modify from "./modify";
  16. import {
  17. examinePublicRelease,
  18. getReleasetDails,
  19. updatePublicRelease,
  20. } from "../../utils/servers/servers";
  21. import { resourceAddress } from "../../utils/config";
  22. import "./index.less";
  23. import "taro-ui/dist/style/components/icon.scss";
  24. import "taro-ui/dist/style/components/textarea.scss";
  25. import "taro-ui/dist/style/components/modal.scss";
  26. import "taro-ui/dist/style/components/timeline.scss";
  27. import "taro-ui/dist/style/components/icon.scss";
  28. import "taro-ui/dist/style/components/calendar.scss";
  29. import Rejected from "../../image/rejected.png";
  30. import Passed from "../../image/passed.png";
  31. import Reviewed from "../../image/reviewed.png";
  32. import Wx from "../../image/wx.png";
  33. import Revoke from "../../image/revoke.png";
  34. import ImagePicker from "../../components/common/imagePicker";
  35. import MessageNoticebar from "../../components/common/messageNoticebar";
  36. import { getClockState } from "../../utils/tools";
  37. import HistoricalClock from "../../components/historicalClock";
  38. class EgressDetails extends Component {
  39. $instance = getCurrentInstance();
  40. constructor(props) {
  41. super(props);
  42. this.state = {
  43. dtails: {},
  44. opinion: "",
  45. publicReleaseLog: [],
  46. isDetailedOpened: false,
  47. isModifyOpened: false,
  48. reasonsInvalidation: "",
  49. isVerify: false, //判断是否在审核中修改
  50. selectArrderLocation: {},
  51. current: "",
  52. };
  53. this.examinePublicRelease = this.examinePublicRelease.bind(this);
  54. this.getReleasetDails = this.getReleasetDails.bind(this);
  55. this.oidApplication = this.oidApplication.bind(this);
  56. }
  57. componentDidMount() {
  58. this.setState({
  59. current: this.$instance.router.params.status || "",
  60. });
  61. this.getReleasetDails();
  62. }
  63. componentDidShow() {
  64. console.log("----000.");
  65. //获取地区选定数据
  66. const chooseLocation = requirePlugin("chooseLocation");
  67. const location = chooseLocation.getLocation();
  68. if (location) {
  69. this.setState({
  70. selectArrderLocation: location,
  71. });
  72. }
  73. }
  74. getReleasetDails() {
  75. getReleasetDails({
  76. id: this.$instance.router.params.id,
  77. })
  78. .then((v) => {
  79. if (v.error.length === 0) {
  80. if (v.data) {
  81. let list = [];
  82. for (let i of v.data.annexUrl.split(",")) {
  83. if (i) {
  84. list.push({ url: resourceAddress + i });
  85. }
  86. }
  87. v.data.annexUrl = list;
  88. this.setState({
  89. dtails: v.data,
  90. selectArrderLocation: {
  91. longitude: parseFloat(v.data.longitude),
  92. latitude: parseFloat(v.data.latitude),
  93. name: v.data.userName,
  94. },
  95. });
  96. } else {
  97. setTimeout(() => {
  98. Taro.switchTab({
  99. url: "/pages/punchClock/index",
  100. });
  101. }, 1800);
  102. Taro.showToast({
  103. title: "您没有权限查看此公出详情",
  104. icon: "none",
  105. duration: 1800,
  106. });
  107. }
  108. } else {
  109. Taro.showToast({ title: v.error[0].message, icon: "none" });
  110. }
  111. })
  112. .catch((err) => {
  113. Taro.showToast({ title: "系统错误,请稍后再试", icon: "none" });
  114. console.log(err);
  115. });
  116. }
  117. examinePublicRelease(status) {
  118. if (!this.state.opinion) {
  119. Taro.showToast({ title: "请填写审批意见", icon: "none" });
  120. return;
  121. }
  122. Taro.showLoading({ title: "加载中..." });
  123. examinePublicRelease({
  124. status,
  125. remarks: this.state.opinion,
  126. id: this.state.dtails.id,
  127. })
  128. .then((v) => {
  129. Taro.hideLoading();
  130. if (v.error.length === 0) {
  131. Taro.showToast({
  132. title: status === 0 ? "驳回成功" : "通过成功",
  133. icon: "none",
  134. });
  135. this.state.dtails.status = status;
  136. this.setState({
  137. dtails: this.state.dtails,
  138. });
  139. Taro.eventCenter.trigger("listOperation", {
  140. type: this.state.dtails.permission,
  141. index: this.$instance.router.params.index,
  142. status: status === 0 ? 0 : 2,
  143. });
  144. } else {
  145. Taro.showToast({ title: v.error[0].message, icon: "none" });
  146. }
  147. })
  148. .catch(() => {
  149. Taro.hideLoading();
  150. Taro.showToast({ title: "系统错误,请稍后再试", icon: "none" });
  151. });
  152. }
  153. onShareAppMessage() {
  154. return {
  155. title:
  156. this.state.dtails.status === 3
  157. ? this.state.dtails.aname +
  158. "撤销了前往" +
  159. this.state.dtails.userName +
  160. "的公出"
  161. : this.state.dtails.aname + "将要去" + this.state.dtails.userName,
  162. path: "pages/egressDetails/index?id=" + this.$instance.router.params.id,
  163. };
  164. }
  165. oidApplication() {
  166. if (!this.state.reasonsInvalidation) {
  167. Taro.showToast({ title: "请填写撤销原因", icon: "none" });
  168. return;
  169. }
  170. this.setState({
  171. loading: true,
  172. });
  173. updatePublicRelease({
  174. id: this.$instance.router.params.id,
  175. status: 3,
  176. uid: this.state.dtails.uid,
  177. reason: this.state.reasonsInvalidation,
  178. })
  179. .then((v) => {
  180. this.setState({
  181. loading: false,
  182. });
  183. if (v.error.length === 0) {
  184. Taro.showToast({
  185. title: "修改成功",
  186. });
  187. this.setState(
  188. {
  189. isInquiryOpened: false,
  190. inquiryTitle: "",
  191. inquiryContent: "",
  192. },
  193. () => {
  194. this.getReleasetDails();
  195. }
  196. );
  197. Taro.eventCenter.trigger("listOperation", {
  198. type: this.state.dtails.permission,
  199. index: this.$instance.router.params.index,
  200. status: 3,
  201. });
  202. } else {
  203. Taro.showToast({
  204. title: v.error[0].message,
  205. icon: "none",
  206. });
  207. }
  208. })
  209. .catch(() => {
  210. this.setState({
  211. loading: false,
  212. });
  213. });
  214. }
  215. render() {
  216. const { dtails, current } = this.state;
  217. return (
  218. <View className="egressDetails">
  219. <MessageNoticebar />
  220. <View
  221. className="titleContent"
  222. style={{
  223. padding: Object.keys(dtails).length === 0 ? "0 30px" : "20px 30px",
  224. }}
  225. >
  226. {Object.keys(dtails).length === 0 ? (
  227. <Skeleton
  228. title
  229. row={3}
  230. animateName="elastic"
  231. avatarShape="square"
  232. loading
  233. />
  234. ) : (
  235. <View>
  236. <View className="title">
  237. {dtails.aname}提交的公出申请
  238. {dtails.updateStatus == 1 && (
  239. <View className="titRight">改</View>
  240. )}
  241. </View>
  242. <View className="address">申请时间: {dtails.createTimes}</View>
  243. <View
  244. className="state"
  245. style={{
  246. color: getClockState(dtails.status).color,
  247. }}
  248. >
  249. {getClockState(dtails.status).title}
  250. </View>
  251. <Image
  252. src={
  253. dtails.status === 0
  254. ? Rejected
  255. : dtails.status === 1
  256. ? Reviewed
  257. : dtails.status === 2
  258. ? Passed
  259. : dtails.status === 3
  260. ? Revoke
  261. : ""
  262. }
  263. className="startIcon"
  264. />
  265. </View>
  266. )}
  267. </View>
  268. {Object.keys(dtails).length === 0 ? (
  269. <View style={{ margin: "20px" }}>
  270. <Skeleton title row={3} avatarShape="square" loading />
  271. </View>
  272. ) : (
  273. <View className="valueContent">
  274. <View className="item">
  275. <View className="title">
  276. 公出地点:
  277. {dtails.permission === 0 &&
  278. (dtails.status === 0 || dtails.status === 3) ? (
  279. <View
  280. className="edit"
  281. onClick={() => {
  282. this.setState({
  283. isModifyOpened: true,
  284. });
  285. }}
  286. >
  287. <View style={{ color: "#3864ef", fontSize: "15px" }}>
  288. 修改
  289. <AtIcon value="edit" size="18" color="#3864ef" />
  290. </View>
  291. </View>
  292. ) : null}
  293. </View>
  294. <View className="value">{dtails.userName}</View>
  295. <View className="timeContent">
  296. <View className="time">
  297. <View className="num">公出{dtails.duration}小时</View>
  298. <View
  299. className="journal"
  300. onClick={(e) => {
  301. e.stopPropagation();
  302. this.setState({
  303. isDetailedOpened: true,
  304. });
  305. }}
  306. >
  307. 明细
  308. </View>
  309. </View>
  310. <View className="timeAxis">
  311. <View className="startTime">
  312. <View className="circle" />
  313. {dtails.releaseStarts}
  314. </View>
  315. <View className="axis" />
  316. <View className="endTime">
  317. <View className="circle" />
  318. {dtails.releaseEnds}
  319. </View>
  320. </View>
  321. </View>
  322. </View>
  323. <AtModal
  324. onClose={() => {
  325. this.setState({
  326. isDetailedOpened: false,
  327. });
  328. }}
  329. isOpened={this.state.isDetailedOpened}
  330. >
  331. <AtModalContent>
  332. {dtails.validDate ? (
  333. <AtCalendar
  334. currentDate={JSON.parse(dtails.validDate)[0]["value"]}
  335. isSwiper={false}
  336. validDates={JSON.parse(dtails.validDate)}
  337. />
  338. ) : null}
  339. </AtModalContent>
  340. <AtModalAction>
  341. <Button
  342. onClick={() => {
  343. this.setState({
  344. isDetailedOpened: false,
  345. });
  346. }}
  347. >
  348. 确定
  349. </Button>
  350. </AtModalAction>
  351. </AtModal>
  352. <View className="item">
  353. <View className="title">公出类型:</View>
  354. <View className="value">
  355. {dtails.type == 0
  356. ? "业务公出"
  357. : dtails.type == 1
  358. ? "技术公出"
  359. : dtails.type == 2 && "行政公出"}
  360. </View>
  361. </View>
  362. {dtails.type == 1 ? (
  363. <View className="item">
  364. <View className="title">合同编号:</View>
  365. <View className="value">{dtails.contractNo}</View>
  366. </View>
  367. ) : (
  368. ""
  369. )}
  370. <View className="item">
  371. <View className="title">公出企业</View>
  372. <View className="value">{dtails.nickname}</View>
  373. </View>
  374. {/* 公出目标 */}
  375. <View className="item">
  376. <View className="title">公出目标</View>
  377. <View className="value">{dtails.remarks}</View>
  378. </View>
  379. {/* 公出计划 */}
  380. {dtails.type != 2 && (
  381. <View className="item">
  382. <View className="title">公出计划</View>
  383. <View className="value">{dtails.plan}</View>
  384. </View>
  385. )}
  386. {/* 预计效果 */}
  387. {dtails.type != 2 && (
  388. <View className="item">
  389. <View className="title">预计效果</View>
  390. <View className="value">{dtails.expectedEffect}</View>
  391. </View>
  392. )}
  393. {dtails.annexUrl && dtails.annexUrl.length > 0 ? (
  394. <View className="item">
  395. <View className="title">附件</View>
  396. <View className="value">
  397. <ImagePicker files={dtails.annexUrl} showAddBtn={false} />
  398. </View>
  399. </View>
  400. ) : null}
  401. {dtails.permission === 1 &&
  402. dtails.status === 1 &&
  403. current !== "2" ? (
  404. <View className="item">
  405. <View className="title">
  406. 填写审批意见
  407. <View className="titleTips">
  408. 根据公出申请记录指导怎么沟通?并提出详细指导建议
  409. </View>
  410. </View>
  411. <AtTextarea
  412. value={this.state.opinion}
  413. onChange={(value) => {
  414. this.setState({
  415. opinion: value,
  416. });
  417. }}
  418. maxLength={20}
  419. placeholder="请填写审批意见"
  420. />
  421. </View>
  422. ) : null}
  423. {dtails.permission === 1 &&
  424. dtails.status === 1 &&
  425. current !== "2" ? (
  426. <View className="operation">
  427. <AtButton
  428. type="secondary"
  429. circle
  430. loading={this.state.loading}
  431. onClick={() => {
  432. this.setState({
  433. isInquiryOpened: true,
  434. inquiryTitle: "提醒",
  435. inquiryContent: "您确定要驳回此申请吗?",
  436. inquiryFn: () => {
  437. this.examinePublicRelease(0);
  438. },
  439. });
  440. }}
  441. >
  442. 驳回
  443. </AtButton>
  444. <AtButton
  445. type="primary"
  446. loading={this.state.loading}
  447. circle
  448. onClick={() => {
  449. if (this.state.loading) {
  450. return;
  451. }
  452. this.setState({
  453. isInquiryOpened: true,
  454. inquiryTitle: "提醒",
  455. inquiryContent: "您确定要同意此申请吗?",
  456. inquiryFn: () => {
  457. this.examinePublicRelease(2);
  458. },
  459. });
  460. }}
  461. >
  462. 同意
  463. </AtButton>
  464. </View>
  465. ) : null}
  466. {dtails.permission === 0 && dtails.status !== 3 ? (
  467. <View className="item">
  468. <View className="title">修改/撤销</View>
  469. <AtTextarea
  470. value={this.state.reasonsInvalidation}
  471. onChange={(value) => {
  472. this.setState({
  473. reasonsInvalidation: value,
  474. });
  475. }}
  476. maxLength={20}
  477. placeholder="请填写修改或撤销的详细原因"
  478. />
  479. </View>
  480. ) : null}
  481. {dtails.permission === 0 && dtails.status !== 3 ? (
  482. <View className="operation">
  483. <Button
  484. type="warn"
  485. loading={this.state.loading}
  486. onClick={() => {
  487. if (this.state.loading) {
  488. return;
  489. }
  490. this.setState({
  491. isInquiryOpened: true,
  492. inquiryTitle: "提醒",
  493. inquiryContent: "您确定要撤销此申请吗?",
  494. inquiryFn: () => {
  495. this.oidApplication();
  496. },
  497. });
  498. }}
  499. >
  500. 撤销申请
  501. </Button>
  502. <Button
  503. style={{ color: "#fff", background: "#4876FF" }}
  504. loading={this.state.loading}
  505. onClick={() => {
  506. if (this.state.loading) {
  507. return;
  508. }
  509. this.setState({
  510. isInquiryOpened: true,
  511. inquiryTitle: "提醒",
  512. inquiryContent:
  513. "您确定修改此公出申请吗?确定修改,已完成的审核,将自动解除,重新转化为待审核状态!!!",
  514. inquiryFn: () => {
  515. if (!this.state.reasonsInvalidation) {
  516. Taro.showToast({
  517. title: "请填写修改原因",
  518. icon: "none",
  519. });
  520. return;
  521. }
  522. this.setState({
  523. isModifyOpened: true,
  524. isVerify: true,
  525. });
  526. },
  527. });
  528. }}
  529. >
  530. 修改申请
  531. </Button>
  532. </View>
  533. ) : null}
  534. </View>
  535. )}
  536. {Object.keys(dtails).length === 0 ? (
  537. <View style={{ margin: "20px" }}>
  538. <Skeleton title row={3} avatarShape="square" loading />
  539. </View>
  540. ) : (
  541. <View
  542. className="valueContent history"
  543. onClick={(e) => {
  544. e.stopPropagation();
  545. this.setState({
  546. historicalIsOpened: true,
  547. });
  548. }}
  549. >
  550. 查看公出申请日志
  551. <AtIcon value="chevron-right" size="20" color="#767272" />
  552. </View>
  553. )}
  554. {Object.keys(dtails).length === 0 ? (
  555. <View style={{ margin: "20px" }}>
  556. <Skeleton title row={3} avatarShape="square" loading />
  557. </View>
  558. ) : (
  559. <View className="valueContent history">
  560. <View className="shareContent">
  561. <Button open-type="share" className="share">
  562. <Image src={Wx} className="shareIcon" />
  563. </Button>
  564. <View className="shareTitle">微信分享</View>
  565. </View>
  566. </View>
  567. )}
  568. {this.state.isModifyOpened ? (
  569. <Modify
  570. permission={dtails.permission}
  571. index={this.$instance.router.params.index}
  572. dtails={dtails}
  573. locationInfor={this.state.selectArrderLocation}
  574. id={this.$instance.router.params.id}
  575. isOpened={this.state.isModifyOpened}
  576. isVerify={this.state.isVerify}
  577. reason={this.state.reasonsInvalidation}
  578. onModalClose={() => {
  579. this.setState({
  580. isModifyOpened: false,
  581. });
  582. }}
  583. onClose={() => {
  584. this.setState(
  585. {
  586. isModifyOpened: false,
  587. dtails: {},
  588. reasonsInvalidation: "",
  589. },
  590. () => {
  591. this.getReleasetDails();
  592. }
  593. );
  594. }}
  595. />
  596. ) : null}
  597. <InquiryModal
  598. isOpened={this.state.isInquiryOpened}
  599. title={this.state.inquiryTitle}
  600. content={this.state.inquiryContent}
  601. onClose={() => {
  602. this.setState({
  603. isInquiryOpened: false,
  604. inquiryTitle: "",
  605. inquiryContent: "",
  606. });
  607. }}
  608. onDetermine={() => {
  609. this.state.inquiryFn();
  610. this.setState({
  611. isInquiryOpened: false,
  612. inquiryTitle: "",
  613. inquiryContent: "",
  614. inquiryFn: () => {},
  615. });
  616. }}
  617. />
  618. {this.state.historicalIsOpened ? (
  619. <HistoricalClock
  620. id={this.$instance.router.params.id}
  621. isOpened={this.state.historicalIsOpened}
  622. onClose={() => {
  623. this.setState({
  624. historicalIsOpened: false,
  625. });
  626. }}
  627. />
  628. ) : null}
  629. </View>
  630. );
  631. }
  632. }
  633. export default EgressDetails;