代码拉取完成,页面将自动刷新
搜索页面由2个部分组成:
<template>
<div class="cmdb-search-container">
<!-- 搜索框 -->
<div class="box-shadow search-box">
搜索页面
</div>
<!-- 搜索结果 -->
<div class="box-shadow content-box">
搜索结果
</div>
</div>
</template>
<script>
export default {
name: "Search",
data() {
return {};
},
};
</script>
<style scoped>
.search-box {
}
.content-box {
padding-top: 12px;
}
</style>
我们使用input输入框作为搜索框
<!-- 搜索框 -->
<div class="box-shadow search-box">
<div class="search-input">
<el-input
v-model="query.keywords"
placeholder="请输入 资源名称|ID|IP 敲回车进行搜索"
></el-input>
</div>
</div>
对应样式
.search-box {
height: 80px;
background-color: white;
display: flex;
align-items: center;
border-radius: 4px;
}
.search-input {
width: 100%;
margin-left: 12px;
margin-right: 12px;
}
搜索的结果我们使用表格展示
<!-- 搜索结果 -->
<div class="content-box">
<el-table
:data="resources"
v-loading="fetchResourceLoading"
style="width: 100%"
>
<el-table-column prop="name" label="名称">
<template slot-scope="{ row }">
{{ row.name }}
</template>
</el-table-column>
<el-table-column prop="name" label="资产来源">
<template slot-scope="{ row }">
{{ row.vendor }} <br />
{{ row.region }}
</template>
</el-table-column>
<el-table-column prop="name" label="内网IP/外网IP">
<template slot-scope="{ row }">
{{ row.private_ip }} <br />
{{ row.public_ip }}
</template>
</el-table-column>
<el-table-column prop="name" label="同步时间">
<template slot-scope="{ row }">
{{ row.os_name }}
</template>
</el-table-column>
<el-table-column prop="sync_at" label="创建时间">
<template slot-scope="scope">
{{ scope.row.create_at | parseTime }}
</template>
</el-table-column>
<el-table-column prop="expire_at" label="过期时间">
<template slot-scope="scope">
{{ scope.row.expire_at | parseTime }}
</template>
</el-table-column>
<el-table-column prop="name" label="状态">
<template slot-scope="{ row }">
{{ row.status }}
</template>
</el-table-column>
</el-table>
</div>
<script>
export default {
name: "Search",
data() {
return {
fetchResourceLoading: false,
resources: [],
query: {
keywords: "",
},
};
},
};
</script>
业务模块开发的步骤:
完成Search 模块, 具体参考 resource 服务
完成后测试接口是否正常:
封装Seach API
import request from "@/api/client";
export function Search(params) {
return request({
url: "/search",
method: "get",
params: params,
});
}
引入到组件中:
import { Search } from "@/api/cmdb/resource";
import Pagination from "@/components/Pagination";
export default {
name: "Search",
components: { Pagination },
data() {
return {
fetchResourceLoading: false,
resources: [],
total: 0,
query: {
page_size: 20,
page_number: 1,
keywords: "",
},
};
},
methods: {
async search() {
this.fetchResourceLoading = true;
try {
const resp = await Search(this.query);
this.resources = resp.data.items;
this.total = resp.data.total;
} catch (error) {
this.$notify.error({
title: "搜索资源异常",
message: error,
});
} finally {
this.fetchResourceLoading = false;
}
},
},
};
</script>
最后添加搜索框和分页
<template>
<div class="cmdb-search-container">
<!-- 搜索框 -->
<div class="box-shadow search-box">
<div class="search-input">
<el-input
v-model="query.keywords"
placeholder="请输入 资源名称|ID|IP 敲回车进行搜索"
@keyup.enter.native="search"
></el-input>
</div>
</div>
<!-- 搜索结果 -->
<div class="content-box">
<el-table
:data="resources"
v-loading="fetchResourceLoading"
style="width: 100%"
>
<el-table-column prop="name" label="名称">
<template slot-scope="{ row }">
{{ row.name }}
</template>
</el-table-column>
<el-table-column prop="name" label="资产来源">
<template slot-scope="{ row }">
{{ row.vendor }} <br />
{{ row.region }}
</template>
</el-table-column>
<el-table-column prop="name" label="内网IP/外网IP">
<template slot-scope="{ row }">
{{ row.private_ip }} <br />
{{ row.public_ip }}
</template>
</el-table-column>
<el-table-column prop="name" label="同步时间">
<template slot-scope="{ row }">
{{ row.sync_at | parseTime }}
</template>
</el-table-column>
<el-table-column prop="sync_at" label="创建时间">
<template slot-scope="scope">
{{ scope.row.create_at | parseTime }}
</template>
</el-table-column>
<el-table-column prop="expire_at" label="过期时间">
<template slot-scope="scope">
{{ scope.row.expire_at | parseTime }}
</template>
</el-table-column>
<el-table-column prop="name" label="状态">
<template slot-scope="{ row }">
{{ row.status }}
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="query.page_number"
:limit.sync="query.page_size"
@pagination="search"
/>
</div>
</div>
</template>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。