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

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

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

概述

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

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

先上效果

說(shuō)明

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

詳細(xì)

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

1. html布局

以左上角為軸,x軸從左到右方向?yàn)榱?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>

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

2. 生成矩陣

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

type SiteModel = {
    x: number
    y: number
    seatNo: number //座位號(hào) == 如果沒(méi)有賦值為無(wú)座
    seatId: '' | number //后臺(tái)生成的id編號(hào)
    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的縱向布局?jǐn)?shù)據(jù)并且數(shù)據(jù)都有座

3. 座位標(biāo)記

有座無(wú)座因后臺(tái)只接受有座位的坐標(biāo)數(shù)據(jù),因此獲取到數(shù)據(jù)源后標(biāo)記無(wú)座需要?jiǎng)h除數(shù)據(jù)對(duì)應(yīng)的model對(duì)象,同理點(diǎn)擊div標(biāo)記有座時(shí)需要在數(shù)據(jù)源插入應(yīng)用的此div坐標(biāo)的model對(duì)象

以下思路:

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

代碼如下:

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

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

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)整位置編號(hào)

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

實(shí)現(xiàn)拖拽相關(guān)代碼
定義starTarget開(kāi)始拖拽的坐標(biāo){x,y}對(duì)象以及拖拽后的目標(biāo)對(duì)象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坐標(biāo)是不變的,變化的只是座位號(hào)碼,故:只需要操作坐標(biāo)對(duì)象的數(shù)組通過(guò)排序以x (0,0)(1,0),(2,0)... 以y(0,0)(0,1)(0,2)的排列給坐標(biāo)對(duì)象重新設(shè)置編號(hào)即可

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;
       }
    })
}
//通過(guò)排序,重新賦值座位編號(hào)
for (let index = 0; index < sites.value.length; index++) {
    const item = sites.value[index];
    item.seatNo = index + 1
}

編輯后臺(tái)返回?cái)?shù)據(jù)源時(shí)

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

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

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

代碼點(diǎ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可標(biāo)記無(wú)座有座 3可拖拽座位
傳入的數(shù)據(jù)源 datas 參考上面邏輯代碼
type ExamSiteType = {
    coordinateX: number //x坐標(biāo)位置
    coordinateY: number //y坐標(biāo)位置
    seatNo: number //座位號(hào)  == 如果沒(méi)有賦值為無(wú)座
    seatId: '' | number //真實(shí)的考試機(jī)器坐標(biāo)位置
    status?: number //座位考試狀態(tài)  被舉報(bào) 異常 死機(jī)等
}
// 數(shù)據(jù)源1
const datas = ref<Array<ExamSiteType>>([
])
// 初始化 數(shù)據(jù)源 如8行8列 總機(jī)考數(shù) 16臺(tái)
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ǎn)擊選中拖拽調(diào)換位置的文章就介紹到這了,更多相關(guān)vue3矩陣布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: