web/src/components/outpatient/Case.vue

<template>
  <Panel :title="'病历'">
    <template #tools>
      <div class="content">
        <div class="model-selector">
          <el-select v-model="formDate.diagType">
            <el-option label="西医模板" :value="0"/>
            <el-option label="中医模板" :value="1"/>
            <el-option label="口腔模板" :value="2"/>
          </el-select>
        </div>
      </div>
    </template>
    <div class="container">
      <el-form :model="formDate" label-width="auto" ref="formRef">
        <el-form-item label="主诉:">
          <PopoverInput :disabled="props.disabled" v-model="formDate.mainAppeal"
                        :list="mainAppealList" @focus="focus"/>
        </el-form-item>
        <el-form-item label="诊断:">
          <DiagnosisSearchInput
              ref="diagnosisSearchRef"
              :disabled="props.disabled"
              :request-api="diagnosisSearchApi"
              :show-config="diagnosisShowConfig"
              @selectedCallBack="diagnosisSelect"
              :show-header="false"
              @focus="focus"
              style="height: 100%"
          />
        </el-form-item>
        <el-form-item label="现病史:" v-if="!props.isShowFrom">
          <PopoverInput :disabled="props.disabled" v-model="formDate.nowMedicalHistory" :list="nowMedicalHistoryList"/>
        </el-form-item>
        <el-form-item label="既往史:" v-if="!props.isShowFrom">
          <PopoverInput :disabled="props.disabled" v-model="formDate.beforeMedicalHistory"
                        :list="beforeMedicalHistoryList"/>
        </el-form-item>
        <el-form-item label="过敏史:" v-if="!props.isShowFrom">
          <PopoverInput :disabled="props.disabled" v-model="formDate.allergyHistory" :list="allergyHistoryList"/>
        </el-form-item>
        <el-form-item label="体格检查:" v-if="!props.isShowFrom">
          <PhysiqueExamInuput :disabled="props.disabled" v-model="formDate.exam" :list="physiqueExamList"/>
        </el-form-item>
        <el-form-item label="望闻问切:" v-if="formDate.diagType==1&&!props.isShowFrom">
          <PopoverInput :disabled="props.disabled" v-model="formDate.chinaAdjunctCheck" :list="chinaAdjunctCheckList"/>
        </el-form-item>
        <el-form-item label="治法:" v-if="formDate.diagType==1&&!props.isShowFrom">
          <el-input v-model="formDate.chinaDeal" :disabled="props.disabled"></el-input>
        </el-form-item>
        <el-form-item label="口腔检查:" v-if="formDate.diagType==2&&!props.isShowFrom">
          <el-input :disabled="props.disabled" v-model="formDate.mouthCheck"></el-input>
        </el-form-item>
        <el-form-item label="辅助检查:" v-if="(formDate.diagType==2 || formDate.diagType ==0)&&!props.isShowFrom">
          <el-input style="height: 100%;width: 100%" :disabled="props.disabled"
                    v-model="formDate.adjunctCheck"></el-input>
        </el-form-item>
        <el-form-item label="处置:" v-if="(formDate.diagType==0 || formDate.diagType ==2)&&!props.isShowFrom">
          <el-input style="height: 100%;width: 100%" :disabled="props.disabled" v-model="formDate.deal"></el-input>
        </el-form-item>
      </el-form>
    </div>

  </Panel>
</template>
<script setup lang="ts">
import {computed, nextTick, ref, defineEmits} from "vue";
import {
  mainAppealList,
  nowMedicalHistoryList,
  beforeMedicalHistoryList,
  chinaAdjunctCheckList,
  allergyHistoryList, physiqueExamList
} from "@/assets/config/constants.ts";
import Panel from "@/components/common/Panel.vue";
import PopoverInput from "@/components/PopoverInput.vue";
import DiagnosisSearchInput from "@/components/outpatient/DiagnosisSearchInput.vue";
import PhysiqueExamInuput from "@/components/outpatient/PhysiqueExamInuput.vue";

const props = defineProps({
  disabled: {
    type: Boolean,
    default: 0
  },
  isShowFrom: {
    type: Boolean,
    default: false
  }
})
const formDate = defineModel<any>();

interface ShowConfig {
  label: string;
  prop: string;
}

const diagnosisSearchApi = "social/diagnose/search"
const diagnosisShowConfig: ShowConfig[] = [
  {
    label: "诊断名称",
    prop: "name",
  },
  {
    label: "诊断编码",
    prop: "code",
  }
]
const diagnosisSelect = (list: any) => {
  const diagnosisNames = list.map((item: any) => item.name).join(',')
  formDate.value.diagnosisDetail = JSON.stringify(list)
  formDate.value.diagnosisSummary = diagnosisNames
}
const diagnosisSearchRef = ref()
const initDiagnosisSearch = (list: any, nList: any) => {
  nextTick(() => {
    diagnosisSearchRef.value?.init(list, nList);
  })
}
const emit = defineEmits(['focus'])
const focus = (e: any) => {
  emit('focus', e)
}
const clearDiagnosis = () => {
  diagnosisSearchRef.value?.clear()
}

defineExpose({initDiagnosisSearch, clearDiagnosis})
</script>
<style scoped lang="scss">
.content {
  display: flex;

  .model-selector {
    width: 100px;
  }
}

.container {
  margin: 0 24px;
}

:deep(.el-form-item) {
  margin-bottom: 0;

}

:deep(.el-form-item__label) {
  height: 42px;
  line-height: 42px;
}

:deep(.el-input__wrapper) {
  border-radius: 0;
  height: 42px;
  background: #FFFFFF;
  border: 1px solid #EAEAEC;
  box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
}

:deep(.is-disabled .el-input__wrapper) {
  box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
}
</style>