458 lines
12 KiB
Vue
458 lines
12 KiB
Vue
<template>
|
||
<div class="business-table">
|
||
<el-table
|
||
ref="tableRef"
|
||
:data="cData"
|
||
:height="'100%'"
|
||
:width="'100%'"
|
||
:cell-style="tableConfig.cellStyleFunc"
|
||
:row-style="tableConfig.rowStyleFunc"
|
||
:id="tableConfig.tableId || tableId"
|
||
:default-sort="tableConfig.defaultSort"
|
||
class="el-table--scrollable-y"
|
||
:show-summary="tableConfig.hasSummary"
|
||
:summary-method="tableConfig.summaryMethod"
|
||
:span-method="tableConfig.spanMethod"
|
||
:tree-props="tableConfig.treeProps"
|
||
:lazy="tableConfig.lazy"
|
||
:load="tableConfig.load"
|
||
:row-class-name="tableConfig.rowClassNameFun"
|
||
:row-key="tableConfig.rowKey"
|
||
header-row-class-name="table-header"
|
||
v-bind="$attrs"
|
||
@cell-click="tableConfig.cellClick"
|
||
@selection-change="handleSelectionChange"
|
||
@sort-change="sortChange"
|
||
>
|
||
<el-table-column
|
||
v-if="tableConfig.multipleSelect"
|
||
:reserve-selection="tableConfig.reserveSelect"
|
||
:selectable="tableConfig.selectable"
|
||
type="selection"
|
||
header-align="center"
|
||
align="center"
|
||
/>
|
||
<slot />
|
||
<slot
|
||
name="control-column"
|
||
:canDelete="mergePermissions.delete"
|
||
:canModify="mergePermissions.modify"
|
||
:canDetail="mergePermissions.detail"
|
||
:modifyMethod="modify"
|
||
:removeMethod="remove"
|
||
:detailMethod="showDetail"
|
||
>
|
||
<el-table-column
|
||
fixed="right"
|
||
align="center"
|
||
class-name="control-column"
|
||
label="操作"
|
||
:width="tableConfig.controlWidth"
|
||
v-if="tableConfig.hasControlColumn"
|
||
>
|
||
<template #default="scope">
|
||
<template v-if="mergePermissions.canModifyCustom(scope.row)">
|
||
<el-link
|
||
type="primary"
|
||
v-if="mergePermissions.modify"
|
||
@click="modify(scope.row)"
|
||
title="修改"
|
||
>
|
||
修改
|
||
</el-link>
|
||
</template>
|
||
<template v-if="mergePermissions.canDeleteCustom(scope.row)">
|
||
<el-link
|
||
type="primary"
|
||
v-if="mergePermissions.delete"
|
||
@click="remove(scope.row)"
|
||
title="删除"
|
||
>
|
||
删除
|
||
</el-link>
|
||
</template>
|
||
<template v-if="mergePermissions.canDetailCustom(scope.row)">
|
||
<el-link
|
||
type="primary"
|
||
@click="showDetail(scope.row)"
|
||
title="详情"
|
||
v-if="mergePermissions.detail"
|
||
>
|
||
详情
|
||
</el-link>
|
||
</template>
|
||
<slot
|
||
name="otherControlButtons"
|
||
:data="scope"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
</slot>
|
||
</el-table>
|
||
|
||
<el-pagination
|
||
v-if="hasPagerBar"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
v-model:current-page="pagination.page"
|
||
:page-sizes="tableConfig.pageSizes"
|
||
v-model:page-size="pagination.pageSize"
|
||
:layout="tableConfig.pagerLayout"
|
||
:total="pagination.total"
|
||
background
|
||
>
|
||
<template #default>
|
||
<span
|
||
class="pager total"
|
||
:class="{ link: pageUnlimitCondition }"
|
||
@click="queryUnLimit"
|
||
>
|
||
{{ pagerTotal }}
|
||
</span>
|
||
</template>
|
||
</el-pagination>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {ref, reactive, computed, watch, onMounted, nextTick, getCurrentInstance} from 'vue'
|
||
import {ElMessage, ElMessageBox} from 'element-plus'
|
||
import { DATA_FLAGS } from '../utils/Constants'
|
||
import watermark from '@/utils/WarterMark'
|
||
import { v4 as uuid } from 'uuid'
|
||
import { merge } from 'lodash'
|
||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||
import { useUserStore } from '@/stores/modules/user'
|
||
import {
|
||
exportExcelFile,
|
||
toExportExcelFileByUrl,
|
||
toExportXmlAllFileByUrl,
|
||
toExportXmlSelectFileByUrl
|
||
} from "@/utils/ExportExcel.js";
|
||
|
||
const userStore = useUserStore()
|
||
const emit = defineEmits([
|
||
'query-params',
|
||
'do-query',
|
||
'show-detail',
|
||
'show-modify',
|
||
'do-remove',
|
||
'table-selection',
|
||
'do-customize',
|
||
])
|
||
|
||
const defaultConfig = {
|
||
tableLoading: false,
|
||
hasControlColumn: false,
|
||
controlWidth: '300',
|
||
pageSizes: [20, 40, 60, 100],
|
||
usePage: true,
|
||
multipleSelect: true,
|
||
selectable: null,
|
||
reserveSelect: false,
|
||
cellStyleFunc: null,
|
||
rowStyleFunc: null,
|
||
rowClassNameFun: null,
|
||
hasSummary: false,
|
||
summaryMethod: null,
|
||
spanMethod: null,
|
||
userInfo: {},
|
||
defaultSort: {},
|
||
treeProps: { children: 'children', hasChildren: 'hasChildren' },
|
||
useWaterMark: true,
|
||
istick: false,
|
||
pagerLayout: '->, slot, sizes, prev, pager, next'
|
||
}
|
||
|
||
const props = defineProps({
|
||
queryParams: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
config: Object,
|
||
dataRes: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
permissions: {
|
||
type: Object,
|
||
default: () => ({
|
||
modify: false,
|
||
delete: false,
|
||
detail: true,
|
||
canDeleteCustom: () => true,
|
||
canDetailCustom: () => true,
|
||
canModifyCustom: () => true,
|
||
}),
|
||
},
|
||
})
|
||
|
||
const defaultPermissions = {
|
||
modify: false,
|
||
delete: false,
|
||
detail: true,
|
||
canDeleteCustom: () => true,
|
||
canDetailCustom: () => true,
|
||
canModifyCustom: () => true,
|
||
}
|
||
|
||
const tableConfig = reactive(merge({}, defaultConfig, props.config))
|
||
const mergePermissions = reactive(merge({}, defaultPermissions, props.permissions))
|
||
// 响应式状态
|
||
const pagination = reactive({
|
||
page: 1,
|
||
pageSize: tableConfig.pageSizes[0] || 20,
|
||
total: 0,
|
||
})
|
||
|
||
const { proxy } = getCurrentInstance()
|
||
|
||
props.queryParams
|
||
|
||
const data = ref([])
|
||
const once = ref(true)
|
||
const tableHeaderLabel = ref([])
|
||
const tableHeaderProps = ref([])
|
||
|
||
// 计算属性
|
||
const cData = computed(() => data.value.filter((d) => !d.dataFlag || d.dataFlag !== DATA_FLAGS.REMOVE))
|
||
|
||
const pagerTotal = computed(() => {
|
||
const totalVal = pagination.total || 0
|
||
return totalVal === 0 || props.dataRes.relation === 'eq' ? `共${totalVal}条` : `>=${totalVal}条`
|
||
})
|
||
|
||
const pageUnlimitCondition = computed(() => props.dataRes.relation === 'gte' && props.queryParams.limit && !tableConfig.tableLoading)
|
||
|
||
const hasPagerBar = computed(() => tableConfig.usePage)
|
||
|
||
const tableId = computed(() => uuid())
|
||
|
||
// 生命周期
|
||
onMounted(() => {
|
||
if (tableConfig.useWaterMark) {
|
||
watermark.set('el-table', { username: userStore.username, mobile: userStore.mobile })
|
||
}
|
||
initQueryParams()
|
||
})
|
||
|
||
// 方法
|
||
const initQueryParams = () => {
|
||
emit('query-params', {
|
||
// 查询参数
|
||
...props.queryParams,
|
||
//
|
||
page: pagination.page,
|
||
pageSize: pagination.pageSize,
|
||
// 兼容旧接口
|
||
pagesize: pagination.pageSize,
|
||
// 初始化默认排序
|
||
sort: tableConfig.defaultSort.prop,
|
||
dir: tableConfig.defaultSort.order,
|
||
})
|
||
}
|
||
|
||
const query = (pageNum) => {
|
||
emit('query-params', {
|
||
...props.queryParams,
|
||
page: pageNum,
|
||
total: pagination.total,
|
||
})
|
||
emit('do-query')
|
||
}
|
||
|
||
const handleSizeChange = (size) => {
|
||
pagination.pageSize = size
|
||
pagination.page = 1
|
||
emit('query-params', { pagesize: size, pageSize: size })
|
||
}
|
||
|
||
const handleCurrentChange = (current) => {
|
||
pagination.page = current
|
||
query(current)
|
||
}
|
||
|
||
const showDetail = (row) => {
|
||
if (mergePermissions.detail) {
|
||
emit('show-detail', row)
|
||
}
|
||
}
|
||
|
||
const modify = (row) => {
|
||
if (mergePermissions.modify) {
|
||
emit('show-modify', row)
|
||
}
|
||
}
|
||
const remove = (row) => {
|
||
if (mergePermissions.delete) {
|
||
ElMessageBox.confirm('是否要删除选中的数据?', '确认', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
}).then(() => emit('do-remove', row))
|
||
.catch(() => {})
|
||
}
|
||
}
|
||
|
||
const handleSelectionChange = (val) => {
|
||
if (tableConfig.multipleSelect) {
|
||
emit('table-selection', val)
|
||
}
|
||
}
|
||
|
||
|
||
|
||
const sortChange = ({ prop, order, column }) => {
|
||
const dir = order === 'descending' ? 'desc' : 'asc'
|
||
emit('query-params', {
|
||
...props.queryParams,
|
||
sort: column.sortBy || prop,
|
||
dir: dir,
|
||
})
|
||
if (!once.value) emit('do-query')
|
||
once.value = false
|
||
}
|
||
|
||
const queryUnLimit = () => {
|
||
if (pageUnlimitCondition.value) {
|
||
emit('query-params', {
|
||
...props.queryParams,
|
||
limit: false,
|
||
total: 0,
|
||
})
|
||
emit('do-query')
|
||
}
|
||
}
|
||
|
||
const resetQuery = () => {
|
||
// 重置时不保留之前的查询参数，只设置分页相关参数
|
||
emit('query-params', {
|
||
page: 1,
|
||
total: 0,
|
||
pageSize: pagination.pageSize,
|
||
})
|
||
pagination.page = 1
|
||
once.value = true
|
||
}
|
||
|
||
const exportExcelFileForCurrentPage = (tableId, excelFileName) => { // 导出当前页数据为excel(不访问后台)
|
||
if (pagination.total === 0) {
|
||
ElMessage.warning('没有数据可以导出！')
|
||
return
|
||
}
|
||
exportExcelFile(tableId, excelFileName)
|
||
}
|
||
const exportExcelFileForAllData = (url, excelFileName, params) => { // 导出table页中所有数据，需要传入到后台进行查询并组装excel,params为自定义参数用于配合在后台对应的查询条件
|
||
if (pagination.total === 0) {
|
||
ElMessage.warning('没有数据可以导出！')
|
||
return
|
||
}
|
||
toExportExcelFileByUrl(url, tableHeaderLabel.value, tableHeaderProps.value, excelFileName, params, proxy)
|
||
}
|
||
const exportXmlSelectFileForData = (url, codeList) => {
|
||
if (codeList.length === 0) {
|
||
ElMessage.warning('没有数据可以导出！')
|
||
return
|
||
}
|
||
toExportXmlSelectFileByUrl(url, codeList, '企业XML格式数据', {}, proxy)
|
||
}
|
||
const exportXmlAllFileForData = (url, params) => {
|
||
toExportXmlAllFileByUrl(url, '企业XML格式数据', params, proxy)
|
||
}
|
||
|
||
// 数据监听
|
||
watch(
|
||
() => props.dataRes,
|
||
(val) => {
|
||
if (val?.success) {
|
||
data.value = tableConfig.istick ? [] : val.data
|
||
pagination.total = val.total
|
||
if (once.value) {
|
||
once.value = false
|
||
}
|
||
}
|
||
},
|
||
{ immediate: true, deep: true }
|
||
)
|
||
|
||
watch(
|
||
() => pagination.page,
|
||
(newVal, oldVal) => {
|
||
if (newVal !== oldVal) query(newVal)
|
||
}
|
||
)
|
||
defineExpose({
|
||
query,
|
||
resetQuery,
|
||
exportExcelFileForCurrentPage,
|
||
exportExcelFileForAllData,
|
||
exportXmlSelectFileForData,
|
||
exportXmlAllFileForData
|
||
})
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.business-table {
|
||
// 给表格添加圆角
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
:deep(.el-table) {
|
||
// 给表格添加圆角
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
|
||
// 设置表头背景色
|
||
.el-table__header th {
|
||
background-color: #D1E5FB !important;
|
||
}
|
||
|
||
// 设置表格内容行的样式
|
||
.el-table__row {
|
||
background-color: #ffffff;
|
||
|
||
// 斑马纹样式
|
||
&:nth-child(even) {
|
||
background-color: #D9E1F3;
|
||
}
|
||
}
|
||
|
||
.el-table__cell {
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
|
||
// 给分页组件添加圆角
|
||
::v-deep(.el-pagination) {
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
margin-top: 10px;
|
||
padding: 10px;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.control-column {
|
||
.el-link {
|
||
margin-right: 10px;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
&.el-link--primary {
|
||
color: var(--el-color-primary);
|
||
}
|
||
|
||
&.el-link--danger {
|
||
color: var(--el-color-danger);
|
||
}
|
||
|
||
&.el-link--info {
|
||
color: var(--el-color-info);
|
||
}
|
||
|
||
svg {
|
||
margin-right: 2px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|