smartai2dian0/src/modules/permission/role/DeptConfigModal.vue

<template>
  <a-modal width="50%" v-model:visible="visible" title="部门配置" @cancel="handleCancel" @ok="editDeptHandleOk">
    <div :style="{ display: 'flex' }">
      <a-card class="card-body" title="机构" hoverable>
        <a-tree :data="dept_list" v-model:checked-keys="checked_keys" v-model:expanded-keys="expand_keys"
          :checkable="true" :show-line="true" @check="onCheck" :fieldNames="{
            key: 'deptId',
            title: 'deptName',
            children: 'children',
          }">
        </a-tree>
      </a-card>
      <a-card class="card-body" title="角色所属部门">
        <a-space wrap>
          <a-tag v-for="item of check_strictly" :key="item.deptId">
            {{ item.deptName }}
          </a-tag>
        </a-space>
      </a-card>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, toRefs, watch } from 'vue';

// 定义组件的 props 和 emits
const props = defineProps({
  visible: Boolean,
  dept_list: {
    type: Array,
    default: () => []
  },
  record: {
    type: Object,
    default: false
  }
});

const { visible, dept_list, record } = toRefs(props);

const emit = defineEmits(['close', 'ok']);

// 组件内部状态
const checked_keys = ref([]);
// 默认展开第一节
const expand_keys = ref(['0']);
const check_strictly = ref([]);

// 递归取消所有子节点的选择
const cancelChildSelection = (node, selected_nodes) => {
  if (node.children && node.children.length > 0) {
    node.children.forEach(child => {
      const child_index = selected_nodes.findIndex(val => val.deptId === child.deptId);
      if (child_index !== -1) {
        // 取消子节点的选择
        selected_nodes.splice(child_index, 1);
        // 递归取消子节点的选择
        cancelChildSelection(child, selected_nodes);
      }
    });
  }
}

// 处理树形组件的勾选变化
const onCheck = (new_checked_keys, event) => {
  const o = { deptId: event.node.deptId, deptName: event.node.deptName };
  if (event.checked) {
    // 添加部门
    check_strictly.value.push(o);
  } else {
    // 移除部门
    const dept_index = check_strictly.value.findIndex((val) => val.deptId === event.node.deptId);
    check_strictly.value.splice(dept_index, 1);
    // 递归取消所有子节点的选择
    cancelChildSelection(event.node, check_strictly.value);
  }
};

// 处理取消事件
const handleCancel = () => {
  visible.value = false;
  emit('close');
};

// 处理确认事件
const editDeptHandleOk = () => {
  emit('ok', checked_keys.value);
};

watch(() => props.record, (newVal) => {
  if (newVal?.dept) {
    newVal.dept.forEach((val) => {
      check_strictly.value.push({
        deptId: val.deptId,
        deptName: val.deptName
      });
      checked_keys.value.push(val.deptId);
      expand_keys.value.push(val.deptId);
    });
  }
});
</script>

<style lang="css" scoped>
.card-body {
  width: 460px;
  height: 500px;
  overflow-y: auto;
}

.card-body:first-child {
  margin-right: 16px;
}
</style>