feat(PIMTable): 支持列动态显示控制
- 在 PIMTable 组件中添加 visibleColumns 计算属性,根据列的 visible 属性过滤显示列
- 添加 resolveColumnVisible 函数,支持 visible 为布尔值或函数形式
- 在指标维护页面中,为 processId 列添加 visible 控制,使其仅在特定标签页显示
- 为 inspectType 列添加最小宽度以改善布局
| | |
| | | <el-table-column align="center" label="序号" type="index" width="60" /> |
| | | |
| | | <el-table-column |
| | | v-for="(item, index) in column" |
| | | v-for="(item, index) in visibleColumns" |
| | | :key="index" |
| | | :column-key="item.columnKey" |
| | | :filter-method="item.filterHandler" |
| | |
| | | |
| | | <script setup> |
| | | import pagination from "./Pagination.vue"; |
| | | import { ref, inject, getCurrentInstance } from "vue"; |
| | | import { ref, inject, getCurrentInstance, computed, unref } from "vue"; |
| | | import { ElMessage } from "element-plus"; |
| | | |
| | | // 获取全局的 uploadHeader |
| | |
| | | }, |
| | | }); |
| | | |
| | | const resolveColumnVisible = (visible) => { |
| | | if (visible === undefined) return true; |
| | | if (typeof visible === "function") { |
| | | try { |
| | | return !!visible(); |
| | | } catch (error) { |
| | | console.warn("PIMTable column visible function error:", error); |
| | | return true; |
| | | } |
| | | } |
| | | return !!unref(visible); |
| | | }; |
| | | |
| | | const visibleColumns = computed(() => { |
| | | return (props.column || []).filter((item) => resolveColumnVisible(item?.visible)); |
| | | }); |
| | | |
| | | // Data |
| | | const uploadRefs = ref([]); |
| | | const currentFiles = ref({}); |
| | |
| | | prop: 'inspectType', |
| | | align: 'center', |
| | | dataType: 'tag', |
| | | minWidth: 120, |
| | | formatData: (val) => { |
| | | const map = { |
| | | 0: '原材料检验', |
| | |
| | | prop: 'processId', |
| | | align: 'center', |
| | | dataType: 'tag', |
| | | visible: visible => activeTab.value === '1', |
| | | formatData: (val) => { |
| | | const target = processOptions.value.find( |
| | | (item) => String(item.value) === String(val) |
| | |
| | | ] |
| | | } |
| | | ]) |
| | | |
| | | const handleTabChange = () => { |
| | | searchForm.value.standardNo = '' |
| | | searchForm.value.standardName = '' |