门诊统筹使用新布局

src/views/reports/OutpatientCoordination.vue

@@ -1,30 +1,34 @@
 <template>
-  <el-container>
-    <el-header height="35px" style="margin-top: 5px">
-      <el-date-picker v-model="queryTerm.month" :clearable="false" placeholder="请选择" style="width: 160px" type="month"></el-date-picker>
+  <page-layer>
+    <template #header>
+      <el-date-picker v-model="queryTerm.month" :clearable="false" placeholder="请选择" style="width: 160px" type="month">
+      </el-date-picker>
       <el-button type="primary" icon="Search" @click="query" style="margin-left: 5px">查询</el-button>
-    </el-header>
-    <el-main>
+    </template>
+    <template #main>
       <el-table :data="returnData.resultData" :height="tableHeight" stripe highlight-current-row>
         <el-table-column type="expand">
           <template #default="props">
             <el-table :data="props.row.children" v-show="props.row.isChildren">
               <template v-for="(col, index) in returnData.headTitle" :key="index">
-                <el-table-column v-if="col.prop === 'item'" :prop="col.prop" :label="col.label" fixed width="140"></el-table-column>
-                <el-table-column v-else-if="col.prop === 'total'" :prop="col.prop" :label="col.label" fixed></el-table-column>
+                <el-table-column v-if="col.prop === 'item'" :prop="col.prop" :label="col.label" fixed width="140">
+                </el-table-column>
+                <el-table-column v-else-if="col.prop === 'total'" :prop="col.prop" :label="col.label" fixed>
+                </el-table-column>
                 <el-table-column v-else :prop="col.prop" :label="col.label"></el-table-column>
               </template>
             </el-table>
           </template>
         </el-table-column>
         <template v-for="(col, index) in returnData.headTitle" :key="index">
-          <el-table-column v-if="col.prop === 'item'" :prop="col.prop" :label="col.label" fixed width="140"></el-table-column>
+          <el-table-column v-if="col.prop === 'item'" :prop="col.prop" :label="col.label" fixed width="140">
+          </el-table-column>
           <el-table-column v-else-if="col.prop === 'total'" :prop="col.prop" :label="col.label" fixed></el-table-column>
           <el-table-column v-else :prop="col.prop" :label="col.label"></el-table-column>
         </template>
       </el-table>
-    </el-main>
-  </el-container>
+    </template>
+  </page-layer>
 </template>
 <script>
 import { reactive, ref } from '@vue/reactivity'
@@ -32,43 +36,43 @@ import { formatMonth1 } from '@/utils/date'
 import { ElMessage } from 'element-plus'
 import store from '@/store'
 import { selectOutpatientCoordination } from '@/api/ybkf/yb-mztc'
+import PageLayer from '@/layout/PageLayer.vue'
 
 export default {
   setup() {
-    const windowSize = store.state.app.windowSize
-    const tableHeight = windowSize.h / 1.1
-
+    const windowSize = store.state.app.windowSize;
+    const tableHeight = windowSize.h / 1.02;
     const queryTerm = reactive({
       month: formatMonth1(new Date()),
-    })
-
-    const returnData = ref([])
+    });
+    const returnData = ref([]);
     const query = () => {
       if (queryTerm.month) {
-        queryTerm.month = formatMonth1(queryTerm.month)
-      } else {
+        queryTerm.month = formatMonth1(queryTerm.month);
+      }
+      else {
         ElMessage({
-          type: 'info',
-          message: '默认查询当天的数据',
+          type: "info",
+          message: "默认查询当天的数据",
           duration: 2500,
           showClose: true,
-        })
+        });
       }
       selectOutpatientCoordination(queryTerm.month)
         .then((res) => {
-          returnData.value = res
+          returnData.value = res;
         })
         .catch(() => {
-          returnData.value = []
-        })
-    }
-
+          returnData.value = [];
+        });
+    };
     return {
       queryTerm,
       returnData,
       tableHeight,
       query,
-    }
+    };
   },
+  components: { PageLayer }
 }
 </script>