vip.jsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364
  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. <div>
  95. 已提出会员项目申请!请在
  96. <span style={{ color: "red" }}>“订单管理-我的会员项目“</span>
  97. 跟进查看会员项目的审核状态,审核通过,即表示添加会员项目完成!!!
  98. </div>),
  99. });
  100. // message.success("保存成功!");
  101. this.props.onCancel();
  102. } else {
  103. message.warning(data.error[0].message);
  104. }
  105. }.bind(this)
  106. );
  107. }
  108. // 修改会员项目
  109. onChange() {
  110. if (this.state.commodityId === undefined || !this.state.commodityId) {
  111. message.warning("服务名称不匹配!");
  112. return
  113. }
  114. let reg = /^([0]|[1-9][0-9]*)$/;
  115. if (
  116. !this.state.commodityQuantity ||
  117. !reg.test(this.state.commodityQuantity)
  118. ) {
  119. message.warning("请输入正确商品数量!");
  120. return false;
  121. }
  122. if (this.state.memberType === undefined) {
  123. message.warning("请选择付款情况!");
  124. return
  125. }
  126. this.setState({
  127. loading: true,
  128. });
  129. $.ajax({
  130. method: "POST",
  131. dataType: "json",
  132. crossDomain: false,
  133. url: globalConfig.context + "/api/admin/orderProject/updateMemberProject",
  134. data: {
  135. id: this.state.fid, //任务ID
  136. commodityId: this.state.commodityId, //项目ID
  137. orderNo: this.props.orderNo, //订单编号
  138. commodityQuantity: this.state.commodityQuantity, //数量
  139. taskComment: this.state.taskComment, //备注
  140. memberType: this.state.memberType,//会员付款状态
  141. },
  142. }).done(
  143. function (data) {
  144. this.setState({
  145. loading: false,
  146. });
  147. if (!data.error.length) {
  148. message.success("保存成功!");
  149. this.props.onCancel();
  150. } else {
  151. message.warning(data.error[0].message);
  152. }
  153. }.bind(this)
  154. );
  155. }
  156. httpChange(e) {
  157. this.setState({
  158. commodityName: e,
  159. });
  160. if (e.length >= 1) {
  161. this.supervisor(e);
  162. }
  163. }
  164. //加载(自动补全)
  165. supervisor(e) {
  166. //服务名称自动补全
  167. let api = "/api/admin/order/getBusinessProjectByName";
  168. $.ajax({
  169. method: "get",
  170. dataType: "json",
  171. crossDomain: false,
  172. url: globalConfig.context + api,
  173. data: {
  174. businessName: e,
  175. cname: "高新会员服务",
  176. },
  177. success: function (data) {
  178. let thedata = data.data;
  179. if (!thedata) {
  180. if (data.error && data.error.length) {
  181. message.warning(data.error[0].message);
  182. }
  183. thedata = {};
  184. }
  185. this.setState({
  186. customerArr: thedata,
  187. });
  188. }.bind(this),
  189. }).always(
  190. function () {
  191. }.bind(this)
  192. );
  193. }
  194. //上级主管输入框失去焦点是判断客户是否存在
  195. selectAuto(value) {
  196. const { customerArr } = this.state;
  197. const newdataSources = JSON.stringify(customerArr) == "{}" ? [] : customerArr;
  198. this.setState({
  199. commodityName: value,
  200. commodityId: newdataSources.find((item) => item.bname == value).id,
  201. });
  202. }
  203. render() {
  204. let options = this.state.customerArr.map((group, index) => (
  205. <Select.Option key={index} value={group.bname}>
  206. {group.bname}
  207. </Select.Option>
  208. ));
  209. const { readOnly } = this.props;
  210. return (
  211. <Modal
  212. maskClosable={false}
  213. visible={this.props.visible}
  214. onOk={this.props.onCancel}
  215. onCancel={this.props.onCancel}
  216. width="900px"
  217. title={readOnly ? "会员详情" : !this.state.fid ? "添加会员项目" : "编辑会员项目"}
  218. footer=""
  219. className="admin-desc-content"
  220. >
  221. <Form
  222. layout="horizontal"
  223. >
  224. <Spin spinning={this.state.loading}>
  225. <div className="clearfix">
  226. <FormItem
  227. className="half-item"
  228. {...formItemLayout}
  229. label="服务名称"
  230. >
  231. {readOnly ? this.state.commodityName :
  232. <AutoComplete
  233. className="certain-category-search"
  234. dropdownClassName="certain-category-search-dropdown"
  235. dropdownMatchSelectWidth={false}
  236. style={{ width: "200px" }}
  237. dataSource={options}
  238. placeholder="输入服务名称"
  239. value={this.state.commodityName}
  240. onChange={this.httpChange}
  241. filterOption={true}
  242. onSelect={this.selectAuto}
  243. >
  244. <Input />
  245. </AutoComplete>}
  246. <span className="mandatory">*</span>
  247. </FormItem>
  248. <FormItem
  249. className="half-item"
  250. {...formItemLayout}
  251. label="服务数量"
  252. >
  253. {readOnly ? this.state.commodityQuantity :
  254. <Input
  255. placeholder="请输入服务数量"
  256. value={this.state.commodityQuantity}
  257. style={{ width: "200px" }}
  258. onChange={(e) => {
  259. this.setState({ commodityQuantity: e.target.value });
  260. }}
  261. ref="commodityQuantity"
  262. />}
  263. <span className="mandatory">*</span>
  264. </FormItem>
  265. <div style={{ marginTop: "33px", color: "red", textAlign: "right", position: "relative", top: "-8", left: "0" }}>如会员项目,服务一年,请填写1,服务二年,请填写2,依次类推</div>
  266. <FormItem
  267. className="half-item"
  268. {...formItemLayout}
  269. label="付款情况"
  270. >
  271. {readOnly ?
  272. [
  273. { value: "0", key: "已付会员节点全款" },
  274. { value: "1", key: "已付部分期款,需特批" },
  275. { value: "2", key: "未付款,需特批" }][this.state.memberType] :
  276. <Select
  277. placeholder="选择付款情况"
  278. style={{ width: "200px" }}
  279. value={this.state.memberType}
  280. onChange={(e) => {
  281. this.setState({ memberType: e });
  282. }}
  283. >
  284. {[
  285. { value: "0", key: "已付会员节点全款" },
  286. { value: "1", key: "已付部分期款,需特批" },
  287. { value: "2", key: "未付款,需特批" }].map(function (item) {
  288. return (
  289. <Select.Option key={item.value}>
  290. {item.key}
  291. </Select.Option>
  292. );
  293. })}
  294. </Select>}
  295. <span className="mandatory">*</span>
  296. </FormItem>
  297. <div className="clearfix">
  298. <FormItem
  299. labelCol={{ span: 4 }}
  300. wrapperCol={{ span: 16 }}
  301. label="项目说明"
  302. >
  303. {readOnly ? this.state.taskComment :
  304. <Input
  305. type="textarea"
  306. placeholder="如:派2022年会员服务,总会员服务三年,客户付款情况说明"
  307. autosize={{ minRows: 4 }}
  308. value={this.state.taskComment}
  309. onChange={(e) => {
  310. this.setState({ taskComment: e.target.value });
  311. }}
  312. />}
  313. </FormItem>
  314. <div style={{ color: "red", marginLeft: 144 }}>
  315. 请详细说明项目服务时间,总服务时间及付款情况,如:<span style={{ color: "#333" }}>派2022年会员服务,总会员服务三年,客户付款情况说明</span>
  316. <p>未付款时,需进行特批审核,请详细说明预计付款时间等详细情况</p>
  317. </div>
  318. </div>
  319. {readOnly ? null : <FormItem
  320. wrapperCol={{ span: 12, offset: 4 }}
  321. className="half-middle"
  322. >
  323. <Button
  324. className="submitSave"
  325. type="primary"
  326. onClick={() => {
  327. if (!this.state.fid) {
  328. this.onSubmit()
  329. } else {
  330. this.onChange()
  331. }
  332. }}
  333. >
  334. 保存
  335. </Button>
  336. <Button
  337. className="submitSave"
  338. type="ghost"
  339. onClick={this.props.onCancel}
  340. >
  341. 取消
  342. </Button>
  343. </FormItem>}
  344. </div>
  345. </Spin>
  346. </Form>
  347. </Modal>
  348. )
  349. }
  350. }
  351. export default ProjectOperationVip;