<template>
|
<div
|
v-drag="true"
|
class="exportBox"
|
>
|
<div class="exportTitle">
|
<label>出图列表</label>
|
<el-icon
|
@click="setSpatialClose"
|
:size="20"
|
>
|
<Close />
|
</el-icon>
|
</div>
|
<div class="exportContent spatialTable">
|
<div style="height:calc(100% - 130px) ; width: calc(100% - 25px); background: red; position: absolute;">
|
<el-table
|
ref="singleTable"
|
:data="exportable"
|
height="100%"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column
|
type="index"
|
width="100"
|
label="序号"
|
>
|
</el-table-column>
|
<el-table-column
|
property="descr"
|
label="标题"
|
> </el-table-column>
|
<el-table-column
|
property="name"
|
label="文件名称"
|
> </el-table-column>
|
<el-table-column
|
property="createName"
|
label="出图人"
|
>
|
</el-table-column>
|
<el-table-column
|
property="createTime"
|
:formatter="formatTime"
|
label="日期"
|
>
|
</el-table-column>
|
|
<el-table-column
|
label="操作"
|
width="120"
|
>
|
<template #default="scope">
|
<el-button
|
link
|
type="primary"
|
size="small"
|
@click.stop="downloadMap(scope.$index, scope.row)"
|
>下载</el-button>
|
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div class="pagination_box">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="listdata.pageIndex"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="listdata.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="listdata.count"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
} from "vue";
|
import { User, Lock } from "@element-plus/icons-vue";
|
import { useStore } from "vuex"; // 引入useStore 方法
|
import { exportSelectByPage } from "@/api/api";
|
import moment from "moment";
|
import { getToken } from "@/utils/auth";
|
const store = useStore(); // 该方法用于返回store 实例
|
const emits = defineEmits(["SETspatialClose"]);
|
const listdata = ref({
|
pageIndex: 1,
|
pageSize: 10,
|
count: 0,
|
});
|
const exportable = ref([]);
|
const handleSizeChange = (val) => {
|
listdata.value.pageIndex = 1;
|
listdata.value.pageSize = val;
|
getTableData();
|
};
|
const downloadMap = (index, rows) => {
|
var guid = rows.guid;
|
var token = "?token=" + getToken();
|
var a = document.createElement("a"); // 创建一个a标签元素
|
a.style.display = "none"; // 设置元素不可见
|
a.href = config.BASE_URL + "/export/downloadFile" + token + "&guid=" + guid;
|
document.body.appendChild(a); // 加入
|
a.click(); // 触发点击,下载
|
document.body.removeChild(a); // 释放
|
};
|
const handleCurrentChange = (val) => {
|
listdata.value.pageIndex = val;
|
getTableData();
|
};
|
const setListDataStart = () => {
|
listdata.value = {
|
pageIndex: 1,
|
pageSize: 10,
|
count: 0,
|
};
|
getTableData();
|
};
|
const formatTime = (row, column) => {
|
let date = row[column.property];
|
if (date === undefined || date === null) {
|
return "";
|
}
|
return moment(parseInt(date)).format("YYYY-MM-DD HH:mm:ss");
|
};
|
const handleSelectionChange = () => {};
|
const getTableData = async () => {
|
const data = await exportSelectByPage(listdata.value);
|
|
exportable.value = data.result;
|
|
listdata.value.count = data.count;
|
};
|
|
const setSpatialClose = () => {
|
store.state.setExportList = false;
|
};
|
onMounted((res) => {
|
setListDataStart();
|
});
|
</script>
|
|
<style lang="less" scoped>
|
.exportBox {
|
width: 800px;
|
height: 400px;
|
|
position: absolute;
|
bottom: 10px;
|
right: 50px;
|
background: rgba(7, 8, 14, 0.8);
|
border: 1px solid #d6e4ff;
|
z-index: 50;
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
.exportTitle {
|
padding: 10px;
|
width: calc(100% - 20px);
|
color: #d6e4ff;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 30px;
|
label {
|
font-size: 16px;
|
}
|
}
|
.exportContent {
|
width: 100%;
|
height: calc(100% - 60px);
|
padding: 5px;
|
position: absolute;
|
.pagination_box {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
margin-top: 10px;
|
}
|
}
|
.spatialTable {
|
margin-top: 10px;
|
width: 100%;
|
height: calc(100% - 35px);
|
position: relative;
|
|
.el-table /deep/ .el-table__header-wrapper tr th {
|
background-color: rgba(38, 47, 71, 1) !important;
|
color: #d6e4ff;
|
}
|
// 修改每行样式：
|
.el-table /deep/ .el-table__row {
|
background-color: rgba(38, 47, 71, 1) !important;
|
color: #d6e4ff;
|
}
|
.el-table /deep/ .el-table__body tr.current-row > td {
|
background-color: rgba(38, 47, 71, 1) !important;
|
}
|
.el-table /deep/ .el-table__body tr:hover > td {
|
background-color: rgba(38, 47, 71, 1) !important;
|
}
|
// 修改表格每行边框的样式：
|
.el-table /deep/ td,
|
.el-table /deep/ th.is-leaf {
|
// border-bottom: 1px solid #409eff;
|
// border-right: 1px solid #409eff;
|
}
|
.el-table /deep/ .el-table__cell {
|
padding: 8px 0;
|
}
|
// 设置表格每行的高度：
|
.el-table /deep/ .el-table__header tr,
|
.el-table /deep/ .el-table__header th {
|
height: 50px;
|
}
|
.el-table__body tr,
|
.el-table__body td {
|
height: 50px;
|
padding: 0;
|
}
|
// 设置表格边框颜色：
|
|
.el-table--border::after,
|
.el-table--group::after {
|
width: 0;
|
}
|
.el-table::before {
|
height: 0;
|
}
|
}
|
/deep/.el-pagination button {
|
background: transparent;
|
color: #d6e4ff;
|
}
|
/deep/.el-pager li {
|
background: transparent;
|
color: #d6e4ff;
|
}
|
/deep/.el-pager li.is-active {
|
color: #409eff;
|
}
|
/deep/.el-pagination__total {
|
color: #d6e4ff;
|
}
|
/deep/.el-pagination__goto {
|
color: #d6e4ff;
|
}
|
/deep/.el-pagination__classifier {
|
color: #d6e4ff;
|
}
|
/deep/.el-input.is-disabled .el-input__wrapper {
|
background: transparent !important;
|
color: #d6e4ff;
|
}
|
/deep/.el-input.is-disabled .el-input__inner {
|
color: #d6e4ff !important;
|
}
|
}
|
</style>
|
