web_dist/src/components/medical-insurance/patient-overview/Index.vue

<template>

  <div class="layout_display_flex_y">
    <div>
      <el-select
          v-model="currentWard"
          :clearable="wardsClearable"
          style="width: 90px"
          @change="fetchOverviews">
        <el-option v-for="item in allWards" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
      <el-select
          v-model="currentMedType"
          clearable style="width: 90px"
          @change="handleMedTypeChange">
        <el-option v-for="item in customMedTypes" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
      <el-select v-if="showStatus" v-model="currentStatus" clearable style="width: 90px">
        <el-option :value="0" label="未登记"></el-option>
        <el-option :value="1" label="已登记"></el-option>
      </el-select>
    </div>
    <div class="layout_flex_1-y">
      <el-table
          :data="cptOverviews.slice((currentPage - 1) * 20, currentPage * 20)"
          height="100%"
          highlight-current-row
          stripe
          @row-click="handleClickOverview"
          @selection-change="handleSelectionChange"
      >
        <el-table-column v-if="showSelection" type="selection" width="20"></el-table-column>
        <el-table-column label="床" prop="bedNo" width="30"></el-table-column>
        <el-table-column label="姓名" width="70">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <img :src="scope.row.sex === 1 ? maleIcon : femaleIcon" class="sex-icon"/>
              {{ scope.row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="住院号" prop="inpatientNo" width="65"></el-table-column>
        <el-table-column label="次数" width="45">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              {{ scope.row.admissTimes }}&nbsp;
              <img v-if="scope.row.dismissOrder > 0" :src="dismissIcon" class="sex-icon"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="showStatus" align="center" label="状态" props="status" width="45">
          <template #default="scope">
            <span v-html="getStatusFlag(scope.row.status)"></span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 6px">
      <el-pagination
          :hide-on-single-page="false"
          :page-size="20"
          :total="cptOverviews.length"
          layout="prev, pager, next "
          small
          @current-change="handleCurrentPageChange">
      </el-pagination>
    </div>
  </div>

</template>

<script setup>
import {computed, onMounted, ref} from 'vue'
import maleIcon from '@/assets/male-icon.png'
import femaleIcon from '@/assets/female-icon.png'
import dismissIcon from '@/assets/dismiss-icon.png'
import {getOverView, getPatientInfo} from '@/api/inpatient/patient'
import {setBaseinfo} from '@/data/inpatient'
import {customMedTypes} from '@/data'
import {allWardsVisible} from '@/utils/permission'
import {useMedinsStore} from "@/pinia/medins-store";
import {getWardsApi} from "@/api/login";

const props = defineProps({
  showSelection: {
    type: Boolean,
    default: false,
  },
  subtractHeight: {
    type: Number,
    default: 100
  },
  showStatus: {
    type: Boolean,
    default: true
  }
})

const medinsStore = useMedinsStore()
const wardsClearable = allWardsVisible()
const currentWard = ref('')
const currentMedType = computed({
  get: () => {
    return medinsStore.currentMedType
  },
  set: (val) => {
    medinsStore.setCurrentMedType(val)
    setBaseinfo({
      totalCharge: '0.00',
      chargeYb: '0.00'
    })
  },
})

const currentStatus = ref('')
const allWards = ref([])
const overviews = ref([])
const currentPage = ref(1)
const handleCurrentPageChange = (val) => {
  currentPage.value = val
}

const cptOverviews = computed(() => {
  if (currentMedType.value) {
    if (currentStatus.value !== '') {
      return overviews.value.filter((item) => {
        return item.medType === currentMedType.value && item.status === currentStatus.value
      })
    }
    return overviews.value.filter((item) => {
      return item.medType === currentMedType.value
    })
  }
  if (currentStatus.value !== '') {
    return overviews.value.filter((item) => {
      return item.status === currentStatus.value
    })
  }
  return overviews.value
})

const fetchOverviews = () => {
  medinsStore.setCurrentWard(currentWard.value || '')
  getOverView(currentWard.value || '', false).then((res) => {
    overviews.value = res
  })
}

const handleClickOverview = (row) => {
  getPatientInfo(row.inpatientNo).then((res) => {
    setBaseinfo(res)
  })
}

const handleSelectionChange = (val) => {
  medinsStore.setOverviewSelections(val)
}

const handleMedTypeChange = (val) => {
  medinsStore.setInjuryMode(val === '42')
}

onMounted(() => {
  getWardsApi().then(res => {
    allWards.value = res
    currentWard.value = wardsClearable ? '' : allWards.value[0].code
    fetchOverviews()
  })
})

function getStatusFlag(val) {
  if (val === 1) {
    return '<span style="color: green">已登记</span>'
  }
  return '<span style="color:red">未登记</span>'
}

function makeOverview(val) {
  currentWard.value = val.admissWard
  overviews.value = [
    {
      bedNo: val.bedNo,
      inpatientNo: val.inpatientNo,
      admissTimes: val.admissTimes,
      name: val.name,
      sex: val.sex,
      medType: val.medType,
      dismissOrder: val.dismissOrder,
      mdtrtId: val.mdtrtId,
      injurySerialNo: val.injurySerialNo,
      status: val.mdtrtId || val.injurySerialNo ? 1 : 0,
    }
  ]
}

defineExpose({
  fetchOverviews,
  makeOverview
})
</script>

<style scoped>
:deep(.el-header) {
  padding: 0 !important;
}

:deep(.el-input__inner) {
  padding: 0 8px 0 6px;
}
</style>