vue3 座位选座矩阵布局的实现方法(可点击选中拖拽调换位置)

<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>

type SiteModel = {
    x: number
    y: number
    seatNo: number //座位号 == 如果没有赋值为无座
    seatId: '' | number //后台生成的id编号
    status?: number //座位状态
}
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: '' })
    }
}

const _map: Map<string, ExamSiteType> = new Map(); //全局定义一个_map对象
    生成矩阵代码...
  _map.clear()
  sites.value.forEach((item) => {
    _map.set(`${item.x},${item.y}`, item)
  })

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)
        }
}

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

//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>

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
}

if (props.item.examSites) { //后台服务器数据
    props.item.examSites.forEach((item) => {
        const site = _map.get(`${item.x},${item.y}`)
        if (site) {
            site.seatId = item.seatId
        }
    })
}

//使用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可拖拽座位
传入的数据源 datas 参考上面逻辑代码
type ExamSiteType = {
    coordinateX: number //x坐标位置
    coordinateY: number //y坐标位置
    seatNo: number //座位号  == 如果没有赋值为无座
    seatId: '' | number //真实的考试机器坐标位置
    status?: number //座位考试状态  被举报 异常 死机等
}
// 数据源1
const datas = ref<Array<ExamSiteType>>([
])
// 初始化 数据源 如8行8列 总机考数 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()