<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
<link rel="stylesheet" href="https://unpkg.com/everright-filter@1.1.1/dist/EverrightFilter-without-element-plus.css">
<!-- import JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/element-plus"></script>
<script src="https://unpkg.com/everright-filter@1.1.1/dist/EverrightFilter-without-element-plus.iife.js"></script>
<title>Everright-filter demo</title>
</head>
<body>
<div id="app">
<el-form label-width="120px">
<el-form-item label="Lang">
<el-radio-group v-model="lang" @change="handleLang">
<el-radio label="zh-cn" size="large">中文</el-radio>
<el-radio label="en" size="large">English</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="filter type">
<el-radio-group v-model="state.type">
<el-radio label="linear" size="large" border>Linear(一维)</el-radio>
<el-radio label="matrix" size="large" border>Matrix(二维)</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<Everright-Filter
:lang="lang"
ref="ERfilterRef"
:type="state.type"
:get-options="getOptions"
:get-conditions="getConditions"
:get-props="getProps"
:get-prop-values="getConditions"
@listener="handleListener"
v-if="isReRender"
></Everright-Filter>
<el-button @click="() => handleEvent(1)" type="primary">Set Data</el-button>
<el-button @click="() => handleEvent(2)" type="primary">Reset Data</el-button>
<el-button @click="() => handleEvent(5)" type="primary">Clear Data</el-button>
<el-button @click="() => handleEvent(3)" type="primary">Get Data</el-button>
<el-button v-if="state.type === 'linear'" @click="() => handleEvent(4)" type="primary">手动添加一条</el-button>
<el-input
type="textarea"
readonly
:rows="15"
placeholder="请输入内容"
:model-value="JSON.stringify(state.value0, '', 2)"
></el-input>
</div>
<script>
const optionData = {
matrix: {
options: [
{
label: "属性",
en_label: "properties",
value: "customer",
children: [
{
label: "级联(单选)",
en_label: "cascader(multiple = false)",
renderType: "CASCADER",
operatorKey: "Gender",
value: "cascader01"
},
{
label: "级联(multiple = true)",
en_label: "cascader(multiple = true)",
renderType: "CASCADER",
operatorKey: "Gender",
value: "cascader02",
multiple: true
},
{
label: "下拉(multipleLimit = 2)",
en_label: "select(multipleLimit = 2)",
renderType: "SELECT",
operatorKey: "Gender",
value: "Gender",
multiple: true,
multipleLimit: 2
},
{
label: "下拉(multiple = false)",
en_label: "select(multiple = false)",
renderType: "SELECT",
operatorKey: "Gender",
value: "Gender11111",
multiple: false,
multipleLimit: 2
},
{
label: "地区",
en_label: "region",
renderType: "REGION",
operatorKey: "Gender",
value: "Region",
multiple: false
// selectType: 1 default 3
},
{
label: "文本",
en_label: "text",
renderType: "TEXT",
operatorKey: "Text",
value: "text"
},
{
operatorKey: "Number",
label: "数字",
en_label: "number",
value: "rating",
renderType: "NUMBER"
// precision: 0,
// min: 0,
// max: 200,
// step: 10
},
{
operatorKey: "Time",
label: "时间(时分)",
en_label: "time(hour minute)",
value: "time0",
renderType: "TIME",
format: "HH:mm"
},
{
operatorKey: "Time",
label: "时间(时分秒)",
en_label: "time(hour minute second)",
value: "time1",
renderType: "TIME",
format: "HH:mm:ss"
},
{
operatorKey: "Date",
label: "日期(默认全部功能)",
en_label: "日期(Default full function)",
value: "Date0",
renderType: "DATE"
// excludeOperator: {
// dateOperator:['date', 'year', 'month', 'day'],
// operator: ['equal']
// }
// datePanel: {
// excludeShortcuts: ['today_today'],
// excludeManuals: ['intervalBetween'],
// manualType: 3 // default = 3; 1=days 2=hours 3 = can choose the hours or days
// }
},
{
operatorKey: "Date",
label: "日期(天manualType = 1)",
en_label: "data(天manualType = 1)",
value: "Date1",
renderType: "DATE",
// excludeOperator: {
// dateOperator:['date', 'year', 'month', 'day'],
// operator: ['equal']
// }
datePanel: {
// excludeShortcuts: ['today_today'],
// excludeManuals: ['intervalBetween'],
manualType: 1 // default = 3; 1=days 2=hours 3 = can choose the hours or days
}
},
{
operatorKey: "Date",
label: "日期(时manualType = 2)",
value: "Date2",
renderType: "DATE",
// excludeOperator: {
// dateOperator:['date', 'year', 'month', 'day'],
// operator: ['equal']
// }
datePanel: {
// excludeShortcuts: ['today_today'],
// excludeManuals: ['intervalBetween'],
manualType: 2 // default = 3; 1=days 2=hours 3 = can choose the hours or days
}
},
{
operatorKey: "Date",
label: "日期(时manualType = 3)",
value: "Date3",
renderType: "DATE",
// excludeOperator: {
// dateOperator:['date', 'year', 'month', 'day'],
// operator: ['equal']
// }
datePanel: {
// excludeShortcuts: ['today_today'],
// excludeManuals: ['intervalBetween'],
manualType: 3 // default = 3; 1=days 2=hours 3 = can choose the hours or days
}
},
{
operatorKey: "Date",
label: "日期(Exclude equal and date operators (date))",
value: "Date4",
renderType: "DATE",
excludeOperator: {
dateOperator: ["date"],
operator: ["equal"]
},
datePanel: {
// excludeShortcuts: ['today_today'],
// excludeManuals: ['intervalBetween'],
manualType: 3 // default = 3; 1=days 2=hours 3 = can choose the hours or days
}
},
{
operatorKey: "Date",
label: "日期(only Exact Date)",
value: "Date5",
renderType: "DATE",
// excludeOperator: {
// dateOperator: ['date'],
// operator: ['equal']
// },
datePanel: {
excludeShortcuts: -1,
excludeManuals: -1
// manualType: 3 // default = 3; 1=days 2=hours 3 = can choose the hours or days
}
},
{
operatorKey: "Date",
label: "日期(dates)",
value: "Date6",
renderType: "DATE",
datePanel: {
excludeShortcuts: -1,
excludeManuals: -1,
pickerType: "dates"
}
},
{
operatorKey: "Date",
label: "日期(datetime)",
value: "Date7",
renderType: "DATE",
includeOperator: {
dateOperator: ["date"]
},
datePanel: {
excludeShortcuts: -1,
excludeManuals: -1,
pickerType: "datetime"
}
}
]
},
{
label: "行为",
en_label: "behavior",
value: "behavior",
children: [
{
label: "更新昵称",
en_label: "Update nickname",
renderType: "NONE",
operatorKey: "Gender",
value: "Gende111r",
isShowOperator: false,
constraint: [
{
type: "times"
},
{
type: "date",
datePanel: {
excludeShortcuts: ["today_today"],
excludeManuals: ["intervalBetween"],
manualType: 1
// manualType: 3 default = 3
}
},
{
type: "props"
}
]
},
{
label: "更新昵称(无props)",
en_label: "更新昵称(No props)",
renderType: "NONE",
operatorKey: "Gender",
value: "Gende111r0",
isShowOperator: false,
constraint: [
{
type: "times"
},
{
type: "date",
datePanel: {
excludeShortcuts: ["today_today"],
excludeManuals: ["intervalBetween"],
manualType: 1
// manualType: 3 default = 3
}
}
]
}
]
}
],
operators: {
Gender: [
{
label: "等于",
en_label: "Equal",
value: "equal",
style: "noop"
},
{
label: "等于其中之一",
en_label: "Equal to one of",
value: "one_of",
style: "tags"
},
{
label: "不等于",
en_label: "Not equal",
value: "not_equal",
style: "noop"
},
{
label: "包含",
en_label: "Contains",
value: "contains",
style: "noop"
},
{
label: "不包含",
en_label: "Not contain",
value: "not_contain",
style: "noop"
},
{
label: "为空",
en_label: "Empty",
value: "empty",
style: "none"
},
{
label: "不为空",
en_label: "Not empty",
value: "not_empty",
style: "none"
}
],
Text: [
{
label: "等于",
en_label: "Equal",
value: "equal",
style: "noop"
},
{
label: "等于其中之一",
en_label: "Equal to one of",
value: "one_of",
style: "tags"
},
{
label: "不等于",
en_label: "Not equal",
value: "not_equal",
style: "noop"
},
{
label: "包含",
en_label: "Contains",
value: "contains",
style: "noop"
},
{
label: "不包含",
en_label: "Not contain",
value: "not_contain",
style: "noop"
},
{
label: "为空",
en_label: "Empty",
value: "empty",
style: "none"
},
{
label: "不为空",
en_label: "Not empty",
value: "not_empty",
style: "none"
}
],
Number: [
{
label: "等于",
en_label: "Equal",
value: "equal",
style: "noop"
},
{
label: "不等于",
en_label: "Not equal",
value: "not_equal",
style: "noop"
},
{
label: "大于",
en_label: "Greater than",
value: "greater_than",
style: "noop"
},
{
label: "大于等于",
en_label: "Greater than or equal to",
value: "greater_than_equal",
style: "noop"
},
{
label: "小于",
en_label: "Less than",
value: "less_than",
style: "noop"
},
{
label: "小于等于",
en_label: "Less than or equal to",
value: "less_than_equal",
style: "noop"
},
{
label: "区间",
en_label: "Between",
value: "between",
style: "range"
},
{
label: "为空",
en_label: "Empty",
value: "empty",
style: "none"
},
{
label: "不为空",
en_label: "Not empty",
value: "not_empty",
style: "none"
}
],
Time: [
{
label: "等于",
en_label: "Equal",
value: "equal",
style: "noop"
},
{
label: "不等于",
en_label: "Not equal",
value: "not_equal",
style: "noop"
},
{
label: "大于",
en_label: "Greater than",
value: "greater_than",
style: "noop"
},
{
label: "大于等于",
en_label: "Greater than or equal to",
value: "greater_than_equal",
style: "noop"
},
{
label: "小于",
en_label: "Less than",
value: "less_than",
style: "noop"
},
{
label: "小于等于",
en_label: "Less than or equal to",
value: "less_than_equal",
style: "noop"
},
{
label: "区间",
en_label: "Between",
value: "between",
style: "range"
},
{
label: "为空",
en_label: "Empty",
value: "empty",
style: "none"
},
{
label: "不为空",
en_label: "Not empty",
value: "not_empty",
style: "none"
}
],
Date: [
{
label: "等于",
en_label: "Equal",
value: "equal",
style: "noop"
},
{
label: "不等于",
en_label: "Not equal",
value: "not_equal",
style: "noop"
},
{
label: "大于",
en_label: "Greater than",
value: "greater_than",
style: "noop"
},
{
label: "大于等于",
en_label: "Greater than or equal to",
value: "greater_than_equal",
style: "noop"
},
{
label: "小于",
en_label: "Less than",
value: "less_than",
style: "noop"
},
{
label: "小于等于",
en_label: "Less than or equal to",
value: "less_than_equal",
style: "noop"
},
{
label: "区间",
en_label: "Between",
value: "between",
style: "range"
},
{
label: "为空",
en_label: "Empty",
value: "empty",
style: "none"
},
{
label: "不为空",
en_label: "Not empty",
value: "not_empty",
style: "none"
}
],
TimesOperators: [
{
label: "至少一次",
value: "at_least_once",
style: "none"
},
{
label: "无此行为",
value: "no_actions",
style: "none"
},
{
label: "等于",
value: "equal",
style: "noop"
},
{
label: "少于",
value: "less_than",
style: "noop"
},
{
label: "多于",
value: "greater_than",
style: "noop"
},
{
label: "多于或等于",
value: "greater_than_equal",
style: "noop"
},
{
label: "介于",
value: "between",
style: "range"
}
]
}
}
}
const ruleconditionsData = {
cascader: [
{
value: 'any',
label: '任意图文'
},
{
value: 'name',
label: '选择一个图文',
children: [
{
id: '153218',
label: '无小程序的多图文',
value: 'name#####153218',
children: [
{
value: 'name#####any',
label: '任意图文'
},
{
id: '152723',
label: '125|summary|微信建|多图文1----自动同步？ - Copy',
value: 'name#####152723'
}
]
}, {
id: '152725',
label: '成为大人的一瞬间 - [delete]',
value: 'name#####152725'
}, {
id: '152724',
label: '130 linkcode',
value: 'name#####152724'
}, {
id: '152705',
label: '130 linkcode',
value: 'name#####152705'
}, {
id: '152707',
label: '130 linkcode - Copy',
value: 'name#####152707'
}, {
id: '152723',
label: '125|summary|微信建|多图文1----自动同步？ - Copy',
value: 'name#####152723'
}, {
id: '54589',
label: '125|summary|微信建|多图文1----自动同步？',
value: 'name#####54589'
}, {
id: '152709',
label: 'qqqq',
value: 'name#####152709'
}, {
id: '152708',
label: '图片位置问题',
value: 'name#####152708'
}, {
id: '152706',
label: '触发',
value: 'name#####152706'
}, {
id: '151687',
label: '128|阅读数|老数据',
value: 'name#####151687'
}, {
id: '152435',
label: 'test910 - Copy',
value: 'name#####152435'
}, {
id: '152618',
label: '非原创！！！！',
value: 'name#####152618'
}, {
id: '152617',
label: '在白名单内 显示转载--测试真实预览有留言1',
value: 'name#####152617'
}, {
id: '152616',
label: '在白名单内 显示转载--测试真实预览有留言1',
value: 'name#####152616'
}, {
id: '152622',
label: '在白名单内 显示转载--测试真实预览有留言1',
value: 'name#####152622'
}, {
id: '152621',
label: '在白名单内 显示转载--测试真实预览有留言1',
value: 'name#####152621'
}, {
id: '152620',
label: '在白名单内 显示转载--测试真实预览有留言1',
value: 'name#####152620'
}, {
id: '152619',
label: '在白名单内 显示转载--测试真实预览有留言1',
value: 'name#####152619'
}, {
id: '152614',
label: '在白名单内 显示转载--测试真实预览有留言1',
value: 'name#####152614'
}
]
}
],
select: [
{
label: '未知',
en_label: 'Unknown',
value: '0'
},
{
label: '男',
en_label: 'Male',
value: '1'
},
{
label: '女',
en_label: 'Female',
value: '2'
}
]
}
const propsData = [
{
label: '用户属性',
en_label: 'user property',
value: 'customer',
children: [
{
label: 'province',
renderType: 'TEXT',
operatorKey: 'Text',
value: 'province',
zh_label: 'province'
},
{
label: 'Gender',
renderType: 'SELECT',
operatorKey: 'Gender',
value: 'Gender',
zh_label: 'Gender',
multiple: false,
multipleLimit: 2
},
{
operatorKey: 'Number',
label: '评分',
value: 'rating',
// permission: false,
renderType: 'NUMBER'
// precision: 0,
// min: 0,
// max: 200,
// step: 10
},
{
operatorKey: 'Date',
label: '日期',
value: 'Date0',
renderType: 'DATE',
// excludeOperator: {
// dateOperator:['date', 'year', 'month', 'day'],
// operator: ['equal']
// }
datePanel: {
excludeShortcuts: ['today_today'],
excludeManuals: ['intervalBetween']
// manualType: 3 default = 3
}
},
{
operatorKey: 'Time',
label: '时间(时分)',
value: 'time0',
renderType: 'TIME',
format: 'HH:mm'
},
{
operatorKey: 'Time',
label: '时间(时分秒)',
value: 'time1',
renderType: 'TIME',
format: 'HH:mm:ss'
}
]
}
]
const setData = {
linear: {
"filters": [
{
"conditions": [
{
"operator": "contains",
"property": "text",
"value": "123"
},
{
"operator": "equal",
"property": "cascader01",
"value": "any"
}
],
"logicalOperator": "and"
}
],
"logicalOperator": "and"
},
matrix: {
"filters": [
{
"conditions": [
{
"operator": "equal",
"property": "Gender",
"value": [
"0"
]
},
{
"operator": "not_equal",
"property": "Gender11111",
"value": "1"
},
{
"operator": "one_of",
"property": "Region",
"value": [
"110101",
"110111"
]
},
{
"operator": "equal",
"property": "text",
"value": "123"
},
{
"operator": "equal",
"property": "rating",
"value": 123
},
{
"operator": "equal",
"property": "time0",
"value": "16:30"
},
{
"operator": "equal",
"property": "time1",
"value": "16:30:49"
},
{
"operator": "equal",
"property": "Date0",
"dateOperator": "date",
"value": {
"dateType": "dynamic",
"dateFrom": "- 0 days",
"dateTo": "- 0 days"
}
},
{
"operator": "equal",
"property": "Date1",
"dateOperator": "date",
"value": {
"dateType": "dynamic",
"dateFrom": "- 0 weeks",
"dateTo": "- 0 weeks"
}
},
{
"operator": "equal",
"property": "Date2",
"dateOperator": "date",
"value": {
"dateType": "dynamic",
"dateFrom": "- 0 months",
"dateTo": "- 0 months"
}
},
{
"operator": "equal",
"property": "Date3",
"dateOperator": "date",
"value": {
"dateType": "dynamic",
"dateFrom": "- 0 years",
"dateTo": "- 0 years"
}
},
{
"operator": "not_equal",
"property": "Date4",
"dateOperator": "day",
"value": 31
},
{
"operator": "equal",
"property": "Date5",
"dateOperator": "date",
"value": {
"dateType": "static",
"value": "1680537600"
}
},
{
"operator": "equal",
"property": "Date6",
"dateOperator": "date",
"value": {
"dateType": "static",
"value": [
"1683475200",
"1683648000"
]
}
},
{
"operator": "equal",
"property": "Date7",
"dateOperator": "date",
"value": {
"dateType": "static",
"value": "1683616414"
}
}
],
"logicalOperator": "or"
},
{
"conditions": [
{
"property": "Gende111r",
"constraint": {
"date": {
"dateType": "dynamic",
"dateFrom": "- 1 years",
"dateTo": "- 1 years"
},
"times": {
"operator": "between",
"value": [
12,
22
]
},
"props": [
{
"operator": "equal",
"property": "Gender",
"value": "1"
},
{
"operator": "between",
"property": "rating",
"value": [
10,
99
]
}
]
}
},
{
"property": "Gende111r0",
"constraint": {
"date": {
"dateType": "static",
"value": [
"1679328000",
"1679587200"
]
}
}
}
],
"logicalOperator": "or"
},
{
"conditions": [
{
"operator": "equal",
"property": "cascader01",
"value": "name#####any"
},
{
"operator": "one_of",
"property": "cascader01",
"value": [
"name"
]
},
{
"operator": "equal",
"property": "cascader02",
"value": [
"name#####153218"
]
}
],
"logicalOperator": "and"
}
],
"logicalOperator": "and"
}
}
const { createApp, nextTick } = Vue
const App = {
data() {
return {
state: {
type: 'matrix',
value0: {}
},
lang: 'en',
isReRender: true
}
},
watch: {
'state.type' () {
this.isReRender = false
nextTick(() => {
this.isReRender = true
})
}
},
components: {
EverrightFilter: window["EverrightFilter"].EverrightFilter
},
methods: {
handleEvent (type) {
const {
state,
$refs: {
ERfilterRef
}
} = this
switch (type) {
case 1:
if (state.type === 'linear') {
ERfilterRef.setData(setData.linear)
}
if (state.type === 'matrix') {
ERfilterRef.setData(setData.matrix)
}
break
case 2:
ERfilterRef.clearData()
break
case 3:
state.value0 = ERfilterRef.getData()
break
case 4:
ERfilterRef.pushData('Gender11111')
break
case 5:
ERfilterRef.clearData('values')
break
}
},
handleListener ({ type, data }) {
if (type === 'init') {
this.handleEvent(1)
}
if (type === 'search') {
this.handleEvent(3)
}
},
getOptions () {
return new Promise((resolve, reject) => {
if (/^(linear|matrix)$/.test(this.state.type)) {
resolve({
data: optionData.matrix
})
}
if (this.state.type === 'quick-filter') {
resolve({
data: optionData.quickFilter
})
}
})
},
getConditions ({ property }) {
return new Promise((resolve, reject) => {
let result = []
if (/^(cascader01|cascader02)$/.test(property)) {
result = ruleconditionsData.cascader
} else {
result = ruleconditionsData.select
}
resolve({
data: result
})
})
},
getProps (property) {
return new Promise((resolve, reject) => {
resolve({
data: propsData
})
})
},
handleLang (val) {
this.lang = val
}
}
}
const app = createApp(App)
app.use(ElementPlus)
app.mount("#app")
</script>
</body>
</html>
!
