<template>
|
<div class="avue-crud" style="width: 100%">
|
<div class="grid-header" v-if="isShow('toolbar')" style="margin: 0px 20px">
|
<div style="display:flex;margin-bottom:15px;">
|
<div
|
v-for="(searchItem, index) in searchList"
|
:key="index"
|
style="margin-left:20px;"
|
>
|
<div style="display:flex;" v-if="searchItem.type == 'text'">
|
<div
|
style="font-weight:bold;font-size:15px;line-height:28px;margin-right:8px;"
|
>
|
{{ searchItem.text }}
|
</div>
|
<div>
|
<el-input
|
v-model="searchItem.value"
|
size="mini"
|
style="width:100%"
|
clearable
|
/>
|
</div>
|
</div>
|
<div style="display:flex;" v-if="searchItem.type == 'customSelect'">
|
<div
|
style="font-weight:bold;font-size:15px;line-height:28px;margin-right:8px;"
|
>
|
{{ searchItem.text }}
|
</div>
|
<div>
|
<el-select
|
v-model="searchItem.value"
|
placeholder="请选择"
|
filterable
|
clearable
|
size="mini"
|
@change="searchItem.changeFun"
|
>
|
<el-option
|
v-for="item in searchItem.searchOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
<span style="float: left">{{ item.name }}</span>
|
<span style="float: right; color: #8492a6; font-size: 13px">{{
|
item.desc
|
}}</span>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div style="display:flex;" v-if="searchItem.type == 'normalSelect'">
|
<div
|
style="font-weight:bold;font-size:15px;line-height:28px;margin-right:8px;"
|
>
|
{{ searchItem.text }}
|
</div>
|
<div>
|
<el-select
|
v-model="searchItem.value"
|
placeholder="请选择"
|
filterable
|
clearable
|
size="mini"
|
@change="searchItem.changeFun"
|
>
|
<el-option
|
v-for="item in searchItem.searchOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div style="display:flex;" v-if="searchItem.type == 'select'">
|
<div
|
style="font-weight:bold;font-size:15px;line-height:28px;margin-right:8px;"
|
>
|
{{ searchItem.text }}
|
</div>
|
<div>
|
<el-select
|
v-model="searchItem.value"
|
placeholder="请选择"
|
filterable
|
remote
|
size="mini"
|
:remote-method="searchItem.remoteFun"
|
@change="searchItem.changeFun"
|
>
|
<el-option
|
v-for="item in searchItem.searchOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-form :inline="true" @submit.native.prevent>
|
<el-form-item class="btn-group">
|
<el-button
|
v-for="(item, index) in getToolBarBtn"
|
:key="index"
|
@click="toolBarFun(item)"
|
:icon="item.icon"
|
:type="item.type"
|
:size="item.size || 'small'"
|
:plain="item.plain"
|
:disabled="item.disabled"
|
:loading="item.loading"
|
:class="item.cls"
|
v-show="item.barShow"
|
>{{ item.text }}
|
</el-button>
|
</el-form-item>
|
<el-form-item class="btn-custom">
|
<slot name="toolbar"></slot>
|
</el-form-item>
|
<!--刷新和显隐以及高级搜索-->
|
<el-form-item class="fr" style="margin-right:0">
|
<el-tooltip content="刷新" placement="top" v-if="options.isRefresh">
|
<el-button
|
circle
|
icon="fab fa-refresh"
|
@click="refreshData()"
|
class="icon-btn"
|
></el-button>
|
</el-tooltip>
|
<el-tooltip
|
content="自定义列"
|
placement="top"
|
v-if="options.isShowHide"
|
>
|
<el-button
|
circle
|
icon="fab fa-table"
|
@click="chooseCol()"
|
class="icon-btn"
|
></el-button>
|
</el-tooltip>
|
<el-tooltip content="导出" placement="top" v-if="table.isExport">
|
<!-- jipf 新增导出 以复用 -->
|
<el-button
|
circle
|
icon="el-icon-download"
|
@click="exportPage()"
|
style="font-size: 15px;border: 0px solid #DCDFE6"
|
></el-button>
|
</el-tooltip>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="title-division"></div>
|
<div class="custom-table-div" style="margin: 20px 20px 0px">
|
<el-table
|
ref="customTable"
|
:size="tableSize"
|
:key="tableKey"
|
:data="tableData"
|
:stripe="options.stripe"
|
:border="options.border"
|
:fit="options.fit"
|
:lazy="options.lazy"
|
:show-summary="options.showSummary"
|
:summary-method="options.getSummaries"
|
v-bind="$attrs"
|
v-on="$listeners"
|
@selection-change="handleSelectionChange"
|
:span-method="objectSpanMethod"
|
:header-cell-style="tableHeaderStyle"
|
v-adaptive="{ bottomOffset: bottomOffset, fixedHeight: fixedHeight }"
|
height="100px"
|
:class="['customTable']"
|
v-loading="dataListLoading"
|
element-loading-text="加载中..."
|
element-loading-spinner="el-icon-loading"
|
>
|
<!--多选择框-->
|
<el-table-column
|
align="center"
|
type="selection"
|
v-if="options.multiSelect"
|
style="width: 55px;"
|
>
|
</el-table-column>
|
<!--序号-->
|
<el-table-column
|
v-if="options.seqNo"
|
type="index"
|
label="序号"
|
:fixed="options.seqNoFix"
|
>
|
</el-table-column>
|
<!-- 默认渲染列 -->
|
<el-table-column
|
v-for="(item, index) in columnList"
|
:key="index"
|
:label="item.label"
|
:align="item.align || 'center'"
|
:show-overflow-tooltip="!item.noShowTip"
|
:width="inMemoryColWidth[item.prop] || item.width"
|
:prop="item.prop"
|
v-bind="$attrs"
|
v-on="$listeners"
|
v-if="item.isTrue"
|
>
|
<template slot="header" slot-scope="scope">
|
<template v-if="item.isSearch">
|
<div class="th" @click.stop>
|
<div>{{ item.label }}</div>
|
<template
|
v-if="
|
['text', 'textarea', 'number', 'email'].indexOf(
|
item.searchInfoType
|
) !== -1
|
"
|
>
|
<el-input
|
v-model="queryParam[item.prop]"
|
@keyup.enter.native="handlesFirstPage"
|
clearable
|
@clear="handlesFirstPage"
|
size="mini"
|
></el-input>
|
</template>
|
<template v-if="item.searchInfoType === 'select'">
|
<el-select
|
v-model="queryParam[item.prop]"
|
@change="handlesFirstPage"
|
clearable
|
filterable
|
size="mini"
|
>
|
<el-option
|
v-for="(j, k) in item.optList()"
|
:key="k"
|
:label="j.label"
|
:value="j.value"
|
></el-option>
|
</el-select>
|
</template>
|
</div>
|
</template>
|
<template v-else>
|
<div class="th" @click.stop>{{ item.label }}</div>
|
</template>
|
</template>
|
<template slot-scope="scope">
|
<template v-if="item.isEdit && scope.row.isRowEdit">
|
<template v-if="item.editInfoType === 'text'">
|
<el-input
|
v-model="scope.row[item.prop]"
|
size="mini"
|
style="width:100%"
|
@blur="fieldInputEnter(item.prop, scope.row)"
|
/>
|
</template>
|
<template v-if="item.editInfoType === 'select'">
|
<el-select
|
v-model="scope.row[item.prop]"
|
placeholder=""
|
clearable
|
filterable
|
size="mini"
|
>
|
<el-option
|
v-for="(j, k) in item.editOptList()"
|
:key="k"
|
:label="j.label"
|
:value="j.value"
|
></el-option>
|
</el-select>
|
</template>
|
</template>
|
<template v-else>
|
<template v-if="item.formatter">
|
<span
|
v-html="item.formatter(scope.row, item, scope.row[item.prop])"
|
></span>
|
</template>
|
<template v-if="!item.formatter">
|
<template v-if="item.isSplitCell">
|
<div
|
v-if="
|
scope.row[item.prop] != null && scope.row[item.prop] != ''
|
"
|
>
|
<div
|
v-for="(eleVal, index) in scope.row[item.prop].split(',')"
|
:key="index"
|
>
|
<div
|
v-if="
|
index < scope.row[item.prop].split(',').length - 1
|
"
|
style="border-bottom:1px solid #EBEEF5"
|
>
|
{{ eleVal }}
|
</div>
|
<div v-else>
|
{{ eleVal }}
|
</div>
|
</div>
|
</div>
|
</template>
|
<template v-else>
|
<span>{{ scope.row[item.prop] }}</span>
|
</template>
|
</template>
|
</template>
|
</template>
|
</el-table-column>
|
<el-table-column
|
v-if="table.operator"
|
:label="
|
(table.operatorConfig && table.operatorConfig.label) || '操作'
|
"
|
:width="table.operatorConfig && table.operatorConfig.width"
|
:min-width="
|
(table.operatorConfig && table.operatorConfig.width) ||
|
table.operatorConfig.minWidth ||
|
100
|
"
|
align="center"
|
fixed="right"
|
:show-overflow-tooltip="true"
|
>
|
<template slot-scope="scope">
|
<el-button
|
v-for="(item, index) in table.operator"
|
:key="index"
|
@click.stop="item.fun(scope.row)"
|
:type="item.type || 'text'"
|
:icon="item.icon"
|
:size="item.size || 'small'"
|
:disabled="!checkIsShow(scope, item)"
|
class="customButton"
|
>{{ item.text }}
|
</el-button>
|
<!-- jipf 自定义操作 -->
|
<slot name="customize" v-bind:invnotice="scope.row"></slot>
|
</template>
|
</el-table-column>
|
<slot name="end"></slot>
|
</el-table>
|
</div>
|
<div
|
class="avue-crud__pagination"
|
style="margin-bottom: 0px;margin-top:0px;padding:5px 20px;"
|
>
|
<el-pagination
|
v-show="tableData && tableData.length && isShowPagination"
|
:current-page="pagination.currentPage"
|
@current-change="handlesCurrentChange"
|
@size-change="sizeChangeHandle"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="pagination.pageSize"
|
:layout="
|
size
|
? 'total, prev, pager, next'
|
: 'total, sizes, prev, pager, next, jumper'
|
"
|
:total="pagination.total"
|
v-bind="$attrs"
|
v-on="$listeners"
|
background
|
></el-pagination>
|
</div>
|
<!--原有显隐-->
|
<el-dialog
|
title="多选"
|
:visible.sync="colSelectDialogVisible"
|
width="30%"
|
center
|
append-to-body
|
>
|
<span>
|
<el-checkbox
|
:value="columnList.length === colSelect.length"
|
@change="handleCheckedColAll"
|
>
|
全选</el-checkbox
|
>
|
<div style="margin: 15px 0;"></div>
|
<el-checkbox-group v-model="colSelect" @change="handleCheckedColChange">
|
<zttdraggable :list="columnList" @end="onDragEnd">
|
<transition-group>
|
<el-checkbox
|
v-for="(item, i) in columnList"
|
:label="item.prop"
|
:key="i"
|
class="ztt-drag-block-checkbox"
|
>
|
<span style="font-size:14px;">{{ item.label }}</span>
|
<i
|
style="margin-left:5px;"
|
class="icon aufontAll h-icon-all-drag"
|
></i>
|
</el-checkbox>
|
</transition-group>
|
</zttdraggable>
|
</el-checkbox-group>
|
</span>
|
</el-dialog>
|
|
<!-- 导出modal jipf -->
|
<el-dialog
|
title="导出"
|
:visible.sync="exportDialogVisible"
|
width="30%"
|
center
|
>
|
<span>
|
<el-checkbox
|
:indeterminate="isIndeterminate_export"
|
v-model="checkAll_export"
|
@change="handleCheckAllChange_export"
|
>
|
全选
|
</el-checkbox>
|
<div style="margin: 15px 0;"></div>
|
<el-checkbox-group
|
v-model="checkedExportColumnLabels"
|
@change="handleCheckedColumnsChange_export"
|
>
|
<el-checkbox
|
v-for="(item, i) in eColumnLabels"
|
:label="item"
|
:key="i"
|
>
|
{{ item }}
|
</el-checkbox>
|
</el-checkbox-group>
|
</span>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="exportDialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="startExport()">确认</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import qs from 'qs' // jipf
|
import { getStore } from '@/util/store.js'
|
import adaptive from '@/util/adaptive'
|
import zttdraggable from 'vuedraggable'
|
|
export default {
|
name: 'TTable',
|
components: { zttdraggable },
|
props: {
|
// 表格型号：mini,medium,small
|
tableSize: { type: String, default: 'small' },
|
// 数据请求方法
|
ajaxFun: { type: Function },
|
// 请求参数数组
|
paramArr: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
// 请求参数对象
|
paramObj: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
// table所需数据
|
table: {
|
type: Object,
|
default: () => {
|
return {}
|
},
|
required: true
|
},
|
prelang: {
|
type: String
|
},
|
// 是否固定高度
|
height: {
|
type: Boolean,
|
default: true
|
},
|
// 是否需要固定表头
|
fixHeight: {
|
type: String || Number,
|
default: ''
|
},
|
// 是否需要显示切换页条数
|
size: {
|
type: Boolean,
|
default: false
|
},
|
// 是否显示分页
|
isShowPagination: {
|
type: Boolean,
|
default: true
|
},
|
|
options: {
|
type: Object,
|
default: {
|
height: 300, // 默认高度-为了表头固定
|
stripe: false, // 是否为斑马纹 table
|
highlightCurrentRow: false, // 是否要高亮当前行
|
border: false, // 是否有纵向边框
|
lazy: false, // 是否需要懒加载
|
fit: true, // 列的宽度是否自撑开
|
multiSelect: true, // 选择
|
seqNo: true, // 序号
|
seqNoFix: false,
|
isRefresh: false, // 是否显示刷新按钮
|
isShowHide: false, // 是否显示显影按钮
|
isSearch: false, // 高级查询按钮
|
isCopy: false,
|
showSummary: false,
|
IsCurrRow: false,
|
defaultOrderBy: {}, // 默认排序规则
|
tableCellMerge: false,
|
cancelRunCreated: false, // 是否执行created()内容
|
isRowEdit: false // 数据行是否可编辑
|
}
|
},
|
// table自适应高度底部高度
|
bottomOffset: {
|
type: Number,
|
default: 65
|
},
|
fixedHeight: {
|
type: Number,
|
default: 0
|
},
|
searchList: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
mergeCols: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
}
|
},
|
data() {
|
return {
|
dataListLoading: false,
|
tableKey: 0,
|
// jipf 导出所用变量
|
exportDialogVisible: false, // modal 显隐控制
|
isIndeterminate_export: true, // 控制导出是否全选
|
checkAll_export: true, // 导出列全选
|
checkedExportColumnLabels: [], // 勾选的导出变量
|
eColumnLabels: [], // 显示的导出变量
|
//
|
otherHeight: 0,
|
rowData: '',
|
colSelect: [], // 选择的列
|
// 是否展示显隐
|
colSelectDialogVisible: false,
|
fileList: [], // 上传文件列表
|
// 上传头信息
|
headers: {
|
Authorization: 'Bearer ' + getStore({ name: 'access_token' })
|
},
|
multipleSelection: [], // 多行选中
|
isCleanInfo: false, // 是否展示清除
|
queryParam: {}, // 快速查询对象
|
orderBy: null, // 排序规则
|
dateTimeFilters: {}, // 时间过滤字段
|
multiSearchFilter: {}, // 高级搜索字段
|
tableData: [], // 表格数据
|
pagination: {
|
currentPage:
|
this.table.currentPage == null ? 1 : this.table.currentPage,
|
pageSize: this.table.pageSize == null ? 20 : this.table.pageSize,
|
total: this.table.total == null ? 0 : this.table.total
|
}, // 分页信息
|
inMemoryColWidth: {}, // 记忆中列宽，默认列宽
|
currPath: null, // 获取当前窗口路由路径
|
mergeRowColSplitObj: {}
|
}
|
},
|
computed: {
|
// 需要展示的列 === prop：列数据对应的属性，label：列名，align：对齐方式，width：列宽
|
columnList() {
|
const orderColumns = JSON.parse(
|
localStorage.getItem(this.currPath + '_custom_column') || '[]'
|
)
|
const columns = this.table.column.filter((item) => {
|
return !item.noShowColumn
|
})
|
const colList = []
|
for (let i = 0; i < orderColumns.length; i++) {
|
const exist = columns.find((item) => item.prop === orderColumns[i].prop)
|
if (exist === undefined) {
|
} else {
|
exist.isTrue = orderColumns[i].isTrue
|
colList.push(exist)
|
}
|
}
|
for (let j = 0; j < columns.length; j++) {
|
const exist = colList.find((item) => item.prop === columns[j].prop)
|
if (exist === undefined) {
|
colList.push(columns[j])
|
}
|
}
|
return colList
|
},
|
getToolBarBtn() {
|
return this.table.toolbar ? this.table.toolbar.slice(0, 8) : []
|
}
|
},
|
mounted() {
|
const toolBarHeight = this.isShow('toolbar') ? 60 : 0
|
const pageHeight = 60
|
this.$nextTick(() => {
|
this.otherHeight = toolBarHeight + pageHeight + 30
|
})
|
|
this.handleCheckedColAllExport(true)
|
// 获取ztt-table在父元素中的ref
|
const defaultSlots = this.$parent.$slots.default
|
// 有bug，参照工作台产出记录页面列表
|
if (defaultSlots != undefined) {
|
let parentRef
|
for (let i = 0; i < defaultSlots.length; i++) {
|
if (
|
defaultSlots[i].child != undefined &&
|
defaultSlots[i].child.$refs.customTable != undefined
|
) {
|
parentRef = defaultSlots[i].data.ref
|
break
|
}
|
}
|
// 获取当前窗口路由路径，并与父ref拼接
|
this.currPath = this.$route.path + '_' + parentRef
|
// 初始化记忆中列宽
|
this.initColWidth()
|
}
|
},
|
watch: {
|
queryParam: {
|
handler(newValue, oldValue) {
|
if (JSON.stringify(newValue) === '{}') {
|
this.isCleanInfo = false
|
} else {
|
var bl = 0
|
for (var i in newValue) {
|
if (
|
newValue[i] == '' ||
|
newValue[i] == null ||
|
newValue == undefined
|
) {
|
++bl
|
}
|
}
|
if (bl == Object.keys(newValue).length) {
|
this.isCleanInfo = false
|
} else {
|
this.isCleanInfo = true
|
}
|
}
|
},
|
deep: true
|
},
|
table(val) {
|
this.doLayout()
|
}
|
},
|
directives: {
|
adaptive
|
},
|
created() {
|
if (!this.options.cancelRunCreated) {
|
this.getDataList()
|
}
|
},
|
updated() {
|
this.$nextTick(() => {
|
this.$refs.customTable.doLayout()
|
})
|
},
|
methods: {
|
fieldInputEnter(prop, row) {
|
console.log('sadasdasdsa')
|
this.$emit('inputEnterEvent', { prop: prop, row: row })
|
},
|
onDragEnd() {
|
this.$forceUpdate()
|
const currPathColumnOrder = this.currPath + '_custom_column'
|
localStorage.setItem(currPathColumnOrder, JSON.stringify(this.columnList))
|
},
|
initColWidth() {
|
this.inMemoryColWidth = JSON.parse(
|
localStorage.getItem(this.currPath) || '{}'
|
)
|
},
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
if (this.options.tableCellMerge) {
|
let result = ''
|
this.$emit(
|
'objectSpanMethod',
|
row,
|
column,
|
rowIndex,
|
columnIndex,
|
(val) => {
|
if (val) {
|
result = val
|
}
|
},
|
this.mergeRowColSplitObj
|
)
|
if (result) {
|
return result
|
}
|
}
|
},
|
getDataList() {
|
this.dataListLoading = true
|
var criteria = {}
|
criteria.dateTimeFilters = this.dateTimeFilters
|
criteria.multiSearchFilter = this.multiSearchFilter
|
criteria.orderBy =
|
this.orderBy == null ? this.options.defaultOrderBy : this.orderBy
|
var arr = new Array()
|
arr.push(
|
Object.assign(
|
{
|
current: this.pagination.currentPage,
|
size: this.pagination.pageSize,
|
criteria: JSON.stringify(criteria)
|
},
|
this.queryParam,
|
this.paramObj
|
)
|
)
|
if (this.paramArr != null && this.paramArr.length > 0) {
|
for (var i = 0; i < this.paramArr.length; i++) {
|
arr.push(this.paramArr[i])
|
}
|
}
|
|
return this.doCallback(this.ajaxFun, arr)
|
},
|
doCallback(fn, args) {
|
return fn
|
.apply(this, args)
|
.then((response) => {
|
var _this = this
|
_this.tableData = response.data.data.records
|
_this.pagination.total = response.data.data.total
|
// 置空选中
|
this.$refs.customTable.setCurrentRow()
|
// 增加行是否可编辑
|
_this.tableData.forEach((item) => {
|
_this.$set(item, 'isRowEdit', this.options.isRowEdit)
|
if (_this.options.showCol) {
|
_this.$set(item, _this.options.showCol, '')
|
}
|
})
|
if (_this.options.tableCellMerge) {
|
_this.mergeRowColSplitObj = {}
|
let mergeCol
|
for (let i = 0; i < _this.mergeCols.length; i++) {
|
mergeCol = _this.mergeCols[i]
|
_this.tableData.forEach((ele, index) => {
|
if (_this.mergeRowColSplitObj[mergeCol]) {
|
const rowColSplitNodes =
|
_this.mergeRowColSplitObj[mergeCol].rowColSplitNodes
|
const lastRowColSplitNode =
|
rowColSplitNodes[rowColSplitNodes.length - 1]
|
if (lastRowColSplitNode.key == ele[mergeCol]) {
|
lastRowColSplitNode.num = lastRowColSplitNode.num + 1
|
} else {
|
rowColSplitNodes.push({
|
key: ele[mergeCol],
|
node: index,
|
num: 1
|
})
|
}
|
} else {
|
_this.$set(_this.mergeRowColSplitObj, mergeCol, {
|
rowColSplitNodes: [
|
{ key: ele[mergeCol], node: index, num: 1 }
|
]
|
})
|
}
|
})
|
}
|
}
|
|
_this.dataListLoading = false
|
})
|
.catch((error) => {
|
this.dataListLoading = false
|
})
|
},
|
// jipf 导出方法
|
exportPage() {
|
// modal开关
|
this.exportDialogVisible = true
|
},
|
handleCheckedColAllExport(val) {
|
// this.colChecked = [];
|
for (var i = 0; i < this.columnList.length; i++) {
|
if (val) {
|
// this.colChecked[i] = this.tableColumns[i].prop;
|
this.eColumnLabels[i] = this.columnList[i].prop
|
}
|
// this.columnList[i].isTrue = val;
|
}
|
if (val) {
|
this.checkedExportColumnLabels = this.eColumnLabels
|
}
|
},
|
handleCheckAllChange_export(val) {
|
this.checkedExportColumnLabels = val ? this.eColumnLabels : []
|
this.isIndeterminate_export = false
|
},
|
handleCheckedColumnsChange_export(value) {
|
this.checkedExportColumnLabels = value
|
const checkedCount = value.length
|
this.checkAll_export = checkedCount === this.columnLabels.length
|
this.isIndeterminate_export =
|
checkedCount > 0 && checkedCount < this.eColumnLabels.length
|
},
|
|
startExport() {
|
// 实际导出方法
|
this.exportDialogVisible = false
|
var param = this.queryParam
|
param.fieldNames = this.checkedExportColumnLabels
|
var param2 = qs.stringify(param, {
|
allowDots: true,
|
arrayFormat: 'repeat'
|
})
|
this.table.exportFun(param2).then((res) => {
|
const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
|
const disposition = res.headers['content-disposition']
|
const temp = disposition.substring(
|
disposition.lastIndexOf('filename=') + 10,
|
disposition.lastIndexOf('"')
|
)
|
const iconv = require('iconv-lite')
|
iconv.skipDecodeWarning = true // 忽略警告
|
const filename = iconv.decode(temp, 'utf-8')
|
// 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
|
const elink = document.createElement('a')
|
elink.download = filename
|
elink.style.display = 'none'
|
elink.href = URL.createObjectURL(blob)
|
document.body.appendChild(elink)
|
elink.click()
|
URL.revokeObjectURL(elink.href) // 释放URL 对象
|
document.body.removeChild(elink)
|
})
|
},
|
|
//
|
// 是否显示表格操作按钮
|
checkIsShow(scope, item) {
|
let isNoShow = false
|
if (item.noshow) {
|
item.noshow.map((rs) => {
|
rs.isShow =
|
typeof rs.val === 'string'
|
? rs.val === 'isHadVal'
|
? scope.row[rs.key]
|
? 'true'
|
: 'false'
|
: 'true'
|
: rs.val.includes(scope.row[rs.key])
|
? 'false'
|
: 'true'
|
})
|
isNoShow = item.noshow.every((key) => {
|
return key.isShow === 'true'
|
})
|
} else {
|
isNoShow = true
|
}
|
return (
|
(!item.show || item.show.val.includes(scope.row[item.show.key])) &&
|
isNoShow
|
)
|
},
|
// 在第一页刷新列表数据
|
handlesFirstPage() {
|
this.pagination.currentPage = 1
|
this.getDataList()
|
},
|
// 当前页码
|
handlesCurrentChange(val) {
|
this.pagination.currentPage = val
|
this.getDataList()
|
},
|
// 每页数
|
sizeChangeHandle(val) {
|
this.pagination.pageSize = val
|
this.pagination.currentPage = 1
|
this.getDataList()
|
},
|
handleSelectionChange(val) {
|
this.multipleSelection = val
|
this.$emit('handleSelectionChange', val)
|
},
|
tableHeaderStyle(row, column, rowIndex, columnIndex) {
|
return `background:#fff;color:#666`
|
},
|
// 表格头部按钮
|
toolBarFun(item) {
|
item.fun()
|
},
|
isShow(name) {
|
return Object.keys(this.$slots).includes(name)
|
},
|
// 初始化显示列-显隐
|
handleCheckedCol() {
|
this.colSelect = []
|
for (var i = 0; i < this.columnList.length; i++) {
|
if (this.columnList[i].isTrue) {
|
this.colSelect.push(this.columnList[i].prop)
|
}
|
}
|
},
|
// 显示列全选-显隐
|
handleCheckedColAll(val) {
|
this.colSelect = []
|
for (var i = 0; i < this.columnList.length; i++) {
|
if (val) {
|
this.colSelect[i] = this.columnList[i].prop
|
// this.eColumnLabels[i] = this.columnList[i].prop;
|
}
|
this.columnList[i].isTrue = val
|
}
|
this.tableKey = Math.random()
|
const currPathColumnOrder = this.currPath + '_custom_column'
|
localStorage.setItem(currPathColumnOrder, JSON.stringify(this.columnList))
|
},
|
// 选中显示列变化-显隐
|
handleCheckedColChange(value) {
|
for (var i = 0; i < this.columnList.length; i++) {
|
this.columnList[i].isTrue = false
|
for (var j = 0; j < this.colSelect.length; j++) {
|
if (this.columnList[i].prop === this.colSelect[j]) {
|
this.columnList[i].isTrue = true
|
// this.$set(this.columnList[i],'isTrue',true);
|
}
|
}
|
}
|
this.tableKey = Math.random()
|
// this.$forceUpdate();
|
const currPathColumnOrder = this.currPath + '_custom_column'
|
localStorage.setItem(currPathColumnOrder, JSON.stringify(this.columnList))
|
},
|
refreshData() {
|
// this.$refs.customTable.setCurrentRow()
|
this.getDataList()
|
},
|
|
chooseCol() {
|
this.colSelectDialogVisible = true
|
this.handleCheckedCol()
|
},
|
// 查询条件
|
getQueryParam() {
|
var criteria = {}
|
criteria.dateTimeFilters = this.dateTimeFilters
|
criteria.multiSearchFilter = this.multiSearchFilter
|
criteria.orderBy =
|
this.orderBy == null ? this.options.defaultOrderBy : this.orderBy
|
return Object.assign(
|
{
|
current: this.pagination.currentPage,
|
size: this.pagination.pageSize,
|
criteria: JSON.stringify(criteria)
|
},
|
this.queryParam,
|
this.paramObj
|
)
|
},
|
getTableData() {
|
return this.tableData
|
},
|
doLayout() {
|
this.$nextTick(() => {
|
this.$refs.customTable && this.$refs.customTable.doLayout()
|
})
|
}
|
}
|
}
|
</script>
|
<style>
|
.customTable * {
|
-webkit-user-select: text;
|
-moz-user-select: text;
|
-ms-user-select: text;
|
user-select: text;
|
}
|
|
.customTable th {
|
text-align: center;
|
}
|
|
.customTable th div {
|
display: block;
|
}
|
|
.customTable tr td:first-child {
|
text-align: center;
|
}
|
|
.customTable tr td:nth-child(2) {
|
text-align: center;
|
}
|
|
.el-table th div.th {
|
display: inline-flex;
|
flex-direction: column;
|
vertical-align: bottom;
|
line-height: 28px;
|
padding: 0;
|
width: calc(100% - 24px);
|
}
|
|
.el-table th div.th > label {
|
padding-left: 3px;
|
}
|
|
.el-table th div.th .el-input,
|
.el-table th div.th .el-select {
|
line-height: inherit;
|
padding: 0;
|
}
|
|
.el-table .caret-wrapper {
|
margin-bottom: -3px;
|
}
|
|
.fr {
|
float: right;
|
}
|
|
.customTable td {
|
padding: 1px 0 0 0;
|
}
|
|
.customTable th {
|
padding: 5px 0;
|
}
|
|
.customTable .el-table__header .cell {
|
padding: 0 !important;
|
text-overflow: unset !important;
|
white-space: nowrap !important;
|
}
|
|
.customTable .el-table__body .cell {
|
line-height: 30px !important;
|
}
|
|
.customButton {
|
padding: 0px;
|
}
|
|
.el-table tbody tr:hover > td {
|
background-color: #d6eaf8 !important;
|
}
|
|
/*隐藏搜索框、并实现动画效果*/
|
.ext-table-display thead tr:nth-child(2) {
|
display: none;
|
}
|
|
.ext-table .el-table__fixed-right .el-table__fixed-body-wrapper {
|
top: 42px !important;
|
}
|
|
.ext-table-class .el-table__fixed-right .el-table__fixed-body-wrapper {
|
top: 82px !important;
|
}
|
|
.btn-group .el-button,
|
.btn-custom .el-button {
|
border-radius: 0;
|
padding: 9px 30px;
|
}
|
|
.btn-group .el-dropdown .el-button {
|
border-radius: 0;
|
padding: 9px 20px;
|
}
|
|
.custom-table-btn.el-button--default {
|
color: #333;
|
}
|
|
.customTable .el-table__fixed-right .el-table__fixed-body-wrapper {
|
top: 82px;
|
}
|
|
.fab {
|
display: inline-block;
|
font: normal normal normal 14px/1 iconfont;
|
color: #566573;
|
font-size: 14px;
|
text-rendering: auto;
|
-webkit-font-smoothing: antialiased;
|
}
|
|
.icon-btn {
|
border: 0px solid #dcdfe6;
|
}
|
|
.customButton.is-disabled {
|
color: #aacfff;
|
}
|
|
/*自定义disabled状态下checkbox的样式*/
|
.table-single-checkbox
|
.el-checkbox__input.is-disabled.is-checked
|
.el-checkbox__inner {
|
background-color: #006eff;
|
border-color: #006eff;
|
}
|
.table-single-checkbox .el-checkbox__input.is-disabled .el-checkbox__inner {
|
background-color: #ffffff;
|
cursor: pointer;
|
}
|
.table-single-checkbox .el-checkbox__inner::after {
|
border: 1px solid #fff !important;
|
border-left: 0 !important;
|
border-top: 0 !important;
|
cursor: pointer !important;
|
}
|
|
/*默认已选中行，checkbox样式，多选*/
|
.is-selected-row .el-table-column--selection .el-checkbox .el-checkbox__inner {
|
background-color: #aacfff;
|
border-color: #aacfff;
|
}
|
|
.el-table .warning-row {
|
background: #ffc;
|
}
|
.el-table .success-row {
|
background: #d1f5d1;
|
}
|
.el-table .danger-row {
|
background: #ffdbd9;
|
}
|
.el-table .danger-light-row {
|
background: rgba(255, 228, 225, 0.5);
|
}
|
|
.customTable .cell.el-tooltip .el-link {
|
display: inline;
|
}
|
|
.ztt-drag-block-checkbox {
|
padding: 3px;
|
}
|
.ztt-drag-block-checkbox .el-checkbox__label {
|
line-height: 16px;
|
}
|
.ztt-drag-block-checkbox:hover {
|
background: #f0f7ff;
|
cursor: move;
|
}
|
|
.ztt-drag-block-checkbox:hover .icon {
|
display: block;
|
}
|
|
.ztt-drag-block-checkbox .icon {
|
color: rgba(0, 0, 0, 0.45);
|
font-size: 12px;
|
line-height: 16px;
|
float: right;
|
display: none;
|
}
|
|
.aufontAll {
|
font-family: aufontAll !important;
|
font-size: 16px;
|
font-style: normal;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
}
|
|
.h-icon-all-drag {
|
background: url('/img/tz.png') center center no-repeat;
|
background-size: cover;
|
font-size: 14px;
|
}
|
.h-icon-all-drag:before {
|
content: '\E63E';
|
font-size: 14px;
|
visibility: hidden;
|
}
|
</style>
|
