feat:员工管理联调

src/common/js/axios.ts

 /*
  * @Author: 吴文洁
  * @Date: 2020-08-31 09:34:31
- * @LastEditors: zhangleyuan
- * @LastEditTime: 2020-12-03 10:19:49
+ * @LastEditors: wufan
+ * @LastEditTime: 2020-12-04 15:07:46
  * @Description: 
  * @Copyright: 杭州杰竞科技有限公司 版权所有
  */
@@ -32,7 +32,7 @@ class Axios {
     params: any,
     options: FetchOptions = { requestType: 'json' }
   ): Promise<any> {
-    const _url = `${url}?storeId=${USER_TYPE}&token=${User.getToken()}&storeUserId=${User.getStoreUserId()}&userId=${User.getUserId()}`;
+    const _url = `${url}?storeId=${User.getStoreId()}&token=${User.getToken()}&storeUserId=${User.getStoreUserId()}&userId=${User.getUserId()}`;
     return new Promise((resolve, reject) => {
 
       const instance: AxiosInstance = axios.create({

src/core/antd.less

@@ -83,10 +83,10 @@
 }
 
 .ant-radio {
-  .ant-radio-inner {
-    width: 14px !important;
-    height: 14px !important;
-  }
+  // .ant-radio-inner {
+  //   width: 14px !important;
+  //   height: 14px !important;
+  // }
 
   .ant-radio-inner:after {
     height: 8px !important;

src/data-source/store/request-apis.ts

@@ -2,7 +2,7 @@
  * @Author: wufan
  * @Date: 2020-11-25 18:25:02
  * @LastEditors: wufan
- * @LastEditTime: 2020-12-01 20:45:54
+ * @LastEditTime: 2020-12-04 10:52:49
  * @Description: Description
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
@@ -21,5 +21,17 @@ export function getUserList(params: object) {
 }
 
 export function getStoreDecorationList(params: object) {
-  return Service.Apollo("public/store/getStoreBannerList", params);
+  return Service.Hades("public/store/getStoreBannerList", params);
+}
+
+export function addEmployee(params: object) {
+  return Service.Hades("public/store/addStoreUser", params);
+}
+
+export function editEmployee(params: object) {
+  return Service.Hades("public/store/editStoreUser", params);
+}
+
+export function deleteEmployee(params: object) {
+  return Service.Hades("public/store/delStoreUser", params);
 }

src/domains/store-domain/storeService.ts

@@ -2,11 +2,11 @@
  * @Author: wufan
  * @Date: 2020-11-25 18:25:02
  * @LastEditors: wufan
- * @LastEditTime: 2020-12-01 18:13:50
+ * @LastEditTime: 2020-12-04 10:52:26
  * @Description: Description
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
-import { getEmployeeList, getUserList, getStoreDecorationList, getStoreRole  } from '@/data-source/store/request-apis';
+import { getEmployeeList, getUserList, getStoreDecorationList, getStoreRole, addEmployee, editEmployee, deleteEmployee } from '@/data-source/store/request-apis';
 
 export default class StoreService {
   // 获取员工列表 
@@ -21,7 +21,17 @@ export default class StoreService {
 
   // 删除员工
   static deleteEmployee(params: any) {
-    return getUserList(params);
+    return deleteEmployee(params);
+  }
+
+  // 添加员工
+  static addEmployee(params: any) {
+    return addEmployee(params);
+  }
+
+  // 编辑员工
+  static editEmployee(params: any) {
+    return editEmployee(params);
   }
 
   // 获取用户列表 

src/modules/root/App.tsx

-/*
- * @Author: 吴文洁
- * @Date: 2019-07-10 10:30:49
-<<<<<<< Updated upstream
- * @LastEditors: wufan
- * @LastEditTime: 2020-12-02 18:02:14
-=======
- * @LastEditors: zhangleyuan
- * @LastEditTime: 2020-12-02 19:47:15
->>>>>>> Stashed changes
- * @Description:
- */
+
 import React, { useContext, useEffect } from 'react';
 import { withRouter} from 'react-router-dom';
 import {ConfigProvider } from 'antd';
@@ -43,7 +32,7 @@ const App: React.FC = (props: any) => {
   function getStoreGroupAndStoreList() {
     BaseService.getUserStore({ userId }).then((res) => {
       
-      const { storeGroupVOS = [], storeVOS } = res.result;
+      const { storeGroupVOS = [], storeVOS = [] } = res.result;
       const { id, storeUserId} = storeVOS[0];
 
       User.setStoreId(id);

src/modules/store-manege/EmployeeAddOrEditModal.tsx

@@ -2,53 +2,81 @@
  * @Author: wufan
  * @Date: 2020-11-27 16:21:49
  * @LastEditors: wufan
- * @LastEditTime: 2020-11-30 15:46:10
+ * @LastEditTime: 2020-12-04 15:02:22
  * @Description: Description
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
 import React, { useState, useEffect } from "react";
-import { Modal, Form, Button, Input, Radio, Row, Col, message } from "antd";
-import _ from "underscore";
+import {
+  Modal,
+  Form,
+  Button,
+  Input,
+  InputNumber,
+  Radio,
+  Row,
+  Col,
+  message,
+} from "antd";
+import _, { values } from "underscore";
 import "./EmployeeAddOrEditModal.less";
 import baseImg from "@/common/images/xiaomai-IMG.png";
 import { CropperModal } from "@/components/";
+import StoreService from "@/domains/store-domain/storeService";
 import UpLoad from "../common/UpLoad";
-import $ from 'jquery';
+import $ from "jquery";
+import User from "@/common/js/user";
+
 const RadioGroup = Radio.Group;
 declare let window: any;
 
 interface AddEmployeeModalProps {
   isOpen: boolean;
   choosedItem: {
-    name?: string;
+    nickName?: string;
     phone?: string;
-    role?: string;
+    role: Array<string>;
     avatar?: string;
+    storeUserId?: string;
   };
-  onClose: (e: any) => void;
+  onClose: () => void;
 }
 
 function AddEmployeeModal(props: AddEmployeeModalProps) {
-  const [name, setName] = useState("");
+  const [nickName, setName] = useState("");
   const [phone, setPhone] = useState("");
-  const [role, setRole] = useState('1');
+  const [role, setRole] = useState("CloudLecturer");
   const [avatar, setAvatar] = useState(baseImg);
+  const storeUserId = props.choosedItem.storeUserId;
   const [imgUrl, setImgUrl] = useState(avatar);
   const [nameErrorMsg, setNameErrorMsg] = useState("");
-  const [nameStatus, setNameStatus] = useState("");
+  const [nameStatus, setNameStatus] = useState<
+    "" | "error" | "success" | "warning" | "validating" | undefined
+  >();
   const [phoneErrorMessage, setPhoneErrorMessage] = useState("");
-  const [phoneStatus, setPhoneStatus] = useState("");
+  const [phoneStatus, setPhoneStatus] = useState<
+    "" | "error" | "success" | "warning" | "validating" | undefined
+  >();
   const [cropperModalVisible, setCropperModalVisible] = useState(false);
+  const [form] = Form.useForm();
 
   useEffect(() => {
-    if (props.choosedItem.name) {
-      console.log("props.choosedItem",props.choosedItem);
-      setName(props.choosedItem.name);
+    if (props.choosedItem.nickName) {
+      console.log("props.choosedItem", props.choosedItem);
+      setName(props.choosedItem.nickName);
       props.choosedItem.phone && setPhone(props.choosedItem.phone);
-      props.choosedItem.role && setRole(props.choosedItem.role);
+      props.choosedItem.role && setRole(props.choosedItem.role[0]);
       props.choosedItem.avatar && setAvatar(avatar || baseImg);
+      const _role = props.choosedItem.role[0] === "讲师" ? "CloudLecturer" : "CloudManager";
+      form.setFieldsValue({ 
+        nickName: props.choosedItem.nickName,
+        role: _role,
+        phone: props.choosedItem.phone,
+        avatar: props.choosedItem.avatar
+       });
+
     }
-  }, [props.choosedItem]);
+  }, [props.choosedItem.nickName]);
 
   const layout = {
     labelCol: { span: 5 },
@@ -89,30 +117,95 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
   }
 
   function handleOk(): void {
-      if(!name.trim()){
-        setNameErrorMsg("请输入讲师姓名");
+    const values = form.getFieldsValue();
+    console.log("values", values);
+    if (!values.nickName.trim()) {
+      setNameErrorMsg("请输入员工姓名");
       setNameStatus("error");
       return;
     }
-      if(!phone.trim()){
+    setNameErrorMsg("");
+    setNameStatus("");
+
+    if (!String(values.phone)) {
       setPhoneErrorMessage("请输入手机号码");
-        setNameStatus("error");
+      setPhoneStatus("error");
       return;
     }
-      if(phone.trim().length !== 11){
+    setPhoneErrorMessage("");
+    setPhoneStatus("");
+
+    if (String(values.phone).length !== 11) {
       setPhoneErrorMessage("请输入11位手机号");
-        setNameStatus("error");
+      setPhoneStatus("error");
       return;
     }
+    setPhoneErrorMessage("");
+    setPhoneStatus("");
+
+    props.choosedItem.nickName ? handleEditEmployee() :  handleAddEmployee();
 
   }
-    console.log("role",name,phone,role);
-    const [form] = Form.useForm();
 
+  function handleChangeValues(name: string, value: any) {
+    switch (name) {
+      case "nickName":
+        form.setFieldsValue({ nickName: value });
+        setName(value);
+        return;
+
+      case "phone":
+        form.setFieldsValue({ phone: value });
+        setPhone(value);
+        return;
+
+      case "role":
+        form.setFieldsValue({ role: value });
+        setRole(value);
+        return;
+
+      default:
+        break;
+    }
+
+  }
+
+  function handleAddEmployee() {
+    const params = {
+      nickName,
+      phone: String(phone),
+      roleCodes:[role],
+      // avatar,
+      storeId:User.getStoreId()
+    };
+    console.log("params",params);
+    StoreService.addEmployee(params).then((res) => {
+      message.success("保存成功");
+      props.onClose();
+    });
+  }
+
+  function handleEditEmployee() {
+    const params = {
+      nickName,
+      phone: String(phone),
+      roleCodes:[role],
+      // avatar,
+      storeUserId:storeUserId
+    };
+    console.log("params",params);
+
+    StoreService.editEmployee(params).then((res) => {
+      message.success("编辑成功");
+      props.onClose();
+    });
+  }
+
+  console.log("values",form,form.getFieldsValue())
   return (
     <Modal
       visible={props.isOpen}
-      title={`${props.choosedItem.name ? "编辑员工" : "添加员工"}`}
+      title={`${props.choosedItem.nickName ? "编辑员工" : "添加员工"}`}
       className="employee-add-modal"
       width={680}
       onCancel={props.onClose}
@@ -124,22 +217,23 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
             {...layout}
             form={form}
             name="basic"
-            initialValues={{ name:"是电放费", phone: phone, role: role }}
+            initialValues={{ nickName: nickName, phone: phone, role: role }}
             onFinish={onFinish}
             onFinishFailed={onFinishFailed}
           >
             <Form.Item
               label="员工姓名"
-              name="name"
-              rules={[{ required: true}]}
-              // validateStatus={nameStatus}
+              name="nickName"
+              rules={[{ required: true }]}
+              validateStatus={nameStatus}
               help={nameErrorMsg}
             >
               <Input
                 style={{ width: 200 }}
-                // value={name}
+                // value={nickName}
                 placeholder="请输入员工名称"
                 maxLength={15}
+                onChange={(e) => handleChangeValues("nickName", e.target.value)}
               />
             </Form.Item>
 
@@ -147,15 +241,16 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
               label="手机号码"
               name="phone"
               rules={[{ required: true }]}
-              // validateStatus={phoneStatus}
+              validateStatus={phoneStatus}
               help={phoneErrorMessage}
             >
-              <Input
+              <InputNumber
                 style={{ width: 200 }}
                 // value={phone}
                 placeholder="请输入手机号"
                 maxLength={11}
-                disabled={!!props.choosedItem.name}
+                disabled={!!props.choosedItem.nickName}
+                onChange={(value) => handleChangeValues("phone", value)}
               />
             </Form.Item>
 
@@ -167,16 +262,16 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
               <RadioGroup
                 // value={role}
                 onChange={(e) => {
-                  handleChangeRole(e.target.value);
+                  handleChangeValues("role", e.target.value);
                 }}
               >
-                <Radio value={"1"}>
+                <Radio value={"CloudLecturer"}>
                   <span style={{ color: "#333" }}>普通讲师</span>
                   <p className="radio-tip">
                     仅可查看/使用与自己相关的文件和课表，并进行上课
                   </p>
                 </Radio>
-                <Radio value={"0"}>
+                <Radio value={"CloudManager"}>
                   <span style={{ color: "#333" }}>管理员</span>
                   <p className="radio-tip">可执行店铺中所有的操作</p>
                 </Radio>

src/modules/store-manege/UserManagePage.tsx

@@ -2,7 +2,7 @@
  * @Author: wufan
  * @Date: 2020-11-30 10:47:38
  * @LastEditors: wufan
- * @LastEditTime: 2020-12-03 10:35:53
+ * @LastEditTime: 2020-12-03 11:37:42
  * @Description: 用户管理页面
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
@@ -10,7 +10,7 @@
 import React, { useEffect, useState } from "react";
 import { withRouter } from "react-router-dom";
 import _ from "underscore";
-import PageControl from "@/components/PageControl";
+import { PageControl } from "@/components";
 import { Table, Modal, message, Row, Col, Input, DatePicker } from "antd";
 import StoreService from "@/domains/store-domain/storeService";
 import User from "@/common/js/user";
@@ -46,9 +46,9 @@ function UserManagePage() {
     getUserList();
   }, [query]);
 
-  function getUserList(current = 0) {
+  function getUserList() {
     let _query = _.clone(query);
-    _query.current = current + 1;
+    _query.current = query.current + 1;
     StoreService.getUserList(_query).then((res: any) => {
       setUserList(res.result.records);
       setTotal(res.result.total);
@@ -133,6 +133,7 @@ function UserManagePage() {
                     setQuery(_query);
                   }}
                 />
+
               </div>
 
               <div style={{ flex: 1 }}>
@@ -180,7 +181,7 @@ function UserManagePage() {
               current={query.current}
               pageSize={query.size}
               total={total}
-              toPage={(page) => {
+              toPage={(page: any) => {
                 const queryStates = _.clone(query);
                 queryStates.current = page;
                 setQuery(queryStates);