攒劲的样式，和完成页面布局

src/css/layout.scss

@@ -45,3 +45,42 @@
   height: 100%;
   border: 0;
 }
+
+.layout_container {
+  @include max_h_w;
+  display: flex;
+  flex-direction: row;
+
+  > header {
+    margin-bottom: 8px;
+  }
+
+  > aside {
+    margin-right: 8px;
+  }
+
+  > .layout_main {
+    flex: 1;
+    width: 0;
+  }
+
+}
+
+.layout-vertical {
+  flex-direction: column;
+
+  > .layout_main {
+    height: 0;
+    width: 100%;
+  }
+}
+
+.layout_el-table {
+  display: flex;
+  flex-direction: column;
+
+  .el-table {
+    flex: 1;
+  }
+
+}

src/views/med-tec-mod/MenZhenXiangMu.vue

@@ -1,117 +1,119 @@
 <template>
-  <el-container>
-    <el-main>
-      <el-row>
-        <el-col>
-          <el-date-picker
-              v-model="dateRange"
-              :shortcuts="shortcuts"
-              end-placeholder="结束日期"
-              placeholder="选择日期"
-              range-separator="至"
-              start-placeholder="开始日期"
-              style="width: 280px"
-              type="daterange"
-          ></el-date-picker>
-          患者ID：
-          <el-input v-model="patientId" clearable style="width: 120px" @blur="patientId = $event.target.value.trim()"
-                    @keyup.enter="getMzPatientClick"></el-input>
-          <el-select v-model="xiangMuZhuangTai" style="width: 90px">
-            <el-option v-for="item in xiangMuZhuangTaiData" :key="item.code" :label="item.name" :value="item.code">
-              <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
-              <el-divider direction="vertical"></el-divider>
-              <span :style="{ color: item.color }">{{ item.name }}</span>
-            </el-option>
-          </el-select>
-          <el-button icon="Search" type="primary" @click="getMzPatientClick"> 查询</el-button>
-          <el-button icon="Search" type="primary" @click="kuaiSuChaZhaoClick"> 快速查找</el-button>
-          <el-button icon="Search" type="warning" @click="chaoZuoZhiNanDialog = true"> 操作指南</el-button>
-          <el-button icon="Upload" type="success" @click="baoCunClick"> 保存</el-button>
-          <el-col>
-            <el-tag effect="dark" size="large">患者姓名: {{ patient.name }}</el-tag>
-            <el-tag effect="dark" size="large" type="warning">性别:{{ cptSex(patient.sex) }}</el-tag>
-            <el-tag effect="dark" size="large">出生日期: {{ patient.birthDay }}</el-tag>
-            <el-tag effect="dark" size="large" type="warning">诊疗卡: {{ patient.icCardNo }}</el-tag>
-          </el-col>
-        </el-col>
-        <el-col :span="4">
-          <el-table :data="shouFeiData" :height="windowsHeight / 1.1" highlight-current-row stripe
-                    @cell-click="getFeiYongXinXiClick">
-            <el-table-column label="收费信息">
-              <el-table-column label="缴费日期" prop="chargeDate" width="80"></el-table-column>
-              <el-table-column label="流水号">
-                <template #default="scope">
-                  <el-popover :width="800" placement="right" trigger="click">
-                    <template #reference>
-                      <el-button type="success" @click="getFeiYongXinXiClick(scope.row)">{{
-                          scope.row.realNo
-                        }}
-                      </el-button>
-                    </template>
-                    <el-table :data="feiYongData" :height="windowsHeight / 2" highlight-current-row stripe>
-                      <el-table-column label="缴费明细信息">
-                        <el-table-column label="待确认标志" prop="confirmFlag">
-                          <template #default="scope">
-                            <span v-html="confirmFlag(scope.row.confirmFlag)"></span>
-                          </template>
-                        </el-table-column>
-                        <el-table-column label="项目编码" prop="chargeItemCode"></el-table-column>
-                        <el-table-column label="项目" prop="chargeName"></el-table-column>
-                        <el-table-column label="金额" prop="chargeFee"></el-table-column>
-                        <el-table-column label="确认时间" prop="confirmTime" width="80"></el-table-column>
-                        <el-table-column label="确认人" prop="confirmIdName"></el-table-column>
-                        <el-table-column label="执行科室" prop="execDeptName"></el-table-column>
-                        <el-table-column label="申请号" prop="reqNo"></el-table-column>
+  <div class="layout_container layout-vertical">
+    <header>
+      <div>
+        <el-date-picker
+            v-model="dateRange"
+            :shortcuts="shortcuts"
+            end-placeholder="结束日期"
+            placeholder="选择日期"
+            range-separator="至"
+            start-placeholder="开始日期"
+            style="width: 280px"
+            type="daterange"
+        ></el-date-picker>
+        患者ID：
+        <el-input v-model="patientId" clearable style="width: 120px" @blur="patientId = $event.target.value.trim()"
+                  @keyup.enter="getMzPatientClick"></el-input>
+        <el-select v-model="xiangMuZhuangTai" style="width: 90px">
+          <el-option v-for="item in xiangMuZhuangTaiData" :key="item.code" :label="item.name" :value="item.code">
+            <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
+            <el-divider direction="vertical"></el-divider>
+            <span :style="{ color: item.color }">{{ item.name }}</span>
+          </el-option>
+        </el-select>
+        <el-button icon="Search" type="primary" @click="getMzPatientClick"> 查询</el-button>
+        <el-button icon="Search" type="primary" @click="kuaiSuChaZhaoClick"> 快速查找</el-button>
+        <el-button icon="Search" type="warning" @click="chaoZuoZhiNanDialog = true"> 操作指南</el-button>
+        <el-button icon="Upload" type="success" @click="baoCunClick"> 保存</el-button>
+      </div>
+      <div>
+        <el-tag effect="dark" size="large">患者姓名: {{ patient.name }}</el-tag>
+        <el-tag effect="dark" size="large" type="warning">性别:{{ cptSex(patient.sex) }}</el-tag>
+        <el-tag effect="dark" size="large">出生日期: {{ patient.birthDay }}</el-tag>
+        <el-tag effect="dark" size="large" type="warning">诊疗卡: {{ patient.icCardNo }}</el-tag>
+      </div>
+    </header>
+
+    <div class="layout_main layout_container">
+      <aside class="layout_el-table" style="width: 220px">
+        <el-table :data="shouFeiData" highlight-current-row stripe
+                  @cell-click="getFeiYongXinXiClick">
+          <el-table-column label="收费信息">
+            <el-table-column label="缴费日期" prop="chargeDate" width="80"></el-table-column>
+            <el-table-column label="流水号">
+              <template #default="scope">
+                <el-popover :width="800" placement="right" trigger="click">
+                  <template #reference>
+                    <el-button type="success" @click="getFeiYongXinXiClick(scope.row)">{{
+                        scope.row.realNo
+                      }}
+                    </el-button>
+                  </template>
+                  <el-table :data="feiYongData" :height="windowsHeight / 2" highlight-current-row stripe>
+                    <el-table-column label="缴费明细信息">
+                      <el-table-column label="待确认标志" prop="confirmFlag">
+                        <template #default="scope">
+                          <span v-html="confirmFlag(scope.row.confirmFlag)"></span>
+                        </template>
                       </el-table-column>
