Skip to content

M
memberTag-web
Commit 0571deec by 无尘
Options

add: 增加会员详情各个组件

parent 1f23825d
Showing with 753 additions and 30 deletions
src/common/js/public.js 0 → 100644
// 防抖
export function _debounce(fn, delay) {
var delay = delay || 200;
var timer;
// console.log(fn)
return function () {
var that = this;
var args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
timer = null;
fn.apply(that, args);
}, delay);
};
}
// 节流
export function _throttle(fn, interval) {
var last;
var timer;
var interval = interval || 200;
return function () {
var that = this;
var args = arguments;
var now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(function () {
last = now;
fn.apply(that, args);
}, interval);
} else {
last = now;
fn.apply(that, args);
}
}
}
src/view/index/index.vue
...@@ -220,7 +220,7 @@ ...@@ -220,7 +220,7 @@
.content-body { .content-body {
display: flex; display: flex;
overflow: hidden; overflow-y: auto;
.right-wrap { .right-wrap {
flex: 1; flex: 1;
......
src/view/myTag/myTagDetail.vue
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<div class="checkboxOption-wrap__body"> <div class="checkboxOption-wrap__body">
<div class="checkboxOption-wrap__body__title">标签值设置</div> <div class="checkboxOption-wrap__body__title">标签值设置</div>
<!-- 选项控件 --> <!-- 选项控件 -->
<template v-if="false"> <template v-if="true">
<div class="checkboxOption-wrap__body__checkAll border-box"> <div class="checkboxOption-wrap__body__checkAll border-box">
<el-checkbox :indeterminate="tagData.isIndeterminate" v-model="tagData.checkAll" @change="handleCheckAllChange">全选</el-checkbox> <el-checkbox :indeterminate="tagData.isIndeterminate" v-model="tagData.checkAll" @change="handleCheckAllChange">全选</el-checkbox>
</div> </div>
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
</el-checkbox-group> </el-checkbox-group>
</div> </div>
</template> </template>
<!-- 数字范围 --> <!-- 数字范围 -->
<template v-if="true"> <template v-if="true">
<div class="m-b-20"> <div class="m-b-20">
...@@ -30,15 +31,16 @@ ...@@ -30,15 +31,16 @@
<label class="label-tip">注：如果起始值为空则视为小于等于最大输入值；如果最大值为空则视为大于等于最小输入值！</label> <label class="label-tip">注：如果起始值为空则视为小于等于最大输入值；如果最大值为空则视为大于等于最小输入值！</label>
</div> </div>
</template> </template>
<!-- 时间属性-固定时段/相对时段 --> <!-- 时间属性-固定时段/相对时段 -->
<template v-if="true"> <template v-if="false">
<el-radio v-model="tagData.radio" label="1">固定时段</el-radio> <el-radio v-model="tagData.radio" label="1">固定时段</el-radio>
<el-radio v-model="tagData.radio" label="2">相对时段</el-radio> <el-radio v-model="tagData.radio" label="2">相对时段</el-radio>
<!-- 固定时段 --> <!-- 固定时段 -->
<div class="m-t-18"> <div class="m-t-18 w-438 p-20 border-box bg-f3f6f9" v-if="tagData.radio == 1">
<el-date-picker <el-date-picker
v-model="tagData.daterangeValue" v-model="tagData.daterangeValue"
v-if="tagData.radio == 1"
type="daterange" type="daterange"
:editable="false" :editable="false"
range-separator="至" range-separator="至"
...@@ -52,11 +54,11 @@ ...@@ -52,11 +54,11 @@
</el-date-picker> </el-date-picker>
</div> </div>
<!-- 相对时段 --> <!-- 相对时段 -->
<div class="relative-range border-box" v-if="tagData.radio != 1"> <div class="relative-range m-t-18 border-box" v-if="tagData.radio != 1">
<div> <div>
<div> <div>
<label class="inline-block w-98 label-unit">时间精度</label> <label class="inline-block w-98 label-unit">时间精度</label>
<el-radio-group v-model="tagData.timeRadio"> <el-radio-group v-model="tagData.timeRadio" @change="timeRadioChange">
<el-radio label="1">天</el-radio> <el-radio label="1">天</el-radio>
<el-radio label="2">月</el-radio> <el-radio label="2">月</el-radio>
<el-radio label="3">年</el-radio> <el-radio label="3">年</el-radio>
...@@ -64,32 +66,239 @@ ...@@ -64,32 +66,239 @@
</div> </div>
<div class="m-t-20"> <div class="m-t-20">
<label class="inline-block w-98"></label> <label class="inline-block w-98"></label>
<el-checkbox v-model="tagData.timeChecked">当{{tagData.timeRadio==1?'天':tagData.timeRadio==2?'月':'年'}}</el-checkbox> <el-checkbox v-model="tagData.timeChecked"><label class="inline-block middle">当{{tagData.timeRadio==1?'天':tagData.timeRadio==2?'月':'年'}}</label></el-checkbox>
</div> </div>
<div class="m-t-20"> <div class="m-t-20">
<label class="inline-block w-98"></label> <label class="inline-block w-98"></label>
<el-checkbox v-model="tagData.timeChecked"> </el-checkbox> <el-checkbox v-model="tagData.timeCheckedTwo"> </el-checkbox>
<el-select v-model="tagData.timeSelect" placeholder="请选择" class="w-86"> <el-select v-model="tagData.timeSelect" placeholder="请选择" class="w-86 m-l-8">
<el-option label="前" value="1"></el-option> <el-option label="前" value="1"></el-option>
<el-option label="后" value="2"></el-option> <el-option label="后" value="2"></el-option>
</el-select> </el-select>
<el-input v-model="tagData.timeInput" placeholder="请输入" class="w-90"></el-input> <el-input v-model="tagData.timeInput" placeholder="请输入" class="w-90" @blur="(value) => toEditDateInput(value,tagData.timeRadio)"></el-input>
<label class="inline-block middle label-unit">天</label> <template v-if="tagData.timeRadio==1">
<label class="inline-block middle label-tip">正整数，最大365</label> <label class="inline-block middle label-unit m-l-8">天</label>
<label class="inline-block middle label-tip">正整数，最大365</label>
</template>
<template v-if="tagData.timeRadio==2">
<label class="inline-block middle label-unit m-l-8">月</label>
<label class="inline-block middle label-tip">正整数，最大12</label>
</template>
<template v-if="tagData.timeRadio==3">
<label class="inline-block middle label-unit m-l-8">年</label>
<label class="inline-block middle label-tip">正整数，最大2</label>
</template>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<!-- 最近 天 --> <!-- 最近 天 -->
<template v-if="true"> <template v-if="false">
<div> <div>
<el-input v-model="tagData.timeRecent" placeholder="请输入" class="w-90" @blur="(value) => toEditInput(value,'timeRecent')"></el-input> <label class="inline-block middle label-unit">最近</label><el-input v-model="tagData.timeRecent" placeholder="请输入" class="w-90 m-r-20 m-l-20" @blur="(value) => toEditInput(value,'timeRecent')"></el-input><label class="inline-block middle label-unit">天</label>
</div> </div>
</template> </template>
<!-- 之后 天 --> <!-- 之后 天 -->
<template v-if="true"> <template v-if="false">
<div>
<label class="inline-block middle label-unit">之后</label><el-input v-model="tagData.timeAfter" placeholder="请输入" class="w-90 m-r-20 m-l-20" @blur="(value) => toEditInput(value,'timeAfter')"></el-input><label class="inline-block middle label-unit">天</label>
</div>
</template>
<!-- 属于/不属于 -->
<template v-if="false">
<div>
<el-radio v-model="tagData.computeRadio" label="1">属于</el-radio>
<el-radio v-model="tagData.computeRadio" label="2">不属于</el-radio>
</div>
</template>
<!-- 固定时段/最近 -->
<template v-if="false">
<div>
<el-radio v-model="tagData.fixedRecentRadio" label="1">固定时段</el-radio>
<el-radio v-model="tagData.fixedRecentRadio" label="2">最近时段</el-radio>
</div>
<!-- 固定时段 -->
<div class="m-t-18 w-526 h-80 fixed-date-picker border-box bg-f3f6f9" >
<label class="inline-block middle label-unit m-r-8" v-if="tagData.fixedRecentRadio == 1">时间范围</label><el-date-picker
v-model="tagData.fixedRecentRangeValue"
v-if="tagData.fixedRecentRadio == 1"
type="daterange"
:editable="false"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="yyyyMMdd"
value-format="yyyyMMdd"
:default-time="['000000', '235959']"
><!-- :picker-options="pickerOptions" -->
</el-date-picker>
<div v-if="tagData.fixedRecentRadio == 2">
<label class="inline-block middle label-unit m-r-8" >最近</label><el-input v-model="tagData.fixedRecentTimeRecent" placeholder="请输入" class="w-90 m-r-8" @blur="(value) => toEditInput(value,'fixedRecentTimeRecent')"></el-input><label class="inline-block middle label-unit">天</label>
</div>
</div>
</template>
<!-- 输入添加值 -->
<template v-if="false">
<div> <div>
<el-input v-model="tagData.timeAfter" placeholder="请输入" class="w-90" @blur="(value) => toEditInput(value,'timeAfter')"></el-input> <el-input v-model="tagData.addInputValue" placeholder="请输入" class="w-184 m-t-20 m-r-20"></el-input><el-button class="m-t-20 middle" type="text" @click.stop="addInputVal">添加</el-button>
</div>
<div class="m-t-18 add-tags-wrap">
<template v-for="(item,index) in tagData.addTags">
<span class="el-tag">{{ item.value }}<i class="el-tag__close el-icon-close" @click="delInputVal(index)"></i></span>
</template>
</div>
</template>
<!-- 输入搜索下拉多选 添加值 -->
<template v-if="false">
<div class="m-t-18 add-search-select">
<el-select
size="small"
v-model="tagData.searchModel"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:reserve-keyword="false"
:remote-method="remoteMethod"
class="el-select--small">
<el-option
v-for="item in tagData.searchOptions"
:key="item.key"
:label="item.value"
:value="item.key">
</el-option>
</el-select><el-button class="m-l-8 middle" type="text" @click.stop="addSearchSelectVal">添加</el-button>
</div>
<div class="m-t-18 add-tags-wrap">
<template v-for="(item,index) in tagData.addSelectTags">
<span class="el-tag">{{ item.value }}<i class="el-tag__close el-icon-close" @click="delSearchSelectVal(index)"></i></span>
</template>
</div>
</template>
<!-- 存在其一/所有,/属于不属于 -->
<template v-if="false">
<div>
<el-select v-model="tagData.selectOne" placeholder="请选择" class="w-98 m-l-8">
<el-option label="所有" value="1"></el-option>
<el-option label="存在其一" value="2"></el-option>
</el-select><label
class="inline-block middle label-unit m-l-8"
>{{tagData.selectLabel}}</label><el-select
v-model="tagData.selectTwo"
placeholder="请选择"
class="w-98 m-l-8">
<el-option label="属于" value="1"></el-option>
<el-option label="不属于" value="2"></el-option>
</el-select><label
class="inline-block middle label-tip m-l-8"
>{{tagData.selectLabelTip}}</label>
</div>
</template>
<!-- 多选项( 全部选项/已选选项 ) -->
<template v-if="false">
<div class="multiple-select-wrap">
<div class="multiple-select-wrap__search w-184">
<el-input
placeholder="请输入关键字搜索"
prefix-icon="el-icon-search"
v-model="tagData.inputSearch"
@keyup.native="(value) => toSearchInput(value)">
</el-input>
</div>
<div class="multiple-select-wrap__body m-t-18">
<div class="multiple-select-wrap__tab">
<el-tabs v-model="tagData.allSelectActive">
<el-tab-pane label="全部选项" name="first">
<div class="all-select-options">
<template v-for="(item,index) in tagData.allSelectOptions">
<el-checkbox v-model="item.check" @change="allSelectChange($event,index,item)">{{item.name}}</el-checkbox>
</template>
</div>
</el-tab-pane>
<el-tab-pane :label="'已选选项(' +tagData.selectedOptions.length+ ')'" name="second">
<div class="slected-opyions">
<template v-for="(item,index) in tagData.selectedOptions">
<span class="el-tag">{{ item.name }}<i class="el-tag__close el-icon-close" @click="delallSelectVal(index,item)"></i></span>
</template>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</template>
<!-- 多选项 城市选择( 全部选项/已选选项 ) -->
<template v-if="true">
<div class="multiple-select-wrap city-select-wrap">
<div class="multiple-select-wrap__search w-184">
<el-input
placeholder="请输入关键字搜索"
prefix-icon="el-icon-search"
v-model="tagData.inputSearch"
@keyup.native="(value) => toSearchInput(value,'city')">
</el-input>
</div>
<div class="multiple-select-wrap__body m-t-18">
<div class="multiple-select-wrap__tab">
<el-tabs v-model="tagData.citySelectActive">
<el-tab-pane label="全部选项" name="first">
<div class="all-select-options">
<div class="city-checkbox city-checkbox-all border-box">
<el-checkbox :indeterminate="tagData.isIndeterminateCity" v-model="tagData.checkAllCity" @change="cityCheckAllChange">全选</el-checkbox>
</div>
<el-checkbox-group v-model="tagData.checkeditemsCity" @change="citySelectChange($event)">
<template v-for="(item,index) in tagData.citySelectOptions">
<div class="city-checkbox border-box">
<el-checkbox :label="item.id" :key="item.id"><span class="inline-block middle" @click.stop="toggleCity(item.id,item)">{{item.name}}</span></el-checkbox>
<div class="el-select-dropdown el-popper is-multiple" style="min-width: 240px; position: absolute; top: 30px; left: 0px; transform-origin: center top 0px; z-index: 2215;" x-placement="bottom-start" v-if="item.showCity">
<div class="el-scrollbar" style="">
<div class="el-select-dropdown__wrap el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;">
<ul class="el-scrollbar__view el-select-dropdown__list">
<!---->
<li class="el-select-dropdown__item selected hover"><span>黄金糕</span></li>
<li class="el-select-dropdown__item"><span>双皮奶</span></li>
<li class="el-select-dropdown__item"><span>蚵仔煎</span></li>
<li class="el-select-dropdown__item"><span>龙须面</span></li>
<li class="el-select-dropdown__item"><span>北京烤鸭</span></li>
</ul>
</div>
<div class="el-scrollbar__bar is-horizontal">
<div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
</div>
<div class="el-scrollbar__bar is-vertical">
<div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
</div>
</div>
<!---->
<div x-arrow="" class="popper__arrow" style="left: 35px;"></div>
</div>
</div>
</template>
</el-checkbox-group>
</div>
</el-tab-pane>
<el-tab-pane :label="'已选选项(' +tagData.citySelectedOptions.length+ ')'" name="second">
<div class="slected-opyions city-slected-opyions">
<template v-for="(item,index) in tagData.citySelectedOptions">
<span class="el-tag">{{ item.name }}<i class="el-tag__close el-icon-close" @click="delcitySelectVal(index,item)"></i></span>
</template>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div> </div>
</template> </template>
...@@ -111,6 +320,10 @@ ...@@ -111,6 +320,10 @@
import navCrumb from '@/components/nav/nav.vue'; import navCrumb from '@/components/nav/nav.vue';
import checkboxOption from '@/components/tags/checkboxOption.vue'; import checkboxOption from '@/components/tags/checkboxOption.vue';
import checkboxOptionAsync from '@/components/tags/checkboxOptionAsync.vue'; import checkboxOptionAsync from '@/components/tags/checkboxOptionAsync.vue';
import strLength from '@/common/js/strlen';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { _debounce } from "@/common/js/public";
import { getRequest, postRequest, postJson, postForm } from '@/api/api'; import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default { export default {
name: "myTagDetail", name: "myTagDetail",
...@@ -133,7 +346,7 @@ ...@@ -133,7 +346,7 @@
tagData: { tagData: {
name: '性别', name: '性别',
des: '根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述根据描述', des: '根据描述根据描述根据描述根据描述根据描述根据描述根据描述根',
// 选项控件 // 选项控件
checkeditems: [], checkeditems: [],
isIndeterminate: false, isIndeterminate: false,
...@@ -157,6 +370,7 @@ ...@@ -157,6 +370,7 @@
// 相对时间 // 相对时间
timeRadio: "1", timeRadio: "1",
timeChecked: false, timeChecked: false,
timeCheckedTwo: false,
timeSelect: '1', timeSelect: '1',
timeInput: '', timeInput: '',
...@@ -164,6 +378,86 @@ ...@@ -164,6 +378,86 @@
timeRecent: '', timeRecent: '',
// 之后 天 // 之后 天
timeAfter: '', timeAfter: '',
// 属于/不属于
computeRadio: '1',
// 时间属性-固定时段/最近
fixedRecentRadio: '1',
fixedRecentRangeValue: [],
fixedRecentTimeRecent: '',
// 添加输入值
addInputValue: '',
addTags: [],
// 搜索下拉多选添加值
searchModel: [],
searchOptions: [
{
key: 1,
value: '测试去1'
},
{
key: 2,
value: '测试去2'
},
{
key: 3,
value: '测试去3'
},
{
key: 4,
value: '测试去4'
}
],
addSelectTags: [],
// 多范围()
selectOne: '1',
selectTwo: '1',
selectLabel: '曾经消费门店',
selectLabelTip: '注：存在其一即会员至少有一个字段值满足所选条件；所有即会员的所有字段值满足所选条件',
// 多选项( 全部选项/已选选项 )
allSelectActive: 'first',
inputSearch: '',
allSelectOptions: [
{
id: 1,
check: false,
name: '欧时力'
},
{
id: 2,
check: false,
name: '伊芙丽'
}
],
selectedOptions:[],
// 多选项(城市选择) ( 全部选项/已选选项 )
citySelectActive: 'first',
isIndeterminateCity: false,
checkAllCity: false,
citySelectOptions: [
{
id: 1,
check: false,
name: '北京',
showCity: false
},
{
id: 2,
check: false,
name: '河北',
showCity: false
}
],
checkeditemsCity: [], // 已选省
citySelectedOptions: [],
} }
} }
}, },
...@@ -183,18 +477,43 @@ ...@@ -183,18 +477,43 @@
}, },
/** /**
* 全选
*/
handleCheckAllChange(val) {
var that = this
if (val) {
that.tagData.options.forEach(function(el,index) {
that.tagData.checkeditems.push(el.id)
})
}else {
that.tagData.checkeditems = []
}
that.tagData.isIndeterminate = false;
},
/**
* 单选
*/
handleCheckedChange(value) {
var that = this
let checkedCount = value.length;
that.tagData.checkAll = checkedCount === that.tagData.options.length;
that.tagData.isIndeterminate = checkedCount > 0 && checkedCount < that.tagData.options.length;
},
/**
* 数字区间 * 数字区间
*/ */
blurFrom(e){ blurFrom(e){
var that = this var that = this
var value = !Number(e.target.value.replace(/[^\d]/g,''))? Number(0): Number(e.target.value.replace(/[^\.\d]/g,'')) var value = !Number(e.target.value.replace(/[^\d]/g,''))? Number(0): Number(e.target.value.replace(/[^\d]/g,''))
// 判断输入 // 判断输入
let v1 = that.tagData.numRange[0]; let v1 = that.tagData.numRange[0];
let v2 = that.tagData.numRange[1] let v2 = that.tagData.numRange[1]
if (!Number(v2) || Number(v1) >= Number(v2)) { if (!Number(v2) || Number(v1) >= Number(v2)) {
console.log("输入值From:v2",Number(v1),v2,value)
that.tagData.numRange[0] = value that.tagData.numRange[0] = value
that.tagData.numRange[1] = Number((!!Number(v1)? Number(v1):0) + 1) that.tagData.numRange[1] = Number((!!Number(v1)? Number(v1):0) + 1)
that.$forceUpdate(); that.$forceUpdate();
...@@ -207,7 +526,7 @@ ...@@ -207,7 +526,7 @@
blurTo(e){ blurTo(e){
var that = this var that = this
var value = !Number(e.target.value.replace(/[^\.\d]/g,''))? Number(0): Number(e.target.value.replace(/[^\.\d]/g,'')) var value = !Number(e.target.value.replace(/[^\d]/g,''))? Number(0): Number(e.target.value.replace(/[^\d]/g,''))
let t1 = that.tagData.numRange[0]; let t1 = that.tagData.numRange[0];
let t2 = that.tagData.numRange[1] let t2 = that.tagData.numRange[1]
...@@ -224,19 +543,16 @@ ...@@ -224,19 +543,16 @@
that.tagData.numRange[0] = Number(t2) -1 that.tagData.numRange[0] = Number(t2) -1
} }
that.$forceUpdate(); that.$forceUpdate();
return return
} }
that.tagData.numRange[1] = value
that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[1] = value
that.conditionsList[that.andIndex].children[that.orIndex].columnValue = that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel.join(',')
that.$forceUpdate(); that.$forceUpdate();
}, },
/**
// 最近,之后 天输入 * 最近,之后 天输入
*/
toEditInput(e,tag) { toEditInput(e,tag) {
console.log(e,tag) console.log(e,tag)
var that = this var that = this
...@@ -249,7 +565,235 @@ ...@@ -249,7 +565,235 @@
newNum = 365 newNum = 365
} }
that.tagData[tag] = newNum; that.tagData[tag] = newNum;
} },
/**
* 天/月/年 RadioChange
*/
timeRadioChange(e) {
var that = this
console.log(e)
// 每次改变选择,清空原有的值
that.tagData.timeInput = '';
},
/**
* 天/月/年输入
*/
toEditDateInput(e,radio) {
console.log(e,radio)
var that = this
let newNum;
newNum = !!parseInt(String(e.target.value).replace(/[^\d]/g,''))? parseInt(String(e.target.value).replace(/[^\d]/g,'')): 1
if (newNum <= 0) {
newNum = 1
}
// 天
if (newNum > 365 && radio == 1) {
newNum = 365
}
// 月
if (newNum > 12 && radio == 2) {
newNum = 12
}
// 年
if (newNum > 3 && radio == 3) {
newNum = 2
}
that.tagData.timeInput = newNum;
},
/**
* 添加输入值
*/
addInputVal() {
var that = this
if (!that.tagData.addInputValue.trim()) {
that.$message.error({
duration: 1000,
message: "请输入值"
})
return false;
}
var tagsMap = null;
if (!!that.tagData.addTags.length) {
tagsMap = that.tagData.addTags.map(item=>item.value)
}
if (!!tagsMap&&tagsMap.indexOf(that.tagData.addInputValue) !== -1) {
that.$message.error({
duration: 1000,
message: "输入值已存在"
})
return false;
}
that.tagData.addTags.push(
{
value: that.tagData.addInputValue
}
)
that.tagData.addInputValue = ''
},
/**
* 删除输入值
*/
delInputVal(index) {
var that = this
that.tagData.addTags.splice(index,1)
},
/**
* 输入搜索值
*/
remoteMethod: _debounce(function (query) {
var that = this;
console.log("query:",query)
that.tagData.searchOptions.push()
},500),
/**
* 添加已选的搜索值
*/
addSearchSelectVal() {
var that = this
if (!that.tagData.searchModel.length) {
that.$message.error({
duration: 1000,
message: "请选择值"
})
return false;
}
var tagsMap = null;
if (!!that.tagData.addSelectTags.length) {
tagsMap = that.tagData.addSelectTags.map(item=>item.value)
}
console.log(tagsMap)
that.tagData.searchOptions.forEach(function(ele,index){
if (!!tagsMap&&tagsMap.indexOf(ele.value) != -1) {
// that.$message.error({
// duration: 1000,
// message: "输入值已存在"
// })
// that.tagData.searchModel = [];
return false;
}
if (that.tagData.searchModel.indexOf(ele.key) != -1) {
that.tagData.addSelectTags.push(ele)
}
})
that.tagData.searchModel = []
console.log(that.tagData.addSelectTags)
},
/**
* 删除已添加的搜索值
*/
delSearchSelectVal(index){
var that = this
that.tagData.addSelectTags.splice(index,1)
},
/**
* 多选项( 全部选项/已选选项 )
*/
allSelectChange(e,index,item) {
var that = this
console.log(e,index,item,that.tagData.allSelectOptions)
if (!!e) {
that.tagData.selectedOptions.push(item)
}else {
if (!!that.tagData.selectedOptions.length) {
that.tagData.selectedOptions.forEach(function(ele,index){
if (ele.id == item.id) {
that.tagData.selectedOptions.splice(index,1)
}
})
}
}
},
/**
* 删除已选择的值
*/
delallSelectVal(index,item) {
var that = this
that.tagData.selectedOptions.splice(index,1)
that.tagData.allSelectOptions.forEach(function(ele,index){
if (ele.id == item.id) {
ele.check = false;
}
})
},
/**
* 搜索选项值
*/
toSearchInput: _debounce(function (e) {
var that = this
console.log(e.target.value)
},500),
getSearchSelectOptions() {
var that = this
},
/**
* 多选项 城市选择( 全部选项/已选选项 )
*/
cityCheckAllChange(val) {
var that = this
if (val) {
that.tagData.citySelectOptions.forEach(function(el,index) {
that.tagData.checkeditemsCity.push(el.id)
})
}else {
that.tagData.checkeditemsCity = []
}
that.tagData.isIndeterminateCity = false;
},
/**
* 多选项 城市选择( 全部选项/已选选项 )
*/
citySelectChange(value) {
var that = this
console.log(value)
let cityCount = value.length;
that.tagData.checkAllCity = cityCount === that.tagData.citySelectOptions.length;
that.tagData.isIndeterminateCity = cityCount > 0 && cityCount < that.tagData.citySelectOptions.length;
},
/**
* 多选项 城市选择( 全部选项/已选选项 )-显示/隐藏市列表
*/
toggleCity(id,item) {
var that = this
console.log(id,item)
item.showCity = item.showCity === true? false : true;
},
/**
* 多选项 城市选择 - 删除已选择的值
*/
delcitySelectVal(index,item) {
var that = this
},
}, },
mounted() { mounted() {
var that = this var that = this
...@@ -261,7 +805,7 @@ ...@@ -261,7 +805,7 @@
checkboxOption, checkboxOption,
checkboxOptionAsync checkboxOptionAsync
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -289,4 +833,121 @@ ...@@ -289,4 +833,121 @@
color: #909399; color: #909399;
} }
.w-438 {
width: 438px;
}
.w-526 {
width: 526px;
}
.h-80 {
height: 80px;
}
.fixed-date-picker {
padding: 20px;
}
.bg-f3f6f9 {
background: #F3F6F9;
}
.add-tags-wrap {
width: 380px;
height: 110px;
overflow-y: auto;
white-space: pre-wrap;
border: 1px solid #DCDFE6;
border-radius: 4px;
.el-tag {
background: none;
background-color: none;
border: none;
font-size: 14px;
color: #606266;
.el-tag__close {
width: 14px;
height: 14px;
line-height: 14px;
font-size: 12px;
color: #fff;
background: #DCDFE6;
}
}
}
.add-search-select {
.el-select {
line-height: 32px;
span {
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
}
}
.all-select-options {
.el-checkbox {
margin-right: 16px;
line-height: 32px;
&+.el-checkbox {
margin-left: 0;
}
}
}
.slected-opyions {
.el-tag {
background: none;
background-color: none;
border: none;
font-size: 14px;
color: #606266;
.el-tag__close {
width: 14px;
height: 14px;
line-height: 14px;
font-size: 12px;
color: #fff;
background: #DCDFE6;
}
}
&.city-slected-opyions {
.el-tag {
background: #F4F4F5;
border: 1px solid rgba(233,233,235,1);
font-size: 12px;
color: #909399;
.el-tag__close {
width: 14px;
height: 14px;
line-height: 14px;
font-size: 12px;
color: #fff;
background: #DCDFE6;
}
}
}
}
.city-checkbox {
position: relative;
height: 50px;
line-height: 50px;
padding: 0 8px;
&.city-checkbox-all {
background: #F1F3F7;
}
}
</style> </style>
static/css/public.css
...@@ -334,6 +334,10 @@ input:focus { ...@@ -334,6 +334,10 @@ input:focus {
margin-left: 16px; margin-left: 16px;
} }
.m-l-20 {
margin-left: 20px;
}
.m-t-10 { .m-t-10 {
margin-top: 10px; margin-top: 10px;
} }
...@@ -350,10 +354,18 @@ input:focus { ...@@ -350,10 +354,18 @@ input:focus {
margin-right: 8px; margin-right: 8px;
} }
.m-r-20 {
margin-right: 20px;
}
.m-b-20 { .m-b-20 {
margin-bottom: 20px; margin-bottom: 20px;
} }
.p-20 {
padding: 20px;
}
.p-lr-4 { .p-lr-4 {
padding: 0 4px; padding: 0 4px;
} }
...@@ -1071,4 +1083,15 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { ...@@ -1071,4 +1083,15 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
line-height: 60px; line-height: 60px;
} }
.add-search-select .el-select span {
display: none;
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.city-select-wrap .el-tabs__content {
overflow: unset;
}
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