<script> import { getAllImageData } from '@/api/index'; export default { data() { return { query: { id: '', createdAt: '', }, imageData: [], }; }, created() { this.getData(); }, methods: { getData() { getAllImageData() .then(response => { this.imageData = response.data.map(item => { return { id: item.id, createdAt: item.createdAt, }; }); console.log(response.data); }) .catch(error => { console.error(error); }); }, onSearch() { // 判断输入框的值是否为空 if (this.query.id == '' && this.query.createdAt == '') { // 输入框为空，获取所有数据 this.getData(); } else { // 输入框有值，传递查询条件进行筛选 getAllImageData(this.query) .then(response => { this.imageData = response.data.map(item => { return { id: item.id, createdAt: item.createdAt, }; }); console.log(this.query) console.log(666); console.log(response.data); }) .catch(error => { console.error(error); }); } }, onRest() { // 重置查询条件 this.query.id = ''; this.query.createdAt = ''; // 获取重置后的数据 this.getData(); }, }, }; </script> api接口为export const getAllImageData = async (query) => { try { const response = await api.get('/Photo/AllImageDataGet', { params: query }); return response.data; } catch (error) { console.log('error', error); return null; } };

这段代码是一个 Vue 组件，它使用了 `getAllImageData` 这个 API 方法来获取图片数据，并将数据展示在页面上。组件中的 `data` 属性定义了一个 `query` 对象和一个 `imageData` 数组，`query` 对象用于存储查询条件，`imageData` 数组用于存储获取到的图片数据。

在组件的 `created` 钩子函数中调用了 `getData` 方法来初始化页面数据。`getData` 方法通过调用 `getAllImageData` 方法获取图片数据，并将获取到的数据赋值给 `imageData` 数组。

组件还定义了 `onSearch` 方法和 `onReset` 方法，用于处理搜索和重置操作。在 `onSearch` 方法中，首先判断输入框的值是否为空，如果为空，则调用 `getData` 方法获取所有数据；如果不为空，则将查询条件传递给 `getAllImageData` 方法进行筛选，并将筛选后的数据赋值给 `imageData` 数组。在 `onReset` 方法中，将查询条件重置为空，并再次调用 `getData` 方法获取数据。

最后，这段代码还定义了一个名为 `getAllImageData` 的 API 方法，它通过调用 `api.get` 方法来发送 GET 请求，并将查询条件作为参数传递给后端接口。接口返回的数据通过 `response.data` 获取，并返回给调用方。

请注意，这是一个伪代码示例，具体实现可能会有所不同。