vip.jsx 11 KB

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