web_dist/src/views/hospitalization/adverse-event/FillAderverseEvent.vue

<template>
  <page-layer>
    <template #header>
      <el-button type="primary" icon="RefreshLeft" @click="genNewReport">填写新报告</el-button>
      <el-button type="primary" icon="Edit" @click="beforeSubmit" :disabled="disableSubmit">提交/修改当前报告</el-button>
    </template>
    <template #aside>
      <el-table :data="histories" stripe highlight-current-row :height="tableHeight" @row-click="fetchReportDetail">
        <el-table-column prop="submitDatetime" label="提交时间" width="130"></el-table-column>
        <el-table-column prop="category" label="事件类型"></el-table-column>
        <el-table-column label="受理" width="60">
          <template v-slot="scope">
            <span v-html="filterAccepted(scope.row.accepted)"></span>
          </template>
        </el-table-column>
        <el-table-column label="处理" width="60">
          <template v-slot="scope">
            <span v-html="filterHandled(scope.row.handled)"></span>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template #main>
      <el-row :gutter="5">
        <el-col :span="12">
          <el-tag>事件信息</el-tag>
          <el-row :gutter="5">
            <el-col :span="8">
              <el-tag type="info">事件类型</el-tag>
              <div></div>
              <el-select v-model="report.category" placeholder="请选择" 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>
              <div></div>
              <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>
              <div></div>
              <el-select v-model="report.deptCode" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in depts" :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>
              <div></div>
              <el-input v-model="report.userName" style="width: 100%" readonly></el-input>
            </el-col>
            <el-col :span="8">
              <el-tag type="info">职称：</el-tag>
              <div></div>
              <el-select v-model="report.userLevel" placeholder="请选择" 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>
              <div></div>
              <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>
      <div style="height: 10px"></div>
      <el-row :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>
      <div style="height: 10px"></div>
      <el-tag>原因分析</el-tag>
      <el-row :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>
      <div style="height: 10px"></div>
      <el-tag>改进措施</el-tag>
      <el-row :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>
          <div></div>
          <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>
  </page-layer>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { dict } from '@/data/adverse-event'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getAllDepts, getHistories, getReportDetail, submitNewReport } from '@/api/adverse-event'
import store from '@/store'
import { formatDatetime } from '@/utils/date'
import PageLayer from "@/layout/PageLayer";

const windowSize = store.state.app.windowSize
const tableHeight = windowSize.h - 5
const depts = ref([])
const histories = ref([])
const report = initReport()
const isModify = ref(false)
const fetchHistories = () => {
  getHistories().then((res) => {
    histories.value = res
  })
}
const fetchReportDetail = (val) => {
  getReportDetail(val.pid, 'nurse').then((res) => {
    report.value = res
    isModify.value = true
  })
}

const genNewReport = () => {
  report.value = initReport().value
  isModify.value = false
}

const beforeSubmit = () => {
  const message = validateReport(report.value)
  if (message) {
    ElMessage({
      message,
      type: 'warning',
      duration: 2500,
      showClose: true,
    })
    return
  }
  ElMessageBox.confirm('确定提交此报告？', '提示', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(() => {
        report.value.isModify = isModify.value
        report.value.occurDatetime = formatDatetime(report.value.occurDatetime)
        submitNewReport(report.value).then(() => {
          ElMessage({
            message: '提交成功。',
            type: 'success',
            duration: 2000,
            showClose: true,
          })
          fetchHistories()
          genNewReport()
        })
      })
      .catch(() => {})
}

const disableSubmit = computed(() => {
  return report.value.handled === 1
})

onMounted(() => {
  getAllDepts().then(res => {
    depts.value = res
    fetchHistories()
  })
})

function initReport() {
  return ref({
    deptCode: store.state.user.info.deptCode,
    userName: store.state.user.info.name,
    category: null,
    occurDatetime: null,
    userLevel: '护士',
    workYear: 1,
    course: null,
    result: null,
    nurseReasonArr: [],
    nurseReasonElse: null,
    patientReasonArr: [],
    patientReasonElse: null,
    environReasonArr: [],
    environReasonElse: null,
    manageReasonArr: [],
    manageReasonElse: null,
    proNurseArr: [],
    proNurseElse: null,
    proPatientArr: [],
    proPatientElse: null,
    proEnvironArr: [],
    proEnvironElse: null,
    proManageArr: [],
    proManageElse: null,
  })
}

function validateReport(val) {
  if (!val.category) {
    return '请选择事件类型！'
  }
  if (!val.occurDatetime) {
    return '请选择发生日期！'
  }
  if (!val.deptCode) {
    return '请选择发生科室！'
  }
  if (!val.course) {
    return '请填写事件经过！'
  }
  if (!val.result) {
    return '请填写事件结果与补救措施！'
  }
  if (val.nurseReasonArr.length === 0) {
    return '请选择护士因素！'
  }
  if (val.proNurseArr.length === 0) {
    return '请选择护士因素改进措施！'
  }
  return null
}

function filterAccepted(val) {
  return val === 1 ? '<span style="color:green">已受理</span>' : '<span style="color:red">未受理</span>'
}

function filterHandled(val) {
  return val === 1 ? '<span style="color:green">已处理</span>' : '<span style="color:red">未处理</span>'
}
</script>

<style scoped>
.adverse-event-row {
  margin-top: 10px;
}
</style>