archives/src/views/transfer/inspects.vue

<template>
    <div class="hc-page-layout-box" id="carry-spot-checks-layout-target">
        <div class="hc-layout-left-box" :style="'width:' + leftWidth + 'px;'"  v-show="!isCarrySpotChecksDrawer">
            <div class="hc-project-box">
                <div class="hc-project-icon-box">
                    <HcIcon name="stack"/>
                </div>
                <div class="ml-2 project-name-box">
                    <span class="text-xl text-cut project-alias">{{projectInfo['projectAlias']}}</span>
                    <div class="text-xs text-cut project-name">{{projectInfo['name']}}</div>
                </div>
            </div>
            <div class="hc-tree-box" v-loading="treeLoading" element-loading-text="加载中...">
                <el-scrollbar>
                    <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="projectTreeClick" @nodeLoading="treeNodeLoading" :autoExpandKeys="treeAutoExpandKeys" @menuTap="ElTreeMenuClick"/>
                </el-scrollbar>
            </div>
            <!--左右拖动-->
            <div class="horizontal-drag-line" @mousedown="onmousedown"/>
        </div>
        <div class="hc-page-content-box" v-show="!isCarrySpotChecksDrawer">
            <HcCard title="已形成的案卷">
                <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading" @row-click="tableRowClick">
                    <template #key2="{row}">
                        <div class="text-link" :class="row.status === 1 ? 'text-green' : 'text-blue'">{{row?.key2}}</div>
                    </template>
                </HcTable>
                <template #action>
                    <HcPages :pages="searchForm" @change="pageChange"/>
                </template>
            </HcCard>
        </div>

        <!--展开抽查-->
        <HcDrawer :show="isCarrySpotChecksDrawer" uis="hc-carry-spot-checks-target" to-id="carry-spot-checks-layout-target" @close="onCarrySpotChecksDrawerClose">
            <div class="hc-carry-spot-checks-pdf">
                <HcPdf src="https://bladex-test-info.oss-cn-chengdu.aliyuncs.com//upload/20221212/ce9799c7d18efc03efefd6f242439f2e.pdf"/>
                <el-tooltip content="展开/收起 右侧目录" placement="top" :disabled="!isBubble">
                    <div class="hc-csc-pdf-btn" @click="onCarryDataShow">
                        <HcIcon name="arrow-right-s" v-show="isCarryDataShow"/>
                        <HcIcon name="arrow-left-s" v-show="!isCarryDataShow"/>
                    </div>
                </el-tooltip>
            </div>
            <div class="hc-carry-spot-checks-data" v-show="isCarryDataShow">
                <div class="hc-csc-switch">
                    <HcNewSwitch :datas="tabTypeTab" :keys="tabTypeKey" @change="tabTypeChange" size="default" :round="false"/>
                </div>
                <div class="hc-csc-info-box">
                    <el-scrollbar>
                        <div class="hc-info-text-item">
                            <div class="title">案卷题名：</div>
                            <div class="content">安康至来凤国家高速公路奉节至巫山（渝鄂界）段干岩洞隧道LK3+425～LK3+393初期支护钢筋网分项开工报告、检验申请批复单、质量检验报告单、记录表、试验检测记录及评定报告、中间交工证书</div>
                        </div>
                        <div class="hc-info-text-item">
                            <div class="title">
                                <span>密</span>
                                <span class="ml-7">级：</span>
                            </div>
                            <div class="content">机密</div>
                        </div>
                        <div class="hc-info-text-item">
                            <div class="title">保管期限：</div>
                            <div class="content">永久</div>
                        </div>
                        <div class="hc-info-text-item">
                            <div class="title">卷内文件：</div>
                            <div class="content">9</div>
                        </div>
                        <div class="hc-info-text-item">
                            <div class="title">起止日期：</div>
                            <div class="content">2022.02.12~2023.11.02</div>
                        </div>
                        <div class="hc-info-text-item">
                            <div class="title">立卷单位：</div>
                            <div class="content">贵州路桥集团xxxxx</div>
                        </div>
                    </el-scrollbar>
                </div>
                <div class="hc-csc-data-box">
                    <HcTable :column="cscTableColumn1" :datas="cscTableData1" :loading="cscTableLoading" :isIndex="false" v-if="tabTypeKey === 'tab1'">
                        <template #name="{row}">
                            <div :class="row.id === 2 ? 'text-link' : 'text-hover'">{{row?.name}}</div>
                        </template>
                    </HcTable>

                    <HcTable :column="cscTableColumn2" :datas="cscTableData2" :loading="cscTableLoading" :isIndex="false" v-if="tabTypeKey === 'tab2'">
                        <template #name="{row}">
                            <div :class="row.id === 2 ? 'text-link' : 'text-hover'">{{row?.name}}</div>
                        </template>
                    </HcTable>

                    <HcTable :column="cscTableColumn3" :datas="cscTableData3" :loading="cscTableLoading" :isIndex="false" v-if="tabTypeKey === 'tab3'">
                        <template #name="{row}">
                            <div :class="row.id === 2 ? 'text-link' : 'text-hover'">{{row?.name}}</div>
                        </template>
                    </HcTable>

                    <HcTable :column="cscTableColumn4" :datas="cscTableData4" :loading="cscTableLoading" :isIndex="false" v-if="tabTypeKey === 'tab4'">
                        <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 :loading="cscTableLoading" v-if="tabTypeKey === 'tab5'"/>

                    <HcTable :column="cscTableColumn5" :datas="cscTableData5" :loading="cscTableLoading" v-if="tabTypeKey === 'tab6'"/>

                    <el-tooltip content="使用弹窗查看数据" placement="top" :disabled="!isBubble" v-if="tabTypeKey === 'tab6' || tabTypeKey === 'tab5'">
                        <div class="hc-table-info-btn" @click="cscTableDataModalShow">
                            <HcIcon name="airplay"/>
                        </div>
                    </el-tooltip>
                </div>
                <div class="hc-csc-action-box">
                    <div class="header-box">
                        <div class="title">抽检意见：</div>
                        <div class="extra">
                            <el-checkbox class="size-xl" v-model="reform.type">需要整改</el-checkbox>
                        </div>
                    </div>
                    <div class="textarea-box">
                        <el-input v-model="reform.content" type="textarea" :autosize="{ minRows: 5}" resize="none" placeholder="请填写抽检意见"/>
                    </div>
                    <div class="btn-box">
                        <el-button hc-btn @click="onCarrySpotChecksDrawerClose">
                            <HcIcon name="close"/>
                            <span>取消查阅</span>
                        </el-button>
                        <el-button type="primary" hc-btn>
                            <HcIcon name="check"/>
                            <span>保存抽检意见</span>
                        </el-button>
                    </div>
                </div>
            </div>
        </HcDrawer>

        <!--使用弹窗查看数据-->
        <HcDialog :show="cscTableDataModal" :title="cscTableDataTitle" widths="1080px" isTable :footer="false" @close="cscTableDataModalClose">
            <MetaTable :loading="cscTableLoading" v-if="tabTypeKey === 'tab5'"/>
            <HcTable :column="cscTableColumn51" :datas="cscTableData5" :loading="cscTableLoading" v-if="tabTypeKey === 'tab6'"/>
        </HcDialog>

    </div>
