kede-client/js/component/common/projectOperation/vip.jsx

import React, { Component } from "react";
import { AutoComplete, Button, Form, Input, message, Modal, Select, Spin, Tag, Radio, DatePicker } from "antd";
import $ from "jquery";
import moment from "moment";
import ImgList from "../../common/imgList";
import { splitUrl } from "../../tools";
import { vipYear } from "../../dataDic";

const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;


const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 14 },
};

const PicturesWall = React.createClass({
  getInitialState() {
    return {
      previewVisible: false,
      previewImage: "",
      fileList: this.props.pictureUrl,
    };
  },
  getDefaultProps() {
    return {
      changeClick: this.modifyChange,
    };
  },
  handleCancel() {
    this.setState({ previewVisible: false });
  },
  handlePreview(file) {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  },
  handleChange(info) {
    let fileList = info.fileList;
    this.setState({ fileList });
    this.props.fileList(fileList);
  },
  componentWillReceiveProps(nextProps) {
    this.state.fileList = nextProps.pictureUrl;
  },
  render() {
    const { fileList } = this.state;
    return (
      <div style={{ display: "inline-block" }}>
        <ImgList
          domId={this.props.domId}
          uploadConfig={{
            action: globalConfig.context + "/api/admin/orderProject/uploadMemberFile",
            data: { sign: "order_invoice_file" },
            multiple: true,
            listType: "picture-card",
          }}
          onChange={(infor) => {
            this.handleChange(infor);
          }}
          fileList={fileList}
        />
      </div>
    );
  },
});

class ProjectOperationVip extends Component {
  constructor(props) {
    super(props);
    this.state = {
      commodityName: undefined,
      commodityQuantity: 1,
      patentType: 0,
      officialCost: '',
      costReduction: '',
      commodityPrice: '',
      main: '',
      taskComment: '',
      declarationBatch: '',
      ifCertificationFee: '',
      displayFees: "none",
      customerArr: [],
      patentTypeList: [],
      loading: false,
      patentTransfer: props.dataInfor ? props.dataInfor.patentTransfer : 0, //收否为专利转让 0 否 1 是
      orgCodeUrl: [],
      serviceLife: [],
      histYear: [], //已派年份
      serviceYear: undefined, //本次派单
      isEdit: false,//是否可编辑
      contractTerm: [],//合同期
      addyear: undefined,//
      isGive: undefined,//是否赠送
      cPeriod: false, // 合同期是否可编辑
    }
    this.onSubmit = this.onSubmit.bind(this);
    this.httpChange = this.httpChange.bind(this);
    this.selectAuto = this.selectAuto.bind(this);
    this.setValue = this.setValue.bind(this);
    this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
  }

  componentDidMount() {
    this.setValue();
  }

