kede-client/js/component/manageCenter/financialManage/distribute/kaiPiaoModal.jsx

import React from "react";
import { Spin, Button, Tabs, Table, message, Modal, Form, Upload } from "antd";
import $ from "jquery/src/ajax";
import {
  getProvinceA,
  getInvoiceStatus,
  getprovince,
  getStatus,
  getPeople,
  splitUrl,
  ShowModal,
  getProcessStatus,
} from "@/tools";
import ImgList from "../../../common/imgList";
const FormItem = Form.Item;
const KaiPiaoModal = React.createClass({
  getInitialState() {
    return {
      rotateDeg: 0
    };
  },
  componentWillReceiveProps(nextProps) {
    this.state = nextProps.data;
    this.setState(this.state);
  },
  downImg() {
    let num = 0;
    for (let i = 0; i < this.state.orgCodeUrl.length; i++) {
      if (this.state.orgCodeUrl[i].url == this.state.previewImage) {
        num = i;
      }
    }
    if (num == this.state.orgCodeUrl.length - 1) {
      return message.warning("已经是最后一张了哦");
    }
    this.state.previewImage = this.state.orgCodeUrl[num + 1].url;
    this.setState({
      previewImage: this.state.previewImage,
      rotateDeg: 0,
    });
  },
  upImg() {
    let num = 0;
    for (let i = 0; i < this.state.orgCodeUrl.length; i++) {
      if (this.state.orgCodeUrl[i].url == this.state.previewImage) {
        num = i;
      }
    }
    if (num == 0) {
      return message.warning("已经是第一张了哦");
    }
    this.state.previewImage = this.state.orgCodeUrl[num - 1].url;
    this.setState({
      previewImage: this.state.previewImage,
      rotateDeg: 0,
    });
  },
  rotate() {
    let rotateDeg = this.state.rotateDeg + 90;
    this.setState({
      rotateDeg,
    });
  },
  render() {
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
    };
    return (
      <Modal
        className="admin-desc-content"
        footer=""
        title="开具发票申请单"
        width="900px"
        visible={this.props.visible}
        onCancel={this.props.onCancel}
      >
        <Form
          layout="horizontal"
          id="demand-form"
          style={{ paddingBottom: "40px" }}
        >
          <Spin spinning={this.props.loading}>
            <div className="clearfix">
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="合同编号"
                >
                  <span>{this.state.contractNo}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="备注"
                >
                  <span>{this.state.remarks}</span>
                </FormItem>
              </div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label={
                    <span>
                      <strong style={{ color: "#f00" }}>*</strong>省内/外
                    </span>
                  }
                >
                  <span>{getProvinceA(this.state.type)}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label={
                    <span>
                      <strong style={{ color: "#f00" }}>*</strong>特批
                    </span>
                  }
                >
                  <span>{this.state.approval === 0 ? "否" : "是"}</span>
                </FormItem>
              </div>
              <hr
                style={{
                  border: "1px dashed #aaa",
                  width: "90%",
                  margin: "auto",
                }}
              />
              <div style={{ marginTop: "13px", marginLeft: "16px" }}>
                <span style={{ fontSize: "14px" }}>发票内容</span>
              </div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label={
                    <span>
                      <strong style={{ color: "#f00" }}>*</strong>发票类型
                    </span>
                  }
                >
                  <span>
                    {this.state.invoiceType === 0
                      ? "增值税专用发票"
                      : this.state.invoiceType === 1
                      ? "增值税普通发票"
                      : "其他"}
                  </span>
                </FormItem>
              </div>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label={
                    <span>
                      <strong style={{ color: "#f00" }}>*</strong>单位名称
                    </span>
                  }
                >
                  <span>{this.state.unitName}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label={
                    <span>
                      <strong style={{ color: "#f00" }}>*</strong>税号
                    </span>
                  }
                >
                  <span>{this.state.taxNumber}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label={
                    <span>
                      <strong style={{ color: "#f00" }}>*</strong>
                      开票金额(万元)
                    </span>
                  }
                >
                  <span>{this.state.amount}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label={
                    <span>
                      <strong style={{ color: "#f00" }}>*</strong>
                      开户行银行账号
                    </span>
                  }
                >
                  <span>{this.state.banks}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label={
                    <span>
                      <strong style={{ color: "#f00" }}>*</strong>
                      开票内容及说明
                    </span>
                  }
                >
                  <span>{this.state.content}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label={
                    <span>
                      <strong style={{ color: "#f00" }}>*</strong>单位地址
                    </span>
                  }
                >
                  <span>{this.state.unitAddress}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="备注"
                >
                  <span>{this.state.invoiceRemarks}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label={
                    <span>
                      <strong style={{ color: "#f00" }}>*</strong>单位电话
                    </span>
                  }
                >
                  <span>{this.state.unitMobile}</span>
                </FormItem>
              </div>
              <div className="clearfix">
                <FormItem
                  labelCol={{ span: 4 }}
                  wrapperCol={{ span: 18 }}
                  label={
                    <span>
                      <strong style={{ color: "#f00" }}>*</strong>附件
                    </span>
                  }
                >
                  <Upload
                    className="demandDetailShow-upload"
                    listType="picture-card"
                    fileList={this.state.orgCodeUrl}
                    onPreview={(file) => {
                      this.setState({
                        previewImage: file.url || file.thumbUrl,
                        previewVisible: true,
                      });
                    }}
                  />
                  {/*<div style={{paddingTop:'10px',paddingBottom:'10px'}}>*/}
                  {/*  <ImgList fileList={this.state.orgCodeUrl} ItemWidth={'96px'}/>*/}
                  {/*</div>*/}
                  <Modal
                    maskClosable={false}
                    footer={null}
                    width={"50%"}
                    visible={this.state.previewVisible}
                    onCancel={() => {
                      this.setState({ previewVisible: false, rotateDeg: 0 });
                    }}
                  >
                    <img
                      alt=""
                      style={{ width: "100%" }}
                      src={this.state.previewImage || ""}
                    />
                    <Button
                      onClick={this.rotate}
                      style={{
                        position: "relative",
                        left: "50%",
                        transform: "translateX(-50%)",
                      }}
                    >
                      旋转
                    </Button>
                    <Button
                      onClick={this.upImg}
                      style={{
                        position: "absolute",
                        left: -81,
                        top: "50%",
                        transform: "translateY(-50%)",
                      }}
                    >
                      上一张
                    </Button>
                    <Button
                      onClick={this.downImg}
                      style={{
                        position: "absolute",
                        right: -81,
                        top: "50%",
                        transform: "translateY(-50%)",
                      }}
                    >
                      下一张
                    </Button>
                  </Modal>
                </FormItem>
              </div>
              <hr
                style={{
                  border: "1px dashed #aaa",
                  width: "90%",
                  margin: "auto",
                }}
              />
              <div className="clearfix" style={{ marginTop: "10px" }}>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="发票是否邮寄:"
                >
                  <span>{this.state.post === 0 ? "是" : "否"}</span>
                </FormItem>
              </div>
              {this.state.post === 0 ? (
                <div>
                  <div className="clearfix">
                    <FormItem
                      className="half-item"
                      {...formItemLayout}
                      label="收信人姓名"
                    >
                      <span>{this.state.addressee}</span>
                    </FormItem>
                    <FormItem
                      className="half-item"
                      {...formItemLayout}
                      label="电话"
                    >
                      <span>{this.state.addresseeMobile}</span>
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      className="half-item"
                      {...formItemLayout}
                      label="省-市-区"
                    >
                      <span>
                        {getprovince(this.state.addresseeProvince)}/
                        {getprovince(this.state.addresseeCity)}/
                        {getprovince(this.state.addresseeArea)}
                      </span>
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      className="half-item"
                      {...formItemLayout}
                      label="详细地址"
                    >
                      <span>{this.state.recipientAddress}</span>
                    </FormItem>
                  </div>
                </div>
              ) : (
                ""
              )}
              <FormItem
                className="half-item"
                {...formItemLayout}
                label={
                  <span>
                    <strong style={{ color: "#f00" }}>*</strong>开票金额总计
                  </span>
                }
              >
                <span>{this.state.alreadyAmount}万元</span>
              </FormItem>
            </div>
          </Spin>
        </Form>
      </Modal>
    );
  },
});

export default KaiPiaoModal;