<template>
|
<div class="authorityManagement_box">
|
<My-bread :list="[
|
`${$t('dataManage.dataManage')}`,
|
`${$t('dataManage.metadataManage')}`,
|
]"></My-bread>
|
<el-divider />
|
<div class="inquire subpage_Div" ref="container">
|
<el-form ref="queryForm" :model="queryForm" :inline="true">
|
<div class="flex_box">
|
<div style="margin-right: auto">
|
<el-form-item>
|
<el-select v-model="queryForm.types" placeholder="请选择要查询的字段信息">
|
<el-option v-for="item in titleData" :key="item.name" :label="item.cname"
|
:value="item.name"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-input v-model="queryForm.name" :placeholder="$t('shuJuGuanLi.lable2')" style="width: 200px"><i
|
slot="suffix" class="el-icon-search" @click="queryInfo()" style="padding-right: 8px"></i></el-input>
|
</el-form-item>
|
</div>
|
<div>
|
<el-form-item v-if="btnStatus.delete">
|
<el-button type="success" size="small" @click="insertMetaInfo" icon="el-icon-plus">{{ $t("common.append")
|
}}
|
</el-button>
|
</el-form-item>
|
<el-form-item v-if="btnStatus.delete">
|
<el-button type="danger" size="small" @click="deleteMetaInfo" icon="el-icon-delete">{{ $t("common.delete")
|
}}
|
</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="resetInfo('queryForm')" icon="el-icon-refresh" type="info" size="small">{{
|
$t("common.reset") }}
|
</el-button>
|
</el-form-item>
|
</div>
|
</div>
|
</el-form>
|
</div>
|
<div class="dividing-line"></div>
|
<div class="table_box subpage_Div" :style="styleVar">
|
<el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange"
|
height="calc(100% - 77px)">
|
<el-table-column type="selection" width="55" />
|
<el-table-column width="70" align="center" type="index" :label="$t('common.index')" />
|
<el-table-column v-for="(item, index) in titleData" :key="index" :label="item.cname" :prop="item.name"
|
align="center"></el-table-column>
|
<el-table-column header-align="center" align="center" width="200" label="操作">
|
<template slot-scope="scope">
|
<el-button type="warning" size="mini" @click="editHandele(scope.row)">修改</el-button>
|
<el-button size="mini" @click="preViewHandle(scope.row)">详情</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="pagination_box" style="margin-top: 15px">
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listData.page"
|
:page-sizes="[10, 50, 100, 200]" :page-size="listData.limit" layout="total, sizes, prev, pager, next, jumper"
|
:total="count">
|
</el-pagination>
|
</div>
|
</div>
|
|
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :before-close="handleClose">
|
<div style="height:40vh;overflow:auto;padding:0px 10px">
|
<el-form :model="editData" label-width="170px">
|
|
<el-form-item v-for="(item, index) in titleData" :key="index" :label="item.cname">
|
<el-input :disabled="setDisabled" v-model="editData[item.name]" :placeholder="'请输入'+item.cname+'参数'"></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
<span v-show="!setDisabled" slot="footer" class="dialog-footer">
|
<el-button size="small" @click="handleClose()">取 消</el-button>
|
<el-button size="small" type="primary" @click="sureDialog">确 定</el-button>
|
</span>
|
</el-dialog>
|
|
</div>
|
</template>
|
|
<script>
|
import $ from "jquery";
|
import { getToken } from "@/utils/auth";
|
import {
|
dmssectiondevice_getTableMeta,
|
dmssectiondevice_query,
|
dmssectiondevice_delete,
|
dmssectiondevice_save,
|
dmssectiondevice_update
|
} from "../../api/sxpw.js";
|
import MyBread from "../../components/MyBread.vue";
|
import objData from "./data";
|
export default {
|
name: "metadataManage",
|
components: { MyBread },
|
data() {
|
|
return {
|
listData: {
|
limit: 10,
|
page: 1,
|
},
|
count: 0,
|
queryForm: {
|
|
},
|
btnStatus: {
|
select: false,
|
delete: true,
|
upload: false,
|
download: false,
|
insert: false,
|
update: false,
|
},
|
tableData: [],
|
multipleSelection: [],
|
tableHeight: 0,
|
styleVar: {
|
height: "calc(100% - 109px)",
|
},
|
dialogTitle: null,
|
dialogVisible: false,
|
handleFlag: null,
|
editData: {},
|
setDisabled: false,
|
options: [],
|
typeOptions: [],
|
titleData: [],
|
};
|
},
|
created() {
|
|
|
},
|
beforeDestroy() {
|
this.timer && clearTimeout(this.timer);
|
window.removeEventListener("resize", this.onResize);
|
},
|
|
mounted() {
|
window.addEventListener("resize", this.onResize);
|
this.options = objData.shortData;
|
this.typeOptions = objData.shortData;
|
this.calHeight();
|
this.getMetaDataTitle();
|
},
|
watch: {
|
|
},
|
methods: {
|
editHandele(row) {
|
this.dialogTitle = "修改信息";
|
this.handleFlag = "edit";
|
this.dialogVisible = true;
|
this.setDisabled = false;
|
this.editData = row;
|
},
|
insertMetaInfo() {
|
this.dialogTitle = "新增信息";
|
this.dialogVisible = true;
|
this.handleFlag = "insert";
|
this.setDisabled = false;
|
},
|
preViewHandle(row) {
|
this.dialogTitle = "信息详情";
|
this.handleFlag = "preView";
|
this.dialogVisible = true;
|
this.setDisabled = true;
|
this.editData = row;
|
},
|
handleClose() {
|
this.dialogVisible = false;
|
setTimeout(() => {
|
this.dialogTitle = null;
|
this.setDisabled = false;
|
this.handleFlag = null;
|
this.editData = {};
|
|
}, 200);
|
},
|
sureDialog() {
|
var val = this.editData;
|
if (this.handleFlag == 'insert') {
|
this.insertMetaData(val)
|
} else if (this.handleFlag == 'edit') {
|
this.editMetaData(val)
|
}
|
this.handleClose();
|
},
|
async insertMetaData(res) {
|
const data = await dmssectiondevice_save(res);
|
if (data.status == 200) {
|
this.showMessage('数据添加成功', 'success');
|
this.resetInfo();
|
} else {
|
this.showMessage('数据添加失败', 'error')
|
}
|
},
|
async editMetaData(res) {
|
const data = await dmssectiondevice_update(res);
|
if (data.status == 200) {
|
this.showMessage('数据修改成功', 'success');
|
this.getMetaData();
|
} else {
|
this.showMessage('数据修改失败', 'error')
|
}
|
},
|
onResize() {
|
this.timer && clearTimeout(this.timer);
|
this.timer = setTimeout(() => {
|
this.calHeight();
|
}, 500);
|
},
|
calHeight() {
|
this.$nextTick(() => {
|
const rect = this.$refs.container.getBoundingClientRect();
|
this.tableHeight = `${rect.height + 97}px`;
|
this.styleVar["height"] = `calc(100% - ${rect.height + 28}px)`;
|
});
|
},
|
// 获取多选选中的对象
|
|
async deleteMetaInfo() {
|
if (this.multipleSelection.length <= 0) {
|
this.showMessage('请选择要删除的数据', 'warning')
|
return
|
}
|
|
var std = [];
|
for (var i in this.multipleSelection) {
|
std.push(this.multipleSelection[i].id)
|
}
|
const data = await dmssectiondevice_delete(std);
|
if (data.status == 200) {
|
this.showMessage('删除成功', 'success')
|
this.multipleSelection = [];
|
this.getMetaData();
|
} else {
|
this.showMessage('删除失败', 'error')
|
}
|
},
|
showMessage(res, type) {
|
if (type == 'warning') {
|
this.$message({
|
message: res,
|
type: 'warning'
|
});
|
} else if (type == 'success') {
|
this.$message({
|
message: res,
|
type: 'success'
|
});
|
} else if (type == 'error') {
|
this.$message.error(res);
|
} else {
|
this.$message(res);
|
}
|
},
|
handleSelectionChange(val) {
|
this.multipleSelection = val;
|
},
|
handleSizeChange() {
|
this.listData.page = 1;
|
this.listData.limit = val;
|
this.getMetaData();
|
},
|
handleCurrentChange(val) {
|
this.listData.page = val;
|
this.getMetaData();
|
},
|
resetInfo() {
|
this.queryForm = {}
|
this.queryInfo();
|
},
|
queryInfo() {
|
this.listData = {
|
limit: 10,
|
page: 1,
|
}
|
this.count = 0
|
this.getMetaData();
|
},
|
async getMetaData() {
|
if(this.queryForm.types){
|
this.listData[this.queryForm.types]= this.queryForm.name
|
}
|
const data = await dmssectiondevice_query(this.listData);
|
if (data.status != 200) return;
|
var val_data = data.data.page
|
if (val_data.list <= 0) {
|
this.tableData = [];
|
this.listData.count = 0;
|
} else {
|
|
this.tableData = val_data.list;
|
this.count = val_data.totalCount;
|
}
|
},
|
async getMetaDataTitle() {
|
const data = await dmssectiondevice_getTableMeta();
|
if (data.status != 200) return
|
this.titleData = objData.initTitle(data.data.list);
|
this.getMetaData();
|
|
}
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.authorityManagement_box {
|
height: 98%;
|
width: 98%;
|
padding: 0.5%;
|
|
.inquire {
|
padding: 8px;
|
//margin-top: 20px;
|
|
border-radius: 5px;
|
|
//margin-bottom: 20px;
|
.el-form-item {
|
margin: 5px;
|
}
|
}
|
|
.dotClass {
|
width: 10px;
|
height: 10px;
|
border-radius: 50%;
|
display: block;
|
margin-left: 10px; //这个用于圆点居中
|
}
|
|
.downloadBox {
|
position: absolute;
|
top: 20%;
|
left: 40%;
|
padding: 20px;
|
|
width: 30%;
|
|
border-radius: 10px;
|
}
|
|
.preview-dialog {
|
.pdfClass {
|
height: 70vh;
|
width: 100%;
|
position: relative;
|
}
|
}
|
|
.el-divider--horizontal {
|
margin: 15px 0;
|
}
|
|
.gdbTableBox {
|
width: 100%;
|
height: 740px;
|
overflow-y: auto;
|
}
|
|
.loadBox {
|
position: fixed;
|
z-index: 2002;
|
background: rgba(0, 0, 0, 0.2);
|
width: 100%;
|
height: 100%;
|
top: 0;
|
left: 0;
|
|
.el-loading-mask {
|
background: transparent !important;
|
}
|
}
|
}
|
</style>
|
