vue实现关系分配页面

Vue 实现关系分配页面的方法

数据结构设计

使用嵌套对象或数组存储关系数据，例如：

data() {
  return {
    relations: [
      { id: 1, name: '用户组A', members: [] },
      { id: 2, name: '用户组B', members: [] }
    ],
    availableUsers: [
      { id: 101, name: '用户1' },
      { id: 102, name: '用户2' }
    ]
  }
}

拖拽功能实现

安装vuedraggable库实现拖拽分配：

npm install vuedraggable

组件中使用：

<template>
  <draggable 
    v-model="group.members" 
    group="users" 
    @end="onDragEnd">
    <!-- 用户列表渲染 -->
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: { draggable }
}
</script>

双向绑定与状态管理

对于复杂关系分配，建议使用Vuex管理状态：

// store.js
state: {
  relationMap: new Map() // 使用Map存储关系
},
mutations: {
  UPDATE_RELATION(state, { groupId, userIds }) {
    state.relationMap.set(groupId, userIds)
  }
}

可视化展示

使用Element UI等库构建界面：

<el-transfer
  v-model="selectedUsers"
  :data="availableUsers"
  :titles="['待分配', '已分配']"
  @change="handleChange">
</el-transfer>

数据持久化

实现保存功能：

methods: {
  saveRelations() {
    axios.post('/api/relations', this.relations)
      .then(() => this.$message.success('保存成功'))
  }
}

权限校验

添加分配权限验证：

computed: {
  editable() {
    return this.$store.state.user.role === 'admin'
  }
}

响应式布局

使用CSS Grid或Flexbox确保页面适应不同设备：

.relation-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}