<template>
|
<div class="avue-crud" style="width: 100%">
|
|
<div class="toolbar_top" v-if="isShow('toolbar')" style="margin: 0px 20px">
|
|
<el-form :inline="true">
|
<el-form-item>
|
<slot name="toolbar"></slot>
|
</el-form-item>
|
<el-form-item >
|
<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"
|
class="common-table-btn"
|
>{{item.text}}
|
</el-button>
|
</el-form-item>
|
<!--刷新和显隐以及高级搜索-->
|
<el-form-item class="fr" style="margin-right:0">
|
<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" v-if="options.isGeneralSearch">
|
<el-button 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-upload style="margin-left:8px;display: inline;"
|
class="upload-demo"
|
:headers="headers"
|
:action="uploadInfo.url"
|
:beforeUpload="beforeAvatarUpload"
|
:limit="1"
|
:data="uploadInfo.uploadData"
|
:file-list="fileList"
|
:on-success="fileSuccessUploadScan"
|
:on-error="handleError"
|
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
|
:auto-upload="true"
|
ref="uploadScan"
|
multiple>
|
<el-button circle icon="fab fa-upload" style="font-size: 15px;border: 0px solid #DCDFE6"></el-button>
|
</el-upload>
|
</el-tooltip>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="title-division"></div>
|
<div style="margin: 20px 20px 0px">
|
<el-table
|
ref="table"
|
:size='tableSize'
|
:key="tableKey"
|
:data="table.data"
|
:stripe="options.stripe"
|
:border="options.border"
|
:fit="options.fit"
|
:lazy="options.lazy"
|
:show-summary="options.showSummary"
|
:summary-method="options.getSummaries"
|
:height="height? fixHeight? fixHeight: undefined: $store.getters.tableHeight - otherHeight"
|
v-bind="$attrs"
|
v-on="$listeners"
|
:highlight-current-row="true"
|
@cell-dblclick="dbClickCell"
|
@row-contextmenu='contextMenu'
|
@header-click='headClick'
|
@header-contextmenu='headContextMenu'
|
@selection-change="handleSelectionChange"
|
@current-change="handleCurrentChange"
|
@row-click="rowClick"
|
@sort-change="orderByProp"
|
:row-class-name="tableRowClassName"
|
:header-cell-style="tableHeaderStyle"
|
v-adaptive="{bottomOffset: bottomOffset}" height="100px"
|
:class="['commonTable',isGeneralSearch?'ext-table-class':'ext-table',isGeneralSearchOne?'':'ext-table-display']"
|
v-loading="vLoading"
|
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 align="center" v-if="!options.multiSelect" width="55" label="单选">
|
<template slot-scope="scope">
|
<el-checkbox v-model="scope.row.commonChecked"></el-checkbox>
|
</template>
|
</el-table-column>
|
<!--序号-->
|
<el-table-column v-if="options.seqNo" :key="Math.random()" label="序号" :fixed="options.seqNoFix">
|
<el-table-column type="index" v-if="options.seqNo" :index="indexMethod" label=" ">
|
</el-table-column>
|
</el-table-column>
|
<!--数据列-->
|
<template v-for="(item, index) in columnList">
|
<!-- slot 添加自定义配置项 -->
|
<slot v-if="item.slot" :name="item.slot"></slot>
|
<!-- 默认渲染列 -->
|
<div v-if="!item.slot">
|
<el-table-column
|
: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="item.sort?'custom':item.sort"
|
v-bind="$attrs"
|
v-on="$listeners"
|
v-if="item.isTrue">
|
<el-table-column :show-overflow-tooltip="!item.noShowTip" :width="item.width" :prop="item.prop">
|
<template slot="header" slot-scope="scope">
|
<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="queryParm[item.prop]"
|
:style="item.style" @keyup.enter.native="item.handleClick" clearable
|
@clear="item.handleClick"
|
size="mini"></el-input>
|
</template>
|
<template v-if="item.searchInfoType === 'select'">
|
<el-select :disabled="item.disabled" v-model="queryParm[item.prop]" placeholder=""
|
@change="item.handleClick" 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="queryParm[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.render">
|
<template v-if="item.formatter">
|
<span v-html="item.formatter(scope.row, item,scope.row[item.prop])"></span>
|
</template>
|
<template v-if="!item.formatter">
|
<el-input v-if="scope.row[item.prop+'Flag']" size="small" v-model="scope.row[item.prop]" placeholder="请输入" @blur="inputblur" v-focus></el-input>
|
<span v-if="!scope.row[item.prop+'Flag']">{{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"/>
|
</template>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
</div>
|
</template>
|
<el-table-column
|
v-if="table.operator"
|
:label="(table.operatorConfig && table.operatorConfig.label) || '操作'"
|
: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="item.fun(scope.row)"
|
:type="item.type||'text'"
|
:icon="item.icon?item.icon:'el-icon-search'"
|
:size="item.size||'small'"
|
v-show="checkIsShow(scope,item)"
|
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">
|
<el-pagination
|
v-show="table.data && table.data.length && isShowPagination"
|
:current-page="table.currentPage"
|
@current-change="handlesCurrentChange"
|
@size-change="sizeChangeHandle"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="table.pageSize"
|
:layout="size?'total, prev, pager, next':'total, sizes, prev, pager, next, jumper'"
|
:total="table.total"
|
v-bind="$attrs"
|
v-on="$listeners"
|
background
|
></el-pagination>
|
|
|
</div>
|
<!--原有显隐-->
|
<el-dialog title="多选" :visible.sync="colSelectDialogVisible" width="30%" center>
|
<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">
|
<el-checkbox v-for="(item,i) in columnList" :label="item.prop" :key="i">{{item.label}}
|
</el-checkbox>
|
</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>
|
<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';
|
|
// 自定义内容的组件
|
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},
|
props: {
|
// 表格型号：mini,medium,small
|
tableSize: {type: String, default: 'small'},
|
//查询对象
|
queryParm: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
dateTimeFilters: {
|
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,
|
isGeneralSearch:true//是否显示快速搜索按钮
|
}
|
},
|
// table自适应高度底部高度
|
bottomOffset: {
|
type: Number,
|
default: 125
|
},
|
//加载动画效果
|
vLoading: {
|
type: Boolean,
|
default: true
|
}
|
},
|
data() {
|
return {
|
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,//是否展示清除
|
advancedSearchVisible: false, //是否显示高级搜索框
|
isGeneralSearch: false, //是否显示快速搜索框
|
isGeneralSearchOne: false
|
}
|
},
|
computed: {
|
// 需要展示的列 === prop：列数据对应的属性，label：列名，align：对齐方式，width：列宽
|
columnList() {
|
return this.table.column.filter(item => {
|
return !item.noShowColumn
|
})
|
},
|
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
|
}
|
},
|
created() {
|
this.setTable()
|
},
|
mounted() {
|
const toolBarHeight = this.isShow('toolbar') ? 60 : 0
|
const pageHeight = 60
|
this.$nextTick(() => {
|
this.otherHeight = toolBarHeight + pageHeight + 30;
|
})
|
this.handleCheckedColAll(true);
|
this.handleCheckedColAllExport(true);
|
},
|
watch: {
|
queryParm: {
|
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,
|
focus: {
|
inserted: function(el,option) {
|
var defClass = 'el-input', defTag = 'input';
|
var value = option.value || true;
|
if (typeof value === 'boolean')
|
value = { cls: defClass, tag: defTag, foc: value };
|
else
|
value = { cls: value.cls || defClass, tag: value.tag || defTag, foc: value.foc || false };
|
//if (el.classList.contains(value.cls) && value.foc)
|
el.getElementsByTagName(value.tag)[0].focus();
|
}
|
}
|
},
|
methods: {
|
setTable() {
|
this.table.data.forEach(item => {
|
item.commonChecked = 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;
|
let checkedCount = value.length;
|
this.checkAll_export = checkedCount === this.columnLabels.length;
|
this.isIndeterminate_export =
|
checkedCount > 0 && checkedCount < this.eColumnLabels.length;
|
},
|
|
startExport() { //实际导出方法
|
this.exportDialogVisible = false;
|
const tHeader = [];
|
const filterVal = [];
|
var param = this.queryParm;
|
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"];
|
let temp = disposition.substring(
|
disposition.lastIndexOf("filename=") + 10,
|
disposition.lastIndexOf('"')
|
);
|
let iconv = require("iconv-lite");
|
iconv.skipDecodeWarning = true; //忽略警告
|
let 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 ''
|
}
|
},
|
// 当前页码
|
|
handlesCurrentChange(val) {
|
this.$emit('page-change', val)
|
},
|
|
// 每页数
|
sizeChangeHandle(val) {
|
this.$emit('size-change', val)
|
},
|
// 行颜色
|
tableRowClassName({row, rowIndex}) {
|
let result = ''
|
this.$emit('tableRowClassName', row, val => {
|
result = val
|
})
|
return result
|
},
|
// 单行选中
|
handleCurrentChange(row) {
|
if (row != null) {
|
this.table.data.forEach(item => {
|
// 排他,每次选择时把其他选项都清除
|
if (item.id !== row.id) {
|
item.commonChecked = false
|
} else {
|
item.commonChecked = true
|
}
|
});
|
}
|
this.$emit('current-change', row)
|
},
|
rowClick(row, column) {
|
if (column.label === '单选') {
|
return
|
}
|
//this.rowData = row
|
row.selectFlag = true
|
if (row.selectFlag) {
|
this.$refs.table.setCurrentRow(row)
|
this.$emit('rowClick', row)
|
} else {
|
this.$refs['table'].setCurrentRow()
|
}
|
},
|
handleSelectionChange(val) {// 多行选中
|
this.multipleSelection = val;
|
this.$emit('handleSelectionChange', val);
|
},
|
//双击表格cell时，给单元格设置行编辑
|
dbClickCell(row, column, cell, event){
|
var currProp=column.property;
|
var currColumn=this.columnList.find(item=>item.prop===currProp);
|
if(currColumn.isEdit){
|
this.$set(row,currProp+'Flag',true);
|
}
|
},
|
/*
|
dbClickRow(row, column, event) {//双击行事件
|
let data = {
|
'row': row,
|
'column': column,
|
'event': event,
|
}
|
this.$emit('dbClickRow', data);
|
},*/
|
contextMenu(row, column, event) {//右键行事件-没去掉页面默认的
|
let data = {
|
'row': row,
|
'column': column,
|
'event': event,
|
}
|
this.$emit('contextMenu', data);
|
},
|
headClick(column, event) {//头部列点击事件
|
let data = {
|
'column': column,
|
'event': event,
|
}
|
this.$emit('headClick', data);
|
},
|
headContextMenu(column, event) {//头部列右键点击事件
|
let data = {
|
'column': column,
|
'event': event,
|
}
|
this.$emit('headContextMenu', data);
|
},
|
rowChange(currentRow, oldCurrentRow) {//当前行发生改变时的事件
|
let data = {
|
'currentRow': currentRow,
|
'oldCurrentRow': oldCurrentRow,
|
}
|
this.$emit('rowChange', data);
|
},
|
|
//清空查询条件
|
cleanQueryParam() {
|
this.$emit('cleanQueryParam');
|
},
|
//显示高级搜索
|
searchData() {
|
//this.$emit('showSearchButton');
|
this.advancedSearchVisible = true;
|
this.$nextTick(() => {
|
this.$refs.advancedSearch.init(this.columnList);
|
})
|
},
|
//执行高级搜索结果查询
|
searchChange(filters) {
|
this.isSearchBtn.fun(filters);
|
},
|
//执行排序
|
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.isOrderBtn.defaultOrderBy;
|
}
|
this.isOrderBtn.orderBy=orderBy;
|
this.isOrderBtn.fun();
|
},
|
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];
|
}
|
item.handleClick();
|
},
|
isShow(name) {
|
return Object.keys(this.$slots).includes(name);
|
},
|
//显示列全选-显隐
|
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();
|
},
|
//选中显示列变化-显隐
|
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();
|
},
|
refreshData() {
|
this.isRefreshBtn.fun()
|
},
|
|
copyData() {
|
this.isCopyBtn.fun()
|
},
|
|
chooseCol() {
|
this.colSelectDialogVisible = true
|
},
|
//限制文件上传大小，目前限制为10M（另可以加类型限制）
|
|
beforeAvatarUpload(file) {
|
let fileName = file.name
|
let fileType = fileName.substring(fileName.lastIndexOf('.') + 1)
|
const isLt10M = file.size / 1024 / 1024 < 10
|
if (fileType !== 'xlsx' && fileType !== 'xls') {
|
this.$message.error('文件格式只能为xlsx或xls,请删除后重新上传');
|
}
|
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.$refs.uploadScan.clearFiles()
|
},
|
//上传失败
|
handleError(err, file, fileList) {
|
this.$message.warning('上传失败');
|
},
|
//显示隐藏快速搜索
|
generalSearch() {
|
var _this = this;
|
|
if (_this.isGeneralSearchOne) {
|
if (_this.isGeneralSearch) {
|
_this.isGeneralSearch = false;
|
} else {
|
_this.isGeneralSearch = true;
|
}
|
_this.isGeneralSearchOne = false;
|
} else {
|
if (_this.isGeneralSearch) {
|
_this.isGeneralSearch = false;
|
} else {
|
_this.isGeneralSearch = true;
|
}
|
_this.isGeneralSearchOne = true;
|
}
|
|
},
|
doLayout() {
|
this.$nextTick(() => {
|
this.$refs.table && this.$refs.table.doLayout()
|
})
|
},
|
//单元格失去焦点时，触发该方法
|
inputblur(row, event, column,cell) {
|
var _this=this;
|
let tableD = _this.table.data;
|
let columns=_this.columnList;
|
tableD.forEach(function (item) {
|
columns.forEach(function (col) {
|
_this.$set(item,col.prop+'Flag',false);
|
});
|
});
|
},
|
}
|
}
|
</script>
|
<style>
|
.commonTable * {
|
-webkit-user-select: text;
|
-moz-user-select: text;
|
-ms-user-select: text;
|
user-select: text;
|
}
|
|
.el-table {
|
color: #555;
|
}
|
|
.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
|
}
|
|
/* border-right: 1px solid #EBEEF5; */
|
.commonButton {
|
padding: 0px;
|
}
|
|
.el-table .warning-row {
|
background: #FFDBD9;
|
}
|
|
.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;
|
}
|
|
.common-table-btn{
|
border-radius: 0;
|
padding: 9px 30px;
|
}
|
|
.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
|
}
|
</style>
|
