我的活动添加筛选&&上传课例

Contest/contest.client/src/view/myactivity/MyActivity.less

@@ -276,4 +276,22 @@
         margin: auto;
         font-size: 2rem;
     }
+}
+
+.el-popper {
+    .filter-box {
+        // margin: 10px;
+        &>p:first-child {
+            border-bottom: 1px solid #ccc;
+            padding: 5px;
+        }
+
+        &>div {
+            padding: 5px;
+
+            &>p {
+                margin-bottom: 5px;
+            }
+        }
+    }
 }

Contest/contest.client/src/view/myactivity/MyActivity.vue

@@ -10,11 +10,45 @@
                         <el-button :icon="Search" @click="searchName()" />
                     </template>
                 </el-input> -->
+                <el-popover :width="200">
+                    <template #reference>
+                        <el-icon><Filter /></el-icon>
+                    </template>
+                    <template #default>
+                        <div class="filter-box">
+                            <p>筛选</p>
+                            <div>
+                                <p>类型：</p>
+                                <el-select v-model="scopeVal" @change="scopeChange" clearable placeholder="请选择" style="width: 160px">
+                                    <el-option label="公开" value="public" />
+                                    <el-option label="区级" value="area" />
+                                    <el-option label="校级" value="school" />
+                                </el-select>
+                            </div>
+                            <div>
+                                <p>状态：</p>
+                                <el-select v-model="publishVal" @change="publishChange" clearable placeholder="请选择" style="width: 160px">
+                                    <el-option label="未报名" value="notRegister" />
+                                    <el-option label="进行中" value="going" />
+                                    <el-option label="已结束" value="finish" />
+                                </el-select>
+                            </div>
+                            <div>
+                                <p>参与模块：</p>
+                                <el-checkbox-group v-model="modalList" @change="modalChange">
+                                    <el-checkbox label="Contest">赛课活动</el-checkbox>
+                                    <el-checkbox label="Training">教培活动</el-checkbox>
+                                    <el-checkbox label="Research">教研活动</el-checkbox>
+                                </el-checkbox-group>
+                            </div>
+                        </div>
+                    </template>
+                </el-popover>
             </div>
             <div style="height: 90%;">
-                <template v-if="actList.length">
+                <template v-if="actListShow.length">
                     <el-scrollbar>
-                        <div v-for="(item, index) in actList" :key="index" @click="getListInfo(item, index)"
+                        <div v-for="(item, index) in actListShow" :key="index" @click="getListInfo(item, index)"
                             :class="['list-info', actIndex === index ? 'list-info-active' : '']">
                             <p class="info-name">{{ item.name }}</p>
                             <div class="info-type">
@@ -37,8 +71,8 @@
                 <el-empty v-else description="暂无活动" />
             </div>
         </div>
-        <div class="act-info" v-if="actList.length">
-            <div class="info-box" v-if="actList[actIndex]?.isJoin">
+        <div class="act-info" v-if="actListShow.length">
+            <div class="info-box" v-if="actListShow[actIndex]?.isJoin">
                 <el-tabs v-model="actTab" class="demo-tabs">
                     <el-tab-pane label="成员信息" name="user">
                         <div v-if="!contest && !research && !training">
@@ -112,7 +146,7 @@
                                         </div>
                                     </template>
                                     <template v-if="contest?.upload && contest.upload.actState === 'going' && !contest?.upload.captainUpload || contest?.upload.captainUpload && isLeader">
-                                        <el-upload class="upload-demo" ref="refUpload" :file-list="fileList" :accept="accept" drag multiple :on-change="handleChange" :auto-upload="false" action="">
+                                        <el-upload class="upload-demo" ref="refUpload" :file-list="fileList" :accept="accept" drag multiple :on-remove="handleRemove" :on-change="handleChange" :auto-upload="false" action="">
                                             <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
                                             <div class="el-upload__text">
                                                 上传作品
@@ -127,6 +161,11 @@
                                                             {{ item }}
                                                         </el-tag>
                                                     </template>
+                                                    <template v-else-if="contest?.upload.type === 'lesson'">
+                                                        <el-tag type="success" disable-transitions>
+                                                            必须上传视频
+                                                        </el-tag>
+                                                    </template>
                                                 </div>
                                             </template>
                                         </el-upload>
@@ -201,7 +240,7 @@
 </template>
 
 <script setup>
-import { Search, Delete, UserFilled, Clock, UploadFilled, CaretBottom, CaretRight, WarnTriangleFilled, DArrowRight, CloseBold, Warning } from '@element-plus/icons-vue'
+import { Search, Delete, UserFilled, Clock, UploadFilled, CaretBottom, CaretRight, WarnTriangleFilled, DArrowRight, CloseBold, Warning, Filter } from '@element-plus/icons-vue'
 import { ElMessageBox, ElMessage, FormRules, ElLoading } from 'element-plus'
 import { getCurrentInstance, nextTick, onMounted, reactive, ref, toRaw, watch } from 'vue'
 import { useStore } from "@/pinia/common"
@@ -218,19 +257,24 @@ let actTab = ref('user')
 let searchName = ref('')
 let accept = ref('')
 let nowYear = ref('')
+let scopeVal = ref('')
+let publishVal = ref('')
 let searShow = ref(false)
 let skModule = ref(true)
 let isLeader = ref(false)
 let previewStatus = ref(false)
 let actList = ref([])
