<template>
<div :id="elId"
class="_hs_table"
style="width:100%;height:100%">
<span class='toolsBox' v-show="configData.isShowTools">
<el-popover
placement="top-start"
width="200"
trigger="hover"
>
<template v-for="(item,index) in tool_list">
<div class="closeAllItem" v-if="showItem(item)" :key="index">
<el-button type="text" :disabled="disabledItem(item)" size="mini" @click="itemClickAction(item)">
{{item.label}}
</el-button>
</div>
</template>
<el-button size="mini" type="primary" slot="reference" icon='el-icon-menu' circle></el-button>
</el-popover>
</span>
<el-table v-if="isPicture==='0'"
ref='hsTable'
style="width:100%;overflow: auto;"
:data="this.tableData"
:style="tableStyle"
:fit='true'
:highlight-current-row=true
:show-summary='showSummary'
:header-row-style="setHeaderRowStyle"
:header-cell-style="setHeaderCellStyle"
:row-style="setRowStyle"
:cell-style="setCellStyle"
:max-height="maxHeight||maxHeight_"
:border="configData.built_border"
:show-header="!configData.hideHeader"
:summary-method="getSummaries"
@select-all='selectAll'
@select='selectCheckBox'
@row-click="tableRowClick"
@cell-click='tableCellClick'
@cell-mouse-enter='tableCellmouse'
@cell-mouse-leave="tableCelleave"
@cell-dblclick="cellDblclick"
@sort-change='sortChange'
@header-click="headerClick"
@row-dblclick='tableRowDblclick'
@selection-change='selectionChange'
>
<el-table-column v-if="configData.selection" type="selection" width="55"></el-table-column>
<el-table-column v-if="configData.showIndex" label='序号' type="index" width="55"></el-table-column>
<template v-if="columnsProp.length">
<template v-for='(column,index) in columnsProp'>
<template v-if="!column.childs&&!column.isHide">
<el-table-column
:key="index"
:render-header='renderHeader'
:width='minWidthFun(column,1)'
:prop="column.prop||column.label"
:show-overflow-tooltip='column.showOverflowTooltip'
:label="column.label&&column.label.startsWith('img_')?column.label.substr(4):column.label"
>
<template slot-scope="scope">
<template v-if="column.prop.startsWith('img_')">
<el-image :src="scope.row[column.prop]"
:fit="fit"
:style="imgStyle">
</el-image>
</template>
<template v-else>
<template v-if="!jumpDisable(scope.row,column.prop)">
<el-popover placement="top-start"
width="400"
@show='showpopover(scope.row,column.prop)'
:close-delay='0'
trigger="hover">
<el-table :data="tableDataDetail"
:header-row-style="setCellHeaderRowStyle"
:row-style="setCellRowStyle"
style="width: 100%">
<el-table-column v-for="(prop,index) in tableHeader"
:prop="prop"
:label="prop"
:key="index">
</el-table-column>
</el-table>
<div slot="reference">{{scope.row[column.prop]}}</div>
</el-popover>
</template>
<template v-else>
<template v-if="column.type==='checkBox'">
<i :class="rowCellBoolean(scope.row[column.prop])"></i>
</template>
<template v-else>
<!-- <span @click="cellClickItem(scope.row[column.prop],column.action)">{{scope.row[column.prop]}}</span> -->
<childItem
:remoteMethod="remoteMethod"
v-if="jumpItem(column.prop)"
:item='jumpItem(column.prop)'
:prop="column.prop"
:formParms='scope.row'
:allColumsConfig='allColumsConfig'
:jsoneditorOpenAfter='jsoneditorOpenAfter'
:readonly='readonly||dtlDialogFormDisAbled'
>
</childItem>
</template>
</template>
</template>
</template>
</el-table-column>
</template>
<template v-else-if="column.childs&&column.childs.length">
<el-table-column :label="column.label" :key="index">
<template v-for="item in column.childs">
<el-table-column
:width='minWidthFun(item,2)'
:prop="item.prop||item.label"
:render-header='renderHeader'
:label="item.label.split('__')[1]||item.prop"
:key="item.label"
>
<template slot-scope="scope">
<template v-if='!jumpDisable(scope.row,item.prop)'>
<el-popover placement="top-start"
width="400"
@show='showpopover(scope.row,item.prop)'
:close-delay='0'
trigger="hover">
<el-table :data="tableDataDetail"
:header-row-style="setCellHeaderRowStyle"
:row-style="setCellRowStyle"
style="width: 100%">
<el-table-column v-for="(props,index) in tableHeader"
:prop="props"
:label="props"
:key="index">
</el-table-column>
</el-table>
<div slot="reference">{{scope.row[item.prop]}}</div>
</el-popover>
</template>
<template v-else>
<template v-if="item.type==='checkBox'">
<i :class="rowCellBoolean(scope.row[item.prop])"></i>
</template>
<template v-else>
<div >{{scope.row[item.prop]}}</div>
</template>
</template>
</template>
</el-table-column>
</template>
</el-table-column>
</template>
</template>
</template>
<el-table-column v-if='configData.showHandle' label="操作" :width='configData.handleWidth' fixed="right">
<!-- <template slot-scope="scope">
<slot name="table_handle" :row='scope.row' :$index='scope.$index'></slot>
</template> -->
<!-- <template slot-scope="scope"> -->
<template slot-scope="scope">
<template v-for="(item,index) in handleColumns_">
<el-button v-if="showItem(item,scope.row)" :disabled='disabledItem(item,scope.row)||dtlDialogFormDisAbled' :key="index" size="mini" :icon="item.icon" :type="item.type" @click="itemClickActionHandle(item,scope.$index,scope.row)"> {{item.label}}</el-button>
</template>
<template v-for="(item) in dtl_list">
<el-link :disabled="dtlDialogFormDisAbled" :key="item.label" type="primary" class="elLink" @click='linkDtl(item,scope.row)'>{{item.label}}</el-link>
</template>
</template>
</el-table-column>
</el-table>
<div v-if="isPicture==='1'">
<div><img :src="imgUrl"
style="width:100%;height:100%;"></div>
</div>
<div class="paginationBox">
<el-pagination v-if="paging"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="paginationPage"
:page-sizes="pageSizes"
:page-size="paginationPageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="paginationTotal">
</el-pagination>
</div>
<jsoneditor v-model='jsoneditorVisible'
:elInfo='elInfo'
:layout='layout'
:allSourceData='allSourceData'
:jsoneditorCloseAfter='jsoneditorCloseAfter'
:jsoneditorOpenAfter='jsoneditorOpenAfter'
:isEditColumns='isEditColumns||configData.isEditColumns'
>
</jsoneditor>
<tableDeatil v-model='detailVisible' :cellDetailStyle='cellDetailStyle' :tableData='tableDataDetail'>
</tableDeatil>
<el-dialog
title="详情"
:visible.sync="dialogVisiblePage"
width="90%"
:before-close="handleClose"
:close-on-click-modal='false'
:append-to-body='true'
>
<iframe :src='pageSrc' style="width:100%;height:500px;padding-top:10px" sandbox="allow-same-origin allow-scripts allow-forms allow-top-navigation allow-popups"></iframe>
</el-dialog>
<tbaleColumsSet
v-model="dialogVisibleTbaleColums" :tableDataColums='tableDataColums'
:allSourceData='allSourceData'
:elInfo='elInfo'
@submit="submitTableColums"
:isEditColumns='isEditColumns'></tbaleColumsSet>
<dialogUpload @importSuccess='importSuccess' :entityConfig='entityConfig' :currentImportItem='currentImportItem' v-model="dialogUploadVisible" @submit="submitUpload"></dialogUpload>
<dialogIframe :entityManger='entityManger' @importSuccess='importSuccess' :currentImportItem='currentImportItem' :entityConfig='entityConfig' v-model="dialogIframeVisible" :src='dialogIframeSrc'></dialogIframe>
</div>
</template>
<script>
import commonUtility from '../funTools/commonUtility'
import uuidv1 from 'uuid/v1'
import mes_style from './mes_style'
import screen_style from './screen_style'
import _ from 'lodash'
import request from '../funTools/request'
import tableDeatil from './tableDetail'
import jsoneditor from '../common/jsoneditor'
import childItem from './ItemComponentChild'
import tbaleColumsSet from '../common/tbaleColumsSet'
import dialogUpload from '../common/dialogTemplate/dialogUpload'
import dialogIframe from '../common/dialogTemplate/dialogIframe'
// const tableDeatil = r => require.ensure([], () => r(require('./tableDetail')), 'tableDeatil_')
// const childItem = r => require.ensure([], () => r(require('./ItemComponentChild')), 'ItemComponentChild_')
// const jsoneditor = r => require.ensure([], () => r(require('../common/jsoneditor')), 'jsoneditor_')
// const dialogUpload = r => require.ensure([], () => r(require('../common/dialogTemplate/dialogUpload')), 'dialogUpload_')
// const dialogIframe = r => require.ensure([], () => r(require('../common/dialogTemplate/dialogIframe')), 'dialogIframe_')
// const tbaleColumsSet = r => require.ensure([], () => r(require('../common/tbaleColumsSet')), 'tbaleColumsSet_')
export default {
components: {
jsoneditor,
tableDeatil,
childItem,
tbaleColumsSet,
dialogUpload,
dialogIframe,
},
name: 'hsTable',
props: {
remoteMethod: {},
importInfo: {// 导入信息
type: Array,
default() {
return []
}
},
isEditColumns: {}, // 是否可编辑列
maxHeight: {},
height: {},
elInfo: {// 组件信息
type: Object,
default() {
return {}
}
},
allSourceData: {// 数据和配置
type: Object,
default() {
return {
config: {},
sourceData: [],
picture_url: ''
}
}
},
isCarousel: {
type: Boolean,
default() {
return true
}
},
params: {
type: Object,
default() {
return {
el: 'hsTable',
page: 'page1',
position: 'table1'
}
}
},
layout: {},
jsoneditorCloseAfter: {
type: Function
},
jsoneditorOpenAfter: {
type: Function
},
getSourceData: {// 获取所有数据
type: Function
},
toggleRow: {// 外部传入的当前行
},
entityConfig: {}, // 实体
readonly: {// 是否只读
},
handleColumns: {// 外部传入的操作列
type: Array,
default() {
return []
}
},
dtl_list: {// 外部传入的操作列
type: Array,
default() {
return []
}
},
fromWhere: {// 来自哪里的表格 列表 or 详情
default: 'list'
},
entityManger: {}// 实体manger
},
data() {
return {
imgUrl: '',
elId: '',
tableData: [],
configData: {
toolItems: [],
handleColumns: []
},
jsoneditorVisible: false,
tableStyle: '',
imgStyle: '',
pageArr: {},
page: 0,
currentPage: 0,
grouptableData: [],
tableObj: {},
time: 0,
timer: null,
fit: 'fill',
paging: null,
paginationPage: 1,
paginationPageSize: 50,
detailVisible: false,
detailVisible2: false,
tableDataDetail: [],
tableHeader: [],
outBoxDom: null,
maxHeight_: 'none',
isPicture: '',
columnsProp: [],
visible2: false,
cellDetailStyle: {},
paginationTotal: 0,
total: {},
headerCellStyleSetting_: {},
columnsConfig: [],
pageSizes: [10, 20, 50, 100, 200, 1000],
subjoinStyle: {
'hyperlink': {
'text-decoration': 'underline',
'cursor': 'pointer'
},
'asyncQueryDetail': {
'text-decoration': 'underline',
'cursor': 'pointer'
}
},
dialogVisiblePage: false,
pageSrc: '',
handleWidth: 200,
allColumsConfig: {},
dataChangeNumber: 0,
tableDataColums: [],
dialogVisibleTbaleColums: false,
dialogUploadVisible: false,
currentImportItem: null,
dialogIframeSrc: '',
dialogIframeVisible: false,
tableDataFirst: null, // table[0]第一行数据
hsDyncProp: false, // 是否含有动态列
targetRowInner: {}, // 当前行
dtlDialogFormDisAbled: false
}
},
watch: {
targetRowInner: {
handler: function(newVal, oldVal) {
this.$emit('setCurrentRow', newVal)
},
deep: true
},
toggleRow: {
handler: function(newVal, oldVal) {
this.setRowSelect(newVal)
},
deep: true
},
paging: {
handler: function(newVal, oldVal) {
if (!newVal) return
const per_page = Array.isArray(newVal) ? parseInt(newVal[0].per_page) : parseInt(newVal.per_page)
const list = [10, 20, 50, 100, 200, 1000]
if (!list.includes(per_page)) {
list.unshift(per_page)
}
this.pageSizes = list
},
deep: true
},
allSourceData: {
handler: function(newVal, oldVal) {
this.initTable(newVal)
},
deep: true
},
isCarousel: {
handler: function(newVal, oldVal) {
if (newVal && this.timer !== null) {
this.timer = setInterval(this.changeTableDataFun, newVal)
} else {
clearInterval(this.timer)// 清除定时器
this.timer = null
}
},
deep: true
},
time: {
handler: function(newVal, oldVal) {
if (newVal > 0 && this.isCarousel) {
this.timer = setInterval(this.changeTableDataFun, newVal)
}
},
deep: true
}
},
computed: {
handleColumns_: function() {
const list1 = _.cloneDeep(this.handleColumns || [])
const list2 = _.cloneDeep(this.configData.handleColumns || [])
this.mergeData(list1, list2)
list2.forEach(item => {
const { click, isHide } = item
const isHideType = typeof isHide === 'boolean'
if (!isHideType) return
switch (click) {
case '$addRow':
case '$deleteRow':
if (this.fromWhere === 'hdrDtl') {
if (this.readonly) {
this.$set(item, 'disabled', true)
} else {
this.$set(item, 'disabled', false)
}
}
if (this.readonly && this.fromWhere !== 'hdrDtl') {
this.$set(item, 'disabled', true)
}
break
}
})
return list2
},
tool_list: function() {
const newList = []
const newVal_ = _.cloneDeep(this.importInfo)
const toolItems = _.cloneDeep(this.configData.toolItems || [])
newList.push(...newVal_, ...toolItems)
newList.forEach(item => {
const { click, isHide } = item
const isHideType = typeof isHide === 'boolean'
switch (click) {
case '$addRow':
case '$deleteRow':
if (this.fromWhere === 'hdrDtl') {
if (this.readonly) {
this.$set(item, 'disabled', true)
} else if (isHide === undefined || isHideType) {
this.$set(item, 'disabled', false)
}
}
if (this.readonly && this.fromWhere !== 'hdrDtl') {
this.$set(item, 'disabled', true)
}
break
case '$excelImportItem':
case '$dataImportItem':
if (this.fromWhere === 'hdrDtl') {
if (this.readonly) {
this.$set(item, 'disabled', true)
} else if (isHide === undefined || isHideType) {
this.$set(item, 'disabled', false)
}
}
break
}
})
return newList || []
},
showSummary: function() {
const tkeys = Object.keys(this.total)
const sumKey = this.columnsConfig.reduce((prve, curr) => {
if (curr.summarizing) {
prve.push(curr.prop)
}
return prve
}, [])
return !!tkeys.length || !!sumKey.length
}
},
created() {
this.elId = uuidv1() // 获取随机id
},
mounted() {
this.initTable(this.allSourceData)
this.$nextTick(() => {
setTimeout(() => {
this.showEditJsonDialog()
}, 1000)
})
},
destroyed() {
if (this.outBoxDom) {
this.outBoxDom.removeEventListener('mousedown', this.boxEventMouse)
}
this.chart = null
},
beforeDestroy() {
clearInterval(this.timer)// 清除定时器
if (this.chart) {
this.chart.clear()
}
this.grouptableData = null
this.chart = null
this.timer = null
this.time = 0
},
methods: {
disabledItem(item, row) {
const { disabled } = item
const type = typeof disabled
const data = {
row,
item
}
if (type === 'boolean') {
return disabled
} else if (type === 'function') {
return disabled(data)
} else {
return false
}
},
showItem(item, row) {
const { isHide } = item
const type = typeof isHide
const data = {
row,
item
}
if (type === 'boolean') {
return !isHide
} else if (type === 'function') {
try {
return !isHide(data)
} catch (error) {
console.log(error)
const funName = '$' + isHide
this.$message.error(`${funName} 有误`)
}
} else {
return true
}
},
cumputedisabled(item) {
return !!item.disabled
},
linkDtl(item, row) {
this.$emit('RowClick', {
row: row
})
const that = this
setTimeout(() => {
const tartItem = that.dtl_list.find(item__ => item__.url === item.url)
this.$emit('linkDtl', tartItem, row)
}, 100)
},
mergeData(data1, data2, prop = 'click') {
if (!Array.isArray(data1)) return
if (!Array.isArray(data2)) return
const list = []
data1.forEach(item => {
let target = data2.find(_item => _item[prop] === item[prop])
if (target) {
target = Object.assign(target, item)
} else {
list.push(item)
}
})
data2.push(...list)
},
itemClickActionHandle(item, index, row) {
const { click } = item
const type = typeof click
if (type === 'string' && click.startsWith('$')) {
const item_ = Object.assign({}, item)
item_.click = item_.click.substr(1)
this.itemClick(item_, index)
} else if (type === 'function') {
click(row)
}
},
itemClickAction(item, index) {
const { click } = item
const type = typeof click
if (type === 'string' && click.startsWith('$')) {
const item_ = Object.assign({}, item)
item_.click = item_.click.substr(1)
this.itemClick(item_)
} else if (type === 'function') {
click(item)
}
},
itemClick(item, index) {
const { click } = item
switch (click) {
case 'exportCurrPageData':
this.exportExcel(1)
break
case 'exportAllPageData':
this.exportExcel(2)
break
case 'tableColumnSet':
this.tableColumnSet()
break
case 'dataImportItem':
case 'excelImportItem':
this.importItem(item)
break
case 'addRow':
this.addRow(index)
break
case 'deleteRow':
this.deleteRow(index)
break
case 'editRow':
this.editRow(index)
break
}
},
editRow(index) {
const data = {
row: this.tableData[index],
index: index
}
this.$emit('editRow', data)
},
addRow(index) {
this.$emit('addRow', index)
},
deleteRow(index) {
if (typeof index === 'number') {
this.tableData.splice(index, 1)
} else {
// 逆向循环删除数组某些项
var arr = this.tableData
for (let i = arr.length - 1; i >= 0; i--) {
if (arr[i].isSelected) {
arr.splice(i, 1)
}
}
}
},
initTable(data) {
const { config, sourceData } = data
this.initTabelData(sourceData)
this.initTabelconfig(config)
},
getSessionInfo() {
const { db_name, db_code } = commonUtility.parseUrlQueryString()
const { appCode, pagename } = commonUtility.parseUrlQueryBIDyncAppcodePageName()
const dbName = db_name || ''
const obj = _.cloneDeep({
dbName,
appCode,
page: pagename,
db_code
})
return obj
},
importSuccess(data) {
this.$emit('importSuccess', data)
this.dialogIframeVisible = false
},
submitUpload(fileList) {
const file = fileList[0]
this.$emit('importItem', file.raw, this.currentImportItem)
},
importItem(item) {
this.currentImportItem = item
this.$emit('setCurrentImportItem', item)
const parms = item.parms
if (!item.url) { // excel 导入
this.dialogUploadVisible = true
} else {
if (!item.import_name) {
this.$message.error('请配置-import_name')
return
}
// 数据导入
const href = location.href
const startUrl = href.split('#')[0]
let url = item.url
if (item.url.includes('?')) {
url = item.url + '&fromMenu=1'
} else {
url = item.url + '?fromMenu=1'
}
let parmsStr = ''
for (const key in parms) {
parmsStr += `&${key}=${parms[key]}`
}
const appInfo = this.getSessionInfo()
const url_ = `${startUrl}#${url}` + `&db_name=${appInfo.dbName}` + parmsStr
this.dialogIframeSrc = url_
this.dialogIframeVisible = true
}
},
getPageInfo(info = this.elInfo) {
const data = {
sControl: info.position
}
return request.getSql(data)
},
async submitTableColums(data, flage) {
const res = await this.getPageInfo()
let paramsData = {}
if (!res || (res && Array.isArray(res) && !res.length)) {
const { config, sourceData } = this.allSourceData
paramsData.json_config = JSON.stringify(config)
paramsData.json_data = JSON.stringify(sourceData)
paramsData.is_mock = 1
paramsData.query_sql = ''
} else {
paramsData = res[0]
}
const { query_sql, json_config, json_data, is_mock } = paramsData
const json_config_ = JSON.parse(json_config)
json_config_.columnsConfig = data
const dataw = {
sControl: this.elInfo.position,
sConfig: json_config_,
sData: JSON.parse(json_data),
sQuerySql: query_sql,
elInfo: this.elInfo,
is_mock: is_mock ? 1 : 0
}
request.runSave(dataw).then(res => {
if (flage !== 'columnStyleSet') {
this.dialogVisibleTbaleColums = false
}
this.configData.columnsConfig = data
})
},
tableColumnSet() {
const config = _.cloneDeep(this.configData)
if (config && config.columnsConfig && config.columnsConfig.length) {
this.tableDataColums = [...config.columnsConfig]
} else {
this.tableDataColums = [{}]
}
this.tableDataColums.forEach((item, index) => {
if (item.childs) {
this.tableDataColums.splice(index, 1, ...item.childs)
}
})
this.dialogVisibleTbaleColums = true
},
selectionChange(data) {
data.forEach(item => {
this.$set(item, 'isSelected', true)
})
this.$emit('selectionChange', data)
},
jumpItem(prop) {
const target = this.columnsConfig.find(item => item.prop === prop && !item.isHide)
const target1 = this.columnsProp.find(item => item.prop === prop && !item.isHide)
return target || target1
},
set_row_style(row) {
if (
row.bill_status === '5' ||
row.usable === false ||
row.bUsable === false
) {
return {
'text-decoration': 'line-through',
color: '#afafaf'
}
}
},
tableRowDblclick(row, column, event) {
const disaledDblClick = this.configData.disaledDblClick
if (!disaledDblClick) {
this.$emit('tableRowDblclick', row)
}
},
selectAll(selection) {
this.tableData.forEach(item => {
this.$set(item, 'isSelected', !!selection.length)
})
if (!selection.length) { // 清空时 去掉当前行
this.$refs.hsTable.setCurrentRow()
}
},
selectCheckBox(selection, row) {
this.$set(row, 'isSelected', !row.isSelected)
// 设置当前行是否高亮
if (!row.isSelected) {
this.$refs.hsTable.setCurrentRow()
this.targetRowInner = {}
} else {
this.$refs.hsTable.setCurrentRow(row)
this.targetRowInner = row
}
},
async exportExcel(flage) {
const data = this.tableData
const columnsProp_ = []
this.columnsProp.forEach(item => {
if (item.childs) {
columnsProp_.push(...item.childs)
} else {
columnsProp_.push(item)
}
})
const tHeader = []
columnsProp_.forEach(item => {
const str = `${item.label}=${item.prop}`
tHeader.push(str)
})
const exportExcelName = this.configData.exportExcelName || '表'
if (flage === 2) {
const result = await this.getSourceData({ param: { per_page: -1 }, elInfo: this.elInfo })
if (Array.isArray(result) && result.length) {
let exportExcelData = []
if (result[0].json_data) {
const json_data = typeof result[0].json_data === 'string' ? JSON.parse(result[0].json_data) : result[0].json_data
exportExcelData = Array.isArray(json_data) ? json_data : json_data.table
} else {
exportExcelData = result
}
this.$utilsExcel.exportToExcel(tHeader, exportExcelData, exportExcelName)
} else {
this.$message.warning('暂无数据~')
}
} else {
this.$utilsExcel.exportToExcel(tHeader, data, exportExcelName)
}
},
handleClose() {
this.dialogVisiblePage = false
},
headerClick(column, event) {
const target = event.target
const className = target.className
const data = {
prop: column.property,
order: ''
}
if (className && className.includes('sort-caret')) {
if (className.includes('ascending') && !target.className.includes('activeBottomSort')) {
data.order = '1'
target.className = target.className + ' activeBottomSort'
target.nextSibling.className = target.nextSibling.className.replace('activeTopSort', '')
} else if (className.includes('ascending') && target.className.includes('activeBottomSort')) {
data.order = ''
target.className = target.className.replace('activeBottomSort', '')
} else if (className.includes('descending') && !target.className.includes('activeTopSort')) {
data.order = '0'
target.className = target.className + ' activeTopSort'
target.previousSibling.className = target.previousSibling.className.replace('activeBottomSort', '')
} else if (className.includes('descending') && target.className.includes('activeTopSort')) {
data.order = ''
target.className = target.className.replace('activeTopSort', '')
}
this.$emit('sortChange', data)
}
},
ascendingClick() {
},
renderHeader(h, { column, $index }) {
const { property, label } = column
const target = this.columnsProp.find(item => {
return item.prop === property && !item.isHide
})
if (!target) {
return label
}
let innerHtml = column.label
if (target && target.isRequired) {
innerHtml = '<i style="color:red;">*</i>' + innerHtml
}
if (target && target.isSort) {
innerHtml += '<span class="caret-wrapper"><i class="sort-caret ascending"></i><i class="sort-caret descending"></i></span>'
}
return h(
'span',
{
domProps: {
innerHTML: innerHtml
},
on: {
click: this.ascendingClick
}
},
[h('span')]
)
},
sortChange(column) {
const data = {
prop: column.prop,
order: column.order
}
this.$emit('sortChange', data)
},
cellClickItem(value, action) {
},
cellDblclick(row, column, cell, event) {
// const { property } = column
},
rowCellBoolean(value) {
if (Number(value)) {
return 'el-icon-check'
} else {
return 'el-icon-close'
}
},
getSummaries(param) {
const { columns } = param
const sums = []
const sumKey = this.columnsConfig.reduce((prve, curr) => {
if (curr.summarizing) {
prve.push(curr.prop)
}
return prve
}, [])
const sumObj = {}
sumKey.forEach(key => {
sumObj[key] = 0
this.tableData.forEach(item => {
if (item[key]) {
sumObj[key] += Number(item[key])
}
})
})
const total_ = Object.assign(_.cloneDeep(this.total))
const tkeys = Object.keys(total_)
columns.forEach((column, index) => {
const { property } = column
if (index === 0) {
sums[index] = '合计'
} else if (tkeys.length) {
if (tkeys.includes(property)) {
sums[index] = total_[property]
} else {
sums[index] = ''
}
} else if (sumKey.length) {
if (sumKey.includes(property)) {
sums[index] = sumObj[property]
} else {
sums[index] = ''
}
}
})
return sums
},
jumpDisable(row, key) {
if (row[`_data_${key}`]) {
return false
} else {
return true
}
},
showpopover(row, key, cell) {
if (row[`_data_${key}`]) {
const _data_value = row[`_data_${key}`]
this.tableDataDetail = _data_value
if (!this.tableDataDetail.length) return
this.tableHeader = Object.keys(this.tableDataDetail[0])
} else {
// this.tableDataDetail = []
}
},
minWidthChildFun(label) {
const l = label.length
const f = 12
const minWidth = f * l // 加上一个文字长度
return minWidth
},
minWidthFun(column, flage) {
// 表示要自适应
const { width, label, prop: property } = column
if (width) return width
if (this.configData.isAdaptive) return
if (!label) return
const l = flage === 1 ? label.length : label.split('__')[1].length
const f = 12
const sortList = this.columnsConfig.find(item => item.isSort && item.prop === property)
let minWidth = f * (l + 2)
if (sortList) {
minWidth = f * (l + 4)
}
return minWidth
},
initTabelData(sourceData) {
if (sourceData && sourceData.picture_url && sourceData.picture_url !== '') {
this.imgUrl = '/uploadAPI/file/' + sessionStorage.getItem('app_code') + '/' + this.allSourceData.picture_url
this.isPicture = '1'
} else {
this.isPicture = '0'
}
if (sourceData) {
if (Array.isArray(sourceData)) {
this.tableData = sourceData
this.paging = null
this.total = {}
} else {
const total = sourceData.total || sourceData.set3
if (total) {
if (Array.isArray(total)) {
this.total = total[0]
} else {
this.total = total
}
}
this.tableData = sourceData.table || sourceData.set1 || []
this.paging = sourceData.paging || sourceData.set2// 分页信息
if (this.paging) {
if (Array.isArray(this.paging)) {
this.paginationPage = parseInt(this.paging[0].page) // 当前页
this.paginationPageSize = parseInt(this.paging[0].per_page) // 分页条数
this.paginationTotal = parseInt(this.paging[0].total)
} else {
this.paginationPage = parseInt(this.paging.page) // 当前页
this.paginationPageSize = parseInt(this.paging.per_page) // 分页条数
this.paginationTotal = parseInt(this.paging.total)
}
}
}
}
if (this.tableData.length) {
const data0 = this.tableData[0]
this.tableDataFirst = _.cloneDeep(data0)
if (data0._id) {
// 此时有动态列 且 此时数据为空
this.tableData.splice(0, 1)
}
}
this.tableData.forEach(item => {
for (const p in item) {
if (p.includes('_data_')) {
if (typeof item[p] === 'string') {
item[p] = JSON.parse(item[p])
}
}
}
})
},
initTabelconfig(config_) {
const config = _.cloneDeep(config_)
this.configData = this.getDefaultConfig(config)
if (config && config.maxHeight) {
this.maxHeight_ = config.maxHeight
}
const { columnsConfig, cellDetailStyle } = this.configData
this.columnsConfig = columnsConfig || []
if (columnsConfig && columnsConfig.length) {
this.columnsProp = [...columnsConfig] // 筛选出可显示的
const dyncProp = this.columnsProp.find(item => item.prop === '*')
if (dyncProp) {
this.hsDyncProp = true
this.setHeaderAnynsProp(this.columnsProp)
} else {
this.hsDyncProp = false
}
} else {
this.columnsProp = [...this.getAsyncProp(this.tableDataFirst)]
}
this.getHeaderCellStyle(this.tableData)
this.columnsProp.forEach(item => {
if (!item.showType || item.showType === 'text') {
item.showOverflowTooltip = true
} else {
item.showOverflowTooltip = false
}
})
this.columnsProp = this.groupByProp(this.columnsProp)
console.log(this.columnsConfig, ' this.columnsConfig')
// 避免数据变更 再次发出请求
if (this.dataChangeNumber < 4) {
this.dataChangeNumber++
// this.initTableColumnsControl()
}
if (this.hsDyncProp) { // 有动态列的时候 每次数据变得都得重新请求一次下拉数据
// this.initTableColumnsControl()
}
this.setCellDetailStyle(cellDetailStyle)
this.dtlDialogFormDisAbled = this.disabledItem(this.configData)
},
getHeaderCellStyle(datas) {
if (!datas.length) return
if (datas[0]._headerCellStyleSetting_) {
const _headerCellStyleSetting_ = datas[0]._headerCellStyleSetting_
this.headerCellStyleSetting_ = _headerCellStyleSetting_
}
},
setHeaderAnynsProp(data) {
data.forEach((item, index) => {
if (item.prop === '*') {
// 获取所有的动态列
const anyncProp = this.getAsyncProp(this.tableDataFirst, data)
anyncProp.forEach(item_ => {
// item.showType = 'input'
this.$set(item_, 'showType', item.showType)
})
// 删除那一带*的行 替换成动态列
data.splice(index, 1, ...anyncProp)
}
})
},
getAsyncProp(tableDataFirst, columnsProp = []) {
if (!tableDataFirst) return []
const props = Object.keys(tableDataFirst)
// 已经手动设置存在的表表头
const constProps = []
if (columnsProp.length) {
columnsProp.forEach(item => {
if (item.prop !== '*') {
constProps.push(item.prop)
}
})
}
// 动态设置1维表头
const constProps_ = []
props.forEach(prop => {
if (!prop.includes('__') && !prop.startsWith('_') && !prop.includes('_data_') && prop !== 'isSelected') {
constProps_.push({
prop: prop,
label: prop,
'showOverflowTooltip': true
})
} else if (prop.includes('__')) {
const one_title = prop.split('__')[0]
const target = columnsProp.find(p => p.prop.split('__')[0] === one_title)
if (target) return
const one_title_list = props.filter(item => item.split('__')[0] === one_title)
const one_title_list_prop = []
one_title_list.forEach(item => {
one_title_list_prop.push({
prop: item,
label: item,
'showOverflowTooltip': true
})
})
const t = constProps_.find(item => item.prop === one_title)
if (!t) {
constProps_.push({
prop: one_title,
label: one_title,
childs: one_title_list_prop
})
}
}
})
const result = constProps_.filter(item => !constProps.includes(item.prop))
return result || []
},
groupByProp(list) {
const parms = []
list.forEach(item => {
// const itemProp = item.prop
// if (!itemProp) {
// item.prop = item.label
// }
if (!item.prop) {
item.prop = ''
}
const prop = item.prop.split('__')[0]
if (item.prop.includes('__')) {
// const prop = item.prop.split('__')[0]
const t = parms.find(jtem => jtem.prop === prop)
if (t) {
t.childs.push(item)
} else {
const obj = {
prop: '',
label: '',
childs: []
}
obj.prop = prop
obj.label = prop
obj.childs.push(item)
parms.push(obj)
}
} else {
parms.push(item)
}
})
return parms
},
tansFormAsyncProps(list) {
const rasyncProps = _(list).groupBy(item => item.split('__')[0]).value()
const Keys = Object.keys(rasyncProps)
const result = []
Keys.forEach(k => {
const obj = {
prop: '',
label: '',
'showOverflowTooltip': true,
childs: []
}
obj.prop = k
obj.label = k
rasyncProps[k].forEach(i => {
obj.childs.push({
prop: i,
label: i,
'showOverflowTooltip': true
})
})
result.push(obj)
})
return result
},
getTableHeader(data = this.tableData) {
if (!data.length) return []
const props = Object.keys(data[0])
let __list = []
const list = []
props.forEach((prop, index) => {
if (prop.includes('__') && !prop.includes('_data_')) {
__list.push(prop)
delete props[index]
} else if (!prop.startsWith('_') && !prop.includes('_data_') && prop !== 'isSelected') {
list.push(prop)
}
})
if (__list.length) {
__list = _(__list).groupBy(item => item.split('__')[0]).value()
}
list.push(__list)
return list
},
getDefaultConfig(config = {}) {
let _config = {}
if (config.hsConfig !== undefined && config.hsConfig.default_type + '' === '1') {
// mes样式
_config = this.config_merge(mes_style, config)
} else {
// 大屏样式
_config = this.config_merge(screen_style, config)
}
if (_config.queryBiTheme) {
sessionStorage['queryBiTheme_'] = JSON.stringify(_config.queryBiTheme)
}
return _config
},
config_merge(defaultConfig, config) {
if (!Object.keys(config).length) {
return defaultConfig
}
const _defaultConfig = _.cloneDeep(defaultConfig)
for (const key1 in _defaultConfig) {
if (typeof _defaultConfig[key1] === 'object') {
for (const key2 in _defaultConfig[key1]) {
if (config[key1] !== undefined && config[key1][key2] !== undefined) {
_defaultConfig[key1][key2] = config[key1][key2]
}
}
} else if (Array.isArray(_defaultConfig[key1])) {
_defaultConfig[key1] = config[key1]
} else {
if (config[key1] !== undefined) {
_defaultConfig[key1] = config[key1]
}
}
}
Object.keys(config).forEach(item => {
if (!(item in _defaultConfig)) {
_defaultConfig[item] = config[item]
}
})
return _defaultConfig
},
setRowSelect(row, f) {
this.tableData.forEach(item => {
if (item.isSelected) {
this.$set(item, 'isSelected', false)
}
})
row.isSelected = true
this.$refs.hsTable.clearSelection()
this.$refs.hsTable.setCurrentRow(row)
this.$refs.hsTable.toggleRowSelection(row)
this.targetRowInner = row
},
tableRowClick(row, column, event) {
this.$emit('RowClick', {
row: row,
column: column,
event: event
})
},
// 单击某个单元格的时候 弹出明细
tableCellClick(row, column, cell, event) {
this.setRowSelect(row)
const key = column.label
const { property } = column
const target = this.columnsConfig.find(item => item.prop === property)
if (target && (target.type === 'hyperlink' || target.type === 'asyncQueryDetail')) {
let value_ = row[property]
const otherConfig = target.otherConfig
if (otherConfig && !otherConfig.startsWith('/') && !otherConfig.startsWith('http')) {
value_ = row[target.otherConfig]
} else if (otherConfig) {
value_ = otherConfig
}
const reg = /\{(.*?)\}/g // /(?<=\{).*?(?=\})/g
const queryList = value_.match(reg) || []// value_.match(/(?<=\{).*?(?=\})/g) || [] // value_.match(reg) || [] //
queryList.forEach(p => {
const p_ = p.replace('{', '').replace('}', '')
const pt = row[p_]
value_ = value_.replace(`{${p_}}`, pt)
})
const origin = location.origin
let url = value_
if (value_.startsWith('http')) {
url = value_
} else if (value_.startsWith('/')) {
url = origin + '/#' + value_
}
if (target.type === 'hyperlink') {
window.open(url, '_blank')
} else if (target.type === 'asyncQueryDetail') {
const property = column.property
if (row[property]) {
this.pageSrc = url
this.dialogVisiblePage = true
}
}
}
if (row[`_data_${key}`]) {
this.detailVisible = true
const _data_value = row[`_data_${key}`]
this.tableDataDetail = _data_value
} else {
this.$emit('CellClick', {
row: row,
column: column,
cell: cell,
event: event
})
}
},
// 鼠标移入事件
tableCellmouse(row, column, cell, event) {
if (this.configData.hover) {
const { hoverBackground } = this.configData.hover
if (hoverBackground) {
cell.parentNode.style.background = hoverBackground
}
}
},
// 鼠标离开事件
tableCelleave(row, column, cell, event) {
const { property } = column
const { _styleCellSetting_, _styleRowSetting_ } = row
const _styleRowSetting__ = _styleRowSetting_ || {}
const cellStyel = {}
if (_styleCellSetting_) {
const keys = Object.keys(_styleCellSetting_)
const targetKey = keys.find(k => k === property)
if (targetKey) {
Object.assign(cellStyel, _styleCellSetting_[property])
}
}
// this.detailVisible2 = false
if (this.configData.hover) {
const { leaveBackground } = this.configData.hover
if (leaveBackground) {
if (_styleRowSetting__.background) {
cell.parentNode.style.background = _styleRowSetting__.background
} else {
cell.parentNode.style.background = leaveBackground
}
}
}
},
handleSizeChange(pageSize) {
this.paginationPageSize = parseInt(pageSize)
if (this.paginationPage !== 1) {
this.paginationPage = 1
}
this.$emit('paginationFun', {
elInfo: this.elInfo, // 此处把组件信息返回出去 方便queryBi统一处理
pageSize: this.paginationPageSize,
page: this.paginationPage
})
},
// 当前页 change cb
handleCurrentChange(currentPage) {
this.paginationPage = parseInt(currentPage)
this.$emit('paginationFun', {
elInfo: this.elInfo,
pageSize: this.paginationPageSize,
page: this.paginationPage
})
},
// 轮播table数据
changeTableDataFun() {
if (this.currentPage === this.page) {
this.currentPage = 0
}
this.grouptableData = this.pageArr[this.currentPage]
this.currentPage = this.currentPage + 1
},
boxEventMouse(event) {
const that = this
event.stopPropagation()
if (event.shiftKey && event.altKey && !event.ctrlKey) {
that.jsoneditorVisible = true
}
},
// 弹出可编辑的弹框
showEditJsonDialog() {
this.outBoxDom = document.getElementById(this.elId)
if (this.outBoxDom) {
this.maxHeight_ = this.outBoxDom.offsetHeight
this.outBoxDom.addEventListener('mousedown', this.boxEventMouse)
}
},
// 修改表头行的样式
setHeaderRowStyle(rowData) {
const headerRowStyle = this.configData.headerRowStyle || {}
return typeof headerRowStyle === 'string' ? JSON.parse(headerRowStyle) : headerRowStyle
},
// 修改表头单元格样式 会合并行的样式
setHeaderCellStyle(rowData) {
const { column } = rowData
const headerCellStyle = this.configData.headerCellStyle || {}
const { property } = column
// 这是后台设置的表头单元格子数据
const commonStyle_ = this.headerCellStyleSetting_.commonStyle || {}
const data_ = this.headerCellStyleSetting_.data || []
const target = data_.find(item => item.property === property)
let targetStyle_ = {}
if (target && target.style) {
targetStyle_ = target.style
}
const commonStyle = headerCellStyle.commonStyle || {}
const data = headerCellStyle.data || []
const targetProp = data.find(item => item.property === property)
let targetPropStyle = {}
if (targetProp && targetProp.style) {
targetPropStyle = targetProp.style
}
const result = Object.assign(_.cloneDeep(commonStyle), _.cloneDeep(targetPropStyle), _.cloneDeep(commonStyle_), targetStyle_)
return result
},
setRowStyle(rowData) {
const { rowStyle, onlyDataStyleRow } = this.configData
const { rowIndex, row } = rowData
const data_style = _.cloneDeep(this.set_row_style(row) || {})// 数据样式
const _styleRowSetting_ = row._styleRowSetting_ || {}
const _styleRowSetting_P = typeof _styleRowSetting_ === 'string' ? JSON.parse(_styleRowSetting_) : _styleRowSetting_
// 如果设置了这个参数 仅仅数据样式生效
if (onlyDataStyleRow) {
return Object.assign(_.cloneDeep(_styleRowSetting_P), _.cloneDeep(data_style))
}
if (rowStyle) { // 合并本地默认样式+手动设置样式+后台返回样式
const { commonStyle, data } = rowStyle
const data_ = data || []
let targetRowIndexStyle = {}
const targetRow = data_.find(item => parseInt(item.rowIndex) === rowIndex)
if (targetRow) { targetRowIndexStyle = targetRow.style }
const result = Object.assign(_.cloneDeep(commonStyle), _.cloneDeep(targetRowIndexStyle), _.cloneDeep(_styleRowSetting_), _.cloneDeep(data_style))
return result
} else { // 只有后台样式或者没有任何样式
const result = Object.assign(_.cloneDeep(_styleRowSetting_P), _.cloneDeep(data_style))
return result
}
},
setCellStyle(cellData) {
const { column, columnIndex, row, rowIndex } = cellData
const { property } = column // 对应的列名
// 后端返回的样式
const _styleCellSetting_ = row._styleCellSetting_ || {} // 对应行 所有列的样式汇总
// 前端config中设置的样式
const { onlyDataStyleCell, cellStyle, columnStyle } = this.configData
let cellDataStyle = {}// 数据中的样式
let config_columnStyle = {} // config中的columnStyle的样式
let config_cellStyle = {}// config中的cellStyle的样式
let columnsConfig_columnStyle = {} // columnsConfig数据列配置中的columnStyle
let columnsConfig_otherStyle = {} // 其他样式
const _styleCellSetting_P = typeof _styleCellSetting_ === 'string' ? JSON.parse(_styleCellSetting_) : _styleCellSetting_
const keys = Object.keys(_styleCellSetting_P)
const targetKey = keys.find(k => k === property)
// 附加样式 如超链接 配置中columnsConfig
const otherStyle = this.columnsConfig.find(item => item.prop === property)
if (otherStyle && (otherStyle.type === 'hyperlink' || otherStyle.type === 'asyncQueryDetail')) {
columnsConfig_otherStyle = this.subjoinStyle[otherStyle.type] || {}
}
if (otherStyle && otherStyle.columnStyle) {
columnsConfig_columnStyle = otherStyle.columnStyle || {}
}
if (targetKey) {
cellDataStyle = _styleCellSetting_P[property]
}
if (onlyDataStyleCell) { // 仅仅 数据样式生效本地样式不生效
return cellDataStyle
}
if (columnStyle) { // config中的columnStyle的样式的时候
const { data, commonStyle: commonColumnStyle } = columnStyle
const data_ = data
const commonColumnStyle_ = _.cloneDeep(commonColumnStyle || {})
const targetColumn = data_.find(item => item.property === property)
let targetColumnStyle = {}
if (targetColumn && targetColumn.style) {
targetColumnStyle = targetColumn.style
}
config_columnStyle = Object.assign(commonColumnStyle_, targetColumnStyle)
}
if (cellStyle) {
const { commonStyle: commonCellStyle, data } = cellStyle
const data_ = data || []
const commonCellStyle_ = _.cloneDeep(commonCellStyle || {})
let targetCellIndexStyle = {}
const targetCell = data_.find(item => parseInt(item.rowIndex) === rowIndex && (item.property === property || parseInt(item.columnIndex) === columnIndex))
if (targetCell) targetCellIndexStyle = _.cloneDeep(targetCell.style || {})
config_cellStyle = Object.assign(commonCellStyle_, targetCellIndexStyle)
}
return Object.assign(config_columnStyle, config_cellStyle, cellDataStyle, columnsConfig_otherStyle, columnsConfig_columnStyle)
},
alterConfigAction() {
if (this.configData.tableStyle) {
this.tableStyle = JSON.stringify(this.configData.tableStyle).replace(new RegExp('\"', 'g'), '').replace(new RegExp('{', 'g'), '').replace(new RegExp('\,', 'g'), ';').replace(new RegExp('}', 'g'), ';')
}
if (this.configData.imgStyle) {
this.imgStyle = JSON.stringify(this.configData.imgStyle).replace(new RegExp('\"', 'g'), '').replace(new RegExp('{', 'g'), '').replace(new RegExp('\,', 'g'), ';').replace(new RegExp('}', 'g'), ';')
}
if (this.configData.gutter) {
var tableId = document.getElementById(this.elId)
if (!tableId) return
var gutterArr = tableId.getElementsByClassName('gutter')
if ((gutterArr && !gutterArr.length) || !gutterArr) return
gutterArr[0].style.background = this.configData.gutter.background
gutterArr[0].style.border = this.configData.gutter.border
gutterArr[0].style.borderTop = this.configData.gutter.borderTop
gutterArr[0].style.borderBottom = this.configData.gutter.borderBottom
gutterArr[0].style.borderLeft = this.configData.gutter.borderLeft
gutterArr[0].style.borderRight = this.configData.gutter.borderRight
}
},
setCellDetailStyle(data = {}) {
// const { headerRowStyle, rowStyle } = data
this.cellDetailStyle = data
},
setCellHeaderRowStyle() {
const { headerRowStyle } = this.cellDetailStyle
return headerRowStyle || {}
},
setCellRowStyle() {
const { rowStyle } = this.cellDetailStyle
return rowStyle || {}
}
}
}
</script>
<style>
.activeBottomSort{
border-bottom-color: #1f5ede !important;
}
.activeTopSort{
border-top-color: #1f5ede !important;
}
._hs_table .el-table--border {
border: 1px solid #EBEEF5 !important;
}
/* 禁止掉默认的hover事件 */
._hs_table .el-table--striped .el-table__body tr.current-row > td,
._hs_table .el-table__body tr.hover-row.current-row > td,
._hs_table .el-table__body tr.hover-row.el-table__row--striped.current-row > td,
._hs_table .el-table__body tr.hover-row.el-table__row--striped > td,
._hs_table .el-table__body tr.hover-row > td {
background-color: transparent !important;
}
._hs_table .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: transparent !important;
}
/* 去除表格边框线 */
._hs_table .el-table::before,
._hs_table .el-table::after {
height: 0 !important;
}
._hs_table body .el-table th.gutter {
display: table-cell !important;
}
.paginationBox{
display: flex;
justify-content: flex-end;
}
/*滑块轨道*/
._hs_table .el-table__body-wrapper::-webkit-scrollbar {
width: 8px;
height: 8px;
}
._hs_table .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #ddd;
border-radius: 3px;
}
/*轨道*/
._hs_table .el-table__body-wrapper::-webkit-scrollbar-track {
box-shadow: none;
-webkit-box-shadow: none;
border-radius: 0;
background: transparent;
}
._hs_table .el-table::-webkit-scrollbar-track{
/*滚动条里面轨道*/
box-shadow: none;
-webkit-box-shadow: none;
border-radius: 0;
background: transparent;
}
._hs_table .el-table::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 0;
box-shadow: none;
-webkit-box-shadow: none;
opacity: 0.7;
}
.addtableFooterWrapper {
margin-top: -57px;
}
.addtableBodyWrapper{
padding-bottom: 49px;
}
._hs_table ::-webkit-scrollbar
{
width: 0px;
background-color: transparent
}
.closeAllItem {
padding: 3px;
cursor: pointer;
font-size: 10px;
}
.paginationBox .el-input__inner{
border: 1px solid #DCDFE6 !important;
border-radius: 4px;
background-color: #FFF;
background-image: none;
}
.elLink{
margin: 0 3px;
font-size: 12px;
}
.toolsBox{
float: right;
top: 34px;
position: relative;
z-index: 1009;
opacity: 0.8;
}
</style>