archives/src/views/transfer/hand-over.vue

<template>
    <div class="hc-page-box">
        <hc-new-card>
            <div class="hc-steps-view">
                <el-steps :active="stepsKey" align-center>
                    <el-step title="验收通过" @click="stepClick(0)" />
                    <el-step title="四性检测通过" @click="stepClick(1)" />
                    <el-step title="申请移交登记" @click="stepClick(2)" />
                    <el-step title="档案馆接收" @click="stepClick(3)" />
                </el-steps>
            </div>

            <div v-if="stepsKey === 0" class="hc-body-center-box">
                <div class="hc-content-box">
                    <div class="mb-5 text-gray">当前项目档案未通过验收，未达到移交条件</div>
                    <el-button type="primary" hc-btn style="width: 268px;height: 68px;font-weight: bold;" @click="toTransferInitial">去申请验收</el-button>
                </div>
            </div>

            <div v-if="stepsKey === 1" class="hc-body-center-box">
                <div v-if="!isCustodyTest" class="hc-content-box">
                    <img :src="bgColor" alt="">
                   
                    <div class="mb-5 text-3xl text-black">专家验收已通过</div>
                    <el-button type="primary" hc-btn style="width: 268px;height: 68px;font-weight: bold;" @click="custodyTesting">点击进入四性检测</el-button>
                </div>
                <div v-else class="hc-content-box">
                    <div class="mb-5 text-gray">当前项目档案未通过四性检测，未达到移交条件</div>
                    <el-button type="primary" hc-btn style="width: 268px;height: 68px;font-weight: bold;" @click="custodyTesting">重新检测</el-button>
                </div>
            </div>

            <div v-if="stepsKey === 2 && stepsKeys === 1 && !isShowMoveSubmit " class="hc-body-center-box">
                <div class="hc-content-box">
                    <img :src="bgColor" alt="">
                    <div class="mb-5 text-3xl text-black">
                        四性检测已通过
                    </div>
                    <el-button type="primary" hc-btn style="width: 268px;height: 68px;font-weight: bold;" @click="moveClick">点击进入移交登记</el-button>
                </div>
            </div>
            <div v-if="stepsKey === 2 && stepsKeys === 1 && isShowMoveSubmit" class="hc-content-box-submit">
                <moveSubmit />
            </div>

            <div v-if="stepsKey === 2 && stepsKeys === 2" class="hc-body-box is-action is-header">
                <div class="hc-header-box">
                    <div class="header">
                        <el-checkbox v-model="checked2" label="全部移交" class="size-xl" />
                    </div>
                    <div class="extra">
                        <HcNewSwitch :datas="tabData" :keys="tabKey" :round="false" @change="tabChange" />
                    </div>
                </div>
                <div class="hc-content-box hc-table-content-box">
                    <el-scrollbar>
                        <div class="hc-table-header text-lg font-bold">建设单位归档资料（1200卷）</div>
                        <div class="hc-table-title text-lg font-bold">一、立项审批（238卷）</div>
                        <div class="hc-table-ref-box">
                            <el-table ref="tableRef" hc :data="tableData" stripe row-key="id" :border="false" style="width: 100%;" @selection-change="tableSelectionChange">
                                <el-table-column type="selection" width="50" />
                                <el-table-column type="index" prop="num" label="序号" width="80" />
                                <el-table-column prop="key1" label="档号" width="180" />
                                <el-table-column prop="key2" label="案卷题名" />
                                <el-table-column prop="key3" label="总页数" width="120" />
                                <el-table-column prop="key4" label="保管期限" width="120" />
                                <el-table-column prop="key5" label="备注" />
                            </el-table>
                        </div>
                        <div class="hc-table-title text-lg font-bold">二、勘察设计文件（95卷）</div>
                        <div class="hc-table-ref-box">
                            <el-table ref="tableRef" hc :data="tableData" stripe row-key="id" :border="false" style="width: 100%;" @selection-change="tableSelectionChange">
                                <el-table-column type="selection" width="50" />
                                <el-table-column type="index" prop="num" label="序号" width="80" />
                                <el-table-column prop="key1" label="档号" width="180" />
                                <el-table-column prop="key2" label="案卷题名" />
                                <el-table-column prop="key3" label="总页数" width="120" />
                                <el-table-column prop="key4" label="保管期限" width="120" />
                                <el-table-column prop="key5" label="备注" />
                            </el-table>
                        </div>
                    </el-scrollbar>
                </div>
                <div class="hc-action-box">
                    <el-button type="primary" hc-btn @click="stepsKeysClick(3)">下一步</el-button>
                    <el-button hc-btn>取消</el-button>
                </div>
            </div>

            <div v-if="stepsKey === 2 && stepsKeys === 3" class="hc-body-box is-action">
                <div class="hc-content-box">
                    <div class="is-xml-data flex">
                        <div class="mr-6 flex-1">
                            <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception" />
                        </div>
                        <el-button type="primary" round>封装XML信息包</el-button>
                    </div>
                    <div class="mt-5 text-center text-dark-5">系统封装信息中........</div>
                </div>
                <div class="hc-action-box">
                    <el-button type="primary" hc-btn @click="stepClick(3)">下一步</el-button>
                    <el-button hc-btn>取消</el-button>
                </div>
            </div>

            <div v-if="stepsKey === 3" class="hc-body-center-box">
                <div class="hc-content-box">
                    <img :src="seal" alt="">
                    <div class="mt-5">
                        <el-button type="warning" hc-btn style="width: 196px;height: 46px;font-weight: bold;background-color: #FF7D43;">审批中</el-button>
                    </div>
                    <div class="hc-steps-view1 mt-5">
                        <el-steps :active="2" align-center>
                            <el-step>
                                <template #title>档案管理员</template>
                                <template #description>
                                    <div>2025 04.10 17:24:59</div>
                                    <div class="sign-name">上报</div>
                                </template>
                            </el-step>
                            <el-step>
                                <template #title>部门领导</template>
                                <template #description>
                                    <div>2025 04.10 17:24:59</div>
                                    <div class="sign-name">同意</div>
                                </template>
                            </el-step>
                            <el-step>
                                <template #title>分管领导</template>
                                <template #description>
                                    <div>2025 04.10 17:24:59</div>
                                    <div class="sign-name">待审批</div>
                                </template>
                            </el-step>
                        </el-steps>
                    </div>
                </div>
            </div>
        </hc-new-card>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '~src/store'
