病案首页优化。

src/views/hospitalization/case-front-sheet/AllCaseFrontSheet.vue

@@ -43,7 +43,7 @@
       </el-dropdown>
     </el-header>
     <el-container>
-      <el-aside width="270px">
+      <el-aside width="290px">
         <el-table :data="overview.slice((currentPage - 1) * 15, currentPage * 15)" :height="tableHeight" stripe highlight-current-row @row-click="fetchSheetInfo">
           <el-table-column label="姓名" width="70">
             <template #default="scope">
@@ -64,33 +64,30 @@
         </el-pagination>
       </el-aside>
       <el-main>
-        <div style="display: flex">
-          <div :style="mainInfo">
-            <div id="headpage">
-              <HeadPage :patient="sheet" :dics="dics" />
-            </div>
-            <div id="tailpage" style="margin-left: 70px">
-              <TailPage :patient="sheet" :dics="dics" />
-            </div>
+        <div :style="mainInfo">
+          <div id="headpage">
+            <HeadPage :patient="sheet" :dics="dics" />
           </div>
-          <div class="page-wrapper" :style="messageArea">
-            <div class="page-inner">
-              <el-tag type="success" size="small">当前科室CD型病例比例：{{ cdPercentage }}</el-tag>
-              <div style="border-bottom: 1px solid black; margin: 6px 0 6px 0"></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" class="message-item" :style="messageColor(index)" @click="handleClickMessage(item.code, 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>
+          <div id="tailpage" style="margin-left: 70px">
+            <TailPage :patient="sheet" :dics="dics" />
           </div>
         </div>
       </el-main>
     </el-container>
-
+    <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" class="message-item" :style="messageColor(index)" @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="rightside-btn" @click="showMessageDrawer = !showMessageDrawer">首页签收校验结果</div>
     <el-dialog v-model="showAdvanceSearch" title="高级条件检索" width="380px">
       <div style="margin-top: 5px">
         <el-tag type="info">医生条件</el-tag>
@@ -149,7 +146,7 @@
         <el-option :value="2" label="按明细计数"></el-option>
         <el-option :value="3" label="死亡患者计数"></el-option>
       </el-select>
-      <el-select v-model="disCountParams.dept" style="width: 130px" placeholder="请选择科室" filterable clearable>
+      <el-select :disabled="disCountParams.type === 1" v-model="disCountParams.dept" style="width: 130px" placeholder="请选择科室" filterable clearable>
         <el-option v-for="item in userWards" :key="item.code" :value="item.code" :label="item.name"></el-option>
       </el-select>
       <el-divider direction="vertical"></el-divider>
@@ -234,15 +231,15 @@ const cdStyle = computed(() => {
     left: '590px',
   }
 })
-const currentPage = ref(1)
+const currentPage = $ref(1)
 const handleCurrentPageChange = (val) => {
-  currentPage.value = val
+  currentPage = val
 }
-const userWards = ref([])
+const userWards = $ref([])
 const windowSize = store.state.app.windowSize
 const tableHeight = windowSize.h - 75
