350 lines
8.6 KiB
Vue
350 lines
8.6 KiB
Vue
<template>
|
|
<div class="fv-table-container">
|
|
<!-- 表格头部按钮 -->
|
|
<div class="fv-table-btn" v-if="tableConfig.btns">
|
|
<div class="table-head-btn">
|
|
<el-button
|
|
v-for="btn in tableConfig.btns"
|
|
:key="btn.key"
|
|
:type="btn.type || ''"
|
|
:color="btn.color || ''"
|
|
v-perm="btn.auth || ['*:*:*']"
|
|
@click="handleClickBtns(btn.key)"
|
|
>
|
|
{{ btn.name }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
<!-- 列显示配置 -->
|
|
<div v-if="isSettingCol" style="float: right">
|
|
<!-- <el-button v-if="tableConfig.export && tableConfig.export.open" @click="exportTable" color="#DED0B2"-->
|
|
<!-- style="margin-bottom: 10px">导出-->
|
|
<!-- </el-button>-->
|
|
<el-tooltip effect="dark" content="列配置" placement="bottom">
|
|
<el-button ref="buttonRef" link>
|
|
<el-icon size="18">
|
|
<Setting/>
|
|
</el-icon>
|
|
</el-button>
|
|
</el-tooltip>
|
|
<el-popover
|
|
placement="bottom"
|
|
:width="200"
|
|
ref="popoverRef"
|
|
:virtual-ref="buttonRef"
|
|
virtual-triggering
|
|
trigger="click">
|
|
<div class="col-setting-checkall">
|
|
<el-checkbox label="列展示" v-model="localData.allColShow" :indeterminate="localData.indeterminate"
|
|
@change="changeIsShowAll"></el-checkbox>
|
|
</div>
|
|
<div class="col-setting-list">
|
|
<el-checkbox-group v-model="localData.checkGroup" @change="changeColShow">
|
|
<el-space direction="vertical" alignment="flex-start" :size="0">
|
|
<el-checkbox
|
|
v-for="item in tableConfig.columns"
|
|
:key="item.prop"
|
|
:label="item.label"
|
|
:value="item.prop"
|
|
/>
|
|
</el-space>
|
|
</el-checkbox-group>
|
|
</div>
|
|
</el-popover>
|
|
</div>
|
|
<!-- 表格部分 -->
|
|
<div class="fv-table">
|
|
<el-table
|
|
:data="localData.list"
|
|
v-loading="localData.loading"
|
|
:row-key="tableConfig?.rowKey || 'id'"
|
|
v-bind="$attrs"
|
|
:show-overflow-tooltip="true"
|
|
highlight-current-row
|
|
@selection-change="selectionChange"
|
|
@row-click="rowClick"
|
|
@row-dblclick="rowDblclick"
|
|
@cell-click="cellClick"
|
|
v-tabh
|
|
ref="tableInstance"
|
|
>
|
|
<template #default>
|
|
<fvTableColumn v-for="column in localData.columns" :key="column.prop" :columns="column">
|
|
<template v-if="column?.slots?.header" #[column?.slots?.header]="params">
|
|
<slot :name="column?.slots?.header" v-bind="params || {}"></slot>
|
|
</template>
|
|
<template v-if="column?.slots?.default" #[column?.slots?.default]="params">
|
|
<slot :name="column?.slots?.default" v-bind="params || {}"></slot>
|
|
</template>
|
|
</fvTableColumn>
|
|
</template>
|
|
<template #empty>
|
|
<slot name="empty"></slot>
|
|
</template>
|
|
<template #append>
|
|
<slot name="append"></slot>
|
|
</template>
|
|
</el-table>
|
|
<!-- 分页 -->
|
|
<fvPagination
|
|
v-if="pagination"
|
|
:current-page="localData.query.pageNum"
|
|
:page-size="localData.query.pageSize"
|
|
:page-sizes="[10, 20, 30, 40,50]"
|
|
:total="localData.total"
|
|
@changeSize="handleSizeChange"
|
|
@goPage="handleCurrentChange"
|
|
>
|
|
</fvPagination>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ElMessage,ElNotification } from 'element-plus';
|
|
import { requestList } from '../../api/common';
|
|
// import {exportExcel} from "@/utils/export-excel";
|
|
|
|
const props = defineProps({
|
|
//表格配置
|
|
tableConfig: {
|
|
type: Object,
|
|
default: {}
|
|
},
|
|
//若使用外部数据
|
|
data: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
//是否使用分页
|
|
pagination: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 是否显示列配置
|
|
isSettingCol: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
//表格是否刷新
|
|
isLoading: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
})
|
|
|
|
const tableInstance = ref()
|
|
const buttonRef = ref()
|
|
const popoverRef = ref()
|
|
|
|
|
|
const exportTable = () => {
|
|
const $e = tableInstance.value.$el
|
|
let $table = $e.querySelector('.el-table__fixed')
|
|
if (!$table) {
|
|
$table = $e
|
|
}
|
|
let fileName = ""
|
|
if (props.tableConfig.export && props.tableConfig.export) {
|
|
fileName = props.tableConfig.export.fileName
|
|
}
|
|
exportExcel($table, Object.keys(localData.list[0]), fileName)
|
|
}
|
|
|
|
const localData = reactive({
|
|
list: [], // 表格数据
|
|
query: {
|
|
pageSize: 10,
|
|
pageNum: 1
|
|
},
|
|
total: 0,
|
|
loading: false,
|
|
// 列展示设置
|
|
columns: [],
|
|
allColShow: true, // 默认全部列都展示
|
|
indeterminate: false,
|
|
checkGroup: []
|
|
})
|
|
|
|
const emits = defineEmits(['headBtnClick', 'selectionChange', 'rowClick', 'rowDblclick', 'getBaseQuery', 'cellClick', 'getTotal'])
|
|
|
|
const handleClickBtns = (key) => {
|
|
emits('headBtnClick', key)
|
|
}
|
|
|
|
const filterColumns = () => {
|
|
localData.columns = props.tableConfig.columns.map(item => {
|
|
if (item.prop) {
|
|
return {
|
|
...item
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
const changeIsShowAll = (val) => {
|
|
if (val) {
|
|
filterColumns()
|
|
localData.indeterminate = false
|
|
localData.checkGroup = props.tableConfig.columns.map(item => item.prop)
|
|
} else {
|
|
localData.columns.length = 0
|
|
localData.checkGroup.length = 0
|
|
localData.indeterminate = false
|
|
}
|
|
}
|
|
|
|
const changeColShow = (val) => {
|
|
if (val.length == props.tableConfig.columns.length) {
|
|
localData.indeterminate = false
|
|
localData.allColShow = true
|
|
} else if (val.length !== props.tableConfig.columns.length && val.length != 0) {
|
|
localData.allColShow = false
|
|
localData.indeterminate = true
|
|
} else {
|
|
localData.indeterminate = false
|
|
localData.allColShow = false
|
|
}
|
|
const template = []
|
|
props.tableConfig.columns.forEach(item => {
|
|
val.forEach(v => {
|
|
if (item.prop == v) {
|
|
template.push(item)
|
|
}
|
|
})
|
|
})
|
|
localData.columns = template
|
|
}
|
|
|
|
filterColumns()
|
|
|
|
const getList = async () => {
|
|
const { api, params } = props.tableConfig
|
|
const queryParmas = {...localData.query, ...params}
|
|
if(api) {
|
|
localData.loading = props.isLoading
|
|
try {
|
|
const {code, data, msg} = await requestList(api, queryParmas).then(res=>{
|
|
// console.log(res)
|
|
return res
|
|
})
|
|
// console.log(code,data,msg)
|
|
if (code === 1000) {
|
|
if (data.rows) {
|
|
localData.list = data.rows
|
|
} else {
|
|
localData.list = data
|
|
}
|
|
localData.total = data.total
|
|
emits('getTotal', localData.total)
|
|
localData.loading = false
|
|
} else {
|
|
ElNotification({
|
|
title: '提示',
|
|
message: msg,
|
|
type: 'error'
|
|
})
|
|
localData.loading = false
|
|
}
|
|
} catch (error) {
|
|
console.log("error",error)
|
|
if (!error){
|
|
return
|
|
}
|
|
ElNotification({
|
|
title: '提示',
|
|
message: '请求数据失败',
|
|
type: 'error'
|
|
})
|
|
localData.loading = false
|
|
}
|
|
} else {
|
|
localData.list = props.data
|
|
}
|
|
}
|
|
|
|
const selectionChange = (data) => {
|
|
emits('selectionChange', data)
|
|
}
|
|
|
|
const rowClick = (row, column) => {
|
|
emits('rowClick', row, column)
|
|
}
|
|
|
|
const rowDblclick = (row, column) => {
|
|
emits('rowDblclick', row, column)
|
|
}
|
|
|
|
const cellClick = (row, column) => {
|
|
emits('cellClick', row, column)
|
|
}
|
|
|
|
//切换每页显示条数
|
|
const handleSizeChange = (val) => {
|
|
localData.query.pageSize = val
|
|
emits('getBaseQuery', localData.query)
|
|
getList()
|
|
}
|
|
//点击页码进行分页功能
|
|
const handleCurrentChange = (val) => {
|
|
localData.query.pageNum = val
|
|
emits('getBaseQuery', localData.query)
|
|
getList()
|
|
}
|
|
|
|
watchEffect(() => {
|
|
if (localData.allColShow) {
|
|
localData.checkGroup = props.tableConfig.columns.map(item => item.prop)
|
|
}
|
|
})
|
|
//刷新
|
|
const refresh = ({resetPage=false}={}) => {
|
|
resetPage ? localData.query.pageNum = 1 : null
|
|
getList()
|
|
}
|
|
//改变loading状态
|
|
const updateLoading = (status) => {
|
|
localData.loading = status
|
|
}
|
|
//获取基础查询条件
|
|
const getQuery = () => {
|
|
return localData.query
|
|
}
|
|
|
|
defineExpose({ refresh, updateLoading, getQuery, tableInstance })
|
|
|
|
onMounted(() => {
|
|
getList()
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.col-setting-checkall {
|
|
border-bottom: 1px solid rgb(210, 210, 213);
|
|
}
|
|
|
|
.col-setting-list {
|
|
max-height: 45vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.table-head-btn {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.fv-table-btn {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-content: center;
|
|
}
|
|
|
|
.fv-table {
|
|
:deep(.el-tooltip) {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
</style>
|