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="show" :columns="columns" @confirm="confirm" @cancel="show = false"></u-picker>
		<u-picker 
			:show="showFlPicker" 
			:columns="flColumns" 
			@confirm="flConfirm" 
			@cancel="showFlPicker = false"
			class="fl-picker-custom"
		></u-picker>
		<view class="box" v-for="item in list" @click="xq(item)">
			<view class="top" style="margin-bottom: 10px;">
				<span class="f1">{{item.zlm}}</span>
			</view>
			<view class="top2">
				<span class="f4">资产编码</span>
				<span class="f5">{{item.sbbh == null ? '' : item.sbbh}}</span>
			</view>
			<view class="top2">
				<span class="f4">发布日期</span>
				<span class="f5">{{formatDate(item.fbsj)}}</span>
			</view>
			<view class="top2">
				<span class="f4">关联产品</span>
				<span class="f5">{{item.fl1 || '无'}}</span>
			</view>
			<view class="xx">
			</view>
			<view class="footer">
				<span></span>
				<view class="">
					<u-button size="small" type="primary" text="查看"></u-button>
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				show: false,
				columns: [
					['设备名', '资料名', '关键词']
				],
				title: "关键词",
				form: {
					currentPage: 1,
					pageSize: 10,
					keyword: "",
					fl: "" // 分类筛选
				},
				nv_length: 0,
				list: [],
				showFlPicker: false,
				flOptions: [], // 分类选项
				flColumns: [['全部']], // 分类选择器的列数据
				flMap: {}, // 分类名称到ID的映射
				selectedFlName: "", // 选中的分类名称
				searchTimer: null // 搜索防抖定时器
			}
		},
		onLoad() {
			this.getflOptions(); // 获取分类选项
			// 延迟一下再加载列表，确保页面初始化完成
			setTimeout(() => {
				this.zlgllist();
			}, 100);
		},
		onReachBottom() {
			var page = Math.ceil(this.nv_length / 10);
			if (page > parseInt(this.form.currentPage)) {
				this.form.currentPage = parseInt(this.form.currentPage) + 1
				this.zlgllist();
			} else {
				uni.showToast({
					icon: "error",
					title: "没有更多内容"
				})
			}
		},
		onUnload() {
			// 页面卸载时清除防抖定时器
			if(this.searchTimer){
				clearTimeout(this.searchTimer);
				this.searchTimer = null;
			}
		},
		watch: {
			'form.keyword'(newVal, oldVal) {
				console.log('name changed', newVal, oldVal)
				// 清除之前的定时器
				if(this.searchTimer){
					clearTimeout(this.searchTimer);
					this.searchTimer = null;
				}
				// 重置分页和列表
				this.form.pageSize = 10
				this.form.currentPage = 1
				this.list = []
				// 设置防抖，500ms后执行搜索
				this.searchTimer = setTimeout(() => {
					this.zlgllist();
					this.searchTimer = null;
				}, 500);
			},
			'form.fl'(newVal, oldVal){
				// 分类变化时立即搜索，不需要防抖
				this.form.pageSize = 10
				this.form.currentPage = 1
				this.list = []
				// 如果有关键字搜索的防抖定时器，先清除它
				if(this.searchTimer){
					clearTimeout(this.searchTimer);
					this.searchTimer = null;
				}
				this.zlgllist();
			},
		},
		methods: {
			// 获取产品选项（用于关联产品筛选，仅当前用户可查看的产品）
			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;
			},
			// 获取资料
			zlgllist() {
				// 构建查询参数，使用简单搜索方法
				const params = {
					currentPage: this.form.currentPage,
					pageSize: this.form.pageSize
				};
				// 只有当分类不为空时才添加
				if(this.form.fl && this.form.fl.trim() !== ''){
					params.fl = this.form.fl.trim();
				}
				// 只有当搜索关键字不为空时才添加
				if(this.form.keyword && this.form.keyword.trim() !== ''){
					params.searchKey = this.form.keyword.trim();
				}
				// 权限：管理员看全部资料，客户只看“我的设备”中已有设备关联产品的资料
				const userInfo = uni.getStorageSync('userinfo') || {};
				const userAccount = (userInfo.userAccount || '').toString();
				const isAdministrator = userInfo.isAdministrator === true;
				if (!isAdministrator && userAccount !== 'admin') {
					// 客户：传所属客户编号，后端按我的设备关联产品过滤资料
					const sskhbh = (userInfo.userId || userInfo.id || '').toString();
					if (sskhbh) params.sskhbh = sskhbh;
				}
				// 使用新的简单搜索API，只匹配资料名称、所属设备、关联产品
				this.API.zlgllistSimpleSearch(params).then(res => {
					console.log("搜索参数:", params);
					console.log("搜索结果完整数据:", res);
					// request.js 中 resolve(res.data)，所以 res 就是后端返回的 res.data
					// 后端返回结构: { code: 200, data: { pagination: {...}, list: [...] }, msg: "操作成功" }
					// 所以 res 应该是: { code: 200, data: { pagination: {...}, list: [...] }, msg: "操作成功" }
					
					// 检查 code 是否为成功状态
					if(res && res.code && res.code !== 200){
						console.error("API 返回错误码:", res.code, "错误信息:", res.msg);
						if(this.form.currentPage == 1){
							this.list = []
						}
						return;
					}
					
					// 检查 data 是否存在
					if(res && res.data){
						this.nv_length = res.data.pagination ? res.data.pagination.total : 0;
						if(res.data.list && Array.isArray(res.data.list) && res.data.list.length > 0){
							for(let i = 0; i < res.data.list.length; i++){
								this.list.push(res.data.list[i])
							}
						} else {
							if(this.form.currentPage == 1){
								this.list = []
							}
						}
					} else {
						console.error("响应数据格式错误，res:", res);
						console.error("res.data:", res ? res.data : 'res is null');
						if(this.form.currentPage == 1){
							this.list = []
						}
					}
				}).catch(err => {
					console.error("搜索失败，错误信息:", err);
					console.error("错误类型:", typeof err);
					console.error("错误详情:", JSON.stringify(err));
					if(this.form.currentPage == 1){
						this.list = []
					}
				})
			},
			formatDate(timestamp) {
				// 如果时间戳为空、null、undefined或空字符串，返回空字符串
				if (timestamp === null || timestamp === undefined || timestamp === '') {
					return '';
				}
				// 如果是字符串类型的时间戳，尝试转换为数字
				if (typeof timestamp === 'string') {
					const numTimestamp = parseInt(timestamp);
					if (isNaN(numTimestamp) || numTimestamp === 0) {
						return '';
					}
					timestamp = numTimestamp;
				}
				// 如果时间戳为0或负数，返回空字符串（0通常表示未设置的日期，会显示为1970-01-01）
				if (timestamp === 0 || timestamp < 0) {
					return '';
				}
				// 检查日期对象是否有效
				const date = new Date(timestamp);
				if (isNaN(date.getTime())) {
					return '';
				}
				// 如果时间戳小于86400000（1天的毫秒数），很可能是未设置的默认值（1970-01-01）
				// 86400000 = 24 * 60 * 60 * 1000，表示1970-01-02 00:00:00的时间戳
				if (timestamp < 86400000) {
					return '';
				}
				// 格式化日期
				return this.timestampToTime(timestamp);
			},
			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;
			},
			ht() {
				uni.navigateBack({
					delta: 1
				});
			},
			confirm(e) {
				console.log("11", e);
				this.title = e.value[0]
				this.show = false
				this.keyword = ''
			},
			xq(data) {
				var info = JSON.stringify(data)
				uni.setStorageSync('zlxx', info)
				uni.navigateTo({
					url: "/pages/new/zlgl/detail"
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'index.scss';
</style>