消息管理列表页

src/components/apass-table.vue

 <template>
   <div class="apass_table">
     <el-table :data="data" @sort-change="sortChange">
-      <el-table-column v-if="paddingLeft > 10" :width="paddingLeft - 10"></el-table-column>
+      <el-table-column
+        v-if="paddingLeft > 10"
+        :width="paddingLeft - 10"
+      ></el-table-column>
       <el-table-column
         v-for="(item, index) in header"
         :label="item.label"
@@ -123,7 +126,9 @@
           <div v-else-if="item.type === 'image-tooltip'" class="img_content">
             <el-tooltip
               effect="dark"
-              :content="item.getTooltip ? item.getTooltip(scope.row) : item.tooltip"
+              :content="
+                item.getTooltip ? item.getTooltip(scope.row) : item.tooltip
+              "
               placement="top"
             >
               <img

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

 <template>
-  <div>
-    <el-breadcrumb separator="/" class="bread_crumb1 bread_left">
-      <el-breadcrumb-item :to="{ path: '/message' }">{{ $t("lang.message") }}</el-breadcrumb-item>
-      <el-breadcrumb-item>{{ $t("lang.banner") }}</el-breadcrumb-item>
+  <div class="list_container">
+    <apass-list
+      ref="list"
+      :list-header="listHeader"
+      :list-data="listData"
+      :list-total="listTotal"
+      :hide-search="true"
+      :list-padding-left="0"
+      @list-action="initList"
+    >
+      <el-breadcrumb separator="/" slot="breadcrumb">
+        <el-breadcrumb-item :to="{ path: '/message' }">
+          {{ $t("lang.message") }}
+        </el-breadcrumb-item>
+        <el-breadcrumb-item>
+          {{ $t("lang.banner") }}
+        </el-breadcrumb-item>
       </el-breadcrumb>
+
+      <template slot="top">
+        <div class="top_fliter">
+          <div class="filter_list">
+            <div class="filter_item">
+              <span class="filter_title">banner搜索：</span>
+              <el-input
+                v-model="topFilter.name"
+                placeholder="请输入banner关键词"
+              ></el-input>
+            </div>
+            <div class="filter_item">
+              <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="-1"> </el-option>
+              </el-select>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">上架时间：</span>
+              <el-date-picker
+                v-model="topFilter.up_time"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">下架时间：</span>
+              <el-date-picker
+                v-model="topFilter.down_time"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="filter_action apass_button">
+            <el-button type="primary" @click="topFilterAction">
+              查询
+            </el-button>
+            <el-button type="defalut" @click="topFilterClear">
+              重置
+            </el-button>
+          </div>
+        </div>
+      </template>
+
+      <el-button type="primary" @click="addNew" slot="header-left">
+        新建
+      </el-button>
+    </apass-list>
+
+    <apass-dialog
+      ref="dialog"
+      :msg="dialogInfo.msg"
+      :submit="dialogInfo.submit"
+    ></apass-dialog>
   </div>
 </template>
 
 <script>
