From 7d0e65fad42b9e196884151f9ff8690e444d6a71 Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Fri, 24 Jul 2020 17:42:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=BB=BA=E5=AE=9A=E5=90=91=E6=8E=A8?=
 =?UTF-8?q?=E9=80=81=E8=B0=83=E8=AF=95=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app-build-steps/app-build-step.vue        |   2 +-
 .../message-steps/select-service.vue          |  44 +-
 .../message-steps/select-template.vue         |  12 +-
 src/components/message-steps/select-users.vue |  90 +++-
 src/components/recommen/screen-type.vue       | 442 +++++++++++-------
 5 files changed, 403 insertions(+), 187 deletions(-)

diff --git a/src/components/app-build-steps/app-build-step.vue b/src/components/app-build-steps/app-build-step.vue
index 74e9534..5142294 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-if="isActive">
+  <div class="app_build_step" v-show="isActive">
     <slot></slot>
   </div>
 </template>
diff --git a/src/components/message-steps/select-service.vue b/src/components/message-steps/select-service.vue
index 42c01b4..61da90c 100644
--- a/src/components/message-steps/select-service.vue
+++ b/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);
diff --git a/src/components/message-steps/select-template.vue b/src/components/message-steps/select-template.vue
index c7a193a..1bbbd94 100644
--- a/src/components/message-steps/select-template.vue
+++ b/src/components/message-steps/select-template.vue
@@ -1,7 +1,7 @@
 <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;
 
diff --git a/src/components/message-steps/select-users.vue b/src/components/message-steps/select-users.vue
index cadc3cf..4f0f879 100644
--- a/src/components/message-steps/select-users.vue
+++ b/src/components/message-steps/select-users.vue
@@ -1,11 +1,19 @@
 <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">
-        <span v-text="item.label"></span>
-        <i class="el-icon-close" @click="deleteItem(item)"></i>
-      </span>
+    <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;
diff --git a/src/components/recommen/screen-type.vue b/src/components/recommen/screen-type.vue
index d19906a..cb000a7 100644
--- a/src/components/recommen/screen-type.vue
+++ b/src/components/recommen/screen-type.vue
@@ -1,209 +1,313 @@
 <template>
-    <div class="type_contain">
-        <div class="type_header">
-            <div class="openbox" @click="openflag_func">
-                <span>{{openflag?'收起':'筛选'}}</span>
-                <i v-if="!openflag" class="el-icon-caret-bottom"></i>
-                <i v-if="openflag" class="el-icon-caret-top"></i>
+  <div class="type_contain">
+    <div class="type_header">
+      <div class="openbox" @click="openflag_func">
+        <span>{{ openflag ? "收起" : "筛选" }}</span>
+        <i v-if="!openflag" class="el-icon-caret-bottom"></i>
+        <i v-if="openflag" class="el-icon-caret-top"></i>
+      </div>
+      <el-input
+        class="search"
+        placeholder="请输入内容"
+        prefix-icon="el-icon-search"
+        @input="post_value()"
+        v-model="input2"
+      >
+      </el-input>
+    </div>
+    <div class="type_select" v-show="openflag">
+      <div class="line_data" style="overflow:hidden;">
+        <div class="select_name">{{ top_data.name }}：</div>
+        <div
+          ref="select_arr_box_top"
+          class="select_arr_box"
+          :style="
+            show_selected_top ? {} : { height: '52px', overflow: 'hidden' }
+          "
+        >
+          <div ref="select_item_top" style="overflow:hidden;">
+            <div
+              class="select_item"
+              v-for="(it, idx) in top_data.arr"
+              :key="idx + 7000"
+              :style="
+                it.id === selected_top
+                  ? { color: '#515fe7', fontWeight: 600 }
+                  : {}
+              "
+              @click="set_top(it.id)"
+            >
+              {{ it.name }}
             </div>
