ChuangHeng_new/src/views/modules/agent/program.vue

<template>
    <div class="page">
        <div class="title">{{ title }}</div>
        <div class="tabs">
            <div class="t_pre" :class="{'active':tidx===1}" @click="handleChangeTab(1)">活动项目</div>
            <div class="t_pre" :class="{'active':tidx===2}" @click="handleChangeTab(2)">已完成</div>
            <!-- <div class="t_pre" :class="{'active':tidx===3}" @click="handleChangeTab(3)">已归档</div>-->
            <div class="t_add" @click="handleAdd" v-hasPermi="['core:project:add']">+ 创建新项目</div>
        </div>
        <template v-if="tidx===1">
            <div class="content">
                <template v-if="teamList.length">
                    <div class="team_user_list">
                        <div class="tul_left">
                            <div class="tull_top">
                                <div class="tullt_l">项目管理</div>
                                <div class="tullt_r" @click="handleAddTeam" v-hasPermi="['core:project:addTeam']">+添加团队</div>
                            </div>
                            <div class="tull_query queryInput">
                                <el-input v-model="programName" placeholder="请输入项目名称"></el-input>
                                <img src="@/assets/images/agent/query_mini.png">
                            </div>
                            <div class="tull_list">
                                <div class="tull_item" v-for="(item,index) in companyList" :key="index" @click="handleExpand(item,index)">
                                    <div class="tname">
                                        <img src="@/assets/images/agent/down_sj.png">
                                        <span>{{ item.enterpriseName }}</span>
                                    </div>
                                    <template v-if="item.expand&&item.teams&&item.teams.length">
                                        <div class="tuser_list" :class="{'active':team.select}" v-for="(team,idx) in item.teams" :key="idx" @click.stop="handleSelect(team,idx)">
                                            <span>{{ team.teamName }}</span>
                                            <span>（{{ team.teamNum }}人）</span>
                                            <el-popover placement="right" width="177" trigger="click">
                                                <div class="tl_czs">
                                                    <div class="tlc_pre" v-hasPermi="['core:project:updateTeamCoach']">修改团队教练</div>
                                                    <div class="tlc_pre" v-hasPermi="['core:project:updateTeamName']">修改团队名称</div>
                                                    <div class="tlc_pre" @click="handleTeamDetail(item)" v-hasPermi="['core:project:teamInfo']">团队详情</div>
                                                    <div class="tlc_pre" v-hasPermi="['core:project:deleteTeam']">删除团队</div>
                                                </div>
                                                <i slot="reference" class="el-icon-more" style="font-size: 14px;color: #999; transform: rotate(90deg);" @click.stop="handleSetTeam(team,idx)"></i>
                                            </el-popover>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                        <div class="tul_right">
                            <div class="tulr_top">
                                <div class="tulrt_l queryInput">
                                    <el-input v-model="queryParams.name" placeholder="请输入姓名查询"></el-input>
                                    <img src="@/assets/images/agent/query_mini.png">
                                </div>
                                <div class="tulrt_r">
                                    <div class="tr_btn" v-hasPermi="['sys:user:export']">批量导入</div>
                                    <div class="tr_btn" @click="userShow=true" v-hasPermi="['sys:user:add']">添加成员</div>
                                </div>
                            </div>
                            <el-table :data="userList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无人员" max-height="578px" style="margin-top: 16px;">
                                <el-table-column label="序号" width="50">
                                    <template #default="scope">
                                        {{ scope.$index + 1 }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="姓名" prop="aaa"></el-table-column>
                                <el-table-column label="性别" prop="bbb">
                                    <template #default="{ row }"></template>
                                </el-table-column>
                                <el-table-column label="出生日期" prop="aaa"></el-table-column>
                                <el-table-column label="所属部门" prop="aaa"></el-table-column>
                                <el-table-column label="职位" prop="aaa"></el-table-column>
                                <el-table-column label="级别" prop="aaa"></el-table-column>
                                <el-table-column label="分工" prop="aaa"></el-table-column>
                                <el-table-column label="上级" prop="aaa"></el-table-column>
                                <el-table-column label="手机号码" prop="aaa"></el-table-column>
                                <el-table-column label="创建时间" prop="aaa"></el-table-column>
                                <el-table-column label="操作" width="150">
                                    <template #default="scope">
                                        <el-button link type="text" size="mini" @click="handleEdit(scope.row)" v-hasPermi="['sys:user:update']">编辑</el-button>
                                        <el-button link type="text" size="mini" @click="handleDelete(scope.row)" v-hasPermi="['sys:user:delete']">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-row style="display: flex;justify-content: center;">
                                <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="queryParams.page"
                                    :page-sizes="[5, 10, 20, 50]"
                                    :page-size="10"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="total"
                                    v-show="total > 0">
                                </el-pagination>
                            </el-row>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div class="empty">
                        <img src="@/assets/images/agent/team.png">
                        <p>您还没有任何项目及团队成员信息</p>
                        <div class="e_add" @click="handleAdd" v-hasPermi="['core:project:add']">+ 创建新项目</div>
                    </div>
                </template>
            </div>
        </template>
        <template v-else-if="tidx===2"></template>
        <template v-else-if="tidx===3"></template>
        <el-drawer :title="userTitle" :visible.sync="userShow" append-to-body size="60%" @close="userShow=false">
            <el-form ref="userRef" :model="userForm" :rules="userRules" label-width="100px" style="width: 90%;margin: 0 auto;">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="姓名" prop="aaa">
                      <el-input v-model="userForm.aaa" placeholder="请输入姓名" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="性别" prop="bbb">
                        <el-select v-model="userForm.bbb" placeholder="请选择性别" style="width: 100%;"></el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="出生日期" prop="ccc">
                        <el-select v-model="userForm.ccc" placeholder="请选择出生日期" style="width: 100%;"></el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="手机号码" prop="ddd">
                      <el-input v-model="userForm.ddd" placeholder="请输入手机号码" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="所属部门" prop="eee">
                      <el-input v-model="userForm.eee" placeholder="请输入所属部门" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="教育程度" prop="fff">
                        <el-select v-model="userForm.fff" placeholder="请选择教育程度" style="width: 100%;"></el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="分工" prop="ggg">
                      <el-input v-model="userForm.ggg" placeholder="请输入分工" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="职位" prop="hhh">
                      <el-input v-model="userForm.hhh" placeholder="请输入职位" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="级别" prop="iii">
                        <el-select v-model="userForm.iii" placeholder="请选择级别" style="width: 100%;"></el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="上级" prop="jjj">
                      <el-input v-model="userForm.jjj" placeholder="请输入上级" />
                    </el-form-item>
                  </el-col>
                </el-row>
            </el-form>
            <div class="demo-drawer__footer" style="display: flex;justify-content: end;">
                <el-button :loading="buttonLoading2" type="primary" @click="submitForm2" v-hasPermi="['sys:user:save']">保 存</el-button>
                <el-button @click="cancel2" style="margin-right: 5%;">取 消</el-button>
            </div>
        </el-drawer>
        <el-drawer title="团队详情" :visible.sync="teamShow" append-to-body size="60%" @close="teamShow=false">
            <el-form ref="teamRef" :model="teamForm" :rules="teamRules" label-width="120px" style="width: 90%;margin: 0 auto;">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="所属项目" prop="aaa">
                      <el-input v-model="teamForm.aaa" placeholder="请输入所属项目" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="团队名称" prop="bbb">
                        <el-input v-model="teamForm.bbb" placeholder="请输入团队名称" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="团队介绍" prop="ccc">
                        <el-input type="textarea" v-model="teamForm.ccc" placeholder="请输入团队介绍" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="工作任务" prop="ddd">
                        <el-input type="textarea" v-model="teamForm.ddd" placeholder="请输入工作任务" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="团队项目情况" prop="eee">
                        <el-input type="textarea" v-model="teamForm.eee" placeholder="请输入团队项目情况" />
                    </el-form-item>
                  </el-col>
                </el-row>
            </el-form>
            <div class="demo-drawer__footer" style="display: flex;justify-content: end;">
                <el-button :loading="buttonLoading3" type="primary" @click="submitForm3">保 存</el-button>
                <el-button @click="cancel3" style="margin-right: 5%;">取 消</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script setup name="">
    import { ref, getCurrentInstance,onMounted } from 'vue'
    const { proxy } = getCurrentInstance();
    import { getCoachProgramList,getCoachProgramInfo,deleteCoachProgram } from '@/api/agent/index.js'

    const tidx = ref(1);
    const teamList = ref([1]);
    const programName = ref('')
    const companyList = ref([]);
    const loading = ref(false);
    const queryParams = ref({
        page:1,
        limit:10,
        name:'',
    })
    const userList = ref([]);
    const total = ref(0);

    const userTitle = ref('添加成员信息');
    const userShow = ref(false);
    const userForm = ref({
            aaa: '',
            bbb: '',
            ccc: '',
            ddd: '',
            eee: ''
        });
    const userRules = ref({
        aaa: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        bbb: [
            { required: true, message: '请选择性别', trigger: 'change' }
        ],
        ccc: [
            { required: true, message: '请选择出生日期', trigger: 'change' }
        ],
        ddd: [
            { required: true, message: '请输入手机号码', trigger: 'blur' }
        ],
        eee: [
            { required: true, message: '请输入所属部门', trigger: 'blur' }
        ],
        fff: [
            { required: true, message: '请选择教育程度', trigger: 'change' }
        ],
        ggg: [
            { required: true, message: '请输入分工', trigger: 'blur' }
        ],
        hhh: [
            { required: true, message: '请输入职位', trigger: 'blur' }
        ],
        iii: [
            { required: true, message: '请选择级别', trigger: 'change' }
        ],
        jjj: [
            { required: true, message: '请输入上级', trigger: 'blur' }
        ]
    });
    const buttonLoading2 = ref(false);

    const teamShow = ref(false);
    const teamForm = ref({
        aaa: '',
        bbb: '',
        ccc: '',
        ddd: '',
        eee: ''
    });
    const teamRules = ref({
        aaa: [
            { required: true, message: '请输入团队名称', trigger: 'blur' }
        ],
        bbb: [
            { required: true, message: '请选择团队类型', trigger: 'change' }
        ],
        ccc: [
            { required: true, message: '请输入团队人数', trigger: 'blur' }
        ],
        ddd: [
            { required: true, message: '请选择团队负责人', trigger: 'change' }
        ],
        eee: [
            { required: true, message: '请输入团队描述', trigger: 'blur' }
        ]
    });
    const buttonLoading3 = ref(false);

    const title = proxy.$route.meta.title;

    const handleChangeTab = (idx) => {
        tidx.value = idx;
    }
    const handleAdd = () => {
        proxy.$router.push('/agentProgramAddTeam');
    };

    const handleExpand = (item, index) => {
        item.expand = !item.expand;
    };
    const handleSelect = (team, index) => {
        companyList.value.forEach(item => {
            if(item.teams){
                item.teams.forEach(t => t.select = false);
            }
        });
        team.select = true;
    };

    const handleSetTeam = (team, index) => {

    };

    const handleAddTeam = () => {
        proxy.$router.push('/agentProgramAddTeam');
    };

    
    const getList = async () => {
        let query = {...queryParams.value};
        loading.value = true;
        // const res = await listOrder(query);
        // userList.value = res.data.list;
        // total.value = res.data.total;
        loading.value = false;
    }
    const handleSizeChange = (e)=>{
        queryParams.value.limit = e;
        getList();
    }
    const handleCurrentChange = (e)=>{
        queryParams.value.page = e;
        getList();
    }

    const handleTeamDetail = team => {
        teamShow.value = true;
    }

    const getProgramList = async () => {
        loading.value = true;
        const res = await getCoachProgramList(programName.value);
        companyList.value = res.data;
        companyList.value.forEach(t => t.expand = false);
        companyList.value.teams.forEach(t => t.select = false);
        loading.value = false;
    }
    onMounted(() => {
        getProgramList();
    });
</script>

<style scoped lang="scss">
    ::v-deep .queryInput .el-input__inner{
        border: none !important;
        height: 30px !important;
        line-height: 30px !important;
        padding: 0 !important;
        width: 200px !important;
    }

    .page{
        padding: 28px 16px 12px;
        background: #FAFAFA;
        .title{
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 16px;
            color: #111111;
            line-height: 16px;
        }

        .tabs{
            position: relative;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #E5E7EB;
            padding-bottom: 18px;
            margin-top: 32px;
            .t_pre{
                width: 116px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #111111;
                line-height: 16px;
                text-align: center;
                position: relative;
                cursor: pointer;
                &.active{
                    font-weight: bold;
                    color: #761E6A;
                    &::after{
                        content: '';
                        position: absolute;
                        bottom: -18px;
                        left: 0;
                        width: 100%;
                        height: 2px;
                        background: #761E6A;
                    }
                }
            }
            .t_add{
                width: 114px;
                height: 32px;
                background: #761E6A;
                border-radius: 6px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #FFFFFF;
                line-height: 32px;
                text-align: center;
                position: absolute;
                top: -10px;
                right: 0;
                cursor: pointer;
            }
        }

        .content{
            width: 100%;
            height: calc(100vh - 140px);
            background: #FFFFFF;
            border: 1px solid #F3F4F6;
            margin-top: 15px;

            .team_user_list{
                height: 100%;
                padding: 20px;
                background: #FFFFFF;
                display: flex;
                .tul_left{
                    width: 280px;
                    padding-right: 20px;
                    box-sizing: border-box;
                    border-right: 1px solid #E5E7EB;
                    .tull_top{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .tullt_l{
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 600;
                            font-size: 16px;
                            color: #0D162A;
                            line-height: 16px;
                        }
                        .tullt_r{
                            width: 73px;
                            height: 28px;
                            border-radius: 6px;
                            border: 1px solid #761E6A;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 12px;
                            color: #761E6A;
                            line-height: 24px;
                            text-align: center;
                            cursor: pointer;
                        }
                    }
                    .tull_query{
                        margin-top: 12px;
                        width: 100%;
                        height: 34px;
                        border-radius: 6px;
                        border: 1px solid #E2E7F5;
                        padding: 0 16px;
                        box-sizing: border-box;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        img{
                            width: 16px;
                            height: 16px;
                            cursor: pointer;
                        }
                    }
                    .tull_list{
                        height: calc(100% - 100px);
                        overflow-y: auto;
                        margin-top: 24px;
                        .tull_item{
                            margin-top: 24px;
                            &:first-child{
                                margin-top: 0;
                            }
                            .tname{
                                display: flex;
                                align-items: center;
                                img{
                                    width: 16px;
                                    height: 16px;
                                    cursor: pointer;
                                }
                                span{
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 400;
                                    font-size: 14px;
                                    color: #111111;
                                    line-height: 16px;
                                    margin-left: 10px;
                                }
                            }
                            .tuser_list{
                                margin-top: 11px;
                                width: 100%;
                                height: 36px;
                                padding-left: 34px;
                                display: flex;
                                align-items: center;
                                cursor: pointer;
                                position: relative;
                                span{
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 400;
                                    font-size: 14px;
                                    color: #4B5563;
                                    line-height: 16px;
                                    &:first-child{
                                        margin-right: 5px;
                                    }
                                }
                                &:hover,&.active{
                                    background: #F0F2F8;
                                    border-radius: 6px;
                                    span{
                                        font-weight: bold;
                                        color: #761E6A;
                                    }
                                    i{
                                        color: #761E6A !important;
                                    }
                                }
                                i{
                                    position: absolute;
                                    right: 10px;
                                    top: 12px;
                                }
                            }
                        }
                    }
                }
                .tul_right{
                    width: calc(100% - 281px);
                    padding-left: 23px;
                    box-sizing: border-box;
                    .tulr_top{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .tulrt_l{
                            width: 278px;
                            height: 34px;
                            border-radius: 6px;
                            border: 1px solid #E2E7F5;
                            padding: 0 16px;
                            box-sizing: border-box;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            img{
                                width: 16px;
                                height: 16px;
                                cursor: pointer;
                            }
                        }
                        .tulrt_r{
                            display: flex;
                            .tr_btn{
                                width: 92px;
                                height: 36px;
                                border-radius: 6px;
                                border: 1px solid #C1C7D2;
                                margin-left: 20px;
                                cursor: pointer;
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                font-size: 14px;
                                color: #111111;
                                line-height: 36px;
                                text-align: center;
                                &:last-child{
                                    background: #761E6A;
                                    color: #FFFFFF;
                                }
                            }
                        }
                    }
                }
            }

            .empty{
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                img{
                    width: 90px;
                    height: 76px;
                }
                p{
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #1D2129;
                    line-height: 20px;
                    margin-top: 20px;
                }
                .e_add{
                    width: 114px;
                    height: 32px;
                    background: #761E6A;
                    border-radius: 6px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #FFFFFF;
                    line-height: 32px;
                    text-align: center;
                    margin-top: 36px;
                    cursor: pointer;
                }
            }
        }
    }

    
    .tl_czs{
        .tlc_pre{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #1D2129;
            line-height: 20px;
            padding: 12px 0;
            border-bottom: 1px solid #ECEEF5;
            cursor: pointer;
            &:first-child{
                padding-top: 0;
            }
            &:last-child{
                border: none;
                padding-bottom: 0;
            }
            &:hover{
                color: #761E6A;
            }
        }
    }
    
    :v-deep .el-dialog__wrapper{
        background: rgba(0,0,0,.3) !important;
    }
    ::v-deep .el-dialog__title{
        font-weight: bold !important;
    }
    ::v-deep .el-dialog{
        margin-top: 15vh !important;
    }
    ::v-deep .el-drawer__header span{
        font-weight: bold;
        font-size: 16px;
        color: #1D2129;
        line-height: 22px;
    }
</style>