admin/src/views/project/list/info-dialog.vue

<template>
    <hc-dialog v-model="isShow" ui="hc-project-info-dialog-box" widths="64rem" is-table title="项目信息" :footer="false" :padding="false" @close="dialogClose">
        <el-container class="hc-project-info-dialog">
            <el-header>
                <div class="left">
                    <el-button hc-btn color="#626aef" style="color: white" @click="toCheck('measure')">计量管理</el-button>
                    <el-button hc-btn color="#e233fb" style="color: white" @click="toCheck('lar')">征拆划分</el-button>
                    <el-button hc-btn color="#ac54ff" style="color: white" @click="toCheck('test')">实验划分</el-button>
                    <el-button hc-btn type="success" style="color: white" @click="toCheck('wbsTree')">WBS树管理</el-button>
                    <el-button hc-btn color="#2bbeed" style="color: white" @click="toCheck('logTree')">日志树管理</el-button>
                </div>
                <div class="right">
                    <el-button hc-btn type="warning" @click="toCheck('editProject')">编辑项目</el-button>
                    <el-button hc-btn type="primary" @click="toCheck('addContract')">创建合同段</el-button>
                    <el-button v-del-com:[delProject] hc-btn type="danger">删除项目</el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside width="300px">
                    <hc-body scrollbar padding="0px">
                        <hc-list-item title="项目ID：" :content="projectInfo.id" />
                        <hc-list-item title="项目简称：" :content="projectInfo.projectAlias" />
                        <hc-list-item title="项目全名：" :content="projectInfo.projectName" />
                        <hc-list-item title="创建时间：" :content="projectInfo.createTime" />
                        <hc-list-item title="更新时间：" :content="projectInfo.updateTime" />
                    </hc-body>
                </el-aside>
                <el-main>
                    <hc-body :scrollbar="contractList.length > 0" padding="0px">
                        <hc-empty v-if="contractList.length <= 0" />
                        <hc-card-item v-for="item in contractList" v-else :key="item.id" class="hc-contract-list-card">
                            <div class="contract-type">
                                <div v-if="item.contractType === 1" class="name bg-1">施工</div>
                                <div v-if="item.contractType === 2" class="name bg-2">监理</div>
                                <div v-if="item.contractType === 3" class="name bg-3">业主</div>
                            </div>
                            <div class="contract-content">
                                <div class="name">{{ item.contractName }}</div>
                                <div class="footer">
                                    <div class="time">{{ item.updateTime }}</div>
                                    <div class="action">
                                        <el-link type="warning" @click="toCheck('editContract', item)">编辑合同段信息</el-link>
                                        <el-link v-if="item.contractType === 1" type="success" @click="toCheck('wbsContract', item)">分配WBS</el-link>
                                        <el-link v-del-com:[delContract]="item" type="danger">删除</el-link>
                                    </div>
                                </div>
                            </div>
                        </hc-card-item>
                    </hc-body>
                </el-main>
            </el-container>
        </el-container>
    </hc-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { deepClone, getArrValue, getObjValue, isNullES } from 'js-fast-way'
import mainApi from '~api/project/project'
import contractApi from '~api/project/contract'

const props = defineProps({
    ids: {
        type: [String, Number],
        default: '',
    },
})

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

//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel('modelValue', {
    default: false,
})

//监听数据
const projectId = ref(props.ids)
watch(() => props.ids, (id) => {
    projectId.value = id
}, { deep: true })

//监听显示
watch(isShow, (val) => {
    if (val) {
        getProjectInfo()
    } else {
        projectInfo.value = {}
        projectId.value = ''
        emit('close')
    }
})

//获取项目信息
const projectInfo = ref({})
const getProjectInfo = async () => {
    if (isNullES(projectId.value)) return
    const { data } = await mainApi.detail(projectId.value)
    projectInfo.value = getObjValue(data)
    await getContractList(projectId.value)
}

//获取合同段信息
const contractList = ref([])
const getContractList = async (id) => {
    if (isNullES(id)) return
    const { data } = await contractApi.getList(id)
    contractList.value = getArrValue(data)
}

//关闭弹窗
const dialogClose = () => {
    projectInfo.value = {}
    isShow.value = false
    emit('close')
}

//删除项目
const delProject = async (_, resolve) => {
    if (isNullES(projectId.value)) return
    const { isRes } = await mainApi.del(projectId.value)
    resolve() //关闭弹窗
    if (!isRes) return
    window.$message.success('删除成功')
    dialogClose()
    emit('change')
}

//删除合同段
const delContract = async ({ item }, resolve) => {
    const { isRes } = await contractApi.del(item.id)
    resolve() //关闭弹窗
    if (!isRes) return
    window.$message.success('删除成功')
    getContractList(projectId.value).then()
}

//功能事件回调
const toCheck = (type, item = {}) => {
    //measure, lar, test, wbsTree, logTree, editProject, addContract, editContract, wbsContract
    //计量管理，征拆划分，实验划分，WBS树管理，日志树管理，编辑项目，创建合同段，编辑合同段信息，分配WBS
    const info = deepClone(projectInfo.value)
    dialogClose()
    emit('check', { type, info, item })
}
</script>

<style lang="scss">
.el-container.hc-project-info-dialog {
    position: relative;
    height: 100%;
    .el-header {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        --el-header-padding: 0;
        --el-header-height: 50px;
        border-bottom: 1px solid #f4f4f4;
    }
    .el-aside, .el-main {
        position: relative;
        --el-main-padding: 0;
        .hc-new-main-body {
            top: 10px;
        }
    }
    .el-aside {
        border-right: 1px solid #f4f4f4;
        .hc-new-main-body {
            right: 10px;
        }
    }
    .el-main .hc-new-main-body {
        left: 10px;
    }
    .hc-list-item .title {
        width: 70px;
    }
    .hc-list-item .content {
        flex: 1;
    }
    .hc-contract-list-card {
        border-radius: 4px;
        margin-bottom: 14px;
        cursor: pointer;
        padding: 8px 14px;
        background: #f3f3f3 !important;
        transition: all 0.3s;
        .hc-card-item-body {
            display: flex;
            align-items: center;
        }
        .contract-type {
            position: relative;
            margin-right: 14px;
            .name {
                position: relative;
                height: 43px;
                width: 43px;
                border-radius: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
            }
            .name.bg-1 {
                background-color: #2a9b79;
            }
            .name.bg-2 {
                background-color: #9b6c2a;
            }
            .name.bg-3 {
                background-color: #2a359b;
            }
        }
        .contract-content {
            position: relative;
            flex: 1;
            .name {
                color: #101010;
                font-weight: bold;
            }
            .footer {
                margin-top: 10px;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .time {
                    color: #747474;
                    font-size: 14px;
                }
                .el-link  + .el-link{
                    margin-left: 10px;
                }
            }
        }
        &:hover {
            box-shadow: 2px 2px var(--el-color-primary-light-7);
        }
    }
}
.el-overlay-dialog .el-dialog.hc-new-dialog.hc-project-info-dialog-box {
    height: 500px;
    max-height: 500px;
    --el-dialog-margin-top: 15vh;
}
</style>