Skip to content

X
xiaomai-cloud-class-web
Commit 8fc136ac by wufan
Options

feat:完成企业微信对接

parent ef85c884
Showing with 162 additions and 76 deletions
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";
form.setFieldsValue({
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]);
......@@ -97,9 +105,9 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
}
function changeAvatar(img: string): any {
form.setFieldsValue({
avatar: img
});
form.setFieldsValue({
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;
......@@ -134,8 +142,7 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
setPhoneErrorMessage("");
setPhoneStatus("");
props.choosedItem.nickName ? handleEditEmployee() : handleAddEmployee();
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],
avatar
roleCodes: [role],
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,32 +232,38 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
onChange={(e) => handleChangeValues("nickName", e.target.value)}
/>
</Form.Item>
<Form.Item
label="手机号码"
name="phone"
rules={[{ required: true }]}
validateStatus={phoneStatus}
help={phoneErrorMessage}
>
<Input
style={{ width: 200 }}
placeholder="请输入手机号"
maxLength={11}
autoComplete="off"
disabled={!!props.choosedItem.nickName}
onChange={(e) => {
if((e.target.value).match(/^\d+$/)){
handleChangeValues("phone", e.target.value);
} else {
setPhoneErrorMessage("只能输入数字");
setPhoneStatus("error");
}
}
}
/>
</Form.Item>
{props.isWorkWechat ? (
<Form.Item
label="企业微信账号"
name="weChatAccount"
>
<div>{props.choosedItem.weChatAccount}</div>
</Form.Item>
) : (
<Form.Item
label="手机号码"
name="phone"
rules={[{ required: true }]}
validateStatus={phoneStatus}
help={phoneErrorMessage}
>
<Input
style={{ width: 200 }}
placeholder="请输入手机号"
maxLength={11}
autoComplete="off"
disabled={!!props.choosedItem.nickName}
onChange={(e) => {
if (e.target.value.match(/^\d+$/)) {
handleChangeValues("phone", e.target.value);
} else {
setPhoneErrorMessage("只能输入数字");
setPhoneStatus("error");
}
}}
/>
</Form.Item>
)}
<Form.Item
label="员工身份"
name="role"
......
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;
}
}
}
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,8 +115,8 @@ function EmployeesManagePage() {
const data = [...res.result];
const _query = { ...query };
let _data = _.filter(data, _item => {
return _item.roleCode !== "StoreManager";
let _data = _.filter(data, (_item) => {
return _item.roleCode !== "StoreManager";
});
setRoleIds(_data);
......@@ -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",
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',
okType: "danger",
cancelText: "取消",
onOk: () => {
handleDeleteEmployee(record.id);
......@@ -228,17 +281,19 @@ function EmployeesManagePage() {
phone: "",
role: [],
avatar: "",
storeUserId: ""
storeUserId: "",
});
}}
isWorkWechat={isWorkWechat}
/>
);
setModel(model);
}
}
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,15 +391,17 @@ function EmployeesManagePage() {
})}
</div>
</div>
<Button
onClick={() => {
handleToAddEmployee();
}}
type="primary"
className="add-show-btn"
>
添加员工
</Button>
{!isWorkWechat && (
<Button
onClick={() => {
handleToAddEmployee();
}}
type="primary"
className="add-show-btn"
>
添加员工
</Button>
)}
</div>
<div className="box-body">
<Table
......
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
* @Description: 员工管理页面
* @LastEditTime: 2021-01-09 15:59:32
* @Description: 店铺装修页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment