优化一点前端的UI

This commit is contained in:
陈景阳
2019-08-23 20:39:14 +08:00
parent 9904b1da47
commit 05dbbc535e
4 changed files with 36 additions and 14 deletions

View File

@@ -165,7 +165,7 @@ export default {
{ name: 'ip', label: 'IP', width: '160' },
{ name: 'type', label: 'Type', width: '120' },
// { name: 'port', label: 'Port', width: '80' },
{ name: 'status', label: 'Status', width: '120', sortable: true },
{ name: 'status', label: 'Status', width: '120' },
{ name: 'description', label: 'Description', width: 'auto' }
],
nodeFormRules: {

View File

@@ -114,7 +114,7 @@
<!--@change="onSearch">-->
<!--</el-input>-->
<div class="left">
<el-autocomplete v-model="filterSite"
<el-autocomplete size="small" v-model="filterSite"
:placeholder="$t('Site')"
clearable
:fetch-suggestions="fetchSiteSuggestions"
@@ -122,16 +122,16 @@
</el-autocomplete>
</div>
<div class="right">
<el-button v-if="false" type="primary" icon="fa fa-download" @click="openImportDialog">
<el-button size="small" v-if="false" type="primary" icon="fa fa-download" @click="openImportDialog">
{{$t('Import Spiders')}}
</el-button>
<el-button type="success"
<el-button size="small" type="success"
icon="el-icon-plus"
class="btn add"
@click="onAdd">
{{$t('Add Spider')}}
</el-button>
<el-button type="success"
<el-button size="small" type="success"
icon="el-icon-refresh"
class="btn refresh"
@click="onRefresh">
@@ -538,7 +538,7 @@ export default {
}
.table {
margin-top: 20px;
margin-top: 8px;
border-radius: 5px;
.el-button {

View File

@@ -4,7 +4,7 @@
<!--filter-->
<div class="filter">
<div class="left">
<el-select class="filter-select"
<el-select size="small" class="filter-select"
v-model="filter.node_id"
:placeholder="$t('Node')"
filterable
@@ -12,7 +12,7 @@
@change="onSelectNode">
<el-option v-for="op in nodeList" :key="op._id" :value="op._id" :label="op.name"></el-option>
</el-select>
<el-select class="filter-select"
<el-select size="small" class="filter-select"
v-model="filter.spider_id"
:placeholder="$t('Spider')"
filterable
@@ -20,7 +20,7 @@
@change="onSelectSpider">
<el-option v-for="op in spiderList" :key="op._id" :value="op._id" :label="op.name"></el-option>
</el-select>
<el-button type="success"
<el-button size="small" type="success"
icon="el-icon-search"
class="refresh"
@click="onRefresh">
@@ -119,7 +119,7 @@
:width="col.width">
</el-table-column>
</template>
<el-table-column :label="$t('Action')" align="left" width="150" fixed="right">
<el-table-column :label="$t('Action')" align="left" width="120" fixed="right">
<template slot-scope="scope">
<el-tooltip :content="$t('View')" placement="top">
<el-button type="primary" icon="el-icon-search" size="mini" @click="onView(scope.row)"></el-button>
@@ -172,11 +172,11 @@ export default {
{ name: 'node_name', label: 'Node', width: '120' },
{ name: 'spider_name', label: 'Spider', width: '120' },
{ name: 'status', label: 'Status', width: '120' },
{ name: 'create_ts', label: 'Create Time', width: '100' },
// { name: 'create_ts', label: 'Create Time', width: '100' },
{ name: 'start_ts', label: 'Start Time', width: '100' },
{ name: 'finish_ts', label: 'Finish Time', width: '100' },
{ name: 'wait_duration', label: 'Wait Duration (sec)', width: '80', align: 'right' },
{ name: 'runtime_duration', label: 'Runtime Duration (sec)', width: '80', align: 'right' },
{ name: 'wait_duration', label: 'Wait Duration (sec)', align: 'right' },
{ name: 'runtime_duration', label: 'Runtime Duration (sec)', align: 'right' },
{ name: 'total_duration', label: 'Total Duration (sec)', width: '80', align: 'right' },
{ name: 'result_count', label: 'Results Count', width: '80' }
// { name: 'avg_num_results', label: 'Average Results Count per Second', width: '80' }
@@ -348,7 +348,7 @@ export default {
}
.table {
margin-top: 20px;
margin-top: 8px;
border-radius: 5px;
.el-button {

View File

@@ -24,6 +24,12 @@
<!--./dialog-->
<el-card>
<div class="filter">
<div class="left"></div>
<div class="right">
<el-button type="primary" size="small">新增用户</el-button>
</div>
</div>
<!--table-->
<el-table
:data="userList"
@@ -67,6 +73,7 @@
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
@current-change="onPageChange"
@@ -181,6 +188,21 @@ export default {
</script>
<style scoped>
.filter {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
.filter-search {
width: 240px;
}
.right {
.btn {
margin-left: 10px;
}
}
}
.el-table {
border-radius: 5px;
}