update

src/components/base/Protocol.vue

 <script setup lang="ts">
 import PreviewFiles from './PreviewFiles.vue'
-const dialogVisible = ref(false)
+let dialogVisible = ref(false)
 
 const protocol = ref(false)
+
+const prop = defineProps({
+  select: Boolean
+})
+
 const item = {
   url: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/%E7%B4%AB%E8%8D%86%E6%95%99%E8%82%B2%E7%94%A8%E6%88%B7%E5%85%A5%E9%A9%BB%E5%8F%8A%E7%BD%91%E7%BB%9C%E6%95%99%E5%AD%A6%E8%B5%84%E6%BA%90%E5%8D%8F%E8%AE%AE(1).docx'
 }
@@ -15,6 +20,10 @@ const changeProtocol = (flag?: boolean) => {
   emit('change', protocol)
   dialogVisible.value = false
 }
+
+onMounted(() => {
+  protocol.value = prop.select
+})
 </script>
 <template>
   <div style="display: flex; align-items: center">

src/modules/resource/video/components/UploadMultipleVideo.vue

 <script setup lang="ts">
 import VideoDetail from './VideoDetail.vue'
 import { getCreateAuth, updateAuth } from '@/api/base'
+import { CircleClose } from '@element-plus/icons-vue'
 const idShowMore = ref(false)
 
 // uploadInfo 包含要上传的文件信息
