huasan-manage/src/views/account-management/index.vue

<template>
  <div>
    <el-card class="content">
      <!-- 标题区域 -->
      <el-row class="card_title">账号管理</el-row>

      <!-- 筛选区域 -->
      <el-row :gutter="35" class="card_search">
        <el-col :span="5">
          账号:
          <el-input
            style="width: 180px"
            placeholder="请输入账号"
            clearable
            v-model="searchAccount"
          ></el-input>
        </el-col>

        <el-col :span="5">
          姓名:
          <el-input
            style="width: 180px"
            placeholder="请输入姓名"
            clearable
            v-model="searchName"
          ></el-input>
        </el-col>

        <el-col :span="5">
          创建时间:
          <el-date-picker
            type="date"
            placeholder="请选择创建时间"
            value-format="YYYY-MM-DD"
            v-model="searchTime"
          />
        </el-col>

        <el-col :span="4">
          <el-button type="primary" @click="getData">
            <el-icon><Search /></el-icon>
            <span> 查询</span>
          </el-button>
        </el-col>
      </el-row>

      <!-- 新增账号按钮区域 -->
      <el-row class="card_button">
        <el-button type="primary" @click="handleAdd">
          <el-icon><Plus /></el-icon>
          <span> 新增账号</span>
        </el-button>
      </el-row>

      <!-- 表格区域 -->
      <el-table
        stripe
        height="481"
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#F0F3F7' }"
      >
        <el-table-column type="index" width="55" align="center" label="序号" />
        <el-table-column
          width="200"
          align="center"
          prop="userName"
          label="账号"
        />
        <el-table-column
          width="200"
          align="center"
          show-overflow-tooltip
          prop="name"
          label="姓名"
        />
        <el-table-column show-overflow-tooltip align="center" label="角色">
          <template #default="{ row }">
            {{ row.adminType == 1 ? '超级管理员' : '管理员' }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="time" label="创建时间" />
        <el-table-column width="200" align="center" label="操作">
          <template #default="{ row }">
            <el-button type="success" plain @click="handleEdit(row)"
              >编辑
            </el-button>
            <el-button
              v-if="row.adminType == 2"
              type="danger"
              plain
              @click="handleDelete(row.id)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器区域 -->
      <el-row class="card_pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[8, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>

    <!-- 编辑弹窗区域 -->
    <el-dialog
      v-model="dialogVisible"
      title="编辑账号"
      width="25%"
      top="20vh"
      :close-on-click-modal="false"
    >
      <div class="dialog_box">
        <div class="dialog_item">
          <span>账号:</span>
          <el-input
            style="width: 180px"
            placeholder="请输入账号"
            clearable
            v-model="editInfo.userName"
          ></el-input>
        </div>
        <div class="dialog_item">
          <span>姓名:</span>
          <el-input
            style="width: 180px"
            placeholder="请输入姓名"
            clearable
            v-model="editInfo.name"
          ></el-input>
        </div>
        <div class="dialog_item">
          <span>密码:</span>
          <el-input
            type="password"
            :show-password="true"
            style="width: 180px"
            placeholder="请输入密码"
            clearable
            v-model="editInfo.newPassword"
          ></el-input>
        </div>
        <div class="dialog_item">
          <span>确认密码:</span>
          <el-input
            type="password"
            :show-password="true"
            style="width: 180px"
            placeholder="请再次输入新密码"
            clearable
            v-model="editInfo.newPassword2"
          ></el-input>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleEditConfirm">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 新增账号弹窗区域 -->
    <el-dialog
      v-model="dialogVisibleAdd"
      title="新增账号"
      width="25%"
      top="20vh"
      :close-on-click-modal="false"
    >
      <div class="dialog_box">
        <div class="dialog_item">
          <span>账号:</span>
          <el-input
            style="width: 180px"
            placeholder="请输入账号"
            clearable
            v-model="addInfo.userName"
          ></el-input>
        </div>
        <div class="dialog_item">
          <span>姓名:</span>
          <el-input
            style="width: 180px"
            placeholder="请输入姓名"
            clearable
            v-model="addInfo.name"
          ></el-input>
        </div>
        <div class="dialog_item">
          <span>密码:</span>
          <el-input
            type="password"
            :show-password="true"
            style="width: 180px"
            placeholder="请输入密码"
            clearable
            v-model="addInfo.newPassword"
          ></el-input>
        </div>
        <div class="dialog_item">
          <span>确认密码:</span>
          <el-input
            type="password"
            :show-password="true"
            style="width: 180px"
            placeholder="请再次输入新密码"
            clearable
            v-model="addInfo.newPassword2"
          ></el-input>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisibleAdd = false">取消</el-button>
          <el-button type="primary" @click="handleEditConfirmAdd">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getUserList,
  editUserList,
  addUserList,
  deleteUserList
} from '@/api/user'
import { RSAencrypt } from '@/utils/jsencrypt'

