feat(录音报告): 添加一键复制报告内容功能
添加一键复制按钮到录音报告模态框,支持现代Clipboard API和传统复制方法。同时将录音名称显示为客户姓名(如果存在),否则使用默认名称。
This commit is contained in:
@@ -360,6 +360,7 @@
|
|||||||
<div class="modal-content report-modal" @click.stop>
|
<div class="modal-content report-modal" @click.stop>
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h3>录音报告</h3>
|
<h3>录音报告</h3>
|
||||||
|
<button class="report-btn" @click="printReport">一键复制</button>
|
||||||
<button class="close-btn" @click="showReportModal = false">×</button>
|
<button class="close-btn" @click="showReportModal = false">×</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
@@ -512,7 +513,7 @@ const handleAllRecordingsClick = async () => {
|
|||||||
categoryData.records.forEach(record => {
|
categoryData.records.forEach(record => {
|
||||||
tempCategorizedData[category].push({ // 将记录添加到对应的分类数组中
|
tempCategorizedData[category].push({ // 将记录添加到对应的分类数组中
|
||||||
id: uniqueId++,
|
id: uniqueId++,
|
||||||
name: `录音 ${uniqueId}`,
|
name: record.customer_name || `录音 ${uniqueId}`,
|
||||||
time: new Date(record.record_create_time).toLocaleString('zh-CN'),
|
time: new Date(record.record_create_time).toLocaleString('zh-CN'),
|
||||||
type: record.record_tag,
|
type: record.record_tag,
|
||||||
downloadUrl: record.record_file_addr,
|
downloadUrl: record.record_file_addr,
|
||||||
@@ -551,7 +552,50 @@ const viewReport = (recording) => {
|
|||||||
showReportModal.value = true;
|
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({
|
const props = defineProps({
|
||||||
data: {
|
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, .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%); } }
|
.report-link { background-color: $success; &:hover { background-color: darken($success, 10%); } }
|
||||||
.download-link { background-color: $primary; &:hover { background-color: darken($primary, 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-modal { max-width: 600px; }
|
||||||
.report-content { display: flex; flex-direction: column; gap: 12px; }
|
.report-content { display: flex; flex-direction: column; gap: 12px; }
|
||||||
.report-field label {
|
.report-field label {
|
||||||
|
|||||||
Reference in New Issue
Block a user