sgxt_web/src/views/backOfficeSystem/JudgmentHome/tsypHome/components/regulation.vue

<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">{{ title }}规则 </span>
      <div>
        <el-button type="primary" size="small" :loading="loading" @click="submit" v-show="title != '详情'">保存</el-button>
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="form_cnt">
      <VueDraggable    @update="onUpdate"
      @add="onAdd"
      @remove="remove">
        <el-button type="primary"  v-for="(item,index) in listBut" :key="index">{{ item }}</el-button>
      </VueDraggable>
      <VueDraggable>
        <el-button type="primary"  v-for="(item,index) in listBut" :key="index">{{ item }}</el-button>
      </VueDraggable>
      </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import FormMessage from "@/components/aboutTable/FormMessage.vue";
// import { VueDraggable } from 'vue-draggable-plus'
const dialogForm = ref(false)
const title = ref("新增")
const init = (type, row) => {
  dialogForm.value = true
  if (type == 'edit') {
    title.value = "编辑"
  } else if (type == 'add') {
    title.value = "新增"
  } else {
    title.value = "详情"
  }
}

const loading = ref(false)
// 新增
const submit = () => {
  loading.value = true
}
const listBut = ref(["物品", "人员", "组织", "次数", "事件", "地点", "整情"])
// 关闭
const close = () => {
  dialogForm.value = false
}

const onUpdate = (evt) => {
  console.log(evt)
}
// 新增
const onAdd = (evt) => {
  console.log(evt)
}
// 删除
const remove = (evt) => {
  console.log(evt)
}
defineExpose({
  init
})
</script>

<style lang="scss" scoped></style>