Browse Source

借阅查询

duy 3 months ago
parent
commit
71399c36c3

+ 1 - 1
src/router/modules/base.js

@@ -218,7 +218,7 @@ export default [
                         component: () => import('~src/views/using/borrow/borrow.vue'),
                     },
                     {
-                        path: '/using/borrow-query',
+                        path: '/using/borrow/query',
                         name: 'using-borrow-query',
                         meta: { title: '借阅查询' },
                         component: () => import('~src/views/using/borrow/query.vue'),

+ 39 - 37
src/views/using/borrow/borrow.vue

@@ -19,9 +19,7 @@
                         <el-option v-for="item in securityLevelData" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
                     </el-select>
                 </div>
-                <div class="ml-3 w-64">
-                    <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate" />
-                </div>
+               
                 <div class="ml-3 w-56">
                     <el-input v-model="searchForm.name" clearable block placeholder="请输入档号/案卷题名" @keyup="keyUpEvent" />
                 </div>
@@ -34,13 +32,19 @@
                     </el-button>
                 </div>
             </template>
-          
-            <div :class="tableFileShow ? 'file-table' : ''" class="body">
+            <template #extra>
+                <el-button :disabled="tableCheckedKeys.length <= 0" hc-btn type="primary">申请借阅</el-button>
+                <el-button :disabled="tableCheckedKeys.length <= 0" hc-btn type="warning">借阅历史</el-button>
+            </template>
+            <div class="body">
                 <div class="hc-c-table-box">
                     <HcTable
                         ref="tableRef" :check-style="{ width: 29 }" :column="tableColumn" :datas="tableData"
                         :index-style="{ width: 70 }" :is-arr-index="false" :loading="tableLoading" :ui="hoverHand ? 'hover-hand' : ''"
                         is-new is-current-row
+                        is-check
+
+                        @selection-change="tableSelection"
                     >
                         <template #index="{ index }">
                             <span>{{ index + 1 }}</span>
@@ -60,13 +64,11 @@ import { onMounted, ref, watch } from 'vue'
 import { useAppStore } from '~src/store'
 import HcTree from '~src/components/tree/hc-tree.vue'
 import { getArrValue } from 'js-fast-way'
-
-
 import tasksApi from '~api/tasks/data'
-
+import tuningApi from '~api/archiveConfig/tuning.js'
 
 import { getStoreValue, setStoreValue } from '~src/utils/storage'
-import { toPdfPage } from '~uti/btn-auth'
+
 
 
 //变量
@@ -123,13 +125,7 @@ const ElTreeMenuClick = async ({ key, node, data, keys }) => {
     treeAutoExpandKeys.value = keys || []
 }
 
-//日期时间被选择
-const betweenTime = ref(null)
-const betweenTimeUpdate = ({ val, arr }) => {
-    betweenTime.value = arr
-    searchForm.value.startTimeValue = val['start']
-    searchForm.value.endTimeValue = val['end']
-}
+
 //保管期限
 const retentionPeriod = ref([
     { label: '永久', value: '3' },
@@ -154,7 +150,7 @@ const getSecurityLevel = async () => {
 
 //搜索表单
 const searchForm = ref({
-    contractId: null, storageTime:'', secretLevel:'', name:'', startTimeValue: '', endTimeValue: '',
+    contractId: null, storageTime:'', secretLevel:'', name:'', 
     current: 1, size: 20, total: 0,
 })
 const searchClick = ()=>{
@@ -183,11 +179,12 @@ const tableColumn = ref([])
 //设置表头
 const setTableColumns = () => {
     tableColumn.value = [
-        { key: 'fileNumber', name: '标段' },
-        { key: 'name', name: '移交人', width: 300 },
-        { key: 'storageTimeValue', name: '移交时间' },
-        { key: 'secretLevelValue', name: '登记表' },
-        { key: 'pageN', name: '清单' },
+        { key: 'fileNumber', name: '档号' },
+        { key: 'name', name: '案卷题名', width: 300 },
+        { key: 'secretLevelValue', name: '密级' },
+        { key: 'storageTimeValue', name: '保管期限' },
+        { key: 'pageN', name: '页数' },
+        { key: 'unit', name: '立卷单位', width: 160 },
      
     ]
 }
@@ -198,24 +195,29 @@ const tableData = ref([
 const tableLoading = ref(false)
 const getTableData = async () => {
  
-    // tableLoading.value = true
-    // const { error, code, data } = await tuningApi.pageByArchive({
-    //     ...searchForm.value,
-    //     projectId: projectId.value,
-    //     contractId: contractId.value,
-    //     isArchive: 1,
-    // })
-    // tableLoading.value = false
-    // if (!error && code === 200) {
-    //     tableData.value = getArrValue(data?.records)
-    //     searchForm.value.total = data?.total || 0
-    // } else {
-    //     tableData.value = []
-    //     searchForm.value.total = 0
-    // }
+    tableLoading.value = true
+    const { error, code, data } = await tuningApi.pageByArchive({
+        ...searchForm.value,
+        projectId: projectId.value,
+        contractId: contractId.value,
+        isArchive: 1,
+    })
+    tableLoading.value = false
+    if (!error && code === 200) {
+        tableData.value = getArrValue(data?.records)
+        searchForm.value.total = data?.total || 0
+    } else {
+        tableData.value = []
+        searchForm.value.total = 0
+    }
 }
 
+//多选
+const tableCheckedKeys = ref([])
 
+const tableSelection = (rows) => {
+    tableCheckedKeys.value = rows
+}
 
 //设置表头
 </script>

+ 508 - 4
src/views/using/borrow/query.vue

@@ -1,5 +1,509 @@
 <template>
-    <div>
-        <h1>借阅查询</h1>
-    </div>
-</template>
+    <hc-body ids="carry-spot-checks-layout-target3" split :loading="treeLoading" :project-nmae="projectInfo?.name">
+        <template #tree>
+            <HcTree :project-id="projectId" :contract-id="contractId" :auto-expand-keys="treeAutoExpandKeys" @node-tap="projectTreeClick" @node-loading="treeNodeLoading" @menu-tap="ElTreeMenuClick" />
+        </template>
+        <hc-new-card v-show="!isCarrySpotChecksDrawer" title="已形成的案卷">
+            <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new :index-style="{ width: 60 }" @row-click="tableRowClick">
+                <template #name="{ row }">
+                    <div class="text-link">{{ row?.name }}</div>
+                </template>
+            </HcTable>
+            <template #action>
+                <HcPages :pages="searchForm" :sizes="[20, 50, 100, 200, 300, 500]" @change="pageChange" />
+            </template>
+        </hc-new-card>
+        <!-- 展开抽查 -->
+        <HcDrawer v-model="isCarrySpotChecksDrawer" to-id="carry-spot-checks-layout-target3" flex @close="onCarrySpotChecksDrawerClose">
+            <div class="hc-carry-spot-checks-pdf">
+                <div v-loading="pdfLoading" class="relative h-full w-full">
+                    <hc-pdfs v-if="isshowPdf" :url="pdfUrl" />
+                </div>
+                <el-tooltip content="展开/收起 右侧目录" placement="top" :disabled="!isBubble">
+                    <div class="hc-csc-pdf-btn" @click="onCarryDataShow">
+                        <HcIcon v-show="isCarryDataShow" name="arrow-right-s" />
+                        <HcIcon v-show="!isCarryDataShow" name="arrow-left-s" />
+                    </div>
+                </el-tooltip>
+            </div>
+            <div v-show="isCarryDataShow" class="hc-carry-spot-checks-data">
+                <div class="hc-csc-switch">
+                    <HcNewSwitch :datas="tabTypeTab" :keys="tabTypeKey" size="default" :round="false" @change="tabTypeChange" />
+                </div>
+                <div class="hc-csc-info-box">
+                    <el-scrollbar>
+                        <div class="hc-info-text-item">
+                            <div class="title">
+                                案卷题名:
+                            </div>
+                            <div class="content">
+                                {{ fileInfo.name }}
+                            </div>
+                        </div>
+                        <div class="hc-info-text-item">
+                            <div class="title">
+                                <span>密</span>
+                                <span class="ml-7">级:</span>
+                            </div>
+                            <div class="content">
+                                {{ fileInfo.secretLevelValue }}
+                            </div>
+                        </div>
+                        <div class="hc-info-text-item">
+                            <div class="title">
+                                保管期限:
+                            </div>
+                            <div class="content">
+                                {{ fileInfo.storageTimeValue }}
+                            </div>
+                        </div>
+                        <div class="hc-info-text-item">
+                            <div class="title">
+                                卷内文件:
+                            </div>
+                            <div class="content">
+                                {{ fileInfo.pageNumber }}
+                            </div>
+                        </div>
+                        <div class="hc-info-text-item">
+                            <div class="title">
+                                起止日期:
+                            </div>
+                            <div v-if="fileInfo?.endDate !== '' || fileInfo?.startDate !== null" class="content">
+                                {{ `${splitDate(fileInfo?.startDate)}~${splitDate(fileInfo?.endDate)}` }}
+                            </div>
+                            <div v-else class="content" />
+                        </div>
+                        <div class="hc-info-text-item">
+                            <div class="title">
+                                立卷单位:
+                            </div>
+                            <div class="content">
+                                {{ fileInfo.unit }}
+                            </div>
+                        </div>
+                    </el-scrollbar>
+                </div>
+                <div class="hc-csc-data-box" style="height: calc(100% - 363px);">
+                    <HcTable v-if="tabTypeKey === 'tab1'" :column="cscTableColumn1" :datas="cscTableData1" :loading="cscTableLoading" is-new :is-arr-index="false">
+                        <template #name="{ row }">
+                            <div :class="row.id === checkId ? 'bg-orange-400' : 'text-hover'" @click="changePdf(row)">{{ row?.fileName }}</div>
+                        </template>
+                    </HcTable>
+
+                    <HcTable v-if="tabTypeKey === 'tab2'" :column="cscTableColumn2" :datas="cscTableData2" :loading="cscTableLoading" is-new :is-index="false">
+                        <template #name="{ row }">
+                            <div :class="row.id === 2 ? 'text-link' : 'text-hover'">{{ row?.name }}</div>
+                        </template>
+                    </HcTable>
+
+                    <HcTable v-if="tabTypeKey === 'tab3'" :column="cscTableColumn3" :datas="cscTableData3" :loading="cscTableLoading" is-new :is-index="false">
+                        <template #name="{ row }">
+                            <div :class="row.id === 2 ? 'text-link' : 'text-hover'">{{ row?.name }}</div>
+                        </template>
+                    </HcTable>
+
+                    <HcTable v-if="tabTypeKey === 'tab4'" :column="cscTableColumn4" :datas="cscTableData4" :loading="cscTableLoading" is-new :is-index="false">
+                        <template #name="{ row }">
+                            <div class="hc-csc-associated-row" :class="row.id === 2 ? 'text-link' : 'text-hover'">
+                                <el-tag effect="dark">{{ row?.tag }}</el-tag>
+                                <span class="ml-3">{{ row?.name }}</span>
+                            </div>
+                        </template>
+                    </HcTable>
+
+                    <MetaTable v-if="tabTypeKey === 'tab5'" :loading="cscmetaTableLoading" :meta-data-table="cscmetaDataTabledata" :ishow-file="ishowFile" />
+
+
+                    <HcTable v-if="tabTypeKey === 'tab6'" :column="cscTableColumn5" :datas="cscTableData5" :loading="cscTableLoading" is-new :index-style="{ width: 60 }" />
+
+                    <el-tooltip v-if="tabTypeKey === 'tab6' || tabTypeKey === 'tab5'" content="使用弹窗查看数据" placement="top" :disabled="!isBubble">
+                        <div class="hc-table-info-btn" @click="cscTableDataModalShow">
+                            <HcIcon name="airplay" />
+                        </div>
+                    </el-tooltip>
+                </div>
+              
+                <div class="btn-box" style="text-align: center;">
+                    <el-button hc-btn type="warning" style="height: 40px; padding: 0 15px;" @click="onCarrySpotChecksDrawerClose">
+                        <HcIcon name="close" />
+                        <span>退出预览</span>
+                    </el-button>
+                </div>
+            </div>
+        </HcDrawer>
+
+        <!-- 使用弹窗查看数据 -->
+        <hc-new-dialog v-model="cscTableDataModal" :title="cscTableDataTitle" widths="1080px" is-table :footer="false" @close="cscTableDataModalClose">
+            <MetaTable v-if="tabTypeKey === 'tab5'" :loading="cscmetaTableLoading" :meta-data-table="cscmetaDataTabledata" :ishow-file="ishowFile" />
+            <HcTable v-if="tabTypeKey === 'tab6'" :column="cscTableColumn51" :datas="cscTableData5" :loading="cscTableLoading" is-new :index-style="{ width: 60 }" />
+        </hc-new-dialog>
+    </hc-body>
+</template>
+
+<script setup>
+import { nextTick, onActivated, onMounted, ref, watch } from 'vue'
+import { useAppStore } from '~src/store'
+import { getArrValue, getObjValue } from 'js-fast-way'
+import HcTree from '~src/components/tree/hc-tree.vue'
+import MetaTable from '../components/meta-table.vue'
+import { getStoreValue, setStoreValue } from '~src/utils/storage'
+import tuningApi from '~api/archiveConfig/tuning.js'
+import archiveQueryApi from '~api/using/query.js'
+import inspectApi from '~api/transfer/inspects.js'
+
+//变量
+const useAppState = useAppStore()
+const projectId = ref(useAppState.getProjectId)
+const contractId = ref(useAppState.getContractId)
+const projectInfo = ref(useAppState.getProjectInfo)
+const isCollapse = ref(useAppState.getCollapse)
+const isBubble = ref(useAppState.getBubble)
+const userInfo = ref(useAppState.getUserInfo)
+
+//监听
+watch(() => [
+    useAppState.getCollapse,
+    useAppState.getBubble,
+], ([Collapse, bubble]) => {
+    isCollapse.value = Collapse
+    isBubble.value = bubble
+})
+
+//渲染完成
+onMounted(() => {
+    setTableColumns()
+})
+//缓存被激活时
+onActivated(() => {
+    getTableData()
+})
+//树加载
+const treeLoading = ref(true)
+const treeNodeLoading = () => {
+    treeLoading.value = false
+}
+
+//搜索表单
+const searchForm = ref({
+    current: 1, size: 20, total: 0,
+})
+//截取日期
+const splitDate = (val)=>{
+    if (val) {
+        return val?.substring(0, 10)
+    } else {
+        return ''
+    }
+}
+
+
+//自动展开缓存
+const treeAutoExpandKeys = ref(getStoreValue('inspectExpandKeys') || [])
+const projectTreeClick = ({ node, data, keys, key }) => {
+    console.log(data)
+    //缓存展开的节点
+    setStoreValue('inspectExpandKeys', keys)
+    treeAutoExpandKeys.value = keys || []
+
+    searchForm.value.total = 0
+    searchForm.value.current = 1
+    searchForm.value.size = 20
+    searchForm.value.nodeIds = data.id || ''
+    getTableData()
+}
+//树菜单被点击
+const ElTreeMenuClick = async ({ key, node, data }) => {
+
+    setStoreValue('inspectExpandKeys', keys)
+}
+//分页被点击
+const pageChange = ({ current, size }) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+    getTableData()
+}
+
+//表格数据
+const tableRef = ref(null)
+const tableColumn = ref([])
+//设置表头
+const setTableColumns = () => {
+    tableColumn.value = [
+        { key: 'fileNumber', name: '档号', width:110 },
+        { key: 'name', name: '案卷题名' },
+        { key: 'storageTimeValue', name: '保管期限', width:100 },
+        { key: 'pageN', name: '总页数', width:110 },
+        { key:'unit', name: '立卷单位', width: 140 },
+        { key:'remark', name: '备注', width: 110 },
+    ]
+}
+const tableData = ref([])
+
+//获取数据
+const tableLoading = ref(false)
+const getTableData = async () => {
+    tableLoading.value = true
+    const { error, code, data } = await tuningApi.pageByArchive({
+        ...searchForm.value,
+        projectId: projectId.value,
+        contractId: contractId.value,
+        isArchive: 1,
+    })
+    tableLoading.value = false
+    if (!error && code === 200) {
+        tableData.value = getArrValue(data?.records)
+        searchForm.value.total = data?.total || 0
+    } else {
+        tableData.value = []
+        searchForm.value.total = 0
+    }
+}
+
+
+//行被点击
+const isCarrySpotChecksDrawer = ref(false)
+const fileInfo = ref('')
+const checkmetaFileId = ref('')
+const tableRowClick = async ({ row }) => {
+    fileInfo.value = row
+  await getArchiveFileListData()
+    isCarrySpotChecksDrawer.value = true
+}
+//获取卷内文件数据
+const getArchiveFileListData = async ()=>{
+    const { error, code, msg, data } = await archiveQueryApi.getArchiveFileList({
+        id: fileInfo.value.id, //案卷id
+
+    })
+    //处理返回数据
+    if (!error && code === 200) {
+        fileInfo.value.pageNumber = data.pageNumber
+
+        cscTableData1.value = getArrValue(data['approvalFileList'])
+        if (cscTableData1.value.length > 0) {
+            checkmetaFileId.value = cscTableData1.value[0].id
+            pdfUrl.value = cscTableData1.value[0]?.pdfFileUrl || ''
+            console.log( pdfUrl.value, '  pdfUrl.value ')
+            
+            checkId.value = cscTableData1.value[0].id
+           
+            
+            getmetaInfo()
+        }
+
+    } else {
+
+        cscTableData1.value = []
+        pdfUrl.value = ''
+        checkId.value = ''
+    }
+}
+
+const checkId = ref('')
+const pdfUrl = ref('')
+const isshowPdf = ref(true)
+const pdfLoading = ref(false)
+const changePdf = (row)=>{
+    ishowFile.value = true
+    pdfLoading.value = false
+    isshowPdf.value = false
+    setTimeout(() => {
+        isshowPdf.value = true
+    }, 100)
+    pdfUrl.value = row['pdfFileUrl'] || ''
+    checkId.value = row.id
+    checkmetaFileId.value = row.id
+    getmetaInfo()
+
+
+
+
+
+}
+const opid = ref('')
+
+//获取抽检意见
+const getopiniondata = async ()=>{
+    const { error, code, data, msg } = await inspectApi.getOpinion({
+        fileId: checkId.value,
+    })
+    if (!error && code === 200) {
+        console.log(data, 'data')
+        let opiniondata = getObjValue(data)
+        reform.value.content = opiniondata?.allOpinion
+        reform.value.type = opiniondata?.allOpinion?.length > 0 ? true : false
+        reform.value.myOpinion = opiniondata?.opinion
+        opid.value = opiniondata?.id
+    }
+}
+
+//类型tab数据和相关处理
+const tabTypeKey = ref('tab1')
+const tabTypeTab = ref([
+    { key:'tab1', name: '卷内文件' },
+    { key:'tab2', name: '竣工资料' },
+    { key:'tab3', name: '计量资料' },
+    { key:'tab4', name: '关联资料' },
+    { key:'tab5', name: '元数据' },
+    { key:'tab6', name: '验签包' },
+])
+const tabTypeChange = ({ key }) => {
+    tabTypeKey.value = key
+    if (key === 'tab5') {
+        if (ishowFile.value) {
+            getmetaInfo()
+        } else {
+            getArchivesAutoView(fileInfo.value.id)
+        }
+
+    }
+}
+//获取案卷元数据信息
+const getArchivesAutoView = async (fileId)=>{
+    cscmetaTableLoading.value = true
+    const { error, code, data } = await tuningApi.getArchivesAutoView({
+        id:fileId,
+    })
+    cscmetaTableLoading.value = false
+    if (!error && code === 200) {
+        let obj = getObjValue(data)
+        cscmetaDataTabledata.value = [
+            { containerName:'题名', keyValue:'', isType:3 },
+            { containerName:'档号', keyValue:obj?.fileNumber, isType:2 },
+            { containerName:'文件件数', keyValue:obj?.fileN, isType:2 },
+            { containerName:'移交时间', keyValue:'', isType:2 },
+        ]
+    } else {
+        cscmetaDataTabledata.value = []
+    }
+}
+const cscTableLoading = ref(false)
+
+//卷内目录
+const cscTableColumn1 = [
+    { key:'name', name: '卷内文件题名', align: 'center' },
+]
+const cscTableData1 = ref([
+
+])
+
+//竣工资料
+const cscTableColumn2 = [
+    { key:'name', name: '竣工图资料', align: 'center' },
+]
+const cscTableData2 = ref([])
+  
+
+//计量资料
+const cscTableColumn3 = [
+    { key:'name', name: '计量资料', align: 'center' },
+]
+const cscTableData3 = ref([
+
+])
+
+//计量资料
+const cscTableColumn4 = [
+    { key:'name', name: '关联文件', align: 'center' },
+]
+const cscTableData4 = ref([])
+
+
+//验签包
+const cscTableColumn5 = [
+    { key:'user', name: '签名者' },
+    { key:'time', name: '签名时间' },
+    { key:'val', name: '摘要' },
+]
+const cscTableColumn51 = [
+    { key:'user', name: '签名者', width: 300 },
+    { key:'time', name: '签名时间', width: 200 },
+    { key:'val', name: '摘要' },
+]
+const cscTableData5 = ref([])
+
+
+
+
+
+
+//显示右侧目录
+const isCarryDataShow = ref(true)
+const onCarryDataShow = () => {
+    isCarryDataShow.value = !isCarryDataShow.value
+}
+
+
+//使用弹窗查看数据
+const cscTableDataModal = ref(false)
+const cscTableDataTitle = ref('')
+//显示弹窗
+const cscTableDataModalShow = () => {
+    const key = tabTypeKey.value
+    if (key === 'tab5') {
+        cscTableDataTitle.value = '元数据'
+        // getmetaInfo()
+        if (ishowFile.value) {
+            getmetaInfo()
+        } else {
+            getArchivesAutoView(fileInfo.value.id)
+        }
+    } else if (key === 'tab6') {
+        cscTableDataTitle.value = '验签包'
+    }
+    cscTableDataModal.value = true
+}
+
+//关闭弹窗
+const cscTableDataModalClose = () => {
+    cscTableDataModal.value = false
+    getTableData()
+}
+
+
+//关闭抽查
+const onCarrySpotChecksDrawerClose = () => {
+    isCarrySpotChecksDrawer.value = false
+    pdfUrl.value = ''
+    ishowFile.value = false
+    checkmetaFileId.value = ''
+    tabTypeKey.value = 'tab1'
+    getTableData()
+}
+
+
+
+
+//获取元数据
+const cscmetaTableLoading = ref(false)
+const cscmetaDataTabledata = ref([])
+const ishowFile = ref(false)
+//获取元数据信息
+
+const getmetaInfo = async (fileId)=>{
+
+    cscmetaTableLoading.value = true
+    const { error, code, data } = await tuningApi.getMetadataFileByid({
+        fileId: checkmetaFileId.value,
+    })
+    cscmetaTableLoading.value = false
+    if (!error && code === 200) {
+        cscmetaDataTabledata.value = getArrValue(data)
+    } else {
+        cscmetaDataTabledata.value = []
+    }
+}
+</script>
+
+<style lang="scss">
+@import '~style/transfer/scoped/inspects.scss';
+</style>
+
+<style lang="scss">
+@import '~style/transfer/inspects.scss';
+@import '~src/styles/theme/transfer/inspect.scss';
+.act-border{
+    border: 1px solid var(--el-color-primary);
+}
+</style>

+ 214 - 0
src/views/using/components/meta-table.vue

@@ -0,0 +1,214 @@
+<template>
+    <div v-loading="isLoading" class="hc-csc-meta-table-data">
+        <el-scrollbar>
+            <table class="hc-csc-meta-table" border="1">
+                <tbody>
+                    <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" :key="item.id">
+                        <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>
+                </tbody>
+            </table>
+            <hc-empty 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>