gxwebsoft/mp-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev' into dev

Browse Source 
# Conflicts:
#	src/views/shop/shopOrder/components/orderInfo.vue
#	src/views/shop/shopOrder/index.vue
This commit is contained in:
赵忠林
2025-08-09 15:32:06 +08:00
parent 30c867c6b6 9ac52b5136
commit be3efaad57
15 changed files with 878 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env.development
View File

@@ -1,2 +1,3 @@
VITE_APP_NAME=后台管理(开发环境)
#VITE_API_URL=http://127.0.0.1:9200/api
#VITE_SERVER_API_URL=http://127.0.0.1:8000/api

159
docs/route-jump-fix.md Normal file
View File

@@ -0,0 +1,159 @@
# 首页立即跳转问题修复文档
## 问题描述
在后台管理系统中，用户访问任何页面时都会出现"突然跳转一下"的现象，影响用户体验。这个问题主要表现为：
1. **首页立即跳转**: 访问首页时会有明显的跳转闪烁
2. **其他页面跳转**: 点击到其他页面时也会突然跳转一下
3. **用户体验差**: 页面加载过程中的跳转让用户感到困惑
## 问题分析
### 根本原因
问题出现在路由守卫 (`router/index.ts`) 中的动态路由注册逻辑：
```typescript
// 原有问题代码
router.beforeEach(async (to, from) => {
const userStore = useUserStore();
if (!userStore.menus) {
const { menus, homePath } = await userStore.fetchUserInfo();
if (menus) {
router.addRoute(getMenuRoutes(menus, homePath));
return { ...to, replace: true }; // 🚨 这里会导致强制跳转
}
}
});
```
### 问题分析
1. **每次访问都检查**: 每次路由跳转都会检查 `userStore.menus` 是否存在
2. **强制跳转**: `return { ...to, replace: true }` 会强制重新跳转到当前页面
3. **重复注册**: 没有标记机制防止重复注册动态路由
4. **状态不一致**: 退出登录后状态没有正确重置
## 修复方案
### 1. 添加动态路由注册标记
在 `router/index.ts` 中添加状态标记：
```typescript
// 标记动态路由是否已经注册
let dynamicRoutesRegistered = false;
// 重置动态路由注册状态的函数
export function resetDynamicRoutes() {
dynamicRoutesRegistered = false;
}
```
### 2. 优化路由守卫逻辑
```typescript
router.beforeEach(async (to, from) => {
// 注册动态路由
const userStore = useUserStore();
if (!userStore.menus && !dynamicRoutesRegistered) {
const { menus, homePath } = await userStore.fetchUserInfo();
if (menus) {
const menuRoute = getMenuRoutes(menus, homePath);
router.addRoute(menuRoute);
dynamicRoutesRegistered = true;
// 只有当访问根路径时才跳转到首页
if (to.path === LAYOUT_PATH) {
return { path: homePath || '/dashboard', replace: true };
}
// 对于其他路径，只有在路由确实不存在时才跳转
return { ...to, replace: true };
}
}
});
```
### 3. 添加用户状态重置方法
在 `store/modules/user.ts` 中添加重置方法：
```typescript
/**
* 重置用户状态（退出登录时调用）
*/
resetUserState() {
this.info = null;
this.menus = null;
this.authorities = [];
this.roles = [];
}
```
### 4. 优化退出登录逻辑
在 `utils/page-tab-util.ts` 中更新logout函数：
```typescript
export function logout(route?: boolean, from?: string) {
removeToken();
// 重置动态路由注册状态
resetDynamicRoutes();
// 重置用户状态
const userStore = useUserStore();
userStore.resetUserState();
// ... 其他逻辑
}
```
## 修复效果
### ✅ 解决的问题
1. **消除不必要跳转**: 访问已存在的页面不再出现突然跳转
2. **优化首页跳转**: 只有访问根路径时才跳转到首页
3. **防止重复注册**: 使用标记防止动态路由重复注册
4. **状态管理优化**: 退出登录时正确重置所有状态
### 🎯 用户体验改善
- **流畅的页面切换**: 页面间切换更加流畅，无突然跳转
- **快速的首页加载**: 首页加载更加直接，减少跳转闪烁
- **一致的导航体验**: 所有页面的导航体验保持一致
- **稳定的路由状态**: 登录/退出状态切换更加稳定
## 技术要点
### 1. 路由守卫优化
- 使用状态标记避免重复处理
- 精确控制跳转时机
- 区分根路径和其他路径的处理逻辑
### 2. 状态管理改进
- 统一的状态重置机制
- 清晰的状态生命周期管理
- 避免状态不一致问题
### 3. 性能优化
- 减少不必要的路由跳转
- 避免重复的动态路由注册
- 优化页面加载流程
## 相关文件
- `frontend/mp-vue/src/router/index.ts` - 路由守卫优化
- `frontend/mp-vue/src/store/modules/user.ts` - 用户状态管理
- `frontend/mp-vue/src/utils/page-tab-util.ts` - 页面跳转工具
- `frontend/mp-vue/docs/route-jump-fix.md` - 修复文档
## 注意事项
1. **测试验证**: 修改后需要测试登录、退出、页面切换等场景
2. **兼容性**: 确保修改不影响现有功能
3. **性能监控**: 关注页面加载性能是否有改善
4. **用户反馈**: 收集用户对页面跳转体验的反馈
现在用户访问页面时不会再出现突然跳转的问题，整体用户体验得到了显著改善！🎉

2
src/api/system/access-key/index.ts
View File

@@ -26,7 +26,7 @@ export async function addAccessKey(data: AccessKey) {
data
);
if (res.data.code === 0) {
return res.data.message;
return res.data.data;
}
return Promise.reject(new Error(res.data.message));
}

22
src/router/index.ts
View File

@@ -25,6 +25,14 @@ const router = createRouter({
}
});
// 标记动态路由是否已经注册
let dynamicRoutesRegistered = false;
// 重置动态路由注册状态的函数
export function resetDynamicRoutes() {
dynamicRoutesRegistered = false;
}
/**
* 路由守卫
*/
@@ -48,10 +56,20 @@ router.beforeEach(async (to, from) => {
// 注册动态路由
const userStore = useUserStore();
if (!userStore.menus) {
if (!userStore.menus && !dynamicRoutesRegistered) {
const { menus, homePath } = await userStore.fetchUserInfo();
if (menus) {
router.addRoute(getMenuRoutes(menus, homePath));
const menuRoute = getMenuRoutes(menus, homePath);
router.addRoute(menuRoute);
dynamicRoutesRegistered = true;
// 只有当访问根路径时才跳转到首页
if (to.path === LAYOUT_PATH) {
return { path: homePath || '/dashboard', replace: true };
}
// 对于其他路径，只有在路由确实不存在时才跳转
// 这避免了已存在页面的不必要跳转
return { ...to, replace: true };
}
}

9
src/store/modules/user.ts
View File

@@ -131,6 +131,15 @@ export const useUserStore = defineStore({
}
return m;
});
},
/**
* 重置用户状态（退出登录时调用）
*/
resetUserState() {
this.info = null;
this.menus = null;
this.authorities = [];
this.roles = [];
}
}
});

9
src/utils/page-tab-util.ts
View File

