This commit is contained in:
sc
parent
308af9e71f
commit
be74adb9f4
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"code": 200,
|
||||
"data": [
|
||||
{
|
||||
"label": "选项1",
|
||||
"value": "1"
|
||||
},
|
||||
{
|
||||
"label": "选项2",
|
||||
"value": "2"
|
||||
},
|
||||
{
|
||||
"label": "选项3",
|
||||
"value": "3"
|
||||
},
|
||||
{
|
||||
"label": "选项4",
|
||||
"value": "4"
|
||||
},
|
||||
{
|
||||
"label": "选项5",
|
||||
"value": "5"
|
||||
},
|
||||
{
|
||||
"label": "选项6",
|
||||
"value": "6"
|
||||
}
|
||||
],
|
||||
"message": ""
|
||||
}
|
||||
|
|
@ -18,6 +18,15 @@ const api = {
|
|||
return await http.get(this.url);
|
||||
}
|
||||
}
|
||||
},
|
||||
demo: {
|
||||
select: {
|
||||
url: `${config.apiUrl}/json/select.json`,
|
||||
name: "下拉菜单数据",
|
||||
get: async function(data){
|
||||
return await http.get(this.url, data);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,240 @@
|
|||
<template>
|
||||
<div class="sc-filterBar">
|
||||
<div class="sc-filterBar-scrollbar" ref="scFilterBarScrollbar">
|
||||
<div class="sc-filterBar-tags">
|
||||
<div class="filter-tag" v-for="item in filter" :key="item.keyLabel"><span class="field">{{item.keyLabel}}</span><span class="value">{{item.valueLabel}}<i @click="handleClose(item)" class="el-icon-close"></i></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<el-popover title="新建过滤器" :width="550" trigger="manual" v-model:visible="isadd">
|
||||
<template #reference>
|
||||
<el-button class="button-new-tag" size="small" type="primary" @click="openAdd" icon="el-icon-zoom-in"></el-button>
|
||||
</template>
|
||||
<el-form ref="ruleForm" :model="addFilterForm" :rules="addFilterRules" label-width="80px" style="padding-top:10px;">
|
||||
<el-form-item label="字段" prop="field">
|
||||
<el-select v-model="addFilterForm.field" placeholder="请选择" value-key="value" @change="fieldChange" filterable clearable>
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item" :disabled="item.disabled">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="值" prop="value">
|
||||
|
||||
<el-input v-if="!addFilterForm.field.type" v-model="addFilterForm.value" placeholder="请先选择过滤字段" disabled style="width: 400px;"></el-input>
|
||||
|
||||
<el-input v-if="addFilterForm.field.type=='text'" v-model="addFilterForm.value" placeholder="请输入内容" clearable style="width: 400px;"></el-input>
|
||||
|
||||
<el-select v-if="addFilterForm.field.type=='select'" v-model="addFilterForm.value" :loading="selectLoading" :multiple="addFilterForm.field.extend?addFilterForm.field.extend.multiple:false" :remote="addFilterForm.field.extend?addFilterForm.field.extend.remote:false" @visible-change="visibleChange($event)" :remote-method="remoteMethod" filterable clearable placeholder="请选择/输入关键词" style="width: 400px;">
|
||||
<el-option v-for="item in addFilterForm.field.extend.data" :key="item.value" value-key="value" :label="item.label" :value="item"></el-option>
|
||||
</el-select>
|
||||
|
||||
<el-date-picker v-if="addFilterForm.field.type=='date'" v-model="addFilterForm.value" type="date" placeholder="请选择日期" style="width: 400px;"></el-date-picker>
|
||||
<el-date-picker v-if="addFilterForm.field.type=='daterange'" v-model="addFilterForm.value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="请选择日期" style="width: 400px;"></el-date-picker>
|
||||
<el-date-picker v-if="addFilterForm.field.type=='datetime'" v-model="addFilterForm.value" type="datetime" placeholder="请选择日期" style="width: 400px;"></el-date-picker>
|
||||
<el-date-picker v-if="addFilterForm.field.type=='datetimerange'" v-model="addFilterForm.value" type="datetimerange" :default-time="defaultTime" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="请选择日期" style="width: 400px;"></el-date-picker>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item >
|
||||
<el-button class="button-new-tag" type="primary" @click="ok" icon="el-icon-search">立即过滤</el-button>
|
||||
<el-button class="button-new-tag" @click="cancel">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-popover>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'filterBar',
|
||||
props: {
|
||||
options: { type: Object, default: () => {} },
|
||||
defaultFilter: { type: Object, default: () => {} }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultTime: [
|
||||
new Date(2000, 1, 1, 0, 0, 0),
|
||||
new Date(2000, 2, 1, 23, 59, 59)
|
||||
],
|
||||
isadd: false,
|
||||
selectLoading: false,
|
||||
addFilterForm: {
|
||||
field: '',
|
||||
value: ''
|
||||
},
|
||||
addFilterRules: {
|
||||
field: [{required: true, message: '请选择过滤字段', trigger: 'change'}],
|
||||
value: [{required: true, message: '过滤值不能为空', trigger: 'change'}]
|
||||
},
|
||||
filter: []
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.filter = this.defaultFilter;
|
||||
this.scrollInit()
|
||||
},
|
||||
methods: {
|
||||
openAdd(){
|
||||
if(this.isadd){
|
||||
this.isadd = false;
|
||||
}else{
|
||||
this.isadd = true;
|
||||
}
|
||||
|
||||
//判断已有数据，禁用处理
|
||||
for(let f of this.options){
|
||||
const _f = this.filter.find((item)=>{return item.key === f.value});
|
||||
if(_f){
|
||||
f.disabled = true
|
||||
}else{
|
||||
f.disabled = false
|
||||
}
|
||||
}
|
||||
},
|
||||
async remoteMethod(query){
|
||||
if(query !== ''){
|
||||
this.selectLoading = true;
|
||||
var data = await this.addFilterForm.field.extend.request(query);
|
||||
this.addFilterForm.field.extend.data = data;
|
||||
this.selectLoading = false;
|
||||
}else{
|
||||
this.addFilterForm.field.extend.data = [];
|
||||
}
|
||||
},
|
||||
async visibleChange(isopen){
|
||||
if(isopen && this.addFilterForm.field.extend && this.addFilterForm.field.extend.request && !this.addFilterForm.field.extend.remote){
|
||||
//如果字段类型为异步获取数据就在这里处理
|
||||
this.selectLoading = true;
|
||||
var data = await this.addFilterForm.field.extend.request();
|
||||
this.addFilterForm.field.extend.data = data;
|
||||
this.selectLoading = false;
|
||||
}
|
||||
},
|
||||
fieldChange(){
|
||||
this.addFilterForm.value = '';
|
||||
if(this.addFilterForm.field.type=='select'){
|
||||
this.addFilterForm.field.type=''
|
||||
this.$nextTick(() => {
|
||||
this.addFilterForm.field.type='select'
|
||||
})
|
||||
}
|
||||
if(this.addFilterForm.field.type=='date'){
|
||||
this.addFilterForm.field.type=''
|
||||
this.$nextTick(() => {
|
||||
this.addFilterForm.field.type='date'
|
||||
})
|
||||
}
|
||||
},
|
||||
ok() {
|
||||
this.$refs.ruleForm.validate((valid) => {
|
||||
if (valid) {
|
||||
var item = {
|
||||
keyLabel: this.addFilterForm.field.label,
|
||||
valueLabel: this.addFilterForm.value,
|
||||
key: this.addFilterForm.field.value,
|
||||
value: this.addFilterForm.value
|
||||
}
|
||||
if(this.addFilterForm.field.type=='select'){
|
||||
if(this.addFilterForm.field.extend && this.addFilterForm.field.extend.multiple){
|
||||
item.valueLabel = this.addFilterForm.value.map(v => v.label).join(",");
|
||||
item.value = this.addFilterForm.value.map(v => v.value).join(",");
|
||||
}else{
|
||||
item.valueLabel = this.addFilterForm.value.label;
|
||||
item.value = this.addFilterForm.value.value;
|
||||
}
|
||||
}
|
||||
if(this.addFilterForm.field.type=='date'){
|
||||
item.valueLabel = this.dateFormat(this.addFilterForm.value, 'yyyy-MM-dd');
|
||||
item.value = this.dateFormat(this.addFilterForm.value, 'yyyy-MM-dd');
|
||||
}
|
||||
if(this.addFilterForm.field.type=='datetime'){
|
||||
item.valueLabel = this.dateFormat(this.addFilterForm.value, 'yyyy-MM-dd hh:mm:ss');
|
||||
item.value = this.dateFormat(this.addFilterForm.value, 'yyyy-MM-dd hh:mm:ss');
|
||||
}
|
||||
if(this.addFilterForm.field.type=='daterange'){
|
||||
item.valueLabel = this.addFilterForm.value.map(item => this.dateFormat(item, 'yyyy-MM-dd')).join(" - ")
|
||||
item.value = this.addFilterForm.value.map(item => this.dateFormat(item, 'yyyy-MM-dd')).join(" - ")
|
||||
}
|
||||
if(this.addFilterForm.field.type=='datetimerange'){
|
||||
item.valueLabel = this.addFilterForm.value.map(item => this.dateFormat(item, 'yyyy-MM-dd hh:mm:ss')).join(" - ")
|
||||
item.value = this.addFilterForm.value.map(item => this.dateFormat(item, 'yyyy-MM-dd hh:mm:ss')).join(" - ")
|
||||
}
|
||||
this.filter.push(item);
|
||||
this.cancel();
|
||||
this.change();
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
cancel(){
|
||||
this.isadd = false;
|
||||
this.addFilterForm.value = '';
|
||||
this.$refs.ruleForm.resetFields();
|
||||
},
|
||||
handleClose(item) {
|
||||
this.filter = this.filter.filter(obj => obj.key !== item.key);
|
||||
this.cancel();
|
||||
this.change();
|
||||
},
|
||||
change(){
|
||||
var _filter = this.filter;
|
||||
var formatData = {};
|
||||
_filter.map(item => {
|
||||
formatData.[item.key]=item.value
|
||||
});
|
||||
this.$emit('change', formatData)
|
||||
},
|
||||
scrollInit(){
|
||||
const scrollDiv = this.$refs.scFilterBarScrollbar;
|
||||
scrollDiv.addEventListener('mousewheel', handler, false)
|
||||
function handler(event) {
|
||||
const detail = event.wheelDelta || event.detail;
|
||||
const moveForwardStep = 1;
|
||||
const moveBackStep = -1;
|
||||
let step = 0;
|
||||
if (detail < 0) {
|
||||
step = moveForwardStep * 50;
|
||||
}else{
|
||||
step = moveBackStep * 50;
|
||||
}
|
||||
scrollDiv.scrollLeft += step;
|
||||
}
|
||||
},
|
||||
dateFormat(date, fmt='yyyy-MM-dd'){
|
||||
date = new Date(date)
|
||||
var o = {
|
||||
"M+" : date.getMonth()+1, //月份
|
||||
"d+" : date.getDate(), //日
|
||||
"h+" : date.getHours(), //小时
|
||||
"m+" : date.getMinutes(), //分
|
||||
"s+" : date.getSeconds(), //秒
|
||||
"q+" : Math.floor((date.getMonth()+3)/3), //季度
|
||||
"S" : date.getMilliseconds() //毫秒
|
||||
};
|
||||
if(/(y+)/.test(fmt)) {
|
||||
fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
|
||||
}
|
||||
for(var k in o) {
|
||||
if(new RegExp("("+ k +")").test(fmt)){
|
||||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
|
||||
}
|
||||
}
|
||||
return fmt;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-filterBar {height: 32px;display: flex;align-items:center;}
|
||||
.sc-filterBar-scrollbar {overflow: auto;}
|
||||
.sc-filterBar-scrollbar::-webkit-scrollbar {display: none;}
|
||||
.sc-filterBar-tags {display: flex;}
|
||||
.filter-tag {display: flex;flex-shrink: 0;padding-right:10px;}
|
||||
.filter-tag .field {display: inline-block;background-color: #d9ecff;color: #409eff;height: 32px;line-height: 30px;padding: 0 10px;border-radius: 4px 0 0 4px;border: 1px solid #d9ecff;border-right: 0;}
|
||||
.filter-tag .value {display: inline-block;background-color: #ecf5ff;color: #409eff;height: 32px;line-height: 30px;padding: 0 10px;border-radius: 0 4px 4px 0;border: 1px solid #d9ecff;border-left: 0;}
|
||||
.filter-tag i {height: 16px;width: 16px;line-height: 16px;cursor: pointer;text-align: center;vertical-align: middle;position: relative;top: -1px;right: -5px;border-radius: 50%;}
|
||||
.filter-tag i:hover {background-color: #409eff;color: #FFF;}
|
||||
</style>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import ElementPlus from 'element-plus'
|
||||
import locale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
import 'element-plus/lib/theme-chalk/index.css'
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
|
@ -18,5 +19,5 @@ app.config.globalProperties.$HAS = permission;
|
|||
|
||||
app.use(store);
|
||||
app.use(router);
|
||||
app.use(ElementPlus, { size: 'small', zIndex: 3000 });
|
||||
app.use(ElementPlus, { size: 'small', zIndex: 3000 ,locale: locale});
|
||||
app.mount('#app');
|
||||
|
|
|
|||
|
|
@ -1,277 +1,114 @@
|
|||
<template>
|
||||
<el-main>
|
||||
<el-card shadow="never">
|
||||
<div class="sc-filterBar">
|
||||
<div class="sc-filterBar-tags">
|
||||
<el-space wrap>
|
||||
|
||||
|
||||
<div class="filter-tag" v-for="item in filter"><span class="field">{{item.keyLabel}}</span><span class="value">{{item.valueLabel}}<i @click="handleClose(item)" class="el-icon-close"></i></span></div>
|
||||
|
||||
<el-popover title="新建过滤器" :width="550" trigger="manual" v-model:visible="isadd">
|
||||
<template #reference>
|
||||
<el-button class="button-new-tag" size="mini" type="primary" @click="isadd=true" icon="el-icon-zoom-in"></el-button>
|
||||
</template>
|
||||
|
||||
<el-form ref="ruleForm" :model="addFilterForm" :rules="addFilterRules" label-width="80px">
|
||||
<el-form-item label="字段" prop="field">
|
||||
<el-select v-model="addFilterForm.field" placeholder="请选择" value-key="value" @change="fieldChange" filterable clearable>
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="值" prop="value">
|
||||
|
||||
<el-input v-if="!addFilterForm.field.type" v-model="addFilterForm.value" placeholder="请先选择过滤字段" disabled style="width: 400px;"></el-input>
|
||||
|
||||
<el-input v-if="addFilterForm.field.type=='text'" v-model="addFilterForm.value" placeholder="请输入内容" style="width: 400px;"></el-input>
|
||||
|
||||
<el-select v-if="addFilterForm.field.type=='select'" v-model="addFilterForm.value" :loading="selectLoading" :multiple="addFilterForm.field.extend?addFilterForm.field.extend.multiple:false" :remote="addFilterForm.field.extend?addFilterForm.field.extend.remote:false" @visible-change="visibleChange($event)" :remote-method="remoteMethod" filterable clearable placeholder="请选择/输入关键词" style="width: 400px;">
|
||||
<el-option v-for="item in addFilterForm.field.extend.data" :key="item.value" value-key="value" :label="item.label" :value="item"></el-option>
|
||||
</el-select>
|
||||
|
||||
<el-date-picker v-if="addFilterForm.field.type=='date'" v-model="addFilterForm.value" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item >
|
||||
<el-button class="button-new-tag" type="primary" @click="ok" icon="el-icon-search">立即过滤</el-button>
|
||||
<el-button class="button-new-tag" @click="cancel">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</el-popover>
|
||||
</el-space>
|
||||
</div>
|
||||
<div class="el-input__inner"></div>
|
||||
</div>
|
||||
<scFilterBar :options="options" :defaultFilter="defaultFilter" @change="change"></scFilterBar>
|
||||
</el-card>
|
||||
<el-alert title="SCUI 独创的过滤条Filterbar,可配置不同类型的过滤字段,以及异步获取数据,操作上方过滤条查看下方change事件的回调,在表格查询的场景下非常合适" type="success" style="margin:20px 0;"></el-alert>
|
||||
<el-card shadow="never">
|
||||
<pre>{{ filterData }}</pre>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scFilterBar from '@/components/scFilterBar';
|
||||
|
||||
export default {
|
||||
name: 'filterBar',
|
||||
components: {
|
||||
scFilterBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isadd: false,
|
||||
selectLoading: false,
|
||||
addFilterForm: {
|
||||
field: '',
|
||||
value: ''
|
||||
},
|
||||
addFilterRules: {
|
||||
field: [{required: true, message: '请选择过滤字段'}],
|
||||
value: [{required: true, message: '过滤值不能为空'}]
|
||||
},
|
||||
filter: [
|
||||
{
|
||||
keyLabel: "姓名",
|
||||
valueLabel: "sakuya",
|
||||
key: "name",
|
||||
value: "sakuya"
|
||||
},
|
||||
{
|
||||
keyLabel: "日期",
|
||||
valueLabel: "2018-10-10",
|
||||
key: "data",
|
||||
value: "2018-10-10"
|
||||
}
|
||||
],
|
||||
filterData : {},
|
||||
defaultFilter : [],
|
||||
options: [
|
||||
{
|
||||
label: '姓名',
|
||||
label: '输入框',
|
||||
value: 'name',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: '性别',
|
||||
value: 'sex',
|
||||
label: '固定下拉框',
|
||||
value: 'type',
|
||||
type: 'select',
|
||||
extend: {
|
||||
data: [
|
||||
data:[
|
||||
{
|
||||
value: '1',
|
||||
label: '男'
|
||||
label: "选项1",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '女'
|
||||
label: "选项2",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '日期',
|
||||
value: 'date',
|
||||
type: 'date',
|
||||
extend: {
|
||||
type: 'date'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '标签(多选)',
|
||||
value: 'tags',
|
||||
label: '固定下拉框(多选)',
|
||||
value: 'type2',
|
||||
type: 'select',
|
||||
extend: {
|
||||
multiple: true,
|
||||
data: [{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '双皮奶'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}]
|
||||
data:[
|
||||
{
|
||||
label: "选项1",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "选项2",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '角色(异步多选)',
|
||||
value: 'group',
|
||||
label: '异步下拉框',
|
||||
value: 'type3',
|
||||
type: 'select',
|
||||
extend: {
|
||||
url: this.$API.user.info.url,
|
||||
data: []
|
||||
request: async () => {
|
||||
var list = await this.$API.demo.select.get();
|
||||
return list.data;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '产品(远程搜索)',
|
||||
value: 'cp',
|
||||
label: '远程搜索下拉框',
|
||||
value: 'type4',
|
||||
type: 'select',
|
||||
extend: {
|
||||
remote: true,
|
||||
url: this.$API.user.info.url,
|
||||
data: []
|
||||
request: async (query) => {
|
||||
var data = {
|
||||
keyword: query,
|
||||
}
|
||||
var list = await this.$API.demo.select.get(data);
|
||||
return list.data;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '日期单选',
|
||||
value: 'date',
|
||||
type: 'date',
|
||||
},
|
||||
{
|
||||
label: '日期范围',
|
||||
value: 'date2',
|
||||
type: 'daterange',
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
remoteMethod(query){
|
||||
if(query !== ''){
|
||||
this.selectLoading = true;
|
||||
setTimeout(() => {
|
||||
this.addFilterForm.field.extend.data = [
|
||||
{
|
||||
value: '1',
|
||||
label: '异步模拟数据:'+query
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '异步模拟数据:'+query
|
||||
}
|
||||
]
|
||||
this.selectLoading = false;
|
||||
}, 200);
|
||||
}else{
|
||||
this.addFilterForm.field.extend.data = [];
|
||||
}
|
||||
},
|
||||
visibleChange(isopen){
|
||||
if(isopen && this.addFilterForm.field.extend && this.addFilterForm.field.extend.url && !this.addFilterForm.field.extend.remote){
|
||||
//如果字段类型为异步获取数据就在这里处理
|
||||
console.log(this.addFilterForm.field.extend.url);
|
||||
this.selectLoading = true;
|
||||
var _this = this;
|
||||
setTimeout(function() {
|
||||
_this.addFilterForm.field.extend.data = [
|
||||
{
|
||||
value: '1',
|
||||
label: '异步模拟数据1'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '异步模拟数据2'
|
||||
}
|
||||
]
|
||||
_this.selectLoading = false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
},
|
||||
fieldChange(){
|
||||
this.addFilterForm.value = '';
|
||||
if(this.addFilterForm.field.type=='select'){
|
||||
this.addFilterForm.field.type=''
|
||||
this.$nextTick(() => {
|
||||
this.addFilterForm.field.type='select'
|
||||
})
|
||||
}
|
||||
},
|
||||
ok() {
|
||||
this.$refs.ruleForm.validate((valid) => {
|
||||
if (valid) {
|
||||
var item = {
|
||||
keyLabel: this.addFilterForm.field.label,
|
||||
valueLabel: this.addFilterForm.value,
|
||||
key: this.addFilterForm.field.value,
|
||||
value: this.addFilterForm.value
|
||||
}
|
||||
if(this.addFilterForm.field.type=='select'){
|
||||
item.valueLabel = this.addFilterForm.value.label;
|
||||
item.value = this.addFilterForm.value.value;
|
||||
}
|
||||
this.filter.push(item);
|
||||
this.cancel()
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
cancel(){
|
||||
this.isadd = false;
|
||||
this.addFilterForm.value = '';
|
||||
this.$refs.ruleForm.resetFields();
|
||||
},
|
||||
handleClose(item) {
|
||||
this.filter = this.filter.filter(obj => obj.key !== item.key)
|
||||
change(data){
|
||||
this.filterData = data;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-filterBar {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.sc-filterBar .el-input__inner {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.sc-filterBar .sc-filterBar-tags {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button-new-tag {
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.filter-tag {}
|
||||
.filter-tag .field {display: inline-block;background-color: #d9ecff;color: #409eff;height: 32px;line-height: 30px;padding: 0 10px;border-radius: 4px 0 0 4px;border: 1px solid #d9ecff;}
|
||||
.filter-tag .value {display: inline-block;background-color: #ecf5ff;color: #409eff;height: 32px;line-height: 30px;padding: 0 10px;border-radius: 0 4px 4px 0;border: 1px solid #d9ecff;}
|
||||
.filter-tag i {height: 16px;width: 16px;line-height: 16px;cursor: pointer;text-align: center;vertical-align: middle;position: relative;top: -1px;right: -5px;border-radius: 50%;}
|
||||
.filter-tag i:hover {background-color: #409eff;color: #FFF;}
|
||||
<style>
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue