新增查看页面

This commit is contained in:
2026-01-18 23:51:55 +08:00
parent 9df4db2510
commit a5cfeb02a1
4 changed files with 51 additions and 46 deletions

View File

@@ -122,13 +122,13 @@ const tableProps: BasicTableProps = {
}, },
columns: tableColumns, columns: tableColumns,
formConfig: searchForm, formConfig: searchForm,
rowKey: 'userCode', rowKey: 'loginCode',
}; };
export default { export default {
modalProps, modalProps,
tableProps, tableProps,
itemCode: 'userCode', itemCode: 'loginCode',
itemName: 'userName', itemName: 'userName',
isShowCode: true, isShowCode: true,
}; };

View File

@@ -1,5 +1,5 @@
<script lang="tsx"> <script lang="tsx">
import { defineComponent, CSSProperties, nextTick, ref } from 'vue'; import { defineComponent, CSSProperties, nextTick, ref, computed } from 'vue';
import { useResizeObserver } from '@vueuse/core'; import { useResizeObserver } from '@vueuse/core';
import { fileListProps } from './props'; import { fileListProps } from './props';
import { isFunction } from '@jeesite/core/utils/is'; import { isFunction } from '@jeesite/core/utils/is';
@@ -11,65 +11,67 @@
props: fileListProps, props: fileListProps,
setup(props) { setup(props) {
const modalFn = useModalContext(); const modalFn = useModalContext();
const tableRef = ref<HTMLTableElement>(); const tableRef = ref<HTMLTableElement | null>(null);
useResizeObserver(tableRef, () => {
nextTick(() => { const columnList = computed(() => {
modalFn?.redoModalHeight?.(); const { columns = [], actionColumn } = props;
}); return actionColumn ? [...columns, actionColumn] : [...columns];
}); });
useResizeObserver(tableRef, () => {
nextTick(modalFn?.redoModalHeight);
});
return () => { return () => {
const { columns, actionColumn, dataSource } = props; const { dataSource = [], emptyText = '暂无数据' } = props;
const columnList = [...columns, actionColumn]; const columns = columnList.value;
return ( return (
<table class="file-table" ref={tableRef}> <table class="file-table" ref={tableRef}>
<colgroup> <colgroup>
{columnList.map((item) => { {columns.map((item) => {
const { width = 0, dataIndex } = item; const { width = 0, dataIndex } = item;
const style: CSSProperties = { const style: CSSProperties = width ? { width: `${width}px`, minWidth: `${width}px` } : {};
width: `${width}px`, return <col style={style} key={dataIndex} />;
minWidth: `${width}px`,
};
return <col style={width ? style : {}} key={dataIndex} />;
})} })}
</colgroup> </colgroup>
<thead> <thead>
<tr class="file-table-tr"> <tr class="file-table-tr">
{columnList.map((item) => { {columns.map((item) => {
const { title = '', align = 'center', dataIndex } = item; const { title = '', align = 'center', dataIndex } = item;
return ( return dataIndex && (
dataIndex && ( <th class={['file-table-th', align]} key={dataIndex}>
<th class={['file-table-th', align]} key={dataIndex}> {title}
{title} </th>
</th>
)
); );
})} })}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{dataSource.map((record = {}, index) => { {dataSource.map((record, index) => {
const currentRecord = record || {};
const rowKey = currentRecord.id || currentRecord.name || `row-${index}`;
return ( return (
<tr class="file-table-tr" key={`${index + record.name || ''}`}> <tr class="file-table-tr" key={rowKey}>
{columnList.map((item) => { {columns.map((item) => {
const { dataIndex = '', customRender, align = 'center' } = item; const { dataIndex = '', customRender, align = 'center' } = item;
const render = customRender && isFunction(customRender); const cellValue = get(currentRecord, dataIndex);
return ( return dataIndex && (
dataIndex && ( <td class={['file-table-td', align]} key={dataIndex}>
<td class={['file-table-td', align]} key={dataIndex}> {isFunction(customRender)
{render ? customRender({ text: cellValue, record: currentRecord, index })
? customRender?.({ text: get(record, dataIndex), record, index }) : cellValue
: get(record, dataIndex)} }
</td> </td>
)
); );
})} })}
</tr> </tr>
); );
})} })}
{dataSource.length == 0 && ( {!dataSource.length && (
<tr class="file-table-tr"> <tr class="file-table-tr">
<td class="file-table-td center" colspan={columnList.length}> <td class="file-table-td center" colSpan={columns.length}>
{props.emptyText} {emptyText}
</td> </td>
</tr> </tr>
)} )}
@@ -80,18 +82,17 @@
}, },
}); });
</script> </script>
<style lang="less">
<style lang="less" scoped>
.file-table { .file-table {
width: 100%; width: 100%;
border-top: 1px solid @border-color-base; border: 1px solid @border-color-base;
border-right: 1px solid @border-color-base;
border-collapse: separate; border-collapse: separate;
border-spacing: 0; border-spacing: 0;
table-layout: auto;
&-th, &-th,
&-td { &-td {
border-left: 1px solid @border-color-base;
border-bottom: 1px solid @border-color-base;
padding: 12px 8px; padding: 12px 8px;
overflow-wrap: break-word; overflow-wrap: break-word;
word-break: break-all; word-break: break-all;
@@ -101,8 +102,10 @@
thead { thead {
background-color: @background-color-light; background-color: @background-color-light;
font-weight: 500;
} }
// 对齐样式保留
.center { .center {
text-align: center; text-align: center;
} }
@@ -116,11 +119,13 @@
} }
} }
// 暗黑模式适配,保留原有逻辑
html[data-theme='dark'] { html[data-theme='dark'] {
.file-table { .file-table {
border-color: #333;
thead { thead {
background-color: #1a1a1a; background-color: #1a1a1a;
} }
} }
} }
</style> </style>

View File

@@ -1,6 +1,6 @@
<template> <template>
<BasicModal <BasicModal
width="80%" width="45%"
:title="t('component.upload.upload')" :title="t('component.upload.upload')"
:okText="t('component.upload.save')" :okText="t('component.upload.save')"
v-bind="$attrs" v-bind="$attrs"

View File

@@ -1,7 +1,7 @@
<template> <template>
<BasicModal <BasicModal
v-if="!props.showPreviewList" v-if="!props.showPreviewList"
width="80%" width="45%"
:title="t('component.upload.view')" :title="t('component.upload.view')"
:cancelText="t('component.modal.okText')" :cancelText="t('component.modal.okText')"
wrapClassName="upload-preview-modal" wrapClassName="upload-preview-modal"