zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UP

This commit is contained in:
sakuya 2021-05-01 00:26:21 +08:00
parent 9d50fca203
commit ffd005bb02
5 changed files with 156 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/json/list.json
View File

@ -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": ""

22
src/components/scTable/index.vue
View File

@ -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() {
if(this.apiObj){
this.getData();
window.onresize = () => {
this.upTableHeight()
}
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>

3
src/style/style.less
View File

@ -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;}

46
src/views/template/list.vue
View File

@ -6,8 +6,8 @@
</div>
</el-aside>
<el-container>
<el-header>
<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>
@ -20,11 +20,11 @@
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</el-header>
<el-main id="tableMain">
<el-card shadow="never" v-loading="loading">
<el-table :data="tableData" row-key="name" stripe :height="tableHeight">
<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">
@ -51,22 +51,28 @@
<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>
<!-- 表格列结束 -->
</scTable>
</el-main>
</el-container>
</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 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);
},

50
src/views/template/normallist.vue
View File

@ -1,15 +1,16 @@
<template>
<el-container>
<el-header>
<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%">
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange">
<!-- 表格列开始 -->
<el-table-column type="selection" width="50"></el-table-column>
@ -25,10 +26,14 @@
<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="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="120">
<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>
@ -41,25 +46,36 @@
</el-table-column>
<!-- 表格列结束 -->
</scTable>
</el-card>
</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-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-slider v-model="form.progress"></el-slider>
<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>