hospital-project/src/views/background/framework/users/components/editPerson.vue

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import type { DrawerProps, FormItemProps, FormProps } from "element-plus";
import { postUpdateGroupByCode } from "@/api/userGroup";
import { getLeaderList } from "@/api/userSetting";
const drawer = ref(false);
const formRef = ref();
const emit = defineEmits(["handleClick"]);
const disabledValue = ref(true);
const direction = ref<DrawerProps["direction"]>("rtl");
const formLabelAlign = reactive({
  groupName: "",
  leaderCode: "",
  groupCode: "",
  hospitalCode: ""
});
const postUpdateGroupByCodeApi = async () => {
  const { code } = await postUpdateGroupByCode(formLabelAlign);
  if (code === 200) {
    emit("handleClick");
    ElMessage({
      message: "保存成功",
      type: "success"
    });
  }
};
const handleClose = (done: () => void) => {
  // ElMessageBox.confirm("配置项未保存，确认关闭", {
  //   type: "warning"
  // }).then(() => {
  // });
  formRef.value.clearValidate(); // 清除验证错误
  formRef.value.resetFields(); // 重置表单字段
  drawer.value = false;
  disabledValue.value = true;
  editShow.value = true;
};
function cancelClick() {
  formRef.value.validate(valid => {
    if (valid) {
      disabledValue.value = true;
      editShow.value = true;
    }
  });
  // drawer.value = false;
}
function confirmClick() {
  formRef.value.validate(valid => {
    if (valid) {
      disabledValue.value = true;
      editShow.value = true;
      drawer.value = !drawer.value;
      postUpdateGroupByCodeApi();
    }
  });
}
// 获取负责人
const leader = ref([]);
const getLeaderListApi = async () => {
  const { code, data } = await getLeaderList();
  if (code == 200) {
    leader.value = data;
  }
};
const open = row => {
  if (row) {
    console.log("11111", row);
    formLabelAlign.groupName = row.groupName;
    formLabelAlign.leaderCode = row.leaderCode;
    formLabelAlign.groupCode = row.groupCode;
    formLabelAlign.hospitalCode = row.hospitalCode;
  }
  drawer.value = true;
  getLeaderListApi();
};
const editShow = ref(true);
// 编辑
const editClick = () => {
  console.log("11111", formLabelAlign);
  editShow.value = false;
  disabledValue.value = false;
};
defineExpose({
  open
});
const timer = ref("");
</script>

<template>
  <div>
    <el-drawer
      v-model="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <template #header>
        <h4>用户组详情</h4>
      </template>
      <template #default>
        <div>
          <el-form
            ref="formRef"
            label-position="top"
            label-width="auto"
            :model="formLabelAlign"
          >
            <el-form-item label="用户组名称" label-position="top">
              <el-input
                v-model="formLabelAlign.groupName"
                :disabled="disabledValue"
              />
            </el-form-item>
            <el-form-item label="用户组编号" label-position="top">
              <el-input
                v-model="formLabelAlign.hospitalCode"
                :disabled="disabledValue"
              />
            </el-form-item>
            <el-form-item label="用户组负责人" label-position="top">
              <!-- <el-input v-model="formLabelAlign.leaderCode" :disabled="disabledValue" /> -->
              <el-select
                v-model="formLabelAlign.leaderCode"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in leader"
                  :key="item.userCode"
                  :label="item.userName"
                  :value="item.userCode"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button v-if="editShow" type="primary" @click="editClick"
          >编辑</el-button
        >
        <div v-else>
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick">确认</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>