hospital-project/src/views/background/framework/roles/components/addPerson.vue

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { postAssignmentUser } from "@/api/userSetting";
import { treeDept, postListTreeWithUserApi } from "@/api/department";
const dialogVisibleAdd = ref(false);

const $emit = defineEmits(["handeClick"]);
const form = reactive({
  sourceCodes: [],
  targetCodes: [],
  linkAction: "link",
  correlatedModel: "userRole"
});
// const treeRef = ref();
const filterText = ref("");
const handleClose = () => {
  dialogVisibleAdd.value = !dialogVisibleAdd.value;
};
// 添加部门保存
const saveDepartment = () => {
  if (form.sourceCodes.length > 0) {
    postAssignmentUserApi();
  } else {
    ElMessage.error("请选择人员");
  }
};
const open = item => {
  form.sourceCodes = [];
  form.targetCodes = [];
  dialogVisibleAdd.value = true;
  postListTreeWithUserApi();
  // form.sourceCodes.push(item.roleCode);
  form.targetCodes.push(item.roleCode);
  filterText.value = "";
};
const postAssignmentUserApi = async () => {
  // 清除为null的数据
  let sourceCodes = [];
  form.sourceCodes.map(item => {
    if (item) {
      sourceCodes.push(item);
    }
  });
  form.sourceCodes = sourceCodes;
  const { code, msg } = await postAssignmentUser(form);
  if (code === 200) {
    ElMessage({
      message: "添加成功",
      type: "success"
    });
    $emit("handeClick");
    dialogVisibleAdd.value = false;
  } else {
    // ElMessage({
    //   message: msg,
    //   type: "error"
    // });
  }
};
// 树选择
const handleCheck = (node, checked) => {
  console.log("树选择", node, checked);
  form.sourceCodes = [];
  checked.checkedNodes.forEach(item => {
    form.sourceCodes.push(item.userCode);
  });
  // form.targetCodes = [];
  // checked.checkedNodes.forEach(item => {
  //   form.targetCodes.push(item.userCode);
  // });
};
defineExpose({
  open
});
// ---------------------
const treeRef = ref();

watch(filterText, val => {
  treeRef.value!.filter(val);
});

const filterNode = (value: string, data: any) => {
  if (!value) return true; // 如果没有过滤关键词，显示所有节点
  return data.userNameNew && data.userNameNew.includes(value); // 使用 userName 进行匹配
};

const defaultProps = {
  label: "userNameNew",
  value: "userCodeNew",
  children: "children"
};
</script>

<template>
  <div>
    <el-dialog v-model="dialogVisibleAdd" title="人员" width="500">
      <el-input
        v-model="filterText"
        placeholder="请搜索员工姓名"
        class="mb-2"
        :prefix-icon="Search"
      />
      <el-tree
        ref="treeRef"
        :data="treeDept"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        :filter-node-method="filterNode"
        @check="handleCheck"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="saveDepartment"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>