web_dist/src/views/clinic/triage/Treated.vue

<template>
  <el-container>
    <el-main>
      <div style="height: 10px"></div>
      <div style="width: 320px; margin-bottom: 8px">
        <el-input v-model="searchContent" size="small" clearable placeholder="请输入患者姓名 / ID号">
          <template #prepend>检索患者</template>
        </el-input>
      </div>
      <el-table :data="cptPatients.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe highlight-current-row :height="tableHeight" size="middle">
        <el-table-column fixed prop="fzNo" label="分诊号" sortable></el-table-column>
        <el-table-column fixed prop="name" label="姓名"></el-table-column>
        <el-table-column prop="patientId" label="id号"></el-table-column>
        <el-table-column prop="deptName" label="科室"></el-table-column>
        <el-table-column prop="roomName" label="诊室"></el-table-column>
        <el-table-column prop="doctorName" label="医生"></el-table-column>
        <el-table-column prop="serialNo" label="流水号" sortable></el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            {{ statusFlagFilter(scope.row.statusFlag) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button type="primary" @click="getDepts(scope.row)">复诊</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[15, 30, 45, 70, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="patients.length"
        style="margin-top: 5px"
      ></el-pagination>

      <el-dialog v-model="showTriageDialog" title="选择诊室" width="50%">
        <div style="background-color: lightblue; padding: 4px 8px; margin-top: -16px; border-radius: 4px; color: red">
          <div class="dialog-head">
            <div style="width: 20%">病人Id：{{ currentPatient.patientId }}</div>
            <div style="width: 20%">姓名：{{ currentPatient.name }}</div>
            <div style="width: 40%">挂号时间：{{ currentPatient.visitDate }}</div>
            <div style="width: 20%">诊查费：{{ currentPatient.clinicFee }}</div>
          </div>
          <div class="dialog-head">
            <div style="width: 20%">科室：{{ currentPatient.deptName }}</div>
            <div style="width: 20%">医生：{{ currentPatient.doctorName }}</div>
            <div style="width: 40%">号别：{{ currentPatient.reqName }}</div>
            <div style="width: 20%">挂号费：{{ currentPatient.ghFee }}</div>
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 25%">
            <el-table ref="chosenDeptsTable" :data="chosenDepts" stripe highlight-current-row height="350" @row-click="fetchRooms">
              <el-table-column type="index" label="序号"></el-table-column>
              <el-table-column prop="name" label="科室"></el-table-column>
            </el-table>
          </div>
          <div style="width: 75%">
            <el-table ref="roomTable" :data="rooms" height="350" stripe highlight-current-row>
              <el-table-column fixed label="操作">
                <template #default="scope">
                  <el-button type="primary" @click="executeTriage(scope.row)">分诊</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="roomNo" label="诊室号"></el-table-column>
              <el-table-column prop="roomName" label="诊室名称"></el-table-column>
              <el-table-column prop="doctorName" label="医生"></el-table-column>
              <el-table-column prop="reqName" label="号别"></el-table-column>
            </el-table>
          </div>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
import { ref } from 'vue'
import { watch } from '@vue/runtime-core'
import store from '@/store'
import { fenZhen, getTreatedPatients, getChosenDept, getRooms } from '@/api/triage/triage'
import { onActivated } from 'vue'
import { ElMessage } from 'element-plus'
export default {
  setup() {
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 100
    const patients = ref([])
    const searchContent = ref('')

    const pageSize = ref(30)
    const currentPage = ref(1)
    const handleSizeChange = (val) => {
      pageSize.value = val
    }
    const handleCurrentChange = (val) => {
      currentPage.value = val
    }

    const fetchTreatedPatients = () => {
      getTreatedPatients().then((res) => {
        patients.value = res
      })
    }

    const cptPatients = computed(() => {
      if (!searchContent.value) {
        return patients.value
      }
      return patients.value.filter((item) => {
        return item.patientId.indexOf(searchContent.value) !== -1 || item.name.indexOf(searchContent.value) !== -1
      })
    })

    watch(
      () => cptPatients.value,
      () => {
        currentPage.value = 1
      }
    )

    const showTriageDialog = ref(false)
    const chosenDeptsTable = ref(null)
    const roomTable = ref(null)
    const currentPatient = ref({})
    const chosenDepts = ref([])
    const rooms = ref([])
    const getDepts = (row) => {
      currentPatient.value = row
      getChosenDept().then((res) => {
        chosenDepts.value = res
        showTriageDialog.value = true
        res.forEach((item) => {
          if (item.code === row.deptCode.trim()) {
            setTimeout(() => {
              chosenDeptsTable.value.setCurrentRow(item)
              fetchRooms(item)
            }, 100)
          }
        })
      })
    }
    const fetchRooms = (row) => {
      getRooms(row.code).then((res) => {
        rooms.value = res
        res.forEach((item) => {
          if (item.doctorCode.trim() === currentPatient.value.doctorCode.trim()) {
            setTimeout(() => {
              roomTable.value.setCurrentRow(item)
            }, 100)
          }
        })
      })
    }
    const executeTriage = (row) => {
      row.serialNo = currentPatient.value.serialNo
      row.fuzhenFlag = 1
      fenZhen(row).then((res) => {
        showTriageDialog.value = false
        ElMessage({
          message: res,
          type: 'success',
          duration: 2000,
          showClose: true,
        })
      })
    }

    onActivated(() => {
      fetchTreatedPatients()
    })

    return {
      tableHeight,
      statusFlagFilter,
      roomStatusFilter,
      patients,
      searchContent,
      cptPatients,
      pageSize,
      currentPage,
      handleSizeChange,
      handleCurrentChange,
      getChosenDept,
      getDepts,
      showTriageDialog,
      currentPatient,
      chosenDeptsTable,
      chosenDepts,
      rooms,
      fetchRooms,
      executeTriage,
      roomTable,
    }
  },
}

function statusFlagFilter(val) {
  switch (val) {
    case '0':
      return '初值'
    case '1':
      return '报到'
    case '2':
      return '可通知'
    case '3':
      return '已通知'
    case '4':
      return '检查'
    case '9':
      return '就诊'
  }
}
function roomStatusFilter(val) {
  return val === 0 ? '在线' : '离线'
}
</script>

<style scoped>
.dialog-head {
  display: flex;
  height: 26px;
  line-height: 26px;
}
</style>