143 lines
3.8 KiB
Vue
143 lines
3.8 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
<span style="color: #027db4;">新增路线</span>
|
|
</div>
|
|
<el-form :model="form" :rules="rules" ref="formRef" label-width="100px" class="detail-form">
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item label="路线名称" prop="routeName">
|
|
<el-input v-model="form.routeName" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="景区名称" prop="scenicArea">
|
|
<el-select v-model="form.scenicArea" placeholder="请选择景区">
|
|
<el-option label="白云山" value="白云山" />
|
|
<el-option label="丹霞山" value="丹霞山" />
|
|
<el-option label="西樵山" value="西樵山" />
|
|
<el-option label="罗浮山" value="罗浮山" />
|
|
<el-option label="鼎湖山" value="鼎湖山" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item label="起飞点" prop="takeoffPoint">
|
|
<el-input v-model="form.takeoffPoint" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="降落点" prop="landingPoint">
|
|
<el-input v-model="form.landingPoint" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="16">
|
|
<el-form-item label="路线描述" prop="routeDesc">
|
|
<el-input type="textarea" v-model="form.routeDesc" :rows="4" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</el-card>
|
|
|
|
<div class="btn-container">
|
|
<el-button @click="handleCancel">取消</el-button>
|
|
<el-button type="primary" @click="handleSubmit">保存</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ElMessage } from 'element-ui'
|
|
import routeApi from '@/api/system/route'
|
|
|
|
export default {
|
|
name: 'AddRoute',
|
|
data() {
|
|
return {
|
|
form: {
|
|
routeName: '',
|
|
scenicArea: '',
|
|
takeoffPoint: '',
|
|
landingPoint: '',
|
|
routeDesc: '',
|
|
routeType: 'normal'
|
|
},
|
|
rules: {
|
|
routeName: [
|
|
{ required: true, message: '请输入路线名称', trigger: 'blur' }
|
|
],
|
|
scenicArea: [
|
|
{ required: true, message: '请选择景区', trigger: 'change' }
|
|
],
|
|
takeoffPoint: [
|
|
{ required: true, message: '请输入起飞点', trigger: 'blur' }
|
|
],
|
|
landingPoint: [
|
|
{ required: true, message: '请输入降落点', trigger: 'blur' }
|
|
]
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
handleCancel() {
|
|
this.$router.go(-1)
|
|
},
|
|
handleSubmit() {
|
|
this.$refs.formRef.validate(valid => {
|
|
if (valid) {
|
|
this.submitForm()
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
async submitForm() {
|
|
try {
|
|
await routeApi.createRoute(this.form)
|
|
ElMessage.success('新增成功')
|
|
this.$router.push({ path: '/route/manageroute' })
|
|
} catch (error) {
|
|
ElMessage.error('新增失败')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-container {
|
|
padding: 20px;
|
|
}
|
|
|
|
.detail-form {
|
|
.el-form-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
::v-deep .el-input {
|
|
width: 240px;
|
|
}
|
|
::v-deep .el-select {
|
|
width: 240px;
|
|
}
|
|
::v-deep .el-input.is-disabled .el-input__inner {
|
|
background-color: white;
|
|
color: #686868;
|
|
}
|
|
::v-deep .el-textarea.is-disabled .el-textarea__inner {
|
|
background-color: white;
|
|
color: #686868;
|
|
}
|
|
}
|
|
|
|
.btn-container {
|
|
margin-top: 20px;
|
|
text-align: right;
|
|
padding-right: 40px;
|
|
}
|
|
</style> |