|
|
@@ -14,11 +14,47 @@
|
|
|
<label>您的身份</label>
|
|
|
<span v-text="subForm.roleName"></span>
|
|
|
</div>
|
|
|
+ <div class="mui-input-row" @click="openPopover">
|
|
|
+ <label>选择房号</label>
|
|
|
+
|
|
|
+ <span id="openPopover" class="address">{{subForm.structureName?subForm.structureName:'点击选择房号'}}</span>
|
|
|
+
|
|
|
+ </div>
|
|
|
</form>
|
|
|
</div>
|
|
|
- <div class="mui-content-padded vongi-qingjiadt">
|
|
|
+ <div id="popover" class="mui-popover">
|
|
|
+
|
|
|
+ <div class="mui-scroll-wrapper">
|
|
|
+
|
|
|
+ <div class="mui-scroll">
|
|
|
+ <div class="address-title">
|
|
|
+ <h4>请选择房号</h4>
|
|
|
+ <i class="mui-icon mui-icon-closeempty" @click="openPopover"></i>
|
|
|
+ </div>
|
|
|
+ <div class="address-table">
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item,i) in selectDataJson"
|
|
|
+ :class="{active:i==selectIndex}"
|
|
|
+ :key="i" @click="changeIndex(i)">{{item.name}}</li>
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!--这里放置真实显示的DOM内容-->
|
|
|
+ <ul class="mui-table-view">
|
|
|
+ <li class="mui-table-view-cell " v-for="(item,i) in sz1"
|
|
|
+ @click="clickLi(item)"
|
|
|
+
|
|
|
+ :key="i">{{item.name}}</li>
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="mui-content-padded vongi-qingjiadt" v-if="false">
|
|
|
<form class="mui-input-group">
|
|
|
- <div v-for="(item,index) in structureNameList" class="mui-input-row">
|
|
|
+ <div v-for="(item,index) in structureNameList" :key="index" class="mui-input-row">
|
|
|
<label v-text="item"></label>
|
|
|
<button @click="selectStructure(index)" class="mui-btn mui-btn-block mui-navigate-right mui-ellipsis" type='button'
|
|
|
style="width:65%">
|
|
|
@@ -33,6 +69,7 @@
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <loading :visible="isLoading"></loading>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -66,10 +103,12 @@
|
|
|
roleName: '',
|
|
|
name: '',
|
|
|
telephone: '',
|
|
|
+ structureName:"",
|
|
|
personId: '',
|
|
|
companyId: '',
|
|
|
companyName: '请选择',
|
|
|
companyStructureId: '',
|
|
|
+
|
|
|
//最终选择的数据
|
|
|
selectCompanyStructureList: [],
|
|
|
address: '',
|
|
|
@@ -82,20 +121,89 @@
|
|
|
|
|
|
structureList: [],
|
|
|
structureNameList: [],
|
|
|
+ dataJson:[],
|
|
|
+ selectIndex:0,
|
|
|
+ selectDataJson:[
|
|
|
+ {
|
|
|
+ code:'',
|
|
|
+ name:'请选择'
|
|
|
+ },{
|
|
|
+ code:'',
|
|
|
+ name:'请选择'
|
|
|
+ },{
|
|
|
+ code:'',
|
|
|
+ name:'请选择'
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.subForm = this.register_form_data;
|
|
|
},
|
|
|
methods: {
|
|
|
+ openPopover(){
|
|
|
+ mui('#popover').popover('toggle');
|
|
|
+ mui(".mui-scroll-wrapper").scroll()
|
|
|
+ },
|
|
|
+ clickLi(item){
|
|
|
+ // this.subForm.companyStructureId=''
|
|
|
+ var bl=true;
|
|
|
+ if(this.selectDataJson[this.selectIndex].code==item.code){
|
|
|
+ bl=false;
|
|
|
+ }
|
|
|
+ this.selectDataJson[this.selectIndex]=item
|
|
|
+
|
|
|
+ if(this.selectIndex+1<this.selectDataJson.length){
|
|
|
+
|
|
|
+ if(bl){
|
|
|
+ var index=this.selectIndex+1;
|
|
|
+
|
|
|
+ for(var i=index; i< this.selectDataJson.length;i++){
|
|
|
+
|
|
|
+ this.selectDataJson[i]={
|
|
|
+ code:'',
|
|
|
+ name:'请选择'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$forceUpdate();
|
|
|
+ }
|
|
|
+
|
|
|
+ this.selectIndex++
|
|
|
+ }else{
|
|
|
+ this.openPopover()
|
|
|
+ }
|
|
|
+ this.subForm.structureName=""
|
|
|
+ this.selectDataJson.forEach(item=>{
|
|
|
+ if(item.code!=''){
|
|
|
+ this.subForm.structureName=item.name;
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+ changeIndex(i){
|
|
|
+
|
|
|
+ if(i==this.selectIndex||i==0){
|
|
|
+ this.selectIndex=i;
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if(this.selectDataJson[i-1].code==""){
|
|
|
+ mui.toast('请先选择上一项');
|
|
|
+ }else{
|
|
|
+ this.selectIndex=i;
|
|
|
+ }
|
|
|
+ },
|
|
|
//获取公司部门列表
|
|
|
getStructureList() {
|
|
|
this.isLoading = true;
|
|
|
- API_Person.getCompanyStructureList(this.subForm.companyId).then(response => {
|
|
|
+ API_Person.communityList({
|
|
|
+ communityId: this.subForm.companyId
|
|
|
+ }).then(response => {
|
|
|
this.isLoading = false;
|
|
|
-
|
|
|
- Vue.set(this.structureList, 0, response.structureInfoList)
|
|
|
- this.structureNameList = response.structureNameList;
|
|
|
+ this.dataJson=response.list;
|
|
|
+
|
|
|
}).catch(error => {
|
|
|
this.isLoading = false;
|
|
|
mui.toast(error);
|
|
|
@@ -143,15 +251,9 @@
|
|
|
},
|
|
|
//检测表单
|
|
|
checkForm() {
|
|
|
- //设置最后一个id
|
|
|
- let lastIndex = this.subForm.selectCompanyStructureList.length;
|
|
|
- let lastItem = this.subForm.selectCompanyStructureList[lastIndex - 1];
|
|
|
- //只有当选择的数据长度等于返回的总长度才赋值通过
|
|
|
- if (lastIndex == this.structureNameList.length) {
|
|
|
- this.subForm.companyStructureId = lastItem ? lastItem.id : '';
|
|
|
- }
|
|
|
- if (!this.subForm.companyStructureId && this.structureNameList.length > 0) {
|
|
|
- mui.toast('请选择' + this.structureNameList[lastIndex]);
|
|
|
+
|
|
|
+ if (!this.subForm.companyStructureId ) {
|
|
|
+ mui.toast('请选择房号');
|
|
|
return false;
|
|
|
} else {
|
|
|
return true;
|
|
|
@@ -159,6 +261,8 @@
|
|
|
},
|
|
|
//下一步
|
|
|
nextStep() {
|
|
|
+ this.subForm.companyStructureId=this.selectDataJson[this.selectDataJson.length-1].code
|
|
|
+ //this.subForm.companyStructureName==this.selectDataJson[this.selectDataJson.length-1].name
|
|
|
if (this.checkForm()) {
|
|
|
this.set_register_form_data(this.subForm);
|
|
|
this.$router.push({
|
|
|
@@ -176,6 +280,8 @@
|
|
|
})
|
|
|
},
|
|
|
mounted() {
|
|
|
+ mui(".mui-scroll-wrapper").scroll()
|
|
|
+
|
|
|
//获取公司部门列表
|
|
|
this.getStructureList();
|
|
|
},
|
|
|
@@ -183,6 +289,34 @@
|
|
|
|
|
|
},
|
|
|
computed: {
|
|
|
+ sz1(){
|
|
|
+
|
|
|
+ var sz=[]
|
|
|
+
|
|
|
+
|
|
|
+ if(this.selectIndex==0){
|
|
|
+ this.dataJson.forEach(item=>{
|
|
|
+ sz.push({
|
|
|
+ code:item.id,
|
|
|
+ name:item.name,
|
|
|
+ children:item.children
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ //console.log(this.selectDataJson[this.selectIndex])
|
|
|
+ this.selectDataJson[this.selectIndex-1].children.map(item=>{
|
|
|
+ if(!item.children){
|
|
|
+ item.children=[]
|
|
|
+ }
|
|
|
+ sz.push({
|
|
|
+ code:item.id,
|
|
|
+ name:item.name,
|
|
|
+ children:item.children
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return sz;
|
|
|
+ },
|
|
|
...mapGetters({
|
|
|
openId: 'wx_openid',
|
|
|
token: 'token',
|
|
|
@@ -197,5 +331,60 @@
|
|
|
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
|
|
|
<style src="$project/assets/css/iconfont.css"></style>
|
|
|
<style src="$project/assets/css/mui.picker.min.css"></style>
|
|
|
-<style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .mui-popover {
|
|
|
+ .mui-table-view{
|
|
|
+ max-height: 500px;
|
|
|
+ }
|
|
|
+ .mui-table-view-cell{
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .select::before{
|
|
|
+ content: "\e472";
|
|
|
+ position: absolute;
|
|
|
+ font-family: Muiicons;
|
|
|
+ font-size: 30px;
|
|
|
+ right: 5px;
|
|
|
+ top: 10px;
|
|
|
+ color:#f5b33d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .address{
|
|
|
+ font-size: 15px;
|
|
|
+
|
|
|
+ color:#757575;
|
|
|
+ }
|
|
|
+ .address-title{
|
|
|
+ padding-top:20px;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ i{position: absolute;right: 10px;top:20px}
|
|
|
+ }
|
|
|
+ .address-table{
|
|
|
+ padding: 10px;
|
|
|
+ ul{
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ ul li{
|
|
|
+ float: left;
|
|
|
+ margin-right: 15px;
|
|
|
+ color:#999;
|
|
|
+ font-size: 14px;
|
|
|
+ list-style:none;
|
|
|
+ }
|
|
|
+ .active{
|
|
|
+ color:#1890ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mui-popover{
|
|
|
+ width: 100%;
|
|
|
+ left: 0!important;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ top:200px!important;
|
|
|
+ border-radius:10px 10px 0 0;
|
|
|
+ }
|
|
|
+ .mui-popover .mui-popover-arrow{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
</style>
|
zhengkaixin