<template>
|
<div class="siteInfo">
|
<el-card>
|
<div class="infoSearch">
|
<el-form :inline="true" :model="queryParams" class="demo-form-inline">
|
<el-form-item>
|
<el-select v-model="queryParams.types" @change="setQueryTypesChange" clearable
|
placeholder="请选择">
|
<el-option v-for="item in thData" :key="item.name" :label="item.cname"
|
:value="item.name"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-input size="small" v-model="queryParams.name" :disabled="!queryParams.types"
|
placeholder="请输入字段信息..."></el-input>
|
</el-form-item>
|
</el-form>
|
<div>
|
<el-button size="small" plain type="primary" @click="setInfoQyery"
|
icon="el-icon-search">查询</el-button>
|
<el-button size="small" plain type="info" @click="setInfoRefresh"
|
icon="el-icon-refresh">重置</el-button>
|
<el-button size="small" plain type="success" @click="setInfoAdd" icon="el-icon-plus">添加</el-button>
|
<el-button size="small" plain type="danger" @click="setInfoDel" icon="el-icon-delete">删除</el-button>
|
</div>
|
</div>
|
</el-card>
|
<el-card class="infoConTent">
|
<div class="infoTable">
|
<el-table :data="tableData" style="width: 100%" border height="calc(100% - 65px)"
|
@selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="55" />
|
<el-table-column width="70" align="center" type="index" label="序号" />
|
<el-table-column v-for="(item, index) in thData" :key="index" :label="item.cname" :prop="item.name"
|
align="center"></el-table-column>
|
<el-table-column min-width="100" label="操作">
|
<template slot-scope="scope">
|
<el-button @click="setInfoEdit(scope.$index, scope.row)" type="warning" plain
|
size="small">编辑</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageIndex"
|
:limit.sync="queryParams.pageSize" @pagination="setInfoQyery" />
|
</div>
|
</el-card>
|
<el-dialog width="30%" :title="dialogTitle" :before-close="outerClose" :visible.sync="dialogFlag">
|
<div class="dialofContent">
|
<el-form :model="editData" label-width="170px">
|
|
<el-form-item v-for="(item, index) in thData" :key="index" :label="item.cname">
|
<el-input v-model="editData[item.name]" :placeholder="'请输入' + item.cname + '参数'"></el-input>
|
</el-form-item>
|
</el-form>
|
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="outerClose">取 消</el-button>
|
<el-button @click="submitOuter" type="primary">确 认</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
dmssectiondevice_getTableMeta,
|
dmssectiondevice_query,
|
dmssectiondevice_delete,
|
dmssectiondevice_save,
|
dmssectiondevice_update
|
} from '@/api/mapView/peiwang.js';
|
import mapData from '@/assets/js/mapSdk/mapData';
|
export default {
|
components: {},
|
data() {
|
return {
|
total: 0,
|
queryParams: {
|
pageIndex: 1,
|
pageSize: 10,
|
name: '',
|
types: '',
|
},
|
formLabelWidth: '80px',
|
multipleSelection: [],
|
tableData: [],
|
editData: {},
|
dialogTitle: null,
|
dialogFlag: false,
|
siteOption: [],
|
infoOption: null,
|
innerVisible: false,
|
parentData: null,
|
|
thData: [],
|
};
|
},
|
mounted() {
|
this.getDataTitle();
|
this.setInfoRefresh();
|
},
|
methods: {
|
initTitle(res) {
|
const setHeader = ['id', 'serialVersionUID'];
|
return res.filter((item) => {
|
if (setHeader.indexOf(item.name) < 0) {
|
return item;
|
}
|
});
|
},
|
getDataTitle() {
|
dmssectiondevice_getTableMeta().then((response) => {
|
if (response.data.msg != 'success') return;
|
const data = response.data.list;
|
this.thData = this.initTitle(data);
|
this.setInfoQyery();
|
});
|
},
|
setQueryTypesChange() {
|
if (!this.queryParams.types) {
|
this.queryParams.name = '';
|
}
|
},
|
setInfoQyery() {
|
const obj = {
|
limit: this.queryParams.pageSize,
|
page: this.queryParams.pageIndex,
|
};
|
if (this.queryParams.types) {
|
obj[this.queryParams.types] = this.queryParams.name;
|
}
|
dmssectiondevice_query(obj).then((response) => {
|
if (response.data.msg != 'success') return;
|
const data = response.data.page;
|
this.tableData = data.list;
|
this.total = data.totalCount;
|
});
|
},
|
|
setInfoRefresh() {
|
this.queryParams = {
|
pageIndex: 1,
|
pageSize: 10,
|
name: '',
|
types: '',
|
};
|
this.setInfoQyery();
|
},
|
setInfoAdd() {
|
this.dialogTitle = '新增';
|
this.dialogFlag = true;
|
},
|
setInfoDel() {
|
if (this.multipleSelection.length < 0) return;
|
const std = [];
|
for (var i in this.multipleSelection) {
|
std.push(this.multipleSelection[i].id);
|
}
|
dmssectiondevice_delete(std).then((response) => {
|
if (response.data.msg != 'success') {
|
return this.$message('删除失败');
|
}
|
this.$message({
|
message: '删除成功',
|
type: 'success',
|
});
|
|
this.setInfoQyery();
|
});
|
|
|
},
|
outerClose() {
|
this.dialogFlag = false;
|
this.editData = {};
|
},
|
submitOuter() {
|
const obj = { ...this.editData }
|
if (this.dialogTitle == '新增') {
|
this.outerInsert(obj);
|
} else {
|
this.outerEdit(obj);
|
}
|
this.dialogFlag = false;
|
|
|
},
|
outerInsert(res) {
|
dmssectiondevice_save(res).then(response => {
|
this.outerClose();
|
if (response.data.msg != 'success') {
|
this.$message('新增失败');
|
} else {
|
this.$message({
|
message: '新增成功',
|
type: 'success',
|
});
|
this.setInfoRefresh()
|
}
|
|
})
|
|
},
|
outerEdit(res) {
|
dmssectiondevice_update(res).then(response => {
|
this.outerClose();
|
if (response.data.msg != 'success') {
|
this.$message('修改失败');
|
} else {
|
this.$message({
|
message: '修改成功',
|
type: 'success',
|
});
|
this.setInfoQyery()
|
}
|
})
|
|
},
|
setInfoEdit(index, row) {
|
this.dialogTitle = '修改';
|
this.editData = { ...row };
|
this.parentData = this.editData.geom;
|
this.dialogFlag = true;
|
},
|
handleSelectionChange(res) {
|
this.multipleSelection = res;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.siteInfo {
|
width: calc(100% - 20px);
|
height: calc(100% - 20px);
|
position: absolute;
|
margin: 10px;
|
border-radius: 5px;
|
display: flex;
|
flex-direction: column;
|
|
.infoSearch {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
::v-deep.el-form-item {
|
margin: 0px 10px;
|
}
|
}
|
|
.infoConTent {
|
margin-top: 10px;
|
flex: 1;
|
position: relative;
|
|
.infoTable {
|
width: calc(100% - 30px);
|
height: calc(100% - 36px);
|
position: absolute;
|
display: flex;
|
flex-direction: column;
|
}
|
}
|
|
::v-deep.el-divider--horizontal {
|
margin: 0px;
|
margin-bottom: 10px;
|
}
|
|
::v-deep.el-card__body {
|
padding: 15px;
|
}
|
}
|
|
.dialofContent {
|
height: 40vh;
|
overflow: auto;
|
padding: 0px 10px;
|
}
|
|
::-webkit-scrollbar {
|
width: 4px;
|
}
|
|
::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
background: rgba(0, 0, 0, 0.2);
|
}
|
|
::-webkit-scrollbar-track {
|
border-radius: 0;
|
background: rgba(0, 0, 0, 0.1);
|
}
|
</style>
|
