feat:完成企业微信对接

8fc136ac · wufan · ef85c884 · 8fc136ac · 8fc136ac · 8fc136ac
Commit 8fc136ac authored Jan 09, 2021 by wufan
4 changed files
--- a/src/modules/store-manage/EmployeeAddOrEditModal.tsx
+++ b/src/modules/store-manage/EmployeeAddOrEditModal.tsx
@@ -2,7 +2,7 @@
 * @Author: wufan
 * @Date: 2020-11-27 16:21:49
 * @LastEditors: wufan
- * @LastEditTime: 2020-12-28 10:21:12
+ * @LastEditTime: 2021-01-09 16:32:41
 * @Description: Description
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -35,17 +35,23 @@ interface AddEmployeeModalProps {
    role: Array<string>;
    avatar?: string;
    storeUserId?: string;
+    weChatAccount?: string
  };
  onClose: () => void;
+  isWorkWechat: boolean;
 }
 function AddEmployeeModal(props: AddEmployeeModalProps) {
  const [nickName, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [role, setRole] = useState("CloudLecturer");
-  const [avatar, setAvatar] = useState("https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png");
+  const [avatar, setAvatar] = useState(
+    "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png"
+  );
  const storeUserId = props.choosedItem.storeUserId;
-  const [imgUrl, setImgUrl] = useState(avatar || 'https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png');
+  const [imgUrl, setImgUrl] = useState(
+    avatar || "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png"
+  );
  const [nameErrorMsg, setNameErrorMsg] = useState("");
  const [nameStatus, setNameStatus] = useState<
    "" | "error" | "success" | "warning" | "validating" | undefined
@@ -64,14 +70,16 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
      props.choosedItem.phone && setPhone(props.choosedItem.phone);
      props.choosedItem.role && setRole(props.choosedItem.role[0]);
      props.choosedItem.avatar && setAvatar(props.choosedItem.avatar);
-      const _role = props.choosedItem.role[0] === "CloudLecturer" ? "CloudLecturer" : "CloudManager";
+      const _role =
+        props.choosedItem.role[0] === "CloudLecturer"
+          ? "CloudLecturer"
+          : "CloudManager";
      form.setFieldsValue({
        nickName: props.choosedItem.nickName,
        role: _role,
        phone: props.choosedItem.phone,
-        avatar: props.choosedItem.avatar
+        avatar: props.choosedItem.avatar,
      });
    }
  }, [props.choosedItem.nickName]);
