12.开发newapp修改Bug1：用户信息应该实时更新，网格长数据展示，网格长网格员编辑数据的权力的查询

1.修改Bug1：用户信息应该实时更新

1.修改潜在bug，因为后端可能要涉及到用户身份权限的修改，所以每一次打开个人中心和操作中心，都应该更新一遍用户的个人信息

1.在后端项目user_operations/views.py中：

class UpUserInfoView(APIView):
    """更新用户信息"""

    def get(self, request):
        token = request.GET.get('token')
        if token:
            user = UserProfile.objects.filter(token=token).first()
            if user:
                # 生成token
                now_time = str(int(time.time()))
                word = user.mobile + now_time
                token = hashlib.sha256(word.encode("utf-8")).hexdigest()
                # print(token)
                user.token = token
                user.save()
                re = UserProfileModelSerializer(user)
                result = {"status": "200", "data": {'info': re.data, 'token': token}}
            else:
                result = {"status": "403", "data": {'msg': '请重新登录。'}}
        else:
            result = {"status": "403", "data": {'msg': '参数不足'}}
        return HttpResponse(json.dumps(result, ensure_ascii=False), content_type="application/json,charset=utf-8")

2.在user_operations/urls.py中增加路由：

from django.urls import path
from .views import GetPianQuBannerView,GetNoticeListView,UserLoginView,UpPwdView,GetCaoZuoView,UpUserInfoView

urlpatterns = [
    path('getbanner/',GetPianQuBannerView.as_view()),#手机端获取banner图
    path('getnoticeclist/',GetNoticeListView.as_view()),#获取公告列表
    path('userlogin/',UserLoginView.as_view()),#小程序用户登录
    path('uppwd/',UpPwdView.as_view()),#用户修改密码
    path('getcaozuo/',GetCaoZuoView.as_view()),#获取操作数据
    path('upuserinfo/',UpUserInfoView.as_view()),#更新用户个人信息
]

3.在newapp/page/me/me.vue和center/center.vue中的is_login函数中加入：

                    //更新个人数据信息开始
                    let re =await get('/user_operations/upuserinfo/',{'token':token})
                    // console.log(111,re)
                    if(re.status==200){
                        uni.setStorageSync('token' , re.data.token);
                        uni.setStorageSync('info' , re.data.info);
                    }else{
                        uni.removeStorageSync('token');
                        uni.navigateTo({url:'/pages/login/login'})
                    }
                    //更新个人数据信息结束

2.网格长查看数据（网格员及网格员负责的楼街）

1.在user_operations/views.py中完善GetCaoZuoView的网格长部分

class GetCaoZuoView(APIView):
    """获取操作数据"""
    def get(self, request):
        token = request.GET.get('token')
        if token:
            user = UserProfile.objects.filter(token=token).first()
            if user:
                if user.power==5:
                    print('网格长')
                    pq=PianQu.objects.filter(wgz=user).first()
                    pq_re=PianQuModelSerializer(pq)
                    all_wgy_list=UserProfile.objects.filter(power=4)
                    all_wgy_list_re=UserProfileModelSerializer(all_wgy_list,many=True)
                    lou_list=LouMing.objects.filter(pianqu=pq)
                    lou_list_re=LouMingModelSerializer(lou_list,many=True)
                    result = {"status": "200", "data": {'pq': pq_re.data,'all_wgy_list':all_wgy_list_re.data,'lou_list':lou_list_re.data}}
                elif user.power==4:
                    print('网格员')
                    result = {"status": "200", "data": {'msg': '网格员'}}
                else:
                    danyuan=UserToZhuHu.objects.filter(user=user).first().zhhu.dy
                    dyz=danyuan.dyz
                    lou=danyuan.lou
                    lz=lou.lz
                    wgy=lou.wgy
                    pq=lou.pianqu
                    wgz=pq.wgz
                    re_dyz=UserProfileModelSerializer(dyz)
                    re_lz=UserProfileModelSerializer(lz)
                    re_wgy=UserProfileModelSerializer(wgy)
                    re_wgz=UserProfileModelSerializer(wgz)
                    result = {"status": "200", "data": {'dyz':re_dyz.data,'lz':re_lz.data,'wgy':re_wgy.data,'wgz':re_wgz.data}}
            else:
                result = {"status": "403", "data": {'msg': '请重新登录。'}}
        else:
            result = {"status": "403", "data": {'msg': '参数不足'}}
        return HttpResponse(json.dumps(result, ensure_ascii=False), content_type="application/json,charset=utf-8")

