index.jsx 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494
  1. import React, { Component } from "react";
  2. import Taro, { getCurrentInstance } from "@tarojs/taro";
  3. import { Text, View, Picker } from "@tarojs/components";
  4. import ImagePicker from "../../components/common/imagePicker";
  5. import InquiryModal from "../../components/common/inquiryModal";
  6. import {
  7. getPridDetail,
  8. getAccountList,
  9. selectList,
  10. AccountExamine,
  11. } from "../../utils/servers/servers";
  12. import {
  13. getAccountName,
  14. getTypeName,
  15. getVehicleName,
  16. commonAdd,
  17. } from "../../utils/tools";
  18. import { AtTextarea, AtButton } from "taro-ui";
  19. import { resourceAddress } from "../../utils/config";
  20. import "taro-ui/dist/style/components/form.scss";
  21. import "taro-ui/dist/style/components/button.scss";
  22. import "taro-ui/dist/style/components/loading.scss";
  23. import "taro-ui/dist/style/components/icon.scss";
  24. import "taro-ui/dist/style/components/icon.scss";
  25. import "taro-ui/dist/style/components/textarea.scss";
  26. import "taro-ui/dist/style/components/input.scss";
  27. import "../drafts/index.less";
  28. class Drafts extends Component {
  29. $instance = getCurrentInstance();
  30. constructor(props) {
  31. super(props);
  32. this.state = {
  33. data: {},
  34. list: [],
  35. total: 0,
  36. bankData: {},
  37. reason: "",
  38. };
  39. }
  40. componentDidMount() {
  41. this.$instance.router.params && this.$instance.router.params.id &&
  42. (
  43. this.getDetail(),
  44. this.getAccountList()
  45. )
  46. }
  47. // 报销账户列表
  48. getMyList(id) {
  49. let data = {
  50. pageNo: 1,
  51. pageSize: 99,
  52. }
  53. selectList(data).then(v => {
  54. if (v.error.length === 0) {
  55. let list = v.data.list || []
  56. for (var i = 0; i < list.length; i++) {
  57. if (list[i].aid == id) {
  58. this.setState({
  59. bankData: list[i]
  60. })
  61. }
  62. }
  63. } else {
  64. Taro.showToast({ title: v.error[0].message, icon: 'none' })
  65. }
  66. }).catch(() => {
  67. Taro.showToast({
  68. title: '系统错误,请稍后再试',
  69. icon: 'none'
  70. })
  71. })
  72. }
  73. // 报销单详情
  74. getDetail() {
  75. getPridDetail({
  76. id: this.$instance.router.params.id,
  77. }).then(v => {
  78. if (v.error.length === 0) {
  79. let list = [];
  80. for (let i of (v.data.attachmentUrl || '').split(',')) {
  81. if (i) {
  82. list.push({ 'url': resourceAddress + i })
  83. }
  84. }
  85. this.setState({
  86. data: v.data,
  87. rangeStartMinuteVal: v.data.releaseStartStr,
  88. rangeEndMinuteVal: v.data.releaseEndStr,
  89. totalDuration: v.data.duration,
  90. attachmentUrl: list,
  91. })
  92. // v.data.aid && this.getMyList(v.data.aid)
  93. } else {
  94. Taro.showToast({ title: v.error[0].message, icon: 'none' })
  95. }
  96. }).catch(() => {
  97. Taro.showToast({
  98. title: '系统错误,请稍后再试',
  99. icon: 'none'
  100. })
  101. })
  102. }
  103. // 报销详情金额列表
  104. getAccountList() {
  105. getAccountList({
  106. eaid: this.$instance.router.params.id,
  107. }).then(v => {
  108. if (v.error.length === 0) {
  109. let sum = 0
  110. for (var i = 0; i < v.data.length; i++) {
  111. // sum += v.data[i].amount
  112. sum = commonAdd(sum, v.data[i].amount)
  113. }
  114. this.setState({
  115. list: v.data,
  116. total: sum,
  117. })
  118. } else {
  119. Taro.showToast({ title: v.error[0].message, icon: 'none' })
  120. }
  121. }).catch(() => {
  122. Taro.showToast({
  123. title: '系统错误,请稍后再试',
  124. icon: 'none'
  125. })
  126. })
  127. }
  128. // 审批
  129. examine(val) {
  130. Taro.showLoading({ title: '处理中...' });
  131. AccountExamine({
  132. id: this.state.data.id,
  133. reason: this.state.reason,
  134. status: val,
  135. })
  136. .then((v) => {
  137. Taro.hideLoading();
  138. if (v.error.length === 0) {
  139. Taro.showToast({
  140. title: "操作成功",
  141. icon: "none",
  142. });
  143. this.getDetail()
  144. } else {
  145. Taro.showToast({ title: v.error[0].message, icon: "none" });
  146. }
  147. })
  148. .catch((err) => {
  149. Taro.showToast({ title: "系统错误,请稍后再试", icon: "none" });
  150. });
  151. }
  152. render() {
  153. const { data, list, total, bankData, attachmentUrl } = this.state
  154. return (
  155. <View className="subform">
  156. <View className="title">{getAccountName(data.type, data.typeOther)}</View>
  157. {data.type == 1 &&
  158. <View className="formItem">
  159. <View className="formName" style={{ width: "86px" }}>公出企业:</View>
  160. <View className="formValues">{data.userNames}</View>
  161. </View>}
  162. {data.type == 1 &&
  163. <View className="formItem">
  164. <View className="formName" style={{ width: "86px" }}>公出地点:</View>
  165. <View className="formValues">{data.districtName}</View>
  166. </View>}
  167. {data.type == 1 &&
  168. <View className="formItem">
  169. <View className="formName">公出时间:</View>
  170. <View className="formValue">
  171. <View
  172. className="time"
  173. onClick={() => {
  174. this.setState({
  175. isPickerRender: true,
  176. });
  177. }}
  178. >
  179. <View className="timeContent">
  180. <View style={{ textAlign: "center" }}>{this.state.rangeStartMinuteVal}</View>
  181. &nbsp;&nbsp;至&nbsp;&nbsp;
  182. <View style={{ textAlign: "center" }}>{this.state.rangeEndMinuteVal}</View>
  183. </View>
  184. </View>
  185. </View>
  186. </View>}
  187. {data.type == 1 &&
  188. <View className="formItem">
  189. <View className="formName">公出时长:</View>
  190. <View className="formValue">{this.state.totalDuration}小时</View>
  191. </View>}
  192. <View className="formItem">
  193. <View className="formName">申请类型:</View>
  194. <View className="formValue">{getAccountName(data.type, data.typeOther)}</View>
  195. </View>
  196. {data.type != 4 && data.type != 5 &&
  197. <View className="formItem">
  198. <View className="formName">报销至订单:</View>
  199. <View className="formValue">
  200. <View>
  201. <View>{data.buyerName}</View>
  202. <View>{data.contractNo}</View>
  203. </View>
  204. </View>
  205. </View>}
  206. <View className="formTitle">
  207. {(data.type == 4 || data.type == 5) ? "申请详细" : "报销详细"}
  208. </View>
  209. <View className="formItem">
  210. <View className="formName">申请人:</View>
  211. <View className="formValue">{data.aname}</View>
  212. </View>
  213. {
  214. data.type != 4 && data.type != 5 &&
  215. <View className="formItem">
  216. <View className="formName">报销公司:</View>
  217. <View className="formValue">{data.appDepName}</View>
  218. </View>
  219. }
  220. <View className="formItem">
  221. <View className="formName">
  222. {data.type == 4
  223. ? "预借支公司:" : data.type == 5
  224. ? "抵扣公司:" : "支付公司:"}
  225. </View>
  226. <View className="formValue">{data.payDepName}</View>
  227. </View>
  228. <View className="formItem">
  229. <View className="formName">{(data.type == 4 || data.type == 5) ? "说明:" : "报销事由:"}</View>
  230. <View className="formValue">{data.remarks}</View>
  231. </View>
  232. <View className="formTitle">
  233. {data.type != 4 && data.type != 5 && "报销"}费用详细
  234. </View>
  235. {/* 差旅费显示 */}
  236. {data.type == 1 &&
  237. list?.map(item =>
  238. item.type == 1
  239. ? <View className="unItem" key={item.id}>
  240. <View className="formItem">
  241. <View className="formName">交通工具:</View>
  242. <View className="formValue">{getVehicleName(item.vehicle, item.vehicleOther)}</View>
  243. </View>
  244. <View className="formItem">
  245. <View className="formName">时间:</View>
  246. <View className="formValue">
  247. <View className="ftxt">{item.startTimeStr}</View>
  248. &nbsp;&nbsp;至&nbsp;&nbsp;
  249. <View className="ftxt">{item.endTimeStr}</View>
  250. </View>
  251. </View>
  252. <View className="formItem">
  253. <View className="formName">地点:</View>
  254. <View className="formValue">
  255. <View className="ftxt">{item.startDistrict}</View>
  256. &nbsp;&nbsp;至&nbsp;&nbsp;
  257. <View className="ftxt">{item.endDistrict}</View>
  258. </View>
  259. </View>
  260. <View className="formItem">
  261. <View className="formName">金额(元):</View>
  262. <View className="formValue">{item.amount}(元)</View>
  263. </View>
  264. </View>
  265. : <View className="formItem" key={item.id}>
  266. <View className="formName" style={{ width: "86px" }}>{getTypeName(item.type) + ":"}</View>
  267. <View className="formValues">{item.amount}(元)</View>
  268. </View>
  269. )
  270. }
  271. {/* 通用 */}
  272. {(data.type == 0 || data.type == 2 || data.type == 4 || data.type == 5) &&
  273. list?.map(item =>
  274. <View className="unItem" key={item.id}>
  275. <View className="formItem">
  276. <View className="formName">{data.type == 5 ? "支付时间:" : "需付款时间:"}</View>
  277. <View className="formValue">{item.agreeTimeStr.slice(0, 10)}</View>
  278. </View>
  279. <View className="formItem">
  280. <View className="formName">
  281. {data.type == 4
  282. ? "预借支金额:" : data.type == 5
  283. ? "抵扣金额:" : "金额:"}
  284. </View>
  285. <View className="formValue">{item.amount}(元)</View>
  286. </View>
  287. </View>
  288. )
  289. }
  290. {/* 第三方付款 */}
  291. {data.type == 3 &&
  292. list?.map(item =>
  293. <View className="unItem" key={item.id}>
  294. <View className="formItem">
  295. <View className="formName">需付款时间:</View>
  296. <View className="formValue">{item.agreeTimeStr.slice(0, 10)}</View>
  297. </View>
  298. <View className="formItem">
  299. <View className="formName">付款方式:</View>
  300. <View className="formValue">{["公对公转账"][item.payType]}</View>
  301. </View>
  302. <View className="formItem">
  303. <View className="formName">发票类型:</View>
  304. <View className="formValue">{["普票", "专票"][item.invoiceType]}</View>
  305. </View>
  306. <View className="formItem">
  307. <View className="formName">发票号:</View>
  308. <View className="formValue">{item.invoiceNo}</View>
  309. </View>
  310. <View className="formItem">
  311. <View className="formName">付款单位:</View>
  312. <View className="formValue">{item.payerName}</View>
  313. </View>
  314. <View className="formItem">
  315. <View className="formName">开户银行:</View>
  316. <View className="formValue">{item.openBank}</View>
  317. </View>
  318. <View className="formItem">
  319. <View className="formName">银行账户:</View>
  320. <View className="formValue">{item.bankAccounts}</View>
  321. </View>
  322. <View className="formItem">
  323. <View className="formName">开户行地址:</View>
  324. <View className="formValue">{item.openBankAddress}</View>
  325. </View>
  326. <View className="formItem">
  327. <View className="formName">金额(元):</View>
  328. <View className="formValue">{item.amount}</View>
  329. </View>
  330. </View>
  331. )
  332. }
  333. {
  334. data.type != 4 && data.debitTotalAmount &&
  335. <View className="formItem">
  336. <View className="formName">预借支:</View>
  337. <View className="formValue"><Text style={{ color: "red" }}>{data.debitTotalAmount}</Text>(元)</View>
  338. </View>
  339. }
  340. {
  341. data.type != 4 && data.type != 5 &&
  342. <View className="formItem">
  343. <View className="formName">总金额:</View>
  344. <View className="formValue"><Text style={{ color: "red" }}>{total}</Text>(元)</View>
  345. </View>
  346. }
  347. {
  348. data.type != 4 && data.type != 5 &&
  349. <View className="formItem">
  350. <View className="formName">实报金额:</View>
  351. <View className="formValue"><Text style={{ color: "red" }}>
  352. {(total > data.debitTotalAmount) ? commonAdd(total, -data.debitTotalAmount) : 0}
  353. </Text>(元)</View>
  354. </View>
  355. }
  356. <View className="formItem" style={{ display: "block", paddingBottom: 0 }}>
  357. <View className="formName">附件:</View>
  358. <View
  359. className="formValue"
  360. style={{ paddingTop: "10px", textAlign: "left" }}
  361. >
  362. {attachmentUrl && attachmentUrl.length > 0 &&
  363. <ImagePicker
  364. files={attachmentUrl || []}
  365. showAddBtn={false}
  366. />}
  367. </View>
  368. </View>
  369. {data.type != 3 && data.type != 5 &&
  370. <View className="formTitle" style={{ marginTop: "20px" }}>
  371. 报销至收款账户
  372. </View>}
  373. {data.type != 3 && data.type != 5 &&
  374. <View className="unobstructedList">
  375. {<View className="unItem" >
  376. <View className="formItem">
  377. <View className="formName">收款人:{data.name}</View>
  378. </View>
  379. <View className="formItem">
  380. <View className="formName">收款银行:{data.bank}</View>
  381. </View>
  382. <View className="formItem">
  383. <View className="formName">收款账户:{data.accounts}</View>
  384. </View>
  385. </View>}
  386. </View>}
  387. {
  388. data.examine == 1 &&
  389. <View>
  390. <View className="formTitle" style={{ marginTop: "20px" }}>
  391. 填写审批意见
  392. </View>
  393. <AtTextarea
  394. value={this.state.reason}
  395. onChange={(value) => {
  396. this.setState({
  397. reason: value,
  398. });
  399. }}
  400. maxLength={30}
  401. placeholder="请填写审批意见"
  402. />
  403. <View className="operation">
  404. <AtButton
  405. type="secondary"
  406. circle
  407. loading={this.state.loading}
  408. onClick={() => {
  409. if (!this.state.reason) {
  410. Taro.showToast({ title: "请先填写审批意见", icon: "none" });
  411. return;
  412. }
  413. this.setState({
  414. isInquiryOpened: true,
  415. inquiryTitle: "提醒",
  416. inquiryContent: "您确定要驳回此申请吗?",
  417. inquiryFn: () => {
  418. this.examine(3);
  419. },
  420. });
  421. }}
  422. >
  423. 驳回
  424. </AtButton>
  425. <AtButton
  426. type="primary"
  427. loading={this.state.loading}
  428. circle
  429. onClick={() => {
  430. if (!this.state.reason) {
  431. Taro.showToast({ title: "请先填写审批意见", icon: "none" });
  432. return;
  433. }
  434. this.setState({
  435. isInquiryOpened: true,
  436. inquiryTitle: "提醒",
  437. inquiryContent: "您确定要同意此申请吗?",
  438. inquiryFn: () => {
  439. this.examine(1);
  440. },
  441. });
  442. }}
  443. >
  444. 同意
  445. </AtButton>
  446. </View>
  447. </View>
  448. }
  449. {/* 二级确认弹窗 */}
  450. <InquiryModal
  451. isOpened={this.state.isInquiryOpened}
  452. title={this.state.inquiryTitle}
  453. content={this.state.inquiryContent}
  454. onClose={() => {
  455. this.setState({
  456. isInquiryOpened: false,
  457. inquiryTitle: "",
  458. inquiryContent: "",
  459. isNo: true,
  460. });
  461. }}
  462. onDetermine={() => {
  463. this.state.inquiryFn();
  464. this.setState({
  465. isInquiryOpened: false,
  466. inquiryTitle: "",
  467. inquiryContent: "",
  468. isNo: true,
  469. inquiryFn: () => { },
  470. });
  471. }}
  472. />
  473. </View>
  474. );
  475. }
  476. }
  477. export default Drafts;