Commit 96e9cb7c authored by 徐一鸣's avatar 徐一鸣

Merge branch 'xym' into dev

parents 44b17b54 7d0e65fa
...@@ -742,6 +742,7 @@ width: 620px!important; ...@@ -742,6 +742,7 @@ width: 620px!important;
.top_fliter .filter_list { .top_fliter .filter_list {
flex-grow: 1; flex-grow: 1;
min-width: 550px; min-width: 550px;
font-size: 0;
} }
.filter_list > .filter_item { .filter_list > .filter_item {
display: inline-block; display: inline-block;
...@@ -751,9 +752,11 @@ width: 620px!important; ...@@ -751,9 +752,11 @@ width: 620px!important;
.filter_list > .filter_item { .filter_list > .filter_item {
margin-right: 15px; margin-right: 15px;
} }
.filter_list > .filter_item > .filter_title { .filter_list > .filter_item > * {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
}
.filter_list > .filter_item > .filter_title {
width: 8em; width: 8em;
text-align: right; text-align: right;
font-size: 14px; font-size: 14px;
......
<template> <template>
<div class="app_build_step" v-if="isActive"> <div class="app_build_step" v-show="isActive">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
......
...@@ -3,6 +3,8 @@ ...@@ -3,6 +3,8 @@
<screen-type <screen-type
class="service_fliter" class="service_fliter"
:data="filterList" :data="filterList"
:top_data="serviceTypes"
@topselect="changeType"
@getselect="getFilters" @getselect="getFilters"
></screen-type> ></screen-type>
<div class="service_list apaas_scroll"> <div class="service_list apaas_scroll">
...@@ -29,6 +31,23 @@ export default { ...@@ -29,6 +31,23 @@ export default {
}, },
data() { data() {
return { return {
serviceTypes: {
name: "服务分类",
arr: [
{
id: 5,
name: "数据服务",
},
{
id: 6,
name: "时空服务",
},
{
id: 21,
name: "综合应用服务",
},
],
},
serviceType: 5, // 5:数据服务,6:时空服务,21:综合应用服务 serviceType: 5, // 5:数据服务,6:时空服务,21:综合应用服务
filterList: [], filterList: [],
serviceList: [], serviceList: [],
...@@ -63,8 +82,6 @@ export default { ...@@ -63,8 +82,6 @@ export default {
organizations: organizations[serviceType], organizations: organizations[serviceType],
}; };
this.filterList = [];
this.$http this.$http
.get("/apaas/serviceapp/v3/servicemarket/profileInfo", { .get("/apaas/serviceapp/v3/servicemarket/profileInfo", {
params: { params: {
...@@ -72,6 +89,8 @@ export default { ...@@ -72,6 +89,8 @@ export default {
}, },
}) })
.then(({ data }) => { .then(({ data }) => {
this.filterList = [];
if (data.success == 1) { if (data.success == 1) {
let filters = data.data; let filters = data.data;
...@@ -89,14 +108,6 @@ export default { ...@@ -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 = {}) { getServiceList(params = {}) {
this.$http this.$http
.get("/apaas/serviceapp/v3/servicemarket/list", { .get("/apaas/serviceapp/v3/servicemarket/list", {
...@@ -111,6 +122,19 @@ export default { ...@@ -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) { changeValue(item) {
if (item.check) { if (item.check) {
this.selected.push(item.data); this.selected.push(item.data);
......
<template> <template>
<div class="select_template"> <div class="select_template">
<div class="top_fliter template_fliter"> <div class="top_fliter template_fliter">
<show-more-filter class="filter_list"> <show-more-filter class="filter_list" ref="filters">
<div class="filter_item"> <div class="filter_item">
<span class="filter_title">消息模板搜索:</span> <span class="filter_title">消息模板搜索:</span>
<el-input <el-input
...@@ -162,6 +162,16 @@ export default { ...@@ -162,6 +162,16 @@ export default {
}, },
}; };
}, },
computed: {
parentIsActive() {
return this.$parent.isActive;
},
},
watch: {
parentIsActive() {
this.$refs.filters.resize();
},
},
created() { created() {
let _self = this; let _self = this;
......
<template> <template>
<div class="selected_user"> <div class="selected_user">
<p class="selected_title">目标用户:</p> <p class="selected_title">目标用户:</p>
<div class="selected_list"> <div class="selected_list" ref="selectedList">
<span class="selected_item" v-for="item in selectedList" :key="item.id"> <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> <span v-text="item.label"></span>
<i class="el-icon-close" @click="deleteItem(item)"></i> <i class="el-icon-close" @click="deleteItem(item)"></i>
</span> </span>
</template>
</div> </div>
<div class="user_list apass_checkbox"> <div class="user_list apass_checkbox">
<el-input <el-input
...@@ -41,11 +49,19 @@ export default { ...@@ -41,11 +49,19 @@ export default {
label: "label", label: "label",
}, },
selectedList: [], selectedList: [],
showSelectedMore: false,
}; };
}, },
created() { created() {
this.getTargetUserList(); this.getTargetUserList();
}, },
mounted() {
this.selectedListResize();
window.addEventListener("resize", this.selectedListResize);
},
destroyed() {
window.removeEventListener("resize", this.selectedListResize);
},
methods: { methods: {
getTargetUserList() { getTargetUserList() {
this.$http this.$http
...@@ -152,10 +168,59 @@ export default { ...@@ -152,10 +168,59 @@ export default {
} }
}); });
this.selectedListResize();
// console.log(users); // console.log(users);
this.$emit("change", 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> </script>
...@@ -178,13 +243,14 @@ export default { ...@@ -178,13 +243,14 @@ export default {
} }
.selected_list { .selected_list {
flex-shrink: 0; flex-shrink: 0;
min-height: 44px; height: 44px;
padding: 4px; padding: 4px;
border: 1px solid #e3e5ef; border: 1px solid #e3e5ef;
box-sizing: border-box; box-sizing: border-box;
border-radius: 7px; border-radius: 7px;
overflow: hidden; overflow: hidden;
margin-top: 10px; margin-top: 10px;
font-size: 0;
} }
.selected_list .selected_item { .selected_list .selected_item {
display: inline-block; display: inline-block;
...@@ -193,10 +259,22 @@ export default { ...@@ -193,10 +259,22 @@ export default {
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
padding: 0 5px; 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; margin: 5px;
font-size: 12px; font-size: 12px;
line-height: 24px; line-height: 24px;
color: #0f2683; color: #0f2683;
text-align: center;
} }
.selected_list .selected_item > i { .selected_list .selected_item > i {
cursor: pointer; cursor: pointer;
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="type_contain"> <div class="type_contain">
<div class="type_header"> <div class="type_header">
<div class="openbox" @click="openflag_func"> <div class="openbox" @click="openflag_func">
<span>{{openflag?'收起':'筛选'}}</span> <span>{{ openflag ? "收起" : "筛选" }}</span>
<i v-if="!openflag" class="el-icon-caret-bottom"></i> <i v-if="!openflag" class="el-icon-caret-bottom"></i>
<i v-if="openflag" class="el-icon-caret-top"></i> <i v-if="openflag" class="el-icon-caret-top"></i>
</div> </div>
...@@ -11,148 +11,251 @@ ...@@ -11,148 +11,251 @@
placeholder="请输入内容" placeholder="请输入内容"
prefix-icon="el-icon-search" prefix-icon="el-icon-search"
@input="post_value()" @input="post_value()"
v-model="input2"> v-model="input2"
>
</el-input> </el-input>
</div> </div>
<div class="type_select" v-show="openflag"> <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="line_data" style="overflow:hidden;">
<div class="select_name"> <div class="select_name">{{ top_data.name }}</div>
{{item.name}} <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> </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_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 v-show="show_open[index]" class="select_item_open" @click="set_open(index)"> </div>
<span>{{show_selected[index]?'收起':'展开'}}</span> </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-bottom"></i>
<i v-if="show_selected[index]" class="el-icon-caret-top"></i> <i v-if="show_selected[index]" class="el-icon-caret-top"></i>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: ['data'], props: {
components: { top_data: {
type: Object,
default: () => null,
},
data: {
type: Array,
default: () => [],
}, },
},
components: {},
data() { data() {
return { return {
input2:'', input2: "",
openflag:false, openflag: false,
selected_arr:[ selected_arr: [],
[], show_selected: [],
[], show_open: [],
[], filter_list: [],
], selected_top: "",
show_selected:[ show_selected_top: false,
false, show_open_top: false,
false,
false
],
show_open:[
false,
false,
false
]
}; };
}, },
watch: { watch: {
data: {
handler() {
this.init();
},
deep: true,
}, },
computed: {
}, },
computed: {},
created() { created() {
if (this.top_data) {
this.selected_top = this.top_data.arr[0].id;
}
this.init(true);
}, },
mounted() { mounted() {
window.addEventListener("resize", this.pageResize); window.addEventListener("resize", this.pageResize);
}, },
destroyed(){ destroyed() {
window.removeEventListener("resize", this.pageResize); window.removeEventListener("resize", this.pageResize);
}, },
methods: { methods: {
openflag_func(){ 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; this.openflag = !this.openflag;
setTimeout(()=>{ setTimeout(() => {
this.pageResize() this.pageResize();
},100) }, 100);
this.$emit('open_select',this.openflag) this.$emit("open_select", this.openflag);
}, },
pageResize(){ pageResize() {
if(this.$refs.select_item0[0].clientHeight>this.$refs.select_arr_box0[0].clientHeight+2){ this.$nextTick(() => {
this.$set(this.show_open,0,true) if (
}else{ this.$refs.select_item_top &&
this.$set(this.show_open,0,false) this.$refs.select_item_top.clientHeight >
} this.$refs.select_arr_box_top.clientHeight + 2
if(this.$refs.select_item1[0].clientHeight>this.$refs.select_arr_box1[0].clientHeight+2){ ) {
this.$set(this.show_open,1,true) this.show_open_top = true;
}else{ } else {
this.$set(this.show_open,1,false) this.show_open_top = false;
} }
if(this.$refs.select_item2[0].clientHeight>this.$refs.select_arr_box2[0].clientHeight+2){
this.$set(this.show_open,2,true) this.data.forEach((item, index) => {
}else{ if (
this.$set(this.show_open,2,false) 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);
} }
});
});
}, },
set_select(n,index,id){ set_select(index, id) {
if(n==0){ if (this.selected_arr[index].indexOf(id) == -1) {
this.$set(this.selected_arr,index,[]) this.selected_arr[index].push(id);
}else{ } else {
if(this.selected_arr[index].indexOf(id)==-1){ this.selected_arr[index].splice(
this.selected_arr[index].push(id) this.selected_arr[index].indexOf(id),
}else{ 1
this.selected_arr[index].splice(this.selected_arr[index].indexOf(id), 1) );
} }
} this.post_value();
this.post_value() },
set_open(index) {
this.$set(this.show_selected, index, !this.show_selected[index]);
}, },
set_open(index){ set_open_top(index) {
this.$set(this.show_selected,index,!this.show_selected[index]) this.show_selected_top = !this.show_selected_top;
}, },
post_value(){ set_top(id) {
this.selected_top = id;
this.$emit("topselect", this.selected_top);
},
post_value() {
var temp = { var temp = {
word:this.input2, word: this.input2,
} };
this.data.forEach((e,idx) => { this.data.forEach((e, idx) => {
temp[e.key] = this.selected_arr[idx] temp[e.key] = this.selected_arr[idx];
}); });
this.$emit('getselect',temp) this.$emit("getselect", temp);
} },
}, },
}; };
</script> </script>
<style> <style>
.type_header .el-input__inner{ .type_header .el-input__inner {
width: 240px; width: 240px;
background-color: #f7f8f9; background-color: #f7f8f9;
} }
.type_header .el-input{ .type_header .el-input {
width: 240px; width: 240px;
} }
</style> </style>
<style scoped> <style scoped>
.type_contain{ .type_contain {
width: 100%; width: 100%;
padding: 20px; padding: 20px;
border-bottom: 1px solid #e9ecf3; border-bottom: 1px solid #e9ecf3;
} }
.type_header{ .type_header {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
.openbox{ .openbox {
width: 105px; width: 105px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
...@@ -165,10 +268,10 @@ export default { ...@@ -165,10 +268,10 @@ export default {
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
} }
.search{ .search {
float: right; float: right;
} }
.select_name{ .select_name {
width: 100px; width: 100px;
text-align: right; text-align: right;
font-size: 14px; font-size: 14px;
...@@ -177,7 +280,7 @@ export default { ...@@ -177,7 +280,7 @@ export default {
line-height: 52px; line-height: 52px;
float: left; float: left;
} }
.select_arr_box{ .select_arr_box {
width: calc(100% - 100px); width: calc(100% - 100px);
float: left; float: left;
border-bottom: 1px solid #e9ecf3; border-bottom: 1px solid #e9ecf3;
...@@ -189,10 +292,11 @@ export default { ...@@ -189,10 +292,11 @@ export default {
.type_select { .type_select {
margin-top: 20px; margin-top: 20px;
} }
.type_select .line_data:nth-last-of-type(1) .select_arr_box{ .type_select .line_data:nth-last-of-type(1) .select_arr_box {
border-bottom:0; border-bottom: 0;
} }
.select_item,.select_item_open{ .select_item,
.select_item_open {
height: 52px; height: 52px;
line-height: 52px; line-height: 52px;
margin-right: 40px; margin-right: 40px;
...@@ -200,10 +304,10 @@ export default { ...@@ -200,10 +304,10 @@ export default {
color: #58617a; color: #58617a;
cursor: pointer; cursor: pointer;
} }
.select_arr_box .select_item_open{ .select_arr_box .select_item_open {
position: absolute; position: absolute;
right:0; right: 0;
margin-right: 10px; margin-right: 10px;
top:0; top: 0;
} }
</style> </style>
...@@ -555,6 +555,7 @@ export default { ...@@ -555,6 +555,7 @@ export default {
label: "申请时间", label: "申请时间",
prop: "apply_time", prop: "apply_time",
align: "center", align: "center",
width: 180
}, },
{ {
label: "初次申请状态", label: "初次申请状态",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment