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

<template>
  <a-modal width="50%" v-model:visible="visible" :title="$t('permission.account.dept_config')" @cancel="handleCancel"
    @ok="editDeptHandleOk">
    <div style="display: flex;">
      <a-card class="card-body" :title="$t('permission.account.organization')" hoverable>
        <a-tree :data="dept_list" v-model:checked-keys="checked_keys" v-model:expanded-keys="expand_keys"
          :checkable="true" :check-strictly="true" :show-line="true" @check="onCheck" :fieldNames="{
            key: 'deptId',
            title: 'deptName',
            children: 'children',
          }">
        </a-tree>
      </a-card>
      <a-card class="card-body" :title="$t('permission.account.user_department')">
        <a-space wrap>
          <a-tag v-for="item of check_strictly" :key="item.deptId">
            {{ item.deptName }}
          </a-tag>
        </a-space>
        <a-divider />
        <div style="margin-bottom: 8px;">{{ $t('permission.account.department_roles') }}:</div>
        <a-space wrap>
          <a-tag v-for="item of check_strictly_dept_role" :key="item.roleId" color="arcoblue">
            {{ item.roleName }}
          </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: () => []
  },
  dept_detail: {
    type: Object,
    default: () => []
  }
});

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

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

// 组件内部状态
const checked_keys = ref([]);
// 默认展开第一节
const expand_keys = ref(['0']);
const check_strictly = ref([]);
const check_strictly_dept_role = 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);
      }
    });
  }
}
// FIXME：选择和取消选择的bug
// 处理树形组件的勾选变化
const onCheck = (new_checked_keys, event) => {
  const o = { deptId: event.node.deptId, deptName: event.node.deptName };
  if (event.checked) {
    // 添加部门角色
    event.node.roles.forEach((val) => {
      // 检查是否已经存在相同的 roleId，如果不存在则添加
      const exists = check_strictly_dept_role.value.some((role) => role.roleId === val.roleId);
      if (!exists) {
        check_strictly_dept_role.value.push(val);
      }
    });
    // 添加部门
    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);
    // 移除部门角色
    const role_index = check_strictly_dept_role.value.findIndex((val) => val.deptId === event.node.deptId);
    check_strictly_dept_role.value.splice(role_index, 1);
    // 递归取消所有子节点的选择
    cancelChildSelection(event.node, check_strictly.value);
  }
};

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

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

watch(() => props.dept_detail, (newVal) => {
  if (newVal.length > 0) {
    newVal.forEach(val => {
      if (!checked_keys.value.includes(val.deptId)) {
        check_strictly.value.push({
          deptId: val.deptId,
          deptName: val.deptName
        });
        checked_keys.value.push(val.deptId);
        expand_keys.value.push(val.deptId);
      }

      val.roles.forEach((role) => {
        // 判断是否存在同样的 roleId，如果不存在则添加
        if (!check_strictly_dept_role.value.some(item => item.roleId === role.roleId)) {
          check_strictly_dept_role.value.push({
            roleId: role.roleId,
            roleName: role.roleName,
            deptId: val.deptId
          });
        }
      });
    });
  } else {
    checked_keys.value = [];
    expand_keys.value = [];
    check_strictly.value = [];
    check_strictly_dept_role.value = [];
  }
});
</script>

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

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