hongze_fsms_web/src/views/systemManagement/userM.vue

<script setup>
import { Search } from '@element-plus/icons-vue'
import {ElMessage,ElMessageBox} from "element-plus"
import {getuserList,getDepartmentList,getRoleList,addUserApi,editUserApi,
  editUserStatus,resetUserPsd,deleteUserApi} from '@/api/systemMana'
import { useRouter } from 'vue-router';
import md5 from 'js-md5'

const router=useRouter()
const userStatus=[{value:1,label:'启用'},{value:0,label:'禁用'}]

  const submitFormEl = ref()
  const resetPsdFormEl = ref()
  const user=reactive({
    searchParams:{
      key_word:'',
      dept_id:'',
      enabled:'',
      page_size:10,
      current:1,
    },
    tableData:[],
    departmanentData:[],
    roleData:[],
    total:0,
    dialogTitle:'',//弹窗标题
    // 添加编辑弹窗
    submitForm:{
      admin_name:'',
      password:'123456a',
      real_name:'',
      position:'',
      dept_id:'',
      role_id:'',
      mobile:'',
      enabled:1,
      remark:''
    },
    rules:{
      admin_name:{required:true,message:"登录账号不能为空",trigger:"blur"},
      password:{required:true,message:"登录密码不能为空",trigger:"blur"},
      real_name:{required:true,message:"姓名不能为空",trigger:"blur"},
      dept_id:{required:true,message:"所属部门不能为空",trigger:"change"},
      role_id:{required:true,message:"角色不能为空",trigger:"change"},
      mobile:[
        {required:true,message:"手机号不能为空",trigger:"blur"},
        {asyncValidator: (rule, value) => {
          return new Promise((resolve, reject) => {
            if (value.length !=11) {
              reject('手机号码必须是11位数字'); 
            } else {
              resolve();
            }
          });
        },
        trigger:"blur"}
      ],
      enabled:{required:true,message:"状态不能为空",trigger:"change"}
    },
    showAddDia:false,
    isEdit:false,
    // 重置密码弹窗
    resetPsdForm:{
      admin_id:'',
      pwd:'',
      confirm_pwd:''
    },
    resetPsdRules:{
      pwd:{required:true,message:"新密码不能为空",trigger:"blur"},
      confirm_pwd:{required:true,message:"确认新密码不能为空",trigger:"blur"}
    },
    showResetDia:false,
  })

  // 获取用户列表
  const userList=()=>{
    getuserList(user.searchParams).then(res=>{
      if(res.code == 200){
        user.tableData = res.data.list || []
        user.total = res.data.page.total
      }
    })
  }
  // 获取部门列表
  const departmentList=()=>{
    getDepartmentList().then(res=>{
      user.departmanentData = res.data.list || []
    })
  }

  // 获取角色列表
  const roleList=()=>{
    getRoleList().then(res=>{
      if(res.code == 200){
        user.roleData = res.data.list || []
      }
    })
  }
  // 刷新列表
  const refreshList=()=>{
    user.searchParams.key_word=''
    user.searchParams.dept_id=''
    user.searchParams.enabled=''
    user.searchParams.current=1
    userList()
  }
  // 去添加部门
  const goAddDepartment=()=>{
    sessionStorage.setItem('deptOpenDialog','1')
    router.push('/system/department')
  }
  //切换页码
  const changePageNo = (pageNo)=>{
    user.searchParams.current = pageNo
    userList()
  }
  // 切换每页的数量
  const changePageSize=(pageSize)=>{
    user.searchParams.page_size = pageSize
    userList()
  }
  // 搜索用户
  const userSearch=(type)=>{
    if(type=='deptReset'){
      user.searchParams.dept_id=''
    }
    user.searchParams.current = 1
    userList()
  }
  //点击部门树，筛选用户
  const userSearchByDept=(item)=>{
    user.searchParams.dept_id=item.dept_id
    userSearch()
  }
  // 添加用户
  const addUser=()=>{
    user.dialogTitle='添加用户'

    user.showAddDia=true
    user.isEdit = false
  }
  // 编辑用户
  const editUser=(row)=>{
    user.dialogTitle='编辑用户'
    user.submitForm.admin_id=row.admin_id
    user.submitForm.admin_name=row.admin_name
    user.submitForm.real_name=row.real_name
    user.submitForm.position=row.position
    user.submitForm.dept_id=row.dept_id
    user.submitForm.role_id=row.role_id
    user.submitForm.mobile=row.mobile
    user.submitForm.enabled=row.enabled
    user.submitForm.remark=row.remark
    user.showAddDia=true
    user.isEdit = true
  }
  // 更改用户状态
  const changeUserStatus=(row)=>{
    let changeStatus = row.enabled==1?0:1
    editUserStatus({admin_id:row.admin_id,enabled:changeStatus}).then((res) => {
      if(res.code==200){
        row.enabled=changeStatus
        ElMessage.success(`${row.enabled==1?'启用':'禁用'}成功`)
      }
    })
  }
  // 重置密码
  const resetPassword=(row)=>{
    user.dialogTitle='重置密码'
    user.showResetDia=true
    user.resetPsdForm.admin_id=row.admin_id
  }
  // 删除用户
  const deleteUser=(row)=>{
    ElMessageBox.confirm("删除后不可恢复，确认删除该用户吗？",'提示',{
      cancelButtonText:'取消',
      confirmButtonText:'确定',
      type: 'warning'
    }).then(res=>{
      deleteUserApi({admin_id:row.admin_id}).then(res=>{
        if(res.code==200){
          ElMessage.success('删除用户成功')
          refreshList()
        }
      })
    }).catch(()=>{})
  }
  // 提交
  const submit=(type)=>{
    if(type=='add'){
      submitFormEl.value.validate((valid)=>{
        if(valid){
          if(Array.isArray(user.submitForm.dept_id)){
            user.submitForm.dept_id=user.submitForm.dept_id[(user.submitForm.dept_id.length-1)]
          }
          if(user.submitForm.admin_id){
            //编辑
            editUserApi(user.submitForm).then(res=>{
              if(res.code==200){
                ElMessage.success(`${user.dialogTitle}成功`)
                user.showAddDia=false
                refreshList()
              }
            })
          }else{
            // 添加
            let params={...user.submitForm,password:md5(user.submitForm.password)}
            addUserApi(params).then(res=>{
              if(res.code==200){
                ElMessage.success(`${user.dialogTitle}成功`)
                user.showAddDia=false
                refreshList()
              }
            })
          }
        }
      })
    }else{
      // reset
      resetPsdFormEl.value.validate((valid)=>{
        if(valid){
          if(user.resetPsdForm.pwd != user.resetPsdForm.confirm_pwd){
            ElMessage.warning('新密码两次输入不一致，请核对！')
            return
          }
          let newPassword = md5(user.resetPsdForm.pwd)
          let params={
            admin_id:user.resetPsdForm.admin_id,
            pwd:newPassword,
            confirm_pwd:newPassword
          }
          resetUserPsd(params).then(res=>{
            if(res.code==200){
              ElMessage.success(`${user.dialogTitle}成功`)
              user.showResetDia=false
            }
          })
        }
      })
    }
  }
  // 重置表单、清除错误信息
  const closeDia=(type)=>{
    if(type=='add'){
      // 添加编辑
      user.submitForm={
        admin_name:'',
        password:'123456a',
        real_name:'',
        position:'',
        dept_id:'',
        role_id:'',
        mobile:'',
        enabled:1,
        remark:''
      }
      setTimeout(()=>{
        // 清除错误信息
        submitFormEl.value.clearValidate()
      },0)
    }else{
      // 重设密码
      user.resetPsdForm={
        pwd:'',
        confirm_pwd:''
      }
      setTimeout(()=>{
        // 清除错误信息
        resetPsdFormEl.value.clearValidate()
      },0)
    }
  }
  // 自定义类名
  const customNodeClass =(data)=>{
    if(data.dept_id==user.searchParams.dept_id){
      return 'is-selectNode'
    }else{
      return ''
    }
  }
  
  //  ---------------------created
  // 用户列表
  userList()
  // 角色列表
  roleList()
  // 部门列表
  departmentList()
