![复制代码](https://assets.cnblogs.com/images/copycode.gif)
<template>
<view class="container">
<view class="example">
<uni-forms ref="form" :model="form" labelWidth="80px">
<uni-forms-item label="起始站" name="startStation" required >
<uni-easyinput v-model="form.startStation" placeholder="请输入起始站" />
</uni-forms-item>
<uni-forms-item label="终点站" name="endStation" required >
<uni-easyinput v-model="form.endStation" placeholder="请输入终点站" />
</uni-forms-item>
<uni-forms-item label="途径站" name="intermediateStations" >
<uni-easyinput type="textarea" v-model="form.intermediateStations" placeholder="请输入途径站" />
</uni-forms-item>
<uni-forms-item label="起始站的线" name="startStationLine" >
<uni-data-select v-model="form.startStationLine" :localdata="routeOptions"></uni-data-select>
</uni-forms-item>
<uni-forms-item label="终点站的线" name="endStationLine" >
<uni-data-select v-model="form.endStationLine" :localdata="routeOptions"></uni-data-select>
</uni-forms-item>
<uni-forms-item label="途径站点" name="distNumber" >
<uni-easyinput v-model="form.distNumber" placeholder="请输入途径站点" />
</uni-forms-item>
<uni-forms-item label="票价" name="price" >
<uni-easyinput v-model="form.price" placeholder="请输入票价" />
</uni-forms-item>
</uni-forms>
<view class="button-group">
<button type="default" style="padding:0 3em;font-size:14px" class="button" @click="reset">重置</button>
<button type="primary" style="padding:0 3em;font-size:14px" class="button" @click="submit">提交</button>
</view>
</view>
</view>
</template>
<script>
import { addBeijingsubway,getBeijingsubway,listBeijingsubway } from "@/api/system/beijingsubway";
export default {
components: {
},
data() {
return {
//字典类型筛选options
routeOptions:[],
routeOptions:[],
form: {},
rules: {
startStation: {
rules: [{ required: true, errorMessage: "起始站不能为空" }]
},
endStation: {
rules: [{ required: true, errorMessage: "终点站不能为空" }]
},
}
}
},
onLoad(option) {
//字典类型查询
this.$dataDicts.getDicts("route").then(response => {
this.routeOptions = this.$myUtils.getDictOption(response.data,'dictValue','dictLabel');
});
this.$dataDicts.getDicts("route").then(response => {
this.routeOptions = this.$myUtils.getDictOption(response.data,'dictValue','dictLabel');
});
},
onReady() {
this.$refs.form.setRules(this.rules)
},
methods: {
/* 提交*/
submit() {
console.log(this.form)
this.$refs.form.validate().then(res => {
addBeijingsubway(this.form).then(response => {
this.$modal.msgSuccess("新增成功")
setTimeout(() => {
// 返回到上一级父页面
this.$tab.navigateBack();
},500)
})
})
},
/* 表单重置*/
reset(){
this.form = {
id: undefined,
startStation: undefined,
endStation: undefined,
intermediateStations: undefined,
startStationLine: undefined,
endStationLine: undefined,
distNumber: undefined,
price: undefined
};
}
}
}
</script>
<style lang="scss">
page {
background-color: #ffffff;
}
.example {
padding: 15px;
background-color: #fff;
}
.button-group {
margin-top: 15px;
display: flex;
justify-content: space-around;
}
</style>
![复制代码](https://assets.cnblogs.com/images/copycode.gif)
![复制代码](https://assets.cnblogs.com/images/copycode.gif)
<template>
<view class="container">
<view class="example">
<uni-forms ref="form" :model="form" labelWidth="80px">
<uni-forms-item label="起始站" name="startStation" required >
<uni-easyinput v-model="form.startStation" placeholder="请输入起始站" />
</uni-forms-item>
<uni-forms-item label="终点站" name="endStation" required >
<uni-easyinput v-model="form.endStation" placeholder="请输入终点站" />
</uni-forms-item>
<uni-forms-item label="途径站" name="intermediateStations" >
<uni-easyinput type="textarea" v-model="form.intermediateStations" placeholder="请输入途径站" />
</uni-forms-item>
<uni-forms-item label="起始站的线" name="startStationLine" >
<uni-data-select
v-model="form.startStationLine"
:localdata="routeOptions"
></uni-data-select>
</uni-forms-item>
<uni-forms-item label="终点站的线" name="endStationLine" >
<uni-data-select
v-model="form.endStationLine"
:localdata="routeOptions"
></uni-data-select>
</uni-forms-item>
<uni-forms-item label="途径站点" name="distNumber" >
<uni-easyinput v-model="form.distNumber" placeholder="请输入途径站点" />
</uni-forms-item>
<uni-forms-item label="票价" name="price" >
<uni-easyinput v-model="form.price" placeholder="请输入票价" />
</uni-forms-item>
</uni-forms>
<view class="button-group">
<button type="default" style="padding:0 3em;font-size:14px" class="button" @click="cancel">取消</button>
<button type="primary" style="padding:0 3em;font-size:14px" class="button" @click="submit">提交</button>
</view>
</view>
</view>
</template>
<script>
import { updateBeijingsubway,getBeijingsubway,listBeijingsubway } from "@/api/system/beijingsubway";
export default {
components: {
},
data() {
return {
//字典类型筛选options
routeOptions:[],
routeOptions:[],
form: {},
rules: {
startStation: {
rules: [{ required: true, errorMessage: "起始站不能为空" }]
},
endStation: {
rules: [{ required: true, errorMessage: "终点站不能为空" }]
},
}
}
},
onLoad(option) {
//字典类型查询
this.$dataDicts.getDicts("route").then(response => {
this.routeOptions = this.$myUtils.getDictOption(response.data,'dictValue','dictLabel');
});
this.$dataDicts.getDicts("route").then(response => {
this.routeOptions = this.$myUtils.getDictOption(response.data,'dictValue','dictLabel');
});
//起点—终点查询详细
this.getBeijingsubwayInfo(option.id);
},
onReady() {
this.$refs.form.setRules(this.rules)
},
methods: {
/* 获取起点—终点查询详情*/
getBeijingsubwayInfo(id) {
getBeijingsubway(id).then(response => {
this.form = response.data;
})
},
/* 提交*/
submit() {
this.$refs.form.validate().then(res => {
updateBeijingsubway(this.form).then(response => {
this.$modal.msgSuccess("编辑成功")
setTimeout(() => {
// 返回到上一级父页面
this.$tab.navigateBack();
},500)
})
})
},
/* 表单重置*/
/* 取消*/
cancel(){
this.$tab.navigateBack();
}
}
}
</script>
<style lang="scss">
page {
background-color: #ffffff;
}
.example {
padding: 15px;
background-color: #fff;
}
.button-group {
margin-top: 15px;
display: flex;
justify-content: space-around;
}
</style>