-            <el-input
-                class="search"
-                placeholder="请输入内容"
-                prefix-icon="el-icon-search"
-                @input="post_value()"
-                v-model="input2">
-            </el-input>
+          </div>
+          <div
+            v-show="show_open_top"
+            class="select_item_open"
+            @click="set_open_top"
+          >
+            <span>{{ show_selected_top ? "收起" : "展开" }}</span>
+            <i v-if="!show_selected_top" class="el-icon-caret-bottom"></i>
+            <i v-if="show_selected_top" class="el-icon-caret-top"></i>
+          </div>
         </div>
-        <div class="type_select" v-show="openflag">
-            <div style="overflow:hidden;" class="line_data" v-for="(item,index) in data" :key="index+5000">
-                <div class="select_name">
-                    {{item.name}}：
-                </div>
-                <div :ref="'select_arr_box'+index" class="select_arr_box" :style="show_selected[index]?{}:{height:'52px',overflow:'hidden'}">
-                    <div :ref="'select_item'+index" style="overflow:hidden;">
-                        <div class="select_item" :style="selected_arr[index].length==0?{color:'#515fe7',fontWeight:600}:''" @click="set_select(0,index)">全部</div>
-                        <div class="select_item" :style="selected_arr[index].indexOf(it.id)!==-1?{color:'#515fe7',fontWeight:600}:{}" @click="set_select(1,index,it.id)" v-for="(it,idx) in item.arr" :key="idx+6000">
-                            {{it.name}} 
-                        </div>
-                    </div>
-                    <div v-show="show_open[index]" class="select_item_open" @click="set_open(index)">
-                        <span>{{show_selected[index]?'收起':'展开'}}</span>
-                        <i v-if="!show_selected[index]" class="el-icon-caret-bottom"></i>
-                        <i v-if="show_selected[index]" class="el-icon-caret-top"></i>
-                    </div>
-                </div>
+      </div>
+
+      <div
+        v-for="(item, index) in filter_list"
+        :key="index + 5000"
+        class="line_data"
+        style="overflow:hidden;"
+      >
+        <div class="select_name">{{ item.name }}：</div>
+        <div
+          :ref="'select_arr_box' + index"
+          class="select_arr_box"
+          :style="
+            show_selected[index] ? {} : { height: '52px', overflow: 'hidden' }
+          "
+        >
+          <div :ref="'select_item' + index" style="overflow:hidden;">
+            <div
+              class="select_item"
+              v-for="(it, idx) in item.arr"
+              :key="idx + 6000"
+              :style="
+                selected_arr[index].indexOf(it.id) !== -1
+                  ? { color: '#515fe7', fontWeight: 600 }
+                  : {}
+              "
+              @click="set_select(index, it.id)"
+            >
+              {{ it.name }}
             </div>
+          </div>
+          <div
+            v-show="show_open[index]"
+            class="select_item_open"
+            @click="set_open(index)"
+          >
+            <span>{{ show_selected[index] ? "收起" : "展开" }}</span>
+            <i v-if="!show_selected[index]" class="el-icon-caret-bottom"></i>
+            <i v-if="show_selected[index]" class="el-icon-caret-top"></i>
+          </div>
         </div>
