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

<template>
    <div id="submit-report-layout-target" class="hc-page-box write-report">
        <hc-new-card>
            <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 v-if="state === 2" hc-btn type="primary" @click="onSubmitReportClick">查看验收意见</el-button>
                <el-button v-if="state === 2" hc-btn type="primary">撤回提交</el-button>
                <el-button v-if="state === 1" hc-btn type="primary" @click="submissionClick">确认提交</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 :key="dataKey" :src="docxUrl" title="测试的文档.docx" :url="saveUrl" :project-id="projectId" :token="token" :user-info="userInfo" />
        </hc-new-card>

        <!-- 短信认证 -->
        <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 { onMounted, ref } from 'vue'
import { useAppStore } from '~src/store'
import { useRouter } from 'vue-router'
import initialgApi from '~api/initial/initial'
import { getToken } from '~src/api/util/auth'

//变量
const router = useRouter()
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId)
const contractId = ref(useAppState.getContractId)
const projectInfo = ref(useAppState.getProjectInfo)
const userInfo = ref(useAppState.getUserInfo)
const token = ref( getToken())

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

})

const state = ref(1)
const docxUrl = ref('')
const saveUrl = ref('http://192.168.0.128:8090/blade-archive/archivesauto/callbackSave' + '&Blade-Auth=' + token.value + '&' + 'projectId=' + projectId.value)
const dataKey = ref('')
//const docxUrl = ref('https://bladex-test-info.oss-cn-chengdu.aliyuncs.com//upload/20230317/e2bdc6581e397b810b46ac7cd71b111b.docx')
//获取文档地址
const geDocxUrl = async ()=>{
    const { error, code, data } = await initialgApi.getArchiveConclusion({
        projectId: projectId.value,
    })
    if (!error && code === 200) {
        docxUrl.value = data['worldUrl']
        dataKey.value = data['id'] + '_' + Math.random() + ''
    } else {
        docxUrl.value = ''
    }
}
//确认提交
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>