|
|
|
@ -2,6 +2,14 @@
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<!-- 查询表单 card -->
|
|
|
|
<!-- 查询表单 card -->
|
|
|
|
|
|
|
|
<!-- SearchForm 是自定义的搜索表单组件 -->
|
|
|
|
|
|
|
|
<!-- :search="search" 绑定搜索方法 -->
|
|
|
|
|
|
|
|
<!-- :reset="reset" 绑定重置方法 -->
|
|
|
|
|
|
|
|
<!-- :searchParam="searchParam" 绑定搜索参数 -->
|
|
|
|
|
|
|
|
<!-- :columns="searchColumns" 绑定搜索列配置 -->
|
|
|
|
|
|
|
|
<!-- :searchCol="searchCol" 绑定搜索项每列占比配置 -->
|
|
|
|
|
|
|
|
<!-- v-show="isShowSearch" 根据 isShowSearch 的值显示或隐藏搜索表单 -->
|
|
|
|
|
|
|
|
<!-- ref="searchForm" 为搜索表单组件添加引用 -->
|
|
|
|
<SearchForm
|
|
|
|
<SearchForm
|
|
|
|
:search="search"
|
|
|
|
:search="search"
|
|
|
|
:reset="reset"
|
|
|
|
:reset="reset"
|
|
|
|
@ -13,11 +21,12 @@
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 表格内容 card -->
|
|
|
|
<!-- 表格内容 card -->
|
|
|
|
<MyCard class="mt-2"
|
|
|
|
<MyCard class="mt-2">
|
|
|
|
><div class="card table-main">
|
|
|
|
<div class="card table-main">
|
|
|
|
<div class="table-header">
|
|
|
|
<div class="table-header">
|
|
|
|
<div class="flex justify-between header-button-lf mb-2">
|
|
|
|
<div class="flex justify-between header-button-lf mb-2">
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<!-- 具名插槽 tableHeader，传递了 selectedListIds、selectedList 和 isSelected 数据 -->
|
|
|
|
<slot
|
|
|
|
<slot
|
|
|
|
name="tableHeader"
|
|
|
|
name="tableHeader"
|
|
|
|
:selectedListIds="selectedListIds"
|
|
|
|
:selectedListIds="selectedListIds"
|
|
|
|
@ -27,15 +36,19 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="header-button-ri">
|
|
|
|
<div class="header-button-ri">
|
|
|
|
|
|
|
|
<!-- 具名插槽 toolButton，包含了一些功能按钮 -->
|
|
|
|
<slot name="toolButton">
|
|
|
|
<slot name="toolButton">
|
|
|
|
|
|
|
|
<!-- 刷新按钮，点击时调用 getTableList 方法获取表格数据 -->
|
|
|
|
<el-button :icon="Refresh" circle @click="getTableList" />
|
|
|
|
<el-button :icon="Refresh" circle @click="getTableList" />
|
|
|
|
<!-- <el-button :icon="Printer" circle v-if="columns.length" @click="handlePrint" /> -->
|
|
|
|
<!-- <el-button :icon="Printer" circle v-if="columns.length" @click="handlePrint" /> -->
|
|
|
|
|
|
|
|
<!-- 列设置按钮，当 columns 存在时显示，点击时调用 openColSetting 方法打开列设置 -->
|
|
|
|
<el-button
|
|
|
|
<el-button
|
|
|
|
:icon="Operation"
|
|
|
|
:icon="Operation"
|
|
|
|
circle
|
|
|
|
circle
|
|
|
|
v-if="columns.length"
|
|
|
|
v-if="columns.length"
|
|
|
|
@click="openColSetting"
|
|
|
|
@click="openColSetting"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
|
|
|
|
<!-- 搜索按钮，当 searchColumns 存在时显示，点击时切换 isShowSearch 的值显示或隐藏搜索表单 -->
|
|
|
|
<el-button
|
|
|
|
<el-button
|
|
|
|
:icon="Search"
|
|
|
|
:icon="Search"
|
|
|
|
circle
|
|
|
|
circle
|
|
|
|
@ -47,6 +60,13 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 表格主体 -->
|
|
|
|
<!-- 表格主体 -->
|
|
|
|
|
|
|
|
<!-- el-table 是 Element Plus 的表格组件 -->
|
|
|
|
|
|
|
|
<!-- ref="tableRef" 为表格组件添加引用 -->
|
|
|
|
|
|
|
|
<!-- v-bind="$attrs" 绑定父组件传递的所有属性 -->
|
|
|
|
|
|
|
|
<!-- :data="tableData" 绑定表格数据 -->
|
|
|
|
|
|
|
|
<!-- :border="border" 绑定表格是否有纵向边框 -->
|
|
|
|
|
|
|
|
<!-- :row-key="rowKey" 绑定行数据的唯一标识 -->
|
|
|
|
|
|
|
|
<!-- @selection-change="selectionChange" 监听表格行选择变化事件 -->
|
|
|
|
<el-table
|
|
|
|
<el-table
|
|
|
|
ref="tableRef"
|
|
|
|
ref="tableRef"
|
|
|
|
v-bind="$attrs"
|
|
|
|
v-bind="$attrs"
|
|
|
|
@ -57,31 +77,35 @@
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<!-- 默认插槽 -->
|
|
|
|
<!-- 默认插槽 -->
|
|
|
|
<slot></slot>
|
|
|
|
<slot></slot>
|
|
|
|
|
|
|
|
<!-- 循环渲染表格列 -->
|
|
|
|
<template v-for="item in tableColumns" :key="item">
|
|
|
|
<template v-for="item in tableColumns" :key="item">
|
|
|
|
<!-- selection || index -->
|
|
|
|
<!-- selection || index 类型的列 -->
|
|
|
|
<el-table-column
|
|
|
|
<el-table-column
|
|
|
|
v-bind="item"
|
|
|
|
v-bind="item"
|
|
|
|
:align="item.align ?? 'center'"
|
|
|
|
:align="item.align?? 'center'"
|
|
|
|
:reserve-selection="item.type == 'selection'"
|
|
|
|
:reserve-selection="item.type =='selection'"
|
|
|
|
v-if="item.type == 'selection' || item.type == 'index'"
|
|
|
|
v-if="item.type =='selection' || item.type == 'index'"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
<!-- expand 支持 tsx 语法 && 作用域插槽 (tsx > slot) -->
|
|
|
|
<!-- expand 类型的列，支持 tsx 语法和作用域插槽 -->
|
|
|
|
<el-table-column
|
|
|
|
<el-table-column
|
|
|
|
v-bind="item"
|
|
|
|
v-bind="item"
|
|
|
|
:align="item.align ?? 'center'"
|
|
|
|
:align="item.align?? 'center'"
|
|
|
|
v-if="item.type == 'expand'"
|
|
|
|
v-if="item.type == 'expand'"
|
|
|
|
v-slot="scope"
|
|
|
|
v-slot="scope"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
|
|
|
|
<!-- 如果有自定义渲染函数，则使用该函数渲染 -->
|
|
|
|
<component :is="item.render" :row="scope.row" v-if="item.render">
|
|
|
|
<component :is="item.render" :row="scope.row" v-if="item.render">
|
|
|
|
</component>
|
|
|
|
</component>
|
|
|
|
|
|
|
|
<!-- 否则使用插槽渲染 -->
|
|
|
|
<slot :name="item.type" :row="scope.row" v-else></slot>
|
|
|
|
<slot :name="item.type" :row="scope.row" v-else></slot>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
<!-- other 循环递归 -->
|
|
|
|
<!-- 其他类型的列，通过 TableColumn 组件递归渲染 -->
|
|
|
|
<TableColumn
|
|
|
|
<TableColumn
|
|
|
|
v-if="!item.type && item.prop && item.isShow"
|
|
|
|
v-if="!item.type && item.prop && item.isShow"
|
|
|
|
:column="item"
|
|
|
|
:column="item"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
|
|
|
|
<!-- 循环渲染插槽内容 -->
|
|
|
|
<template v-for="slot in Object.keys($slots)" #[slot]="scope">
|
|
|
|
<template v-for="slot in Object.keys($slots)" #[slot]="scope">
|
|
|
|
<slot :name="slot" :row="scope.row"></slot>
|
|
|
|
<slot :name="slot" :row="scope.row"></slot>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
@ -100,9 +124,10 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</el-table>
|
|
|
|
</el-table>
|
|
|
|
<!-- 分页组件 -->
|
|
|
|
<!-- 分页组件插槽 -->
|
|
|
|
<slot name="pagination">
|
|
|
|
<slot name="pagination">
|
|
|
|
<div class="mt-2 flex flex-row-reverse">
|
|
|
|
<div class="mt-2 flex flex-row-reverse">
|
|
|
|
|
|
|
|
<!-- Pagination 是自定义的分页组件，当 pagination 为 true 时显示 -->
|
|
|
|
<Pagination
|
|
|
|
<Pagination
|
|
|
|
v-if="pagination"
|
|
|
|
v-if="pagination"
|
|
|
|
:pageable="pageable"
|
|
|
|
:pageable="pageable"
|
|
|
|
@ -110,50 +135,78 @@
|
|
|
|
:handleCurrentChange="handleCurrentChange"
|
|
|
|
:handleCurrentChange="handleCurrentChange"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</slot></div
|
|
|
|
</slot>
|
|
|
|
></MyCard>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</MyCard>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 列设置 -->
|
|
|
|
<!-- 列设置 -->
|
|
|
|
|
|
|
|
<!-- ColSetting 是自定义的列设置组件，当 toolButton 为 true 时显示 -->
|
|
|
|
|
|
|
|
<!-- v-model:colSetting="colSetting" 双向绑定列设置数据 -->
|
|
|
|
<ColSetting v-if="toolButton" ref="colRef" v-model:colSetting="colSetting" />
|
|
|
|
<ColSetting v-if="toolButton" ref="colRef" v-model:colSetting="colSetting" />
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts" name="ProTable">
|
|
|
|
<script setup lang="ts" name="ProTable">
|
|
|
|
|
|
|
|
// 导入 Vue 相关的函数
|
|
|
|
import { ref, watch, computed, provide, onMounted } from 'vue'
|
|
|
|
import { ref, watch, computed, provide, onMounted } from 'vue'
|
|
|
|
|
|
|
|
// 导入自定义的表格相关 Hooks
|
|
|
|
import { useTable } from '@/hooks/useTable'
|
|
|
|
import { useTable } from '@/hooks/useTable'
|
|
|
|
|
|
|
|
// 导入响应式断点类型
|
|
|
|
import { BreakPoint } from '@/components/Grid/interface'
|
|
|
|
import { BreakPoint } from '@/components/Grid/interface'
|
|
|
|
|
|
|
|
// 导入表格列配置项接口
|
|
|
|
import { ColumnProps } from '@/components/ProTable/interface'
|
|
|
|
import { ColumnProps } from '@/components/ProTable/interface'
|
|
|
|
|
|
|
|
// 导入 Element Plus 的表格组件类型和属性接口
|
|
|
|
import { ElTable, TableProps } from 'element-plus'
|
|
|
|
import { ElTable, TableProps } from 'element-plus'
|
|
|
|
|
|
|
|
// 导入 Element Plus 的图标组件
|
|
|
|
import { Refresh, Printer, Operation, Search } from '@element-plus/icons-vue'
|
|
|
|
import { Refresh, Printer, Operation, Search } from '@element-plus/icons-vue'
|
|
|
|
|
|
|
|
// 导入一些工具函数
|
|
|
|
import {
|
|
|
|
import {
|
|
|
|
filterEnum,
|
|
|
|
filterEnum,
|
|
|
|
formatValue,
|
|
|
|
formatValue,
|
|
|
|
handleProp,
|
|
|
|
handleProp,
|
|
|
|
handleRowAccordingToProp
|
|
|
|
handleRowAccordingToProp
|
|
|
|
} from '@/utils/util'
|
|
|
|
} from '@/utils/util'
|
|
|
|
|
|
|
|
// 导入自定义的搜索表单组件
|
|
|
|
import SearchForm from '@/components/SearchForm/index.vue'
|
|
|
|
import SearchForm from '@/components/SearchForm/index.vue'
|
|
|
|
|
|
|
|
// 导入自定义的分页组件
|
|
|
|
import Pagination from './components/Pagination.vue'
|
|
|
|
import Pagination from './components/Pagination.vue'
|
|
|
|
|
|
|
|
// 导入自定义的列设置组件
|
|
|
|
import ColSetting from './components/ColSetting.vue'
|
|
|
|
import ColSetting from './components/ColSetting.vue'
|
|
|
|
|
|
|
|
// 导入自定义的表格列渲染组件
|
|
|
|
import TableColumn from './components/TableColumn.vue'
|
|
|
|
import TableColumn from './components/TableColumn.vue'
|
|
|
|
|
|
|
|
// 导入自定义的表格多选 Hooks
|
|
|
|
import { useSelection } from '@/hooks/useSelection'
|
|
|
|
import { useSelection } from '@/hooks/useSelection'
|
|
|
|
// import printJS from "print-js";
|
|
|
|
// import printJS from "print-js";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 定义搜索表单组件的引用
|
|
|
|
const searchForm = ref()
|
|
|
|
const searchForm = ref()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 定义 ProTable 组件的属性接口，继承自 TableProps 并去除 data 属性
|
|
|
|
interface ProTableProps extends Partial<Omit<TableProps<any>, 'data'>> {
|
|
|
|
interface ProTableProps extends Partial<Omit<TableProps<any>, 'data'>> {
|
|
|
|
columns: ColumnProps[] // 列配置项
|
|
|
|
// 列配置项数组
|
|
|
|
requestApi: (params: any) => Promise<any> // 请求表格数据的api ==> 必传
|
|
|
|
columns: ColumnProps[]
|
|
|
|
|
|
|
|
// 请求表格数据的 API 函数，必传
|
|
|
|
|
|
|
|
requestApi: (params: any) => Promise<any>
|
|
|
|
|
|
|
|
// 是否自动请求数据，可选
|
|
|
|
requestAuto?: boolean
|
|
|
|
requestAuto?: boolean
|
|
|
|
dataCallback?: (data: any) => any // 返回数据的回调函数，可以对数据进行处理 ==> 非必传
|
|
|
|
// 返回数据的回调函数，可对数据进行处理，非必传
|
|
|
|
title?: string // 表格标题，目前只在打印的时候用到 ==> 非必传
|
|
|
|
dataCallback?: (data: any) => any
|
|
|
|
pagination?: boolean // 是否需要分页组件 ==> 非必传（默认为true）
|
|
|
|
// 表格标题，目前只在打印时用到，非必传
|
|
|
|
initParam?: any // 初始化请求参数 ==> 非必传（默认为{}）
|
|
|
|
title?: string
|
|
|
|
border?: boolean // 是否带有纵向边框 ==> 非必传（默认为true）
|
|
|
|
// 是否需要分页组件，非必传，默认为 true
|
|
|
|
toolButton?: boolean // 是否显示表格功能按钮 ==> 非必传（默认为true）
|
|
|
|
pagination?: boolean
|
|
|
|
rowKey?: string // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
|
|
|
|
// 初始化请求参数，非必传，默认为 {}
|
|
|
|
searchCol?: number | Record<BreakPoint, number> // 表格搜索项 每列占比配置 ==> 非必传 { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }
|
|
|
|
initParam?: any
|
|
|
|
|
|
|
|
// 是否带有纵向边框，非必传，默认为 true
|
|
|
|
|
|
|
|
border?: boolean
|
|
|
|
|
|
|
|
// 是否显示表格功能按钮，非必传，默认为 true
|
|
|
|
|
|
|
|
toolButton?: boolean
|
|
|
|
|
|
|
|
// 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id，非必传，默认为 id
|
|
|
|
|
|
|
|
rowKey?: string
|
|
|
|
|
|
|
|
// 表格搜索项每列占比配置，非必传，如 { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }
|
|
|
|
|
|
|
|
searchCol?: number | Record<BreakPoint, number>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 接受父组件参数，配置默认值
|
|
|
|
// 接受父组件参数并设置默认值
|
|
|
|
const props = withDefaults(defineProps<ProTableProps>(), {
|
|
|
|
const props = withDefaults(defineProps<ProTableProps>(), {
|
|
|
|
requestAuto: true,
|
|
|
|
requestAuto: true,
|
|
|
|
columns: () => [],
|
|
|
|
columns: () => [],
|
|
|
|
@ -165,17 +218,17 @@ const props = withDefaults(defineProps<ProTableProps>(), {
|
|
|
|
searchCol: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 })
|
|
|
|
searchCol: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 })
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// 是否显示搜索模块
|
|
|
|
// 定义是否显示搜索模块的响应式变量
|
|
|
|
const isShowSearch = ref(true)
|
|
|
|
const isShowSearch = ref(true)
|
|
|
|
|
|
|
|
|
|
|
|
// 表格 DOM 元素
|
|
|
|
// 定义表格 DOM 元素的引用
|
|
|
|
const tableRef = ref<InstanceType<typeof ElTable>>()
|
|
|
|
const tableRef = ref<InstanceType<typeof ElTable>>()
|
|
|
|
|
|
|
|
|
|
|
|
// 表格多选 Hooks
|
|
|
|
// 使用表格多选 Hooks，获取相关的函数和数据
|
|
|
|
const { selectionChange, selectedList, selectedListIds, isSelected } =
|
|
|
|
const { selectionChange, selectedList, selectedListIds, isSelected } =
|
|
|
|
useSelection(props.rowKey)
|
|
|
|
useSelection(props.rowKey)
|
|
|
|
|
|
|
|
|
|
|
|
// 表格操作 Hooks
|
|
|
|
// 使用表格操作 Hooks，获取相关的函数和数据
|
|
|
|
const {
|
|
|
|
const {
|
|
|
|
tableData,
|
|
|
|
tableData,
|
|
|
|
pageable,
|
|
|
|
pageable,
|
|
|
|
@ -193,90 +246,99 @@ const {
|
|
|
|
props.dataCallback
|
|
|
|
props.dataCallback
|
|
|
|
)
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
// 清空选中数据列表
|
|
|
|
// 定义清空选中数据列表的函数
|
|
|
|
const clearSelection = () => tableRef.value!.clearSelection()
|
|
|
|
const clearSelection = () => tableRef.value!.clearSelection()
|
|
|
|
|
|
|
|
|
|
|
|
// 初始化请求
|
|
|
|
// 初始化请求，当 requestAuto 为 true 时调用 getTableList 方法
|
|
|
|
onMounted(() => props.requestAuto && getTableList())
|
|
|
|
onMounted(() => props.requestAuto && getTableList())
|
|
|
|
|
|
|
|
|
|
|
|
// 监听页面 initParam 改化，重新获取表格数据
|
|
|
|
// 监听 initParam 的变化，当变化时重新获取表格数据
|
|
|
|
watch(() => props.initParam, getTableList, { deep: true })
|
|
|
|
watch(() => props.initParam, getTableList, { deep: true })
|
|
|
|
|
|
|
|
|
|
|
|
// 接收 columns 并设置为响应式
|
|
|
|
// 定义表格列配置的响应式变量
|
|
|
|
const tableColumns = ref<ColumnProps[]>(props.columns)
|
|
|
|
const tableColumns = ref<ColumnProps[]>(props.columns)
|
|
|
|
|
|
|
|
|
|
|
|
// 定义 enumMap 存储 enum 值（避免异步请求无法格式化单元格内容 || 无法填充搜索下拉选择）
|
|
|
|
// 定义 enumMap 用于存储枚举值，通过 provide 提供给子组件
|
|
|
|
const enumMap = ref(new Map<string, { [key: string]: any }[]>())
|
|
|
|
const enumMap = ref(new Map<string, { [key: string]: any }[]>())
|
|
|
|
provide('enumMap', enumMap)
|
|
|
|
provide('enumMap', enumMap)
|
|
|
|
|
|
|
|
// 定义设置 enumMap 的函数
|
|
|
|
const setEnumMap = async (col: ColumnProps) => {
|
|
|
|
const setEnumMap = async (col: ColumnProps) => {
|
|
|
|
if (!col.enum) return
|
|
|
|
if (!col.enum) return
|
|
|
|
// 如果当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
|
|
|
|
// 如果 enum 是静态数据，则直接设置到 enumMap
|
|
|
|
if (typeof col.enum !== 'function')
|
|
|
|
if (typeof col.enum!== 'function')
|
|
|
|
return enumMap.value.set(col.prop!, col.enum!)
|
|
|
|
return enumMap.value.set(col.prop!, col.enum!)
|
|
|
|
|
|
|
|
// 如果 enum 是异步请求函数，则请求数据后设置到 enumMap
|
|
|
|
const { data } = await col.enum()
|
|
|
|
const { data } = await col.enum()
|
|
|
|
enumMap.value.set(col.prop!, data)
|
|
|
|
enumMap.value.set(col.prop!, data)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 扁平化 columns
|
|
|
|
// 定义扁平化 columns 的函数
|
|
|
|
const flatColumnsFunc = (
|
|
|
|
const flatColumnsFunc = (
|
|
|
|
columns: ColumnProps[],
|
|
|
|
columns: ColumnProps[],
|
|
|
|
flatArr: ColumnProps[] = []
|
|
|
|
flatArr: ColumnProps[] = []
|
|
|
|
) => {
|
|
|
|
) => {
|
|
|
|
columns.forEach(async col => {
|
|
|
|
columns.forEach(async col => {
|
|
|
|
|
|
|
|
// 如果有子列，则递归扁平化子列
|
|
|
|
if (col._children?.length) flatArr.push(...flatColumnsFunc(col._children))
|
|
|
|
if (col._children?.length) flatArr.push(...flatColumnsFunc(col._children))
|
|
|
|
flatArr.push(col)
|
|
|
|
flatArr.push(col)
|
|
|
|
|
|
|
|
|
|
|
|
// 给每一项 column 添加 isShow && isFilterEnum 默认属性
|
|
|
|
// 给每一项 column 添加 isShow 和 isFilterEnum 默认属性
|
|
|
|
col.isShow = col.isShow ?? true
|
|
|
|
col.isShow = col.isShow?? true
|
|
|
|
col.isFilterEnum = col.isFilterEnum ?? true
|
|
|
|
col.isFilterEnum = col.isFilterEnum?? true
|
|
|
|
|
|
|
|
|
|
|
|
// 设置 enumMap
|
|
|
|
// 设置 enumMap
|
|
|
|
setEnumMap(col)
|
|
|
|
setEnumMap(col)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
return flatArr.filter(item => !item._children?.length)
|
|
|
|
// 返回过滤掉有子列的列
|
|
|
|
|
|
|
|
return flatArr.filter(item =>!item._children?.length)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// flatColumns
|
|
|
|
// 定义扁平化后的 columns 响应式变量
|
|
|
|
const flatColumns = ref<ColumnProps[]>()
|
|
|
|
const flatColumns = ref<ColumnProps[]>()
|
|
|
|
flatColumns.value = flatColumnsFunc(tableColumns.value)
|
|
|
|
flatColumns.value = flatColumnsFunc(tableColumns.value)
|
|
|
|
// 过滤需要搜索的配置项
|
|
|
|
// 过滤出需要搜索的列配置项
|
|
|
|
const searchColumns = flatColumns.value.filter(item => item.search?.el)
|
|
|
|
const searchColumns = flatColumns.value.filter(item => item.search?.el)
|
|
|
|
|
|
|
|
|
|
|
|
// 设置搜索表单排序默认值 && 设置搜索表单项的默认值
|
|
|
|
// 设置搜索表单排序默认值和表单项默认值
|
|
|
|
searchColumns.forEach((column, index) => {
|
|
|
|
searchColumns.forEach((column, index) => {
|
|
|
|
column.search!.order = column.search!.order ?? index + 2
|
|
|
|
column.search!.order = column.search!.order?? index + 2
|
|
|
|
if (
|
|
|
|
if (
|
|
|
|
column.search?.defaultValue !== undefined &&
|
|
|
|
column.search?.defaultValue!== undefined &&
|
|
|
|
column.search?.defaultValue !== null
|
|
|
|
column.search?.defaultValue!== null
|
|
|
|
) {
|
|
|
|
) {
|
|
|
|
searchInitParam.value[column.search.key ?? handleProp(column.prop!)] =
|
|
|
|
searchInitParam.value[column.search.key?? handleProp(column.prop!)] =
|
|
|
|
column.search?.defaultValue
|
|
|
|
column.search?.defaultValue
|
|
|
|
searchParam.value[column.search.key ?? handleProp(column.prop!)] =
|
|
|
|
searchParam.value[column.search.key?? handleProp(column.prop!)] =
|
|
|
|
column.search?.defaultValue
|
|
|
|
column.search?.defaultValue
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// 排序搜索表单项
|
|
|
|
// 对搜索表单项进行排序
|
|
|
|
searchColumns.sort((a, b) => a.search!.order! - b.search!.order!)
|
|
|
|
searchColumns.sort((a, b) => a.search!.order! - b.search!.order!)
|
|
|
|
|
|
|
|
|
|
|
|
// 列设置 ==> 过滤掉不需要设置显隐的列
|
|
|
|
// 定义列设置组件的引用
|
|
|
|
const colRef = ref()
|
|
|
|
const colRef = ref()
|
|
|
|
|
|
|
|
// 过滤掉不需要设置显隐的列，得到列设置数据
|
|
|
|
const colSetting = tableColumns.value!.filter(
|
|
|
|
const colSetting = tableColumns.value!.filter(
|
|
|
|
item =>
|
|
|
|
item =>
|
|
|
|
!['selection', 'index', 'expand'].includes(item.type!) &&
|
|
|
|
![
|
|
|
|
item.prop !== 'operation'
|
|
|
|
'selection',
|
|
|
|
|
|
|
|
'index',
|
|
|
|
|
|
|
|
'expand'
|
|
|
|
|
|
|
|
].includes(item.type!) && item.prop!== 'operation'
|
|
|
|
)
|
|
|
|
)
|
|
|
|
|
|
|
|
// 定义打开列设置的函数
|
|
|
|
const openColSetting = () => colRef.value.openColSetting()
|
|
|
|
const openColSetting = () => colRef.value.openColSetting()
|
|
|
|
|
|
|
|
|
|
|
|
//不需要打印可以把以下方法删除（目前数据处理比较复杂 201-238）
|
|
|
|
//不需要打印可以把以下方法删除（目前数据处理比较复杂 201-238）
|
|
|
|
// 处理打印数据（把后台返回的值根据 enum 做转换）
|
|
|
|
// 定义计算属性，处理打印数据（根据 enum 转换后台返回的值）
|
|
|
|
const printData = computed(() => {
|
|
|
|
const printData = computed(() => {
|
|
|
|
const printDataList = JSON.parse(
|
|
|
|
const printDataList = JSON.parse(
|
|
|
|
JSON.stringify(
|
|
|
|
JSON.stringify(
|
|
|
|
selectedList.value.length ? selectedList.value : tableData.value
|
|
|
|
selectedList.value.length? selectedList.value : tableData.value
|
|
|
|
)
|
|
|
|
)
|
|
|
|
)
|
|
|
|
)
|
|
|
|
// 找出需要转换数据的列（有 enum || 多级 prop && 需要根据 enum 格式化）
|
|
|
|
// 找出需要转换数据的列
|
|
|
|
const needTransformCol = flatColumns.value!.filter(
|
|
|
|
const needTransformCol = flatColumns.value!.filter(
|
|
|
|
item =>
|
|
|
|
item =>
|
|
|
|
(item.enum || (item.prop && item.prop.split('.').length > 1)) &&
|
|
|
|
(item.enum || (item.prop && item.prop.split('.').length > 1)) &&
|
|
|
|
@ -285,13 +347,13 @@ const printData = computed(() => {
|
|
|
|
needTransformCol.forEach(colItem => {
|
|
|
|
needTransformCol.forEach(colItem => {
|
|
|
|
printDataList.forEach((tableItem: { [key: string]: any }) => {
|
|
|
|
printDataList.forEach((tableItem: { [key: string]: any }) => {
|
|
|
|
tableItem[handleProp(colItem.prop!)] =
|
|
|
|
tableItem[handleProp(colItem.prop!)] =
|
|
|
|
colItem.prop!.split('.').length > 1 && !colItem.enum
|
|
|
|
colItem.prop!.split('.').length > 1 &&!colItem.enum
|
|
|
|
? formatValue(handleRowAccordingToProp(tableItem, colItem.prop!))
|
|
|
|
? formatValue(handleRowAccordingToProp(tableItem, colItem.prop!))
|
|
|
|
: filterEnum(
|
|
|
|
: filterEnum(
|
|
|
|
handleRowAccordingToProp(tableItem, colItem.prop!),
|
|
|
|
handleRowAccordingToProp(tableItem, colItem.prop!),
|
|
|
|
enumMap.value.get(colItem.prop!),
|
|
|
|
enumMap.value.get(colItem.prop!),
|
|
|
|
colItem.fieldNames
|
|
|
|
colItem.fieldNames
|
|
|
|
)
|
|
|
|
)
|
|
|
|
for (const key in tableItem) {
|
|
|
|
for (const key in tableItem) {
|
|
|
|
if (tableItem[key] === null)
|
|
|
|
if (tableItem[key] === null)
|
|
|
|
tableItem[key] = formatValue(tableItem[key])
|
|
|
|
tableItem[key] = formatValue(tableItem[key])
|
|
|
|
@ -318,7 +380,7 @@ const printData = computed(() => {
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
// };
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
|
|
// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
|
|
|
|
// 暴露给父组件的参数和方法
|
|
|
|
defineExpose({
|
|
|
|
defineExpose({
|
|
|
|
element: tableRef,
|
|
|
|
element: tableRef,
|
|
|
|
tableData,
|
|
|
|
tableData,
|
|
|
|
|
