Skip to content

X
xiaomai-cloud-class-web
Commit 02024187 by wufan
Options

feat:添加店铺装修页

parent 242f9add
Showing with 762 additions and 160 deletions
src/components/CropperModal.tsx
/*
* @Author: sunbingqing
* @Date: 2019-07-26 14:04:00
* @Last Modified by: zhujian
* @Last Modified time: 2020-05-07 23:44:30
* @Last Modified by: mikey.zhaopeng
* @Last Modified time: 2020-11-28 11:40:44
*/
import React, { useState, useEffect } from 'react';
import { Modal, Row, Col, Button } from 'antd';
import _ from 'underscore';
import $ from 'jquery';
import $ from 'jquery';
import '@/libs/cropper/cropper.min.css';
import 'cropper';
import Upload from '../core/upload';
......@@ -18,8 +18,8 @@ import './CropperModal.less';
interface CropperModalProps {
title?: string;
imgUrl?: any;
close?: () => void;
save?: (value: any) => void;
close: () => void;
save: (value: any) => void;
type?: string;
visible?:boolean
}
......@@ -37,19 +37,19 @@ const CropperModal = (props: CropperModalProps) => {
$(() => {
const $image = $('#image');
const $previews = $('.preview-wrap .preview');
$image.cropper({
($image as any).cropper({
aspectRatio: 1,
viewMode: 1,
ready: () => {
const $clone = $image.clone().removeClass('cropper-hidden');
const $clone = $image.clone().removeClass('cropper-hidden') as any;
$previews.html($clone);
},
crop: _.throttle(function (e: any) {
const imageData = $(this).cropper('getImageData');
const imageData = ($image as any).cropper('getImageData');
$previews.each(function () {
const $preview = $(this);
const previewWidth = $preview.width();
const previewWidth:any= $preview.width();
const imageScaledRatio = e.width / previewWidth;
$preview.find('img').css({
width: imageData.naturalWidth / imageScaledRatio,
......@@ -65,8 +65,8 @@ const CropperModal = (props: CropperModalProps) => {
function _handleSave(): any {
const $image = $('#image');
$image.cropper('getCroppedCanvas').toBlob((blob: any) => {
Upload.uploadBlobToOSS(blob, 'avatar' + (new Date()).valueOf()).then((imgAddress) => {
($image as any).cropper('getCroppedCanvas').toBlob((blob: any) => {
Upload.uploadBlobToOSS(blob, 'avatar' + (new Date()).valueOf()).then((imgAddress:string) => {
save(imgAddress);
close();
});
......@@ -79,7 +79,7 @@ const CropperModal = (props: CropperModalProps) => {
const newUrl = URL.createObjectURL(avatar);
const $image = $('#image');
setImgUrl(newUrl);
$image.cropper('destroy').attr('src', newUrl);
($image as any).cropper('destroy').attr('src', newUrl);
initCropper();
}
......
src/data-source/store/request-apis.ts
/*
* @Author: wufan
* @Date: 2020-11-25 18:25:02
* @LastEditors: wufan
* @LastEditTime: 2020-11-30 17:17:17
* @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import Service from "@/common/js/service";
export function getEmployeeList(params: object) {
return Service.Apollo("public/businessMicroWebsite/getMicroWebsiteCouponList", params);
}
export function getUserList(params: object) {
return Service.Apollo("public/businessMicroWebsite/getMicroWebsiteCouponList", params);
}
export function getStoreDecorationList(params: object) {
return Service.Apollo("public/businessMicroWebsite/getMicroWebsiteCouponList", params);
}
\ No newline at end of file
src/domains/store-domain/storeService.ts
import { getEmployeeList } from '@/data-source/store/request-apis';
/*
* @Author: wufan
* @Date: 2020-11-25 18:25:02
* @LastEditors: wufan
* @LastEditTime: 2020-11-30 17:17:01
* @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import { getEmployeeList, getUserList, getStoreDecorationList } from '@/data-source/store/request-apis';
export default class StoreService {
// 获取员工列表
......@@ -6,4 +14,20 @@ export default class StoreService {
return getEmployeeList(params);
}
// 删除员工
static deleteEmployee(params: any) {
return getUserList(params);
}
// 获取用户列表
static getUserList(params: any) {
return getUserList(params);
}
// 获取用户列表
static getStoreDecorationList(params: any) {
return getStoreDecorationList(params);
}
}
\ No newline at end of file
src/index.d.ts
declare module 'jquery'
declare module 'cropper'
declare var this: any
\ No newline at end of file
src/index.tsx
/*
* @Author: 吴文洁
* @Date: 2020-04-27 20:35:34
* @LastEditors: 吴文洁
* @LastEditTime: 2020-11-09 09:43:33
* @LastEditors: wufan
* @LastEditTime: 2020-11-30 11:02:00
* @Description:
*/
......
src/modules/store-manege/EmployeeAddOrEditModal.less
......@@ -25,8 +25,10 @@
background: #E8E8E8;
margin:0 auto;
margin-bottom: 8px;
border-radius: 50%;
border-radius: 50%;
img {
width: 60px;
}
}
}
}
src/modules/store-manege/EmployeeAddOrEditModal.tsx
import React, { useState, useEffect } from 'react';
import { Modal, Form, Button, Input, Radio, Row, Col } from 'antd';
import _ from 'underscore';
import './EmployeeAddOrEditModal.less';
/*
* @Author: wufan
* @Date: 2020-11-27 16:21:49
* @LastEditors: wufan
* @LastEditTime: 2020-11-30 15:46:10
* @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 "./EmployeeAddOrEditModal.less";
import baseImg from "@/common/images/xiaomai-IMG.png";
import { CropperModal } from "@/components/";
import UpLoad from "../common/UpLoad";
import $ from 'jquery';
const RadioGroup = Radio.Group;
declare let window: any;
interface AddEmployeeModalProps {
isOpen: boolean,
choosedItem: {
name?: string,
phone?: string,
role?: string,
avatar?: string
},
onClose:(e:any) => void
isOpen: boolean;
choosedItem: {
name?: string;
phone?: string;
role?: string;
avatar?: string;
};
onClose: (e: any) => void;
}
function AddEmployeeModal(props: AddEmployeeModalProps) {
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
const [role, setRole] = useState("");
const [avatar, setavatar] = useState("");
useEffect(() => {
if (props.choosedItem.name) {
setName(name);
setPhone(phone);
setRole(role);
setavatar(avatar)
}
}, [props.choosedItem])
const layout = {
labelCol: { span: 5 },
wrapperCol: { span: 12 },
};
const onFinish = (values: any) => {
console.log('Success:', values);
};
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
};
function handleChangeRole(value: string) {
setRole(value);
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
const [role, setRole] = useState('1');
const [avatar, setAvatar] = useState(baseImg);
const [imgUrl, setImgUrl] = useState(avatar);
const [nameErrorMsg, setNameErrorMsg] = useState("");
const [nameStatus, setNameStatus] = useState("");
const [phoneErrorMessage, setPhoneErrorMessage] = useState("");
const [phoneStatus, setPhoneStatus] = useState("");
const [cropperModalVisible, setCropperModalVisible] = useState(false);
useEffect(() => {
if (props.choosedItem.name) {
console.log("props.choosedItem",props.choosedItem);
setName(props.choosedItem.name);
props.choosedItem.phone && setPhone(props.choosedItem.phone);
props.choosedItem.role && setRole(props.choosedItem.role);
props.choosedItem.avatar && setAvatar(avatar || baseImg);
}
}, [props.choosedItem]);
const layout = {
labelCol: { span: 5 },
wrapperCol: { span: 12 },
};
const onFinish = (values: any) => {
console.log("Success:", values);
};
const onFinishFailed = (errorInfo: any) => {
console.log("Failed:", errorInfo);
};
function handleChangeRole(value: string) {
setRole(value);
}
function _handleUpdateAvatar(e: any): any {
const avatar = e.target.files[0];
const newUrl = URL.createObjectURL(avatar);
const $image = $("#image");
setImgUrl(newUrl);
setCropperModalVisible(true);
}
function _onUpload(): any {
$("#CrpperAvatarPic").trigger("click");
}
function changeAvatar(img: string): any {
setAvatar(img);
setImgUrl(img);
}
function closeCropperModal(): any {
setCropperModalVisible(false);
}
function handleOk(): void {
if(!name.trim()){
setNameErrorMsg("请输入讲师姓名");
setNameStatus("error");
return;
}
if(!phone.trim()){
setPhoneErrorMessage("请输入手机号码");
setNameStatus("error");
return;
}
if(phone.trim().length !== 11){
setPhoneErrorMessage("请输入11位手机号");
setNameStatus("error");
return;
}
}
console.log("role",name,phone,role);
const [form] = Form.useForm();
return (
<Modal
visible={props.isOpen}
title={`${props.choosedItem.name ? "编辑员工" : "添加员工"}`}
className="employee-add-modal"
width={680}
onCancel={props.onClose}
onOk={handleOk}
>
<Row>
<Col span={16}>
<Form
{...layout}
form={form}
name="basic"
initialValues={{ name:"是电放费", phone: phone, role: role }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="员工姓名"
name="name"
rules={[{ required: true}]}
// validateStatus={nameStatus}
help={nameErrorMsg}
>
<Input
style={{ width: 200 }}
// value={name}
placeholder="请输入员工名称"
maxLength={15}
/>
</Form.Item>
<Form.Item
label="手机号码"
name="phone"
rules={[{ required: true }]}
// validateStatus={phoneStatus}
help={phoneErrorMessage}
>
<Input
style={{ width: 200 }}
// value={phone}
placeholder="请输入手机号"
maxLength={11}
disabled={!!props.choosedItem.name}
/>
</Form.Item>
<Form.Item
label="员工身份"
name="role"
rules={[{ required: false }]}
>
<RadioGroup
// value={role}
onChange={(e) => {
handleChangeRole(e.target.value);
}}
>
<Radio value={"1"}>
<span style={{ color: "#333" }}>普通讲师</span>
<p className="radio-tip">
仅可查看/使用与自己相关的文件和课表，并进行上课
</p>
</Radio>
<Radio value={"0"}>
<span style={{ color: "#333" }}>管理员</span>
<p className="radio-tip">可执行店铺中所有的操作</p>
</Radio>
</RadioGroup>
</Form.Item>
</Form>
</Col>
return (
<Modal
visible={props.isOpen}
title={`${props.choosedItem.name ? '编辑员工' : "添加员工"}`}
className="employee-add-modal"
width={680}
onCancel={props.onClose}
>
<Row>
<Col span={16}>
<Form
{...layout}
name="basic"
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="员工姓名"
name="name"
rules={[{ required: true, message: '' }]}
>
<Input
style={{ width: 200 }}
value={name}
placeholder="请输入员工名称"
maxLength={15}
/>
</Form.Item>
<Form.Item
label="手机号码"
name="phone"
rules={[{ required: true, message: '' }]}
>
<Input
style={{ width: 200 }}
value={phone}
placeholder="请输入手机号"
maxLength={11}
/>
</Form.Item>
<Form.Item
label="员工身份"
name="role"
rules={[{ required: false }]}
>
<RadioGroup
value={!!(role === "NORMAL")}
onChange={(e) => {
handleChangeRole(e.target.value);
}}
>
<Radio value={true}>
<span style={{ color: '#333' }}>普通讲师</span>
<p className="radio-tip">仅可查看/使用与自己相关的文件和课表，并进行上课</p>
</Radio>
<Radio value={false}>
<span style={{ color: '#333' }}>管理员</span>
<p className="radio-tip">可执行店铺中所有的操作</p>
</Radio>
</RadioGroup>
</Form.Item>
</Form>
</Col>
<Col span={8}>
<div className="avatar-box">
<div className="avatar-text">头像</div>
<div className="avatart-img"></div>
<div className="upload-avatar">上传头像</div>
</div>
</Col>
</Row>
</Modal>
)
<Col span={8}>
<div className="avatar-box">
<div className="avatar-text">头像</div>
<div className="avatart-img">
<img className="avatar" src={avatar}></img>
</div>
<div className="upload-avatar">
<Button id="click_upload_btn" onClick={_onUpload}>
点击上传
</Button>
<input
type="file"
accept="image/*"
id="CrpperAvatarPic"
style={{ display: "none" }}
onChange={_handleUpdateAvatar}
/>
{cropperModalVisible && (
<CropperModal
imgUrl={imgUrl}
save={changeAvatar}
close={closeCropperModal}
/>
)}
</div>
</div>
</Col>
</Row>
</Modal>
);
}
export default AddEmployeeModal;
\ No newline at end of file
export default AddEmployeeModal;
src/modules/store-manege/EmployeesManagePage.less
......@@ -4,9 +4,11 @@
.operation {
.edit {
color: @text-primary;
cursor: pointer;
}
.delete {
color: @text-primary;
cursor: pointer;
}
.divider-line {
margin: 0 4px;
......
src/modules/store-manege/EmployeesManagePage.tsx
......@@ -2,16 +2,16 @@
* @Author: wufan
* @Date: 2020-07-09 14:03:09
* @Last Modified by: mikey.zhaopeng
* @Last Modified time: 2020-11-27 16:19:03
* @Last Modified time: 2020-11-28 13:53:12
* 店铺管理-员工管理
*/
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import _ from "underscore";
import PageControl from "@/components/PageControl";
import SearchBar from "@/components/SearchBar";
import { CheckBox } from "@/components";
import { Button, Table, Tooltip, Modal, message, Row, Col, Input } from "antd";
import { QuestionCircleOutlined } from '@ant-design/icons';
import { storeRoleEnum } from "@/domains/store-domain/constants";
import StoreService from "@/domains/store-domain/storeService";
import EmployeeAddOrEditModal from './EmployeeAddOrEditModal';
......@@ -21,18 +21,24 @@ const { confirm } = Modal;
const { Search } = Input;
declare var window: any;
interface RecordTypes {
storeUserId: string,
role: string
}
function EmployeesManagePage() {
const [employeeList, setEmployeeList] = useState([
{
name: "赵云",
phone: "18767118672",
identity: "0",
role: "0",
storeUserId: "0"
},
{
name: "吕布",
phone: "18767118672",
identity: "0",
role: "0",
storeUserId: "2"
}
]);
const [query, setQuery] = useState({
......@@ -51,7 +57,7 @@ function EmployeesManagePage() {
const [choosedItem, setChooseItem] = useState({});
useEffect(() => {
getEmployeeList();
// getEmployeeList();
}, [query]);
function getEmployeeList() {
......@@ -87,17 +93,17 @@ function EmployeesManagePage() {
},
{
title: "身份",
dataIndex: "identity",
key: "identity",
render: (val: string = "1") => {
dataIndex: "role",
key: "role",
render: (val: string, record: RecordTypes) => {
return <div>{/* {storeRoleEnum[val]} */}</div>;
},
},
{
title: "操作",
dataIndex: "operation",
render: (val: string, record: { identity: string }) => {
return record.identity === "" || record.identity === "1" ? (
render: (val: string, record: RecordTypes) => {
return record.role === "" || record.role === "1" ? (
<div className="no-operate">-</div>
) : (
<div className="operation">
......@@ -110,7 +116,7 @@ function EmployeesManagePage() {
<span className="divider-line">{" | "}</span>
<span
className="delete"
onClick={() => handleDeleteEmployee(record)}
onClick={() => handleDeleteEmployeeConfirm(record)}
>
删除
</span>
......@@ -122,18 +128,35 @@ function EmployeesManagePage() {
}
function handleEditEmployee(record: object) {
setIsModalOpen(true);
setChooseItem(record);
setIsModalOpen(true);
}
function handleDeleteEmployee(record: object) {
function handleDeleteEmployeeConfirm(record: RecordTypes) {
return confirm({
title: '你确定要删除此讲师吗？',
content: '删除后，讲师将不能登录系统，此操作不能被撤销',
icon: <QuestionCircleOutlined />,
okText: '删除',
okType: 'danger',
cancelText: '取消',
onOk: () => {
handleDeleteEmployee(record.storeUserId);
}
})
}
function handleToAddEmployee() {
setIsModalOpen(true);
}
function handleDeleteEmployee(storeUserId: string) {
StoreService.deleteEmployee(storeUserId).then((res: any) =>{
message.success("讲师已删除");
});
}
function handleQuery(name: string, value: any) {
const _query = _.clone(query);
// _query[name] = value;
......@@ -156,7 +179,7 @@ function EmployeesManagePage() {
>
<div style={{ flex: 1 }}>
搜索员工：
{/* <Search
<Search
style={{
width: 300,
marginRight: 40,
......@@ -169,8 +192,8 @@ function EmployeesManagePage() {
setQuery(_query);
}}
onSearch={() => getEmployeeList()}
/> */}
<Search placeholder="input search text" style={{ width: 200 }} />
/>
{/* <Search placeholder="input search text" style={{ width: 200 }} /> */}
</div>
<div style={{ flex: 1 }}>
......
src/modules/store-manege/StoreDecorationPage.tsx 0 → 100644
/*
* @Author: wufan
* @Date: 2020-11-30 10:47:38
* @LastEditors: wufan
* @LastEditTime: 2020-11-30 17:35:24
* @Description: 员工管理页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import _ from "underscore";
import PageControl from "@/components/PageControl";
import {
Table,
Modal,
message,
Row,
Col,
Input,
DatePicker,
Button,
} from "antd";
import { QuestionCircleOutlined } from "@ant-design/icons";
import StoreService from "@/domains/store-domain/storeService";
import "./StoreDecorationPage.less";
import moment from "moment";
const { confirm } = Modal;
const { Search } = Input;
const { RangePicker } = DatePicker;
declare var window: any;
interface RecordTypes {
storeUserId: string;
role: string;
}
function StoreDecorationPage() {
const [storeDecorationlist, setStoreDecorationlist] = useState([
{
name: "赵云",
phone: "18767118672",
role: "0",
storeUserId: "",
},
{
name: "吕布",
phone: "18767118672",
role: "0",
storeUserId: "",
},
]);
const [query, setQuery] = useState({
current: 0,
size: 10,
name: "",
phone: "",
identity: "ALL",
instId: "1837447" || window.currentUserInstInfo.instId,
registerStartDate: null,
registerEndDate: null,
});
const [total, setTotal] = useState(0);
const [model, setModel] = useState(null);
const [isModalOpen, setIsModalOpen] = useState(false);
const [isManager, setIsManager] = useState(true);
const [isNormal, setIsNormal] = useState(true);
const [choosedItem, setChooseItem] = useState({});
useEffect(() => {
// getStoreDecorationList();
}, [query]);
function getStoreDecorationList() {
let _query = _.clone(query);
_query.current = query.current + 1;
StoreService.getStoreDecorationList(_query).then((res: any) => {
console.log(res.result.records);
setStoreDecorationlist(res.result.records);
setTotal(res.result.total);
});
}
function handleReplaceDecoration(record: RecordTypes) {}
function handleDeleteDecoration(record: RecordTypes) {}
function handleDeleteDecorationConfirm(record: RecordTypes) {
return confirm({
title: "你确定要删除这个banner吗？",
icon: <QuestionCircleOutlined />,
okText: "删除",
okType: "danger",
cancelText: "取消",
onOk: () => {
handleDeleteDecoration(record);
},
});
}
function parseColumn() {
return [
{
title: "用户姓名",
dataIndex: "name",
render: (val: string) => {
return (
<div className="coupon-info">
<span className="title">{val}</span>
</div>
);
},
},
{
title: "手机号",
dataIndex: "phone",
key: "phone",
render: (val: string) => {
return <div>{val}</div>;
},
},
{
title: "注册时间",
dataIndex: "registerDate",
key: "registerDate",
render: (val: string) => {
return <div>{moment(val).format("YYYY-MM-DD HH:mm:ss")}</div>;
},
},
{
title: "操作",
dataIndex: "operation",
render: (val: string, record: RecordTypes) => {
return record.role === "" || record.role === "1" ? (
<div className="no-operate">-</div>
) : (
<div className="operation">
<span
className="edit"
onClick={() => handleReplaceDecoration(record)}
>
替换
</span>
<span className="divider-line">{" | "}</span>
<span
className="delete"
onClick={() => handleDeleteDecoration(record)}
>
删除
</span>
</div>
);
},
},
];
}
function handleQuery(name: string, value: any) {
const _query = _.clone(query);
// _query[name] = value;
setQuery(_query);
}
function handleToAddStoreDecoration() {}
return (
<div className="page user-manage-page">
<div className="page-content">
<div className="content-header">店铺装修</div>
<div className="box">
<div className="box-header">
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "15px 0 10px",
}}
>
<div style={{ flex: 1 }}>banner设置</div>
</div>
<Button
onClick={() => {
handleToAddStoreDecoration();
}}
type="primary"
className="add-show-btn"
>
添加Banner
</Button>
</div>
<div className="box-body">
<Table
size={"middle"}
pagination={false}
dataSource={storeDecorationlist}
columns={parseColumn()}
rowKey={(item: any) => item.id}
bordered
/>
</div>
<div className="box-footer">
<PageControl
current={query.current}
pageSize={query.size}
total={total}
toPage={(page) => {
const queryStates = _.clone(query);
queryStates.current = page;
setQuery(queryStates);
}}
/>
</div>
</div>
</div>
</div>
);
}
export default withRouter(StoreDecorationPage);
src/modules/store-manege/UserManagePage.tsx 0 → 100644
/*
* @Author: wufan
* @Date: 2020-11-30 10:47:38
* @LastEditors: wufan
* @LastEditTime: 2020-11-30 14:37:03
* @Description: 员工管理页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import _ from "underscore";
import PageControl from "@/components/PageControl";
import {
Table,
Modal,
message,
Row,
Col,
Input,
DatePicker,
} from "antd";
import StoreService from "@/domains/store-domain/storeService";
import "./UserManagePage.less";
import moment from "moment";
const { confirm } = Modal;
const { Search } = Input;
const { RangePicker } = DatePicker;
const dateFormat = "YYYY-MM-DD";
declare var window: any;
function UserManagePage() {
const [userList, setUserList] = useState([
{
name: "赵云",
phone: "18767118672",
role: "0",
},
{
name: "吕布",
phone: "18767118672",
role: "0",
},
]);
const [query, setQuery] = useState({
current: 0,
size: 10,
name: "",
phone: "",
identity: "ALL",
instId: "1837447" || window.currentUserInstInfo.instId,
registerStartDate: null,
registerEndDate: null,
});
const [total, setTotal] = useState(0);
const [model, setModel] = useState(null);
const [isModalOpen, setIsModalOpen] = useState(false);
const [isManager, setIsManager] = useState(true);
const [isNormal, setIsNormal] = useState(true);
const [choosedItem, setChooseItem] = useState({});
useEffect(() => {
// getUserList();
}, [query]);
function getUserList() {
let _query = _.clone(query);
_query.current = query.current + 1;
StoreService.getUserList(_query).then((res: any) => {
console.log(res.result.records);
setUserList(res.result.records);
setTotal(res.result.total);
});
}
function parseColumn() {
return [
{
title: "用户姓名",
dataIndex: "name",
render: (val: string) => {
return (
<div className="coupon-info">
<span className="title">{val}</span>
</div>
);
},
},
{
title: "手机号",
dataIndex: "phone",
key: "phone",
render: (val: string) => {
return <div>{val}</div>;
},
},
{
title: "注册时间",
dataIndex: "registerDate",
key: "registerDate",
render: (val: string) => {
return <div>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</div>;
},
},
];
}
function handleQuery(name: string, value: any) {
const _query = _.clone(query);
// _query[name] = value;
setQuery(_query);
}
return (
<div className=" page user-manage-page">
<div className="page-content">
<div className="content-header">员工管理</div>
<div className="box">
<div className="box-header">
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "15px 0 10px",
}}
>
<div style={{ flex: 1 }}>
搜索用户：
<Search
style={{
width: 300,
marginRight: 40,
}}
placeholder="搜索用户姓名/手机号"
onChange={(event) => {
const val = event.target.value;
const _query = { ...query };
_query.name = val;
setQuery(_query);
}}
onSearch={() => getUserList()}
/>
</div>
<div style={{ flex: 1 }}>
注册时间：
<RangePicker
showTime
style={{ flex: 1, width: "auto" }}
value={
query.registerStartDate
? [
moment(query.registerStartDate),
moment(query.registerEndDate),
]
: null
}
format={"YYYY-MM-DD"}
disabledDate={(current) => {
return (
current &&
current.valueOf() > moment().endOf("day").valueOf()
);
}}
onChange={(dates: any) => {
const _query = _.clone(query);
_query.registerStartDate = dates ? dates[0].valueOf(): null;
_query.registerEndDate = dates ? dates[1].valueOf() : null;
setQuery({
..._query,
current: 1,
});
}}
/>
</div>
</div>
</div>
<div className="box-body">
<Table
size={"middle"}
pagination={false}
dataSource={userList}
columns={parseColumn()}
rowKey={(item: any) => item.id}
bordered
/>
</div>
<div className="box-footer">
<PageControl
current={query.current}
pageSize={query.size}
total={total}
toPage={(page) => {
const queryStates = _.clone(query);
queryStates.current = page;
setQuery(queryStates);
}}
/>
</div>
</div>
</div>
</div>
);
}
export default withRouter(UserManagePage);
src/routes/config/mainRoutes.tsx
/*
* @Author: 吴文洁
* @Date: 2020-04-29 10:26:32
* @LastEditors: 吴文洁
* @LastEditTime: 2020-08-27 10:07:47
* @LastEditors: wufan
* @LastEditTime: 2020-11-30 15:59:10
* @Description: 内容线路由配置
*/
import TestPage from '@/modules/test';
import EmployeesManagePage from '@/modules/store-manege/EmployeesManagePage';
import personalInfoPage from '@/modules/personalInfo';
import UserManagePage from '@/modules/store-manege/UserManagePage';
import StoreDecorationPage from '@/modules/store-manege/StoreDecorationPage';
const mainRoutes = [
{
......@@ -18,13 +20,23 @@ const mainRoutes = [
{
path: '/employees-manage',
component: EmployeesManagePage,
name: '首页'
name: '员工管理'
},
{
path: '/personal-info',
component: personalInfoPage,
name: '个人信息'
},
{
path: '/user-manage',
component: UserManagePage,
name: '用户管理'
},
{
path: '/store-decoration',
component: StoreDecorationPage,
name: '店铺装修'
},
]
export default mainRoutes;
\ No newline at end of file
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