BUG 29300

packages/jianping/AppPublicizeInformation/List.vue

@@ -5,20 +5,26 @@
                 @change="page.current=1,getTableData()">
       </ai-title>
       <template #content>
-        <div class="flex">
+        <div class="flex fill">
           <div class="type">
-            <div class="title">宣传板块<span><el-button type="text" @click="addType(0, typeList.length+1, '')">添加</el-button></span></div>
+            <div class="title">宣传板块<span><el-button type="text"
+                                                    @click="addType(0, typeList.length+1, '')">添加</el-button></span>
+            </div>
             <div class="list">
-              <div class="item" v-for="(item, index) in typeList" :key="index" :class="typeIndex == index ? 'active' : ''" @click="typeClick(index)">
+              <div class="item" v-for="(item, index) in typeList" :key="index"
+                   :class="typeIndex == index ? 'active' : ''" @click="typeClick(index)">
                 {{ item.categoryName }}
               </div>
               <div class="item" v-if="!typeList.length">暂无数据</div>
             </div>
           </div>
           <div class="type mini-type">
-            <div class="title">模块名称<span><el-button type="text" @click="addType(1, miniTypeList.length+1, typeList[typeIndex].id)">添加</el-button></span></div>
+            <div class="title">模块名称<span><el-button type="text"
+                                                    @click="addType(1, miniTypeList.length+1, typeList[typeIndex].id)">添加</el-button></span>
+            </div>
             <div class="list">
-              <div class="item" v-for="(item, index) in miniTypeList" :key="index" :class="miniTypeIndex == index ? 'active' : ''" @click="miniTypeClick(index)">
+              <div class="item" v-for="(item, index) in miniTypeList" :key="index"
+                   :class="miniTypeIndex == index ? 'active' : ''" @click="miniTypeClick(index)">
                 <span class="text">{{ item.categoryName }}</span>
                 <span class="icon">
                   <i class="el-icon-circle-plus-outline" @click="addNewType(index)"></i>
@@ -32,12 +38,15 @@
           <div class="content">
             <ai-search-bar>
               <template #right>
-                <el-input size="small" placeholder="请输入标题" v-model="search.title" clearable @change="page.current=1,getTableData()"/>
+                <el-input size="small" placeholder="请输入标题" v-model="search.title" clearable
+                          @change="page.current=1,getTableData()"/>
               </template>
             </ai-search-bar>
             <ai-search-bar>
               <template #left>
-                <el-button type="primary" icon="iconfont iconAdd" @click="showEdit('')" v-if="typeList.length && miniTypeList.length">添加</el-button>
+                <el-button type="primary" icon="iconfont iconAdd" @click="showEdit('')"
+                           v-if="typeList.length && miniTypeList.length">添加
+                </el-button>
                 <!-- <el-button icon="iconfont iconDelete" :disabled="!ids.length" @click="handleDelete(ids)">删除</el-button> -->
               </template>
             </ai-search-bar>
@@ -53,7 +62,6 @@
             </ai-table>
           </div>
         </div>
-        
       </template>
     </ai-list>
     <ai-dialog :visible.sync="dialog" :title="dialogTitle" @closed="form={}" @onConfirm="submitDialog" width="600px">
@@ -65,7 +73,8 @@
           <el-input-number v-model="form.showIndex" @change="handleChange" :min="1" :max="100"></el-input-number>
         </el-form-item>
       </el-form>
-      <ai-table :tableData="newTypeList" :total="newPage.total" :current.sync="newPage.current" :size.sync="newPage.size"
+      <ai-table :tableData="newTypeList" :total="newPage.total" :current.sync="newPage.current"
+                :size.sync="newPage.size"
                 :col-configs="colConfigsNew" v-if="type == 2">
         <el-table-column slot="options" label="操作" fixed="right" align="center">
           <template slot-scope="{row}">
@@ -139,7 +148,13 @@ export default {
       })
     },
     showEdit(id) {
-      this.$router.push({query: {id: id, parentId: this.typeList[this.typeIndex].id, moduleId: this.miniTypeList[this.miniTypeIndex].id}, hash: "#add"})
+      this.$router.push({
+        query: {
+          id: id,
+          parentId: this.typeList[this.typeIndex].id,
+          moduleId: this.miniTypeList[this.miniTypeIndex].id
+        }, hash: "#add"
+      })
     },
     handleDelete(ids) {
       this.$confirm("是否删除该条宣传资讯信息").then(() => {
@@ -261,18 +276,22 @@ export default {
 <style lang="scss" scoped>
 .List {
   height: 100%;
+
   .flex {
     display: flex;
+
     .type {
       width: 250px;
       border: 1px solid #ddd;
       box-sizing: border-box;
+
       .title {
         font-size: 16px;
         line-height: 40px;
         border-bottom: 1px solid #ddd;
         padding: 0 16px;
         font-weight: 600;
+
         span {
           color: #26f;
           font-size: 12px;
@@ -280,6 +299,7 @@ export default {
           float: right;
         }
       }
+
       .list {
         .item {
           padding: 0 16px;
@@ -289,38 +309,51 @@ export default {
           font-size: 14px;
           color: #333;
           box-sizing: border-box;
+
           .text {
             width: calc(100% - 70px);
             cursor: pointer;
           }
+
           .icon {
             width: 70px;
             text-align: right;
+
             i {
               font-size: 14px;
               cursor: pointer;
               margin-left: 8px;
             }
+
             .el-icon-delete {
               color: #f46;
             }
+
             .el-icon-circle-plus-outline {
               color: #26f;
             }
           }
         }
+
         .active {
           // color: #26f;
           background-color: #f3f6f9;
         }
       }
     }
+
     .mini-type {
       margin-right: 16px;
     }
+
     .content {
       width: calc(100% - 516px);
     }
   }
+
+  ::v-deep .ai-list__content--right-wrapper {
+    min-height: calc(100% - 6px) !important;
+    display: flex;
+  }
 }
 </style>