template div class=layout div class=left div class=left-top div class=drag-item draggable=true dragstart=dragStart分页分页div div class=drag-item draggable=true dragstart=dragStart延

<template>
  <div class="layout">
    <div class="left">
      <div class="left-top">
        <div class="drag-item" draggable="true" @dragstart="dragStart('分页')">分页</div>
        <div class="drag-item" draggable="true" @dragstart="dragStart('延时')">延时</div>
        <div class="drag-item" draggable="true" @dragstart="dragStart('补数据')">补数据</div>
      </div>
      <div class="left-bottom">
        <div v-for="(item, index) in leftBottomItems" :key="index">
          <input type="checkbox" v-model="checkedItems[index]">
          {{ item }}
        </div>
      </div>
      <button @click="showSelectedItems">显示选中项</button>
    </div>
    <div class="center" @dragover="dragOver" @drop="drop">
      <div class="center-top">
        <div v-for="(item, index) in centerItems" class="center-item" :key="index">{{ item }}</div>
      </div>
      <div class="center-bottom">Center Bottom</div>
    </div>
    <div class="right">
      Right
      <div class="right-bottom">Right Bottom</div>
    </div>
  </div>
  <dialog ref="dialog" class="custom-dialog">
    <form @submit="handleSubmit">
      <label v-if="dialogType === '分页'">
        姓名:
        <input type="text" v-model="name" required>
      </label>
      <label v-if="dialogType === '分页'">
        年龄:
        <input type="number" v-model="age" required>
      </label>
      <label v-if="dialogType === '分页'">
        性别:
        <select v-model="gender" required>
          <option value="">请选择</option>
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </label>
      <label v-if="dialogType === '延时'">
        地址:
        <input type="text" v-model="address" required>
      </label>
      <label v-if="dialogType === '延时'">
        车牌:
        <input type="text" v-model="licensePlate" required>
      </label>
      <label v-if="dialogType === '延时'">
        是否在校:
        <input type="checkbox" v-model="inSchool">
      </label>
      <button type="submit">确认</button>
    </form>
  </dialog>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'App',
  data() {
    return {
      centerItems: [] as string[],
      isDragging: false,
      draggedItem: '',
      dialogType: '',
      name: '',
      age: '',
      gender: '',
      address: '',
      licensePlate: '',
      inSchool: false,
      leftBottomItems: [] as string[],
      checkedItems: [] as boolean[],
      leftBottomIndex: 1,
    };
  },
  methods: {
    dragStart(itemName: string) {
      this.isDragging = true;
      this.draggedItem = itemName;
    },
    dragOver(event: DragEvent) {
      event.preventDefault();
    },
    drop(event: DragEvent) {
      event.preventDefault();
      if (this.isDragging) {
        this.isDragging = false;
        this.dialogType = this.draggedItem;
        (this.$refs.dialog as any).showModal();

        this.leftBottomItems.push(`${this.leftBottomIndex}: ${this.dialogType}`);
        this.checkedItems.push(false);
        this.leftBottomIndex++;
      }
    },
    handleSubmit(event: Event) {
      event.preventDefault();
      if (this.dialogType === '分页') {
        if (this.name && this.age && this.gender) {
          this.centerItems.push(`${this.dialogType} - ${this.name}, ${this.age}, ${this.gender}`);
        }
      } else if (this.dialogType === '延时') {
        if (this.address && this.licensePlate) {
          this.centerItems.push(`${this.dialogType} - ${this.address}, ${this.licensePlate}, ${this.inSchool ? '在校' : '不在校'}`);
        }
      }
      this.resetForm();
      (this.$refs.dialog as any).close(); // 关闭对话框
    },
    resetForm() {
      this.name = '';
      this.age = '';
      this.gender = '';
      this.address = '';
      this.licensePlate = '';
      this.inSchool = false;
    },
    showSelectedItems() {
      const selectedItems: string[] = [];
      this.checkedItems.forEach((checked, index) => {
        if (checked) {
          selectedItems.push(this.leftBottomItems[index]);
        }
      });
      alert(selectedItems.join('\n'));
    },
  },
});
</script