diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index 933d210164b2be09157c7e6c456207251e822aea..08b041d6018c6f8b79fe948eefa8ab2a7a96a2bb 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -725,4 +725,45 @@ width: 620px!important;
 .apaas_steps .apaas_step .apaas_step_action .el-button + .el-button {
   margin-left: 20px;
 }
+.top_fliter {
+  display: flex;
+}
+.top_fliter .filter_list {
+  flex-grow: 1;
+  min-width: 550px;
+}
+.filter_list > .filter_item {
+  display: inline-block;
+  vertical-align: middle;
+  margin-top: 15px;
+}
+.filter_list > .filter_item {
+  margin-right: 15px;
+}
+.filter_list > .filter_item > .filter_title {
+  display: inline-block;
+  vertical-align: middle;
+  width: 8em;
+  text-align: right;
+  font-size: 14px;
+  font-weight: 700;
+  color: #242c43;
+  margin-right: 10px;
+  white-space: nowrap;
+}
+.filter_list > .filter_item > .filter_title + * {
+  width: 300px;
+}
+.top_fliter .filter_action {
+  flex-shrink: 0;
+  margin-left: 25px;
+  text-align: right;
+}
+.filter_action > .el-button {
+  min-width: 90px;
+  margin-top: 15px;
+}
+.filter_action > .el-button + .el-button {
+  margin-left: 10px;
+}
 /* 详情页公共样式 by xuyiming ~~~end */
\ No newline at end of file
diff --git a/src/components/apass-list.vue b/src/components/apass-list.vue
index 69108749b3af3668e95bb6e8ad2d28aaa7c55338..50e405f139c1068f524bb6e5702df772fe25f960 100644
--- a/src/components/apass-list.vue
+++ b/src/components/apass-list.vue
@@ -281,46 +281,3 @@ export default {
   margin-bottom: 20px;
 }
 </style>
-
-<style>
-.top_fliter {
-  display: flex;
-}
-.top_fliter .filter_list {
-  flex-grow: 1;
-}
-.filter_list > .filter_item {
-  display: inline-block;
-  vertical-align: middle;
-  margin-top: 15px;
-}
-.filter_list > .filter_item {
-  margin-right: 15px;
-}
-.filter_list > .filter_item > .filter_title {
-  display: inline-block;
-  vertical-align: middle;
-  width: 8em;
-  text-align: right;
-  font-size: 14px;
-  font-weight: 700;
-  color: #242c43;
-  margin-right: 10px;
-  white-space: nowrap;
-}
-.filter_list > .filter_item > .filter_title + * {
-  width: 300px;
-}
-.top_fliter .filter_action {
-  flex-shrink: 0;
-  margin-left: 25px;
-  text-align: right;
-}
-.filter_action > .el-button {
-  min-width: 90px;
-  margin-top: 15px;
-}
-.filter_action > .el-button + .el-button {
-  margin-left: 10px;
-}
-</style>
diff --git a/src/components/apass-table.vue b/src/components/apass-table.vue
index 2996fa945141411aed6a08c000ccb50d67e6ea80..0ea06d12e70be858b06a42bd641f0900c5d76c7a 100644
--- a/src/components/apass-table.vue
+++ b/src/components/apass-table.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="apass_table">
-    <el-table :data="data" @sort-change="sortChange">
+    <el-table :data="data" @sort-change="sortChange" @row-click="rowClick">
       <el-table-column
         v-if="paddingLeft > 10"
         :width="paddingLeft - 10"
@@ -29,7 +29,7 @@
                 class="btn"
                 :class="v.class || ''"
                 :key="'btn_' + index + '_' + i"
-                @click="v.callback && v.callback(scope.row)"
+                @click.stop="v.callback && v.callback(scope.row)"
                 v-text="v.getLabel ? v.getLabel(scope.row) : v.label"
               >
               </a>
@@ -45,7 +45,7 @@
             <a
               class="btn"
               v-text="scope.row[item.prop]"
-              @click="item.callback && item.callback(scope.row)"
+              @click.stop="item.callback && item.callback(scope.row)"
             ></a>
           </div>
           <div v-else-if="item.type === 'icon'">
@@ -89,7 +89,7 @@
                 tag_flag_arr[scope.$index] == 0 &&
                   scope.row[item.prop].length > 2
               "