2.在newapp/page/center/center.vue中补充网格长数据展示部分：

<template>
    <view class="content">
        <!-- 普通用户 -->
        <view class="putong" v-if="flag1">
            <view class="padding-xl radius shadow-warp bg-cyan margin-top">
                <view class="v-header">
                    <view class="pic">
                        <image :src="data1.data.wgz.img" mode=""></image>
                    </view>
                    <view class="pin">
                        
                        <view class="l">
                            网格长：{{data1.data.wgz.name}}
                        </view>
                        <view class="l lz">
                            电话：{{data1.data.wgz.mobile}}
                        </view>
                        <view class="l btn margin-top">
                            <button class="cu-btn text-cyan" @tap="CallPhone" :data-url="data1.data.wgz.mobile">一键拨打</button>
                        </view>
                    </view>
                </view>
            </view>
            <view class="padding-xl radius shadow-warp bg-cyan margin-top">
                <view class="v-header">
                    <view class="pic">
                        <image :src="data1.data.wgy.img" mode=""></image>
                    </view>
                    <view class="pin">
                        
                        <view class="l">
                            网格员：{{data1.data.wgy.name}}
                        </view>
                        <view class="l lz">
                            电话：{{data1.data.wgy.mobile}}
                        </view>
                        <view class="l btn margin-top">
                            <button class="cu-btn text-cyan" @tap="CallPhone" :data-url="data1.data.wgy.mobile">一键拨打</button>
                        </view>
                    </view>
                </view>
            </view>
            
            <view class="bg-white margin-top">
                <view class="cu-form-group">
                    <view class="title">楼长（街长）：</view>
                    <input name="input" disabled="true" v-model="data1.data.lz.name"></input>
                </view>
                <view class="cu-form-group">
                    <view class="title">单元长（组长）：</view>
                    <input name="input" disabled="true" v-model="data1.data.dyz.name"></input>
                </view>
            </view>
        </view>
        <view class="wgy" v-if=flag2>
            网格员
        </view>
        <view class="wgz" v-if="flag3">
            
            
            <scroll-view scroll-x class="bg-cyan nav text-center">
                <view class="cu-item" :class="0==TabCur1?'text-white cur':''" @tap="tabSelect1" data-id="0">
                    <text class="cuIcon-addressbook"></text> 展示数据
                </view>
                <view class="cu-item" :class="1==TabCur1?'text-white cur':''" @tap="tabSelect1" data-id="1">
                    <text class="cuIcon-edit"></text> 编辑数据
                </view>                
            </scroll-view>
            
            
            <view class="cu-bar bg-white solid-bottom">
                <view class="action">
                    <text class="cuIcon-title text-orange"></text> 
                    {{pq.name}}
                </view>
            </view>
            
            <!-- 数据展示 -->
            <view class="zhanshi" v-show="flag_edit">
                <view class="padding-xl radius shadow-warp bg-white margin-top">
                    <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
                        <view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in data3" :key="index" @tap="tabSelect" :data-id="index" :data-item="item.lou_list">
                            {{item.wgy}}
                        </view>
                    </scroll-view>
                </view>
                <view class="padding-xl radius shadow-warp bg-white margin-top text-center" v-for="(item,index) in lou_jie_list" :key="index">{{item}}</view>
            </view>
            
            <!-- 数据编辑 -->
            <view class="bianji" v-show="!flag_edit">
                编辑
            </view>
            
                
        </view>

        <!-- 版权信息 -->
        <view class="solid-bottom padding text-center margin-top">
            ©由赤峰市落忆网络科技有限公司提供技术支持
        </view>
        
    </view>
</template>