@@ -98,7 +106,7 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
  function changeAvatar(img: string): any {
    form.setFieldsValue({
-      avatar: img
+      avatar: img,
    });
    setAvatar(img);
    setImgUrl(img);
@@ -118,7 +126,7 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
    setNameErrorMsg("");
    setNameStatus("");
-    if (!String(values.phone)) {
+    if (!String(values.phone) && !props.isWorkWechat) {
      setPhoneErrorMessage("请输入手机号码");
      setPhoneStatus("error");
      return;
@@ -126,7 +134,7 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
    setPhoneErrorMessage("");
    setPhoneStatus("");
-    if (String(values.phone).length !== 11) {
+    if (String(values.phone).length !== 11 && !props.isWorkWechat) {
      setPhoneErrorMessage("请输入11位手机号");
      setPhoneStatus("error");
      return;
@@ -135,7 +143,6 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
    setPhoneStatus("");
    props.choosedItem.nickName ? handleEditEmployee() : handleAddEmployee();
  }
  function handleChangeValues(name: string, value: any) {
@@ -160,17 +167,16 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
      default:
        break;
    }
  }
  function handleAddEmployee() {
    const params = {
      nickName,
      phone: String(phone),
-      roleCodes:[role],
+      roleCodes: [role],
-      avatar
+      avatar,
    };
-    console.log("params",params);
+    console.log("params", params);
    StoreService.addEmployee(params).then((res) => {
      message.success("保存成功");
      props.onClose();
@@ -181,11 +187,11 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
    const params = {
      nickName,
      phone: String(phone),
-      roleCodes:[role],
+      roleCodes: [role],
      avatar,
-      storeUserId:storeUserId
+      storeUserId: storeUserId,
    };
-    console.log("params",params);
+    console.log("params", params);
    StoreService.editEmployee(params).then((res) => {
      message.success("编辑成功");
@@ -226,7 +232,14 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
                onChange={(e) => handleChangeValues("nickName", e.target.value)}
              />
            </Form.Item>
+            {props.isWorkWechat ? (
+              <Form.Item
+                label="企业微信账号"
+                name="weChatAccount"
+              >
+                <div>{props.choosedItem.weChatAccount}</div>
+              </Form.Item>
+            ) : (
              <Form.Item
                label="手机号码"
                name="phone"
@@ -241,17 +254,16 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
                  autoComplete="off"
                  disabled={!!props.choosedItem.nickName}
                  onChange={(e) => {
-                  if((e.target.value).match(/^\d+$/)){
+                    if (e.target.value.match(/^\d+$/)) {
                      handleChangeValues("phone", e.target.value);
                    } else {
                      setPhoneErrorMessage("只能输入数字");
                      setPhoneStatus("error");
                    }
-                  }
+                  }}
-                }
                />
              </Form.Item>
+            )}
            <Form.Item
              label="员工身份"
              name="role"

--- a/src/modules/store-manage/EmployeesManagePage.less
+++ b/src/modules/store-manage/EmployeesManagePage.less
@@ -15,4 +15,12 @@
      color: #BFBFBF;
    }
  }
+  .employee-info {
+    img {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      margin-right: 20px;
+    }
+  }
 }
--- a/src/modules/store-manage/EmployeesManagePage.tsx
+++ b/src/modules/store-manage/EmployeesManagePage.tsx
@@ -17,6 +17,7 @@ import EmployeeAddOrEditModal from "./EmployeeAddOrEditModal";
 import User from "@/common/js/user";
 import "./EmployeesManagePage.less";
+import Item from "antd/lib/list/Item";
 const { confirm } = Modal;
 const { Search } = Input;
@@ -29,6 +30,7 @@ interface RecordTypes {
  nickName: string;
  phone: string;
  avatar?: string;
+  weChatAccount?: string;
 }
 interface RoleItemType {
@@ -52,6 +54,7 @@ interface ChoosedItemType {
  role: Array<string>;
  avatar?: string;
  storeUserId?: string;
+  weChatAccount?: string;
 }
 function EmployeesManagePage() {
@@ -61,7 +64,7 @@ function EmployeesManagePage() {
    size: 10,
    nickName: "",
    phone: "",
-    roleCodes: []
+    roleCodes: [],
  });
  const [valueLike, setValueLike] = useState();
@@ -83,6 +86,8 @@ function EmployeesManagePage() {
    StoreManager: "店铺管理员",
  };
  const storeId = User.getStoreId();
+  const StoreType = User.getStoreType();
+  const isWorkWechat = !!(StoreType === "WE_CHAT_STORE");
  useEffect(() => {
    getEmployeeList();
@@ -110,7 +115,7 @@ function EmployeesManagePage() {
      const data = [...res.result];
      const _query = { ...query };
-      let _data = _.filter(data, _item => {
+      let _data = _.filter(data, (_item) => {
        return _item.roleCode !== "StoreManager";
      });
@@ -119,13 +124,23 @@ function EmployeesManagePage() {
  }
  function parseColumn() {
-    return [
+    const columns = [
      {
        title: "员工",
        dataIndex: "nickName",
-        render: (val: string) => {
+        render: (val: string, record: RecordTypes) => {
          return (
-            <div className="coupon-info">
+            <div className="employee-info">
+              {isWorkWechat && (
+                <img
+                  src={
+                    record.avatar ||
+                    "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png"
+                  }
+                  alt=""
+                />
+              )}
              <span className="title">{val}</span>
            </div>
          );
@@ -162,7 +177,11 @@ function EmployeesManagePage() {
              <span className="divider-line">{" | "}</span>
              <span
                className="delete"
-                onClick={() => handleDeleteEmployeeConfirm(record)}
+                onClick={() =>{
+                  isWorkWechat?
+                  handleDeleteWorkWechatEmployeeConfirm(record) :
+                  handleDeleteEmployeeConfirm(record)
+                }}
              >
                删除
              </span>
@@ -171,16 +190,30 @@ function EmployeesManagePage() {
        },
      },
    ];
+    if (isWorkWechat && columns) {
+      const item = {
+        title: "企业微信账号",
+        dataIndex: "weChatAccount",
+        key: "weChatAccount",
+        render: (val: string) => {
+          return <div>{val}</div>;
+        },
+      };
+      columns.splice(1, 1, item);
+    }
+    return columns;
  }
  function handleEditEmployee(record: RecordTypes) {
-    const { nickName, phone, roleCodes, avatar, id } = record;
+    const { nickName, phone, roleCodes, avatar, id, weChatAccount } = record;
    const _choosesItem = {
      nickName: nickName,
      phone: phone,
      role: roleCodes,
      avatar: avatar,
      storeUserId: id,
+      weChatAccount
    };
    setChooseItem(_choosesItem);
    const model: React.ReactNode = (
@@ -194,9 +227,11 @@ function EmployeesManagePage() {
            phone: "",
            role: [],
            avatar: "",
-            storeUserId: ""
+            storeUserId: "",
+            weChatAccount:""
          });
        }}
+        isWorkWechat={isWorkWechat}
      />
    );
    setModel(model);
@@ -206,9 +241,27 @@ function EmployeesManagePage() {
    return confirm({
      title: "你确定要删除此讲师吗？",
      content: "删除后，讲师将不能登录系统，此操作不能被撤销",
-      icon: <span className="icon iconfont default-confirm-icon">&#xe839; </span>,
+      icon: (
+        <span className="icon iconfont default-confirm-icon">&#xe839; </span>
+      ),
      okText: "删除",
-      okType: 'danger',
+      okType: "danger",
+      cancelText: "取消",
+      onOk: () => {
+        handleDeleteEmployee(record.id);
+      },
+    });
+  }
+  function handleDeleteWorkWechatEmployeeConfirm(record: RecordTypes) {
+    return confirm({
+      title: "你确定要删除此员工吗？",
+      content: "管理员需在企业微信后台的“小麦企培”应用管理中移除此员工，此员工才无法继续登陆小麦企培",
+      icon: (
+        <span className="icon iconfont default-confirm-icon">&#xe839; </span>
+      ),
+      okText: "删除",
+      okType: "danger",
      cancelText: "取消",
      onOk: () => {
        handleDeleteEmployee(record.id);
@@ -228,9 +281,10 @@ function EmployeesManagePage() {
            phone: "",
            role: [],
            avatar: "",
-            storeUserId: ""
+            storeUserId: "",
          });
        }}
+        isWorkWechat={isWorkWechat}
      />
    );
    setModel(model);
@@ -238,7 +292,8 @@ function EmployeesManagePage() {
  function handleDeleteEmployee(storeUserId: string) {
    StoreService.deleteEmployee({ storeUserId }).then((res: any) => {
-      message.success("讲师已删除");
+      const msg = isWorkWechat ? "员工已删除":"讲师已删除";
+      message.success(msg);
      getEmployeeList();
    });
  }
@@ -269,17 +324,26 @@ function EmployeesManagePage() {
                    width: 300,
                    marginRight: 40,
                  }}
-                  placeholder="搜索员工昵称/手机号"
+                  placeholder={
+                    isWorkWechat ? "请输入员工昵称" : "搜索员工昵称/手机号"
+                  }
                  onSearch={(value) => {
                    const _query = { ...query };
+                    // 企业微信用户只能搜索员工昵称
+                    if (isWorkWechat) {
+                      _query.nickName = value;
+                      _query.current = 0;
+                      setQuery(_query);
+                      return;
+                    }
                    if (value) {
                      const isPhone = (value || "").match(/^\d+$/);
                      const name = isPhone ? "phone" : "nickName";
                      const otherName = isPhone ? "nickName" : "phone";
                      _query[name] = value;
-                      _query[otherName] = '';
+                      _query[otherName] = "";
                      _query.current = 0;
                    } else {
                      _query.nickName = "";
                      _query.phone = "";
@@ -327,6 +391,7 @@ function EmployeesManagePage() {
                })}
              </div>
            </div>
+            {!isWorkWechat && (
              <Button
                onClick={() => {
                  handleToAddEmployee();
@@ -336,6 +401,7 @@ function EmployeesManagePage() {
              >
                添加员工
              </Button>
+            )}
          </div>
          <div className="box-body">
            <Table

--- a/src/modules/store-manage/StoreDecorationPage.tsx
+++ b/src/modules/store-manage/StoreDecorationPage.tsx
@@ -2,8 +2,8 @@
 * @Author: wufan
 * @Date: 2020-11-30 10:47:38
 * @LastEditors: wufan
- * @LastEditTime: 2020-12-22 11:52:56
+ * @LastEditTime: 2021-01-09 15:59:32
- * @Description: 员工管理页面
+ * @Description: 店铺装修页面
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */