From ffd005bb026ae174fbbaa33e2c1f667f55988b78 Mon Sep 17 00:00:00 2001
From: sakuya <81883387@qq.com>
Date: Sat, 1 May 2021 00:26:21 +0800
Subject: [PATCH] UP

---
 public/json/list.json             |   2 +-
 src/components/scTable/index.vue  |  24 +++--
 src/style/style.less              |   3 +-
 src/views/template/list.vue       | 124 ++++++++++++--------------
 src/views/template/normallist.vue | 140 +++++++++++++++++-------------
 5 files changed, 156 insertions(+), 137 deletions(-)

diff --git a/public/json/list.json b/public/json/list.json
index 2995eed9..36c288cc 100644
--- a/public/json/list.json
+++ b/public/json/list.json
@@ -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": ""
diff --git a/src/components/scTable/index.vue b/src/components/scTable/index.vue
index 2056b978..dbcfe85c 100644
--- a/src/components/scTable/index.vue
+++ b/src/components/scTable/index.vue
@@ -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>
diff --git a/src/style/style.less b/src/style/style.less
index 13775650..8bb0223e 100644
--- a/src/style/style.less
+++ b/src/style/style.less
@@ -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;}
diff --git a/src/views/template/list.vue b/src/views/template/list.vue
index 3c395c80..c4c59173 100644
--- a/src/views/template/list.vue
+++ b/src/views/template/list.vue
@@ -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);
 			},
diff --git a/src/views/template/normallist.vue b/src/views/template/normallist.vue
index fe42c2df..3c203827 100644
--- a/src/views/template/normallist.vue
+++ b/src/views/template/normallist.vue
@@ -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>