| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818 | 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;
 |