tianmucloudmobile/pages/user/list.vue

<template>
  <view class="work-container">
    <view class="header" style="padding:0 20rpx">
      <u-search placeholder="请输入用户手机号" :showAction="false" :clearabled="true" @clear="searchDept" @custom="searchDept" v-model="search.userName" @search="searchDept"></u-search>
    </view>
    <view style="margin-top: 20rpx;padding-bottom: 100rpx;">

      <uni-card title="管理员"  extra="额外信息" padding="0" thumbnail="/static/images/user/user.png" v-for="item in userList">
        <template v-slot:cover>
         <view style="position: relative;display: flex;flex-direction: row;margin:20rpx;border-bottom: 1px solid lightgray;height: 60rpx">
            <view style="width: 60rpx;height: 40rpx;position: absolute;top: 2rpx;">
              <u-image :showLoading="true" src="/static/images/user/user.png" width="60rpx" height="40rpx" ></u-image>
            </view>
           <view style="font-size: 24rpx;margin-left:10rpx;position: absolute;top: 8rpx;left: 64rpx;font-weight: bold">
             {{ item.nickName }}
           </view>
           <view style="position: absolute;right:-14rpx;top:-2rpx">
             <u-tag v-if="item.status == 0" text="启用"   type="warning" bgColor="rgb(222,242,228)" color="#48C373" borderColor="rgb(222,242,228)"></u-tag>
             <u-tag v-if="item.status == 1" text="禁用"  bgColor="rgb(239,239,239)" color="rgb(180,180,180)" borderColor="rgb(239,239,239)"  ></u-tag>

           </view>
         </view>
        </template>
        <template v-slot:title>
          <view style="position: relative;display: flex;flex-direction: column;margin:20rpx;height: 200rpx;    line-height: 66rpx;
color: #545454; ">
            <view>

              联系电话：{{ item.phonenumber }}
            </view>
            <view v-if="item.dept!= null">

              所属客户：{{ item.dept.deptName}}
            </view>
            <view>

              创建时间：{{ item.createTime }}
            </view>
          </view>
        </template>
        <template v-slot:actions>
          <view style="position: relative;display: flex;flex-direction: row;margin:20rpx;line-height: 60rpx;
color: #545454; ">
            <view v-if="isCanEdit()" @click="modifyUser(item)" style="display:flex;flex-direction: row;margin-left: 100rpx;">
                <u-image src="/static/images/user/edit.png" width="50rpx" height="50rpx"></u-image>
                <view style="margin-left: 10rpx">修改</view>
            </view>
            <view v-if="isCanEdit()" @click="delUser(item)" style="display:flex;flex-direction: row;margin-left: 180rpx;">
              <u-image src="/static/images/user/del.png" width="50rpx" height="50rpx"></u-image>
              <view style="margin-left: 10rpx"> 删除</view>
            </view>
          </view>
        </template>
      </uni-card>
    </view>
      <view v-if="isCanEdit()" style="position: fixed;bottom: 0px;text-align: center;width: 100%">
        <u-button type="primary" text="新增用户" @click="newUser"></u-button>
      </view>

      <u-modal  :show="showAdd || showEdit" title="编辑用户" @cancel="closeDlg" :showCancelButton="true"  @confirm="doAddUser" >
        <view class="slot-content">
          <u--form
              labelPosition="left"
              :model="model1"
              ref="uForm"
          >
            <u-form-item
                label="昵称："
                prop="chooseUser.nickName"
                borderBottom
                ref="item1"
                labelWidth="auto"
            >
              <u--input
                  v-model="chooseUser.nickName"
                  border="none"
              ></u--input>
            </u-form-item>

            <u-form-item
                label="手机号："
                prop="chooseUser.phonenumber"
                borderBottom
                ref="item1"
                labelWidth="auto"
            >
              <u--input
                  v-model="chooseUser.phonenumber"
                  border="none"
              ></u--input>
            </u-form-item>

            <u-form-item
                label="密码："
                prop="chooseUser.password"
                borderBottom
                ref="item1"
                labelWidth="auto"
            >
              <u--input v-if="showAdd"
                        v-model="chooseUser.password"
                        border="none"
              ></u--input>

             <view style="width:100rpx"  v-if="showEdit">
               <u-button width="100rpx" type="warning" size="mini" @click="resetPwd()" text="重置密码"></u-button>
             </view>
            </u-form-item>

            <u-form-item
                label="登录账号："
                borderBottom
                ref="item1"
                labelWidth="auto"
            >
              <u--input
                  v-model="chooseUser.phonenumber"
                  border="none"
                  disabled
              ></u--input>
            </u-form-item>
            <u-form-item
                label="状态："
                prop="chooseUser.password"
                borderBottom
                ref="item1"
                labelWidth="auto"
            >
              <u-radio-group
                  v-model="statusValue"
                  placement="row"
              >
                <u-radio
                    v-for="(item, index) in statusList"
                    :key="index"
                    :label="item.name"
                    :name="item.name"
                    @change="statusChange"
                >
                </u-radio>
              </u-radio-group>
            </u-form-item>
          </u--form>

        </view>
      </u-modal>

  </view>
