water_maintenance/src/components/techer/TaskMng.vue

<script setup lang="ts">
    import { ref, onMounted, getCurrentInstance } from "vue";
    import { getTaskList, deleteTask, publishTask as pubTask, finishTask } from "../../api/techer/taskMng";
    import { Search } from "@element-plus/icons-vue";
    import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
    import router from '../../router/index'
    import { useRoute } from "vue-router";
    const loading = ref(false);
    const taskType = ref(null);
    const keyword:any = ref(null);
    const taskId = ref("");
    const size = ref(8);
    const page = ref(1);
    const total = ref(1);
    const taskData = ref([]);
    const searchByType = (type:any) => {
        taskType.value = type;
        search();
    }
    const searchByPage = (e) => {
        page.value = e;
        search();
    }
    const search = () => {
        console.log(keyword.value, taskType.value);
        loading.value = true;
        console.log(page.value, size.value);
        getTaskList({
            pageNum: page.value,
            pageSize:size.value,
            state:taskType.value,
            keyword:keyword.value

        }).then((e:any) => {
           loading.value = false;
           if(e.data.code==0){
                let data=e.data.data;
                total.value = data.total;
                console.log(data);
                taskData.value = data.list;
                console.log(data);
           }
        })
    }
    const addTaskInfo = () => {
        router.push({
            path: "/TaskEditor",
        });
    }
    /**编辑任务 */
    const editTask = (id: any) => {
        console.log(id);
        if(taskId.value&&taskId.value==keyword.value){
            router.push({
                path: "/TaskEditor/"+id,
                query: {
                    linkId:taskId.value
                }
            });
        }else{
            router.push({
                path: "/TaskEditor/"+id
            });

        }

    }
    const delTask = (id: any) => {
        deleteTask(id).then((e: any) => {
            if (e.status == 0) {
                ElMessage({
                    message: '任务成功删除',
                    type: 'success',
                });
            }
            else {
                ElMessage({
                    message: '任务删除失败：' + e.data.msg ||"系统异常",
                    type: 'error',
                });
            }
        });
    }
    const finishTaskById = (id: any) => {
        finishTask(id).then((e: any) => {
            if (e.data.code == 0) {
                ElMessage({
                    message: '任务成功结束',
                    type: 'success',
                });
            }
            else {
                ElMessage({
                    message: '任务结束失败：' + e.data.msg || "系统异常",
                    type: 'error',
                });
            }
        });
    }
    /**发布任务 */
    const publishTask = (id:any) => {
        pubTask(id).then((e: any) => {
            if (e.data.code == 0) {
                ElMessage({
                    message: '任务成功发布',
                    type: 'success',
                });
                search();
            } else {
                ElMessage({
                    message: '任务发布失败：' + e.data.msg || "系统异常",
                    type: 'error',
                });
            }
        });
    }
    /**批改作业 */
    const markingWorks = (id:any) => {
        router.push({
            path: "/TaskStudentScore/" + id+"/2",
        });
    }
    /*
    查看成绩
    */
    const showStudResult = (id:any) => {
         router.push({
            path: "/TaskStatis/"+id,
        });
    }
    onMounted(() => {
         const route = useRoute();

         console.log(route.params.taskId );
        if (route.params.taskId != null && route.params.taskId.toString().length > 0) {
            taskId.value = route.params.taskId + "";
            console.log(taskId.value);
            keyword.value=route.params.taskId + "";
        }
        search();
    });
</script>
<template>
    <div class="task-panel">
        <div class="task-search">
            <el-button :type="taskType==null? 'primary':'default'" @click="searchByType(null)">全部</el-button>
            <el-button :type="taskType==1? 'primary':'default'" @click="searchByType(1)">未发布</el-button>
            <el-button :type="taskType==2? 'primary':'default'" @click="searchByType(2)">进行中</el-button>
            <el-button :type="taskType==3? 'primary':'default'" @click="searchByType(3)">已完成</el-button>

            <div class="task-search-panel">
                <span style="color: #757575; font-size:0.8rem; margin-right:1rem;"  v-if="total>0">共{{total}}个实例任务</span>
                <el-input v-model="keyword" placeholder="输入搜索内容" :suffix-icon="Search" @change="search"/>
            </div>
        </div>
        <div class="task-main" v-loading="loading">
            <div class="task-add task-item" @click="addTaskInfo">
                <el-icon :size="60"><Plus /></el-icon>
                <p>新建实训任务</p>
            </div>
            <div v-for="item in taskData" class="task-item task-item-base">
                <div class="task-name">
                    <span style="justify-self:start;margin-right:auto;">{{item.name}}</span>
                    <el-button link type="primary" v-if="item.state==1" @click="editTask(item.id)">编辑</el-button>
                    <el-popconfirm v-if="item.state==1" title="确定删除该条目" @confirm="delTask(item.id)">
                        <template #reference>
                            <el-button link type="danger" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                    <el-popconfirm v-if="item.state==2&&item.studentNum>0&&item.submitStudentNum/item.studentNum>0.99" title="确定要结束本次任务？" @confirm="finishTaskById(item.id)">
                        <template #reference>
                            <el-button link type="primary" size="small">结束任务</el-button>
                        </template>
                    </el-popconfirm>
                </div>
                <div class="task-desc">
                    <div class="desc-text">
                        <div class="desc-course desc-item"><div class="desc-icon"></div>{{item.courseName}}</div>
                        <div class="desc-class desc-item"><div class="desc-icon"></div>{{item.schoolClassName}}</div>
                        <div class="desc-stud desc-item"><div class="desc-icon"></div>{{item.studentNum||0}}人已分配任务</div>
                    </div>
                    <div class="desc-status" :class="{nopub:item.state==1,inproc:item.state==2,iscomplete:item.state==3}"></div>
                </div>
                <div class="task-opt">
                    <div v-if="item.state<3">已完成</div>
                    <div v-if="item.state==3">任务已结束</div>
                    <div class="task-comp-list" v-if="item.state<3">
                        <div class="task-com-item" v-for="stud in item.compDetail||[]">
                            {{stud.name.length>2? stud.name.substring(stud.name.length-2,stud.name.length):stud.name}}
                        </div>
                        <div class="task-com-item plus">{{item.submitStudentNum>0?''+item.submitStudentNum:'0' }}</div>
                    </div>
                    <div class="task-opt-button">
                        <!--<el-button type="primary" v-if="item.state==1" @click="publishTask()">发布</el-button>-->
                        <el-popconfirm v-if="item.state==1" title="发布前确定任务没有问题" @confirm="publishTask(item.id)">
                            <template #reference>
                                <el-button type="primary" size="small">发布</el-button>
                            </template>
                        </el-popconfirm>
                        <el-button type="primary" size="small" v-if="item.state==2" @click="showStudResult(item.id)">查看进度</el-button>
                        <el-button type="primary" size="small" v-if="item.state==2" @click="markingWorks(item.id)">批改作业({{item.waitGradeNum}})</el-button>
                        <el-button type="default" size="small" v-if="item.state==3" @click="showStudResult(item.id)">查看成绩</el-button>
                    </div>
                </div>
                <el-progress v-show="item.state>1&&item.submitStudentNum>0" :percentage="item.studentNum>0? parseInt((item.submitStudentNum/item.studentNum)*100):0" style="height:100%;" :show-text="false"/>
            </div>
        </div>
        <div class="task-page">
            <el-pagination layout="prev, pager, next" :page-size="size" :current-page="page" :total="total" @current-change="searchByPage"/>
        </div>
    </div>
</template>

