1.在newapp/components/wgz.vue中：
代码语言：javascript
复制<template>
<view>
<view class="cu-bar bg-white solid-bottom">
<view class="action">
<text class="cuIcon-title text-orange"></text>
{{data3.pq.name}}
</view>
</view>
<scroll-view scroll-x class="bg-cyan nav text-center">
<view class="cu-item text-lg" :class="0==TabCur1?'text-white cur':''" @tap="tabSelect1" data-id="0">
<text class="cuIcon-addressbook"></text> 编辑数据
</view>
<view class="cu-item text-lg" :class="1==TabCur1?'text-white cur':''" @tap="tabSelect1" data-id="1">
<text class="cuIcon-edit"></text> 展示数据
</view>
</scroll-view>
<!-- 数据展示 -->
<view class="zhanshi" v-show="!flag_edit">
<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
<view class="cu-item" :class="index==TabCur2?'text-green cur':''" v-for="(item,index) in my_wgylist_and_loulist" :key="index" @tap="tabSelect2" :data-id="index" :data-item="item">
{{item.wgy.name}}
</view>
</scroll-view>
<view v-for="(item,index) in my_loulist" :key="index" class="padding-xl radius shadow-warp bg-white margin-top">
{{item.name}}
</view>
</view>
<!-- 数据编辑 -->
<view class="bianji" v-show="flag_edit">
<view class="edit" v-if="wgz_can_edit">
<view class="cu-form-group margin-top">
<view class="title">网格员：</view>
<picker @change="PickerChange" :value="index" :range="data3.all_wgy_list" :range-key="'name'">
<view class="picker">
{{wgy_name}}
</view>
</picker>
</view>
<view class="cu-form-group margin-top text-xl">
<view class="title">楼（街）名：</view>
<input placeholder="楼名或街名" name="input" v-model="lou_name"></input>
</view>
<view class="padding flex flex-direction">
<button class="cu-btn bg-cyan lg" @tap="addLou">增加楼（街）名</button>
</view>
<view class="lou_wgy_list" v-for="(item,index) in newest_loulist_data" :key="index">
<view class="padding-xl radius shadow-warp bg-gray margin-top">
<view class="cu-bar solid-bottom">
<view class="action">
<text class="cuIcon-title text-orange"></text> {{item.name}}
</view>
</view>
<view class="cu-bar solid-bottom">
<view class="action">
<text class="cuIcon-friendfamous text-orange"></text> {{item.wgy}}
</view>
</view>
<view class="padding flex flex-direction">
<button class="cu-btn bg-cyan lg" @tap="DelLouMing(item.id)">删除楼（街）名</button>
</view>
</view>
</view>
</view>
<view class="edit" v-if="!wgz_can_edit">
<view class="padding-xl radius shadow-warp bg-cyan margin-top text-center">
目前网格长不能进行数据编辑
</view>
</view>
</view>
<view class="cu-modal" :class="modalName=='Modal'?'show':''">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class="content">信息提示</view>
<view class="action" @tap="hideModal">
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view class="padding-xl">
{{msg}}
</view>
</view>
</view>
</view>
</template>
<script>
import {host,get,post} from '@/commons/post_and_get.js'
export default {
props: {
data3:Object,
my_wgylist_and_loulist:Array,
wgz_can_edit:Boolean
},
data() {
return {
// 切换 数据展示和编辑数据
TabCur1:0,
//切换 显示网格长能查看到的数据列表，显示网格长的编辑页面
flag_edit:true,
//切换不同网格员，查看每个网格员负责的楼名
TabCur2:0,
scrollLeft: 0,
my_loulist:[],
//新增楼和街
lou_name:'',
wgy_name:'.',
wgy_id:'',
modalName:null,
msg:'',
newest_loulist_data:[]
};
},
methods:{
//切换展示数据和编辑数据
tabSelect1(e){
this.TabCur1 = e.currentTarget.dataset.id;
if(this.TabCur1==0){
this.flag_edit=true
}
if(this.TabCur1==1){
this.flag_edit=false
this.my_loulist=this.my_wgylist_and_loulist[0].lou_list
this.TabCur2='0'
}
},
tabSelect2(e) {
this.TabCur2 = e.currentTarget.dataset.id;
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
this.my_loulist=e.currentTarget.dataset.item.lou_list
},
PickerChange(e) {
let wgy=this.data3.all_wgy_list[e.detail.value];
this.wgy_name=wgy.name
this.wgy_id=wgy.id
},
async addLou(){
let token=uni.getStorageSync('token');
if(this.lou_name.length>2 && this.wgy_id){
let x=await post('/user_operations/addlou/',{'token':token,'wgy_id':this.wgy_id,'lou_ming':this.lou_name})
// console.log(x)
if(x.status==200){
this.msg=x.data.msg
this.modalName='Modal'
}
this.GetLouAndWgy()
}else{
this.msg='网格员与楼（街）名都不能为空！'
this.modalName='Modal'
}
},
hideModal(e) {
this.modalName = null
},
async GetLouAndWgy(){
let token=uni.getStorageSync('token');
let y=await get('/user_operations/addlou/',{'token':token})
// console.log(y)
this.newest_loulist_data=[]
for(var i=0;i<y.data.lou_list.length;i ){
// console.log(i)
for(var j=0;j<y.data.all_wgy_list.length;j ){
// console.log(j)
if(y.data.lou_list[i].wgy==y.data.all_wgy_list[j].id){
y.data.lou_list[i].wgy=y.data.all_wgy_list[j].name
this.newest_loulist_data.push(y.data.lou_list[i])
}
}
}
// console.log(this.newest_loulist_data)
},
async DelLouMing(e){
let token=uni.getStorageSync('token');
let z=await get('/user_operations/dellou/',{'token':token,'lou_id':e})
// console.log(z)
if(z.status==200){
this.GetLouAndWgy()
}
}
},
mounted() {
this.GetLouAndWgy()
}
}
</script>
<style>
</style>