-                    </el-table>
-                  </el-popover>
-                </template>
-              </el-table-column>
+                      <el-table-column label="项目编码" prop="chargeItemCode"></el-table-column>
+                      <el-table-column label="项目" prop="chargeName"></el-table-column>
+                      <el-table-column label="金额" prop="chargeFee"></el-table-column>
+                      <el-table-column label="确认时间" prop="confirmTime" width="80"></el-table-column>
+                      <el-table-column label="确认人" prop="confirmIdName"></el-table-column>
+                      <el-table-column label="执行科室" prop="execDeptName"></el-table-column>
+                      <el-table-column label="申请号" prop="reqNo"></el-table-column>
+                    </el-table-column>
+                  </el-table>
+                </el-popover>
+              </template>
             </el-table-column>
-          </el-table>
-        </el-col>
-        <el-col :span="20">
-          <el-table :data="keQueRenData" :height="windowsHeight / 1.1" highlight-current-row stripe>
-            <el-table-column label="本科室">
-              <el-table-column label="待确认标志" prop="confirmFlag" width="250">
-                <template #default="scope">
-                  <el-radio-group v-model="scope.row.confirmFlag">
-                    <el-radio-button :disabled="scope.row.xiangMuZhuangTai === 1 || scope.row.xiangMuZhuangTai === 3"
-                                     :label="0"> 未确认
-                    </el-radio-button>
-                    <el-radio-button :label="1">确认</el-radio-button>
-                    <el-radio-button :label="3">取消</el-radio-button>
-                  </el-radio-group>
-                </template>
-              </el-table-column>
-              <el-table-column label="项目编码" prop="chargeItemCode"></el-table-column>
-              <el-table-column label="项目" prop="chargeName"></el-table-column>
-              <el-table-column label="金额" prop="chargeFeeNew"></el-table-column>
-              <el-table-column label="确认时间" prop="confirmTime" width="80"></el-table-column>
-              <el-table-column label="确认人" prop="confirmIdName"></el-table-column>
-              <el-table-column label="执行科室" prop="execDeptName"></el-table-column>
-              <el-table-column label="申请号" prop="reqNo">
-                <template #default="scope">
-                  <el-popover :width="800" placement="left" trigger="click">
-                    <template #reference>
-                      <el-button type="success" @click="getMingXiClick(scope.row)">{{ scope.row.reqNo }}</el-button>
-                    </template>
-                    <el-table :data="danGeXingXi" highlight-current-row stripe>
-                      <el-table-column label="明细">
-                        <el-table-column label="项目编码" prop="chargeItemCode"></el-table-column>
-                        <el-table-column label="项目" prop="chargeName"></el-table-column>
-                        <el-table-column label="金额" prop="chargeFee"></el-table-column>
-                      </el-table-column>
-                    </el-table>
-                  </el-popover>
-                </template>
-              </el-table-column>
+          </el-table-column>
+        </el-table>
+      </aside>
+      <div class="layout_main layout_el-table">
+        <el-table :data="keQueRenData" highlight-current-row stripe>
+          <el-table-column label="本科室">
+            <el-table-column label="待确认标志" prop="confirmFlag" width="250">
+              <template #default="scope">
+                <el-radio-group v-model="scope.row.confirmFlag">
+                  <el-radio-button :disabled="scope.row.xiangMuZhuangTai === 1 || scope.row.xiangMuZhuangTai === 3"
+                                   :label="0"> 未确认
+                  </el-radio-button>
+                  <el-radio-button :label="1">确认</el-radio-button>
+                  <el-radio-button :label="3">取消</el-radio-button>
+                </el-radio-group>
+              </template>
             </el-table-column>
