视频列表,新建,修改

src/modules/resource/video/api.ts

 import httpRequest from '@/utils/axios'
 
 // 获取视频列表
-export function getVideoList(params?: { type?: string; page?: number; page_size?: number }) {
+export function getVideoList(params: { tab: string; status?: string; authorized?: string; classification?: string; page?: number; page_size?: number }) {
   return httpRequest.get('/api/resource/v1/resource/video/list', { params })
 }
 
@@ -29,3 +29,8 @@ export function updateVideo(data: { id: string; course_name: string; cover_page:
 export function getVideo(params: { id: string }) {
   return httpRequest.get('/api/resource/backend/video/view', { params })
 }
+
+// 获取项目列表
+export function getProjectList(params: { organization_id: string }) {
+  return httpRequest.get('/api/resource/v1/util/members', { params })
+}

src/modules/resource/video/views/List.vue

 <script setup lang="ts">
-import { getVideoList } from '../api'
+import { getVideoList, getProjectList, getCategoryList } from '../api'
 import CardListItem from '../components/CardListItem.vue'
 import { Expand, Search } from '@element-plus/icons-vue'
+// import { useMapStore } from '@/stores/map'
+// const store= useMapStore()
+// console.log(store, 'store')
+
+// 筛选项目列表
+let projectList: any = $ref([])
+getProjectList({ organization_id: '' }).then(res => {
+  projectList = res.data.departments
+})
+
+// tab触发
+const tabValue = ref('1')
+const tabChange = () => {
+  appList.value.refetch()
+}
 
 const appList = ref()
 
+// 列表切换
 const isCard = ref(false)
-const listOptions = {
-  remote: {
-    httpRequest: getVideoList,
-    params: { title: '', status: '' },
-    beforeRequest(params: any) {
-      // params.type = 选项卡类型
-      return params
-    }
-  },
-  filters: [
-    { 
-      type: 'select',
-      prop: 'status',
-      label: '状态',
-      options: [
-        { label: '有效', value: '1' },
-        { label: '有效', value: '0' },
-      ]
+
+const listOptions = $computed(() => {
+  return {
+    remote: {
+      httpRequest: getVideoList,
+      params: { tab: tabValue, title: '', status: '', authorized: '', classification: '' },
+      beforeRequest(params: any) {
+        // params.type = 选项卡类型
+        return params
+      }
     },
-    { type: 'select', prop: 'project_id', label: '项目' },
-    { type: 'select', prop: 'category_id', label: '类别' },
-    { prop: 'title', slots: 'filter-search' }
-    // { type: 'input', prop: 'category_id', prefixIcon: 'Search' }
-  ],
-  columns: [
-    { label: '视频标题', prop: 'name', align: 'center' },
-    { label: '视频分类', prop: 'classification_name', align: 'center' },
-    { label: '知识点', prop: 'knowledge_points', align: 'center' },
-    { label: '封面', slots: 'table-cover', width: 150, align: 'center' },
-    { label: '资源状态', prop: 'status_name', align: 'center' },
-    { label: '审核状态', prop: 'audit_status_name', align: 'center' },
-    { label: '更新人', prop: 'updated_operator_name', align: 'center' },
-    { label: '更新人部门', prop: 'organ_id_name', align: 'center' },
-    { label: '更新日期', prop: 'updated_time', align: 'center' },
-    { label: '操作', slots: 'table-operate', align: 'center' }
-  ],
-  data: [
-    { id: 1, title: '视频标题', type: '视频分类' },
-    { id: 2, title: '视频标题', type: '视频分类' }
-  ]
-}
+    filters: [
+      { 
+        type: 'select',
+        prop: 'status',
+        label: '状态',
+        options: [
+          { label: '有效', value: '1' },
+          { label: '失效', value: '0' }
+        ]
+      },
+      { type: 'select', prop: 'authorized', label: '项目', options: projectList, labelKey: 'name', valueKey: 'id' },
+      { prop: 'classification', label: '类别', slots: 'filter-type' },
+      { prop: 'title', slots: 'filter-search' }
+      // { type: 'input', prop: 'category_id', prefixIcon: 'Search' }
+    ],
+    columns: [
+      { label: '视频标题', prop: 'name', align: 'center' },
+      { label: '视频分类', prop: 'classification_name', align: 'center' },
+      { label: '知识点', prop: 'knowledge_points', align: 'center' },
+      { label: '封面', slots: 'table-cover', width: 150, align: 'center' },
+      { label: '资源状态', prop: 'status_name', align: 'center' },
+      { label: '审核状态', prop: 'audit_status_name', align: 'center' },
+      { label: '更新人', prop: 'updated_operator_name', align: 'center' },
+      { label: '更新人部门', prop: 'organ_id_name', align: 'center' },
+      { label: '更新日期', prop: 'updated_time', align: 'center' },
+      { label: '操作', slots: 'table-operate', align: 'center' }
+    ]
+  }
+})
+
+  // 下拉选择tree 视频分类
+  let selectTree = $ref([])
+  getCategoryList({ type: 'tree' }).then((res) => {
+    selectTree = res.data
+  })
+  const defaultProps = {
+    children: 'children',
+    label: 'category_name',
+    value: 'id'
+  }
 </script>
 
 <template>
   <AppCard>
     <div class="video-head">
-      <el-tabs>
-        <el-tab-pane label="我的资源"></el-tab-pane>
-        <el-tab-pane label="部门资源"></el-tab-pane>
-        <el-tab-pane label="公开资源"></el-tab-pane>
+      <el-tabs @tab-change="tabChange" v-model="tabValue">
+        <el-tab-pane label="我的资源" name="1"></el-tab-pane>
+        <el-tab-pane label="部门资源" name="2"></el-tab-pane>
+        <el-tab-pane label="公开资源" name="3"></el-tab-pane>
       </el-tabs>
       <el-icon class="video-head-icon" @click="isCard = !isCard"><Expand /></el-icon>
     </div>
@@ -69,6 +95,9 @@ const listOptions = {
       <template #table-cover="{ row }">
         <img :src="row.cover" style="width:150px;display: block;">
       </template>
+      <template #filter-type="{ params }">
+        <el-tree-select :props="defaultProps" v-model="params.classification" :data="selectTree" />
+      </template>
       <template #filter-search="{ params }">
         <el-input v-model="params.title" placeholder="搜索" :prefix-icon="Search" />
       </template>
@@ -88,6 +117,7 @@ const listOptions = {
         <div class="card-list" v-if="data.length">
           <CardListItem v-for="(item, index) in data" :data="item" :key="index"></CardListItem>
         </div>
+        <el-empty v-else description="description" />
         <!-- <div class="resource-video-item" v-for="item in data" :key="item.id">{{ item.title }}</div> -->
       </template>
     </AppList>