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);
|
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 ElementPlus from 'element-plus'
|
||||||
|
import locale from 'element-plus/lib/locale/lang/zh-cn'
|
||||||
import 'element-plus/lib/theme-chalk/index.css'
|
import 'element-plus/lib/theme-chalk/index.css'
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
|
|
@ -18,5 +19,5 @@ app.config.globalProperties.$HAS = permission;
|
||||||
|
|
||||||
app.use(store);
|
app.use(store);
|
||||||
app.use(router);
|
app.use(router);
|
||||||
app.use(ElementPlus, { size: 'small', zIndex: 3000 });
|
app.use(ElementPlus, { size: 'small', zIndex: 3000 ,locale: locale});
|
||||||
app.mount('#app');
|
app.mount('#app');
|
||||||
|
|
|
||||||
|
|
@ -1,277 +1,114 @@
|
||||||
<template>
|
<template>
|
||||||
<el-main>
|
<el-main>
|
||||||
<el-card shadow="never">
|
<el-card shadow="never">
|
||||||
<div class="sc-filterBar">
|
<scFilterBar :options="options" :defaultFilter="defaultFilter" @change="change"></scFilterBar>
|
||||||
<div class="sc-filterBar-tags">
|
</el-card>
|
||||||
<el-space wrap>
|
<el-alert title="SCUI 独创的过滤条Filterbar,可配置不同类型的过滤字段,以及异步获取数据,操作上方过滤条查看下方change事件的回调,在表格查询的场景下非常合适" type="success" style="margin:20px 0;"></el-alert>
|
||||||
|
<el-card shadow="never">
|
||||||
|
<pre>{{ filterData }}</pre>
|
||||||
<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>
|
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-main>
|
</el-main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import scFilterBar from '@/components/scFilterBar';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'filterBar',
|
name: 'filterBar',
|
||||||
|
components: {
|
||||||
|
scFilterBar
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isadd: false,
|
filterData : {},
|
||||||
selectLoading: false,
|
defaultFilter : [],
|
||||||
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"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
label: '姓名',
|
label: '输入框',
|
||||||
value: 'name',
|
value: 'name',
|
||||||
type: 'text'
|
type: 'text'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '性别',
|
label: '固定下拉框',
|
||||||
value: 'sex',
|
value: 'type',
|
||||||
type: 'select',
|
type: 'select',
|
||||||
extend: {
|
extend: {
|
||||||
data:[
|
data:[
|
||||||
{
|
{
|
||||||
value: '1',
|
label: "选项1",
|
||||||
label: '男'
|
value: "1"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: '2',
|
label: "选项2",
|
||||||
label: '女'
|
value: "2"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '日期',
|
label: '固定下拉框(多选)',
|
||||||
value: 'date',
|
value: 'type2',
|
||||||
type: 'date',
|
|
||||||
extend: {
|
|
||||||
type: 'date'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '标签(多选)',
|
|
||||||
value: 'tags',
|
|
||||||
type: 'select',
|
type: 'select',
|
||||||
extend: {
|
extend: {
|
||||||
multiple: true,
|
multiple: true,
|
||||||
data: [{
|
data:[
|
||||||
value: '选项1',
|
{
|
||||||
label: '黄金糕'
|
label: "选项1",
|
||||||
}, {
|
value: "1"
|
||||||
value: '选项2',
|
},
|
||||||
label: '双皮奶'
|
{
|
||||||
}, {
|
label: "选项2",
|
||||||
value: '选项3',
|
value: "2"
|
||||||
label: '蚵仔煎'
|
}
|
||||||
}, {
|
]
|
||||||
value: '选项4',
|
|
||||||
label: '龙须面'
|
|
||||||
}, {
|
|
||||||
value: '选项5',
|
|
||||||
label: '北京烤鸭'
|
|
||||||
}]
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '角色(异步多选)',
|
label: '异步下拉框',
|
||||||
value: 'group',
|
value: 'type3',
|
||||||
type: 'select',
|
type: 'select',
|
||||||
extend: {
|
extend: {
|
||||||
url: this.$API.user.info.url,
|
request: async () => {
|
||||||
data: []
|
var list = await this.$API.demo.select.get();
|
||||||
|
return list.data;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '产品(远程搜索)',
|
label: '远程搜索下拉框',
|
||||||
value: 'cp',
|
value: 'type4',
|
||||||
type: 'select',
|
type: 'select',
|
||||||
extend: {
|
extend: {
|
||||||
remote: true,
|
remote: true,
|
||||||
url: this.$API.user.info.url,
|
request: async (query) => {
|
||||||
data: []
|
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: {
|
methods: {
|
||||||
remoteMethod(query){
|
change(data){
|
||||||
if(query !== ''){
|
this.filterData = data;
|
||||||
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)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style>
|
||||||
.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