@@ -5,9 +5,10 @@ import { unref } from 'vue';
import type { RouteLocationNormalizedLoaded } from 'vue-router';
import type { TabItem, TabRemoveOption } from 'ele-admin-pro/es';
import { message } from 'ant-design-vue/es';
import router from '@/router';
import router, { resetDynamicRoutes } from '@/router';
import { useThemeStore } from '@/store/modules/theme';
import type { RouteReloadOption } from '@/store/modules/theme';
import { useUserStore } from '@/store/modules/user';
import { removeToken } from '@/utils/token-util';
import { setDocumentTitle } from '@/utils/document-title-util';
import {
@@ -242,6 +243,12 @@ export function goHomeRoute(from?: string) {
*/
export function logout(route?: boolean, from?: string) {
removeToken();
// 重置动态路由注册状态
resetDynamicRoutes();
// 重置用户状态
const userStore = useUserStore();
userStore.resetUserState();
if (route) {
router.push({
path: '/login',

368
src/views/shop/shopAdmin/components/admin.vue Normal file
View File

@@ -0,0 +1,368 @@
<template>
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="userId"
:columns="columns"
:datasource="datasource"
:where="defaultWhere"
:toolbar="false"
:needPage="false"
cache-key="proSystemUserTable"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'avatar'">
<a-avatar
:size="30"
:src="`${record.avatar}`"
style="margin-right: 4px"
>
<template #icon>
<UserOutlined/>
</template>
</a-avatar>
</template>
<template v-if="column.key === 'nickname'">
<span>{{ record.nickname }}</span>
</template>
<template v-if="column.key === 'mobile'">
<span v-if="hasRole('superAdmin')">{{ record.phone }}</span>
<span v-else>{{ record.mobile }}</span>
</template>
<template v-if="column.key === 'roles'">
<a-tag v-for="item in record.roles" :key="item.roleId" color="blue">
{{ item.roleName }}
</a-tag>
</template>
<template v-if="column.key === 'platform'">
<WechatOutlined v-if="record.platform === 'MP-WEIXIN'"/>
<Html5Outlined v-if="record.platform === 'H5'"/>
<ChromeOutlined v-if="record.platform === 'WEB'"/>
</template>
<template v-if="column.key === 'balance'">
<span class="ele-text-success">
￥{{ formatNumber(record.balance) }}
</span>
</template>
<template v-if="column.key === 'expendMoney'">
<span class="ele-text-warning">
￥{{ formatNumber(record.expendMoney) }}
</span>
</template>
<template v-if="column.key === 'isAdmin'">
<a-tag v-if="record.isAdmin">是</a-tag>
<a-tag v-else>否</a-tag>
<!-- <a-switch-->
<!-- :checked="record.isAdmin == 1"-->
<!-- @change="updateIsAdmin(record)"-->
<!-- />-->
</template>
<template v-if="column.key === 'action'">
<div>
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical"/>
<!-- <a @click="resetPsw(record)">重置</a>-->
<!-- <a-divider type="vertical" />-->
<a-popconfirm
placement="topRight"
title="确定要删除此用户吗？"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</div>
</template>
</template>
</ele-pro-table>
</template>
<script lang="ts" setup>
import {createVNode, ref, reactive} from 'vue';
import {message, Modal} from 'ant-design-vue/es';
import {
PlusOutlined,
DeleteOutlined,
UploadOutlined,
EditOutlined,
UserOutlined,
Html5Outlined,
ChromeOutlined,
WechatOutlined,
ExclamationCircleOutlined
} from '@ant-design/icons-vue';
import type {EleProTable} from 'ele-admin-pro/es';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import {messageLoading, formatNumber} from 'ele-admin-pro/es';
import UserEdit from './components/user-edit.vue';
import UserImport from './components/user-import.vue';
import UserInfo from './components/user-info.vue';
import {toDateString} from 'ele-admin-pro';
import {
pageUsers,
removeUser,
removeUsers,
updateUserPassword,
updateUser
} from '@/api/system/user';
import type {User, UserParam} from '@/api/system/user/model';
import {toTreeData, uuid} from 'ele-admin-pro';
import {listRoles} from '@/api/system/role';
import {listOrganizations} from '@/api/system/organization';
import {Organization} from '@/api/system/organization/model';
import {hasRole} from '@/utils/permission';
import {getPageTitle} from "@/utils/common";
import Extra from "./components/Extra.vue";
// 加载状态
const loading = ref(true);
// 树形数据
const data = ref<Organization[]>([]);
// 树展开的key
const expandedRowKeys = ref<number[]>([]);
// 树选中的key
const selectedRowKeys = ref<number[]>([]);
// 表格选中数据
const selection = ref<User[]>([]);
// 当前编辑数据
const current = ref<User | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 是否显示用户详情
const showInfo = ref(false);
// 是否显示用户导入弹窗
const showImport = ref(false);
const userType = ref<number>();
const searchText = ref('');
// 加载角色
const roles = ref<any[]>([]);
const filters = () => {
listRoles().then((result) => {
result.map((d) => {
roles.value.push({
text: d.roleName,
value: d.roleId
});
});
});
};
filters();
// 加载机构
listOrganizations()
.then((list) => {
loading.value = false;
const eks: number[] = [];
list.forEach((d) => {
d.key = d.organizationId;
d.value = d.organizationId;
d.title = d.organizationName;
if (typeof d.key === 'number') {
eks.push(d.key);
}
});
expandedRowKeys.value = eks;
data.value = toTreeData({
data: list,
idField: 'organizationId',
parentIdField: 'parentId'
});
if (list.length) {
if (typeof list[0].key === 'number') {
selectedRowKeys.value = [list[0].key];
}
// current.value = list[0];
} else {
selectedRowKeys.value = [];
// current.value = null;
}
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格列配置
const columns = ref<ColumnItem[]>([
{
title: 'ID',
dataIndex: 'userId',
width: 90,
showSorterTooltip: false
},
{
title: '头像',
key: 'avatar',
dataIndex: 'avatar',
align: 'center',
width: 90
},
{
title: '手机号码',
dataIndex: 'mobile',
align: 'center',
key: 'mobile',
showSorterTooltip: false
},
{
title: '注册时间',
dataIndex: 'createTime',
sorter: true,
showSorterTooltip: false,
ellipsis: true,
customRender: ({text}) => toDateString(text, 'yyyy-MM-dd')
},
{
title: '操作',
key: 'action',
width: 120,
fixed: 'right',
align: 'center'
}
]);
// 默认搜索条件
const defaultWhere = reactive({
username: '',
nickname: ''
});
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
where = {};
where.roleId = filters.roles;
where.keywords = searchText.value;
where.isAdmin = 1;
return pageUsers({page, limit, ...where, ...orders});
};
/* 搜索 */
const reload = (where?: UserParam) => {
selection.value = [];
tableRef?.value?.reload({where});
};
/* 打开编辑弹窗 */
const openEdit = (row?: User) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 打开用户详情弹窗 */
const openInfo = (row?: User) => {
current.value = row ?? null;
showInfo.value = true;
};
/* 打开编辑弹窗 */
const openImport = () => {
showImport.value = true;
};
const handleTabs = (e) => {
userType.value = Number(e.target.value);
reload();
};
/* 删除单个 */
const remove = (row: User) => {
const hide = messageLoading('请求中..', 0);
removeUser(row.userId)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的用户吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = messageLoading('请求中..', 0);
removeUsers(selection.value.map((d) => d.userId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
/* 重置用户密码 */
const resetPsw = (row: User) => {
Modal.confirm({
title: '提示',
content: '确定要重置此用户的密码吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
const password = uuid(8);
updateUserPassword(row.userId, password)
.then((msg) => {
hide();
message.success(msg + '，新密码：' + password);
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
/* 修改用户状态 */
const updateIsAdmin = (row: User) => {
row.isAdmin = !row.isAdmin;
updateUser(row)
.then((msg) => {
message.success(msg);
})
.catch((e) => {
message.error(e.message);
});
};
/* 自定义行属性 */
const customRow = (record: User) => {
return {
// 行点击事件
onClick: () => {
// console.log(record);
},
// 行双击事件
onDblclick: () => {
openEdit(record);
}
};
};
</script>

51
src/views/shop/shopAdmin/components/role.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<a-table :dataSource="dataSource" :columns="columns" :pagination="false">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'name'">
<div class="flex">
<span class="w-32">{{ record.name }}</span>
<span class="w-32">{{ record.value }}</span>
</div>
</template>
<template v-if="column.key === 'action'">
<template v-if="record.key === '2'">
<a-button>重置</a-button>
</template>
</template>
</template>
</a-table>
</template>
<script>
export default {
setup() {
return {
columns: [
{
title: '开发者ID',
dataIndex: 'name',
key: 'name',
},
{
title: '操作',
dataIndex: 'action',
key: 'action',
align: 'center',
width: 240,
},
],
dataSource: [
{
key: '1',
name: '租户ID',
value: '10550'
},
{
key: '2',
name: 'AppSecret',
value: 'sdfsdfsdfsdfs'
},
],
};
},
};
</script>

130
src/views/shop/shopAdmin/details/index.vue
View File

@@ -1,130 +0,0 @@
<template>
<div class="ele-body">
<a-card title="基本信息" :bordered="false">
<a-form
class="ele-form-detail"
:label-col="
styleResponsive ? { md: 2, sm: 4, xs: 6 } : { flex: '90px' }
"
:wrapper-col="
styleResponsive ? { md: 22, sm: 20, xs: 18 } : { flex: '1' }
"
>
<a-form-item label="账号">
<div class="ele-text-secondary">{{ form.username }}</div>
</a-form-item>
<a-form-item label="昵称">
<div class="ele-text-secondary">{{ form.nickname }}</div>
</a-form-item>
<a-form-item label="性别">
<div class="ele-text-secondary">{{ form.sexName }}</div>
</a-form-item>
<a-form-item label="手机号">
<div class="ele-text-secondary">{{ form.phone }}</div>
</a-form-item>
<a-form-item label="真实姓名">
<div class="ele-text-secondary">{{ form.realName }}</div>
</a-form-item>
<a-form-item label="别名">
<div class="ele-text-secondary">{{ form.alias }}</div>
</a-form-item>
<a-form-item label="角色">
<a-tag v-for="item in form.roles" :key="item.roleId" color="blue">
{{ item.roleName }}
</a-tag>
</a-form-item>
<a-form-item label="创建时间">
<div class="ele-text-secondary">{{ form.createTime }}</div>
</a-form-item>
<a-form-item label="状态">
<a-badge
v-if="typeof form.status === 'number'"
:status="(['processing', 'error'][form.status] as any)"
:text="['正常', '冻结'][form.status]"
/>
</a-form-item>
</a-form>
</a-card>
</div>
</template>
<script lang="ts" setup>
import { ref, watch, unref } from 'vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue/es';
import { toDateString } from 'ele-admin-pro/es';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/modules/theme';
import useFormData from '@/utils/use-form-data';
import { setPageTabTitle } from '@/utils/page-tab-util';
import { getUser } from '@/api/system/user';
import type { User } from '@/api/system/user/model';
const ROUTE_PATH = '/system/user/details';
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const { currentRoute } = useRouter();
// 用户信息
const { form, assignFields } = useFormData<User>({
userId: undefined,
alias: '',
realName: '',
username: '',
nickname: '',
sexName: '',
phone: '',
roles: [],
createTime: undefined,
status: undefined
});
// 请求状态
const loading = ref(true);
/* */
const query = () => {
const { query } = unref(currentRoute);
const id = query.id;
if (!id || form.userId === Number(id)) {
return;
}
loading.value = true;
getUser(Number(id))
.then((data) => {
loading.value = false;
assignFields({
...data,
createTime: toDateString(data.createTime)
});
// 修改页签标题
if (unref(currentRoute).path === ROUTE_PATH) {
setPageTabTitle(data.nickname + '的信息');
}
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
};
watch(
currentRoute,
(route) => {
const { path } = unref(route);
if (path !== ROUTE_PATH) {
return;
}
query();
},
{ immediate: true }
);
</script>
<script lang="ts">
export default {
name: 'SystemUserDetails'
};
</script>

22
src/views/shop/shopAdmin/index.vue
View File

@@ -1,15 +1,16 @@
<template>
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
<a-card title="角色管理" style="margin-bottom: 20px">
<template #extra>
<a-button type="primary" @click="push(`/system/role`)">添加角色</a-button>
</template>
<a-space>
<template v-for="(item,_) in roles" :key="index">
<a-button>{{ item.roleName }}</a-button>
</template>
</a-space>
</a-card>
<!-- <a-card title="超级管理员" style="margin-bottom: 20px">-->
<!-- <Admin />-->
<!-- </a-card>-->
<!-- <a-card title="项目成员" style="margin-bottom: 20px">-->
<!-- <template #extra>-->
<!-- <a-button class="ele-btn-icon" @click="openEdit()">-->
<!-- <span>添加</span>-->
<!-- </a-button>-->
<!-- </template>-->
<!-- <Admin />-->
<!-- </a-card>-->
<a-card :bordered="false">
<!-- 表格 -->
<ele-pro-table
@@ -152,7 +153,6 @@ import {Organization} from '@/api/system/organization/model';
import {hasRole} from '@/utils/permission';
import {getPageTitle, push} from "@/utils/common";
import router from "@/router";
import {listUserRole} from "@/api/system/userRole";
// 加载状态
const loading = ref(true);

2
src/views/shop/shopGoods/components/extra.vue
View File

@@ -4,14 +4,12 @@
style="flex-wrap: wrap"
v-if="hasRole('superAdmin') || hasRole('admin') || hasRole('foundation')"
>
<a-button type="text" @click="push('/website/navigation')">商品分类</a-button>
</a-space>
</template>
<script lang="ts" setup>
import { watch, nextTick } from 'vue';
import { CmsWebsite } from '@/api/cms/cmsWebsite/model';
import { push } from '@/utils/common';
import { hasRole } from '@/utils/permission';
const props = withDefaults(

231
src/views/system/access-key/components/accesskey-edit.vue
View File

@@ -4,33 +4,39 @@
width="400px"
:visible="visible"
:confirm-loading="loading"
:title="'手机验证'"
:title="'创建 API key'"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
:maskClosable="false"
:cancelText="cancelText"
:okText="okText"
@close="updateVisible"
@ok="save"
>
<a-form class="login-form">
<a-form-item label="绑定的手机号码" name="phone">
{{ getMobile(form.phone) }}
</a-form-item>
<a-form-item label="校验码" name="code">
<a-form
ref="formRef"
:model="form"
:rules="rules"
class="login-form">
<a-form-item name="accessKey">
<div class="login-input-group">
<a-input
v-if="form.accessSecret"
allow-clear
type="text"
:maxlength="6"
v-model:value="form.code"
placeholder="请输入API Keys名称"
v-model:value="form.accessSecret"
>
</a-input>
<a-button
class="login-captcha"
:disabled="!!countdownTime"
@click="openImgCodeModal"
<a-input
v-else
allow-clear
type="text"
placeholder="请输入API Keys名称"
:maxlength="6"
v-model:value="form.accessKey"
>
<span v-if="!countdownTime">发送验证码</span>
<span v-else>已发送 {{ countdownTime }} s</span>
</a-button>
</a-input>
</div>
</a-form-item>
</a-form>
@@ -38,69 +44,35 @@
</template>
<script lang="ts" setup>
import { ref, reactive, watch, computed, onBeforeUnmount } from "vue";
import { Form, message, Modal, SelectProps } from "ant-design-vue";
import { useUserStore } from "@/store/modules/user";
import type { AccessKey } from "@/api/system/access-key/model";
import { addAccessKey, updateAccessKey } from "@/api/system/access-key";
import { FILE_SERVER } from "@/config/setting";
import { uploadFile } from "@/api/system/file";
import { RuleObject } from "ant-design-vue/es/form";
import { isImage } from "@/utils/common";
import { listUsers } from '@/api/system/user';
import { getMobile } from '@/utils/common';
import { sendSmsCaptcha } from '@/api/passport/login';
import {ref, reactive} from "vue";
import {message} from "ant-design-vue";
import type {AccessKey} from "@/api/system/access-key/model";
import {assignObject} from 'ele-admin-pro';
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
import {addAccessKey} from "@/api/system/access-key";
import {copyText} from "@/utils/common";
const useForm = Form.useForm;
const props = defineProps<{
defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: AccessKey | null;
}>();
const userStore = useUserStore();
// 当前登录用户信息
const loginUser = computed(() => userStore.info ?? {});
// 是否是修改
const isUpdate = ref(false);
const disabled = ref(false);
// 选项卡位置
const activeKey = ref("1");
const promoter = ref<any>(undefined);
const commander = ref(undefined);
const appid = ref(undefined);
/* 打开选择弹窗 */
const content = ref("");
// 图形验证码地址
const captcha = ref("");
// 验证码倒计时定时器
let countdownTimer: number | null = null;
// 验证码倒计时时间
const countdownTime = ref(0);
// 图形验证码
const imgCode = ref("");
// 发送验证码按钮loading
const codeLoading = ref(false);
const emit = defineEmits<{
(e: "done", form: AccessKey): void;
(e: "update:visible", value: boolean): void;
}>();
// 已上传数据, 可赋初始值用于回显
const avatar = ref(<any>[]);
// 提交状态
const loading = ref(false);
const cancelText = ref<string>("取消");
const okText = ref<string>("创建");
// 用户信息
const form = reactive<AccessKey>({
id: 0,
phone: "",
accessKey: "",
accessSecret: "",
code: undefined,
createTime: ""
accessKey: undefined,
accessSecret: undefined,
createTime: undefined
});
/* 更新visible */
@@ -109,125 +81,50 @@ const updateVisible = (value: boolean) => {
};
// 表单验证规则
const rules = reactive({
name: [
const rules = reactive<Record<string, Rule[]>>({
accessKey: [
{
required: true,
type: "string",
message: "请输入工单名称",
message: "请输入API Key 名称",
trigger: "blur"
}
],
taskType: [
{
required: true,
type: "string",
message: "请选择工单类型",
trigger: "blur"
}
],
content: [
{
required: true,
type: "string",
message: "请输入工单内容",
trigger: "blur",
validator: async (_rule: RuleObject, value: string) => {
if (content.value == "") {
return Promise.reject("请输入文字内容");
}
return Promise.resolve();
}
}
]
});
/* 显示发送短信验证码弹窗 */
const openImgCodeModal = () => {
if (!form.phone) {
message.error("手机号码有误");
return;
}
// imgCode.value = "";
sendCode();
// visible.value = true;
};
/* 发送短信验证码 */
const sendCode = () => {
codeLoading.value = true;
sendSmsCaptcha({ phone: form.phone }).then((res) => {
console.log(res);
message.success("短信验证码发送成功, 请注意查收!");
codeLoading.value = false;
countdownTime.value = 30;
// 开始对按钮进行倒计时
countdownTimer = window.setInterval(() => {
if (countdownTime.value <= 1) {
countdownTimer && clearInterval(countdownTimer);
countdownTimer = null;
}
countdownTime.value--;
}, 1000);
});
};
onBeforeUnmount(() => {
countdownTimer && clearInterval(countdownTimer);
});
const { validate, validateInfos } = useForm(form, rules);
const formRef = ref<FormInstance | null>(null);
/* 保存编辑 */
const save = () => {
validate()
if(form.accessSecret){
copyText(form.accessSecret)
return false;
}
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
updateVisible(false);
const { code,phone } = form;
emit("done", { code,phone });
loading.value = true;
addAccessKey(form)
.then((data) => {
console.log(data,'addData')
if(data){
assignObject(form, data);
cancelText.value = "关闭";
okText.value = "复制";
}
loading.value = false;
message.success('创建成功');
emit("done", {});
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {
});
};
const query = () => {
listUsers({username: 'admin'}).then(res => {
form.phone = res[0].phone;
})
}
query();
</script>
<style lang="less" scoped>
.login-form{
padding: 0 20px;
}
.login-form-right .login-form {
margin: 0 15% 0 auto;
}
.login-form-left .login-form {
margin: 0 auto 0 15%;
}
/* 验证码 */
.login-input-group {
display: flex;
align-items: center;
:deep(.ant-input-affix-wrapper) {
flex: 1;
}
.login-captcha {
margin-left: 10px;
padding: 0 10px;
& > img {
width: 100%;
height: 100%;
}
}
}
</style>

147
src/views/system/access-key/index.vue
View File

@@ -2,7 +2,7 @@
<div class="page">
<a-page-header :ghost="false" title="秘钥管理">
<div class="ele-text-secondary">
AccessKey ID 和 AccessKey Secret 是您访WebSoft-API
API key 是您访WebSoft-API
的密钥，具有该账户完全的权限，请您妥善保管。
</div>
</a-page-header>
@@ -11,7 +11,7 @@
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="logId"
row-key="id"
:columns="columns"
:datasource="datasource"
:where="defaultWhere"
@@ -19,27 +19,26 @@
>
<template #toolbar>
<a-space>
<a-button type="primary" class="ele-btn-icon" @click="add">
<template #icon>
<plus-outlined />
</template>
<span>创建 AccessKey</span>
<a-button type="primary" class="ele-btn-icon" @click="openEdit()">
<span>创建 API key</span>
</a-button>
<a-button @click="reset">刷新</a-button>
</a-space>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'accessSecret'">
<span v-if="record.accessSecret">
{{ record.accessSecret }}
<span>
sk-******************
</span>
<a @click="openEdit(record)" v-else>查看 Secret</a>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="openEdit(record)">查看 Secret</a>
<!-- <a-divider type="vertical" />-->
<!-- <a @click="resetPsw(record)">禁用</a>-->
<a-popconfirm
placement="topRight"
title="确定要删除此用户吗？"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</a-space>
</template>
</template>
@@ -47,35 +46,36 @@
</a-card>
</div>
<!-- 编辑弹窗 -->
<AccessKeyEdit v-model:visible="showEdit" :data="current" @done="reload" />
<AccessKeyEdit v-model:visible="showEdit" :data="current" @done="reload"/>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { message } from 'ant-design-vue/es';
import type { EleProTable } from 'ele-admin-pro/es';
import type {
import {ref, reactive} from 'vue';
import {message} from 'ant-design-vue/es';
import type {EleProTable} from 'ele-admin-pro/es';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import AccessKeyEdit from './components/accesskey-edit.vue';
import { toDateString } from 'ele-admin-pro/es';
import { addAccessKey, pageAccessKey } from '@/api/system/access-key';
import { AccessKey, AccessKeyParam } from '@/api/system/access-key/model';
} from 'ele-admin-pro/es/ele-pro-table/types';
import AccessKeyEdit from './components/accesskey-edit.vue';
import {toDateString} from 'ele-admin-pro/es';
import {pageAccessKey, removeAccessKey} from '@/api/system/access-key';
import {AccessKey, AccessKeyParam} from '@/api/system/access-key/model';
import {messageLoading} from 'ele-admin-pro/es';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格列配置
const columns = ref<ColumnItem[]>([
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格列配置
const columns = ref<ColumnItem[]>([
{
title: 'AccessKey ID',
title: '名称',
key: 'accessKey',
dataIndex: 'accessKey',
showSorterTooltip: false
},
{
title: 'AccessSecret',
title: 'Key',
key: 'accessSecret',
dataIndex: 'accessSecret',
showSorterTooltip: false
@@ -83,66 +83,73 @@
{
title: '创建时间',
dataIndex: 'createTime',
customRender: ({ text }) => toDateString(text)
align: 'center',
customRender: ({text}) => toDateString(text, 'yyyy-MM-dd'),
width: 180,
},
{
title: '操作',
key: 'action',
width: 180,
fixed: 'right',
align: 'center'
}
]);
]);
// 表格选中数据
const selection = ref<AccessKey[]>([]);
const searchText = ref('');
const userId = ref<number>(0);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 当前编辑数据
const current = ref<any>(null);
// 表格选中数据
const selection = ref<AccessKey[]>([]);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 当前编辑数据
const current = ref<any>(null);
// 默认搜索条件
const defaultWhere = reactive({
// 默认搜索条件
const defaultWhere = reactive({
code: '',
phone: '',
username: '',
nickname: '',
userId: undefined
});
});
// 表格数据源
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
return pageAccessKey({ ...where, ...orders, page, limit }).catch((e) => {
message.error(e.message);
});
};
const reset = () => {
userId.value = 0;
searchText.value = '';
reload();
};
// 表格数据源
const datasource: DatasourceFunction = ({where}) => {
return pageAccessKey({...where});
};
/* 打开编辑弹窗 */
const openEdit = (row?: any) => {
/* 打开编辑弹窗 */
const openEdit = (row?: any) => {
current.value = row ?? null;
showEdit.value = true;
};
};
/* 搜索 */
const reload = (where?: AccessKeyParam) => {
selection.value = [];
tableRef?.value?.reload({ page: 1, where });
};
const add = () => {
addAccessKey({})
.then((res) => {
/* 删除单个 */
const remove = (row: AccessKey) => {
const hide = messageLoading('请求中..', 0);
removeAccessKey(row.id)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((err) => {
message.error(err.message);
.catch((e) => {
hide();
message.error(e.message);
});
};
};
/* 搜索 */
const reload = (where?: AccessKeyParam) => {
selection.value = [];
tableRef?.value?.reload({page: 1, where});
};
</script>
<script lang="ts">
export default {
export default {
name: 'AccessKeyIndex'
};
};
</script>

51
src/views/system/developer/components/info.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<a-table :dataSource="dataSource" :columns="columns" :pagination="false">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'name'">
<div class="flex">
<span class="w-32">{{ record.name }}</span>
<span class="w-32">{{ record.value }}</span>
</div>
</template>
<template v-if="column.key === 'action'">
<template v-if="record.key === '2'">
<a-button>重置</a-button>
</template>
</template>
</template>
</a-table>
</template>
<script>
export default {
setup() {
return {
columns: [
{
title: '开发者ID',
dataIndex: 'name',
key: 'name',
},
{
title: '操作',
dataIndex: 'action',
key: 'action',
align: 'center',
width: 240,
},
],
dataSource: [
{
key: '1',
name: '租户ID',
value: '10550'
},
{
key: '2',
name: 'AppSecret',
value: 'sdfsdfsdfsdfs'
},
],
};
},
};
</script>

31
src/views/system/developer/index.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
<a-card title="开发者ID" style="margin-bottom: 20px">
<Info/>
</a-card>
<a-card title="服务器域名" style="margin-bottom: 20px">
<template #extra>
<a-button type="primary" @click="push(`/system/role`)">添加</a-button>
</template>
<Info/>
</a-card>
<a-card title="业务域名" style="margin-bottom: 20px">
<template #extra>
<a-button type="primary" @click="push(`/system/role`)">添加</a-button>
</template>
<Info/>
</a-card>
</a-page-header>
</template>
<script lang="ts" setup>
import {getPageTitle, push} from "@/utils/common";
import Info from './components/info.vue'
</script>
<script lang="ts">
export default {
name: 'SystemDeveloper'
};
</script>