Skip to content

C
confucius
Commit d9cfc0b2 authored by Mac's avatar Mac
Browse files
Options

1

parent bc9a0e85
Hide whitespace changes
Inline Side-by-side
Showing with 149 additions and 55 deletions
src/pages/enterprise/customer/kehucomponents/customFilter.vue
View file @ d9cfc0b2
......@@ -2,76 +2,161 @@
.customFilter .el-input__inner {
border: 1px solid #DCDFE6 !important;
}
.customFilter .text-clamp-1{
.customFilter .text-clamp-1 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-overflow: ellipsis;
white-space: nowrap;
}
.customFilter .tag-select-input{
padding: 4px 10px;border-radius: 5px;background-color:#f6f6f6;font-size: 14px;
.customFilter .tag-select-input {
padding: 4px 10px;
border-radius: 5px;
background-color: #f6f6f6;
font-size: 14px;
}
.customFilter .lablec{
.customFilter .lablec {
display: none;
}
.customFilter .label-input{
width: 200px;height: 36px;border-radius: 4px;border: 1px solid #DCDFE6;font-size: 14px;padding: 0 10px 0 10px;display: flex;align-items: center;justify-content: space-between;
.customFilter .label-input {
width: 200px;
height: 36px;
border-radius: 4px;
border: 1px solid #DCDFE6;
font-size: 14px;
padding: 0 10px 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.customFilter .label-input:hover .lablec{
.customFilter .label-input:hover .lablec {
display: inline;
}
.right_select {
width: 40px;
position: absolute;
left: 0;
top: 18px;
}
.border_top{
border: 1px solid #d7d7d7;
width: 29px;
border-bottom: none;
border-right: none;
margin-left: 12px;
}
.border-bottom{
border: 1px solid #d7d7d7;
width: 29px;
border-top: none;
border-right: none;
margin-left: 12px;
}
.right_select .border_mid div{
width: 23px;
height: 23px;
text-align: center;
line-height: 23px;
color: #000;
font-size: 12px;
cursor: pointer;
background: #d8d8d8;
}
.right_select .border_mid .checked{
background: #333!important;
color: #fff!important;
}
</style>
<template>
<div style="background: transparent;" class="customFilter">
<el-dialog title="自定义筛选" :visible.sync="isscreen" width="860" :close-on-click-modal='false' :before-close="goclose" >
<el-dialog title="自定义筛选" :visible.sync="isscreen" width="860" :close-on-click-modal='false'
:before-close="goclose">
<div v-if="selectList.length==0" style="color: #606266;">添加筛选条件 <i class="el-icon-circle-plus"
style="font-size: 17px;" @click="addsList"></i></div>
<div v-if="selectList.length>0">
<div style="margin-bottom: 17px;font-size: 14px;color: #000;font-weight: 700;">当客户符合以下条件时</div>
</div>
<div class="row" v-for="(x,y) in selectList">
<el-select v-model="x.Name" placeholder="请选择客户信息" @change="getName(x,y)" size='medium'>
<el-option v-for="item in filedList" :key="item.Id" :label="item.Name" :value="item.Id">
</el-option>
</el-select>
<div v-if="x.Type==1||x.Type==2||x.Type==5 " style="margin-left: 10px;">
<el-select v-if="x.Type==1" v-model="x.Direction" placeholder="请选择" style="width: 150px;" size='medium'>
<el-option v-for="item in directionList1" :key="item.Id" :label="item.Name" :value="item.Id">
<div :style="{'position':'relative','padding-left':selectList.length>1?'40px':'0'}">
<div class="row" v-for="(x,y) in selectList" style="margin-bottom: 8px;">
<el-select v-model="x.Name" placeholder="请选择客户信息" @change="getName(x,y)" size='medium'>
<el-option v-for="item in filedList" :key="item.Id" :label="item.Name" :value="item.Id">
</el-option>
</el-select>
<el-select v-if="x.Type==2" v-model="x.Direction" placeholder="请选择" style="width: 150px;" size='medium'>
<el-option v-for="item in directionList2" :key="item.Id" :label="item.Name" :value="item.Id">
<div v-if="x.Type==1||x.Type==2||x.Type==5 ||x.Type==''" style="margin-left: 10px;">
<el-select v-if="x.Type==1" v-model="x.Direction" placeholder="请选择" style="width: 150px;"
size='medium'>
<el-option v-for="item in directionList1" :key="item.Id" :label="item.Name" :value="item.Id">
</el-option>
</el-select>
<el-select v-if="x.Type==2|| x.Type==''" v-model="x.Direction" placeholder="请选择"
style="width: 150px;" size='medium'>
<el-option v-for="item in directionList2" :key="item.Id" :label="item.Name" :value="item.Id">
</el-option>
</el-select>
<el-select v-if="x.Type==3" v-model="x.Direction" placeholder="请选择" style="width: 150px;"
size='medium'>
<el-option v-for="item in directionList5" :key="item.Id" :label="item.Name" :value="item.Id">
</el-option>
</el-select>
</div>
<div v-if="x.Name=='标签' && x.Type==1" style="margin-left: 10px;">
<div class="label-input" @click="showlabel(y)">
<div style="display: flex;" v-if="x.LableIds && x.LableIds.length>0">
<div class="text-clamp-1 tag-select-input" style="max-width:110px;">
{{x.LableIds[0].Name}}
</div>
<div v-if="x.LableIds.length>1" class="tag-select-input" style="margin-left: 5px;">
{{x.LableIds.length-1}}+
</div>
</div>
<div v-if="x.LableIds && x.LableIds.length>0" class="lablec">
<i style="font-size: 16px;" class="el-icon-error"
@click.stop="selectList[y].LableIds=[]"></i>
</div>
</div>
</div>
<el-select v-if="x.Name=='客户阶段' && x.Type==2" v-model="x.StartValue" placeholder="请选择"
style="margin-left: 10px;" size='medium'>
<el-option v-for="item in StageList" :key="item.Id" :label="item.Name" :value="item.Id">
</el-option>
</el-select>
<el-select v-if="x.Type==3" v-model="x.Direction" placeholder="请选择" style="width: 150px;" size='medium'>
<el-option v-for="item in directionList5" :key="item.Id" :label="item.Name" :value="item.Id">
<el-input v-if="(x.Type==1 && x.Name!='标签')|| x.Type==''" v-model="x.StartValue" placeholder="请输入"
style="width: 200px;margin-left: 10px;" size='medium'></el-input>
<el-select v-if="x.Type==3" v-model="x.StartValue" placeholder="请选择" style="margin-left: 10px;"
size='medium'>
<el-option v-for="item in x.OptionsList" :key="item.Id" :label="item.Name" :value="item.Id">
</el-option>
</el-select>
<div style="margin-left: 10px;display: flex;align-items: center;">
<i v-if="selectList.length>1" style="font-size: 20px;" class="el-icon-remove"
@click="deleteadd(y)"></i>
<i v-if="selectList.length==y+1" style="font-size: 20px;margin-left: 10px;"
class="el-icon-circle-plus" @click="addsList"></i>
</div>
</div>
<div v-if="x.Name=='标签'" style="margin-left: 10px;">
<div class="label-input" @click="showlabel(y)">
<div style="display: flex;" v-if="x.LableIds && x.LableIds.length>0">
<div class="text-clamp-1 tag-select-input" style="max-width:110px;">
{{x.LableIds[0].Name}}
</div>
<div v-if="x.LableIds.length>1" class="tag-select-input" style="margin-left: 5px;">
{{x.LableIds.length-1}}+
</div>
</div>
<div v-if="x.LableIds && x.LableIds.length>0" class="lablec">
<i style="font-size: 16px;" class="el-icon-error" @click.stop="selectList[y].LableIds=[]"></i>
</div>
<div data-v-0dbac2e3="" class="right_select" v-if="selectList.length>1">
<div data-v-0dbac2e3="" class="border_top" :style="{height:((selectList.length*44 -8 - 46 - 36 )/2) + 'px'}"></div>
<div data-v-0dbac2e3="" class="border_mid">
<div data-v-0dbac2e3="" class="and checked">且</div>
<div data-v-0dbac2e3="" class="no">或</div>
</div>
<div data-v-0dbac2e3="" class="border-bottom" :style="{height:((selectList.length*44 -8 - 46 - 36 )/2) + 'px'}"></div>
</div>
<el-select v-if="x.Name=='客户阶段'" v-model="x.Direction" placeholder="请选择" style="margin-left: 10px;" size='medium'>
<el-option v-for="item in StageList" :key="item.Id" :label="item.Name" :value="item.Id">
</el-option>
</el-select>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="goclose">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
......@@ -106,10 +191,10 @@
directionList1: [{ Id: 1, Name: '包含所有' }, { Id: 2, Name: '包含任意' }, { Id: 3, Name: '不包含' }, { Id: 4, Name: '为空' }, { Id: 5, Name: '不为空' },],
directionList2: [{ Id: 1, Name: '等于' }, { Id: 1, Name: '不等于' }, { Id: 1, Name: '为空' }, { Id: 1, Name: '不为空' }, { Id: 1, Name: '模糊' },],
directionList5: [{ Id: 1, Name: '等于' }, { Id: 1, Name: '大于' }, { Id: 1, Name: '大于等于' }, { Id: 1, Name: '小于' }, { Id: 1, Name: '小于等于' },],
isshowlabel:false,
selectindex:0,
LableList:[],
StageList:[]
isshowlabel: false,
selectindex: 0,
LableList: [],
StageList: []
}
},
created() {
......@@ -138,12 +223,15 @@
},
getCustomerStageList() {
getCustomerStageList({}).then(res => {
this.loading = false
if (res.Code == 1) {
this.StageList = res.Data;
}
this.loading = false
if (res.Code == 1) {
this.StageList = res.Data;
}
})
},
deleteadd(index) {
this.selectList.splice(index, 1)
},
addsList() {//给msg.SelectList追加
let obj = {
Name: '',
......@@ -152,25 +240,31 @@
StartValue: '',
EndValue: '',
IsCustom: '2',
LableIds:[],
StageId:'',
LableIds: [],
StageId: '',
}
this.selectList.push(obj)
},
getName(item, index) {//选择客户信息的变化
console.log(item)
for (var i = 0; i < this.filedList.length; i++) {
if (this.selectList[index].Name == this.filedList[i].Id) {
this.selectList[index].Type = this.filedList[i].Type;
this.selectList[index].StartValue = ''
if (this.selectList[index].Type == 3) {
this.selectList[index].OptionsList = this.filedList[i].OptionsList;
}
break
}
}
},
showlabel(index){
showlabel(index) {
this.isshowlabel = true
this.selectindex = index;
this.LableList = this.selectList[index].LableIds
},
getlabel(list){
getlabel(list) {
this.isshowlabel = false;
this.selectList[this.selectindex].LableIds = list
......
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