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 relative h-full">
            <hc-tab-card :scrollbar="tabsKey === '1'" :tabs="tabsData" :tab-key="tabsKey" is-action-btn @change="tabsChange">
                111111
            </hc-tab-card>
        </div>
    </hc-drawer>
</template>

<script setup>
import { ref, watch } from 'vue'
import mainApi from '~api/project/project'
import { getObjValue, isNullES } from 'js-fast-way'
import { getDictionaryData } from '~uti/tools'

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

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

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

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

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

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

//获取合同类型
const contractTypeList = ref([])
const getContractTypeList = async () => {
    contractTypeList.value = await getDictionaryData('contract_type')
}


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

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

<style lang="scss">
.hc-contract-info-drawer {

}
</style>