Merge branch 'master' into 'master'

指标报表UI优化

See merge request lighter/vue-intergration-platform!109

src/views/target-management/target-comm/ReportTree.vue

@@ -1,19 +1,25 @@
 <template>
-    <el-input class="qt-cl" v-model="filterText" placeholder="输入关键词搜索" />
-    <div style="position: relative; width: 100%; overflow: auto" class="th-dg">
-        <el-tree ref="treeRef" class="filter-tree" :data="treeData" :props="defaultProps" node-key="id" default-expand-all
-            :check-strictly="isCheck" highlight-current :filter-node-method="filterNode" :height="reportTreeData.height"
-            @node-click="handleNodeClick" :expand-on-click-node="isOkDoor">
-            <template #default="{ node, data }" class="custom-tree-node">
-                <span :title="data.label">
-                    {{ data.label.length > 20 ? data.label.slice(0, 20) + '...' : data.label }}
-                </span>
-                <span style="z-index: 100;" v-if="node.isLeaf">
-                    <el-button link type="danger" size="small" @click.stop="removeTarget(node, data)">删除</el-button>
-                </span>
-            </template>
-        </el-tree>
+  <div class="layout_container">
+    <header>
+      <el-input class="qt-cl" v-model="filterText" placeholder="输入关键词搜索" />
+    </header>
+    <div class="layout_main layout_card">
+      <div style="position: relative; width: 100%;" class="th-dg">
+          <el-tree ref="treeRef" class="filter-tree" :data="treeData" :props="defaultProps" node-key="id" default-expand-all
+              :check-strictly="isCheck" highlight-current :filter-node-method="filterNode" :height="reportTreeData.height"
+              @node-click="handleNodeClick" :expand-on-click-node="isOkDoor">
+              <template #default="{ node, data }" class="custom-tree-node">
+                  <span :title="data.label">
+                      {{ data.label.length > 20 ? data.label.slice(0, 20) + '...' : data.label }}
+                  </span>
+                  <span style="z-index: 100;" v-if="node.isLeaf">
+                      <el-button link type="danger" size="small" @click.stop="removeTarget(node, data)">删除</el-button>
+                  </span>
+              </template>
+          </el-tree>
+      </div>
     </div>
+  </div>
 </template>
 <script setup name="TargetTree" lang="ts">
 import { ref, onMounted, watch, nextTick, computed } from 'vue'
@@ -113,16 +119,16 @@ const removeTarget = (node: any, data: any) => {
     })
 }
 </script>