</template>

<script>
import authObj from '@/plugins/auth.js';
import {getDeptList,getUserListByDept,addUser,editUser,resetPwd,deleteUser,getUserById} from '@/api/user/user';
import UText from "../../uni_modules/uview-ui/components/u-text/u-text";
import UButton from "../../uni_modules/uview-ui/components/u-button/u-button";
import UImage from "../../uni_modules/uview-ui/components/u--image/u--image";
export default {
  components: {UImage, UButton, UText},
  data() {
      return {
        statusList:[{  name: '启用',
          disabled: false
        },
          {
            name: '禁用',
            disabled: false
          }],
        statusValue: '启用',
        userList:[],
        search:{
          userName:""
        },
        deptId:0,
        showEdit:false,
        showAdd:false,
        chooseUser:{},
      }
    },
  onLoad(opt){
    this.deptId = opt.deptId;
    if(this.deptId == 'undefined'){
      this.deptId = 0;
    }
    this.getUser();
  },
    methods: {
      isCanEdit(){
        return authObj.authRoleAdmin(["companymgr",'admin'])
      },
      delUser(user){
        let self = this;
        uni.showModal({
          title: '提示',
          content: '确认要删除该用户么？',
          success: function (res) {
            if (res.confirm) {
              deleteUser(user.userId).then(res=>{
                self.$modal.showToast("操作成功");
                self.getUser();
              });
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });

      },
      modifyUser(user){
        let self = this;
        getUserById(user.userId).then(res=>{
          self.chooseUser = res.data;
          self.chooseUser.roleIds = res.roleIds;
          self.showEdit = true;
        })

      },
      statusChange(e){
        console.log(e);
      },
      closeDlg(){
        this.showEdit = false;
        this.showAdd = false;
        this.chooseUser = {};
      },
     newUser(){
       this.showAdd = true;
     },
      doAddUser(){
        let self = this;
        this.chooseUser.postIds=[];
        if(this.statusValue == '启用'){
          this.chooseUser.status = 0;
        }else{
          this.chooseUser.status = 1;
        }
        this.chooseUser.userName = this.chooseUser.phonenumber;
        if(this.showAdd){
          addUser(this.chooseUser).then(res=>{
            self.getUser()
            self.closeDlg();
          });
        }
        if(this.showEdit){
          editUser(this.chooseUser).then(res=>{
            self.getUser()
            self.closeDlg();
          });
        }

      },
      resetPwd(){
        this.showEdit = false;
        let self = this;
        let userId = this.chooseUser.userId;
        uni.showModal({
          title: '提示',
          editable:true,
          placeholderText: '请输入新密码',
          success: function (res) {
            if (res.confirm) {
              resetPwd({userId:userId,password:res.content}).then(res=>{
               self.$modal.showToast("操作成功");
             })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });

      },
      searchDept(){
        this.getUser();
      },
      change(item){
        console.log(item)
      },
      getUser(){
        let id = this.deptId;
        getUserListByDept(id,this.search.userName).then(res=>{
          this.userList = res.rows;
          for(const user of this.userList){
          }
        });
      },
    }
  }
</script>

<style lang="scss">
  /* #ifndef APP-NVUE */
  .u-collapse-content{
    display: flex;
    flex-direction: column;
  }
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #fff;
    min-height: 100%;
    height: auto;
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }

  /* #endif */

  .text {
    text-align: center;
    font-size: 26rpx;
    margin-top: 10rpx;
  }

  .grid-item-box {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }

  .uni-margin-wrap {
    width: 690rpx;
    width: 100%;
    ;
  }

  .swiper {
    height: 300rpx;
  }

  .swiper-box {
    height: 150px;
  }

  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 300rpx;
    line-height: 300rpx;
  }

  @media screen and (min-width: 500px) {
    .uni-swiper-dot-box {
      width: 400px;
      /* #ifndef APP-NVUE */
      margin: 0 auto;
      /* #endif */
      margin-top: 8px;
    }

    .image {
      width: 100%;
    }
  }
</style>