feat:完善各页面

4eee1cdf · chenshu · c1c572c6 · 4eee1cdf · 4eee1cdf · 4eee1cdf
Commit 4eee1cdf authored Apr 10, 2021 by chenshu
11 changed files
--- a/src/modules/college-manage/EmployeeManage.tsx
+++ b/src/modules/college-manage/EmployeeManage.tsx
@@ -2,7 +2,7 @@
 * @Author: wufan
 * @Date: 2020-07-09 14:03:09
 * @Last Modified by: chenshu
- * @Last Modified time: 2021-04-09 13:41:38
+ * @Last Modified time: 2021-04-10 12:10:35
 * 学院管理-员工管理
 */
 import React, { useEffect, useState } from "react";
@@ -395,6 +395,7 @@ function EmployeeManage() {
            isOpen={employeeModal}
            type="USER"
            handleChooseModal={(bool: any) => {
+              message.success('添加成功')
              setEmployeeModal(false)
              if (bool) {
                getEmployeeList();

--- a/src/modules/college-manage/UserManagePage.tsx
+++ b/src/modules/college-manage/UserManagePage.tsx
@@ -11,7 +11,7 @@ import React, { useEffect, useState } from "react";
 import { withRouter } from "react-router-dom";
 import _ from "underscore";
 import { PageControl } from "@/components";
-import { Table, Input, DatePicker, Select, Button } from "antd";
+import { Table, Input, DatePicker, Select, Button, message } from "antd";
 import StoreService from "@/domains/store-domain/storeService";
 import User from "@/common/js/user";
 import ChooseMembersModal from "./modal/ChooseMembersModal";
@@ -95,6 +95,7 @@ function UserManagePage() {
        isOpen={true}
        type="CUSTOMER"
        handleChooseModal={(bool: any) => {
+          message.success('添加成功')
          setModel(null)
          if (bool) {
            getUserList();

--- a/src/modules/college-manage/modal/ChooseMembersModal.jsx
+++ b/src/modules/college-manage/modal/ChooseMembersModal.jsx
@@ -5,7 +5,7 @@
 */
 import React from 'react';
-import { Modal, Input, Table, message } from 'antd';
+import { Modal, Input, Table, message, Tooltip } from 'antd';
 import Service from '@/common/js/service';
 import User from '@/common/js/user'
 import SetEmployeeModal from "./SetEmployeeModal";
@@ -214,9 +214,9 @@ class ChooseMembersModal extends React.Component {
          return (
            <div className='avatar'>
              <span className="icon iconfont avatar-icon">&#xe84a;</span>
-              <span className='userImg'>
+              <Tooltip title={name}>
-                { name }
+                <span className='userImg'>{name}</span>
-              </span>
+              </Tooltip>
            </div>  
          )
        }
@@ -238,9 +238,9 @@ class ChooseMembersModal extends React.Component {
          return (
            <div className='avatar'>
              <span className="icon iconfont avatar-icon">&#xe84a;</span>
-              <span className='userImg'>
+              <Tooltip title={name}>
-                { name }
+                <span className='userImg'>{name}</span>
-              </span>
+              </Tooltip>
            </div> 
          )
        }
@@ -265,7 +265,7 @@ class ChooseMembersModal extends React.Component {
  render() {
    const { type } = this.props;
    const { selectUserList, allUserList, searchKey, selectedRowKeys, openSetModal, isOpen } = this.state;
-    const title = '添加员工';
+    const title = type === 'USER' ? '添加员工' : '添加用户';
    return (    
      <div>
        {/* 添加学员页面 */}
@@ -275,14 +275,18 @@ class ChooseMembersModal extends React.Component {
          onCancel={this.handleClose}
          onOk={() => {
            if (_.isEmpty(selectUserList)) {
-              message.warning('请选择员工')
+              message.warning(type === 'USER' ? '请选择员工' : '请选择用户')
              return null;
            }
            type === 'USER' ? this.setState({ openSetModal: true, isOpen: false }) : this.addCustomer();
          }}
+          okText={type === 'USER' ? '下一步' : '确定'}
          title={title}
          width={680}
          maskClosable={false}
+          okButtonProps={!_.isEmpty(selectUserList) ? {} : {
+            disabled: true
+          }}
          closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
        >
          <div className='member-container'>
@@ -321,7 +325,7 @@ class ChooseMembersModal extends React.Component {
            </div>
            {/* 已选择的成员列表 */}
            <div className='container-right'>
-              <span className='span-left'>已选择员工</span>
+              <span className='span-left'>已选择{type === 'USER' ? '员工' : '用户'}</span>
              <div className='span-right' onClick={() => this.clearAllUser()}>
                <span className={ (selectUserList.length > 0) ? 'span-right-l' : null }>清空</span>
              </div>

--- a/src/modules/college-manage/modal/ChooseMembersModal.less
+++ b/src/modules/college-manage/modal/ChooseMembersModal.less
@@ -62,6 +62,11 @@
              color: #0081F0;
              margin-right: 6px;
            }
+            .userImg {
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
          }
        }
      }
@@ -129,6 +134,11 @@
            color: #0081F0;
            margin-right: 6px;
          }
+          .userImg {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
        }
        .ant-table-tbody{

--- a/src/modules/college-manage/modal/SetEmployeeModal.jsx
+++ b/src/modules/college-manage/modal/SetEmployeeModal.jsx
 import React from 'react';
-import { Modal, Button, Radio } from 'antd';
+import { Modal, Button, Radio, Tooltip } from 'antd';
 import './SetEmployeeModal.less'
 const RadioGroup = Radio.Group;
@@ -65,7 +65,9 @@ export default class SetEmployeeModal extends React.Component {
                }}
              >
                <span className="icon iconfont avatar-icon">&#xe84a;</span>
+                <Tooltip title={item.name}>
                  <span className='name'>{item.name}</span>
+                </Tooltip>
                <span className="tag">{tagMap[item.roleCode]}</span>
            </div>
            ))}

--- a/src/modules/college-manage/modal/SetEmployeeModal.less
+++ b/src/modules/college-manage/modal/SetEmployeeModal.less
@@ -15,6 +15,7 @@
          padding-left: 18px;
          padding-right: 12px;
          cursor: pointer;
+          display: flex;
          &:hover {
            background: #F3F6FA;
          }
@@ -27,6 +28,10 @@
          .name {
            color: #333;
            line-height: 44px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            width: calc(100% - 62px);
          }
          .tag {
            float: right;
@@ -38,6 +43,7 @@
            color: #FFB714;     
            margin-top: 13px; 
            font-size: 12px;
+            flex-shrink: 0;    
          }
          &.selected {
            background: rgba(255, 183, 20, 0.1);

--- a/src/modules/root/CollegeManagePage.jsx
+++ b/src/modules/root/CollegeManagePage.jsx
@@ -3,6 +3,7 @@ import Service from "@/common/js/service";
 import BaseService from "@/domains/basic-domain/baseService";
 import User from "@/common/js/user";
 import moment from 'moment';
+import { Modal, message } from 'antd';
 import './CollegeManagePage.less';
 const roleMap = {
@@ -18,16 +19,17 @@ export default class CollegeManagePage extends React.Component {
      avatar: 'https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png',
      name: '',
      list: [],
+      enterpriseId: User.getEnterpriseId(),
    };
  }
  componentDidMount() {
-    const enterpriseId = User.getEnterpriseId();
+    this.getStoreList();
-    this.getStoreList(enterpriseId);
+    this.getEnterpriseUser();
-    this.getEnterpriseUser(enterpriseId);
  }
-  getEnterpriseUser(enterpriseId) {
+  getEnterpriseUser() {
+    const { enterpriseId } = this.state;
    const params = {
      enterpriseId,
      userId: User.getUserId(),
@@ -38,7 +40,8 @@ export default class CollegeManagePage extends React.Component {
    });
  }
-  getStoreList(enterpriseId) {
+  getStoreList() {
+    const { enterpriseId } = this.state;
    const params = {
      enterpriseId,
      userId: User.getUserId(),
@@ -48,6 +51,20 @@ export default class CollegeManagePage extends React.Component {
    });
  }
+  changeCollege(item, bool) {
+    const data = {
+      storeId: item.id,
+      userId: User.getUserId(),
+      enableState: bool ? 'YES' : 'NO',
+    }
+    Service.Hades('public/hades/updateStateStore', data).then((res) => {
+      if (res.success) {
+        message.success(bool ? '启用成功' : '停用成功');
+        this.getStoreList();
+      }
+    })
+  }
  render() {
    const {
      name,
@@ -87,8 +104,9 @@ export default class CollegeManagePage extends React.Component {
            {list.map((item) => (
              <div
                key={item.id}
-                className="college-item"
+                className={`college-item${item.state === 'VALID' ? '' : ' disabled'}`}
                onClick={() => {
+                  if (item.state !== 'VALID') return null;
                  User.setStoreId(item.id);
                  window.RCHistory.push('/home')
                }}
@@ -99,6 +117,45 @@ export default class CollegeManagePage extends React.Component {
                </div>
                <div className="title">{item.storeName}</div>
                <div className="time">{moment(item.createTime).format('YYYY-MM-DD HH:mm')}</div>
+                <div className="control-box">
+                  {item.state === 'VALID' &&
+                    <span
+                      className="control-button"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        User.setStoreId(item.id);
+                        window.RCHistory.push('/college-info')
+                      }}
+                    >编辑</span>
+                  }
+                  <span
+                    className="control-button"
+                    onClick={(e) => {
+                      if (item.state !== 'VALID') return null;
+                      e.preventDefault();
+                      e.stopPropagation();
+                      Modal.confirm({
+                        title: '确定停用吗？',
+                        content: '禁用学院，所有学院相关信息不可使用，用户无法继续学习，请谨慎操作！',
+                        icon: <span className="icon iconfont default-confirm-icon">&#xe6f4;</span>,
+                        onOk: () => {
+                          this.changeCollege(item, false);
+                        },
+                        okText: '停用',
+                        cancelText: '取消',
+                      })
+                    }}
+                  >{item.state === 'VALID' ? '停用' : '已停用'}</span>
+                  <span
+                    className="control-button disable-button"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      this.changeCollege(item, true);
+                    }}
+                  >启用</span>
+                </div>
              </div>
            ))}
            <div

--- a/src/modules/root/CollegeManagePage.less
+++ b/src/modules/root/CollegeManagePage.less
@@ -124,8 +124,52 @@
          color: #5289FA;
          font-size: 16px;
        }
+        .control-box {
+          display: none;
+          position: absolute;
+          right: 16px;
+          bottom: 16px;
+          .control-button {
+            margin-left: 10px;
+            cursor: pointer;
+            color: #5289FA;
+          }
+          .disable-button {
+            display: none;
+          }
+        }
        &:hover {
          background: #F3F6FA;
+          .control-box {
+            display: block;
+          }
+        }
+        &.disabled {
+          .tag {
+            color: #CCCCCC;
+            border-color: #CCCCCC;
+          }
+          .title {
+            color: #CCCCCC;
+          }
+          .time {
+            color: #CCCCCC;
+          }
+          .control-box {
+            display: block;
+            .control-button {
+              color: #CCCCCC;
+            }
+          }
+          &:hover {
+            .control-button {
+              display: none;
+            }
+            .disable-button {
+              display: block;
+              color: #5289FA;
+            }
+          }
        }
      }
      .college-create {

--- a/src/modules/root/CreateCollege.jsx
+++ b/src/modules/root/CreateCollege.jsx
 import React from 'react';
-import { Input, Button, Modal, message } from 'antd';
+import { Input, Button, Modal, message, Form } from 'antd';
 import Upload from '@/core/upload';
-import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
 import Service from "@/common/js/service";
 import BaseService from "@/domains/basic-domain/baseService";
 import User from "@/common/js/user";
@@ -16,15 +15,16 @@ export default class CreateCollege extends React.Component {
      avatar: 'https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png',
      logo: 'https://image.xiaomaiketang.com/xm/HNHCAF6Fc2.png',
      name: '',
+      enterpriseId: User.getEnterpriseId(),
    };
  }
  componentDidMount() {
-    const enterpriseId = User.getEnterpriseId();
+    this.getEnterpriseUser();
-    this.getEnterpriseUser(enterpriseId);
  }
-  getEnterpriseUser(enterpriseId) {
+  getEnterpriseUser() {
+    const { enterpriseId } = this.state;
    const params = {
      enterpriseId,
      userId: User.getUserId(),
@@ -35,8 +35,11 @@ export default class CreateCollege extends React.Component {
    });
  }
-  handleSelectCover = (file)=> {
+  handleSelectCover = (e) => {
-    this.uploadImage(file);
+    const imageFile = e.target.files[0];
+    Upload.uploadBlobToOSS(imageFile, 'cover' + (new Date()).valueOf()).then((url) => {
+      this.uploadImage({ folderName: imageFile.name, ossUrl: url });
+    })
  }
  //上传图片
@@ -62,7 +65,6 @@ export default class CreateCollege extends React.Component {
              clearTimeout(self.timer);
              self.timer = setTimeout(() => {
                if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
-                  console.log(this.scale(), 'scale')
                  const _dataUrl = this.clip()
                  const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
                  self.setState({
@@ -141,17 +143,17 @@ export default class CreateCollege extends React.Component {
  updateCover = () =>{
    const {coverClicpPath,coverId} = this.state
    this.setState({
-      showSelectFileModal: false
-    })
-    this.setState({
      logo:coverClicpPath
    })
  }
  submit = () => {
-    const { logo, collegeName } = this.state;
+    const { logo, collegeName, enterpriseId } = this.state;
+    if (!collegeName) {
+      this.setState({ showError: true })
+    } else {
      const params = {
-      enterpriseId: User.getEnterpriseId(),
+        enterpriseId,
        userId: User.getUserId(),
        logo,
        storeName: collegeName,
@@ -162,6 +164,7 @@ export default class CreateCollege extends React.Component {
        }
      })
    }
+  }
  render() {
    const {
@@ -169,10 +172,10 @@ export default class CreateCollege extends React.Component {
      name,
      collegeName,
      logo,
-      showSelectFileModal,
      visible,
      hasImgReady,
      cutImageBlob,
+      showError,
    } = this.state;
    return (
      <div className="college-manage-page">
@@ -192,41 +195,52 @@ export default class CreateCollege extends React.Component {
          </div>
        </div>
        <div className="create-box">
-          <div className="image-box" onClick={() => {this.setState({ showSelectFileModal:true  })}}>
+          <div className="image-box">
            <img className="image" src={logo} />
+            <div className="image-mask">
+              <span
+                className="icon iconfont"
+                onClick={() => this.refs.logoInput.click()}
+              >&#xe6f5;</span>
+              <span
+                className="icon iconfont"
+                onClick={() => {
+                  this.setState({
+                    logo: 'https://image.xiaomaiketang.com/xm/HNHCAF6Fc2.png',
+                    visible: false,
+                  })
+                }}
+              >&#xe6f6;</span>
+            </div>
          </div>
          <span className="tip">建议尺寸702*180px，JPG/PNG格式，图片小于2M。</span>
+          <Form>
+            <Form.Item validateStatus={showError ? 'error' : 'success'} help={showError ? '请输入学院名称' : ''}>
              <Input
                className="input"
                placeholder="请输入学院名称"
+                maxLength={30}
                value={collegeName}
                onChange={(e) => {
-              this.setState({ collegeName: e.target.value })
+                  this.setState({ collegeName: e.target.value, showError: false })
                }}
              ></Input>
+            </Form.Item>
+          </Form>
          <Button
            className="button"
            type="primary"
            onClick={() => this.submit()}
          >确定创建</Button>
        </div>
-        {showSelectFileModal && 
+        <input
-          <SelectPrepareFileModal
+          type="file"
-            key="basic"
+          accept="image/*"
-            operateType="select"
+          value={""}
-            multiple={false}
+          ref="logoInput"
-            accept="image/jpeg,image/png,image/jpg"
+          style={{ display: "none" }}
-            selectTypeList={['JPG', 'JPEG', 'PNG']}
+          onChange={this.handleSelectCover}
-            tooltip='支持文件类型：jpg、jpeg、png'
-            isOpen={showSelectFileModal}
-            onClose={() => {
-              this.setState({
-                showSelectFileModal:false
-              })
-            }}
-            onSelect={this.handleSelectCover}
        />
-        }
        <Modal
          title="设置图片"
          width={1080}

--- a/src/modules/root/CreateCollege.less
+++ b/src/modules/root/CreateCollege.less
@@ -4,6 +4,7 @@
    margin: 0 auto;
    width: 350px;
    .image-box {
+      position: relative;
      display: block;
      border: 1px dashed #E9E9E9;
      width: 312px;
@@ -14,6 +15,32 @@
        height: 100%;
        object-fit: contain;
      }
+      .image-mask {
+        display: none;
+      }
+      &:hover {
+        .image-mask {
+          display: block;
+          position: absolute;
+          left: 0;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          background: rgba(0, 0, 0, 0.65);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .iconfont {
+            font-size: 14px;
+            padding: 10px 25px;
+            cursor: pointer;
+            color: #fff;
+            &:hover {
+              color: rgba(255, 183, 20, 1);
+            }
+          }
+        }
+      }
    }
    .tip {
      display: block;
@@ -23,10 +50,10 @@
    }
    .input {
      width: 350px;
-      margin-bottom: 52px;
    }
    .button {
      width: 350px;
+      margin-top: 36px;
      height: 32px !important;
    }
  }

--- a/src/modules/root/Header.jsx
+++ b/src/modules/root/Header.jsx
@@ -29,6 +29,7 @@ function Header(props) {
  const ctx = useContext(XMContext);
  const htmlUrl = `${LIVE_SHARE}store/index?id=${User.getStoreId()}&userId=${User.getUserId()}&from=work_weixin`;
  const storeUserId = User.getStoreUserId();
+  const enterpriseId = User.getEnterpriseId();
  useEffect(() => {
    htmlUrl && handleConvertShortUrl();
@@ -39,8 +40,7 @@ function Header(props) {
  useEffect(() => {
    storeUserId && getUserInfo();
-    const enterpriseId = User.getEnterpriseId();
+    enterpriseId ? getEnterpriseUser() : User.setIsAdmin(false);
-    enterpriseId ? getEnterpriseUser(enterpriseId) : User.setIsAdmin(false);
  }, [storeUserId]);
  function getUserInfo() {
@@ -55,7 +55,7 @@ function Header(props) {
    });
  }
-  function getEnterpriseUser(enterpriseId) {
+  function getEnterpriseUser() {
    const params = {
      enterpriseId,
      userId: User.getUserId(),