gypsy-crm-frontend-vu/components/cwg-detail-popup.vue

<template>
    <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :showFooters="true" :title="t('Btn.Detail')">
        <view class="popup-content">
            <view class="lines">
                <template v-if="items && items.length">
                    <cwg-label-line-value v-for="(item, index) in items" :key="index" :label="item.label"
                        :value="item.value" />
                </template>

                <template v-else-if="row && columns && columns.length">
                    <cwg-label-line-value v-for="(item, index) in columns" :key="index" :label="item.label">
                        <template #operation1>
                            <slot :name="`cell-${item.prop}`" :row="row" :column="item" :index="index">
                                <view v-if="item.type === 'action'" class="action-list">
                                    <view v-for="(actionItem, idx) in getVisibleActions(item.menuList, row)" :key="idx">
                                        <view class="action-btn"
                                            @click.stop="actionItem.btnClick && actionItem.btnClick(row)">
                                            {{ actionItem.label || actionItem.text || actionItem.name }}
                                        </view>
                                    </view>
                                </view>
                                <view class="value-text" v-else>{{ formatCellValue(row[item.prop], item, row) }}</view>
                            </slot>
                        </template>

                    </cwg-label-line-value>
                </template>

            </view>
        </view>
        <template #footer>
            <button hover-class="" class="single-btn default" @click="visible = false" v-t="'Btn.Close'" />
        </template>
    </cwg-popup>
</template>


<script setup>
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const props = defineProps({
    visible: { type: Boolean, default: false },
    title: { type: String, default: '详情' },
    // 旧方式
    items: { type: Array, default: () => [] },
    // 新方式
    row: { type: Object, default: null },
    columns: { type: Array, default: () => [] }
})

const emit = defineEmits(['update:visible', 'close'])
// Watch for changes in visible prop and emit update event
const visible = computed({
    get: () => props.visible,
    set: (value) => emit('update:visible', value)
});
// 过滤并获取允许显示的 action 按钮
const getVisibleActions = (menuList, rowData) => {
    if (!menuList) return []
    return menuList.filter(item => {
        if (typeof item.show === 'function') {
            return item.show(rowData) !== false
        }
        return item.show !== false
    })
}
// 格式化标签文本 详情
const formatTagText = (value, column) => {
    console.log()
    if (column.tagMap && column.tagMap[value]) {
        return column.tagMap[value]
    }
    return value || '-'
}
const formatCellValue = (value, column, row) => {
    // note , 详情展示备注
    if (column.type === 'note') {
        return row.note
    }
    if (column.formatter) {
        return column.formatter({ value, row })
    }
    if (column.type === 'date' && value) {
        return formatDate(value, column.dateFormat || 'YYYY-MM-DD HH:mm:ss')
    }
    if (column.type === 'tag' && value) {
        return formatTagText(value, column)
    }
    if (value === null || value === undefined) {
        return '-'
    }
    return value
}

const formatDate = (date, format) => {
    if (!date) return '-'
    const d = new Date(date)
    const year = d.getFullYear()
    const month = String(d.getMonth() + 1).padStart(2, '0')
    const day = String(d.getDate()).padStart(2, '0')
    const hour = String(d.getHours()).padStart(2, '0')
    const minute = String(d.getMinutes()).padStart(2, '0')
    const second = String(d.getSeconds()).padStart(2, '0')
    return format
        .replace('YYYY', year)
        .replace('MM', month)
        .replace('DD', day)
        .replace('HH', hour)
        .replace('mm', minute)
        .replace('ss', second)
}
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.action-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: flex-end;
    justify-content: center;
}

.action-btn {
    color: var(--color-primary);
    //text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
    max-width: px2rpx(120);
    word-wrap: break-word;
    text-align: right;
    word-break: normal;
    //white-space: nowrap;
}

:deep(.uni-popup) {
    z-index: 101;
}


.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: px2rpx(30) px2rpx(30) px2rpx(20);
    border-bottom: 1px solid var(--bs-border-color);

    .dialog-title {
        font-size: px2rpx(20);
        font-weight: 600;
        color: var(--bs-heading-color);
    }
}

.dialog-content {
    padding: px2rpx(20) px2rpx(30);
    max-height: 60vh;
    overflow-y: auto;

    // 自定义滚动条样式
    &::-webkit-scrollbar {
        width: px2rpx(6);
    }

    &::-webkit-scrollbar-thumb {
        background-color: #ddd;
        border-radius: px2rpx(3);
    }
}

.lines {
    display: flex;
    flex-direction: column;
    gap: px2rpx(10);
}

.actions {
    margin-top: px2rpx(16);
    display: flex;
    justify-content: center;
}

.actions button {
    min-width: px2rpx(160);
    height: px2rpx(40);
    border-radius: px2rpx(8);
    font-size: px2rpx(14);
}

.dialog-footer {
    padding: px2rpx(20) px2rpx(30) px2rpx(30);
    border-top: 1px solid #f0f0f0;

    // 双按钮模式
    &:not(:has(button:only-child)):has(button) {
        display: flex;
        justify-content: flex-end;
        gap: px2rpx(20);
    }

    // 单按钮模式
    &:has(button:only-child) {
        display: flex;
        justify-content: center;
    }

    .footer-line {
        height: 1px;
        background-color: #f0f0f0;
        margin: px2rpx(-20) 0 0;
    }

    button {
        min-width: px2rpx(120);
        height: px2rpx(40);
        border-radius: px2rpx(4);
        font-size: px2rpx(16);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;

        &:active {
            opacity: 0.8;
            transform: scale(0.98);
        }

        &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    }

    .cancel-btn {
        background-color: #f5f5f5;
        color: var(--bs-heading-color);

        &:active {
            background-color: #e8e8e8;
        }
    }

    .confirm-btn {
        &.primary {
            background-color: #cf1322;
            color: var(--bs-emphasis-color);

            &:active {
                background-color: #0056b3;
            }
        }

        &.danger {
            background-color: #ff6b6b;
            color: var(--bs-emphasis-color);

            &:active {
                background-color: #ff5252;
            }
        }
    }

    .single-btn {
        min-width: px2rpx(200);

        &.primary {
            background-color: #cf1322;
            color: var(--bs-emphasis-color);
        }

        &.danger {
            background-color: #ff6b6b;
            color: var(--bs-emphasis-color);
        }

        &.default {
            background-color: #f5f5f5;
            color: var(--bs-heading-color);
        }
    }
}

.value-text {
    width: 100%;
    white-space: wrap;
    word-wrap: break-word;
    word-break: break-all;
    text-align: right;
}
</style>