113 lines
2.7 KiB
Vue
113 lines
2.7 KiB
Vue
<template>
|
|
<el-container>
|
|
<el-aside width="220px">
|
|
<el-tree ref="typeList" class="menu" node-key="label" :data="typeList" :default-expand-all="true" @node-click="nodeClick" :current-node-key="current" :highlight-current="true" :expand-on-click-node="false"> </el-tree>
|
|
</el-aside>
|
|
<el-container>
|
|
<el-main class="nopadding">
|
|
<el-container>
|
|
<el-header>
|
|
<div class="left-panel">
|
|
<el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
|
</div>
|
|
</el-header>
|
|
<el-header style="height:120px;" v-if="typeof chartoption === 'object' && Object.keys(chartoption).length > 0">
|
|
<xEcharts height="100%" :option="chartoption"></xEcharts>
|
|
</el-header>
|
|
<el-main class="nopadding">
|
|
<xTable ref="table" :api="api" :params="params" :tableColumn="tableColumn" stripe highlightCurrentRow @row-click="rowClick">
|
|
<el-table-column type="index" width="55">
|
|
<template #default="scope">
|
|
<span>{{scope.$index+(currentPage - 1) * limit + 1}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
</xTable>
|
|
</el-main>
|
|
</el-container>
|
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
|
|
<el-drawer v-model="infoDrawer" title="日志详情" :size="700" destroy-on-close>
|
|
<info ref="info"></info>
|
|
</el-drawer>
|
|
</template>
|
|
|
|
<script>
|
|
import info from './info'
|
|
import xEcharts from '@/components/xEcharts'
|
|
|
|
export default {
|
|
name: 'log',
|
|
components: {
|
|
info,
|
|
xEcharts
|
|
},
|
|
data() {
|
|
return {
|
|
infoDrawer: false,
|
|
chartoption: {},
|
|
typeList: [],
|
|
date: [],
|
|
data: [],
|
|
search: {
|
|
keyword: ""
|
|
},
|
|
api: '',
|
|
params: [],
|
|
current : '',
|
|
config : {},
|
|
tableColumn : {},
|
|
column : 'default',
|
|
currentPage:1,
|
|
limit:20,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getType();
|
|
},
|
|
watch: {
|
|
|
|
//监听从props里拿到值了
|
|
current(){
|
|
this.getCurrent();
|
|
},
|
|
},
|
|
methods: {
|
|
//树点击
|
|
nodeClick(data){
|
|
if (data.disabled) {
|
|
return false;
|
|
}
|
|
this.current = data.label;
|
|
this.column = data.column || 'column';
|
|
},
|
|
getType(){
|
|
this.$http.get('log/admin/types', {}, { cacheparameters: true }).then((res) => {
|
|
if (res.code == 200) {
|
|
Object.assign(this.$data, res.data);
|
|
}
|
|
});
|
|
},
|
|
getCurrent(){
|
|
this.tableColumn = this.config[this.column] || this.config.default;
|
|
this.params = { type: this.current }
|
|
this.api = 'log/admin/lists'
|
|
this.$refs.table.reload(this.params)
|
|
},
|
|
upsearch(){
|
|
|
|
},
|
|
rowClick(row){
|
|
this.infoDrawer = true
|
|
this.$nextTick(() => {
|
|
this.$refs.info.setData(row)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|