index.jsx 24 KB

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