shuhi-ui/src/views/code/list/components/activation-out-stock-modal.vue

<!-- 激活码出库单弹窗 -->
<template>
    <ele-modal form :width="600" v-model="visible" title="激活码出库单" @closed="handleClosed">
        <div class="out-stock-info">
            <div class="info-row">
                <span class="label">ISBN:</span>
                <span class="value">{{ outStockData.isbn || '-' }}</span>
            </div>

            <div class="info-row">
                <span class="label">书名:</span>
                <span class="value">{{ outStockData.bookName || '-' }}</span>
            </div>

            <div class="info-row">
                <span class="label">数量:</span>
                <span class="value">{{ outStockData.num || '-' }}</span>
            </div>

            <div class="info-row">
                <span class="label">链接:</span>
                <span class="value link-text" @click="handleRedirect(outStockData.urlLink)">{{ outStockData.urlLink || '-' }}</span>
            </div>

            <div class="info-row">
                <span class="label">提取码:</span>
                <span class="value">{{ outStockData.extCode || '-' }}</span>
            </div>

            <div class="info-row">
                <span class="label">备注:</span>
                <span class="value">{{ outStockData.remark || '-' }}</span>
            </div>
        </div>

        <template #footer>
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleCopyAll">
                复制全部
            </el-button>
        </template>
    </ele-modal>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { EleMessage } from 'ele-admin-plus/es';

/** 弹窗是否打开 */
const visible = defineModel({ type: Boolean });

/** 出库数据 */
const outStockData = reactive({
    isbn: '',
    bookName: '',
    num: '',
    urlLink: '',
    extCode: '',
    remark: ''
});

/** 处理链接点击事件 */
const handleRedirect = (url) => {
    if (url) {
        window.open(url, '_blank');
    }
};

/** 关闭弹窗 */
const handleCancel = () => {
    visible.value = false;
};

/** 弹窗关闭事件 */
const handleClosed = () => {
    // 重置数据
    Object.assign(outStockData, {
        isbn: '',
        bookName: '',
        num: '',
        urlLink: '',
        extCode: '',
        remark: ''
    });
};

/** 复制全部信息 */
const handleCopyAll = async () => {
    try {
        // 格式化复制内容
        const copyText = `ISBN: ${outStockData.isbn || '-'}
书名: ${outStockData.bookName || '-'}
数量: ${outStockData.num || '-'}
链接: ${outStockData.urlLink || '-'}
提取码: ${outStockData.extCode || '-'}
备注: ${outStockData.remark || '-'}`;

        // 使用 Clipboard API 复制到剪贴板
        if (navigator.clipboard && window.isSecureContext) {
            await navigator.clipboard.writeText(copyText);
        } else {
            // 降级方案：使用 document.execCommand
            const textArea = document.createElement('textarea');
            textArea.value = copyText;
            textArea.style.position = 'fixed';
            textArea.style.left = '-999999px';
            textArea.style.top = '-999999px';
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            document.execCommand('copy');
            textArea.remove();
        }

        EleMessage.success('复制成功');
    } catch (error) {
        console.error('复制失败:', error);
        EleMessage.error('复制失败，请手动复制');
    }
};

/** 弹窗打开事件 */
const handleOpen = (data) => {
    if (data) {
        Object.assign(outStockData, {
            isbn: data.isbn || '',
            bookName: data.bookName || '',
            num: data.num || '',
            urlLink: data.urlLink || '',
            extCode: data.extCode || '',
            remark: data.remark || ''
        });
        visible.value = true;
    }
};

defineExpose({
    handleOpen
});
</script>

<style scoped>
.out-stock-info {
    padding: 20px 0;
    padding-left: 50px;
}

.info-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    line-height: 1.5;
}

.info-row:last-child {
    margin-bottom: 0;
}

.label {
    width: 80px;
    font-weight: 500;
    color: #333;
    flex-shrink: 0;
}

.value {
    flex: 1;
    color: #666;
    word-break: break-all;
}

.link-text {
    color: #1890ff;
    cursor: pointer;
}

.link-text:hover {
    text-decoration: underline;
}
</style>