fix: 删除该分支表格组件
This commit is contained in:
lilinyuan
@@ -1,293 +0,0 @@
|
|||||||
<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 || ''"
|
|
||||||
v-perm="btn.auth || ['*:*:*']"
|
|
||||||
@click="handleClickBtns(btn.key)"
|
|
||||||
>
|
|
||||||
{{ btn.name }}
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
<!-- 列显示配置 -->
|
|
||||||
<div v-if="isSettingCol">
|
|
||||||
<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>
|
|
||||||
<!-- 表格部分 -->
|
|
||||||
<div class="fv-table">
|
|
||||||
<el-table
|
|
||||||
:data="localData.list"
|
|
||||||
v-loading="localData.loading"
|
|
||||||
:row-key="tableConfig?.rowKey || 'id'"
|
|
||||||
v-bind="$attrs"
|
|
||||||
table-layout="auto"
|
|
||||||
: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 } from 'element-plus';
|
|
||||||
import { requestList } from '../../api/common';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
//表格配置
|
|
||||||
tableConfig: {
|
|
||||||
type: Object,
|
|
||||||
default: {}
|
|
||||||
},
|
|
||||||
//若使用外部数据
|
|
||||||
data: {
|
|
||||||
type: Array,
|
|
||||||
default: []
|
|
||||||
},
|
|
||||||
//是否使用分页
|
|
||||||
pagination: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
// 是否显示列配置
|
|
||||||
isSettingCol: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const tableInstance = ref()
|
|
||||||
const buttonRef = ref()
|
|
||||||
const popoverRef = ref()
|
|
||||||
|
|
||||||
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'])
|
|
||||||
|
|
||||||
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 = true
|
|
||||||
try {
|
|
||||||
const { code, data, msg } = await requestList(api, queryParmas)
|
|
||||||
if ( code === 1000 ) {
|
|
||||||
localData.list = data.rows
|
|
||||||
localData.total = data.total
|
|
||||||
localData.loading = false
|
|
||||||
} else {
|
|
||||||
ElMessage.error(msg)
|
|
||||||
localData.loading = false
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
ElMessage.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;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user