factory_web/src/views/template/list.vue

132 lines
3.8 KiB
Vue

<template>
<el-container>
<el-aside width="200px">
<div>
<el-tree node-key="id" :data="data" :default-expanded-keys="[1]" :highlight-current="true" :expand-on-click-node="false" :show-checkbox="true" @node-click="handleNodeClick"></el-tree>
</div>
</el-aside>
<el-container>
<el-header>
<el-button type="primary" icon="el-icon-plus"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary">默认按钮</el-button>
<el-dropdown style="margin-left: 10px;">
<el-button type="primary" plain icon="el-icon-arrow-down"></el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-header>
<el-main id="tableMain">
<el-card shadow="never" v-loading="loading">
<el-table :data="tableData" row-key="name" stripe :height="tableHeight">
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column label="显示名称" prop="meta.title" width="200"></el-table-column>
<el-table-column label="图标" width="80">
<template #default="scope">
<i :class="scope.row.meta.icon"></i>
</template>
</el-table-column>
<el-table-column label="路由名称" prop="name" width="100"></el-table-column>
<el-table-column label="路由地址" prop="path" width="200">
<template #default="scope">
<el-tag>{{scope.row.path}}</el-tag>
</template>
</el-table-column>
<el-table-column label="路由组件" prop="component" width="100"></el-table-column>
<el-table-column label="是否隐藏" prop="meta.hidden">
<template #default="scope">
{{ scope.row.meta.hidden?"是":"否" }}
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" width="100">
<template #default="scope">
<el-button @click="table_show(scope.row)" type="text" size="small">查看</el-button>
<el-button @click="table_edit(scope.row)" type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination background :small="true" layout="total, prev, pager, next, jumper" :total="1000"></el-pagination>
</el-card>
</el-main>
</el-container>
<el-drawer title="我是标题" v-model="drawer" :size="800" :append-to-body="true" direction="rtl" destroy-on-close>
<Show showid="我来自父组件"></Show>
</el-drawer>
</el-container>
</template>
<script>
import Show from './show.vue';
export default {
name: 'list',
data() {
return {
data: [
{label: '桌面'},
{label: '下载'},
{label: '文档'},
{label: '图片'},
{label: '磁盘', id: 1, children:[
{label: 'Windows (C)'},
{label: '本地磁盘 (D)'},
{label: '本地磁盘 (E)'}
]}
],
tableHeight: '0',
tableData: [],
loading: true,
drawer: false
}
},
components: {
Show
},
async created() {
var userInfo = await this.$API.user.info();
var _this = this;
setTimeout(function() {
_this.tableData = userInfo.data.menuList;
_this.loading = false;
}, 500);
},
mounted(){
this.$nextTick(() => {
this.setTableHeight()
})
window.onresize = ()=>{
this.setTableHeight()
}
},
methods: {
setTableHeight(){
this.tableHeight = this.$el.querySelector("#tableMain").offsetHeight - 40 - 78
},
handleNodeClick(data){
console.log(data);
},
table_show(row) {
this.$router.push({
path: '/template/show/' + row.meta.title
});
},
table_edit(row) {
console.log(row);
this.drawer = true
}
}
}
</script>
<style scoped>
</style>