<!--
|
* @Author: lzhe lzhe@example.com
|
* @Date: 2024-03-26 10:28:33
|
* @LastEditors: lzhe lzhe@example.com
|
* @LastEditTime: 2024-03-29 17:38:39
|
* @FilePath: /smart-web/src/views/master/person/main/index.vue
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
-->
|
<template>
|
<div class="api-main">
|
<el-form :inline="true" :model="searchData" abel-width="120px">
|
<el-form-item label="服务id">
|
<el-input v-model="searchData.test" placeholder="服务id" clearable />
|
</el-form-item>
|
<el-form-item label="服务host">
|
<el-input v-model="searchData.test" placeholder="服务host" clearable />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="searchBtn">搜索</el-button>
|
<el-button @click="searchBtn">清空</el-button>
|
</el-form-item>
|
</el-form>
|
<div>
|
<div class="api-table">
|
<el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef">
|
<el-table-column prop="date" label="服务id"></el-table-column>
|
<el-table-column prop="name" label="服务host"></el-table-column>
|
<el-table-column prop="name" label="软件环境"></el-table-column>
|
<el-table-column prop="name" label="日志级别"></el-table-column>
|
<el-table-column prop="name" label="日志id"></el-table-column>
|
<el-table-column prop="name" label="请求接口"></el-table-column>
|
<el-table-column prop="name" label="日志时间"></el-table-column>
|
<el-table-column fixed="right" label="操作">
|
<template #default="scope">
|
<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="currentPage4"
|
:page-sizes="[100, 200, 300, 400]"
|
:page-size="100"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="400">
|
</el-pagination>
|
</div>
|
</div>
|
<el-drawer v-model="drawer" title="查 看" direction="rtl" :before-close="handleClose" size="60%" modal-class="viewData">
|
<el-form :inline="true" :model="viewData" abel-width="120px" class="form-view-data">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="服务id" center>
|
<span>aaa</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="服务host" center>
|
<span>aaa</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="服务ip" center>
|
<span>aaa</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="软件环境" center>
|
<span>aaa</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="日志级别" center>
|
<span>aaa</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="日志id" center>
|
<span>aaa</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="请求接口" center>
|
<span>aaa</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="日志时间" center>
|
<span>aaa</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="用户代理" center>
|
<span>aaa</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="日志管理" center>
|
<span>aaa</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="请求数据" center>
|
<span>aaa</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-drawer>
|
</div>
|
</template>
|
<script>
|
export default {
|
name: "allocation",
|
data(){
|
return {
|
viewData: {},
|
drawer: false,
|
searchData: {
|
test: ""
|
},
|
dialog: {
|
save: false,
|
allocation: false
|
},
|
leftActive: true,
|
input: '',
|
input3: '',
|
tableData: [{
|
date: '2016-05-02',
|
name: '王小虎',
|
province: '上海',
|
city: '普陀区',
|
address: '上海市普陀区金沙江路 1518 弄',
|
zip: 200333
|
}, {
|
date: '2016-05-04',
|
name: '王小虎',
|
province: '上海',
|
city: '普陀区',
|
address: '上海市普陀区金沙江路 1517 弄',
|
zip: 200333
|
}, {
|
date: '2016-05-01',
|
name: '王小虎',
|
province: '上海',
|
city: '普陀区',
|
address: '上海市普陀区金沙江路 1519 弄',
|
zip: 200333
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
province: '上海',
|
city: '普陀区',
|
address: '上海市普陀区金沙江路 1516 弄',
|
zip: 200333
|
}]
|
}
|
},
|
created(){
|
|
},
|
mounted(){
|
|
},
|
methods: {
|
handleClose() {
|
this.drawer = false;
|
},
|
searchBtn() {},
|
//查看
|
table_show(row){
|
this.drawer = true;
|
},
|
handleSizeChange(val) {
|
console.log(`每页 ${val} 条`);
|
},
|
handleCurrentChange(val) {
|
console.log(`当前页: ${val}`);
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.api-main {
|
background-color: #fff;
|
margin: 8px;
|
padding: 8px;
|
}
|
.api-table {
|
padding-left: 8px;
|
padding-right: 8px;
|
margin-bottom: 8px;
|
|
}
|
.multipleTableRef {
|
margin-bottom: 8px;
|
}
|
.form-view-data {
|
padding-left: 160px;
|
padding-right: 50px;
|
}
|
</style>
|
<style>
|
.viewData .el-drawer .el-drawer__header {
|
border-bottom: 1px solid #f0f0f0;
|
padding-bottom: 20px;
|
margin-bottom: 20px;
|
}
|
</style>
|
