日常练习03
<template>
<div>
<h2>统计查询</h2>
<form @submit.prevent="searchStats">
<label>科技活动类型:</label>
<input v-model="stats.address" />
<label>机构属性:</label>
<input v-model="stats.orgAttribute" />
<button type="submit">查询</button>
</form>
<div v-if="results && results.length">
<h3>统计结果:</h3>
<ul>
<!-- 在这里确保 result 不为 null 或 undefined -->
<li v-for="result in results" :key="result?.address" v-if="result">
<strong>机构全称:</strong> {{ result.address || '未知' }}<br />
<strong>归口管理部门:</strong> {{ result.managementDepartment || '未知' }}<br />
<strong>通讯地址:</strong> {{ result.address || '未知' }}<br />
<strong>联系方式:</strong> {{ result.contactPerson || '未知' }} ({{ result.phoneMobile || '未知' }})<br />
<strong>科技活动类型:</strong> {{ result.activityType || '未知' }}<br />
<strong>机构属性:</strong> {{ result.orgAttribute || '未知' }}<br />
<strong>技术需求名称:</strong> {{ result.techDemandName || '未知' }}<br />
<strong>需求时限:</strong> {{ result.demandPeriodStart || '未知' }} - {{ result.demandPeriodEnd || '未知' }}<br />
</li>
</ul>
</div>
<div v-else>
<p>没有找到统计结果</p>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
stats: {
activityType: '',
orgAttribute: ''
},
results: []
};
},
methods: {
searchStats() {
axios.get('http://localhost:8081/api/technology-demand/search-by-type-or-attribute', {
params: this.stats
})
.then(response => {
// 过滤掉 null 或 undefined 数据
this.results = Array.isArray(response.data) ? response.data.filter(item => item !== null && item !== undefined) : [];
console.log('响应数据:', this.results); // 调试输出
})
.catch(error => {
alert('统计查询失败');
console.error('查询出现错误：', error); // 在控制台中打印错误信息以帮助调试
});
}
}
};
</script>
