index.jsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
  1. import React, { Component } from "react";
  2. import Taro, { getCurrentInstance } from "@tarojs/taro";
  3. import { Text, View, Image } from "@tarojs/components";
  4. import ImagePicker from "../../components/common/imagePicker";
  5. import InquiryModal from "../../components/common/inquiryModal";
  6. import AuditModal from "../../components/common/auditModal";
  7. import {
  8. getPridDetail,
  9. getAccountList,
  10. selectList,
  11. AccountExamine,
  12. } from "../../utils/servers/servers";
  13. import {
  14. getAccountName,
  15. getTypeName,
  16. getVehicleName,
  17. commonAdd,
  18. copyText,
  19. } from "../../utils/tools";
  20. import { AtTextarea, AtButton, AtIcon } from "taro-ui";
  21. import { resourceAddress } from "../../utils/config";
  22. import Right from '../../image/right.png'
  23. import "taro-ui/dist/style/components/form.scss";
  24. import "taro-ui/dist/style/components/button.scss";
  25. import "taro-ui/dist/style/components/loading.scss";
  26. import "taro-ui/dist/style/components/icon.scss";
  27. import "taro-ui/dist/style/components/textarea.scss";
  28. import "taro-ui/dist/style/components/input.scss";
  29. import "./index.less";
  30. class Drafts extends Component {
  31. $instance = getCurrentInstance();
  32. constructor(props) {
  33. super(props);
  34. this.state = {
  35. data: {},
  36. list: [],
  37. total: 0,
  38. bankData: {},
  39. reason: "",
  40. visible: false,
  41. };
  42. }
  43. componentDidMount() {
  44. this.$instance.router.params && this.$instance.router.params.id &&
  45. (
  46. this.getDetail(),
  47. this.getAccountList()
  48. )
  49. }
  50. // 报销单详情
  51. getDetail() {
  52. getPridDetail({
  53. id: this.$instance.router.params.id,
  54. }).then(v => {
  55. if (v.error.length === 0) {
  56. let list = [];
  57. for (let i of (v.data.attachmentUrl || '').split(',')) {
  58. if (i) {
  59. list.push({ 'url': resourceAddress + i })
  60. }
  61. }
  62. this.setState({
  63. data: v.data,
  64. rangeStartMinuteVal: v.data.releaseStartStr,
  65. rangeEndMinuteVal: v.data.releaseEndStr,
  66. totalDuration: v.data.duration,
  67. attachmentUrl: list,
  68. })
  69. } else {
  70. Taro.showToast({ title: v.error[0].message, icon: 'none' })
  71. }
  72. }).catch(() => {
  73. Taro.showToast({
  74. title: '系统错误,请稍后再试',
  75. icon: 'none'
  76. })
  77. })
  78. }
  79. // 报销详情金额列表
  80. getAccountList() {
  81. getAccountList({
  82. eaid: this.$instance.router.params.id,
  83. }).then(v => {
  84. if (v.error.length === 0) {
  85. let sum = 0
  86. for (var i = 0; i < v.data.length; i++) {
  87. // sum += v.data[i].amount
  88. sum = commonAdd(sum, v.data[i].amount)
  89. }
  90. this.setState({
  91. list: v.data,
  92. total: sum,
  93. })
  94. } else {
  95. Taro.showToast({ title: v.error[0].message, icon: 'none' })
  96. }
  97. }).catch(() => {
  98. Taro.showToast({
  99. title: '系统错误,请稍后再试',
  100. icon: 'none'
  101. })
  102. })
  103. }
  104. render() {
  105. const { data, list, total, bankData, attachmentUrl } = this.state
  106. const icon = {
  107. width: '50px',
  108. height: '10px',
  109. margin: '0 10px',
  110. }
  111. return (
  112. <View className="subform">
  113. <View className="title">
  114. {getAccountName(data.type, data.typeOther)}
  115. </View>
  116. {/* {(data.status == 1 || data.status == 2) &&
  117. <View className="formItem">
  118. <View className="formName" >编号:</View>
  119. <View className="formValue">{data.checkNo}</View>
  120. <View className='tbt'
  121. onClick={e => { e.stopPropagation(); copyText(data.checkNo) }}
  122. >复制编号打印</View>
  123. </View>} */}
  124. {data.type == 1 &&
  125. <View className="formItem">
  126. <View className="formName" >公出企业:</View>
  127. <View className="formValue">{data.userNames}</View>
  128. </View>}
  129. {data.type == 1 &&
  130. <View className="formItem">
  131. <View className="formName" >公出地点:</View>
  132. <View className="formValue">{data.districtName}</View>
  133. </View>}
  134. {data.type == 1 &&
  135. <View className="formItem">
  136. <View className="formName">公出时间:</View>
  137. <View className="formValue">
  138. <View
  139. className="time"
  140. >
  141. <View className="timeContent">
  142. <View>{this.state.rangeStartMinuteVal.slice(0, 16)}&nbsp;至&nbsp;{this.state.rangeEndMinuteVal.slice(0, 16)}</View>
  143. </View>
  144. </View>
  145. </View>
  146. </View>}
  147. {data.type == 1 &&
  148. <View className="formItem">
  149. <View className="formName">公出时长:</View>
  150. <View className="formValue">{this.state.totalDuration}小时</View>
  151. </View>}
  152. <View className="formItem">
  153. <View className="formName">申请类型:</View>
  154. <View className="formValue">{getAccountName(data.type, data.typeOther)}</View>
  155. </View>
  156. {data.type != 4 && data.type != 5 &&
  157. <View className="formItem">
  158. <View className="formName">报销至订单:</View>
  159. <View className="formValue">
  160. <View>
  161. <View>{data.buyerName}</View>
  162. <View>{data.contractNo}</View>
  163. </View>
  164. </View>
  165. </View>}
  166. <View className="formTitle">
  167. {data.type != 4 && data.type != 5 && "报销"}费用详细
  168. </View>
  169. {/* 差旅费显示 */}
  170. {data.type == 1 &&
  171. list?.map(item =>
  172. item.type == 1
  173. ? <View className="unItem" key={item.id}>
  174. <View className="formItem">
  175. <View className="formName">交通工具:</View>
  176. <View className="formValue">{getVehicleName(item.vehicle, item.vehicleOther)}&nbsp;</View>
  177. </View>
  178. <View className="formItem">
  179. <View className="formName">时间:</View>
  180. <View className="formValue">
  181. <View className="ftxt">{item.startTimeStr.slice(0, 16)}&nbsp;至&nbsp;{item.endTimeStr.slice(0, 16)}</View>
  182. </View>
  183. </View>
  184. <View className="formItem">
  185. <View className="formName">地点:</View>
  186. <View className="formValue">
  187. <View className="ftxt">{item.startDistrict}</View>
  188. <Image src={Right} style={icon} mode='aspectFit' />
  189. <View className="ftxt">{item.endDistrict}</View>
  190. </View>
  191. </View>
  192. <View className="formItem">
  193. <View className="formName">金额:</View>
  194. <View className="formValue">{item.amount}(元)</View>
  195. </View>
  196. </View>
  197. : <View className="formItem" key={item.id}>
  198. <View className="formName" >{getTypeName(item.type) + ":"}</View>
  199. <View className="formValue">{item.amount}(元)</View>
  200. </View>
  201. )
  202. }
  203. {/* 通用 */}
  204. {(data.type == 0 || data.type == 2 || data.type == 4 || data.type == 5) &&
  205. list?.map(item =>
  206. <View className="unItem" key={item.id}>
  207. {!!item.agreeTimeStr &&
  208. <View className="formItem">
  209. <View className="formName">{data.type == 5 ? "支付时间:" : "需付款时间:"}</View>
  210. <View className="formValue">{item.agreeTimeStr.slice(0, 10)}</View>
  211. </View>}
  212. <View className="formItem">
  213. <View className="formName">
  214. {data.type == 4
  215. ? "预借支金额:" : data.type == 5
  216. ? "抵扣金额:" : "金额:"}
  217. </View>
  218. <View className="formValue">{item.amount}(元)</View>
  219. </View>
  220. </View>
  221. )
  222. }
  223. {/* 第三方付款 */}
  224. {data.type == 3 &&
  225. list?.map(item =>
  226. <View className="unItem" key={item.id}>
  227. {!!item.agreeTimeStr &&
  228. <View className="formItem">
  229. <View className="formName">需付款时间:</View>
  230. <View className="formValue">{item.agreeTimeStr.slice(0, 10)}</View>
  231. </View>}
  232. <View className="formItem">
  233. <View className="formName">付款方式:</View>
  234. <View className="formValue">{["公对公转账"][item.payType]}</View>
  235. </View>
  236. <View className="formItem">
  237. <View className="formName">发票类型:</View>
  238. <View className="formValue">{["普票", "专票"][item.invoiceType]}</View>
  239. </View>
  240. <View className="formItem">
  241. <View className="formName">发票号:</View>
  242. <View className="formValue">{item.invoiceNo}</View>
  243. </View>
  244. <View className="formItem">
  245. <View className="formName">付款单位:</View>
  246. <View className="formValue">{item.payerName}</View>
  247. </View>
  248. <View className="formItem">
  249. <View className="formName">开户银行:</View>
  250. <View className="formValue">{item.openBank}</View>
  251. </View>
  252. <View className="formItem">
  253. <View className="formName">银行账户:</View>
  254. <View className="formValue">{item.bankAccounts}</View>
  255. </View>
  256. <View className="formItem">
  257. <View className="formName">开户行地址:</View>
  258. <View className="formValue">{item.openBankAddress}</View>
  259. </View>
  260. <View className="formItem">
  261. <View className="formName">金额:</View>
  262. <View className="formValue">{item.amount}(元)</View>
  263. </View>
  264. </View>
  265. )
  266. }
  267. {
  268. data.type != 4 && data.debitTotalAmount &&
  269. <View className="formItem">
  270. <View className="formName">预借支:</View>
  271. <View className="formValue"><Text style={{ color: "red" }}>{data.debitTotalAmount}</Text>(元)</View>
  272. </View>
  273. }
  274. {
  275. data.type != 4 && data.type != 5 &&
  276. <View className="formItem">
  277. <View className="formName">总金额:</View>
  278. <View className="formValue"><Text style={{ color: "red" }}>{total}</Text>(元)</View>
  279. </View>
  280. }
  281. {
  282. data.type != 4 && data.type != 5 &&
  283. <View className="formItem">
  284. <View className="formName">实报金额:</View>
  285. <View className="formValue"><Text style={{ color: "red" }}>
  286. {(total > data.debitTotalAmount) ? commonAdd(total, -data.debitTotalAmount) : 0}
  287. </Text>(元)</View>
  288. </View>
  289. }
  290. <View className="formItem" style={{ display: "block", paddingBottom: 0 }}>
  291. <View className="formName">附件:</View>
  292. <View
  293. className="formValue"
  294. style={{ paddingTop: "10px", textAlign: "left" }}
  295. >
  296. {attachmentUrl && attachmentUrl.length > 0 &&
  297. <ImagePicker
  298. files={attachmentUrl || []}
  299. showAddBtn={false}
  300. />}
  301. </View>
  302. </View>
  303. </View>
  304. );
  305. }
  306. }
  307. export default Drafts;