332 lines
8.3 KiB
Vue
332 lines
8.3 KiB
Vue
|
<template>
|
|||
|
|
<view class="wh-full">
|
|||
|
|
<!-- Remove :filters and @filter-change -->
|
|||
|
|
<BasicListLayout @register="register">
|
|||
|
|
<!-- Add #top slot for filters -->
|
|||
|
|
<template #top>
|
|||
|
|
<view class="filter-section">
|
|||
|
|
<!-- Group Filter (Assuming 'group' key exists) -->
|
|||
|
|
<view class="filter-item" @click="openFilterPopup('group')">
|
|||
|
|
<text>全部分组</text>
|
|||
|
|
<uni-icons type="bottom" size="14"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
<!-- Sending Department Filter -->
|
|||
|
|
<view class="filter-item" @click="openFilterPopup('sendingDept')">
|
|||
|
|
<text>发文部门</text>
|
|||
|
|
<uni-icons type="bottom" size="14"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
<!-- Receiving Department Filter -->
|
|||
|
|
<view class="filter-item" @click="openFilterPopup('receivingDept')">
|
|||
|
|
<text>收文部门</text>
|
|||
|
|
<uni-icons type="bottom" size="14"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- Define how each item is displayed using the slot -->
|
|||
|
|
<template v-slot:default="{ data }">
|
|||
|
|
<view
|
|||
|
|
class="document-item white-bg-color r-md p-15 mb-15"
|
|||
|
|
@click="goToDetail(data.id)"
|
|||
|
|
>
|
|||
|
|
<view class="item-title font-bold text-lg mb-5">{{
|
|||
|
|
data.title
|
|||
|
|
}}</view>
|
|||
|
|
<view class="item-meta color-9">
|
|||
|
|
<text>发文：{{ data.sendingDept }} {{ data.publishDate }}</text>
|
|||
|
|
<text>收文：{{ data.receivingDept }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
</BasicListLayout>
|
|||
|
|
|
|||
|
|
<!-- Filter Popup -->
|
|||
|
|
<uni-popup ref="filterPopupRef" type="bottom" background-color="#fff">
|
|||
|
|
<view class="popup-content">
|
|||
|
|
<view class="popup-header">
|
|||
|
|
<text>{{ currentFilterTitle }}</text>
|
|||
|
|
<uni-icons
|
|||
|
|
type="closeempty"
|
|||
|
|
size="20"
|
|||
|
|
@click="closeFilterPopup"
|
|||
|
|
></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
<scroll-view scroll-y class="popup-options">
|
|||
|
|
<view
|
|||
|
|
class="option-item"
|
|||
|
|
v-for="option in currentFilterOptions"
|
|||
|
|
:key="option.value"
|
|||
|
|
:class="{ active: isOptionSelected(option) }"
|
|||
|
|
@click="selectFilterOption(option)"
|
|||
|
|
>
|
|||
|
|
{{ option.label }}
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</uni-popup>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, reactive, computed } from "vue";
|
|||
|
|
import { useLayout } from "@/components/BasicListLayout/hooks/useLayout";
|
|||
|
|
|
|||
|
|
// Placeholder types - replace with actual imports if found
|
|||
|
|
interface FilterOption {
|
|||
|
|
label: string;
|
|||
|
|
value: string | number | null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface FilterConfig {
|
|||
|
|
label: string;
|
|||
|
|
key: string;
|
|||
|
|
options: FilterOption[];
|
|||
|
|
}
|
|||
|
|
type Filters = FilterConfig[];
|
|||
|
|
|
|||
|
|
// Define the structure for a document item
|
|||
|
|
interface DocumentItem {
|
|||
|
|
id: string;
|
|||
|
|
title: string;
|
|||
|
|
sendingDept: string;
|
|||
|
|
receivingDept: string;
|
|||
|
|
publishDate: string;
|
|||
|
|
// Add other relevant fields as needed
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const mockTodoList = [
|
|||
|
|
{
|
|||
|
|
id: "1",
|
|||
|
|
title: "公文1",
|
|||
|
|
sendingDept: "办公室1",
|
|||
|
|
receivingDept: "教务处1",
|
|||
|
|
publishDate: "2024-01-01",
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
const testList = async (param: any): Promise<Requests<any>> => {
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
resolve({ message: "测试", resultCode: 1, rows: mockTodoList });
|
|||
|
|
}, 1000);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const [register, { reload, setParam }] = useLayout({
|
|||
|
|
api: testList,
|
|||
|
|
componentProps: {},
|
|||
|
|
});
|
|||
|
|
// --- Event Handlers ---
|
|||
|
|
|
|||
|
|
const goToDetail = (id: string) => {
|
|||
|
|
console.log("Navigating to detail for ID:", id);
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/view/routine/GongWenLiuZhuan/detail?id=${id}`,
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// --- Filter Popup Methods ---
|
|||
|
|
const openFilterPopup = (type: "group" | "sendingDept" | "receivingDept") => {
|
|||
|
|
currentFilterType.value = type;
|
|||
|
|
filterPopupRef.value?.open();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const closeFilterPopup = () => {
|
|||
|
|
filterPopupRef.value?.close();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const selectFilterOption = (option: FilterOption) => {
|
|||
|
|
let paramsToSet: Record<string, any> = {};
|
|||
|
|
switch (currentFilterType.value) {
|
|||
|
|
case "group":
|
|||
|
|
selectedGroup.value = option;
|
|||
|
|
paramsToSet = { group: option.value };
|
|||
|
|
break;
|
|||
|
|
case "sendingDept":
|
|||
|
|
selectedSendingDept.value = option;
|
|||
|
|
paramsToSet = { sendingDept: option.value };
|
|||
|
|
break;
|
|||
|
|
case "receivingDept":
|
|||
|
|
selectedReceivingDept.value = option;
|
|||
|
|
paramsToSet = { receivingDept: option.value };
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
setParam(paramsToSet);
|
|||
|
|
reload(true); // Reload from page 1
|
|||
|
|
closeFilterPopup();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// --- Filter State ---
|
|||
|
|
const groups = ref<FilterOption[]>([
|
|||
|
|
{ label: "全部分组", value: null },
|
|||
|
|
{ label: "分组A", value: "groupA" },
|
|||
|
|
{ label: "分组B", value: "groupB" },
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
const sendingDepts = ref<FilterOption[]>([
|
|||
|
|
{ label: "发文部门", value: null },
|
|||
|
|
{ label: "办公室1", value: "办公室1" },
|
|||
|
|
{ label: "办公室2", value: "办公室2" },
|
|||
|
|
{ label: "办公室3", value: "办公室3" },
|
|||
|
|
{ label: "办公室4", value: "办公室4" },
|
|||
|
|
{ label: "办公室5", value: "办公室5" },
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
const receivingDepts = ref<FilterOption[]>([
|
|||
|
|
{ label: "收文部门", value: null },
|
|||
|
|
{ label: "教务处1", value: "教务处1" },
|
|||
|
|
{ label: "教务处2", value: "教务处2" },
|
|||
|
|
{ label: "教务处3", value: "教务处3" },
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
// --- Filter State ---
|
|||
|
|
const selectedGroup = ref<FilterOption | null>(groups.value[0]);
|
|||
|
|
const selectedSendingDept = ref<FilterOption | null>(sendingDepts.value[0]);
|
|||
|
|
const selectedReceivingDept = ref<FilterOption | null>(receivingDepts.value[0]);
|
|||
|
|
const filterPopupRef = ref<any>(null);
|
|||
|
|
const currentFilterType = ref<"group" | "sendingDept" | "receivingDept" | null>(
|
|||
|
|
null
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// --- Computed Properties for Popup ---
|
|||
|
|
const currentFilterOptions = computed(() => {
|
|||
|
|
switch (currentFilterType.value) {
|
|||
|
|
case "group":
|
|||
|
|
return groups.value;
|
|||
|
|
case "sendingDept":
|
|||
|
|
return sendingDepts.value;
|
|||
|
|
case "receivingDept":
|
|||
|
|
return receivingDepts.value;
|
|||
|
|
default:
|
|||
|
|
return [];
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const currentFilterTitle = computed(() => {
|
|||
|
|
switch (currentFilterType.value) {
|
|||
|
|
case "group":
|
|||
|
|
return "选择分组";
|
|||
|
|
case "sendingDept":
|
|||
|
|
return "选择发文部门";
|
|||
|
|
case "receivingDept":
|
|||
|
|
return "选择收文部门";
|
|||
|
|
default:
|
|||
|
|
return "选择选项";
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const isOptionSelected = (option: FilterOption) => {
|
|||
|
|
switch (currentFilterType.value) {
|
|||
|
|
case "group":
|
|||
|
|
return selectedGroup.value?.value === option.value;
|
|||
|
|
case "sendingDept":
|
|||
|
|
return selectedSendingDept.value?.value === option.value;
|
|||
|
|
case "receivingDept":
|
|||
|
|
return selectedReceivingDept.value?.value === option.value;
|
|||
|
|
default:
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.document-item {
|
|||
|
|
// Add specific styles for document items if needed
|
|||
|
|
cursor: pointer; // Indicate items are clickable
|
|||
|
|
transition: background-color 0.2s ease;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background-color: #f9f9f9; // Slight hover effect
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-title {
|
|||
|
|
// Style for the title
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-meta {
|
|||
|
|
// Style for the metadata line
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 100%;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-section {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 20rpx 30rpx;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
border-bottom: 1rpx solid #e0e0e0;
|
|||
|
|
position: sticky;
|
|||
|
|
top: 0; // Adjust if necessary based on NavBar height
|
|||
|
|
z-index: 10;
|
|||
|
|
|
|||
|
|
.filter-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
padding: 10rpx;
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
margin-right: 8rpx;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
max-width: 180rpx; // Adjust width as needed
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
uni-icons {
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-content {
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-top-left-radius: 20rpx;
|
|||
|
|
border-top-right-radius: 20rpx;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
padding-bottom: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 15rpx 10rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
border-bottom: 1rpx solid #eee;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-options {
|
|||
|
|
max-height: 60vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.option-item {
|
|||
|
|
padding: 25rpx 20rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
border-bottom: 1rpx solid #f5f5f5;
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
color: #409eff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background-color: #f9f9f9;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|