Skip to content

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

no message

parent fdb16284
正在显示 包含 172 行增加 和 67 行删除
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>
<div>
<q-btn color="primary" icon="add" @click="openAddApplicationDialog"> <q-btn color="primary" icon="add" @click="openAddApplicationDialog">
添加应用 添加应用
</q-btn> </q-btn>
</div> </div>
<q-table
:data="groupApplications"
:columns="applicationColumns"
row-key="id"
:loading="loading"
:no-data-label="$t('No data')"
separator="cell"
>
<template slot="body-cell-title" slot-scope="props">
<q-td :props="props">
<div class="row items-center">
<!-- <q-icon :name="'apps'" size="20px" class="q-mr-sm" /> -->
{{ props.value }}
</div> </div>
</q-td>
</template>
<template slot="body-cell-href" slot-scope="props"> <!-- 拖拽排序提示 -->
<q-td :props="props"> <!-- <div class="row items-center q-mb-sm text-caption text-grey-6">
<div v-if="props.row.href"> <q-icon name="drag_indicator" size="16px" class="q-mr-xs" />
<q-icon name="computer" size="16px" /> 提示：拖拽
{{ props.row.href }} <q-icon name="drag_indicator" size="16px" class="q-mx-xs" />
</div> 图标可调整应用排序
<div v-if="props.row.wechatUrl"> </div> -->
<q-icon name="smartphone" size="16px" />
{{ props.row.wechatUrl }}
</div>
<div v-if="!props.row.href && !props.row.wechatUrl">
<span class="text-grey-7 text-caption">无入口</span>
</div>
</q-td>
</template>
<template slot="body-cell-status" slot-scope="props"> <!-- 应用列表 - 使用draggable实现拖拽排序 -->
<q-td :props="props"> <q-card flat bordered class="application-list-card">
<span <draggable
class="text-caption" v-model="groupApplications"
:class=" @end="onApplicationDragEnd"
props.row.qyflag === '1' ? 'text-positive' : 'text-negative' animation="200"
" handle=".app-drag-handle"
> ghost-class="sortable-ghost"
{{ props.row.qyflag === "1" ? "启用" : "停用" }} class="application-draggable-list"
</span>
</q-td>
</template>
<template slot="body-cell-actions" slot-scope="props">
<q-td :props="props" style="width: 100px">
<q-btn-dropdown color="secondary" label="操作" no-wrap>
<q-list link>
<q-item
v-close-overlay
@click.native="editApplication(props.row)"
> >
<q-item-main>
<q-item-tile sublabel>修改</q-item-tile>
</q-item-main>
</q-item>
<q-item <q-item
v-close-overlay v-for="(app, index) in groupApplications"
@click.native="removeApplicationFromGroup(props.row)" :key="app.id"
class="application-list-item"
> >
<q-item-main> <q-item-main>
<q-item-tile sublabel>从分组移除</q-item-tile> <div class="row items-center justify-between">
<div class="col">
<div class="row items-center">
<!-- 排序序号 -->
{{ index + 1 }}
<!-- 应用名称 -->
<div class="text-left text-weight-medium q-ml-sm">
{{ app.title }}
</div>
</div>
<div class="text-left text-caption text-grey-7">
<div class="row items-center q-gutter-sm">
<span v-if="app.wechatUrl">
<q-icon name="smartphone" size="14px" />
{{ app.wechatUrl }}
</span>
</div>
</div>
</div>
<div class="col-auto">
<!-- 拖拽手柄 -->
<q-icon
name="drag_indicator"
class="app-drag-handle cursor-move text-grey-6"
size="24px"
></q-icon>
</div>
</div>
</q-item-main> </q-item-main>
<q-item-side right>
<q-btn
flat
round
dense
icon="edit"
size="sm"
@click.stop="editApplication(app)"
/>
<q-btn
flat
round
dense
icon="delete"
size="sm"
color="negative"
@click.stop="removeApplicationFromGroup(app)"
/>
</q-item-side>
</q-item> </q-item>
</q-list> </draggable>
</q-btn-dropdown>
</q-td> <div v-if="groupApplications.length === 0" class="flex flex-center" style="height: 200px">
</template> <div class="text-center text-grey">
</q-table> <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
...@@ -41,3 +41,12 @@ export function updateOrder(list) { ...@@ -41,3 +41,12 @@ export function updateOrder(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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论