fix:合并企业信息

config/proxy.ts

@@ -34,13 +34,21 @@ export default {
         '^/sgadmin/duoduo-service': '/duoduo-service',
       },
     },
-    '/hanchao': {
-      target: 'http://192.168.16.181:52009/',
+    '/image-service': {
+      target: 'http://api.sagacloud.cn/',
+      //   target: 'http://10.100.28.79',
+      changeOrigin: true,
+      pathRewrite: {
+        '^/image-service': '',
+      },
+    },
+    '/yongqi': {
+      target: 'http://192.168.88.4:58003/',
       //   target: 'http://10.100.28.79',
       changeOrigin: true,
       pathRewrite: {
         // '^/sgadmin': '/sgadmin',
-        '^/hanchao': '',
+        '^/yongqi': '',
       },
     },
     '/xiaojing': {

src/app.tsx

@@ -65,6 +65,7 @@ export const request = {
           ...options,
           interceptors: true,
           headers: {
+            ...options.headers,
             'saga-token': localStorage.getItem('token'),
           },
         },

src/pages/Information/Logo/index.jsx

@@ -0,0 +1,126 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { useModel } from 'umi';
+import Cropper from 'react-cropper';
+import { Button, Modal, message } from 'antd';
+import { updateLogo } from '../../service';
+import styles from './index.less';
+import 'cropperjs/dist/cropper.css';
+
+export default ({ onShouldChange, url }) => {
+  const { refresh } = useModel('@@initialState');
+  const fileInputRef = useRef();
+  const [logoUrl, setLogoUrl] = useState('');
+  const [cropper, setCropper] = useState();
+  const [uploading, setUploading] = useState(false);
+  const handleFileSelected = useCallback(
+    (e) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(e.target.files[0]);
+      reader.onload = () => {
+        setLogoUrl(reader.result);
+      };
+    },
+    [onShouldChange],
+  );
+
+  const handleSubmit = useCallback(() => {
+    if (typeof cropper !== 'undefined') {
+      cropper.getCroppedCanvas().toBlob((file) => {
+        setUploading(true);
+        updateLogo(file).then((r) => {
+          setUploading(false);
+          if (r?.code === 1) {
+            message.success('上传成功');
+            refresh();
+            setLogoUrl('');
+            onShouldChange();
+          }
+        });
+      });
+    }
+  }, [cropper]);
+
+  return (
+    <div>
+      <input
+        type="file"
+        hidden
+        accept="image/gif,image/jpeg,image/jpg,image/png"
+        ref={fileInputRef}
+        onChange={(e) => {
+          handleFileSelected(e);
+        }}
+      />
+
+      {!url && (
+        <div className={styles.trigger} onClick={() => fileInputRef.current.click()}>
+          {/* <Icon type="upload" style={{ fontSize: '24px', marginBottom: 5 }} /> */}
+          上传企业 Logo
+        </div>
+      )}
+
+      {url && (
+        <div
+          style={{
+            backgroundImage: `url(${url})`,
+          }}
+          className={styles.logo}
+        />
+      )}
+
+      {url && (
+        <div className={styles.modify}>
+          <span onClick={() => fileInputRef.current.click()}>修改 Logo</span>
+        </div>
+      )}
+
+      {logoUrl && (
+        <Modal
+          title={null}
+          width={388}
+          visible
+          closable={false}
+          maskClosable={false}
+          keyboard={false}
+          footer={null}
+        >
+          <div className={styles.c}>
+            <div className={styles.h}>
+              裁剪图片
+              <div className={styles.close} onClick={() => setLogoUrl('')}>
+                {/* <Icon type="close" /> */}
+              </div>
+            </div>
+            <div className={styles.cc}>
+              <Cropper
+                style={{ height: 179, width: 300 }}
+                src={logoUrl}
+                viewMode={0}
+                dragMode="move"
+                aspectRatio={1}
+                movable
+                rotatable={false}
+                cropBoxMovable={false}
+                cropBoxResizable={false}
+                toggleDragModeOnDblclick={false}
+                onInitialized={(instance) => {
+                  setCropper(instance);
+                }}
+              />
+              <div className={styles.submit}>
+                <Button
+                  type="primary"
+                  size="large"
+                  loading={uploading}
+                  onClick={() => handleSubmit()}
+                >
+                  保存
+                </Button>
+              </div>
+            </div>
+          </div>
+        </Modal>
+      )}
+    </div>
+  );
+};

src/pages/Information/Logo/index.less

@@ -0,0 +1,84 @@
+.trigger {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 200px;
+  height: 200px;
+  margin: 38px auto 0 38px;
+  color: #c4c4c4;
+  cursor: pointer;
+  transition: all 0.15s cubic-bezier(0.075, 0.82, 0.165, 1);
+  &:hover {
+    color: #000;
+  }
+}
+
+.logo {
+  width: 200px;
+  height: 200px;
+  margin: 38px auto 90px 38px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+
+.modify {
+  text-align: center;
+  span {
+    color: #c4c4c4;
+    cursor: pointer;
+    transition: all 0.15s cubic-bezier(0.075, 0.82, 0.165, 1);
+    &:hover {
+      color: #000;
+    }
+  }
+}
+
+.c {
+  overflow: hidden;
+  background: #fff;
+  border-radius: 20px;
+}
+
+.h {
+  position: relative;
+  height: 90px;
+  padding-left: 40px;
+  color: #000;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 90px;
+  background: rgba(196, 196, 196, 0.2);
+}
+
+.close {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  color: #c4c4c4;
+  font-size: 20px;
+  border-radius: 100%;
+  cursor: pointer;
+  transition: background-color 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);
+  &:hover {
+    background-color: #fff;
+  }
+}
+
+.cc {
+  padding: 60px 20px 40px;
+}
+
+.submit {
+  width: 128px;
+  margin: 40px auto 0;
+  button {
+    width: 100%;
+  }
+}

src/pages/Information/index.jsx

@@ -1,3 +1,153 @@
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import styles from './index.less';
+import { Input, message } from 'antd';
+import {
+  companyInfo,
+  companyUpdate,
+  importUsers,
+  getFileUrl,
+} from '@/services/sagacare_service/infomation';
 export default () => {
-  return <div>企业信息页面</div>;
+  const fileInputRef = useRef();
+  const [englishAbbreviation, setEnglishAbbreviation] = useState('');
+  const [abbreviation, setAbbreviation] = useState('');
+  const [intro, setIntro] = useState('');
+  const [companyName, setCompanyName] = useState('');
+  const [englishName, setEnglishName] = useState('');
+  const [logoUrl, setLogoUrl] = useState('');
+  const [imgUrl, setImgUrl] = useState('');
+  const handleFileSelected = useCallback(
+    (e) => {
+      const file = e.target.files[0];
+      let fileName = file.name;
+      importUsers(file).then((res) => {
+        send('logUrl', res.data.fileKey);
+      });
+    },
+    [abbreviation, englishAbbreviation, intro, logoUrl],
+  );
+  const handleInfoChanged = useCallback(
+    (key, value) => {
+      send(key, value);
+    },
+    [abbreviation, englishAbbreviation, intro, logoUrl],
+  );
+  function getData() {
+    companyInfo().then((res) => {
+      const resData = res.data || {};
+      setEnglishAbbreviation(resData.englishAbbreviation || '');
+      setAbbreviation(resData.abbreviation || '');
+      setIntro(resData.intro || '');
+      setCompanyName(resData.companyName || '');
+      setEnglishName(resData.englishName || '');
+      setLogoUrl(resData.logoUrl || '');
+    });
+  }
+
+  const send = (key, value) => {
+    const params = {
+      abbreviation: abbreviation,
+      englishAbbreviation: englishAbbreviation,
+      intro: intro,
+      logoUrl: logoUrl,
+    };
+    params[key] = value;
+    companyUpdate(params).then((res) => {
+      message.success('修改成功');
+      getData();
+    });
+  };
+
+  useEffect(() => {
+    if (companyName == '') {
+      getData();
+    }
+    if (logoUrl) {
+      getFileUrl(logoUrl).then((res) => {
+        setImgUrl(res.data);
+      });
+    }
+  }, [englishAbbreviation, abbreviation, intro, logoUrl, companyName]);
+  return (
+    <div className={styles.information}>
+      <div className={styles.left}>
+        <div className={styles.imgBox}>
+          {imgUrl && <img className={styles.imgSt} src={imgUrl}></img>}
+        </div>
+        <input
+          type="file"
+          hidden
+          accept="image/gif,image/jpeg,image/jpg,image/png"
+          ref={fileInputRef}
+          onChange={(e) => {
+            handleFileSelected(e);
+          }}
+        />
+        <div className={styles.setLogo} onClick={() => fileInputRef.current.click()}>
+          修改Logo
+        </div>
+      </div>
+      <div className={styles.right}>
+        <div className={styles.contentLeft}>
+          <div className={styles.title}>{companyName}</div>
+          <div className={styles.slogan}>{englishName}</div>
+          <div className={styles.lableInput}>
+            <div className={styles.textLable} style={{ marginLeft: '75px', paddingTop: '84px' }}>
+              公司口号
+            </div>
+            <div className={styles.inlineEditValue}>
+              <Input
+                value={intro}
+                bordered={false}
+                onChange={(e) => setIntro(e.target.value)}
+                onBlur={() => handleInfoChanged('intro', intro)}
+                onKeyUp={(e) => {
+                  if (e.keyCode === 13) {
+                    handleInfoChanged('intro', intro);
+                  }
+                }}
+              />
+              {/* <Icon type="edit" /> */}
+            </div>
+          </div>
+        </div>
+        <div className={styles.contentRight}>
+          <div className={styles.lableInput}>
+            <div className={styles.textLable}>中文简称</div>
+            <div className={styles.inlineEditValue}>
+              <Input
+                value={abbreviation}
+                bordered={false}
+                onChange={(e) => setAbbreviation(e.target.value)}
+                onBlur={() => handleInfoChanged('abbreviation', abbreviation)}
+                onKeyUp={(e) => {
+                  if (e.keyCode === 13) {
+                    handleInfoChanged('abbreviation', abbreviation);
+                  }
+                }}
+              />
+              {/* <Icon type="edit" /> */}
+            </div>
+          </div>
+          <div className={styles.lableInput} style={{ paddingTop: '68px' }}>
+            <div className={styles.textLable}>英文简称</div>
+            <div className={styles.inlineEditValue}>
+              <Input
+                value={englishAbbreviation}
+                bordered={false}
+                onChange={(e) => setEnglishAbbreviation(e.target.value)}
+                onBlur={() => handleInfoChanged('englishAbbreviation', englishAbbreviation)}
+                onKeyUp={(e) => {
+                  if (e.keyCode === 13) {
+                    handleInfoChanged('englishAbbreviation', englishAbbreviation);
+                  }
+                }}
+              />
+              {/* <Icon type="edit" /> */}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };

src/pages/Information/index.less

@@ -0,0 +1,124 @@
+.information {
+  display: flex;
+  width: 100%;
+  height: 380px;
+  background: #fdfdfd;
+  border-radius: 0px 8.575px 8.575px 0px;
+  box-shadow: 0px 1.71494px 8.57472px 0px rgba(0, 0, 0, 0.03);
+  .left {
+    width: 316px;
+    height: 380px;
+    padding-top: 103px;
+    text-align: center;
+    background: #fff;
+    border-radius: 8.575px 0px 0px 8.57px;
+    box-shadow: 0px 1.71494px 8.57472px 0px rgba(0, 0, 0, 0.03);
+    .imgBox {
+      width: 130px;
+      height: 130px;
+      margin-left: 93px;
+      .imgSt {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .setLogo {
+      padding-top: 100px;
+      color: var(--tui-gray-100, #c4c4c4);
+      font-weight: 500;
+      font-size: 14px;
+      font-family: PingFang SC;
+      font-style: normal;
+      line-height: normal;
+    }
+    .setLogo:hover {
+      color: #000;
+    }
+  }
+
+  .right {
+    display: flex;
+    flex: 1;
+    justify-content: start;
+    background: #fdfdfd;
+    border-radius: 0px 8.575px 8.575px 0px;
+    box-shadow: 0px 1.71494px 8.57472px 0px rgba(0, 0, 0, 0.03);
+    .contentLeft {
+      .title {
+        margin-left: 75px;
+        padding-top: 103px;
+        color: var(--tui-subtitle, #656872);
+        font-weight: 500;
+        font-size: 30px;
+        font-family: Montserrat;
+        font-style: normal;
+        line-height: normal;
+        font-feature-settings: 'clig' off, 'liga' off;
+      }
+      .slogan {
+        margin-left: 89px;
+        padding-top: 31px;
+        color: var(--tui-gray-100, #c4c4c4);
+        font-weight: 500;
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-style: normal;
+        line-height: normal;
+      }
+    }
+    .contentRight {
+      margin-left: 195px;
+      padding-top: 132px;
+    }
+    .textLable {
+      margin-right: 21px;
+      color: var(--tui-light-gray, #c4c4c4);
+      font-weight: 400;
+      font-size: 14px;
+      font-family: PingFang SC;
+      font-style: normal;
+      line-height: normal;
+    }
+  }
+  .lableInput {
+    display: flex;
+    align-items: flex-end;
+  }
+  .inlineEditValue {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    border-bottom: 1px solid #c4c4c4;
+    transition: all 0.3s;
+    :global {
+      .ant-input {
+        flex: 1;
+        min-width: 0;
+        margin-right: 10px;
+        padding-right: 0;
+        padding-left: 0;
+        color: var(--tui-subtitle, #656872);
+        font-weight: 500;
+        font-size: 24px;
+        font-family: Montserrat;
+        font-style: normal;
+        line-height: normal;
+        &:focus {
+          color: #000;
+        }
+      }
+      .anticon {
+        opacity: 0;
+        transition: all 0.3s;
+      }
+    }
+    &:hover {
+      border-bottom: 1px solid #1b144e;
+      :global {
+        .anticon {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}

src/services/sagacare_service/infomation.js

@@ -0,0 +1,70 @@
+import { request } from 'umi';
+import { projectObj } from '@/config/api.js';
+import UserStorage from '@/config/sagacare/sagacare_user';
+import Request from 'umi-request';
+
+function getProjectId() {
+  const id = projectObj.projectId;
+  return id;
+}
+
+function commonParams() {
+  var userObj = UserStorage.getInstance();
+  const user = userObj.getUser();
+  var pubname = 'sgadmin';
+  return `openid=${user.id}&pubname=${pubname}&projectId=${getProjectId()}&userId=${
+    user.id
+  }&userName=${user.name}&userPhone=${user.phone}`;
+}
+
+// 获取企业信息
+export const companyInfo = () => {
+  let params = {
+    criteria: {
+      projectId: 'Pj1101099999',
+      companyId: '751329b106254ac58c2bd3ae9eaefaa7',
+    },
+  };
+  return request(`/sgadmin/duoduo-service/custom-service/company/info`, {
+    method: 'POST',
+    from: 'sagacare',
+    isNotShowErrorToast: true,
+    errorSave: true,
+    data: JSON.stringify(params),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+// 修改企业 信息
+export const companyUpdate = (params) => {
+  params.companyId = '751329b106254ac58c2bd3ae9eaefaa7';
+  return request(`/sgadmin/duoduo-service/custom-service/company/update`, {
+    method: 'POST',
+    from: 'sagacare',
+    isNotShowErrorToast: true,
+    errorSave: true,
+    data: JSON.stringify(params),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+
+// 上传 图片
+export const importUsers = (file, param) => {
+  const data = new FormData();
+  data.append('file', file);
+  return request('/sgadmin/duoduo-service/custom-service/oss/uploadOssFile', {
+    data,
+    method: 'post',
+    parseResponse: true,
+  });
+};
+// 查看 图片
+export const getFileUrl = (param) => {
+  return request(`/sgadmin/duoduo-service/custom-service/oss/getFileUrl?fileKey=${param}`, {
+    method: 'post',
+    parseResponse: true,
+  });
+};