个税扣缴义务人页面组件重构

This commit is contained in:
MustangDeng 2022-02-28 15:57:34 +08:00
parent cf1c6d03fa
commit c9832d1926
4 changed files with 165 additions and 119 deletions

View File

@ -34,4 +34,6 @@ export const logColumns = [
dataIndex: 'title',
key: 'title',
}
]
]
export const dataSource = [];

View File

@ -0,0 +1,99 @@
import React from 'react'
import { Button, Modal } from 'antd';
import { WeaInput, WeaRangePicker, WeaTable} from 'ecCom'
import { logColumns, dataSource } from "../../common/columns"
export default class LogViewModal extends React.Component {
constructor(props) {
super(props)
this.state ={
value: ""
}
}
render() {
return (
<Modal title="操作日志" visible={this.props.visible}
onOk={() => alert("ok")} onCancel={this.props.onCancel}
className="logViewModal"
style={{ top: 150 }}
width={'80%'} height={'50%'}
>
<div className="searchBar">
<div className="searchBarItem searchDateRange">
<div className="searchBarLabel">操作时间</div>
<div>
<WeaRangePicker
value={["2019-02-03", "2019-03-08"]}
onChange={v => this.setState({ value: v })}
/>
</div>
</div>
<div className="searchBarItem">
<div className="searchBarLabel">操作人</div>
<div>
<WeaInput
id="test"
style={{ width: 200 }}
value={this.state.value}
onChange={value => {
console.log(value);
this.setState({ value });
}}
customBlur={v => {
console.log("custom blur", v);
}}
onFocus={v => console.log("focus", v)}
onBlur={v => console.log("blur", v)}
/>
</div>
</div>
<div className="searchBarItem">
<div className='searchBarLabel'>对象</div>
<div>
<WeaInput
id="test"
style={{ width: 200 }}
value={this.state.value}
onChange={value => {
console.log(value);
this.setState({ value });
}}
customBlur={v => {
console.log("custom blur", v);
}}
onFocus={v => console.log("focus", v)}
onBlur={v => console.log("blur", v)}
/>
</div>
</div>
<div className="searchBarItem">
<div className='searchBarLabel'>操作类型</div>
<div>
<WeaInput
id="test"
style={{ width: 200 }}
value={this.state.value}
onChange={value => {
console.log(value);
this.setState({ value });
}}
customBlur={v => {
console.log("custom blur", v);
}}
onFocus={v => console.log("focus", v)}
onBlur={v => console.log("blur", v)}
/>
</div>
</div>
<div className="searchBarItem">
<Button type="primary" className="searchBtn">搜索</Button>
</div>
</div>
<WeaTable columns={logColumns} dataSource={dataSource} />
</Modal>
)
}
}

View File

@ -0,0 +1,52 @@
import React from 'react'
import { Button, Modal } from 'antd';
import { WeaInput, WeaRangePicker, WeaTable } from 'ecCom'
import { logColumns, dataSource } from "../../common/columns"
export default class EditModal extends React.Component {
constructor(props) {
super(props)
this.state = {
value: ""
}
}
render() {
return (
<Modal title={this.props.title} visible={modelVisiable}
onOk={() => alert("ok")} onCancel={this.props.onCancel}
>
<Row gutter={16}>
<Col span={6}>
<div className="formLabel">名称:</div>
</Col>
<Col span={18}>
<WeaInput
id="name"
value={this.state.value}
onChange={value => {
console.log(value);
this.setState({ value });
}}
customBlur={v => {
console.log("custom blur", v);
}}
onFocus={v => console.log("focus", v)}
onBlur={v => console.log("blur", v)}
/>
</Col>
</Row>
<Row gutter={16} style={{ marginTop: "16px" }}>
<Col span={6}>
<div className="formLabel">备注:</div>
</Col>
<Col span={18}>
<WeaTextarea value={this.state.value} onChange={(value) => { this.setState({ value }) }} />
</Col>
</Row>
</Modal>
)
}
}

View File

@ -15,6 +15,7 @@ import "./index.less"
import { columns, dataSource } from './columns';
import { logColumns } from '../../common/columns'
import LogViewModal from '../../components/logViewModal';
const { MonthPicker } = DatePicker;
@ -132,125 +133,17 @@ export default class TaxAgent extends React.Component {
</WeaTop>
</WeaRightMenu>
<Modal title="新增个税扣缴义务人" visible={modelVisiable}
onOk={() => alert("ok")} onCancel={() => setModelVisiable(false)}
>
<Row gutter={16}>
<Col span={6}>
<div className="formLabel">名称:</div>
</Col>
<Col span={18}>
<WeaInput
id="name"
value={this.state.value}
onChange={value => {
console.log(value);
this.setState({ value });
}}
customBlur={v => {
console.log("custom blur", v);
}}
onFocus={v => console.log("focus", v)}
onBlur={v => console.log("blur", v)}
/>
</Col>
<EditModal
title={"新增个税扣缴义务人"}
visible={this.state.modelVisiable}
onCancel={this.setState({modelVisiable: false})}
/>
</Row>
<Row gutter={16} style={{marginTop: "16px"}}>
<Col span={6}>
<div className="formLabel">备注:</div>
</Col>
<Col span={18}>
<WeaTextarea value={this.state.value} onChange={(value) => { this.setState({ value }) }} />
</Col>
</Row>
</Modal>
<Modal title="操作日志" visible={this.state.logViewVisiable}
onOk={() => alert("ok")} onCancel={()=>{this.setState({logViewVisiable: false})}}
className="logViewModal"
style={{ top: 150 }}
width={'80%'} height={'50%'}
>
<div className="searchBar">
<div className="searchBarItem searchDateRange">
<div className="searchBarLabel">操作时间</div>
<div>
<WeaRangePicker
value={["2019-02-03", "2019-03-08"]}
onChange={v => this.setState({ value: v })}
/>
</div>
</div>
<div className="searchBarItem">
<div className="searchBarLabel">操作人</div>
<div>
<WeaInput
id="test"
style={{ width: 200 }}
value={this.state.value}
onChange={value => {
console.log(value);
this.setState({ value });
}}
customBlur={v => {
console.log("custom blur", v);
}}
onFocus={v => console.log("focus", v)}
onBlur={v => console.log("blur", v)}
/>
</div>
</div>
<div className="searchBarItem">
<div className='searchBarLabel'>对象</div>
<div>
<WeaInput
id="test"
style={{ width: 200 }}
value={this.state.value}
onChange={value => {
console.log(value);
this.setState({ value });
}}
customBlur={v => {
console.log("custom blur", v);
}}
onFocus={v => console.log("focus", v)}
onBlur={v => console.log("blur", v)}
/>
</div>
</div>
<div className="searchBarItem">
<div className='searchBarLabel'>操作类型</div>
<div>
<WeaInput
id="test"
style={{ width: 200 }}
value={this.state.value}
onChange={value => {
console.log(value);
this.setState({ value });
}}
customBlur={v => {
console.log("custom blur", v);
}}
onFocus={v => console.log("focus", v)}
onBlur={v => console.log("blur", v)}
/>
</div>
</div>
<div className="searchBarItem">
<Button type="primary" className="searchBtn">搜索</Button>
</div>
</div>
<WeaTable columns={logColumns} dataSource={dataSource} />
</Modal>
<LogViewModal
visible={this.state.logViewVisiable}
onCancel={() => {this.setState({logViewVisiable: false})}}
/>
</div>
)
}