调整组织换届的布局

project/pingchang/apps/AppOrganizationChange/components/List.vue

@@ -1,5 +1,5 @@
 <template>
-  <ai-list class="List">
+  <ai-detail list class="List">
     <template slot="title">
       <ai-title title="组织换届" isShowBottomBorder>
         <template #rightBtn>
@@ -8,7 +8,7 @@
         </template>
       </ai-title>
     </template>
-    <template #left>
+    <el-row slot="content" type="flex">
       <ai-tree-menu title="组织目录" searchPlaceholder="请输入组织名称" @search="onSearch">
         <ai-party-tree
             :filter-node-method="filterNode"
@@ -18,15 +18,16 @@
             :current-node-key="selected.id"
             @select="onTreeChange"/>
       </ai-tree-menu>
-    </template>
-    <template slot="content" class="content">
-      <el-tabs v-model="currIndex">
-        <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label">
-          <component :ref="tab.name" v-if="currIndex==i" :is="tab.comp" lazy :selected="selected" v-on="$listeners" :hasConfig.sync="hasConfig"/>
-        </el-tab-pane>
-      </el-tabs>
-    </template>
-  </ai-list>
+      <el-scrollbar class="fill mar-l16 mainContent">
+        <ai-card title="当前届次">
+          <moment slot="content" :selected="selected" v-on="$listeners" :hasConfig.sync="hasConfig"/>
+        </ai-card>
+        <ai-card title="历史届次" v-if="hasConfig">
+          <history slot="content" :selected="selected" v-on="$listeners"/>
+        </ai-card>
+      </el-scrollbar>
+    </el-row>
+  </ai-detail>
 </template>
 
 <script>
@@ -81,45 +82,22 @@ export default {
 .List {
   position: relative;
 
-  .party-table__btns {
-    display: flex;
-    align-items: center;
-  }
+  ::v-deep.ai-detail__content--wrapper {
+    height: 100%;
 
-  .set_btn {
-    position: absolute;
-    right: 20px;
-    top: 8px;
-  }
-
-  ::v-deep .ai-list__content--right {
-    position: relative;
-
-    .add_btn {
-      position: absolute;
-      right: 18px;
-      top: 11px;
+    & > * {
+      height: inherit;
     }
-  }
 
+    .mainContent {
+      .el-scrollbar__wrap {
+        overflow-x: hidden;
+      }
+    }
 
-  ::v-deep .audit-0 {
-    color: #FF8822 !important;
-  }
-
-  ::v-deep .audit-1 {
-    color: #2EA222 !important;
-  }
-
-  ::v-deep .ai-list__content--right {
-    flex: 1;
-    min-width: 0;
-    margin-left: 1px;
-    box-shadow: none;
-
-    .ai-list__content--right-wrapper {
-      width: 100%;
-      padding-top: 0;
+    .AiTreeMenu {
+      min-width: 300px;
+      box-shadow: 0 4px 6px -2px rgb(15 15 21 / 15%);
     }
   }
 

project/pingchang/apps/AppOrganizationChange/components/history.vue

@@ -2,7 +2,7 @@
   <section class="history">
     <ai-search-bar>
       <template #left>
-        <el-button type="primary" icon="iconfont iconEdit" v-if="hasConfig" @click="$router.push({hash:'#makeup',query:{oid}})">补录</el-button>
+        <el-button type="primary" icon="iconfont iconEdit" @click="$router.push({hash:'#makeup',query:{oid}})">补录</el-button>
       </template>
       <template #right>
         <el-input size="small" placeholder="请输入届次" v-model="search.name" clearable
@@ -28,9 +28,6 @@ export default {
     instance: {},
     dict: {}
   },
-  props: {
-    hasConfig: Boolean
-  },
   data() {
     return {
       search: {