HandOver-liuwu
/
frontend
mirror of https://codeup.aliyun.com/lsxd/marketing/frontend.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of https://gitee.com/red-deng-deng/marketing-system

This commit is contained in:
北海一刀 2021-11-08 09:32:40 +08:00
parent b52153a2b7 c535d3cade
commit ea7cd6a9df
28 changed files with 413 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.css
View File

@ -133,3 +133,8 @@
color: #ed3b3b!important;
}
/* 弹出框样式 */
.questModal{
margin-top: -200px;
}

7
src/App.js
View File

@ -21,11 +21,16 @@ export default class App extends Component {
return (
<Router>
<Route path="/login" exact={true} component={login} />
<Route path="/home" component={home} />
<Route path="/home" component={home} />
<Route exact={true} path="/home" render={
()=> (
<Redirect to="/home#/plan"/>)}>
</Route>
<Route exact={true} path="/" render={
()=> (
<Redirect to="/login"/>)}>
</Route>
</Router>
);
}

6
src/assets/comm.css
View File

@ -18,6 +18,12 @@
display: flex;
justify-content:flex-start;
}
.dflexac{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.dflexa{
display: flex;
align-items: center;

2
src/components/filterbar/main.js
View File

@ -35,7 +35,7 @@ import FilterSelect from "../filterSelect/main.js"
//移除筛选项
removeItem(e,id){
this.state.showItemList.forEach((item,index,arr) => {
console.log(item)
if(item.id === id){
delete this.state.showItemList[index]
}

1
src/components/gird/main.js
View File

@ -519,7 +519,6 @@ export default class menu extends React.Component {
}
onPrevClick = {
(e) => {
console.log("上一页页码",e)
this.gridPageLoad()
this.props.pageChange(e);
}

14
src/components/input/main.js
View File

@ -32,7 +32,8 @@ import classNames from 'classnames'
countShow:true,
required:false,
labelWidth:'120px',
icon:''
icon:'',
kind:'text'
}
constructor(props) {
@ -98,9 +99,11 @@ import classNames from 'classnames'
this.setState({'errshow':true});
}
}
showpwd(e){
console.log('sjaidj',e);
}
render() {
const {defalutCls,maxLength,icon, value,required,countShow,className,onChange,labelText,alignment, placeholder,height,width,clearShow,labelWidth} = this.props;
const {defalutCls,maxLength,kind,icon, value,required,countShow,className,onChange,labelText,alignment, placeholder,height,width,clearShow,labelWidth} = this.props;
const isAny: any = {};
const errbor=this.state.errmsg!=" " && this.state.iptVal=='';
@ -137,12 +140,13 @@ import classNames from 'classnames'
<span className="labeltip">{labelText}</span>
{required?<font className="warning">*</font>:null}
</div>
<div>
<div className="iptlabel">
<div className="iptright">
{icon? <Icon type="search" className="iconType"/>:null}
<input onBlur={this.losefofn} onFocus={this.focusFn} style={{resize:'none'}} value={this.state.iptVal} maxLength={maxLength} type="text" onChange={this.clearContent} onInput={this.handleInputChange} style={{height:height,lineHeight:height,width:width,textOverflow:'ellipsis'}} className={classes} placeholder={placeholder?placeholder:'请输入'}/>
<input type={kind} onBlur={this.losefofn} onFocus={this.focusFn} style={{resize:'none'}} value={this.state.iptVal} maxLength={maxLength} onChange={this.clearContent} onInput={this.handleInputChange} style={{height:height,lineHeight:height,width:width,textOverflow:'ellipsis'}} className={classes} placeholder={placeholder?placeholder:'请输入'}/>
<div className="ipticonR">
{kind=='password'?<span className="showpwd" onClick={()=>this.showpwd(this)}>-</span>:null}
{clearShow==true&&this.state.iptVal?<svg onClick={this.clearItem.bind(this)} viewBox="0 0 16 16" width="16px" height="16px"><circle fill="#AAAFBA" fill-rule="evenodd" cx="8" cy="8" r="8"></circle><path d="M5.333 5.333l5.334 5.334M10.667 5.333l-5.334 5.334" stroke="#FFF" stroke-linecap="square"></path></svg>:null}
{countShow==true?<span className="countTip">{this.state.iptVallength}/{maxLength}</span>:null}
</div>

8
src/components/input/main.less
View File

@ -47,6 +47,9 @@
}
}
.iptlabel{
position: relative;
}
.iptright{
position: relative;
display: flex;
@ -66,6 +69,7 @@
padding-left: 10px;
color: @error-red;
position: absolute;
top: 38px;
}
.keep-ipt:hover{
background: #F7F9FC;
@ -76,6 +80,10 @@
right: 15px;
display: flex;
align-items: center;
.showpwd{
margin-right: 20px;
cursor: pointer;
}
}
.iptright .countTip{
margin-left: 8px;

4
src/components/subnav/main.js
View File

@ -12,7 +12,6 @@ export default class topNav extends React.Component{
menulinklist:JSON.parse( sessionStorage.getItem('menulinklist'))?JSON.parse( sessionStorage.getItem('menulinklist')):[],
linkshowname:sessionStorage.getItem('linkshowname'),
showflag:JSON.parse( sessionStorage.getItem('showflag'))
}
this.backFn=this.backFn.bind(this)
}
@ -55,7 +54,6 @@ export default class topNav extends React.Component{
const pathname=window.location.href.lastIndexOf('\/');
const pathnamestr=window.location.href.substr(pathname);
let breakflag=pathnamestr.includes('add');
console.log('breakflag',breakflag);
return(
<div className="topheader">
<div className='nava'>
@ -78,7 +76,7 @@ export default class topNav extends React.Component{
{
item.items.map((item2,key2)=>{
return(
<Link to={item2.path} onClick={()=>this.btnfn(item2)} className={pathnameBreak==item2.path?'menuactive':''}>{item2.name}</Link>
<Link to={item2.path} onClick={()=>this.btnfn(item2)} className={pathnameBreak==item2.path&&item.items.length>1?'menuactive':''}>{item2.name}</Link>
)
})
}

7
src/pages/distributor/add/add.js
View File

@ -12,15 +12,14 @@ export default class acclist extends React.Component{
constructor(props){
super(props)
this.state={
}
}
render(){
const { current, pageSize } = this.state;
return(
<div >
<Card style={{ width:'100%' }} title="分销商新增">
<div>
<div className="maincenter">
<Card style={{ width:'100%' }} title="新建分销商" >
<div className="adddistributor">
<Adddistributor/>
</div>

20
src/pages/distributor/adddistributorinfo/adddistributorinfo.js
View File

@ -23,7 +23,7 @@ function Adduser(){
const form = Form.useForm(FormStrategy.View);
const onSubmit = React.useCallback(form => {
const value = form.getValue();
console.log('form',form)
console.log('form',value)
}, []);
return (
<Form
@ -33,7 +33,7 @@ function Adduser(){
style={{marginLeft:'10px'}}
onSubmit={onSubmit}
>
<Ipt rule={{message:'请输入分销商全称'}} countShow={false} required={true} placeholder={"请输入分销商全称"} labelWidth={'90px'} height={'36px'} width={'520px'} labelText={'分销商全称:'} alignment={'left'}/>
<Ipt rule={{message:'请输入分销商全称'}} countShow={false} required={true} placeholder={"请输入分销商全称"} labelWidth={'110px'} height={'36px'} width={'520px'} labelText={'分销商全称:'} alignment={'left'}/>
<FormImageUploadField
name="imageUpload"
label="分销商头像:"
@ -44,13 +44,19 @@ function Adduser(){
}}
validators={[Validators.minLength(1, '请上传头像')]}
/>
<Ipt value={form.val1} countShow={false} rule={{message:'请输入登录账号'}} required={true} placeholder={"请输入登录账号"} labelWidth={'90px'} height={'36px'} width={'520px'} labelText={'登录账号:'} alignment={'left'}/>
<Ipt value={form.val12} countShow={false} rule={{message:'请输入密码'}} required={true} placeholder={"请输入密码"} labelWidth={'90px'} height={'36px'} width={'520px'} labelText={'密码:'} alignment={'left'}/>
<Ipt value={form.val13} countShow={false} rule={{message:'请输入联系人'}} required={true} placeholder={"请输入联系人"} labelWidth={'90px'} height={'36px'} width={'520px'} labelText={'联系人:'} alignment={'left'}/>
<Ipt value={form.val1} countShow={false} rule={{message:'请输入登录账号'}} required={true} placeholder={"请输入登录账号"} labelWidth={'110px'} height={'36px'} width={'520px'} labelText={'登录账号:'} alignment={'left'}/>
<Ipt kind={'password'} value={form.val12} countShow={false} rule={{message:'请输入密码'}} required={true} placeholder={"请输入密码"} labelWidth={'110px'} height={'36px'} width={'520px'} labelText={'密码:'} alignment={'left'}/>
<Ipt value={form.val13} countShow={false} rule={{message:'请输入联系人'}} required={true} placeholder={"请输入联系人"} labelWidth={'110px'} height={'36px'} width={'520px'} labelText={'联系人:'} alignment={'left'}/>
<p className="dflexajcs">
<Ipt value={form.val14} countShow={false} rule={{message:'请输入联系人手机号'}} required={true} placeholder={"请输入联系人手机号"} labelWidth={'110px'} height={'36px'} width={'520px'} labelText={'联系人手机号:'} alignment={'left'}/>
<Ipt value={form.val14} countShow={false} rule={{message:'请输入联系人邮箱'}} required={true} placeholder={"请输入联系人邮箱"} labelWidth={'90px'} height={'36px'} width={'520px'} labelText={'联系人邮箱:'} alignment={'left'}/>
<Button>添加号码</Button>
</p>
<p className="dflexajcs">
<Ipt value={form.val14} countShow={false} rule={{message:'请输入联系人邮箱'}} required={true} placeholder={"请输入联系人邮箱"} labelWidth={'110px'} height={'36px'} width={'520px'} labelText={'联系人邮箱:'} alignment={'left'}/>
<Button>添加邮箱</Button>
</p>
<div className="selectList">
<FormSelectField
name="type1"
label="销售人员:"

3
src/pages/distributor/adddistributorinfo/adddistributorinfo.less
View File

@ -4,4 +4,7 @@
}
.zent-form-horizontal[data-zv="9.11.0"] .zent-form-control-content{
margin-left: 0;
}
.adddistributor .iptfillself .label {
margin-right:66px;
}

10
src/pages/distributor/edit/edit.js Normal file
View File

@ -0,0 +1,10 @@
import React from "react"
import './edit.less'
export default class edit extends React.Component{
constructor(props){
super(props)
this.state={
}
}
}

0
src/pages/distributor/edit/edit.less Normal file
View File

24
src/pages/distributor/list/list.js
View File

@ -1,12 +1,13 @@
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import { HashRouter as Router, Route, Link } from "react-router-dom";
import { Card,Button,Pagination } from 'zent';
import { Button } from 'zent';
import "./list.less"
import { Switch ,Swiper,Dropdown,DropdownPosition,DropdownClickTrigger,Icon,MenuItem,DropdownContent,Menu } from 'zent';
import "../../../assets/comm.css"
import Ipt from "../../../components/input/main"
import Grid from "../../../components/gird/main.js"
import TabPage from "../../../components/tabPage/main.js"
import Filterbar from "../../../components/filterbar/main.js"
const PAGE_SIZE_OPTIONS = [10, 20, 30];
const Column = [
@ -79,6 +80,7 @@ export default class acclist extends React.Component{
constructor(props){
super(props)
this.state={
tabList:[{title:"分销商列表"}],
distdata:[{username:'红噔噔',phone:'13541778893',role:'管理员',name:'红噔噔',status:'红噔噔'
,time:'2021-00-04 13:48:45',post:'技术',opearo:'红噔噔'},{username:'红噔噔',phone:'13541778893',role:'管理员',name:'红噔噔',status:'红噔噔'
,time:'2021-00-04 13:48:45',post:'技术',opearo:'红噔噔'},{username:'红噔噔',phone:'13541778893',role:'管理员',name:'红噔噔',status:'红噔噔'
@ -88,7 +90,19 @@ export default class acclist extends React.Component{
}
}
clickFn(){
this.props.history.push('/distributor/add');
this.props.history.push('/distributor-add');
sessionStorage.setItem('pathname2','/system/distributor-add')
let activerou=[{items:[
{
"path": "/system/distributor-list",
"name": "分销商管理"
},
{
"path": "/system/distributor-add",
"name": "新建分销商"
}
]}]
sessionStorage.setItem('breaknav',JSON.stringify(activerou));
}
@ -96,8 +110,8 @@ export default class acclist extends React.Component{
const { current, pageSize } = this.state;
return(
<div id="dislist">
<Card style={{ width:'100%' }} title="分销商列表">
<p className="accountable dflexaj">
<TabPage tabs={this.state.tabList}>
<p className="distable dflexj">
<Button type="primary" icon="plus" onClick={this.clickFn.bind(this)}>新建分销商</Button>
{/* <Button type="info">批量操作</Button> */}
<Ipt icon="search" placeholder={"请输入分销商名称、分销商编号、手机号、联系人进行搜索"} countShow={false} height={'36px'} width={'260px'} alignment={'left'}/>
@ -149,7 +163,7 @@ export default class acclist extends React.Component{
/>
</div>
</Card>
</TabPage>
</div>
)
}

9
src/pages/distributor/list/list.less
View File

@ -1,4 +1,13 @@
#dislist{
width: 98%;
margin: 0 auto;
.distable{
padding:24px 24px 12px;
box-sizing: border-box;
}
.tabpage {
padding-bottom: 24px;
}
.grid-link,.linkmore{
color: #2B66F2;
}

40
src/pages/home/home.js
View File

@ -1,11 +1,12 @@
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import { HashRouter as Router, Route, Link,Redirect } from "react-router-dom";
import "./home.less"
import "../../assets/comm.css"
// import Topnav from "../../components/topNav/main"
import Subnav from "../../components/subnav/main"
import { Avatar, Badge } from 'zent';
import { Avatar,Notify } from 'zent';
import extension from '../extension/main/main';
import overview from '../overview/main/main';
import newplan from '../newplan/main';
@ -25,8 +26,12 @@ import station from '../system/station/main';
import menu from '../system/menu/main/main';
import distributorlist from '../distributor/list/list';
import distributoradd from '../distributor/add/add';
let timerstop=null;
export default class App extends Component {
constructor(props){
super(props)
window["mydata"] = this;
}
state = {
pathname:'',
navlist:[{
@ -40,8 +45,11 @@ export default class App extends Component {
path:'/system'
},{
name:'分销商管理',
childmenu:[],
path:'/distributor/list'
childmenu:[{
group:'分销商管理',
items:[{path:'/distributor-list',name:'分销商管理'}]
}],
path:'/distributor-list'
},{
name:'营销计划管理',
childmenu:[],
@ -68,13 +76,33 @@ export default class App extends Component {
childmenu:[],
path:'/extension'
}],
lastTime:new Date().getTime(),
currentTime: new Date().getTime(),
timeOut:2 * 60 * 1000, //设置超时时间： 1分
};
componentWillMount(){
const pathname=window.location.href.lastIndexOf('\/');
const pathnamestr=window.location.href.substr(pathname);
this.setState({pathname:`${pathnamestr}`});
sessionStorage.setItem('showflag',true);
window.document.addEventListener('mouseover',function(){
window["mydata"].setState({lastTime:new Date().getTime()}); //更新操作时间
});
timerstop=window.setInterval( window["mydata"].testTime, 1000);
}
testTime(){
window["mydata"].setState({'currentTime':new Date().getTime()});//更新当前时间
if( window["mydata"].state.currentTime - window["mydata"].state.lastTime > window["mydata"].state.timeOut){ //判断是否超时
window.clearInterval(timerstop)
Notify.clear()
Notify.warn('登录失效，请重新登录!')
sessionStorage.clear();
setTimeout(()=>{
window["mydata"].props.history.push('/login');
},5000);
}
}
/* 定时器 间隔1秒检测是否长时间未操作页面 */
render() {
return (
@ -123,8 +151,8 @@ export default class App extends Component {
<Route path="/system/role-add" exact={true} component={roleadd} />
<Route path="/system/station" exact={true} component={station} />
<Route path="/system/menu" exact={true} component={menu} />
<Route path="/distributor/list" exact={true} component={distributorlist} />
<Route path="/distributor/add" exact={true} component={distributoradd} />
<Route path="/distributor-list" exact={true} component={distributorlist} />
<Route path="/distributor-add" exact={true} component={distributoradd} />
</div>
</aside>
</div>

5
src/pages/login/login.js
View File

@ -6,6 +6,10 @@ import Loginform from "./loginform"
import Button from "../../components/button/main"
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
export default class App extends Component {
constructor(props){
super(props)
window['react']=this;
}
state = {
pathname:'',
};
@ -14,6 +18,7 @@ export default class App extends Component {
const pathnamestr=window.location.href.substr(pathname);
this.setState({pathname:`${pathnamestr}`});
}
render() {
return (
<div className="loginPage dflexaj">

6
src/pages/login/login.less
View File

@ -1,6 +1,7 @@
.loginPage{
width: 100%;
height: 100%;
}
.loginPage .login-left{
width: 70%;
@ -50,4 +51,9 @@ background-position: left center;
.loginPage .zent-btn[data-zv="9.11.0"]:hover {
color: #fff;
}
.forget{
text-align: right;
color: #296bef!important;
cursor: pointer;
}

12
src/pages/login/loginform.js
View File

@ -10,6 +10,7 @@ import {
Validators,
Input,
Icon,
Link,
Button,
ButtonDirective,
Notify
@ -32,11 +33,16 @@ function FormDom(props) {
}, [form]);
const onSubmit = React.useCallback(form => {
const value = form.getValue();
props.history.push('/home')
props.history.push('/home')
}, []);
const forgetFn =()=>{
Notify.clear();
Notify.warn('请联系管理员')
}
return (
<>
<Form form={form} disabled={disabled} onSubmit={onSubmit}>
<Form form={form} disabled={disabled} onSubmit={onSubmit} disableEnterSubmit={false} scrollToError={true}>
<FormInputField
name="name"
label={
@ -48,6 +54,7 @@ function FormDom(props) {
required="请输入用户名"
/>
<FormInputField
name="password"
props={{ type: 'password',placeholder: '请输入密码' }}
label="密码"
@ -60,6 +67,7 @@ function FormDom(props) {
]}
required="请输入密码"
/>
<p className="forget" onClick={forgetFn}>忘记密码？</p>
<Button className="loginBtn" type="primary" htmlType="submit">登录</Button>
</Form>

11
src/pages/system/account/add/add.js
View File

@ -8,13 +8,18 @@ import Adduser from "../add/adduserinfo/adduserinfo"
export default class accadd extends React.Component{
constructor(props){
super(props)
this.state={}
this.state={
pagetitle:'新建账号'
}
}
componentWillMount(){
let pagetitle=JSON.parse(sessionStorage.getItem('breaknav'))[0].pagetitle;
this.setState({pagetitle:pagetitle+'账号'});
}
render(){
return(
<div id="accadd" className="maincenter">
<Card style={{ width:'100%' }} title="新建账号">
<Card style={{ width:'100%' }} title={this.state.pagetitle}>
<p className="addaccount">
<Adduser/>
</p>

2
src/pages/system/account/add/add.less
View File

@ -1,5 +1,7 @@
#accadd{
height: 100px;
.addaccount{
}
}
#accadd .selectList{
display: flex;

54
src/pages/system/account/add/adduserinfo/adduserinfo.js
View File

@ -1,13 +1,14 @@
import React from "react"
import "./adduserinfo.less"
import Ipt from "../../../../../components/input/main"
import "../../../../../assets/comm.css"
import {
Form,
FormStrategy,
Radio,
Checkbox,
Notify,
ImageUpload,
Validators,
FormSelectField,
FormUploadField,
@ -43,6 +44,7 @@ function Adduser(){
const onSubmit = React.useCallback(form => {
const value = form.getValue();
console.log(value)
}, []);
@ -114,9 +116,38 @@ function Adduser(){
);
}
function onUploadError(type, data){
if (type === 'overMaxAmount') {
Notify.error(`最多可上传 ${data.maxAmount} 张图片`);
} else if (type === 'overMaxSize') {
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
}
};
function onUploadChange(files){
console.log(files);
};
function onUpload (file, report){
return new Promise((resolve, reject) => {
let count = 0;
const update = () => {
if (count < 100) {
count += 10;
report(count);
setTimeout(update, 500);
} else {
}
};
});
};
return (
<div className="addaccinfo">
<Form
className="addform"
form={form}
layout="horizontal"
scrollToError
@ -186,6 +217,7 @@ function Adduser(){
/>
<FormSelectField
name="type3"
withoutLabel
required
validators={[Validators.required('请选择岗位')]}
props={{
@ -200,6 +232,7 @@ function Adduser(){
<FormSelectField
name="type4"
label="权限:"
required
validators={[Validators.required('请选择权限')]}
props={{
@ -219,6 +252,23 @@ function Adduser(){
</Button>
</div>
</Form>
<div className="mypic">
<b>头像</b>
<div className="changepic dflexac">
<ImageUpload
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
tips="建议尺寸 30*30，图片不超过 500kb"
maxAmount={1}
onChange={onUploadChange}
onUpload={onUpload}
onError={onUploadError}
/>
<Button className="putImage">上传头像</Button>
</div>
</div>
</div>
);
}
export default Adduser;

41
src/pages/system/account/add/adduserinfo/adduserinfo.less
View File

@ -2,12 +2,37 @@
flex-basis: 60px!important;
/* justify-content: flex-end; */
}
.select-item{
width: 300px;
display: flex;
align-items: center;
margin-bottom: 20px;
}
.select-item-label{
padding-right: 10px;
.addaccinfo{
width: 100%;
display: flex;
.addform{
width: 70%;
}
.mypic{
flex: 1;
padding: 30px 50px;
border-left: 1px solid #F2F2F2;
.changepic{
margin-top:20px;
.zent-image-upload-list[data-zv="9.11.0"] {
justify-content: center;
width: 100px;
margin: 0 auto;
height: 100px;
border-radius: 50px;
background: #00bfff!important;
// overflow: hidden;
.zent-image-upload-trigger[data-zv="9.11.0"]{
width: 100px;
height: 100px;
}
}
.putImage{
margin-top: 30px;
}
}
}
}

97
src/pages/system/account/list/list.js
View File

@ -1,13 +1,13 @@
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import { HashRouter as Router, Route, Link } from "react-router-dom";
import { Button } from 'zent';
import "./list.less"
import {Switch ,Icon } from 'zent';
import {Switch ,Icon ,Sweetalert, Notify,Dialog,Button} from 'zent';
import TabPage from "../../../../components/tabPage/main.js"
import "../../../../assets/comm.css"
import Grid from "../../../../components/gird/main.js"
import Ipt from "../../../../components/input/main"
import Modifypwd from "./modifypwd"
const Column = [
{
title: '用户名',
@ -51,7 +51,8 @@ const Column = [
title: '状态',
width:'auto',
type: "slot",
prop:'name'
name:'name',
prop:'status'
},
{
title: '创建时间',
@ -75,19 +76,25 @@ export default class acclist extends React.Component{
super(props)
this.state={
pageSize: 10,
checkedSmall: true,
current: 2,
visible: false,
tabList:[{title:"账号列表"}],
accoutdata:[{username:'红噔噔',phone:'13541778893',role:'管理员',name:'红噔噔',status:'红噔噔'
,time:'2021-00-04 13:48:45',post:'技术',opearo:'红噔噔'},{username:'红噔噔',phone:'13541778893',role:'管理员',name:'红噔噔',status:'红噔噔'
,time:'2021-00-04 13:48:45',post:'技术',opearo:'红噔噔'},{username:'红噔噔',phone:'13541778893',role:'管理员',name:'红噔噔',status:'红噔噔'
,time:'2021-00-04 13:48:45',post:'技术',opearo:'红噔噔'},{username:'红噔噔',phone:'13541778893',role:'管理员',name:'红噔噔',status:'红噔噔'
,time:'2021-00-04 13:48:45',post:'技术',opearo:'红噔噔'},{username:'红噔噔',phone:'13541778893',role:'管理员',name:'红噔噔',status:'红噔噔'}]
accoutdata:[{username:'红噔噔',phone:'13541778893',role:'管理员',status:true,name:'红噔噔'
,time:'2021-00-04 13:48:45',post:'技术',opearo:'红噔噔'},{username:'红噔噔',phone:'13541778893',role:'管理员',status:true,name:'红噔噔'
,time:'2021-00-04 13:48:45',post:'技术',opearo:'红噔噔'},{username:'红噔噔',phone:'13541778893',role:'管理员',status:true,name:'红噔噔'
,time:'2021-00-04 13:48:45',post:'技术',opearo:'红噔噔'}]
}
}
handleChangeSmall(e,rowData) {
// this.setState({ checkedSmall: checked });
console.log(rowData);
rowData.status=!rowData.status;
};
clickFn(){
this.props.history.push('/system/account-add');
sessionStorage.setItem('pathname2','/system/account-add')
let activerou=[{items:[
let activerou=[{'pagetitle':'新建',items:[
{
"path": "/system/account-list",
"name": "账号管理"
@ -102,7 +109,49 @@ export default class acclist extends React.Component{
onChange = options => {
this.setState(options);
};
onConfirm = () => {
Notify.success('我真的知道了');
}
onCancel = () => {
Notify.error('我真的取消了');
}
//表单删除
delFn(e,row){
Sweetalert.confirm({
type:'warning',
closeBtn:true,
title:'确认操作',
content: <p>是否删除此条数据？</p>,
onConfirm: this.onConfirm,
onCancel: this.onCancel,
className:'questModal',
parentComponent: this
});
}
editFn(e,row){
this.props.history.push('/system/account-add');
sessionStorage.setItem('pathname2','/system/account-add')
let activerou=[{'pagetitle':'编辑',items:[
{
"path": "/system/account-list",
"name": "账号管理"
},
{
"path": "/system/account-add",
"name": "编辑账号"
}
]}]
sessionStorage.setItem('breaknav',JSON.stringify(activerou));
}
//重置密码
resetpwd(){
console.log('重置密码');
this.setState({visible:true});
}
setVisible = visible => {
this.setState({ visible });
};
render(){
return(
<div id="accountlist">
@ -126,20 +175,20 @@ export default class acclist extends React.Component{
this.pageChange(e)
}}
checkChange ={(selection)=>{
console.log(selection)
}}
ComponentHandler={(com,rowData)=>{
if(com == "name")
if(com == "status")
{
return <Switch size="small" checked={true}></Switch>;
return <Switch size="small" checked={rowData.status} onChange={(e)=>this.handleChangeSmall(e,rowData)}></Switch>;
}
if(com == "opearo")
{
return <span>
<a href="https://youzan.com" className="grid-link" >编辑</a>
<a href="https://youzan.com" className="grid-link" >删除</a>
<a href="https://youzan.com" className="grid-link" >重置密码</a>
<span className="grid-link" onClick={(e)=>this.editFn(e,rowData)}>编辑</span>
<span className="grid-link" onClick={(e)=>this.delFn(e,rowData)}>删除</span>
<span className="grid-link" onClick={this.resetpwd.bind(this)}>重置密码</span>
</span>
}
}}
@ -148,6 +197,24 @@ export default class acclist extends React.Component{
{/* </div> */}
</div>
</TabPage>
<Dialog
visible={this.state.visible}
className="questModal"
onClose={() => this.setVisible(false)}
footer={
<p>
<Button onClick={() => this.setVisible(false)} type="primary">确定</Button>,
<Button onClick={() => this.setVisible(false)}>取消</Button>
</p>
}
title="重置密码"
>
<p>
<Modifypwd/>
</p>
</Dialog>
</div>
)
}

4
src/pages/system/account/list/list.less
View File

@ -1,8 +1,10 @@
#accountlist{
width: 98%;
margin: 0 auto;
.grid-link,.linkmore{
color: #2B66F2;
cursor: pointer;
}
.tabbar-title{
color: #313233;
@ -27,4 +29,4 @@ box-sizing: border-box;
.acctable{
padding: 24px 0;
box-sizing: border-box;
}
}

82
src/pages/system/account/list/modifypwd.js Normal file
View File

@ -0,0 +1,82 @@
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import {
Form,
FormStrategy,
Radio,
Checkbox,
Notify,
Validators,
FormNumberInputField,
FormInputField,
FormSingleUploadField,
} from 'zent';
/**
* 自定义表单校验，内置组件接受 renderError 参数，若不传默认会显示 message
*/
function setPassword(value, ctx){
// if (value !== ctx.getSectionValue('password').password) {
// return {
// name: 'passwordEqual',
// message: '两次填写的密码不一致',
// };
// }
// console.log('value',value);
// console.log('ctx',ctx);
// return null;
}
function equalsPassword(value, ctx) {
console.log('value',value);
console.log('ctx',ctx.getSectionValue('password'));
// if (value !== ctx.getSectionValue('password').password) {
// return {
// name: 'passwordEqual',
// message: '两次填写的密码不一致',
// };
// }
// return null;
}
function idLength(value) {
if (value.length !== 10 && value.length !== 15) {
return {
name: 'idLength',
message: '证件号码是10位或者15位数字',
};
}
}
function Modifypwd() {
const form = Form.useForm(FormStrategy.View);
return (
<Form
form={form}
layout="horizontal"
scrollToError
>
<FormInputField
name="password"
label="新密码:"
required
helpDesc=''
notice="6-16位字符,数字+字母组成，字母(区分大小写)"
validators={[setPassword]}
props={{
type: 'password',
}}
/>
<FormInputField
name="confirmPw"
label="确认密码:"
required
notice="必须与新密码输入一致"
validators={[equalsPassword]}
props={{
type: 'password',
}}
/>
</Form>
);
}
export default Modifypwd;

2
src/pages/system/menu/leftnav/leftnav.less
View File

@ -1,6 +1,8 @@
#menuLeft{
padding-left: 30px;
height: 100%;
padding-bottom: 24px;
box-sizing: border-box;
overflow-y: scroll;
.zent-tree[data-zv="9.11.0"]{
color: #000!important;

2
src/pages/system/menu/main/main.js
View File

@ -12,7 +12,7 @@ export default class menu extends React.Component{
render(){
return(
<div id="systemMenu" className="maincenter">
<Card style={{ width:'100%' }} title="菜单管理">
<Card style={{ width:'100%' }}>
<p className="menuBtn">
<Button type="primary" icon="plus">新建子菜单</Button>
<Button type="info" >添加一级菜单</Button>