<template>
|
<div class="box">
|
<el-container>
|
<el-aside style="padding: 10px">
|
<data-directory :title="$route.meta.title"></data-directory>
|
</el-aside>
|
<el-main style="margin: 0px; padding: 10px">
|
<el-card class="box-card scrollbar">
|
<!--工具栏-->
|
<div class="toolbar">
|
<el-form :inline="true" size="small" class="form">
|
<el-form-item v-if="$route.name === 'cimdata'">
|
<el-select size="small" placeholder="请选择" style="width: 100px" v-model="currentLevel.text">
|
<el-option v-for="item in cimlevel" :key="item.id" :label="item.text" :value="item.id"
|
@change="cimlevelSelectedChange">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-input placeholder="请输入关键字查询" clearable v-model="filterString" @keyup.enter="handleQuery">
|
<el-button slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
|
</el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button-group>
|
<el-button plain size="small">入库</el-button>
|
<el-button plain size="small">下载</el-button>
|
<el-button plain size="small" v-if="$route.name !== 'cimdata'">数据转换</el-button>
|
</el-button-group>
|
</el-form-item>
|
<el-form-item style="float: right">
|
<el-button class="button_box" @click="showTableStyle()" size="small">
|
<span title="列表"><i class="el-icon-tickets"></i> </span>
|
</el-button>
|
<el-button class="button_box" @click="showMatixStyle()" size="small">
|
<span title="矩阵"><i class="el-icon-menu"></i> </span>
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<!--表格树内容栏-->
|
<div style="width: 100%" v-show="showStyle === 1">
|
<el-table border :data="tableDdata" size="mini" style="width: 100%; background: transparent"
|
@selection-change="handleSelectionChange" rowKey="id">
|
<el-table-column type="selection" :reserve-selection="true" width="35">
|
</el-table-column>
|
<el-table-column prop="name" label="名称"> </el-table-column>
|
<el-table-column prop="formtype" label="格式"> </el-table-column>
|
<el-table-column prop="ver" label="版本"> </el-table-column>
|
<el-table-column prop="createtime" label="入库时间">
|
</el-table-column>
|
<el-table-column header-align="center" align="center" label="操作" fixed="right"><template
|
slot-scope="scope">
|
<el-button type="text" @click="showMeteData(scope.row)" size="small">查看元数据</el-button>
|
<el-button type="text" @click="previewData(scope.row)" size="small">预览</el-button>
|
<el-button type="text" @click="downloadData(scope.row)" size="small">下载</el-button>
|
<el-button type="text" @click="deleteData(scope.row)" size="small">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
</el-card>
|
</el-main>
|
</el-container>
|
</div>
|
</template>
|
<script>
|
import { mapState, mapActions } from "vuex";
|
import MeteDataList from "../../components/dataedit/MeteDataList.vue";
|
import CardDataTable from "../../components/dataedit/CardDataTable.vue";
|
import dataDirectory from "../../components/dataDirectory.vue";
|
import PreviewData from "../../components/dataedit/PreviewData.vue";
|
export default {
|
components: {
|
MeteDataList,
|
CardDataTable,
|
dataDirectory,
|
PreviewData,
|
},
|
data() {
|
return {
|
cimlevel: [
|
{ id: "0", text: "全部" },
|
{ id: "1", text: "cim 1级" },
|
{ id: "2", text: "cim 2级" },
|
{ id: "3", text: "cim 3级" },
|
{ id: "4", text: "cim 4级" },
|
{ id: "5", text: "cim 5级" },
|
{ id: "6", text: "cim 6级" },
|
{ id: "7", text: "cim 7级" },
|
],
|
currentLevel: {},
|
// 总条数
|
total: 0,
|
//列表的数据分页
|
listData: {
|
pageNo: 1,
|
pageSize: 10,
|
},
|
filterString: "",
|
//矩阵卡片的数据分页
|
cardData: {
|
pageNo: 1,
|
pageSize: 8,
|
},
|
dialogMeteVisible: false,
|
dialogPreviewVisible: false,
|
previewDataRow: null,
|
|
showStyle: 1,
|
//列表展示数据
|
tableDdata: [],
|
//矩阵卡片展示数据
|
cardDdata: [],
|
cardRefresh: true,
|
selectListData: [], //列表中勾选后需要回显的数据id数组
|
lstMeteData: [],
|
};
|
},
|
watch: {
|
//左侧树节点变化是改变state中requestSuffix的值，监视之
|
//监视，当requestSuffix变化时，重新查询数据列表
|
requestSuffix: {
|
handler(val) {
|
this.selectListData = [];
|
this.$refs.getSelectedData.selectListData = [];
|
this.handleQuery();
|
},
|
},
|
},
|
computed: {},
|
methods: {
|
cimlevelSelectedChange(val) { },
|
handleMutilDownload() {
|
//批量下载
|
if (this.showStyle === 1) {
|
alert("下载共：" + this.selectListData.length);
|
console.log(this.selectListData);
|
} else {
|
alert("下载共：" + this.$refs.getSelectedData.selectListData.length);
|
console.log(this.$refs.getSelectedData.selectListData);
|
}
|
},
|
handleMutilDelete() {
|
//批量删除
|
let dlength =
|
this.showStyle === 1
|
? this.selectListData.length
|
: this.$refs.getSelectedData.selectListData.length;
|
if (dlength > 0) {
|
this.$confirm("此操作将永远删除该数据，是否继续？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
let ddata =
|
this.showStyle === 1
|
? this.selectListData
|
: this.$refs.getSelectedData.selectListData;
|
console.log(ddata.map((item) => item.id));
|
this.$axios({
|
methods: "post",
|
url: "/datasource/delete",
|
data: { id: ddata.map((item) => item.id) },
|
}).then((res) => {
|
this.$alert("删除共：" + dlength);
|
});
|
});
|
} else {
|
this.$alert("请先勾选要删除的数据。");
|
}
|
},
|
|
handleSelectionChange(rows) {
|
this.selectListData = rows;
|
},
|
|
showTableStyle() {
|
if (this.showStyle !== 1) {
|
this.showStyle = 1;
|
this.handleQuery();
|
}
|
},
|
showMatixStyle() {
|
if (this.showStyle !== 2) {
|
this.showStyle = 2;
|
this.cardRefresh = true;
|
this.handleQuery();
|
}
|
},
|
showMeteData(row) {
|
//根据id查询对应元数据
|
let id = row.id;
|
this.$axios({
|
methods: "get",
|
url: "/metedata/get",
|
data: { id: row.id },
|
})
|
.then((res) => {
|
this.dialogMeteVisible = true;
|
this.lstMeteData = res.data;
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
previewData(row) {
|
this.previewDataRow = row;
|
this.$nextTick(() => {
|
this.dialogPreviewVisible = true;
|
});
|
console.log(row.is3d);
|
},
|
downloadData(row) {
|
let id = row.id;
|
let name = row.name;
|
this.$axios({
|
method: "get",
|
url: "/datasource/download",
|
responseType: "blob",
|
data: { id: row.id },
|
})
|
.then((res) => {
|
if ("download" in document.createElement("a")) {
|
alert("download a:" + id + ",success!");
|
let url = window.URL.createObjectURL(res.data);
|
let link = document.createElement("a");
|
link.style.display = "none";
|
link.href = url;
|
link.setAttribute("download", name);
|
document.body.appendChild(link);
|
link.click();
|
document.body.removeChild(link);
|
} else {
|
alert("download:" + id + ",success!");
|
navigator.msSaveBlob(res.data, name);
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
deleteData(row) {
|
let id = row.id;
|
this.$confirm("此操作将永远删除该数据，是否继续？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
this.$axios({
|
methods: "get",
|
url: "/datasource/delete",
|
data: { id: [row.id] },
|
})
|
.then((res) => {
|
alert("delete:" + id + ",success!");
|
this.handleQuery(); //删除后重新查一遍数据
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
});
|
},
|
|
handleSizeChange(size) {
|
this.cardData.pageSize = size;
|
this.handleQuery();
|
},
|
handleCurrentChange(currentPage) {
|
if (this.showStyle === 1) this.listData.pageNo = currentPage;
|
else this.cardData.pageNo = currentPage;
|
this.handleQuery();
|
},
|
handleQuery() {
|
//axios调用接口获取数据（mock模拟）
|
let _pagesize =
|
this.showStyle === 1 ? this.listData.pageSize : this.cardData.pageSize;
|
let _pageindex =
|
this.showStyle === 1 ? this.listData.pageNo : this.cardData.pageNo;
|
let params = {
|
datatype: this.requestSuffix,
|
pagesize: _pagesize,
|
pageindex: _pageindex,
|
filter: this.filterString, //过滤条件
|
};
|
this.$axios({ methods: "get", url: "/datasource/list", data: params })
|
.then((res) => {
|
console.log(res);
|
let data = res.data;
|
if (data.rows && Array.isArray(data.rows)) {
|
//列表和矩阵展示个数不同，用不同数组数据进行记录
|
if (this.showStyle === 1) this.tableDdata = data.rows;
|
else this.cardDdata = data.rows;
|
this.total = data.total;
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
},
|
created() {
|
console.log(this.$route.meta.title);
|
this.$nextTick(function () {
|
this.requestSuffix = this.$route.name;
|
});
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.box {
|
height: 100%;
|
|
.el-container {
|
height: 100%;
|
}
|
|
.el-aside {
|
height: 100%;
|
}
|
}
|
|
.item {
|
color: #000000;
|
font-weight: bold;
|
font-size: 14px;
|
padding-left: 30px;
|
}
|
|
.box-card {
|
overflow: auto;
|
height: 98%;
|
border-radius: 6px 6px 6px 6px;
|
|
/deep/ .el-card__header {
|
background: rgba(0, 166, 226, 0.6) !important;
|
box-shadow: 0px 0px 4px 0px rgba(14, 22, 32, 0.2);
|
border-radius: 6px 6px 0px 0px;
|
height: 42px;
|
font-size: 16px;
|
font-weight: 400;
|
border-bottom: 0;
|
padding: 10px;
|
}
|
}
|
|
.box-dialog {
|
/deep/ .el-dialog {
|
border-radius: 5px;
|
}
|
|
/deep/ .el-dialog__header {
|
padding: 10px;
|
background-color: rgba(8, 164, 221, 0.6) !important;
|
border-radius: 5px 5px 0px 0px;
|
}
|
|
/deep/ .el-dialog__title {
|
line-height: 20px;
|
font-size: 14px;
|
color: #303133;
|
font-weight: bold;
|
}
|
|
/deep/ .el-dialog__headerbtn {
|
top: 10px;
|
}
|
|
/deep/ .el-dialog__body {
|
padding-top: 0px;
|
}
|
}
|
|
.dataUploadDiv {
|
margin-left: 50px;
|
}
|
</style>
|