<script>
import {host,get,post} from '@/commons/post_and_get.js';
    export default {
        data() {
            return {
                //非网格员也非网格长
                flag1:false,
                data1:[],
                flag2:false,
                //网格长
                flag3:false,
                TabCur: 0,
                scrollLeft: 0,
                pq:{},
                data3:[],
                lou_jie_list:[],
                // 切换 数据展示和编辑数据
                TabCur1:0,
                flag_edit:true
                
            }
        },
        methods: {
            async isLogin(){
                let token=uni.getStorageSync('token');
                if(token){
                    //更新个人数据信息开始
                    let re=await get('/user_operations/upuserinfo/',{'token':token})
                    // console.log(111,re)
                    if(re.status==200){
                        uni.setStorageSync('token' , re.data.token);
                        uni.setStorageSync('info' , re.data.info);
                    }else{
                        uni.removeStorageSync('token');
                        uni.navigateTo({url:'/pages/login/login'})
                    }
                    //更新个人数据信息结束
                    
                    
                    let f=uni.getStorageSync('info')
                    // console.log(f)
                    if(f.power==1||f.power==2||f.power==3){
                        this.flag1=true
                        this.flag2=false
                        this.flag3=false
                    }
                    if(f.power==4){
                        this.flag1=false
                        this.flag2=true
                        this.flag3=false
                    }
                    if(f.power==5){
                        this.flag1=false
                        this.flag2=false
                        this.flag3=true
                    }
                    
                    this.GetCaoZuoData()
                }else{
                    uni.navigateTo({url:'/pages/login/login'})
                }
            },
            
            async GetCaoZuoData(){
                let re=await get('/user_operations/getcaozuo/',{'token':uni.getStorageSync('token')})
                console.log(re)
                if(this.flag1){
                    re.data.wgy.img=host+re.data.wgy.img
                    re.data.wgz.img=host+re.data.wgz.img
                    this.data1=re
                }
                if(this.flag3){
                    this.pq=re.data.pq
                    this.data3=[] 
                    for(var i=0;i<re.data.all_wgy_list.length;i++){
                        let data3_item={'wgy':'','lou_list':[]}
                        for(var j=0;j<re.data.lou_list.length;j++){
                            if(re.data.all_wgy_list[i].id==re.data.lou_list[j].wgy){
                                data3_item['wgy']=re.data.all_wgy_list[i].name
                                data3_item['lou_list'].push(re.data.lou_list[j].name)
                            }
                        }
                        if(data3_item.wgy){
                            this.data3.push(data3_item)
                            this.lou_jie_list=this.data3[0].lou_list
                        }
                    }
                    // console.log(this.data3)
                }    
            },
            // 拨打电话
            CallPhone(e){uni.makePhoneCall({phoneNumber: e.currentTarget.dataset.url});},
            
            //网格长导航1
            tabSelect(e) {
                this.lou_jie_list=e.currentTarget.dataset.item
                this.TabCur = e.currentTarget.dataset.id;
                this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
            },
            //切换展示数据和编辑数据的导航
            tabSelect1(e){
                this.TabCur1 = e.currentTarget.dataset.id;
                if(this.TabCur1==0){
                    this.flag_edit=true
                }
                if(this.TabCur1==1){
                    this.flag_edit=false
                }
            }
        },
        onShow() {
            this.isLogin()
             
        }
    }
</script>

<style>
.pic{
    width: 150upx;
    height: 200upx;
}
.pic image{
    width: 100%;
    height: 100%;
}
.pin{
    width: 400upx;
    font-size: 40upx;
}
.l{
    text-align: left;
}
.lz{
    font-size: 35upx;
}
.btn{
    margin-left:200upx ;
}
.v-header{
    display: flex;
    width: 100%;
    justify-content:space-around;
}

</style>

效果图

      

3.网格长网格员编辑数据权力的查询（不能让网格长和网格员一直随时可以编辑数据）

1.不能让网格员一直随时可以修改数据，所以要设计一个开关阀，只有在开关阀开着的期间，才能进行数据修改

1.在后端项目NewCenter的user_operations/models.py中新建表格

class OnOrOff(models.Model):
    """数据操作开关"""
    wgz=models.BooleanField(default=False,verbose_name='是否开通网格长权限')
    wgy=models.BooleanField(default=False,verbose_name='是否开通网格员权限')
    add_time = models.DateTimeField(default=datetime.now, verbose_name="添加时间")

    class Meta:
        verbose_name = "权限开关表"
        verbose_name_plural = verbose_name

执行数据更新命令：

python manage.py makemigrations
python manage.py migrate

2.在user_operations/adminx.py中注册：

import xadmin
from .models import Notice,OnOrOff


class NoticeAdmin(object):
    list_display = ["user","content","add_time"]
    list_filter =  ["user","content","add_time"]
    search_fields=["content"]


class OnOrOffAdmin(object):
    list_display = ["wgz","wgy","add_time"]


xadmin.site.register(Notice,NoticeAdmin)
xadmin.site.register(OnOrOff,OnOrOffAdmin)

3.在user_operations/serializers.py中序列化数据操作开关表

from rest_framework import serializers
from .models import Notice,OnOrOff


class NoticeModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = Notice
        fields="__all__"


class OnOrOffModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = OnOrOff
        fields="__all__"

