mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2026-01-04 04:45:28 +08:00
2.1.3 大屏版本发布
This commit is contained in:
@ -179,6 +179,9 @@
|
||||
if(text=='3') {
|
||||
return "微信";
|
||||
}
|
||||
if(text=='4') {
|
||||
return "系统";
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -10,50 +10,70 @@
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="模板CODE">
|
||||
<a-input
|
||||
:disabled="disable"
|
||||
placeholder="请输入模板编码"
|
||||
v-decorator="['templateCode', validatorRules.templateCode ]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="模板标题">
|
||||
<a-input
|
||||
placeholder="请输入模板标题"
|
||||
v-decorator="['templateName', validatorRules.templateName]"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="模板类型">
|
||||
<j-dict-select-tag @change="handleChangeTemplateType" :triggerChange="true" dictCode="msgType" v-decorator="['templateType', validatorRules.templateType ]" placeholder="请选择模板类型">
|
||||
</j-dict-select-tag>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-show="!useEditor"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="模板内容">
|
||||
<a-textarea placeholder="请输入模板内容" v-decorator="['templateContent', validatorRules.templateContent ]" :autosize="{ minRows: 8, maxRows: 8 }" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-show="useEditor"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="模板内容">
|
||||
<j-editor v-model="templateEditorContent"></j-editor>
|
||||
</a-form-item>
|
||||
<a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="模板CODE"
|
||||
style="margin-right: -35px"
|
||||
>
|
||||
<a-input
|
||||
:disabled="disable"
|
||||
placeholder="请输入模板编码"
|
||||
v-decorator="['templateCode', validatorRules.templateCode ]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="模板类型">
|
||||
<j-dict-select-tag @change="handleChangeTemplateType" :triggerChange="true" dictCode="msgType" v-decorator="['templateType', validatorRules.templateType ]" placeholder="请选择模板类型">
|
||||
</j-dict-select-tag>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="form-row" :gutter="24" >
|
||||
<a-col :span="24" pull="2">
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="模板标题"
|
||||
style="margin-left: -15px">
|
||||
<a-input
|
||||
placeholder="请输入模板标题"
|
||||
v-decorator="['templateName', validatorRules.templateName]"
|
||||
style="width: 122%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="form-row" :gutter="24">
|
||||
<a-col :span="24" pull="4">
|
||||
<a-form-item
|
||||
v-show="!useEditor"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="模板内容"
|
||||
style="margin-left: 4px;width: 126%">
|
||||
<a-textarea placeholder="请输入模板内容" v-decorator="['templateContent', validatorRules.templateContent ]" :autosize="{ minRows: 8, maxRows: 8 }"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="form-row" :gutter="24">
|
||||
<a-col :span="24" pull="4">
|
||||
<a-form-item
|
||||
v-show="useEditor"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="模板内容"
|
||||
style="margin-left: 4px;width: 126%">
|
||||
<j-editor v-model="templateEditorContent"></j-editor>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-form>
|
||||
</a-spin>
|
||||
@ -111,7 +131,7 @@
|
||||
edit(record) {
|
||||
this.form.resetFields();
|
||||
this.model = Object.assign({}, record);
|
||||
this.useEditor = (record.templateType==2)
|
||||
this.useEditor = (record.templateType==2 || record.templateType==4)
|
||||
if(this.useEditor){
|
||||
this.templateEditorContent=record.templateContent
|
||||
}else{
|
||||
@ -191,7 +211,7 @@
|
||||
},
|
||||
handleChangeTemplateType(value){
|
||||
//如果是邮件类型那么则改变模板内容是富文本编辑器
|
||||
this.useEditor = value==2
|
||||
this.useEditor = (value==2 || value==4)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -177,7 +177,6 @@
|
||||
import JDictSelectTag from '../../../../components/dict/JDictSelectTag.vue'
|
||||
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
||||
import Clipboard from 'clipboard'
|
||||
|
||||
import { filterObj } from '@/utils/util';
|
||||
|
||||
export default {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<a-card :bordered="false" style="height: 100%">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-form layout="inline" @keyup.enter.native="searchByquery">
|
||||
<a-row :gutter="24" v-if="queryInfo && queryInfo.length>0">
|
||||
<template v-for="(item,index) in queryInfo">
|
||||
<template v-if=" item.hidden==='1' ">
|
||||
@ -63,6 +63,15 @@
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<!-- 高级查询 -->
|
||||
<j-super-query
|
||||
ref="superQuery"
|
||||
:fieldList="superQuery.fieldList"
|
||||
:saveCode="$route.fullPath"
|
||||
:loading="table.loading"
|
||||
style="margin-left: 8px;"
|
||||
@handleSuperQuery="handleSuperQuery"/>
|
||||
|
||||
<a-button
|
||||
v-if="buttonSwitch.batch_delete"
|
||||
@click="handleDelBatch"
|
||||
@ -179,11 +188,10 @@
|
||||
</span>
|
||||
</a-table>
|
||||
|
||||
<onl-cgform-auto-modal @success="handleFormSuccess" ref="modal" :code="code"></onl-cgform-auto-modal>
|
||||
<onl-cgform-auto-modal @success="handleFormSuccess" ref="modal" :code="code" @schema="handleGetSchema" />
|
||||
|
||||
<j-import-modal ref="importModal" :url="getImportUrl()" @ok="importOk"></j-import-modal>
|
||||
|
||||
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
@ -194,10 +202,12 @@
|
||||
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
|
||||
import { filterObj } from '@/utils/util';
|
||||
import JImportModal from '@/components/jeecg/JImportModal'
|
||||
import JSuperQuery from '@comp/jeecg/JSuperQuery'
|
||||
|
||||
export default {
|
||||
name: 'OnlCgFormAutoList',
|
||||
components: {
|
||||
JSuperQuery,
|
||||
JImportModal,
|
||||
},
|
||||
data() {
|
||||
@ -226,9 +236,8 @@
|
||||
cgButtonLinkList:[],
|
||||
cgButtonList:[],
|
||||
queryInfo:[],
|
||||
queryParam:{
|
||||
|
||||
},
|
||||
// 查询参数,多个页面的查询参数用 code 作为键来区分
|
||||
queryParamsMap: {},
|
||||
toggleSearchStatus:false,
|
||||
table: {
|
||||
loading: true,
|
||||
@ -276,7 +285,16 @@
|
||||
export:true
|
||||
},
|
||||
hasBpmStatus:false,
|
||||
checkboxFlag:false
|
||||
checkboxFlag:false,
|
||||
// 高级查询
|
||||
superQuery: {
|
||||
// 字段列表
|
||||
fieldList: [],
|
||||
// 查询参数
|
||||
params: '',
|
||||
// 查询条件拼接方式 'and' or 'or'
|
||||
matchType: 'and'
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -286,7 +304,8 @@
|
||||
this.cgButtonJsHandler('mounted')
|
||||
},
|
||||
watch: {
|
||||
'$route'() {
|
||||
'$route.path'(newVal,oldVal) {
|
||||
console.log('$route.path: ',oldVal)
|
||||
// 刷新参数放到这里去触发,就可以刷新相同界面了
|
||||
this.initAutoList()
|
||||
}
|
||||
@ -301,6 +320,14 @@
|
||||
selectedRowKeys:this.table.selectedRowKeys,
|
||||
onChange: this.handleChangeInTableSelect
|
||||
}
|
||||
},
|
||||
queryParam: {
|
||||
get() {
|
||||
return this.queryParamsMap[this.code]
|
||||
},
|
||||
set(newVal) {
|
||||
this.$set(this.queryParamsMap, this.code, newVal)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -354,8 +381,17 @@
|
||||
if(!this.$route.params.code){
|
||||
return false
|
||||
}
|
||||
// 清空高级查询条件
|
||||
this.superQuery.params = ''
|
||||
if (this.$refs.superQuery) {
|
||||
this.$refs.superQuery.handleReset()
|
||||
}
|
||||
|
||||
this.table.loading = true
|
||||
this.code = this.$route.params.code
|
||||
if (!this.queryParam) {
|
||||
this.queryParam = {}
|
||||
}
|
||||
getAction(`${this.url.getColumns}${this.code}`).then((res)=>{
|
||||
console.log("--onlineList-加载动态列>>",res);
|
||||
if(res.success){
|
||||
@ -415,6 +451,7 @@
|
||||
if(arg==1){
|
||||
this.table.pagination.current=1
|
||||
}
|
||||
this.table.loading = true
|
||||
let params = this.getQueryParams();//查询条件
|
||||
console.log("--onlineList-查询条件-->",params)
|
||||
getAction(`${this.url.getData}${this.code}`,params).then((res)=>{
|
||||
@ -432,6 +469,7 @@
|
||||
}else{
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table.loading = false
|
||||
})
|
||||
}else{
|
||||
@ -439,7 +477,8 @@
|
||||
}
|
||||
},
|
||||
loadDataNoPage(){
|
||||
let param = Object.assign({}, this.queryParam,this.isorter);
|
||||
this.table.loading = true
|
||||
let param = this.getQueryParams()//查询条件
|
||||
param['pageSize'] = -521;
|
||||
getAction(`${this.url.getData}${this.code}`,filterObj(param)).then((res)=>{
|
||||
console.log("--onlineList-列表数据",res)
|
||||
@ -453,6 +492,7 @@
|
||||
}else{
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table.loading = false
|
||||
})
|
||||
},
|
||||
@ -460,6 +500,8 @@
|
||||
let param = Object.assign({}, this.queryParam,this.isorter);
|
||||
param.pageNo = this.table.pagination.current;
|
||||
param.pageSize = this.table.pagination.pageSize;
|
||||
param.superQueryMatchType = this.superQuery.matchType
|
||||
param.superQueryParams = encodeURIComponent(this.superQuery.params)
|
||||
return filterObj(param);
|
||||
},
|
||||
handleChangeInTableSelect(selectedRowKeys, selectionRows) {
|
||||
@ -548,6 +590,49 @@
|
||||
handleFormSuccess(){
|
||||
this.loadData()
|
||||
},
|
||||
// 查询完 schema 后,生成高级查询的字段列表
|
||||
handleGetSchema(schema) {
|
||||
if (schema && schema.properties) {
|
||||
let setField = (array, field) => {
|
||||
let type = field.type || 'string'
|
||||
type = (type === 'inputNumber' ? 'number' : type)
|
||||
array.push({
|
||||
type: type,
|
||||
value: field.key,
|
||||
text: field.title,
|
||||
// 额外字典参数
|
||||
dictCode: field.dictCode,
|
||||
dictTable: field.dictTable,
|
||||
dictText: field.dictText,
|
||||
options: field.enum || field.options
|
||||
})
|
||||
}
|
||||
let fieldList = []
|
||||
for (let key in schema.properties) {
|
||||
if (!schema.properties.hasOwnProperty(key)) {
|
||||
continue
|
||||
}
|
||||
let field = schema.properties[key]
|
||||
// tab = 子表
|
||||
if (field.view === 'tab') {
|
||||
let subTable = {
|
||||
type: 'sub-table',
|
||||
value: field.key,
|
||||
text: field.describe,
|
||||
children: []
|
||||
}
|
||||
for (let column of field.columns) {
|
||||
setField(subTable.children, column)
|
||||
}
|
||||
fieldList.push(subTable)
|
||||
} else {
|
||||
field.key = key
|
||||
setField(fieldList, field)
|
||||
}
|
||||
}
|
||||
this.superQuery.fieldList = fieldList
|
||||
}
|
||||
},
|
||||
onClearSelected(){
|
||||
this.table.selectedRowKeys = []
|
||||
this.table.selectionRows = []
|
||||
@ -700,7 +785,18 @@
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 高级查询
|
||||
handleSuperQuery(params, matchType) {
|
||||
if (!params || params.length === 0) {
|
||||
this.superQuery.params = ''
|
||||
} else {
|
||||
this.superQuery.params = JSON.stringify(params)
|
||||
}
|
||||
this.superQuery.matchType = matchType
|
||||
this.loadData()
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -132,7 +132,6 @@
|
||||
|
||||
<j-import-modal ref="importModal" :url="getImportUrl()" @ok="importOk"></j-import-modal>
|
||||
|
||||
<process-inst-pic-modal ref="processInstPicModal"></process-inst-pic-modal>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
@ -147,7 +146,7 @@
|
||||
export default {
|
||||
name: 'OnlCgformTreeList',
|
||||
components: {
|
||||
JImportModal,
|
||||
JImportModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -692,13 +691,6 @@
|
||||
}
|
||||
});
|
||||
},
|
||||
handlePreviewPic: function(record){
|
||||
var flowCode = this.flowCodePre+this.currentTableName;
|
||||
var dataId = record.id;
|
||||
this.$refs.processInstPicModal.preview(flowCode,dataId);
|
||||
this.$refs.processInstPicModal.title="流程图";
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :span="6">
|
||||
<a-form-item label="报表编码">
|
||||
<a-input placeholder="请输入报表编码" v-model="queryParam.code"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item label="报表名字">
|
||||
<a-input placeholder="请输入报表名字" v-model="queryParam.name"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="8">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">录入</a-button>
|
||||
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="batchDel">
|
||||
<a-icon type="delete"/>
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px"> 批量操作
|
||||
<a-icon type="down"/>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<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">
|
||||
{{ selectedRowKeys.length }}
|
||||
</a>
|
||||
项
|
||||
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
|
||||
<a-divider type="vertical"/>
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item @click="popReportURL(record.id)">
|
||||
配置地址
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a @click="goPageOnline(record.id)">功能测试</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<onlCgreportHead-modal ref="modalForm" @ok="modalFormOk"></onlCgreportHead-modal>
|
||||
|
||||
<!-- 提示online报表链接 -->
|
||||
<a-modal
|
||||
title="报表访问链接"
|
||||
:visible="visible"
|
||||
@cancel="handleCancel">
|
||||
<template slot="footer">
|
||||
<a-button @click="handleCancel">关闭</a-button>
|
||||
<a-button type="primary" class="copy-this-text" :data-clipboard-text="reportUrlText" @click="onCopyUrl">复制</a-button>
|
||||
</template>
|
||||
<p>{{ reportUrlText }}</p>
|
||||
</a-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
||||
import Clipboard from 'clipboard'
|
||||
import { getAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'OnlCgreportHeadList',
|
||||
mixins: [JeecgListMixin],
|
||||
components: {
|
||||
Clipboard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '在线报表配置管理页面',
|
||||
visible:false,
|
||||
reportUrlText:'',
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '报表名称',
|
||||
align: 'center',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '编码',
|
||||
align: 'center',
|
||||
dataIndex: 'code'
|
||||
},
|
||||
{
|
||||
title: '查询SQL',
|
||||
align: 'center',
|
||||
dataIndex: 'cgrSql'
|
||||
},
|
||||
{
|
||||
title: '数据源',
|
||||
align: 'center',
|
||||
dataIndex: 'dbSource'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
align: 'center',
|
||||
dataIndex: 'createTime'
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
align: 'center',
|
||||
dataIndex: 'content'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
url: {
|
||||
list: '/online/cgreport/head/list',
|
||||
delete: '/online/cgreport/head/delete',
|
||||
deleteBatch: '/online/cgreport/head/deleteBatch',
|
||||
getParamsInfo:'/online/cgreport/api/getParamsInfo/'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initReportUrlText(id){
|
||||
getAction(this.url.getParamsInfo+id).then((res) => {
|
||||
let textUrl = ""
|
||||
if (res.success) {
|
||||
if(res.result && res.result.length>0){
|
||||
for(let i of res.result){
|
||||
textUrl+=i.paramName+"=${"+i.paramName+"}&"
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
if(textUrl.length>0){
|
||||
textUrl = textUrl.substring(0,textUrl.length-1)
|
||||
this.reportUrlText = `/online/cgreport/${id}?${textUrl}`
|
||||
}else{
|
||||
this.reportUrlText = `/online/cgreport/${id}`
|
||||
}
|
||||
})
|
||||
},
|
||||
goPageOnline(id){
|
||||
this.$router.push({path: '/online/cgreport/'+id})
|
||||
},
|
||||
popReportURL(id){
|
||||
this.visible = true;
|
||||
this.initReportUrlText(id)
|
||||
},
|
||||
handleCancel(){
|
||||
this.visible = false
|
||||
this.reportUrlText = '';
|
||||
},
|
||||
onCopyUrl(){
|
||||
var clipboard = new Clipboard('.copy-this-text')
|
||||
clipboard.on('success', () => {
|
||||
clipboard.destroy()
|
||||
this.$message.success('复制成功')
|
||||
this.handleCancel()
|
||||
})
|
||||
clipboard.on('error', () => {
|
||||
this.$message.error('该浏览器不支持自动复制')
|
||||
clipboard.destroy()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.ant-card-body .table-operator {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.ant-table-tbody .ant-table-row td {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.anty-row-operator button {
|
||||
margin: 0 5px
|
||||
}
|
||||
|
||||
.ant-btn-danger {
|
||||
background-color: #ffffff
|
||||
}
|
||||
|
||||
.ant-modal-cust-warp {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.ant-modal-cust-warp .ant-modal-body {
|
||||
height: calc(100% - 110px) !important;
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
.ant-modal-cust-warp .ant-modal-content {
|
||||
height: 90% !important;
|
||||
overflow-y: hidden
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<a-card :bordered="false" style="height: 100%">
|
||||
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24" v-if="queryInfo && queryInfo.length>0">
|
||||
<template v-for="(item,index) in queryInfo">
|
||||
<template v-if=" item.hidden==='1' ">
|
||||
<a-col v-if="item.view.indexOf('Date')>=0" :md="12" :sm="16" :key=" 'query'+index " v-show="toggleSearchStatus">
|
||||
<onl-cgreport-query-form-item :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></onl-cgreport-query-form-item>
|
||||
</a-col>
|
||||
<a-col v-else :md="6" :sm="8" :key=" 'query'+index " v-show="toggleSearchStatus">
|
||||
<onl-cgreport-query-form-item :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></onl-cgreport-query-form-item>
|
||||
</a-col>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-col v-if="item.view.indexOf('Date')>=0" :md="12" :sm="16" :key=" 'query'+index ">
|
||||
<onl-cgreport-query-form-item :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></onl-cgreport-query-form-item>
|
||||
</a-col>
|
||||
<a-col v-else :md="6" :sm="8" :key=" 'query'+index ">
|
||||
<onl-cgreport-query-form-item :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></onl-cgreport-query-form-item>
|
||||
</a-col>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<a-col :md="6" :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="table-operator" style="margin-bottom: 10px">
|
||||
<a-button type="primary" icon="plus" @click="exportExcel">导出</a-button>
|
||||
</div>
|
||||
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="table.columns"
|
||||
:dataSource="table.dataSource"
|
||||
:pagination="table.pagination"
|
||||
:loading="table.loading"
|
||||
:scroll="table.scroll"
|
||||
:rowSelection="{fixed:true, selectedRowKeys: table.selectedRowKeys, onChange: handleChangeInTableSelect}"
|
||||
@change="handleChangeInTable"
|
||||
style="min-height: 300px"
|
||||
>
|
||||
|
||||
</a-table>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction,downFile } from '@/api/manage'
|
||||
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
|
||||
import {filterObj} from '@/utils/util';
|
||||
|
||||
export default {
|
||||
name: 'OnlCgreportAutoList',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 查询参数
|
||||
queryInfo: [],
|
||||
// 查询参数,多个页面的查询参数用 code 作为键来区分
|
||||
queryParamsMap: {},
|
||||
selfParam:{
|
||||
},
|
||||
sorter: {
|
||||
column: '',
|
||||
order: 'desc',
|
||||
},
|
||||
dictOptions: {},
|
||||
toggleSearchStatus: false, // 高级搜索 展开/关闭
|
||||
reportCode: '',
|
||||
description: '在线报表功能测试页面',
|
||||
url: {
|
||||
getColumns: '/online/cgreport/api/getColumns/',
|
||||
getData: '/online/cgreport/api/getData/',
|
||||
getQueryInfo: '/online/cgreport/api/getQueryInfo/',
|
||||
getParamsInfo:'/online/cgreport/api/getParamsInfo/'
|
||||
},
|
||||
table: {
|
||||
loading: true,
|
||||
// 表头
|
||||
columns: [],
|
||||
//数据集
|
||||
dataSource: [],
|
||||
// 选择器
|
||||
selectedRowKeys: [],
|
||||
selectionRows: [],
|
||||
scroll: { x: false },
|
||||
// 分页参数
|
||||
pagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
cgreportHeadName:""
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initParamsInfo()
|
||||
this.initQueryInfo();
|
||||
},
|
||||
watch: {
|
||||
'$route'() {
|
||||
// 刷新参数放到这里去触发,就可以刷新相同界面了
|
||||
this.initParamsInfo()
|
||||
this.initQueryInfo();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
queryParam: {
|
||||
get() {
|
||||
return this.queryParamsMap[this.reportCode]
|
||||
},
|
||||
set(newVal) {
|
||||
this.$set(this.queryParamsMap, this.reportCode, newVal)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initParamsInfo(){
|
||||
if(!this.$route.params.code){
|
||||
return false
|
||||
}
|
||||
//获取报表ID
|
||||
this.reportCode = this.$route.params.code;
|
||||
if (!this.queryParam) {
|
||||
this.queryParam = {}
|
||||
}
|
||||
|
||||
this.selfParam={}
|
||||
getAction(`${this.url.getParamsInfo}${this.$route.params.code}`).then((res) => {
|
||||
if (res.success) {
|
||||
if(res.result && res.result.length>0){
|
||||
for(let i of res.result){
|
||||
this.selfParam['self_'+i.paramName]=(!this.$route.query[i.paramName])?"":this.$route.query[i.paramName]
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
this.loadData()
|
||||
})
|
||||
},
|
||||
initQueryInfo() {
|
||||
if(!this.$route.params.code){
|
||||
return false
|
||||
}
|
||||
getAction(`${this.url.getQueryInfo}${this.$route.params.code}`).then((res) => {
|
||||
console.log("获取查询条件", res);
|
||||
if (res.success) {
|
||||
this.queryInfo = res.result
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
loadData(arg) {
|
||||
if(!this.$route.params.code){
|
||||
return false
|
||||
}
|
||||
if (arg == 1) {
|
||||
this.table.pagination.current = 1
|
||||
}
|
||||
let params = this.getQueryParams();//查询条件
|
||||
console.log(params)
|
||||
|
||||
console.log(' 动态报表 reportCode : ' + this.reportCode);
|
||||
this.table.loading = true
|
||||
Promise.all([
|
||||
getAction(`${this.url.getColumns}${this.reportCode}`),
|
||||
getAction(`${this.url.getData}${this.reportCode}`, params)
|
||||
]).then(results => {
|
||||
let [{result: {columns,cgreportHeadName,dictOptions}}, {result: data}] = results
|
||||
let columnWidth = 230
|
||||
this.dictOptions = dictOptions
|
||||
for(let a=0;a<columns.length;a++){
|
||||
if(columns[a].customRender){
|
||||
let field_name = columns[a].customRender;
|
||||
columns[a].customRender=(text)=>{
|
||||
if(!text){
|
||||
return ''
|
||||
}else{
|
||||
return filterMultiDictText(this.dictOptions[field_name], text+"");
|
||||
}
|
||||
}
|
||||
}
|
||||
columns.width = columnWidth
|
||||
}
|
||||
this.table.scroll.x = columns.length * columnWidth
|
||||
this.table.columns = [...columns]
|
||||
this.cgreportHeadName = cgreportHeadName
|
||||
if (data) {
|
||||
this.table.pagination.total = Number(data.total)
|
||||
this.table.dataSource = data.records
|
||||
} else {
|
||||
this.table.pagination.total = 0
|
||||
this.table.dataSource = []
|
||||
}
|
||||
}).catch((e) => {
|
||||
console.error(e)
|
||||
this.$message.error('查询失败')
|
||||
}).then(() => {
|
||||
this.table.loading = false
|
||||
})
|
||||
},
|
||||
getQueryParams() {
|
||||
let param = Object.assign({}, this.queryParam, this.sorter,this.selfParam);
|
||||
param.pageNo = this.table.pagination.current;
|
||||
param.pageSize = this.table.pagination.pageSize;
|
||||
return filterObj(param);
|
||||
},
|
||||
searchByQuery() {
|
||||
this.loadData(1);
|
||||
},
|
||||
searchReset() {
|
||||
this.queryParam = {}
|
||||
this.loadData(1);
|
||||
},
|
||||
handleToggleSearch() {
|
||||
this.toggleSearchStatus = !this.toggleSearchStatus;
|
||||
},
|
||||
exportExcel() {
|
||||
let fileName = this.cgreportHeadName
|
||||
downFile(`/online/cgreport/api/exportXls/${this.reportCode}`,this.queryParam).then((data)=>{
|
||||
if (!data) {
|
||||
this.$message.warning("文件下载失败")
|
||||
return
|
||||
}
|
||||
if (typeof window.navigator.msSaveBlob !== 'undefined') {
|
||||
window.navigator.msSaveBlob(new Blob([data]), fileName+'.xls')
|
||||
}else{
|
||||
let url = window.URL.createObjectURL(new Blob([data]))
|
||||
let link = document.createElement('a')
|
||||
link.style.display = 'none'
|
||||
link.href = url
|
||||
link.setAttribute('download', fileName+'.xls')
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link); //下载完成移除元素
|
||||
window.URL.revokeObjectURL(url); //释放掉blob对象
|
||||
}
|
||||
})
|
||||
},
|
||||
handleChangeInTableSelect(selectedRowKeys, selectionRows) {
|
||||
this.table.selectedRowKeys = selectedRowKeys
|
||||
this.table.selectionRows = selectionRows
|
||||
},
|
||||
handleChangeInTable(pagination, filters, sorter) {
|
||||
//分页、排序、筛选变化时触发
|
||||
if (Object.keys(sorter).length > 0) {
|
||||
this.sorter.column = sorter.field
|
||||
this.sorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
|
||||
}
|
||||
this.table.pagination = pagination
|
||||
this.loadData()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 500px
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user