web_dist/src/views/hospitalization/adverse-event/component/EventEditor.vue

<template>
  <el-row style="margin: 0" :gutter="5">
    <el-col :span="12">
      <el-tag>事件信息</el-tag>
      <el-row :gutter="5" style="margin-top: 5px">
        <el-col :span="8">
          <el-tag type="info">事件类型</el-tag>
          <el-select v-model="report.category" placeholder="请选择" filterable style="width: 100%">
            <el-option-group v-for="group in dict.categories" :key="group.id" :label="group.name">
              <el-option v-for="item in group.children" :key="item.id" :label="item.name" :value="group.name + ' - ' + item.name"> </el-option>
            </el-option-group>
          </el-select>
        </el-col>
        <el-col :span="9">
          <el-tag type="info">发生日期：</el-tag>
          <el-date-picker v-model="report.occurDatetime" type="datetime" placeholder="选择日期时间" style="width: 100%"> </el-date-picker>
        </el-col>
        <el-col :span="7">
          <el-tag type="info">发生科室：</el-tag>
          <el-select v-model="report.deptCode" placeholder="请选择" filterable style="width: 100%">
            <el-option v-for="item in deptList" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="12">
      <el-tag>提交人信息</el-tag>
      <el-row :gutter="5">
        <el-col :span="8">
          <el-tag type="info">姓名：</el-tag>
          <el-input v-model="report.userName" style="width: 100%" readonly></el-input>
        </el-col>
        <el-col :span="8">
          <el-tag type="info">职称：</el-tag>
          <el-select v-model="report.userLevel" placeholder="请选择" filterable style="width: 100%">
            <el-option v-for="item in dict.positions" :key="item.id" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-tag type="info">工作年限：</el-tag>
          <el-input-number v-model="report.workYear" :min="0" :max="10" style="width: 100%"></el-input-number>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <el-row style="margin: 5px 0 0 0" :gutter="5">
    <el-col :span="12">
      <el-row :gutter="5">
        <el-col :span="24">
          <el-tag type="info">损害程度：</el-tag>
          <el-select v-model="report.eventResult" placeholder="请选择" style="width: 100%">
            <el-option
                v-for="item in dict.eventResult"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>
    </el-col>
  </el-row>

  <el-row style="margin:30px 0 0 0" :gutter="5" >
    <el-col :span="12">
      <el-tag>事件经过</el-tag>
      <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="report.course" maxlength="200" show-word-limit style="width: 100%"> </el-input>
    </el-col>
    <el-col :span="12">
      <el-tag>事件结果与补救措施</el-tag>
      <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="report.result" maxlength="100" show-word-limit style="width: 100%"> </el-input>
    </el-col>
  </el-row>
  <el-tag style="margin-top:30px">原因分析</el-tag>
  <el-row style="margin: 0" :gutter="5">
    <el-col :span="6">
      <el-tag type="info">工作人员因素：</el-tag>
      <div></div>
      <el-select v-model="report.nurseReasonArr" multiple collapse-tags placeholder="请选择" style="width: 100%">
        <el-option v-for="item in dict.nurseReasons" :key="item.id" :label="item.name" :value="item.name">
          <span style="overflow: auto">{{ item.name }}</span>
        </el-option>
      </el-select>
      <el-input v-model="report.nurseReasonElse" placeholder="其他工作人员因素" style="width: 100%"></el-input>
    </el-col>
    <el-col :span="6">
      <el-tag type="info">病人因素：</el-tag>
      <div></div>
      <el-select v-model="report.patientReasonArr" multiple collapse-tags placeholder="请选择" style="width: 100%">
        <el-option v-for="item in dict.patientReasons" :key="item.id" :label="item.name" :value="item.name">
          <span style="overflow: auto">{{ item.name }}</span>
        </el-option>
      </el-select>
      <el-input v-model="report.patientReasonElse" placeholder="其他病人因素" style="width: 100%"></el-input>
    </el-col>
    <el-col :span="6">
      <el-tag type="info">环境因素：</el-tag>
      <div></div>
      <el-select v-model="report.environReasonArr" multiple collapse-tags placeholder="请选择" style="width: 100%">
        <el-option v-for="item in dict.environReasons" :key="item.id" :label="item.name" :value="item.name">
          <span style="overflow: auto">{{ item.name }}</span>
        </el-option>
      </el-select>
      <el-input v-model="report.environReasonElse" placeholder="其他环境因素" style="width: 100%"></el-input>
    </el-col>
    <el-col :span="6">
      <el-tag type="info">管理因素：</el-tag>
      <div></div>
      <el-select v-model="report.manageReasonArr" multiple collapse-tags placeholder="请选择" style="width: 100%">
        <el-option v-for="item in dict.manageReasons" :key="item.id" :label="item.name" :value="item.name">
          <span style="overflow: auto">{{ item.name }}</span>
        </el-option>
      </el-select>
      <el-input v-model="report.manageReasonElse" placeholder="其他管理因素" style="width: 100%"></el-input>
    </el-col>
  </el-row>
  <el-tag style="margin-top:30px">改进措施</el-tag>
  <el-row style="margin: 0" :gutter="5">
    <el-col :span="6">
      <el-tag type="info">工作人员因素：</el-tag>
      <div></div>
      <el-select v-model="report.proNurseArr" multiple collapse-tags placeholder="请选择" style="width: 100%">
        <el-option v-for="item in dict.nursePros" :key="item.id" :label="item.name" :value="item.name">
          <span style="overflow: auto">{{ item.name }}</span>
        </el-option>
      </el-select>
      <el-input v-model="report.proNurseElse" placeholder="其他工作人员因素改进措施" style="width: 100%"></el-input>
    </el-col>
    <el-col :span="6">
      <el-tag type="info">病人因素：</el-tag>
      <div></div>
      <el-select v-model="report.proPatientArr" multiple collapse-tags placeholder="请选择" style="width: 100%">
        <el-option v-for="item in dict.patientPros" :key="item.id" :label="item.name" :value="item.name">
          <span style="overflow: auto">{{ item.name }}</span>
        </el-option>
      </el-select>
      <el-input v-model="report.proPatientElse" placeholder="其他病人因素改进措施" style="width: 100%"></el-input>
    </el-col>
    <el-col :span="6">
      <el-tag type="info">环境因素：</el-tag>
      <div></div>
      <el-select v-model="report.proEnvironArr" multiple collapse-tags placeholder="请选择" style="width: 100%">
        <el-option v-for="item in dict.environPros" :key="item.id" :label="item.name" :value="item.name">
          <span style="overflow: auto">{{ item.name }}</span>
        </el-option>
      </el-select>
      <el-input v-model="report.proEnvironElse" placeholder="其他环境因素改进措施" style="width: 100%"></el-input>
    </el-col>
    <el-col :span="6">
      <el-tag type="info">管理因素：</el-tag>
      <el-select v-model="report.proManageArr" multiple collapse-tags placeholder="请选择" style="width: 100%">
        <el-option v-for="item in dict.managePros" :key="item.id" :label="item.name" :value="item.name">
          <span style="overflow: auto">{{ item.name }}</span>
        </el-option>
      </el-select>
      <el-input v-model="report.proManageElse" placeholder="其他管理因素改进措施" style="width: 100%"></el-input>
    </el-col>
  </el-row>
</template>

<script setup>
import { dict } from '@/data/adverse-event'
import {getAllDepts} from '@/api/adverse-event'
const props = defineProps({
  report: {
    type: Object,
    required: false,
    default: {}
  }
})

const deptList = ref([])
onMounted(() => {
  getAllDepts().then(res => {
    deptList.value = res
  })
})
</script>