admin/src/views/project/list.vue

<template>
    <hc-card v-loading="tableLoading" id-ref="hc-project-list" div-p="12px" body-ui="hc-project-list" scrollbar>
        <template #header>
            <div class="w-300px">
                <el-select v-model="projectId" filterable clearable block placeholder="选择项目" @change="projectClick">
                    <el-option v-for="item in projectData" :key="item.id" :label="item.projectAlias" :value="item.id" />
                </el-select>
            </div>
        </template>
        <template #extra>
            <el-button hc-btn type="primary" @click="addProjectClick">创建项目</el-button>
        </template>
        <div class="hc-project-list-row">
            <template v-for="item in tableData" :key="item.id">
                <hc-card-item class="hc-project-list-card" @click="projectClick(item.id)">
                    <div class="card-content hc-flex">
                        <div class="name-avatar hc-flex-center h-60px w-60px">{{ item.projectName.substring(0, 1) }}</div>
                        <div class="name-content flex-1">
                            <div class="alias">{{ item.projectAlias }}</div>
                            <div class="name">{{ item.projectName }}</div>
                        </div>
                    </div>
                    <div class="footer">
                        <div class="id">{{ item.id }}</div>
                        <div class="time">{{ item.updateTime }}</div>
                    </div>
                </hc-card-item>
            </template>
        </div>
        <template #action>
            <hc-pages :pages="searchForm" @change="pageChange" />
        </template>

        <!-- 查看项目信息 -->
        <InfoDialog v-model="isProjectInfoDialog" :ids="projectInfoId" @change="projectInfoChange" @check="projectInfoCheck" @close="projectInfoClose" />

        <!-- wbs树管理 -->
        <HcWbsTree v-model="isWbsTreeDrawer" :type="wbsTreeType" :info="wbsTreeInfo" @change="wbsTreeChange" @close="wbsTreeClose" />

        <!-- 创建或编辑项目信息 -->
        <HcInfoDetail v-model="isProjectDrawer" :data="projectItem" />
    </hc-card>
</template>

<script setup>
import { nextTick, onActivated, onDeactivated, ref } from 'vue'
import { getArrValue, getObjValue } from 'js-fast-way'
import InfoDialog from './list/info-dialog.vue'
import HcWbsTree from './list/wbs-tree.vue'
import HcInfoDetail from './info/detail.vue'
import mainApi from '~api/project/project'

defineOptions({
    name: 'ProjectList',
})

//激活
onActivated(() => {
    getDataApi()
})

const getDataApi = async () => {
    await getProjectData()
    searchClick()
}

//项目列表
const projectData = ref([])
const projectId = ref('')
const getProjectData = async () => {
    const { data } = await mainApi.page({
        current: 1,
        size: 999,
    })
    projectData.value = getArrValue(data?.records)
}

//搜索条件
const searchForm = ref({ current: 1, size: 20, total: 0 })

//搜索
const searchClick = () => {
    searchForm.value.current = 1
    getTableData()
}

//分页
const pageChange = ({ current, size }) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//项目数据
const tableData = ref([])
//获取表格数据
const tableLoading = ref(true)
const getTableData = async () => {
    tableData.value = []
    tableLoading.value = true
    const { data } = await mainApi.page({
        ...searchForm.value,
        total: null,
    })
    tableLoading.value = false
    tableData.value = getArrValue(data?.records)
    searchForm.value.total = data?.total
}

//查看项目信息
const isProjectInfoDialog = ref(false)
const projectInfoId = ref('')

//项目被选择
const projectClick = (id) => {
    projectInfoId.value = id
    nextTick(() => {
        isProjectInfoDialog.value = true
    })
}
const projectInfoChange = () => {
    searchClick()
}
//关闭项目信息
const projectInfoClose = () => {
    projectInfoId.value = ''
    isProjectInfoDialog.value = false
}

//wbs树管理
const isWbsTreeDrawer = ref(false)
const wbsTreeType = ref('')
const wbsTreeInfo = ref({})
const wbsTreeChange = () => {
    searchClick()
}
//关闭wbs树关联
const wbsTreeClose = () => {
    isWbsTreeDrawer.value = false
    wbsTreeType.value = ''
    wbsTreeInfo.value = {}
}

//功能事件回调
const projectInfoCheck = ({ type, info, item }) => {
    //measure, lar, test, wbsTree, logTree, editProject, addContract, editContract, wbsContract
    //计量管理，征拆划分，实验划分，WBS树管理，日志树管理，编辑项目，创建合同段，编辑合同段信息，分配WBS
    const wbsArr = ['wbsTree', 'test', 'measure', 'logTree', 'lar']
    const index = wbsArr.indexOf(type)
    if (index !== -1) {
        wbsTreeInfo.value = getObjValue(info)
        wbsTreeType.value = (index + 1) + ''
        isWbsTreeDrawer.value = true
    } else if (type === 'editProject') {
        projectItem.value = getObjValue(info)
        nextTick(() => {
            isProjectDrawer.value = true
        })
    } else if (type === 'addContract') {
        console.log('创建合同段')
    } else if (type === 'editContract') {
        console.log('创建合同段')
    } else if (type === 'wbsContract') {
        console.log('分配WBS')
    }
    //console.log(type, info, item)
}

//创建项目或修改项目
const isProjectDrawer = ref(false)
const projectItem = ref({})

//创建项目
const addProjectClick = () => {
    projectItem.value = {}
    nextTick(() => {
        isProjectDrawer.value = true
    })
}

//离开了当前页面
onDeactivated(() => {
    isWbsTreeDrawer.value = false
})
</script>

<style lang="scss">
@import '~src/styles/view/project/list';
</style>