Skip to content

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

no message

parent a9f42f00
正在显示 包含 187 行增加 和 9 行删除
src/pages/platformapplications/SortApplications.vue 0 → 100644
<template>
<q-modal v-model="visible" maximized>
<q-modal-layout>
<q-toolbar slot="header">
<q-btn flat round dense @click="close" icon="reply" />
<q-toolbar-title>
应用排序
</q-toolbar-title>
</q-toolbar>
<q-toolbar slot="footer">
<q-toolbar-title></q-toolbar-title>
<q-btn round color="red" @click="saveOrder">保存</q-btn>
<q-btn round @click="close">取消</q-btn>
</q-toolbar>
<div>
<q-card style="min-width: 400px;padding: 10px 30%;">
<q-card-section>
<div class="q-mt-md">
<ul class="sort-list" ref="list">
<li v-for="(item, index) in apps" :key="item.id" class="sort-item"
:class="{ dragging: index === draggingIndex }"
draggable="true"
@dragstart="onDragStart($event, index)"
@dragover.prevent="onDragOver($event, index)"
@drop="onDrop($event, index)">
<div class="sort-item-inner row no-wrap items-center">
<div class="handle q-mr-sm" title="拖动排序">
<q-icon name="drag_indicator" />
</div>
<div class="col sort-title" style="min-width:0">
<div class="text-subtitle2 ellipsis">{{ item.title }}</div>
<!-- <div class="text-caption text-grey-6">编号: {{ item.num || '-' }}</div> -->
</div>
<div class="drag-indicator q-ml-sm">
<q-icon name="reorder" />
</div>
</div>
</li>
</ul>
</div>
</q-card-section>
</q-card>
</div>
</q-modal-layout>
</q-modal>
</template>
<script>
import { getAllApps, updateOrder } from '@/service/permission/platformapplications';
export default {
name: 'SortApplications',
props: {
value: { type: Boolean, default: false }
},
data() {
return {
visible: this.value,
apps: [],
draggingIndex: null
}
},
watch: {
value(v) {
this.visible = v;
if (v) this.loadApps();
},
visible(v) {
this.$emit('input', v);
}
},
methods: {
close() {
this.visible = false;
},
async loadApps() {
try {
const res = await getAllApps();
if (res && res.data) {
// res.data.data expected list
this.apps = (res.data.data || []).map(a => ({ ...a }));
// 初始按 num 字段的数值升序排列，保证显示顺序与 item.num 一致
this.apps.sort((x, y) => {
const nx = parseInt(x.num, 10) || 0;
const ny = parseInt(y.num, 10) || 0;
return nx - ny;
});
}
} catch (e) {}
},
onDragStart(e, index) {
this.draggingIndex = index;
e.dataTransfer.effectAllowed = 'move';
},
onDragOver(e, index) {
e.preventDefault();
},
onDrop(e, index) {
e.preventDefault();
if (this.draggingIndex === null) return;
const dragged = this.apps.splice(this.draggingIndex, 1)[0];
this.apps.splice(index, 0, dragged);
this.draggingIndex = null;
},
async saveOrder() {
// assign num based on order (descending or ascending? we'll set num = index+1)
const payload = this.apps.map((a, i) => ({ id: a.id, num: String(i + 1) }));
try {
await updateOrder(payload);
this.$q.notify({ type: 'positive', message: '排序已保存' });
this.$emit('saved');
this.close();
} catch (e) {
this.$q.notify({ type: 'negative', message: '保存失败' });
}
}
}
}
</script>
<style scoped>
.sort-list {
list-style: none;
padding: 0;
margin: 0;
}
.sort-item {
padding: 8px;
border: 1px solid #eee;
border-radius: 6px;
margin-bottom: 8px;
background: #fff;
cursor: grab;
transition: box-shadow 160ms ease, transform 120ms ease;
box-shadow: 0 1px 2px rgba(16,24,40,0.04);
display: flex;
align-items: center;
overflow: hidden;
}
.sort-item:hover {
box-shadow: 0 6px 18px rgba(16,24,40,0.08);
transform: translateY(-2px);
}
.sort-item.dragging {
opacity: 0.72;
transform: scale(0.99);
}
.sort-item-inner { width: 100%; display:flex; align-items:center; justify-content:space-between; }
.handle { width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:#909399; }
.sort-title .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drag-indicator { color: #c0c4cc; }
</style>
src/pages/platformapplications/platformapplications.vue
...@@ -14,7 +14,8 @@ ...@@ -14,7 +14,8 @@
separator="cell" separator="cell"
row-key="id" row-key="id"
:pagination.sync="serverPagination" :pagination.sync="serverPagination"
@request="request" :loading="loading" @request="request"
:loading="loading"
:rows-per-page-options="[5,10,20,30,40,50,60,200,500]" :rows-per-page-options="[5,10,20,30,40,50,60,200,500]"
:rows-per-page-label="$t('Rows per page')" :rows-per-page-label="$t('Rows per page')"
:no-data-label="$t('No data')"> :no-data-label="$t('No data')">
...@@ -22,7 +23,8 @@ ...@@ -22,7 +23,8 @@
<q-input v-model="filter.title" type="text" prefix="名称：" />&nbsp;&nbsp; <q-input v-model="filter.title" type="text" prefix="名称：" />&nbsp;&nbsp;
<!-- <q-input v-model="filter.name" type="text" :prefix="$t('Role code') + '：'" />&nbsp;&nbsp; --> <!-- <q-input v-model="filter.name" type="text" :prefix="$t('Role code') + '：'" />&nbsp;&nbsp; -->
<q-btn push dense color="primary" icon="search" @click="search">{{$t('Search')}}</q-btn>&nbsp;&nbsp; <q-btn push dense color="primary" icon="search" @click="search">{{$t('Search')}}</q-btn>&nbsp;&nbsp;
<q-btn push dense color="primary" icon="add" @click="addapp">{{$t('Add')}}</q-btn> <q-btn push dense color="primary" icon="add" @click="addapp">{{$t('Add')}}</q-btn>&nbsp;&nbsp;
<q-btn push dense color="secondary" icon="sort" @click="openSort">排序</q-btn>
</template> </template>
<template slot="top-right" slot-scope="props"> <template slot="top-right" slot-scope="props">
<q-btn flat round dense :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen" /> <q-btn flat round dense :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen" />
...@@ -76,6 +78,7 @@ ...@@ -76,6 +78,7 @@
:appidflag="appidflag" :appidflag="appidflag"
@saved="handleChildSaved" @saved="handleChildSaved"
/> />
<sort-applications v-model="sortModalVisible" @saved="search" ref="sortModal"/>
</div> </div>
</template> </template>
...@@ -120,7 +123,7 @@ ...@@ -120,7 +123,7 @@
label: '名称', label: '名称',
align: "left", align: "left",
field: "title", field: "title",
sortable: true sortable: false
}, },
{ {
name: "href", name: "href",
...@@ -128,7 +131,7 @@ ...@@ -128,7 +131,7 @@
label: '连接', label: '连接',
align: "left", align: "left",
field: "href", field: "href",
sortable: true sortable: false
}, },
{ {
name: "openmail", name: "openmail",
...@@ -136,7 +139,7 @@ ...@@ -136,7 +139,7 @@
label: '开启待办', label: '开启待办',
align: "left", align: "left",
field: "openmail", field: "openmail",
sortable: true, sortable: false,
format: function(val, row) { format: function(val, row) {
return val == 1 ? '启用' : '停用' return val == 1 ? '启用' : '停用'
} }
...@@ -147,7 +150,7 @@ ...@@ -147,7 +150,7 @@
label: '待办标识', label: '待办标识',
align: "left", align: "left",
field: "mailtype", field: "mailtype",
sortable: true sortable: false
}, },
{ {
name: "addtime", name: "addtime",
...@@ -155,7 +158,7 @@ ...@@ -155,7 +158,7 @@
label: '添加时间', label: '添加时间',
align: "left", align: "left",
field: "addtime", field: "addtime",
sortable: true sortable: false
}, },
{ {
name: "id", name: "id",
...@@ -163,7 +166,7 @@ ...@@ -163,7 +166,7 @@
label: '操作', label: '操作',
align: "left", align: "left",
field: "id", field: "id",
sortable: true sortable: false
}, },
], ],
filter: { filter: {
...@@ -178,6 +181,7 @@ ...@@ -178,6 +181,7 @@
appidflag:true, appidflag:true,
subtype: "add", subtype: "add",
fileCount: 0 fileCount: 0
,sortModalVisible: false
} }
}, },
mounted() { mounted() {
...@@ -187,7 +191,8 @@ ...@@ -187,7 +191,8 @@
}); });
}, },
components: { components: {
EditApplication: () => import('./EditApplication.vue') EditApplication: () => import('./EditApplication.vue'),
SortApplications: () => import('./SortApplications.vue')
}, },
methods: { methods: {
async request(props) { async request(props) {
...@@ -222,6 +227,9 @@ ...@@ -222,6 +227,9 @@
this.editModal = true; this.editModal = true;
this.appidflag = false; this.appidflag = false;
}, },
openSort() {
this.sortModalVisible = true;
},
// 保存由子组件处理，这里只负责刷新列表 // 保存由子组件处理，这里只负责刷新列表
handleChildSaved() { handleChildSaved() {
this.editModal = false; this.editModal = false;
......
src/service/permission/platformapplications.js
...@@ -25,3 +25,19 @@ export function delapp(id) { ...@@ -25,3 +25,19 @@ export function delapp(id) {
loading:"hourglass" loading:"hourglass"
}) })
} }
export function getAllApps() {
return request({
url: '/PlatformApplicationsController/platformapplications/listall',
method: 'get'
})
}
export function updateOrder(list) {
return request({
url: '/PlatformApplicationsController/platformapplications/updateOrder',
method: 'post',
data: list,
loading: "hourglass"
})
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论