Skip to content

V
vue-quasar-admin-dev
Commit 9ffc9508 by 周海峰
Options

no message

parent fdb16284
正在显示 包含 183 行增加 和 78 行删除
src/pages/platformapplicationsGroup/platformapplicationsGroupManager.vue
...@@ -86,82 +86,95 @@ ...@@ -86,82 +86,95 @@
<div v-if="selectedGroup"> <div v-if="selectedGroup">
<div class="row items-center justify-between q-mb-md"> <div class="row items-center justify-between q-mb-md">
<div class="text-h6">{{ selectedGroup.groupName }} - 应用管理</div> <div class="text-h6">{{ selectedGroup.groupName }} - 应用管理</div>
<q-btn color="primary" icon="add" @click="openAddApplicationDialog"> <div>
添加应用 <q-btn color="primary" icon="add" @click="openAddApplicationDialog">
</q-btn> 添加应用
</q-btn>
</div>
</div> </div>
<q-table <!-- 拖拽排序提示 -->
:data="groupApplications" <!-- <div class="row items-center q-mb-sm text-caption text-grey-6">
:columns="applicationColumns" <q-icon name="drag_indicator" size="16px" class="q-mr-xs" />
row-key="id" 提示：拖拽
:loading="loading" <q-icon name="drag_indicator" size="16px" class="q-mx-xs" />
:no-data-label="$t('No data')" 图标可调整应用排序
separator="cell" </div> -->
>
<template slot="body-cell-title" slot-scope="props"> <!-- 应用列表 - 使用draggable实现拖拽排序 -->
<q-td :props="props"> <q-card flat bordered class="application-list-card">
<div class="row items-center"> <draggable
<!-- <q-icon :name="'apps'" size="20px" class="q-mr-sm" /> --> v-model="groupApplications"
{{ props.value }} @end="onApplicationDragEnd"
</div> animation="200"
</q-td> handle=".app-drag-handle"
</template> ghost-class="sortable-ghost"
class="application-draggable-list"
<template slot="body-cell-href" slot-scope="props"> >
<q-td :props="props"> <q-item
<div v-if="props.row.href"> v-for="(app, index) in groupApplications"
<q-icon name="computer" size="16px" /> :key="app.id"
{{ props.row.href }} class="application-list-item"
</div> >
<div v-if="props.row.wechatUrl"> <q-item-main>
<q-icon name="smartphone" size="16px" /> <div class="row items-center justify-between">
{{ props.row.wechatUrl }} <div class="col">
</div> <div class="row items-center">
<div v-if="!props.row.href && !props.row.wechatUrl"> <!-- 排序序号 -->
<span class="text-grey-7 text-caption">无入口</span> {{ index + 1 }}
</div> <!-- 应用名称 -->
</q-td> <div class="text-left text-weight-medium q-ml-sm">
</template> {{ app.title }}
</div>
<template slot="body-cell-status" slot-scope="props"> </div>
<q-td :props="props"> <div class="text-left text-caption text-grey-7">
<span <div class="row items-center q-gutter-sm">
class="text-caption" <span v-if="app.wechatUrl">
:class=" <q-icon name="smartphone" size="14px" />
props.row.qyflag === '1' ? 'text-positive' : 'text-negative' {{ app.wechatUrl }}
" </span>
> </div>
{{ props.row.qyflag === "1" ? "启用" : "停用" }} </div>
</span> </div>
</q-td> <div class="col-auto">
</template> <!-- 拖拽手柄 -->
<q-icon
<template slot="body-cell-actions" slot-scope="props"> name="drag_indicator"
<q-td :props="props" style="width: 100px"> class="app-drag-handle cursor-move text-grey-6"
<q-btn-dropdown color="secondary" label="操作" no-wrap> size="24px"
<q-list link> ></q-icon>
<q-item </div>
v-close-overlay </div>
@click.native="editApplication(props.row)" </q-item-main>
> <q-item-side right>
<q-item-main> <q-btn
<q-item-tile sublabel>修改</q-item-tile> flat
</q-item-main> round
</q-item> dense
<q-item icon="edit"
v-close-overlay size="sm"
@click.native="removeApplicationFromGroup(props.row)" @click.stop="editApplication(app)"
> />
<q-item-main> <q-btn
<q-item-tile sublabel>从分组移除</q-item-tile> flat
</q-item-main> round
</q-item> dense
</q-list> icon="delete"
</q-btn-dropdown> size="sm"
</q-td> color="negative"
</template> @click.stop="removeApplicationFromGroup(app)"
</q-table> />
</q-item-side>
</q-item>
</draggable>
<div v-if="groupApplications.length === 0" class="flex flex-center" style="height: 200px">
<div class="text-center text-grey">
<q-icon name="apps" size="48px" />
<div class="q-mt-sm">该分组下暂无应用</div>
</div>
</div>
</q-card>
</div> </div>
<div v-else class="flex flex-center" style="height: 400px"> <div v-else class="flex flex-center" style="height: 400px">
...@@ -261,6 +274,7 @@ import { ...@@ -261,6 +274,7 @@ import {
import { import {
getPlatformApplicationsPagedList, getPlatformApplicationsPagedList,
saveapp, saveapp,
updateWechatNum,
} from "@/service/permission/platformapplications"; } from "@/service/permission/platformapplications";
import { Icon } from "ant-design-vue"; import { Icon } from "ant-design-vue";
...@@ -432,10 +446,14 @@ export default { ...@@ -432,10 +446,14 @@ export default {
title: "", title: "",
}); });
// 过滤出当前分组的应用 // 过滤出当前分组的应用并按 wechatNum 排序
this.groupApplications = (response.data.data.list || []).filter( this.groupApplications = (response.data.data.list || [])
(app) => app.groupCode === this.selectedGroup.groupCode .filter((app) => app.groupCode === this.selectedGroup.groupCode)
); .sort((a, b) => {
const numA = a.wechatNum ? parseInt(a.wechatNum) : 999;
const numB = b.wechatNum ? parseInt(b.wechatNum) : 999;
return numA - numB;
});
} catch (error) { } catch (error) {
console.error("Failed to load group applications:", error); console.error("Failed to load group applications:", error);
this.$q.notify({ this.$q.notify({
...@@ -472,6 +490,32 @@ export default { ...@@ -472,6 +490,32 @@ export default {
} }
}, },
async onApplicationDragEnd() {
// 更新组内应用排序编号
const orderList = this.groupApplications.map((app, index) => ({
id: app.id,
wechatNum: String(index + 1),
}));
console.log(orderList, "=========onApplicationDragEnd=========");
try {
await updateWechatNum(orderList);
this.$q.notify({
type: "positive",
message: "应用排序已更新",
position: "bottom-right",
});
} catch (error) {
console.error("Failed to update application sort:", error);
this.$q.notify({
type: "negative",
message: "更新应用排序失败",
position: "bottom-right",
});
// 重新加载分组应用列表以恢复原始顺序
this.loadGroupApplications();
}
},
async openAddGroupDialog() { async openAddGroupDialog() {
try { try {
const name = await this.$q.dialog({ const name = await this.$q.dialog({
...@@ -682,4 +726,55 @@ export default { ...@@ -682,4 +726,55 @@ export default {
max-height: 600px; max-height: 600px;
overflow-y: auto; overflow-y: auto;
} }
/* 应用拖拽列表样式 */
.application-list-card {
min-height: 200px;
}
.application-draggable-list {
min-height: 50px;
}
.application-list-item {
border-bottom: 1px solid #e0e0e0;
transition: all 0.2s ease;
}
.application-list-item:hover {
background-color: #f5f5f5;
}
.application-list-item.sortable-ghost {
opacity: 0.5;
background-color: #e3f2fd;
}
.application-list-item.sortable-chosen {
background-color: #bbdefb;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* 应用拖拽手柄样式 */
.app-drag-handle {
cursor: move;
color: #22a19b;
padding: 4px;
border-radius: 4px;
transition: all 0.2s ease;
}
.app-drag-handle:hover {
color: #1976d2;
background-color: rgba(25, 118, 210, 0.1);
}
/* 表格行样式 */
.q-table tbody tr {
transition: all 0.2s ease;
}
.q-table tbody tr:hover {
background-color: #f5f5f5;
}
</style> </style>
src/service/permission/platformapplications.js
...@@ -40,4 +40,13 @@ export function updateOrder(list) { ...@@ -40,4 +40,13 @@ export function updateOrder(list) {
data: list, data: list,
loading: "hourglass" loading: "hourglass"
}) })
}
export function updateWechatNum(list) {
return request({
url: '/PlatformApplicationsController/platformapplications/updateWechatNum',
method: 'post',
data: list,
loading: "hourglass"
})
} }
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论