แก้ไขทะเบียน ===> fix DragandDrop
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
77455843f0
commit
96c58e6fe0
1 changed files with 135 additions and 84 deletions
|
|
@ -40,14 +40,14 @@ const profileId = ref<string>(route.params.id.toString()); //id profile
|
|||
/** ข้อมูล Table*/
|
||||
const rowsData = ref<DataPosition[]>([]);
|
||||
|
||||
/**
|
||||
* fiunction จัดลำดับ
|
||||
* @param from ตำแหน่งปัจุบัน
|
||||
* @param to ตำแหน่งที่จะย้ายไป
|
||||
*/
|
||||
function onDrop(from: number, to: number) {
|
||||
rowsData.value.splice(to - 1, 0, rowsData.value.splice(from - 1, 1)[0]);
|
||||
}
|
||||
// /**
|
||||
// * fiunction จัดลำดับ
|
||||
// * @param from ตำแหน่งปัจุบัน
|
||||
// * @param to ตำแหน่งที่จะย้ายไป
|
||||
// */
|
||||
// function onDrop(from: number, to: number) {
|
||||
// rowsData.value.splice(to - 1, 0, rowsData.value.splice(from - 1, 1)[0]);
|
||||
// }
|
||||
|
||||
/** function บันทึกการจัดลำดับ*/
|
||||
function onSubmit() {
|
||||
|
|
@ -72,6 +72,62 @@ function onSubmit() {
|
|||
});
|
||||
}
|
||||
|
||||
let draggedIndex = -1; // index ของ item ที่ถูก drag
|
||||
const cardSectionRef = ref<HTMLElement | null>(null); // ref สำหรับ container ที่จะ scroll
|
||||
|
||||
/**
|
||||
* ฟังก์ชันนี้ใช้สำหรับการ drag item
|
||||
* @param index index ของ item ที่ถูก drag
|
||||
*/
|
||||
function onDragStart(index: number) {
|
||||
//จะทำการ set draggedIndex เป็น index ที่ถูก drag
|
||||
draggedIndex = index;
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันนี้ใช้สำหรับการ drop item
|
||||
* @param targetIndex index ที่จะ drop
|
||||
*/
|
||||
function onDrop(targetIndex: number) {
|
||||
// ถ้า draggedIndex เป็น -1 หรือ draggedIndex เท่ากับ targetIndex จะไม่ทำอะไร
|
||||
if (draggedIndex === -1 || draggedIndex === targetIndex) return;
|
||||
// ถ้า draggedIndex ไม่เท่ากับ targetIndex จะทำการย้าย item
|
||||
const item = rowsData.value.splice(draggedIndex, 1)[0];
|
||||
rowsData.value.splice(targetIndex, 0, item);
|
||||
draggedIndex = -1;
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันนี้ใช้สำหรับการเลื่อน scroll ของ container
|
||||
* @param e DragEvent
|
||||
* @description ทำให้ scroll container ได้เวลา drag อยู่ใกล้ขอบ
|
||||
*/
|
||||
function onDragOver(e: DragEvent) {
|
||||
let container = cardSectionRef.value;
|
||||
// ถ้าเป็น vue proxy ให้ใช้ container.$el
|
||||
if (container && (container as any).$el) {
|
||||
container = (container as any).$el;
|
||||
}
|
||||
// ถ้า container ไม่ใช่ HTMLElement ให้แสดง warning
|
||||
if (
|
||||
!container ||
|
||||
typeof (container as HTMLElement).getBoundingClientRect !== "function"
|
||||
) {
|
||||
console.warn("container is not HTMLElement:", container);
|
||||
return;
|
||||
}
|
||||
const rect = (container as HTMLElement).getBoundingClientRect();
|
||||
const offset = 40; // ระยะห่างจากขอบที่ต้องการให้ scroll
|
||||
const scrollSpeed = 30; // ความเร็วในการ scroll
|
||||
|
||||
// ถ้า mouse อยู่ใกล้ขอบบนหรือขอบล่างของ container ให้ scroll
|
||||
if (e.clientY < rect.top + offset) {
|
||||
(container as HTMLElement).scrollTop -= scrollSpeed;
|
||||
} else if (e.clientY > rect.bottom - offset) {
|
||||
(container as HTMLElement).scrollTop += scrollSpeed;
|
||||
}
|
||||
}
|
||||
|
||||
watch(modal, async () => {
|
||||
if (modal.value && props.dataSort) {
|
||||
const dataList = props.dataSort;
|
||||
|
|
@ -82,82 +138,77 @@ watch(modal, async () => {
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent full-width>
|
||||
<q-card style="min-width: 80vw">
|
||||
<DialogHeader :tittle="`จัดลำดับการ`" :close="() => (modal = false)" />
|
||||
<q-separator />
|
||||
<q-card-section style="max-height: 70vh" class="scroll">
|
||||
<q-table
|
||||
class="custom-header-table"
|
||||
v-if="rowsData.length > 0"
|
||||
v-draggable-table="{
|
||||
options: {
|
||||
mode: 'row',
|
||||
onlyBody: true,
|
||||
dragHandler: 'td',
|
||||
},
|
||||
onDrop,
|
||||
}"
|
||||
flat
|
||||
bordered
|
||||
:rows="rowsData"
|
||||
:columns="columns"
|
||||
:rows-per-page-options="[0]"
|
||||
row-key="id"
|
||||
hide-bottom
|
||||
hide-pagination
|
||||
>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-for="col in props.cols" :key="col.id">
|
||||
<div v-if="col.name === 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="col.name === 'organization'"
|
||||
class="text-html"
|
||||
>
|
||||
{{
|
||||
findOrgNameHtml({
|
||||
root: props.row.orgRoot,
|
||||
child1: props.row.orgChild1,
|
||||
child2: props.row.orgChild2,
|
||||
child3: props.row.orgChild3,
|
||||
child4: props.row.orgChild4,
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
|
||||
<div v-else-if="col.name === 'commandCode'">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
<div v-else class="bg-grey-1 text-center q-pa-md">ไม่มีข้อมูล</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
:disable="rowsData.length === 0"
|
||||
type="submit"
|
||||
:label="`บันทึก`"
|
||||
color="public"
|
||||
@click="onSubmit"
|
||||
>
|
||||
<q-tooltip>บันทึก</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
<q-dialog v-model="modal" persistent full-width>
|
||||
<q-card style="min-width: 80vw">
|
||||
<DialogHeader :tittle="`จัดลำดับการ`" :close="() => (modal = false)" />
|
||||
<q-separator />
|
||||
<q-card-section
|
||||
ref="cardSectionRef"
|
||||
style="max-height: 70vh; overflow-y: auto"
|
||||
@dragover.prevent="onDragOver"
|
||||
>
|
||||
<q-table
|
||||
class="custom-header-table"
|
||||
v-if="rowsData.length > 0"
|
||||
flat
|
||||
bordered
|
||||
:rows="rowsData"
|
||||
:columns="columns"
|
||||
:rows-per-page-options="[0]"
|
||||
row-key="id"
|
||||
hide-bottom
|
||||
hide-pagination
|
||||
>
|
||||
<template v-slot:body="props">
|
||||
<q-tr
|
||||
:props="props"
|
||||
draggable="true"
|
||||
@dragstart="onDragStart(props.rowIndex)"
|
||||
@drop="onDrop(props.rowIndex)"
|
||||
@dragover.prevent.stop="onDragOver"
|
||||
style="cursor: move"
|
||||
>
|
||||
<q-td v-for="col in props.cols" :key="col.id">
|
||||
<div v-if="col.name === 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'organization'" class="text-html">
|
||||
{{
|
||||
findOrgNameHtml({
|
||||
root: props.row.orgRoot,
|
||||
child1: props.row.orgChild1,
|
||||
child2: props.row.orgChild2,
|
||||
child3: props.row.orgChild3,
|
||||
child4: props.row.orgChild4,
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'commandCode'">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
<div v-else class="bg-grey-1 text-center q-pa-md">ไม่มีข้อมูล</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
:disable="rowsData.length === 0"
|
||||
type="submit"
|
||||
:label="`บันทึก`"
|
||||
color="public"
|
||||
@click="onSubmit"
|
||||
>
|
||||
<q-tooltip>บันทึก</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss"></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue