feat(录音报告): 添加一键复制报告内容功能
添加一键复制按钮到录音报告模态框,支持现代Clipboard API和传统复制方法。同时将录音名称显示为客户姓名(如果存在),否则使用默认名称。
This commit is contained in:
@@ -360,6 +360,7 @@
|
||||
<div class="modal-content report-modal" @click.stop>
|
||||
<div class="modal-header">
|
||||
<h3>录音报告</h3>
|
||||
<button class="report-btn" @click="printReport">一键复制</button>
|
||||
<button class="close-btn" @click="showReportModal = false">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@@ -512,7 +513,7 @@ const handleAllRecordingsClick = async () => {
|
||||
categoryData.records.forEach(record => {
|
||||
tempCategorizedData[category].push({ // 将记录添加到对应的分类数组中
|
||||
id: uniqueId++,
|
||||
name: `录音 ${uniqueId}`,
|
||||
name: record.customer_name || `录音 ${uniqueId}`,
|
||||
time: new Date(record.record_create_time).toLocaleString('zh-CN'),
|
||||
type: record.record_tag,
|
||||
downloadUrl: record.record_file_addr,
|
||||
@@ -551,7 +552,50 @@ const viewReport = (recording) => {
|
||||
showReportModal.value = true;
|
||||
};
|
||||
|
||||
// ... 您其他的 props, computed, methods 等代码保持不变 ...
|
||||
const printReport = () => {
|
||||
const content = reportData.value.details;
|
||||
if (!content) {
|
||||
alert('没有可复制的内容');
|
||||
return;
|
||||
}
|
||||
|
||||
// 尝试使用 Clipboard API
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
navigator.clipboard.writeText(content).then(() => {
|
||||
alert('报告内容已复制到剪贴板');
|
||||
}).catch(err => {
|
||||
console.error('复制失败:', err);
|
||||
// 降级到传统方法
|
||||
fallbackCopyTextToClipboard(content);
|
||||
});
|
||||
} else {
|
||||
// 降级到传统方法
|
||||
fallbackCopyTextToClipboard(content);
|
||||
}
|
||||
};
|
||||
|
||||
function fallbackCopyTextToClipboard(text) {
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = text;
|
||||
textArea.style.position = "fixed"; //avoid scrolling to bottom
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
|
||||
try {
|
||||
const successful = document.execCommand('copy');
|
||||
if (successful) {
|
||||
alert('报告内容已复制到剪贴板');
|
||||
} else {
|
||||
alert('复制失败,请手动复制');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Fallback: Oops, unable to copy', err);
|
||||
alert('复制失败,请手动复制');
|
||||
}
|
||||
|
||||
document.body.removeChild(textArea);
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
@@ -842,6 +886,24 @@ $indigo: #4f46e5;
|
||||
.report-link, .download-link { color: white; border: none; padding: 6px 10px; border-radius: 4px; font-size: 0.85rem; cursor: pointer; transition: background-color 0.2s ease; text-decoration: none; text-align: center; }
|
||||
.report-link { background-color: $success; &:hover { background-color: darken($success, 10%); } }
|
||||
.download-link { background-color: $primary; &:hover { background-color: darken($primary, 10%); } }
|
||||
.report-btn {
|
||||
background-color: $success;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-left: auto;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($success, 10%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($success, 20%);
|
||||
}
|
||||
}
|
||||
.report-modal { max-width: 600px; }
|
||||
.report-content { display: flex; flex-direction: column; gap: 12px; }
|
||||
.report-field label {
|
||||
|
||||
Reference in New Issue
Block a user