archives/src/views/transfer/components/carry-spot-checks.vue

<template>
    <div>
        <HcDrawer :show="isDrawer" to-id="carry-spot-checks-layout-target"
                  uis="hc-carry-spot-checks-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 :disabled="!isBubble" content="展开/收起 右侧目录" placement="top">
                    <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" :round="false" size="default"
                                 @change="tabTypeChange"/>
                </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 v-if="tabTypeKey === 'tab1'" :column="cscTableColumn1" :datas="cscTableData1"
                             :isIndex="false" :loading="cscTableLoading">
                        <template #name="{row}">
                            <div :class="row.id === 2 ? 'text-link' : 'text-hover'">{{ row?.name }}</div>
                        </template>
                    </HcTable>

                    <HcTable v-if="tabTypeKey === 'tab2'" :column="cscTableColumn2" :datas="cscTableData2"
                             :isIndex="false" :loading="cscTableLoading">
                        <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"
                             :isIndex="false" :loading="cscTableLoading">
                        <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"
                             :isIndex="false" :loading="cscTableLoading">
                        <template #name="{row}">
                            <div :class="row.id === 2 ? 'text-link' : 'text-hover'" class="hc-csc-associated-row">
                                <el-tag effect="dark">{{ row?.tag }}</el-tag>
                                <span class="ml-3">{{ row?.name }}</span>
                            </div>
                        </template>
                    </HcTable>

                    <MetaTable v-if="tabTypeKey === 'tab5'" :loading="cscTableLoading"/>

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

                    <el-tooltip v-if="tabTypeKey === 'tab6' || tabTypeKey === 'tab5'" :disabled="!isBubble"
                                content="使用弹窗查看数据"
                                placement="top">
                        <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 v-model="reform.type" class="size-xl">需要整改</el-checkbox>
                        </div>
                    </div>
                    <div class="textarea-box">
                        <el-input v-model="reform.content" :autosize="{ minRows: 5}" placeholder="请填写抽检意见"
                                  resize="none"
                                  type="textarea"/>
                    </div>
                    <div class="btn-box">
                        <el-button hc-btn @click="onCarrySpotChecksDrawerClose">
                            <HcIcon name="close"/>
                            <span>{{ closeText }}</span>
                        </el-button>
                        <el-button hc-btn type="primary" @click="checkClick">
                            <HcIcon name="check"/>
                            <span>{{ checkText }}</span>
                        </el-button>
                    </div>
                </div>
            </div>
        </HcDrawer>

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

<script setup>
import {ref, watch} from "vue";
import {useAppStore} from "~src/store";
import MetaTable from "./meta-table.vue"

const useAppState = useAppStore()

//参数
const props = defineProps({
    projectId: {
        type: [String, Number],
        default: ''
    },
    contractId: {
        type: [String, Number],
        default: ''
    },
    show: {
        type: Boolean,
        default: false
    },
    closeText: {
        type: [String, Number],
        default: '取消查阅'
    },
    checkText: {
        type: [String, Number],
        default: '保存抽检意见'
    }
})

//变量
const projectId = ref(props.projectId);
const contractId = ref(props.contractId);
const nodeData = ref(props.treeData);
const isBubble = ref(useAppState.getBubble);
const isDrawer = ref(props.show)

//监听
watch(() => [
    props.show,
    useAppState.getBubble,
], ([show, bubble]) => {
    isDrawer.value = show;
    isBubble.value = bubble
})


//类型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 emit = defineEmits(['close', 'check'])

//使用弹窗查看数据
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 = () => {
    isDrawer.value = false
    emit('close', false)
}

const checkClick = () => {
    emit('check')
}
</script>

<style lang="scss" scoped>
.hc-carry-spot-checks-pdf {
    position: relative;
    flex: 1 1 auto;
    height: 100%;
    transition: 0.2s;
    .hc-csc-pdf-btn {
        position: absolute;
        right: 0;
        top: 50%;
        color: white;
        font-size: 25px;
        z-index: 111;
        cursor: pointer;
        width: 36px;
        height: 40px;
        display: flex;
        padding-left: 6px;
        align-items: center;
        justify-content: center;
        border-radius: 150px 0 0 150px;
        background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
        background-size: 200%;
        transition: background-position 0.5s;
        &:hover {
            background-position: 100% 0;
        }
    }
}
.hc-carry-spot-checks-data {
    position: relative;
    height: 100%;
    width: 480px;
    padding-left: 14px;
    border-left: 1px solid #e9e9e9;
    transition: 0.2s;
    .hc-csc-switch {
        position: relative;
        margin-bottom: 10px;
    }
    .hc-csc-info-box {
        position: relative;
        background: #E7EEF4;
        border-radius: 10px;
        padding: 12px;
        height: 244px;
        margin-bottom: 20px;
        .hc-info-text-item {
            position: relative;
            font-size: 14px;
            display: flex;
            align-items: flex-start;
            .title {
                font-weight: bold;
            }
            .content {
                flex: 1;
                position: relative;
                color: #101010;
            }
        }
        .hc-info-text-item + .hc-info-text-item {
            margin-top: 8px;
        }
    }
    .hc-csc-data-box {
        position: relative;
        background: #E7EEF4;
        border-radius: 10px;
        padding: 12px;
        height: calc(100% - 562px);
        margin-bottom: 16px;
        .hc-csc-associated-row {
            position: relative;
            text-align: left;
            display: flex;
            align-items: center;
        }
        .hc-table-info-btn {
            position: absolute;
            right: -5px;
            top: -12px;
            color: white;
            font-size: 20px;
            z-index: 111;
            cursor: pointer;
            border-radius: 50px;
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
            box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
            background-size: 200%;
            transition: background-position 0.5s;
            &:hover {
                background-position: 100% 0;
            }
        }
    }
    .hc-csc-action-box {
        position: relative;
        background: white;
        border-radius: 10px;
        padding: 12px;
        height: 240px;
        .header-box {
            position: relative;
            display: flex;
            align-items: center;
            .title {
                flex: 1;
                color: #9A9A9A;
                font-size: 15px;
            }
        }
        .textarea-box {
            margin-top: 12px;
        }
        .btn-box {
            position: relative;
            margin-top: 20px;
            text-align: center;
        }
    }
}
</style>

<style lang="scss">
.hc-carry-spot-checks-target.el-overlay {
    position: absolute;
    margin: -24px;
    height: revert;
    background-color: transparent;
    .hc-drawer-box.el-drawer {
        --el-drawer-bg-color: transparent;
        .el-drawer__body {
            padding: 24px;
            overflow: hidden;
            .el-card__body {
                padding: 10px;
            }
            .hc-card-main-box {
                display: flex;
            }
        }
    }
}
.hc-csc-action-box .btn-box {
    .el-button + .el-button {
        margin-left: 50px;
    }
}

</style>