Commit 34a1d93a by 周海峰

应用分组管理

parent d553149b
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -24,6 +24,7 @@
"vue-i18n": "^8.1.0",
"vue-template-compiler": "^2.7.16",
"vue-ueditor-wrap": "^2.4.1",
"vuedraggable": "^2.24.3",
"vuelidate": "^0.6.2",
"xlsx": "^0.15.1"
},
......
......@@ -117,7 +117,7 @@ module.exports = function (ctx) {
proxy: {
// 将所有以/api开头的请求代理到jsonplaceholder
'/manager': {
target: 'http://192.168.1.186:8086',
target: 'http://localhost:8082',
changeOrigin: true,
pathRewrite: {
'^/manager': ''
......
......@@ -36,7 +36,11 @@ service.interceptors.response.use(
response => {
loading.hide(response.config)
const res = response.data;
if (res.code !== 200) {
if (res.code == 200) {
return response
}
if (res.code == 401) {
Notify.create({
message: "当前用户已在其它地点登录,页面跳转登录页!"
})
......@@ -50,7 +54,10 @@ service.interceptors.response.use(
}
return Promise.reject('error');
} else {
return response;
Notify.create({
message: res.data || '系统错误'
})
return Promise.reject('error');
}
},
error => {
......
......@@ -20,6 +20,10 @@
<template slot="top-selection" slot-scope="props">
<q-btn color="negative" flat round delete icon="delete" @click="delRoles" />
</template>
<q-td slot="body-cell-href" slot-scope="props" :props="props">
<span>电脑入口:{{ props.row.href ? props.row.href: '未维护'}}</span><br/>
<span>企微入口:{{ props.row.wechatUrl ? props.row.wechatUrl: '未维护' }}</span>
</q-td>
<q-td slot="body-cell-id" slot-scope="props" :props="props" style="width:100px">
<!-- <q-btn small round push glossy dense icon="edit" color="primary" @click="editapp(props.value)"></q-btn>
<q-btn small round push glossy dense icon="delete" color="red" @click="delapp(props.value)"></q-btn> -->
......@@ -77,7 +81,10 @@
</div>
</q-field>
<q-field :count="255">
<q-input v-model="temp.href" float-label="连接" />
<q-input v-model="temp.href" float-label="电脑入口" />
</q-field>
<q-field :count="255">
<q-input v-model="temp.wechatUrl" float-label="企微入口" />
</q-field>
<q-field :count="64">
<q-input v-model="temp.appid" float-label="应用唯一标识" @blur="getsecret()" :disable=appidflag />
......@@ -127,7 +134,7 @@
<script>
import { getPlatformApplicationsPagedList,saveapp,delapp } from "@/service/permission/platformapplications";
import { getApplicationsGroupList,addApplicationsGroup,updateApplicationsGroup,delApplicationsGroup } from "@/service/permission/platformapplicationsGroup";
import { getApplicationsGroupList,addApplicationsGroup } from "@/service/permission/platformapplicationsGroup";
const uploadpath="http://nw.sy-metro.com:6104/uploadfileadmin/manager";
export default {
data() {
......
# 应用分组管理功能需求文档
# 应用分组管理功能需求文档
## 1. 项目背景
基于现有的应用分组(`platformapplicationsGroup`)和应用管理(`platformapplications`)功能,需要开发一个新的管理页面,实现应用分组的拖拽排序以及向分组中添加应用的可视化操作。
## 2. 功能需求
### 2.1 核心功能
1. **应用分组拖拽排序**
- 支持应用分组列表的拖拽重新排序
- 拖拽后自动更新排序索引(sortIndex)
- 实时保存排序结果到后端
2. **应用分组内应用管理**
- 左侧显示应用分组列表(可拖拽排序)
- 右侧显示当前选中分组内的应用列表
- 支持从所有应用池中选择应用添加到分组
- 支持从分组中移除应用
### 2.2 界面布局
```
+----------------------------------+
| 应用分组管理 |
+----------------------------------+
| 左侧:分组列表 | 右侧:应用管理 |
| (可拖拽排序) | |
| | 当前分组应用 |
| - 分组1 | +-----------+ |
| - 分组2 | | 应用1 | |
| - 分组3 | | 应用2 | |
| | +-----------+ |
| [添加分组] | [添加应用] |
+-------------------+----------------+
```
## 3. 技术实现
### 3.1 数据结构
基于现有数据结构:
- **应用分组**:包含`id`, `groupName`, `groupCode`, `sortIndex`
- **应用**:包含`id`, `title`, `groupCode`, 以及其他应用相关字段
### 3.2 新增API需求
需要后端提供以下API(假设):
```javascript
// 更新分组排序
updateApplicationsGroupSort(data) {
return request({
url: '/applicationsGroup/updateSort',
method: 'post',
data: data
})
}
// 获取分组中的应用列表
getApplicationsByGroup(groupCode) {
return request({
url: '/platformapplications/byGroup',
method: 'get',
params: { groupCode }
})
}
// 将应用添加到分组
addApplicationToGroup(data) {
return request({
url: '/platformapplications/addToGroup',
method: 'post',
data: data
})
}
// 从分组中移除应用
removeApplicationFromGroup(data) {
return request({
url: '/platformapplications/removeFromGroup',
method: 'post',
data: data
})
}
```
### 3.3 前端组件设计
1. **分组列表组件**
- 使用Quasar的`q-list`和拖拽功能
- 支持拖拽排序
- 点击选中分组
2. **应用管理组件**
- 当前分组应用列表
- 添加应用对话框(从所有应用中选择)
- 移除应用确认
3. **拖拽排序实现**
- 使用HTML5拖拽API或第三方拖拽库
- 实时更新排序索引
- 批量保存排序结果
## 4. 路由配置
在现有路由基础上添加新页面:
```javascript
{
path: 'platformapplicationsGroupManager',
name: 'platformapplicationsGroupManager',
component: () => import('pages/platformapplicationsGroup/platformapplicationsGroupManager.vue')
}
```
## 5. 菜单配置
在权限管理菜单下添加新菜单项:
```javascript
{
path: "platformapplicationsGroupManager",
icon: "settings",
title: "应用分组管理",
name: "platformapplicationsGroupManager",
leftmemu: true
}
```
## 6. 用户体验要求
1. **拖拽体验**
- 拖拽时有视觉反馈
- 拖拽结束后自动保存
- 保存成功/失败有提示
2. **操作便捷性**
- 点击分组即可查看和管理内部应用
- 添加应用支持搜索和筛选
- 移除应用需要确认提示
3. **响应式设计**
- 适配不同屏幕尺寸
- 移动端友好的触控操作
## 7. 技术栈
- **前端框架**:Vue.js + Quasar Framework
- **拖拽功能**:原生HTML5拖拽API或SortableJS
- **状态管理**:Vuex(如需)
- **HTTP请求**:基于现有request封装
## 8. 开发计划
1. 创建页面组件和路由配置
2. 实现分组列表拖拽排序功能
3. 实现应用管理功能(添加/移除)
4. 集成API接口
5. 优化用户体验和界面
6. 测试和调试
请确认这个需求文档是否符合您的预期,如有需要调整的地方请指出,确认后我将开始实现该功能。
\ No newline at end of file
......@@ -156,9 +156,9 @@ const appRouter = [{
component: () => import('pages/platformapplications/platformapplications.vue')
},
{
path: 'platformapplicationsGroup',
name: 'platformapplicationsGroup',
component: () => import('pages/platformapplicationsGroup/platformapplicationsGroup.vue')
path: 'platformapplicationsGroupManager',
name: 'groupManager',
component: () => import('pages/platformapplicationsGroup/platformapplicationsGroupManager.vue')
},
]
},
......
......@@ -26,6 +26,16 @@ export function updateApplicationsGroup(data) {
})
}
export function updateApplicationsGroupSortIndex(data) {
return request({
url: '/applicationsGroup/updateSortIndex',
method: 'post',
data: data,
loading:"hourglass"
})
}
export function delApplicationsGroup(data) {
return request({
url: '/applicationsGroup/delete',
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论