消息与推送管理列表筛选条件折叠

src/components/recommen/screen-type.vue

@@ -75,12 +75,10 @@ export default {
 
     },
     mounted() {
-        window.onresize = ()=>{
-            this.pageResize();
-        }
+        window.addEventListener("resize", this.pageResize);
     },
     destroyed(){
-      window.onresize = null;
+        window.removeEventListener("resize", this.pageResize);
     },
     methods: {
         openflag_func(){

src/components/show-more-filter.vue

+<template>
+  <div ref="container" class="show_more_filter">
+    <slot></slot>
+
+    <a
+      v-if="showBtn"
+      class="show_more_btn"
+      :style="{
+        left: btnLeft,
+      }"
+      @click="toggle"
+    >
+      更多检索
+      <i
+        data-v-3b31b76f=""
+        :class="showMore ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"
+      ></i>
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showBtn: false,
+      showMore: false,
+      btnLeft: 0,
+    };
+  },
+  mounted() {
+    this.resize();
+    window.addEventListener("resize", this.resize);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.resize);
+  },
+  methods: {
+    resize() {
+      this.$nextTick(() => {
+        let container = this.$refs.container;
+        let containerWidth = container.getBoundingClientRect().width - 80;
+        let filters = container.querySelectorAll(".filter_item");
+        let totalWidth = 0;
+        let wrapFlag = false;
+
+        this.showBtn = false;
+
+        filters.forEach((filter, index) => {
+          filter.style.display = "inline-block";
+
+          let filterWidth =
+            Math.ceil(filter.getBoundingClientRect().width) + 15;
+
+          totalWidth += filterWidth;
+
+          if (totalWidth > containerWidth) {
+            this.showBtn = true;
+
+            if (!wrapFlag) {
+              this.btnLeft = totalWidth - filterWidth + 5 + "px";
+              wrapFlag = true;
+            }
+            console.log(totalWidth, containerWidth, this.btnLeft);
+
+            filter.style.display = this.showMore ? "inline-block" : "none";
+          } else {
+            filter.style.display = "inline-block";
+          }
+        });
+      });
+    },
+    toggle() {
+      this.showMore = !this.showMore;
+      this.resize();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.show_more_filter {
+  position: relative;
+  padding-right: 80px;
+}
+.show_more_btn {
+  position: absolute;
+  top: 25px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #8890a7;
+  cursor: pointer;
+  user-select: none;
+}
+</style>

src/pages/message-management/banner/banner-list.vue

@@ -20,7 +20,7 @@
 
       <template slot="top">
         <div class="top_fliter">
-          <div class="filter_list">
+          <show-more-filter class="filter_list">
             <div class="filter_item">
               <span class="filter_title">banner搜索：</span>
               <el-input
@@ -61,7 +61,7 @@
               >
               </el-date-picker>
             </div>
-          </div>
+          </show-more-filter>
           <div class="filter_action apass_button">
             <el-button type="primary" @click="topFilterAction">
               查询
@@ -90,11 +90,13 @@
 import helper from "@/services/helper.js";
 import apassList from "@/components/apass-list";
 import apassDialog from "@/components/apass-dialog";
+import showMoreFilter from "@/components/show-more-filter";
 
 export default {
   components: {
     apassList,
     apassDialog,
+    showMoreFilter,
   },
   data: () => ({
     listHeader: [],

src/pages/message-management/directed-push/directed-push-list.vue

@@ -20,7 +20,7 @@
 
       <template slot="top">
         <div class="top_fliter">
-          <div class="filter_list">
+          <show-more-filter class="filter_list">
             <div class="filter_item">
               <span class="filter_title">消息模板名称：</span>
               <el-input
@@ -32,8 +32,9 @@
               <span class="filter_title">状态：</span>
               <el-select v-model="topFilter.state" placeholder="请选择">
                 <el-option label="全部" value=""> </el-option>
-                <el-option label="推送成功" value="1"> </el-option>
-                <el-option label="推送失败" value="0"> </el-option>
+                <el-option label="推送成功" value="success"> </el-option>
+                <el-option label="推送失败" value="fail"> </el-option>
+                <el-option label="推送中" value="pushing"> </el-option>
               </el-select>
             </div>
             <div class="filter_item">
@@ -48,7 +49,7 @@
               >
               </el-date-picker>
             </div>
-          </div>
+          </show-more-filter>
           <div class="filter_action apass_button">
             <el-button type="primary" @click="topFilterAction">
               查询
@@ -81,11 +82,13 @@
 import helper from "@/services/helper.js";
 import apassList from "@/components/apass-list";
 import apassDialog from "@/components/apass-dialog";
+import showMoreFilter from "@/components/show-more-filter";
 
 export default {
   components: {
     apassList,
     apassDialog,
+    showMoreFilter,
   },
   data: () => ({
     listHeader: [],
@@ -163,122 +166,25 @@ export default {
   },
   methods: {
     initList(filter) {
-      let fullFilter = {
-        ...filter,
-        ...this.topFilter,
+      let params = {
+        page: filter.page,
+        size: filter.size,
+        tplname: this.topFilter.name,
+        state: this.topFilter.state,
+        time_s: (this.topFilter.push_time && this.topFilter.push_time[0]) || "",
+        time_e: (this.topFilter.push_time && this.topFilter.push_time[1]) || "",
       };
 
-      this.tempFilter = filter; // filter存档，用于页面刷新
+      // console.log(params);
 
-      console.log(fullFilter);
-
-      this.listTotal = 55;
-      this.listData = [
-        {
-          state: 1,
-          push_num: "propelling2020001",
-          name: "服务定向推送的消息",
-          detail:
-            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
-          users: ["张三", "李四", "王五"],
-          push_time: "2020-07-18T14:25:09+08:00",
-        },
-        {
-          state: 1,
-          push_num: "propelling2020001",
-          name: "服务定向推送的消息",
-          detail:
-            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
-          users: ["杨过", "小龙女", "冯宝宝"],
-          push_time: "2020-07-18T14:25:09+08:00",
-        },
-        {
-          state: 1,
-          push_num: "propelling2020001",
-          name: "服务定向推送的消息",
-          detail:
-            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
-          users: ["张三", "李四", "王五"],
-          push_time: "2020-07-18T14:25:09+08:00",
-        },
-        {
-          state: 0,
-          push_num: "propelling2020001",
-          name: "服务定向推送的消息",
-          detail:
-            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
-          users: ["杨过", "小龙女", "冯宝宝"],
-          push_time: "2020-07-18T14:25:09+08:00",
-        },
-        {
-          state: 0,
-          push_num: "propelling2020001",
-          name: "服务定向推送的消息",
-          detail:
-            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
-          users: ["杨过", "小龙女", "冯宝宝"],
-          push_time: "2020-07-18T14:25:09+08:00",
-        },
-        {
-          state: 1,
-          push_num: "propelling2020001",
-          name: "服务定向推送的消息",
-          detail:
-            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
-          users: ["张三", "李四", "王五"],
-          push_time: "2020-07-18T14:25:09+08:00",
-        },
-        {
-          state: 1,
-          push_num: "propelling2020001",
-          name: "服务定向推送的消息",
-          detail:
-            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
-          users: ["杨过", "小龙女", "冯宝宝"],
-          push_time: "2020-07-18T14:25:09+08:00",
-        },
-        {
-          state: 1,
-          push_num: "propelling2020001",
-          name: "服务定向推送的消息",
-          detail:
-            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
-          users: ["张三", "李四", "王五"],
-          push_time: "2020-07-18T14:25:09+08:00",
-        },
-        {
-          state: 0,
-          push_num: "propelling2020001",
-          name: "服务定向推送的消息",
-          detail:
-            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
-          users: ["杨过", "小龙女", "冯宝宝"],
-          push_time: "2020-07-18T14:25:09+08:00",
-        },
-        {
-          state: 0,
-          push_num: "propelling2020001",
-          name: "服务定向推送的消息",
-          detail:
-            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
-          users: ["杨过", "小龙女", "冯宝宝"],
-          push_time: "2020-07-18T14:25:09+08:00",
-        },
-      ];
+      this.tempFilter = filter; // filter存档，用于页面刷新
 
-      /* this.$http
-        .get("/apaas/service/v3/resource/apply/approveList", {
-          params: {
-            search: filter.keyword,
-            page: filter.page,
-            limit: filter.size,
-            state: filter.state,
-          },
-        })
+      this.$http
+        .get("/apaas/service/v3/push/directmsg/list", { params })
         .then(({ data }) => {
           if (data.success == 1) {
-            this.listTotal = data.total;
-            this.listData = data.data;
+            this.listTotal = (data.data && data.data.total) || 0;
+            this.listData = (data.data && data.data.data) || [];
           } else {
             this.$message({
               message: data.errMsg || "获取列表失败",
@@ -288,8 +194,13 @@ export default {
         })
         .catch((error) => {
           console.log(error);
-        }); */
-    }, // TODO: 列表待调试
+
+          this.$message({
+            message: "获取列表失败",
+            type: "warning",
+          });
+        });
+    },
     topFilterAction() {
       this.initList(this.tempFilter);
     },

src/pages/message-management/message-alert/message-alert-list.vue

@@ -20,7 +20,7 @@
 
       <template slot="top">
         <div class="top_fliter">
-          <div class="filter_list">
+          <show-more-filter class="filter_list">
             <div class="filter_item">
               <span class="filter_title">消息模板名称：</span>
               <el-input
@@ -48,7 +48,7 @@
               >
               </el-date-picker>
             </div>
-          </div>
+          </show-more-filter>
           <div class="filter_action apass_button">
             <el-button type="primary" @click="topFilterAction">
               查询
@@ -77,11 +77,13 @@
 import helper from "@/services/helper.js";
 import apassList from "@/components/apass-list";
 import apassDialog from "@/components/apass-dialog";
+import showMoreFilter from "@/components/show-more-filter";
 
 export default {
   components: {
     apassList,
     apassDialog,
+    showMoreFilter,
   },
   data: () => ({
     listHeader: [],

src/pages/message-management/message-template/message-template-list.vue

@@ -20,7 +20,7 @@
 
       <template slot="top">
         <div class="top_fliter">
-          <div class="filter_list">
+          <show-more-filter class="filter_list">
             <div class="filter_item">
               <span class="filter_title">消息模板搜索：</span>
               <el-input
@@ -49,7 +49,7 @@
               >
               </el-date-picker>
             </div>
-          </div>
+          </show-more-filter>
           <div class="filter_action apass_button">
             <el-button type="primary" @click="topFilterAction">
               查询
@@ -78,11 +78,13 @@
 import helper from "@/services/helper.js";
 import apassList from "@/components/apass-list";
 import apassDialog from "@/components/apass-dialog";
+import showMoreFilter from "@/components/show-more-filter";
 
 export default {
   components: {
     apassList,
     apassDialog,
+    showMoreFilter,
   },
   data: () => ({
     listHeader: [],

src/pages/message-management/recommended/recommended-list.vue

@@ -20,7 +20,7 @@
 
       <template slot="top">
         <div class="top_fliter">
-          <div class="filter_list">
+          <show-more-filter class="filter_list">
             <div class="filter_item">
               <span class="filter_title">推荐位名称：</span>
               <el-input
@@ -48,7 +48,7 @@
               >
               </el-date-picker>
             </div>
-          </div>
+          </show-more-filter>
           <div class="filter_action apass_button">
             <el-button type="primary" @click="topFilterAction">
               查询
@@ -66,10 +66,12 @@
 <script>
 import helper from "@/services/helper.js";
 import apassList from "@/components/apass-list";
+import showMoreFilter from "@/components/show-more-filter";
 
 export default {
   components: {
     apassList,
+    showMoreFilter,
   },
   data: () => ({
     listHeader: [],