virtual-patient-web/src/views/caseManagement/list/add.vue

<!-- <script setup lang="ts">
import { nextTick, reactive, ref } from "vue";
import { FormInstance } from "element-plus";
import { message } from "@/utils/message";
// import { useRoute } from "vue-router";
defineOptions({
  name: "AddEdit"
});
const isEditFlag = ref(false);
const diseaseList = ref([]);
const id = ref("");
const dialogVisible = ref(false);

const formData = reactive({
  patientGender: "",
  directoryDesc: "",
  patientSelfDesc: "",
  patientAge: "",
  diseaseId: ""
});
const ruleFormRef = ref<FormInstance>();
const rules = {
  patientGender: [{ required: true, message: "请选择", trigger: "change" }],
  directoryDesc: [{ required: true, message: "请输入", trigger: "change" }]
};
defineExpose({
  async open(item) {
    dialogVisible.value = true;
    await nextTick();
    if (item) {
      for (const key in item) {
        // eslint-disable-next-line no-prototype-builtins
        if (formData.hasOwnProperty(key)) {
          formData[key] = item[key];
        }
      }
      isEditFlag.value = true;
      id.value = item.id;
    }
  }
});
const resetForm = () => {
  ruleFormRef.value.resetFields();
};
const closeDialog = () => {
  dialogVisible.value = false;
  isEditFlag.value = false;
  resetForm();
};
const emit = defineEmits(["update"]);
const reset = () => {
  ruleFormRef.value.resetFields();
};

const save = (formEl: FormInstance | undefined) => {
  formEl.validate(async (valid, fields) => {
    if (valid) {
      // formData.result = refWangEditor.value.valueHtml;
      // const params = {
      //   ...formData,
      //   result: refWangEditor.value.valueHtml,
      //   diseaseId: route.query.id
      // };
      if (isEditFlag.value) {
        // const res: any = await updateSupportInspect({
        //   ...params,
        //   id: id.value
        // });
        if (res.code === 200) {
          message("修改成功", { type: "success" });
          id.value = "";
        }
      } else {
        // const res: any = await addSupportInspect(params);
        // if (res.code === 200) {
        //   message("新增成功", { type: "success" });
        // }
      }
      dialogVisible.value = false;
      emit("update");
    } else {
      return fields;
    }
  });
};
</script>

<template>
  <div>
    <el-drawer
      :size="650"
      append-to-body
      v-model="dialogVisible"
      :show-close="false"
      :with-header="false"
      :before-close="closeDialog"
      custom-class="AddEdit"
    >
      <div class="AddEdit">
        <div class="header-title">
          <div class="tip" />
          <span>新建病历</span>
        </div>
        <div class="line" />
        <el-form
          ref="ruleFormRef"
          :model="formData"
          :rules="rules"
          label-width="80px"
        >
          <el-form-item label="姓名" prop="directoryDesc">
            <el-input
              size="large"
              placeholder="请输入"
              v-model="formData.directoryDesc"
            />
          </el-form-item>
          <el-form-item label="性别" prop="patientGender">
            <el-radio-group size="large" v-model="formData.patientGender">
              <el-radio label="男" />
              <el-radio label="女" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="主诉" prop="patientSelfDesc">
            <el-input size="large" v-model="formData.patientSelfDesc" />
          </el-form-item>
          <el-form-item label="年龄" prop="patientAge">
            <el-input
              size="large"
              maxLength="3"
              v-model="formData.patientAge"
            />
          </el-form-item>
          <el-form-item label="初步诊断:" prop="diseaseId">
            <el-select
              size="large"
              filterable
              clearable
              v-model="formData.diseaseId"
              class="form_select"
              style="width: 100%"
              placeholder="请选择初步诊断"
            >
              <el-option
                v-for="item in diseaseList"
                :key="item.id"
                :label="item.diseaseName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="footer_btn">
          <div class="reset" @click="reset()">重置</div>
          <div class="main" @click="save(ruleFormRef)">确定</div>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<style lang="scss" scoped>
.AddEdit {
  :deep(.el-form-item__label) {
    font-weight: 400;
    color: #333;
  }

  .header-title {
    display: flex;
    align-items: center;
    // border-left: 6px solid #4287ff;

    font-size: 20px;
    font-weight: bold;
    color: #2b3f54;

    .tip {
      width: 6px;
      height: 20px;
      margin-right: 10px;
      line-height: 20px;
      background: #4287ff;
    }
  }

  .line {
    position: relative;
    left: -20px;
    width: 605px;
    height: 1px;
    margin: 24px 0;
    background: rgb(91 139 255 / 30%);
  }

  .footer_btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 16px;

    .reset {
      width: 188px;
      height: 48px;
      margin-right: 24px;
      font-size: 16px;
      font-weight: 400;
      line-height: 48px;
      color: #4287ff;
      text-align: center;
      cursor: pointer;
      background: #fff;
      border: 1px solid #4287ff;
      border-radius: 6px;
    }

    .main {
      width: 188px;
      height: 48px;
      font-size: 16px;
      line-height: 48px;
      color: #fff;
      text-align: center;
      cursor: pointer;
      background: #4287ff;
      border: 1px solid #4287ff;
      border-radius: 6px;
    }
  }
}
</style> -->
<script setup lang="ts">
import { onMounted } from "vue";
import MainView from "./page/index.vue";
import { useCaseStoreHooks } from "@/store/modules/caseManagement";

onMounted(() => {
  useCaseStoreHooks().changeIsEditFlag(false);
});
</script>

<template>
  <div>
    <MainView />
  </div>
</template>