archives/src/views/archives/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">
                <template v-for="item in metaDataTableval" :key="item">
                    <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-else class="hc-csc-meta-table-tr">
                        <td class="hc-csc-meta-table-td name">
                            {{ item.containerName }}
                        </td>
                        <td v-if="isEdit" class="hc-csc-meta-table-td val">
                            {{ item.keyValue }}
                        </td>
                        <td v-else style="padding:0px;border: none;">
                            <!-- <input type="input" data-id="project" name="project[]" class="iptclass" v-model="item.keyValue" :disabled="item.captureMode===1"> -->
                            <el-input v-model="item.keyValue" type="input" data-id="project" name="project[]" :disabled="item.captureMode === 1" />
                        </td>
                    </tr>
                </template>
            </table>
        </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,
    },
    isEdit:{
       type: Boolean,
        default: true, 
    },
    metaDataTable:{
        type: Array,
        default: () => ([]),
    },
 
})

//事件
const emit = defineEmits(['changemeDataTable'])
//变量
const projectId = ref(props.projectId)
const contractId = ref(props.contractId)
const isLoading = ref(props.loading)
const isEditval = ref(props.isEdit)
const metaDataTableval = ref(props.metaDataTable)
//监听
watch(() => [
    props.loading,
    props.isEdit,
    props.metaDataTable,

], ([loading, isEdit, metaDataTable]) => {
    isLoading.value = loading
    isEditval.value = isEdit
    metaDataTableval.value = metaDataTable
    
})
//深度监听
watch(() => [
    metaDataTableval.value,
], ([val]) => {
   emit('changemeDataTable', val)
}, {
    deep: true,
})
// 元数据
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;
                }
            }
        }
    }
    .iptclass{
        width: 100%;
        height: 30px;
        border-radius: 28px;
        border: 1px solid #dae8f3;
        padding-left: 5px;
        outline-color:  #d6eafa;
       
     
    }
}
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>