+import helper from "@/services/helper.js";
+import apassList from "@/components/apass-list";
+import apassDialog from "@/components/apass-dialog";
+
 export default {
-  components: {},
-  data: () => ({}),
-  mounted() {},
-  methods: {}
+  components: {
+    apassList,
+    apassDialog,
+  },
+  data: () => ({
+    listHeader: [],
+    listData: [],
+    listTotal: 0,
+    dialogInfo: {
+      msg: "",
+      submit: null,
+    },
+    topFilter: {
+      name: "",
+      state: "",
+      up_time: "",
+      down_time: "",
+    },
+    tempFilter: null,
+  }),
+  created() {
+    this.listHeader = [
+      {
+        label: "",
+        prop: "state",
+        type: "image-tooltip",
+        getImage(item) {
+          return [
+            require("@/assets/imgs/ic_guoqi.png"),
+            require("@/assets/imgs/ic_failed.png"),
+            require("@/assets/imgs/ic_true.png"),
+          ][item.state + 1];
+        },
+        getTooltip(item) {
+          return ["已过期", "已下架", "已上架"][item.state + 1];
+        },
+        align: "center",
+        width: 60,
+      },
+      {
+        label: "排序",
+        prop: "index",
+        width: 60,
+      },
+      {
+        label: "banner编码",
+        prop: "code",
+        type: "button",
+        callback: this.detailAction,
+        width: 300,
+      },
+      {
+        label: "banner名称",
+        prop: "name",
+        type: "button",
+        callback: this.detailAction,
+        width: 300,
+      },
+      {
+        label: "链接地址",
+        prop: "url",
+      },
+      {
+        label: "图片大小",
+        prop: "size",
+        getText(item) {
+          let value = item.size || 0;
+          return (value / 1024).toFixed(2) + "KB";
+        },
+        width: 100,
+      },
+      {
+        label: "上架时间",
+        prop: "up_time",
+        getText(item) {
+          let date = item.up_time || "";
+          return helper.dateStringTransform(date);
+        },
+        align: "center",
+        width: 180,
+      },
+      {
+        label: "下架时间",
+        prop: "down_time",
+        getText(item) {
+          let date = item.down_time || "";
+          return helper.dateStringTransform(date);
+        },
+        align: "center",
+        width: 180,
+      },
+      {
+        label: "操作",
+        type: "buttons",
+        align: "center",
+        width: 320,
+        actionList: [
+          {
+            label: "编辑",
+            callback: this.editAction,
+          },
+          {
+            label: "上架",
+            callback: this.upAction,
+          },
+          {
+            label: "下架",
+            callback: this.downAction,
+          },
+          {
+            label: "删除",
+            class: "warn",
+            callback: this.deleteAction,
+          },
+        ],
+      },
+    ];
+  },
+  methods: {
+    initList(filter) {
+      let fullFilter = {
+        ...filter,
+        ...this.topFilter,
+      };
+
+      this.tempFilter = filter; // filter存档，用于页面刷新
+
+      console.log(fullFilter);
+
+      this.listTotal = 55;
+      this.listData = [
+        {
+          state: 1,
+          index: "01",
+          code: "BN202004542001",
+          name: "多元数据可视化分析宣传图片",
+          url: "https://apaasgis.wodcloud.com/portal",
+          size: 131072,
+          up_time: "2020-07-18T14:25:09+08:00",
+          down_time: "2020-07-18T14:25:09+08:00",
+        },
+        {
+          state: -1,
+          index: "01",
+          code: "BN202004542001",
+          name: "多元数据可视化分析宣传图片",
+          url: "https://apaasgis.wodcloud.com/portal",
+          size: 131072,
+          up_time: "2020-07-18T14:25:09+08:00",
+          down_time: "2020-07-18T14:25:09+08:00",
+        },
+        {
+          state: 0,
+          index: "01",
+          code: "BN202004542001",
+          name: "多元数据可视化分析宣传图片",
+          url: "https://apaasgis.wodcloud.com/portal",
+          size: 131072,
+          up_time: "2020-07-18T14:25:09+08:00",
+          down_time: "2020-07-18T14:25:09+08:00",
+        },
+        {
+          state: 0,
+          index: "01",
+          code: "BN202004542001",
+          name: "多元数据可视化分析宣传图片",
+          url: "https://apaasgis.wodcloud.com/portal",
+          size: 131072,
+          up_time: "2020-07-18T14:25:09+08:00",
+          down_time: "2020-07-18T14:25:09+08:00",
+        },
+        {
+          state: -1,
+          index: "01",
+          code: "BN202004542001",
+          name: "多元数据可视化分析宣传图片",
+          url: "https://apaasgis.wodcloud.com/portal",
+          size: 131072,
+          up_time: "2020-07-18T14:25:09+08:00",
+          down_time: "2020-07-18T14:25:09+08:00",
+        },
+        {
+          state: 1,
+          index: "01",
+          code: "BN202004542001",
+          name: "多元数据可视化分析宣传图片",
+          url: "https://apaasgis.wodcloud.com/portal",
+          size: 131072,
+          up_time: "2020-07-18T14:25:09+08:00",
+          down_time: "2020-07-18T14:25:09+08:00",
+        },
+        {
+          state: -1,
+          index: "01",
+          code: "BN202004542001",
+          name: "多元数据可视化分析宣传图片",
+          url: "https://apaasgis.wodcloud.com/portal",
+          size: 131072,
+          up_time: "2020-07-18T14:25:09+08:00",
+          down_time: "2020-07-18T14:25:09+08:00",
+        },
+        {
+          state: 0,
+          index: "01",
+          code: "BN202004542001",
+          name: "多元数据可视化分析宣传图片",
+          url: "https://apaasgis.wodcloud.com/portal",
+          size: 131072,
+          up_time: "2020-07-18T14:25:09+08:00",
+          down_time: "2020-07-18T14:25:09+08:00",
+        },
+        {
+          state: 0,
+          index: "01",
+          code: "BN202004542001",
+          name: "多元数据可视化分析宣传图片",
+          url: "https://apaasgis.wodcloud.com/portal",
+          size: 131072,
+          up_time: "2020-07-18T14:25:09+08:00",
+          down_time: "2020-07-18T14:25:09+08:00",
+        },
+        {
+          state: -1,
+          index: "01",
+          code: "BN202004542001",
+          name: "多元数据可视化分析宣传图片",
+          url: "https://apaasgis.wodcloud.com/portal",
+          size: 131072,
+          up_time: "2020-07-18T14:25:09+08:00",
+          down_time: "2020-07-18T14:25:09+08:00",
+        },
+      ];
+
+      /* this.$http
+        .get("/apaas/service/v3/resource/apply/approveList", {
+          params: {
+            search: filter.keyword,
+            page: filter.page,
+            limit: filter.size,
+            state: filter.state,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success == 1) {
+            this.listTotal = data.total;
+            this.listData = data.data;
+          } else {
+            this.$message({
+              message: data.errMsg || "获取列表失败",
+              type: "warning",
+            });
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        }); */
+    },
+    topFilterAction() {
+      this.initList(this.tempFilter);
+    },
+    topFilterClear() {
+      this.topFilter = {
+        name: "",
+        state: "",
+        up_time: "",
+        down_time: "",
+      };
+
+      this.initList(this.tempFilter);
+    },
+    showDialog() {
+      this.$refs.dialog.show();
+    },
+    addNew() {
+      console.log("新建模板");
+    },
+    editAction(item) {
+      console.log(`编辑${item.name}`);
+    },
+    upAction(item) {
+      console.log(`上架${item.name}`);
+    },
+    downAction(item) {
+      console.log(`下架${item.name}`);
+    },
+    deleteAction(item) {
+      console.log(`删除${item.name}`);
+    },
+  },
 };
 </script>
