admin/src/views/project/detail/detail.vue

<template>
    <hc-drawer v-model="isShow" to-id="hc-project-list" is-close @close="drawerClose">
        <div class="hc-contract-info-drawer h-full">
            <hc-tab-card :scrollbar="tabsKey === '1'" :tabs="tabsData" :tab-key="tabsKey" is-action-btn @change="tabsChange">
                <HcInfo v-if="tabsKey === '1'" :data="dataInfo" @close="drawerClose" @next="dataInfoNext" />
            </hc-tab-card>
        </div>
    </hc-drawer>
</template>

<script setup>
import { ref, watch } from 'vue'
import { getObjValue, isNullES } from 'js-fast-way'
import HcInfo from './info.vue'

const props = defineProps({
    data: {
        type: Object,
        default: () => ({}),
    },
})

//事件
const emit = defineEmits(['close'])

//双向绑定
const isShow = defineModel('modelValue', {
    default: false,
})

//监听数据
const dataInfo = ref({})
watch(() => props.data, (data) => {
    dataInfo.value = getObjValue(data)
}, { immediate: true, deep: true })

//监听显示
watch(isShow, (val) => {
    if (val) getDataApi()
})

//处理相关数据
const tabsKey = ref('1')
const tabsData = ref([])
const getDataApi = async () => {
    const { cid, tab } = getObjValue(dataInfo.value)
    if (isNullES(cid)) {
        tabsData.value = [{ key: '1', name: '合同段信息' }]
    } else {
        tabsData.value = [{ key: '1', name: '合同段信息' }, { key: '2', name: '分配WBS' }, { key: '3', name: '分配项目人员' }]
    }
    if (!isNullES(tab)) {
        tabsKey.value = tab
    }
}

//选项卡
const tabsChange = ({ key }) => {
    tabsKey.value = key
}

//下一步
const dataInfoNext = async (data) => {
    dataInfo.value = data
    await getDataApi()
    tabsKey.value = '2'
}

//关闭抽屉
const drawerClose = () => {
    isShow.value = false
    tabsKey.value = '1'
    emit('close')
}
</script>

<style lang="scss">
.hc-contract-info-drawer {
    position: relative;
}
</style>