4.在user_operations/views.py中编写查询编辑数据权限类：

from django.shortcuts import render,HttpResponse
from rest_framework.views import APIView,Response
from users.models import PianQu,UserProfile,UserToZhuHu,LouMing
from users.serializers import PianQuModelSerializer,UserProfileModelSerializer,LouMingModelSerializer
from .models import Notice,OnOrOff
from .serializers import NoticeModelSerializer,OnOrOffModelSerializer
import json,time,hashlib


#……

class EditPowerView(APIView):
    """查看网格长和网格员是否有权限编辑数据"""

    def get(self, request):
        powr=OnOrOff.objects.all().last()
        re=OnOrOffModelSerializer(powr)
        return Response(re.data)

5.在user_operations/urls.py中添加路由：

from django.urls import path
from .views import GetPianQuBannerView,GetNoticeListView,UserLoginView,UpPwdView,GetCaoZuoView,UpUserInfoView,EditPowerView

urlpatterns = [
    #……
    path('upuserinfo/',UpUserInfoView.as_view()),#更新用户个人信息
    path('editpower/',EditPowerView.as_view()),#查看网格长和网格员是否有编辑权
]

6.在xadmin后台添加一条记录：

2.在newapp/page/center/center.vue中补充网格长编辑数据权力的查询部分：

<template>
    <view class="content">
        <!-- 普通用户 -->
        <view class="putong" v-if="flag1">
            <view class="padding-xl radius shadow-warp bg-cyan margin-top">
                <view class="v-header">
                    <view class="pic">
                        <image :src="data1.data.wgz.img" mode=""></image>
                    </view>
                    <view class="pin">
                        
                        <view class="l">
                            网格长：{{data1.data.wgz.name}}
                        </view>
                        <view class="l lz">
                            电话：{{data1.data.wgz.mobile}}
                        </view>
                        <view class="l btn margin-top">
                            <button class="cu-btn text-cyan" @tap="CallPhone" :data-url="data1.data.wgz.mobile">一键拨打</button>
                        </view>
                    </view>
                </view>
            </view>
            <view class="padding-xl radius shadow-warp bg-cyan margin-top">
                <view class="v-header">
                    <view class="pic">
                        <image :src="data1.data.wgy.img" mode=""></image>
                    </view>
                    <view class="pin">
                        
                        <view class="l">
                            网格员：{{data1.data.wgy.name}}
                        </view>
                        <view class="l lz">
                            电话：{{data1.data.wgy.mobile}}
                        </view>
                        <view class="l btn margin-top">
                            <button class="cu-btn text-cyan" @tap="CallPhone" :data-url="data1.data.wgy.mobile">一键拨打</button>
                        </view>
                    </view>
                </view>
            </view>
            
            <view class="bg-white margin-top">
                <view class="cu-form-group">
                    <view class="title">楼长（街长）：</view>
                    <input name="input" disabled="true" v-model="data1.data.lz.name"></input>
                </view>
                <view class="cu-form-group">
                    <view class="title">单元长（组长）：</view>
                    <input name="input" disabled="true" v-model="data1.data.dyz.name"></input>
                </view>
            </view>
        </view>
        <view class="wgy" v-if=flag2>
            网格员
        </view>
        <view class="wgz" v-if="flag3">
            
            
            <scroll-view scroll-x class="bg-cyan nav text-center">
                <view class="cu-item" :class="0==TabCur1?'text-white cur':''" @tap="tabSelect1" data-id="0">
                    <text class="cuIcon-addressbook"></text> 展示数据
                </view>
                <view class="cu-item" :class="1==TabCur1?'text-white cur':''" @tap="tabSelect1" data-id="1">
                    <text class="cuIcon-edit"></text> 编辑数据
                </view>                
            </scroll-view>
            
            
            <view class="cu-bar bg-white solid-bottom">
                <view class="action">
                    <text class="cuIcon-title text-orange"></text> 
                    {{pq.name}}
                </view>
            </view>
            
            <!-- 数据展示 -->
            <view class="zhanshi" v-show="flag_edit">
                <view class="padding-xl radius shadow-warp bg-white margin-top">
                    <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
                        <view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in data3" :key="index" @tap="tabSelect" :data-id="index" :data-item="item.lou_list">
                            {{item.wgy}}
                        </view>
                    </scroll-view>
                </view>
                <view class="padding-xl radius shadow-warp bg-white margin-top text-center" v-for="(item,index) in lou_jie_list" :key="index">{{item}}</view>
            </view>
            
            <!-- 数据编辑 -->
            <view class="bianji" v-show="!flag_edit">
                <view v-show="!wgz_can_edit" class="bj">
                    <view class="padding-xl radius shadow-warp bg-cyan margin-top text-center">在此期间网格长不能编辑数据</view>
                </view>
            </view>
            
                
        </view>

        <!-- 版权信息 -->
        <view class="solid-bottom padding text-center margin-top">
            ©由赤峰市落忆网络科技有限公司提供技术支持
        </view>
        
    </view>
