vip.jsx 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498
  1. import React, { Component } from "react";
  2. import { AutoComplete, Button, Form, Input, message, Modal, Select, Spin } from "antd";
  3. import $ from "jquery";
  4. import ImgList from "../../common/imgList";
  5. import { splitUrl } from "../../tools";
  6. const FormItem = Form.Item;
  7. const formItemLayout = {
  8. labelCol: { span: 8 },
  9. wrapperCol: { span: 14 },
  10. };
  11. const PicturesWall = React.createClass({
  12. getInitialState() {
  13. return {
  14. previewVisible: false,
  15. previewImage: "",
  16. fileList: this.props.pictureUrl,
  17. };
  18. },
  19. getDefaultProps() {
  20. return {
  21. changeClick: this.modifyChange,
  22. };
  23. },
  24. handleCancel() {
  25. this.setState({ previewVisible: false });
  26. },
  27. handlePreview(file) {
  28. this.setState({
  29. previewImage: file.url || file.thumbUrl,
  30. previewVisible: true,
  31. });
  32. },
  33. handleChange(info) {
  34. let fileList = info.fileList;
  35. this.setState({ fileList });
  36. this.props.fileList(fileList);
  37. },
  38. componentWillReceiveProps(nextProps) {
  39. this.state.fileList = nextProps.pictureUrl;
  40. },
  41. render() {
  42. const { fileList } = this.state;
  43. return (
  44. <div style={{ display: "inline-block" }}>
  45. <ImgList
  46. domId={this.props.domId}
  47. uploadConfig={{
  48. action: globalConfig.context + "/api/admin/orderProject/uploadMemberFile",
  49. data: { sign: "order_invoice_file" },
  50. multiple: true,
  51. listType: "picture-card",
  52. }}
  53. onChange={(infor) => {
  54. this.handleChange(infor);
  55. }}
  56. fileList={fileList}
  57. />
  58. </div>
  59. );
  60. },
  61. });
  62. class ProjectOperationVip extends Component {
  63. constructor(props) {
  64. super(props);
  65. this.state = {
  66. commodityName: '',
  67. commodityQuantity: '',
  68. patentType: 0,
  69. officialCost: '',
  70. costReduction: '',
  71. commodityPrice: '',
  72. main: '',
  73. taskComment: '',
  74. declarationBatch: '',
  75. ifCertificationFee: '',
  76. displayFees: "none",
  77. customerArr: [],
  78. patentTypeList: [],
  79. loading: false,
  80. patentTransfer: props.dataInfor ? props.dataInfor.patentTransfer : 0, //收否为专利转让 0 否 1 是
  81. orgCodeUrl: [],
  82. }
  83. this.onSubmit = this.onSubmit.bind(this);
  84. this.httpChange = this.httpChange.bind(this);
  85. this.selectAuto = this.selectAuto.bind(this);
  86. this.setValue = this.setValue.bind(this);
  87. this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
  88. }
  89. componentDidMount() {
  90. this.setValue();
  91. }
  92. setValue() {
  93. const { dataInfor } = this.props;
  94. if (!(dataInfor && Object.keys(dataInfor).length > 0)) { return; }
  95. this.setState({
  96. fid: dataInfor.id,
  97. commodityId: dataInfor.commodityId, //项目ID
  98. commodityName: dataInfor.commodityName, //项目名称
  99. commodityQuantity: dataInfor.commodityQuantity, // 数量
  100. memberType: dataInfor.memberType.toString(),// 付款情况
  101. taskComment: dataInfor.taskComment, // 备注
  102. orgCodeUrl: dataInfor.pictureUrl ? splitUrl(dataInfor.pictureUrl, ",", globalConfig.avatarHost + "/upload") : [],// 附件
  103. });
  104. }
  105. //
  106. getOrgCodeUrl(e) {
  107. this.setState({ orgCodeUrl: e });
  108. }
  109. // 新建会员项目
  110. onSubmit() {
  111. let pictureUrl = [];
  112. if (this.state.orgCodeUrl.length) {
  113. let picArr = [];
  114. this.state.orgCodeUrl.map(function (item) {
  115. if (
  116. item.response &&
  117. item.response.data &&
  118. item.response.data.length
  119. ) {
  120. picArr.push(item.response.data);
  121. }
  122. });
  123. pictureUrl = picArr.join(",");
  124. }
  125. if (this.state.commodityId === undefined || !this.state.commodityId) {
  126. message.warning("服务名称不匹配!");
  127. return
  128. }
  129. let reg = /^([0]|[1-9][0-9]*)$/;
  130. if (
  131. !this.state.commodityQuantity ||
  132. !reg.test(this.state.commodityQuantity)
  133. ) {
  134. message.warning("请输入正确商品数量!");
  135. return
  136. }
  137. if (this.state.memberType === undefined) {
  138. message.warning("请选择付款情况!");
  139. return
  140. }
  141. if (this.state.memberType == "1" || this.state.memberType == "2") {
  142. if (typeof pictureUrl !== "string") {
  143. message.warning("请上传附件!");
  144. return
  145. }
  146. }
  147. this.setState({
  148. loading: true,
  149. });
  150. let infor = {
  151. orderNo: this.props.orderNo, //订单编号
  152. commodityId: this.state.commodityId, //项目编号
  153. commodityName: this.state.commodityName, //项目名称
  154. commodityQuantity: this.state.commodityQuantity, //商品数量
  155. commodityPrice: 0, //签单总价
  156. taskComment: this.state.taskComment, //服务说明
  157. memberType: this.state.memberType,//会员付款状态
  158. pictureUrl: pictureUrl.length ? pictureUrl : "",//附件
  159. }
  160. $.ajax({
  161. method: "POST",
  162. dataType: "json",
  163. crossDomain: false,
  164. url: globalConfig.context + "/api/admin/orderProject/addMemberProject",
  165. data: infor,
  166. }).done(
  167. function (data) {
  168. this.setState({
  169. loading: false,
  170. });
  171. if (!data.error.length) {
  172. Modal.success({
  173. title: '保存成功!',
  174. content: (
  175. <div>
  176. 已提出会员项目申请!请在
  177. <span style={{ color: "red" }}>“订单管理-我的会员项目“</span>
  178. 跟进查看会员项目的审核状态,审核通过,即表示添加会员项目完成!!!
  179. </div>),
  180. });
  181. this.props.onCancel();
  182. } else {
  183. message.warning(data.error[0].message);
  184. }
  185. }.bind(this)
  186. );
  187. }
  188. // 修改会员项目
  189. onChange() {
  190. let pictureUrl = [];
  191. if (this.state.orgCodeUrl.length) {
  192. let picArr = [];
  193. this.state.orgCodeUrl.map(function (item) {
  194. if (
  195. item.response &&
  196. item.response.data &&
  197. item.response.data.length
  198. ) {
  199. picArr.push(item.response.data);
  200. }
  201. });
  202. pictureUrl = picArr.join(",");
  203. }
  204. if (this.state.commodityId === undefined || !this.state.commodityId) {
  205. message.warning("服务名称不匹配!");
  206. return
  207. }
  208. let reg = /^([0]|[1-9][0-9]*)$/;
  209. if (
  210. !this.state.commodityQuantity ||
  211. !reg.test(this.state.commodityQuantity)
  212. ) {
  213. message.warning("请输入正确商品数量!");
  214. return false;
  215. }
  216. if (this.state.memberType === undefined) {
  217. message.warning("请选择付款情况!");
  218. return
  219. }
  220. if (this.state.memberType == "1" || this.state.memberType == "2") {
  221. if (typeof pictureUrl !== "string") {
  222. message.warning("请上传附件!");
  223. return
  224. }
  225. }
  226. this.setState({
  227. loading: true,
  228. });
  229. $.ajax({
  230. method: "POST",
  231. dataType: "json",
  232. crossDomain: false,
  233. url: globalConfig.context + "/api/admin/orderProject/updateMemberProject",
  234. data: {
  235. id: this.state.fid, //任务ID
  236. commodityId: this.state.commodityId, //项目ID
  237. commodityName: this.state.commodityName, //项目名称
  238. orderNo: this.props.orderNo, //订单编号
  239. commodityQuantity: this.state.commodityQuantity, //数量
  240. taskComment: this.state.taskComment, //备注
  241. memberType: this.state.memberType,//会员付款状态
  242. pictureUrl: pictureUrl.length ? pictureUrl : "",//附件
  243. },
  244. }).done(
  245. function (data) {
  246. this.setState({
  247. loading: false,
  248. });
  249. if (!data.error.length) {
  250. message.success("保存成功!");
  251. this.props.onCancel();
  252. } else {
  253. message.warning(data.error[0].message);
  254. }
  255. }.bind(this)
  256. );
  257. }
  258. httpChange(e) {
  259. this.setState({
  260. commodityName: e,
  261. });
  262. if (e.length >= 1) {
  263. this.supervisor(e);
  264. }
  265. }
  266. //加载(自动补全)
  267. supervisor(e) {
  268. //服务名称自动补全
  269. let api = "/api/admin/order/getBusinessProjectByName";
  270. $.ajax({
  271. method: "get",
  272. dataType: "json",
  273. crossDomain: false,
  274. url: globalConfig.context + api,
  275. data: {
  276. businessName: e,
  277. cname: "高新会员服务",
  278. },
  279. success: function (data) {
  280. let thedata = data.data;
  281. if (!thedata) {
  282. if (data.error && data.error.length) {
  283. message.warning(data.error[0].message);
  284. }
  285. thedata = {};
  286. }
  287. this.setState({
  288. customerArr: thedata,
  289. });
  290. }.bind(this),
  291. }).always(
  292. function () {
  293. }.bind(this)
  294. );
  295. }
  296. //上级主管输入框失去焦点是判断客户是否存在
  297. selectAuto(value) {
  298. const { customerArr } = this.state;
  299. const newdataSources = JSON.stringify(customerArr) == "{}" ? [] : customerArr;
  300. this.setState({
  301. commodityName: value,
  302. commodityId: newdataSources.find((item) => item.bname == value).id,
  303. });
  304. }
  305. render() {
  306. let options = this.state.customerArr.map((group, index) => (
  307. <Select.Option key={index} value={group.bname}>
  308. {group.bname}
  309. </Select.Option>
  310. ));
  311. const { readOnly } = this.props;
  312. return (
  313. <Modal
  314. maskClosable={false}
  315. visible={this.props.visible}
  316. onOk={this.props.onCancel}
  317. onCancel={this.props.onCancel}
  318. width="900px"
  319. title={readOnly ? "会员详情" : !this.state.fid ? "添加会员项目" : "编辑会员项目"}
  320. footer=""
  321. className="admin-desc-content"
  322. >
  323. <Form
  324. layout="horizontal"
  325. >
  326. <Spin spinning={this.state.loading}>
  327. <div className="clearfix">
  328. <FormItem
  329. className="half-item"
  330. {...formItemLayout}
  331. label="服务名称"
  332. >
  333. {readOnly ? this.state.commodityName :
  334. <AutoComplete
  335. className="certain-category-search"
  336. dropdownClassName="certain-category-search-dropdown"
  337. dropdownMatchSelectWidth={false}
  338. style={{ width: "200px" }}
  339. dataSource={options}
  340. placeholder="输入服务名称"
  341. value={this.state.commodityName}
  342. onChange={this.httpChange}
  343. filterOption={true}
  344. onSelect={this.selectAuto}
  345. >
  346. <Input />
  347. </AutoComplete>}
  348. <span className="mandatory">*</span>
  349. </FormItem>
  350. <FormItem
  351. className="half-item"
  352. {...formItemLayout}
  353. label="服务数量"
  354. >
  355. {readOnly ? this.state.commodityQuantity :
  356. <Input
  357. placeholder="请输入服务数量"
  358. value={this.state.commodityQuantity}
  359. style={{ width: "200px" }}
  360. onChange={(e) => {
  361. this.setState({ commodityQuantity: e.target.value });
  362. }}
  363. ref="commodityQuantity"
  364. />}
  365. <span className="mandatory">*</span>
  366. </FormItem>
  367. <div
  368. style={{
  369. marginTop: "33px",
  370. color: "red",
  371. textAlign: "right",
  372. position: "relative",
  373. top: "-8",
  374. left: "0"
  375. }}
  376. >如会员项目,服务一年,请填写1,服务二年,请填写2,依次类推</div>
  377. <FormItem
  378. className="half-item"
  379. {...formItemLayout}
  380. label="付款情况"
  381. >
  382. {readOnly ?
  383. [
  384. { value: "0", key: "已付会员节点全款" },
  385. { value: "1", key: "已付部分期款,需特批" },
  386. { value: "2", key: "未付款,需特批" }][this.state.memberType] :
  387. <Select
  388. placeholder="选择付款情况"
  389. style={{ width: "200px" }}
  390. value={this.state.memberType}
  391. onChange={(e) => {
  392. this.setState({ memberType: e });
  393. }}
  394. >
  395. {[
  396. { value: "0", key: "已付会员节点全款" },
  397. { value: "1", key: "已付部分期款,需特批" },
  398. { value: "2", key: "未付款,需特批" }].map(function (item) {
  399. return (
  400. <Select.Option key={item.value}>
  401. {item.key}
  402. </Select.Option>
  403. );
  404. })}
  405. </Select>}
  406. <span className="mandatory">*</span>
  407. </FormItem>
  408. {
  409. (this.state.memberType == "1" || this.state.memberType == "2") &&
  410. <div className="clearfix">
  411. <FormItem
  412. labelCol={{ span: 4 }}
  413. wrapperCol={{ span: 16 }}
  414. label="上传附件"
  415. >
  416. <PicturesWall
  417. domId={'vip'}
  418. fileList={this.getOrgCodeUrl}
  419. pictureUrl={this.state.orgCodeUrl}
  420. />
  421. <span className="mandatory">*</span>
  422. </FormItem>
  423. <div style={{ color: "red", marginLeft: 144, marginBottom: 15 }}>
  424. 特批需上传附件图,请上传客户同意我方继续服务并安排给我司付款的聊天记录截图,
  425. <p>若没有客户同意继续服务及会安排付款的截图,特派流程将无法走下去,以免造成派单耽搁</p>
  426. </div>
  427. </div>
  428. }
  429. <div className="clearfix">
  430. <FormItem
  431. labelCol={{ span: 4 }}
  432. wrapperCol={{ span: 16 }}
  433. label="项目说明"
  434. >
  435. {readOnly ? this.state.taskComment :
  436. <Input
  437. type="textarea"
  438. placeholder="如:派2022年会员服务,总会员服务三年,客户付款情况说明"
  439. autosize={{ minRows: 4 }}
  440. value={this.state.taskComment}
  441. onChange={(e) => {
  442. this.setState({ taskComment: e.target.value });
  443. }}
  444. />}
  445. </FormItem>
  446. <div style={{ color: "red", marginLeft: 144 }}>
  447. 请详细说明项目服务时间,总服务时间及付款情况,如:<span style={{ color: "#333" }}>派2022年会员服务,总会员服务三年,客户付款情况说明</span>
  448. <p>未付款时,需进行特批审核,请详细说明预计付款时间等详细情况</p>
  449. </div>
  450. </div>
  451. {readOnly ? null : <FormItem
  452. wrapperCol={{ span: 12, offset: 4 }}
  453. className="half-middle"
  454. >
  455. <Button
  456. className="submitSave"
  457. type="primary"
  458. onClick={() => {
  459. if (!this.state.fid) {
  460. this.onSubmit()
  461. } else {
  462. this.onChange()
  463. }
  464. }}
  465. >
  466. 保存
  467. </Button>
  468. <Button
  469. className="submitSave"
  470. type="ghost"
  471. onClick={this.props.onCancel}
  472. >
  473. 取消
  474. </Button>
  475. </FormItem>}
  476. </div>
  477. </Spin>
  478. </Form>
  479. </Modal>
  480. )
  481. }
  482. }
  483. export default ProjectOperationVip;