update

src/modules/course/create/components/stepTwoComponents/AddVideoDialog.vue

@@ -3,6 +3,7 @@ import { getVideoList, createCharacter, getCourseListSearch, getLessonList, getO
 import CardListItem from './CardListItem.vue'
 import { useGetCategoryList } from '@/composables/useGetCategoryList'
 import { ElMessage } from 'element-plus'
+import { PictureFilled } from '@element-plus/icons-vue'
 const appList = ref()
 // 资源出处 tab触发
 const tabValue = ref('1')
@@ -74,6 +75,7 @@ const listOptions = computed(() => {
       callback(data: any) {
         data.list.forEach((item: any) => (item.check_status = false))
         tableData = data
+        console.log(tableData.list, '123')
         return { list: data.list, total: data.total }
       },
       params: { tab: tabValue, status: '1', authorized: '', name: '', course_id: props.course_id || '' }
@@ -82,7 +84,25 @@ const listOptions = computed(() => {
       { prop: 'classification', label: '类别：', slots: 'filter-type' },
       { type: 'input', prop: 'name', label: '标题：' }
     ],
-    columns: [],
+    columns: [
+      { type: 'selection' },
+      {
+        label: '视频标题',
+        prop: 'name',
+        align: 'center',
+        computed({ row }: any) {
+          return row.name?.length > 10 ? `${row.name.slice(0, 10)}...` : row.name
+        }
+      },
+      { 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' }
+    ],
     data: tableData.list
   }
 })
@@ -156,21 +176,43 @@ const checkboxSelect = function () {
 const addVideo = function () {
   const data = tableData.list.filter((item: any) => item.check_status === true)
   data.forEach((item: any, index: number) => {
-    const params: any = {
-      name: item.name,
-      course_id: props.course_id,
-      resource_type: props.btnInfo.resource_type,
-      parent_id: props.chapterID,
-      resource_id: item.id
+    addRequest(item, index, data)
+  })
+}
+
+const addRequest = function (item: any, index: number, data: any) {
+  const params: any = {
+    name: item.name,
+    course_id: props.course_id,
+    resource_type: props.btnInfo.resource_type,
+    parent_id: props.chapterID,
+    resource_id: item.id
+  }
+  createCharacter(params).then(() => {
+    if (index === data.length - 1) {
+      emit('update:isShowAddDialog', false)
+      emit('create', item)
+      ElMessage.success('添加成功')
     }
-    createCharacter(params).then(() => {
-      console.log(index === data.length, 'index === data.length')
-      if (index === data.length - 1) {
-        emit('update:isShowAddDialog', false)
-        emit('create', item)
-        ElMessage.success('添加成功')
-      }
-    })
+  })
+}
+
+// 列表切换
+let isCard = $ref(true)
+const changeCard = () => {
+  isCard = !isCard
+}
+
+let checkBox = $ref([])
+const select = function (row: any) {
+  checkBox = row
+  console.log(row)
+}
+
+const addVideoList = function () {
+  console.log(checkBox, 'checkBox')
+  checkBox.forEach((item: any, index: number) => {
+    addRequest(item, index, checkBox)
   })
 }
 </script>
@@ -189,8 +231,32 @@ const addVideo = function () {
         <el-tab-pane label="部门资源" name="2"></el-tab-pane>
         <el-tab-pane label="公开资源" name="3"></el-tab-pane>
       </el-tabs>
+      <div class="video-head-icon" @click="changeCard">
+        <img
+          v-if="!isCard"
+          src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_card.png"
+          alt=""
+        />
+        <img v-else src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_list.png" alt="" />
+      </div>
     </div>
-    <AppList v-bind="listOptions" ref="appList">
+    <AppList @selection-change="select" v-bind="listOptions" ref="appList">
+      <template #header-aside></template>
+      <template #table-cover="{ row }">
+        <div style="background: #ccc">
+          <el-icon :size="50" color="#fff" v-if="row.cover == ''">
+            <PictureFilled></PictureFilled>
+          </el-icon>
+          <div
+            v-else
+            :style="`width: 150px;
+              display: block;
+              height: 83px;
+              background-size: cover;
+              background-image: url(${row.cover});`"
+          ></div>
+        </div>
+      </template>
       <template #filter-type="{ params }">
         <el-tree-select
           filterable
@@ -202,7 +268,7 @@ const addVideo = function () {
           :default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []"
         />
       </template>
-      <template #body="{ data }">
+      <template #body="{ data }" v-if="isCard">
         <div class="card-list" v-if="data.length">
           <div style="display: flex; margin-bottom: 20px">
             <el-button type="primary" @click="checkboxAll">{{ checkName }}</el-button>
@@ -221,8 +287,8 @@ const addVideo = function () {
             </CardListItem>
           </div>
         </div>
-        <!-- <el-empty v-else description="暂无数据" /> -->
       </template>
+      <el-button style="margin-bottom: 20px" type="primary" @click="addVideoList" v-if="!isCard">添加</el-button>
     </AppList>
   </el-drawer>
 </template>
@@ -251,4 +317,13 @@ const addVideo = function () {
 .video-tool-btn {
   padding: 10px 0 30px 0;
 }
+
+.video-head-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 30px;
+  color: #666;
+  cursor: pointer;
+}
 </style>