feat: 添加UI优化和用户体验增强

- 新增lastImportInfo计算属性显示导入统计
- 失败记录按钮添加tooltip显示导入时间
- 失败记录对话框添加统计信息展示
- 对话框添加清除历史记录按钮

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
wkc
2026-02-06 12:37:27 +08:00
parent 210196437e
commit f22dd4f0ce

View File

@@ -68,13 +68,18 @@
>导入</el-button> >导入</el-button>
</el-col> </el-col>
<el-col :span="1.5" v-if="showFailureButton"> <el-col :span="1.5" v-if="showFailureButton">
<el-button <el-tooltip
type="warning" :content="getLastImportTooltip()"
plain placement="top"
icon="el-icon-warning" >
size="mini" <el-button
@click="viewImportFailures" type="warning"
>查看导入失败记录</el-button> plain
icon="el-icon-warning"
size="mini"
@click="viewImportFailures"
>查看导入失败记录</el-button>
</el-tooltip>
</el-col> </el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
@@ -272,6 +277,14 @@
width="1200px" width="1200px"
append-to-body append-to-body
> >
<el-alert
v-if="lastImportInfo"
:title="lastImportInfo"
type="info"
:closable="false"
style="margin-bottom: 15px"
/>
<el-table :data="failureList" v-loading="failureLoading"> <el-table :data="failureList" v-loading="failureLoading">
<el-table-column label="姓名" prop="name" align="center" /> <el-table-column label="姓名" prop="name" align="center" />
<el-table-column label="柜员号" prop="employeeId" align="center" /> <el-table-column label="柜员号" prop="employeeId" align="center" />
@@ -290,6 +303,7 @@
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="failureDialogVisible = false">关闭</el-button> <el-button @click="failureDialogVisible = false">关闭</el-button>
<el-button type="danger" plain @click="clearImportHistory">清除历史记录</el-button>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
@@ -413,6 +427,18 @@ export default {
} }
}; };
}, },
computed: {
/**
* 上次导入信息摘要
*/
lastImportInfo() {
const savedTask = this.getImportTaskFromStorage();
if (savedTask && savedTask.totalCount) {
return `导入时间: ${this.parseTime(savedTask.saveTime)} | 总数: ${savedTask.totalCount}条 | 成功: ${savedTask.successCount}条 | 失败: ${savedTask.failureCount}`;
}
return '';
}
},
created() { created() {
this.getList(); this.getList();
this.getDeptTree(); this.getDeptTree();