Browse Source

用户列表上来加载,下拉刷新,用户状态改变,用户删除,新增账号,局部刷新

liangtengxiong 4 years ago
parent
commit
60ea1db7ad

+ 77 - 14
src/pages/index/userinfo/adduser.vue

@@ -4,7 +4,7 @@
     <view class="warp">
     <view class="warp">
       <view class="item">
       <view class="item">
         <view class="title">账号</view>
         <view class="title">账号</view>
-        <input class="msg" type="text" v-model="userInfo.account" placeholder="请输入账号" placeholder-style="color:#e8e8e8" />
+        <input class="msg" type="text" v-model="userInfo.account" placeholder="请输入账号(系统会自动加上前缀)" placeholder-style="color:#e8e8e8" />
       </view>
       </view>
       <view class="item">
       <view class="item">
         <view class="title">用户昵称</view>
         <view class="title">用户昵称</view>
@@ -32,17 +32,20 @@
       </view>
       </view>
       <view class="item">
       <view class="item">
         <view class="title">密码</view>
         <view class="title">密码</view>
-        <input class="msg"  v-model="passwordone" type="text" placeholder="请输入密码" placeholder-style="color:#e8e8e8"/>
+        <input class="msg"  v-model="passwordone" type="password" placeholder="请输入密码" placeholder-style="color:#e8e8e8"/>
       </view>
       </view>
       <view class="item">
       <view class="item">
         <view class="title">确认密码</view>
         <view class="title">确认密码</view>
-        <input class="msg" v-model="passwordtwo" type="text" placeholder="再次输入密码" placeholder-style="color:#e8e8e8"/>
+        <input class="msg" v-model="passwordtwo" type="password" placeholder="再次输入密码" placeholder-style="color:#e8e8e8"/>
       </view>
       </view>
       
       
     </view>
     </view>
     <view class="btn">
     <view class="btn">
-      <view class="sure">确认</view>
+      <view class="sure" @tap='submitUserInfo'>确认</view>
     </view>
     </view>
+
+		<rf-loading v-if="loading"></rf-loading>
+
   </view>
   </view>
 </template> 
 </template> 
 
 
