<style lang="less">
|
@import "@/styles/table-common.less";
|
</style>
|
<template>
|
<div class="search">
|
<Card>
|
<Row class="operation">
|
<Button @click="exportSelectData" icon="md-cloud-upload"
|
>导出所选数据</Button
|
>
|
<Button @click="exportAll" icon="ios-cloud-upload">导出全部数据</Button>
|
<Button @click="importModalVisible = true" icon="ios-download"
|
>导入数据</Button
|
>
|
<Button type="dashed" @click="openTip = !openTip">{{
|
openTip ? "关闭提示" : "开启提示"
|
}}</Button>
|
</Row>
|
<Alert show-icon v-show="openTip">
|
已选择
|
<span class="select-count">{{ selectList.length }}</span> 项
|
<a class="select-clear" @click="clearSelectAll">清空</a>
|
</Alert>
|
<Table
|
:loading="loading"
|
border
|
:columns="columns"
|
:data="data"
|
sortable="custom"
|
@on-sort-change="changeSort"
|
@on-selection-change="showSelect"
|
ref="table"
|
></Table>
|
<Row type="flex" justify="end" class="page">
|
<Page
|
:current="searchForm.pageNumber"
|
:total="total"
|
:page-size="searchForm.pageSize"
|
@on-change="changePage"
|
@on-page-size-change="changePageSize"
|
:page-size-opts="[10, 20, 50]"
|
size="small"
|
show-total
|
show-elevator
|
show-sizer
|
></Page>
|
</Row>
|
</Card>
|
|
<!-- 自定义导出数据 -->
|
<Modal
|
v-model="exportModalVisible"
|
:title="exportTitle"
|
:loading="loadingExport"
|
@on-ok="exportCustomData"
|
>
|
<Form ref="exportForm" :label-width="100">
|
<FormItem label="导出文件名">
|
<Input v-model="filename" />
|
</FormItem>
|
<FormItem label="自定义导出列">
|
<CheckboxGroup v-model="chooseColumns">
|
<Checkbox
|
v-for="(item, i) in exportColumns"
|
:label="item.title"
|
:key="i"
|
:value="item.checked"
|
:disabled="item.disabled"
|
></Checkbox>
|
</CheckboxGroup>
|
</FormItem>
|
</Form>
|
</Modal>
|
<Drawer
|
title="导入数据"
|
closable
|
v-model="importModalVisible"
|
width="800"
|
draggable
|
>
|
<div
|
style="
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
"
|
>
|
<Upload action :before-upload="beforeUploadImport" accept=".xls, .xlsx">
|
<Button
|
:loading="reading"
|
icon="ios-cloud-upload-outline"
|
style="margin-right: 10px"
|
>上传Excel文件</Button
|
>
|
<span v-if="uploadfile.name"
|
>当前选择文件：{{ uploadfile.name }}</span
|
>
|
</Upload>
|
<Button @click="clearImportData" icon="md-trash">清空数据</Button>
|
</div>
|
<Alert type="warning" show-icon
|
>导入前请下载查看导入模版数据文件查看所需字段及说明，确保数据格式正确，不得修改列英文名称</Alert
|
>
|
<Table
|
:columns="importColumns"
|
border
|
:height="height"
|
:data="importTableData"
|
ref="importTable"
|
></Table>
|
<div class="drawer-footer">
|
<Button @click="downloadTemple" type="info">下载导入模板</Button>
|
<div style="position: absolute; right: 15px; display: inline-block">
|
<Button @click="importModalVisible = false">关闭</Button>
|
<Button
|
:loading="importLoading"
|
:disabled="importTableData.length <= 0"
|
@click="importData"
|
style="margin-left: 5px"
|
type="primary"
|
>
|
确认导入
|
<span v-if="importTableData.length > 0"
|
>{{ importTableData.length }} 条数据</span
|
>
|
</Button>
|
</div>
|
</div>
|
</Drawer>
|
</div>
|
</template>
|
|
<script>
|
// 模版导入文件表数据
|
import { userColumns, userData } from "@/views/sys/user-manage/importTemplate";
|
// excel转换工具类
|
import excel from "@/libs/excel";
|
import {getSessionStore} from "../../../libs/storage";
|
export default {
|
name: "excel",
|
data() {
|
return {
|
openTip: true, // 显示提示
|
reading: false, // 读取中
|
height: 510, // 高度
|
loading: true, // 表单加载状态
|
importLoading: false, // 导入加载状态
|
loadingExport: true, // 导出加载状态
|
exportModalVisible: false, // 自定义导出显示
|
importModalVisible: false, // 导入显示
|
selectList: [], // 多选数据
|
searchForm: {
|
pageNumber: 1,
|
pageSize: 10,
|
sort: "createTime",
|
order: "desc",
|
},
|
columns: [
|
// 表头
|
{
|
type: "selection",
|
width: 60,
|
align: "center",
|
},
|
{
|
type: "index",
|
width: 60,
|
align: "center",
|
},
|
{
|
title: "名称",
|
key: "name",
|
sortable: true,
|
},
|
{
|
title: "手机",
|
key: "mobile",
|
sortable: true,
|
},
|
{
|
title: "创建时间",
|
key: "createTime",
|
sortable: true,
|
sortType: "desc",
|
},
|
{
|
title: "更新时间",
|
key: "updateTime",
|
sortable: true,
|
},
|
{
|
title: "操作",
|
key: "action",
|
align: "center",
|
width: 200,
|
render: (h, params) => {
|
return h("div", [
|
h(
|
"a",
|
{
|
on: {
|
click: () => {
|
this.$Message.info("点击了编辑");
|
},
|
},
|
},
|
"编辑"
|
),
|
h("Divider", {
|
props: {
|
type: "vertical",
|
},
|
}),
|
h(
|
"a",
|
{
|
on: {
|
click: () => {
|
this.$Message.info("点击了删除");
|
},
|
},
|
},
|
"删除"
|
),
|
]);
|
},
|
},
|
],
|
exportColumns: [
|
// 导出列
|
{
|
title: "名称",
|
key: "name",
|
sortable: true,
|
},
|
{
|
title: "手机",
|
key: "mobile",
|
sortable: true,
|
},
|
{
|
title: "创建时间",
|
key: "createTime",
|
sortable: true,
|
sortType: "desc",
|
},
|
{
|
title: "更新时间",
|
key: "updateTime",
|
sortable: true,
|
},
|
],
|
chooseColumns: [],
|
filename: "数据",
|
exportTitle: "确认导出",
|
exportType: "",
|
importTableData: [],
|
importColumns: [],
|
uploadfile: {
|
name: "",
|
},
|
tempColumns: userColumns,
|
tempData: userData,
|
data: [],
|
exportData: [],
|
total: 0,
|
};
|
},
|
methods: {
|
init() {
|
this.getDataList();
|
// 初始化导出列数据
|
let array = [];
|
this.exportColumns.forEach((e) => {
|
// 指定列限制权限
|
if (
|
!this.getStore("roles").includes("ROLE_ADMIN") &&
|
e.key == "mobile"
|
) {
|
e.title = "[无权导出] " + e.title;
|
e.disabled = true;
|
} else {
|
e.disabled = false;
|
}
|
array.push(e.title);
|
});
|
this.chooseColumns = array;
|
},
|
changePage(v) {
|
this.searchForm.pageNumber = v;
|
this.getDataList();
|
this.clearSelectAll();
|
},
|
changePageSize(v) {
|
this.searchForm.pageSize = v;
|
this.getDataList();
|
},
|
selectDateRange(v) {
|
if (v) {
|
this.searchForm.startDate = v[0];
|
this.searchForm.endDate = v[1];
|
}
|
},
|
getDataList() {
|
this.loading = true;
|
let params = {
|
pageNumber: this.pageNumber,
|
pageSize: this.pageSize,
|
sort: this.sortColumn,
|
order: this.sortType,
|
};
|
// 请求后端获取表单数据 请自行修改接口
|
// this.getRequest("请求路径", params).then(res => {
|
// this.loading = false;
|
// if (res.success) {
|
// this.data = res.result.content;
|
// this.total = res.result.totalElements;
|
// }
|
// });
|
// 以下为模拟数据
|
this.data = [
|
{
|
id: "1",
|
name: "XBoot",
|
mobile: "12345678901",
|
createTime: "2018-08-08 00:08:00",
|
updateTime: "2018-08-08 00:08:00",
|
},
|
{
|
id: "2",
|
name: "Exrick",
|
mobile: "12345678901",
|
createTime: "2018-08-08 00:08:00",
|
updateTime: "2018-08-08 00:08:00",
|
},
|
];
|
this.total = this.data.length;
|
this.loading = false;
|
},
|
handleSearch() {
|
this.searchForm.pageNumber = 1;
|
this.searchForm.pageSize = 10;
|
this.getDataList();
|
},
|
handleReset() {
|
this.$refs.searchForm.resetFields();
|
this.searchForm.pageNumber = 1;
|
this.searchForm.pageSize = 10;
|
// 重新加载数据
|
this.getDataList();
|
},
|
changeSort(e) {
|
this.searchForm.sort = e.key;
|
this.searchForm.order = e.order;
|
if (e.order == "normal") {
|
this.searchForm.order = "";
|
}
|
this.getDataList();
|
},
|
exportSelectData() {
|
if (this.selectList.length <= 0) {
|
this.$Message.warning("您还未选择要导出的数据");
|
return;
|
}
|
this.exportType = "part";
|
this.exportModalVisible = true;
|
this.exportTitle = "确认导出 " + this.selectList.length + " 条数据";
|
},
|
exportAll() {
|
this.exportType = "all";
|
this.exportModalVisible = true;
|
this.exportTitle = "确认导出全部 " + this.total + " 条数据";
|
// 请求后端获取全部数据 请自行修改接口
|
// this.getRequest("请求路径", params).then(res => {
|
// if (res.success) {
|
// this.exportData = res.result;
|
// }
|
// });
|
// 以下为模拟数据
|
this.exportData = [
|
{
|
id: "1",
|
name: "XBoot",
|
mobile: "12345678901",
|
createTime: "2018-08-08 00:08:00",
|
updateTime: "2018-08-08 00:08:00",
|
},
|
{
|
id: "2",
|
name: "Exrick",
|
mobile: "12345678901",
|
createTime: "2018-08-08 00:08:00",
|
updateTime: "2018-08-08 00:08:00",
|
},
|
];
|
},
|
exportCustomData() {
|
if (this.filename == "") {
|
this.filename = "用户数据";
|
}
|
// 判断勾选导出列
|
let exportColumns = [];
|
this.exportColumns.forEach((e) => {
|
this.chooseColumns.forEach((c) => {
|
if (e.title == c && !e.disabled) {
|
exportColumns.push(e);
|
}
|
});
|
});
|
this.exportModalVisible = false;
|
let title = [];
|
let key = [];
|
exportColumns.forEach((e) => {
|
title.push(e.title);
|
key.push(e.key);
|
});
|
const params = {
|
title: title,
|
key: key,
|
data: this.exportData,
|
autoWidth: true,
|
filename: this.filename,
|
};
|
excel.export_array_to_excel(params);
|
},
|
beforeUploadImport(file) {
|
this.uploadfile = file;
|
const fileExt = file.name.split(".").pop().toLocaleLowerCase();
|
if (fileExt == "xlsx" || fileExt == "xls") {
|
this.readFile(file);
|
this.file = file;
|
} else {
|
this.$Notice.warning({
|
title: "文件类型错误",
|
desc:
|
"所选文件‘ " +
|
file.name +
|
" ’不是EXCEL文件，请选择后缀为.xlsx或者.xls的EXCEL文件。",
|
});
|
}
|
return false;
|
},
|
// 读取文件
|
readFile(file) {
|
this.reading = true;
|
const reader = new FileReader();
|
reader.readAsArrayBuffer(file);
|
reader.onerror = (e) => {
|
this.reading = false;
|
this.$Message.error("文件读取出错");
|
};
|
reader.onload = (e) => {
|
const data = e.target.result;
|
const { header, results } = excel.read(data, "array");
|
const tableTitle = header.map((item) => {
|
return { title: item, key: item, minWidth: 130, align: "center" };
|
});
|
this.importTableData = results;
|
this.importColumns = tableTitle;
|
this.reading = false;
|
this.$Message.success("读取数据成功");
|
};
|
},
|
downloadTemple() {
|
let title = [];
|
let key = [];
|
userColumns.forEach((e) => {
|
title.push(e.title);
|
key.push(e.key);
|
});
|
const params = {
|
title: title,
|
key: key,
|
data: userData,
|
autoWidth: true,
|
filename: "导入数据模版",
|
};
|
excel.export_array_to_excel(params);
|
},
|
importData() {
|
this.importLoading = true;
|
// 传入导入数据 后端接收body数组列表批量导入
|
// this.importRequest("请求路径", this.importTableData).then(res => {
|
// this.importLoading = false;
|
// if (res.success) {
|
// this.importModalVisible = false;
|
// this.getDataList();
|
// this.$Modal.info({
|
// title: "导入结果",
|
// content: res.message
|
// });
|
// }
|
// });
|
// 模拟请求成功
|
this.importLoading = false;
|
this.importModalVisible = false;
|
this.$Modal.info({
|
title: "导入结果",
|
content: "导入成功，这是假通知",
|
});
|
this.getDataList();
|
},
|
showSelect(e) {
|
this.exportData = e;
|
this.selectList = e;
|
},
|
clearSelectAll() {
|
this.$refs.table.selectAll(false);
|
},
|
clearImportData() {
|
this.importTableData = [];
|
this.importColumns = [];
|
this.uploadfile = {};
|
},
|
},
|
mounted() {
|
// 计算高度
|
this.height = Number(document.documentElement.clientHeight - 230);
|
this.init();
|
},
|
};
|
</script>
|
