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";
import { getFromSelectDictRankApi, selectRank } from "@/api/select";
import dayjs from "dayjs";
const dialogVisibleAdd = ref(false);
const treeSelectRef = ref(null);
const postOrganizationUserPage = ref(null);
const form = reactive({
  realName: "",
  hospitalCode: "",
  deptName: "",
  deptCode: "",
  gender: "",
  jobTitle: "",
  phone: "",
  birth: null
});
const dayBirth = ref("");

// 出生日期
const birthChange = day => {
  form.birth = dayjs(day).valueOf();
};

const formRef = ref();
const deptTree = ref([]);
const handleClose = () => {
  formRef.value.clearValidate(); // 清除验证错误
  formRef.value.resetFields(); // 重置表单字段
  dialogVisibleAdd.value = !dialogVisibleAdd.value;
};
const postDeptUserAddApi = async () => {
  if (!form.birth) {
    delete form.birth;
  }
  const { code, data, msg } = await postDeptUserAdd(form);
  if (code == 200) {
    ElMessage({
      message: "新建成功",
      type: "success"
    });
    postOrganizationUserPage.value();
    dialogVisibleAdd.value = false;
  }
};
// 部门树
const postListTreeApi = async () => {
  const { code, data } = await postListTree();
  if (code == 200) {
    console.log("data", data);
    deptTree.value = data;
  }
};
// 添加部门保存
const saveDepartment = () => {
  formRef.value.validate(valid => {
    if (valid) {
      postDeptUserAddApi();
    }
  });
};
const open = (row, postOrganizationUserPageApi) => {
  Object.assign(form, {
    realName: "",
    hospitalCode: "",
    deptName: "",
    deptCode: "",
    gender: "",
    jobTitle: "",
    phone: "",
    birth: null
  });
  dayBirth.value = "";
  if (row.deptCode) {
    // console.log("11111", row);
    form.deptCode = row.deptCode;
    form.deptName = row.deptName;
    dialogVisibleAdd.value = true;
    postOrganizationUserPage.value = postOrganizationUserPageApi;
    postListTreeApi();
    getFromSelectDictRankApi();
  } 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); // 选中节点
    }
  }
};
const rules = reactive({
  realName: [
    {
      required: true,
      message: "请填写姓名",
      trigger: "blur"
    }
  ],
  hospitalCode: [
    {
      required: true,
      message: "请填写工号",
      trigger: "blur"
    }
  ],
  deptCode: [
    {
      required: true,
      message: "请选择部门",
      trigger: "blur"
    }
  ]
});
defineExpose({
  open
});
</script>

<template>
  <div>
    <el-dialog v-model="dialogVisibleAdd" title="添加人员" width="500">
      <el-form
        ref="formRef"
        :model="form"
        label-width="auto"
        :rules="rules"
        style="max-width: 600px"
      >
        <el-form-item prop="realName" label="姓名">
          <el-input v-model="form.realName" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item prop="hospitalCode" label="工号">
          <el-input v-model="form.hospitalCode" placeholder="请输入工号" />
        </el-form-item>
        <el-form-item prop="deptCode" label="部门">
          <el-tree-select
            ref="treeSelectRef"
            v-model="form.deptCode"
            :data="deptTree"
            placeholder="请选择部门"
            :props="{
              label: 'deptName',
              value: 'deptCode',
              children: 'childrenRes'
            }"
            filterable
            check-strictly
            :render-after-expand="false"
            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-date-picker
            v-model="dayBirth"
            type="date"
            placeholder="请选择出生日期"
            @change="birthChange"
          />
        </el-form-item>
        <el-form-item label="职称">
          <el-select v-model="form.jobTitle" placeholder="请选择职称">
            <el-option
              v-for="(item, index) in selectRank"
              :key="index"
              :label="item.dictValue"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone" placeholder="请输入手机号" />
        </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>