@@ -54,23 +57,30 @@ export default {
   data () {
   data () {
     //这里存放数据
     //这里存放数据
     return {
     return {
+      loading: false,
+
       userArray: [{ name: '请选择角色', id: '' }],
       userArray: [{ name: '请选择角色', id: '' }],
       userIndex: 0,
       userIndex: 0,
-      mid: uni.getStorageSync('scenicId'),
       roleList:[],
       roleList:[],
 
 
       // 用户信息
       // 用户信息
+      passwordone: null,
+      passwordtwo: null,
       userInfo: {
       userInfo: {
+        account: '',  // 账号必传
+        name: '',  //昵称必传
+        roleId: '', // 角色id必传
+        phone: '', // 手机号必传
+        password: '', // 密码必传 
+        status: '', // 状态
         id: '',
         id: '',
-        name: '',
-        account: '',
-        password: '',
-        phone: '',
-        roleId: '',
-        status: ''
+        mid: uni.getStorageSync('scenicMessage').id, 
       }
       }
     };
     };
   },
   },
+  onLoad(option) {
+    console.log(option);
+  },
   onShow () {
   onShow () {
     this.getRoleList()
     this.getRoleList()
   },
   },
@@ -78,14 +88,13 @@ export default {
   methods: {
   methods: {
     // 角色选择
     // 角色选择
     bindPickerChange(e) {
     bindPickerChange(e) {
-      console.log(e.detail.value);
       this.userIndex = e.detail.value
       this.userIndex = e.detail.value
       this.userInfo.roleId = this.userArray[this.userIndex].id
       this.userInfo.roleId = this.userArray[this.userIndex].id
     },
     },
     // 角色列表
     // 角色列表
     async getRoleList () {
     async getRoleList () {
       await this.$http.get('/mrole/getList',{
       await this.$http.get('/mrole/getList',{
-        mid:this.mid
+        mid:this.userInfo.mid
       }).then( res=>{
       }).then( res=>{
         if (res.code === 200 && res.msg==='OK') {
         if (res.code === 200 && res.msg==='OK') {
           res.data.forEach(element => {
           res.data.forEach(element => {
@@ -96,8 +105,62 @@ export default {
           });
           });
         }
         }
       })
       })
-    }
+    },
+    // 提交表单
+    submitUserInfo () {
+      this.verify().then( userInfo =>{
+          this.loading = true
+        userInfo.account = uni.getStorageSync('scenicMessage').account + '-' +this.userInfo.account
+        
+        console.log(userInfo);
+        this.$http.post('/user/save',userInfo).then( res=>{
+          console.log(res);
+          if (res.code === 200 && res.msg === 'OK') {
+            this.$mHelper.toast('添加成功')
+            this.loading = false
+            setTimeout(() => {
+              this.$mRouter.back()
+            }, 500);
+          } 
+        })
+        
+      })
+    },
+    // 表单验证规则
+    verify () {
+      return new Promise((resolve,reject) =>{
+        // 验证
+        if ( !this.userInfo.account || !this.userInfo.name || !this.userInfo.roleId || !this.userInfo.phone ) {
+          let obj = this.userInfo
+          let arr = []
+          for (let key in obj) {
+            if (key === 'account' && !this.userInfo.account) {
+              this.$mHelper.toast('请输入账号')
+              return
+            } else if (key === 'name' && !this.userInfo.name) {
+              this.$mHelper.toast('请输入昵称')
+              return
+            } else if (key === 'phone' && !this.userInfo.phone) {
+              this.$mHelper.toast('请输入手机号')
+              return
+            } else if (key === 'roleId' && !this.userInfo.roleId) {
+              this.$mHelper.toast('请选择角色')
+              return
+            }
+          }
+        }
+        if (this.passwordone === this.passwordtwo && this.passwordone && this.passwordtwo) {
+          this.userInfo.password = this.passwordtwo
+        } else {
+          this.passwordone = ''
+          this.passwordtwo = ''
+          this.$mHelper.toast('两次密码不一致,请重新输入')
+          return
+        }
 
 
+        resolve(this.userInfo)
+      })
+    }
   }
   }
 }
 }
 </script>
 </script>

+ 4 - 1
src/pages/index/userinfo/rolemenage.vue

@@ -32,12 +32,15 @@ export default {
     //这里存放数据
     //这里存放数据
     return {
     return {
       roleList:[],
       roleList:[],
-      mid:uni.getStorageSync('scenicId')
+      mid: uni.getStorageSync('scenicMessage').id
     };
     };
   },
   },
   onShow () {
   onShow () {
     this.getRoleList()
     this.getRoleList()
   },
   },
