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

<script setup lang="ts">
import { ref, reactive, nextTick } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { postDeptUserAdd, postListTree } from "@/api/department";
const dialogVisibleAdd = ref(false);
const treeSelectRef = ref(null);
const postOrganizationUserPage = ref(null);
const form = reactive({
  realName: "",
  hospitalCode: "",
  deptName: "",
  deptCode: "",
  gender: "",
  jobTitle: "",
  phone: ""
});
const deptTree = ref([]);
const handleClose = () => {
  ElMessageBox.confirm("确认关闭弹窗吗？")
    .then(() => {
      dialogVisibleAdd.value = !dialogVisibleAdd.value;
      ElMessage({
        message: "已关闭",
        type: "success"
      });
    })
    .catch(() => {
      // catch error
    });
};
const postDeptUserAddApi = async () => {
  const { code, data, msg } = await postDeptUserAdd(form);
  if (code == 200) {
    ElMessage({
      message: "新建成功",
      type: "success"
    });
    postOrganizationUserPage.value();
    dialogVisibleAdd.value = false;
  } else {
    ElMessage({
      message: msg,
      type: "error"
    });
  }
};
// 部门树
const postListTreeApi = async () => {
  const { code, data } = await postListTree();
  if (code == 200) {
    console.log("data", data);
    deptTree.value = data;
  }
};
// 添加部门保存
const saveDepartment = () => {
  console.log("保存");
  postDeptUserAddApi();
};
const open = (row, postOrganizationUserPageApi) => {
  Object.assign(form, {
    realName: "",
    hospitalCode: "",
    deptName: "",
    deptCode: "",
    gender: "",
    jobTitle: "",
    phone: ""
  });
  if (row.deptCode) {
    // console.log("11111", row);
    form.deptCode = row.deptCode;
    dialogVisibleAdd.value = true;
    postOrganizationUserPage.value = postOrganizationUserPageApi;
    postListTreeApi();
  } else {
    ElMessage.warning("请选择部门");
  }
};
// 树选择框获取焦点时，展开到对应节点
const openTreeFocus = async () => {
  await nextTick(); // 确保组件渲染完成
  if (form.deptCode && treeSelectRef.value) {
    const node = treeSelectRef.value.getNode(form.deptCode); // 获取节点
    if (node) {
      treeSelectRef.value.setCurrentKey(form.deptCode); // 选中节点
    }
  }
};
defineExpose({
  open
});
</script>

<template>
  <div>
    <el-dialog v-model="dialogVisibleAdd" title="添加成员" width="500">
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item
          prop="name"
          label="姓名"
          :rules="[
            {
              required: true,
              message: '请填写部门名称',
              trigger: 'blur'
            }
          ]"
        >
          <el-input v-model="form.realName" />
        </el-form-item>
        <el-form-item label="工号">
          <el-input v-model="form.hospitalCode" />
        </el-form-item>
        <el-form-item label="部门">
          <el-tree-select
            ref="treeSelectRef"
            v-model="form.deptCode"
            :data="deptTree"
            :props="{
              label: 'deptName',
              value: 'deptCode',
              children: 'childrenRes'
            }"
            filterable
            check-strictly
            :render-after-expand="false"
            style="width: 240px"
            node-key="deptCode"
            @focus="openTreeFocus"
          />
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.gender" placeholder="请选择性别">
            <el-option label="男" value="女" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input />
        </el-form-item>
        <el-form-item label="职称">
          <el-select v-model="form.jobTitle" placeholder="请选择职称">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone" />
        </el-form-item>
      </el-form>
      <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>