smartai2dian0/src/modules/permission/account/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_kdys"
          :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="(tag, index) of check_strictly" :key="tag.deptId">
            {{ tag.deptName }}
          </a-tag>
        </a-space>
        <a-divider />
        <div style="margin-bottom: 8px;">部门角色:</div>
        <a-space wrap>
          <a-tag v-for="(tag, index) of check_strictly_dept_role" :key="tag.roleId" color="arcoblue">
            {{ tag.roleName }}
          </a-tag>
        </a-space>
      </a-card>
    </div>
  </a-modal>
</template>

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

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

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

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

// 组件内部状态
const checked_keys = ref([]);
// 默认展开第一节
const expand_kdys = 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);
      }
    });
  }
}

// 处理树形组件的勾选变化
const onCheck = (new_checked_keys, event) => {
  const o = { deptId: event.node.deptId, deptName: event.node.deptName };
  if (event.checked) {
    // 添加部门角色
    event.node.roles.forEach((val) => {
      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: checked_keys.value });
};

onMounted(() => {
  // 处理传入的部门数据
  if (record?.dept) {
    record.dept.forEach((val) => {
      check_strictly.value.push({
        deptId: val.deptId,
        deptName: val.deptName
      });
      checked_keys.value.push(val.deptId);
      expand_kdys.value.push(val.deptId);
      record.roles.forEach(
        (r) => {
          if (r.dept) {
            r.dept.forEach((d) => {
              if (d.deptId == val.deptId) {
                check_strictly_dept_role.value.push({
                  roleId: r.roleId,
                  roleName: r.roleName,
                  deptId: d.deptId,
                });
              }
            });
          }
        }
      );
    });
  }
});
</script>

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

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