archives/src/views/transfer/write-report.vue

<template>
    <div class="hc-page-box write-report" id="submit-report-layout-target">
        <HcCard>
            <template #header>
                <div class="hc-conclusion-header-box">
                    <div class="hc-conclusion-icon-box">
                        <HcIcon name="file-ppt-2" fill/>
                    </div>
                    <div class="ml-2 conclusion-name-box">
                        <span class="text-xl text-cut conclusion-alias">编写结论、提交报告</span>
                        <div class="text-xs text-cut conclusion-name">{{projectInfo['name']}}</div>
                    </div>
                </div>
            </template>
            <template #extra>
                <el-button hc-btn type="primary" @click="onSubmitReportClick" v-if="state === 2">查看验收意见</el-button>
                <el-button hc-btn type="primary" v-if="state === 2">撤回提交</el-button>
                <el-button hc-btn type="primary" @click="submissionClick" v-if="state === 1">确认提交</el-button>
                <el-button hc-btn type="primary">暂存草稿</el-button>
                <el-button hc-btn @click="previousStep">上一步</el-button>
                <el-button hc-btn @click="toBackClick">返回主页</el-button>
            </template>

            <HcOnlineOffice :src="docxUrl" title="测试的文档.docx"/>
        </HcCard>

        <!--短信认证-->
        <HcSmsAuth :loading="SMSAuthLoading" :show="SMSAuthShow" @cancel="SMSAuthCancel" @confirm="SMSAuthConfirm"/>

        <!--历史报告-->
        <HcDrawer :show="isSubmitReportDrawer" to-id="submit-report-layout-target" uis="hc-submit-report-target"
                  @close="onSubmitReportDrawerClose">
            <template #header>
                <div class="hc-select-view w-52">
                    <el-select v-model="pdfDate" placeholder="选择日期">
                        <el-option label="2022年12月24日" value="2022年12月24日"/>
                        <el-option label="2022年12月25日" value="2022年12月25日"/>
                        <el-option label="2022年12月26日" value="2022年12月26日"/>
                        <el-option label="2022年12月27日" value="2022年12月27日"/>
                    </el-select>
                </div>
                <div class="hc-title-view">试验资料（含工地试验室资质证书、仪器标定证书等）</div>
                <div class="hc-icon-view text-hover" @click="onSubmitReportDrawerClose">
                    <HcIcon name="close"/>
                </div>
            </template>
            <HcPdf
                src="https://bladex-test-info.oss-cn-chengdu.aliyuncs.com//upload/20221212/ce9799c7d18efc03efefd6f242439f2e.pdf"/>
        </HcDrawer>

    </div>
</template>

<script setup>
import {ref, onMounted} from "vue";
import {useAppStore} from "~src/store";
import {useRouter} from "vue-router";

//变量
const router = useRouter()
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const projectInfo = ref(useAppState.getProjectInfo);

//渲染完成
onMounted(() => {
    setTimeout(() => {
        docxUrl.value = 'http://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com/upload/20230317/e2bdc6581e397b810b46ac7cd71b111b.docx'
    }, 1000)
})

const state = ref(1);
const docxUrl = ref('')
//const docxUrl = ref('https://bladex-test-info.oss-cn-chengdu.aliyuncs.com//upload/20230317/e2bdc6581e397b810b46ac7cd71b111b.docx')

//确认提交
const submissionClick = () => {
    SMSAuthShow.value = true
}

//短信验证
const SMSAuthLoading = ref(false)
const SMSAuthShow = ref(false)
const SMSAuthConfirm = () => {
    SMSAuthShow.value = false
    state.value = 2
}
const SMSAuthCancel = () => {
    SMSAuthShow.value = false
}

//上一步
const previousStep = () => {
    router.back()
}

//返回主页
const toBackClick = () => {
    router.push({
        name: 'transfer-initial-expert'
    })
}

//历史报告
const isSubmitReportDrawer = ref(false)
const onSubmitReportClick = () => {
    isSubmitReportDrawer.value = true
}
const pdfDate = ref(null)

//历史报告
const onSubmitReportDrawerClose = () => {
    isSubmitReportDrawer.value = false
}

</script>

<style lang="scss" scoped>
@import '~style/transfer/scoped/submit-report.scss';
.hc-conclusion-header-box {
    position: relative;
    display: flex;
    align-items: flex-start;
    .hc-conclusion-icon-box {
        font-size: 28px;
        color: var(--el-color-primary);
    }
    .conclusion-name-box {
        flex: auto;
        position: relative;
        overflow: hidden;
        .conclusion-alias {
            color: var(--el-color-primary);
        }
        .conclusion-name {
            margin-top: 4px;
            color: #838791;
        }
    }
}
</style>

<style lang="scss">
@import '~style/transfer/submit-report.scss';
</style>