</template>

<script setup>
import {ref, watch, onMounted, nextTick} from "vue";
import {useAppStore} from "~src/store";
//import HcTree from "./components/hc-tree.vue"
import HcTree from "~src/components/tree/hc-tree.vue"
import MetaTable from "./components/meta-table.vue"
import {getStoreValue, setStoreValue} from '~src/utils/storage'

//变量
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);

//监听
watch(() => [
    useAppState.getCollapse,
    useAppState.getBubble,
], ([Collapse, bubble]) => {
    isCollapse.value = Collapse
    isBubble.value = bubble
})

//渲染完成
onMounted(() => {

})

//树加载
const treeLoading = ref(true)
const treeNodeLoading = () => {
    treeLoading.value = false
}

//搜索表单
const searchForm = ref({
    current: 1, size: 20, total: 0
})

//树相关的变量
const primaryKeyId = ref('')

//自动展开缓存
const treeAutoExpandKeys = ref(getStoreValue('inspectExpandKeys') || [])
const projectTreeClick = ({node, data, keys, key}) => {
    console.log(data)
    //缓存展开的节点
    setStoreValue('inspectExpandKeys', keys)
    treeAutoExpandKeys.value = keys || []
}
//树菜单被点击
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([
    {key:'key1', name: '档号', width: 100},
    {key:'key2', name: '案卷题名'},
    {key:'key3', name: '保管期限', width: 120},
    {key:'key4', name: '总页数', width: 120},
    {key:'key5', name: '立卷单位', width: 150},
    {key:'key6', name: '备注', width: 150}
])
const tableData = ref([
    {
        id: 1,
        key1:'BS28',
        key2: '安康至来凤国家高速公路奉节至巫山（渝鄂界）段干岩洞隧道LK3+425～LK3+393初期支护钢筋网分项开工报告、检验申请批复单、质量检验报告单、记录表、试验检测记录及评定报告、中间交工证书',
        key3: 30,
        key4: 300,
        key5: '贵州路桥集团',
        key6: '这是备注信息',
        status: 1
    },
    {
        id: 2,
        key1:'BS29',
        key2: '安康至来凤国家高速公路奉节至巫山（渝鄂界）段干岩洞隧道LK3+425～LK3+393初期支护钢筋网分项开工报告、检验申请批复单、质量检验报告单、记录表、试验检测记录及评定报告、中间交工证书',
        key3: '永久',
        key4: 300,
        key5: '贵州路桥集团',
        key6: '这是备注信息',
        status: 0
    },
    {
        id: 3,
        key1:'BS30',
        key2: '安康至来凤国家高速公路奉节至巫山（渝鄂界）段干岩洞隧道LK3+425～LK3+393初期支护钢筋网分项开工报告、检验申请批复单、质量检验报告单、记录表、试验检测记录及评定报告、中间交工证书',
        key3: 30,
        key4: 300,
        key5: '贵州路桥集团',
        key6: '这是备注信息',
        status: 0
    },
])