@@ -129,6 +130,13 @@ const handleView = () => {
 function percentage(value: number) {
   return parseFloat((value ? value * 100 : 0).toFixed(2))
 }
+
+// 删除上传文件
+const deleteFile = function (index: number) {
+  console.log(index, 'deleteFile', fileList)
+  fileList.splice(index, 1)
+  uploader.deleteFile(index)
+}
 defineExpose({ uploader, fileList: $$(fileList) })
 </script>
 <template>
@@ -142,13 +150,15 @@ defineExpose({ uploader, fileList: $$(fileList) })
       <div class="video-info">
         <span class="name">{{ item.file?.name }}</span>
         <el-progress style="width: 200px" :percentage="percentage(item.loaded)" class="view" />
+        <div v-if="percentage(item.loaded) == 100">上传成功</div>
+        <el-icon v-else @click="deleteFile(index)"><CircleClose /></el-icon>
       </div>
     </div>
-    <el-link :underline="false" type="primary" v-if="fileList.length > 3" @click="handleView"
+    <el-link style="padding-top: 3px" :underline="false" type="primary" v-if="fileList.length > 3" @click="handleView"
       >共{{ fileList.length }}个文件，查看更多</el-link
     >
   </div>
-  <VideoDetail :videoList="fileList" v-model="idShowMore" v-if="idShowMore === true" />
+  <VideoDetail :videoList="fileList" v-model:modelValue="idShowMore" v-if="idShowMore === true" />
 </template>
 <style lang="scss">
 .demo-progress {
@@ -191,6 +201,7 @@ defineExpose({ uploader, fileList: $$(fileList) })
   }
   .video-info {
     display: flex;
+    align-items: center;
     margin-top: 10px;
     .name {
       color: #333333;

src/modules/resource/video/components/VideoDetail.vue

@@ -19,6 +19,7 @@ interface UploadInfo {
 }
 interface Props {
   videoList: UploadInfo[]
+  modelValue: boolean
 }
 interface Emits {
   (e: 'update:modelValue', modelValue: boolean): void
@@ -30,7 +31,7 @@ const page = reactive({
   size: 10,
   currentPage: 1
 })
-const handleCancel = () => {
+const handleCancel = function () {
   emit('update:modelValue', false)
 }
 const handleSizeChange = (val: any) => {
@@ -44,7 +45,7 @@ function percentage(value: number) {
 }
 </script>
 <template>
-  <el-dialog title="更多视频文件" :before-close="handleCancel" width="30vw">
+  <el-dialog :model-value="props.modelValue" title="更多视频文件" :before-close="handleCancel" width="30vw">
     <div
       v-for="(item, index) in props.videoList.slice((page.currentPage - 1) * page.size, page.currentPage * page.size)"
       :key="index"

src/modules/resource/video/index.ts

@@ -9,7 +9,8 @@ export const routes: Array<RouteRecordRaw> = [
       { path: '', component: () => import('./views/List.vue') },
       { path: 'update', component: () => import('./views/Update.vue') },
       { path: 'view', component: () => import('./views/View.vue') },
-      { path: 'edit-courseware', component: () => import('./views/EditCourseware.vue') }
+      { path: 'edit-courseware', component: () => import('./views/EditCourseware.vue') },
+      { path: 'upload', component: () => import('./views/BatchUpload.vue') }
       // { path: 'update/:id', component: () => import('./views/Update.vue'), props: true }
     ]
   }

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

+<script lang="ts" setup>
+import { ElMessage } from 'element-plus'
+import { useGetCategoryList } from '@/composables/useGetCategoryList'
+import { createVideo } from '../api'
+import UploadMultipleVideo from '../components/UploadMultipleVideo.vue'
+
+// const emit = defineEmits<Emits>()
+
+const router = useRouter()
+
+let { list: selectTree }: any = useGetCategoryList()
+const defaultProps = { children: 'children', label: 'category_name', value: 'id' }
+const closeStatus = ref(true)
+const form = reactive({
+  source_id: '',
+  name: '0',
+  classification: ''
+})
+
+// interface Emits {
+//   (e: 'update:modelValue', modelValue: boolean): void
+//   (e: 'update'): void
+// }
+const uploadMultipleVideoRef = $ref<InstanceType<typeof UploadMultipleVideo> | null>(null)
+// const handleConfirm = () => {
+//   emit('update:modelValue', false)
+//   emit('update')
+// }
+// const handleCancel = () => {
+//   const fileList = uploadMultipleVideoRef?.uploader?._uploadList || []
+//   if (fileList.length) {
+//     for (const item of fileList) {
+//       if (item.state === 'Uploading') {
+//         return ElMessage.error('请先完成上传')
+//       }
+//     }
+//   }
+//   emit('update:modelValue', false)
+// }
+// 上传视频成功
+const uploadVideo = (data: any) => {
+  const { file, videoId } = data
+  const params = {
+    name: file.name.slice(0, file.name.lastIndexOf('.')),
+    source: '2',
+    classification: form.classification,
+    knowledge_points: '',
+    source_id: videoId,
+    cover: ''
+  }
+  createVideo(params).then(() => {
+    ElMessage.success('视频上传成功')
+  })
+}
+const handleClose = (val: any) => {
+  closeStatus.value = val.closeStatus
+}
+
+const goBack = function () {
+  router.push('/resource/video')
+}
+</script>
+<template>
+  <el-form :model="form" label-suffix="：">
+    <el-form-item label="视频分类" prop="classification">
+      <el-tree-select
+        node-key="id"
+        :render-after-expand="false"
+        :props="defaultProps"
+        v-model="form.classification"
+        :data="selectTree"
+        clearable
+        placeholder="视频分类"
+        :default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []"
+      />
+    </el-form-item>
+    <el-form-item label="视频文件" prop="source_id" v-if="form.classification !== ''">
+      <UploadMultipleVideo @upload="uploadVideo" @canClose="handleClose" ref="uploadMultipleVideoRef" />
+    </el-form-item>
+    <el-form-item label="视频名称" prop="name">
+      <el-radio-group v-model="form.name">
+        <el-radio label="0">源自文件名称</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <!-- disabled -->
+    <el-form-item>
+      <el-button type="primary" @click="goBack">保存</el-button>
+      <el-button @click="goBack">取消</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<style></style>

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

@@ -6,7 +6,7 @@ import { useGetCategoryList } from '@/composables/useGetCategoryList'
 import { useProjectList } from '@/composables/useGetProjectList'
 import { useMapStore } from '@/stores/map'
 import { useUserStore } from '@/stores/user'
-import BatchImportVideo from '../components/BatchImportVideo.vue'
+// import BatchImportVideo from '../components/BatchImportVideo.vue'
 
 // 判断当前用户是不是超级管理员
 const user = useUserStore().roles
@@ -14,6 +14,8 @@ const isAdmin = !!user.find((item: any) => item.name === '超级管理员')
 
 const store = useMapStore()
 
+// const router = useRouter()
+
 // 筛选部门列表
 const departmentList: any = useProjectList('', '79806610719731712').departmentList
 
@@ -27,7 +29,7 @@ const defaultProps = {
 // 资源出处 tab触发
 const tabValue = ref('1')
 const appList = ref()
-const isShowBatchImport = ref(false)
+// const isShowBatchImport = ref(false)
 const tabChange = () => {
   appList.value.refetch()
 }
@@ -92,7 +94,9 @@ const changeCard = () => {
 }
 // 批量上传
 const handleBatchImport = () => {
-  isShowBatchImport.value = true
+  window.open('/resource/video/upload')
+  // router.push('/resource/video/upload')
+  // isShowBatchImport.value = true
 }
 </script>
 
@@ -180,7 +184,7 @@ const handleBatchImport = () => {
       </template>
     </AppList>
   </AppCard>
-  <BatchImportVideo v-model="isShowBatchImport" v-if="isShowBatchImport === true" @update="typeFilter" />
+  <!-- <BatchImportVideo v-model="isShowBatchImport" v-if="isShowBatchImport === true" @update="typeFilter" /> -->
 </template>
 <style lang="scss" scoped>
 .card-list {

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

@@ -259,7 +259,7 @@ const changeProtocol = (data: any) => {
       </el-form-item>
     </el-form>
     <div class="protocol-box">
-      <Protocol @change="changeProtocol"></Protocol>
+      <Protocol :select="true" @change="changeProtocol"></Protocol>
     </div>
     <div class="btn-box">
       <div class="confirm" @click="submitForm(ruleFormRef)">保存</div>