+   onLoad () {
+     t
+   },
   //方法集合
   //方法集合
   methods: {
   methods: {
     // 跳转编辑
     // 跳转编辑

+ 90 - 20
src/pages/index/userinfo/usermenage.vue

@@ -26,7 +26,7 @@
 
 
     </view>
     </view>
     <view style="height: 110upx"></view>
     <view style="height: 110upx"></view>
-    <view class="usermenage">
+    <view class="usermenage" @tap.stop='closeMore(-1)'>
       <view class="content">
       <view class="content">
         <view class="item" v-for="(item,index) in list" :key="index">
         <view class="item" v-for="(item,index) in list" :key="index">
           <view class="top">
           <view class="top">
@@ -47,14 +47,14 @@
           <view class="bottom">
           <view class="bottom">
             <view class="btns">
             <view class="btns">
               <view class="btn more">
               <view class="btn more">
-                <view class="txt" @tap="showMore">更多</view>
-                <view class="bar" v-if="isshow">
+                <view class="txt" @tap.stop="showMore(index)">更多</view>
+                <view class="bar" v-if="index === code">
                   <view class="trigon"></view>
                   <view class="trigon"></view>
-                  <view class="item">冻结</view>
-                  <view class="item">删除</view>
+                  <view class="item" @tap.stop="freeze(item.id,item.name,item.status,index)">{{ item.status === '0' ? '禁用' : '启用' }}</view>
+                  <view class="item" @tap.stop='dele(item.id,item.name,index)'>删除</view>
                 </view>
                 </view>
               </view>
               </view>
-              <view class="btn edit">编辑</view>
+              <view class="btn edit" @tap.stop="add(item.id)">编辑</view>
               <view class="btn change">修改密码</view>
               <view class="btn change">修改密码</view>
               <view class="btn reds">重置密码</view>
               <view class="btn reds">重置密码</view>
             </view>
             </view>
@@ -63,6 +63,7 @@
       </view>
       </view>
 
 
       <uni-load-more :status="more"> </uni-load-more>
       <uni-load-more :status="more"> </uni-load-more>
+		  <rf-loading v-if="loading"></rf-loading>
     </view>
     </view>
   </view>
   </view>
 </template>
 </template>
@@ -76,7 +77,8 @@ export default {
   data () {
   data () {
     //这里存放数据
     //这里存放数据
     return {
     return {
-      isshow: false,
+      loading: false,
+      code: null,
       showcondition: false,
       showcondition: false,
       conditionlist:[
       conditionlist:[
         {name: '全部', code:1},
         {name: '全部', code:1},
@@ -87,16 +89,26 @@ export default {
       index: 0,
       index: 0,
 
 
       more: 'loading',
       more: 'loading',
+
       params:{
       params:{
         pageNum: 1,
         pageNum: 1,
         pageSize: 4,
         pageSize: 4,
-        mid: uni.getStorageSync('scenicId')
+        mid: uni.getStorageSync('scenicMessage').id
       },
       },
 
 
+      downStatus: 1,
+
       list:[]  // 状态 0启用 1禁用
       list:[]  // 状态 0启用 1禁用
     };
     };
   },
   },
   onShow () {
   onShow () {
+    this.code = -1
+    this.more = 'loading'
+    this.params.pageNum = 1
+    uni.pageScrollTo({
+      scrollTop: 0,
+      duration: 0
+    });
     this.getUserList()
     this.getUserList()
   },
   },
   // 下拉刷新
   // 下拉刷新
@@ -107,10 +119,16 @@ export default {
   },
   },
   // 上拉加载
   // 上拉加载
   onReachBottom() {
   onReachBottom() {
-    this.getMoreUserList()
+    if ( this.downStatus === 1) {
+      if (this.more === 'noMore') {
+        return
+      }
+      this.getMoreUserList()
+    }
   },
   },
   //方法集合
   //方法集合
   methods: {
   methods: {
+
     // 打开条件选择
     // 打开条件选择
     showCondition() {
     showCondition() {
       this.showcondition = !this.showcondition
       this.showcondition = !this.showcondition
@@ -120,17 +138,20 @@ export default {
       this.showcondition = false
       this.showcondition = false
     },
     },
     // 打开更多选择
     // 打开更多选择
-    showMore () {
-      this.isshow = !this.isshow
+    showMore (num) {
+      this.code = num 
+    },
+    closeMore (num) {
+      this.code = num 
     },
     },
     // 跳转新增
     // 跳转新增
-    add () {
-      this.$mRouter.push({route:'/pages/index/userinfo/adduser'})
+    add (id) {
+      this.$mRouter.push({route:'/pages/index/userinfo/adduser',query:{id:id}})
     },
     },
     // 账户列表
     // 账户列表
     async getUserList () {
     async getUserList () {
+      this.downStatus = 1
       await this.$http.get('/user/userList',this.params).then(res=>{
       await this.$http.get('/user/userList',this.params).then(res=>{
-        console.log(res);
         if (res.code === 200 && res.msg==='OK') {
         if (res.code === 200 && res.msg==='OK') {
           if (res.data.list.length > 0) {
           if (res.data.list.length > 0) {
             this.list = res.data.list
             this.list = res.data.list
@@ -144,7 +165,6 @@ export default {
         }
         }
       })
       })
     },
     },
-
     // 上拉加载
     // 上拉加载
     async getMoreUserList () {
     async getMoreUserList () {
       this.params.pageNum ++
       this.params.pageNum ++
@@ -158,9 +178,57 @@ export default {
           this.more = 'noMore'
           this.more = 'noMore'
         }
         }
       })
       })
-    }
-
+    },
+    // 删除账号
+    async dele(id,name,index) {
+      let _self = this
+      uni.showModal({
+        content: `将删除用户昵称为${name}的账号,是否继续?`,
+        success: confirmRes => {
+          if (confirmRes.confirm) {
+            _self.loading = true
+            _self.$http.post('/user/delete/'+id).then( res=>{
+              if (res.code === 200 && res.msg==='OK') {
+                if (res.data === 1) {
+                  _self.loading = false
+                  _self.$mHelper.toast('删除成功')
+                  _self.code = -1
+                  _self.list.splice(index,1)
+                }          
+              }
+            })
+          }
+        }
+      })
+    },
 
 
+    // 状态改变
+    freeze(id,name,status,index) {
+      let _self = this
+      uni.showModal({
+        content:`是否${status === '0' ? '禁用' : '启用'}${name}`,
+        success: confirmRes =>{
+          if (confirmRes.confirm) {
+            _self.loading = true
+            let userstatus = status === '0' ? '1' :'0'
+            _self.$http.post('/user/changeState/' + id + '/' + userstatus).then( res=>{
+              if (res.code === 200 && res.msg==='OK') {
+                if (res.data === 1) {
+                  _self.loading = false
+                  _self.$mHelper.toast(`已${status === '0' ? '禁用' : '启用'}用户${name}`)
+                  _self.code = -1
+                  _self.list[index].status = userstatus
+                  // 局部刷新
+                  // _self.setData({  // setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。
+                  //   list: _self.list[index].status = userstatus
+                  // })
+                }
+              }
+            })
+          }
+        }
+      })
+    }
   }
   }
 }
 }
 </script>
 </script>
@@ -173,6 +241,7 @@ export default {
   left: 0;
   left: 0;
   padding: 20upx 32upx;
   padding: 20upx 32upx;
   background-color: #fbfbfb;
   background-color: #fbfbfb;
+  z-index: 11;
   .header {
   .header {
     display: flex;
     display: flex;
   }
   }
@@ -214,7 +283,7 @@ export default {
           padding: 30upx 0;
           padding: 30upx 0;
           text-align: center;
           text-align: center;
           color: #333;
           color: #333;
-         
+        
         } 
         } 
       }
       }
       .txt {
       .txt {
@@ -252,7 +321,7 @@ export default {
   }
   }
 }
 }
 .usermenage {
 .usermenage {
-  padding: 24upx 32upx 0;
+  padding: 24upx 32upx 200upx;
   .content {
   .content {
     background-color: #f1f1f1;
     background-color: #f1f1f1;
     .item {
     .item {
@@ -337,9 +406,10 @@ export default {
                 padding: 17upx 0;
                 padding: 17upx 0;
                 color: #333;
                 color: #333;
                 border-bottom: 1px solid #e0e0e0;
                 border-bottom: 1px solid #e0e0e0;
-                text-align: left;
+                text-align: center;
                 background-color: #fff;
                 background-color: #fff;
                 border-radius: 0;
                 border-radius: 0;
+                margin-bottom: 0;
                 &:last-child {
                 &:last-child {
                   border: none;
                   border: none;
                 }
                 }

+ 4 - 2
src/store/index.js

@@ -12,12 +12,13 @@ const REFRESHTOKEN = uni.getStorageSync('refreshToken') || '';
 
 
 const USER = uni.getStorageSync('user') || {};
 const USER = uni.getStorageSync('user') || {};
 const ROLE = uni.getStorageSync('role')
 const ROLE = uni.getStorageSync('role')
+const sceniceMessage = uni.getStorageSync('scenicMessage') || ''
 
 
 const store = new Vuex.Store({
 const store = new Vuex.Store({
     // 数据存放
     // 数据存放
     state: {
     state: {
         // 景区信息
         // 景区信息
-        scenic: {},
+        scenic: sceniceMessage,
         // 菜单权限
         // 菜单权限
         menuRole:[],
         menuRole:[],
         // 角色拥有的权限
         // 角色拥有的权限
@@ -77,7 +78,8 @@ const store = new Vuex.Store({
         // 保存景区Id
         // 保存景区Id
         setScenic (state,data) {
         setScenic (state,data) {
             state.scenic = data
             state.scenic = data
-            uni.setStorageSync('scenicId',data.id)
+            uni.setStorageSync('scenicMessage',data)
+            // uni.setStorageSync('scenicId',data.id)
         },
         },
         login(state, provider) {
         login(state, provider) {