+let actListShow = ref([])
 let memberData = ref([])
 let fileList = ref([])
 let uploadList = ref([])
+let modalList = ref([])
 let actInfo = ref({attachment: []})
 let contest = ref({})
 let research = ref({}) //教研
 let training = ref({}) //研修
 let previewFile = ref({})
+
 const refUpload = ref(HTMLElement)
 const cipher = ref({})
 
@@ -261,8 +305,9 @@ function getActList() {
                 item.isJoin = item.contestSign
                 return item
             })
-            if(actList.value.length) {
-                getListInfo(actList.value[0], 0)
+            actListShow.value = actList.value
+            if(actListShow.value.length) {
+                getListInfo(actListShow.value[0], 0)
             }
         }
     }).finally(() => {
@@ -307,7 +352,7 @@ function getListInfo(info, index) {
 function getEnroll() {
     let params = {
         grant_type: 'get-enroll',
-        activityId: actList.value[actIndex.value].id
+        activityId: actListShow.value[actIndex.value].id
     }
     proxy.$api.teaContest(params).then(async res => {
         if(res.code === 200) {
@@ -353,7 +398,7 @@ function getEnroll() {
 function getTeamInfo() {
     let params = {
         grant_type: 'search-team-by-cipher',
-        activityId: actList.value[actIndex.value].id,
+        activityId: actListShow.value[actIndex.value].id,
         cipher: cipher.value.cipher
     }
     proxy.$api.teaContest(params).then(res => {
@@ -384,7 +429,7 @@ function changeLeader(index, data) {
     }) */
     let params = {
         grant_type: 'change-team-leader',
-        activityId: actList.value[actIndex.value].id,
+        activityId: actListShow.value[actIndex.value].id,
         targetLeader: data.tmdid
     }
     proxy.$api.teaContest(params).then(res => {
@@ -421,6 +466,7 @@ function exitAct(index, info) {
                         type: 'success',
                         message: '已退出活动'
                     })
+                    actListShow.value[actIndex.value].isJoin = false
                 } else {
                     ElMessage({
                         type: 'warning',
@@ -443,6 +489,10 @@ function deleteMem(index, info) {
     })
 }
 
+function handleRemove(file, files) {
+    fileList.value = files
+}
+
 function handleChange(file, files) {
     let info = {
         name: file.name,
@@ -549,6 +599,13 @@ async function uploadFile() {
         })
         return
     }
+    if(contest.value.upload.type === 'lesson' && !fileList.value.find(item => item.raw.type === 'video/mp4')) {
+        ElMessage({
+            type: 'warning',
+            message: '必须上传视频！'
+        })
+        return
+    }
     /* loading = ElLoading.service({
         lock: true,
         text: '加载中',
@@ -579,6 +636,8 @@ async function uploadFile() {
     } */
     if(contest.value.upload.type === 'file') {
         params.uploadData.files = blobList
+    } else if(contest.value.upload.type === 'lesson') {
+        params.uploadData.lessons = blobList
     } else {
         params.uploadData.sokrates = []
     }
@@ -605,7 +664,7 @@ function toSign() {
     router.push({
         name: 'activityInfo',
         params: {
-            info: actList.value[actIndex.value].id
+            info: actListShow.value[actIndex.value].id
         }
     })
 }
@@ -632,6 +691,52 @@ async function onDownload(item) {
     proxy.$tools.doDownloadByUrl(item.urlShow, item.name)
 }
 
+function scopeChange(value) {
+    if(value) {
+        actListShow.value = actList.value.filter(item => {
+            return item.scope === value && (publishVal.value ? (publishVal.value === 'notRegister' ? !item.isJoin : (item.isJoin && (publishVal.value === 'going' ? item.publish === 1 : item.publish === 2))) : true)
+        })
+    } else {
+        onFilterClear()
+    }
+}
+
+function publishChange(value) {
+    if(value) {
+        actListShow.value = actList.value.filter(item => {
+            return (value === 'notRegister' ? !item.isJoin : (item.isJoin && (value === 'going' ? item.publish === 1 : item.publish === 2))) && (scopeVal.value ? item.scope === scopeVal.value : true) && (modalList.value.length ? item.modules.every(modules => modalList.value.includes(modules)) : true)
+        })
+    } else {
+        onFilterClear()
+    }
+}
+
+function modalChange(value) {
+    if(value.length) {
+        actListShow.value = actList.value.filter(item => {
+            return item.modules.every(modules => value.includes(modules)) && (publishVal.value ? (publishVal.value === 'notRegister' ? !item.isJoin : (item.isJoin && (publishVal.value === 'going' ? item.publish === 1 : item.publish === 2))) : true) && (scopeVal.value ? item.scope === scopeVal.value : true)
+        })
+    } else {
+        onFilterClear()
+    }
+}
+/* 取消过滤 */
+function onFilterClear() {
+    if(scopeVal.value){
+        scopeChange(scopeVal.value)
+        return
+    }
+    if(publishVal.value){
+        publishChange(publishVal.value)
+        return
+    }
+    if(modalList.value.length) {
+        modalChange(modalList.value)
+        return
+    }
+    actListShow.value = actList.value
+}
+
 watch(nowYear, (newValue, oldValue) => {
     getActList()
 })