优化table组件

ghs/src/admin/warehouse/components/table.vue

@@ -11,7 +11,8 @@
 				:style="{
 					flex: item.width ? `0 0 ${item.width}rpx` : '1',
 					textAlign: item.align || 'left',
-					fontSzie: `${fontSize}rpx`
+					fontSzie: `${headerFontSize}rpx`,
+					margin: `0 ${gutter}rpx`
 				}"
 			>
 				<!-- <slot :name="item.dataIndex" > -->
@@ -27,7 +28,8 @@
 				:style="{
 					flex: column.width ? `0 0 ${column.width}rpx` : '1',
 					textAlign: column.align || 'left',
-					fontSzie: `${fontSize}rpx`
+					fontSzie: `${fontSize}rpx`,
+					margin: `0 ${gutter}rpx`
 				}"
 			>
 				<!-- {{ item[column.dataIndex] || "" }} -->
@@ -58,8 +60,16 @@ export default {
 			default: "#ffffff"
 		},
 		fontSize: {
-			type: String,
+			type: Number,
+			default: 24
+		},
+		headerFontSize: {
+			type: Number,
 			default: 24
+		},
+		gutter: {
+			type: Number,
+			default: 10
 		}
 	},
 	mounted() {
@@ -90,6 +100,7 @@ export default {
 		box-shadow: 0px 1px 0px 0px #eeeeee;
 		color: #999999;
 		.table-th {
+			white-space: nowrap;
 		}
 	}
 	.table-tr {

ghs/src/admin/warehouse/flower/manage.vue

@@ -0,0 +1,184 @@
+<template>
+	<view class="ex-page">
+		<scroll-view scroll-y scroll-with-animation class="main-view">
+			<view class="space-view ex-table">
+				<Tabel
+					:headerBackgroundColor="'#F0F2F6'"
+					:columns="columns"
+					:dataList="dataList"
+					:fontSize="28"
+				>
+					<template v-slot="{ row, column }">
+						<view v-if="column.custom == 'edit'" class="edit-td">
+							<text class="iconfont icondelete"> </text>
+						</view>
+						<view v-else>
+							<view class="input-td"> <input type="number" /> </view>
+						</view>
+					</template>
+				</Tabel>
+			</view>
+		</scroll-view>
+		<view class="under-bar">
+			<button :class="['admin-button-com', 'default']" @click="">
+				排序
+			</button>
+			<button :class="['admin-button-com']" @click="">
+				添加
+			</button>
+		</view>
+	</view>
+</template>
+<script>
+import Tabel from "../components/table";
+export default {
+	components: { Tabel },
+	data() {
+		return {
+			columns: [
+				{
+					name: "名称",
+					dataIndex: "name",
+					color: "info"
+				},
+				{
+					name: "库存预警",
+					width: 130,
+					color: "info",
+					align: "center",
+					custom: "warn"
+				},
+				{
+					name: "每扎重量(斤)",
+					width: 130,
+					color: "info",
+					align: "center",
+					custom: "weight"
+				},
+				{
+					name: "每扎加价(元)",
+					width: 130,
+					color: "info",
+					align: "center",
+					custom: "price"
+				},
+				{
+					name: "操作",
+					align: "center",
+					custom: "edit"
+				}
+			],
+			dataList: [
+				{
+					name: "调拨入库"
+				},
+				{
+					name: "调拨入库"
+				},
+				{
+					name: "调拨入库"
+				}
+			]
+		};
+	},
+	methods: {
+		searchSelectEvent(params) {
+			console.log(3333, pramrs);
+		}
+	}
+};
+</script>
+<style lang="scss" scoped>
+.ex-page {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	.under-bar {
+		padding: 0 20upx;
+		display: flex;
+
+		flex-shrink: 0;
+		justify-content: flex-end;
+		align-items: center;
+		width: 100%;
+		height: 100upx;
+		background-color: #fff;
+		.admin-button-com {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin: 0 20upx;
+			width: 140upx;
+			height: 70upx;
+			font-size: 32upx;
+		}
+	}
+	.main-view {
+		flex: 1;
+		background-color: #f9fbfc;
+		.space-view {
+			background-color: #fff;
+		}
+		.ex-info {
+			padding: 30upx;
+			.info-cell {
+				display: flex;
+				align-items: center;
+				font-size: 28upx;
+				&:not(:first-child) {
+					margin-top: 20upx;
+				}
+				.cell-label {
+					width: 110upx;
+					color: #666666;
+				}
+				.cell-value {
+					margin-left: 40upx;
+					color: #333;
+					&.warning {
+						color: #ffaf1d;
+					}
+					&.success {
+						color: #27c325;
+					}
+				}
+			}
+		}
+		.ex-table {
+			/deep/.input-td {
+				input {
+					width: 130upx;
+					height: 70upx;
+					border: 1px solid #dddddd;
+					border-radius: 4upx;
+					text-align: center;
+				}
+			}
+			/deep/.edit-td {
+				.iconfont {
+					font-size: 40upx;
+				}
+			}
+		}
+	}
+	.bar-view {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0 30upx;
+		width: 100%;
+		height: 100upx;
+
+		box-shadow: 0px -1px 6px 0px rgba(4, 0, 0, 0.06);
+		.info-view {
+			font-size: 26upx;
+		}
+		.btn-view {
+			display: flex;
+			.admin-button-com {
+				margin: 0 10upx;
+			}
+		}
+	}
+}
+</style>

ghs/src/pages.json

@@ -504,6 +504,18 @@
 					}
 				}
 			]
+		},
+		{
+			"root": "admin/warehouse/flower/",
+			"pages": [
+				{
+					"path": "manage",
+					"style": {
+						"navigationBarTitleText": "花材",
+						"enablePullDownRefresh": true
+					}
+				}
+			]
 		}
 	],
 	"globalStyle": {