vip.jsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
  1. import React, { Component } from "react";
  2. import { AutoComplete, Button, Form, Input, message, Modal, Radio, Select, Spin } from "antd";
  3. import $ from "jquery";
  4. const FormItem = Form.Item;
  5. const formItemLayout = {
  6. labelCol: { span: 8 },
  7. wrapperCol: { span: 14 },
  8. };
  9. class ProjectOperationVip extends Component {
  10. constructor(props) {
  11. super(props);
  12. this.state = {
  13. commodityName: '',
  14. commodityQuantity: '',
  15. patentType: 0,
  16. officialCost: '',
  17. costReduction: '',
  18. commodityPrice: '',
  19. main: '',
  20. taskComment: '',
  21. declarationBatch: '',
  22. ifCertificationFee: '',
  23. displayFees: "none",
  24. customerArr: [],
  25. patentTypeList: [],
  26. loading: false,
  27. patentTransfer: props.dataInfor ? props.dataInfor.patentTransfer : 0 //收否为专利转让 0 否 1 是
  28. }
  29. this.onSubmit = this.onSubmit.bind(this);
  30. this.httpChange = this.httpChange.bind(this);
  31. this.selectAuto = this.selectAuto.bind(this);
  32. this.setValue = this.setValue.bind(this);
  33. }
  34. componentDidMount() {
  35. this.setValue();
  36. }
  37. setValue() {
  38. const { dataInfor } = this.props;
  39. if (!(dataInfor && Object.keys(dataInfor).length > 0)) { return; }
  40. this.setState({
  41. fid: dataInfor.id,
  42. commodityId: dataInfor.commodityId, //项目ID
  43. commodityName: dataInfor.commodityName, //项目名称
  44. commodityQuantity: dataInfor.commodityQuantity, // 数量
  45. memberType: dataInfor.memberType.toString(),// 付款情况
  46. taskComment: dataInfor.taskComment, // 备注
  47. });
  48. }
  49. // 新建会员项目
  50. onSubmit() {
  51. if (this.state.commodityId === undefined || !this.state.commodityId) {
  52. message.warning("服务名称不匹配!");
  53. return
  54. }
  55. let reg = /^([0]|[1-9][0-9]*)$/;
  56. if (
  57. !this.state.commodityQuantity ||
  58. !reg.test(this.state.commodityQuantity)
  59. ) {
  60. message.warning("请输入正确商品数量!");
  61. return
  62. }
  63. if (this.state.memberType === undefined) {
  64. message.warning("请选择付款情况!");
  65. return
  66. }
  67. this.setState({
  68. loading: true,
  69. });
  70. let infor = {
  71. commodityId: this.state.commodityId, //项目编号
  72. orderNo: this.props.orderNo, //订单编号
  73. commodityName: this.state.commodityName, //项目名称
  74. commodityQuantity: this.state.commodityQuantity, //商品数量
  75. commodityPrice: 0, //签单总价
  76. taskComment: this.state.taskComment, //服务说明
  77. memberType: this.state.memberType,//会员付款状态
  78. }
  79. $.ajax({
  80. method: "POST",
  81. dataType: "json",
  82. crossDomain: false,
  83. url: globalConfig.context + "/api/admin/orderProject/addMemberProject",
  84. data: infor,
  85. }).done(
  86. function (data) {
  87. this.setState({
  88. loading: false,
  89. });
  90. if (!data.error.length) {
  91. Modal.success({
  92. title: '保存成功!',
  93. content: '已提出会员项目申请!请在“订单管理-我的会员项目”跟进查看会员项目的审核状态,审核通过,即表示添加会员项目完成!!!',
  94. });
  95. // message.success("保存成功!");
  96. this.props.onCancel();
  97. } else {
  98. message.warning(data.error[0].message);
  99. }
  100. }.bind(this)
  101. );
  102. }
  103. // 修改会员项目
  104. onChange() {
  105. if (this.state.commodityId === undefined || !this.state.commodityId) {
  106. message.warning("服务名称不匹配!");
  107. return
  108. }
  109. let reg = /^([0]|[1-9][0-9]*)$/;
  110. if (
  111. !this.state.commodityQuantity ||
  112. !reg.test(this.state.commodityQuantity)
  113. ) {
  114. message.warning("请输入正确商品数量!");
  115. return false;
  116. }
  117. if (this.state.memberType === undefined) {
  118. message.warning("请选择付款情况!");
  119. return
  120. }
  121. this.setState({
  122. loading: true,
  123. });
  124. $.ajax({
  125. method: "POST",
  126. dataType: "json",
  127. crossDomain: false,
  128. url: globalConfig.context + "/api/admin/orderProject/updateMemberProject",
  129. data: {
  130. id: this.state.fid, //任务ID
  131. commodityId: this.state.commodityId, //项目ID
  132. orderNo: this.props.orderNo, //订单编号
  133. commodityQuantity: this.state.commodityQuantity, //数量
  134. taskComment: this.state.taskComment, //备注
  135. memberType: this.state.memberType,//会员付款状态
  136. },
  137. }).done(
  138. function (data) {
  139. this.setState({
  140. loading: false,
  141. });
  142. if (!data.error.length) {
  143. message.success("保存成功!");
  144. this.props.onCancel();
  145. } else {
  146. message.warning(data.error[0].message);
  147. }
  148. }.bind(this)
  149. );
  150. }
  151. httpChange(e) {
  152. this.setState({
  153. commodityName: e,
  154. });
  155. if (e.length >= 1) {
  156. this.supervisor(e);
  157. }
  158. }
  159. //加载(自动补全)
  160. supervisor(e) {
  161. //服务名称自动补全
  162. let api = "/api/admin/order/getBusinessProjectByName";
  163. $.ajax({
  164. method: "get",
  165. dataType: "json",
  166. crossDomain: false,
  167. url: globalConfig.context + api,
  168. data: {
  169. businessName: e,
  170. cname: "高新会员服务",
  171. },
  172. success: function (data) {
  173. let thedata = data.data;
  174. if (!thedata) {
  175. if (data.error && data.error.length) {
  176. message.warning(data.error[0].message);
  177. }
  178. thedata = {};
  179. }
  180. this.setState({
  181. customerArr: thedata,
  182. });
  183. }.bind(this),
  184. }).always(
  185. function () {
  186. }.bind(this)
  187. );
  188. }
  189. //上级主管输入框失去焦点是判断客户是否存在
  190. selectAuto(value) {
  191. const { customerArr } = this.state;
  192. const newdataSources = JSON.stringify(customerArr) == "{}" ? [] : customerArr;
  193. this.setState({
  194. commodityName: value,
  195. commodityId: newdataSources.find((item) => item.bname == value).id,
  196. });
  197. }
  198. render() {
  199. let options = this.state.customerArr.map((group, index) => (
  200. <Select.Option key={index} value={group.bname}>
  201. {group.bname}
  202. </Select.Option>
  203. ));
  204. const { readOnly } = this.props;
  205. return (
  206. <Modal
  207. maskClosable={false}
  208. visible={this.props.visible}
  209. onOk={this.props.onCancel}
  210. onCancel={this.props.onCancel}
  211. width="900px"
  212. title={readOnly ? "会员详情" : !this.state.fid ? "添加会员项目" : "编辑会员项目"}
  213. footer=""
  214. className="admin-desc-content"
  215. >
  216. <Form
  217. layout="horizontal"
  218. >
  219. <Spin spinning={this.state.loading}>
  220. <div className="clearfix">
  221. <FormItem
  222. className="half-item"
  223. {...formItemLayout}
  224. label="服务名称"
  225. >
  226. {readOnly ? this.state.commodityName :
  227. <AutoComplete
  228. className="certain-category-search"
  229. dropdownClassName="certain-category-search-dropdown"
  230. dropdownMatchSelectWidth={false}
  231. style={{ width: "200px" }}
  232. dataSource={options}
  233. placeholder="输入服务名称"
  234. value={this.state.commodityName}
  235. onChange={this.httpChange}
  236. filterOption={true}
  237. onSelect={this.selectAuto}
  238. >
  239. <Input />
  240. </AutoComplete>}
  241. <span className="mandatory">*</span>
  242. </FormItem>
  243. <FormItem
  244. className="half-item"
  245. {...formItemLayout}
  246. label="服务数量"
  247. >
  248. {readOnly ? this.state.commodityQuantity :
  249. <Input
  250. placeholder="请输入服务数量"
  251. value={this.state.commodityQuantity}
  252. style={{ width: "200px" }}
  253. onChange={(e) => {
  254. this.setState({ commodityQuantity: e.target.value });
  255. }}
  256. ref="commodityQuantity"
  257. />}
  258. <span className="mandatory">*</span>
  259. </FormItem>
  260. <div style={{ marginTop: "33px", color: "red", textAlign: "right", position: "relative", top: "-8", left: "0" }}>如会员项目,服务一年,请填写1,服务二年,请填写2,依次类推</div>
  261. <FormItem
  262. className="half-item"
  263. {...formItemLayout}
  264. label="付款情况"
  265. >
  266. {readOnly ?
  267. [
  268. { value: "0", key: "已付会员节点全款" },
  269. { value: "1", key: "已付部分期款,需特批" },
  270. { value: "2", key: "未付款,需特批" }][this.state.memberType] :
  271. <Select
  272. placeholder="选择付款情况"
  273. style={{ width: "200px" }}
  274. value={this.state.memberType}
  275. onChange={(e) => {
  276. this.setState({ memberType: e });
  277. }}
  278. >
  279. {[
  280. { value: "0", key: "已付会员节点全款" },
  281. { value: "1", key: "已付部分期款,需特批" },
  282. { value: "2", key: "未付款,需特批" }].map(function (item) {
  283. return (
  284. <Select.Option key={item.value}>
  285. {item.key}
  286. </Select.Option>
  287. );
  288. })}
  289. </Select>}
  290. <span className="mandatory">*</span>
  291. </FormItem>
  292. <div className="clearfix">
  293. <FormItem
  294. labelCol={{ span: 4 }}
  295. wrapperCol={{ span: 16 }}
  296. label="项目说明"
  297. >
  298. {readOnly ? this.state.taskComment :
  299. <Input
  300. type="textarea"
  301. placeholder="如:增派2022.6-2023.5,总会员服务为3年,客户未付款,承诺10月份进行补付款"
  302. value={this.state.taskComment}
  303. onChange={(e) => {
  304. this.setState({ taskComment: e.target.value });
  305. }}
  306. />}
  307. </FormItem>
  308. <div style={{ color: "red", marginLeft: 144 }}>
  309. 请详细说明项目服务时间,总服务时间及付款情况,如:<span style={{ color: "#333" }}>增派2022.6-2023.5,总会员服务为3年,客户未付款,承诺10月份进行补付款</span>
  310. <p>未付款时,需进行特批审核,请详细说明预计付款时间等详细情况</p>
  311. </div>
  312. </div>
  313. {readOnly ? null : <FormItem
  314. wrapperCol={{ span: 12, offset: 4 }}
  315. className="half-middle"
  316. >
  317. <Button
  318. className="submitSave"
  319. type="primary"
  320. onClick={() => {
  321. if (!this.state.fid) {
  322. this.onSubmit()
  323. } else {
  324. this.onChange()
  325. }
  326. }}
  327. >
  328. 保存
  329. </Button>
  330. <Button
  331. className="submitSave"
  332. type="ghost"
  333. onClick={this.props.onCancel}
  334. >
  335. 取消
  336. </Button>
  337. </FormItem>}
  338. </div>
  339. </Spin>
  340. </Form>
  341. </Modal>
  342. )
  343. }
  344. }
  345. export default ProjectOperationVip;