hotWaterManagerWeb/src/components/feilvset/feilvset.vue

<template>
	<div>
		<el-row>
			<el-col :span="24" class="first-row">
				<div class="tag">费率设置</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="second-row">
				<div class="total_balance">当前费率：3元/吨</div>
				<div class="show-detail" @click="modify_feilv">修改费率</div>
			</el-col>
		</el-row>
		<hr style="background-color: #CCCCCC;height: 1px;border: 0;">
		<div class="lsfl">历史费率</div>
		<el-row>
			<el-col :span="24" class="third-row">
				<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
					@selection-change="handleSelectionChange" highlight-current-row :row-class-name="rowClassName">
					<el-table-column prop="id" label="序号" width="300" align="center"></el-table-column>
					<el-table-column prop="feilv" label="费率（元/吨）" align="center"></el-table-column>
					<el-table-column prop="dt" label="时间" align="center"></el-table-column>
				</el-table>
				<div style="margin-top: 20px" class="table-footer">
					<div class="pages">
						<el-pagination layout="prev, pager, next" :total="9000"></el-pagination>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="forth-row">
				<!-- 修改费率对话框 -->
				<el-dialog title="修改费率" :visible.sync="editdialogFormVisible" width="640px" top="0vh" class="my-dialog">
					<hr
						style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
						<el-form :inline="true" :model="formInline" class="demo-form-inline">
							<el-form-item label="费率：" class="shuibiaoId">
								<el-input v-model="formInline.user" placeholder="请输入费率"></el-input>
							</el-form-item>
							<div class="yuan">元/吨</div>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="editdialogFormVisible = false">取 消</el-button>
							<el-button type="primary" @click="editdialogFormVisible = false">确 定</el-button>
						</div>
				</el-dialog>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				editdialogFormVisible: false,
				delDialogVisible: false,
				form: {
					id: 'KB580002652',
					drom: '18',
					room: '118'
				},
				formLabelWidth: '120px',
				formInline: {
					user: '',
					options: [{
						value: '选项1',
						label: '全部'
					}, {
						value: '选项2',
						label: '黄金糕'
					}],
					value: '选项1'
				},
				tableData: [{
					id: 1,
					feilv: 0.8,
					dt: '2021-01-01 ~ 2021-07-01'
				}, {
					id: 1,
					feilv: 0.8,
					dt: '2021-01-01 ~ 2021-07-01'
				}, {
					id: 1,
					feilv: 0.8,
					dt: '2021-01-01 ~ 2021-07-01'
				}, {
					id: 1,
					feilv: 0.8,
					dt: '2021-01-01 ~ 2021-07-01'
				}, {
					id: 1,
					feilv: 0.8,
					dt: '2021-01-01 ~ 2021-07-01'
				}, {
					id: 1,
					feilv: 0.8,
					dt: '2021-01-01 ~ 2021-07-01'
				}, {
					id: 1,
					feilv: 0.8,
					dt: '2021-01-01 ~ 2021-07-01'
				}],
				multipleSelection: []
			}
		},
		methods: {
			rowClassName({
				row,
				rowIndex
			}) {
				//把每一行的索引放进row.id
				row.id = rowIndex + 1;
			},
			modify_feilv() {
				this.editdialogFormVisible = true
			},
			onSubmit() {
				console.log('submit!');
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleEdit(index, row) {
				this.editdialogFormVisible = true
				console.log(index, row);
			},
			handleDelete(index, row) {
				this.delDialogVisible = true
				console.log(index, row);
			}
		}
	}
</script>

<style scoped>
	@import url("feilvset.css");
</style>