antissoft / HongHua-JJ

<template>
	<view class="page-container">
		<view class="toptitle">
			<view class="toptitle_left" @click="ht">
				<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
			</view>
			<view class="toptitle_title">
				备件支持
			</view>
		</view>
		<view class="title">
			<view class="title-search-wrapper">
				<u-search shape="square" :clearabled="true" :showAction="false" placeholder="请输入备件名称/物料编码/备件位置/设备名称/设备出厂编号" v-model="form.keyword"></u-search>
				<view class="filter-btn" @click="showFlPicker = true">
					<text class="filter-btn-text">{{ selectedFlName || '关联产品' }}</text>
					<text class="filter-btn-icon">▼</text>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="search-placeholder"></view>
			<u-picker 
				:show="showFlPicker" 
				:columns="flColumns" 
				@confirm="flConfirm" 
				@cancel="showFlPicker = false"
				class="fl-picker-custom"
			></u-picker>
			<!-- 显示备件列表 -->
			<view v-if="list.length === 0 && !loading" class="empty-tip">
				<view style="text-align: center; padding: 40px 20px; color: #999;">
					<text>仅显示您所属设备关联产品的备件，暂无数据时可前往「我的设备」添加设备</text>
				</view>
			</view>
			<view v-else class="box" v-for="item in list" :key="item.id" @click="xq(item)">
				<view class="top" style="margin-bottom: 10px;">
					<span class="f1">{{ item.mc || '' }}</span>
				</view>
				<view class="top2">
					<span class="f4">备件情况</span>
					<span class="f5">{{ item.bjqk == null ? '' : item.bjqk }}</span>
				</view>
				<view class="top2">
					<span class="f4">备件位置</span>
					<span class="f5">{{ item.bjwz ? item.bjwz : (item.wz == null ? '' : item.wz) }}</span>
				</view>
				<view class="top2">
					<span class="f4">关联产品</span>
					<span class="f5">{{ item.glcpmc || '' }}</span>
				</view>
				<view class="footer" style="border-top: 1px solid #ccc;padding-top: 10px;">
					<span></span>
					<view class="">
						<u-button size="small" type="primary" text="查看"></u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				dataTree: [],
				expandedIds: [],
				keyword: "",
				show: false,
				columns: [
					['设备名','备件名称/备件编号','关键词']
				],
				title: "关键词",
				list:[],
				loading: false,
				form:{
					currentPage:1,
					pageSize:20,
					keyword:"",
					fl: "" // 关联产品筛选
				},
				nv_length:0,
				categoryCounts: {}, // 存储每个分类的备件数量 {categoryId: count}
				showFlPicker: false,
				flOptions: [], // 产品选项
				flColumns: [['全部']], // 产品选择器的列数据
				flMap: {}, // 产品名称到ID的映射
				selectedFlName: "", // 选中的产品名称
				searchTimer: null // 搜索防抖定时器
			}
		},
		computed: {
			hasSearchKeyword() {
				return (this.form.keyword && this.form.keyword.trim() !== '') || (this.form.fl && this.form.fl.trim() !== '');
			}
		},
		onReachBottom() {
			// 分页加载
			var page = Math.ceil(this.nv_length / this.form.pageSize);
			if (page > parseInt(this.form.currentPage)) {
				this.form.currentPage = parseInt(this.form.currentPage) + 1
				this.bjyzclist(true);
			} else {
				uni.showToast({
					icon: "error",
					title: "没有更多内容"
				})
			}
		},
		onUnload() {
			// 页面卸载时清除防抖定时器
			if(this.searchTimer){
				clearTimeout(this.searchTimer);
				this.searchTimer = null;
			}
		},
		watch:{
			'form.keyword'(newVal, oldVal){
				console.log('keyword changed', newVal, oldVal)
				// 清除之前的定时器
				if(this.searchTimer){
					clearTimeout(this.searchTimer);
					this.searchTimer = null;
				}
				// 重置分页和列表
				this.form.currentPage = 1
				this.list = []
				// 设置防抖，500ms后执行搜索
				this.searchTimer = setTimeout(() => {
					this.bjyzclist();
					this.searchTimer = null;
				}, 500);
			},
			'form.fl'(newVal, oldVal){
				// 关联产品变化时立即搜索，不需要防抖
				this.form.currentPage = 1
				this.list = []
				// 如果有关键字搜索的防抖定时器，先清除它
				if(this.searchTimer){
					clearTimeout(this.searchTimer);
					this.searchTimer = null;
				}
				this.bjyzclist();
			},
		},
		onLoad() {
			this.getflOptions(); // 获取产品选项
			this.bjyzclist(); // 直接加载备件列表
		},
		methods:{
			isExpanded(id){
				return this.expandedIds.indexOf(id) !== -1;
			},
			toggleExpand(id){
				const idx = this.expandedIds.indexOf(id);
				if(idx === -1){
					this.expandedIds.push(id);
				}else{
					this.expandedIds.splice(idx,1);
				}
			},
			selectCategory(node){
				const id = node.id || ''
				if(!id){
					return
				}
				// 如果有子节点，只展开/收起，不跳转
				if(node.children && node.children.length > 0){
					this.toggleExpand(node.id)
					return
				}
				// 如果没有子节点，跳转到列表页
				uni.navigateTo({
					url: `/pages/new/bjzc/list?bjfl=${id}`
				})
			},
			// 获取分类
			hqcpfl(){
				this.API.hqcpfl("625969064434468101").then(res=>{
					console.log("获取分类",res);
					if(res && res.code == 200 && res.data && res.data.list){
						if(res.data.list.length > 0){
							const mapNode = (n)=>({
								id: n.id,
								name: n.fullName,
								children: Array.isArray(n.children) ? n.children.map(mapNode) : []
							});
							this.dataTree = res.data.list.map(mapNode);
							console.log("分类树数据:", this.dataTree);
							// 获取所有分类的备件数量
							this.loadCategoryCounts();
						} else {
							console.warn("分类列表为空");
							this.dataTree = [];
						}
					} else {
						console.error("获取分类失败，响应:", res);
						this.dataTree = [];
					}
				}).catch(err => {
					console.error("获取分类异常:", err);
					this.dataTree = [];
				})
			},
			// 获取所有叶子分类的备件数量
			loadCategoryCounts(){
				// 获取所有叶子节点（没有子节点的分类）
				const getLeafNodes = (nodes) => {
					let leafNodes = [];
					nodes.forEach(node => {
						if (!node.children || node.children.length === 0) {
							leafNodes.push(node);
						} else {
							leafNodes = leafNodes.concat(getLeafNodes(node.children));
						}
					});
					return leafNodes;
				};
				
				const leafNodes = getLeafNodes(this.dataTree);
				console.log('叶子节点：', leafNodes);
				
				// 为每个叶子节点获取数量
				if (leafNodes.length > 0) {
					const promises = leafNodes.map(node => {
						return this.API.bjyzclist({
							currentPage: 1,
							pageSize: 1, // 只需要总数，设置最小页大小
							bjfl: node.id
						}).then(res => {
							if (res && res.code === 200 && res.data && res.data.pagination) {
								const count = res.data.pagination.total || 0;
								this.$set(this.categoryCounts, node.id, count);
								return { id: node.id, count };
							}
							this.$set(this.categoryCounts, node.id, 0);
							return { id: node.id, count: 0 };
						}).catch(err => {
							console.error(`获取分类 ${node.id} 数量失败：`, err);
							this.$set(this.categoryCounts, node.id, 0);
							return { id: node.id, count: 0 };
						});
					});
					
					Promise.all(promises).then(results => {
						console.log('所有分类数量：', results);
					});
				}
			},
			// 获取分类的备件数量（如果当前节点没有，尝试从子节点汇总）
			getCategoryCount(node){
				if (!node || !node.id) return null;
				// 如果是叶子节点，直接返回数量（如果已加载则返回，否则返回 null 表示未加载）
				if (!node.children || node.children.length === 0) {
					// 检查是否已经加载过该分类的数量
					if (this.categoryCounts.hasOwnProperty(node.id)) {
						return this.categoryCounts[node.id] || 0;
					}
					// 还未加载，返回 null
					return null;
				}
				// 如果有子节点，计算所有叶子子节点的总数
				const getLeafCount = (n) => {
					if (!n.children || n.children.length === 0) {
						if (this.categoryCounts.hasOwnProperty(n.id)) {
							return this.categoryCounts[n.id] || 0;
						}
						return null; // 未加载
					}
					let total = 0;
					let hasLoaded = false;
					n.children.forEach(child => {
						const childCount = getLeafCount(child);
						if (childCount !== null) {
							total += childCount;
							hasLoaded = true;
						}
					});
					return hasLoaded ? total : null;
				};
				return getLeafCount(node);
			},
			timestampToTime(timestamp) {
			    const date = new Date(timestamp); //时间戳为10位需*1000，13位不需乘
			    const Y = date.getFullYear() + '-';
			    const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			    const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
			    const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			    const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			    const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			    
			    return Y + M + D + h + m + s;
			},
			// 获取产品选项（用于关联产品筛选，仅当前用户可查看的产品）
			getflOptions(){
				this.API.hqcpglAllowedList({
					currentPage: 1,
					pageSize: 1000 // 获取足够多的产品
				}).then(res => {
					if(res && res.code == 200 && res.data && res.data.list){
						this.flOptions = res.data.list;
						// 构建选择器的列数据（产品名称列表）
						const productNames = res.data.list.map(item => {
							// 显示格式：产品名称 (产品ID)
							const displayName = item.cpmc ? `${item.cpmc}${item.cpid ? ' (' + item.cpid + ')' : ''}` : (item.cpid || item.id);
							return displayName;
						});
						// 构建ID映射（产品名称到ID的映射）
						this.flMap = {};
						res.data.list.forEach(item => {
							const displayName = item.cpmc ? `${item.cpmc}${item.cpid ? ' (' + item.cpid + ')' : ''}` : (item.cpid || item.id);
							this.flMap[displayName] = item.id;
						});
						// 添加"全部"选项
						this.flColumns = [['全部', ...productNames]];
					} else {
						console.error('获取产品列表失败，响应:', res);
						this.flOptions = [];
						this.flColumns = [['全部']];
						this.flMap = {};
					}
				}).catch(err => {
					console.error('获取产品列表失败:', err);
					this.flOptions = [];
					this.flColumns = [['全部']];
					this.flMap = {};
				});
			},
			// 产品选择确认
			flConfirm(e){
				const selectedIndex = e.indexs[0];
				const selectedText = e.value[0];
				if(selectedIndex === 0 || selectedText === '全部'){
					this.form.fl = '';
					this.selectedFlName = '';
				} else {
					this.form.fl = this.flMap[selectedText] || '';
					this.selectedFlName = selectedText;
				}
				this.showFlPicker = false;
			},
			bjyzclist(append = false){
				if (this.loading) return
				this.loading = true
				
				// 构建查询参数
				const params = {
					currentPage: this.form.currentPage,
					pageSize: this.form.pageSize
				};
				
				// 如果有搜索关键字或关联产品筛选，使用简单搜索API
				if ((this.form.keyword && this.form.keyword.trim() !== '') || (this.form.fl && this.form.fl.trim() !== '')) {
					if(this.form.keyword && this.form.keyword.trim() !== ''){
						params.searchKey = this.form.keyword.trim();
					}
					if(this.form.fl && this.form.fl.trim() !== ''){
						params.fl = this.form.fl.trim();
					}
					
					console.log('简单搜索请求参数：', params)
					uni.showLoading({
						title: '加载中...'
					})
					this.API.bjyzclistSimpleSearch(params).then(res => {
						console.log('简单搜索API返回数据：', res)
						uni.hideLoading()
						this.loading = false
						if (res && res.code === 200 && res.data) {
							this.nv_length = res.data.pagination ? res.data.pagination.total : 0
							const rows = Array.isArray(res.data.list) ? res.data.list : []
							if (!append) this.list = []
							for (let i = 0; i < rows.length; i++) {
								this.list.push(rows[i])
							}
							if (this.list.length === 0 && !append) {
								uni.showToast({
									icon: 'none',
									title: '暂无数据'
								})
							}
						} else {
							if (!append) this.list = []
							uni.showToast({
								icon: 'none',
								title: res?.msg || '加载失败'
							})
						}
					}).catch((error) => {
						console.error('简单搜索请求失败：', error)
						uni.hideLoading()
						this.loading = false
						if (!append) this.list = []
						uni.showToast({
							icon: 'none',
							title: '加载失败，请稍后重试'
						})
					})
				} else {
					// 没有搜索条件，使用原来的API
					console.log('请求参数：', params)
					uni.showLoading({
						title: '加载中...'
					})
					this.API.bjyzclist(params).then(res => {
						console.log('API返回数据：', res)
						uni.hideLoading()
						this.loading = false
						if (res && res.code === 200 && res.data) {
							this.nv_length = res.data.pagination ? res.data.pagination.total : 0
							const rows = Array.isArray(res.data.list) ? res.data.list : []
							if (!append) this.list = []
							for (let i = 0; i < rows.length; i++) {
								this.list.push(rows[i])
							}
							if (this.list.length === 0 && !append) {
								uni.showToast({
									icon: 'none',
									title: '暂无数据'
								})
							}
						} else {
							if (!append) this.list = []
							uni.showToast({
								icon: 'none',
								title: res?.msg || '加载失败'
							})
						}
					}).catch((error) => {
						console.error('请求失败：', error)
						uni.hideLoading()
						this.loading = false
						if (!append) this.list = []
						uni.showToast({
							icon: 'none',
							title: '加载失败，请稍后重试'
						})
					})
				}
			},
			ht(){
				// 获取页面栈
				const pages = getCurrentPages();
				// 如果页面栈中只有一页（当前页），则直接跳转到首页
				if (pages.length === 1) {
					// 首页是 tabBar 页面，使用 switchTab
					uni.switchTab({
						url: '/pages/home/home'
					});
				} else {
					// 否则返回上一页
					uni.navigateBack({
						delta: 1
					});
				}
			},
			confirm(e){
				console.log("11",e);
				this.title = e.value[0]
				this.show = false
				this.keyword = ''
			},
			xq(item){
				uni.setStorageSync("bjxqdetail", item)
				uni.navigateTo({
					url:"/pages/new/bjzc/detail"
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import '../zlgl/index.scss';
	@import '../gzpc/index.scss';
  .category-tree{
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
  }
  .category-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
  }
  .category-name{
    font-size: 14px;
    color: #333;
  }
  .caret{
    font-size: 12px;
    color: #666;
    width: 20px;
    text-align: center;
  }
  .category-item {
    cursor: pointer;
    user-select: none;
    min-height: 44px;
  }
  .category-name-wrapper {
    flex: 1;
    cursor: pointer;
    user-select: none;
    padding: 10px 0;
  }
  .category-toggle {
    cursor: pointer;
    user-select: none;
    padding: 10px;
    min-width: 40px;
    text-align: center;
  }
  .category-count {
    margin-left: 8px;
    color: #666;
    font-size: 12px;
    font-weight: normal;
  }
  .category-count-zero {
    color: #ccc;
  }
  // 修复返回按钮点击区域
  .toptitle_left {
    padding: 10px 15px !important;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
</style>