web_dist/src/views/hospitalization/case-front-sheet/FrontSheetQuality.vue

<template>
  <CyFlex>
    <template #header>
      <div style="padding: 6px 4px; background-color: white; border-radius: 4px">
        <CyDateRange/>
        <el-select
            v-model="auditInquiryRequest.state"
            @change="handleStateChanged"
            style="width: 90px">
          <el-option label="未质控" value="INITIAL"></el-option>
          <el-option label="已通过" value="APPROVED"></el-option>
          <el-option label="已驳回" value="REJECTED"></el-option>
        </el-select>
        <el-input
            v-model="auditInquiryRequest.patNo"
            clearable
            placeholder="住院号"
            style="width: 110px"
            @keyup.enter="querySearch" />
        <el-divider direction="vertical"></el-divider>
        <el-button icon="Search" type="primary" @click="querySearch">检索</el-button>
        <el-button icon="Document" type="primary" @click="openEmr">电子病历</el-button>
        <span v-if="auditInquiryRequest.state === 'INITIAL'" style="margin: 0 12px">
          <el-button icon="DataLine" type="primary" @click="basicControl">基础质控</el-button>
          <el-button icon="Check" type="success" @click="approveAudit">审核通过</el-button>
          <el-button icon="Close" type="danger" @click="rejectAudit">审核不通过</el-button>
        </span>
        <el-button icon="Clock" type="info" @click="viewAuditHistory">审核记录</el-button>
      </div>
    </template>
    <CyFlex tab-position="vertical">
      <template #header>
        <div style="margin-top: 4px;height: calc(100% - 4px)">
          <CyVxeTable>
            <VxeColumn title="姓名" width="80">
              <template #default="{row}">
                <img :src="row.patGender === 'MALE' ? maleIcon : femaleIcon" class="sex-icon"/>
                {{ row.patName }}
              </template>
            </VxeColumn>
            <VxeColumn title="住院号" width="90">
              <template #default="{row}">
              <span style="font-weight: bold; color: black">{{ row.patNo }}</span
              >-{{ row.times }}
              </template>
            </VxeColumn>
            <VxeColumn title="医生" field="doctorName" width="70"></VxeColumn>
            <VxeColumn title="申请时间" field="applicationTime" width="135"></VxeColumn>
          </CyVxeTable>
        </div>
      </template>

      <template #content>
        <div style="margin-top: 4px;height: calc(100% - 4px)">
          <FullPage :dics="dics" :patient="sheet"/>
        </div>
      </template>
    </CyFlex>

    <el-drawer v-model="showMessageDrawer" title="首页基础质控结果">
      <div class="page-inner">
        <div v-if="forceVerifies.length === 0 && adviceVerifies.length === 0" class="no-verify-message">暂无校验内容
        </div>
        <div v-show="forceVerifies.length > 0" style="padding: 8px 0 4px 0; font-weight: bold">
          以下条目为强制要求，请完善。
        </div>
        <div v-for="(item, index) in forceVerifies" :key="index" :style="messageColor(index)" class="message-item"
             @click="currentMessageIndex = index">
          {{ index + 1 }}、{{ item.name }}
        </div>
        <div v-show="adviceVerifies.length > 0" style="padding: 8px 0 4px 0; font-weight: bold">
          以下条目为建议执行，不做强制要求。
        </div>
        <div v-for="(item, index) in adviceVerifies" :key="index"
             style="padding: 6px; margin-bottom: 6px; border-radius: 4px; background: #eea7a752; color: #ff2b2b">
          {{ index + 1 }}、{{ item.name }}
        </div>
      </div>
    </el-drawer>
    <div class="btn_right-side" @click="showMessageDrawer = !showMessageDrawer">首页基础质控结果</div>
  </CyFlex>

</template>

<script setup lang="ts">
import {autopsies, haveOrNot, yesOrNo} from './common'
import {onMounted, reactive} from 'vue'
import store from '@/store'
import {operations} from '@/data'
import {
  executeAudit,
  executePrintVerify,
  fetchQualityVerifications,
  getAllDictionary,
  getSheetInfo,
} from '@/api/case-front-sheet'
import maleIcon from '@/assets/male-icon.png'
import femaleIcon from '@/assets/female-icon.png'
import FullPage from "@/components/inpatient/frontsheet-printpage/FullPage.vue";
import useDateRange from "@/utils/cy-use/useDateRange";
import useVxeTable from "@/utils/cy-use/useVxeTable";
import CyFlex from "@/components/cy/flex/src/CyFlex.vue";
import {xcMessage} from "@/utils/xiaochan-element-plus";
import {CyMessageBox} from "@/components/cy/message-box";
import RejectAudit from "@/components/inpatient/frontsheet-printpage/RejectAudit.vue";
import AuditHistory from "@/components/inpatient/frontsheet-printpage/AuditHistory.vue";
import useDialogToJs from "@/components/js-dialog-comp/useDialogToJs";
import {
  emrStateEnum,
  getEmrUrl
} from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-editor/emr-init";
import {magicApi} from "@/utils/database/magic-api-request";

