archives/src/views/transfer/components/meta-table.vue

<template>
    <div v-loading="isLoading" class="hc-csc-meta-table-data">
        <el-scrollbar>
            <table class="hc-csc-meta-table" border="1">
                <tr class="hc-csc-meta-table-tr">
                    <td v-if="!iShowFile" colspan="2" class="hc-csc-meta-table-td title">
                        案卷元数据信息
                    </td>
                    <td v-else colspan="2" class="hc-csc-meta-table-td title">
                        文件元数据信息
                    </td>
                </tr>
                <template v-for="item in metaDataTableVal">
                    <tr v-if="item.isType === 1" class="hc-csc-meta-table-tr">
                        <td colspan="2" class="hc-csc-meta-table-td title">
                            {{ item.containerName }}
                        </td>
                    </tr>
                    <tr v-if="item.isType === 3" class="hc-csc-meta-table-tr">
                        <td colspan="2" class="hc-csc-meta-table-td " style="text-align: center;">
                            {{ item.containerName }}
                        </td>
                    </tr>
                    <tr v-else class="hc-csc-meta-table-tr">
                        <td class="hc-csc-meta-table-td name">
                            {{ item.containerName }}
                        </td>
                        <td class="hc-csc-meta-table-td val">
                            {{ item.keyValue }}
                        </td>
                    </tr>
                </template>
            </table>
            <HcNoData v-if="metaDataTableVal.length == 0" />
        </el-scrollbar>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'

//参数
const props = defineProps({
    projectId: {
        type: [String, Number],
        default: '',
    },
    contractId: {
        type: [String, Number],
        default: '',
    },
    loading: {
        type: Boolean,
        default: false,
    },
    ishowFile:{
        type: Boolean,
        default: false,
    },
    metaDataTable:{
        type: [Array],
        default: '',
    },
})

//变量
const projectId = ref(props.projectId)
const contractId = ref(props.contractId)
const isLoading = ref(props.loading)
const iShowFile = ref(props.ishowFile)
const metaDataTableVal = ref(props.metaDataTable)

//监听
watch(() => [
    props.loading,
    props.ishowFile,
    props.metaDataTable,
], ([loading, ishowFile, metaDataTable]) => {
    console.log(metaDataTable, 'metaDataTable')
    console.log(ishowFile, 'ishowFile')
    isLoading.value = loading
    console.log(ishowFile, 'ishowFile')
    iShowFile.value = ishowFile
    metaDataTableVal.value = metaDataTable
})

//元数据
const metaDataTable = ref([
    { type: 1, title: '聚合层次', val: '' },
    { type: 2, title: '来源', val: '' },
    { type: 1, title: '全宗名称', val: '' },
    { type: 1, title: '立档单位名称', val: '' },
    { type: 1, title: '电子文件号', val: '' },
    { type: 2, title: '文件联', val: '' },
    { type: 1, title: '目录文件', val: '' },
    { type: 1, title: '文件件数', val: '' },
    { type: 1, title: '文件页数', val: '' },
    { type: 1, title: '元数据目录文件', val: '' },
    { type: 1, title: '验证码', val: '' },
    { type: 2, title: '内容描述', val: '' },
    { type: 1, title: '题名', val: '' },
    { type: 1, title: '关键词', val: '' },
    { type: 1, title: '摘要', val: '' },
    { type: 1, title: '生成方式', val: '' },
    { type: 1, title: '责任者', val: '' },
    { type: 1, title: '文件创建日期', val: '' },
    { type: 2, title: '组件', val: '' },
    { type: 1, title: 'IP地址', val: '' },
    { type: 1, title: '桩号', val: '' },
    { type: 1, title: '上传时间', val: '' },
    { type: 2, title: '文件标识码', val: '' },
    { type: 1, title: '文号', val: '' },
    { type: 1, title: '表单标识码', val: '' },
    { type: 2, title: '竣工图', val: '' },
    { type: 1, title: '图号', val: '' },
    { type: 1, title: '图幅', val: '' },
    { type: 1, title: '图表来源', val: '' },
    { type: 1, title: '引用变更令编号', val: '' },
    { type: 2, title: '照片文件', val: '' },
    { type: 1, title: '主题', val: '' },
    { type: 1, title: '拍摄时间', val: '' },
    { type: 1, title: '拍摄地点', val: '' },
    { type: 1, title: '摄影者', val: '' },
    { type: 1, title: '背景', val: '' },
    { type: 1, title: '分组号', val: '' },
    { type: 1, title: '组内照片编号', val: '' },
    { type: 1, title: '水平分辨率', val: '' },
    { type: 1, title: '垂直分辨率', val: '' },
    { type: 1, title: '保管期限', val: '' },
    { type: 1, title: '格式信息', val: '' },
    { type: 2, title: '电子属性', val: '' },
    { type: 1, title: '位置', val: '' },
    { type: 1, title: '计算机文件名', val: '' },
    { type: 1, title: '计算机文件大小', val: '' },
    { type: 2, title: '数字化属性', val: '' },
    { type: 1, title: '扫描分辨率', val: '' },
    { type: 1, title: '扫描色彩模式', val: '' },
    { type: 2, title: '电子签名', val: '' },
    { type: 1, title: '签名类型', val: '' },
    { type: 1, title: '签名时间', val: '' },
    { type: 1, title: '签名人', val: '' },
    { type: 1, title: '建设项目', val: '' },
    { type: 2, title: '业务事项', val: '' },
    { type: 1, title: '单位工程', val: '' },
    { type: 1, title: '分部工程', val: '' },
    { type: 1, title: '分项工程', val: '' },
    { type: 1, title: '单位工程编码', val: '' },
    { type: 1, title: '分部工程编码', val: '' },
    { type: 1, title: '分项工程编码', val: '' },
    { type: 2, title: '责任者', val: '' },
    { type: 1, title: '责任者名称', val: '' },
    { type: 1, title: '个人职位', val: '' },
    { type: 1, title: '责任者手机号', val: '' },
    { type: 2, title: '关系实体', val: '' },
    { type: 1, title: '关系标识', val: '' },
    { type: 1, title: '关系类型', val: '' },
    { type: 1, title: '关系', val: '' },
    { type: 1, title: '相关实体标识', val: '' },
])
</script>

<style lang="scss" scoped>
.hc-csc-meta-table-data {
    position: relative;
    height: 100%;
    .hc-csc-meta-table {
        border-spacing: 0;
        border: 1px solid #E9E9E9;
        border-collapse: collapse;
        width: 100%;
        .hc-csc-meta-table-tr {
            position: relative;
            background: #f1f5f8;
            color: #50545e;
            transition: background-color .25s ease;
            &:hover {
                background: var(--el-color-primary-light-9);
            }
            .hc-csc-meta-table-td {
                text-align: left;
                padding: 10px 12px;
                font-size: 14px;
                border: 1px solid #E9E9E9;
                &.name {
                    width: 150px;
                }
                &.title {
                    color: #1a1a1a;
                    text-align: center;
                    background-color: #dae8f3;
                }
            }
        }
    }
}
html.dark{
    .hc-csc-meta-table-data .hc-csc-meta-table{
        border: 1px solid var(--el-color-primary);
        .hc-csc-meta-table-tr{
            background-color: transparent;
            color: white;
            .hc-csc-meta-table-td{
                border: 1px solid var(--el-color-primary);
                &.title {
                    color: white;
                    background-color: transparent;
                }
            }
        }
    }
}
</style>