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

<script setup lang="ts">
import { ref, reactive, defineEmits } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { postAddDept, postListTree } from "@/api/department";
import { postUserList } from "@/api/userSetting";
import { encryption } from "@/utils/encrypt";
const dialogVisibleAdd = ref(false);
const formRef = ref();
const emit = defineEmits(["handleClick"]);
const form = reactive({
  deptName: "",
  deptCode: "",
  leader: "",
  parentCode: "",
  hospitalCode: ""
});
const optiones = reactive({
  parentOptions: [],
  leaderOptions: []
});
// 添加
const postAddDeptApi = async () => {
  const { code } = await postAddDept(form);
  if (code === 200) {
    ElMessage({
      message: "添加成功",
      type: "success"
    });
  }
};
// 上级部门
const postListTreeApi = async () => {
  const { code, data } = await postListTree();
  if (code === 200) {
    optiones.parentOptions = data;
  }
};
// 负责人
const userList = ref({
  username: "",
  password: ""
});
const postUserListApi = async () => {
  // @ts-ignore
  userList.value.username = encryption(localStorage.getItem("rolesName"));
  // @ts-ignore
  userList.value.password = encryption(localStorage.getItem("password"));
  const { code, data } = await postUserList(userList.value);
  if (code === 200) {
    optiones.leaderOptions = data;
  }
};
const handleClose = () => {
  formRef.value.clearValidate(); // 清除验证错误
  formRef.value.resetFields(); // 重置表单字段
  dialogVisibleAdd.value = !dialogVisibleAdd.value;
  form.deptName = "";
  form.deptCode = "";
  form.hospitalCode = "";
  form.leader = "";
  form.parentCode = "";
};
// 添加部门保存
const saveDepartment = () => {
  formRef.value.validate(valid => {
    if (valid) {
      postAddDeptApi();
      emit("handleClick");
      handleClose();
    }
  });
};
const open = node => {
  console.log(node, "-------");
  dialogVisibleAdd.value = true;
  postUserListApi();
  if (node) {
    // form.leader
    form.deptName = "";
    form.deptCode = "";
    form.hospitalCode = "";
    form.leader = "";
    optiones.parentOptions = [];
    optiones.parentOptions.push(node.data);
    form.parentCode = node.data.deptCode;
  } else {
    postListTreeApi();
  }
};
// 添加子部门数据
defineExpose({
  open
});
</script>

<template>
  <div>
    <el-dialog
      v-model="dialogVisibleAdd"
      title="新建部门"
      width="500"
      :before-close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="form"
        label-width="auto"
        style="max-width: 600px"
      >
        <el-form-item
          prop="deptName"
          label="部门名称"
          :rules="[
            {
              required: true,
              message: '请填写部门名称',
              trigger: 'blur'
            }
          ]"
        >
          <el-input v-model="form.deptName" placeholder="请填写部门名称" />
        </el-form-item>
        <el-form-item label="部门编号">
          <el-input v-model="form.hospitalCode" placeholder="请输入部门编号" />
        </el-form-item>
        <el-form-item label="上级部门">
          <el-tree-select
            v-model="form.parentCode"
            :data="optiones.parentOptions"
            check-strictly
            filterable
            clearable
            :props="{
              label: 'deptName',
              value: 'deptCode',
              children: 'childrenRes'
            }"
            placeholder="请选择部门"
          />
        </el-form-item>
        <!-- <el-form-item label="部门负责人">
          <el-select v-model="form.leader" placeholder="请选择部门负责人">
            <el-option
              v-for="item in optiones.leaderOptions"
              :key="item.value"
              :label="item.realName"
              :value="item.userCode"
            />
          </el-select>
        </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>