index.jsx 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
  2. import styles from './index.less';
  3. import { useModel } from 'umi';
  4. import { Input, message } from 'antd';
  5. import {
  6. companyInfo,
  7. companyUpdate,
  8. importUsers,
  9. getFileUrl,
  10. } from '@/services/sagacare_service/infomation';
  11. export default () => {
  12. const { initialState } = useModel('@@initialState');
  13. const fileInputRef = useRef();
  14. const [englishAbbreviation, setEnglishAbbreviation] = useState('');
  15. const [abbreviation, setAbbreviation] = useState('');
  16. const [intro, setIntro] = useState('');
  17. const [companyName, setCompanyName] = useState('');
  18. const [englishName, setEnglishName] = useState('');
  19. const [logoUrl, setLogoUrl] = useState('');
  20. const [imgUrl, setImgUrl] = useState('');
  21. const handleFileSelected = useCallback(
  22. (e) => {
  23. const file = e.target.files[0];
  24. if (file.size > 1024 * 1024 * 10) {
  25. message.error('文件大小不能超过 10MB');
  26. return;
  27. }
  28. importUsers(file).then((res) => {
  29. send('logoUrl', res.data.fileKey);
  30. });
  31. },
  32. [abbreviation, englishAbbreviation, intro, logoUrl],
  33. );
  34. const handleInfoChanged = useCallback(
  35. (key, value) => {
  36. send(key, value);
  37. },
  38. [abbreviation, englishAbbreviation, intro, logoUrl],
  39. );
  40. function getData() {
  41. let params = {
  42. criteria: {
  43. projectId: initialState?.currentUser?.projectId,
  44. companyId: initialState?.currentUser?.companyId,
  45. },
  46. };
  47. companyInfo(params).then((res) => {
  48. const resData = res.data || {};
  49. setEnglishAbbreviation(resData.englishAbbreviation || '');
  50. setAbbreviation(resData.abbreviation || '');
  51. setIntro(resData.intro || '');
  52. setCompanyName(resData.companyName || '');
  53. setEnglishName(resData.englishName || '');
  54. setLogoUrl(resData.logoUrl || '');
  55. });
  56. }
  57. const send = (key, value) => {
  58. const params = {
  59. abbreviation: abbreviation,
  60. englishAbbreviation: englishAbbreviation,
  61. intro: intro,
  62. logoUrl: logoUrl,
  63. companyId: initialState?.currentUser?.companyId,
  64. };
  65. params[key] = value;
  66. companyUpdate(params).then((res) => {
  67. message.success('修改成功');
  68. getData();
  69. });
  70. };
  71. useEffect(() => {
  72. if (companyName == '') {
  73. getData();
  74. }
  75. if (logoUrl) {
  76. getFileUrl(logoUrl).then((res) => {
  77. setImgUrl(res.data);
  78. });
  79. }
  80. }, [englishAbbreviation, abbreviation, intro, logoUrl, companyName]);
  81. return (
  82. <div className={styles.information}>
  83. <div className={styles.left}>
  84. <div className={styles.imgBox}>
  85. {imgUrl && <img className={styles.imgSt} src={imgUrl}></img>}
  86. </div>
  87. <input
  88. type="file"
  89. hidden
  90. accept="image/gif,image/jpeg,image/jpg,image/png"
  91. ref={fileInputRef}
  92. onChange={(e) => {
  93. handleFileSelected(e);
  94. }}
  95. />
  96. <div className={styles.setLogo} onClick={() => fileInputRef.current.click()}>
  97. 修改Logo
  98. </div>
  99. </div>
  100. <div className={styles.right}>
  101. <div className={styles.contentLeft}>
  102. <div className={styles.title}>{companyName}</div>
  103. <div className={styles.slogan}>{englishName}</div>
  104. <div className={styles.lableInput}>
  105. <div className={styles.textLable} style={{ marginLeft: '75px', paddingTop: '84px' }}>
  106. 公司口号
  107. </div>
  108. <div className={styles.inlineEditValue}>
  109. <Input
  110. value={intro}
  111. bordered={false}
  112. onChange={(e) => setIntro(e.target.value)}
  113. onBlur={() => handleInfoChanged('intro', intro)}
  114. onKeyUp={(e) => {
  115. if (e.keyCode === 13) {
  116. handleInfoChanged('intro', intro);
  117. }
  118. }}
  119. />
  120. {/* <Icon type="edit" /> */}
  121. </div>
  122. </div>
  123. </div>
  124. <div className={styles.contentRight}>
  125. <div className={styles.lableInput}>
  126. <div className={styles.textLable}>中文简称</div>
  127. <div className={styles.inlineEditValue}>
  128. <Input
  129. value={abbreviation}
  130. bordered={false}
  131. onChange={(e) => setAbbreviation(e.target.value)}
  132. onBlur={() => handleInfoChanged('abbreviation', abbreviation)}
  133. onKeyUp={(e) => {
  134. if (e.keyCode === 13) {
  135. handleInfoChanged('abbreviation', abbreviation);
  136. }
  137. }}
  138. />
  139. {/* <Icon type="edit" /> */}
  140. </div>
  141. </div>
  142. <div className={styles.lableInput} style={{ paddingTop: '68px' }}>
  143. <div className={styles.textLable}>英文简称</div>
  144. <div className={styles.inlineEditValue}>
  145. <Input
  146. value={englishAbbreviation}
  147. bordered={false}
  148. onChange={(e) => setEnglishAbbreviation(e.target.value)}
  149. onBlur={() => handleInfoChanged('englishAbbreviation', englishAbbreviation)}
  150. onKeyUp={(e) => {
  151. if (e.keyCode === 13) {
  152. handleInfoChanged('englishAbbreviation', englishAbbreviation);
  153. }
  154. }}
  155. />
  156. {/* <Icon type="edit" /> */}
  157. </div>
  158. </div>
  159. </div>
  160. </div>
  161. </div>
  162. );
  163. };