<template>
|
<div :id="'UI-dynamic-'+areasName+componentVO.oid" class="UI-dynamic">
|
<avue-crud ref="dataTable"
|
v-model="form"
|
:data="tableList"
|
:option="option"
|
:page.sync="componentVO.uiComponentType == 'TreeTable'?{}:pageType"
|
:table-loading="loading"
|
@on-load="onLoad"
|
@search-reset="searchReset"
|
@search-change='searchChange'
|
@refresh-change="handleRefresh"
|
@current-change="currentChange"
|
@size-change="sizeChange"
|
@row-click="rowClickChange"
|
@filter="filterChange"
|
@selection-change="selectChange">
|
<!--top区域按钮-->
|
<template slot="menuLeft" slot-scope="scope">
|
<dynamic-button :componentVO="componentVO"
|
:key="areasName+'buttons-'+componentVO.oid"
|
:butttonList="componentVO.buttons" :dataStore="selectList" LocationType="top" :sourceData="sourceData"
|
@afterMethod="handleRefresh"
|
type="table"></dynamic-button>
|
</template>
|
|
<!--menu区域按钮-->
|
<template slot="menu" slot-scope="scope">
|
<dynamic-button :componentVO="componentVO" :butttonList="componentVO.buttons" :scope="scope" :dataStore="selectList" :sourceData="sourceData"
|
LocationType="menu"
|
@afterMethod="handleRefresh"
|
@rowView="rowView"
|
type="table"></dynamic-button>
|
</template>
|
<template slot="menuRight" slot-scope="scope">
|
<el-tooltip class="item" effect="dark" content="打印" placement="top">
|
<el-button icon="el-icon-printer" circle @click="$refs.dataTable.rowPrint()"
|
:size="scope.size"></el-button>
|
</el-tooltip>
|
<el-tooltip class="item" effect="dark" content="导出" placement="top">
|
<el-button icon="el-icon-download" circle @click="rowExcel"
|
:size="scope.size"></el-button>
|
</el-tooltip>
|
<el-tooltip class="item" effect="dark" content="筛选" placement="top">
|
<el-button icon="el-icon-tickets" circle @click="$refs.dataTable.$refs.dialogFilter.box=!0"
|
:size="scope.size"></el-button>
|
</el-tooltip>
|
<el-tooltip class="item" effect="dark" content="列显隐" placement="top">
|
<el-button icon="el-icon-s-operation" circle @click="$refs.dataTable.$refs.dialogColumn.columnBox=!0"
|
:size="scope.size"></el-button>
|
</el-tooltip>
|
<el-tooltip class="item" effect="dark" content="查询" placement="top">
|
<el-button icon="el-icon-search" circle @click="$refs.dataTable.$refs.headerSearch.handleSearchShow()"
|
:size="scope.size"></el-button>
|
</el-tooltip>
|
<el-tooltip class="item" effect="dark" content="刷新" placement="top">
|
<el-button icon="el-icon-refresh" circle @click="$refs.dataTable.refreshChange()"
|
:size="scope.size"></el-button>
|
</el-tooltip>
|
</template>
|
<template #icon="{ row }">
|
<span class="avue-icon avue-icon--small">
|
<svg v-if="row.icon && row.icon.indexOf('#')==0" aria-hidden="true">
|
<use :xlink:href="row.icon"></use>
|
</svg>
|
<i v-else :class="row.icon"></i>
|
</span>
|
</template>
|
</avue-crud>
|
</div>
|
</template>
|
|
<script>
|
import {validatenull} from '@/util/validate'
|
import {getList} from '@/api/base/ui'
|
|
export default {
|
name: "dynamic-table",
|
props: {
|
//ui上下文的业务类型（或链接类型）
|
uiBtmType: {
|
type: String
|
},
|
//ui上下文
|
uiContext:{
|
type: String
|
},
|
componentVO: {
|
type: Object,
|
default: {}
|
},
|
inDialog: {
|
type: Boolean,
|
default: false
|
},
|
canEdit:{
|
//内容是否可编辑
|
type:Boolean,
|
default:false
|
},
|
areasName: {
|
type: String,
|
default: ''//westArea导航区
|
},
|
sourceData: {
|
//菜单源数据或者弹窗时按钮所属区域的上一区域选中数据
|
type: Object,
|
default: {}
|
},
|
//上一区域业务类型
|
sourceBtmType:{
|
type: String
|
},
|
paramVOS: {
|
type: Object,
|
default: {}
|
},
|
isShow: {
|
//所在区域是否已显示，针对tab和collapse
|
type: Boolean,
|
default: true
|
},
|
dataStore: {
|
//弹窗时按钮所属区域选中数据
|
type: Array,
|
default: []
|
},
|
tableType: {
|
type: String
|
}
|
},
|
data() {
|
return {
|
currentDefineVO:this.componentVO.uiComponentType=='table'?this.componentVO.tableDefineVO:this.componentVO.treeTableDefineVO,
|
parentHeight: '100%',//当前组件根节点元素高度
|
form: {},
|
query:{},
|
params:{},
|
loading: false,
|
page: {
|
pageSize: 10,
|
currentPage: 1,
|
total: 0,
|
},
|
simplePage: {
|
currentPage: 1,
|
total: 0,
|
pagerCount: 4,
|
layout: "prev, pager, next"
|
},
|
//表格数据
|
tableList: [],
|
option: {
|
border:true,
|
stripe:true,
|
index: true,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
refreshBtn:false,
|
columnBtn:false,
|
searchShowBtn:false,
|
printBtn:false,
|
excelBtn:false,
|
filterBtn:false,
|
selection: true,
|
tip: false,
|
menuWidth:260,
|
height: '100%',
|
calcHeight: 15,
|
indexFixed: false,
|
menuFixed: this.areasName === 'westArea' ? false : 'right',
|
searchMenuSpan:12,
|
searchShow:false,
|
column: [],
|
},
|
selectList: [],
|
columnType: {
|
text: "input",
|
combox: "select",
|
truefalse: "switch",
|
number: "number",
|
textarea: "textarea",
|
datetime: "datetime",
|
date: "date",
|
refer: "refer",
|
},
|
sourceDataMapParams:{}
|
}
|
},
|
computed: {
|
pageType() {
|
return this.areasName === 'westArea' ? this.simplePage : this.page;
|
}
|
},
|
watch: {
|
parentHeight: {
|
handler(newval) {
|
if (newval > 50) {
|
this.option.height = newval;
|
//doLayout不生效，手动设置表格高度
|
this.$children[0].$children[1].$children[1].$children[0].$el.style.height = newval + 'px';
|
/*this.$nextTick(() => {
|
if (this.$refs.dataTable && this.$refs.dataTable.doLayout) {
|
this.$refs.dataTable.doLayout();
|
}
|
})*/
|
}
|
}
|
},
|
isShow: {
|
handler(newval) {
|
if (newval && this.$el.clientHeight > 50) {
|
this.parentHeight = this.$el.clientHeight - this.$children[0].$children[1].$children[0].$el.clientHeight - (this.$children[0].$children[2].$el.clientHeight || 57) - 5;
|
}
|
if(newval){
|
this.handleRefresh();
|
}
|
}
|
},
|
tableList:{
|
handler(newval) {
|
if(newval) {
|
this.$emit("setData", {
|
area: this.areasName,
|
type:this.componentVO.uiComponentType,
|
currentDefineVO:this.currentDefineVO,
|
data:newval
|
});
|
}
|
},
|
deep: true,
|
immediate: true
|
},
|
'sourceData':{
|
handler(newval) {
|
if(newval && Object.keys(newval).length>0) {
|
this.sourceDataMapParams=this.sourceDataMap();
|
this.getParams();
|
this.handleRefresh();
|
}
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
created() {
|
this.getParams();
|
this.option.column = this.updatedColumns();
|
if (this.componentVO.uiComponentType == 'TreeTable') {
|
//树表
|
this.option.rowKey = this.currentDefineVO.treeCurrentField || 'oid';
|
this.option.rowParentKey = this.currentDefineVO.treeParentField || 'parentOid'
|
}
|
this.page = {
|
pageSize: this.currentDefineVO.pageVO ? this.currentDefineVO.pageVO.limit : 10,
|
currentPage: this.currentDefineVO.pageVO ? this.currentDefineVO.pageVO.page : 1,
|
total: 0,
|
pageSizes: this.currentDefineVO.limits || [10, 20, 30, 40, 50, 100]
|
};
|
},
|
mounted() {
|
if (this.$el.clientHeight > 50) {
|
//父元素高度-按钮高度-分页高度
|
this.parentHeight = this.$el.clientHeight - this.$children[0].$children[1].$children[0].$el.clientHeight - 57 -5;
|
}
|
},
|
methods: {
|
updatedColumns: function () {
|
const queryFields = !validatenull(this.currentDefineVO.queryColumns) ? this.currentDefineVO.queryColumns.map(item => item.field) : [];
|
return this.currentDefineVO.cols[0].map(item => {
|
const search = queryFields.includes(item.field); // 判断 field 是否在 queryColumns 里
|
item.type = this.columnType[item.fieldType] || item.fieldType;
|
if (this.currentDefineVO.btmType == 'fileobject' && item.field == 'name') {
|
//是文件
|
item.formatter = function (d) {
|
return '<a class="layui-btn layui-btn-intable" lay-event="PREVIEW">' + d.name + '</a>'
|
}
|
}
|
let formatter = item.formatter || item.templet;
|
if (typeof formatter == "string" && formatter != '') {
|
formatter = eval("(" + formatter + ")");
|
}
|
if (['date', 'datetime', 'time'].includes(item.type)) {
|
item.valueFormat = item.dateFormate;
|
item.format = item.dateFormate;
|
}
|
return {
|
...item,
|
prop: item.field,
|
label: item.title,
|
search: search,
|
formatter: formatter,
|
overHidden: true
|
};
|
});
|
},
|
sourceDataMap: function () {
|
const sourceDataMap = {};
|
if (Object.keys(this.sourceData).length>0) {
|
if(this.sourceData.part && Object.keys(this.sourceData.part).length>0){
|
//说明源数据是树节点
|
if(this.sourceData.part.oid ) {
|
if (this.sourceData.part.oid.indexOf('@vcitreesep@') > -1) {
|
this.sourceData.part.oid = this.sourceData.oid.split('@vcitreesep@')[1];
|
}
|
sourceDataMap.sourceBtmName = this.sourceBtmType;
|
sourceDataMap.sourceOid = this.sourceData.part.oid;
|
}
|
}else {
|
if(this.sourceData.oid ) {
|
if (this.sourceData.oid.indexOf('@vcitreesep@') > -1) {
|
this.sourceData.oid = this.sourceData.oid.split('@vcitreesep@')[1];
|
}
|
sourceDataMap.sourceBtmName = this.sourceBtmType;
|
sourceDataMap.sourceOid = this.sourceData.oid;
|
}
|
}
|
|
for (let i in this.sourceData) {
|
const item = this.sourceData[i]
|
if (['type', 'context', 'content', 'querytemplate', 'querytype'].includes(i)) continue;
|
if (item && item.constructor === Object) {
|
sourceDataMap['sourceData["' + i + '"]'] = JSON.stringify(item)
|
}else {
|
sourceDataMap['sourceData["' + i + '"]'] = item
|
}
|
}
|
}
|
|
if (Object.keys(this.paramVOS).length>0) {
|
for (let j in this.paramVOS) {
|
if (this.paramVOS[j] && this.paramVOS[j].constructor === Object) continue;
|
if (['type', 'context', 'content', "getdataurl", "getdatamethod", "url", "method", "uploadfileurl", "title", 'querytemplate', 'querytype', 'usesourcedata','component'].includes(j)) continue;
|
sourceDataMap['sourceData["' + j + '"]'] = this.paramVOS[j]
|
}
|
}
|
return sourceDataMap;
|
},
|
getParams: function () {
|
const tableParams = {
|
btmName: this.currentDefineVO.btmType,
|
btmType:this.currentDefineVO.btmType,
|
tableDefineId: this.currentDefineVO.id,
|
componentOid: this.componentVO.oid,
|
uiDefineId: this.uiContext,
|
linkTypeFlag: this.currentDefineVO.linkTypeFlag,
|
treeTableFlag:this.componentVO.uiComponentType == 'TreeTable'
|
};
|
|
const sourceDataMapList = this.sourceDataMapParams;
|
|
this.params = Object.assign({},tableParams, sourceDataMapList);
|
},
|
onLoad(page, params = {}) {
|
if (Object.keys(this.sourceData).length>0 && this.isShow) {
|
this.tableList = [];
|
this.loading = true;
|
let url='';
|
if(this.componentVO.bsDataModel && this.componentVO.bsDataModel.indexOf('/')!=-1){
|
url=this.componentVO.bsDataModel;
|
}
|
getList(page.currentPage, page.pageSize, Object.assign({},this.params,this.query,params),url).then(res => {
|
let data = [];
|
if (res.data && res.data.data) {
|
data = res.data.data;
|
this.page.total = res.data.total;
|
} else {
|
data = res.data;
|
this.page.total = res.total;
|
}
|
if (!data || data == null) {
|
data = [];
|
}
|
this.tableList = data;
|
this.loading = false;
|
this.selectionClear();
|
}).catch(error => {
|
this.$message.error(error);
|
this.loading = false;
|
});
|
}
|
},
|
rowView(row,index){
|
this.$refs.dataTable.rowView(row,index)
|
},
|
rowClickChange(row){
|
this.$refs.dataTable.toggleRowSelection(row,true);
|
},
|
selectChange(row) {
|
this.selectList = row;
|
this.$emit("setDataStore", {
|
area: this.areasName,
|
type:this.componentVO.uiComponentType,
|
btmType:this.currentDefineVO.btmType,
|
dataStore:row
|
});
|
},
|
currentChange(currentPage) {
|
this.page.currentPage = currentPage;
|
},
|
sizeChange(pageSize) {
|
this.page.pageSize = pageSize;
|
},
|
searchChange(params,done){
|
this.query = {};
|
for (let i in params) {
|
this.query['conditionMap["' + i + '"]'] = "*" + params[i] + "*";
|
}
|
this.page.currentPage = 1;
|
this.onLoad(this.page);
|
done();
|
},
|
filterChange(result){
|
let parms={}
|
for (let i in result) {
|
if(!validatenull(result[i][2])) {
|
const fieldVal = result[i][2]
|
if (result[i][1] == "=") {
|
parms['conditionMap["' + result[i][0] + '"]'] = fieldVal;
|
} else if (result[i][1] == "≠") {
|
parms['conditionMap["' + result[i][0] + '"]'] = '!=' + fieldVal;
|
} else if (result[i][1] == "like") {
|
parms['conditionMap["' + result[i][0] + '"]'] = "*" + fieldVal + "*";
|
} else if (result[i][1] == "∈") {
|
parms['conditionMap["' + result[i][0] + '"]'] = "*" + fieldVal + "*";
|
} else {
|
parms['conditionMap["' + result[i][0] + '"]'] = result[i][1] + fieldVal;
|
}
|
}
|
}
|
this.onLoad(this.page,parms);
|
},
|
searchReset() {
|
console.log('searchReset')
|
this.query = {};
|
this.onLoad(this.page);
|
},
|
selectionClear() {
|
this.selectionList = [];
|
try {
|
this.$refs.dataTable.toggleSelection();
|
}catch (e) {
|
|
}
|
},
|
handleRefresh(type) {
|
console.log('handleRefresh')
|
this.onLoad(this.page);
|
},
|
rowExcel() {
|
//导出
|
this.$refs.dataTable.$refs.dialogExcel.handleShow();
|
//导出弹窗中的确定按钮
|
this.$refs.dataTable.$refs.dialogExcel.handleSubmit = function () {
|
this.$Export.excel({title: this.$refs.dataTable.$refs.dialogExcel.form.name, columns: this.$refs.dataTable.$refs.dialogExcel.columns, data: this.$refs.dataTable.$refs.dialogExcel.handleSum()});
|
this.$refs.dataTable.$refs.dialogExcel.box = !1
|
}
|
//this.$refs.dataTable.rowExcel()
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
