510 lines
19 KiB
Vue
510 lines
19 KiB
Vue
<template>
|
||
<!-- :style="{height: queryList.height ? 'auto' : listPageHeight}" -->
|
||
<div class="query-list-page">
|
||
<query-form
|
||
v-show="!(queryForm.show === false)"
|
||
ref="queryForm"
|
||
:query-form="queryForm"
|
||
:left-span="queryForm.leftSpan"
|
||
:offset-span="queryForm.offsetSpan"
|
||
:query-list="queryList"
|
||
:before-query="queryForm.beforeQuery"
|
||
:can-query="canQuery"
|
||
@query="query"
|
||
@queryExport="queryExport"
|
||
@disableQuery="disableQuery"
|
||
@enableQuery="enableQuery"
|
||
/>
|
||
<el-card v-loading="loading">
|
||
<el-table
|
||
ref="table2"
|
||
highlight-current-row
|
||
stripe
|
||
border
|
||
:data="queryList.data"
|
||
size="medium"
|
||
:header-cell-style="headerCellStyle"
|
||
:default-sort="queryList.defaultSort"
|
||
@row-click="onRowClick"
|
||
@select="onSelect"
|
||
@select-all="onSelectAll"
|
||
@selection-change="onSelectionChange"
|
||
@sort-change="sortChange"
|
||
>
|
||
<el-table-column v-if="queryList.selectCheckShow" type="selection" width="55" />
|
||
<el-table-column v-if="queryList.indexShow" type="index" width="50" :label="this.$t('global.index')" />
|
||
<el-table-column v-if="queryList.radioShow" :label="`#${$t('global.select')}`" width="80">
|
||
<template slot-scope="scope">
|
||
<el-radio v-model="choose" :label="scope.row">{{ `` }}</el-radio>
|
||
</template>
|
||
</el-table-column>
|
||
<template v-for="(column, index) in queryList.columns">
|
||
<el-table-column
|
||
v-if="checkColumnTyep(column, 'basic')"
|
||
:key="index"
|
||
:prop="column.prop"
|
||
:label="column.title"
|
||
:width="column.width"
|
||
show-overflow-tooltip
|
||
:sortable="column.sortable"
|
||
:sort-by="column.sortBy"
|
||
/>
|
||
<el-table-column
|
||
v-else-if="checkColumnTyep(column, 'basicText')"
|
||
:key="index"
|
||
:label="column.title"
|
||
:width="column.width"
|
||
:sortable="column.sortable"
|
||
:sort-by="column.sortBy"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span class="hideOutContent">{{ column.columnValue(scope.row, scope.$index) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
v-else-if="checkColumnTyep(column, 'tag')"
|
||
:key="index"
|
||
:label="column.title"
|
||
:width="column.width"
|
||
:sortable="column.sortable"
|
||
:sort-by="column.sortBy"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-tag v-if="column.columnValue(scope.row, scope.$index)" :type="column.tagType(scope.row, scope.$index)">{{ column.columnValue(scope.row, scope.$index) }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
v-else-if="checkColumnTyep(column, 'replicText')"
|
||
:key="index"
|
||
:label="column.title"
|
||
:width="column.width"
|
||
:sortable="column.sortable"
|
||
:sort-by="column.sortBy"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span>{{ column.columnValue(scope.row, scope.$index) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
v-else-if="checkColumnTyep(column, 'tagMore')"
|
||
:key="index"
|
||
:label="column.title"
|
||
:width="column.width"
|
||
:sortable="column.sortable"
|
||
:sort-by="column.sortBy"
|
||
>
|
||
<template slot-scope="scope">
|
||
<template v-for="tag in column.columnValue(scope.row)">
|
||
<el-tag
|
||
:key="tag"
|
||
:type="column.tagType(scope.row, scope.$index)"
|
||
style="margin-right: 10px; margin-bottom: 5px;"
|
||
>{{ tag }}</el-tag>
|
||
</template>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
v-else-if="checkColumnTyep(column, 'formatter')"
|
||
:key="index"
|
||
:prop="column.prop"
|
||
:label="column.title"
|
||
:formatter="column.formatter"
|
||
:sortable="column.sortable"
|
||
:sort-by="column.sortBy"
|
||
/>
|
||
<el-table-column
|
||
v-else-if="checkColumnTyep(column, 'button') && !(column.hide && column.hide(column))"
|
||
:key="index"
|
||
:label="column.title"
|
||
:width="column.width"
|
||
>
|
||
<template slot-scope="scope">
|
||
<template v-for="(button, idx) in column.buttons">
|
||
<el-button
|
||
v-if="button.show === undefined ? ((button.showControl === undefined) ? true: button.showControl(scope.row)): button.show"
|
||
:key="idx"
|
||
size="mini"
|
||
style="margin-top: 5px;"
|
||
:type="button.type ? button.type : 'primary'"
|
||
:disabled="isTableBtnDisabled(button, scope.$index, scope.row)"
|
||
@click="button.handleClick(scope.$index, scope.row) "
|
||
>{{ getTableBtnName(button.name, scope.$index, scope.row) }}</el-button>
|
||
</template>
|
||
</template>
|
||
</el-table-column>
|
||
</template>
|
||
</el-table>
|
||
<div v-if="queryList.selectCheckShow" style="margin-top: 8px; margin-left: 8px;">
|
||
<el-button
|
||
size="mini"
|
||
:type="'primary'"
|
||
:disabled="!queryList.selection.length"
|
||
@click="queryList.selectAllClick(queryList.selection)"
|
||
>{{ $t('global.selectAdd') }}</el-button>
|
||
</div>
|
||
<div class="page-container " style="text-align: center; margin: 10px 0; height: 40px;">
|
||
<el-pagination
|
||
:current-page="pageIndex"
|
||
:page-sizes="[10, 20, 50, 100] "
|
||
:page-size="pageSize "
|
||
layout="total, sizes, prev, pager, next, jumper "
|
||
:total="queryList.total "
|
||
@size-change="pageSizeChange "
|
||
@current-change="changePage"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// import QueryForm from '@/components/QueryListPage/QueryForm'
|
||
// import { mapGetters } from 'vuex'
|
||
|
||
export default {
|
||
components: {
|
||
QueryForm: resolve => { require(['@/components/QueryListPage/QueryForm'], resolve); } // 懒加载
|
||
},
|
||
props: {
|
||
queryForm: {
|
||
type: Object,
|
||
required: true
|
||
},
|
||
pagerConfig: {
|
||
type: Object,
|
||
default() {
|
||
return {};
|
||
}
|
||
},
|
||
queryList: {
|
||
type: Object,
|
||
required: true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
choose: null,
|
||
queryData: {},
|
||
currentpagerConfig: {},
|
||
headerCellStyle: {
|
||
// "background-color ": 'rgba(48, 60, 86, 1)',
|
||
// color: 'white'
|
||
},
|
||
listPageHeight: '100%',
|
||
tableHeight: 0,
|
||
pageSize: 10,
|
||
pageIndex: 1,
|
||
pageOffset: 0,
|
||
canQuery: true, // 查询按钮是否可点
|
||
thirdQRCodeMakeUrl: 'http://s.jiathis.com/qrcode.php?url=',
|
||
sortBy:''
|
||
};
|
||
},
|
||
computed: {
|
||
globalPagerConfig: function() {
|
||
const pagerConfig = {
|
||
pageSize: 'pageSize',
|
||
pageIndex: 'pageNow'
|
||
};
|
||
return pagerConfig;
|
||
}
|
||
},
|
||
created() {
|
||
const self = this;
|
||
// queryList 如果没有data属性,就创建并赋值为[]
|
||
if (!this.queryList.data) {
|
||
this.$set(this.queryList, 'data', []);
|
||
}
|
||
// queryList 如果没有total属性,就创建并赋值为0
|
||
if (!this.queryList.total) {
|
||
this.$set(this.queryList, 'total', 0);
|
||
}
|
||
// 如果设置了pageConfig就使用它,否则使用globalPageConfig
|
||
if (!this.pagerConfig) {
|
||
this.currentpagerConfig = Object.assign({}, this.globalPagerConfig);
|
||
} else {
|
||
this.currentpagerConfig = Object.assign({}, this.pagerConfig);
|
||
}
|
||
// queryList 如果没有selection属性,就创建并赋值为[]
|
||
if (!this.queryList.selection) {
|
||
this.$set(this.queryList, 'selection', []);
|
||
}
|
||
// 给queryList添加数据重载的方法
|
||
this.queryList.reload = function() {
|
||
return self.commitQuery();
|
||
};
|
||
},
|
||
mounted() {
|
||
// this.commitQuery();
|
||
// this.tableHeight = this.$refs.table2.$el.offsetHeight + 23;
|
||
},
|
||
methods: {
|
||
// 根据类型显示
|
||
checkColumnTyep(column, typeName) {
|
||
if (column.show === false) {
|
||
return false;
|
||
} else if (column.isShow) {
|
||
return column.isShow();
|
||
}
|
||
if (typeof column.type === 'undefined') {
|
||
if (column.formatter instanceof Function) {
|
||
column.type = 'formatter';
|
||
} else {
|
||
column.type = 'basic';
|
||
}
|
||
}
|
||
// 类型是否匹配
|
||
const typeFlag = column.type === typeName;
|
||
return typeFlag;
|
||
},
|
||
isTableBtnDisabled(button, index, row) {
|
||
if (button.isDisabled) {
|
||
return button.isDisabled(index, row);
|
||
} else {
|
||
return false;
|
||
}
|
||
},
|
||
// 计算列表的列为链接时显示的名称，可能为列对象的字段
|
||
getTableBtnName(btnName, index, row) {
|
||
if (typeof btnName.trim() === 'function') {
|
||
return btnName(index, row);
|
||
} else {
|
||
return btnName;
|
||
}
|
||
},
|
||
// 按钮查询
|
||
query(queryData) {
|
||
this.queryData = queryData;
|
||
this.pageIndex = 1;
|
||
this.queryData[this.currentpagerConfig.pageSize] = this.pageSize;
|
||
this.queryData[this.currentpagerConfig.pageIndex] = this.pageIndex;
|
||
this.queryList.reload();
|
||
},
|
||
// 导出操作
|
||
queryExport(queryData) {
|
||
const self = this;
|
||
self.disableQuery();
|
||
self.queryData = queryData;
|
||
import('@/utils/Export2Excel').then(excel => {
|
||
const tHeader = self.queryForm.exportConfig.header;
|
||
self.prepareExportData().then(data => {
|
||
excel.export_json_to_excel(tHeader, data, self.queryForm.exportConfig.filename);
|
||
self.enableQuery();
|
||
}).catch(() => {
|
||
self.enableQuery();
|
||
});
|
||
});
|
||
},
|
||
// 导出数据准备
|
||
prepareExportData() {
|
||
return new Promise((resolve, reject) => {
|
||
const filterVals = this.queryForm.exportConfig.filterVals;
|
||
this.queryExportData().then(result => {
|
||
const list = result.list;
|
||
const data = this.formatJson(filterVals, list);
|
||
resolve(data);
|
||
}).catch(error => {
|
||
reject(error);
|
||
});
|
||
});
|
||
},
|
||
// 格式化数据列表
|
||
formatJson(filterVals, list) {
|
||
return list.map(v => filterVals.map(fv => {
|
||
let keys = [];
|
||
if (typeof (fv) === 'string') {
|
||
keys = fv.split('.');
|
||
} else {
|
||
keys = fv.key.split('.');
|
||
}
|
||
let obj = v;
|
||
keys.forEach(element => {
|
||
obj = obj[element];
|
||
});
|
||
if (fv.type === 'date') {
|
||
const format = fv.format || 'yyyy-MM-dd';
|
||
return new Date(obj).Format(format);
|
||
} else if (fv.formatter instanceof Function) {
|
||
return fv.formatter(v);
|
||
} else {
|
||
return obj;
|
||
}
|
||
}));
|
||
},
|
||
// 查询需要导出的数据列表
|
||
queryExportData() {
|
||
},
|
||
/**
|
||
* 翻页方法
|
||
* pageIndex: 翻页后是第几页
|
||
* params: 查询条件
|
||
**/
|
||
changePage(pageIndex, params) {
|
||
this.pageIndex = pageIndex;
|
||
this.pageOffset = (this.pageIndex - 1) * this.pageSize;
|
||
if (params) {
|
||
// 如果是点查询按钮到这来的，不用混合分页信息，已经有默认的第一页信息
|
||
this.queryData = params;
|
||
// 以防pageSize改变, 重新赋值
|
||
this.queryData[this.currentpagerConfig.pageSize] = this.pageSize;
|
||
} else {
|
||
// 如果是点翻页按钮到这来的，把分页信息混合到this.queryData里
|
||
this.mixinBackPageInfoToQueryData();
|
||
}
|
||
// 加时间戳
|
||
// this.queryData._time = this.$moment()._d.getTime();
|
||
this.queryList.reload();
|
||
},
|
||
/**
|
||
* 改变分页大小回调函数，执行完毕后，iview会自动触发changePage事件，去查第一页数据
|
||
*/
|
||
pageSizeChange(newPageSize) {
|
||
if (newPageSize) {
|
||
this.pageSize = newPageSize;
|
||
this.changePage(1, this.queryData);
|
||
}
|
||
},
|
||
/**
|
||
* 把分页信息混合到this.queryData里
|
||
*/
|
||
mixinBackPageInfoToQueryData() {
|
||
// 当前的分页信息
|
||
const pagerParams = {
|
||
pageSize: this.pageSize,
|
||
pageIndex: this.pageIndex,
|
||
pageOffset: this.pageOffset
|
||
};
|
||
const tempPagerParams = {};
|
||
// 肯定要有pageSize
|
||
tempPagerParams[this.currentpagerConfig.pageSize] = pagerParams.pageSize || this.queryData[this.currentpagerConfig.pageSize];
|
||
// 判断使用 pageIndex 还是 pageOffset
|
||
if (this.currentpagerConfig.pageIndex) {
|
||
// 使用 pageIndex
|
||
tempPagerParams[this.currentpagerConfig.pageIndex] = pagerParams.pageIndex || this.queryData[this.currentpagerConfig.pageIndex];
|
||
} else {
|
||
// 使用 pageOffset
|
||
tempPagerParams[this.currentpagerConfig.pageOffset] = pagerParams.pageOffset !== undefined ? pagerParams.pageOffset : this.queryData[this.currentpagerConfig.pageOffset];
|
||
}
|
||
// 将分页信息封装到查询条件中
|
||
this.queryData = { ...this.queryData, ...tempPagerParams };
|
||
},
|
||
preCommitQueryHandler() {
|
||
// 填充表单
|
||
// this.$refs.form2.initFormData(this.queryData);
|
||
// 预设分页组件
|
||
this.pageIndex = parseInt(this.queryData[this.currentpagerConfig.pageIndex] || this.pageIndex);
|
||
this.pageSize = parseInt(this.queryData[this.currentpagerConfig.pageSize]);
|
||
},
|
||
commitQuery() {
|
||
const self = this;
|
||
return new Promise((resolve, reject) => {
|
||
self.disableQuery();
|
||
self.mixinBackPageInfoToQueryData();
|
||
const postData = this.queryData;
|
||
if (postData === false) {
|
||
self.enableQuery();
|
||
return;
|
||
}
|
||
if (this.queryList.query instanceof Function) {
|
||
this.queryList.query(this.queryData).then(response => {
|
||
self.enableQuery();
|
||
if (this.queryList.afterQuery && this.queryList.afterQuery instanceof Function) {
|
||
this.queryList.afterQuery(response.data);
|
||
}
|
||
|
||
const resultData = response.data;
|
||
this.$set(this.queryList, 'data', resultData.list);
|
||
this.$set(this.queryList, 'total', resultData.total);
|
||
}).catch(() => {
|
||
self.enableQuery();
|
||
});
|
||
} else {
|
||
const data = this.queryList.data;
|
||
if (data) {
|
||
self.enableQuery();
|
||
if (this.queryList.afterQuery && this.queryList.afterQuery instanceof Function) {
|
||
this.queryList.afterQuery(data);
|
||
}
|
||
this.$set(this.queryList, 'data', data);
|
||
|
||
let total = this.queryList.total;
|
||
if (!total) {
|
||
total = this.queryList.data.length;
|
||
}
|
||
this.$set(this.queryList, 'total', total);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
enableQuery() {
|
||
this.canQuery = true;
|
||
this.loading = false;
|
||
},
|
||
disableQuery() {
|
||
// 禁止查询按钮
|
||
this.canQuery = false;
|
||
this.loading = true;
|
||
// 清空表格的数据
|
||
// this.queryList.data = [];
|
||
},
|
||
onSelect(selection, row) {
|
||
this.queryList.onSelect && this.queryList.onSelect(selection, row);
|
||
this.queryList.selection = selection;
|
||
},
|
||
onSelectAll(selection) {
|
||
this.queryList.onSelectAll && this.queryList.onSelectAll(selection);
|
||
this.queryList.selection = selection;
|
||
},
|
||
onSelectionChange(selection) {
|
||
this.queryList.onSelectionChange && this.queryList.onSelectionChange(selection);
|
||
this.queryList.selection = selection;
|
||
},
|
||
onRowClick(row) {
|
||
this.choose = row;
|
||
},
|
||
currentChoose() {
|
||
return this.choose;
|
||
},
|
||
refresh(flag) {
|
||
if (flag) {
|
||
this.commitQuery();
|
||
}
|
||
this.queryList.data = [...this.queryList.data];
|
||
},
|
||
sortChange(data) {
|
||
const self = this;
|
||
if (data.order && data.column.sortable == 'custom') {
|
||
switch (data.order) {
|
||
case 'ascending': {
|
||
if (data.column.sortBy) {
|
||
const temp = {};
|
||
temp[data.column.sortBy] = data.prop;
|
||
self.queryData = { ...self.queryData, ...temp };
|
||
self.sortBy = data.column.sortBy;
|
||
self.refresh(true);
|
||
}
|
||
break;
|
||
}
|
||
case 'descending': {
|
||
if (data.column.sortBy) {
|
||
const temp = {};
|
||
temp[data.column.sortBy] = data.prop + ' desc';
|
||
self.queryData = { ...self.queryData, ...temp };
|
||
self.sortBy = data.column.sortBy;
|
||
self.refresh(true);
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
} else {
|
||
delete self.queryData[self.sortBy];
|
||
self.refresh(true);
|
||
}
|
||
}
|
||
}
|
||
|
||
};
|
||
|
||
</script>
|