<style scoped>
    :deep(.el-pager li) {
        background-color: transparent;
        border: 1px solid #DEDDDD;
        margin: 0 5px;
    }

    :deep(.number.is-active) {
        color: #fff;
        background-color: var(--el-color-primary);
    }

    :deep(.btn-prev) {
        border: 1px solid #DEDDDD;
    }

    :deep(.btn-next) {
        border: 1px solid #DEDDDD;
    }
    .task-panel {
        margin: 1rem;
        margin-bottom: 1rem;
        height: calc(100% - 2rem);
        width: calc(100% - 2rem);
        background: #fff;
        display:grid;
        grid-template-rows:3rem 1fr 4rem;
        padding:3rem 8rem 1rem 8rem;
        box-sizing:border-box;
    }
    .task-search {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 1rem;
    }
    .task-search-panel {
        justify-self: right;
        margin-left: auto;
        display: flex;
        white-space: nowrap;
        align-items: center;

    }
  
        .task-page {
            display: flex;
            align-items: center;
            justify-content: end;
        }
    .task-main {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        /* grid-template-rows:1fr 1fr 1fr;*/
        overflow-x: hidden;
        grid-gap: 3rem;
        grid-column-gap: 6rem;
        overflow: auto;
        padding: 1rem;
        justify-content: center;
        align-items: start;
        color: rgb(117, 117, 117);
    }

    .task-item {
        height: 16rem;
        width: 100%;
        background-color: #fff;
        box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
        justify-self: center;
    }

    .task-add {
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: var(--el-color-primary);
    }

        .task-add p {
            font-size: 20px;
        }
    .task-item-base {
        display:grid;
        grid-template-rows:3rem 1fr 4rem 6px;
     
    }
   
    .task-name {
        color: var(--el-color-primary);
        font-size: 1.2rem;
        margin: 1rem 2rem 0 2rem;
        box-sizing: border-box;
       
        display:flex;
        align-items:center;
        justify-content:end;
    }
    .task-desc {
        margin: 0.5rem 2rem 0 2rem;
        display:grid;
        grid-template-columns:18rem 1fr;
    
    }
    .desc-text {
        display: flex;
        flex-flow: column;
        white-space:nowrap;
        justify-content: space-around;
    }
    .task-opt {
        display: flex;
        margin: 0rem 2rem 0 2rem;
        align-items:center;
    }
    .task-comp-list {
        display:flex;
    }
    .task-com-item {
        margin-left: -10px;
        background-color: #FF9F73;
        height:2rem;
        width:2rem;
        color:#fff;
        border-radius:1rem;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:8px;
       /* box-shadow:rgba(0,0,0,0.3) 0px 0px 3px;*/
        border:1px solid #fff;
        box-sizing:border-box;
    }
        .task-com-item:first-child {
            margin-left:1rem;
        }
        .task-com-item.plus {
            background-color: var(--el-color-primary);
            border:none;
        }
    .task-opt-button {
     margin-left:auto;
        justify-self:end;
    }
    .desc-item {
        display:flex;
        align-items:center;
    }
    .desc-icon {
        background-image: url(@/assets/techer/task-icon-course.png);
        height:1.2rem;
        width:1.2rem;
        background-size:1.2rem;
        background-position:center;
        margin-right:0.5rem;
    }
    .desc-course .desc-icon {
        background-image: url(@/assets/techer/task-icon-course.png);
    }
    .desc-class .desc-icon {
        background-image: url(@/assets/techer/task-icon-class.png);
    }
    .desc-stud .desc-icon {
        background-image: url(@/assets/techer/task-icon-student.png);
    }
    
    .desc-status {
        background-size: 8rem 8rem;
        height: 8rem;
        width: 8rem;
        background-position: center;
        background-repeat: no-repeat;
    }
        .desc-status.nopub {
            background-image: url(@/assets/techer/task-mark-nopub.png);
        }
        .desc-status.iscomplete {
            background-image: url(@/assets/techer/task-mark-comp.png);
        }
        .desc-status.inproc {
            background-image: url(@/assets/techer/task-mark-inprocess.png);
        }
</style>