x-php-Admin/src/views/system/log/index.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>