-          </el-table>
-        </el-col>
-      </el-row>
-    </el-main>
-  </el-container>
+            <el-table-column label="项目编码" prop="chargeItemCode"></el-table-column>
+            <el-table-column label="项目" prop="chargeName"></el-table-column>
+            <el-table-column label="金额" prop="chargeFeeNew"></el-table-column>
+            <el-table-column label="确认时间" prop="confirmTime" width="80"></el-table-column>
+            <el-table-column label="确认人" prop="confirmIdName"></el-table-column>
+            <el-table-column label="执行科室" prop="execDeptName"></el-table-column>
+            <el-table-column label="申请号" prop="reqNo">
+              <template #default="scope">
+                <el-popover :width="800" placement="left" trigger="click">
+                  <template #reference>
+                    <el-button type="success" @click="getMingXiClick(scope.row)">{{ scope.row.reqNo }}</el-button>
+                  </template>
+                  <el-table :data="danGeXingXi" highlight-current-row stripe>
+                    <el-table-column label="明细">
+                      <el-table-column label="项目编码" prop="chargeItemCode"></el-table-column>
+                      <el-table-column label="项目" prop="chargeName"></el-table-column>
+                      <el-table-column label="金额" prop="chargeFee"></el-table-column>
+                    </el-table-column>
+                  </el-table>
+                </el-popover>
+              </template>
+            </el-table-column>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+
   <el-dialog v-model="kuaiSuChaZhaoDialog" title="点击表格中的姓名即可">
     <el-table
         :data="kuaiSuChaZhaoData.list.slice((kuaiSuChaZhaoData.currentPage - 1) * kuaiSuChaZhaoData.pageSize, kuaiSuChaZhaoData.pageSize * kuaiSuChaZhaoData.currentPage)"
@@ -146,7 +148,7 @@
     1、在选择完数据后点击保存即可。 <br/>
   </el-dialog>
 </template>
-<script>
+<script setup>
 import {shortcuts} from '@/data/shortcuts'
 import {ref} from 'vue'
 import {cptSex} from '@/utils/computed'
@@ -163,155 +165,128 @@ import {needRule} from "@/utils/public";
 import XEUtils from 'xe-utils'
 import {useUserStore} from "@/pinia/user-store";
 
