|
@@ -0,0 +1,87 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <draggable :list="myArray" item-key="id" chosen-class="chosen" style="height: 100%" @start="dragging = true" @end="endDraggableEv">
|
|
|
+ <template #item="{ element }">
|
|
|
+ <div class="group_list">
|
|
|
+ <div class="group_header flex flex-pack-justify flex-align-center">
|
|
|
+ <div class="group_header_title">{{ element.name }}</div>
|
|
|
+ <div class="group_header_nameOperate">
|
|
|
+ <el-tooltip effect="dark" content="删除" placement="top">
|
|
|
+ <el-icon><Delete @click="deleteItem" /></el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </draggable>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="tsx" setup>
|
|
|
+import Draggable from 'vuedraggable'
|
|
|
+import { Delete } from '@element-plus/icons-vue'
|
|
|
+import { ref } from 'vue'
|
|
|
+import { ElMessageBox } from 'element-plus'
|
|
|
+const dragging = ref(false)
|
|
|
+const myArray = ref([
|
|
|
+ { name: '考勤', id: 1 },
|
|
|
+ { name: '人事', id: 2 },
|
|
|
+ { name: '财务', id: 3 },
|
|
|
+ { name: '行政', id: 4 }
|
|
|
+])
|
|
|
+
|
|
|
+const endDraggableEv = () => {
|
|
|
+ dragging.value = false
|
|
|
+ console.log(myArray.value)
|
|
|
+}
|
|
|
+
|
|
|
+const deleteItem = () => {
|
|
|
+ ElMessageBox.confirm('无法删除,请先删除组内的审批', '删除', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'error'
|
|
|
+ }).then(() => {})
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.group_list {
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: rgb(238, 238, 238) 0px 0px 3px 1px;
|
|
|
+ background-color: rgb(255, 255, 255);
|
|
|
+ font-family: PingFangSC-Regular;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ cursor: move;
|
|
|
+ .group_header {
|
|
|
+ height: 54px;
|
|
|
+ padding: 0px 16px 0px 12px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: rgb(37, 40, 52);
|
|
|
+ background-color: rgba(244, 245, 246, 0.5);
|
|
|
+ &_title {
|
|
|
+ position: relative;
|
|
|
+ font-family: PingFangSC-Medium;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: rgba(0, 0, 0, 0.25);
|
|
|
+ }
|
|
|
+ &_nameOperate {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/*被拖拽对象的样式*/
|
|
|
+.item {
|
|
|
+ padding: 6px;
|
|
|
+ background-color: #fdfdfd;
|
|
|
+ border: solid 1px #eee;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ cursor: move;
|
|
|
+}
|
|
|
+/*选中样式*/
|
|
|
+.chosen {
|
|
|
+ // border: solid 1px #3089dc !important;
|
|
|
+}
|
|
|
+</style>
|