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", "audit": "0",
"date": "2020-07-05 09:30:00", "date": "2020-07-05 09:30:00",
"yx": "h.hgvwmw@xjuf.pa", "yx": "h.hgvwmw@xjuf.pa",
"progress": 65.5 "progress": 25.5
} }
], ],
"message": "" "message": ""

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

@ -1,9 +1,7 @@
<template> <template>
<div class="scTable" ref="scTableMain" v-loading="loading"> <div class="scTable" ref="scTableMain" v-loading="loading">
<div class="scTable-table"> <div class="scTable-table">
<el-table :data="tableData" ref="scTable" :height="tableHeight" stripe highlight-current-row <el-table :data="tableData" :row-key="rowKey" ref="scTable" :height="tableHeight" stripe @selection-change="selectionChange">
@selection-change="selectionChange"
>
<slot></slot> <slot></slot>
<template #empty> <template #empty>
<el-empty description="暂无数据" :image-size="100"></el-empty> <el-empty description="暂无数据" :image-size="100"></el-empty>
@ -25,7 +23,15 @@
name: 'scTable', name: 'scTable',
props: { props: {
apiObj: { type: Object, default: () => {} }, 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() { data() {
return { return {
@ -43,10 +49,12 @@
}) })
}, },
mounted() { mounted() {
this.getData(); if(this.apiObj){
window.onresize = () => { this.getData();
this.upTableHeight()
} }
window.addEventListener("resize", () => {
this.upTableHeight()
})
}, },
methods: { methods: {
//更新表格高度 //更新表格高度
@ -87,5 +95,5 @@
<style scoped> <style scoped>
.scTable {display:flex;flex-direction:column;height:100%;} .scTable {display:flex;flex-direction:column;height:100%;}
.scTable-table {flex:1;} .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> </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-container {height: 100%;}
.el-aside {border-right: 1px solid #e6e6e6;background: #fff;padding-top:20px;} .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-footer {background: #fff;border-top: 1px solid #e6e6e6;padding:13px 15px;}
.el-main {padding:15px;} .el-main {padding:15px;}
.el-main.nopadding {padding:0;background: #fff;}
.el-drawer__body {overflow: auto;} .el-drawer__body {overflow: auto;}
.el-popconfirm__main {margin: 14px 0;} .el-popconfirm__main {margin: 14px 0;}

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

@ -6,67 +6,73 @@
</div> </div>
</el-aside> </el-aside>
<el-container> <el-container>
<el-header> <el-header>
<el-button type="primary" icon="el-icon-plus"></el-button> <div>
<el-button type="primary" icon="el-icon-delete"></el-button> <el-button type="primary" icon="el-icon-plus"></el-button>
<el-button type="primary">默认按钮</el-button> <el-button type="primary" icon="el-icon-delete"></el-button>
<el-dropdown style="margin-left: 10px;"> <el-button type="primary">默认按钮</el-button>
<el-button type="primary" plain icon="el-icon-arrow-down"></el-button> <el-dropdown style="margin-left: 10px;">
<template #dropdown> <el-button type="primary" plain icon="el-icon-arrow-down"></el-button>
<el-dropdown-menu> <template #dropdown>
<el-dropdown-item>黄金糕</el-dropdown-item> <el-dropdown-menu>
<el-dropdown-item>狮子头</el-dropdown-item> <el-dropdown-item>黄金糕</el-dropdown-item>
</el-dropdown-menu> <el-dropdown-item>狮子头</el-dropdown-item>
</template> </el-dropdown-menu>
</el-dropdown> </template>
</el-dropdown>
</div>
</el-header> </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-table-column label="操作" fixed="right" width="100">
<el-card shadow="never" v-loading="loading"> <template #default="scope">
<el-table :data="tableData" row-key="name" stripe :height="tableHeight"> <el-button @click="table_show(scope.row)" type="text" size="small">查看</el-button>
<el-table-column type="selection" width="50"></el-table-column> <el-button @click="table_edit(scope.row)" type="text" size="small">编辑</el-button>
<el-table-column label="显示名称" prop="meta.title" width="200"></el-table-column> </template>
<el-table-column label="图标" width="80"> </el-table-column>
<template #default="scope"> <!-- 表格列结束 -->
<i :class="scope.row.meta.icon"></i> </scTable>
</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-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> </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> </template>
<script> <script>
import scTable from '@/components/scTable';
import Show from './show.vue'; import Show from './show.vue';
export default { export default {
name: 'list', name: 'list',
components: {
scTable,
Show
},
data() { data() {
return { return {
data: [ data: [
@ -80,36 +86,18 @@
{label: '本地磁盘 (E)'} {label: '本地磁盘 (E)'}
]} ]}
], ],
tableHeight: '0',
tableData: [], tableData: [],
loading: true,
drawer: false drawer: false
} }
}, },
components: {
Show
},
async created() { async created() {
var userInfo = await this.$API.user.info.get(); var userInfo = await this.$API.user.info.get();
var _this = this; this.tableData = userInfo.data.menuList;
setTimeout(function() {
_this.tableData = userInfo.data.menuList;
_this.loading = false;
}, 500);
}, },
mounted(){ mounted(){
this.$nextTick(() => {
this.setTableHeight()
})
window.onresize = ()=>{
this.setTableHeight()
}
}, },
methods: { methods: {
setTableHeight(){
this.tableHeight = this.$el.querySelector("#tableMain").offsetHeight - 40 - 78
},
handleNodeClick(data){ handleNodeClick(data){
console.log(data); console.log(data);
}, },

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

@ -1,65 +1,81 @@
<template> <template>
<el-container> <el-container>
<el-header> <el-header>
<el-button type="primary" icon="el-icon-plus" @click="openDialog('add')">新增</el-button> <div>
<el-popconfirm :title="'确定删除选中的 '+selection.length+' 项吗？'" @confirm="batch_del"> <el-button type="primary" icon="el-icon-plus" @click="openDialog('add')">新增</el-button>
<template #reference> <el-popconfirm :title="'确定删除选中的 '+selection.length+' 项吗？'" @confirm="batch_del">
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0"></el-button> <template #reference>
</template> <el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0"></el-button>
</el-popconfirm> </template>
</el-popconfirm>
</div>
</el-header> </el-header>
<el-main> <el-main class="nopadding">
<el-card shadow="never" class="scTable-card" body-style="height:100%"> <scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange">
<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange"> <!-- 表格列开始 -->
<!-- 表格列开始 --> <el-table-column type="selection" width="50"></el-table-column>
<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="序号" type="index" width="50"></el-table-column> <el-table-column label="头像" width="60">
<el-table-column label="头像" width="60"> <template #default="scope">
<template #default="scope"> <el-avatar size="small">{{ scope.row.name.substring(0,1) }}</el-avatar>
<el-avatar size="small">{{ scope.row.name.substring(0,1) }}</el-avatar> </template>
</template> </el-table-column>
</el-table-column> <el-table-column label="名称" prop="name" width="150"></el-table-column>
<el-table-column label="名称" prop="name" width="150"></el-table-column> <el-table-column label="进度" prop="progress" width="200">
<el-table-column label="进度" prop="progress" width="200"> <template #default="scope">
<template #default="scope"> <el-progress :percentage="scope.row.progress" status="success"></el-progress>
<el-progress :percentage="scope.row.progress" status="success"></el-progress> </template>
</template> </el-table-column>
</el-table-column> <el-table-column label="邮箱" prop="yx" width="150"></el-table-column>
<el-table-column label="邮箱" prop="yx" align="right" width="150"></el-table-column> <el-table-column label="状态" prop="audit" width="50">
<el-table-column label="状态" prop="audit" width="100"></el-table-column> <template #default="scope">
<el-table-column label="加入时间" prop="date" min-width="300"></el-table-column> <el-tag>{{scope.row.audit}}</el-tag>
<el-table-column label="操作" fixed="right" width="120"> </template>
<template #default="scope"> </el-table-column>
<el-button @click="table_show(scope.row, scope.$index)" type="text" size="small">查看</el-button> <el-table-column label="加入时间" prop="date" min-width="300"></el-table-column>
<el-button @click="table_edit(scope.row, scope.$index)" type="text" size="small">编辑</el-button> <el-table-column label="操作" fixed="right" width="140">
<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.$index)"> <template #default="scope">
<template #reference> <el-button @click="table_show(scope.row, scope.$index)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">删除</el-button> <el-button @click="table_edit(scope.row, scope.$index)" type="text" size="small">编辑</el-button>
</template> <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.$index)">
</el-popconfirm> <template #reference>
</template> <el-button type="text" size="small">删除</el-button>
</el-table-column> </template>
<!-- 表格列结束 --> </el-popconfirm>
</scTable> </template>
</el-card> </el-table-column>
<!-- 表格列结束 -->
</scTable>
</el-main> </el-main>
</el-container> </el-container>
<!-- 弹窗开始 --> <!-- 弹窗开始 -->
<el-dialog :title="titleMap[dialogMode]" :width="400" v-model="showDialog" :before-close="closeDialog" append-to-body> <el-dialog :title="titleMap[dialogMode]" :width="600" v-model="showDialog" :before-close="closeDialog" append-to-body>
<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px"> <el-form :model="form" :rules="rules" :disabled="dialogMode=='show'" ref="dialogForm" label-width="80px" label-position="top">
<el-form-item label="名称" prop="name"> <el-row :gutter="20">
<el-input v-model="form.name"></el-input> <el-col :span="12">
</el-form-item> <el-form-item label="名称" prop="name">
<el-form-item label="邮箱" prop="yx"> <el-input v-model="form.name"></el-input>
<el-input v-model="form.yx"></el-input> </el-form-item>
</el-form-item> </el-col>
<el-form-item label="进度" prop="progress"> <el-col :span="12">
<el-slider v-model="form.progress"></el-slider> <el-form-item label="邮箱" prop="yx">
</el-form-item> <el-input v-model="form.yx"></el-input>
<el-form-item label="状态" prop="audit"> </el-form-item>
<el-switch v-model="form.audit" active-value="1" inactive-value="0"></el-switch> </el-col>
</el-form-item> </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> </el-form>
<template #footer> <template #footer>
<el-button @click="closeDialog">取 消</el-button> <el-button @click="closeDialog">取 消</el-button>
@ -80,6 +96,7 @@
}, },
data() { data() {
return { return {
filterType: "全部",
apiObj: this.$API.demo.demolist.list, apiObj: this.$API.demo.demolist.list,
selection: [], selection: [],
showDialog: false, showDialog: false,
@ -102,6 +119,9 @@
], ],
yx: [ yx: [
{ required: true, message: '请输入完整的邮箱地址' }, { required: true, message: '请输入完整的邮箱地址' },
],
progress: [
{ required: true, message: '请输入进度' },
] ]
} }
} }
@ -175,12 +195,14 @@
return false; return false;
} }
}) })
},
//查看
table_show(row){
this.openDialog('show');
this.$nextTick(() => {
this.form = {...row}
});
} }
} }
} }
</script> </script>
<style scoped>
.scTable-card {height:100%;}
.scTable-card >>> .el-card {height:100%;}
</style>