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

<template>
    <div class="hc-csc-meta-table-data" v-loading="isLoading">
        <el-scrollbar>
       
            <table class="hc-csc-meta-table" border="1">
                <tr class="hc-csc-meta-table-tr">
                        <td colspan="2" class="hc-csc-meta-table-td title" v-if="!iShowFile">案卷元数据信息</td>
                        <td colspan="2" class="hc-csc-meta-table-td title" v-else>文件元数据信息</td>
              </tr>
                <template v-for="item in metaDataTableVal">
                  
                    <tr class="hc-csc-meta-table-tr" v-if="item.isType === 1">
                        <td colspan="2" class="hc-csc-meta-table-td title">{{item.containerName}}</td>
                    </tr>
                    <tr class="hc-csc-meta-table-tr" v-else>
                        <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');
    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;
                }
            }
        }
    }
}
</style>