445 lines
15 KiB
Java
445 lines
15 KiB
Java
<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="table.columns"
|
||
:dataSource="table.dataSource"
|
||
:pagination="table.pagination"
|
||
:loading="table.loading"
|
||
:rowSelection="{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 } from '@/api/manage'
|
||
import {filterObj} from '@/utils/util'
|
||
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
|
||
import { httpGroupRequest } from '@/api/GroupRequest.js'
|
||
import md5 from 'md5'
|
||
|
||
const MODAL_WIDTH = 1200;
|
||
export default {
|
||
name: 'JPopupOnlReport',
|
||
props: ['multi', 'code', 'sorter', 'groupId', 'param'],
|
||
components:{
|
||
},
|
||
data(){
|
||
return {
|
||
visible:false,
|
||
title:"",
|
||
confirmLoading:false,
|
||
queryInfo:[],
|
||
toggleSearchStatus:false,
|
||
queryParam:{
|
||
|
||
},
|
||
dictOptions: {},
|
||
url: {
|
||
getColumns: '/online/cgreport/api/getRpColumns/',
|
||
getData: '/online/cgreport/api/getData/',
|
||
getQueryInfo: '/online/cgreport/api/getQueryInfo/'
|
||
},
|
||
table: {
|
||
loading: true,
|
||
// 表头
|
||
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:"",
|
||
modalWidth:MODAL_WIDTH,
|
||
tableScroll:{x:true},
|
||
dynamicParam:{},
|
||
// 排序字段，默认无排序
|
||
iSorter: null,
|
||
}
|
||
},
|
||
mounted() {
|
||
//this.loadColumnsInfo()
|
||
},
|
||
watch: {
|
||
code() {
|
||
this.loadColumnsInfo()
|
||
},
|
||
param:{
|
||
deep:true,
|
||
handler(){
|
||
// update--begin--autor:liusq-----date:20210706------for：JPopup组件在modal中使用报错#2729------
|
||
if(this.visible){
|
||
this.dynamicParamHandler()
|
||
this.loadData();
|
||
}
|
||
// update--begin--autor:liusq-----date:20210706------for：JPopup组件在modal中使用报错#2729------
|
||
},
|
||
},
|
||
sorter: {
|
||
immediate: true,
|
||
handler() {
|
||
if (this.sorter) {
|
||
let arr = this.sorter.split('=')
|
||
if (arr.length === 2 && ['asc', 'desc'].includes(arr[1].toLowerCase())) {
|
||
this.iSorter = {column: arr[0], order: arr[1].toLowerCase()}
|
||
// 排序字段受控
|
||
this.table.columns.forEach(col => {
|
||
if (col.dataIndex === this.iSorter.column) {
|
||
this.$set(col, 'sortOrder', this.iSorter.order === 'asc' ? 'ascend' : 'descend')
|
||
} else {
|
||
this.$set(col, 'sortOrder', false)
|
||
}
|
||
})
|
||
} else {
|
||
console.warn('【JPopup】sorter参数不合法')
|
||
}
|
||
}
|
||
},
|
||
},
|
||
},
|
||
computed:{
|
||
showSearchFlag(){
|
||
return this.queryInfo && this.queryInfo.length>0
|
||
}
|
||
},
|
||
methods:{
|
||
loadColumnsInfo(){
|
||
let url = `${this.url.getColumns}${this.code}`
|
||
//缓存key
|
||
let groupIdKey
|
||
if (this.groupId) {
|
||
groupIdKey = this.groupId + url
|
||
}
|
||
httpGroupRequest(() => getAction(url), groupIdKey).then(res => {
|
||
if(res.success){
|
||
this.initDictOptionData(res.result.dictOptions);
|
||
this.cgRpConfigId = res.result.cgRpConfigId
|
||
this.title = res.result.cgRpConfigName
|
||
let currColumns = res.result.columns
|
||
for(let a=0;a<currColumns.length;a++){
|
||
if(currColumns[a].customRender){
|
||
let dictCode = currColumns[a].customRender;
|
||
currColumns[a].customRender=(text)=>{
|
||
return filterMultiDictText(this.dictOptions[dictCode], text+"");
|
||
}
|
||
}
|
||
// 排序字段受控
|
||
if (this.iSorter && currColumns[a].dataIndex === this.iSorter.column) {
|
||
currColumns[a].sortOrder = this.iSorter.order === 'asc' ? 'ascend' : 'descend'
|
||
}
|
||
}
|
||
this.table.columns = [...currColumns]
|
||
this.initQueryInfo()
|
||
}
|
||
})
|
||
},
|
||
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.dynamicParamHandler(res.result)
|
||
this.queryInfo = res.result
|
||
//查询条件加载后再请求数据
|
||
this.loadData(1)
|
||
} else {
|
||
this.$message.warning(res.message)
|
||
}
|
||
})
|
||
},
|
||
//处理动态参数
|
||
dynamicParamHandler(arr){
|
||
if(arr && arr.length>0){
|
||
//第一次加载查询条件前 初始化queryParam为空对象
|
||
let queryTemp = {}
|
||
for(let item of arr){
|
||
if(item.mode==='single'){
|
||
queryTemp[item.field] = ''
|
||
}
|
||
}
|
||
this.queryParam = {...queryTemp}
|
||
}
|
||
let dynamicTemp = {}
|
||
if(this.param){
|
||
Object.keys(this.param).map(key=>{
|
||
let str = this.param[key]
|
||
if(key in this.queryParam){
|
||
if(str && str.startsWith("'") && str.endsWith("'")){
|
||
str = str.substring(1,str.length-1)
|
||
}
|
||
//如果查询条件包含参数 设置值
|
||
this.queryParam[key]=str
|
||
}
|
||
dynamicTemp[key] = this.param[key]
|
||
})
|
||
}
|
||
this.dynamicParam = {...dynamicTemp}
|
||
},
|
||
loadData(arg) {
|
||
if (arg == 1) {
|
||
this.table.pagination.current = 1
|
||
}
|
||
let params = this.getQueryParams();//查询条件
|
||
this.table.loading = true
|
||
let url = `${this.url.getData}${this.cgRpConfigId}`
|
||
//缓存key
|
||
let groupIdKey
|
||
if (this.groupId) {
|
||
groupIdKey = this.groupId + url + JSON.stringify(params)
|
||
}
|
||
httpGroupRequest(() => getAction(url, params), groupIdKey).then(res => {
|
||
this.table.loading = false
|
||
// console.log("daa",res)
|
||
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 paramTarget = {}
|
||
if(this.dynamicParam){
|
||
//处理自定义参数
|
||
Object.keys(this.dynamicParam).map(key=>{
|
||
paramTarget['self_'+key] = this.dynamicParam[key]
|
||
})
|
||
}
|
||
let param = Object.assign(paramTarget, this.queryParam, this.iSorter);
|
||
param.pageNo = this.table.pagination.current;
|
||
param.pageSize = this.table.pagination.pageSize;
|
||
return filterObj(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) {
|
||
//分页、排序、筛选变化时触发
|
||
if (Object.keys(sorter).length > 0) {
|
||
this.iSorter = {
|
||
column: sorter.field,
|
||
order: 'ascend' === sorter.order ? 'asc' : 'desc'
|
||
}
|
||
// 排序字段受控
|
||
this.table.columns.forEach(col => {
|
||
if (col.dataIndex === sorter.field) {
|
||
this.$set(col, 'sortOrder',sorter.order)
|
||
} else {
|
||
this.$set(col, 'sortOrder', false)
|
||
}
|
||
})
|
||
}
|
||
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);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
//防止字典中有垃圾数据
|
||
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> |