534 lines
16 KiB
Vue
534 lines
16 KiB
Vue
<template>
|
|
<div class="xTable" :style="{ 'height': _height }" ref="xTableMain" v-loading="loading">
|
|
<div class="xTable-table" :style="{ 'height': _table_height }">
|
|
<el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" @selection-change="getSelection" :key="toggleIndex" ref="xTable" :height="height == 'auto' ? null : '100%'" :size="config.size" :border="config.border" :stripe="config.stripe" :summary-method="remoteSummary ? remoteSummaryMethod : summaryMethod" @sort-change="sortChange" @filter-change="filterChange">
|
|
<el-table-column v-if="isselection" type="selection" width="46" align="right"></el-table-column>
|
|
<slot></slot>
|
|
<template v-for="(item, index) in column" :key="index">
|
|
<el-table-column :align="item.align || 'left'" :label="item.label" v-if="item.column && item.column.length > 0">
|
|
<el-table-column v-for="(items, indexs) in item.column" :key="indexs" :align="items.align || 'left'" :column-key="items.prop || items.name" :label="items.label" :prop="items.prop || items.name" :width="items.width || 'auto'" :min-width="items.minWidth || 'auto'" :sortable="items.sortable" :fixed="items.fixed" :filters="items.filters" :filter-method="remoteFilter || !items.filters ? null : filterHandler" :show-overflow-tooltip="items.showOverflowTooltip">
|
|
<template #default="{ row }">
|
|
<columnItem :row="row" :item="items" @xtablehandleClick="xtablehandleClick" @xtablerefresh="refresh"> </columnItem>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column v-else-if="!item.hide && (item.name || item.prop)" :align="item.align || 'left'" :column-key="item.prop || item.name" :label="item.label" :prop="item.prop || item.name" :width="item.width || 'auto'" :min-width="item.minWidth || 'auto'" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter || !item.filters ? null : filterHandler" :show-overflow-tooltip="item.showOverflowTooltip">
|
|
<template #default="{ row }">
|
|
<columnItem :row="row" :item="item" @xtablehandleClick="xtablehandleClick" @xtablerefresh="refresh"> </columnItem>
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
<el-table-column min-width="1"></el-table-column>
|
|
<template #empty>
|
|
<el-empty v-if="loading" description="加载中~" :image="emptyImage" :image-size="200"></el-empty>
|
|
<el-empty v-else :description="emptyText" :image-size="100"></el-empty>
|
|
</template>
|
|
</el-table>
|
|
</div>
|
|
<div class="xTable-page" v-if="total && (!hidePagination || !hideDo)">
|
|
<el-row style="float: left;">
|
|
<el-affix position="bottom" :offset="height == 'auto' ? 20 : 9" v-if="selection.length > 0 && batchoperation.length > 0" style="padding-right: 10px;z-index: 100;white-space: nowrap; overflow-wrap: normal;">
|
|
<el-button v-for="(o, index) in batchoperation" :key="index" @click="operation(o)" :type="o.type || 'danger'" plain :icon="o.icon">{{ o.label || '删除' }} ( {{ selection.length }} )</el-button>
|
|
</el-affix>
|
|
<el-button v-if="isselection" @click="toggleAllSelection()">全选</el-button>
|
|
</el-row>
|
|
<el-pagination :pager-count="5" :small="true" background :layout="paginationLayout" :total="total" :page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
|
|
</div>
|
|
</div>
|
|
<x-update v-if="tableUpdateKey" :column="column" :name="tableUpdateKey" ref="xtableupdate" @success="handleSuccess" @closed="tableUpdateKey = ''"></x-update>
|
|
<x-stat v-if="tableStatKey" :name="tableStatKey" ref="xtablestat" @closed="tableStatKey = ''"></x-stat>
|
|
<xTabledialog v-if="xtabledialog" :name="xtabledialog" ref="xtabledialog" v-model="xtabledialog" @closed="xtabledialog = ''"></xTabledialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.xTable {}
|
|
|
|
.xTable-table {
|
|
height: calc(100% - 45px);
|
|
}
|
|
|
|
.xTable-page {
|
|
height: 45px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 5px 0 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.xTable-do {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.xTable:deep(.el-table__footer) .cell {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.xTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-horizontal {
|
|
height: 12px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.xTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-vertical {
|
|
width: 12px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.xTable-page:deep(.el-pagination__sizes) {
|
|
display: none;
|
|
}
|
|
|
|
.xTable-page:deep(.el-pagination__jump) {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import config from "@/config/table";
|
|
import columnSetting from './columnSetting'
|
|
import columnItem from './columnItem'
|
|
|
|
export default {
|
|
name: 'xTable',
|
|
components: {
|
|
columnSetting,
|
|
columnItem,
|
|
},
|
|
props: {
|
|
name: { type: String, default: "" },
|
|
tableColumn: { type: Object, default: () => { } },
|
|
api: { type: String, default: () => { } },
|
|
apiObj: { type: Object, default: () => { } },
|
|
params: { type: Object, default: () => ({}) },
|
|
batchoperation: { type: Array, default: () => ([]) },
|
|
data: { type: Object, default: () => { } },
|
|
height: { type: [String, Number], default: "100%" },
|
|
size: { type: String, default: "default" },
|
|
border: { type: Boolean, default: false },
|
|
isselection: { type: String, default: "" },
|
|
stripe: { type: Boolean, default: false },
|
|
columnSetting: { type: Boolean, default: false },
|
|
pageSize: { type: Number, default: config.pageSize },
|
|
pageSizes: { type: Array, default: config.pageSizes },
|
|
rowKey: { type: String, default: "" },
|
|
summaryMethod: { type: Function, default: null },
|
|
remoteSort: { type: Boolean, default: false },
|
|
remoteFilter: { type: Boolean, default: false },
|
|
remoteSummary: { type: Boolean, default: false },
|
|
hidePagination: { type: Boolean, default: false },
|
|
hideDo: { type: Boolean, default: false },
|
|
hideRefresh: { type: Boolean, default: false },
|
|
hideSetting: { type: Boolean, default: false },
|
|
paginationLayout: { type: String, default: config.paginationLayout },
|
|
},
|
|
watch: {
|
|
|
|
//监听从props里拿到值了
|
|
data() {
|
|
this.tableData = this.data;
|
|
this.total = this.tableData.length;
|
|
},
|
|
apiObj() {
|
|
this.tableParams = this.params;
|
|
this.refresh();
|
|
},
|
|
api() {
|
|
this.tableParams = this.params;
|
|
this.refresh();
|
|
},
|
|
tableColumn() {
|
|
this.column = this.tableColumn;
|
|
}
|
|
},
|
|
computed: {
|
|
_height() {
|
|
return Number(this.height) ? Number(this.height) + 'px' : this.height
|
|
},
|
|
_table_height() {
|
|
return this.hidePagination && this.hideDo ? "100%" : "calc(100% - 45px)"
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
scPageSize: this.pageSize,
|
|
emptyImage: require('@/assets/img/ver.svg'),
|
|
isActivat: true,
|
|
emptyText: "暂无数据",
|
|
toggleIndex: 0,
|
|
tableData: [],
|
|
total: 0,
|
|
currentPage: 1,
|
|
prop: null,
|
|
order: null,
|
|
loading: false,
|
|
visible: false,
|
|
tableHeight: '100%',
|
|
tableParams: this.params,
|
|
column: [],
|
|
selection: [],
|
|
customColumnShow: false,
|
|
tableUpdateKey: '',
|
|
xtabledialog: '',
|
|
tableStatKey: '',
|
|
summary: {},
|
|
visibleInfo: {},
|
|
config: {
|
|
size: this.size,
|
|
border: this.border,
|
|
stripe: this.stripe
|
|
},
|
|
}
|
|
},
|
|
mounted() {
|
|
this.column = this.tableColumn
|
|
//判断是否静态数据
|
|
if (this.apiObj || this.api) {
|
|
this.getData();
|
|
} else if (this.data) {
|
|
this.tableData = this.data;
|
|
this.total = this.tableData.length
|
|
}
|
|
},
|
|
activated() {
|
|
if (!this.isActivat) {
|
|
this.$refs.xTable.doLayout()
|
|
}
|
|
},
|
|
deactivated() {
|
|
this.isActivat = false;
|
|
},
|
|
methods: {
|
|
|
|
//编辑弹窗,成功后本地更新数据
|
|
handleSuccess(data, message) {
|
|
if (data && this.rowKey && data[this.rowKey]) {
|
|
this.tableData.filter(item => item[this.rowKey] === data[this.rowKey]).forEach(item => {
|
|
Object.assign(item, data)
|
|
})
|
|
} else {
|
|
this.refresh()
|
|
}
|
|
this.$message.success(message || "操作成功")
|
|
return;
|
|
},
|
|
|
|
//批量删除
|
|
async operation(o) {
|
|
|
|
if (this.selection.length == 0) {
|
|
this.$alert('请勾选你要' + (o.label || '操作') + '的项目', "提示", { type: 'error' });
|
|
return;
|
|
}
|
|
|
|
|
|
// 批量编辑
|
|
if (o.operationtype && o.operationtype == 'update') {
|
|
|
|
const options = o.bind || o.options || {};
|
|
|
|
this.tableUpdateKey = options.key || this.rowKey;
|
|
|
|
const ids = this.selection.map(obj => obj[this.tableUpdateKey]);
|
|
const row = Object.assign({}, this.selection[0]);
|
|
const componenttype = options.type || 'dialog';
|
|
|
|
row[this.tableUpdateKey] = ids;
|
|
|
|
this.$nextTick(() => {
|
|
this.$refs.xtableupdate.open().getComponentType(componenttype).setToken(ids).setData(row).setConfig(options);
|
|
})
|
|
return;
|
|
}
|
|
|
|
|
|
if (!o.url) {
|
|
this.$alert('没有批量' + (o.label || '操作') + '相关配置', "提示", { type: 'error' });
|
|
return;
|
|
}
|
|
|
|
this.$confirm(`确定${o.label}选中的 ${this.selection.length} 项吗？`, '提示', {
|
|
type: 'warning'
|
|
}).then(() => {
|
|
const delkey = o.key || this.rowKey;
|
|
const ids = this.selection.map(obj => obj[delkey]);
|
|
this.$http.post(o.url, { [delkey]: ids }).then((res) => {
|
|
if (res.code == 200) {
|
|
this.refresh();
|
|
this.$message.success(res.message || "操作成功")
|
|
return;
|
|
}
|
|
this.$alert(res.message, "提示", { type: 'error' });
|
|
this.$loading.close();
|
|
})
|
|
}).catch(() => {
|
|
|
|
})
|
|
},
|
|
|
|
getSelection(val) {
|
|
this.selection = val;
|
|
},
|
|
xtablehandleClick(row, options, type = 'update') {
|
|
var componenttype = options.type || 'dialog';
|
|
if (type == 'update') {
|
|
this.tableUpdateKey = options.name || this.name || this.rowKey;
|
|
this.$nextTick(() => {
|
|
this.$refs.xtableupdate.open().getComponentType(componenttype).setData(row).setConfig(options);
|
|
})
|
|
return;
|
|
}
|
|
else if (type == 'stat') {
|
|
this.tableStatKey = options.value || this.name || this.rowKey;
|
|
this.$nextTick(() => {
|
|
this.$refs.xtablestat.open().setData(row).setConfig(options);
|
|
})
|
|
return;
|
|
}
|
|
this.xtabledialog = options.name || this.name || this.rowKey;
|
|
this.$nextTick(() => {
|
|
this.$refs.xtabledialog.open().setData(row).getComponentType(componenttype).setConfig(options);
|
|
})
|
|
},
|
|
//获取数据
|
|
async getData(scrollto = true) {
|
|
var reqData = {
|
|
[config.request.page]: this.currentPage,
|
|
[config.request.pageSize]: this.scPageSize,
|
|
[config.request.prop]: this.prop,
|
|
[config.request.order]: this.order
|
|
}
|
|
|
|
if (this.hidePagination) {
|
|
delete reqData[config.request.page]
|
|
delete reqData[config.request.pageSize]
|
|
}
|
|
Object.assign(reqData, this.tableParams)
|
|
|
|
if (scrollto === true) {
|
|
this.loading = true;
|
|
let detailsArea = document.querySelector(".xdetailsarea");
|
|
if (detailsArea) {
|
|
detailsArea.scrollTo({ top: 0 });
|
|
}
|
|
}
|
|
|
|
try {
|
|
var xawait = this.api ? this.$http.get(this.api, reqData) : this.apiObj(reqData);
|
|
xawait.then((res) => {
|
|
try {
|
|
var response = config.parseData(res);
|
|
} catch (error) {
|
|
this.loading = false;
|
|
this.emptyText = "数据格式错误";
|
|
return false;
|
|
}
|
|
|
|
|
|
if (response.code != config.successCode) {
|
|
this.loading = false;
|
|
this.emptyText = response.message;
|
|
} else {
|
|
this.emptyText = "暂无数据";
|
|
this.tableData = (this.hidePagination ? response.data : response.rows) || [];
|
|
this.total = response.total || 0;
|
|
this.summary = response.summary || {};
|
|
this.loading = false;
|
|
}
|
|
if (this.$refs.xTable) {
|
|
this.$refs.xTable.setScrollTop(0)
|
|
}
|
|
// 回调
|
|
this.$emit('dataChange', res, this.tableData)
|
|
});
|
|
|
|
} catch (error) {
|
|
this.loading = false;
|
|
this.emptyText = error.statusText;
|
|
return false;
|
|
}
|
|
},
|
|
//分页点击
|
|
paginationChange() {
|
|
this.getData();
|
|
},
|
|
//条数变化
|
|
pageSizeChange(size) {
|
|
this.scPageSize = size
|
|
this.getData();
|
|
},
|
|
//刷新数据
|
|
refresh() {
|
|
this.$refs.xTable.clearSelection();
|
|
this.getData(false);
|
|
},
|
|
//更新数据 合并上一次params
|
|
upData(params, page = 1) {
|
|
this.currentPage = page;
|
|
this.$refs.xTable.clearSelection();
|
|
Object.assign(this.tableParams, params || {})
|
|
this.getData()
|
|
},
|
|
//重载数据 替换params
|
|
reload(params, page = 1) {
|
|
this.currentPage = page;
|
|
this.tableData = [];
|
|
this.tableParams = params || {}
|
|
this.$refs.xTable.clearSelection();
|
|
this.$refs.xTable.clearSort()
|
|
this.$refs.xTable.clearFilter()
|
|
this.getData()
|
|
},
|
|
//自定义变化事件
|
|
columnSettingChange(column) {
|
|
this.column = column;
|
|
this.toggleIndex += 1;
|
|
},
|
|
//自定义列保存
|
|
async columnSettingSave(column) {
|
|
this.$refs.columnSetting.isSave = true
|
|
try {
|
|
await config.columnSettingSave(this.name, column)
|
|
this.$message.success('保存成功')
|
|
this.$refs.columnSetting.isSave = false
|
|
} catch (error) {
|
|
this.$message.error('保存失败')
|
|
this.$refs.columnSetting.isSave = false
|
|
}
|
|
|
|
},
|
|
//自定义列重置
|
|
async columnSettingBack() {
|
|
this.$refs.columnSetting.isSave = true
|
|
try {
|
|
await config.columnSettingReset(this.name, this.column)
|
|
this.$refs.columnSetting.column = JSON.parse(JSON.stringify(this.column || []))
|
|
} catch (error) {
|
|
this.$message.error('重置失败')
|
|
this.$refs.columnSetting.isSave = false
|
|
}
|
|
this.$refs.columnSetting.isSave = false
|
|
},
|
|
//排序事件
|
|
sortChange(obj) {
|
|
if (!this.remoteSort) {
|
|
return false
|
|
}
|
|
|
|
if (obj.prop) {
|
|
this.prop = obj.prop
|
|
this.order = obj.order
|
|
} else {
|
|
this.prop = null
|
|
this.order = null
|
|
}
|
|
this.getData()
|
|
},
|
|
//本地过滤
|
|
filterHandler(value, row, column) {
|
|
const property = column.property;
|
|
return row[property] === value;
|
|
},
|
|
//过滤事件
|
|
filterChange(filters) {
|
|
if (!this.remoteFilter) {
|
|
return false
|
|
}
|
|
Object.keys(filters).forEach(key => {
|
|
filters[key] = filters[key].join(',')
|
|
})
|
|
this.upData(filters)
|
|
},
|
|
//远程合计行处理
|
|
remoteSummaryMethod(param) {
|
|
const { columns } = param
|
|
const sums = []
|
|
columns.forEach((column, index) => {
|
|
if (index === 0) {
|
|
sums[index] = '合计'
|
|
return
|
|
}
|
|
const values = this.summary[column.property]
|
|
if (values) {
|
|
sums[index] = values
|
|
} else {
|
|
sums[index] = ''
|
|
}
|
|
})
|
|
return sums
|
|
},
|
|
configSizeChange() {
|
|
this.$refs.xTable.doLayout()
|
|
},
|
|
//插入行 unshiftRow
|
|
unshiftRow(row) {
|
|
this.tableData.unshift(row)
|
|
},
|
|
//插入行 pushRow
|
|
pushRow(row) {
|
|
this.tableData.push(row)
|
|
},
|
|
//根据key覆盖数据
|
|
updateKey(row, rowKey = this.rowKey) {
|
|
this.tableData.filter(item => item[rowKey] === row[rowKey]).forEach(item => {
|
|
Object.assign(item, row)
|
|
})
|
|
},
|
|
//根据index覆盖数据
|
|
updateIndex(row, index) {
|
|
Object.assign(this.tableData[index], row)
|
|
},
|
|
//根据index删除
|
|
removeIndex(index) {
|
|
this.tableData.splice(index, 1)
|
|
},
|
|
//根据index批量删除
|
|
removeIndexes(indexes = []) {
|
|
indexes.forEach(index => {
|
|
this.tableData.splice(index, 1)
|
|
})
|
|
},
|
|
//根据key删除
|
|
removeKey(key, rowKey = this.rowKey) {
|
|
this.tableData.splice(this.tableData.findIndex(item => item[rowKey] === key), 1)
|
|
},
|
|
//根据keys批量删除
|
|
removeKeys(keys = [], rowKey = this.rowKey) {
|
|
keys.forEach(key => {
|
|
this.tableData.splice(this.tableData.findIndex(item => item[rowKey] === key), 1)
|
|
})
|
|
},
|
|
//原生方法转发
|
|
clearSelection() {
|
|
this.$refs.xTable.clearSelection()
|
|
},
|
|
toggleRowSelection(row, selected) {
|
|
this.$refs.xTable.toggleRowSelection(row, selected)
|
|
},
|
|
toggleAllSelection() {
|
|
this.$refs.xTable.toggleAllSelection()
|
|
},
|
|
toggleRowExpansion(row, expanded) {
|
|
this.$refs.xTable.toggleRowExpansion(row, expanded)
|
|
},
|
|
setCurrentRow(row) {
|
|
this.$refs.xTable.setCurrentRow(row)
|
|
},
|
|
clearSort() {
|
|
this.$refs.xTable.clearSort()
|
|
},
|
|
clearFilter(columnKey) {
|
|
this.$refs.xTable.clearFilter(columnKey)
|
|
},
|
|
doLayout() {
|
|
this.$refs.xTable.doLayout()
|
|
},
|
|
sort(prop, order) {
|
|
this.$refs.xTable.sort(prop, order)
|
|
}
|
|
}
|
|
}
|
|
</script>
|