<template>
|
<div class="app-table-pro">
|
<div class="header">
|
<div class="title">
|
{{ $props.title }}
|
<el-popover
|
placement="bottom"
|
title="多选列表"
|
:width="'60%'"
|
trigger="click"
|
v-if="selection"
|
>
|
<el-table
|
show-overflow-tooltip
|
:data="selectedList"
|
border
|
:height="300"
|
>
|
<template v-for="e in groupColumns" :key="e.id">
|
<el-table-column v-if="e.group.indexOf('$') === -1" :label="e.group">
|
<template v-for="column in e.columns" :key="column.id">
|
<table-column :columns="[column]">
|
<template v-for="slot in Object.keys($slots)" #[slot]="scope">
|
<slot :name="slot" v-bind="scope"/>
|
</template>
|
</table-column>
|
</template>
|
</el-table-column>
|
<table-column :columns="e.columns">
|
<template v-for="slot in Object.keys($slots)" #[slot]="scope">
|
<slot :name="slot" v-bind="scope"/>
|
</template>
|
</table-column>
|
<el-table-column
|
label="操作"
|
width="70"
|
fixed
|
>
|
<template #default="scope">
|
<el-button
|
style="padding: 5px 10px;"
|
type="danger"
|
icon="Delete"
|
@click="onSelectedDel(scope.row)"
|
>
|
</el-button>
|
</template>
|
</el-table-column>
|
</template>
|
</el-table>
|
<template #reference>
|
<el-badge :value="selectedList.length">
|
<el-button icon="Tickets" link class="icon">
|
</el-button>
|
</el-badge>
|
</template>
|
</el-popover>
|
</div>
|
<div class="button">
|
<div>
|
<slot name="header-button"/>
|
</div>
|
</div>
|
</div>
|
<el-table
|
ref='tableRef'
|
v-bind="$props"
|
show-overflow-tooltip
|
:highlight-current-row="!selection"
|
:height="complementHeight === -1 ? 'inherit' : height"
|
:data="tableData"
|
:border="border"
|
:row-key="rowKey"
|
:cell-style="cellStyle"
|
:expand-row-keys="expandRowKeys"
|
@current-change="onTableCurrent"
|
@select="selectionChange"
|
@select-all="selectionChange"
|
>
|
<el-table-column type="expand" v-if="expand">
|
<template #default="scope">
|
<slot name="table-expand" v-bind="scope"/>
|
</template>
|
</el-table-column>
|
|
<el-table-column type="selection" v-if="selection" width="40">
|
</el-table-column>
|
|
<template v-for="e in groupColumns" :key="e.id">
|
|
<el-table-column v-if="e.group.indexOf('$') === -1" :label="e.group">
|
<template v-for="column in e.columns" :key="column.id">
|
<table-column :columns="[column]">
|
<template v-for="slot in Object.keys($slots)" #[slot]="scope">
|
<slot :name="slot" v-bind="scope"/>
|
</template>
|
</table-column>
|
</template>
|
</el-table-column>
|
<table-column :columns="e.columns">
|
<template v-for="slot in Object.keys($slots)" #[slot]="scope">
|
<slot :name="slot" v-bind="scope"/>
|
</template>
|
</table-column>
|
</template>
|
<!-- 插入表格最后一行之后的插槽 -->
|
<template #append>
|
<slot name="append"/>
|
</template>
|
<!-- 无数据 -->
|
<template #empty>
|
<el-empty/>
|
</template>
|
</el-table>
|
</div>
|
</template>
|
|
<script setup>
|
|
import * as tools from '@/utils/tools.js'
|
|
import {useSettingStore} from '@/store/modules';
|
|
const settingsStore = useSettingStore();
|
|
import {table, context} from '@/hooks';
|
|
const {useForceUpdate} = context;
|
import TableColumn from "@/components/table/TablePro/TableColumn/index.vue";
|
|
const {useSelection, useExpand} = table;
|
|
const tableRef = ref();
|
|
const props = defineProps({
|
columns: {
|
type: Array,
|
default: []
|
},
|
border: {
|
type: Boolean,
|
default: true
|
},
|
title: {
|
type: String,
|
default: ''
|
},
|
rowKey: {
|
type: String,
|
default: 'id'
|
},
|
expand: {
|
type: Boolean,
|
default: false
|
},
|
selection: {
|
type: Boolean,
|
default: false
|
},
|
subCurrent: {
|
type: Function,
|
default: () => {
|
|
}
|
},
|
sortable: {
|
type: Object,
|
default: {}
|
},
|
complementHeight: {
|
type: Number,
|
default: 0
|
},
|
subSelection: {
|
type: Function,
|
default: () => {
|
|
}
|
}
|
});
|
|
|
const [$props, forceUpdate] = useForceUpdate(props);
|
|
const $forceUpdate = async (force) => {
|
forceUpdate(force);
|
onInit();
|
}
|
|
const {border, rowKey, expand, complementHeight} = $props;
|
|
const tableData = ref([]);
|
|
const [selectionChange, selectedList, selectedIds, toggleSelection] = useSelection(rowKey, tableRef, tableData);
|
|
const [expandRowKeys, clearExpand] = useExpand();
|
|
const cellStyle = ({row}) => ({
|
backgroundColor: selectedIds.value.includes(row[rowKey]) ? 'var(--el-color-primary-light-6)' : ''
|
});
|
/**
|
* 接收 columns 并设置为响应式
|
* @type {UnwrapNestedRefs<any[]>}
|
*/
|
const useColumns = ref([]);
|
|
|
const onSelectedDel = (row) => {
|
|
selectedList.value.forEach((e, i) => {
|
if (row[rowKey] === e[rowKey]) {
|
selectedList.value.splice(i, 1);
|
toggleSelection();
|
}
|
});
|
}
|
|
const onInit = () => {
|
if (JSON.stringify(useColumns.value) !== JSON.stringify($props.columns)) {
|
const columns = $props.columns.map((e, index) => {
|
e.group = e.group || `$${index}`;
|
e.isShow = true;
|
e.id = tools.uuid();
|
e.table = e.table || {};
|
e.table.sortable = false;
|
return e;
|
});
|
|
useColumns.value = columns;
|
}
|
|
}
|
|
watch(tableData, (val) => {
|
clearExpand();
|
if (Object.keys(dataForm.current).length > 0) {
|
if (!val.find(e => dataForm.current[rowKey] === e[rowKey])) {
|
onTableCurrent({});
|
}
|
}
|
});
|
|
watch(tableData, (val) => {
|
if (props.sortable.sort) {
|
val.sort(function (a, b) {
|
return props.sortable.order === 'desc' ? a[props.sortable.sort] - b[props.sortable.sort] : b[props.sortable.sort] - a[props.sortable.sort];
|
});
|
}
|
});
|
|
const dataForm = reactive({
|
current: {}
|
});
|
|
const setTableCurrent = (row = {}) => {
|
dataForm.current = row;
|
tableRef.value?.setCurrentRow(row);
|
}
|
|
watch(selectedList, (newValue) => {
|
props.subSelection(newValue);
|
});
|
|
const onTableCurrent = (row = {}) => {
|
setTableCurrent(row);
|
props.subCurrent(row);
|
}
|
|
const groupColumns = computed(() => {
|
const group = [...new Set(useColumns.value.map(column => column.group))];
|
return group.map(e => {
|
return {
|
id: tools.uuid(),
|
group: e,
|
columns: useColumns.value.filter(column => column.group === e)
|
}
|
});
|
});
|
|
const getTableCurrent = () => {
|
return dataForm.current;
|
}
|
|
const formatData = (format, data) => {
|
return format ? format(data) : (data || '')
|
}
|
|
const height = computed(() => window.innerHeight - 332 - (settingsStore.tagsView ? 39 : 0) + complementHeight)
|
|
const getSelectedList = () => selectedList.value;
|
|
const getSelectedIds = () => selectedIds.value;
|
|
const setSelected = (selected) => {
|
selectedList.value = selected;
|
}
|
|
|
onMounted(() => {
|
onInit();
|
});
|
|
const setTableData = (list) => {
|
tableData.value.splice(0, tableData.value.length)
|
tableData.value = tableData.value.concat(list);
|
}
|
|
const getTableData = () => tableData.value;
|
/**
|
* 暴露给父组件的参数和方法 (外部需要什么，都可以从这里暴露出去)
|
*/
|
defineExpose({
|
/**
|
* 初始化
|
*/
|
getTableData,
|
setTableData,
|
|
setSelected,
|
getTableCurrent,
|
setTableCurrent,
|
getSelectedList,
|
getSelectedIds,
|
$forceUpdate,
|
});
|
|
</script>
|
|
<style lang='scss'>
|
.app-table-pro {
|
padding: 10px;
|
background: #fff;
|
border-radius: 5px;
|
border: 1px solid var(--el-border-color-light);
|
overflow: hidden;
|
|
> .header {
|
align-items: center;
|
padding-bottom: 10px;
|
display: flex;
|
justify-content: space-between;
|
|
.title {
|
font-size: 14px;
|
color: var(--el-text-color-primary);
|
font-weight: 600;
|
display: flex;
|
align-items: center;
|
|
.icon {
|
margin-left: 3px;
|
|
.el-icon {
|
font-size: 17px;
|
}
|
}
|
}
|
|
.tools {
|
|
button {
|
margin-left: 10px;
|
}
|
|
}
|
|
.button {
|
flex: 1;
|
overflow: auto;
|
text-align: right;
|
margin-left: 15px;
|
margin-right: 15px;
|
|
> div {
|
display: inline-flex;
|
}
|
}
|
}
|
}
|
</style>
|
