17.普通用户、网格长、网格员，操作数据（4）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>