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 @@
<div v-if="selectedGroup">
<div class="row items-center justify-between q-mb-md">
<div class="text-h6">{{ selectedGroup.groupName }} - 应用管理</div>
<q-btn color="primary" icon="add" @click="openAddApplicationDialog">
添加应用
</q-btn>
<div>
<q-btn color="primary" icon="add" @click="openAddApplicationDialog">
添加应用
</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>
</q-td>
</template>
<template slot="body-cell-href" slot-scope="props">
<q-td :props="props">
<div v-if="props.row.href">
<q-icon name="computer" size="16px" />
{{ props.row.href }}
</div>
<div v-if="props.row.wechatUrl">
<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">
<q-td :props="props">
<span
class="text-caption"
:class="
props.row.qyflag === '1' ? 'text-positive' : 'text-negative'
"
>
{{ props.row.qyflag === "1" ? "启用" : "停用" }}
</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
v-close-overlay
@click.native="removeApplicationFromGroup(props.row)"
>
<q-item-main>
<q-item-tile sublabel>从分组移除</q-item-tile>
</q-item-main>
</q-item>
</q-list>
</q-btn-dropdown>
</q-td>
</template>
</q-table>
<!-- 拖拽排序提示 -->
<!-- <div class="row items-center q-mb-sm text-caption text-grey-6">
<q-icon name="drag_indicator" size="16px" class="q-mr-xs" />
提示：拖拽
<q-icon name="drag_indicator" size="16px" class="q-mx-xs" />
图标可调整应用排序
</div> -->
<!-- 应用列表 - 使用draggable实现拖拽排序 -->
<q-card flat bordered class="application-list-card">
<draggable
v-model="groupApplications"
@end="onApplicationDragEnd"
animation="200"
handle=".app-drag-handle"
ghost-class="sortable-ghost"
class="application-draggable-list"
>
<q-item
v-for="(app, index) in groupApplications"
:key="app.id"
class="application-list-item"
>
<q-item-main>
<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-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>
</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 v-else class="flex flex-center" style="height: 400px">
......@@ -261,6 +274,7 @@ import {
import {
getPlatformApplicationsPagedList,
saveapp,
updateWechatNum,
} from "@/service/permission/platformapplications";
import { Icon } from "ant-design-vue";
......@@ -432,10 +446,14 @@ export default {
title: "",
});
// 过滤出当前分组的应用
this.groupApplications = (response.data.data.list || []).filter(
(app) => app.groupCode === this.selectedGroup.groupCode
);
// 过滤出当前分组的应用并按 wechatNum 排序
this.groupApplications = (response.data.data.list || [])
.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) {
console.error("Failed to load group applications:", error);
this.$q.notify({
......@@ -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() {
try {
const name = await this.$q.dialog({
......@@ -682,4 +726,55 @@ export default {
max-height: 600px;
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>
src/service/permission/platformapplications.js
......@@ -40,4 +40,13 @@ export function updateOrder(list) {
data: list,
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论