119 lines
2.5 KiB
Vue
119 lines
2.5 KiB
Vue
<template>
|
|
<div class="apartment-add">
|
|
<el-card>
|
|
<template slot="header">
|
|
<div class="card-header">
|
|
<span>添加公寓</span>
|
|
</div>
|
|
</template>
|
|
<el-form :model="apartmentForm" :rules="rules" ref="apartmentForm" label-width="100px" class="form-content">
|
|
|
|
<el-form-item label="公寓名称" prop="name">
|
|
<el-input v-model="apartmentForm.name" placeholder="请输入公寓名称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="地址" prop="address">
|
|
<el-input v-model="apartmentForm.address" placeholder="请输入地址"></el-input>
|
|
</el-form-item>
|
|
<el-form-item class="form-actions">
|
|
<el-button type="primary" @click="submitForm">提交</el-button>
|
|
<el-button @click="resetForm">重置</el-button>
|
|
<el-button @click="goBack">返回</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { apartmentApi } from '../../api/api'
|
|
|
|
export default {
|
|
name: 'ApartmentAdd',
|
|
data() {
|
|
return {
|
|
apartmentForm: {
|
|
name: '',
|
|
address: ''
|
|
},
|
|
rules: {
|
|
name: [
|
|
{ required: true, message: '请输入公寓名称', trigger: 'blur' }
|
|
]
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
|
|
async submitForm() {
|
|
this.$refs.apartmentForm.validate(async (valid) => {
|
|
if (valid) {
|
|
try {
|
|
await apartmentApi.create(this.apartmentForm)
|
|
this.$message.success('添加成功')
|
|
this.$router.push('/apartment/list')
|
|
} catch (error) {
|
|
this.$message.error('添加失败')
|
|
}
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
resetForm() {
|
|
this.$refs.apartmentForm.resetFields()
|
|
},
|
|
goBack() {
|
|
this.$router.push('/apartment/list')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.apartment-add {
|
|
padding: 0;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.form-content {
|
|
max-width: 600px;
|
|
}
|
|
|
|
.form-actions {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
/* 移动端适配 */
|
|
@media screen and (max-width: 768px) {
|
|
.form-content {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.form-content .el-form-item__label {
|
|
float: none;
|
|
display: block;
|
|
text-align: left;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.form-content .el-form-item__content {
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.form-actions {
|
|
text-align: center;
|
|
}
|
|
|
|
.form-actions .el-button {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
</style>
|