⚡ 优化表格工具栏、附件文件名展示与合同金额两位小数
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -306,13 +306,15 @@
|
||||
class-name="is-ellipsis-link"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-link
|
||||
:disabled="!getAttachmentUrl(row)"
|
||||
type="primary"
|
||||
@click="previewAttachment(row)"
|
||||
>
|
||||
{{ row.originalName || row.name || '-' }}
|
||||
</el-link>
|
||||
<span
|
||||
class="attachment-file-name"
|
||||
:class="{ 'is-disabled': !getAttachmentUrl(row) }"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@click="getAttachmentUrl(row) && previewAttachment(row)"
|
||||
@keydown.enter="getAttachmentUrl(row) && previewAttachment(row)"
|
||||
@keydown.space.prevent="getAttachmentUrl(row) && previewAttachment(row)"
|
||||
>{{ row.originalName || row.name || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="uploadUserName" label="上传人" min-width="120" align="center">
|
||||
|
||||
@@ -39,16 +39,20 @@
|
||||
>导出</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="fs-table-panel__toolbar-right">
|
||||
<el-tooltip content="刷新" placement="top">
|
||||
<el-button :icon="Refresh" text @click="$emit('refresh')" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<settlement-table-tools
|
||||
:columns="columnSettingOptions"
|
||||
v-model:visible-column-keys="visibleColumnKeys"
|
||||
v-model:table-size="tableSize"
|
||||
:search-visible="searchVisible"
|
||||
@update:search-visible="$emit('update:searchVisible', $event)"
|
||||
@refresh="$emit('refresh')"
|
||||
/>
|
||||
</div>
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
v-loading="loading"
|
||||
:data="rows"
|
||||
:size="tableSize"
|
||||
border
|
||||
highlight-current-row
|
||||
@current-change="handleCurrentChange"
|
||||
@@ -57,7 +61,7 @@
|
||||
<el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
|
||||
<el-table-column type="selection" width="52" fixed="left" align="center" />
|
||||
<el-table-column
|
||||
v-for="column in columns"
|
||||
v-for="column in visibleColumns"
|
||||
:key="column.prop"
|
||||
v-bind="column"
|
||||
align="center"
|
||||
@@ -119,15 +123,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Refresh } from '@element-plus/icons-vue';
|
||||
import {
|
||||
invoiceStatusName,
|
||||
kingdeeSyncStatusOptions,
|
||||
paymentStatusOptions,
|
||||
} from '@/option/settlement/formalSettlementSearch';
|
||||
import SettlementTableTools from './settlement-table-tools.vue';
|
||||
|
||||
export default {
|
||||
name: 'FormalSettlementTablePanel',
|
||||
components: { SettlementTableTools },
|
||||
props: {
|
||||
rows: { type: Array, default: () => [] },
|
||||
columns: { type: Array, default: () => [] },
|
||||
@@ -135,6 +140,7 @@ export default {
|
||||
page: { type: Object, required: true },
|
||||
hasPermission: { type: Function, required: true },
|
||||
mkEnabled: { type: Boolean, default: false },
|
||||
searchVisible: { type: Boolean, default: true },
|
||||
},
|
||||
emits: [
|
||||
'create',
|
||||
@@ -146,14 +152,47 @@ export default {
|
||||
'page-change',
|
||||
'action',
|
||||
'update:selection',
|
||||
'update:searchVisible',
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
Refresh,
|
||||
selection: [],
|
||||
tableSize: 'default',
|
||||
visibleColumnKeys: [],
|
||||
knownColumnProps: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
columnSettingOptions() {
|
||||
return this.columns.map(column => ({
|
||||
prop: column.prop,
|
||||
label: column.label,
|
||||
}));
|
||||
},
|
||||
visibleColumns() {
|
||||
if (!this.visibleColumnKeys.length) return this.columns;
|
||||
return this.columns.filter(column => this.visibleColumnKeys.includes(column.prop));
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
columns: {
|
||||
immediate: true,
|
||||
handler(columns) {
|
||||
const props = columns.map(column => column.prop);
|
||||
if (!this.visibleColumnKeys.length) {
|
||||
this.visibleColumnKeys = props;
|
||||
this.knownColumnProps = props;
|
||||
return;
|
||||
}
|
||||
const visible = new Set(this.visibleColumnKeys);
|
||||
const known = new Set(this.knownColumnProps || []);
|
||||
props.forEach(prop => {
|
||||
if (!known.has(prop)) visible.add(prop);
|
||||
});
|
||||
this.knownColumnProps = props;
|
||||
this.visibleColumnKeys = props.filter(prop => visible.has(prop));
|
||||
},
|
||||
},
|
||||
rows() {
|
||||
this.selection = [];
|
||||
this.$refs.tableRef?.clearSelection();
|
||||
@@ -245,11 +284,6 @@ export default {
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
}
|
||||
.fs-table-panel__toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.fs-table-panel__links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@@ -361,9 +361,14 @@
|
||||
class-name="is-ellipsis-link"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-link type="primary" @click="previewAttachment(row)">
|
||||
{{ attachmentName(row) }}
|
||||
</el-link>
|
||||
<span
|
||||
class="attachment-file-name"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@click="previewAttachment(row)"
|
||||
@keydown.enter="previewAttachment(row)"
|
||||
@keydown.space.prevent="previewAttachment(row)"
|
||||
>{{ attachmentName(row) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="附件描述" min-width="220">
|
||||
|
||||
@@ -200,9 +200,14 @@
|
||||
class-name="is-ellipsis-link"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-link type="primary" @click="previewAttachment(row)">
|
||||
{{ attachmentName(row) }}
|
||||
</el-link>
|
||||
<span
|
||||
class="attachment-file-name"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@click="previewAttachment(row)"
|
||||
@keydown.enter="previewAttachment(row)"
|
||||
@keydown.space.prevent="previewAttachment(row)"
|
||||
>{{ attachmentName(row) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="附件描述" min-width="240">
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<table-header-tools v-bind="$attrs" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableHeaderTools from '@/components/table-header-tools/main.vue';
|
||||
|
||||
export default {
|
||||
name: 'SettlementTableTools',
|
||||
components: { TableHeaderTools },
|
||||
inheritAttrs: false,
|
||||
};
|
||||
</script>
|
||||
@@ -10,22 +10,26 @@
|
||||
>
|
||||
<el-button type="primary" plain @click="$emit('export')">导出</el-button>
|
||||
</div>
|
||||
<div class="tr-table-panel__toolbar-right">
|
||||
<el-tooltip content="刷新" placement="top">
|
||||
<el-button :icon="Refresh" text @click="$emit('refresh')" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<settlement-table-tools
|
||||
:columns="columnSettingOptions"
|
||||
v-model:visible-column-keys="visibleColumnKeys"
|
||||
v-model:table-size="tableSize"
|
||||
:search-visible="searchVisible"
|
||||
@update:search-visible="$emit('update:searchVisible', $event)"
|
||||
@refresh="$emit('refresh')"
|
||||
/>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="rows"
|
||||
:size="tableSize"
|
||||
border
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="52" fixed="left" align="center" />
|
||||
<el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
|
||||
<el-table-column
|
||||
v-for="column in columns"
|
||||
v-for="column in visibleColumns"
|
||||
:key="column.prop"
|
||||
v-bind="column"
|
||||
align="center"
|
||||
@@ -73,24 +77,68 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Refresh } from '@element-plus/icons-vue';
|
||||
import SettlementTableTools from './settlement-table-tools.vue';
|
||||
|
||||
export default {
|
||||
name: 'TransportReconciliationTablePanel',
|
||||
components: { SettlementTableTools },
|
||||
props: {
|
||||
rows: { type: Array, default: () => [] },
|
||||
columns: { type: Array, default: () => [] },
|
||||
loading: { type: Boolean, default: false },
|
||||
page: { type: Object, required: true },
|
||||
hasPermission: { type: Function, required: true },
|
||||
searchVisible: { type: Boolean, default: true },
|
||||
},
|
||||
emits: ['create', 'export', 'refresh', 'page-change', 'update:selection', 'action'],
|
||||
emits: [
|
||||
'create',
|
||||
'export',
|
||||
'refresh',
|
||||
'page-change',
|
||||
'update:selection',
|
||||
'action',
|
||||
'update:searchVisible',
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
Refresh,
|
||||
selection: [],
|
||||
tableSize: 'default',
|
||||
visibleColumnKeys: [],
|
||||
knownColumnProps: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
columnSettingOptions() {
|
||||
return this.columns.map(column => ({
|
||||
prop: column.prop,
|
||||
label: column.label,
|
||||
}));
|
||||
},
|
||||
visibleColumns() {
|
||||
if (!this.visibleColumnKeys.length) return this.columns;
|
||||
return this.columns.filter(column => this.visibleColumnKeys.includes(column.prop));
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
columns: {
|
||||
immediate: true,
|
||||
handler(columns) {
|
||||
const props = columns.map(column => column.prop);
|
||||
if (!this.visibleColumnKeys.length) {
|
||||
this.visibleColumnKeys = props;
|
||||
this.knownColumnProps = props;
|
||||
return;
|
||||
}
|
||||
const visible = new Set(this.visibleColumnKeys);
|
||||
const known = new Set(this.knownColumnProps || []);
|
||||
props.forEach(prop => {
|
||||
if (!known.has(prop)) visible.add(prop);
|
||||
});
|
||||
this.knownColumnProps = props;
|
||||
this.visibleColumnKeys = props.filter(prop => visible.has(prop));
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleSelectionChange(value) {
|
||||
this.selection = value;
|
||||
@@ -127,11 +175,6 @@ export default {
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
}
|
||||
.tr-table-panel__toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.tr-table-panel__links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
Reference in New Issue
Block a user