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

<template>
  <div class="layout_container">
    <header class="round-header">
      <el-button
          type="primary"
          icon="RefreshLeft"
          @click="genNewReport"
      >
        填写新报告
      </el-button>
      <el-button
          type="primary"
          icon="Edit"
          @click="beforeSubmit"
          :disabled="disableSubmit"
      >
        提交/修改当前报告
      </el-button>
    </header>

    <div class="layout_main layout_container layout-horizontal">
      <aside>
        <el-table
            :data="histories"
            stripe
            highlight-current-row
            @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>
      </aside>

      <div class="layout_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>
      </div>

    </div>

  </div>

</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 {formatDatetime} from '@/utils/date'
import {useUserStore} from "@/pinia/user-store";

const userInfo = useUserStore().userInfo
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: userInfo.deptCode,
    userName: userInfo.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>