gypsy-crm-frontend-vu/pages/mine/components/FileManagementTab.vue

<template>
    <view>
        <view class="content-title" v-if="current != 3">
            <view v-t="'PersonalManagement.Title.FileManagement'"></view>
            <view class="content-title-btns">
                <view v-if="!isSHowBtn.isSHowIdentity" class="btn-primary" @click="openAddFileDialog(1)">
                    <cwg-icon icon="crm-plus" :size="16" color="#fff" />
                    <text v-t="'PersonalManagement.Title.ProofOfIdentity'" />
                </view>
                <view v-if="!isSHowBtn.isSHowAddress" class="btn-primary" @click="openAddFileDialog(2)">
                    <cwg-icon icon="crm-plus" :size="16" color="#fff" />
                    <text v-t="'PersonalManagement.Title.ProofOfAddress'" />
                </view>
                <view class="btn-primary" @click="openAddFileDialog(3)">
                    <cwg-icon icon="crm-plus" :size="16" color="#fff" />
                    <text v-t="'PersonalManagement.Title.AttachedFile'" />
                </view>
            </view>
        </view>
        <cwg-tabel ref="tableRef" :columns="columns" :api="customFileApi" :show-operation="false"
            :showPagination="false">
            <template #avatar="{ row }">
                <image :src="row.avatar" class="avatar" mode="widthFix" />
                <cwg-file :path="row.path" />
            </template>

            <template #type="{ row }">
                <view :class="['status-badge', row.status]">{{ typeMap[row.type] }}</view>
            </template>
            <template #status="{ row }">
                <view :class="['status-badge', row.status]">{{ stateMap[row.status] }}</view>
            </template>
            <template #btn="{ row }">
                <text :class="['operation-btn', row.status !== 4 ? 'disabled' : '']" @click="openAddFile(row)">
                    <cwg-icon name="crm-image" :size="16" color="#1d293d" />
                    <text v-t="'State.Again'" />
                </text>
            </template>
        </cwg-tabel>
        <add-file-dialog ref="addFileDialog" @file-added="customFileList" @success="addSuccess" />
    </view>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import AddFileDialog from './AddFileDialog.vue';
const { t } = useI18n();
import { personalApi } from '@/service/personal';
const stateMap = computed(() => ({
    1: t('State.ToBeProcessed'),
    2: t('State.Completed'),
    3: t('State.Refused'),
    4: t('State.Again')
}));
const typeMap = computed(() => ({
    1: t('PersonalManagement.Title.ProofOfIdentity'),
    2: t('PersonalManagement.Title.ProofOfIdentity'),
    3: t('PersonalManagement.Title.ProofOfAddress'),
    4: t('PersonalManagement.Title.ProofOfAddress'),
    10: t('PersonalManagement.Title.AttachedFile')
}));
const btnMap = computed(() => ({
    1: t('PersonalManagement.Title.ProofOfIdentity'),
    2: t('PersonalManagement.Title.ProofOfAddress'),
    3: t('PersonalManagement.Title.AttachedFile')
}));
interface Props {
    icon: string;
    label: string;
    value: string;
    isLast?: boolean;
}
const tableRef = ref<any>(null);
const tableData = computed(() => {
    return tableRef.value ? tableRef.value.tableData : [];
});
const isSHowBtn = computed(() => {
    const a = tableData.value
    let tableIdentity = [];
    const tableAddress = [];
    const tableAdditional = [];
    a.forEach((item) => {
        if (item.type == 1 || item.type == 2) {
            tableIdentity.push(item);
        } else if (item.type == 3) {
            tableAddress.push(item);
        } else {
            tableAdditional.push(item);
        }
    });
    const isSHowIdentity = tableIdentity.length > 1;
    const isSHowAddress = tableAddress.length > 0;
    return { isSHowIdentity, isSHowAddress };
});

// 表格列配置
const columns = ref([
    {
        prop: 'id',
        label: '#',
        align: 'left'
    },
    {
        prop: 'path',
        label: 'Document',
        type: 'file',
        align: 'left'
    },
    {
        prop: 'type',
        label: 'File Name/Type',
        align: 'left',
        slot: 'type'
    },
    {
        prop: 'uploadTime',
        label: 'Upload Date/Time',
        type: 'date',
        dateFormat: 'YYYY-MM-DD HH:mm',
        align: 'left'
    },
    {
        prop: 'status',
        label: 'Status',
        type: 'tag',
        tagMap: { 1: '启用', 10: '禁用' },
        tagTypeMap: { 1: 'success', 0: 'danger' },
        slot: 'status',
        align: 'left'
    },
    {
        prop: 'status',
        label: '操作',
        slot: 'btn',
        align: 'left'
    }
])

const addFileDialog = ref(null);
const customFileApi = ref(null)
customFileApi.value = personalApi.customFileList
const openAddFileDialog = (type) => {
    addFileDialog.value.open({ type, title: btnMap.value[type], tableData: tableData.value });
}
const openAddFile = (row) => {
    if (row.status != 4) {
        return
    }
    let type
    switch (row.type) {
        case 1:
            type = 1
            break;
        case 2:
            type = 1
            break;
        case 3:
            type = 2
            break;
        case 10:
            type = 3
            break;
    }
    addFileDialog.value.open({ type, title: btnMap.value[type], tableData: tableData.value, currentFile: row });
}
const addSuccess = () => {
    tableRef.value.refreshTable()
}
defineProps<Props>();
</script>

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

.avatar {
    width: px2rpx(60);
    height: px2rpx(60);
    border-radius: 4px;
}

.content-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: px2rpx(20);
    font-weight: 500;

    .content-title-btns {
        margin: px2rpx(8) 0;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: px2rpx(12);

        .btn-primary {
            min-width: px2rpx(120);
            background-color: var(--color-error);
            color: white;
            padding: 0 px2rpx(12);
            border: none;
            font-size: px2rpx(14);
            text-align: center;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: px2rpx(8);
        }

        .btn-primary:active {
            background-color: var(--color-navy-700);
        }
    }
}

.operation-btn {
    :deep(span) {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: px2rpx(4);
        cursor: pointer;
        background-color: var(--color-slate-150);
        padding: px2rpx(8) 0;
    }
}

.operation-btn.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
</style>