tianmucloudmobile/pages/user/list.vue

<template>
  <view class="work-container">
    <view class="header">
      <u-search placeholder="请输入客户名称" :clearabled="true" @clear="searchDept" @custom="searchDept" v-model="search.userName" @search="searchDept"></u-search>
    </view>
    <view style="margin-top: 10px">
      <uni-list :border="true">
        <!-- 显示圆形头像 -->
        <view style="position: relative" v-for="item in userList">

          <uni-list-chat v-if="item.avatar != ''"  :avatar-circle="true" :title="item.nickName" :avatar="item.avatar" :note="item.phonenumber" :time="item.createTime" ></uni-list-chat>
          <uni-list-chat  v-else :avatar-circle="true" :title="item.nickName" avatar="/static/images/device/user.png" :note="item.phonenumber" :time="item.createTime" ></uni-list-chat>

          <view v-if="isCanEdit()" @click="modifyUser(item)" style="position: absolute;right: 120rpx;bottom: 20rpx;font-size: 12px;z-index: 999">修改</view>
          <view v-if="isCanEdit()" @click="delUser(item)" style="position: absolute;right: 40rpx;bottom: 20rpx;font-size: 12px;z-index: 999">删除</view>
          <view  style="position: absolute;right: 270rpx;bottom: 10px;font-size: 12px">
            <u-tag v-if="item.status == 1" text="禁用" plain size="mini" type="warning"></u-tag>
            <u-tag v-if="item.status == 0" text="启用" plain size="mini" type="success"></u-tag>
          </view>
        </view>


      </uni-list>

      <view v-if="isCanEdit()" style="position: absolute;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"
              :rules="rules"
              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>
  </view>
</template>

<script>
import authObj from '@/plugins/auth.js';
import {getDeptList,getUserListByDept,addUser,editUser,resetPwd,deleteUser} 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";
export default {
  components: {UButton, UText},
  data() {
      return {
        statusList:[{  name: '启用',
          disabled: false
        },
          {
            name: '禁用',
            disabled: false
          }],
        statusValue: '启用',
        userList:[],
        search:{
          userName:""
        },
        deptId:0,
        showEdit:false,
        showAdd:false,
        chooseUser:{},
        rules: {
          'chooseUser.nickName': {
            type: 'string',
            required: true,
            message: '请填写姓名',
            trigger: ['blur', 'change']
          },
          'chooseUser.phonenumber': {
            type: 'number',
            len: 11,
            required: true,
            message: '请选择男或女',
            trigger: ['blur', 'change'],
          },
        },
      }
    },
  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){
        this.chooseUser = user;
        this.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=[];
        this.chooseUser.roleIds=[];
        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>