This commit is contained in:
sakuya
parent
9d50fca203
commit
ffd005bb02
|
|
@ -24,7 +24,7 @@
|
|||
"audit": "0",
|
||||
"date": "2020-07-05 09:30:00",
|
||||
"yx": "h.hgvwmw@xjuf.pa",
|
||||
"progress": 65.5
|
||||
"progress": 25.5
|
||||
}
|
||||
],
|
||||
"message": ""
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<template>
|
||||
<div class="scTable" ref="scTableMain" v-loading="loading">
|
||||
<div class="scTable-table">
|
||||
<el-table :data="tableData" ref="scTable" :height="tableHeight" stripe highlight-current-row
|
||||
@selection-change="selectionChange"
|
||||
>
|
||||
<el-table :data="tableData" :row-key="rowKey" ref="scTable" :height="tableHeight" stripe @selection-change="selectionChange">
|
||||
<slot></slot>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="100"></el-empty>
|
||||
|
|
@ -25,7 +23,15 @@
|
|||
name: 'scTable',
|
||||
props: {
|
||||
apiObj: { type: Object, default: () => {} },
|
||||
//apiObj: { type: String, default: "" },
|
||||
data: { type: Object, default: () => {} },
|
||||
rowKey: { type: String, default: "" }
|
||||
},
|
||||
watch: {
|
||||
//监听从props里拿到值了
|
||||
data(){
|
||||
this.tableData = this.data;
|
||||
this.total = this.tableData.length;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -43,10 +49,12 @@
|
|||
})
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
window.onresize = () => {
|
||||
this.upTableHeight()
|
||||
if(this.apiObj){
|
||||
this.getData();
|
||||
}
|
||||
window.addEventListener("resize", () => {
|
||||
this.upTableHeight()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
//更新表格高度
|
||||
|
|
@ -87,5 +95,5 @@
|
|||
<style scoped>
|
||||
.scTable {display:flex;flex-direction:column;height:100%;}
|
||||
.scTable-table {flex:1;}
|
||||
.scTable-page {margin-top: 20px;height:50px;display: flex;align-items: center;justify-content: space-between;}
|
||||
.scTable-page {height:50px;display: flex;align-items: center;justify-content: space-between;padding:0 15px;}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -93,8 +93,9 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
|
|||
|
||||
.el-container {height: 100%;}
|
||||
.el-aside {border-right: 1px solid #e6e6e6;background: #fff;padding-top:20px;}
|
||||
.el-header {background: #fff;border-bottom: 1px solid #e6e6e6;padding:13px 15px;}
|
||||
.el-header {background: #fff;border-bottom: 1px solid #e6e6e6;padding:13px 15px;display: flex;justify-content: space-between;}
|
||||
.el-footer {background: #fff;border-top: 1px solid #e6e6e6;padding:13px 15px;}
|
||||
.el-main {padding:15px;}
|
||||
.el-main.nopadding {padding:0;background: #fff;}
|
||||
.el-drawer__body {overflow: auto;}
|
||||
.el-popconfirm__main {margin: 14px 0;}
|
||||
|
|
|
|||
|
|
@ -6,67 +6,73 @@
|
|||
</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>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :data="tableData" row-key="name">
|
||||
<!-- 表格列开始 -->
|
||||
<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-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-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>
|
||||
<!-- 表格列结束 -->
|
||||
</scTable>
|
||||
</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>
|
||||
|
||||
<el-drawer title="我是标题" v-model="drawer" :size="800" :append-to-body="true" direction="rtl" destroy-on-close>
|
||||
<Show showid="我来自父组件"></Show>
|
||||
</el-drawer>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scTable from '@/components/scTable';
|
||||
import Show from './show.vue';
|
||||
|
||||
export default {
|
||||
name: 'list',
|
||||
components: {
|
||||
scTable,
|
||||
Show
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
|
|
@ -80,36 +86,18 @@
|
|||
{label: '本地磁盘 (E)'}
|
||||
]}
|
||||
],
|
||||
tableHeight: '0',
|
||||
tableData: [],
|
||||
loading: true,
|
||||
drawer: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Show
|
||||
},
|
||||
async created() {
|
||||
var userInfo = await this.$API.user.info.get();
|
||||
var _this = this;
|
||||
setTimeout(function() {
|
||||
_this.tableData = userInfo.data.menuList;
|
||||
_this.loading = false;
|
||||
}, 500);
|
||||
|
||||
this.tableData = userInfo.data.menuList;
|
||||
},
|
||||
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);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,65 +1,81 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="openDialog('add')">新增</el-button>
|
||||
<el-popconfirm :title="'确定删除选中的 '+selection.length+' 项吗？'" @confirm="batch_del">
|
||||
<template #reference>
|
||||
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0"></el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<div>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="openDialog('add')">新增</el-button>
|
||||
<el-popconfirm :title="'确定删除选中的 '+selection.length+' 项吗？'" @confirm="batch_del">
|
||||
<template #reference>
|
||||
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0"></el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-card shadow="never" class="scTable-card" body-style="height:100%">
|
||||
<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange">
|
||||
<!-- 表格列开始 -->
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
||||
<el-table-column label="头像" width="60">
|
||||
<template #default="scope">
|
||||
<el-avatar size="small">{{ scope.row.name.substring(0,1) }}</el-avatar>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="名称" prop="name" width="150"></el-table-column>
|
||||
<el-table-column label="进度" prop="progress" width="200">
|
||||
<template #default="scope">
|
||||
<el-progress :percentage="scope.row.progress" status="success"></el-progress>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="邮箱" prop="yx" align="right" width="150"></el-table-column>
|
||||
<el-table-column label="状态" prop="audit" width="100"></el-table-column>
|
||||
<el-table-column label="加入时间" prop="date" min-width="300"></el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="120">
|
||||
<template #default="scope">
|
||||
<el-button @click="table_show(scope.row, scope.$index)" type="text" size="small">查看</el-button>
|
||||
<el-button @click="table_edit(scope.row, scope.$index)" type="text" size="small">编辑</el-button>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.$index)">
|
||||
<template #reference>
|
||||
<el-button type="text" size="small">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 表格列结束 -->
|
||||
</scTable>
|
||||
</el-card>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange">
|
||||
<!-- 表格列开始 -->
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
||||
<el-table-column label="头像" width="60">
|
||||
<template #default="scope">
|
||||
<el-avatar size="small">{{ scope.row.name.substring(0,1) }}</el-avatar>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="名称" prop="name" width="150"></el-table-column>
|
||||
<el-table-column label="进度" prop="progress" width="200">
|
||||
<template #default="scope">
|
||||
<el-progress :percentage="scope.row.progress" status="success"></el-progress>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="邮箱" prop="yx" width="150"></el-table-column>
|
||||
<el-table-column label="状态" prop="audit" width="50">
|
||||
<template #default="scope">
|
||||
<el-tag>{{scope.row.audit}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="加入时间" prop="date" min-width="300"></el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="140">
|
||||
<template #default="scope">
|
||||
<el-button @click="table_show(scope.row, scope.$index)" type="text" size="small">查看</el-button>
|
||||
<el-button @click="table_edit(scope.row, scope.$index)" type="text" size="small">编辑</el-button>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.$index)">
|
||||
<template #reference>
|
||||
<el-button type="text" size="small">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 表格列结束 -->
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
<!-- 弹窗开始 -->
|
||||
<el-dialog :title="titleMap[dialogMode]" :width="400" v-model="showDialog" :before-close="closeDialog" append-to-body>
|
||||
<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="yx">
|
||||
<el-input v-model="form.yx"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="进度" prop="progress">
|
||||
<el-slider v-model="form.progress"></el-slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="audit">
|
||||
<el-switch v-model="form.audit" active-value="1" inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<el-dialog :title="titleMap[dialogMode]" :width="600" v-model="showDialog" :before-close="closeDialog" append-to-body>
|
||||
<el-form :model="form" :rules="rules" :disabled="dialogMode=='show'" ref="dialogForm" label-width="80px" label-position="top">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="邮箱" prop="yx">
|
||||
<el-input v-model="form.yx"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="进度" prop="progress">
|
||||
<el-input v-model.number="form.progress"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="audit">
|
||||
<el-switch v-model="form.audit" active-value="1" inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="closeDialog">取 消</el-button>
|
||||
|
|
@ -80,6 +96,7 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
filterType: "全部",
|
||||
apiObj: this.$API.demo.demolist.list,
|
||||
selection: [],
|
||||
showDialog: false,
|
||||
|
|
@ -102,6 +119,9 @@
|
|||
],
|
||||
yx: [
|
||||
{ required: true, message: '请输入完整的邮箱地址' },
|
||||
],
|
||||
progress: [
|
||||
{ required: true, message: '请输入进度' },
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -175,12 +195,14 @@
|
|||
return false;
|
||||
}
|
||||
})
|
||||
},
|
||||
//查看
|
||||
table_show(row){
|
||||
this.openDialog('show');
|
||||
this.$nextTick(() => {
|
||||
this.form = {...row}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.scTable-card {height:100%;}
|
||||
.scTable-card >>> .el-card {height:100%;}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue