disinfector_vue/src/components/setting/User.vue

<script lang="ts" setup>
import { syncSendCmd } from 'apis/system'
import { FtMessage } from 'libs/message'
import { FtMessageBox } from 'libs/messageBox'
import { onMounted, ref } from 'vue'

import { useSettingStore } from '@/stores/settingStore'

import AddUser from './AddUser.vue'
import ModifyPwd from './ModifyPwd.vue'

const settingStore = useSettingStore()
const tableData = ref(settingStore.userList)
const selectedUserList = ref<User.UserItem[]>([])
const userData = localStorage.getItem('user')
const userInfo = userData ? JSON.parse(userData) : {}

onMounted(() => {
  queryUserList()
})
const queryUserList = () => {
  const userParams = {
    className: 'UserMgrService',
    fnName: 'getAllUser',
    params: {},
  }
  syncSendCmd(userParams).then((res) => {
    if (res.ackcode === 0) {
      tableData.value = res.rely
    }
  })
}
const updatePwd = (userItem: User.UserItem) => {
  // 判断登录是否管理员，非管理员不可修改密码
  if (userInfo.roleType !== 'admin' && userInfo.id !== userItem.id) {
    FtMessage.error('无权限修改密码')
    return
  }
  settingStore.updateCurrentEditUser(userItem)
  settingStore.updatePwdVisible(true)
}

const onAddUser = () => {
  settingStore.updateUserModalState('add')
  settingStore.updateVisible(true)
}
const onDelUser = (user: User.UserItem) => {
  // 自己不是管理员，要删除管理账号，不允许
  if (user.id === userInfo.id) {
    FtMessage.warning('自己不可删除自己')
    return
  }
  // 禁止删除超级管理员
  if (user.name === 'admin') {
    FtMessage.warning('不可删除超级管理员用户')
    return
  }
  FtMessageBox.warning('请确认是否删除?').then(() => {
    const delParams = {
      className: 'UserMgrService',
      fnName: 'delUser',
      params: {
        id: user.id,
      },
    }
    syncSendCmd(delParams).then((res) => {
      if (res.ackcode === 0) {
        FtMessage.success('删除成功')
        queryUserList()
      }
    })
  })
}
const handleSelectionChange = (users: User.UserItem[]) => {
  selectedUserList.value = users
}
</script>

<template>
  <div class="user">
    <div class="add-user">
      <bt-button type="primary" button-text="新增用户" @click="onAddUser" />
    </div>
    <div class="user-table">
      <el-table :data="tableData" style="width: 100%" height="100%" @selection-change="handleSelectionChange">
        <el-table-column prop="name" label="用户名" />
        <el-table-column prop="roleType" label="角色">
          <template #default="{ row }">
            <span v-if="row.roleType === 'admin'"> 管理员 </span>
            <span v-else>普通用户</span>
          </template>
        </el-table-column>
        <el-table-column prop="detail" label="操作" width="250" align="center">
          <template #default="scoped">
            <div class="user-opera">
              <el-button class="view-button" @click.stop="updatePwd(scoped.row)">
                修改密码
              </el-button>
              <el-button class="delete-button" @click.stop="onDelUser(scoped.row)">
                删 除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <AddUser @refresh="queryUserList" />
    <ModifyPwd @refresh="queryUserList" />
  </div>
</template>

<style lang="scss" scoped>
.user {
  height: 100%;
  overflow: hidden;
  background: $gradient-color;
  .add-user {
    display: flex;
    align-items: center;
    height: 50px;
  }
  .user-table {
    height: calc(100% - 50px);
  }
}
.user-opera {
  display: flex;
  align-items: center;
}
.view-button,
.delete-button {
  border: none;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  margin-right: 5px;
  transition: all 0.3s;
  font-family: serif;
}

.view-button {
  background-color: #e6f0ff;
  color: #1890ff;
}

.view-button:hover {
  background-color: #1890ff;
  color: white;
}

.delete-button {
  background-color: #ffe6e6;
  color: #ff4d4f;
}

.delete-button:hover {
  background-color: #ff4d4f;
  color: white;
}
</style>