const windowSize = store.state.app.windowSize
const userName = store.state.user.info.name
const tableHeight = windowSize.h

const {CyDateRange, dateRange} = useDateRange({shortcutsIndex: 1, clearable: false})
const auditInquiryRequest = reactive({
  state: 'INITIAL',
  patNo: ''
})

const currentRow = ref({})
const {CyVxeTable, querySearch} = useVxeTable<{
  patNo: string,
  times: number
}>({
  keyField: 'id',
  mountedQuery: true,
  remoteSearch: () => fetchQualityVerifications({
    start: dateRange.value.start,
    end: dateRange.value.end,
    state: auditInquiryRequest.state,
    patNo: auditInquiryRequest.patNo
  }),
  tableProps: {
    onCellClick: ({row}) => {
      currentRow.value = row
      fetchSheetInfo(row.patNo, row.times)
    }
  }
})

const sheet = ref(initSheet())
const dics = ref({})

function handleStateChanged() {
  querySearch()
  sheet.value = initSheet()
}
function initSheet() {
  return {
    disdiagList: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
    surgeryList: [{}, {}, {}, {}, {}],
  }
}

const fetchSheetInfo = (patNo, times) => {
  if (patNo !== sheet.value.bah || times !== sheet.value.admissTimes) {
    forceVerifies.value = []
    adviceVerifies.value = []
  }
  getSheetInfo({
    bah: patNo,
    times: times,
    inOutFlag: 2
  }).then((res) => {
    sheet.value = res
  })
}

const nullPatient = () => {
  if (!sheet.value.bah) {
    xcMessage.warning('请先选择患者！')
    return true
  }
  return false
}

function openEmr() {
  if (nullPatient()) return
  magicApi({
    url: '/intergration/patientInfo/getActCount',
    method: 'get',
    params: { patNo: sheet.value.bah, times: sheet.value.admissTimes}
  }).then(res => {
    const emrState = res.count === 0 ? emrStateEnum.出院只读 : emrStateEnum.在院只读
    window.open(getEmrUrl(sheet.value.bah, sheet.value.admissTimes, emrState), '_blank')
  })
}

const showMessageDrawer = ref(false)
const basicControl = () => {
  if (nullPatient()) return
  executePrintVerify({
    sheet: sheet.value,
  }).then(() => {
    xcMessage.success('基础质控通过。')
  }).catch((e) => {
    forceVerifies.value = e.data.force
    adviceVerifies.value = e.data.advice
    showMessageDrawer.value = true
  })
}

const forceVerifies = ref([])
const adviceVerifies = ref([])
const currentMessageIndex = ref(null)
const messageColor = (id) => {
  return currentMessageIndex.value === id ?
      {
        background: '#ff2b2b',
        color: 'white',
      } :
      {
        background: '#eea7a752',
        color: '#ff2b2b',
      };
}

function approveAudit() {
  if (nullPatient()) {
    return
  }
  CyMessageBox.confirm({
    title: '提示',
    message: '确定审核通过吗？',
    type: 'warning'
  }).then(() => {
    currentRow.value.auditState = 'APPROVED'
    currentRow.value.auditRemark = '审核通过'
    currentRow.value.sheet = sheet.value
    executeAudit(currentRow.value).then((res) => {
      xcMessage.success(res)
      querySearch()
    })
  }).catch(() => {});
}

function rejectAudit() {
  if (nullPatient()) {
    return
  }
  useDialogToJs(RejectAudit, { verification: currentRow.value }).then((res) => {
    xcMessage.success(res)
    querySearch()
  })
}

function viewAuditHistory() {
  useDialogToJs(AuditHistory, { patinfo: currentRow.value })
}

onMounted(() => {
  getAllDictionary().then((res) => {
    res.getOperations = operations
    res.getYesOrNo = yesOrNo
    res.getHaveOrNot = haveOrNot
    res.getAutopsies = autopsies
    dics.value = res
  })
})
</script>

<style scoped>
:deep(.el-drawer__header) {
  margin-bottom: 8px;
}

.page-inner {
  padding: 0 20px 10px 26px;
  border-radius: 12px;
  text-align: justify;
}

.message-item {
  padding: 6px;
  margin-bottom: 6px;
  border-radius: 4px;
}

.message-item:hover {
  cursor: pointer;
}

.btn_right-side {
  display: flex;
  align-items: center;
  text-align: center;
  color: white;
  border-radius: 4px;
  width: 20px;
  height: 135px;
  position: fixed;
  background: rgb(238, 98, 5);
  top: 260px;
  right: 10px;
  cursor: pointer;
}

.no-verify-message {
  width: 100%;
  text-align: center;
  margin-top: 50px;
  font-size: 18px;
  color: gray;
}
</style>