onMounted(() => {
  getData()
})

// 获取账号管理列表
const getData = async () => {
  const res = await getUserList({
    userName: searchAccount.value,
    name: searchName.value,
    time: searchTime.value,
    currPage: currentPage.value,
    pageSize: pageSize.value
  })
  // console.log(res)
  tableData.value = res.list
  total.value = res.totalCount
  currentPage.value = res.currPage
}

// 筛选区域数据
const searchAccount = ref('')
const searchName = ref('')
const searchTime = ref('')
// 账号管理列表数据
const tableData = ref([])
// 编辑弹窗数据
const editInfo = ref({
  userName: '',
  name: '',
  newPassword: '',
  newPassword2: ''
})
// 新增账号弹窗数据
const addInfo = ref({
  userName: '',
  name: '',
  newPassword: '',
  newPassword2: ''
})
// 总条数
const total = ref(0)
// 当前页
const currentPage = ref(1)
// 每页多少条
const pageSize = ref(8)
// 编辑弹窗显示隐藏控制
const dialogVisible = ref(false)
// 新增账号弹窗显示隐藏控制
const dialogVisibleAdd = ref(false)

// 删除按钮回调
const handleDelete = (id) => {
  ElMessageBox.confirm('确定删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res = await deleteUserList({
        ids: [id]
      })
      // console.log(res)
      if (res == null) {
        ElMessage.success('删除成功')
        getData()
      }
    })
    .catch(() => {
      ElMessage.info('已取消')
    })
}

// 新增按钮回调
const handleAdd = () => {
  dialogVisibleAdd.value = true
  addInfo.value = {
    userName: '',
    name: '',
    newPassword: '',
    newPassword2: ''
  }
}

// 每页条数改变时的回调
const handleSizeChange = (val) => {
  pageSize.value = val
}
// 当前页改变时的回调
const handleCurrentChange = (val) => {
  currentPage.value = val
}

// 编辑按钮回调
const handleEdit = (row) => {
  dialogVisible.value = true
  editInfo.value = Object.assign(editInfo.value, row)
}

// 编辑弹窗确定按钮回调
const handleEditConfirm = async () => {
  if (editInfo.value.newPassword === '') {
    ElMessage.error('请输入密码')
    return
  }
  if (editInfo.value.newPassword2 === '') {
    ElMessage.error('请输入确认新密码')
    return
  }
  if (editInfo.value.newPassword !== editInfo.value.newPassword2) {
    ElMessage.error('两次输入的密码不一致')
    return
  }
  const res = await editUserList({
    id: editInfo.value.id,
    userName: editInfo.value.userName,
    name: editInfo.value.name,
    password: RSAencrypt(editInfo.value.newPassword)
  })
  // console.log(res)
  if (res == null) {
    dialogVisible.value = false
    editInfo.value.newPassword = ''
    editInfo.value.newPassword2 = ''
    ElMessage.success('编辑账号成功')
    getData()
  }
}

// 新增账号弹窗确定按钮回调
const handleEditConfirmAdd = async () => {
  if (addInfo.value.userName === '') {
    ElMessage.error('请输入账号')
    return
  }
  if (addInfo.value.name === '') {
    ElMessage.error('请输入姓名')
    return
  }
  if (addInfo.value.newPassword === '') {
    ElMessage.error('请输入密码')
    return
  }
  if (addInfo.value.newPassword2 === '') {
    ElMessage.error('请输入确认新密码')
    return
  }
  if (addInfo.value.newPassword !== addInfo.value.newPassword2) {
    ElMessage.error('两次输入的密码不一致')
    return
  }
  const res = await addUserList({
    userName: addInfo.value.userName,
    name: addInfo.value.name,
    password: RSAencrypt(addInfo.value.newPassword)
  })
  // console.log(res)
  if (res == null) {
    ElMessage.success('添加成功')
    dialogVisibleAdd.value = false
    getData()
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 1650px;
  height: 782px;

  ::v-deep .el-card__body {
    padding: 0 27px;
  }

  .card_title {
    line-height: 58px;
    font-size: 17px;
    font-weight: bold;
    border-bottom: 2px solid #d9d9d9;
  }
  .card_search {
    line-height: 85px;
    font-size: 13px;
    font-weight: bold;
  }
  .card_button {
    height: 53px;
  }

  .card_pagination {
    float: right;
    line-height: 96px;
  }
}

.dialog_box {
  height: 150px;
  .dialog_item {
    height: 30px;
    margin-bottom: 20px;
    span {
      display: inline-block;
      width: 70px;
    }
  }
}

::v-deep .el-button--primary {
  background-color: #0061ff;
}

::v-deep .el-dialog__header {
  margin: 0;
  font-weight: bold;
  background-color: #edf1f5;
}

::v-deep
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped.el-table__row--striped.el-table__row--striped
  td {
  background-color: #f0f3f7;
}
</style>