</script>

<template>
    <div class="system-user-container">
      <div class="user-container-left">
        <!-- 部门列表 -->
        <div class="department-container">
          <div class="department-title" @click="userSearch('deptReset')">
            <img src="@/assets/img/icon/institution.png" style="margin-right: 6px;">
            <span :style="{'color':user.searchParams.dept_id==''?'var(--themeColor)':'#333333'}">弘则研究</span>
          </div>
          <el-scrollbar class="department-contentTree" id="department-contentTree" height="calc(100vh - 248px)">
            <el-tree :data="user.departmanentData" :props="{label:'dept_name',children:'Children',class: customNodeClass}"
            node-key="dept_id" default-expand-all	:expand-on-click-node="false" @node-click="userSearchByDept">
            </el-tree>
          </el-scrollbar>
          <div class="user-add-department" @click="goAddDepartment" v-permission="'system:user:addDept'">
            <el-icon size="20px" color="var(--themeColor)" style="cursor: pointer;"><CirclePlus /></el-icon>
            <span>添加部门</span> 
          </div>
        </div>
      </div>
      <div class="user-container-right">
        <div class="user-container-right-header">
          <!-- 顶部按钮区域 -->
          <div class="user-container-header-buttons">
            <el-button type="primary" @click="addUser" class="header-optios-buttons"  v-permission="'system:user:add'">添加用户</el-button>
          </div>
          <!-- 搜索区域 -->
          <div class="user-container-header-search">
            <el-input v-model="user.searchParams.key_word" placeholder="姓名/账号/手机号" :prefix-icon="Search" 
            style="width: 440px;margin-right: 30px;" @input="userSearch"/>
            <el-select v-model="user.searchParams.enabled" placeholder="用户状态" 
            clearable @change="userSearch" style="width: 286px">
              <el-option :label="item.label" :value="item.value" v-for="item in userStatus"></el-option>
            </el-select>
          </div>
        </div>
        <div class="user-container-right-table">
          <!-- 表格 -->
          <el-table :data="user.tableData" border max-height="690px" style="border-radius: 8px;position: sticky;"> 
            <el-table-column label="姓名" show-overflow-tooltip prop="real_name"></el-table-column>
            <el-table-column label="手机号" show-overflow-tooltip prop="mobile"></el-table-column>
            <el-table-column label="角色" show-overflow-tooltip prop="role_name"></el-table-column>
            <el-table-column label="部门/子部门" show-overflow-tooltip prop="dept_full_name"></el-table-column>
            <el-table-column label="状态" show-overflow-tooltip prop="enabled">
              <template #default="scope">
                <span style="color: #C54322;" v-if="scope.row.enabled==0">禁用</span>
                <span v-else>启用</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <div class="table-options">
                  <span class="table-option-buttons" @click="editUser(scope.row)" v-permission="'system:user:edit'">
                    编辑
                  </span>
                  <span class="table-option-buttons" @click="resetPassword(scope.row)" v-permission="'system:user:resetPsd'">
                    重置密码
                  </span>
                  <span class="table-option-buttons" @click="changeUserStatus(scope.row)" v-permission="'system:user:changeStatus'">
                    {{scope.row.enabled==1?'禁用':'启用'}}
                  </span>
                  <span class="table-option-buttons" style="color:#C54322;" @click="deleteUser(scope.row)" v-permission="'system:user:delete'">
                    删除
                  </span>
                </div>
              </template>
            </el-table-column>
            <template #empty>
              <div class="table-no-data">
                <img src="@/assets/img/icon/empty-data.png" />
                <span>暂无数据</span>
              </div>
            </template>
          </el-table>
          <m-page :pageSize="user.searchParams.page_size" :page_no="user.searchParams.current" 
          style="margin-top: 20px;"
          :total="user.total" @handleCurrentChange="changePageNo" @handleSizeChange="changePageSize" />
        </div>
      </div>
      <!-- 添加/编辑弹窗 -->
      <el-dialog :title="user.dialogTitle" 
        v-model="user.showAddDia" 
        width="500px" 
        :close-on-click-modal="false" @closed="closeDia('add')">
          <el-form :model="user.submitForm" label-position="right" 
          label-width="88px" :rules="user.rules" ref="submitFormEl" style="padding-left: 45px;">
            <el-form-item label="登录账号" prop="admin_name">
              <el-input type="text" placeholder="请输入登录账号" v-model="user.submitForm.admin_name" class="inner-dia-input"/>
            </el-form-item>
            <el-form-item label="登录密码" v-if="!user.isEdit" prop="password">
              <el-input type="text" placeholder="请输入登录密码" v-model="user.submitForm.password"  class="inner-dia-input"/>
            </el-form-item>
            <el-form-item label="姓名" prop="real_name" >
              <template #label="scope">
                <div class="label-custom-equally">
                  {{scope.label}}
                </div>
              </template>
              <el-input type="text" placeholder="请输入用户姓名" v-model="user.submitForm.real_name" class="inner-dia-input"/>
            </el-form-item>
            <el-form-item label="职务" prop="position">
              <template #label="scope">
                <div class="label-custom-equally">
                  {{scope.label}}
                </div>
              </template>
              <el-input type="text" placeholder="请输入职务" v-model="user.submitForm.position" class="inner-dia-input"/>
            </el-form-item>
            <el-form-item label="所属部门" prop="dept_id" >
              <el-cascader :options="user.departmanentData" v-model="user.submitForm.dept_id" style="width:286px"
              :props="{value:'dept_id',label:'dept_name',children:'Children',checkStrictly: true}" 
              ></el-cascader>
            </el-form-item>
            <el-form-item label="角色" prop="role_id">
              <template #label="scope">
                <div class="label-custom-equally">
                  {{scope.label}}
                </div>
              </template>
              <el-select v-model="user.submitForm.role_id" placeholder="请选择角色" class="inner-dia-input">
                <el-option :label="item.role_name" :value="item.role_id" v-for="item in user.roleData"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号码" prop="mobile">
              <el-input type="text" placeholder="请输入手机号码" v-model="user.submitForm.mobile" class="inner-dia-input"/>
            </el-form-item>
            <el-form-item label="状态" prop="enabled" >
              <template #label="scope">
                <div class="label-custom-equally">
                  {{scope.label}}
                </div>
              </template>
              <el-radio-group v-model="user.submitForm.enabled">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <template #label="scope">
                <div class="label-custom-equally">
                  {{scope.label}}
                </div>
              </template>
              <el-input type="text" placeholder="请输入备注" v-model="user.submitForm.remark" class="inner-dia-input"/>
            </el-form-item>
          </el-form>
          <template #footer>
            <el-button @click="user.showAddDia=false">取消</el-button>
            <el-button @click="submit('add')" type="primary">保存</el-button>
          </template>
      </el-dialog>
      <!-- 重置密码弹窗 -->
      <el-dialog :title="user.dialogTitle" 
        v-model="user.showResetDia" 
        width="500px" @closed="closeDia('reset')"
        :close-on-click-modal="false">
          <el-form :model="user.resetPsdForm" label-position="right" 
          label-width="108px" :rules="user.resetPsdRules" ref="resetPsdFormEl">
            <el-form-item label="新密码" prop="pwd">
              <el-input type="password" placeholder="输入长度不超过20个字符" v-model="user.resetPsdForm.pwd"
              maxlength="20" show-password/>
            </el-form-item>
            <el-form-item label="确认新密码" prop="confirm_pwd">
              <el-input type="password" placeholder="输入长度不超过20个字符" v-model="user.resetPsdForm.confirm_pwd"
              maxlength="20" show-password/>
            </el-form-item>
          </el-form>
          <template #footer>
            <el-button @click="user.showResetDia=false">取消</el-button>
            <el-button @click="submit('resetPsd')" type="primary">保存</el-button>
          </template>
      </el-dialog>
    </div>