//获取数据
const tableLoading = ref(false)
const getTableData = async () => {

}

//行被点击
const isCarrySpotChecksDrawer = ref(false)
const tableRowClick = ({row}) => {
    //console.log(row)
    isCarrySpotChecksDrawer.value = true
}

//类型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
}

const cscTableLoading = ref(false)

//卷内目录
const cscTableColumn1 = [
    {key:'name', name: '卷内文件题名', align: 'center'}
];
const cscTableData1 = ref([
    {id: 1, name: '[K8+450阳光大桥第x联（跨）墩顶负弯矩张拉压浆].PDF'},
    {id: 2, name: '[K8+450阳光大桥第x联（跨）墩顶负弯矩张拉压浆].PDF'},
    {id: 3, name: '[K8+450阳光大桥第x联（跨）墩顶负弯矩张拉压浆].PDF'},
    {id: 4, name: '[K8+450阳光大桥第x联（跨）墩顶负弯矩张拉压浆].PDF'},
    {id: 5, name: '[K8+450阳光大桥第x联（跨）墩顶负弯矩张拉压浆].PDF'},
    {id: 6, name: '[K8+450阳光大桥第x联（跨）墩顶负弯矩张拉压浆].PDF'},
    {id: 7, name: '[K8+450阳光大桥第x联（跨）墩顶负弯矩张拉压浆].PDF'}
])

//竣工资料
const cscTableColumn2 = [
    {key:'name', name: '竣工图资料', align: 'center'}
];
const cscTableData2 = ref([
    {id: 1, name: 'S6-3-2-Q-8-32 箱梁梁底支座垫石钢筋构造图111-箱梁梁底调平垫块及支座垫石钢筋构造图.pdf'},
    {id: 2, name: 'J6-3-2-Q-8-34 桥墩一般构造图(1-9).pdf'},
    {id: 3, name: 'S6-3-2-Q-8-32 箱梁梁底支座垫石钢筋构造图111-箱梁梁底调平垫块及支座垫石钢筋构造图.pdf'},
    {id: 4, name: 'J6-3-2-Q-8-34 桥墩一般构造图(1-9).pdf'},
    {id: 5, name: 'J6-3-2-Q-8-34 桥墩一般构造图(1-9).pdf'},
    {id: 6, name: 'S6-3-2-Q-8-32 箱梁梁底支座垫石钢筋构造图111-箱梁梁底调平垫块及支座垫石钢筋构造图.pdf'},
    {id: 7, name: 'S6-3-2-Q-8-32 箱梁梁底支座垫石钢筋构造图111-箱梁梁底调平垫块及支座垫石钢筋构造图.pdf'}
])

