This commit is contained in:
2021-07-01 13:17:12 +08:00
parent 40d7bef357
commit 95cb5b4483
3 changed files with 69 additions and 44 deletions

View File

@@ -5,7 +5,7 @@ import { cloneDeep } from 'lodash'
import getDictData from 'util/dic'
const initialValues = {
sort: 100
sort: 100,
}
export default class form extends Component {
state = {
@@ -13,8 +13,8 @@ export default class form extends Component {
loading: true,
exist: false,
codes: {
dicAreacodeType: []
}
areacodeType: [],
},
}
// 表单实例
form = React.createRef()
@@ -33,29 +33,28 @@ export default class form extends Component {
* 填充数据
* 可以在设置this.record之后对其作出数据结构调整
* [异步,必要]
* @param {*} params
* @param {*} params
*/
async fillData(params) {
this.record = cloneDeep(params.record)
//#region 从后端转换成前段所需格式
const codes = await getDictData('dic_areacode_type')
const exist = !!params.record;
const codes = await getDictData('areacode_type')
const exist = !!params.record
this.setState({
codes,
exist
exist,
})
this.record = {
...this.record
...this.record,
}
//#endregion
this.form.current.setFieldsValue(this.record)
this.setState({
loading: false
loading: false,
})
}
@@ -63,7 +62,7 @@ export default class form extends Component {
* 获取数据
* 可以对postData进行数据结构调整
* [异步,必要]
* @returns
* @returns
*/
async getData() {
const form = this.form.current
@@ -82,43 +81,55 @@ export default class form extends Component {
render() {
return (
<Form
initialValues={initialValues}
ref={this.form}
className="yo-form"
>
<Form initialValues={initialValues} ref={this.form} className="yo-form">
<Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
<div className="yo-form-group">
{/* 表单控件 */}
<Form.Item label="区域类型" name="levelType" rules={[{ required: true, message: '请选择区域类型' }]}>
<Select placeholder="请选择区域类型" suffixIcon={<AntIcon type="lock" v-if={this.state.exist} />}>
{
this.state.codes.dicAreacodeType.map(item => {
return <Select.Option
key={item.code}
value={+item.code}
>{item.value}</Select.Option>
})
}
<Form.Item
label="区域类型"
name="levelType"
rules={[{ required: true, message: '请选择区域类型' }]}
>
<Select
placeholder="请选择区域类型"
suffixIcon={<AntIcon type="lock" v-if={this.state.exist} />}
>
{this.state.codes.areacodeType.map(item => {
return (
<Select.Option key={item.code} value={+item.code}>
{item.value}
</Select.Option>
)
})}
</Select>
</Form.Item>
<Form.Item label="区域名称" name="name" rules={[{ required: true, message: '请输入区域名称' }]}>
<Form.Item
label="区域名称"
name="name"
rules={[{ required: true, message: '请输入区域名称' }]}
>
<Input autoComplete="off" placeholder="请输入区域名称" />
</Form.Item>
<Form.Item label="区域编码" name="code" tooltip="用于系统内部使用,添加后不可更改">
<Input disabled={this.state.exist} placeholder="请输入区域编码" suffix={this.state.exist && <AntIcon type="lock" />}>
</Input>
<Form.Item
label="区域编码"
name="code"
tooltip="用于系统内部使用,添加后不可更改"
>
<Input
disabled={this.state.exist}
placeholder="请输入区域编码"
suffix={this.state.exist && <AntIcon type="lock" />}
></Input>
</Form.Item>
<Form.Item label="行政编码" name="adCode" tooltip="国家规定的区划代码,可随实际情况更改而更改">
<Input placeholder="请输入区域编码" >
</Input>
<Form.Item
label="行政编码"
name="adCode"
tooltip="国家规定的区划代码,可随实际情况更改而更改"
>
<Input placeholder="请输入区域编码"></Input>
</Form.Item>
<Form.Item label="排序" name="sort">
<InputNumber
min={0}
placeholder="请输入排序"
className="w-100-p"
/>
<InputNumber min={0} placeholder="请输入排序" className="w-100-p" />
</Form.Item>
<Form.Item label="备注" name="note">
<Input.TextArea placeholder="请输入备注" />
@@ -129,4 +140,4 @@ export default class form extends Component {
</Form>
)
}
}
}

View File

@@ -64,6 +64,7 @@ export default class index extends Component {
{
title: '机构类型',
dataIndex: 'type',
width: 120,
sorter: true,
render: text => <>{this.bindCodeValue(text, 'org_type')}</>,
},

View File

@@ -13,6 +13,8 @@ export default class index extends Component {
focusUser: false,
focusPassword: false,
btnDisabled: true,
}
backgroundImage = require(`assets/image/login-bg-0${Math.floor(Math.random() * 4)}.jpg`)
@@ -49,15 +51,26 @@ export default class index extends Component {
}
render() {
const { loading, focusUser, focusPassword, btnDisabled } = this.state
return (
<div className="yo-login">
<img src={this.backgroundImage.default} alt="" />
<div className="yo-login--placeholder">
<Container mode="sm">
<Form ref={this.form} layout="vertical" onFinish={this.onLogin}>
<Form
ref={this.form}
layout="vertical"
onFinish={this.onLogin}
onValuesChange={(changedValues, values) => {
this.setState({
btnDisabled: !values.account || !values.password,
})
}}
>
<Form.Item
name="account"
className={!this.state.focusUser && 'yo-login--label'}
className={!focusUser && 'yo-login--label'}
colon={false}
label="用户名"
>
@@ -76,7 +89,7 @@ export default class index extends Component {
</Form.Item>
<Form.Item
name="password"
className={!this.state.focusPassword && 'yo-login--label'}
className={!focusPassword && 'yo-login--label'}
colon={false}
label="密码"
>
@@ -96,8 +109,8 @@ export default class index extends Component {
</Form.Item>
<Form.Item className="mt-lg">
<Button
disabled={this.form.user === '' || this.form.password === ''}
loading={this.state.loading}
disabled={btnDisabled}
loading={loading}
block
htmlType="submit"
size="large"