</template>

<script>
import {host,get,post} from '@/commons/post_and_get.js';
    export default {
        data() {
            return {
                //非网格员也非网格长
                flag1:false,
                data1:[],
                flag2:false,
                //网格长
                flag3:false,
                TabCur: 0,
                scrollLeft: 0,
                pq:{},
                data3:[],
                lou_jie_list:[],
                // 切换 数据展示和编辑数据
                TabCur1:0,
                flag_edit:true,
                //网格长是否有权编辑
                wgz_can_edit:false,
                //网格员是否有权编辑
                wgy_can_edit:false
                
            }
        },
        methods: {
            async isLogin(){
                let token=uni.getStorageSync('token');
                if(token){
                    //更新个人数据信息开始
                    let re=await get('/user_operations/upuserinfo/',{'token':token})
                    // console.log(111,re)
                    if(re.status==200){
                        uni.setStorageSync('token' , re.data.token);
                        uni.setStorageSync('info' , re.data.info);
                    }else{
                        uni.removeStorageSync('token');
                        uni.navigateTo({url:'/pages/login/login'})
                    }
                    //更新个人数据信息结束
                    
                    
                    let f=uni.getStorageSync('info')
                    // console.log(f)
                    if(f.power==1||f.power==2||f.power==3){
                        this.flag1=true
                        this.flag2=false
                        this.flag3=false
                    }
                    if(f.power==4){
                        this.flag1=false
                        this.flag2=true
                        this.flag3=false
                    }
                    if(f.power==5){
                        this.flag1=false
                        this.flag2=false
                        this.flag3=true
                    }
                    
                    this.GetCaoZuoData()
                }else{
                    uni.navigateTo({url:'/pages/login/login'})
                }
            },
            
            async GetCaoZuoData(){
                let re=await get('/user_operations/getcaozuo/',{'token':uni.getStorageSync('token')})
                console.log(re)
                if(this.flag1){
                    re.data.wgy.img=host+re.data.wgy.img
                    re.data.wgz.img=host+re.data.wgz.img
                    this.data1=re
                }
                if(this.flag3){
                    this.pq=re.data.pq
                    this.data3=[] 
                    for(var i=0;i<re.data.all_wgy_list.length;i++){
                        let data3_item={'wgy':'','lou_list':[]}
                        for(var j=0;j<re.data.lou_list.length;j++){
                            if(re.data.all_wgy_list[i].id==re.data.lou_list[j].wgy){
                                data3_item['wgy']=re.data.all_wgy_list[i].name
                                data3_item['lou_list'].push(re.data.lou_list[j].name)
                            }
                        }
                        if(data3_item.wgy){
                            this.data3.push(data3_item)
                            this.lou_jie_list=this.data3[0].lou_list
                        }
                    }
                    // console.log(this.data3)
                }    
            },
            // 拨打电话
            CallPhone(e){uni.makePhoneCall({phoneNumber: e.currentTarget.dataset.url});},
            
            //网格长导航1
            tabSelect(e) {
                this.lou_jie_list=e.currentTarget.dataset.item
                this.TabCur = e.currentTarget.dataset.id;
                this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
            },
            //切换展示数据和编辑数据的导航
            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.getOnorOff()
                }
            },
            //获取查看网格员和网格长有没有编辑的权利
            async getOnorOff(){
                let re=await get('/user_operations/editpower/')
                console.log(re)
                this.wgz_can_edit=re.wgz
                this.wgy_can_edit=re.wgy
            }
        },
        onShow() {
            this.isLogin()
             
        }
    }
</script>

<style>
.pic{
    width: 150upx;
    height: 200upx;
}
.pic image{
    width: 100%;
    height: 100%;
}
.pin{
    width: 400upx;
    font-size: 40upx;
}
.l{
    text-align: left;
}
.lz{
    font-size: 35upx;
}
.btn{
    margin-left:200upx ;
}
.v-header{
    display: flex;
    width: 100%;
    justify-content:space-around;
}

</style>

效果图