Browse Source

'用户管理样式调整'

release_0.0.1
‘lijianhao’ 2 years ago
parent
commit
d8bdf18989
  1. 2
      web/client/src/sections/organization/components/depModal.js
  2. 69
      web/client/src/sections/organization/components/userModal.js
  3. 16
      web/client/src/sections/organization/containers/user.js
  4. 7
      web/client/src/sections/quanju/containers/footer/conserve/index.js
  5. 12
      web/client/src/sections/quanju/containers/heand/index.js

2
web/client/src/sections/organization/components/depModal.js

@ -68,6 +68,7 @@ const DepModal = (props) => {
function mapStateToProps(state) { function mapStateToProps(state) {
const { depMessage } = state; const { depMessage } = state;
console.log('depMessage:',depMessage);
const pakData = (dep) => { const pakData = (dep) => {
return dep.map((d) => { return dep.map((d) => {
return { return {
@ -79,6 +80,7 @@ function mapStateToProps(state) {
}) })
} }
let depData = pakData(depMessage.data || []) let depData = pakData(depMessage.data || [])
console.log('depData:',depData);
return { return {
loading: depMessage.isRequesting, loading: depMessage.isRequesting,
depData, depData,

69
web/client/src/sections/organization/components/userModal.js

@ -48,23 +48,23 @@ const UserModal = (props) => {
placeholder="请输入姓名" placeholder="请输入姓名"
rules={[{ required: true, message: '请输入姓名' }]} rules={[{ required: true, message: '请输入姓名' }]}
/> />
<ProFormText < ProFormText
name={['contract', 'username']} name={['contract', 'phone']}
width="md" width="md"
label="用户名" label="手机号(用户名)"
maxLength={20}
required required
fieldProps={{ fieldProps={{
maxLength: 30, maxLength: 11,
}} }}
getValueFromEvent={(event) => { getValueFromEvent={(event) => {
return event.target.value return event.target.value.replace(/\D/g, '')
}} }}
placeholder="请输入用户名" placeholder="请输入手机号(用户名)"
rules={[ rules={[
{ required: true } { required: true, valueType: Number, max: 11 }, { pattern: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/, message: "请输入正确的手机号" }
]} ]}
/> />
</ProForm.Group> </ProForm.Group>
<ProForm.Group> <ProForm.Group>
<ProFormTreeSelect <ProFormTreeSelect
@ -97,24 +97,38 @@ const UserModal = (props) => {
}} }}
expandedKeys={["title"]} expandedKeys={["title"]}
/> />
< ProFormText {modalType == 'edit' ? null : <ProFormText.Password
name={['contract', 'phone']} name={['contract', 'password']}
width="md" width="md"
label="手机号" label="密码"
required required
placeholder="请输入密码"
fieldProps={{ fieldProps={{
maxLength: 11, autocomplete: 'new-password'
}}
getValueFromEvent={(event) => {
return event.target.value.replace(/\D/g, '')
}} }}
placeholder="请输入手机号"
rules={[ rules={[
{ required: true, valueType: Number, max: 11 }, { pattern: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/, message: "请输入正确的手机号" } { required: true, message: '请填写密码' },
{ min: 6, message: '请填写至少6位密码' },
]} ]}
/> />}
{/* <ProFormText
name={['contract', 'username']}
width="md"
label="职位"
fieldProps={{
maxLength: 30,
}}
getValueFromEvent={(event) => {
return event.target.value
}}
placeholder="请输入职位"
// rules={[
// { required: true }
// ]}
/> */}
</ProForm.Group> </ProForm.Group>
<ProForm.Group> <ProForm.Group>
<ProFormText <ProFormText
name={['contract', 'email']} name={['contract', 'email']}
width="md" width="md"
@ -126,22 +140,6 @@ const UserModal = (props) => {
{ type: 'email', message: '请输入正确格式的邮箱' }, { type: 'email', message: '请输入正确格式的邮箱' },
]} ]}
/> />
{modalType == 'edit' ? null : <ProFormText.Password
name={['contract', 'password']}
width="md"
label="密码"
required
placeholder="请输入密码"
fieldProps={{
autocomplete: 'new-password'
}}
rules={[
{ required: true, message: '请填写密码' },
{ min: 6, message: '请填写至少6位密码' },
]}
/>}
</ProForm.Group>
<ProForm.Group>
<ProFormSwitch <ProFormSwitch
name={['contract', 'enable']} name={['contract', 'enable']}
width="md" width="md"
@ -158,7 +156,7 @@ const UserModal = (props) => {
function mapStateToProps(state) { function mapStateToProps(state) {
const { depMessage } = state; const { depMessage } = state;
console.log('depMessage:',depMessage); console.log('depMessage:', depMessage);
const pakData = (dep) => { const pakData = (dep) => {
// console.log(dep); // console.log(dep);
return dep.map((d) => { return dep.map((d) => {
@ -171,7 +169,6 @@ function mapStateToProps(state) {
}) })
} }
let depData = pakData(depMessage.data || []) let depData = pakData(depMessage.data || [])
return { return {
loading: depMessage.isRequesting, loading: depMessage.isRequesting,
depData, depData,

16
web/client/src/sections/organization/containers/user.js

@ -21,6 +21,8 @@ const UserManage = (props) => {
const [depModalVisible, setDepModalVisible] = useState(false); const [depModalVisible, setDepModalVisible] = useState(false);
const [depModalType, setDepModalType] = useState(); const [depModalType, setDepModalType] = useState();
const [depModalRecord, setDepModalRecord] = useState(); const [depModalRecord, setDepModalRecord] = useState();
const [selectedTree, setSelectedTree] = useState();
useEffect(() => { useEffect(() => {
dispatch(getDepMessage()) dispatch(getDepMessage())
@ -37,14 +39,11 @@ const UserManage = (props) => {
{ {
title: '姓名', title: '姓名',
dataIndex: 'name', dataIndex: 'name',
}, {
title: '用户名',
dataIndex: 'username',
}, },
{ {
title: '手机号', title: '手机号(用户名)',
dataIndex: 'phone', dataIndex: 'phone',
}, },
{ {
title: '邮箱', title: '邮箱',
dataIndex: 'email', dataIndex: 'email',
@ -192,7 +191,7 @@ const UserManage = (props) => {
</Tooltip> </Tooltip>
<div style={{ width: '30%' }} > <div style={{ width: '30%' }} >
{ {
depSelectedKeys == id ? <> selectedTree == id ? <>
<FormOutlined onClick={() => { <FormOutlined onClick={() => {
setDepModalRecord(item) setDepModalRecord(item)
setDepModalVisible(true) setDepModalVisible(true)
@ -216,7 +215,7 @@ const UserManage = (props) => {
<Button <Button
type="primary" type="primary"
key="primary" key="primary"
style={{ marginLeft: 50 }} style={{ marginLeft: 10 }}
onClick={() => openDepModal('create')} onClick={() => openDepModal('create')}
>新建部门</Button> >新建部门</Button>
{ {
@ -226,8 +225,8 @@ const UserManage = (props) => {
defaultExpandedKeys={[depMessage[0].id]} defaultExpandedKeys={[depMessage[0].id]}
selectedKeys={depSelectedKeys} selectedKeys={depSelectedKeys}
onSelect={(selectedKeys, e) => { onSelect={(selectedKeys, e) => {
if (e.selected) { if (e.selected) {
setSelectedTree(selectedKeys)
setDepSelectedKeys(selectedKeys) setDepSelectedKeys(selectedKeys)
dispatch(getDepUser(selectedKeys[0])) dispatch(getDepUser(selectedKeys[0]))
} }
@ -259,6 +258,7 @@ const UserManage = (props) => {
<Col /* flex="auto" */ style={{ width: "calc(100% - 260px)", height: '100%', display: "black" }}> <Col /* flex="auto" */ style={{ width: "calc(100% - 260px)", height: '100%', display: "black" }}>
<Card bordered={false} height={clientHeight} bodyStyle={{ padding: 8, paddingTop: 24, overflow: "hidden", width: "100%" }}> <Card bordered={false} height={clientHeight} bodyStyle={{ padding: 8, paddingTop: 24, overflow: "hidden", width: "100%" }}>
<ProTable <ProTable
columns={columns} columns={columns}
dataSource={depUser} dataSource={depUser}

7
web/client/src/sections/quanju/containers/footer/conserve/index.js

@ -1,8 +1,13 @@
import React from 'react' import React from 'react'
import Left from './left'
import Right from './right'
const Conserve = () => { const Conserve = () => {
return ( return (
<>养护</> <div style={{ display: 'flex', width: '100%',height: '100%',justifyContent: 'space-between' }}>
<Left />
<Right />
</div>
) )
} }
export default Conserve export default Conserve

12
web/client/src/sections/quanju/containers/heand/index.js

@ -21,16 +21,16 @@ const Header = (props) => {
<div className={tabKey == "build" ? "tabKey-map" : "notabKey"} style={{ backgroundImage: "url(/assets/images/quanju/zuobeijing.png)", backgroundSize: "100% 100%" }} onClick={() => { <div className={tabKey == "build" ? "tabKey-map" : "notabKey"} style={{ backgroundImage: "url(/assets/images/quanju/zuobeijing.png)", backgroundSize: "100% 100%" }} onClick={() => {
onClick("build") onClick("build")
}}><a>建设</a></div> }}><a>建设</a></div>
<div className={tabKey == "conserve" ? "tabKey-map" : "notabKey"} style={{ left: "11.5%", backgroundImage: "url(/assets/images/quanju/zuobeijing.png)", backgroundSize: "100% 100%" }} onClick={() => { <div className={tabKey == "guanli" ? "tabKey-map" : "notabKey"} style={{ left: "65%", backgroundImage: "url(/assets/images/quanju/youbeijing.png)", backgroundSize: "100% 100%" }} onClick={() => {
onClick("conserve") onClick("guanli")
}}><a>养护</a></div> }}><a>管理</a></div>
<div className={tabKey == "leadership" ? "tabKey-map" : "notabKey"} style={{ left: "23%", backgroundImage: "url(/assets/images/quanju/zuobeijing.png)", backgroundSize: "100% 100%" }} onClick={() => { <div className={tabKey == "leadership" ? "tabKey-map" : "notabKey"} style={{ left: "23%", backgroundImage: "url(/assets/images/quanju/zuobeijing.png)", backgroundSize: "100% 100%" }} onClick={() => {
onClick("leadership") onClick("leadership")
}}><a>领导驾驶舱</a></div> }}><a>领导驾驶舱</a></div>
<div className={tabKey == "leadership" ? "tabKey-map" : "notabKey"} style={{ left: "50%", transform: "translate(-50%, -50%)", width: "25%", minWidth: "420px", fontSize: "2.3vw", color: "#FFFFFF", fontFamily: "YouSheBiaoTiHei" }}>南昌县智慧交通监管系统</div> <div className={tabKey == "leadership" ? "tabKey-map" : "notabKey"} style={{ left: "50%", transform: "translate(-50%, -50%)", width: "25%", minWidth: "420px", fontSize: "2.3vw", color: "#FFFFFF", fontFamily: "YouSheBiaoTiHei" }}>南昌县智慧交通监管系统</div>
<div className={tabKey == "guanli" ? "tabKey-map" : "notabKey"} style={{ left: "65%", backgroundImage: "url(/assets/images/quanju/youbeijing.png)", backgroundSize: "100% 100%" }} onClick={() => { <div className={tabKey == "conserve" ? "tabKey-map" : "notabKey"} style={{ left: "11.5%", backgroundImage: "url(/assets/images/quanju/zuobeijing.png)", backgroundSize: "100% 100%" }} onClick={() => {
onClick("guanli") onClick("conserve")
}}><a>管理</a></div> }}><a>养护</a></div>
<div className={tabKey == "operation" ? "tabKey-map" : "notabKey"} style={{ left: "76%", backgroundImage: "url(/assets/images/quanju/youbeijing.png)", backgroundSize: "100% 100%" }} onClick={() => { <div className={tabKey == "operation" ? "tabKey-map" : "notabKey"} style={{ left: "76%", backgroundImage: "url(/assets/images/quanju/youbeijing.png)", backgroundSize: "100% 100%" }} onClick={() => {
onClick("operation") onClick("operation")
}}><a>运营</a></div> }}><a>运营</a></div>

Loading…
Cancel
Save