107 lines
2.6 KiB
Vue
107 lines
2.6 KiB
Vue
<template>
|
|
<view>
|
|
<view class="form-area">
|
|
<uni-forms ref="deviceForm" :rules="rules" :modelValue="deviceFormData" label-position="top">
|
|
<uni-forms-item required name="range" label="单位名称" label-width="150">
|
|
<uni-easyinput placeholder="请输入" v-model="deviceFormData.range"></uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item required name="location" label="设备所在地" label-width="150">
|
|
<button @click="open">{{ locationPlace }}</button>
|
|
<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel" :visible="visible" />
|
|
</uni-forms-item>
|
|
<uni-forms-item required name="brand" label="设备品牌" label-width="150">
|
|
<uni-easyinput placeholder="请输入" v-model="deviceFormData.brand"></uni-easyinput>
|
|
</uni-forms-item>
|
|
<button @click="subForm">提交</button>
|
|
</uni-forms>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
|
|
export default {
|
|
data() {
|
|
return {
|
|
deviceFormData: {
|
|
range: '',
|
|
location: '',
|
|
brand: ''
|
|
},
|
|
rules: {
|
|
range: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '请填写租赁范围！'
|
|
}
|
|
]
|
|
},
|
|
location: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '请填写设备所在地！'
|
|
}
|
|
]
|
|
},
|
|
brand: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '请填写设备品牌！'
|
|
}
|
|
]
|
|
},
|
|
},
|
|
visible: false,
|
|
locationPlace: '打开省市区选择器',
|
|
maskCloseAble: true,
|
|
defaultValue: '420111',
|
|
column: 3
|
|
}
|
|
},
|
|
components: {
|
|
cityPicker
|
|
},
|
|
methods: {
|
|
open () {
|
|
this.visible = true
|
|
},
|
|
confirm (val) {
|
|
console.log(val)
|
|
this.locationPlace = val.name
|
|
this.deviceFormData.location = val.name
|
|
this.visible = false
|
|
},
|
|
cancel () {
|
|
this.visible = false
|
|
},
|
|
subForm () {
|
|
let that = this
|
|
this.$refs.deviceForm.validate().then(formData => {
|
|
console.log(formData);
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
body{
|
|
background-color: #F3F3F3;
|
|
}
|
|
.form-area{
|
|
width: 95%;
|
|
margin: 20rpx auto;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
box-sizing: border-box;
|
|
padding: 15rpx;
|
|
button{
|
|
background-color: #043e71;
|
|
color: #fff;
|
|
}
|
|
}
|
|
</style> |