feiniao-farm-h5/src/views/old_mini/mine/pages/projectManager.vue

<template>
    <div class="authentication-page">
        <custom-header name="项目管理员"></custom-header>
        <div class="team-content">
            <template v-if="teamList && teamList.length">
                <div class="team-list">
                    <farm-info-card
                        v-for="ele in teamList"
                        :key="ele.id"
                        class="list-item"
                        :data="{
                            ...ele,
                            maxWidth: 'fit-content',
                            roleName: '项目管理员',
                        }"
                    >
                        <template #right>
                            <div @click.stop="handleRemoveProjectManager(ele)">移除</div>
                        </template>
                    </farm-info-card>
                </div>
            </template>
            <div v-else class="empty-wrap">
                <div class="empty-text">暂无数据</div>
            </div>
        </div>
        <div class="custom-bottom-fixed-btns">
            <div class="bottom-btn primary-btn" @click="handleAddProjectManager">添加项目管理员</div>
        </div>
    </div>
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import FarmInfoCard from "@/components/pageComponents/FarmInfoCard.vue";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
const router = useRouter();

const handleRemoveProjectManager = async (item) => {
    ElMessageBox.confirm('确定移除该成员吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        const { code,msg } = await VE_API.mine.saveManager({id: item.id, role: 3});
        if (code === 0) {
            ElMessage.success("移除成功");
            getManagerList();
        } else {
            ElMessage.error(msg);
        }
    }).catch(() => {});
};

const handleAddProjectManager = () => {
    router.push("/team_manage?add=true");
};

onMounted(() => {
    getManagerList();
});

const teamList = ref([]);
const getManagerList = async () => {
    const { data } = await VE_API.mine.listManagerList();
    if (data && data.length > 0) {
        const list = Array.isArray(data) ? data.filter((item) => item.role == 2) : [];
        teamList.value = list;
    }
};
</script>

<style lang="scss" scoped>
.authentication-page {
    width: 100%;
    height: 100vh;
    background-color: #f5f7fb;
    .team-content {
        width: 100%;
        height: 100%;
        padding: 10px 12px;
        box-sizing: border-box;
        .team-list {
            width: 100%;
        }
        .empty-wrap {
            padding-top: 40px;
            text-align: center;
            .empty-text {
                font-size: 14px;
                color: #86909c;
            }
        }
    }
    .custom-bottom-fixed-btns {
        justify-content: center;
    }
}
</style>