hac/src/views/project/contract/form.vue

<template>
    <HcTabsSimple :cur="tabsKey" :datas="tabsData" @tabClick="tabsClick">
        <template #tab-base>
            <baseTabCard :datas="infoData" :disabled="dataType === 'view'" v-if="tabsKey === 'base'"/>
        </template>
        <template #tab-file>
            <fileTabCard :datas="infoData" :disabled="dataType === 'view'" v-if="tabsKey === 'file'"/>
        </template>
        <template #tab-milestone>
            <milestoneTab :datas="infoData" :disabled="dataType === 'view'" v-if="tabsKey === 'milestone'"/>
        </template>
        <template #tab-record>
            <recordTabCard :datas="infoData" v-if="tabsKey === 'record'"/>
        </template>
    </HcTabsSimple>
</template>

<script setup>
import {onActivated, ref} from "vue";
import {useRouter, useRoute} from 'vue-router'
import baseTabCard from "./components/base.vue";
import fileTabCard from "./components/file.vue";
import milestoneTab from "./components/milestone.vue";
import recordTabCard from "./components/record.vue";
import {arrIndex} from "js-fast-way";

//初始变量
const router = useRouter()
const useRoutes = useRoute()
const dataId = ref(useRoutes?.query?.id ?? '')
const dataType = ref(useRoutes?.query?.type ?? '')

//缓存页面被激活时
onActivated(() => {
    dataId.value = useRoutes?.query?.id ?? ''
    dataType.value = useRoutes?.query?.type ?? ''
    setTabsData()
})

//设置选项卡数据
const setTabsData = () => {
    const index = arrIndex(tabsData.value, 'key', 'record')
    if (dataType.value === 'view') {
        //预览模式下，索引不存在，就添加此选项
        if (index === -1)  {
            tabsData.value.push({
                icon: 'file-history',
                label: '合同开票记录',
                key: 'record'
            })
        }
    } else {
        //编辑模式下，索引存在，就删除此选项
        if (index !== -1) {
            tabsData.value.splice(index, 1)
        }
    }
}

//选项卡
const tabsKey = ref('base')
const tabsData = ref([
    {icon: 'file-list-3', label: '合同基础信息', key: 'base'},
    {icon: 'file-word', label: '合同附件', key: 'file'},
    {icon: 'creative-commons-sa', label: '合同回款里程碑', key: 'milestone'},
])
const tabsClick = (key) => {
    tabsKey.value = key
}

const infoData = ref({})
const isNoDropShadow = ref(false)


</script>