hac/src/views/project/contract/components/file.vue

<template>
    <HcCard actionUi="text-center">
        <div class="hc-tabs-simple-extra-btn" v-if="infoData.pdfUrl && !isDisabled">
            <el-button size="large" type="primary" hc-btn @click="reuploadClick">
                <HcIcon name="upload-cloud-2"/>
                <span>点击重新上传</span>
            </el-button>
        </div>

        <div class="hc-project-contract-form-file">
            <div class="hc-form-file-pdf" v-show="infoData.pdfUrl">
                <HcPdf :src="infoData.pdfUrl"/>
            </div>
            <div class="hc-form-file-upload" v-show="!infoData.pdfUrl">
                <HcUploadFile ref="HcUploadFileRef" :options="UploadFileOptions" @success="HcUploadFileSuccess" drop v-if="!isDisabled">
                    <div class="accept-tip">支持的文件格式：图片(png、jpg、jpeg)、 Excel(xls、xlsx) PDF 、Word(doc、docx)</div>
                </HcUploadFile>
                <HcStatus text="未上传相关附件文件" v-else/>
            </div>
        </div>

        <template #action>
            <el-button size="large" type="info" hc-btn @click="goBackClick">
                <HcIcon name="arrow-go-back"/>
                <span v-if="isDisabled">返回上一级</span>
                <span v-else>取消并返回</span>
            </el-button>
            <el-button size="large" type="primary" hc-btn @click="saveClick" v-if="!isDisabled" :loading="saveLoaingVal">
                <HcIcon name="check-double"/>
                <span>提交保存</span>
            </el-button>
        </template>
    </HcCard>
</template>

<script setup>
import {ref, watch} from "vue";
import {useRouter} from 'vue-router'
import {getObjValue} from "js-fast-way";
import {getTokenHeader} from "~src/api/request/header";

const router = useRouter()

//参数
const props = defineProps({
    datas: {
        type: Object,
        default: () => ({})
    },
    disabled: {
        type: Boolean,
        default: false
    },
    saveLoaing:{
        type: Boolean,
        default: false
    }
})

const infoData = ref(props.datas)
const isDisabled = ref(props.disabled)
const saveLoaingVal=ref(props.saveLoaing)

//深度监听
watch(() => [
    props.datas,
    infoData
], ([datas,infoData]) => {
    infoData.value = datas
    emit('update:datas', infoData)
}, {deep: true})

//监听
watch(() => [
    props.disabled,
    props.saveLoaing,
], ([disabled,saveLoaing]) => {
    isDisabled.value = disabled
    saveLoaingVal.value=saveLoaing
})

//上传配置
const HcUploadFileRef = ref(null)
const UploadFileOptions = {
    headers: getTokenHeader(), //此处设置header
}

// 文件上传成功的回调
const HcUploadFileSuccess = (res) => {
    const { pdfUrl } = getObjValue(res.resData)
    infoData.value.pdfUrl = pdfUrl
    HcUploadFileRef.value?.setModalShow(false);
}

//重新上传
const reuploadClick = () => {
    HcUploadFileRef.value?.selectFile()
}

//返回
const goBackClick = () => {
    router.back()
}

const emit= defineEmits(['saveClick',"update:datas"])
//提交保存
const saveClick = () => {
    console.log(infoData.value,'infoData');
    emit('saveClick')
    

}
</script>

<style scoped lang="scss">
@import "~src/styles/project/contract/form.scoped.scss";
</style>

<style lang="scss">
@import "~src/styles/project/contract/form.scss";
</style>