+
 <style scoped>
+.list_container {
+  height: 100%;
+}
 </style>

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

@@ -106,6 +106,61 @@ export default {
     },
     tempFilter: null,
   }),
+  created() {
+    this.listHeader = [
+      {
+        label: "",
+        prop: "state",
+        type: "image-tooltip",
+        getImage(item) {
+          return item.state == 1
+            ? require("@/assets/imgs/ic_true.png")
+            : require("@/assets/imgs/ic_failed.png");
+        },
+        getTooltip(item) {
+          return item.state == 1 ? "推送成功" : "推送失败";
+        },
+        align: "center",
+        width: 60,
+      },
+      {
+        label: "推送流水号",
+        prop: "push_num",
+        width: 240,
+      },
+      {
+        label: "消息模板名称",
+        prop: "name",
+        type: "button",
+        callback: this.detailAction,
+        width: 300,
+      },
+      {
+        label: "消息详情",
+        prop: "detail",
+      },
+      {
+        label: "接收用户",
+        prop: "users",
+        getText(item) {
+          let users = item.users || [];
+
+          return users.join("，");
+        },
+        width: 300,
+      },
+      {
+        label: "推送时间",
+        prop: "push_time",
+        getText(item) {
+          let date = item.push_time || "";
+          return helper.dateStringTransform(date);
+        },
+        align: "center",
+        width: 180,
+      },
+    ];
+  },
   methods: {
     initList(filter) {
       let fullFilter = {
@@ -257,61 +312,6 @@ export default {
       console.log(`查看${item.name}`);
     },
   },
-  created() {
-    this.listHeader = [
-      {
-        label: "",
-        prop: "state",
-        type: "image-tooltip",
-        getImage(item) {
-          return item.state == 1
-            ? require("@/assets/imgs/ic_true.png")
-            : require("@/assets/imgs/ic_failed.png");
-        },
-        getTooltip(item) {
-          return item.state == 1 ? "推送成功" : "推送失败";
-        },
-        align: "center",
-        width: 60,
-      },
-      {
-        label: "推送流水号",
-        prop: "push_num",
-        width: 240,
-      },
-      {
-        label: "消息模板名称",
-        prop: "name",
-        type: "button",
-        callback: this.detailAction,
-        width: 300,
-      },
-      {
-        label: "消息详情",
-        prop: "detail",
-      },
-      {
-        label: "接收用户",
-        prop: "users",
-        getText(item) {
-          let users = item.users || [];
-
-          return users.join("，");
-        },
-        width: 300,
-      },
-      {
-        label: "推送时间",
-        prop: "push_time",
-        getText(item) {
-          let date = item.push_time || "";
-          return helper.dateStringTransform(date);
-        },
-        align: "center",
-        width: 180,
-      },
-    ];
-  },
 };
 </script>
 

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

 <template>
-  <div>
-    <el-breadcrumb separator="/" class="bread_crumb1 bread_left">
-      <el-breadcrumb-item :to="{ path: '/message' }">{{ $t("lang.message") }}</el-breadcrumb-item>
-      <el-breadcrumb-item>{{ $t("lang.message_alert") }}</el-breadcrumb-item>
+  <div class="list_container">
+    <apass-list
+      ref="list"
+      :list-header="listHeader"
+      :list-data="listData"
+      :list-total="listTotal"
+      :hide-search="true"
+      :list-padding-left="0"
+      @list-action="initList"
+    >
+      <el-breadcrumb separator="/" slot="breadcrumb">
+        <el-breadcrumb-item :to="{ path: '/message' }">
+          {{ $t("lang.message") }}
+        </el-breadcrumb-item>
+        <el-breadcrumb-item>
+          {{ $t("lang.message_alert") }}
+        </el-breadcrumb-item>
       </el-breadcrumb>
+
+      <template slot="top">
+        <div class="top_fliter">
+          <div class="filter_list">
+            <div class="filter_item">
+              <span class="filter_title">消息模板名称：</span>
+              <el-input
+                v-model="topFilter.name"
+                placeholder="请输入消息模板名称"
+              ></el-input>
+            </div>
+            <div class="filter_item">
+              <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-select>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">推送时间：</span>
+              <el-date-picker
+                v-model="topFilter.push_time"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="filter_action apass_button">
+            <el-button type="primary" @click="topFilterAction">
+              查询
+            </el-button>
+            <el-button type="defalut" @click="topFilterClear">
+              重置
+            </el-button>
+          </div>
+        </div>
+      </template>
+
+      <el-button type="primary" @click="addNew" slot="header-left">
+        新建
+      </el-button>
+    </apass-list>
+
+    <apass-dialog
+      ref="dialog"
+      :msg="dialogInfo.msg"
+      :submit="dialogInfo.submit"
+    ></apass-dialog>
   </div>
 </template>
 
 <script>
+import helper from "@/services/helper.js";
+import apassList from "@/components/apass-list";
+import apassDialog from "@/components/apass-dialog";
+
 export default {
-  components: {},
-  data: () => ({}),
-  mounted() {},
-  methods: {}
+  components: {
+    apassList,
+    apassDialog,
+  },
+  data: () => ({
+    listHeader: [],
+    listData: [],
+    listTotal: 0,
+    dialogInfo: {
+      msg: "",
+      submit: null,
+    },
+    topFilter: {
+      name: "",
+      state: "",
+      push_time: "",
+    },
+    tempFilter: null,
+  }),
+  created() {
+    this.listHeader = [
+      {
+        label: "",
+        prop: "state",
+        type: "image-tooltip",
+        getImage(item) {
+          return item.state == 1
+            ? require("@/assets/imgs/ic_true.png")
+            : require("@/assets/imgs/ic_failed.png");
+        },
+        getTooltip(item) {
+          return item.state == 1 ? "推送成功" : "推送失败";
+        },
+        align: "center",
+        width: 60,
+      },
+      {
+        label: "推送流水号",
+        prop: "push_num",
+        width: 240,
+      },
+      {
+        label: "消息模板名称",
+        prop: "name",
+        type: "button",
+        callback: this.detailAction,
+        width: 300,
+      },
+      {
+        label: "消息详情",
+        prop: "detail",
+      },
+      {
+        label: "接收用户",
+        prop: "users",
+        getText(item) {
+          let users = item.users || [];
+
+          return users.join("，");
+        },
+        width: 300,
+      },
+      {
+        label: "推送时间",
+        prop: "push_time",
+        getText(item) {
+          let date = item.push_time || "";
+          return helper.dateStringTransform(date);
+        },
+        align: "center",
+        width: 180,
+      },
+    ];
+  },
+  methods: {
+    initList(filter) {
+      let fullFilter = {
+        ...filter,
+        ...this.topFilter,
+      };
+
+      this.tempFilter = filter; // filter存档，用于页面刷新
+
+      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.$http
+        .get("/apaas/service/v3/resource/apply/approveList", {
+          params: {
+            search: filter.keyword,
+            page: filter.page,
+            limit: filter.size,
+            state: filter.state,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success == 1) {
+            this.listTotal = data.total;
+            this.listData = data.data;
+          } else {
+            this.$message({
+              message: data.errMsg || "获取列表失败",
+              type: "warning",
+            });
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        }); */
+    },
+    topFilterAction() {
+      this.initList(this.tempFilter);
+    },
+    topFilterClear() {
+      this.topFilter = {
+        name: "",
+        state: "",
+        push_time: "",
+      };
+
+      this.initList(this.tempFilter);
+    },
+    showDialog() {
+      this.$refs.dialog.show();
+    },
+    addNew() {
+      console.log("新建模板");
+    },
+    detailAction(item) {
+      console.log(`查看${item.name}`);
+    },
+  },
 };
 </script>
+
 <style scoped>
+.list_container {
+  height: 100%;
+}
 </style>

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

 <template>
-  <div>
-    <el-breadcrumb separator="/" class="bread_crumb1 bread_left">
-      <el-breadcrumb-item :to="{ path: '/message' }">{{ $t("lang.message") }}</el-breadcrumb-item>
-      <el-breadcrumb-item>{{ $t("lang.message_template") }}</el-breadcrumb-item>
+  <div class="list_container">
+    <apass-list
+      ref="list"
+      :list-header="listHeader"
+      :list-data="listData"
+      :list-total="listTotal"
+      :hide-search="true"
+      :list-padding-left="0"
+      @list-action="initList"
+    >
+      <el-breadcrumb separator="/" slot="breadcrumb">
+        <el-breadcrumb-item :to="{ path: '/message' }">
+          {{ $t("lang.message") }}
+        </el-breadcrumb-item>
+        <el-breadcrumb-item>
+          {{ $t("lang.message_template") }}
+        </el-breadcrumb-item>
       </el-breadcrumb>
+
+      <template slot="top">
+        <div class="top_fliter">
+          <div class="filter_list">
+            <div class="filter_item">
+              <span class="filter_title">消息模板搜索：</span>
+              <el-input
+                v-model="topFilter.name"
+                placeholder="请输入消息模板名称/id"
+              ></el-input>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">模板类型：</span>
+              <el-select v-model="topFilter.type" placeholder="请选择">
+                <el-option label="服务推送" value="0"> </el-option>
+                <el-option label="平台维护" value="1"> </el-option>
+                <el-option label="版本更新" value="2"> </el-option>
+                <el-option label="自动消息" value="3"> </el-option>
+              </el-select>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">最后更新时间：</span>
+              <el-date-picker
+                v-model="topFilter.updata_time"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="filter_action apass_button">
+            <el-button type="primary" @click="topFilterAction">
+              查询
+            </el-button>
+            <el-button type="defalut" @click="topFilterClear">
+              重置
+            </el-button>
+          </div>
+        </div>
+      </template>
+
+      <el-button type="primary" @click="addNew" slot="header-left">
+        新建
+      </el-button>
+    </apass-list>
+
+    <apass-dialog
+      ref="dialog"
+      :msg="dialogInfo.msg"
+      :cancel-text="dialogInfo.cancelText"
+      :cancel-type="dialogInfo.cancelType"
+      :cancel="dialogInfo.cancel"
+      :sunbmit-text="dialogInfo.sunbmitText"
+      :submit="dialogInfo.submit"
+    ></apass-dialog>
   </div>
 </template>
 
 <script>
+import helper from "@/services/helper.js";
+import apassList from "@/components/apass-list";
+import apassDialog from "@/components/apass-dialog";
+
 export default {
-  components: {},
-  data: () => ({}),
-  mounted() {},
-  methods: {}
+  components: {
+    apassList,
+    apassDialog,
+  },
+  data: () => ({
+    listHeader: [],
+    listData: [],
+    listTotal: 0,
+    dialogInfo: {
+      msg: "",
+      cancelText: "",
+      cancelType: "",
+      cancel: null,
+      sunbmitText: "",
+      submit: null,
+    },
+    topFilter: {
+      name: "",
+      type: "",
+      updata_time: "",
+    },
+    tempFilter: null,
+    types: [
+      {
+        name: "服务推送",
+        value: 0,
+      },
+      {
+        name: "平台维护",
+        value: 1,
+      },
+      {
+        name: "版本更新",
+        value: 2,
+      },
+      {
+        name: "自动消息",
+        value: 3,
+      },
+    ],
+  }),
+  created() {
+    let _self = this;
+
+    _self.listHeader = [
+      {
+        label: "模板ID",
+        prop: "id",
+        width: 240,
+      },
+      {
+        label: "消息模板名称",
+        prop: "name",
+        type: "button",
+        callback: _self.detailAction,
+        width: 240,
+      },
+      {
+        label: "模板类型",
+        prop: "type",
+        getText(item) {
+          return _self.types[item.type || 0].name;
+        },
+        width: 100,
+        align: "center"
+      },
+      {
+        label: "模板详情",
+        prop: "detail",
+      },
+      {
+        label: "最后更新时间",
+        prop: "updata_time",
+        getText(item) {
+          let date = item.updata_time || "";
+          return helper.dateStringTransform(date);
+        },
+        align: "center",
+        width: 180,
+      },
+      {
+        label: "操作",
+        type: "buttons",
+        align: "center",
+        width: 160,
+        actionList: [
+          {
+            label: "编辑",
+            callback: this.editAction,
+          },
+          {
+            label: "删除",
+            class: "warn",
+            callback: this.deleteAction,
+          },
+        ],
+      },
+    ];
+  },
+  methods: {
+    initList(filter) {
+      let fullFilter = {
+        ...filter,
+        ...this.topFilter,
+      };
+
+      this.tempFilter = filter; // filter存档，用于页面刷新
+
+      console.log(fullFilter);
+
+      this.listTotal = 55;
+      this.listData = [
+        {
+          id: "message20200429001",
+          push_num: "propelling2020001",
+          name: "服务定向推送的消息",
+          detail:
+            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
+          users: ["张三", "李四", "王五"],
+          updata_time: "2020-07-18T14:25:09+08:00",
+        },
+        {
+          id: "message20200429001",
+          push_num: "propelling2020001",
+          name: "服务定向推送的消息",
+          detail:
+            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
+          users: ["杨过", "小龙女", "冯宝宝"],
+          updata_time: "2020-07-18T14:25:09+08:00",
+        },
+        {
+          id: "message20200429001",
+          push_num: "propelling2020001",
+          name: "服务定向推送的消息",
+          detail:
+            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
+          users: ["张三", "李四", "王五"],
+          updata_time: "2020-07-18T14:25:09+08:00",
+        },
+        {
+          id: "message20200429001",
+          push_num: "propelling2020001",
+          name: "服务定向推送的消息",
+          detail:
+            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
+          users: ["杨过", "小龙女", "冯宝宝"],
+          updata_time: "2020-07-18T14:25:09+08:00",
+        },
+        {
+          id: "message20200429001",
+          push_num: "propelling2020001",
+          name: "服务定向推送的消息",
+          detail:
+            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
+          users: ["杨过", "小龙女", "冯宝宝"],
+          updata_time: "2020-07-18T14:25:09+08:00",
+        },
+        {
+          id: "message20200429001",
+          push_num: "propelling2020001",
+          name: "服务定向推送的消息",
+          detail:
+            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
+          users: ["张三", "李四", "王五"],
+          updata_time: "2020-07-18T14:25:09+08:00",
+        },
+        {
+          id: "message20200429001",
+          push_num: "propelling2020001",
+          name: "服务定向推送的消息",
+          detail:
+            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
+          users: ["杨过", "小龙女", "冯宝宝"],
+          updata_time: "2020-07-18T14:25:09+08:00",
+        },
+        {
+          id: "message20200429001",
+          push_num: "propelling2020001",
+          name: "服务定向推送的消息",
+          detail:
+            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
+          users: ["张三", "李四", "王五"],
+          updata_time: "2020-07-18T14:25:09+08:00",
+        },
+        {
+          id: "message20200429001",
+          push_num: "propelling2020001",
+          name: "服务定向推送的消息",
+          detail:
+            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
+          users: ["杨过", "小龙女", "冯宝宝"],
+          updata_time: "2020-07-18T14:25:09+08:00",
+        },
+        {
+          id: "message20200429001",
+          push_num: "propelling2020001",
+          name: "服务定向推送的消息",
+          detail:
+            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
+          users: ["杨过", "小龙女", "冯宝宝"],
+          updata_time: "2020-07-18T14:25:09+08:00",
+        },
+      ];
+
+      /* this.$http
+        .get("/apaas/service/v3/resource/apply/approveList", {
+          params: {
+            search: filter.keyword,
+            page: filter.page,
+            limit: filter.size,
+            state: filter.state,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success == 1) {
+            this.listTotal = data.total;
+            this.listData = data.data;
+          } else {
+            this.$message({
+              message: data.errMsg || "获取列表失败",
+              type: "warning",
+            });
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        }); */
+    },
+    topFilterAction() {
+      this.initList(this.tempFilter);
+    },
+    topFilterClear() {
+      this.topFilter = {
+        name: "",
+        type: "",
+        updata_time: "",
+      };
+
+      this.initList(this.tempFilter);
+    },
+    showDialog() {
+      this.$refs.dialog.show();
+    },
+    addNew() {
+      console.log("新建模板");
+    },
+    detailAction(item) {
+      console.log(`查看${item.name}`);
+    },
+    editAction(item) {
+      console.log(`编辑${item.name}`);
+    },
+    deleteAction(item) {
+      console.log(`删除${item.name}`);
+    },
+  },
 };
 </script>
+
 <style scoped>
+.list_container {
+  height: 100%;
+}
 </style>

src/pages/message-management/message.vue

@@ -34,7 +34,7 @@ export default {
         path: `/message/message_alert`
       },
       {
-        name: "benner管理",
+        name: "banner管理",
         path: `/message/banner`
       },
       {

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

@@ -82,6 +82,71 @@ export default {
     },
     tempFilter: null,
   }),
+  created() {
+    this.listHeader = [
+      {
+        label: "",
+        prop: "state",
+        type: "image-tooltip",
+        getImage(item) {
+          return item.state == 1
+            ? require("@/assets/imgs/ic_true.png")
+            : require("@/assets/imgs/ic_failed.png");
+        },
+        getTooltip(item) {
+          return item.state == 1 ? "状态正常" : "状态异常";
+        },
+        align: "center",
+        width: 60,
+      },
+      {
+        label: "推荐位名称",
+        prop: "name",
+        type: "button",
+        callback: this.detailAction,
+        align: "center",
+        width: 100,
+      },
+      {
+        label: "服务个数",
+        prop: "service_count",
+        align: "center",
+        width: 160,
+      },
+      {
+        label: "服务详情",
+        prop: "detail",
+      },
+      {
+        label: "操作人",
+        prop: "person",
+        align: "center",
+        width: 120,
+      },
+      {
+        label: "最后更新 时间",
+        prop: "updata_time",
+        getText(item) {
+          let date = item.updata_time || "";
+          return helper.dateStringTransform(date);
+        },
+        align: "center",
+        width: 240,
+      },
+      {
+        label: "操作",
+        type: "buttons",
+        align: "center",
+        width: 160,
+        actionList: [
+          {
+            label: "编辑",
+            callback: this.editAction,
+          },
+        ],
+      },
+    ];
+  },
   methods: {
     initList(filter) {
       let fullFilter = {
@@ -185,71 +250,6 @@ export default {
       console.log(`编辑${item.name}`);
     },
   },
-  created() {
-    this.listHeader = [
-      {
-        label: "",
-        prop: "state",
-        type: "image-tooltip",
-        getImage(item) {
-          return item.state == 1
-            ? require("@/assets/imgs/ic_true.png")
-            : require("@/assets/imgs/ic_failed.png");
-        },
-        getTooltip(item) {
-          return item.state == 1 ? "推送成功" : "推送失败";
-        },
-        align: "center",
-        width: 60,
-      },
-      {
-        label: "推荐位名称",
-        prop: "name",
-        type: "button",
-        callback: this.detailAction,
-        align: "center",
-        width: 100,
-      },
-      {
-        label: "服务个数",
-        prop: "service_count",
-        align: "center",
-        width: 160,
-      },
-      {
-        label: "服务详情",
-        prop: "detail",
-      },
-      {
-        label: "操作人",
-        prop: "person",
-        align: "center",
-        width: 120,
-      },
-      {
-        label: "最后更新 时间",
-        prop: "updata_time",
-        getText(item) {
-          let date = item.updata_time || "";
-          return helper.dateStringTransform(date);
-        },
-        align: "center",
-        width: 240,
-      },
-      {
-        label: "操作",
-        type: "buttons",
-        align: "center",
-        width: 160,
-        actionList: [
-          {
-            label: "编辑",
-            callback: this.editAction,
-          },
-        ],
-      },
-    ];
-  },
 };
 </script>