-
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    props: ['data'],
-    components: {
-
+  props: {
+    top_data: {
+      type: Object,
+      default: () => null,
     },
-    data() {
-        return {
-            input2:'',
-            openflag:false,
-            selected_arr:[
-                [],
-                [],
-                [],
-            ],
-            show_selected:[
-                false,
-                false,
-                false
-            ],
-            show_open:[
-                false,
-                false,
-                false
-            ]
-        };
+    data: {
+      type: Array,
+      default: () => [],
     },
-    watch: {
-
+  },
+  components: {},
+  data() {
+    return {
+      input2: "",
+      openflag: false,
+      selected_arr: [],
+      show_selected: [],
+      show_open: [],
+      filter_list: [],
+      selected_top: "",
+      show_selected_top: false,
+      show_open_top: false,
+    };
+  },
+  watch: {
+    data: {
+      handler() {
+        this.init();
+      },
+      deep: true,
     },
-    computed: {
+  },
+  computed: {},
+  created() {
+    if (this.top_data) {
+      this.selected_top = this.top_data.arr[0].id;
+    }
+
+    this.init(true);
+  },
+  mounted() {
+    window.addEventListener("resize", this.pageResize);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.pageResize);
+  },
+  methods: {
+    init() {
+      this.selected_arr = [];
+      this.show_selected = [];
+      this.show_open = [];
+      this.filter_list = [];
 
+      this.data.forEach((item, index) => {
+        let arr = [
+          {
+            id: "",
+            name: "全部",
+          },
+          ...item.arr,
+        ];
+
+        this.selected_arr.push([arr[0].id]);
+        this.show_selected.push(false);
+        this.show_open.push(false);
+        this.filter_list.push({
+          name: item.name,
+          arr: arr,
+          key: item.key,
+        });
+      });
+    },
+    openflag_func() {
+      this.openflag = !this.openflag;
+      setTimeout(() => {
+        this.pageResize();
+      }, 100);
+      this.$emit("open_select", this.openflag);
     },
-    created() {
+    pageResize() {
+      this.$nextTick(() => {
+        if (
+          this.$refs.select_item_top &&
+          this.$refs.select_item_top.clientHeight >
+            this.$refs.select_arr_box_top.clientHeight + 2
+        ) {
+          this.show_open_top = true;
+        } else {
+          this.show_open_top = false;
+        }
 
+        this.data.forEach((item, index) => {
+          if (
+            this.$refs["select_item" + index] &&
+            this.$refs["select_item" + index][0].clientHeight >
+              this.$refs["select_arr_box" + index][0].clientHeight + 2
+          ) {
+            this.$set(this.show_open, index, true);
+          } else {
+            this.$set(this.show_open, index, false);
+          }
+        });
+      });
     },
-    mounted() {
-        window.addEventListener("resize", this.pageResize);
+    set_select(index, id) {
+      if (this.selected_arr[index].indexOf(id) == -1) {
+        this.selected_arr[index].push(id);
+      } else {
+        this.selected_arr[index].splice(
+          this.selected_arr[index].indexOf(id),
+          1
+        );
+      }
+      this.post_value();
     },
-    destroyed(){
-        window.removeEventListener("resize", this.pageResize);
+    set_open(index) {
+      this.$set(this.show_selected, index, !this.show_selected[index]);
     },
-    methods: {
-        openflag_func(){
-            this.openflag = !this.openflag;
-            setTimeout(()=>{
-                this.pageResize()
-            },100)
-            this.$emit('open_select',this.openflag)
-        },
-        pageResize(){
-            if(this.$refs.select_item0[0].clientHeight>this.$refs.select_arr_box0[0].clientHeight+2){
-                this.$set(this.show_open,0,true)
-            }else{
-                this.$set(this.show_open,0,false)
-            }
-            if(this.$refs.select_item1[0].clientHeight>this.$refs.select_arr_box1[0].clientHeight+2){
-                this.$set(this.show_open,1,true)
-            }else{
-                this.$set(this.show_open,1,false)
-            }
-            if(this.$refs.select_item2[0].clientHeight>this.$refs.select_arr_box2[0].clientHeight+2){
-                this.$set(this.show_open,2,true)
-            }else{
-                this.$set(this.show_open,2,false)
-            }
-        },
-        set_select(n,index,id){
-            if(n==0){
-                this.$set(this.selected_arr,index,[])
-            }else{
-                if(this.selected_arr[index].indexOf(id)==-1){
-                    this.selected_arr[index].push(id)
-                }else{
-                    this.selected_arr[index].splice(this.selected_arr[index].indexOf(id), 1)
-                }
-            }
-            this.post_value()
-        },
-        set_open(index){
-            this.$set(this.show_selected,index,!this.show_selected[index])
-        },
-        post_value(){
-            var temp = {
-                word:this.input2,
-            }
-            this.data.forEach((e,idx) => {
-                temp[e.key] = this.selected_arr[idx]
-            });
-            this.$emit('getselect',temp)
-        }
+    set_open_top(index) {
+      this.show_selected_top = !this.show_selected_top;
+    },
+    set_top(id) {
+      this.selected_top = id;
+      this.$emit("topselect", this.selected_top);
+    },
+    post_value() {
+      var temp = {
+        word: this.input2,
+      };
+      this.data.forEach((e, idx) => {
+        temp[e.key] = this.selected_arr[idx];
+      });
+      this.$emit("getselect", temp);
     },
+  },
 };
 </script>
 
 <style>
-.type_header .el-input__inner{
-    width: 240px;
-    background-color: #f7f8f9;
+.type_header .el-input__inner {
+  width: 240px;
+  background-color: #f7f8f9;
 }
-.type_header .el-input{
-    width: 240px;
+.type_header .el-input {
+  width: 240px;
 }
 </style>
 <style scoped>
-.type_contain{
-    width: 100%;
-    padding: 20px;
-    border-bottom: 1px solid #e9ecf3;
+.type_contain {
+  width: 100%;
+  padding: 20px;
+  border-bottom: 1px solid #e9ecf3;
 }
-.type_header{
-    width: 100%;
-    overflow: hidden;
+.type_header {
+  width: 100%;
+  overflow: hidden;
 }
-.openbox{
-    width: 105px;
-	height: 40px;
-    line-height: 40px;
-    text-align: center;
-	background-color: #f7f8f9;
-	border-radius: 8px;
-	border: solid 1px #e3e5ef;
-    float: left;
-    color: #58617a;
-    font-size: 14px;
-    cursor: pointer;
+.openbox {
+  width: 105px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  background-color: #f7f8f9;
+  border-radius: 8px;
+  border: solid 1px #e3e5ef;
+  float: left;
+  color: #58617a;
+  font-size: 14px;
+  cursor: pointer;
 }
-.search{
-    float: right;
+.search {
+  float: right;
 }
-.select_name{
-    width: 100px;
-    text-align: right;
-    font-size: 14px;
-    color: #8890a7;
-    height: 52px;
-    line-height: 52px;
-    float: left;
+.select_name {
+  width: 100px;
+  text-align: right;
+  font-size: 14px;
+  color: #8890a7;
+  height: 52px;
+  line-height: 52px;
+  float: left;
 }
-.select_arr_box{
-    width: calc(100% - 100px);
-    float: left;
-    border-bottom: 1px solid #e9ecf3;
-    overflow: hidden;
-    padding-left: 20px;
-    padding-right: 50px;
-    position: relative;
+.select_arr_box {
+  width: calc(100% - 100px);
+  float: left;
+  border-bottom: 1px solid #e9ecf3;
+  overflow: hidden;
+  padding-left: 20px;
+  padding-right: 50px;
+  position: relative;
 }
 .type_select {
-    margin-top: 20px;
+  margin-top: 20px;
 }
-.type_select .line_data:nth-last-of-type(1) .select_arr_box{
-    border-bottom:0;
+.type_select .line_data:nth-last-of-type(1) .select_arr_box {
+  border-bottom: 0;
 }
-.select_item,.select_item_open{
-    height: 52px;
-    line-height: 52px;
-    margin-right: 40px;
-    float: left;
-    color: #58617a;
-    cursor: pointer;
+.select_item,
+.select_item_open {
+  height: 52px;
+  line-height: 52px;
+  margin-right: 40px;
+  float: left;
+  color: #58617a;
+  cursor: pointer;
 }
-.select_arr_box .select_item_open{
-    position: absolute;
-    right:0;
-    margin-right: 10px;
-    top:0;
+.select_arr_box .select_item_open {
+  position: absolute;
+  right: 0;
+  margin-right: 10px;
+  top: 0;
 }
 </style>
-- 
2.26.0