|
@@ -6,11 +6,10 @@
|
|
hasBg ? 'bg-base p-3' : ''
|
|
hasBg ? 'bg-base p-3' : ''
|
|
]"
|
|
]"
|
|
>
|
|
>
|
|
- <view class="top-tab bg-base">
|
|
|
|
- <u-tabs
|
|
|
|
- v-if="tabs"
|
|
|
|
|
|
+ <view v-if="tabs" class="top-tab bg-base">
|
|
|
|
+ <u-tabs
|
|
:list="tabs"
|
|
:list="tabs"
|
|
- :current="tab"
|
|
|
|
|
|
+ :current="tabCurrentIndex"
|
|
lineWidth="30"
|
|
lineWidth="30"
|
|
lineColor="#d9492e"
|
|
lineColor="#d9492e"
|
|
:activeStyle="{
|
|
:activeStyle="{
|
|
@@ -22,7 +21,7 @@
|
|
color: '#606266',
|
|
color: '#606266',
|
|
transform: 'scale(1)'
|
|
transform: 'scale(1)'
|
|
}"
|
|
}"
|
|
- :scrollable="tabs && tabs.length > 5"
|
|
|
|
|
|
+ :scrollable="tabsScrollable || (tabs && tabs.length > 5)"
|
|
@click="handleTabClick"
|
|
@click="handleTabClick"
|
|
/>
|
|
/>
|
|
</view>
|
|
</view>
|
|
@@ -44,27 +43,27 @@
|
|
v-if="dropDownNames.length > 0"
|
|
v-if="dropDownNames.length > 0"
|
|
class="d-flex flex-row justify-between align-center mt-2"
|
|
class="d-flex flex-row justify-between align-center mt-2"
|
|
:class="[
|
|
:class="[
|
|
- dropDownNames.length >= 3 ? 'justify-around' : ('justify-between')
|
|
|
|
|
|
+ dropDownVisibleCount >= 3 ? 'justify-around' : ('justify-between')
|
|
]"
|
|
]"
|
|
>
|
|
>
|
|
<template v-for="(drop, k) in dropDownNames" :key="k" >
|
|
<template v-for="(drop, k) in dropDownNames" :key="k" >
|
|
<SimpleDropDownPicker
|
|
<SimpleDropDownPicker
|
|
- v-if="drop.activeTab == undefined || drop.activeTab == tab"
|
|
|
|
|
|
+ v-if="!drop.activeTab || drop.activeTab.includes(tabCurrentIndex)"
|
|
:modelValue="dropDownValues[k]"
|
|
:modelValue="dropDownValues[k]"
|
|
- :columns="drop.options"
|
|
|
|
|
|
+ :columns="drop.options"
|
|
:style="{maxWidth: `${100/dropDownNames.length}%`}"
|
|
:style="{maxWidth: `${100/dropDownNames.length}%`}"
|
|
@update:modelValue="(v) => handleChangeDropDownValue(k, v)"
|
|
@update:modelValue="(v) => handleChangeDropDownValue(k, v)"
|
|
/>
|
|
/>
|
|
</template>
|
|
</template>
|
|
<view
|
|
<view
|
|
- v-if="showTotal && dropDownNames.length < 3"
|
|
|
|
|
|
+ v-if="(showTotal && dropDownVisibleCount < 3)"
|
|
class="d-flex flex-row align-center mt-3 size-s color-primary text-bold"
|
|
class="d-flex flex-row align-center mt-3 size-s color-primary text-bold"
|
|
>
|
|
>
|
|
<text>总共有 {{ listLoader.total }} 个</text>
|
|
<text>总共有 {{ listLoader.total }} 个</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
<view
|
|
- v-if="showTotal && (dropDownNames.length >= 3 || dropDownNames.length == 0)"
|
|
|
|
|
|
+ v-if="(dropDownVisibleCount >= 3 || dropDownVisibleCount == 0)"
|
|
class="d-flex flex-row justify-center align-center mt-3 size-s color-primary text-bold"
|
|
class="d-flex flex-row justify-center align-center mt-3 size-s color-primary text-bold"
|
|
>
|
|
>
|
|
<text>总共有 {{ listLoader.total }} 个</text>
|
|
<text>总共有 {{ listLoader.total }} 个</text>
|
|
@@ -126,7 +125,7 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
-import { onMounted, ref, watch, type PropType } from 'vue';
|
|
|
|
|
|
+import { computed, onMounted, ref, watch, type PropType } from 'vue';
|
|
import { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';
|
|
import { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';
|
|
import { navTo } from '@/common/utils/PageAction';
|
|
import { navTo } from '@/common/utils/PageAction';
|
|
import SimplePageListLoader from '@/common/components/SimplePageListLoader.vue';
|
|
import SimplePageListLoader from '@/common/components/SimplePageListLoader.vue';
|
|
@@ -145,7 +144,7 @@ function getItemClass(index: number) {
|
|
export interface DropDownNames {
|
|
export interface DropDownNames {
|
|
options: SimpleDropDownPickerItem[],
|
|
options: SimpleDropDownPickerItem[],
|
|
defaultSelectedValue: number|string,
|
|
defaultSelectedValue: number|string,
|
|
- activeTab?: number,
|
|
|
|
|
|
+ activeTab?: number[],
|
|
}
|
|
}
|
|
export interface CommonListItem extends Record<string, any> {
|
|
export interface CommonListItem extends Record<string, any> {
|
|
id: number,
|
|
id: number,
|
|
@@ -172,6 +171,10 @@ const props = defineProps({
|
|
}[]>,
|
|
}[]>,
|
|
default: null,
|
|
default: null,
|
|
},
|
|
},
|
|
|
|
+ tabsScrollable: {
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: false,
|
|
|
|
+ },
|
|
/**
|
|
/**
|
|
* 是否显示搜索框
|
|
* 是否显示搜索框
|
|
*/
|
|
*/
|
|
@@ -242,14 +245,26 @@ const props = defineProps({
|
|
type: Boolean,
|
|
type: Boolean,
|
|
default: true,
|
|
default: true,
|
|
},
|
|
},
|
|
- startTab: {
|
|
|
|
|
|
+ startTabIndex: {
|
|
type: Number,
|
|
type: Number,
|
|
default: undefined,
|
|
default: undefined,
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+ loadMounted: {
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: true,
|
|
|
|
+ },
|
|
})
|
|
})
|
|
|
|
|
|
const emit = defineEmits([ 'goCustomDetails' ])
|
|
const emit = defineEmits([ 'goCustomDetails' ])
|
|
|
|
|
|
|
|
+const dropDownVisibleCount = computed(() => {
|
|
|
|
+ let c = 0;
|
|
|
|
+ for (const element of props.dropDownNames) {
|
|
|
|
+ if (!element.activeTab || element.activeTab.includes(tabCurrentIndex.value))
|
|
|
|
+ c++;
|
|
|
|
+ }
|
|
|
|
+ return c;
|
|
|
|
+})
|
|
const dropDownValues = ref<any>([]);
|
|
const dropDownValues = ref<any>([]);
|
|
const searchValue = ref('');
|
|
const searchValue = ref('');
|
|
const listLoader = useSimplePageListLoader(props.pageSize, async (page, pageSize) => {
|
|
const listLoader = useSimplePageListLoader(props.pageSize, async (page, pageSize) => {
|
|
@@ -257,10 +272,10 @@ const listLoader = useSimplePageListLoader(props.pageSize, async (page, pageSize
|
|
page, pageSize,
|
|
page, pageSize,
|
|
searchValue.value,
|
|
searchValue.value,
|
|
dropDownValues.value,
|
|
dropDownValues.value,
|
|
- tab.value,
|
|
|
|
|
|
+ props.tabs?.[tabCurrentIndex.value]?.id ?? tabCurrentIndex.value,
|
|
)
|
|
)
|
|
});
|
|
});
|
|
-const tab = ref(0)
|
|
|
|
|
|
+const tabCurrentIndex = ref(0)
|
|
|
|
|
|
function handleChangeDropDownValue(index: number, value: number) {
|
|
function handleChangeDropDownValue(index: number, value: number) {
|
|
dropDownValues.value[index] = value;
|
|
dropDownValues.value[index] = value;
|
|
@@ -275,7 +290,7 @@ function goDetails(item: any, id: number) {
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
if (typeof props.detailsPage == 'object') {
|
|
if (typeof props.detailsPage == 'object') {
|
|
- navTo(props.detailsPage[tab.value], {
|
|
|
|
|
|
+ navTo(props.detailsPage[tabCurrentIndex.value], {
|
|
...props.detailsPage.params,
|
|
...props.detailsPage.params,
|
|
id
|
|
id
|
|
})
|
|
})
|
|
@@ -292,28 +307,35 @@ function handleTabClick(e: any) {
|
|
e.jump();
|
|
e.jump();
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
- tab.value = e.id;
|
|
|
|
|
|
+ tabCurrentIndex.value = e.index;
|
|
listLoader.loadData(undefined, true);
|
|
listLoader.loadData(undefined, true);
|
|
}
|
|
}
|
|
|
|
|
|
-watch(tab, () => {
|
|
|
|
|
|
+watch(tabCurrentIndex, () => {
|
|
listLoader.loadData(undefined, true);
|
|
listLoader.loadData(undefined, true);
|
|
});
|
|
});
|
|
-watch(() => props.startTab, () => {
|
|
|
|
- if (props.startTab) {
|
|
|
|
- tab.value = props.startTab;
|
|
|
|
|
|
+watch(() => props.startTabIndex, () => {
|
|
|
|
+ if (props.startTabIndex) {
|
|
|
|
+ tabCurrentIndex.value = props.startTabIndex;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
|
|
+defineExpose({
|
|
|
|
+ load: () => {
|
|
|
|
+ listLoader.loadData(undefined, true);
|
|
|
|
+ },
|
|
|
|
+})
|
|
|
|
+
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
- if (props.startTab)
|
|
|
|
- tab.value = props.startTab;
|
|
|
|
|
|
+ if (props.startTabIndex)
|
|
|
|
+ tabCurrentIndex.value = props.startTabIndex;
|
|
if (props.title)
|
|
if (props.title)
|
|
uni.setNavigationBarTitle({ title: props.title, })
|
|
uni.setNavigationBarTitle({ title: props.title, })
|
|
for (const element of props.dropDownNames)
|
|
for (const element of props.dropDownNames)
|
|
dropDownValues.value.push(element.defaultSelectedValue);
|
|
dropDownValues.value.push(element.defaultSelectedValue);
|
|
- listLoader.loadData(undefined, true);
|
|
|
|
|
|
+ if (props.loadMounted)
|
|
|
|
+ listLoader.loadData(undefined, true);
|
|
}, 300);
|
|
}, 300);
|
|
});
|
|
});
|
|
</script>
|
|
</script>
|