sweet-hut-ui/src/views/admin/account/index.vue

<template>
  <div class="admin-module">
    <div class="button-container">
      <el-button type="primary" @click="addClick">新增账号</el-button>
    </div>

    <el-table
        :data="accountInfo.accountList"
        border stripe
        :header-cell-style="tableHeaderStyle()"
        :cell-style="tableCellStyle()"
        :row-style="tableRowStyle()"
        style="width: 100%"
        class="card-item">
      <el-table-column type="index" align="center" width="50" />
      <el-table-column prop="username" label="用户姓名" align="center" min-width="20%"/>
      <el-table-column prop="accountName" label="账号名称" align="center" min-width="20%"/>
      <el-table-column prop="date" label="创建日期" align="center" min-width="20%"/>
      <el-table-column label="账号状态" align="center" min-width="20%">
        <template #default="scope">
          <el-tag v-if="scope.row.state === 0" type="primary">正常</el-tag>
          <el-tag v-else-if="scope.row.state === 1" type="warning">禁用</el-tag>
          <el-tag v-else-if="scope.row.state === 2" type="danger">注销</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="280">
        <template #default="scope">
          <el-button type="primary" @click="resetClick(scope.row)">重置密码</el-button>
          <el-button type="primary" @click="disableClick(scope.row)">禁用</el-button>
          <el-button type="danger" @click="deleteClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="accountInfo.accountDialog.visible"
               :title="accountInfo.accountDialog.title"
               center width="500" @open="openDialogEvent">
      <el-form ref="formRef" :model="accountInfo.accountDialog.data"
               :rules="rules" label-width="100px">
        <el-form-item label="账号名称" prop="accountName">
          <el-input v-model="accountInfo.accountDialog.data.accountName" autocomplete="off"
                    placeholder="请输入账号名称（登录账号）"
                    :maxlength="10" show-word-limit clearable/>
        </el-form-item>
        <el-form-item label="用户姓名" prop="username">
          <el-input v-model="accountInfo.accountDialog.data.username" autocomplete="off"
                    placeholder="请输入用户姓名"
                    :maxlength="10" show-word-limit clearable/>
        </el-form-item>
        <el-form-item label="账号密码" prop="password">
          <el-input v-model="accountInfo.accountDialog.data.password" autocomplete="off"
                    placeholder="请输入密码" clearable show-password/>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="accountInfo.accountDialog.data.confirmPassword" autocomplete="off"
                    placeholder="请再次输入密码" clearable show-password/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, reactive, ref } from 'vue'
import { commonElMessageBox, tableCellStyle, tableHeaderStyle, tableRowStyle } from 'vue3-common/utils/elUtil'
import { IAccount } from '@/types/auth.ts'
import { ElMessage, FormRules } from 'element-plus'
import type { IDialog, IHandleApi } from 'vue3-common/types'
import { accountRules } from '@/utils/element/elRules.ts'
import { deleteAccountApi, queryAccountApi, registerAccountApi } from '@/apis/account.ts'
const formRef = ref()
const rules = reactive<FormRules>(accountRules)

const accountInfo = reactive({
  accountList: [] as IAccount[],
  setAccountType: 'ADD' as IHandleApi,
  accountDialog: {
    title: '',
    visible: false,
    data: {}
  } as IDialog<IAccount>
})

onMounted(async () => {
  accountInfo.accountList = await queryAccountApi()
})

const addClick = () => {
  accountInfo.setAccountType = 'ADD'
  accountInfo.accountDialog = {
    title: '新增账号',
    visible: true,
    data: {
      accountName: '',
      password: '',
      confirmPassword: '',
      username: ''
    }
  }
}

/**
 * 点击编辑按钮
 * @param account 账户
 */
const resetClick = async (account: IAccount) => {

}

const disableClick = (account: IAccount) => {
  ElMessage.info('该功能暂未开发')
}

/**
 * 点击删除按钮
 * @param account 账户
 */
const deleteClick = (account: IAccount) => {
  commonElMessageBox(`请确认删除该账号：${account.accountName} ?`).then(() => {
    accountInfo.setAccountType = 'DELETE'
    setAccountApi(account.id)
  })
}

const openDialogEvent = () => {
  nextTick(() => {
    formRef.value.clearValidate()
  })
}

const setAccountApi = async (id?: number) => {
  switch (accountInfo.setAccountType) {
    case 'ADD':
      if (checkPassword()) {
        await registerAccountApi(accountInfo.accountDialog.data)
        ElMessage.success('新增账号成功')
      }
      break
    case 'DELETE':
      await deleteAccountApi(id)
      ElMessage.success('删除账号成功')
      break
    default:
      break
  }
  accountInfo.accountList = await queryAccountApi()
  accountInfo.accountDialog.visible = false
}

const checkPassword = () => {
  const { password, confirmPassword } = accountInfo.accountDialog.data
  if (password !== confirmPassword) {
    ElMessage.error('请确认两次密码是否一致')
    return false
  }

  return true
}

const cancelClick = () => {
  accountInfo.accountDialog.visible = false
}

const confirmClick = async () => {
  await formRef.value.validate(async (valid) => {
    if (valid) {
      if (accountInfo.setAccountType === 'ADD') {
        if (checkPassword()) {
          await setAccountApi(accountInfo.accountDialog.data.id)
        }
      }
    }
  })
}
</script>