Edit.jsx 5.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. import React, { useState, useEffect } from 'react';
  2. import { Input, Button, Card, Form, notification, message } from 'antd';
  3. import router from 'umi/router';
  4. // import Styles from './style.less';
  5. import ImageUploader from '../../../components/XForm/ImageUpload';
  6. import request from '../../../utils/request';
  7. import apis from '../../../services/apis';
  8. import { fetch } from '@/utils/request';
  9. import pinyin from 'pinyin';
  10. const formItemLayout = {
  11. labelCol: {
  12. xs: { span: 24 },
  13. sm: { span: 8 },
  14. },
  15. wrapperCol: {
  16. xs: { span: 24 },
  17. sm: { span: 16 },
  18. },
  19. };
  20. const tailFormItemLayout = {
  21. wrapperCol: {
  22. xs: {
  23. span: 24,
  24. offset: 0,
  25. },
  26. sm: {
  27. span: 16,
  28. offset: 8,
  29. },
  30. },
  31. };
  32. function Edit(props) {
  33. const { getFieldDecorator, getFieldValue, setFieldsValue } = props.form;
  34. const { form, history } = props;
  35. const updateBrandData = fetch(apis.brand.alterBrand);
  36. const saveBrandData = fetch(apis.brand.addBrand);
  37. const goBack = () => router.goBack(-1);
  38. const { validateFields } = form;
  39. // eslint-disable-next-line react-hooks/rules-of-hooks
  40. let data = {};
  41. const { brandId } = props.location.query;
  42. useEffect(() => {
  43. console.log(
  44. pinyin('地点', {
  45. style: pinyin.STYLE_FIRST_LETTER,
  46. heteronym: true,
  47. })[0][0],'1111111111111111'
  48. );
  49. if (brandId) {
  50. getById({ brandId });
  51. }
  52. }, [brandId]);
  53. //增+改
  54. function handleSubmit(e) {
  55. e.preventDefault();
  56. validateFields((err, values) => {
  57. if (err) {
  58. return;
  59. //字符验证未填写---返回
  60. }
  61. if (brandId) {
  62. updateBrandData({
  63. data: {
  64. ...values,
  65. },
  66. urlData: { id: brandId },
  67. })
  68. .then(() => {
  69. // setLoading(false);
  70. message.success('数据更新成功');
  71. goBack();
  72. })
  73. .catch(err => {
  74. // setLoading(false);//loading消失
  75. message.error(err.message || err);
  76. });
  77. } else {
  78. saveBrandData({ data: values })
  79. .then(() => {
  80. // setLoading(false);
  81. message.success('数据保存成功');
  82. goBack();
  83. })
  84. .catch(err => {
  85. // setLoading(false);//loading消失
  86. message.error(err.message || err);
  87. });
  88. }
  89. });
  90. }
  91. // 获取详情信息
  92. function getById(res) {
  93. request({ ...apis.brand.getBrand, urlData: { id: res.brandId } }).then(res => {
  94. data = res;
  95. props.form.setFieldsValue(res);
  96. });
  97. }
  98. const openNotificationWithIcon = (type, message) => {
  99. notification[type]({
  100. message,
  101. description: '',
  102. });
  103. };
  104. //修改
  105. // function submitData(dataSources) {
  106. // if (id !== '') {
  107. // // 修改
  108. // updateType(dataSources);
  109. // return;
  110. // }
  111. // dataSources.status = 1;
  112. // dataSources.createDate = new Date();
  113. // request({ ...apis.brand.alterBrand, data: { ...dataSources } })
  114. // .then(() => {
  115. // // eslint-disable-next-line no-unused-expressions
  116. // openNotificationWithIcon('success', '操作成功');
  117. // router.go(-1);
  118. // })
  119. // .catch(err => {});
  120. // }
  121. //新增
  122. // function updateType(row) {
  123. // request({ ...apis.brand.addBrand, urlData: { id: row.brandId }, data: { ...row } })
  124. // .then(() => {
  125. // // eslint-disable-next-line no-unused-expressions
  126. // openNotificationWithIcon('success', '操作成功');
  127. // router.go(-1);
  128. // })
  129. // .catch(err => {});
  130. // }
  131. return (
  132. <Card>
  133. <Form {...formItemLayout} onSubmit={handleSubmit}>
  134. <Form.Item label="开发商名称">
  135. {getFieldDecorator('brandName', {
  136. rules: [
  137. {
  138. required: true,
  139. message: '请输入开发商名称!',
  140. },
  141. ],
  142. })(
  143. <Input
  144. onChange={e =>{
  145. // console.log(e,'333333333')
  146. // const item =
  147. // console.log(item,'333333333')
  148. if(!e.target.value) return
  149. setFieldsValue({
  150. indexLetter: pinyin(e.target.value, {
  151. style: pinyin.STYLE_FIRST_LETTER,
  152. heteronym: true,
  153. })[0][0]
  154. })
  155. }
  156. }
  157. style={{ width: 200 }}
  158. />,
  159. )}
  160. </Form.Item>
  161. <Form.Item label="开发商索引">
  162. {getFieldDecorator('indexLetter', {
  163. // value={}
  164. rules: [{ required: true, message: '请输入开发商索引' }],
  165. })(<Input style={{ width: 200 }} disabled/>)}
  166. </Form.Item>
  167. <Form.Item label="品牌logo">
  168. {getFieldDecorator('brandLogo', {
  169. rules: [{ required: true, message: '请上传品牌logo' }],
  170. })(<ImageUploader />)}
  171. </Form.Item>
  172. <Form.Item label="品牌宣传图" help="建议尺寸:750*750,比例1:1">
  173. {getFieldDecorator('brandImg', {
  174. rules: [{ required: true, message: '请上传品牌宣传图' }],
  175. })(<ImageUploader />)}
  176. </Form.Item>
  177. <Form.Item label="开发商简介">
  178. {getFieldDecorator('brandRemark', {
  179. rules: [{ required: true, message: '请输入开发商简介' }],
  180. })(<Input.TextArea style={{ width: 400 }} placeholder="120字内的简介" />)}
  181. </Form.Item>
  182. <Form.Item
  183. {...tailFormItemLayout}
  184. style={{ display: 'flex', justifyContent: 'space-between' }}
  185. >
  186. <Button type="primary" htmlType="submit" style={{ margin: '0' }}>
  187. 确定
  188. </Button>
  189. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  190. <Button onClick={() => router.go(-1)}>取消</Button>
  191. </Form.Item>
  192. </Form>
  193. </Card>
  194. );
  195. }
  196. const WrappedBuidingTypeForm = Form.create({ name: 'Edit' })(Edit);
  197. export default WrappedBuidingTypeForm;