-              @click="change_tag(scope.$index, 1)"
+              @click.stop="change_tag(scope.$index, 1)"
             ></div>
             <div
               class="tagclo btn_up"
@@ -97,7 +97,7 @@
                 tag_flag_arr[scope.$index] == 1 &&
                   scope.row[item.prop].length > 2
               "
-              @click="change_tag(scope.$index, 0)"
+              @click.stop="change_tag(scope.$index, 0)"
             ></div>
           </div>
           <div v-else-if="item.type === 'chart'" class="charts">
@@ -174,6 +174,15 @@
               <img v-else :src="require('../assets/imgs/icon_down.png')" />
             </span>
           </span>
+          <span
+            v-else-if="item.type === 'selected-icon'"
+            class="selected_icon"
+            :class="{
+              selected: scope.row[item.prop],
+            }"
+          >
+            <span></span>
+          </span>
           <span
             v-else
             v-text="
@@ -241,6 +250,9 @@ export default {
     sortChange(value) {
       this.$emit("sort-change", value);
     },
+    rowClick(value) {
+      this.$emit("row-click", value);
+    },
     getPercent(num) {
       return Math.round(num * 100) + "%";
     },
@@ -334,4 +346,25 @@ export default {
   justify-content: center;
   align-items: center;
 }
+.selected_icon {
+  display: inline-block;
+  vertical-align: middle;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #e3e5ef;
+  padding: 2px;
+  box-sizing: border-box;
+  background-color: #fff;
+  border-radius: 50%;
+}
+.selected_icon > span {
+  display: none;
+  width: 100%;
+  height: 100%;
+  background-color: #e56600;
+  border-radius: 50%;
+}
+.selected_icon.selected > span {
+  display: block;
+}
 </style>
diff --git a/src/components/app-build-steps/app-build-step.vue b/src/components/app-build-steps/app-build-step.vue
index 51422948d78d09353e79c38505a5f577d93b3a11..74e9534cc0ba5d1cd73309d6adb4afda237121ed 100644
--- a/src/components/app-build-steps/app-build-step.vue
+++ b/src/components/app-build-steps/app-build-step.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app_build_step" v-show="isActive">
+  <div class="app_build_step" v-if="isActive">
     <slot></slot>
   </div>
 </template>
diff --git a/src/components/message-steps/select-service.vue b/src/components/message-steps/select-service.vue
index 5e669df622ae1f76f72ca8c36ff8463072bf4a1f..1168ab254f9c9c4a123cc81b628af229fe929a84 100644
--- a/src/components/message-steps/select-service.vue
+++ b/src/components/message-steps/select-service.vue
@@ -137,6 +137,9 @@ export default {
   justify-content: flex-start;
   align-items: stretch;
 }
+.service_fliter {
+  padding: 15px 0;
+}
 .service_list {
   flex-grow: 1;
   margin-top: 19px;
diff --git a/src/components/message-steps/select-template.vue b/src/components/message-steps/select-template.vue
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..e7deb85abb309b8582d19a2d6b533a7f6de1a288 100644
--- a/src/components/message-steps/select-template.vue
+++ b/src/components/message-steps/select-template.vue
@@ -0,0 +1,270 @@
+<template>
+  <div class="select_template">
+    <div class="top_fliter template_fliter">
+      <show-more-filter class="filter_list">
+        <div class="filter_item">
+          <span class="filter_title">消息模板搜索：</span>
+          <el-input
+            v-model="keyword"
+            placeholder="请输入消息模板名称/id"
+          ></el-input>
+        </div>
+        <div class="filter_item">
+          <span class="filter_title">最后更新时间：</span>
+          <el-date-picker
+            v-model="updateTime"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+          >
+          </el-date-picker>
+        </div>
+      </show-more-filter>
+      <div class="filter_action apaas_button">
+        <el-button type="primary" @click="topFilterAction">
+          查询
+        </el-button>
+        <el-button type="defalut" @click="topFilterClear">
+          重置
+        </el-button>
+      </div>
+    </div>
+
+    <div class="template_list apaas_scroll">
+      <list-table
+        class="selected_table"
+        :header="listHeader"
+        :data="listData"
+        :padding-left="0"
+        @row-click="selectTemplate"
+      ></list-table>
+
+      <list-pagination
+        :total="listTotal"
+        :page-sizes="pageSizes"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        @size-change="changePageSize"
+        @current-change="changeCurrentPage"
+        style="margin-top: 20px;"
+      ></list-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import helper from "@/services/helper.js";
+import listTable from "@/components/apass-table";
+import ListPagination from "@/components/comments-pagination";
+import showMoreFilter from "@/components/show-more-filter";
+
+export default {
+  components: {
+    listTable,
+    ListPagination,
+    showMoreFilter,
+  },
+  data() {
+    return {
+      selected: null,
+      listHeader: [],
+      listData: [],
+      listTotal: 0,
+      pageSizes: [10, 20, 50],
+      pageSize: 10,
+      currentPage: 1,
+      keyword: "",
+      updateTime: "",
+      types: [
+        {
+          name: "全部",
+          value: "",
+        },
+        {
+          name: "服务推送",
+          value: 1,
+        },
+        {
+          name: "平台维护",
+          value: 2,
+        },
+        {
+          name: "版本更新",
+          value: 3,
+        },
+        {
+          name: "自动消息",
+          value: 4,
+        },
+      ],
+    };
+  },
+  created() {
+    let _self = this;
+
+    _self.listHeader = [
+      {
+        label: "",
+        type: "selected-icon",
+        prop: "selected",
+        align: "center",
+        width: 60,
+      },
+      {
+        label: "模板ID",
+        prop: "id",
+        width: 240,
+      },
+      {
+        label: "消息模板名称",
+        prop: "name",
+        type: "button",
+        callback: _self.detailAction,
+        width: 240,
+      },
+      {
+        label: "模板类型",
+        prop: "tpl_type",
+        getText(item) {
+          let types = [..._self.types];
+
+          types[0] = {
+            name: "-",
+            value: "",
+          };
+
+          return types[item.tpl_type || 0].name;
+        },
+        width: 160,
+        align: "center",
+      },
+      {
+        label: "模板详情",
+        prop: "content",
+      },
+      {
+        label: "最后更新时间",
+        prop: "update_time",
+        getText(item) {
+          let date = item.update_time || "";
+          return helper.dateStringTransform(date);
+        },
+        align: "center",
+        width: 180,
+      },
+    ];
+
+    this.getTemplateList();
+  },
+  methods: {
+    getTemplateList() {
+      let params = {
+        page: this.currentPage,
+        size: this.pageSize,
+        keyword: this.keyword,
+        update_time_s: (this.updateTime && this.updateTime[0]) || "",
+        update_time_e: (this.updateTime && this.updateTime[1]) || "",
+      };
+
+      this.$http
+        .get("/apaas/service/v3/msg/manage/tpl/list", { params })
+        .then(({ data }) => {
+          if (data.success == 1) {
+            let listData = (data.data && data.data.list) || [];
+
+            listData.forEach((item) => {
+              item.selected =
+                (this.selected && this.selected.id === item.id) || false;
+            });
+
+            this.listTotal = (data.data && data.data.total) || 0;
+            this.listData = listData;
+          } else {
+            this.$message({
+              message: data.errMsg || "获取消息模板列表失败",
+              type: "warning",
+            });
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+
+          this.$message({
+            message: "获取消息模板列表失败",
+            type: "warning",
+          });
+        });
+    },
+    changePageSize(value) {
+      this.pageSize = value;
+      this.currentPage = 1;
+
+      this.getTemplateList();
+    },
+    changeCurrentPage(value) {
+      this.currentPage = value;
+
+      this.getTemplateList();
+    },
+    topFilterAction() {
+      this.getTemplateList();
+    },
+    topFilterClear() {
+      this.keyword = "";
+      this.updateTime = "";
+
+      this.getTemplateList();
+    },
+    detailAction(item) {
+      console.log(item);
+    },
+    selectTemplate(item) {
+      this.listData.forEach((v) => {
+        if (v.id === item.id) {
+          if (this.selected && this.selected.id === v.id) {
+            this.$set(v, "selected", false);
+            this.selected = null;
+          } else {
+            this.$set(v, "selected", true);
+            this.selected = v;
+          }
+        } else {
+          this.$set(v, "selected", false);
+        }
+      });
+
+      this.$emit("change", this.selected);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.select_template {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+.template_fliter {
+  padding: 0 0 14px;
+  border-bottom: 1px solid #e9ecf3;
+}
+.template_list {
+  flex-grow: 1;
+  margin-top: 19px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.selected_table {
+  min-height: calc(100% - 60px);
+}
+</style>
+
+<style>
+.selected_table .el-table__body-wrapper .el-table__row {
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/message-steps/select-users.vue b/src/components/message-steps/select-users.vue
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..eb4530216a30d8dbbea39a9e06073ca38c17670b 100644
--- a/src/components/message-steps/select-users.vue
+++ b/src/components/message-steps/select-users.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    xxxx
+  </div>
+</template>
diff --git a/src/components/show-more-filter.vue b/src/components/show-more-filter.vue
index b7f4a31d510f5ae695bafb3da98f2eab0557bb7d..94de77710ea103f486fc4c556e48dd5b8f0c634b 100644
--- a/src/components/show-more-filter.vue
+++ b/src/components/show-more-filter.vue
@@ -61,7 +61,6 @@ export default {
               this.btnLeft = totalWidth - filterWidth + 5 + "px";
               wrapFlag = true;
             }
-            console.log(totalWidth, containerWidth, this.btnLeft);
 
             filter.style.display = this.showMore ? "inline-block" : "none";
           } else {
diff --git a/src/pages/message-management/directed-push/directed-push-add.vue b/src/pages/message-management/directed-push/directed-push-add.vue
index 395ec81b328f47213b9563b117ac5db634ce371b..844aac7c004e258f2193f29d29e04ec49afec95c 100644
--- a/src/pages/message-management/directed-push/directed-push-add.vue
+++ b/src/pages/message-management/directed-push/directed-push-add.vue
@@ -49,9 +49,11 @@
           :active-icon="require('@/assets/imgs/progress_ic_xiaoximb.png')"
           class="apaas_step"
         >
-          <div class="apaas_step_content apaas_scroll">
-            <p style="padding: 50px;text-align: center;">选择消息模板</p>
-          </div>
+          <select-template
+            class="apaas_step_content"
+            @change="selectTemplate"
+          ></select-template>
+
           <div class="apaas_button apaas_step_action">
             <el-button type="defalut" @click="backToList">
               取消
@@ -72,9 +74,11 @@
           :active-icon="require('@/assets/imgs/progress_ic_renyuan.png')"
           class="apaas_step"
         >
-          <div class="apaas_step_content apaas_scroll">
-            <p style="padding: 50px;text-align: center;">选择目标用户</p>
-          </div>
+          <select-users
+            class="apaas_step_content"
+            @change="selectTargetUser"
+          ></select-users>
+
           <div class="apaas_button apaas_step_action">
             <el-button type="defalut" @click="backToList">
               取消
@@ -119,23 +123,59 @@ export default {
     return {
       step: 0,
       done: false,
+      serviceIds: "",
+      templateId: "",
+      targetUserIds: "",
     };
   },
   created() {},
   methods: {
     selectService(values) {
-      console.log(values.map((item) => item.id).join(","));
+      this.serviceIds = values.map((item) => item.id).join(",");
+    },
+    selectTemplate(value) {
+      this.templateId = (value && value.id) || "";
+    },
+    selectTargetUser(values) {
+      this.targetUserIds = values.map((item) => item.user_id).join(",");;
     },
     backToList() {
       this.$router.push("/message/directed_push");
     },
     step1Action() {
+      if (this.serviceIds === "") {
+        this.$message({
+          message: "您尚未选择要推送的服务",
+          type: "warning",
+        });
+
+        return;
+      }
+
       this.step = 1;
     },
     step2Action() {
+      if (this.templateId === "") {
+        this.$message({
+          message: "您尚未选择消息模板",
+          type: "warning",
+        });
+
+        return;
+      }
+
       this.step = 2;
     },
     step3Action() {
+      if (this.targetUserIds === "") {
+        this.$message({
+          message: "您尚未选择目标用户",
+          type: "warning",
+        });
+
+        return;
+      }
+
       this.done = true;
     },
   },