vip.jsx 11 KB

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