You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
3.7 KiB
148 lines
3.7 KiB
<template>
|
|
<div>
|
|
<div class="flex">
|
|
<el-table
|
|
:data="tableObject.tableList"
|
|
:row-key="rowkey"
|
|
:expand-row-keys="expandRowKeys"
|
|
border
|
|
style="flex: 1"
|
|
@selection-change="handleSelectionChange"
|
|
>
|
|
<slot></slot>
|
|
</el-table>
|
|
<el-button
|
|
ref="ColumnSetting"
|
|
plain
|
|
style="writing-mode: vertical-lr; height: 100px; letter-spacing: 2px"
|
|
@click="clickSetting"
|
|
>表格列控制</el-button
|
|
>
|
|
<el-popover
|
|
ref="TableColumnPop"
|
|
:virtual-ref="ColumnSetting"
|
|
placement="left"
|
|
width="120px"
|
|
trigger="click"
|
|
virtual-triggering
|
|
>
|
|
<el-checkbox-group v-model="checkedColumns" @change="confirm">
|
|
<draggable
|
|
v-model="allColumns"
|
|
item-key="field"
|
|
ghost-class="draggable-ghost"
|
|
:animation="400"
|
|
@end="onDragEnd"
|
|
>
|
|
<template #item="{ element: item }">
|
|
<el-checkbox :key="item.id" :label="item.id">
|
|
{{ item.label }}
|
|
</el-checkbox>
|
|
</template>
|
|
</draggable>
|
|
</el-checkbox-group>
|
|
</el-popover>
|
|
</div>
|
|
<!-- 分页 -->
|
|
<Pagination
|
|
v-model:limit="pageSize"
|
|
v-model:page="pageNo"
|
|
:total="tableObject.total"
|
|
@pagination="getList"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import draggable from 'vuedraggable'
|
|
import * as ClueCacheApi from '@/api/clue/clueCache'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
const props = defineProps({
|
|
tableObject: { type: Object, default: () => ({ tableList: [] }) },
|
|
tableColumns: { type: Array, default: () => [] },
|
|
rowkey: { type: String, default: 'id' },
|
|
expandRowKeys: { type: Array, default: () => [] }
|
|
})
|
|
|
|
const emit = defineEmits(['update:tableObject', 'getList', 'getCheckedColumns', 'selection-change'])
|
|
const route = useRoute()
|
|
|
|
const pageNo = ref(props.tableObject?.pageNo || 1)
|
|
|
|
const pageSize = ref(props.tableObject?.pageSize || 20)
|
|
|
|
const ColumnSetting = ref()
|
|
const TableColumnPop = ref()
|
|
// 展示在设置里的所有表格列，由于会排序，所以使用新属性，不直接修改原值
|
|
const allColumns = ref([...props.tableColumns])
|
|
// 已勾选的选项
|
|
const checkedColumns = ref([])
|
|
|
|
// 调用获取数据的接口,分页时需要使用
|
|
function getList({ page, limit }) {
|
|
emit('update:tableObject', { ...props.tableObject, pageNo: page, pageSize: limit })
|
|
nextTick(() => {
|
|
emit('getList')
|
|
})
|
|
}
|
|
|
|
// 点击"表格列控制"按钮，出现设置页面
|
|
const clickSetting = () => {
|
|
unref(TableColumnPop).TableColumnPop?.delayHide?.()
|
|
}
|
|
|
|
const routeMap = {
|
|
CluePool: 1,
|
|
ClueOrder: 2
|
|
}
|
|
|
|
// 获取用户已勾选的表头
|
|
async function getUserCheckedColumns() {
|
|
checkedColumns.value = await ClueCacheApi.getClueCache({
|
|
settingType: 2,
|
|
model: routeMap[route.name]
|
|
})
|
|
// 回显到表格中
|
|
emitColumns()
|
|
}
|
|
|
|
// 表格列排序
|
|
function onDragEnd() {
|
|
ClueCacheApi.setClueCache({
|
|
settingType: 2,
|
|
model: routeMap[route.name],
|
|
clueParamId: checkedColumns.value
|
|
})
|
|
|
|
// 表格回显
|
|
emitColumns()
|
|
}
|
|
|
|
function handleSelectionChange(val) {
|
|
emit('selection-change', val)
|
|
}
|
|
|
|
// 勾选确认
|
|
function confirm() {
|
|
ClueCacheApi.setClueCache({
|
|
settingType: 2,
|
|
model: routeMap[route.name],
|
|
clueParamId: checkedColumns.value
|
|
})
|
|
// usedSchema.value = allColumns.value.filter((it) => checkedColumns.value.includes(it.id))
|
|
emitColumns()
|
|
}
|
|
|
|
// 将表头数据返回至父组件
|
|
function emitColumns() {
|
|
const arr = allColumns.value.filter((item) => checkedColumns.value.includes(item.id))
|
|
emit('getCheckedColumns', arr)
|
|
}
|
|
|
|
getUserCheckedColumns()
|
|
|
|
defineExpose({ getUserCheckedColumns })
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|
|
|