新建定向推送调试完成

src/components/app-build-steps/app-build-step.vue

 <template>
-  <div class="app_build_step" v-if="isActive">
+  <div class="app_build_step" v-show="isActive">
     <slot></slot>
   </div>
 </template>

src/components/message-steps/select-service.vue

@@ -3,6 +3,8 @@
     <screen-type
       class="service_fliter"
       :data="filterList"
+      :top_data="serviceTypes"
+      @topselect="changeType"
       @getselect="getFilters"
     ></screen-type>
     <div class="service_list apaas_scroll">
@@ -29,6 +31,23 @@ export default {
   },
   data() {
     return {
+      serviceTypes: {
+        name: "服务分类",
+        arr: [
+          {
+            id: 5,
+            name: "数据服务",
+          },
+          {
+            id: 6,
+            name: "时空服务",
+          },
+          {
+            id: 21,
+            name: "综合应用服务",
+          },
+        ],
+      },
       serviceType: 5, // 5：数据服务，6：时空服务，21：综合应用服务
       filterList: [],
       serviceList: [],
@@ -63,8 +82,6 @@ export default {
         organizations: organizations[serviceType],
       };
 
-      this.filterList = [];
-
       this.$http
         .get("/apaas/serviceapp/v3/servicemarket/profileInfo", {
           params: {
@@ -72,6 +89,8 @@ export default {
           },
         })
         .then(({ data }) => {
+          this.filterList = [];
+
           if (data.success == 1) {
             let filters = data.data;
 
@@ -89,14 +108,6 @@ export default {
           }
         });
     },
-    getFilters(filters) {
-      this.getServiceList({
-        serviceName: filters.word,
-        serviceType2s: filters.serviceTypeInfo.join(),
-        dataDomains: filters.serviceDomain.join(),
-        organizeIds: filters.organizations.join(),
-      });
-    },
     getServiceList(params = {}) {
       this.$http
         .get("/apaas/serviceapp/v3/servicemarket/list", {
@@ -111,6 +122,19 @@ export default {
           }
         });
     },
+    changeType(typeId) {
+      this.serviceType = typeId;
+      this.getFilterList();
+      this.getServiceList();
+    },
+    getFilters(filters) {
+      this.getServiceList({
+        serviceName: filters.word,
+        serviceType2s: filters.serviceTypeInfo.join(),
+        dataDomains: filters.serviceDomain.join(),
+        organizeIds: filters.organizations.join(),
+      });
+    },
     changeValue(item) {
       if (item.check) {
         this.selected.push(item.data);

src/components/message-steps/select-template.vue

 <template>
   <div class="select_template">
     <div class="top_fliter template_fliter">
-      <show-more-filter class="filter_list">
+      <show-more-filter class="filter_list" ref="filters">
         <div class="filter_item">
           <span class="filter_title">消息模板搜索：</span>
           <el-input
@@ -162,6 +162,16 @@ export default {
       },
     };
   },
+  computed: {
+    parentIsActive() {
+      return this.$parent.isActive;
+    },
+  },
+  watch: {
+    parentIsActive() {
+      this.$refs.filters.resize();
+    },
+  },
   created() {
     let _self = this;
 

src/components/message-steps/select-users.vue

 <template>
   <div class="selected_user">
     <p class="selected_title">目标用户：</p>
-    <div class="selected_list">
-      <span class="selected_item" v-for="item in selectedList" :key="item.id">
+    <div class="selected_list" ref="selectedList">
+      <template v-for="(item, index) in selectedList">
+        <span
+          class="selected_more"
+          v-if="index + 1 === selectedList.length && showSelectedMore"
+          :key="'last_' + index"
+          >...</span
+        >
+        <span class="selected_item" :key="item.id">
           <span v-text="item.label"></span>
           <i class="el-icon-close" @click="deleteItem(item)"></i>
         </span>
+      </template>
     </div>
     <div class="user_list apass_checkbox">
       <el-input
@@ -41,11 +49,19 @@ export default {
         label: "label",
       },
       selectedList: [],
+      showSelectedMore: false,
     };
   },
   created() {
     this.getTargetUserList();
   },
+  mounted() {
+    this.selectedListResize();
+    window.addEventListener("resize", this.selectedListResize);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.selectedListResize);
+  },
   methods: {
     getTargetUserList() {
       this.$http
@@ -152,10 +168,59 @@ export default {
         }
       });
 
+      this.selectedListResize();
+
       // console.log(users);
 
       this.$emit("change", users);
     },
+    selectedListResize() {
+      this.$nextTick(() => {
+        let container = this.$refs.selectedList;
+        let containerWidth = container.getBoundingClientRect().width - 10;
+        let items = container.querySelectorAll(".selected_item");
+        let itemsLength = items.length;
+        let itemsWidth = [];
+        let totalWidth = 0;
+
+        if (items.length < 1) {
+          return;
+        }
+
+        this.showSelectedMore = false;
+
+        for (let i = 0; i < itemsLength; i++) {
+          let item = items[i];
+          let itemWidth = 0;
+
+          item.style.display = "inline-block";
+
+          itemWidth = Math.ceil(item.getBoundingClientRect().width) + 10;
+
+          itemsWidth.push(itemWidth);
+
+          totalWidth += itemWidth;
+
+          if (totalWidth > containerWidth) {
+            this.showSelectedMore = true;
+          }
+        }
+
+        if (this.showSelectedMore) {
+          let showItemWidth = itemsWidth[itemsLength - 1] + 30; // 最后一个元素的宽度 + 省略号的宽度
+
+          for (let i = 0; i < itemsLength - 1; i++) {
+            let item = items[i];
+
+            showItemWidth += itemsWidth[i];
+
+            if (showItemWidth > containerWidth) {
+              item.style.display = "none";
+            }
+          }
+        }
+      });
+    },
   },
 };
 </script>
@@ -178,13 +243,14 @@ export default {
 }
 .selected_list {
   flex-shrink: 0;
-  min-height: 44px;
+  height: 44px;
   padding: 4px;
   border: 1px solid #e3e5ef;
   box-sizing: border-box;
   border-radius: 7px;
   overflow: hidden;
   margin-top: 10px;
+  font-size: 0;
 }
 .selected_list .selected_item {
   display: inline-block;
@@ -193,10 +259,22 @@ export default {
   border-radius: 3px;
   overflow: hidden;
   padding: 0 5px;
+  box-sizing: border-box;
+  min-width: 20px;
+  margin: 5px;
+  font-size: 12px;
+  line-height: 24px;
+  color: #0f2683;
+}
+.selected_more {
+  display: inline-block;
+  vertical-align: middle;
+  width: 20px;
   margin: 5px;
   font-size: 12px;
   line-height: 24px;
   color: #0f2683;
+  text-align: center;
 }
 .selected_list .selected_item > i {
   cursor: pointer;