kaiPiaoModal.jsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397
  1. import React from "react";
  2. import { Spin, Button, Tabs, Table, message, Modal, Form, Upload } from "antd";
  3. import $ from "jquery/src/ajax";
  4. import {
  5. getProvinceA,
  6. getInvoiceStatus,
  7. getprovince,
  8. getStatus,
  9. getPeople,
  10. splitUrl,
  11. ShowModal,
  12. getProcessStatus,
  13. } from "@/tools";
  14. import ImgList from "../../../common/imgList";
  15. const FormItem = Form.Item;
  16. const KaiPiaoModal = React.createClass({
  17. getInitialState() {
  18. return {
  19. rotateDeg: 0
  20. };
  21. },
  22. componentWillReceiveProps(nextProps) {
  23. this.state = nextProps.data;
  24. this.setState(this.state);
  25. },
  26. downImg() {
  27. let num = 0;
  28. for (let i = 0; i < this.state.orgCodeUrl.length; i++) {
  29. if (this.state.orgCodeUrl[i].url == this.state.previewImage) {
  30. num = i;
  31. }
  32. }
  33. if (num == this.state.orgCodeUrl.length - 1) {
  34. return message.warning("已经是最后一张了哦");
  35. }
  36. this.state.previewImage = this.state.orgCodeUrl[num + 1].url;
  37. this.setState({
  38. previewImage: this.state.previewImage,
  39. rotateDeg: 0,
  40. });
  41. },
  42. upImg() {
  43. let num = 0;
  44. for (let i = 0; i < this.state.orgCodeUrl.length; i++) {
  45. if (this.state.orgCodeUrl[i].url == this.state.previewImage) {
  46. num = i;
  47. }
  48. }
  49. if (num == 0) {
  50. return message.warning("已经是第一张了哦");
  51. }
  52. this.state.previewImage = this.state.orgCodeUrl[num - 1].url;
  53. this.setState({
  54. previewImage: this.state.previewImage,
  55. rotateDeg: 0,
  56. });
  57. },
  58. rotate() {
  59. let rotateDeg = this.state.rotateDeg + 90;
  60. this.setState({
  61. rotateDeg,
  62. });
  63. },
  64. render() {
  65. const formItemLayout = {
  66. labelCol: { span: 8 },
  67. wrapperCol: { span: 14 },
  68. };
  69. return (
  70. // 开具发票申请单 财务发票审核
  71. <Modal
  72. className="admin-desc-content"
  73. footer=""
  74. title="开具发票申请单"
  75. width="1200px"
  76. visible={this.props.visible}
  77. onCancel={this.props.onCancel}
  78. >
  79. <Form
  80. layout="horizontal"
  81. id="demand-form"
  82. style={{ paddingBottom: "40px" }}
  83. >
  84. <Spin spinning={this.props.loading}>
  85. <div className="clearfix">
  86. <div className="clearfix">
  87. <FormItem
  88. className="half-item"
  89. {...formItemLayout}
  90. label="合同编号"
  91. >
  92. <span>{this.state.contractNo}</span>
  93. </FormItem>
  94. <FormItem
  95. className="half-item"
  96. {...formItemLayout}
  97. label="备注"
  98. >
  99. <span>{this.state.remarks}</span>
  100. </FormItem>
  101. </div>
  102. <div className="clearfix">
  103. <FormItem
  104. className="half-item"
  105. {...formItemLayout}
  106. label={
  107. <span>
  108. <strong style={{ color: "#f00" }}>*</strong>省内/外
  109. </span>
  110. }
  111. >
  112. <span>{getProvinceA(this.state.type)}</span>
  113. </FormItem>
  114. <FormItem
  115. className="half-item"
  116. {...formItemLayout}
  117. label={
  118. <span>
  119. <strong style={{ color: "#f00" }}>*</strong>特批
  120. </span>
  121. }
  122. >
  123. <span>{this.state.approval === 0 ? "否" : "是"}</span>
  124. </FormItem>
  125. </div>
  126. <hr
  127. style={{
  128. border: "1px dashed #aaa",
  129. width: "90%",
  130. margin: "auto",
  131. }}
  132. />
  133. <div style={{ marginTop: "13px", marginLeft: "16px" }}>
  134. <span style={{ fontSize: "14px" }}>发票内容</span>
  135. </div>
  136. <div className="clearfix">
  137. <FormItem
  138. className="half-item"
  139. {...formItemLayout}
  140. label={
  141. <span>
  142. <strong style={{ color: "#f00" }}>*</strong>发票类型
  143. </span>
  144. }
  145. >
  146. <span>
  147. {this.state.invoiceType === 0
  148. ? "增值税专用发票"
  149. : this.state.invoiceType === 1
  150. ? "增值税普通发票"
  151. : "其他"}
  152. </span>
  153. </FormItem>
  154. </div>
  155. <div className="clearfix">
  156. <FormItem
  157. className="half-item"
  158. {...formItemLayout}
  159. label={
  160. <span>
  161. <strong style={{ color: "#f00" }}>*</strong>单位名称
  162. </span>
  163. }
  164. >
  165. <span>{this.state.unitName}</span>
  166. </FormItem>
  167. <FormItem
  168. className="half-item"
  169. {...formItemLayout}
  170. label={
  171. <span>
  172. <strong style={{ color: "#f00" }}>*</strong>税号
  173. </span>
  174. }
  175. >
  176. <span>{this.state.taxNumber}</span>
  177. </FormItem>
  178. <FormItem
  179. className="half-item"
  180. {...formItemLayout}
  181. label={
  182. <span>
  183. <strong style={{ color: "#f00" }}>*</strong>
  184. 开票金额(万元)
  185. </span>
  186. }
  187. >
  188. <span>{this.state.amount}</span>
  189. </FormItem>
  190. <FormItem
  191. className="half-item"
  192. {...formItemLayout}
  193. label={
  194. <span>
  195. 开户行银行账号
  196. </span>
  197. }
  198. >
  199. <span>{this.state.banks}</span>
  200. </FormItem>
  201. <FormItem
  202. className="half-item"
  203. {...formItemLayout}
  204. label={
  205. <span>
  206. 开票内容及说明
  207. </span>
  208. }
  209. >
  210. <span>{this.state.content}</span>
  211. </FormItem>
  212. <FormItem
  213. className="half-item"
  214. {...formItemLayout}
  215. label={
  216. <span>
  217. 单位地址
  218. </span>
  219. }
  220. >
  221. <span>{this.state.unitAddress}</span>
  222. </FormItem>
  223. <FormItem
  224. className="half-item"
  225. {...formItemLayout}
  226. label="备注"
  227. >
  228. <span>{this.state.invoiceRemarks}</span>
  229. </FormItem>
  230. <FormItem
  231. className="half-item"
  232. {...formItemLayout}
  233. label={
  234. <span>
  235. 单位电话
  236. </span>
  237. }
  238. >
  239. <span>{this.state.unitMobile}</span>
  240. </FormItem>
  241. </div>
  242. <div className="clearfix">
  243. <FormItem
  244. labelCol={{ span: 4 }}
  245. wrapperCol={{ span: 18 }}
  246. label={
  247. <span>
  248. 附件
  249. </span>
  250. }
  251. >
  252. <Upload
  253. className="demandDetailShow-upload"
  254. listType="picture-card"
  255. fileList={this.state.orgCodeUrl}
  256. onPreview={(file) => {
  257. this.setState({
  258. previewImage: file.url || file.thumbUrl,
  259. previewVisible: true,
  260. });
  261. }}
  262. />
  263. {/*<div style={{paddingTop:'10px',paddingBottom:'10px'}}>*/}
  264. {/* <ImgList fileList={this.state.orgCodeUrl} ItemWidth={'96px'}/>*/}
  265. {/*</div>*/}
  266. <Modal
  267. maskClosable={false}
  268. footer={null}
  269. width={"50%"}
  270. visible={this.state.previewVisible}
  271. onCancel={() => {
  272. this.setState({ previewVisible: false, rotateDeg: 0 });
  273. }}
  274. >
  275. <img
  276. alt=""
  277. style={{ width: "100%" }}
  278. src={this.state.previewImage || ""}
  279. />
  280. <Button
  281. onClick={this.rotate}
  282. style={{
  283. position: "relative",
  284. left: "50%",
  285. transform: "translateX(-50%)",
  286. }}
  287. >
  288. 旋转
  289. </Button>
  290. <Button
  291. onClick={this.upImg}
  292. style={{
  293. position: "absolute",
  294. left: -81,
  295. top: "50%",
  296. transform: "translateY(-50%)",
  297. }}
  298. >
  299. 上一张
  300. </Button>
  301. <Button
  302. onClick={this.downImg}
  303. style={{
  304. position: "absolute",
  305. right: -81,
  306. top: "50%",
  307. transform: "translateY(-50%)",
  308. }}
  309. >
  310. 下一张
  311. </Button>
  312. </Modal>
  313. </FormItem>
  314. </div>
  315. <hr
  316. style={{
  317. border: "1px dashed #aaa",
  318. width: "90%",
  319. margin: "auto",
  320. }}
  321. />
  322. <div className="clearfix" style={{ marginTop: "10px" }}>
  323. <FormItem
  324. className="half-item"
  325. {...formItemLayout}
  326. label="发票是否邮寄:"
  327. >
  328. <span>{this.state.post === 0 ? "是" : "否"}</span>
  329. </FormItem>
  330. </div>
  331. {this.state.post === 0 ? (
  332. <div>
  333. <div className="clearfix">
  334. <FormItem
  335. className="half-item"
  336. {...formItemLayout}
  337. label="收信人姓名"
  338. >
  339. <span>{this.state.addressee}</span>
  340. </FormItem>
  341. <FormItem
  342. className="half-item"
  343. {...formItemLayout}
  344. label="电话"
  345. >
  346. <span>{this.state.addresseeMobile}</span>
  347. </FormItem>
  348. </div>
  349. <div className="clearfix">
  350. <FormItem
  351. className="half-item"
  352. {...formItemLayout}
  353. label="省-市-区"
  354. >
  355. <span>
  356. {getprovince(this.state.addresseeProvince)}/
  357. {getprovince(this.state.addresseeCity)}/
  358. {getprovince(this.state.addresseeArea)}
  359. </span>
  360. </FormItem>
  361. </div>
  362. <div className="clearfix">
  363. <FormItem
  364. className="half-item"
  365. {...formItemLayout}
  366. label="详细地址"
  367. >
  368. <span>{this.state.recipientAddress}</span>
  369. </FormItem>
  370. </div>
  371. </div>
  372. ) : (
  373. ""
  374. )}
  375. {/* <FormItem
  376. className="half-item"
  377. {...formItemLayout}
  378. label={
  379. <span>
  380. <strong style={{ color: "#f00" }}>*</strong>开票金额总计
  381. </span>
  382. }
  383. >
  384. <span>{this.state.alreadyAmount}万元</span>
  385. </FormItem> */}
  386. </div>
  387. </Spin>
  388. </Form>
  389. </Modal>
  390. );
  391. },
  392. });
  393. export default KaiPiaoModal;