<template>
|
<div class="avue-crud" style="width: 100%">
|
<div class="grid-header" v-if="isShow('toolbar')" style="margin: 0px 20px">
|
<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"
|
>{{ item.text }}
|
</el-button>
|
</el-form-item>
|
<el-form-item class="btn-group" v-if="getToolbarDown.length > 0">
|
<el-dropdown>
|
<el-button type="primary">
|
更多<i class="el-icon-arrow-down el-icon--right"></i>
|
</el-button>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item
|
v-for="(item, index) in getToolbarDown"
|
:key="index"
|
@click.native="toolBarFun(item)"
|
:icon="item.icon"
|
:disabled="item.disabled"
|
divided
|
>{{ item.text }}</el-dropdown-item
|
>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</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" v-if="!isEdit">
|
<el-tooltip content="清空" placement="top" v-if="isCleanInfo">
|
<el-button
|
circle
|
icon="fab fa-times"
|
@click="cleanQueryParam()"
|
class="icon-btn"
|
style="color: red"
|
></el-button>
|
</el-tooltip>
|
<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="options.isSearch"
|
>
|
<el-button
|
circle
|
icon="fab fa-search"
|
@click="searchData()"
|
class="icon-btn"
|
></el-button>
|
</el-tooltip>
|
<el-tooltip content="复制" placement="top" v-if="options.isCopy">
|
<el-button
|
circle
|
icon="fab fa-copy"
|
@click="copyData()"
|
class="icon-btn"
|
></el-button>
|
</el-tooltip>
|
<el-tooltip content="搜索栏" placement="top">
|
<el-button
|
v-if="!isGeneralSearch"
|
circle
|
icon="fab fa-toggle-off"
|
@click="generalSearch()"
|
class="icon-btn"
|
></el-button>
|
<el-button
|
v-if="isGeneralSearch"
|
circle
|
icon="fab fa-toggle-on"
|
@click="generalSearch()"
|
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-tooltip content="导入" placement="top" v-if="uploadInfo.isShow">
|
<el-button
|
circle
|
icon="fab fa-upload"
|
@click="importPage()"
|
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="common-table-div" style="margin: 20px 20px 0px">
|
<slot name="tableInfo"></slot>
|
<el-table
|
ref="lmesTable"
|
: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"
|
:height="
|
height
|
? fixHeight
|
? fixHeight
|
: '100px'
|
: $store.getters.tableHeight - otherHeight
|
"
|
v-bind="$attrs"
|
v-on="$listeners"
|
:highlight-current-row="true"
|
:row-key="
|
(row) => {
|
return row.id
|
}
|
"
|
@row-dblclick="dbClickRow"
|
@row-contextmenu="contextMenu"
|
@header-click="headClick"
|
@header-contextmenu="headContextMenu"
|
@selection-change="handleSelectionChange"
|
@select="shoudonggouxuan"
|
@current-change="handleCurrentChange"
|
@row-click="rowClick"
|
@sort-change="orderByProp"
|
@header-dragend="dragend"
|
:row-class-name="tableRowClassName"
|
:span-method="objectSpanMethod"
|
:header-cell-style="tableHeaderStyle"
|
v-adaptive="{ bottomOffset: bottomOffset, fixedHeight: fixedHeight }"
|
:class="[
|
'commonTable',
|
isGeneralSearch && !isEdit
|
? 'ext-table-class'
|
: 'ext-table ext-table-display'
|
]"
|
v-loading="dataListLoading"
|
element-loading-text="加载中..."
|
element-loading-spinner="el-icon-loading"
|
>
|
<!--多选择框-->
|
<el-table-column
|
align="center"
|
type="selection"
|
v-if="options.multiSelect && !isEdit"
|
style="width: 55px;"
|
:selectable="selectHandle"
|
>
|
</el-table-column>
|
<!--单选框-->
|
<el-table-column
|
align="center"
|
v-if="!options.multiSelect && !isEdit"
|
width="55"
|
label="单选"
|
>
|
<template slot-scope="scope">
|
<el-checkbox
|
class="table-single-checkbox"
|
v-model="scope.row.commonChecked"
|
disabled
|
></el-checkbox>
|
</template>
|
</el-table-column>
|
<!--序号-->
|
<el-table-column
|
v-if="options.seqNo"
|
type="index"
|
label="序号"
|
:fixed="options.seqNoFix"
|
>
|
<!-- <el-table-column type="index" :index="indexMethod" label=" ">
|
</el-table-column> -->
|
</el-table-column>
|
<!-- 默认渲染列 -->
|
<el-table-column
|
v-for="(item, index) in columnList"
|
:key="index"
|
:type="item.type"
|
:fixed="item.fixed || false"
|
:label="item.label"
|
:align="item.align || 'center'"
|
:min-width="item['min-width'] || item.minWidth || item.width"
|
:show-overflow-tooltip="!item.noShowTip"
|
:sortable="!isEdit ? (item.sort ? 'custom' : item.sort) : false"
|
v-bind="$attrs"
|
v-on="$listeners"
|
v-show="item.isTrue"
|
:class-name="
|
(orderBy == null && item.prop == options.defaultOrderBy.column) ||
|
(orderBy != null &&
|
item.prop == options.defaultOrderBy.column &&
|
orderBy.column == options.defaultOrderBy.column &&
|
orderBy.direction == options.defaultOrderBy.direction)
|
? options.defaultOrderBy.direction == 'desc'
|
? 'descending'
|
: 'ascending'
|
: ''
|
"
|
:label-class-name="
|
(orderBy == null && item.prop == options.defaultOrderBy.column) ||
|
(orderBy != null && item.prop == orderBy.column)
|
? 'zttTable-headerLabel'
|
: ''
|
"
|
>
|
<el-table-column
|
:show-overflow-tooltip="!item.noShowTip"
|
:width="inMemoryColWidth[item.prop] || item.width"
|
:prop="item.prop"
|
>
|
<template slot="header">
|
<template v-if="item.isSearch">
|
<div class="th" @click.stop>
|
<template
|
v-if="
|
['text', 'textarea', 'number', 'email'].indexOf(
|
item.searchInfoType
|
) !== -1
|
"
|
>
|
<el-input
|
:disabled="item.disabled"
|
:type="item.searchInfoType"
|
v-model="queryParam[item.prop]"
|
:style="item.style"
|
@keyup.enter.native="handlesFirstPage"
|
clearable
|
@clear="handlesFirstPage"
|
size="mini"
|
></el-input>
|
</template>
|
<template v-if="item.searchInfoType === 'select'">
|
<el-select
|
:disabled="item.disabled"
|
v-model="queryParam[item.prop]"
|
placeholder=""
|
@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>
|
<template
|
v-if="
|
['date', 'datetimerange', 'datetime'].indexOf(
|
item.searchInfoType
|
) !== -1
|
"
|
>
|
<el-date-picker
|
:disabled="item.disabled"
|
clearable
|
v-model="queryParam[item.prop]"
|
type="datetimerange"
|
range-separator="-"
|
start-placeholder="开始"
|
end-placeholder="结束"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
@change="dateChange(item, $event)"
|
size="mini"
|
>
|
</el-date-picker>
|
</template>
|
</div>
|
</template>
|
<template v-else>
|
<!--<div></div>-->
|
</template>
|
</template>
|
<template slot-scope="scope">
|
<template v-if="item.isEdit">
|
<el-input
|
v-model="scope.row[item.prop]"
|
size="mini"
|
style="width:100%"
|
/>
|
</template>
|
<template v-else>
|
<template v-if="!item.render">
|
<template v-if="item.formatter">
|
<div v-if="item.isTag" style="margin: 2px;text-align: center;">
|
<el-tag :type="scope.row[item.prop]==0?'success':'info'">{{item.formatter(scope.row, item, scope.row[item.prop])}}</el-tag>
|
</div>
|
<span
|
v-else
|
v-html="
|
item.formatter(scope.row, item, scope.row[item.prop])
|
"
|
></span>
|
</template>
|
<template v-if="!item.formatter">
|
<span>{{ scope.row[item.prop] }}</span>
|
</template>
|
</template>
|
<template v-if="item.render">
|
<!--<ex-slot :render="item.render" :row="scope.row" :index="scope.$index" :column="item"/>-->
|
<ex-slot
|
:render="customizeRender(item.render, item.prop)"
|
:row="scope.row"
|
:index="scope.$index"
|
:column="item"
|
/>
|
</template>
|
</template>
|
</template>
|
</el-table-column>
|
</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)"
|
v-show="item.showFun ? item.showFun(scope.row) : true"
|
class="commonButton"
|
>{{ 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>
|
<el-dialog title="导入" :visible.sync="importDialogVisible" width="22%">
|
<span>
|
<div style="width: 100%;">
|
<div style="width: 100%;">
|
<el-upload
|
style="margin-left:8px;display: inline;width: 100%;"
|
class="upload-demo"
|
drag
|
:headers="headers"
|
:action="uploadInfo.url"
|
:beforeUpload="beforeAvatarUpload"
|
:limit="1"
|
:show-file-list="false"
|
:file-list="fileList"
|
:data="uploadInfo.uploadData"
|
:on-success="fileSuccessUploadScan"
|
:on-error="handleError"
|
accept=".xlsx,.xls,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
|
:auto-upload="true"
|
ref="uploadScan"
|
multiple
|
>
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text"><em>点击导入数据</em></div>
|
<div class="el-upload__tip" slot="tip">
|
<span v-if="uploadInfo.tipText" v-text="uploadInfo.tipText"></span>
|
<span v-else>只能上传xlsx/xls文件，且不超过30M。</span>
|
<el-button
|
type="text"
|
style="font-size:15px;text-decoration: underline;"
|
@click="downDataTemplate"
|
>下载模板</el-button
|
>
|
</div>
|
</el-upload>
|
</div>
|
<div></div>
|
</div>
|
</span>
|
<span slot="footer" class="dialog-footer"> </span>
|
</el-dialog>
|
<advancedSearchDialog
|
v-if="advancedSearchVisible"
|
ref="advancedSearch"
|
style="width: 395px;top:15%;left: 40%;border-radius: 4px;"
|
@search-change="searchChange"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import qs from 'qs' // jipf
|
import { getStore } from '@/util/store.js'
|
import adaptive from '@/util/adaptive'
|
import advancedSearchDialog from './advanced-search'
|
import { uploadTemplate } from '@/api/basic/template'
|
import zttdraggable from 'vuedraggable'
|
// 自定义内容的组件
|
var exSlot = {
|
functional: true,
|
props: {
|
row: Object,
|
render: Function,
|
index: Number,
|
column: {
|
type: Object,
|
default: null
|
}
|
},
|
render: (h, data) => {
|
const params = {
|
row: data.props.row,
|
index: data.props.index
|
}
|
if (data.props.column) params.column = data.props.column
|
return data.props.render(h, params)
|
}
|
}
|
export default {
|
name: 'TTable',
|
components: { exSlot, advancedSearchDialog, 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
|
},
|
uploadInfo: {
|
// excel上传
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
// 是否固定高度
|
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()内容
|
isGenerateId: false,
|
isGenerateField: 'id'
|
}
|
},
|
// table自适应高度底部高度
|
bottomOffset: {
|
type: Number,
|
default: 65
|
},
|
fixedHeight: {
|
type: Number,
|
default: 0
|
},
|
// 默认选中字段的值数组
|
selColValArr: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
// 默认选中字段
|
selCol: {
|
type: String
|
},
|
// 是否开启翻页后仍选中功能，默认不开启
|
isTurnPageSelected: {
|
type: Boolean,
|
default: false
|
},
|
// 是否自定义导入页面
|
customUpload: {
|
type: Boolean,
|
default: false
|
},
|
// 是否处于编辑状态
|
isEdit: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
dataListLoading: false,
|
tableKey: 0,
|
// jipf 导出所用变量
|
exportDialogVisible: false, // modal 显隐控制
|
importDialogVisible: false, // 导入弹出框显隐控制
|
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, // 是否展示清除
|
advancedSearchVisible: false, // 是否显示高级搜索框
|
isGeneralSearch: true, // 是否显示快速搜索框
|
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 // 获取当前窗口路由路径
|
}
|
},
|
computed: {
|
// 需要展示的列 === prop：列数据对应的属性，label：列名，align：对齐方式，width：列宽
|
columnList() {
|
const orderColumns = JSON.parse(
|
localStorage.getItem(this.currPath + '_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, 5) : []
|
},
|
getToolbarDown() {
|
return this.getToolBarBtn.length === 5
|
? this.table.toolbar.slice(5, this.table.toolbar.length)
|
: []
|
},
|
isRefreshBtn() {
|
return this.table.isRefresh
|
},
|
isCopyBtn() {
|
return this.table.isCopy
|
},
|
isSearchBtn() {
|
return this.table.isSearch
|
},
|
isOrderBtn() {
|
return this.table.isOrder
|
}
|
},
|
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.lmesTable != 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()
|
},
|
tableData: {
|
handler(newValue, oldValue) {
|
// 只有开启了翻页选中，并且是多选时，才去替换缓存multipleSelection中的对象
|
// 首先排除掉tableData列表页面不参与勾选的记录，也就是selColValArr中的记录，根据selCol字段值去排除，若selCol字段无值，则根据id去排除
|
/*
|
if (
|
this.isTurnPageSelected &&
|
this.options.multiSelect &&
|
this.multipleSelection.length > 0
|
) {
|
var compareField
|
if (this.selCol) {
|
compareField = this.selCol
|
} else {
|
compareField = 'id'
|
}
|
var newTableData = []
|
if (newValue.length > 0) {
|
// 排除掉tableData列表页面不参与勾选的记录
|
for (var i = 0; i < newValue.length; i++) {
|
if (this.selColValArr.indexOf(newValue[i][compareField]) > 0) {
|
} else {
|
newTableData.push(newValue[i])
|
}
|
}
|
if (newTableData.length > 0) {
|
// 替换缓存multipleSelection中的对象
|
for (var k = 0; k < newTableData.length; k++) {
|
this.multipleSelection = this.multipleSelection.map((item) =>
|
item[compareField] === newTableData[k][compareField]
|
? newTableData[k]
|
: item
|
)
|
}
|
}
|
}
|
} */
|
},
|
deep: true
|
}
|
},
|
directives: {
|
adaptive
|
},
|
created() {
|
// 初始化queryParam
|
this.initSearchCondition()
|
if (!this.options.cancelRunCreated) {
|
this.getDataList()
|
}
|
},
|
updated() {
|
this.$nextTick(() => {
|
this.$refs.lmesTable.doLayout()
|
})
|
},
|
methods: {
|
onDragEnd() {
|
this.$forceUpdate()
|
const currPathColumnOrder = this.currPath + '_column'
|
localStorage.setItem(currPathColumnOrder, JSON.stringify(this.columnList))
|
},
|
initSearchCondition() {
|
var initQueryParam = {}
|
for (var i = 0; i < this.columnList.length; i++) {
|
initQueryParam[this.columnList[i].prop] = this.columnList[i].propVal
|
if (
|
this.columnList[i].searchInfoType === 'date' ||
|
this.columnList[i].searchInfoType === 'datetimerange' ||
|
this.columnList[i].searchInfoType === 'datetime'
|
) {
|
this.dateTimeFilters[this.columnList[i].prop] = this.columnList[
|
i
|
].propVal
|
}
|
}
|
this.queryParam = initQueryParam
|
},
|
initColWidth() {
|
this.inMemoryColWidth = JSON.parse(
|
localStorage.getItem(this.currPath) || '{}'
|
)
|
},
|
dragend(newWidth, oldWidth, column, event) {
|
const colWidthJson = JSON.parse(
|
localStorage.getItem(this.currPath) || '{}'
|
)
|
colWidthJson[column.property] = newWidth
|
localStorage.setItem(this.currPath, JSON.stringify(colWidthJson))
|
},
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
if (this.options.tableCellMerge) {
|
let result = ''
|
this.$emit(
|
'objectSpanMethod',
|
row,
|
column,
|
rowIndex,
|
columnIndex,
|
(val) => {
|
if (val) {
|
result = val
|
}
|
}
|
)
|
if (result) {
|
return result
|
}
|
}
|
},
|
getDataList(selectedId) {
|
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, selectedId)
|
},
|
doCallback(fn, args, selectedId) {
|
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.lmesTable.setCurrentRow()
|
// 增加单选是否选中字段
|
_this.tableData.forEach((item) => {
|
_this.$set(item, 'commonChecked', false)
|
_this.$set(item, 'isEdit', false)
|
})
|
if (this.options.tableCellMerge) {
|
this.$emit('cellMerge', this.tableData)
|
}
|
if (this.options.isGenerateId) {
|
// id自定义
|
_this.tableData.forEach((item) => {
|
_this.$set(item, 'id', item[this.options.isGenerateField])
|
})
|
}
|
_this.dataListLoading = false
|
// 自动选中新增记录
|
if (selectedId) {
|
const selectObj = _this.tableData.find(
|
(item) => item.id === selectedId
|
)
|
if (selectObj) {
|
this.clickTable(selectObj)
|
}
|
}
|
})
|
.catch((error) => {
|
this.dataListLoading = false
|
})
|
},
|
// 自定义内容的组件render
|
customizeRender(renderParam, linkCol) {
|
return (h, scope) => {
|
return h(
|
'el-link',
|
{
|
on: { click: renderParam.fun.bind(this, scope.row) },
|
attrs: { type: 'primary' },
|
style: { lineHeight: '14px' }
|
},
|
renderParam.rowValue
|
? renderParam.rowValue(scope.row[linkCol])
|
: scope.row[linkCol]
|
)
|
}
|
},
|
// jipf 导出方法
|
exportPage() {
|
// modal开关
|
this.exportDialogVisible = true
|
},
|
// 导入
|
importPage() {
|
if (!this.customUpload) {
|
this.importDialogVisible = true
|
} else {
|
// 页面自定义导入
|
this.$emit('customUploadPage')
|
}
|
},
|
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
|
)
|
},
|
indexMethod(index) {
|
return index + 1
|
},
|
// 控制表格字体颜色
|
txtChangeColor(scope) {
|
if (
|
this.table.changeColor &&
|
scope.row[this.table.changeColor.key] === this.table.changeColor.val
|
) {
|
return this.table.changeColor.txtStyle
|
} else {
|
return ''
|
}
|
},
|
// 在第一页刷新列表数据
|
handlesFirstPage() {
|
this.pagination.currentPage = 1
|
this.getDataList()
|
},
|
// 当前页码
|
handlesCurrentChange(val) {
|
this.pagination.currentPage = val
|
this.getDataList()
|
/* var reselectedList = []
|
for (var i = 0; i < this.multipleSelection.length; i++) {
|
reselectedList.push(this.multipleSelection[i])
|
}
|
this.tableData = []
|
|
// this.multipleSelection = reselectedList
|
for (var i = 0; i < reselectedList.length; i++) {
|
this.multipleSelection.push(reselectedList[i])
|
}
|
var _that = this
|
_that.pagination.currentPage = val
|
_that.getDataList()
|
if (_that.isTurnPageSelected && _that.options.multiSelect) {
|
console.log('翻页开始')
|
console.log(_that.multipleSelection)
|
var selectedList = []
|
for (var i = 0; i < _that.multipleSelection.length; i++) {
|
selectedList.push(_that.multipleSelection[i])
|
}
|
console.log(selectedList)
|
|
selectedList.forEach((row) => {
|
console.log('选开始')
|
console.log(row)
|
console.log('选结束')
|
_that.$refs.lmesTable.toggleRowSelection(row, true)
|
})
|
|
console.log('翻页结束')
|
_that.$emit('handleSelectionChange', _that.multipleSelection)
|
} */
|
},
|
// 每页数
|
sizeChangeHandle(val) {
|
this.pagination.pageSize = val
|
this.pagination.currentPage = 1
|
this.getDataList()
|
/*
|
if (this.isTurnPageSelected && this.options.multiSelect) {
|
this.multipleSelection.forEach((row) => {
|
this.$refs.lmesTable.toggleRowSelection(row)
|
})
|
this.$emit('handleSelectionChange', this.multipleSelection)
|
} */
|
},
|
// 行颜色
|
tableRowClassName({ row, rowIndex }) {
|
let result = ''
|
// 根据调用方传过来的数组，默认选中，只有多选支持，添加选中样式
|
if (this.options.multiSelect) {
|
if (this.selColValArr != null && this.selColValArr.length > 0) {
|
const exist = this.selColValArr.find(
|
(item) => item === row[this.selCol]
|
)
|
if (exist !== undefined) {
|
result = 'is-selected-row'
|
}
|
}
|
}
|
// 去调用自定义背景色
|
this.$emit('tableRowClassName', row, (val) => {
|
if (val) {
|
result += ' ' + val
|
}
|
})
|
return result
|
},
|
// 单行选中
|
handleCurrentChange(row) {
|
if (row != null) {
|
this.tableData.forEach((item) => {
|
// 排他,每次选择时把其他选项都清除
|
if (item.id !== row.id) {
|
item.commonChecked = false
|
} else {
|
item.commonChecked = true
|
}
|
})
|
}
|
this.$emit('currentChange', row)
|
},
|
rowClick(row, column) {
|
if (this.isEdit) {
|
return
|
}
|
if (column.label === '单选') {
|
this.$emit('ttRowClick', row)
|
return
|
}
|
// 行点击，选中数据，用于多选，需判断是否有行不能勾选
|
let isAble = true
|
if (this.selColValArr != null && this.selColValArr.length > 0) {
|
const exist = this.selColValArr.find(
|
(item) => item === row[this.selCol]
|
)
|
if (exist !== undefined) {
|
isAble = false
|
}
|
}
|
if (isAble) {
|
this.$refs.lmesTable.toggleRowSelection(row)
|
}
|
this.$emit('ttRowClick', row)
|
},
|
selectHandle(row, index) {
|
// 产出记录禁选，临时处理方法
|
if (this.options.zttDisbaled) {
|
if (row.id == null) {
|
return false
|
}
|
}
|
// 根据调用方传过来的数组，默认选中，只有多选支持，添加禁用
|
let isAble = true
|
if (this.options.multiSelect) {
|
if (this.selColValArr != null && this.selColValArr.length > 0) {
|
const exist = this.selColValArr.find(
|
(item) => item === row[this.selCol]
|
)
|
if (exist !== undefined) {
|
isAble = false
|
}
|
}
|
}
|
return isAble
|
},
|
shoudonggouxuan(selection, row) {
|
/*
|
console.log('手动勾选')
|
if (this.isTurnPageSelected && this.options.multiSelect) {
|
// 去增删缓存multipleSelection中的对象，选中数据在缓存multipleSelection中有则不管，若没有则新增，选中数据与tableData取差集，找出未选中数据，未选中数据在缓存multipleSelection中有则删，若没有则不管
|
var compareField
|
if (this.selCol) {
|
compareField = this.selCol
|
} else {
|
compareField = 'id'
|
}
|
// 选中数据在缓存multipleSelection中有则不管，若没有则新增
|
if (selection.length > 0) {
|
for (var i = 0; i < selection.length; i++) {
|
const exist = this.multipleSelection.find(
|
(item) => item[compareField] === selection[i][compareField]
|
)
|
if (exist === undefined) {
|
this.multipleSelection.push(selection[i])
|
}
|
}
|
}
|
//
|
var newTableData = []
|
if (this.tableData.length > 0) {
|
// 选中数据与tableData取差集
|
for (var i = 0; i < this.tableData.length; i++) {
|
const exist = selection.find(
|
(item) => item[compareField] === this.tableData[i][compareField]
|
)
|
if (exist === undefined) {
|
newTableData.push(this.tableData[i])
|
}
|
}
|
}
|
var newNewTableData = []
|
if (newTableData.length > 0) {
|
// 排除掉newTableData中不参与勾选的记录
|
for (var i = 0; i < newTableData.length; i++) {
|
if (this.selColValArr.indexOf(newTableData[i][compareField]) > 0) {
|
} else {
|
newNewTableData.push(newTableData[i])
|
}
|
}
|
}
|
|
if (newNewTableData.length > 0) {
|
for (var i = 0; i < newNewTableData.length; i++) {
|
const exist = this.multipleSelection.find(
|
(item) => item[compareField] === newNewTableData[i][compareField]
|
)
|
if (exist === undefined) {
|
} else {
|
var eleIndex = this.multipleSelection.indexOf(exist)
|
this.multipleSelection.splice(eleIndex, 1)
|
}
|
}
|
}
|
console.log(this.multipleSelection)
|
this.$emit('handleSelectionChange', this.multipleSelection)
|
} else {
|
this.multipleSelection = selection
|
this.$emit('handleSelectionChange', selection)
|
} */
|
},
|
handleSelectionChange(val) {
|
this.multipleSelection = val
|
this.$emit('handleSelectionChange', val)
|
// 多行选中
|
/* console.log('单选开始')
|
console.log(val)
|
console.log(val.length)
|
console.log('单选结束')
|
|
if (this.isTurnPageSelected && this.options.multiSelect) {
|
// 去增删缓存multipleSelection中的对象，选中数据在缓存multipleSelection中有则不管，若没有则新增，选中数据与tableData取差集，找出未选中数据，未选中数据在缓存multipleSelection中有则删，若没有则不管
|
var compareField
|
if (this.selCol) {
|
compareField = this.selCol
|
} else {
|
compareField = 'id'
|
}
|
// 选中数据在缓存multipleSelection中有则不管，若没有则新增
|
if (val.length > 0) {
|
for (var i = 0; i < val.length; i++) {
|
const exist = this.multipleSelection.find(
|
(item) => item[compareField] === val[i][compareField]
|
)
|
if (exist === undefined) {
|
this.multipleSelection.push(val[i])
|
}
|
}
|
}
|
//
|
var newTableData = []
|
if (this.tableData.length > 0) {
|
// 选中数据与tableData取差集
|
for (var i = 0; i < this.tableData.length; i++) {
|
const exist = val.find(
|
(item) => item[compareField] === this.tableData[i][compareField]
|
)
|
if (exist === undefined) {
|
newTableData.push(this.tableData[i])
|
}
|
}
|
}
|
var newNewTableData = []
|
if (newTableData.length > 0) {
|
// 排除掉newTableData中不参与勾选的记录
|
for (var i = 0; i < newTableData.length; i++) {
|
if (this.selColValArr.indexOf(newTableData[i][compareField]) > 0) {
|
} else {
|
newNewTableData.push(newTableData[i])
|
}
|
}
|
}
|
|
if (newNewTableData.length > 0) {
|
for (var i = 0; i < newNewTableData.length; i++) {
|
const exist = this.multipleSelection.find(
|
(item) => item[compareField] === newNewTableData[i][compareField]
|
)
|
if (exist === undefined) {
|
} else {
|
var eleIndex = this.multipleSelection.indexOf(exist)
|
this.multipleSelection.splice(eleIndex, 1)
|
}
|
}
|
}
|
console.log(this.multipleSelection)
|
this.$emit('handleSelectionChange', this.multipleSelection)
|
} else {
|
this.multipleSelection = val
|
this.$emit('handleSelectionChange', val)
|
} */
|
},
|
dbClickRow(row, column, event) {
|
// 双击行事件
|
const data = {
|
row: row,
|
column: column,
|
event: event
|
}
|
this.$emit('dbClickRow', data)
|
},
|
contextMenu(row, column, event) {
|
// 右键行事件-没去掉页面默认的
|
const data = {
|
row: row,
|
column: column,
|
event: event
|
}
|
this.$emit('contextMenu', data)
|
},
|
headClick(column, event) {
|
// 头部列点击事件
|
const data = {
|
column: column,
|
event: event
|
}
|
this.$emit('headClick', data)
|
},
|
headContextMenu(column, event) {
|
// 头部列右键点击事件
|
const data = {
|
column: column,
|
event: event
|
}
|
this.$emit('headContextMenu', data)
|
},
|
rowChange(currentRow, oldCurrentRow) {
|
// 当前行发生改变时的事件
|
const data = {
|
currentRow: currentRow,
|
oldCurrentRow: oldCurrentRow
|
}
|
this.$emit('rowChange', data)
|
},
|
// 清空查询条件
|
cleanQueryParam() {
|
this.queryParam = {}
|
this.dateTimeFilters = {}
|
this.getDataList()
|
},
|
// 显示高级搜索
|
searchData() {
|
this.advancedSearchVisible = true
|
this.$nextTick(() => {
|
this.$refs.advancedSearch.init(this.columnList)
|
})
|
},
|
// 执行高级搜索结果查询
|
searchChange(filters) {
|
this.multiSearchFilter = filters
|
this.getDataList()
|
},
|
// 执行排序
|
orderByProp(column, prop, order) {
|
var orderBy = {}
|
if (column.order != null && column.order == 'ascending') {
|
orderBy.column = column.column.children[0].property
|
orderBy.direction = 'asc'
|
} else if (column.order != null && column.order == 'descending') {
|
orderBy.column = column.column.children[0].property
|
orderBy.direction = 'desc'
|
} else {
|
orderBy = this.options.defaultOrderBy
|
}
|
this.orderBy = orderBy
|
this.getDataList()
|
},
|
tableHeaderStyle(row, column, rowIndex, columnIndex) {
|
return `background:#fff;color:#666`
|
},
|
// 表格头部按钮
|
toolBarFun(item) {
|
item.fun()
|
},
|
// 时间类型的搜索字段，发生改变时，触发该方法
|
dateChange(item, val) {
|
if (val != null) {
|
this.dateTimeFilters[item.prop] = val
|
} else {
|
delete this.dateTimeFilters[item.prop]
|
}
|
this.handlesFirstPage()
|
},
|
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 + '_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 + '_column'
|
localStorage.setItem(currPathColumnOrder, JSON.stringify(this.columnList))
|
},
|
refreshData() {
|
// this.$refs.lmesTable.setCurrentRow()
|
this.getDataList()
|
},
|
|
copyData() {
|
this.isCopyBtn.fun()
|
},
|
|
chooseCol() {
|
this.colSelectDialogVisible = true
|
this.handleCheckedCol()
|
},
|
// 限制文件上传大小，目前限制为30M（另可以加类型限制）
|
|
beforeAvatarUpload(file) {
|
const fileName = file.name
|
const fileType = fileName.substring(fileName.lastIndexOf('.') + 1)
|
const isLt10M = file.size / 1024 / 1024 < 30
|
if (fileType !== 'xlsx' && fileType !== 'xls'&&fileType!=='csv') {
|
this.$message.error('文件格式只能为xlsx或xls、csv,请删除后重新上传')
|
}
|
if (!isLt10M) {
|
this.$message({
|
message: '文件大小',
|
type: 'warning'
|
})
|
}
|
return isLt10M
|
},
|
|
// 文件上传成功回调事件
|
fileSuccessUploadScan(response, file, fileList) {
|
if (response.code != '0') {
|
this.$message.warning(response.msg)
|
} else {
|
this.$message({
|
message: '上传成功',
|
type: 'success'
|
})
|
this.getDataList()
|
this.importDialogVisible=false
|
}
|
this.$refs.uploadScan.clearFiles()
|
},
|
// 上传失败
|
handleError(err, file, fileList) {
|
const error = JSON.parse(err.message)
|
if (error.msg) {
|
this.$message.error(error.msg)
|
} else {
|
this.$message.error('上传失败')
|
}
|
},
|
// 下载数据模板
|
downDataTemplate() {
|
const path = this.$route.path
|
const pathElArr = path.split('/')
|
// const query = { fileName: pathElArr[2] }
|
|
uploadTemplate(pathElArr[2]).then((response) => {
|
const blob = new Blob([response.data], {
|
type: 'application/force-download'
|
})
|
const filename = decodeURI('模板文件.xlsx')
|
// 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
|
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)
|
})
|
},
|
// 显示隐藏快速搜索
|
generalSearch() {
|
const _this = this
|
if (_this.isGeneralSearch) {
|
_this.isGeneralSearch = false
|
} else {
|
_this.isGeneralSearch = true
|
}
|
},
|
// 查询条件
|
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
|
)
|
},
|
// 改变条件
|
setQueryParam(newQueryParams) {
|
for (let i = 0; i < newQueryParams.length; i++) {
|
this.queryParam[newQueryParams[i].prop] = newQueryParams[i].propVal
|
if (
|
newQueryParams[i].searchInfoType === 'date' ||
|
newQueryParams[i].searchInfoType === 'datetimerange' ||
|
newQueryParams[i].searchInfoType === 'datetime'
|
) {
|
this.dateTimeFilters[newQueryParams[i].prop] =
|
newQueryParams[i].propVal
|
}
|
}
|
},
|
// 选中某条记录，等同于单击某行记录选中
|
clickTable(row) {
|
this.$refs.lmesTable.setCurrentRow(row)
|
},
|
// 单选时,清空选中
|
clearClickTable() {
|
this.$refs.lmesTable.setCurrentRow()
|
},
|
getTableData() {
|
return this.tableData
|
},
|
doLayout() {
|
this.$nextTick(() => {
|
this.$refs.lmesTable && this.$refs.lmesTable.doLayout()
|
})
|
},
|
// 设置高级搜索查询条件
|
setMultiSearchFilter(filters) {
|
this.multiSearchFilter = filters
|
}
|
}
|
}
|
</script>
|
<style>
|
.commonTable * {
|
-webkit-user-select: text;
|
-moz-user-select: text;
|
-ms-user-select: text;
|
user-select: text;
|
}
|
|
.commonTable th {
|
text-align: center;
|
}
|
|
.commonTable th div {
|
display: block;
|
}
|
|
.commonTable tr td:first-child {
|
text-align: center;
|
}
|
|
.commonTable 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;
|
}
|
|
.commonTable td {
|
padding: 1px 0 0 0;
|
}
|
|
.commonTable th {
|
padding: 5px 0;
|
}
|
|
.commonTable .el-table__header .cell {
|
padding: 0 !important;
|
text-overflow: unset !important;
|
white-space: nowrap !important;
|
}
|
|
.commonButton {
|
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;
|
}
|
|
.common-table-btn.el-button--default {
|
color: #333;
|
}
|
|
.commonTable .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;
|
}
|
|
.commonButton.is-disabled {
|
color: #aacfff;
|
}
|
|
.zttTable-headerLabel {
|
color: #006eff;
|
}
|
|
/*自定义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);
|
}
|
|
.commonTable .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;
|
}
|
.upload-demo{
|
width: 100%;
|
}
|
.el-upload-dragger {
|
width: 300px !important;
|
}
|
</style>
|
