|
@@ -1,222 +0,0 @@
|
|
|
-<template>
|
|
|
|
|
- <div>
|
|
|
|
|
- <el-row>
|
|
|
|
|
- <el-col :span="24" class="first-row">
|
|
|
|
|
- <div class="tag">设备管理</div>
|
|
|
|
|
- <span class="right-btn">
|
|
|
|
|
- <el-button type="primary" size="small">表格导入</el-button>
|
|
|
|
|
- <el-link type="primary">模板下载</el-link>
|
|
|
|
|
- </span>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </el-row>
|
|
|
|
|
- <el-row>
|
|
|
|
|
- <el-col :span="24" class="second-row">
|
|
|
|
|
- <el-form :inline="true" :model="form_select" class="demo-form-inline">
|
|
|
|
|
- <el-form-item label="水表ID:" class="shuibiaoId">
|
|
|
|
|
- <el-input placeholder="请输入水表ID"></el-input>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item>
|
|
|
|
|
- <el-button type="primary" @click="onSubmit">查找</el-button>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item label="楼栋号:" class="loudonghao">
|
|
|
|
|
- <el-select v-model="form_select.value" @change="selectGet(form_select.value)">
|
|
|
|
|
- <el-option v-for="item in form_select.builds" :key="item.value" :label="item.label"
|
|
|
|
|
- :value="item.value">
|
|
|
|
|
- </el-option>
|
|
|
|
|
- </el-select>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- </el-form>
|
|
|
|
|
- <div class="btn-add">
|
|
|
|
|
- <el-button type="primary" icon="el-icon-add">添加</el-button>
|
|
|
|
|
- </div>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </el-row>
|
|
|
|
|
- <hr style="background-color: #CCCCCC;height: 1px;border: 0;">
|
|
|
|
|
- <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>
|
|
|
|
|
- <el-table-column type="selection" align="center" width="105"></el-table-column>
|
|
|
|
|
- <el-table-column label="水表ID" width="260">
|
|
|
|
|
- <template slot-scope="scope">{{ scope.row.user_id }}</template>
|
|
|
|
|
- </el-table-column>
|
|
|
|
|
- <el-table-column prop="build" label="楼栋号" align="center" width="400"></el-table-column>
|
|
|
|
|
- <el-table-column prop="dom" label="宿舍号" show-overflow-tooltip></el-table-column>
|
|
|
|
|
- <el-table-column label="操作" align="center" width="80">
|
|
|
|
|
- <el-button type="text" class="del-btn" slot-scope="scope"
|
|
|
|
|
- @click="handleDelete(scope.$index, scope.row)">删除
|
|
|
|
|
- </el-button>
|
|
|
|
|
- </el-table-column>
|
|
|
|
|
- <el-table-column width="130">
|
|
|
|
|
- <el-button type="text" slot-scope="scope" @click="handleEdit(scope.$index, scope.row)">编辑
|
|
|
|
|
- </el-button>
|
|
|
|
|
- </el-table-column>
|
|
|
|
|
- </el-table>
|
|
|
|
|
- <div style="margin-top: 20px" class="table-footer">
|
|
|
|
|
- <div class="pages">
|
|
|
|
|
- <el-pagination layout="prev, pager, next" :total="rows_total"></el-pagination>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="export-table">
|
|
|
|
|
- <el-button type="primary" size="small" @click="toggleSelection">表格导出</el-button>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </el-row>
|
|
|
|
|
- <el-row>
|
|
|
|
|
- <el-col :span="24" class="forth-row">
|
|
|
|
|
- <!-- 编辑对话框 -->
|
|
|
|
|
- <el-dialog title="编辑" :visible.sync="editdialogFormVisible" width="500px" top="0vh" class="my-dialog">
|
|
|
|
|
- <hr
|
|
|
|
|
- style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
|
|
|
|
|
- <el-form :model="form">
|
|
|
|
|
- <el-form-item label="水表ID:" :label-width="formLabelWidth">
|
|
|
|
|
- <el-input v-model="form.user_id" autocomplete="off"></el-input>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item label="楼栋号:" :label-width="formLabelWidth">
|
|
|
|
|
- <el-input v-model="form.build" autocomplete="off"></el-input>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item label="宿舍号:" :label-width="formLabelWidth">
|
|
|
|
|
- <el-input v-model="form.dom" autocomplete="off"></el-input>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- </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-dialog :visible.sync="delDialogVisible" width="500px" center top="0vh" class="my-dialog">
|
|
|
|
|
- <div class="box-icon"></div>
|
|
|
|
|
- <span class="del-msg">确定删除该水表信息吗?</span>
|
|
|
|
|
- <span slot="footer" class="dialog-footer">
|
|
|
|
|
- <el-button @click="delDialogVisible = false">取 消</el-button>
|
|
|
|
|
- <el-button type="primary" @click="delDialogVisible = false">确 定</el-button>
|
|
|
|
|
- </span>
|
|
|
|
|
- </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',
|
|
|
|
|
- form_select: {
|
|
|
|
|
- builds: [{
|
|
|
|
|
- value: 0,
|
|
|
|
|
- label: '全部'
|
|
|
|
|
- }],
|
|
|
|
|
- value: 0
|
|
|
|
|
- },
|
|
|
|
|
- tableData: [],
|
|
|
|
|
- rows_total: 100,
|
|
|
|
|
- multipleSelection: []
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- created() {
|
|
|
|
|
- this.getTableData()
|
|
|
|
|
- },
|
|
|
|
|
- methods: {
|
|
|
|
|
- /**
|
|
|
|
|
- * 获取下拉列表选择的id
|
|
|
|
|
- * @param {Object} vId
|
|
|
|
|
- */
|
|
|
|
|
- selectGet(vId) {
|
|
|
|
|
- console.log(vId);
|
|
|
|
|
- let obj = {};
|
|
|
|
|
- obj = this.form_select.builds.find((item) => {
|
|
|
|
|
- return item.value === vId; //筛选出匹配数据
|
|
|
|
|
- });
|
|
|
|
|
- console.log(obj);
|
|
|
|
|
- // 查询该栋的信息
|
|
|
|
|
- this.$axios.get('/api/HotWaters/waterlist.action?page=1&rows=8')
|
|
|
|
|
- .then(res => {
|
|
|
|
|
- // console.log(res.data);
|
|
|
|
|
- this.$message.success('获取数据成功!');
|
|
|
|
|
- this.tableData = res.data.rows
|
|
|
|
|
- this.rows_total = res.data.total
|
|
|
|
|
- this.form_select.builds = [{
|
|
|
|
|
- value: 0,
|
|
|
|
|
- label: '全部'
|
|
|
|
|
- }]
|
|
|
|
|
- for (var i = 0; i < res.data.rows.length; i++) {
|
|
|
|
|
- this.form_select.builds.push({
|
|
|
|
|
- value: res.data.rows[i].id,
|
|
|
|
|
- label: res.data.rows[i].build
|
|
|
|
|
- })
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- .catch(err => {
|
|
|
|
|
- console.log(err);
|
|
|
|
|
- this.$message.error('请求异常');
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- /**
|
|
|
|
|
- * 获取数据,填充表格变量
|
|
|
|
|
- */
|
|
|
|
|
- getTableData() {
|
|
|
|
|
- let param = {
|
|
|
|
|
- page: 1,
|
|
|
|
|
- rows: 8
|
|
|
|
|
- }
|
|
|
|
|
- this.$axios.get('/api/HotWaters/waterlist.action?page=1&rows=8')
|
|
|
|
|
- .then(res => {
|
|
|
|
|
- // console.log(res.data);
|
|
|
|
|
- this.$message.success('获取数据成功!');
|
|
|
|
|
- this.tableData = res.data.rows
|
|
|
|
|
- this.rows_total = res.data.total
|
|
|
|
|
- this.form_select.builds = [{
|
|
|
|
|
- value: 0,
|
|
|
|
|
- label: '全部'
|
|
|
|
|
- }]
|
|
|
|
|
- for (var i = 0; i < res.data.rows.length; i++) {
|
|
|
|
|
- this.form_select.builds.push({
|
|
|
|
|
- value: res.data.rows[i].id,
|
|
|
|
|
- label: res.data.rows[i].build
|
|
|
|
|
- })
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- .catch(err => {
|
|
|
|
|
- console.log(err);
|
|
|
|
|
- this.$message.error('请求异常');
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- onSubmit() {
|
|
|
|
|
- console.log('submit!');
|
|
|
|
|
- },
|
|
|
|
|
- handleOpen(key, keyPath) {
|
|
|
|
|
- console.log(key, keyPath);
|
|
|
|
|
- },
|
|
|
|
|
- handleClose(key, keyPath) {
|
|
|
|
|
- console.log(key, keyPath);
|
|
|
|
|
- },
|
|
|
|
|
- toggleSelection() {
|
|
|
|
|
- console.log();
|
|
|
|
|
- },
|
|
|
|
|
- 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("DevMgr.css");
|
|
|
|
|
-</style>
|
|
|