17.普通用户、网格长、网格员,操作数据(4)newapp/components/wgz.vue
1.在newapp/components/wgz.vue中:
<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>