bht-app/src/pages/knowledgeBase/knowledgeBase.vue

<!--
 * @Author: XHC
 * @Date: 2025-05-19 15:18:26
 * @LastEditors: XHC
 * @LastEditTime: 2025-06-05 17:18:03
 * @Description: 知识库
-->
<template>
    <view class="knowledgeBase">
		<view class="search-box">
			<uni-search-bar class="search" radius="15" bgColor="#EDF4FD" placeholder="搜索线路名称" clearButton="auto" cancelButton="none" @confirm="search" />
			<view class="search-title">
				<view
					v-for="(item, index) in titleList"
					:key="index"
					:class="titleCurIndex == index ? 'active' : ''"
					class="title-item grey"
					@click="changeTitle(index)"
				>
					{{ item.name }}
				</view>
				<uni-icons fontFamily="iconfont" color="#fff" :size="24" @click="screening">{{'&#xe621;'}}</uni-icons>
			</view>
		</view>
		<view class="list-box" v-if="titleCurIndex == 0">
			<uni-card class="list-card" v-for="(item, index) in listData" :key="index">
				<view class="head"><text class="title">{{ item.title }}</text></view>
				<view class="num grey">{{ item.num }}</view>
				<view class="info-box grey">
					<uni-row :gutter="30">
						<uni-col :span="16">
							<view class="info"><uni-icons fontFamily="iconfont" color="#1469BC">{{'&#xe753;'}}</uni-icons> <text class="info-text">{{ item.departments }}</text></view>
						</uni-col>
						<uni-col :span="8">
							<view class="info"><uni-icons fontFamily="iconfont" color="#808185">{{'&#xe74e;'}}</uni-icons> {{ item.time }}</view>
						</uni-col>
					</uni-row>
				</view>
			</uni-card>
		</view>
		<DaDropdown
			ref="daDropdownRef"
			v-model:dropdownMenu="dropdownMenuList"
			@confirm="handleConfirm"
			@close="handleClose"
			@open="handleOpen">
		</DaDropdown>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import DaDropdown from '@/components/da-dropdown/index.vue'
// 标题
let titleCurIndex = ref(0)
let titleList = reactive([
	{ id: 1, name: "全部" },
    { id: 2, name: "发电机" },
    { id: 3, name: "发电机" },
    { id: 4, name: "发电机" },
    { id: 5, name: "发电机" },
])

const daDropdownRef = ref(null)
const menuVal = ref(null)
const dropdownMenuList = ref([
	{
	// title: '筛选',
	type: 'filter',
	prop: 'god5',
	// 默认选中单选2、多选2、3、滑动30
	// value: { ft1: '2', ft2: ['2', '3'], ft3: 30 },
	options: [
		{
		title: '单选',
		type: 'radio',
		prop: 'ft1',
		options: [
			{ label: '单选1', value: '1' },
			{ label: '单选2', value: '2' },
			{ label: '单选3', value: '3' },
			{ label: '单选4', value: '4' },
		],
		},
		{
		title: '多选',
		type: 'checkbox',
		prop: 'ft2',
		options: [
			{ label: '多选1', value: '1' },
			{ label: '多选2', value: '2' },
			{ label: '多选3', value: '3' },
			{ label: '多选4', value: '4' },
			{ label: '多选5', value: '5' },
		],
		},
		// {
		// 	title: '滑块',
		// 	type: 'slider',
		// 	prop: 'ft3',
		// 	componentProps: {
		// 		min: 0,
		// 		max: 100,
		// 		step: 1,
		// 		showValue: true,
		// 	},
		// },
	],
	},

])

function handleConfirm(v, selectedValue) {
	console.log('handleConfirm ==>', v, selectedValue)
}
function handleClose(v, callbackMenuList) {
	console.log('handleClose ==>', v, callbackMenuList)
}
function handleOpen(v) {
	console.log('handleOpen ==>', v)
}

function handleMenuVal() {
	menuVal.value = daDropdownRef.value?.getMenuValue()
	console.log('已选数据', menuVal.value)
}

// 列表数据
const listData = reactive([
	{ title: '电站运行巡检作业指导书', num: 'Q/BHTHP.ZDS 7008-2024', departments: '水力发电厂运行部', time: '2025-02-20' },
	{ title: '电站运行巡检作业指导书', num: 'Q/BHTHP.ZDS 7008-2024', departments: '水力发电厂运行部', time: '2025-02-20' },
	{ title: '电站运行巡检作业指导书', num: 'Q/BHTHP.ZDS 7008-2024', departments: '水力发电厂运行部', time: '2025-02-20' },
	{ title: '电站运行巡检作业指导书', num: 'Q/BHTHP.ZDS 7008-2024', departments: '水力发电厂运行部', time: '2025-02-20' },
	{ title: '电站运行巡检作业指导书', num: 'Q/BHTHP.ZDS 7008-2024', departments: '水力发电厂运行部', time: '2025-02-20' },
	{ title: '电站运行巡检作业指导书', num: 'Q/BHTHP.ZDS 7008-2024', departments: '水力发电厂运行部', time: '2025-02-20' },
	{ title: '电站运行巡检作业指导书', num: 'Q/BHTHP.ZDS 7008-2024', departments: '水力发电厂运行部', time: '2025-02-20' },
	{ title: '电站运行巡检作业指导书', num: 'Q/BHTHP.ZDS 7008-2024', departments: '水力发电厂运行部', time: '2025-02-20' },
	{ title: '电站运行巡检作业指导书', num: 'Q/BHTHP.ZDS 7008-2024', departments: '水力发电厂运行部', time: '2025-02-20' },
	{ title: '电站运行巡检作业指导书', num: 'Q/BHTHP.ZDS 7008-2024', departments: '水力发电厂运行部', time: '2025-02-20' },
])
// 搜索
const search = () => {

}
// 切换标题
const changeTitle = (index) => {
	titleCurIndex.value = index
}

const screening = () => {
	// picker.value.show()
	console.log(daDropdownRef.value);
	
	daDropdownRef.value?.handleMenuClick()

}
</script>

<style lang="scss" scoped>
.knowledgeBase {
	// position: relative;
	.search-title {
		width: 100%;
		display: flex;
	    justify-content: space-around;
		.title-item {
			color: #ffffffb8;
			padding-bottom: 10rpx;
		}
		.active {
			color: #fff;
			font-weight: bold;
			border-bottom: 6rpx solid #fff;
		}
	}

	.list-box {
		.title {
			width: 100%;
		}
		.info {
			margin-right: 0;
			width: 100%;
		}
	}

	:deep(.da-dropdown-menu) {
		position: absolute!important;
		width: 50rpx;
		height: 60rpx;
		top: 100rpx!important;
		right: 40rpx!important;
		opacity: 0;
	}
	:deep(.da-dropdown-content) {
		top: 170rpx!important;
	}
}
</style>