import bgColor from '~src/assets/hande-over/checkbox.png'
import seal from '~src/assets/hande-over/seal.svg'
import moveSubmit from './move-submit.vue'
//变量
const router = useRouter()
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId)
const contractId = ref(useAppState.getContractId)

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

})

//步骤条
const stepsKey = ref(0)
const stepClick = (index) => {
    stepsKey.value = index
    stepsKeys.value = 1
}

const stepsKeys = ref(1)
const stepsKeysClick = (val) => {
    stepsKeys.value = val
}

const isCustodyTest = ref(false)
//去申请验收
const toTransferInitial = () => {
    router.push({
        name: 'transfer-initial',
    })
}
//去四性检测
const custodyTesting = () => {
    router.push({
        name: 'custody-testing',
    })
}


//提交验收报告




const checked2 = ref(false)
//tab数据和相关处理
const tabKey = ref('tab1')
const tabData = ref([
    { key:'tab1', name: '建设单位归档资料' },
    { key:'tab2', name: '监理单位归档资料' },
    { key:'tab3', name: '施工单位归档资料' },
    { key:'tab4', name: '科研、新技术资料' },
])
const tabChange = (item) => {
    tabKey.value = item?.key
}

const tableData = ref([
    {
        id: 1,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '永久',
        key5: '备注信息',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '永久',
        key5: '备注信息',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '永久',
        key5: '备注信息',
    },
])

//多选
const tableSelectionChange = (rows) => {
    let tableRows = rows.filter((item) => {
        return (item ?? '') !== ''
    })
    console.log(tableRows)
}
//点击进入移交登记
const moveClick = () => {
    console.log('移交登记')
    isShowMoveSubmit.value = true
    
}
const isShowMoveSubmit = ref(false)
const stepsData = ref([
    
])
</script>

<style lang="scss" scoped>
.hc-steps-view {
    position: relative;
    padding-bottom: 14px;
    // margin-bottom: 24px;
    border-bottom: 1px solid #e9e9e9;
}
.hc-content-box-submit{
    height: calc(100% - 105px);
}
.hc-body-center-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 105px);
    .hc-content-box {
        position: relative;
        text-align: center;
    }
    .form-apply {
        width: 500px;
    }
    .hc-action-box {
        position: absolute;
        bottom: -90px;
        width: 100%;
        padding-top: 24px;
        margin-top: 24px;
        text-align: right;
        border-top: 1px solid #e9e9e9;
    }
    &.is-action {
        height: calc(100% - 190px);
    }
}

.hc-body-box {
    position: relative;
    height: calc(100% - 105px);
    .hc-header-box {
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        height: 40px;
        .header {
            position: relative;
            flex: 1;
        }
        .extra {
            position: relative;
        }
    }
    .hc-content-box {
        height: calc(100% - 105px);
        &.hc-table-content-box {
            .hc-table-header {
                background: #4C5BCF;
                color: white;
                text-align: center;
                padding: 10px 0;
            }
            .hc-table-title {
                background: #C9CDF1;
                color: white;
                padding: 10px;
            }
        }
    }
    .hc-action-box {
        position: relative;
        width: 100%;
        padding-top: 24px;
        margin-top: 24px;
        text-align: right;
        border-top: 1px solid #e9e9e9;
    }
    .jc-btn{
        width: 268px;
        height: 68px;
    }
}
.hc-body-box.is-action .hc-content-box {
    height: calc(100% - 90px);
}
.hc-body-box.is-header.is-action .hc-content-box {
    height: calc(100% - 150px);
}
</style>

<style lang="scss">
.hc-steps-view .el-steps {
    .el-step.is-horizontal .el-step__line {
        height: 4px;
        top: 14px;
    }
    .el-step__line-inner {
        border-width: 2px !important;
    }
    .el-step__icon {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    .el-step__icon.is-text {
        border: 3px solid;
    }
    .el-step__head.is-finish {
        color: #1ECC95;
        border-color: #1ECC95;
    }
    .el-step__title.is-finish {
        color: #1ECC95;
    }
}
.is-xml-data {
    position: relative;
    padding-top: 140px;
    .el-progress-bar__outer {
        height: 45px !important;
        --el-border-color-lighter: #d9d9d9;
    }
    .el-progress-bar__inner {
        text-align: center;
        border-radius: 0;
    }
    .el-progress-bar__innerText {
        font-size: 16px;
    }
    .el-button {
        height: 45px;
    }
    .el-button.is-round {
        padding: 8px 25px;
        border-radius: 50px;
    }
}

.hc-steps-view1 .el-steps {
    .el-step__head.is-finish {
        color: #1ECC95;
        border-color: #1ECC95;
    }
    .el-step__title.is-finish {
        color: #1ECC95;
    }
    .el-step__description {
        white-space: nowrap;
        padding: 0 20px;
        margin-top: 5px;
    }
    .el-step {
        flex-basis: auto;
        min-width: 200px;
    }
}
</style>