feat(jnh): 完善账号管理页面功能

- 添加账号状态显示样式和清除筛选功能
- 为文件上传添加认证头信息
- 增加删除和状态变更确认对话框
- 修复环境变量配置错误
This commit is contained in:
34701892@qq.com 2025-12-15 09:25:18 +08:00
parent 849aa507f8
commit 4092c49a61
3 changed files with 68 additions and 21 deletions

View File

@ -2,10 +2,10 @@
ENV = development ENV = development
# 本地环境接口地址 # 本地环境接口地址
# VITE_API_URL = http://4155gf93ll13.vicp.fun/admin VITE_API_URL = http://4155gf93ll13.vicp.fun/admin
# VITE_API_URL = http://localhost:13579/admin # VITE_API_URL = http://localhost:13579/admin
# VITE_API_URL = https://cankao.cs.com.cn/admin # VITE_API_URL = https://cankao.cs.com.cn/admin
VITE_API_URL = http://123.60.153.169:8040/admin # VITE_API_URL = http://123.60.153.169:8040/admin
# VITE_API_URL = /api # VITE_API_URL = /api

View File

@ -6,7 +6,14 @@
<text v-if="errorMsg" style="color: red">{{ errorMsg }}</text> <text v-if="errorMsg" style="color: red">{{ errorMsg }}</text>
<!-- :http-request="uploadAction" --> <!-- :http-request="uploadAction" -->
<!-- :action="baseUrl + '/jnh/accounts/import'" --> <!-- :action="baseUrl + '/jnh/accounts/import'" -->
<el-upload class="upload" drag :action="baseUrl + '/jnh/accounts/import'" accept=".xlsx,.xls" :on-success="handleSuccess"> <el-upload
class="upload"
drag
:action="baseUrl + '/jnh/accounts/import'"
accept=".xlsx,.xls"
:headers="uploadHeader"
:on-success="handleSuccess"
>
<div class="upload_text">点击或拖拽文件至此处导入</div> <div class="upload_text">点击或拖拽文件至此处导入</div>
<div class="upload_tips">支持格式.xlsx/.xls文件大小10MB</div> <div class="upload_tips">支持格式.xlsx/.xls文件大小10MB</div>
</el-upload> </el-upload>
@ -26,6 +33,7 @@ import { onMounted, reactive, ref } from 'vue';
import { NextLoading } from '/@/utils/loading'; import { NextLoading } from '/@/utils/loading';
import { ElMessage, ElMessageBox } from 'element-plus'; import { ElMessage, ElMessageBox } from 'element-plus';
import { getUploadUrl } from '/@/api/jnh'; import { getUploadUrl } from '/@/api/jnh';
import { Session } from '/@/utils/storage';
const baseUrl = ref(import.meta.env.VITE_API_UR); const baseUrl = ref(import.meta.env.VITE_API_UR);
const emit = defineEmits(['close']); const emit = defineEmits(['close']);
@ -37,6 +45,10 @@ const rules = reactive({
const form = ref({}); const form = ref({});
const dialogTableVisible = ref(false); const dialogTableVisible = ref(false);
const uploadHeader = ref({
'auth-token': `${Session.get('token')}`,
});
function open(data) { function open(data) {
dialogTableVisible.value = true; dialogTableVisible.value = true;
if (data) { if (data) {
@ -60,6 +72,7 @@ function handleSuccess(res) {
// //
onMounted(() => { onMounted(() => {
NextLoading.done(); NextLoading.done();
baseUrl.value = import.meta.env.VITE_API_URL;
}); });
defineExpose({ defineExpose({

View File

@ -24,7 +24,7 @@
</el-form-item> </el-form-item>
<el-form-item label="账号状态" prop="status"> <el-form-item label="账号状态" prop="status">
<el-select v-model="form.status" placeholder="请选择" class="input" style="width: 150px" @change="getData"> <el-select v-model="form.status" placeholder="请选择" class="input" style="width: 150px" @change="getData" clearable @clear="getData">
<el-option label="禁用" :value="0" /> <el-option label="禁用" :value="0" />
<el-option label="启用" :value="1" /> <el-option label="启用" :value="1" />
</el-select> </el-select>
@ -37,7 +37,20 @@
<el-table-column prop="mobile" label="手机号" align="center" /> <el-table-column prop="mobile" label="手机号" align="center" />
<el-table-column prop="createTime" label="创建时间" align="center" /> <el-table-column prop="createTime" label="创建时间" align="center" />
<el-table-column prop="updateTime" label="更新时间" align="center" /> <el-table-column prop="updateTime" label="更新时间" align="center" />
<el-table-column prop="status" label="账号状态" align="center" /> <el-table-column prop="status" label="账号状态" align="center">
<template #default="scope">
<div style="display: flex; align-items: center; justify-content: center">
<div class="r_point" v-if="scope.row.status == 1">
<div class="point" style="background-color: #2dc74c"></div>
<text style="color: #2dc74c; white-space: nowrap">启用</text>
</div>
<div class="r_point" v-else>
<div class="point" style="background-color: #eb1c5d"></div>
<text style="color: #eb1c5d; white-space: nowrap">禁用</text>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center">
<template #default="scope"> <template #default="scope">
<el-button type="text" @click="addOpen(scope.row)">编辑</el-button> <el-button type="text" @click="addOpen(scope.row)">编辑</el-button>
@ -82,18 +95,21 @@ function addImport(data) {
} }
async function getData() { async function getData() {
let { code, data } = await getAccounts({ let { code, data, total } = await getAccounts({
page: tableData.page, page: tableData.page,
size: tableData.size, size: tableData.size,
...form, ...form,
}); });
if (code == 200) { if (code == 200) {
tableData.data = data.list; tableData.data = data;
tableData.total = data.total; tableData.total = total;
} }
} }
async function doDeleteAccount(row) { async function doDeleteAccount(row) {
ElMessageBox.confirm('确定删除该账号吗?', '提示', {
type: 'warning',
}).then(async () => {
let { code, data } = await deleteAccount({ let { code, data } = await deleteAccount({
id: row.id, id: row.id,
}); });
@ -101,9 +117,13 @@ async function doDeleteAccount(row) {
ElMessage.success('删除成功'); ElMessage.success('删除成功');
getData(); getData();
} }
});
} }
async function doUpdateStatus(row) { async function doUpdateStatus(row) {
ElMessageBox.confirm('确定' + (row.status == 0 ? '启用' : '禁用') + '该账号吗?', '提示', {
type: 'warning',
}).then(async () => {
let { code, data } = await updateStatus({ let { code, data } = await updateStatus({
id: row.id, id: row.id,
status: row.status == 0 ? 1 : 0, status: row.status == 0 ? 1 : 0,
@ -112,6 +132,7 @@ async function doUpdateStatus(row) {
ElMessage.success('操作成功'); ElMessage.success('操作成功');
getData(); getData();
} }
});
} }
// //
@ -159,4 +180,17 @@ onMounted(() => {
display: flex; display: flex;
} }
} }
.r_point {
display: flex;
align-items: center;
gap: 3px;
}
.point {
width: 8px;
height: 8px;
border-radius: 100px;
// color: #ffaa48;
}
</style> </style>