parent
c722be6d6f
commit
7bb6fbd28f
@ -1,139 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="layout">
|
|
||||||
<van-nav-bar class="layout-bar"
|
|
||||||
title="地址管理"
|
|
||||||
@click-left="onClickLeft"
|
|
||||||
@click-right="onClickRight"
|
|
||||||
left-arrow>
|
|
||||||
<van-icon name="home-o" slot="right"/>
|
|
||||||
</van-nav-bar>
|
|
||||||
|
|
||||||
<div class="body">
|
|
||||||
|
|
||||||
<van-field
|
|
||||||
clickable
|
|
||||||
v-model="vm.text"
|
|
||||||
required
|
|
||||||
clearable
|
|
||||||
label="普通文本"
|
|
||||||
placeholder="请输入"/>
|
|
||||||
|
|
||||||
<van-field
|
|
||||||
clickable
|
|
||||||
v-model="vm.textarea"
|
|
||||||
type="textarea"
|
|
||||||
required
|
|
||||||
clearable
|
|
||||||
label="多行文本"
|
|
||||||
placeholder="请输入"/>
|
|
||||||
|
|
||||||
<form-datetime
|
|
||||||
v-model="vm.datetime"
|
|
||||||
formatter="yyyy年MM月dd日 hh:mm:ss"
|
|
||||||
label="日期时间"/>
|
|
||||||
|
|
||||||
<form-date
|
|
||||||
v-model="vm.date"
|
|
||||||
formatter="yyyy年MM月dd日"
|
|
||||||
label="日期"/>
|
|
||||||
|
|
||||||
<form-time
|
|
||||||
v-model="vm.time"
|
|
||||||
label="时间"/>
|
|
||||||
|
|
||||||
<form-select
|
|
||||||
:data="selectData"
|
|
||||||
v-model="vm.select"
|
|
||||||
label="选择"/>
|
|
||||||
<form-number
|
|
||||||
v-model="vm.number"
|
|
||||||
label="数量"/>
|
|
||||||
|
|
||||||
<form-sfzh
|
|
||||||
v-model="vm.sfzh"
|
|
||||||
label="身份证号"/>
|
|
||||||
|
|
||||||
<van-button style="margin-top: 30px" type="primary" size="large" @click="onSearch">查询</van-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
NavBar,
|
|
||||||
Toast,
|
|
||||||
Button,
|
|
||||||
Icon,
|
|
||||||
Field,
|
|
||||||
} from 'vant';
|
|
||||||
import FormDatetime from '../../wbui/form/FormDatetime'
|
|
||||||
import FormDate from '../../wbui/form/FormData'
|
|
||||||
import FormTime from '../../wbui/form/FormTime'
|
|
||||||
import FormSelect from '../../wbui/form/FormSelect'
|
|
||||||
import FormNumber from '../../wbui/form/FormNumber'
|
|
||||||
import FormSfzh from '../../wbui/form/FormSfzh'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
[NavBar.name]: NavBar,
|
|
||||||
[Toast.name]: Toast,
|
|
||||||
[Button.name]: Button,
|
|
||||||
[Icon.name]: Icon,
|
|
||||||
[Field.name]: Field,
|
|
||||||
FormDatetime,
|
|
||||||
FormDate,
|
|
||||||
FormTime,
|
|
||||||
FormSelect,
|
|
||||||
FormNumber,
|
|
||||||
FormSfzh
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
vm: {
|
|
||||||
text: '',
|
|
||||||
textarea: '',
|
|
||||||
datetime: '',
|
|
||||||
date: '',
|
|
||||||
time: '',
|
|
||||||
select: '',
|
|
||||||
number: '',
|
|
||||||
},
|
|
||||||
selectData: [//text为显示文字,其他属性可以自定义
|
|
||||||
{text: "[1]A", code: "1", value: "A"},
|
|
||||||
{text: "[2]B", code: "2", value: "B"},
|
|
||||||
{text: "[3]C", code: "3", value: "C"},
|
|
||||||
{text: "[4]D", code: "4", value: "D"},
|
|
||||||
{text: "[5]E", code: "5", value: "E"}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onClickLeft() {
|
|
||||||
this.$router.go(-1)
|
|
||||||
},
|
|
||||||
onClickRight() {
|
|
||||||
this.$router.push('nav');
|
|
||||||
},
|
|
||||||
onSearch() {
|
|
||||||
window.console.log(this.vm);
|
|
||||||
},
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
|
|
||||||
.layout {
|
|
||||||
&-bar {
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
top: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.body {
|
|
||||||
margin-top: 50px;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,223 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="layout">
|
|
||||||
<van-nav-bar class="layout-bar"
|
|
||||||
title="新增标准地址"
|
|
||||||
@click-left="onClickLeft"
|
|
||||||
@click-right="onClickRight"
|
|
||||||
left-arrow>
|
|
||||||
<van-icon name="home-o" slot="right"/>
|
|
||||||
</van-nav-bar>
|
|
||||||
|
|
||||||
<div class="body">
|
|
||||||
<form-select
|
|
||||||
:data="dzdjList"
|
|
||||||
v-model="form.dzdj"
|
|
||||||
label="地址等级"/>
|
|
||||||
|
|
||||||
<van-field
|
|
||||||
clickable
|
|
||||||
v-model="form.dmdm"
|
|
||||||
required
|
|
||||||
clearable
|
|
||||||
label="地名代码"
|
|
||||||
placeholder="请检索选择地名"/>
|
|
||||||
|
|
||||||
<form-select
|
|
||||||
:data="lqxlList"
|
|
||||||
v-model="form.lqxl"
|
|
||||||
label="路区序列"/>
|
|
||||||
|
|
||||||
<form-number
|
|
||||||
v-model="form.lqbh"
|
|
||||||
label="路区编号"/>
|
|
||||||
|
|
||||||
<form-number
|
|
||||||
:readonly="!form.lqbh"
|
|
||||||
v-model="form.lqfh"
|
|
||||||
label="路区副号"/>
|
|
||||||
|
|
||||||
<form-select
|
|
||||||
:data="lqlcList"
|
|
||||||
v-model="form.lqlc"
|
|
||||||
label="路区量词"/>
|
|
||||||
|
|
||||||
<form-select
|
|
||||||
:data="qnxlList"
|
|
||||||
v-model="form.qnxl"
|
|
||||||
label="区内序列"/>
|
|
||||||
|
|
||||||
<form-number
|
|
||||||
v-model="form.lzbh"
|
|
||||||
label="楼幢编号"/>
|
|
||||||
|
|
||||||
<form-number
|
|
||||||
:readonly="!form.lzbh"
|
|
||||||
v-model="form.lzfh"
|
|
||||||
label="楼幢副号"/>
|
|
||||||
|
|
||||||
<form-select
|
|
||||||
:data="lzlcList"
|
|
||||||
v-model="form.lzlc"
|
|
||||||
label="楼幢量词"/>
|
|
||||||
|
|
||||||
<form-number
|
|
||||||
v-model="form.lcbh"
|
|
||||||
label="楼层编号"/>
|
|
||||||
|
|
||||||
<form-select
|
|
||||||
:data="lclcList"
|
|
||||||
v-model="form.lclc"
|
|
||||||
label="楼幢量词"/>
|
|
||||||
|
|
||||||
<form-number
|
|
||||||
v-model="form.shbh"
|
|
||||||
label="室号编号"/>
|
|
||||||
|
|
||||||
<form-number
|
|
||||||
:readonly="!form.shbh"
|
|
||||||
v-model="form.shfh"
|
|
||||||
label="室号副号"/>
|
|
||||||
|
|
||||||
<form-select
|
|
||||||
:data="shlcList"
|
|
||||||
v-model="form.shlc"
|
|
||||||
label="室号量词"/>
|
|
||||||
|
|
||||||
<form-select
|
|
||||||
:data="sszrqList"
|
|
||||||
v-model="form.sszrq"
|
|
||||||
required
|
|
||||||
clearable
|
|
||||||
label="所属责任区"/>
|
|
||||||
<form-select
|
|
||||||
required
|
|
||||||
clearable
|
|
||||||
:data="sssqList"
|
|
||||||
v-model="form.sssq"
|
|
||||||
label="所属社区"/>
|
|
||||||
|
|
||||||
<van-field
|
|
||||||
clickable
|
|
||||||
v-model="form.dzmc"
|
|
||||||
required
|
|
||||||
clearable
|
|
||||||
label="地址名称"
|
|
||||||
placeholder="请输入"/>
|
|
||||||
<van-button style="margin:30px 0" type="primary" size="large" @click="onSubmit">提交</van-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
NavBar,
|
|
||||||
Toast,
|
|
||||||
Button,
|
|
||||||
Icon,
|
|
||||||
Field,
|
|
||||||
} from 'vant';
|
|
||||||
import FormDatetime from '../../wbui/form/FormDatetime'
|
|
||||||
import FormDate from '../../wbui/form/FormData'
|
|
||||||
import FormTime from '../../wbui/form/FormTime'
|
|
||||||
import FormSelect from '../../wbui/form/FormSelect'
|
|
||||||
import FormNumber from '../../wbui/form/FormNumber'
|
|
||||||
import FormSfzh from '../../wbui/form/FormSfzh'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
[NavBar.name]: NavBar,
|
|
||||||
[Toast.name]: Toast,
|
|
||||||
[Button.name]: Button,
|
|
||||||
[Icon.name]: Icon,
|
|
||||||
[Field.name]: Field,
|
|
||||||
FormDatetime,
|
|
||||||
FormDate,
|
|
||||||
FormTime,
|
|
||||||
FormSelect,
|
|
||||||
FormNumber,
|
|
||||||
FormSfzh
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
form: {},
|
|
||||||
dzdjList: [
|
|
||||||
{text: "一级", code: "1", value: "一级"},
|
|
||||||
{text: "二级", code: "2", value: "二级"},
|
|
||||||
{text: "三级", code: "3", value: "三级"},
|
|
||||||
{text: "四级", code: "4", value: "四级"},
|
|
||||||
{text: "五级", code: "5", value: "五级"},
|
|
||||||
{text: "六级", code: "6", value: "六级"}
|
|
||||||
],
|
|
||||||
lqxlList: [
|
|
||||||
{text: "路区序列", code: "1", value: "路区序列"},
|
|
||||||
],
|
|
||||||
lqlcList: [
|
|
||||||
{text: "号", code: "号", value: "号"},
|
|
||||||
{text: "幢", code: "幢", value: "幢"},
|
|
||||||
],
|
|
||||||
qnxlList: [
|
|
||||||
{text: "区内序列", code: "1", value: "区内序列"},
|
|
||||||
],
|
|
||||||
lzlcList: [
|
|
||||||
{text: "号", code: "号", value: "号"},
|
|
||||||
{text: "幢", code: "幢", value: "幢"},
|
|
||||||
],
|
|
||||||
lclcList: [
|
|
||||||
{text: "层", code: "层", value: "层"},
|
|
||||||
],
|
|
||||||
shlcList: [
|
|
||||||
{text: "室", code: "室", value: "室"},
|
|
||||||
],
|
|
||||||
sszrqList: [
|
|
||||||
{text: "责任区1", code: "责任区1", value: "责任区1"},
|
|
||||||
],
|
|
||||||
sssqList: [
|
|
||||||
{text: "社区1", code: "社区1", value: "社区1"},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onClickLeft() {
|
|
||||||
this.$router.go(-1)
|
|
||||||
},
|
|
||||||
onClickRight() {
|
|
||||||
this.$router.push('nav');
|
|
||||||
},
|
|
||||||
onSubmit() {
|
|
||||||
window.console.log(this.form);
|
|
||||||
Toast.loading({
|
|
||||||
duration: 0,
|
|
||||||
forbidClick: true,
|
|
||||||
message: '正在提交'
|
|
||||||
});
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
Toast.clear();
|
|
||||||
Toast({
|
|
||||||
duration: 1000,
|
|
||||||
message: "提交成功"
|
|
||||||
});
|
|
||||||
setTimeout(() => {
|
|
||||||
this.onClickLeft();
|
|
||||||
}, 1000)
|
|
||||||
}, 2000)
|
|
||||||
},
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
|
|
||||||
.layout {
|
|
||||||
&-bar {
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
top: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.body {
|
|
||||||
margin-top: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,139 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="layout">
|
|
||||||
<van-nav-bar class="layout-bar"
|
|
||||||
title="地址管理"
|
|
||||||
@click-left="onClickLeft"
|
|
||||||
@click-right="onClickRight"
|
|
||||||
left-arrow>
|
|
||||||
<van-icon name="home-o" slot="right"/>
|
|
||||||
</van-nav-bar>
|
|
||||||
|
|
||||||
<div class="body">
|
|
||||||
|
|
||||||
<van-field
|
|
||||||
clickable
|
|
||||||
v-model="vm.text"
|
|
||||||
required
|
|
||||||
clearable
|
|
||||||
label="普通文本"
|
|
||||||
placeholder="请输入"/>
|
|
||||||
|
|
||||||
<van-field
|
|
||||||
clickable
|
|
||||||
v-model="vm.textarea"
|
|
||||||
type="textarea"
|
|
||||||
required
|
|
||||||
clearable
|
|
||||||
label="多行文本"
|
|
||||||
placeholder="请输入"/>
|
|
||||||
|
|
||||||
<form-datetime
|
|
||||||
v-model="vm.datetime"
|
|
||||||
formatter="yyyy年MM月dd hh:mm:ss"
|
|
||||||
label="日期时间"/>
|
|
||||||
|
|
||||||
<form-date
|
|
||||||
v-model="vm.date"
|
|
||||||
formatter="yyyy年MM月dd"
|
|
||||||
label="日期"/>
|
|
||||||
|
|
||||||
<form-time
|
|
||||||
v-model="vm.time"
|
|
||||||
label="时间"/>
|
|
||||||
|
|
||||||
<form-select
|
|
||||||
:data="selectData"
|
|
||||||
v-model="vm.select"
|
|
||||||
label="选择"/>
|
|
||||||
<form-number
|
|
||||||
v-model="vm.number"
|
|
||||||
label="数量"/>
|
|
||||||
|
|
||||||
<form-sfzh
|
|
||||||
v-model="vm.sfzh"
|
|
||||||
label="身份证号"/>
|
|
||||||
|
|
||||||
<van-button style="margin-top: 30px" type="primary" size="large" @click="onSearch">查询</van-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
NavBar,
|
|
||||||
Toast,
|
|
||||||
Button,
|
|
||||||
Icon,
|
|
||||||
Field,
|
|
||||||
} from 'vant';
|
|
||||||
import FormDatetime from '../../wbui/form/FormDatetime'
|
|
||||||
import FormDate from '../../wbui/form/FormData'
|
|
||||||
import FormTime from '../../wbui/form/FormTime'
|
|
||||||
import FormSelect from '../../wbui/form/FormSelect'
|
|
||||||
import FormNumber from '../../wbui/form/FormNumber'
|
|
||||||
import FormSfzh from '../../wbui/form/FormSfzh'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
[NavBar.name]: NavBar,
|
|
||||||
[Toast.name]: Toast,
|
|
||||||
[Button.name]: Button,
|
|
||||||
[Icon.name]: Icon,
|
|
||||||
[Field.name]: Field,
|
|
||||||
FormDatetime,
|
|
||||||
FormDate,
|
|
||||||
FormTime,
|
|
||||||
FormSelect,
|
|
||||||
FormNumber,
|
|
||||||
FormSfzh
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
vm: {
|
|
||||||
text: '',
|
|
||||||
textarea: '',
|
|
||||||
datetime: '',
|
|
||||||
date: '',
|
|
||||||
time: '',
|
|
||||||
select: '',
|
|
||||||
number: '',
|
|
||||||
},
|
|
||||||
selectData: [//text为显示文字,其他属性可以自定义
|
|
||||||
{text: "[1]A", code: "1", value: "A"},
|
|
||||||
{text: "[2]B", code: "2", value: "B"},
|
|
||||||
{text: "[3]C", code: "3", value: "C"},
|
|
||||||
{text: "[4]D", code: "4", value: "D"},
|
|
||||||
{text: "[5]E", code: "5", value: "E"}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onClickLeft() {
|
|
||||||
this.$router.go(-1)
|
|
||||||
},
|
|
||||||
onClickRight() {
|
|
||||||
this.$router.push('nav');
|
|
||||||
},
|
|
||||||
onSearch() {
|
|
||||||
window.console.log(this.vm);
|
|
||||||
},
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
|
|
||||||
.layout {
|
|
||||||
&-bar {
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
top: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.body {
|
|
||||||
margin-top: 50px;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,139 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="layout">
|
|
||||||
<van-nav-bar class="layout-bar"
|
|
||||||
title="人口管理"
|
|
||||||
@click-left="onClickLeft"
|
|
||||||
@click-right="onClickRight"
|
|
||||||
left-arrow>
|
|
||||||
<van-icon name="home-o" slot="right"/>
|
|
||||||
</van-nav-bar>
|
|
||||||
|
|
||||||
<div class="body">
|
|
||||||
|
|
||||||
<van-field
|
|
||||||
clickable
|
|
||||||
v-model="vm.text"
|
|
||||||
required
|
|
||||||
clearable
|
|
||||||
label="普通文本"
|
|
||||||
placeholder="请输入"/>
|
|
||||||
|
|
||||||
<van-field
|
|
||||||
clickable
|
|
||||||
v-model="vm.textarea"
|
|
||||||
type="textarea"
|
|
||||||
required
|
|
||||||
clearable
|
|
||||||
label="多行文本"
|
|
||||||
placeholder="请输入"/>
|
|
||||||
|
|
||||||
<form-datetime
|
|
||||||
v-model="vm.datetime"
|
|
||||||
formatter="yyyy年MM月dd日 hh:mm:ss"
|
|
||||||
label="日期时间"/>
|
|
||||||
|
|
||||||
<form-date
|
|
||||||
v-model="vm.date"
|
|
||||||
formatter="yyyy年MM月dd日"
|
|
||||||
label="日期"/>
|
|
||||||
|
|
||||||
<form-time
|
|
||||||
v-model="vm.time"
|
|
||||||
label="时间"/>
|
|
||||||
|
|
||||||
<form-select
|
|
||||||
:data="selectData"
|
|
||||||
v-model="vm.select"
|
|
||||||
label="选择"/>
|
|
||||||
<form-number
|
|
||||||
v-model="vm.number"
|
|
||||||
label="数量"/>
|
|
||||||
|
|
||||||
<form-sfzh
|
|
||||||
v-model="vm.sfzh"
|
|
||||||
label="身份证号"/>
|
|
||||||
|
|
||||||
<van-button style="margin-top: 30px" type="primary" size="large" @click="onSearch">查询</van-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
NavBar,
|
|
||||||
Toast,
|
|
||||||
Button,
|
|
||||||
Icon,
|
|
||||||
Field,
|
|
||||||
} from 'vant';
|
|
||||||
import FormDatetime from '../../wbui/form/FormDatetime'
|
|
||||||
import FormDate from '../../wbui/form/FormData'
|
|
||||||
import FormTime from '../../wbui/form/FormTime'
|
|
||||||
import FormSelect from '../../wbui/form/FormSelect'
|
|
||||||
import FormNumber from '../../wbui/form/FormNumber'
|
|
||||||
import FormSfzh from '../../wbui/form/FormSfzh'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
[NavBar.name]: NavBar,
|
|
||||||
[Toast.name]: Toast,
|
|
||||||
[Button.name]: Button,
|
|
||||||
[Icon.name]: Icon,
|
|
||||||
[Field.name]: Field,
|
|
||||||
FormDatetime,
|
|
||||||
FormDate,
|
|
||||||
FormTime,
|
|
||||||
FormSelect,
|
|
||||||
FormNumber,
|
|
||||||
FormSfzh
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
vm: {
|
|
||||||
text: '',
|
|
||||||
textarea: '',
|
|
||||||
datetime: '',
|
|
||||||
date: '',
|
|
||||||
time: '',
|
|
||||||
select: '',
|
|
||||||
number: '',
|
|
||||||
},
|
|
||||||
selectData: [//text为显示文字,其他属性可以自定义
|
|
||||||
{text: "[1]A", code: "1", value: "A"},
|
|
||||||
{text: "[2]B", code: "2", value: "B"},
|
|
||||||
{text: "[3]C", code: "3", value: "C"},
|
|
||||||
{text: "[4]D", code: "4", value: "D"},
|
|
||||||
{text: "[5]E", code: "5", value: "E"}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onClickLeft() {
|
|
||||||
this.$router.go(-1)
|
|
||||||
},
|
|
||||||
onClickRight() {
|
|
||||||
this.$router.push('nav');
|
|
||||||
},
|
|
||||||
onSearch() {
|
|
||||||
window.console.log(this.vm);
|
|
||||||
},
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
|
|
||||||
.layout {
|
|
||||||
&-bar {
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
top: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.body {
|
|
||||||
margin-top: 50px;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -0,0 +1,98 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<van-field
|
||||||
|
v-model="value"
|
||||||
|
:required="required"
|
||||||
|
clearable
|
||||||
|
clickable
|
||||||
|
readonly
|
||||||
|
:label="label"
|
||||||
|
@click="showPicker"
|
||||||
|
right-icon="wap-nav"
|
||||||
|
placeholder="可搜索">
|
||||||
|
</van-field>
|
||||||
|
<van-popup
|
||||||
|
v-model="showPopup"
|
||||||
|
position="bottom">
|
||||||
|
<div>
|
||||||
|
<van-picker
|
||||||
|
ref="prefix"
|
||||||
|
:columns="data"
|
||||||
|
:show-toolbar="true"
|
||||||
|
confirm-button-text="确认"
|
||||||
|
cancel-button-text="取消"
|
||||||
|
@confirm="onConfirm"
|
||||||
|
@cancel="onCancel"
|
||||||
|
@change="onChange"/>
|
||||||
|
<van-search
|
||||||
|
v-model="keywords"
|
||||||
|
placeholder="请输入搜索关键词"
|
||||||
|
show-action
|
||||||
|
@search="onSearch"
|
||||||
|
@cancel="onCancel">
|
||||||
|
<div slot="action" @click="onSearch">搜索</div>
|
||||||
|
</van-search>
|
||||||
|
</div>
|
||||||
|
</van-popup>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
Field,
|
||||||
|
Popup,
|
||||||
|
Toast,
|
||||||
|
Picker,
|
||||||
|
Search,
|
||||||
|
} from 'vant';
|
||||||
|
|
||||||
|
export default{
|
||||||
|
components: {
|
||||||
|
[Field.name]: Field,
|
||||||
|
[Popup.name]: Popup,
|
||||||
|
[Toast.name]: Toast,
|
||||||
|
[Picker.name]: Picker,
|
||||||
|
[Search.name]: Search,
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
showPopup: false,
|
||||||
|
value: '',
|
||||||
|
keywords: '',
|
||||||
|
data: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
'label': String,
|
||||||
|
'required': Boolean,
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onConfirm(value, index) {
|
||||||
|
this.showPopup = false;
|
||||||
|
this.value = this.data[index];
|
||||||
|
this.$emit('input', this.value);
|
||||||
|
},
|
||||||
|
onSearch() {
|
||||||
|
this.$emit('search', this.keywords, this.callback);
|
||||||
|
},
|
||||||
|
callback(result) {
|
||||||
|
this.data = result;
|
||||||
|
},
|
||||||
|
onCancel() {
|
||||||
|
this.showPopup = false;
|
||||||
|
},
|
||||||
|
onChange(picker, values) {
|
||||||
|
window.console.log(values);
|
||||||
|
},
|
||||||
|
showPicker(){
|
||||||
|
this.showPopup = true;
|
||||||
|
},
|
||||||
|
finish(value){
|
||||||
|
this.value = value;
|
||||||
|
this.$emit('input', this.value);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
Loading…
Reference in new issue