<template>
<div>
<div v-if="showFilterData.length != 0" class="filter_content">
<span class="filter_title">筛选条件：</span>
<div class="tagContent">
<rc-tag
v-for="(item, index) in showFilterData"
:key="index"
color-type="primary"
:closable="item.del"
closable-icon-color="primary"
@close="clear(item, index)"
style="min-width
: fit-content"
>
<span
style="cursor
: pointer"
@click="showMoreDrawer"
v-if="item.value"
>{{ `${item.name}：${item.value}` }}</span
>
</rc-tag>
</div>
</div>
<rc-form v-show="false">
<slot name="filter"> </slot>
</rc-form>
<rc-drawer
:visible.sync="drawerVisible"
:title="title"
custom-class="template-page-header-drawer"
>
<rc-view style="height
: calc(100% - 48px)">
<rc-content class="container" style="height
: 100% !important">
<!-- 筛选条件 -->
<div class="content" @click="close($event)">
<slot name="filter"> </slot>
<div>
<rt-advanced-tag-options
ref="rtAdvancedOptions"
:entity-name="entityName"
:filter-data="filterData"
v-bind="$attrs"
:fetch-json="fetchJson"
:is-save="isSave"
v-on="$listeners"
>
<template slot="operations">
<rc-button
v-if="isAdd"
icon-name="rt-base-plus"
class="add"
icon-size="14"
@click.stop="addAttribute"
>添加筛选条件</rc-button
>
<div
class="operation"
:style="` justify-content
:${
isAdd ? 'space-between'
: 'flex-end'
} ;`"
>
<rc-button @click="newSave" v-if="isAdd"
>保存筛选条件</rc-button
>
<div class="extra">
<rc-button @click="reset" style="min-width
: 72px"
>重置</rc-button
>
<rc-button
@click="search"
type="primary"
style="margin-left
: 16px; min-width
: 72px"
>确认</rc-button
>
</div>
</div>
</template>
</rt-advanced-tag-options>
</div>
</div>
<!-- 我的筛选条件 -->
<div class="saveData" v-if="viewKeys.length != 0">
<div class="saveDataDetail">
<div class="saved">已保存的筛选条件</div>
<div>
<rt-Tags
:tags="viewKeys"
v-on
:handle-close="rmTag"
@select="selectView"
></rt-Tags>
</div>
</div>
</div>
</rc-content>
</rc-view>
</rc-drawer>
<!-- 保存弹窗 -->
<rc-dialog
v-model="dialogVisible"
title="保存"
@close="cancelSave"
@confirm="confirmSave"
@cancel="cancelSave"
:hide-divider="true"
:validate="input ? false
: true"
>
<template slot="default">
<rc-form style="padding
: 0 24px">
<rc-form-item label="筛选条件名称">
<rc-input v-model="input"
:clearable="false" />
</rc-form-item>
</rc-form>
</template>
</rc-dialog>
</div>
</template>
<script>
import rtAdvancedTagOptions from './rtAdvancedTagOptions.vue';
import rtTags from './rtTags.vue';
import api from './rtAdvancedSearch';
export default {
name
: 'rtAdvancedSearch',
components
: {
rtAdvancedTagOptions,
rtTags
},
mixins
: [rtAdvancedTagOptions, rtTags, api],
props
: {
// 条件是否允许为空
conditionsNotNull
: {
type
: Boolean,
default
: true
},
filterData
: { type
: Array, default
: () => [] },
entityName
: { type
: String, default
: '' },
isSave
: {
type
: Boolean,
default
: false
},
defaultAttr
: { type
: String, default
: '' },
subName
: { type
: String, default
: 'spm' },
title
: { type
: String, default
: '筛选条件' },
isAdd
: { type
: Boolean, default
: true } //是否添加
},
data() {
return {
viewKeys
: [],
isFirst
: true,
controllerName
: 'AdvanceSearch',
drawerVisible
: false,
drawerData
: [], //筛选条件(页面上固定的)
seniorFilterData
: [], //高级筛选的条件
dialogVisible
: false,
input
: ''
};
},
computed
: {
showFilterData() {
return this.drawerData.concat(this.seniorFilterData);
}
},
mounted() {
setTimeout(() => {
this.getDrawerData();
}, 100);
},
methods
: {
//获取筛选条件元素
getDrawerData() {
let form = document.querySelectorAll('.rt-form');
this.drawerData = [];
for (let index = 0; index < form[1].children.length; index++) {
if (
this.getValue(
document.querySelectorAll('.el-form-item__content')[index]
)
) {
this.drawerData.push({
name
: document.querySelectorAll('.el-form-item__label')[index]
.innerText,
value
: this.getValue(
document.querySelectorAll('.el-form-item__content')[index]
),
key
: document
.querySelectorAll('.el-form-item__label')
[index].getAttributeNode('for').value,
del
:
form[1].children[index].className.indexOf('required') == -1
? true
: false
});
}
}
},
//value转格式
getValue(type) {
let result = [];
let regClassName =
type.firstElementChild.className.trim() == 'rt-lookup-outer'
? 'rt-tag-box'
: 'rt-tag-outline';
if (type.firstElementChild.className.trim() == 'rt-lookup-outer') {
for (
let index = 0;
index < type.getElementsByClassName(regClassName).length;
index++
) {
const element = type.getElementsByClassName(regClassName)[index];
result.push(element.innerText);
}
return result.join('、');
} else if (type.firstElementChild.className.trim() == 'rt-
picklist') {
//区分
picklist的单（多）选
let tempClass =
type.getElementsByClassName('rt-tag-box').length > 0
? 'rt-tag-box'
: 'rt-tag-outline';
for (
let index = 0;
index < type.getElementsByClassName(tempClass).length;
index++
) {
const element = type.getElementsByClassName(tempClass)[index];
result.push(element.innerText);
}
return result.join('、');
} else if (
type.firstElementChild.className.trim() ==
'el-cascader rt-xpc-cascader rtxpc-cascader'
) {
for (
let index = 0;
index < type.getElementsByClassName('tag-text').length;
index++
) {
const element = type.getElementsByClassName('tag-text')[index];
result.push(element.innerText);
}
return result.join('、');
} else if (
type.firstElementChild.getElementsByClassName(
'el-date-editor--daterange'
).length != 0
) {
if (
type.firstElementChild
.getElementsByClassName('el-date-editor--daterange')[0]
.getElementsByClassName('rt-xpc-range-input')[0]._value ||
type.firstElementChild
.getElementsByClassName('el-date-editor--daterange')[0]
.getElementsByClassName('rt-xpc-range-input')[1]._value
) {
return (
this.getDateTime(
type.firstElementChild
.getElementsByClassName('el-date-editor--daterange')[0]
.getElementsByClassName('rt-xpc-range-input')[0]._value
) +
'至' +
this.getDateTime(
type.firstElementChild
.getElementsByClassName('el-date-editor--daterange')[0]
.getElementsByClassName('rt-xpc-range-input')[1]._value
)
);
}
} else if (
type.firstElementChild.className.includes('rt-daterangepicker') &&
type.firstElementChild.firstElementChild.__vue__._props.value
) {
if (
type.firstElementChild.children[2].getElementsByClassName(
'el-date-editor'
)[0].__vue__.value
) {
return (
this.getDateTime(
type.firstElementChild.children[0].getElementsByClassName(
'el-date-editor'
)[0].__vue__.value
) +
'至' +
this.getDateTime(
type.firstElementChild.children[2].getElementsByClassName(
'el-date-editor'
)[0].__vue__.value
)
);
} else {
return (
this.getDateTime(
type.firstElementChild.children[0].getElementsByClassName(
'el-date-editor'
)[0].__vue__.value
) + '至 --'
);
}
} else if (type.firstElementChild.className == 'daterangepicker') {
if (type.firstElementChild.children[1].__vue__.showValue) {
return (
this.getDateTime(
type.firstElementChild.children[0].__vue__.showValue
) +
'至' +
this.getDateTime(
type.firstElementChild.children[1].__vue__.showValue
)
);
} else {
return (
this.getDateTime(
type.firstElementChild.children[0].getElementsByClassName(
'el-date-editor'
)[0].__vue__.value
) + '至 --'
);
}
} else if (type.firstElementChild.className == 'rt-date-picker') {
return this.getDateTime(
type.firstElementChild.children[0].getElementsByClassName(
'el-date-editor'
)[0].__vue__.value
);
} else if (
type.firstElementChild.className.trim().indexOf('el-checkbox-group') !=
-1
) {
if (type.getElementsByClassName('is-bordered is-checked').length > 0) {
var str = '';
for (
var i = 0;
i < type.getElementsByClassName('is-bordered is-checked').length;
i++
) {
str +=
'、' +
type
.getElementsByClassName('is-bordered is-checked')
[i].getElementsByClassName('el-checkbox__label')[0].innerText;
}
return str.substring(1, str.length);
}
} else if (
type.firstElementChild.className.trim().indexOf('el-radio-group') != -1
) {
return type
.getElementsByClassName('is-bordered is-checked')[0]
.getElementsByClassName('el-radio__label')[0].innerText;
} else {
return type.getElementsByClassName('el-input')[0].__vue__._props.value;
}
},
//日期类型的转格式(添加年/月等)
getDateTime(val) {
if (val.length == 4) {
return ` ${val} 年`;
} else if (val.length == 7) {
return ` ${val.split('-')[0]} 年` + ` ${val.split('-')[1]} 月`;
} else if (val.length == 10) {
return (
` ${val.split('-')[0]} 年` +
` ${val.split('-')[1]} 月` +
` ${val.split('-')[2]} 日`
);
} else {
return (
` ${val.split('季度')[0].split('年')[0]} 年 ` +
` ${val.split('年')[1].split('季度')[0]} 季度 `
);
}
},
// 添加筛选添加
addAttribute() {
this.$refs.rtAdvancedOptions.show = !this.$refs.rtAdvancedOptions.show;
},
close(e) {
var ele = e.target;
if (
!ele.className.includes('el-input__inner') &&
ele.className != 'listItemWrap'
) {
this.$refs.rtAdvancedOptions.show = false;
}
},
getEntityByName(name) {
api
.getDataByName(
this.subName,
name,
this.entityName,
this.$router.history.current.name
)
.then(async (resp) => {
this.$refs.rtAdvancedOptions.customSearchConditionList = [];
this.$refs.rtAdvancedOptions.serializeFetch(
JSON.parse(resp.new_fetchjson)
);
});
},
// 重置
reset() {
this.$refs.rtAdvancedOptions.reset();
this.$emit('reset');
},
// 获取已保存的视图列表
async getViewList() {
if (!this.isAdd) {
return;
}
const result = await api.getAdvancedSearchList(
this.subName,
this.entityName,
this.$router.history.current.name
);
if (result) {
this.viewKeys = result.map((item) => {
return item.new_name;
});
}
},
// 保存高级查找试图
newSave() {
if (!this.checkData(this.conditionsNotNull)) {
rt.showErrorToast('请添加筛选条件');
return;
}
this.dialogVisible = true;
},
confirmSave() {
if (rt.isNullOrWhiteSpace(this.input)) {
this.$message({
type
: 'error',
message
: '筛选条件名称不能为空'
});
} else {
const model = this.generaterModel(this.input);
this.$set(model, 'modulename', this.$router.history.current.name);
api
.saveAdvancedSearch(this.subName, model)
.then((resp) => {
if (!rt.isNullOrWhiteSpace(resp)) {
rt.showSuccessToast('保存成功');
this.getViewList();
}
})
.catch((error) => {
rt.showErrorToast(error);
});
}
},
cancelSave() {
this.dialogVisible = false;
this.input = '';
},
checkData() {
return this.$refs.rtAdvancedOptions.checkData();
},
checkDataPreSave() {
return this.$refs.rtAdvancedOptions.checkDataPreSave();
},
generaterModel(viewName = '') {
if (!this.$refs.rtAdvancedOptions) {
return {};
} else {
return this.$refs.rtAdvancedOptions.generateModel(viewName);
}
},
save() {
return this.$refs.rtAdvancedOptions.save();
},
// 删除视图
async rmTag(value) {
api
.deleteDataByName(
this.subName,
value,
this.entityName,
this.$router.history.current.name
)
.then(() => {
if (this.name === value) {
this.name = null;
this.$emit('change
:name', null);
}
rt.showSuccessToast('删除成功');
})
.catch((error) => {
rt.showErrorToast(error);
});
},
// 获取视图
selectView(value) {
if (rt.isNull(value)) {
this.name = value;
} else {
this.name = value.tag;
this.getEntityByName(this.name);
}
this.$emit('change
:name', this.name);
},
search() {
this.getDrawerData();
if (this.isFirst) {
this.isFirst = !this.isFirst;
this.drawerVisible = false;
this.$emit('search');
this.getSeniorFilterData();
} else {
this.getSeniorFilterData();
}
},
//高级筛选的选中
getSeniorFilterData() {
let list = this.$refs.rtAdvancedOptions
? this.$refs.rtAdvancedOptions.customSearchConditionList
: [];
if (list.length == 0) {
this.seniorFilterData = [];
this.drawerVisible = false;
this.$emit('search');
} else {
if (!this.checkData()) {
return;
} else {
this.seniorFilterData = [];
for (let index = 0; index < list.length; index++) {
if (list[index].dataType == 'lookup') {
this.seniorFilterData.push({
flag
: list[index],
name
: list[index].attrName,
value
: list[index].customSearchConditionDetails
.map((item) => item.Value.name)
.join('、'),
key
: list[index].attrCode,
del
: true
});
} else if (list[index].dataType == 'datetime') {
if (list[index].customSearchConditionDetails.length == 1) {
this.seniorFilterData.push({
flag
: list[index],
name
: list[index].attrName,
value
: rt.formatDateTime(
list[index].customSearchConditionDetails[0].Value,
'yyyy-mm-dd HH
:MM
:ss'
),
key
: list[index].attrCode,
del
: true
});
} else {
this.seniorFilterData.push({
flag
: list[index],
name
: list[index].attrName,
value
: list[index].customSearchConditionDetails
.map((item) =>
rt.formatDateTime(item.Value, 'yyyy-mm-dd HH
:MM
:ss')
)
.join('至'),
key
: list[index].attrCode,
del
: true
});
}
} else if (
list[index].dataType == 'nvarchar' ||
list[index].dataType == 'state' ||
list[index].dataType == 'int'
) {
let state = { 0
: '启用', 1
: '停用' };
this.seniorFilterData.push({
flag
: list[index],
name
: list[index].attrName,
value
:
list[index].dataType == 'state'
? list[index].customSearchConditionDetails
.map((item) => state[item.Value])
.join('、')
: list[index].customSearchConditionDetails
.map((item) => item.Value)
.join('、'),
key
: list[index].attrCode,
del
: true
});
} else if (list[index].dataType == '
picklist') {
this.seniorFilterData.push({
flag
: list[index],
name
: list[index].attrName,
value
: this.get
PickListValue(list[index]),
key
: list[index].attrCode,
del
: true
});
} else if (list[index].dataType == 'decimal') {
//金额的
this.seniorFilterData.push({
flag
: list[index],
name
: list[index].attrName,
value
: list[index].customSearchConditionDetails
.map((item) => item.Value)
.join('、'),
key
: list[index].attrCode,
del
: true
});
} else if (list[index].dataType == 'bit') {
let state = { 0
: '否', 1
: '是' };
this.seniorFilterData.push({
flag
: list[index],
name
: list[index].attrName,
value
:
list[index].dataType == 'bit'
? list[index].customSearchConditionDetails
.map((item) => state[item.Value])
.join('、')
: list[index].customSearchConditionDetails
.map((item) => item.Value)
.join('、'),
key
: list[index].attrCode,
del
: true
});
} else if (list[index].dataType == 'text') {
this.seniorFilterData.push({
flag
: list[index],
name
: list[index].attrName,
value
: list[index].customSearchConditionDetails
.map((item) => item.Value)
.join('、'),
key
: list[index].attrCode,
del
: true
});
}
}
this.$emit('search');
this.drawerVisible = false;
}
}
},
//获取
picklist的值
get
PickListValue(data) {
let temp = [];
temp = this.$refs.rtAdvancedOptions.
picklistData[data.Attr].filter(
(item) =>
data.customSearchConditionDetails.some((i) => item.value == i.Value)
);
return temp.map((item) => item.name).join('、');
},
clear(item, index) {
if (item.flag) {
this.seniorFilterData.splice(index - this.drawerData.length, 1);
this.$refs.rtAdvancedOptions.delCondition(
item.flag,
0,
index - this.drawerData.length
);
} else {
this.drawerData.splice(index, 1);
}
this.$emit('close', item.key);
},
showMoreDrawer() {
this.drawerVisible = true;
}
},
created() {
// 获取已保存视图
this.getViewList();
}
};
</script>
<style lang="less" scoped>
.content {
overflow-y
: auto;
overflow-x
: hidden;
&
::-webkit-scrollbar {
display
: none;
}
}
.add {
width
: 100%;
background
: #e5f2ff;
color
: #0072e6;
height
: 35px;
padding
: 8px 0 7px;
border-radius
: 2px;
border
: none;
margin-top
: 24px;
}
.operation {
width
: calc(100% - 48px);
position
: absolute;
bottom
: 0;
display
: flex;
align-items
: center;
&
::before {
content
: '';
position
: absolute;
width
: calc(100% + 48px);
height
: 1px;
top
: 0;
left
: -16px;
background
: #d6dbe1;
}
.extra {
padding
: 12px 0;
}
}
.saveData {
position
: relative;
.saveDataDetail {
width
: 100%;
max-height
: 170px;
overflow-y
: auto;
overflow-x
: hidden;
&
::before {
content
: '';
position
: absolute;
width
: calc(100% + 32px);
height
: 1px;
top
: 0;
left
: -16px;
background
: #d6dbe1;
}
.saved {
font-size
: 16px;
color
: #0b0c0e;
line-height
: 19px;
padding
: 16px 0px;
}
}
}
.filter_content {
display
: flex;
flex-flow
: wrap;
background
: #fff;
border-top
: 1px solid #e8ecfc;
border-bottom
: 1px solid #e8ecfc;
padding
: 12px 16px 8px;
.filter_title {
font-size
: 14px;
line-height
: 24px;
min-width
: 70px;
}
.tagContent {
flex
: 1;
display
: flex;
align-items
: center;
flex-wrap
: wrap;
}
}
.rt-tag {
margin
: 0 8px 8px 0;
}
/deep/.el-dialog {
width
: 420px !important;
}
/deep/.rt-dialog-title-left {
font-size
: 18px !important;
font-weight
: normal !important;
color
: rgb(48, 49, 51) !important;
}
.container /deep/.rt-content-main {
display
: flex !important;
flex-direction
: column;
height
: calc(100% - 58px) !important;
justify-content
: space-between;
}
</style>
这个问题log.js
:68
TypeError
: Cannot read properties of undefined (reading 'attrCode')什么原因
本文介绍了一种基于JS的富选框组件配置方法，该组件适用于网页表单中的多选操作，支持立即响应模式，并提供了全部选择、全部清除等功能。文章强调了组件需置于form标签内以确保数据能正确传递至后台。
扫一扫
1470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
