wangbing
5 years ago
parent
bd0a764736
commit
c722be6d6f
@ -1,6 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<project version="4">
|
|
||||||
<component name="Encoding" defaultCharsetForPropertiesFiles="UTF-8">
|
|
||||||
<file url="PROJECT" charset="UTF-8" />
|
|
||||||
</component>
|
|
||||||
</project>
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<project version="4">
|
|
||||||
<component name="JavaScriptLibraryMappings">
|
|
||||||
<includedPredefinedLibrary name="ECMAScript 6" />
|
|
||||||
</component>
|
|
||||||
</project>
|
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,139 @@
|
|||||||
|
<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,223 @@
|
|||||||
|
<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>
|
||||||
@ -0,0 +1,145 @@
|
|||||||
|
<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="身份证号"/>
|
||||||
|
|
||||||
|
<form-cphm
|
||||||
|
v-model="vm.cphm"
|
||||||
|
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'
|
||||||
|
import FormCphm from '../../wbui/form/FormCphm'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
[NavBar.name]: NavBar,
|
||||||
|
[Toast.name]: Toast,
|
||||||
|
[Button.name]: Button,
|
||||||
|
[Icon.name]: Icon,
|
||||||
|
[Field.name]: Field,
|
||||||
|
FormDatetime,
|
||||||
|
FormDate,
|
||||||
|
FormTime,
|
||||||
|
FormSelect,
|
||||||
|
FormNumber,
|
||||||
|
FormSfzh,
|
||||||
|
FormCphm,
|
||||||
|
},
|
||||||
|
|
||||||
|
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,139 @@
|
|||||||
|
<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,219 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<van-field
|
||||||
|
v-model="value"
|
||||||
|
:required="required"
|
||||||
|
clearable
|
||||||
|
clickable
|
||||||
|
readonly
|
||||||
|
:label="label"
|
||||||
|
@click="showPicker"
|
||||||
|
right-icon="logistics"
|
||||||
|
placeholder="车牌号码">
|
||||||
|
</van-field>
|
||||||
|
<van-popup
|
||||||
|
v-model="showPopup"
|
||||||
|
position="bottom">
|
||||||
|
<van-picker
|
||||||
|
ref="prefix"
|
||||||
|
:columns="columns"
|
||||||
|
:show-toolbar="true"
|
||||||
|
confirm-button-text="确认"
|
||||||
|
cancel-button-text="取消"
|
||||||
|
@confirm="onConfirm"
|
||||||
|
@cancel="onCancel"
|
||||||
|
@change="onChange"/>
|
||||||
|
</van-popup>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
Field,
|
||||||
|
Popup,
|
||||||
|
Toast,
|
||||||
|
Picker,
|
||||||
|
} from 'vant';
|
||||||
|
|
||||||
|
import keyboard from '../../wbui/keyboard/index'
|
||||||
|
|
||||||
|
export default{
|
||||||
|
components: {
|
||||||
|
[Field.name]: Field,
|
||||||
|
[Popup.name]: Popup,
|
||||||
|
[Toast.name]: Toast,
|
||||||
|
[Picker.name]: Picker,
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
showPopup: false,
|
||||||
|
value: '',
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
values: [
|
||||||
|
{
|
||||||
|
key: '',
|
||||||
|
text: '京',
|
||||||
|
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'Y']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '',
|
||||||
|
text: '津',
|
||||||
|
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '',
|
||||||
|
text: '冀',
|
||||||
|
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'O', 'R', 'T']
|
||||||
|
},
|
||||||
|
{key: '', text: '晋', children: ['A', 'B', 'C', 'D', 'E', 'F', 'H', 'J', 'K', 'L', 'M']},
|
||||||
|
{
|
||||||
|
key: '',
|
||||||
|
text: '蒙',
|
||||||
|
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '',
|
||||||
|
text: '辽',
|
||||||
|
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P']
|
||||||
|
},
|
||||||
|
{key: '', text: '吉', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K']},
|
||||||
|
{
|
||||||
|
key: '',
|
||||||
|
text: '黑',
|
||||||
|
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '',
|
||||||
|
text: '沪',
|
||||||
|
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'AX', 'BX', 'DX']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '',
|
||||||
|
text: '苏',
|
||||||
|
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'U']
|
||||||
|
},
|
||||||
|
{key: '', text: '浙', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L']},
|
||||||
|
{
|
||||||
|
key: '',
|
||||||
|
text: '皖',
|
||||||
|
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S']
|
||||||
|
},
|
||||||
|
{key: '', text: '闽', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K']},
|
||||||
|
{
|
||||||
|
key: '',
|
||||||
|
text: '赣',
|
||||||
|
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'S']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '',
|
||||||
|
text: '鲁',
|
||||||
|
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'U', 'V', 'W', 'Y']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '',
|
||||||
|
text: '豫',
|
||||||
|
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'U']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '',
|
||||||
|
text: '鄂',
|
||||||
|
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'AW']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '',
|
||||||
|
text: '湘',
|
||||||
|
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'S', 'U']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '',
|
||||||
|
text: '粤',
|
||||||
|
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '',
|
||||||
|
text: '桂',
|
||||||
|
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R']
|
||||||
|
},
|
||||||
|
{key: '', text: '琼', children: ['A', 'B', 'C', 'D', 'E', 'F']},
|
||||||
|
{key: '', text: '渝', children: ['A', 'B', 'C', 'D', 'F', 'G', 'H', 'N']},
|
||||||
|
{
|
||||||
|
key: '',
|
||||||
|
text: '川',
|
||||||
|
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
|
||||||
|
},
|
||||||
|
{key: '', text: '贵', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J']},
|
||||||
|
{
|
||||||
|
key: '',
|
||||||
|
text: '云',
|
||||||
|
children: ['A', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S']
|
||||||
|
},
|
||||||
|
{key: '', text: '藏', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J']},
|
||||||
|
{key: '', text: '陕', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'V']},
|
||||||
|
{
|
||||||
|
key: '',
|
||||||
|
text: '甘',
|
||||||
|
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P']
|
||||||
|
},
|
||||||
|
{key: '', text: '青', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']},
|
||||||
|
{key: '', text: '宁', children: ['A', 'B', 'C', 'D', 'E']},
|
||||||
|
{
|
||||||
|
key: '',
|
||||||
|
text: '新',
|
||||||
|
children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'S']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
className: 'column1',
|
||||||
|
defaultIndex: 9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
values: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'Y'],
|
||||||
|
className: 'column2',
|
||||||
|
defaultIndex: 6
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
'label': String,
|
||||||
|
'required': Boolean
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onConfirm() {
|
||||||
|
//隐藏区域选择并弹出字母键盘
|
||||||
|
const c = this.$refs['prefix'].getValues();
|
||||||
|
this.showPopup = false;
|
||||||
|
keyboard({
|
||||||
|
value: c[0].text + c[1],
|
||||||
|
cols: 10,
|
||||||
|
keys: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '[+]'],
|
||||||
|
finish: this.finish,
|
||||||
|
filter: this.filter,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onCancel() {
|
||||||
|
this.showPopup = false;
|
||||||
|
},
|
||||||
|
onChange(picker, values) {
|
||||||
|
window.console.log(values);
|
||||||
|
// picker.setColumnValues(1, values.children);
|
||||||
|
},
|
||||||
|
showPicker(){
|
||||||
|
this.showPopup = true;
|
||||||
|
},
|
||||||
|
finish(value){
|
||||||
|
this.value = value;
|
||||||
|
this.$emit('input', this.value);
|
||||||
|
},
|
||||||
|
filter(key){
|
||||||
|
if (key === '[+]') {
|
||||||
|
Toast("扫描未实现")
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
return key;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
@ -1,40 +1,104 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<van-popup
|
||||||
|
v-model="showPopup"
|
||||||
|
:style="'height:'+ (54*rows+30) +'px;'"
|
||||||
|
position="bottom">
|
||||||
|
<div>
|
||||||
|
<input class="view" readonly v-model="value"/>
|
||||||
|
</div>
|
||||||
<div class="van-number-keyboard van-number-keyboard--custom van-number-keyboard--safe-area-inset-bottom"
|
<div class="van-number-keyboard van-number-keyboard--custom van-number-keyboard--safe-area-inset-bottom"
|
||||||
style="z-index:100;">
|
style="z-index:100;">
|
||||||
<div class="van-number-keyboard__body">
|
<div class="van-number-keyboard__body">
|
||||||
<i role="button" tabindex="0" class="van-hairline van-key">1</i>
|
<i v-for="key in keys" :key="key" role="key" class="van-hairline van-key" @click="onKey(key)"
|
||||||
<i role="button" tabindex="0" class="van-hairline van-key">2</i>
|
:style="'width:'+ 100/cols +'%;'">{{key}}</i>
|
||||||
<i role="button" tabindex="0" class="van-hairline van-key">3</i>
|
|
||||||
<i role="button" tabindex="0" class="van-hairline van-key">4</i>
|
|
||||||
<i role="button" tabindex="0" class="van-hairline van-key">5</i>
|
|
||||||
<i role="button" tabindex="0" class="van-hairline van-key">6</i>
|
|
||||||
<i role="button" tabindex="0" class="van-hairline van-key">7</i>
|
|
||||||
<i role="button" tabindex="0" class="van-hairline van-key">8</i>
|
|
||||||
<i role="button" tabindex="0" class="van-hairline van-key">9</i>
|
|
||||||
<i role="button" tabindex="0" class="van-hairline van-key van-key--middle">0</i>
|
|
||||||
<i role="button" tabindex="0" class="van-hairline van-key">.</i>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="van-number-keyboard__sidebar"><i role="button" tabindex="0"
|
<div class="van-number-keyboard__sidebar">
|
||||||
class="van-hairline van-key van-key--delete van-key--big van-key--gray van-key--delete">删除</i><i
|
<i role="control" :style="'height:'+ 54*rows/2 +'px;line-height:'+54*rows/2+'px;'"
|
||||||
role="button" tabindex="0"
|
class="van-hairline van-key van-key--delete van-key--big van-key--gray van-key--delete"
|
||||||
class="van-hairline van-key van-key--blue van-key--big van-key--close">完成</i>
|
@click="onDelete">删除</i>
|
||||||
|
<i role="control" :style="'height:'+ 54*rows/2 +'px;line-height:'+54*rows/2+'px;'"
|
||||||
|
class="van-hairline van-key van-key--blue van-key--big van-key--close"
|
||||||
|
@click="onFinish">完成</i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</van-popup>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import {
|
||||||
|
Popup,
|
||||||
|
NumberKeyboard,
|
||||||
|
} from 'vant';
|
||||||
|
|
||||||
export default{
|
export default{
|
||||||
components: {},
|
components: {
|
||||||
|
[Popup.name]: Popup,
|
||||||
|
[NumberKeyboard.name]: NumberKeyboard
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
showPopup: Boolean,
|
||||||
|
value: String,
|
||||||
|
keys: Array,
|
||||||
|
cols: Number,
|
||||||
|
cancel: Function,
|
||||||
|
finish: Function,
|
||||||
|
filter: Function
|
||||||
|
},
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
value: '',
|
rows: 0
|
||||||
defaultIndex: 0,
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props: {
|
methods: {
|
||||||
'keyGroup': Array,
|
onKey: function (key) {
|
||||||
|
const keyFiler = this.filter(key);
|
||||||
|
this.value = this.value + keyFiler;
|
||||||
|
this.$emit('input', this.value);
|
||||||
|
},
|
||||||
|
onDelete: function () {
|
||||||
|
if (this.value.length > 0) {
|
||||||
|
this.value = this.value.substr(0, this.value.length - 1)
|
||||||
|
}
|
||||||
|
this.$emit('input', this.value);
|
||||||
|
},
|
||||||
|
onFinish(){
|
||||||
|
this.showPopup = false;
|
||||||
|
this.$emit('input', this.value);
|
||||||
|
if (this.finish) {
|
||||||
|
this.finish(this.value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onCancel(){
|
||||||
|
if (this.cancel) {
|
||||||
|
this.cancel();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
show(){
|
||||||
|
this.showPopup = true;
|
||||||
|
this.rows = Math.ceil(this.keys.length / this.cols);
|
||||||
|
window.console.log(this.rows)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {},
|
|
||||||
mounted(){
|
mounted(){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.view {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
outline: none;
|
||||||
|
border: 0px;
|
||||||
|
height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
i[role="key"]:active {
|
||||||
|
background-color: #d2d2d2;
|
||||||
|
}
|
||||||
|
|
||||||
|
i[role="control"]:active {
|
||||||
|
opacity: 0.7
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import Keyboard from '../../wbui/keyboard/Keyboard'
|
||||||
|
function createInstance() {
|
||||||
|
// 返回一个扩展实例构造器
|
||||||
|
const KeyboardConstructor = Vue.extend(Keyboard);
|
||||||
|
// 构造一个实例
|
||||||
|
const toastDom = new KeyboardConstructor({
|
||||||
|
el: document.createElement('div'),
|
||||||
|
});
|
||||||
|
// 把实例化的 toast.vue 添加到 body 里
|
||||||
|
document.body.appendChild(toastDom.$el);
|
||||||
|
return toastDom;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 注册为全局组件的函数
|
||||||
|
function KeyBoard(options = {}) {
|
||||||
|
const toastDom = createInstance();
|
||||||
|
toastDom.cols = options.cols || 3;
|
||||||
|
toastDom.keys = options.keys;
|
||||||
|
toastDom.value = options.value || '';
|
||||||
|
toastDom.finish = options.finish || null;
|
||||||
|
toastDom.cancel = options.cancel || null;
|
||||||
|
toastDom.filter = options.filter || function (key) {
|
||||||
|
return key;
|
||||||
|
};
|
||||||
|
toastDom.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
export default KeyBoard
|
||||||
Loading…
Reference in new issue