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

View File

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

View File

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