能源手动抄表

2024-04-07 12:18:52 +08:00
parent 1e4a33a703
commit 7fe8d7e72c
5 changed files with 368 additions and 166 deletions
--- a/src/views/energy/base/energyQuantityManual/components/AddTable.vue
+++ b/src/views/energy/base/energyQuantityManual/components/AddTable.vue
@@ -0,0 +1,139 @@
+<template>
+	<div class="energyQuantityManualAddTable">
+		<el-table
+			:data="renderData"
+			border
+			style="width: 100%"
+			:header-cell-style="{
+				background: '#F2F4F9',
+				color: '#606266',
+			}">
+			<el-table-column
+				prop="tableName"
+				label="表名*">
+				<template slot-scope="scope">
+					<div class="tableInner">
+						<el-select
+							v-model="scope.row.tableName"
+							placeholder="请选择"
+							style="width: 100%"
+							@change="changeSelect(scope.row, 'tableName')">
+							<el-option
+								v-for="item in tableNameList"
+								:key="item.id"
+								:label="item.label"
+								:value="item.id"></el-option>
+						</el-select>
+					</div>
+				</template>
+			</el-table-column>
+			<el-table-column
+				prop="readingQuantity"
+				label="抄表数*">
+				<template slot-scope="scope">
+					<div class="tableInner">
+						<el-input-number
+							v-model="scope.row.readingQuantity"
+							:min="0"
+							:max="999999999"
+							style="width: 100%"
+							:controls="false"
+							@change="changeInput(scope.row, 'readingQuantity')"
+							:precision="2"></el-input-number>
+					</div>
+				</template>
+			</el-table-column>
+		</el-table>
+		<el-button
+			class="addButton"
+			icon="el-icon-plus"
+			@click="emitButtonClick">
+			新增
+		</el-button>
+	</div>
+</template>
+<script>
+export default {
+	name: 'AddTable',
+	props: {
+		tableData: {
+			type: Array,
+			required: true,
+			default: () => {
+				return [];
+			},
+		},
+		tableNameList: {
+			type: Array,
+			required: true,
+			default: () => {
+				return [];
+			},
+		},
+	},
+	data() {
+		return {};
+	},
+	computed: {
+		renderData() {
+			return this.tableData.map((item, index) => {
+				return {
+					...item,
+					_pageIndex: index + 1,
+				};
+			});
+		},
+	},
+	methods: {
+		emitButtonClick() {
+			this.$emit('emitButtonClick');
+		},
+		changeInput(val1, val2) {
+			val1.prop = val2;
+			this.$emit('emitFun', val1);
+		},
+		changeSelect(val1, val2) {
+			val1.prop = val2;
+			this.$emit('emitFun', val1);
+		},
+	},
+};
+</script>
+<style lang='scss' scoped>
+.energyQuantityManualAddTable {
+	.el-table .el-table__cell {
+		padding: 0;
+		height: 35px;
+	}
+	.addButton {
+		width: 100%;
+		height: 35px;
+		border-top: none;
+		color: #0b58ff;
+		border-color: #ebeef5;
+		border-radius: 0;
+	}
+	.addButton:hover {
+		color: #0b58ff;
+		border-color: #ebeef5;
+		background-color: #fff;
+	}
+	.addButton:focus {
+		border-color: #ebeef5;
+		background-color: #fff;
+	}
+	.tableInner .el-input__inner {
+		border: none;
+		padding: 0;
+		height: 33px;
+	}
+}
+</style>
+<style lang='scss'>
+.energyQuantityManualAddTable {
+	.el-table .el-table__cell {
+		padding: 0;
+		height: 35px;
+	}
+}
+</style>