vue3 座位選座矩陣布局的實現(xiàn)方法(可點擊選中拖拽調(diào)換位置)

更新時間：2023年11月21日 11:14:53 作者：jaqqq-teng

由于公司項目需求需要做一個線上設(shè)置考場相關(guān)的座位布局用于給學(xué)生考機排號考試,實現(xiàn)教室考場座位布局的矩陣布局,可點擊選中標記是否有座無座拖拽調(diào)換位置橫向縱向排列,本文給大家分享實現(xiàn)代碼,一起看看吧

概述

由于公司項目需求需要做一個線上設(shè)置考場相關(guān)的座位布局用于給學(xué)生考機排號考試,實現(xiàn)教室考場座位布局的矩陣布局，可點擊選中標記是否有座無座拖拽調(diào)換位置橫向縱向排列,這塊的邏輯與ui網(wǎng)上很少有參考的價值,作者把這塊邏輯實現(xiàn)了供大家參考

提示:使用vue3+ts實現(xiàn),其邏輯原理也適用于其他技術(shù)棧
代碼邏輯也適用于電影選座矩陣布局等其他項目

先上效果

說明

以公司項目考場座位布局,實現(xiàn)新增矩陣布局需要把考場位置編號等信息通過調(diào)整位置標記座位是否有座橫向縱向排列等功能最后把所有修改后的位置數(shù)據(jù)提交給服務(wù)器。
具體需求如下圖:

詳細

思考如何html布局
如何生成矩陣、如何給座位標記,拖拽調(diào)整位置編號,排列橫向縱向,編輯座位布局時需要帶入后臺座位id標識等邏輯處理實現(xiàn)步驟思路

1. html布局

以左上角為軸,x軸從左到右方向為列 y軸從上到下為行代碼如下:例:x=8,y=8

<div v-for="(row, rowX) in 8" :key="row" class="x">
   <div class="y">
      <div v-for="(column, columnY) in 8" :key="column" class="site-item">
       {{ `${rowX}, ${columnY}` }}
      </div>
   </div>
</div>

通過html布局,座位有對應(yīng)的(x,y)坐標,那么對應(yīng)的有座無座標記只是控制div背景顯示隱藏,對應(yīng)的拖拽換位編輯以及代入的座位數(shù)據(jù)給服務(wù)器都是操作的數(shù)據(jù)源

2. 生成矩陣

代碼生成(x,y)坐標數(shù)據(jù)源model對象數(shù)組 縱向布局

type SiteModel = {
    x: number
    y: number
    seatNo: number //座位號 == 如果沒有賦值為無座
    seatId: '' | number //后臺生成的id編號
    status?: number //座位狀態(tài)
}
const sites:Array<SiteModel> = []
for (let x = 0; x < 8; x++) {
    for (let y = 0; y < 8; y++) {
        sites.push({ x: x, y: y, seatNo: i + 1, seatId: '' })
    }
}

注:這里的數(shù)據(jù)源為8*8的縱向布局數(shù)據(jù)并且數(shù)據(jù)都有座

3. 座位標記

有座無座因后臺只接受有座位的坐標數(shù)據(jù),因此獲取到數(shù)據(jù)源后標記無座需要刪除數(shù)據(jù)對應(yīng)的model對象,同理點擊div標記有座時需要在數(shù)據(jù)源插入應(yīng)用的此div坐標的model對象

以下思路:

1. 創(chuàng)建數(shù)據(jù)源對象數(shù)組時設(shè)置一個Map集合將mode對象中的x,y作為鍵,對象設(shè)置為值 設(shè)置Map是在html布局中需要獲取model對象,不設(shè)置Map也能實現(xiàn),通過x,y坐標去遍歷循環(huán)坐標數(shù)據(jù)源但這種方式對性能消耗很大

代碼如下:

const _map: Map<string, ExamSiteType> = new Map(); //全局定義一個_map對象
    生成矩陣代碼...
  _map.clear()
  sites.value.forEach((item) => {
    _map.set(`${item.x},${item.y}`, item)
  })

2.有了_map數(shù)據(jù)集合后,就可以在html布局中實現(xiàn)div點擊事件傳入x,y代碼’標記無座’|'標記有座’邏輯

const didSeletedItemAction = ( x: number, y: number) => {
        if (!_map.value.get(`${x},${y}`)) { //添加
           sites.value.push({ x: x, y: y, seatNo: 0, seatId: '' })
        } else { //刪除..
           const item = _map.get(`${x},${y}`)
            if (item)
                sites.value.splice(examsits.value.indexOf(item), 1)
        }
}

3.拖拽調(diào)整位置編號

這里需要獲取拖拽相關(guān)事件邏輯,最后只是在拖拽的div以及拖拽到的目標上調(diào)換model對象的seatNo編號

實現(xiàn)拖拽相關(guān)代碼
定義starTarget開始拖拽的坐標{x,y}對象以及拖拽后的目標對象dropTarget

