diff --git a/src/App.css b/src/App.css index f86656e9..c0ca05de 100644 --- a/src/App.css +++ b/src/App.css @@ -133,3 +133,8 @@ color: #ed3b3b!important; } +/* 弹出框样式 */ +.questModal{ + margin-top: -200px; +} + diff --git a/src/App.js b/src/App.js index 80326d05..ddd84741 100644 --- a/src/App.js +++ b/src/App.js @@ -21,11 +21,16 @@ export default class App extends Component { return ( - + + ( + )}> + ( )}> + ); } diff --git a/src/assets/comm.css b/src/assets/comm.css index 981f7472..6e33c98d 100644 --- a/src/assets/comm.css +++ b/src/assets/comm.css @@ -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; diff --git a/src/components/filterbar/main.js b/src/components/filterbar/main.js index da68facb..90176b72 100644 --- a/src/components/filterbar/main.js +++ b/src/components/filterbar/main.js @@ -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] } diff --git a/src/components/gird/main.js b/src/components/gird/main.js index e9bc0c08..bfe3dc75 100644 --- a/src/components/gird/main.js +++ b/src/components/gird/main.js @@ -519,7 +519,6 @@ export default class menu extends React.Component { } onPrevClick = { (e) => { - console.log("上一页页码",e) this.gridPageLoad() this.props.pageChange(e); } diff --git a/src/components/input/main.js b/src/components/input/main.js index 6a3d5bd9..683736db 100644 --- a/src/components/input/main.js +++ b/src/components/input/main.js @@ -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' {labelText} {required?*:null} -
+
{icon? :null} - +
+ {kind=='password'?this.showpwd(this)}>-:null} {clearShow==true&&this.state.iptVal?:null} {countShow==true?{this.state.iptVallength}/{maxLength}:null}
diff --git a/src/components/input/main.less b/src/components/input/main.less index 631e4155..71deb5d1 100644 --- a/src/components/input/main.less +++ b/src/components/input/main.less @@ -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; diff --git a/src/components/subnav/main.js b/src/components/subnav/main.js index 6cf724e9..7616fbdd 100644 --- a/src/components/subnav/main.js +++ b/src/components/subnav/main.js @@ -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(
@@ -78,7 +76,7 @@ export default class topNav extends React.Component{ { item.items.map((item2,key2)=>{ return( - this.btnfn(item2)} className={pathnameBreak==item2.path?'menuactive':''}>{item2.name} + this.btnfn(item2)} className={pathnameBreak==item2.path&&item.items.length>1?'menuactive':''}>{item2.name} ) }) } diff --git a/src/pages/distributor/add/add.js b/src/pages/distributor/add/add.js index a8b241d4..c553723c 100644 --- a/src/pages/distributor/add/add.js +++ b/src/pages/distributor/add/add.js @@ -12,15 +12,14 @@ export default class acclist extends React.Component{ constructor(props){ super(props) this.state={ - } } render(){ const { current, pageSize } = this.state; return( -
- -
+
+ +
diff --git a/src/pages/distributor/adddistributorinfo/adddistributorinfo.js b/src/pages/distributor/adddistributorinfo/adddistributorinfo.js index 234ed32e..7877201e 100644 --- a/src/pages/distributor/adddistributorinfo/adddistributorinfo.js +++ b/src/pages/distributor/adddistributorinfo/adddistributorinfo.js @@ -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 (
- + - - - + + + +

- + +

+

+ + +

- + - -

+ +

{/* */} @@ -149,7 +163,7 @@ export default class acclist extends React.Component{ />

- +
) } diff --git a/src/pages/distributor/list/list.less b/src/pages/distributor/list/list.less index 4733fb86..1440d9b5 100644 --- a/src/pages/distributor/list/list.less +++ b/src/pages/distributor/list/list.less @@ -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; } diff --git a/src/pages/home/home.js b/src/pages/home/home.js index 7a50a1f3..8e5d6c2f 100644 --- a/src/pages/home/home.js +++ b/src/pages/home/home.js @@ -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 { - - + +
diff --git a/src/pages/login/login.js b/src/pages/login/login.js index 7b9f53fb..533dab9a 100644 --- a/src/pages/login/login.js +++ b/src/pages/login/login.js @@ -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 (
diff --git a/src/pages/login/login.less b/src/pages/login/login.less index 16c537ff..d720636c 100644 --- a/src/pages/login/login.less +++ b/src/pages/login/login.less @@ -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; } \ No newline at end of file diff --git a/src/pages/login/loginform.js b/src/pages/login/loginform.js index 5416e245..1835d0f1 100644 --- a/src/pages/login/loginform.js +++ b/src/pages/login/loginform.js @@ -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 ( <> - + +

忘记密码？

diff --git a/src/pages/system/account/add/add.js b/src/pages/system/account/add/add.js index 67e018fd..ff0e3dab 100644 --- a/src/pages/system/account/add/add.js +++ b/src/pages/system/account/add/add.js @@ -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( -
- +

diff --git a/src/pages/system/account/add/add.less b/src/pages/system/account/add/add.less index 6d52ebaf..259d779a 100644 --- a/src/pages/system/account/add/add.less +++ b/src/pages/system/account/add/add.less @@ -1,5 +1,7 @@ #accadd{ height: 100px; + .addaccount{ + } } #accadd .selectList{ display: flex; diff --git a/src/pages/system/account/add/adduserinfo/adduserinfo.js b/src/pages/system/account/add/adduserinfo/adduserinfo.js index c9906825..afe3de09 100644 --- a/src/pages/system/account/add/adduserinfo/adduserinfo.js +++ b/src/pages/system/account/add/adduserinfo/adduserinfo.js @@ -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 ( - +
+
+
+ 头像 +
+ + +
+
+
+ ); } export default Adduser; \ No newline at end of file diff --git a/src/pages/system/account/add/adduserinfo/adduserinfo.less b/src/pages/system/account/add/adduserinfo/adduserinfo.less index bbf084e3..5aecd508 100644 --- a/src/pages/system/account/add/adduserinfo/adduserinfo.less +++ b/src/pages/system/account/add/adduserinfo/adduserinfo.less @@ -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; + } + + } + } + } \ No newline at end of file diff --git a/src/pages/system/account/list/list.js b/src/pages/system/account/list/list.js index ea948951..558542ad 100644 --- a/src/pages/system/account/list/list.js +++ b/src/pages/system/account/list/list.js @@ -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:

是否删除此条数据？

, + 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(
@@ -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 ; + return this.handleChangeSmall(e,rowData)}>; } if(com == "opearo") { return - 编辑 - 删除 - 重置密码 + this.editFn(e,rowData)}>编辑 + this.delFn(e,rowData)}>删除 + 重置密码 } }} @@ -148,6 +197,24 @@ export default class acclist extends React.Component{ {/*
*/}
+ this.setVisible(false)} + footer={ +

+ , + +

+ + } + title="重置密码" + > +

+ +

+ +
) } diff --git a/src/pages/system/account/list/list.less b/src/pages/system/account/list/list.less index 665a15df..016c5ecf 100644 --- a/src/pages/system/account/list/list.less +++ b/src/pages/system/account/list/list.less @@ -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; -} \ No newline at end of file +} diff --git a/src/pages/system/account/list/modifypwd.js b/src/pages/system/account/list/modifypwd.js new file mode 100644 index 00000000..0a4fc2c1 --- /dev/null +++ b/src/pages/system/account/list/modifypwd.js @@ -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 ( +
+ + + + ); +} +export default Modifypwd; \ No newline at end of file diff --git a/src/pages/system/menu/leftnav/leftnav.less b/src/pages/system/menu/leftnav/leftnav.less index 0341175e..528c8dac 100644 --- a/src/pages/system/menu/leftnav/leftnav.less +++ b/src/pages/system/menu/leftnav/leftnav.less @@ -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; diff --git a/src/pages/system/menu/main/main.js b/src/pages/system/menu/main/main.js index 0c7af6d0..7c6b14c6 100644 --- a/src/pages/system/menu/main/main.js +++ b/src/pages/system/menu/main/main.js @@ -12,7 +12,7 @@ export default class menu extends React.Component{ render(){ return(
- +