-export default {
-  setup() {
-    const windowsHeight = window.innerHeight
-    const userInfo = useUserStore().userInfo
-    const dateRange = ref(shortcuts[0].value)
-    const patientId = ref('') //12117-4
-    const xiangMuZhuangTai = ref(0)
-    const chargeDate = ref('')
 
-    const patient = ref({})
+const windowsHeight = window.innerHeight
+const userInfo = useUserStore().userInfo
+const dateRange = ref(shortcuts[0].value)
+const patientId = ref('') //12117-4
+const xiangMuZhuangTai = ref(0)
+const chargeDate = ref('')
 
-    const shouFeiData = ref([])
-    const feiYongData = ref([])
-    const keQueRenData = ref([])
-    const danGeXingXi = ref([])
+const patient = ref({})
 
-    const getMzPatientClick = () => {
-      lingShiBaoCunJiaoFeiMingXi.value = {}
-      shouFeiData.value = []
-      keQueRenData.value = []
-      feiYongData.value = []
-      danGeXingXi.value = []
-      let dateR = getDateRangeFormatDate(dateRange.value)
-      getMzPatient(patientId.value, xiangMuZhuangTai.value, dateR.startTime, dateR.endTime, userInfo.deptCode)
-          .then((res) => {
-            patientId.value = res.patientId
-            patient.value = res
-            patient.value.birthDay = patient.value.birthDay.split(' ')[0]
-            shouFeiData.value = res.list
-          })
-          .catch(() => {
-            patient.value = {}
-          })
-    }
-
-    const lingShiBaoCunJiaoFeiMingXi = ref({})
+const shouFeiData = ref([])
+const feiYongData = ref([])
+const keQueRenData = ref([])
+const danGeXingXi = ref([])
 
-    function deptList(item) {
-      return !!userInfo.partTimeDeptMap[item];
-    }
+const xiangMuZhuangTaiData = [
+  {code: 0, name: '未确认'},
+  {code: 1, name: '已确认'},
+]
 
-    const getFeiYongXinXiClick = (val) => {
-      chargeDate.value = val.chargeDate
-      getFeiYongXinXi(val.realNo, val.patientId, val.times, xiangMuZhuangTai.value).then((res) => {
-        keQueRenData.value = []
-        feiYongData.value = res
-        lingShiBaoCunJiaoFeiMingXi.value = XEUtils.clone(val)
-        if (needRule(1)) {
-          keQueRenData.value = XEUtils.clone(feiYongData.value, true)
-        } else {
-          keQueRenData.value = feiYongData.value.filter((item) => {
-            return deptList(item.execDept) || stringIsBlank(item.execDept)
-          })
-        }
+const getMzPatientClick = () => {
+  lingShiBaoCunJiaoFeiMingXi.value = {}
+  shouFeiData.value = []
+  keQueRenData.value = []
+  feiYongData.value = []
+  danGeXingXi.value = []
+  let dateR = getDateRangeFormatDate(dateRange.value)
+  getMzPatient(patientId.value, xiangMuZhuangTai.value, dateR.startTime, dateR.endTime, userInfo.deptCode)
+      .then((res) => {
+        patientId.value = res.patientId
+        patient.value = res
+        patient.value.birthDay = patient.value.birthDay.split(' ')[0]
+        shouFeiData.value = res.list
       })
-    }
+      .catch(() => {
+        patient.value = {}
+      })
+}
 
-    const lingShiHuoQuMingXi = ref({})
+const lingShiBaoCunJiaoFeiMingXi = ref({})
 
-    const getMingXiClick = (val) => {
-      lingShiHuoQuMingXi.value = val
-      if (typeof val.list !== 'undefined') {
-        danGeXingXi.value = val.list
-        val.list.forEach((item) => {
-          item.chargeFee = item.drugWin * item.quantity * item.unitPrice
-        })
-      }
-    }
+function deptList(item) {
+  return !!userInfo.partTimeDeptMap[item];
+}
 
-    const baoCunClick = () => {
-      const list = keQueRenData.value.filter((item) => {
-        return item.confirmFlag !== item.oldConfirmFlag && item.confirmFlag !== 0
+const getFeiYongXinXiClick = (val) => {
+  chargeDate.value = val.chargeDate
+  getFeiYongXinXi(val.realNo, val.patientId, val.times, xiangMuZhuangTai.value).then((res) => {
+    keQueRenData.value = []
+    feiYongData.value = res
+    lingShiBaoCunJiaoFeiMingXi.value = XEUtils.clone(val)
+    if (needRule(1)) {
+      keQueRenData.value = XEUtils.clone(feiYongData.value, true)
+    } else {
+      keQueRenData.value = feiYongData.value.filter((item) => {
+        return deptList(item.execDept) || stringIsBlank(item.execDept)
       })
-      if (listIsBlank(list)) {
-        return ElMessage.error('数据没有变化请勿点击')
-      }
-      ElMessageBox.confirm('请确认数据', '提示', {
-        type: 'warning',
-      })
-          .then(() => {
-            let baoCun = {
-              list: list,
-              realNo: lingShiBaoCunJiaoFeiMingXi.value.realNo,
-              patientId: lingShiBaoCunJiaoFeiMingXi.value.patientId,
-              times: lingShiBaoCunJiaoFeiMingXi.value.times,
-              execDept: userInfo.deptCode,
-            }
-            menZhenXiangMuQuXiaoHuoQueRen(baoCun).then((res) => {
-              keQueRenData.value = []
-            })
-          })
-          .catch(() => {
-          })
     }
+  })
+}
 
-    const kuaiSuChaZhaoDialog = ref(false)
-    const kuaiSuChaZhaoData = ref({
-      currentPage: 1,
-      pageSize: 10,
-      list: [],
+const lingShiHuoQuMingXi = ref({})
+
+const getMingXiClick = (val) => {
+  lingShiHuoQuMingXi.value = val
+  if (typeof val.list !== 'undefined') {
+    danGeXingXi.value = val.list
+    val.list.forEach((item) => {
+      item.chargeFee = item.drugWin * item.quantity * item.unitPrice
     })
-    const chaoZuoZhiNanDialog = ref(false)
+  }
+}
 
-    const kuaiSuChaZhaoClick = () => {
-      let dateR = getDateRangeFormatDate(dateRange.value)
-      kuaiSuChaZhao(dateR.startTime, dateR.endTime, userInfo.deptCode).then((res) => {
-        kuaiSuChaZhaoData.value.list = res
-        kuaiSuChaZhaoDialog.value = true
+const baoCunClick = () => {
+  const list = keQueRenData.value.filter((item) => {
+    return item.confirmFlag !== item.oldConfirmFlag && item.confirmFlag !== 0
+  })
+  if (listIsBlank(list)) {
+    return ElMessage.error('数据没有变化请勿点击')
+  }
+  ElMessageBox.confirm('请确认数据', '提示', {
+    type: 'warning',
+  })
+      .then(() => {
+        let baoCun = {
+          list: list,
+          realNo: lingShiBaoCunJiaoFeiMingXi.value.realNo,
+          patientId: lingShiBaoCunJiaoFeiMingXi.value.patientId,
+          times: lingShiBaoCunJiaoFeiMingXi.value.times,
+          execDept: userInfo.deptCode,
+        }
+        menZhenXiangMuQuXiaoHuoQueRen(baoCun).then((res) => {
+          keQueRenData.value = []
+        })
       })
-    }
+      .catch(() => {
+      })
+}
 
-    const kuaiSuChaZhaoCurrent = (val) => {
-      kuaiSuChaZhaoData.value.currentPage = val
-    }
+const kuaiSuChaZhaoDialog = ref(false)
+const kuaiSuChaZhaoData = ref({
+  currentPage: 1,
+  pageSize: 10,
+  list: [],
+})
+const chaoZuoZhiNanDialog = ref(false)
 
-    const chaZhaoTable = (val) => {
-      patientId.value = val.patientId
-      getMzPatientClick()
-    }
+const kuaiSuChaZhaoClick = () => {
+  let dateR = getDateRangeFormatDate(dateRange.value)
+  kuaiSuChaZhao(dateR.startTime, dateR.endTime, userInfo.deptCode).then((res) => {
+    kuaiSuChaZhaoData.value.list = res
+    kuaiSuChaZhaoDialog.value = true
+  })
+}
 
-    return {
-      shortcuts,
-      patientId,
-      dateRange,
-      cptSex,
-      patient,
-      getMzPatientClick,
-      xiangMuZhuangTaiData: ref([
-        {code: 0, name: '未确认'},
-        {code: 1, name: '已确认'},
-      ]),
-      xiangMuZhuangTai,
-      windowsHeight,
-      shouFeiData,
-      getFeiYongXinXiClick,
-      feiYongData,
-      keQueRenData,
-      getMingXiClick,
-      danGeXingXi,
-      baoCunClick,
-      confirmFlag,
-      kuaiSuChaZhaoClick,
-      kuaiSuChaZhaoDialog,
-      chaoZuoZhiNanDialog,
-      kuaiSuChaZhaoData,
-      kuaiSuChaZhaoCurrent,
-      chaZhaoTable,
-    }
-  },
+const kuaiSuChaZhaoCurrent = (val) => {
+  kuaiSuChaZhaoData.value.currentPage = val
+}
+
+const chaZhaoTable = (val) => {
+  patientId.value = val.patientId
+  getMzPatientClick()
 }
 
 function confirmFlag(val) {

src/views/med-tec-mod/QueRenYiZhuShouFei.vue

@@ -1,142 +1,150 @@
 <template>
-  <div class="layout_display_flex_y">
-    <div class="m-b_8px">
-      <el-date-picker
-          type="daterange"
-          v-model="dateRange"
-          placeholder="选择日期"
-          style="width: 280px"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :shortcuts="shortcuts"
-      ></el-date-picker>
-      <el-input style="width: 160px" placeholder="请输入住院号" clearable v-model.trim="queryTerm.inpatientNo"
-                @keyup.enter="getHuanZheXinXiClick"></el-input>
-      <el-select v-model="queryTerm.wardCode" style="width: 150px" filterable clearable placeholder="请选择病区">
-        <el-option v-for="item in wardData" :key="item.code" :label="item.name" :value="item.code">
-          <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
-          <el-divider direction="vertical"></el-divider>
-          <span>{{ item.name }}</span>
-        </el-option>
-      </el-select>
-      <el-divider direction="vertical"></el-divider>
-      <el-button type="primary" icon="Search" @click="getHuanZheXinXiClick">查询</el-button>
-      <el-button type="primary" icon="RefreshLeft" @click="getXuQueFeiYiZhuClick">刷新</el-button>
-    </div>
-    <div>
-      排序：
-      <el-select v-model="queryTerm.fenLei" style="width: 100px; margin: auto 10px auto 10px">
-        <el-option :value="0" label="病区"></el-option>
-        <el-option :value="1" label="执行人"></el-option>
-      </el-select>
-      <el-button type="success" @click="baoCunYiZhuQueFeiClick" icon="Upload" :disabled="queryTerm.liShi === 1"> 保存
-      </el-button>
-      <el-divider direction="vertical"></el-divider>
-      <el-radio-group v-model="queryTerm.liShi" @change="getHuanZheXinXiClick">
-        <el-radio-button :label="0">未确认</el-radio-button>
-        <el-radio-button :label="1">历史</el-radio-button>
-      </el-radio-group>
-      <el-divider direction="vertical"></el-divider>
-      <el-button type="warning" @click="chaoZuoZhiNan = true">操作指南</el-button>
-      <el-divider direction="vertical"></el-divider>
-      <el-switch
-          v-show="queryTerm.liShi === 1"
-          v-model="zhiKanZiJi"
-          active-color="#13ce66"
-          inactive-color="#ff4949"
-          active-text="只看自己"
-          inactive-text="全部"
-          :active-value="true"
-          :inactive-value="false"
-      >
-      </el-switch>
-    </div>
-    <div class="layout_flex_1-y ">
-      <div class="layout_display_flex_y" v-show="queryTerm.liShi === 0">
-        <el-table :data="huanZheYiZhuFeiYongData" :height="winHeight / 1.15" stripe highlight-current-row
-                  @cell-click="lingShiQueFeiShuJuClick" ref="tableRef">
-          <el-table-column prop="name" label="姓名" width="90">
-            <template #default="scope">
-              <el-button size="small" :type="scope.row.shiFouYouChuYuanYiZhu === 0 ? 'success' : 'danger'"
-                         style="width: 100px"
-              ><span style="font-size: 20px">{{ scope.row.name }}</span></el-button
-              >
-            </template>
-          </el-table-column>
-          <el-table-column prop="inpatientNo" label="住院号" width="90"></el-table-column>
-          <el-table-column prop="admissTimes" label="住院次数" width="90"></el-table-column>
-          <el-table-column prop="bedNo" label="床号" width="50"></el-table-column>
-          <el-table-column prop="sex" label="性别">
-            <template #default="scope">
-              {{ cptSex(scope.row.sex) }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="admissDate" label="住院日期"></el-table-column>
-          <el-table-column prop="responceTypeName" label="医保身份"></el-table-column>
-          <el-table-column prop="wardName" label="病区"></el-table-column>
-          <el-table-column prop="totalCharge" label="总费用"></el-table-column>
-          <el-table-column label="操作">
-            <template #default="scope">
-              <span v-html="chaoZuo(scope.row.list)"></span>
-            </template>
-          </el-table-column>
-        </el-table>
-        <el-pagination
-            background
-            @current-change="changeYiZhuQueFei"
-            :current-page="queryTerm.currentPage"
-            :page-size="queryTerm.pageSize"
-            layout=" prev, pager, next,total"
-            :total="queryTerm.total"
-            style="margin-top: 5px"
-            :pager-count="5"
-        ></el-pagination>
+  <div class="layout_container layout-vertical">
+    <header>
+      <div>
+        <el-date-picker
+            type="daterange"
+            v-model="dateRange"
+            placeholder="选择日期"
+            style="width: 280px"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :shortcuts="shortcuts"
+        ></el-date-picker>
+        <el-input style="width: 160px" placeholder="请输入住院号" clearable v-model.trim="queryTerm.inpatientNo"
+                  @keyup.enter="getHuanZheXinXiClick"></el-input>
+        <el-select v-model="queryTerm.wardCode" style="width: 150px" filterable clearable placeholder="请选择病区">
+          <el-option v-for="item in wardData" :key="item.code" :label="item.name" :value="item.code">
+            <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
+            <el-divider direction="vertical"></el-divider>
+            <span>{{ item.name }}</span>
+          </el-option>
+        </el-select>
+        <el-divider direction="vertical"></el-divider>
+        <el-button type="primary" icon="Search" @click="getHuanZheXinXiClick">查询</el-button>
+        <el-button type="primary" icon="RefreshLeft" @click="getXuQueFeiYiZhuClick">刷新</el-button>
       </div>
-      <div class="layout_display_flex_y" v-show="queryTerm.liShi === 1">
-        <el-table
-            :data="liShiShuJu.list.slice((liShiShuJu.currentPage - 1) * liShiShuJu.pageSize, liShiShuJu.currentPage * liShiShuJu.pageSize)"
-            :height="winHeight / 1.15"
-            stripe
-            highlight-current-row
-            ref="liShiShuJuRef"
+      <div>
+        排序：
+        <el-select v-model="queryTerm.fenLei" style="width: 100px; margin: auto 10px auto 10px">
+          <el-option :value="0" label="病区"></el-option>
+          <el-option :value="1" label="执行人"></el-option>
+        </el-select>
+        <el-button type="success" @click="baoCunYiZhuQueFeiClick" icon="Upload" :disabled="queryTerm.liShi === 1"> 保存
+        </el-button>
+        <el-divider direction="vertical"></el-divider>
+        <el-radio-group v-model="queryTerm.liShi" @change="getHuanZheXinXiClick">
+          <el-radio-button :label="0" :value="0">未确认</el-radio-button>
+          <el-radio-button :label="1" :value="1">历史</el-radio-button>
+        </el-radio-group>
+        <el-divider direction="vertical"></el-divider>
+        <el-button type="warning" @click="chaoZuoZhiNan = true">操作指南</el-button>
+        <el-divider direction="vertical"></el-divider>
+        <el-switch
+            v-show="queryTerm.liShi === 1"
+            v-model="zhiKanZiJi"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+            active-text="只看自己"
+            inactive-text="全部"
+            :active-value="true"
+            :inactive-value="false"
         >
-          <el-table-column label="患者姓名" prop="name">
-            <template #default="scope">
-              <el-button size="small" :type="scope.row.color" style="width: 100px"
-              ><span style="font-size: 20px">{{ scope.row.name }}</span></el-button
-              >
-            </template>
-          </el-table-column>
-          <el-table-column label="住院号" prop="inpatientNo"></el-table-column>
-          <el-table-column label="住院次数" prop="admissTimes"></el-table-column>
-          <el-table-column label="医嘱号" prop="actOrderNo"></el-table-column>
-          <el-table-column label="医嘱时间" prop="occTime" width="70"></el-table-column>
-          <el-table-column label="项目名称" prop="chargeName"></el-table-column>
-          <el-table-column label="金额" prop="chargeFee"></el-table-column>
-          <el-table-column label="数量" prop="orderCount"></el-table-column>
-          <el-table-column label="医生姓名" prop="docotrName"></el-table-column>
-          <el-table-column label="操作人" prop="opIdName"></el-table-column>
-          <el-table-column label="操作时间" prop="opDate" width="70"></el-table-column>
-          <el-table-column label="操作内容" prop="chargeStatus">
-            <template #default="scope">
-              <span v-html="yiZhuZhuangTai(scope.row.chargeStatus)"></span>
-            </template>
-          </el-table-column>
-        </el-table>
-        <el-pagination
-            background
-            @current-change="liShiShuJuFanYe"
-            :current-page="liShiShuJu.currentPage"
-            :page-size="liShiShuJu.pageSize"
-            layout=" prev, pager, next,total"
-            :total="liShiShuJu.list.length"
-            style="margin-top: 5px"
-            :pager-count="5"
-        ></el-pagination>
+        </el-switch>
       </div>
+    </header>
+    <div
+        class="layout_main layout_el-table"
+        v-show="queryTerm.liShi === 0"
+    >
+      <el-table :data="huanZheYiZhuFeiYongData"
+                class="layout_flex_1-y"
+                stripe highlight-current-row
+                @cell-click="lingShiQueFeiShuJuClick" ref="tableRef">
+        <el-table-column prop="name" label="姓名" width="90">
+          <template #default="scope">
+            <el-button size="small" :type="scope.row.shiFouYouChuYuanYiZhu === 0 ? 'success' : 'danger'"
+                       style="width: 100px"
+            ><span style="font-size: 20px">{{ scope.row.name }}</span></el-button
+            >
+          </template>
+        </el-table-column>
+        <el-table-column prop="inpatientNo" label="住院号" width="90"></el-table-column>
+        <el-table-column prop="admissTimes" label="住院次数" width="90"></el-table-column>
+        <el-table-column prop="bedNo" label="床号" width="50"></el-table-column>
+        <el-table-column prop="sex" label="性别">
+          <template #default="scope">
+            {{ cptSex(scope.row.sex) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="admissDate" label="住院日期"></el-table-column>
+        <el-table-column prop="responceTypeName" label="医保身份"></el-table-column>
+        <el-table-column prop="wardName" label="病区"></el-table-column>
+        <el-table-column prop="totalCharge" label="总费用"></el-table-column>
+        <el-table-column label="操作">
+          <template #default="scope">
+            <span v-html="chaoZuo(scope.row.list)"></span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+          background
+          @current-change="changeYiZhuQueFei"
+          :current-page="queryTerm.currentPage"
+          :page-size="queryTerm.pageSize"
+          layout=" prev, pager, next,total"
+          :total="queryTerm.total"
+          style="margin-top: 5px"
+          :pager-count="5"
+      ></el-pagination>
+    </div>
+    <div class="layout_main layout_el-table"
+         v-show="queryTerm.liShi === 1">
+      <el-table
+          :data="liShiShuJu.list.slice((liShiShuJu.currentPage - 1) * liShiShuJu.pageSize, liShiShuJu.currentPage * liShiShuJu.pageSize)"
+          class="layout_flex_1-y"
+          stripe
+          highlight-current-row
+          ref="liShiShuJuRef"
+      >
+        <el-table-column label="患者姓名" prop="name">
+          <template #default="scope">
+            <el-button size="small" :type="scope.row.color" style="width: 100px"
+            ><span style="font-size: 20px">{{ scope.row.name }}</span></el-button
+            >
+          </template>
+        </el-table-column>
+        <el-table-column label="住院号" prop="inpatientNo"></el-table-column>
+        <el-table-column label="住院次数" prop="admissTimes"></el-table-column>
+        <el-table-column label="医嘱号" prop="actOrderNo"></el-table-column>
+        <el-table-column label="医嘱时间" prop="occTime" width="70"></el-table-column>
+        <el-table-column label="项目名称" prop="chargeName"></el-table-column>
+        <el-table-column label="金额" prop="chargeFee"></el-table-column>
+        <el-table-column label="数量" prop="orderCount"></el-table-column>
+        <el-table-column label="医生姓名" prop="docotrName"></el-table-column>
+        <el-table-column label="操作人" prop="opIdName"></el-table-column>
+        <el-table-column label="操作时间" prop="opDate" width="70"></el-table-column>
+        <el-table-column label="操作内容" prop="chargeStatus">
+          <template #default="scope">
+            <span v-html="yiZhuZhuangTai(scope.row.chargeStatus)"></span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+          background
+          @current-change="liShiShuJuFanYe"
+          :current-page="liShiShuJu.currentPage"
+          :page-size="liShiShuJu.pageSize"
+          layout=" prev, pager, next,total"
+          :total="liShiShuJu.list.length"
+          style="margin-top: 5px"
+          :pager-count="5"
+      ></el-pagination>
     </div>
   </div>
+
+
   <el-drawer v-model="xiangXiYiZhuXinXiDrawer" direction="ltr" size="70%" title="患者医嘱的详细信息">
     <div class="layout_display_flex_y">
       <div>
@@ -161,8 +169,8 @@
         <el-table
             :data="lingShiQueFeiShuJu.list.slice((lingShiQueFeiShuJu.currentPage - 1) * lingShiQueFeiShuJu.pageSize, lingShiQueFeiShuJu.currentPage * lingShiQueFeiShuJu.pageSize)"
             highlight-current-row
-            stripe
-            height="100%">
+            class="layout_flex_1-y"
+            stripe>
           <el-table-column prop="actOrderNo" label="医嘱号"></el-table-column>
           <el-table-column prop="occTime" label="医嘱日期" width="80"></el-table-column>
           <el-table-column prop="execUnitName" label="执行科室"></el-table-column>
@@ -232,7 +240,6 @@
     8、错误：在点击保存后，系统会自动接受患者的费用，如出错会在右上角，出现提示，可以请对应病区的护士在出院结算页面中点击费用接受重算按钮即可，或在老系统中护士打印费用清单时，会自动接收。
     <br/><br/>
     9、如有新的需求或出现未知的意外可联系管理员，如是操作失误后果自负（我觉得我已经写的很详细了，各种提示都有，都是简单的操作，还出现操作失误那就没得办法了）
-    (>ω･* )ﾉ
   </el-dialog>
 </template>
 
@@ -249,11 +256,9 @@ import {getDateRangeFormatDate} from '@/utils/date'
 import {ElMessage, ElMessageBox} from 'element-plus'
 import {shortcuts} from '@/data/shortcuts'
 import {barUtils} from '@/utils/echarts-utils'
-import {getWindowSize} from "@/utils/window-size";
 import XEUtils from 'xe-utils'
 import {useUserStore} from "@/pinia/user-store";
 
-const winHeight = window.innerHeight
 const userInfo = useUserStore().userInfo
 const dept = userInfo.deptCode
 const queryTerm = ref({