</template>
  
<style lang="scss" scoped>
  .system-user-container{
    min-height: 100%;
    display: flex;
    .user-container-left{
      padding:20px;
      min-width: 260px;
      background-color: white;
      border-radius: 8px;
      box-sizing: border-box;
      .department-container{
        .department-title{
          margin-bottom: 16px;
          display: flex;
          align-items: center;
          cursor: pointer;
          span{
            font-size: 14px;
          }
        }
        .user-add-department{
          display:flex;
          align-items:center;
          justify-content: center;
          margin-top: 30px;
          span{
            cursor:pointer;
            margin-left: 6px;
            color: $themeColor;
            font-size: 14px;
          }
        }
      }
    }
    .user-container-right{
      margin: 0 30px;
      flex-grow: 1;
      overflow: hidden;
      .user-container-right-header{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .user-container-header-search{
          display: flex;
          align-items: center;
          flex-wrap: wrap;
        }
      }
      .user-container-right-table{
        margin-top: 30px;
      }
    }
    .inner-dia-input{
      width: 286px;
    }
  }
</style>
<style lang="scss">
#department-contentTree{
  .el-tree{
    .el-tree-node__expand-icon.is-leaf{
      background-image: none;
    }
    .is-selectNode{
      &>.el-tree-node__content{
        .el-tree-node__label{
          color: $themeColor;
        }
      }
    }
  }

}

</style>