-const overview = ref([])
-const sheet = ref({
+const overview = $ref([])
+const sheet = $ref({
   disdiagList: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
   surgeryList: [{}, {}, {}, {}, {}],
 })
@@ -251,7 +248,7 @@ const mainInfo = {
   padding: '0 20px',
   overflowY: 'scroll',
 }
-const dics = ref({})
+const dics = $ref({})
 const overviewParam = reactive({
   ward: '',
   start: '',
@@ -260,86 +257,85 @@ const overviewParam = reactive({
   lateFlag: '3',
   bah: '',
 })
-const cdPercentage = ref('')
-const isLateDataMode = ref(false)
+const cdPercentage = $ref('')
+const isLateDataMode = $ref(false)
 const searchPatient = () => {
-  overviewParam.start = formatDate(dateRange.value[0])
-  overviewParam.end = formatDate(dateRange.value[1])
+  overviewParam.start = formatDate(dateRange[0])
+  overviewParam.end = formatDate(dateRange[1])
   basOutPatients(overviewParam).then((res) => {
-    isLateDataMode.value = overviewParam.lateFlag === '1'
-    cdPercentage.value = res.cdPercentage
-    overview.value = res.list
+    isLateDataMode = overviewParam.lateFlag === '1'
+    cdPercentage = res.cdPercentage
+    overview = res.list
     if (res.list.length === 1) {
       fetchSheetInfo(res.list[0])
     }
   })
 }
 
-const dateRange = ref([])
+const dateRange = $ref([])
 
 const fetchSheetInfo = (row) => {
-  if (row.bah !== sheet.value.bah || row.times !== sheet.value.admissTimes) {
-    forceVerifies.value = []
-    adviceVerifies.value = []
+  if (row.bah !== sheet.bah || row.times !== sheet.admissTimes) {
+    forceVerifies = []
+    adviceVerifies = []
   }
-
   getSheetInfo(row.bah, row.times, 2).then((res) => {
-    sheet.value = res
+    sheet = res
   })
 }
 
-const showSearch = ref(false)
-const insertDiag = ref(false)
+const showSearch = $ref(false)
+const insertDiag = $ref(false)
 watchEffect(() => {
-  if (showSearch.value) {
-    searchResults.value = []
+  if (showSearch) {
+    searchResults = []
     setTimeout(() => {
-      searchInput.value.focus()
+      searchInput.focus()
     }, 300)
   } else {
-    insertDiag.value = false
+    insertDiag = false
   }
 })
-const searchInput = ref(null)
-const searchUrl = ref('')
-const searchTargetCode = ref('')
-const searchTargetName = ref('')
-const searchContent = ref('')
-const currentSRPage = ref(1)
+const searchInput = $ref(null)
+const searchUrl = $ref('')
+const searchTargetCode = $ref('')
+const searchTargetName = $ref('')
+const searchContent = $ref('')
+const currentSRPage = $ref(1)
 const lastPage = () => {
-  currentSRPage.value -= 1
+  currentSRPage -= 1
   fetchSearchData()
 }
 const nextPage = () => {
-  currentSRPage.value += 1
+  currentSRPage += 1
   fetchSearchData()
 }
 const fetchSearchData = () => {
   const param = {
-    method: searchMethod.value,
-    target: searchUrl.value,
-    content: searchContent.value,
-    responceType: sheet.value.responceType,
-    page: currentSRPage.value,
-    ybType: sheet.value.ybType,
-    treatType: sheet.value.treatType,
+    method: searchMethod,
+    target: searchUrl,
+    content: searchContent,
+    responceType: sheet.responceType,
+    page: currentSRPage,
+    ybType: sheet.ybType,
+    treatType: sheet.treatType,
   }
   sheetSearch(param).then((res) => {
-    searchResults.value = res
+    searchResults = res
   })
 }
 const executeSearch = () => {
-  if (searchContent.value.length < 2 && searchContent.value !== '-') return
-  currentSRPage.value = 1
-  if (searchContent.value === '-') {
-    searchResults.value = [{ code: '-', name: '-' }]
+  if (searchContent.length < 2 && searchContent !== '-') return
+  currentSRPage = 1
+  if (searchContent === '-') {
+    searchResults = [{ code: '-', name: '-' }]
   } else {
     fetchSearchData()
   }
 }
 
-const showDismissCount = ref(false)
-const dismissCountdata = ref([])
+const showDismissCount = $ref(false)
+const dismissCountdata = $ref([])
 const disCountParams = reactive({
   month: formatMonth(new Date()),
   type: 1,
@@ -348,11 +344,11 @@ const disCountParams = reactive({
 const fetchDismissCount = () => {
   disCountParams.month = formatMonth(disCountParams.month)
   analyzeDismissCount(disCountParams).then((res) => {
-    dismissCountdata.value = res
+    dismissCountdata = res
   })
 }
 const exportDismissCount = () => {
-  if (dismissCountdata.value.length === 0) {
+  if (dismissCountdata.length === 0) {
     ElMessage({
       message: '没有可以导出的数据！',
       type: 'warning',
@@ -395,12 +391,12 @@ const exportDismissCount = () => {
     name = disCountParams.type === 2 ? '出院明细统计' : '死亡患者统计'
   }
   const fileName = `【${disCountParams.month}】${name}`
-  Export(dismissCountdata.value, title, fileName)
+  Export(dismissCountdata, title, fileName)
 }
 const handleCommand = (val) => {
   switch (val) {
     case 'dismissCount':
-      showDismissCount.value = true
+      showDismissCount = true
       break
     case 'exportLateData':
       exportLateDataExel()
@@ -421,7 +417,7 @@ const handleCommand = (val) => {
 }
 
 const exportLateDataExel = () => {
-  if (!isLateDataMode.value) {
+  if (!isLateDataMode) {
     ElMessage({
       message: '请先查询迟交病案。',
       type: 'warning',
@@ -430,7 +426,7 @@ const exportLateDataExel = () => {
     })
     return
   }
-  if (overview.value.length === 0) {
+  if (overview.length === 0) {
     ElMessage({
       message: '没有可以导出的数据！',
       type: 'warning',
@@ -452,29 +448,29 @@ const exportLateDataExel = () => {
     lateDays: '迟交天数',
     signDate: '签收日期',
   }
-  Export(overview.value, title, '迟交病案')
+  Export(overview, title, '迟交病案')
 }
 
-const searchMethod = ref('alpha')
-const searchResults = ref([])
+const searchMethod = $ref('alpha')
+const searchResults = $ref([])
 const showSearchData = (flag) => {
   if (flag === 'advanceSearchDoctor') {
-    searchUrl.value = 'employee'
-    searchTargetCode.value = 'advanceSearch'
-    searchTargetName.value = 'doctor'
+    searchUrl = 'employee'
+    searchTargetCode = 'advanceSearch'
+    searchTargetName = 'doctor'
   } else if (flag === 'advanceSearchDiag') {
-    searchUrl.value = 'normalDiag'
-    searchTargetCode.value = 'advanceSearch'
-    searchTargetName.value = 'icd'
+    searchUrl = 'normalDiag'
+    searchTargetCode = 'advanceSearch'
+    searchTargetName = 'icd'
   } else {
-    searchUrl.value = 'surgery'
-    searchTargetCode.value = 'advanceSearch'
-    searchTargetName.value = 'surgery'
+    searchUrl = 'surgery'
+    searchTargetCode = 'advanceSearch'
+    searchTargetName = 'surgery'
   }
-  showSearch.value = true
+  showSearch = true
 }
 
-const showAdvanceSearch = ref(false)
+const showAdvanceSearch = $ref(false)
 const advanceSearch = reactive({
   doctorCode: '',
   doctorName: '',
@@ -485,19 +481,19 @@ const advanceSearch = reactive({
   sex: null,
 })
 const doAdvanceSearch = () => {
-  advanceSearch.start = formatDate(dateRange.value[0])
-  advanceSearch.end = formatDate(dateRange.value[1])
+  advanceSearch.start = formatDate(dateRange[0])
+  advanceSearch.end = formatDate(dateRange[1])
   if (!advanceSearch.doctorName) {
     advanceSearch.doctorCode = ''
   }
   executeAdvanceSearch(advanceSearch).then((res) => {
-    overview.value = res
-    showAdvanceSearch.value = false
+    overview = res
+    showAdvanceSearch = false
   })
 }
 
 const handleSelectSearch = (item) => {
-  switch (searchTargetName.value) {
+  switch (searchTargetName) {
     case 'doctor':
       advanceSearch.doctorCode = item.code
       advanceSearch.doctorName = item.name
@@ -511,12 +507,12 @@ const handleSelectSearch = (item) => {
       advanceSearch.surgeryName = item.name
       break
   }
-  searchContent.value = ''
-  showSearch.value = false
+  searchContent = ''
+  showSearch = false
 }
 
 const nullPatient = () => {
-  if (!sheet.value.bah) {
+  if (!sheet.bah) {
     ElMessage({
       message: '请先选择患者！',
       type: 'warning',
@@ -527,18 +523,21 @@ const nullPatient = () => {
   }
   return false
 }
+
+const showMessageDrawer = $ref(false)
 const beforePrint = (flag) => {
   if (nullPatient()) return
   const param = {
-    sheet: sheet.value,
+    sheet: sheet,
   }
   executePrintVerify(param)
     .then(() => {
       execPrint(flag)
     })
     .catch((e) => {
-      forceVerifies.value = e.data.force
-      adviceVerifies.value = e.data.advice
+      forceVerifies = e.data.force
+      adviceVerifies = e.data.advice
+      showMessageDrawer = true
       if (e.data.force.length === 0) {
         execPrint(flag)
       }
@@ -563,7 +562,7 @@ const archiveBa = () => {
   }
   const param = {
     opType: 2,
-    sheet: sheet.value,
+    sheet: sheet,
   }
   executeSaveVerify(param)
     .then((res) => {
@@ -575,7 +574,8 @@ const archiveBa = () => {
       })
     })
     .catch((e) => {
-      forceVerifies.value = e.data
+      forceVerifies = e.data
+      showMessageDrawer = true
     })
 }
 
@@ -584,7 +584,7 @@ const unArchiveBa = () => {
     return
   }
 
-  ElMessageBox.confirm('是否确认解除签收患者【' + sheet.value.name + '】的病案首页？', '提示', {
+  ElMessageBox.confirm('是否确认解除签收患者【' + sheet.name + '】的病案首页？', '提示', {
     type: 'warning',
     confirmButtonText: '解除签收',
     cancelButtonText: '取消',
@@ -592,7 +592,7 @@ const unArchiveBa = () => {
     .then(() => {
       const param = {
         opType: 3,
-        sheet: sheet.value,
+        sheet: sheet,
       }
       executeUnArchiveBa(param).then((res) => {
         ElMessage({
@@ -610,20 +610,20 @@ const confirmCopyPrint = () => {
   if (nullPatient()) {
     return
   }
-  if (sheet.value.fileStatus === 2) {
+  if (sheet.fileStatus === 2) {
     ElMessageBox.alert('此病案首页已确认过打印！', '提示', {
       showCancelButton: false,
       type: 'warning',
     }).then(() => {})
     return
   }
-  ElMessageBox.confirm('是否确认患者【' + sheet.value.name + '】的病案首页已打印，此操作将不可逆转！', '提示', {
+  ElMessageBox.confirm('是否确认患者【' + sheet.name + '】的病案首页已打印，此操作将不可逆转！', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning',
   })
     .then(() => {
-      executeConfirmPrint({ sheet: sheet.value }).then(() => {
+      executeConfirmPrint({ sheet: sheet }).then(() => {
         ElMessage({
           message: '操作成功',
           type: 'success',
@@ -635,18 +635,11 @@ const confirmCopyPrint = () => {
     .catch(() => {})
 }
 
-const messageArea = {
-  width: windowSize.w - 1380 + 'px',
-  height: windowSize.h - 65 + 'px',
-  padding: '0 16px',
-  overflowY: 'scroll',
-}
-
-const forceVerifies = ref([])
-const adviceVerifies = ref([])
-const currentMessageIndex = ref(null)
+const forceVerifies = $ref([])
+const adviceVerifies = $ref([])
+const currentMessageIndex = $ref(null)
 const messageColor = (id) => {
-  return currentMessageIndex.value === id
+  return currentMessageIndex === id
     ? {
         background: '#ff2b2b',
         color: 'white',
@@ -656,22 +649,10 @@ const messageColor = (id) => {
         color: '#ff2b2b',
       }
 }
-const handleClickMessage = (id, index) => {
-  currentMessageIndex.value = index
-  let ele = document.getElementById(id)
-  let i = 0
-  let timer = setInterval(() => {
-    ele.style.background = i % 2 == 0 ? '#fd4343' : 'transparent'
-    i++
-    if (i > 5) {
-      clearInterval(timer)
-    }
-  }, 500)
-}
 
-const currentDismissCountPage = ref(1)
+const currentDismissCountPage = $ref(1)
 const handleCurrentDismissCountPageChange = (val) => {
-  currentDismissCountPage.value = val
+  currentDismissCountPage = val
 }
 
 onActivated(() => {
@@ -684,12 +665,12 @@ onMounted(() => {
     res.getYesOrNo = yesOrNo
     res.getHaveOrNot = haveOrNot
     res.getAutopsies = autopsies
-    dics.value = res
+    dics = res
     getAllWards().then((res1) => {
-      userWards.value = res1
+      userWards = res1
       const t = getOneMonthOffset()
-      dateRange.value[0] = t.start
-      dateRange.value[1] = t.end
+      dateRange[0] = t.start
+      dateRange[1] = t.end
     })
   })
 })
@@ -699,69 +680,41 @@ onMounted(() => {
 :deep(.el-dialog__body) {
   padding-top: 0;
 }
-.keyboard {
-  margin-left: 5px;
-  padding: 0.2rem 0.4rem;
-  font-size: 87.5%;
-  color: #fff;
-  background-color: #212529;
-  border-radius: 0.2rem;
-}
-
-select,
-input {
-  outline: none;
-  border: none;
-  height: 20px;
-  line-height: 20px;
-  border-radius: 0;
-  background: transparent;
-  border-bottom: 1px solid #333333;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-input[type='number'] {
-  -moz-appearance: textfield;
+:deep(.el-drawer__header) {
+  margin-bottom: 8px;
 }
-select ::-ms-expand {
-  display: none;
-}
-textarea {
-  outline: none;
-  border: none;
-  background-color: transparent;
-}
-table th {
-  border: 1px solid black;
-  text-align: center;
-}
-table td {
-  border: 1px solid black;
-}
-
 .page-inner {
-  padding: 10px 0 0 0;
+  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;
 }
-.page-wrapper {
-  position: relative;
-  margin: 0 auto;
-  background: #fff;
-  border-radius: 20px;
-  text-align: justify;
-  /* 高斯模糊，过滤器 */
-  filter: drop-shadow(0px 0px 15px #bbb);
+.rightside-btn {
+  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>