-<style lang="scss" scoped deep>
-.qt-cl {
-    height: 36px !important;
+<style lang="scss" scoped>
+:deep(.qt-cl) {
+    height: 30px !important;
 }
 
-.th-dg {
-    height: 870px;
+:deep(.th-dg) {
+    height: 940px;
 }
 
-.custom_icon {
+:deep(.custom_icon) {
     background-image: url("./wenjianjia@2x.png"); //注意:路径改为你自己的
     background-size: cover;
     background-position: center;
@@ -132,7 +138,7 @@ const removeTarget = (node: any, data: any) => {
     vertical-align: middle;
 }
 
-.custom-tree-node {
+:deep(.custom-tree-node) {
     flex: 1;
     display: flex;
     align-items: center;

src/views/target-management/target-comm/targetTree.vue

@@ -1,19 +1,24 @@
 <template>
-  <el-input class="qt-cl" v-model="filterText" placeholder="输入关键词搜索"/>
-  <div style="position: relative; width: 100%; overflow: auto" class="th-dg">
-    <el-tree ref="treeRef" class="filter-tree" :data="treeData" :props="defaultProps" node-key="id" default-expand-all
-             :check-strictly="isCheck" highlight-current :filter-node-method="filterNode"
-             :height="targetTreeData.height"
-             @node-click="handleNodeClick" :expand-on-click-node="isOkDoor">
-      <template #default="{ node, data }" class="custom-tree-node">
-                <span :title="data.label">
-                    {{ data.label.length > 27 ? data.label.slice(0, 27) + '...' : data.label }}
-                </span>
-        <span style="z-index: 100;" v-if="node.isLeaf">
-                    <el-button link type="danger" size="small" @click.stop="removeTarget(node, data)">删除</el-button>
-                </span>
-      </template>
-    </el-tree>
+  <div class="layout_container">
+    <header>
+      <el-input class="qt-cl" v-model="filterText" placeholder="输入关键词搜索"/>
+    </header>
+    <div class="layout_main layout_card">
+      <div style="position: relative; width: 100%;" class="th-dg">
+        <el-tree ref="treeRef" class="filter-tree" :data="treeData" :props="defaultProps" node-key="id" default-expand-all
+                 :check-strictly="isCheck" highlight-current :filter-node-method="filterNode"
+                 @node-click="handleNodeClick" :expand-on-click-node="isOkDoor">
+          <template #default="{ node, data }" class="custom-tree-node">
+                    <span :title="data.label">
+                        {{ data.label.length > 27 ? data.label.slice(0, 27) + '...' : data.label }}
+                    </span>
+            <span style="z-index: 100;" v-if="node.isLeaf">
+                        <el-button link type="danger" size="small" @click.stop="removeTarget(node, data)">删除</el-button>
+                    </span>
+          </template>
+        </el-tree>
+      </div>
+    </div>
   </div>
 </template>
 <script setup name="TargetTree" lang="ts">
@@ -114,16 +119,16 @@ const removeTarget = (node: any, data: any) => {
   })
 }
 </script>
-<style lang="scss" scoped deep>
-.qt-cl {
-  height: 36px !important;
+<style lang="scss" scoped>
+:deep(.qt-cl) {
+  height: 30px !important;
 }
 
-.th-dg {
-  height: 870px;
+:deep(.th-dg) {
+  height: 940px;
 }
 
-.custom_icon {
+:deep(.custom_icon) {
   background-image: url("./wenjianjia@2x.png"); //注意:路径改为你自己的
   background-size: cover;
   background-position: center;
@@ -133,7 +138,7 @@ const removeTarget = (node: any, data: any) => {
   vertical-align: middle;
 }
 
-.custom-tree-node {
+:deep(.custom-tree-node) {
   flex: 1;
   display: flex;
   align-items: center;

src/views/target-management/target-dict/TargetDictConfig.vue

@@ -1,11 +1,11 @@
 <template>
-  <el-row :gutter="5">
-    <el-col :span="8">
-      <TargetTree v-if="isShowTree" :targetTreeData="targetTreeData" @treeNodeClick="treeNodeClick" />
-    </el-col>
-    <el-col :span="16">
-      <PageLayer>
-        <template #header class="hd-cl">
+  <div class="layout_container">
+    <div class="layout_main layout_container layout-horizontal">
+      <aside style="width: 600px;">
+        <TargetTree v-if="isShowTree" :targetTreeData="targetTreeData" @treeNodeClick="treeNodeClick"/>
+      </aside>
+      <div class="layout_container layout_overflow_auto">
+        <header>
           <el-button type="primary" icon="Plus" @click="addForm(ruleFormRef)" style="margin-left: 10px">新增
           </el-button>
           <el-button type="primary" icon="Edit" @click="editForm(ruleFormRef)" style="margin-left: 10px">编辑
@@ -14,8 +14,8 @@
           </el-button>
           <el-button type="primary" icon="Refresh" @click="resetForm(ruleFormRef)" style="margin-left: 10px">重置
           </el-button>
-        </template>
-        <template #main>
+        </header>
+        <div class="layout_main layout_card">
           <el-form ref="ruleFormRef" :model="ruleForm" :rules="rulesForm" label-width="120px" class="demo-ruleForm"
             :size="formSize" status-icon :disabled="isShowForm">
             <el-row>
@@ -244,11 +244,10 @@
               </el-table>
             </el-row>
           </el-form>
-        </template>
-      </PageLayer>
-    </el-col>
-  </el-row>
-
+        </div>
+      </div>
+    </div>
+  </div>
   <el-drawer :title="'Sql编辑'" v-model="isSqlEdit" size="80%" destroy-on-close>
     <SqlEditPage :sqlEditData="sqlEditData" />
   </el-drawer>
@@ -261,7 +260,6 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import type { FormInstance, FormRules } from 'element-plus'
 import { clone } from '@/utils/clone'
 import { formatDate } from '@/utils/date'
-import PageLayer from '../../../layout/PageLayer.vue'
 import { queryDept } from '@/api/public-api'
 import { selectTargetDictById, selectTargetDictTree, saveTargetDict } from '@/api/target-management/target-dict'
 import { selectTargetZbReportId } from '@/api/target-management/report-dict'
@@ -274,7 +272,7 @@ import {
 
 const targetTreeData = ref({
   data: [{}],
-  height: 900,
+  height: 940,
 })
 
 const isShowTree = ref(false)
@@ -816,6 +814,8 @@ const saveTargetDictResult = () => {
                   duration: 2500,
                   showClose: true,
                 });
+                // 查询结果
+                queryTargetReportResult()
                 return
               }
             });

src/views/target-management/target-dict/TargetDictInfo.vue

@@ -1,101 +1,102 @@
 <template>
-    <el-row :gutter="5">
-        <el-col :span="8">
+  <div class="layout_container">
+    <div class="layout_main layout_container layout-horizontal">
+      <aside style="width: 520px;">
             <TargetTree v-if="isShowTree" :targetTreeData="targetTreeData" @treeNodeClick="treeNodeClick" />
-        </el-col>
-        <el-col :span="16">
-            <PageLayer>
-                <template #header class="hd-cl">
-                    <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
-                        end-placeholder="结束日期" :shortcuts="shortcuts"> </el-date-picker>
-                    <!-- <el-select-v2 ref="deptInfoRef" v-model="queryParam.deptId" clearable remote filterable
-                        :remote-method="deptMethod" :options="deptWardList" :placeholder="'请选择科室'" /> -->
-                    <el-input v-model="queryParam.calcChild" v-if="isShowSql"></el-input>
-                    <el-input v-model="queryParam.calcMom" v-if="isShowSql"></el-input>
-                    <el-button icon="Search" type="primary" @click="selectTargetDictInfo"
-                        style="margin-left: 10px">查询</el-button>
-                    <el-button icon="Download" type="primary" @click="exportChildData">导出分子</el-button>
-                    <el-button icon="Download" type="primary" @click="exportMomData">导出分母</el-button>
-                </template>
-                <template #main>
-                    <el-form ref="ruleFormRef" label-width="120px" :model="targetForm" class="demo-ruleForm"
-                        :size="formSize" :disabled="isShowForm">
-                        <el-form-item label="指标定义" prop="definition">
-                            <el-input v-model="targetForm.definition" type="textarea" />
-                        </el-form-item>
-                        <el-form-item label="评审方法" prop="method">
-                            <el-input v-model="targetForm.method" type="textarea" :rows="4" />
-                        </el-form-item>
-                        <el-form-item label="计分细则" prop="scoreRule">
-                            <el-input v-model="targetForm.scoreRule" type="textarea" />
-                        </el-form-item>
-                    </el-form>
-                    <el-divider />
-                    <el-tabs type="border-card" v-model="queryParam.tabFlag" @tab-click="handleClick">
-                        <el-tab-pane label="所有结果汇总" name="total">
-                            <el-table :data="QtResultData" stripe border highlight-current-row row-key="childKey"
-                                style="width: 100%">
-                                <el-table-column prop="year" label="年份" header-align="center" />
-                                <el-table-column prop="dataType" label="数据方式" header-align="center">
-                                    <template #default="scope">
-                                        {{ scope.row.dataType == '1' ? 'sql统计' : '手动输入' }}
-                                    </template>
-                                </el-table-column>
-                                <el-table-column prop="childResult" label="分子结果" header-align="center" />
-                                <el-table-column prop="momResult" label="分母结果" header-align="center" />
-                                <el-table-column prop="calcResult" label="计算结果" header-align="center" />
-                                <el-table-column prop="op" label="统计人员" header-align="center" />
-                                <el-table-column prop="opTime" label="统计时间" header-align="center" width="200" />
-                            </el-table>
-                        </el-tab-pane>
-                        <el-tab-pane label="分子结果详情" name="child">
-                            <xc-table :data="returnData" localPaging :openPaging="true" :height="heightData">
-                                <el-table-column type="index" label="序号" align="center"></el-table-column>
-                                <template v-for="col in returnData.tableDisplays">
-                                    <el-table-column v-if="col.prop.endsWith('-t')" :prop="col.prop" :label="col.label"
-                                        :width="col.width" :align="col.align" show-overflow-tooltip>
-                                        <template v-for="cell in returnData.chirdData">
-                                            <el-table-column v-if="cell.pid === col.id" :prop="cell.prop"
-                                                :label="cell.label" :width="cell.width" :align="cell.align"
-                                                show-overflow-tooltip>
-                                            </el-table-column>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column v-else :prop="col.prop" :label="col.label" :width="col.width"
-                                        :align="col.align" show-overflow-tooltip>
+      </aside>
+      <div class="layout_container layout_overflow_auto">
+        <header>
+          <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
+              end-placeholder="结束日期" :shortcuts="shortcuts"> </el-date-picker>
+          <!-- <el-select-v2 ref="deptInfoRef" v-model="queryParam.deptId" clearable remote filterable
+              :remote-method="deptMethod" :options="deptWardList" :placeholder="'请选择科室'" /> -->
+          <el-input v-model="queryParam.calcChild" v-if="isShowSql"></el-input>
+          <el-input v-model="queryParam.calcMom" v-if="isShowSql"></el-input>
+          <el-button icon="Search" type="primary" @click="selectTargetDictInfo"
+              style="margin-left: 10px">查询</el-button>
+          <el-button icon="Download" type="primary" @click="exportChildData">导出分子</el-button>
+          <el-button icon="Download" type="primary" @click="exportMomData">导出分母</el-button>
+        </header>
+        <div class="layout_main layout_card layout_flex_1-y">
+          <div class="layout_flex_1-y">
+            <el-form ref="ruleFormRef" label-width="120px" :model="targetForm" class="demo-ruleForm"
+                :size="formSize" :disabled="isShowForm">
+                <el-form-item label="指标定义" prop="definition">
+                    <el-input v-model="targetForm.definition" type="textarea" />
+                </el-form-item>
+                <el-form-item label="评审方法" prop="method">
+                    <el-input v-model="targetForm.method" type="textarea" :rows="4" />
+                </el-form-item>
+                <el-form-item label="计分细则" prop="scoreRule">
+                    <el-input v-model="targetForm.scoreRule" type="textarea" />
+                </el-form-item>
+            </el-form>
+            <el-divider />
+            <el-tabs type="border-card" v-model="queryParam.tabFlag" @tab-click="handleClick">
+                <el-tab-pane label="所有结果汇总" name="total">
+                    <el-table :data="QtResultData" stripe border highlight-current-row row-key="childKey"
+                        style="width: 100%" :height="heightData">
+                        <el-table-column prop="year" label="年份" header-align="center" />
+                        <el-table-column prop="dataType" label="数据方式" header-align="center">
+                            <template #default="scope">
+                                {{ scope.row.dataType == '1' ? 'sql统计' : '手动输入' }}
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="childResult" label="分子结果" header-align="center" />
+                        <el-table-column prop="momResult" label="分母结果" header-align="center" />
+                        <el-table-column prop="calcResult" label="计算结果" header-align="center" />
+                        <el-table-column prop="op" label="统计人员" header-align="center" />
+                        <el-table-column prop="opTime" label="统计时间" header-align="center" width="200" />
+                    </el-table>
+                </el-tab-pane>
+                <el-tab-pane label="分子结果详情" name="child">
+                    <xc-table :data="returnData" localPaging :openPaging="true" :height="heightData">
+                        <el-table-column type="index" label="序号" align="center"></el-table-column>
+                        <template v-for="col in returnData.tableDisplays">
+                            <el-table-column v-if="col.prop.endsWith('-t')" :prop="col.prop" :label="col.label"
+                                :width="col.width" :align="col.align" show-overflow-tooltip>
+                                <template v-for="cell in returnData.chirdData">
+                                    <el-table-column v-if="cell.pid === col.id" :prop="cell.prop"
+                                        :label="cell.label" :width="cell.width" :align="cell.align"
+                                        show-overflow-tooltip>
                                     </el-table-column>
                                 </template>
-                            </xc-table>
-                        </el-tab-pane>
-                        <el-tab-pane label="分母结果详情" name="mom">
-                            <xc-table :data="returnData" localPaging :openPaging="true" :height="heightData">
-                                <el-table-column type="index" label="序号" align="center"></el-table-column>
-                                <template v-for="col in returnData.tableDisplays">
-                                    <el-table-column v-if="col.prop.endsWith('-t')" :prop="col.prop" :label="col.label"
-                                        :width="col.width" :align="col.align" show-overflow-tooltip>
-                                        <template v-for="cell in returnData.chirdData">
-                                            <el-table-column v-if="cell.pid === col.id" :prop="cell.prop"
-                                                :label="cell.label" :width="cell.width" :align="cell.align"
-                                                show-overflow-tooltip>
-                                            </el-table-column>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column v-else :prop="col.prop" :label="col.label" :width="col.width"
-                                        :align="col.align" show-overflow-tooltip>
+                            </el-table-column>
+                            <el-table-column v-else :prop="col.prop" :label="col.label" :width="col.width"
+                                :align="col.align" show-overflow-tooltip>
+                            </el-table-column>
+                        </template>
+                    </xc-table>
+                </el-tab-pane>
+                <el-tab-pane label="分母结果详情" name="mom">
+                    <xc-table :data="returnData" localPaging :openPaging="true" :height="heightData">
+                        <el-table-column type="index" label="序号" align="center"></el-table-column>
+                        <template v-for="col in returnData.tableDisplays">
+                            <el-table-column v-if="col.prop.endsWith('-t')" :prop="col.prop" :label="col.label"
+                                :width="col.width" :align="col.align" show-overflow-tooltip>
+                                <template v-for="cell in returnData.chirdData">
+                                    <el-table-column v-if="cell.pid === col.id" :prop="cell.prop"
+                                        :label="cell.label" :width="cell.width" :align="cell.align"
+                                        show-overflow-tooltip>
                                     </el-table-column>
                                 </template>
-                            </xc-table>
-                        </el-tab-pane>
-                    </el-tabs>
-                </template>
-            </PageLayer>
-        </el-col>
-    </el-row>
+                            </el-table-column>
+                            <el-table-column v-else :prop="col.prop" :label="col.label" :width="col.width"
+                                :align="col.align" show-overflow-tooltip>
+                            </el-table-column>
+                        </template>
+                    </xc-table>
+                </el-tab-pane>
+            </el-tabs>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script setup name="TargetDictInfo" lang="ts">
 import { ref, reactive, onMounted, nextTick } from 'vue'
 import TargetTree from '../target-comm/targetTree.vue'
-import PageLayer from '../../../layout/PageLayer.vue'
 import { ElMessage } from 'element-plus'
 import type { FormInstance } from 'element-plus'
 import { selectTargetDict, selectTargetDictTree } from '../../../api/target-management/target-dict'
@@ -109,7 +110,7 @@ import { clone } from '../../../utils/clone'
 
 const targetTreeData = ref({
     data: [{}],
-    height: 900,
+    height: 940,
 })
 
 const start: any = formatDate(clockinShortcuts[1].value[0])
@@ -123,7 +124,7 @@ const formSize = ref('default')
 const ruleFormRef = ref<FormInstance>()
 const dateRange: any = ref([]);
 
-const heightData = ref(450)
+const heightData = ref(500)
 
 const deptMethod = (val: string) => {
     queryDept(val).then((res: any) => {
@@ -459,8 +460,8 @@ const clearNullData = (array: any) => {
 }
 
 </script>
-<style lang="scss" scoped deep>
-.hd-cl {
+<style lang="scss" scoped>
+:deep(.hd-cl) {
     margin-bottom: 1px !important;
 }
 

src/views/target-management/target-dict/TargetReportConfig.vue

@@ -1,171 +1,171 @@
 <template>
-    <el-row :gutter="5">
-        <el-col :span="6">
-            <ReportTree v-if="isShowTree" :reportTreeData="reportTreeData" @treeNodeClick="treeNodeClick" />
-        </el-col>
-        <el-col :span="18">
-            <PageLayer>
-                <template #header class="hd-cl">
-                    <el-button type="primary" icon="Plus" @click="addForm(ruleFormRef)"
-                        style="margin-left: 10px">新增</el-button>
-                    <el-button type="primary" icon="Edit" @click="editForm(ruleFormRef)"
-                        style="margin-left: 10px">编辑</el-button>
-                    <el-button type="primary" icon="Check" @click="submitForm(ruleFormRef)"
-                        style="margin-left: 10px">保存</el-button>
-                    <el-button type="primary" icon="Refresh" @click="resetForm(ruleFormRef)"
-                        style="margin-left: 10px">重置</el-button>
-                    <el-button type="primary" style="margin-left: 10px" @click="reportLevel()"> 报表分组类型配置 </el-button>
-                    <el-button type="primary" style="margin-left: 10px" @click="reportDetails()"> 报表页面详情配置 </el-button>
-                </template>
-                <template #main>
-                    <el-form ref="ruleFormRef" :model="reportForm" :rules="rules" label-width="120px"
-                        class="demo-ruleForm" :size="formSize" status-icon :disabled="isDisabledForm">
-                        <el-row>
-                            <el-col :span="12">
-                                <el-form-item label="报表名称" prop="reportName">
-                                    <el-input v-model="reportForm.reportName" minlength="1" maxlength="256"
-                                        show-word-limit />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="6">
-                                <el-form-item label="报表编码" prop="reportId">
-                                    <el-input v-model="reportForm.reportId" minlength="1" maxlength="12"
-                                        show-word-limit />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="6">
-                                <el-form-item label="报表类型" prop="reportType">
-                                    <el-select v-model="reportForm.reportType" placeholder="请选择报表类型">
-                                        <el-option v-for="item in reportTypeList" :key="item.reportType"
-                                            :label="item.reportLabel" :value="item.reportType">
-                                            <span style="float: left">{{ item.reportType }}</span>
-                                            <span
-                                                style="float: right; color: var(--el-text-color-secondary); font-size: 13px; ">
-                                                {{ item.reportLabel }}
-                                            </span>
-                                        </el-option>
-                                    </el-select>
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        <el-row>
-                            <el-col :span="12">
-                                <el-form-item label="聚合sql" prop="gatherSql">
-                                    <el-input v-model="reportForm.gatherSql" minlength="1" maxlength="256"
-                                        show-word-limit />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="6">
-                                <el-form-item label="单位" prop="unit">
-                                    <el-input v-model="reportForm.unit" minlength="0" maxlength="8" show-word-limit />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="6">
-                                <el-form-item label="报表分组类型" prop="level">
-                                    <el-select v-model="levelId" filterable :filter-method="levelFilterMethod"
-                                        value-key="id" placeholder="请选择报表分组类型">
-                                        <el-option v-for="item in levelList" :key="item.reportId"
-                                            :label="item.levelName" :value="item.levelId">
-                                            <span style="float: left">{{ item.levelId }}</span>
-                                            <span
-                                                style="float: right; color: var(--el-text-color-secondary); font-size: 13px; ">
-                                                {{ item.levelName }}
-                                            </span>
-                                        </el-option>
-                                    </el-select>
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        <el-form-item label="基础sql" prop="baseSql">
-                            <el-input v-model="reportForm.baseSql" type="textarea" :rows="8" />
-                        </el-form-item>
-                        <el-row>
-                            <el-col :span="6">
-                                <el-form-item label="菜单id" prop="menuId">
-                                    <el-input v-model.number="reportForm.menuId" minlength="0" maxlength="12"
-                                        show-word-limit />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="6">
-                                <el-form-item label="面板排序" prop="sort">
-                                    <el-input v-model.number="reportForm.sort" minlength="0" maxlength="12"
-                                        show-word-limit />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="指标排序" prop="reportSort">
-                                    <el-input v-model="reportForm.reportSort" minlength="0" maxlength="256"
-                                        show-word-limit />
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        <el-row>
-                            <el-col :span="6">
-                                <el-form-item label="是否财务报表" prop="isCw">
-                                    <el-switch v-model="reportForm.isCw" active-value="Y" inactive-value="N"
-                                        active-color="#13ce66" inactive-color="#ff4949" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="6">
-                                <el-form-item label="是否医技报表" prop="isYj">
-                                    <el-switch v-model="reportForm.isYj" active-value="Y" inactive-value="N"
-                                        active-color="#13ce66" inactive-color="#ff4949" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="6">
-                                <el-form-item label="是否有效" prop="flag">
-                                    <el-switch v-model="reportForm.flag" active-value="Y" inactive-value="N"
-                                        active-color="#13ce66" inactive-color="#ff4949" />
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                    </el-form>
-                    <el-divider />
-                    <el-form ref="ruleFormRef" label-width="120px" :model="sqlForm" class="demo-ruleForm"
-                        :size="formSize">
-                        <el-row>
-                            <el-col :span="12">
-                                <el-form-item label="开始时间">
-                                    <el-form-item prop="startTime">
-                                        <el-date-picker v-model="sqlForm.startTime" type="date" aria-label="选择时间"
-                                            placeholder="选择时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
-                                    </el-form-item>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="结束时间">
-                                    <el-form-item prop="endTime">
-                                        <el-date-picker v-model="sqlForm.endTime" type="date" aria-label="选择时间"
-                                            placeholder="选择时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
-                                    </el-form-item>
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        <el-row>
-                            <el-col :span="12">
-                                <el-form-item label="计算结果测试" prop="childResult">
-                                    <el-input v-model="sqlForm.calcResult" type="textarea" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item>
-                                    <el-button type="primary" @click="sqlExecute(ruleFormRef)"> 指标运行结果 </el-button>
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                    </el-form>
-                    <el-dialog v-model="showReportLevel" :close-on-click-modal="false" :close-on-press-escape="false"
-                        :title="reportLevelTitle" width="80%" height="50%">
-                        <ReportLevel :reportLevelDetail="reportLevelDetail" />
-                    </el-dialog>
-                    <el-dialog v-model="showReportDetails" :close-on-click-modal="false" :close-on-press-escape="false"
-                        :title="reportDetailsTitle" width="80%" height="70%">
-                        <ReportDetails :reportDetailsData="reportDetailsData" />
-                    </el-dialog>
-                </template>
-            </PageLayer>
-        </el-col>
-    </el-row>
+  <div class="layout_container">
+    <div class="layout_main layout_container layout-horizontal">
+      <aside style="width: 600px;">
+        <ReportTree v-if="isShowTree" :reportTreeData="reportTreeData" @treeNodeClick="treeNodeClick" />
+      </aside>
+      <div class="layout_container layout_overflow_auto">
+        <header>
+          <el-button type="primary" icon="Plus" @click="addForm(ruleFormRef)"
+              style="margin-left: 10px">新增</el-button>
+          <el-button type="primary" icon="Edit" @click="editForm(ruleFormRef)"
+              style="margin-left: 10px">编辑</el-button>
+          <el-button type="primary" icon="Check" @click="submitForm(ruleFormRef)"
+              style="margin-left: 10px">保存</el-button>
+          <el-button type="primary" icon="Refresh" @click="resetForm(ruleFormRef)"
+              style="margin-left: 10px">重置</el-button>
+          <el-button type="primary" style="margin-left: 10px" @click="reportLevel()"> 报表分组类型配置 </el-button>
+          <el-button type="primary" style="margin-left: 10px" @click="reportDetails()"> 报表页面详情配置 </el-button>
+        </header>
+        <div class="layout_main layout_card">
+          <el-form ref="ruleFormRef" :model="reportForm" :rules="rules" label-width="120px"
+              class="demo-ruleForm" :size="formSize" status-icon :disabled="isDisabledForm">
+              <el-row>
+                  <el-col :span="12">
+                      <el-form-item label="报表名称" prop="reportName">
+                          <el-input v-model="reportForm.reportName" minlength="1" maxlength="256"
+                              show-word-limit />
+                      </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                      <el-form-item label="报表编码" prop="reportId">
+                          <el-input v-model="reportForm.reportId" minlength="1" maxlength="12"
+                              show-word-limit />
+                      </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                      <el-form-item label="报表类型" prop="reportType">
+                          <el-select v-model="reportForm.reportType" placeholder="请选择报表类型">
+                              <el-option v-for="item in reportTypeList" :key="item.reportType"
+                                  :label="item.reportLabel" :value="item.reportType">
+                                  <span style="float: left">{{ item.reportType }}</span>
+                                  <span
+                                      style="float: right; color: var(--el-text-color-secondary); font-size: 13px; ">
+                                      {{ item.reportLabel }}
+                                  </span>
+                              </el-option>
+                          </el-select>
+                      </el-form-item>
+                  </el-col>
+              </el-row>
+              <el-row>
+                  <el-col :span="12">
+                      <el-form-item label="聚合sql" prop="gatherSql">
+                          <el-input v-model="reportForm.gatherSql" minlength="1" maxlength="256"
+                              show-word-limit />
+                      </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                      <el-form-item label="单位" prop="unit">
+                          <el-input v-model="reportForm.unit" minlength="0" maxlength="8" show-word-limit />
+                      </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                      <el-form-item label="报表分组类型" prop="level">
+                          <el-select v-model="levelId" filterable :filter-method="levelFilterMethod"
+                              value-key="id" placeholder="请选择报表分组类型">
+                              <el-option v-for="item in levelList" :key="item.reportId"
+                                  :label="item.levelName" :value="item.levelId">
+                                  <span style="float: left">{{ item.levelId }}</span>
+                                  <span
+                                      style="float: right; color: var(--el-text-color-secondary); font-size: 13px; ">
+                                      {{ item.levelName }}
+                                  </span>
+                              </el-option>
+                          </el-select>
+                      </el-form-item>
+                  </el-col>
+              </el-row>
+              <el-form-item label="基础sql" prop="baseSql">
+                  <el-input v-model="reportForm.baseSql" type="textarea" :rows="8" />
+              </el-form-item>
+              <el-row>
+                  <el-col :span="6">
+                      <el-form-item label="菜单id" prop="menuId">
+                          <el-input v-model.number="reportForm.menuId" minlength="0" maxlength="12"
+                              show-word-limit />
+                      </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                      <el-form-item label="面板排序" prop="sort">
+                          <el-input v-model.number="reportForm.sort" minlength="0" maxlength="12"
+                              show-word-limit />
+                      </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                      <el-form-item label="指标排序" prop="reportSort">
+                          <el-input v-model="reportForm.reportSort" minlength="0" maxlength="256"
+                              show-word-limit />
+                      </el-form-item>
+                  </el-col>
+              </el-row>
+              <el-row>
+                  <el-col :span="6">
+                      <el-form-item label="是否财务报表" prop="isCw">
+                          <el-switch v-model="reportForm.isCw" active-value="Y" inactive-value="N"
+                              active-color="#13ce66" inactive-color="#ff4949" />
+                      </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                      <el-form-item label="是否医技报表" prop="isYj">
+                          <el-switch v-model="reportForm.isYj" active-value="Y" inactive-value="N"
+                              active-color="#13ce66" inactive-color="#ff4949" />
+                      </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                      <el-form-item label="是否有效" prop="flag">
+                          <el-switch v-model="reportForm.flag" active-value="Y" inactive-value="N"
+                              active-color="#13ce66" inactive-color="#ff4949" />
+                      </el-form-item>
+                  </el-col>
+              </el-row>
+          </el-form>
+          <el-divider />
+          <el-form ref="ruleFormRef" label-width="120px" :model="sqlForm" class="demo-ruleForm"
+              :size="formSize">
+              <el-row>
+                  <el-col :span="12">
+                      <el-form-item label="开始时间">
+                          <el-form-item prop="startTime">
+                              <el-date-picker v-model="sqlForm.startTime" type="date" aria-label="选择时间"
+                                  placeholder="选择时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
+                          </el-form-item>
+                      </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                      <el-form-item label="结束时间">
+                          <el-form-item prop="endTime">
+                              <el-date-picker v-model="sqlForm.endTime" type="date" aria-label="选择时间"
+                                  placeholder="选择时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
+                          </el-form-item>
+                      </el-form-item>
+                  </el-col>
+              </el-row>
+              <el-row>
+                  <el-col :span="12">
+                      <el-form-item label="计算结果测试" prop="childResult">
+                          <el-input v-model="sqlForm.calcResult" type="textarea" />
+                      </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                      <el-form-item>
+                          <el-button type="primary" @click="sqlExecute(ruleFormRef)"> 指标运行结果 </el-button>
+                      </el-form-item>
+                  </el-col>
+              </el-row>
+          </el-form>
+          <el-dialog v-model="showReportLevel" :close-on-click-modal="false" :close-on-press-escape="false"
+              :title="reportLevelTitle" width="80%" height="50%">
+              <ReportLevel :reportLevelDetail="reportLevelDetail" />
+          </el-dialog>
+          <el-dialog v-model="showReportDetails" :close-on-click-modal="false" :close-on-press-escape="false"
+              :title="reportDetailsTitle" width="80%" height="70%">
+              <ReportDetails :reportDetailsData="reportDetailsData" />
+          </el-dialog>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script setup name="TargetDictInfo" lang="ts">
 import { ref, reactive, onMounted, nextTick } from 'vue'