|
@@ -5,9 +5,9 @@
|
|
|
:border="showHeaderborder" :statusBar="true" :leftWidth="leftWidth" :rightWidth="rightWidth" left-icon="left"
|
|
:border="showHeaderborder" :statusBar="true" :leftWidth="leftWidth" :rightWidth="rightWidth" left-icon="left"
|
|
|
@clickLeft="GoBack()">
|
|
@clickLeft="GoBack()">
|
|
|
<!-- 表头内容 -->
|
|
<!-- 表头内容 -->
|
|
|
- <view class="nav_head" v-if="!onlyTitle">
|
|
|
|
|
|
|
+ <view :class="['nav_head',{'only_title':!showHeadSearchInput}]" v-if="!onlyTitle">
|
|
|
<text class="nav_title">{{title}}</text>
|
|
<text class="nav_title">{{title}}</text>
|
|
|
- <uni-easyinput class="search_box" v-model="state.searchWord" trim="all" :styles="state.searchInputStyles"
|
|
|
|
|
|
|
+ <uni-easyinput v-if="showHeadSearchInput" class="search_box" v-model="state.searchWord" trim="all" :styles="state.searchInputStyles"
|
|
|
:placeholderStyle="state.searchInputPlaceholderStyle" placeholder="请输入关键字搜索" @input="HandleSearchInput">
|
|
:placeholderStyle="state.searchInputPlaceholderStyle" placeholder="请输入关键字搜索" @input="HandleSearchInput">
|
|
|
<template #left>
|
|
<template #left>
|
|
|
<image src="/static/image/overview/search.png" class="search_icon"></image>
|
|
<image src="/static/image/overview/search.png" class="search_icon"></image>
|
|
@@ -31,6 +31,13 @@
|
|
|
{{item.label}}
|
|
{{item.label}}
|
|
|
</view>
|
|
</view>
|
|
|
</scroll-view>
|
|
</scroll-view>
|
|
|
|
|
+ <!-- tabs 按钮 -->
|
|
|
|
|
+ <scroll-view v-if="showTabBtns && tabBtns.length > 0" class="scroll_tab_btn" scroll-x="true" scroll-left="0" :show-scrollbar="false">
|
|
|
|
|
+ <slot name="tab_btns_lef" />
|
|
|
|
|
+ <view :class="['tab_item',{'selected':item.value==state.tabBtnSelected}]" v-for="item in tabBtns" :key="item.value" @click="SelectTabBtnsValue(item.value)">
|
|
|
|
|
+ {{item.label}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </scroll-view>
|
|
|
</uni-nav-bar>
|
|
</uni-nav-bar>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -85,6 +92,14 @@
|
|
|
type: Array,
|
|
type: Array,
|
|
|
default: () => []
|
|
default: () => []
|
|
|
},
|
|
},
|
|
|
|
|
+ tabBtns: { //tabBtns
|
|
|
|
|
+ type: Array,
|
|
|
|
|
+ default: () => []
|
|
|
|
|
+ },
|
|
|
|
|
+ showHeadSearchInput:{//是否显示头部搜索框
|
|
|
|
|
+ type: Boolean,
|
|
|
|
|
+ default: true
|
|
|
|
|
+ },
|
|
|
showFilterPicker: { //是否显示条件选择器
|
|
showFilterPicker: { //是否显示条件选择器
|
|
|
type: Boolean,
|
|
type: Boolean,
|
|
|
default: false
|
|
default: false
|
|
@@ -92,12 +107,21 @@
|
|
|
showTabs: { //是否显示条件选择器tabs
|
|
showTabs: { //是否显示条件选择器tabs
|
|
|
type: Boolean,
|
|
type: Boolean,
|
|
|
default: false
|
|
default: false
|
|
|
|
|
+ },
|
|
|
|
|
+ showTabBtns: { //是否显示条件选择器tabBtns
|
|
|
|
|
+ type: Boolean,
|
|
|
|
|
+ default: false
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
const state = reactive({
|
|
const state = reactive({
|
|
|
searchWord: '', //关键字
|
|
searchWord: '', //关键字
|
|
|
- filterPickerValue: [], //条件选择器默认值
|
|
|
|
|
|
|
+ filterOpts:{
|
|
|
|
|
+ valueIndex:0,
|
|
|
|
|
+ index:0,
|
|
|
|
|
+ filterPickerValue: []
|
|
|
|
|
+ },//条件选择器选中的值
|
|
|
tabsSelected: '', //tabs 默认选中
|
|
tabsSelected: '', //tabs 默认选中
|
|
|
|
|
+ tabBtnSelected: '',//tabBtns 默认选中
|
|
|
searchInputStyles: { //搜素框样式
|
|
searchInputStyles: { //搜素框样式
|
|
|
borderColor: '#DCDFE6',
|
|
borderColor: '#DCDFE6',
|
|
|
color: '#333333'
|
|
color: '#333333'
|
|
@@ -109,42 +133,50 @@
|
|
|
state.tabsSelected = props?.tabList?.[0]?.value || ''; //tab 默认值
|
|
state.tabsSelected = props?.tabList?.[0]?.value || ''; //tab 默认值
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
|
|
+ watch(()=>props.tabBtns,(newVal, oldVal)=>{
|
|
|
|
|
+ if(newVal){
|
|
|
|
|
+ state.tabBtnSelected = props?.tabBtns?.[0]?.value || ''; //tab 默认值
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
//关键字搜索
|
|
//关键字搜索
|
|
|
const HandleSearchInput = (e) => {
|
|
const HandleSearchInput = (e) => {
|
|
|
state.searchWord = e;
|
|
state.searchWord = e;
|
|
|
- CommonFilterData(state.searchWord, {
|
|
|
|
|
- filterPickerValue: [...state.filterPickerValue]
|
|
|
|
|
- }, state.tabsSelected, 'search');
|
|
|
|
|
|
|
+ CommonFilterData('search');
|
|
|
}
|
|
}
|
|
|
//切换条件选择器 index:数组filterPickerData索引
|
|
//切换条件选择器 index:数组filterPickerData索引
|
|
|
const ChangeFilterPicker = (e, index) => {
|
|
const ChangeFilterPicker = (e, index) => {
|
|
|
const valueIndex = e.detail.value; //下拉框选中值的索引
|
|
const valueIndex = e.detail.value; //下拉框选中值的索引
|
|
|
const selectedValue = props.filterPickerData?.[index]?.list?.[valueIndex]?.value ?? '';
|
|
const selectedValue = props.filterPickerData?.[index]?.list?.[valueIndex]?.value ?? '';
|
|
|
- state.filterPickerValue[index] = selectedValue;
|
|
|
|
|
|
|
+ state.filterOpts.filterPickerValue[index] = selectedValue;
|
|
|
//处理下一级默认值
|
|
//处理下一级默认值
|
|
|
for(let i = 0; i < props.filterPickerData.length; i++){
|
|
for(let i = 0; i < props.filterPickerData.length; i++){
|
|
|
if(i > index){
|
|
if(i > index){
|
|
|
const list = props.filterPickerData?.[i]?.list || [];
|
|
const list = props.filterPickerData?.[i]?.list || [];
|
|
|
- state.filterPickerValue[i] = list.length > 0 ? list[0].value : '';
|
|
|
|
|
|
|
+ state.filterOpts.filterPickerValue[i] = list.length > 0 ? list[0].value : '';
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- console.log(state.filterPickerValue,props.filterPickerData,37888)
|
|
|
|
|
- CommonFilterData(state.searchWord, {
|
|
|
|
|
- valueIndex,
|
|
|
|
|
- index,
|
|
|
|
|
- filterPickerValue: [...state.filterPickerValue]
|
|
|
|
|
- }, state.tabsSelected, 'filterPicker');
|
|
|
|
|
|
|
+ state.filterOpts.valueIndex = valueIndex;
|
|
|
|
|
+ state.filterOpts.index = index;
|
|
|
|
|
+ CommonFilterData('filterPicker');
|
|
|
}
|
|
}
|
|
|
//tabs切换
|
|
//tabs切换
|
|
|
const SelectTabsValue = (value) => {
|
|
const SelectTabsValue = (value) => {
|
|
|
state.tabsSelected = value;
|
|
state.tabsSelected = value;
|
|
|
- CommonFilterData(state.searchWord, {
|
|
|
|
|
- filterPickerValue: [...state.filterPickerValue]
|
|
|
|
|
- }, state.tabsSelected, 'tabs');
|
|
|
|
|
|
|
+ CommonFilterData('tabs');
|
|
|
|
|
+ }
|
|
|
|
|
+ //tabBtns切换
|
|
|
|
|
+ const SelectTabBtnsValue = (value) => {
|
|
|
|
|
+ state.tabBtnSelected = value;
|
|
|
|
|
+ CommonFilterData('tabBtns');
|
|
|
}
|
|
}
|
|
|
//条件发生改变进行数据查询
|
|
//条件发生改变进行数据查询
|
|
|
- const CommonFilterData = (searchWord, filterPickerValue, tabsSelected, type) => {
|
|
|
|
|
- emit('CommonFilterData', searchWord, filterPickerValue, tabsSelected, type);
|
|
|
|
|
|
|
+ const CommonFilterData = (type) => {
|
|
|
|
|
+ emit('CommonFilterData',{
|
|
|
|
|
+ searchWord:state.searchWord,
|
|
|
|
|
+ filterOpts:state.filterOpts,
|
|
|
|
|
+ tabsSelected:state.tabsSelected,
|
|
|
|
|
+ tabBtnSelected:state.tabBtnSelected
|
|
|
|
|
+ },type);
|
|
|
}
|
|
}
|
|
|
const GoBack = () => {
|
|
const GoBack = () => {
|
|
|
if (props.backPath == 'myIndex') {
|
|
if (props.backPath == 'myIndex') {
|
|
@@ -161,7 +193,8 @@
|
|
|
}
|
|
}
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
state.tabsSelected = props?.tabList?.[0]?.value || ''; //tab 默认值
|
|
state.tabsSelected = props?.tabList?.[0]?.value || ''; //tab 默认值
|
|
|
- state.filterPickerValue = props.filterPickerData.map(item => item?.defaultValue ?? '');
|
|
|
|
|
|
|
+ state.tabBtnSelected = props?.tabBtns?.[0]?.value || ''; //tabBtns 默认值
|
|
|
|
|
+ state.filterOpts.filterPickerValue = props.filterPickerData.map(item => item?.defaultValue ?? '');
|
|
|
})
|
|
})
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|