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>