//计量资料
const cscTableColumn3 = [
    {key:'name', name: '计量资料', align: 'center'}
];
const cscTableData3 = ref([
    {id: 1, name: 'ZB2-17.pdf'},
    {id: 2, name: 'ZB2-18.pdf'},
    {id: 3, name: 'ZB2-19.pdf'},
    {id: 4, name: 'ZB2-20.pdf'},
    {id: 5, name: 'ZB2-21.pdf'},
    {id: 6, name: 'ZB2-22.pdf'},
    {id: 7, name: 'ZB2-23.pdf'}
])

//计量资料
const cscTableColumn4 = [
    {key:'name', name: '关联文件', align: 'center'}
];
const cscTableData4 = ref([
    {id: 1, name: 'xxxxxxxxxxxxxxxxxxx.pdf', tag: '开工'},
    {id: 2, name: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.pdf', tag: '工序'},
    {id: 3, name: 'xxxxxxxxxxxxxxxxxxxxxxxxxx.pdf', tag: '评定'},
    {id: 4, name: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx.pdf', tag: '交工'},
    {id: 5, name: '', tag: '抽检'},
    {id: 6, name: '', tag: '隐蔽'}
])


//验签包
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([
    {id: 1, user: '051@王海军@0422431197502148151@1', time: '2022-05-13 08:54:15', val: '签名有效。由051@王海军@0422431197502148151@1签名。自应用本签名以来，文档未被修改过。签名者身份有效。'},
    {id: 2, user: '051@王海军@0422431197502148151@1', time: '2022-05-13 08:54:15', val: '签名有效。由051@王海军@0422431197502148151@1签名。自应用本签名以来，文档未被修改过。签名者身份有效。'},
    {id: 3, user: '051@王海军@0422431197502148151@1', time: '2022-05-13 08:54:15', val: '签名有效。由051@王海军@0422431197502148151@1签名。自应用本签名以来，文档未被修改过。签名者身份有效。'},
    {id: 4, user: '051@王海军@0422431197502148151@1', time: '2022-05-13 08:54:15', val: '签名有效。由051@王海军@0422431197502148151@1签名。自应用本签名以来，文档未被修改过。签名者身份有效。'},
    {id: 5, user: '051@王海军@0422431197502148151@1', time: '2022-05-13 08:54:15', val: '签名有效。由051@王海军@0422431197502148151@1签名。自应用本签名以来，文档未被修改过。签名者身份有效。'},
    {id: 6, user: '051@王海军@0422431197502148151@1', time: '2022-05-13 08:54:15', val: '签名有效。由051@王海军@0422431197502148151@1签名。自应用本签名以来，文档未被修改过。签名者身份有效。'}
])


//抽检意见
const reform = ref({
    type: false, content: ''
})


//显示右侧目录
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 = '元数据'
    } else if (key === 'tab6') {
        cscTableDataTitle.value = '验签包'
    }
    cscTableDataModal.value = true
}

//关闭弹窗
const cscTableDataModalClose = () => {
    cscTableDataModal.value = false
}


//关闭抽查
const onCarrySpotChecksDrawerClose = () => {
    isCarrySpotChecksDrawer.value = false
}


//左右拖动，改变树形结构宽度
const leftWidth = ref(382);
const onmousedown = () => {
    const leftNum = isCollapse.value ? 142 : 272
    document.onmousemove = (ve) => {
        let diffVal = ve.clientX - leftNum;
        if(diffVal >= 310 && diffVal <= 900) {
            leftWidth.value = diffVal;
        }
    }
    document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
    }
}
</script>

<style lang="scss" scoped>
@import '~style/transfer/scoped/inspects.scss';
</style>

<style lang="scss">
@import '~style/transfer/inspects.scss';
</style>