inncom_list/src/views/Home.vue

<template>
    <el-container>
        <el-header>
            <div class="middle-menu">项目管理</div>
            <div class="right-menu">
                <el-button type="danger" @click="logout">退出</el-button>
            </div>
        </el-header>
        <el-main>
            <el-card class="home-div">
                <el-card class="card-div">
                    <el-button class="button_plus" :icon="Plus" circle size="large" @click="open_project" />
                </el-card>
                <el-card class="card-div" v-for="(item, index) in projects" :key="index">
                    <p class="project-title">{{ item.name }}</p>
                    <p>{{ item.description }}</p>
                    <el-button type="primary"
                        @click="router.push({ name: 'room', query: { project_name: item.name } })">管理</el-button>
                    <el-button type="success" @click="openUpdateDialog(item)">编辑</el-button>
                    <el-button type="danger" @click="openRemove(item)">删除</el-button>
                </el-card>
            </el-card>
        </el-main>
    </el-container>

    <el-dialog v-model="add_project_info.enable" title="新增项目" width="500" center>
        <el-form :model="add_project_info">
            <el-form-item label="项目名称">
                <el-input v-model="add_project_info.name" />
            </el-form-item>
            <el-form-item label="项目描述">
                <el-input v-model="add_project_info.description" type="textarea" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="add_project_info.enable = false">取消</el-button>
                <el-button type="primary" @click="add_project">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="update_project_info.enable" title="修改项目" width="500" center>
        <el-form :model="update_project_info">
            <el-form-item label="项目名称">
                <el-input v-model="update_project_info.name" disabled />
            </el-form-item>
            <el-form-item label="项目名称">
                <el-input v-model="update_project_info.new_name" />
            </el-form-item>
            <el-form-item label="项目描述">
                <el-input v-model="update_project_info.description" type="textarea" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="update_project_info.enable = false">取消</el-button>
                <el-button type="primary" @click="update_project">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { Plus, SwitchButton } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {myApi} from "@/api/myApi.js";
import { useRouter } from 'vue-router'
import { localRemove } from '@/utils';
const router = useRouter()

const logout = () => {
    localRemove("name");
    localRemove("token");
    router.push('login');
}

const projects = ref([]);

const open_project = () => {
    add_project_info.name = '';
    add_project_info.description = '';
    add_project_info.enable = true;

}
const get_projects = async () => {
    const param = {
        action: 100,
    }
    const res = await myApi.getProjects(param);
    if (res.code === 0) {
        projects.value = res.data;
    } else {
        ElMessage({
            message: res.message,
            type: "warning",
        });
    }
}

const openUpdateDialog = (item) => {
    update_project_info.name = item.name;
    update_project_info.new_name = item.name;
    update_project_info.description = item.description;
    update_project_info.enable = true;
}

const add_project_info = reactive({
    enable: false,
    name: "",
    description: "",
});

const add_project = async () => {
    const param = {
        action: 101,
        data: add_project_info,
    }
    const res = await myApi.getProjects(param);
    if (res.code === 0) {
        ElMessage({
            message: "新增成功",
            type: "success",
        });
        get_projects();
        add_project_info.enable = false;
    } else {
        ElMessage({
            message: res.message + '[' + res.data + ']',
            type: "warning",
        });
    }
}

const update_project_info = reactive({
    enable: false,
    name: "",
    new_name: "",
    description: "",
});

const update_project = async () => {
    const param = {
        action: 102,
        data: update_project_info,
    }
    const res = await myApi.getProjects(param);
    console.log(res);
    if (res.code === 0) {
        ElMessage({
            message: "更新成功",
            type: "success",
        });
        get_projects();
        update_project_info.enable = false;
    } else {
        ElMessage({
            message: res.message + '[' + res.data + ']',
            type: "warning",
        });
    }
}

const openRemove = (item) => {
    ElMessageBox.confirm(
        '确定删除项目?',
        '删除项目',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            remove_project(item);
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}

const remove_project = async (project) => {
    const param = {
        action: 103,
        data: {
            name: project.name
        },
    }
    const res = await myApi.getProjects(param);
    if (res.code === 0) {
        ElMessage({
            message: "删除成功",
            type: "success",
        });
        get_projects();
    } else {
        ElMessage({
            message: res.message + '[' + res.data + ']',
            type: "warning",
        });
    }
};

onMounted(() => {
    get_projects();
});
</script>
<style lang="scss" scoped>
.home-div {
    height: 800px;
    overflow: auto;

    :deep(>.el-card__body) {
        display: flex;
        flex-wrap: wrap;

    }

    .card-div {
        height: 200px;
        width: 24%;
        margin: 0.4%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .project-title {
        font-size: 24px;
        font-weight: 500;
    }

    .button_plus {
        width: 150px;
        height: 150px;
        font-size: 72px;
    }

}
</style>