feat:移植工程

src/views/admin/account/index.vue

@@ -0,0 +1,181 @@
+<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>