<template>
<j-modal
:title="title"
:width="modalWidth"
:visible="visible"
:confirmLoading="confirmLoading"
switchFullscreen
wrapClassName="j-popup-modal"
@ok="handleSubmit"
@cancel="handleCancel"
cancelText="关闭">
<!-- <div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchByquery">
<a-row :gutter="24" v-if="showSearchFlag">
<template v-for="(item,index) in queryInfo">
<template v-if=" item.hidden==='1' ">
<a-col :md="8" :sm="24" :key=" 'query'+index " v-show="toggleSearchStatus">
<online-query-form-item :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></online-query-form-item>
</a-col>
</template>
<template v-else>
<a-col :md="8" :sm="24" :key=" 'query'+index ">
<online-query-form-item :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></online-query-form-item>
</a-col>
</template>
</template>
<a-col :md="8" :sm="8">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchByquery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
<a @click="handleToggleSearch" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
</a>
</span>
</a-col>
</a-row>
</a-form>
</div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i>
已选择 <a style="font-weight: 600">{{ table.selectedRowKeys.length }}</a>项
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
<a v-if="!showSearchFlag" style="margin-left: 24px" @click="onlyReload">刷新</a>
</div> -->
<a-table
ref="table"
size="middle"
bordered
:rowKey="combineRowKey"
:columns="columns"
:dataSource="table.dataSource"
:pagination="table.pagination"
:loading="table.loading"
:rowSelection="{type:rowSelectionType,fixed:true,selectedRowKeys: table.selectedRowKeys, onChange: handleChangeInTableSelect}"
@change="handleChangeInTable"
style="min-height: 300px"
:scroll="tableScroll"
:customRow="clickThenCheck">
</a-table>
</j-modal>
</template>
<script>
import { getAction, postAction } from '@/api/manage'
import {filterObj} from '@/utils/util'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import { httpGroupRequest } from '@/api/GroupRequest.js'
import md5 from 'md5'
export default {
name: 'JPopupOnlReport',
props: ['title','url', 'columns', 'multi', 'modalWidth'],
data(){
return {
visible:false,
confirmLoading: false,
queryInfo:[],
toggleSearchStatus:false,
queryParam:{
},
dictOptions: {},
table: {
loading: false,
// 表头
columns: [],
//数据集
dataSource: [],
// 选择器
selectedRowKeys: [],
selectionRows: [],
// 分页参数
pagination: {
current: 1,
pageSize: 10,
pageSizeOptions: ['10', '20', '30'],
showTotal: (total, range) => {
return range[0] + '-' + range[1] + ' 共' + total + '条'
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
}
},
cgRpConfigId:"",
tableScroll:{x:true}
}
},
mounted() {
this.loadData();
},
computed:{
showSearchFlag(){
return this.queryInfo && this.queryInfo.length>0
},
// 行选择框类型，根据是否多选来控制显示为单选框还是多选框
rowSelectionType() {
return this.multi ? 'checkbox' : 'radio'
},
},
methods:{
loadColumnsInfo(){
httpGroupRequest(() => getAction(this.url)).then(res => {
if(res.success){
if(res.result.length > 0){
this.table.dataSource = res.result
}else if(res.result.records.length > 0){
this.table.dataSource = res.result.records
}
} else {
this.$error({
title: '出错了',
content: (<p>Popup初始化失败，请检查你的配置或稍后重试！<br/>错误信息如下：{res.message}</p>),
onOk: () => this.close()
})
}
})
},
initQueryInfo() {
let url = `${this.url.getQueryInfo}${this.cgRpConfigId}`
//缓存key
let groupIdKey
if (this.groupId) {
groupIdKey = this.groupId + url
}
httpGroupRequest(() => getAction(url), groupIdKey).then((res) => {
// console.log("获取查询条件", res);
if (res.success) {
this.queryInfo = res.result
//查询条件加载后再请求数据
this.loadData(1)
} else {
this.$message.warning(res.message)
}
})
},
loadData(arg) {
if (arg == 1) {
this.table.pagination.current = 1
}
let params = this.getQueryParams();//查询条件
this.table.loading = true
httpGroupRequest(() => getAction(this.url, params)).then(res => {
this.table.loading = false
let data = res.result
if (data) {
this.table.pagination.total = Number(data.total)
this.table.dataSource = data.records
} else {
this.table.pagination.total = 0
this.table.dataSource = []
}
})
},
getQueryParams() {
let param = {}
param.pageNo = this.table.pagination.current;
param.pageSize = this.table.pagination.pageSize;
return param
},
handleChangeInTableSelect(selectedRowKeys, selectionRows) {
//update-begin-author:taoyan date:2020902 for:【issue】开源online的几个问题 LOWCOD-844
if(!selectedRowKeys || selectedRowKeys.length==0){
this.table.selectionRows = []
}else if(selectedRowKeys.length == selectionRows.length){
this.table.selectionRows = selectionRows
}else{
//当两者长度不一的时候 需要判断
let keys = this.table.selectedRowKeys
let rows = this.table.selectionRows;
//这个循环 添加新的记录
for(let i=0;i<selectionRows.length;i++){
let combineKey = this.combineRowKey(selectionRows[i])
if(keys.indexOf(combineKey)<0){
//如果 原来的key 不包含当前记录 push
rows.push(selectionRows[i])
}
}
//这个循环 移除取消选中的数据
this.table.selectionRows = rows.filter(item=>{
let combineKey = this.combineRowKey(item)
return selectedRowKeys.indexOf(combineKey)>=0
})
}
//update-end-author:taoyan date:2020902 for:【issue】开源online的几个问题 LOWCOD-844
this.table.selectedRowKeys = selectedRowKeys
},
handleChangeInTable(pagination, filters, sorter) {
this.table.pagination = pagination
this.loadData()
},
handleCancel() {
this.close()
},
handleSubmit() {
if(!this.multi){
if(this.table.selectionRows && this.table.selectionRows.length>1){
this.$message.warning("请选择一条记录")
return false
}
}
if(!this.table.selectionRows || this.table.selectionRows.length==0){
this.$message.warning("请选择一条记录")
return false
}
this.$emit('ok', this.table.selectionRows);
this.close()
},
close() {
this.$emit('close');
this.visible = false;
this.onClearSelected()
},
show(){
this.visible = true
this.loadColumnsInfo()
},
handleToggleSearch(){
this.toggleSearchStatus = !this.toggleSearchStatus;
},
searchByquery(){
this.loadData(1);
},
onlyReload(){
this.loadData();
},
searchReset(){
Object.keys(this.queryParam).forEach(key=>{
this.queryParam[key]=""
})
this.loadData(1);
},
onClearSelected(){
this.table.selectedRowKeys = []
this.table.selectionRows = []
},
combineRowKey(record){
let res = ''
Object.keys(record).forEach(key=>{
//update-begin---author:liusq Date:20210203 for：pop选择器列主键问题 issues/I29P9Q------------
if(key=='id'){
res=record[key]+res
}else{
res+=record[key]
}
//update-end---author:liusq Date:20210203 for：pop选择器列主键问题 issues/I29P9Q------------
})
// update-begin---author:taoyan Date:20211025 for：jpopup 表格key重复BUG /issues/3121
res = md5(res)
/*if(res.length>50){
res = res.substring(0,50)
}*/
// update-end---author:taoyan Date:20211025 for：jpopup 表格key重复BUG /issues/3121
return res
},
clickThenCheck(record){
return {
on: {
click: () => {
let rowKey = this.combineRowKey(record)
if(!this.table.selectedRowKeys || this.table.selectedRowKeys.length==0){
let arr1=[],arr2=[]
arr1.push(record)
arr2.push(rowKey)
this.table.selectedRowKeys=arr2
this.table.selectionRows=arr1
}else{
if(this.table.selectedRowKeys.indexOf(rowKey)<0){
this.table.selectedRowKeys.push(rowKey)
this.table.selectionRows.push(record)
}else{
let rowKey_index = this.table.selectedRowKeys.indexOf(rowKey)
this.table.selectedRowKeys.splice(rowKey_index,1);
this.table.selectionRows.splice(rowKey_index,1);
}
}
// 判断是否允许多选，如果不允许多选，就只存储最后一个选中的行
if (!this.multi && this.table.selectedRowKeys.length > 1) {
this.table.selectionRows = [this.table.selectionRows.pop()]
this.table.selectedRowKeys = [this.table.selectedRowKeys.pop()]
}
}
}
}
},
//防止字典中有垃圾数据
initDictOptionData(dictOptions){
let obj = { }
Object.keys(dictOptions).map(k=>{
obj[k] = dictOptions[k].filter(item=>{
return item!=null
});
});
this.dictOptions = obj
}
}
}
</script>
<style scoped>
</style>