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

<template>
  <div>
    <div style="height: 6px"></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 trueMedTypes" :key="item.code" :label="item.name" :value="item.code"></el-option>
    </el-select>
    <el-select v-model="currentStatus" clearable style="width: 90px">
      <el-option :value="0" label="未登记"></el-option>
      <el-option :value="1" label="已登记"></el-option>
    </el-select>
    <el-table
        :data="cptOverviews.slice((currentPage - 1) * 17, currentPage * 17)"
        :height="visibleWindowSize.height - props.subtractHeight"
        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 align="center" label="状态" props="status" width="45">
        <template #default="scope">
          <span v-html="getStatusFlag(scope.row.status)"></span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :hide-on-single-page="false" :page-size="17" :total="cptOverviews.length" layout="prev, pager, next"
                   small @current-change="handleCurrentPageChange">
    </el-pagination>
  </div>
</template>

<script>
import {computed, onMounted, ref} from 'vue'
import store from '@/store'
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 {trueMedTypes} from '@/data'
import {getWardsApi} from '@/api/login'
import {allWardsVisible} from '@/utils/permission'
import {visibleWindowSize} from '@/utils/window-size'

export default {
  props: {
    showSelection: {
      type: Boolean,
      default: false,
    },
    subtractHeight: {
      type: Number,
      default: 100
    }
  },
  emits: [],
  setup(props, ctx) {
    const wardsClearable = allWardsVisible()
    const currentWard = ref('')
    const currentMedType = computed({
      get: () => {
        return store.state.ptnt.currentMedType
      },
      set: (val) => {
        store.commit('ptnt/setCurrentMedType', val)
        store.commit('ptnt/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 tableHieght = computed(() => {
      return store.state.app.windowSize.h - 75
    })

    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 = () => {
      store.commit('user/wardChange', currentWard.value)
      getOverView(currentWard.value).then((res) => {
        overviews.value = res
      })
    }

    const handleClickOverview = (row) => {
      store.commit('ptnt/setOverview', row)
      getPatientInfo(row.inpatientNo).then((res) => {
        setBaseinfo(res)
      })
    }

    const handleSelectionChange = (val) => {
      store.commit('ptnt/setSelections', val)
    }

    const handleMedTypeChange = (val) => {
      store.commit('ptnt/setInjuryMode', val === '42')
    }

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

    return {
      maleIcon,
      femaleIcon,
      dismissIcon,
      wardsClearable,
      trueMedTypes,
      currentWard,
      currentMedType,
      currentStatus,
      allWards,
      tableHieght,
      cptOverviews,
      currentPage,
      overviews,
      handleCurrentPageChange,
      getStatusFlag,
      fetchOverviews,
      handleClickOverview,
      handleSelectionChange,
      handleMedTypeChange,
      visibleWindowSize,
      props
    }
  },
}

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

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

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