  setValue() {
    const { dataInfor } = this.props;
    if (!(dataInfor && Object.keys(dataInfor).length > 0)) {

    } else {
      this.setState({
        fid: dataInfor.id,
        commodityId: dataInfor.commodityId, //项目ID
        commodityName: dataInfor.commodityName, //项目名称
        commodityQuantity: dataInfor.commodityQuantity, // 数量
        memberType: dataInfor.memberType.toString(),// 付款情况
        taskComment: dataInfor.taskComment, // 备注
        orgCodeUrl: dataInfor.pictureUrl ? splitUrl(dataInfor.pictureUrl, ",", globalConfig.avatarHost + "/upload") : [],// 附件
        yearSum: dataInfor.yearSum && dataInfor.yearSum.toString() || undefined,//会员总服务年限
        serviceLife: JSON.parse(dataInfor.serviceLife) || [],//会员服务年限
        serviceYear: dataInfor.serviceYear || undefined,//本次派单
        contractTerm: (!dataInfor.contractTerm || (dataInfor.contractTerm.indexOf("-") == -1)) ? [] : JSON.parse(dataInfor.contractTerm),//合同期
      });
    }
  }
  //
  getOrgCodeUrl(e) {
    this.setState({ orgCodeUrl: e });
  }
  // 新建会员项目
  onSubmit() {

    let pictureUrl = [];
    if (this.state.orgCodeUrl.length) {
      let picArr = [];
      this.state.orgCodeUrl.map(function (item) {
        if (
          item.response &&
          item.response.data &&
          item.response.data.length
        ) {
          picArr.push(item.response.data);
        }
      });
      pictureUrl = picArr.join(",");
    }

    if (this.state.commodityId === undefined || !this.state.commodityId) {
      message.warning("服务名称不匹配！");
      return
    }
    let reg = /^([0]|[1-9][0-9]*)$/;
    if (
      !this.state.commodityQuantity ||
      !reg.test(this.state.commodityQuantity)
    ) {
      message.warning("请输入正确商品数量！");
      return
    }
    if (this.state.memberType === undefined) {
      message.warning("请选择付款情况！");
      return
    }
    if (this.state.yearSum === undefined) {
      message.warning("请选择会员总服务年限！");
      return
    }
    if (this.state.serviceLife.length === 0) {
      message.warning("请添加会员服务年限！");
      return
    }
    if (this.state.serviceLife.length != this.state.yearSum) {
      message.warning("会员服务年限与总年限不符合！");
      return
    }
    if (this.state.serviceYear === undefined) {
      message.warning("请选择本次派单年份！");
      return
    }
    if (this.state.contractTerm.length === 0) {
      message.warning("请添加合同期！");
      return
    }
    if (this.state.memberType == "1" || this.state.memberType == "2") {
      if (typeof pictureUrl !== "string") {
        message.warning("请上传附件！");
        return
      }
    }
    this.setState({
      loading: true,
    });
    let infor = {
      orderNo: this.props.orderNo, //订单编号
      commodityId: this.state.commodityId, //项目编号
      commodityName: this.state.commodityName, //项目名称
      commodityQuantity: this.state.commodityQuantity, //商品数量
      commodityPrice: 0, //签单总价
      taskComment: this.state.taskComment, //服务说明
      memberType: this.state.memberType,//会员付款状态
      yearSum: this.state.yearSum,//会员总服务年限
      serviceLife: JSON.stringify(this.state.serviceLife),//会员服务年限
      serviceYear: this.state.serviceYear,//本次派单
      contractTerm: JSON.stringify(this.state.contractTerm),//合同期
      pictureUrl: pictureUrl.length ? pictureUrl : "",//附件
    }
    $.ajax({
      method: "POST",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderProject/addMemberProject",
      data: infor,
    }).done(
      function (data) {
        this.setState({
          loading: false,
        });
        if (!data.error.length) {
          Modal.success({
            title: '保存成功！',
            content: (
              <div>
                已提出会员项目申请！请在
                <span style={{ color: "red" }}>“订单管理-我的会员项目“</span>
                跟进查看会员项目的审核状态，审核通过，即表示添加会员项目完成！！！
              </div>),
          });
          this.props.onCancel();
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    );
  }
  // 修改会员项目
  onChange() {

    let pictureUrl = [];
    if (this.state.orgCodeUrl.length) {
      let picArr = [];
      this.state.orgCodeUrl.map(function (item) {
        if (
          item.response &&
          item.response.data &&
          item.response.data.length
        ) {
          picArr.push(item.response.data);
        }
      });
      pictureUrl = picArr.join(",");
    }

    if (this.state.commodityId === undefined || !this.state.commodityId) {
      message.warning("服务名称不匹配！");
      return
    }
    let reg = /^([0]|[1-9][0-9]*)$/;
    if (
      !this.state.commodityQuantity ||
      !reg.test(this.state.commodityQuantity)
    ) {
      message.warning("请输入正确商品数量！");
      return false;
    }
    if (this.state.memberType === undefined) {
      message.warning("请选择付款情况！");
      return
    }
    if (this.state.yearSum === undefined) {
      message.warning("请选择会员总服务年限！");
      return
    }
    if (this.state.serviceLife.length === 0) {
      message.warning("请添加会员服务年限！");
      return
    }
    if (this.state.serviceLife.length != this.state.yearSum) {
      message.warning("会员服务年限与总年限不符合！");
      return
    }
    if (this.state.serviceYear === undefined) {
      message.warning("请选择本次派单年份！");
      return
    }
    if (this.state.contractTerm.length === 0) {
      message.warning("请添加合同期！");
      return
    }
    if (this.state.memberType == "1" || this.state.memberType == "2") {
      if (typeof pictureUrl !== "string") {
        message.warning("请上传附件！");
        return
      }
    }
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "POST",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderProject/updateMemberProject",
      data: {
        id: this.state.fid, //任务ID
        commodityId: this.state.commodityId, //项目ID
        commodityName: this.state.commodityName, //项目名称
        orderNo: this.props.orderNo, //订单编号
        commodityQuantity: this.state.commodityQuantity, //数量
        taskComment: this.state.taskComment, //备注
        memberType: this.state.memberType,//会员付款状态
        yearSum: this.state.yearSum,//会员总服务年限
        serviceLife: JSON.stringify(this.state.serviceLife),//会员服务年限
        serviceYear: this.state.serviceYear,//本次派单
        contractTerm: JSON.stringify(this.state.contractTerm),//合同期
        pictureUrl: pictureUrl.length ? pictureUrl : "",//附件
      },
    }).done(
      function (data) {
        this.setState({
          loading: false,
        });
        if (!data.error.length) {
          message.success("保存成功！");
          this.props.onCancel();
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    );
  }
  //
  httpChange(e) {
    this.setState({
      commodityName: e,
    });
    if (e.length >= 1) {
      this.supervisor(e);
    }
  }
  //加载(自动补全)
  supervisor(e) {
    //服务名称自动补全
    let api = "/api/admin/order/getBusinessProjectByName";
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + api,
      data: {
        businessName: e,
        cname: "高新会员服务",
      },
      success: function (data) {
        let thedata = data.data;
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
          thedata = {};
        }
        this.setState({
          customerArr: thedata,
        });
      }.bind(this),
    }).always(
      function () {

      }.bind(this)
    );
  }
  //
  selectAuto(value) {
    const { customerArr } = this.state;
    const { newData } = this.props
    const newdataSources = JSON.stringify(customerArr) == "{}" ? [] : customerArr;
    let cid = newdataSources.find((item) => item.bname == value).commodityId
    this.setState({
      commodityName: value,
      commodityId: cid,
      histYear: [],
    });
    if (newData && newData.length > 0) {
      let llist = []
      for (var i = 0; i < newData.length; i++) {
        if (newData[i].commodityId == cid) {
          llist.push(newData[i].serviceYear)
        }
      }
      this.setState({
        histYear: llist
      })
      for (var i = newData.length - 1; i >= 0; i--) {
        if (newData[i].commodityId == cid) {
          this.setState({
            yearSum: newData[i].yearSum.toString(), // 会员总服务年限
            serviceLife: JSON.parse(newData[i].serviceLife) || [], // 会员服务年限
            isEdit: true, // 不可编辑
            cPeriod: !newData[i].contractTerm ? false : true, //合同期编辑
          })
        } else {
          this.setState({
            yearSum: undefined,
            serviceLife: [],
            isEdit: false, // 可编辑
            cPeriod: false,
          })
        }
        return
      }
    }
  }

  handleClose(removedTag) {
    let serviceLife = this.state.serviceLife.filter(tag => { return tag !== removedTag });
    this.setState({
      serviceLife,
      // commodityQuantity: serviceLife.length == 0 ? undefined : serviceLife.length,
      yearSum: serviceLife.length == 0 ? undefined : serviceLife.length.toString(),
      serviceYear: undefined
    });
  }


  render() {
    let options = this.state.customerArr.map((group, index) => (
      <Select.Option key={index} value={group.bname}>
        {group.bname}
      </Select.Option>
    ));
    // let contList = vipYear.map(its => (
    //   <Option key={its}>{its}</Option>
    // ));
    const { readOnly } = this.props;
    const { histYear, isEdit, cPeriod } = this.state
    const { RangePicker } = DatePicker;
    return (
      <Modal
        maskClosable={false}
        visible={this.props.visible}
        onOk={this.props.onCancel}
        onCancel={this.props.onCancel}
        width="900px"
        title={readOnly ? "会员详情" : !this.state.fid ? "添加会员项目" : "编辑会员项目"}
        footer=""
        className="admin-desc-content"
      >
        <Form
          layout="horizontal"
        >
          <Spin spinning={this.state.loading}>
            <div className="clearfix">
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="服务名称"
              >
                {readOnly ? this.state.commodityName :
                  <AutoComplete
                    className="certain-category-search"
                    dropdownClassName="certain-category-search-dropdown"
                    dropdownMatchSelectWidth={false}
                    style={{ width: "200px" }}
                    dataSource={options}
                    placeholder="输入服务名称"
                    value={this.state.commodityName}
                    onChange={this.httpChange}
                    filterOption={true}
                    onSelect={this.selectAuto}
                  >
                    <Input />
                  </AutoComplete>}
                {!readOnly && <span className="mandatory">*</span>}
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="服务数量"
              >
                {readOnly ? this.state.commodityQuantity :
                  <Input
                    placeholder="请输入服务数量"
                    value={this.state.commodityQuantity}
                    style={{ width: "200px" }}
                    disabled={true}
                    onChange={(e) => {
                      this.setState({ commodityQuantity: e.target.value });
                    }}
                    ref="commodityQuantity"
                  />}
                {!readOnly && <span className="mandatory">*</span>}
                <div
                  style={{
                    color: "red",
                    position: "relative",
                    left: "0"
                  }}
                >注：会员项目单次限制，只能派一年</div>
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="付款情况"
              >
                {readOnly ?
                  [
                    { value: "0", key: "已付会员节点全款" },
                    { value: "1", key: "已付部分期款，需特批" },
                    { value: "2", key: "未付款，需特批" }][this.state.memberType] :
                  <Select
                    placeholder="选择付款情况"
                    style={{ width: "200px" }}
                    value={this.state.memberType}
                    onChange={(e) => {
                      this.setState({ memberType: e });
                    }}
                  >
                    {[
                      { value: "0", key: "已付会员节点全款" },
                      { value: "1", key: "已付部分期款，需特批" },
                      { value: "2", key: "未付款，需特批" }].map(function (item) {
                        return (
                          <Select.Option key={item.value} value={item.value}>
                            {item.key}
                          </Select.Option>
                        );
                      })}
                  </Select>}
                {!readOnly && <span className="mandatory">*</span>}
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="会员总服务年限"
              >
                {
                  this.state.yearSum == null ? "" :
                    [
                      { value: "0", key: "" },
                      { value: "1", key: "一年" },
                      { value: "2", key: "二年" },
                      { value: "3", key: "三年" },
                      { value: "4", key: "四年" },
                      { value: "5", key: "五年" },
                      { value: "6", key: "六年" },
                      { value: "7", key: "七年" },
                      { value: "8", key: "八年" },
                      { value: "9", key: "九年" },
                      { value: "10", key: "十年" },
                    ][this.state.yearSum]["key"]
                }
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="会员服务年限"
              >
                <div>
                  {
                    this.state.serviceLife.map((tag) =>
                      <Tag closable={!isEdit} key={tag} afterClose={() => this.handleClose(tag)}>
                        {tag}
                      </Tag>
                    )
                  }
                  {
                    !isEdit && (this.state.serviceLife.length < 10) &&
                    <Button
                      size="small"
                      type="primary"
                      onClick={() => {
                        this.setState({
                          addYears: true,
                          addyear: undefined,
                          isGive: undefined,
                        })
                      }}>
                      + 添加服务年限
                    </Button>
                  }
                </div>
                {/* {
                  readOnly ?
                    this.state.serviceLife.toString() :
                    <Select
                      disabled={isEdit}
                      mode="multiple"
                      style={{ width: '200px' }}
                      placeholder="请选择服务年限"
                      value={this.state.serviceLife}
                      onChange={(e) => {
                        this.setState({
                          serviceLife: e,
                          serviceYear: undefined,
                        })
                      }}
                    >
                      {contList}
                    </Select>
                } */}
                {/* {!readOnly && <span className="mandatory">*</span>} */}
              </FormItem>
              {
                this.state.serviceLife.length > 0 &&
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="本次派单"
                >
                  {readOnly ?
                    this.state.serviceYear :
                    <Select
                      placeholder="请选择本次派单年份"
                      style={{ width: "200px" }}
                      value={this.state.serviceYear}
                      onChange={(e) => {
                        console.log("==", e)
                        this.setState({ serviceYear: e });
                      }}
                    >
                      {this.state.serviceLife.length > 0 && this.state.serviceLife.map(function (item) {
                        return (
                          <Select.Option key={item} disabled={histYear.includes(item)}>
                            {item}
                          </Select.Option>
                        );
                      })}
                    </Select>}
                  {!readOnly && <span className="mandatory">*</span>}
                </FormItem>
              }
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="合同期"
              >
                {
                  readOnly ?
                    !!this.state.contractTerm ? this.state.contractTerm.toString().replace(",", "至") : "" :
                    <RangePicker
                      style={{ width: 200 }}
                      disabled={cPeriod}
                      value={[
                        this.state.contractTerm[0]
                          ? moment(this.state.contractTerm[0])
                          : null,
                        this.state.contractTerm[1]
                          ? moment(this.state.contractTerm[1])
                          : null,
                      ]}
                      onChange={(data, dataString) => {
                        this.setState({ contractTerm: dataString });
                      }}
                    />

                  // <Select
                  //   mode="multiple"
                  //   style={{ width: '200px' }}
                  //   placeholder="请选择合同期"
                  //   disabled={this.state.cPeriod}
                  //   value={this.state.contractTerm}
                  //   onChange={e => {
                  //     this.setState({
                  //       contractTerm: e,
                  //     })
                  //   }}
                  // >
                  //   {contList}
                  // </Select>
                }
                {!readOnly && <span className="mandatory">*</span>}
              </FormItem>
              {
                (this.state.memberType == "1" || this.state.memberType == "2") &&
                <div className="clearfix">
                  <FormItem
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 16 }}
                    label="上传附件"
                  >
                    <PicturesWall
                      domId={'vip'}
                      fileList={this.getOrgCodeUrl}
                      pictureUrl={this.state.orgCodeUrl}
                    />
                    {!readOnly && <span className="mandatory">*</span>}
                  </FormItem>
                  <div style={{ color: "red", marginLeft: 144, marginBottom: 15 }}>
                    特批需上传附件图，请上传客户同意我方继续服务并安排给我司付款的聊天记录截图，
                    <p>若没有客户同意继续服务及会安排付款的截图，特派流程将无法走下去，以免造成派单耽搁</p>
                  </div>
                </div>
              }
              <div className="clearfix">
                <FormItem
                  labelCol={{ span: 4 }}
                  wrapperCol={{ span: 16 }}
                  label="项目说明"
                >
                  {readOnly ? this.state.taskComment :
                    <Input
                      type="textarea"
                      placeholder="如：派2022年会员服务，总会员服务三年，客户付款情况说明"
                      autosize={{ minRows: 4 }}
                      value={this.state.taskComment}
                      onChange={(e) => {
                        this.setState({ taskComment: e.target.value });
                      }}
                    />}
                </FormItem>
                <div style={{ color: "red", marginLeft: 144 }}>
                  请详细说明项目服务时间，总服务时间及付款情况，如：<span style={{ color: "#333" }}>派2022年会员服务，总会员服务三年，客户付款情况说明</span>
                  <p>未付款时，需进行特批审核，请详细说明预计付款时间等详细情况</p>
                </div>
              </div>
              {readOnly ? null : <FormItem
                wrapperCol={{ span: 12, offset: 4 }}
                className="half-middle"
              >
                <Button
                  className="submitSave"
                  type="primary"
                  onClick={() => {
                    if (!this.state.fid) {
                      this.onSubmit()
                    } else {
                      this.onChange()
                    }
                  }}
                >
                  保存
                </Button>
                <Button
                  className="submitSave"
                  type="ghost"
                  onClick={this.props.onCancel}
                >
                  取消
                </Button>
              </FormItem>}
            </div>
          </Spin>
        </Form>
        {
          this.state.addYears &&
          <Modal
            title="添加服务年限"
            visible={this.state.addYears}
            okText="添加"
            onOk={() => {
              if (!this.state.addyear) {
                message.warn("请选择年份！")
                return
              }
              if (this.state.isGive == undefined) {
                message.warn("请选择是否赠送！")
                return
              }
              let slist = this.state.serviceLife
              if (this.state.isGive == 0) {
                slist.push(this.state.addyear)
              } else if (this.state.isGive == 1) {
                let newYear = this.state.addyear + "(赠)"
                slist.push(newYear)
              }
              this.setState({
                serviceLife: slist,
                yearSum: slist.length.toString(),
                addYears: false
              })
            }}
            onCancel={() => {
              this.setState({
                addYears: false
              })
            }}
          >
            <Select
              style={{ width: '200px', marginRight: 50 }}
              placeholder="请选择年份"
              onChange={e => {
                this.setState({
                  addyear: e,
                })
              }}
            >
              {
                vipYear.map(its => (
                  <Select.Option
                    key={its}
                    disabled={this.state.serviceLife.toString().includes(its)}
                  >{its}</Select.Option>
                ))
              }
            </Select>
            <RadioGroup
              onChange={e => {
                this.setState({
                  isGive: e.target.value
                })
              }}
              value={this.state.isGive}
            >
              <Radio value={0}>非赠送</Radio>
              <Radio value={1}>赠送</Radio>
            </RadioGroup>
          </Modal>
        }
      </Modal>
    )
  }
}

export default ProjectOperationVip;