update

.eslintrc-auto-import.json

@@ -134,6 +134,7 @@
     "useDisplayMedia": true,
     "useDocumentVisibility": true,
     "useDraggable": true,
+    "useDropZone": true,
     "useElementBounding": true,
     "useElementByPoint": true,
     "useElementHover": true,

auto-imports.d.ts

@@ -135,6 +135,7 @@ declare global {
   const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
   const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
   const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useDropZone: typeof import('@vueuse/core')['useDropZone']
   const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
   const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
   const useElementHover: typeof import('@vueuse/core')['useElementHover']

src/api/base.ts

@@ -48,3 +48,8 @@ export function getCreateAuth(data: { title: string, file_name: string }) {
 export function updateAuth(data: { source_id: string }) {
   return httpRequest.post('/api/resource/v1/resource/video/create-auth', data)
 }
+
+// 获取分类列表
+export function getCategoryList(params: { type: string; category_name?: string }) {
+  return httpRequest.get('/api/resource/v1/backend/category/list', { params })
+}
\ No newline at end of file

src/components/base/AppUpload.vue

@@ -48,7 +48,8 @@ const handleSuccess = (response: any, file: any, files: any) => {
     emit(
       'update:modelValue',
       files.map((item: any) => {
-        return { name: item.name, url: item.url || item.raw.url }
+        console.log(item, 'items')
+        return { name: item.name, url: item.url || item.raw.url, size: item.raw.size, type: item.raw.type || item.raw.url }
       })
     )
   } else {
@@ -95,7 +96,7 @@ const handlePreview: UploadProps['onPreview'] = uploadFile => {
         <el-icon><Plus /></el-icon>
       </template> 
       <template v-else>
-        <el-button type="primary">点击上传</el-button>
+        <el-button type="primary" class="app-upload-btn">点击上传</el-button>
       </template>
     </template>
     <div class="avatar-uploader" v-else>

src/modules/resource/lessonplan/api.ts

 import httpRequest from '@/utils/axios'
 
-// 获取教案列表
-export function getLessonList(params?: {
-  tab: string
-  status?: string
-  authorized?: string
-  classification?: string
-  page?: number
-  ['per-page']?: number
-}) {
-  return httpRequest.get('/api/resource/v1/resource/lesson-plan/list', { params })
+// 获取视频列表
+export function getVideoList(params?: { type?: string; page?: number; page_size?: number }) {
+  return httpRequest.get('/api/psp/backend/video/index', { params })
 }
 
-// 获取项目列表
-export function getProjectList(params: { organization_id: string }) {
-  return httpRequest.get('/api/resource/v1/util/members', { params })
+// 创建视频
+export function createVideo(data: { course_name: string; cover_page: string; type: string; weight?: string }) {
+  return httpRequest.post('/api/psp/backend/video/create', data)
 }
-// 获取分类列表
-export function getCategoryList(params: { type: string; category_name?: string }) {
-  return httpRequest.get('/api/resource/v1/backend/category/list', { params })
+
+// 更新视频
+export function updateVideo(data: { id: string; course_name: string; cover_page: string; type: string; weight?: string }) {
+  return httpRequest.post('/api/psp/backend/video/update', data)
+}
+
+// 获取视频详情
+export function getVideo(params: { id: string }) {
+  return httpRequest.get('/api/psp/backend/video/view', { params })
 }

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

 <script setup lang="ts">
-  import UploadAuth from '@/components/base/UploadAuth.vue'
+  import AppUpload from '@/components/base/AppUpload.vue'
+  import { getCategoryList } from '@/api/base'
+  import type { FormInstance } from 'element-plus'
+  import { ElMessage } from 'element-plus'
+  
+  // 路由
+  const router = useRouter()
+
+  // 下拉选择tree 视频分类
+  const defaultProps = {
+    children: 'children',
+    label: 'category_name',
+    value: 'id'
+  }
+  let selectTree = $ref([])
+  getCategoryList({ type: 'tree' }).then((res: any) => {
+    selectTree = res.data
+  })
 
   // form表单
-  const form = reactive({ videoFile: '', videoName: '', videoType: '', zsd: '', aliyun_video_id: '', weight: '' })
-  const rules = {}
-  const data = [
-    {
-      value: '1',
-      label: 'Level one 1',
-      children: [
-        {
-          value: '1-1',
-          label: 'Level two 1-1',
-          children: [
-            {
-              value: '1-1-1',
-              label: 'Level three 1-1-1',
-            },
-          ],
-        },
-      ],
-    },
-    {
-      value: '2',
-      label: 'Level one 2',
-      children: [
-        {
-          value: '2-1',
-          label: 'Level two 2-1',
-          children: [
-            {
-              value: '2-1-1',
-              label: 'Level three 2-1-1',
-            },
-          ],
-        },
-        {
-          value: '2-2',
-          label: 'Level two 2-2',
-          children: [
-            {
-              value: '2-2-1',
-              label: 'Level three 2-2-1',
-            },
-          ],
-        },
-      ],
-    },
-    {
-      value: '3',
-      label: 'Level one 3',
-      children: [
-        {
-          value: '3-1',
-          label: 'Level two 3-1',
-          children: [
-            {
-              value: '3-1-1',
-              label: 'Level three 3-1-1',
-            },
-          ],
-        },
-        {
-          value: '3-2',
-          label: 'Level two 3-2',
-          children: [
-            {
-              value: '3-2-1',
-              label: 'Level three 3-2-1',
-            },
-          ],
-        },
-      ],
-    },
-  ]
-  // 协议
-  const protocol = ref(false)
-  // 上传视频过程返回值
-  const videoUpload = reactive({ code: -1, msg: '', progress: 0, fileName: '' })
-  // 上传视频回调
-  const uploadProgress = (res: any) => {
-    videoUpload.progress = res
+  const form:any = reactive({ file: [], name: '', source: '2', classification: '', knowledge_points: '', url: '', type: '', size: '' })
+  // 表单验证
+  const rules = {
+    name: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+    classification: [{ required: true, message: '请选择分类', trigger: 'change' }],
+    file: [{ required: true, message: '' }]
   }
-  const upload = (res: any) => {
-    const { code, msg, name } = res
-    videoUpload.code = code
-    videoUpload.msg = msg
-    videoUpload.fileName = name
-    videoUpload.progress = 0
+  // 新建编辑表单提交
+  const ruleFormRef = ref<FormInstance>()
+  const submitForm = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    await formEl.validate((valid, fields) => {
+      console.log(valid, 'valid', fields)
+      if (valid) {
+        if (!protocol.value) {
+          ElMessage('请勾选用户协议')
+          return
         }
+        const id = router.currentRoute.value.query.id as string
+        if (id !== '' && id) {
+          // const params = Object.assign({ id: id }, form)
+          // updateVideo(params).then((res: any) => {
+          //   if (res.code === 0) {
+          //     ElMessage({ message: '更新成功', type: 'success' })
+          //     setTimeout(() => {
+          //       router.push({
+          //         path: '/resource/video'
+          //       })
+          //     }, 1000)
+          //   }
+          // })
+        } else {
+          // createVideo(form).then((res:any) => {
+          //   if (res.code === 0) {
+          //     ElMessage({ message: '创建成功', type: 'success' })
+          //     setTimeout(() => {
+          //       router.push({
+          //         path: '/resource/video'
+          //       })
+          //     }, 1000)
+          //   }
+          // })
+        }
+        
+      } else {
+        ElMessage('请完善信息')
+        console.log('error submit!', fields)
+      }
+    })
+  }
+  // 协议
+  const protocol = ref(false)
 </script>
 
 <template>
@@ -99,37 +81,29 @@
       <div class="btn-item">资源下线</div>
       <div class="btn-item">更改负责人</div>
     </div>
-    <el-form ref="formRef" :model="form" :rules="rules" style="width: 70%">
-      <el-form-item label="教案文件：" prop="course_name">
+    <el-form ref="ruleFormRef" :model="form" :rules="rules" style="width: 70%">
+      <el-form-item label="教案文件：" prop="file">
         <div>
           <div class="upload-video">
+            <div class="upload-box">
+              <AppUpload :limit="1" v-model="form.file"></AppUpload>
               <div class="upload-btn">
                 本地文件
-              <UploadAuth @progress="uploadProgress" @upload="upload"></UploadAuth>
-            </div>
-            <div class="demo-progress" v-if="videoUpload.code === 1">
-              <el-progress :percentage="videoUpload.progress" status="success" />
-            </div>
-            <div class="error video-info" v-if="videoUpload.code === 2">
-              <div class="name">上传失败</div>
               </div>
-            <div class="video-info" v-if="videoUpload.code === 0">
-              <div class="name">{{ videoUpload.fileName }}</div>
-              <div class="view">查阅</div>
             </div>
           </div>
           <div class="tips">课件支持格式包含：doc docx pdf ppt pptx，大小不超过50M</div>
         </div>
       </el-form-item>
-      <el-form-item label="教案名称：" prop="course_name">
-        <el-input v-model="form.videoName" />
+      <el-form-item label="教案名称：" prop="name">
+        <el-input v-model="form.name" />
       </el-form-item>
-      <el-form-item label="教案分类：" prop="course_name">
-        <el-tree-select style="width:100%" v-model="form.videoType" :data="data" />
+      <el-form-item label="教案分类：" prop="classification">
+        <el-tree-select :props="defaultProps" style="width:100%" v-model="form.classification" :data="selectTree" />
       </el-form-item>
-      <el-form-item label="&nbsp;&nbsp;&nbsp;知识点：" prop="course_name">
+      <el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知识点：">
         <el-input
-          v-model="form.zsd"
+          v-model="form.knowledge_points"
           :rows="2"
           type="textarea"
         />
@@ -141,12 +115,20 @@
       </el-checkbox>
     </div>
     <div class="btn-box">
-      <div class="confirm">保存</div>
+      <div class="confirm" @click="submitForm(ruleFormRef)">保存</div>
       <div class="cancel">取消</div>
     </div>
   </AppCard>
 </template>
-<style lang="scss" scoped>
+<style lang="scss">
+.upload-box{
+  position: relative;
+  .app-upload-btn{
+    position: relative;
+    z-index: 99;
+    opacity: 0.0001 !important;
+  }
+}
 .tips{
   font-size: 12px;
   line-height: 100%;
@@ -281,7 +263,9 @@
   display: flex;
   align-items: center;
   .upload-btn{
-    position: relative;
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 94px;
     line-height: 36px;
     background: rgba(250, 223, 230, 0.39);

src/modules/resource/video/api.ts

@@ -10,11 +10,6 @@ export function createVideo(data: { name: string; source: string; classification
   return httpRequest.post('/api/resource/v1/resource/video/create', data)
 }
 
-// 获取分类列表
-export function getCategoryList(params: { type: string; category_name?: string }) {
-  return httpRequest.get('/api/resource/v1/backend/category/list', { params })
-}
-
 // 获取封面列表
 export function getCoverList() {
   return httpRequest.get('/api/resource/v1/util/get-cover-list')

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

 <script setup lang="ts">
-import { getVideoList, getProjectList, getCategoryList } from '../api'
+import { getVideoList, getProjectList } from '../api'
+import { getCategoryList } from '@/api/base'
 import CardListItem from '../components/CardListItem.vue'
 import { Expand, Search } from '@element-plus/icons-vue'
 
@@ -62,7 +63,7 @@ const listOptions = $computed(() => {
 
 // 下拉选择tree 视频分类
 let selectTree = $ref([])
-getCategoryList({ type: 'tree' }).then((res) => {
+getCategoryList({ type: 'tree' }).then((res: any) => {
   selectTree = res.data
 })
 const defaultProps = {

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

@@ -5,11 +5,8 @@
   import Upload from '../components/Upload.vue'
   import Operation from '../components/Operation.vue'
   import UploadAuth from '@/components/base/UploadAuth.vue'
-  // import { useMapStore } from '@/stores/map'
-  import { getCategoryList, getCoverList, createVideo, getVideoDetails, updateVideo } from '../api'
-  // const store= useMapStore()
-  // console.log(store)
-  // const statusList = store.mapList.filter((item: any) => item.key === 'system_status')[0].values
+  import { getCoverList, createVideo, getVideoDetails, updateVideo } from '../api'
+  import { getCategoryList } from '@/api/base'
 
   // 路由
   const router = useRouter()