const starTarget = ref({ x: 0, y: 0 })
const dropTarget = ref({ x: 0, y: 0 })

設(shè)置html中draggable=true 綁定事件dragstart dragend drop

//html布局中
<div v-for="(row, rowX) in 8" :key="row" class="x">
   <div class="y">
      <div v-for="(column, columnY) in 8" :key="column" class="site-item" draggable @dragstart="dragStart($event, rowX, columnY)" @dragend="dragEnd($event, rowX, columnY)" @drop="drop($event, rowX, columnY)">
       {{ `${rowX}, ${columnY}` }}
      </div>
   </div>
</div>
<script setup lang="ts">
function dragStart(event: MouseEvent, x: number, y: number) {
            starTarget.value.x = x
            starTarget.value.y = y
}
function dragEnd(event: MouseEvent, x: number, y: number) {
            starTarget.value.x = 0
            starTarget.value.y = 0
}
function drop(event: MouseEvent, x: number, y: number) {
            if (_map.value.get(`${x},${y}`)) {
                dropTarget.value.x = x
                dropTarget.value.y = y
                changeTarget()
            }
}
const changeTarget = () => {
        const site = _map.value.get(`${starTarget.value.x},${starTarget.value.y}`)
        const dropSite = _map.value.get(`${dropTarget.value.x},${dropTarget.value.y}`)
        if (site && dropSite) {
            const temp = site.seatNo
            site.seatNo = dropSite?.seatNo
            dropSite.seatNo = temp
        }
}
</script>

排列橫向縱向

切換橫向縱向布局主要理解到html布局與div上的x,y坐標是不變的,變化的只是座位號碼,故:只需要操作坐標對象的數(shù)組通過排序以x (0,0)(1,0),(2,0)... 以y(0,0)(0,1)(0,2)的排列給坐標對象重新設(shè)置編號即可

const x_layout = ref(false) //定義是否是橫向布局ref
生成矩陣代碼...
if (x_layout.value) {
    sites.value.sort((a, b) => {
        if (a.y !== b.y) {
            return a.y - b.y;
        } else {
            return a.x - b.x;
         }
    })
} else {
    sites.value.sort((a, b) => {
        if (a.x !== b.x) {
            return a.x - b.x;
        } else {
        return a.y - b.y;
       }
    })
}
//通過排序,重新賦值座位編號
for (let index = 0; index < sites.value.length; index++) {
    const item = sites.value[index];
    item.seatNo = index + 1
}

編輯后臺返回數(shù)據(jù)源時

這里拿到后臺返回的數(shù)據(jù)源遍歷循環(huán)通過_map集合的鍵(x,y)找到model并賦值id即可

if (props.item.examSites) { //后臺服務(wù)器數(shù)據(jù)
    props.item.examSites.forEach((item) => {
        const site = _map.get(`${item.x},${item.y}`)
        if (site) {
            site.seatId = item.seatId
        }
    })
}

最后html布局代碼
通過_map集合獲取(x,y)是否有值動態(tài)賦值class控制顯隱即可最近發(fā)現(xiàn)不少童鞋私信我源碼,這里我把核心源碼提供出來參考,其余核心參考上面邏輯代碼即可

代碼點擊頂部即可下載 注:部分邏輯已刪除(刪除的代碼參考文章上面的邏輯即可),代碼可根據(jù)需求自行修改

代碼使用釋列

//使用3 種方式參考:
<ExamLayout :items="datas" :type="1" :map="_map"></ExamLayout>
<ExamLayout :items="datas" :type="2" :map="_map" :call-back="editExamItem"></ExamLayout>
<ExamLayout :items="datas" :type="3" :map="_map" ></ExamLayout>
-----------------------------解釋用法:----------------------------------
使用 `ExamLayout`組件
type //1不能編輯 2可標記無座有座 3可拖拽座位
傳入的數(shù)據(jù)源 datas 參考上面邏輯代碼
type ExamSiteType = {
    coordinateX: number //x坐標位置
    coordinateY: number //y坐標位置
    seatNo: number //座位號  == 如果沒有賦值為無座
    seatId: '' | number //真實的考試機器坐標位置
    status?: number //座位考試狀態(tài)  被舉報 異常 死機等
}
// 數(shù)據(jù)源1
const datas = ref<Array<ExamSiteType>>([
])
// 初始化 數(shù)據(jù)源 如8行8列 總機考數(shù) 16臺
function initExamData() {
    const row: number = 4
    const column = 4
    const total = 16
    examsits.value = []
    let i = 0
    for (let x = 0; x < row; x++) {
        for (let y = 0; y < column; y++) {
            if (i < total) {
                datas.value.push({ coordinateX: x, coordinateY: y, seatNo: i + 1, seatId: '' })
                i++
            }
        }
    }
}
initExamData()

到此這篇關(guān)于vue3 座位選座,矩陣布局，可點擊選中拖拽調(diào)換位置的文章就介紹到這了,更多相關(guān)vue3矩陣布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: