资源

generated/core/OpenAPI.ts

@@ -21,7 +21,8 @@ export type OpenAPIConfig = {
 
 
 export const OpenAPI: OpenAPIConfig = {
-    BASE: 'http://39.106.16.162:8080',
+    //BASE: 'http://39.106.16.162:8080',
+    BASE: 'http://127.0.0.1:8080',
     VERSION: '1.0.0',
     WITH_CREDENTIALS: false,
     CREDENTIALS: 'include',
@@ -33,7 +34,7 @@ export const OpenAPI: OpenAPIConfig = {
 };
 
   // BASE: 'http://39.106.16.162:8080',
-//   BASE: 'http://127.0.0.1:8080/api',
+
 //   VERSION: '1.0.0',
 //   WITH_CREDENTIALS: false,
 //   CREDENTIALS: 'include',

generated/services/CourseResourceControllerService.ts

@@ -85,7 +85,7 @@ export class CourseResourceControllerService {
         courseResources: CourseResources,
     ): CancelablePromise<BaseResponse_string_> {
         return __request(OpenAPI, {
-            method: 'GET',
+            method: 'POST',
             url: '/api/courses/save',
             body: courseResources,
             errors: {

src/views/courseResources/componse/resourceAdd.vue

@@ -1,69 +1,53 @@
 <script setup>
 import { ref } from 'vue'
-
+const visibilerDrawer = ref(false)
-import { CourseResourceControllerService } from '../../../../generated/services/CourseResourceControllerService'
-const props = defineProps(['dafulIndex'])
-import tool from '@/utils/oss.js'
 import { ElMessage } from 'element-plus'
-
+import { CourseResourceControllerService } from '../../../../generated/services/CourseResourceControllerService'
-const emit = defineEmits(['getpptresourceList'])
-const getresourceList = () => {
-  emit('getpptresourceList', 'type')
-}
-//默认抽屉隐藏
-const visibleDramwer = ref(false)
 //默认数据
 const defaultForm = {
   description: '',
   id: '',
-  img: '',
+  img: '', //封面
   name: '',
-  type: '',
+  type: '', //资源类型
   path: '',
 }
+const imageUrl = ref('')
+const onSelectFile = (uploadFile) => {
+  // console.log(uploadFile)
+  //预览图片
+  imageUrl.value = URL.createObjectURL(uploadFile.raw)
+  //将图片存入
+  formModel.value.img = uploadFile.raw
+}
 //准备数据
+
 const formModel = ref({
   ...defaultForm,
 })
-//表单的校验
+const open = (row) => {
-const rules = {
+  visibilerDrawer.value = true
-  name: [
+  // console.log(row)
-    { required: true, message: '请输入资源名称', trigger: 'blur' },
-    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
-  ],
-  description: [
-    { required: true, message: '请输入资源简介', trigger: 'blur' },
-    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
-  ],
-}
-
-//组件对外暴露一个open 方法 根据传来的参数区分添加还是编辑
-const open = async (row) => {
-  visibleDramwer.value = true
   if (row.id) {
-    //需要基于row.id 发送请求，获取编辑的详情数据，进行回显
+    //需要基于row.id发送请求，获取编辑对应的详情数据，进行回显
-    const res = await CourseResourceControllerService.getAllUsingGet1(row.id)
-    //回显
-    formModel.value = res.data.records
-    console.log(res)
-
-    //图片回显
-
     console.log('编辑回显')
   } else {
-    //重置表单数据
     formModel.value = {
       ...defaultForm,
-    }
+    } //重置form表单
+    //重置图片
+    imageUrl.value = ''
+    console.log('添加')
   }
 }
-
+//表单的校验
-defineExpose({
+const rules = {
-  open,
+  name: [
-})
+    { required: true, message: '请输入资源名称', trigger: 'blur' },
-
+    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
-const selectVal = ref(props.dafulIndex)
+  ],
-
+  type: [{ required: true, trigger: 'blur' }],
+}
 const selectOp = ref([
   { label: 'ppt', value: '1' },
   { label: '图片', value: '2' },
@@ -72,52 +56,18 @@ const selectOp = ref([
   { label: '文件', value: '5' },
   { label: '音频', value: '6' },
 ])
-
-const upload = async (option) => {
-  const res = await tool.oss.upload(option.file)
-  const url = 'https://wenyu132.oss-cn-beijing.aliyuncs.com/' + res.name
-
-  formModel.value.img = url
-}
-
 const fileList = ref([])
 const clearFileList = () => {
   console.log(fileList)
-  fileList.value.length = 0
+
   fileList.value = []
 }
-const handleSel = () => {
-  fileList.value.length = 0
-}
 
-const formRef = ref()
-const isSubmit = async () => {
-  formRef.value.validate(async (valid, fields) => {
-    if (valid) {
-      const params = {
-        name: formModel.value.name,
-        type: selectVal.value,
-        img: formModel.value.img,
-        description: formModel.value.description,
-        path: formModel.value.img,
-      }
-      console.log(params)
-      await CourseResourceControllerService.saveCourseResourceUsingGet1(params)
-      visibleDramwer.value = false
-      clearFileList()
-      ElMessage.success('添加成功')
-      getresourceList()
-    } else {
-      console.log('error submit!', fields)
-    }
-  })
-}
-// upd
 const beforeAvatarUpload = (rawFile) => {
   console.log('执行了')
-  switch (+selectVal.value) {
+  switch (+formModel.value.type.value) {
     case 1:
-      if (rawFile.type !== 'application/vnd.ms-powerpoint') {
+      if (rawFile.type !== 'applicationnd.ms-powerpoint') {
         clearFileList()
         ElMessage.error('必须是ppt文件！')
       } else {
@@ -143,7 +93,7 @@ const beforeAvatarUpload = (rawFile) => {
       }
       break
     case 4:
-      if (!rawFile.type.startsWith('application/pdf')) {
+      if (!rawFile.type.startsWith('applicationf')) {
         clearFileList()
         ElMessage.error('必须是pdf文件！')
       } else {
@@ -154,7 +104,7 @@ const beforeAvatarUpload = (rawFile) => {
     case 5:
       if (
         !rawFile.type.startsWith(
-          'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+          'applicationnd.openxmlformats-officedocument.wordprocessingml.document',
         ) &&
         !rawFile.type.startsWith('application/msword')
       ) {
@@ -176,36 +126,45 @@ const beforeAvatarUpload = (rawFile) => {
       break
   }
 }
+//提交
+const emit = defineEmits('success')
+const isSubmit = async () => {
+  //发请求
+  if (formModel.value.id) {
+    console.log('编辑')
+  } else {
+    console.log(formModel.value)
+    await CourseResourceControllerService.saveCourseResourceUsingGet1(
+      formModel.value,
+    )
+    ElMessage.success('添加成功')
+    visibilerDrawer.value = false
+    //通知父组件
+    emit('success', 'add')
+  }
+}
 const isabolish = () => {
-  clearFileList()
+  visibilerDrawer.value = false
-  visibleDramwer.value = false
+  formModel.value = []
+  imageUrl.value = ''
+  // console.log(formModel.value)
 }
+defineExpose({
+  open,
+})
 </script>
 <template>
-  <el-drawer
+  <el-drawer v-model="visibilerDrawer" title="标题" direction="rtl" size="50%">
-    v-model="visibleDramwer"
+    <el-form :model="formModel" ref="fromRef" :rules="rules">
-    :title="formModel.id ? '编辑资源' : '添加资源'"
-    direction="rtl"
-    size="50%"
-  >
-    <!-- 添加资源表单 -->
-    <el-form
-      class="resourceformModel"
-      :model="formModel"
-      ref="formRef"
-      :rules="rules"
-      label-width="100px"
-    >
       <el-form-item label="资源名称" prop="name">
         <el-input
           v-model="formModel.name"
           placeholder="请输入资源名称"
         ></el-input>
       </el-form-item>
-      <el-form-item label="资源类型">
+      <el-form-item label="资源类型" prop="type">
         <el-select
-          @change="handleSel"
+          v-model="formModel.type"
-          v-model="selectVal"
           placeholder="请选择资源类型"
           size="large"
           style="width: 100%"
@@ -218,18 +177,17 @@ const isabolish = () => {
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="上传资源" prop="fileList">
+      <el-form-item label="资源封面" prop="img">
+        <!-- 此处需要关闭自动上传 -->
         <el-upload
-          v-model:file-list="fileList"
+          class="avatar-uploader"
-          :http-request="upload"
+          :show-file-list="false"
-          :limit="1"
+          :auto-upload="false"
-          class="upload-demo"
-          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-          list-type="picture"
           :before-upload="beforeAvatarUpload"
+          :on-change="onSelectFile"
         >
-          <el-button type="primary">点击上传资源</el-button>
+          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
-          <template #file></template>
+          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
         </el-upload>
       </el-form-item>
       <el-form-item label="资源简介" prop="description">
@@ -246,11 +204,31 @@ const isabolish = () => {
   </el-drawer>
 </template>
 <style lang="scss" scoped>
-.editor {
+.avatar-uploader {
-  width: 100%;
+  :deep() {
-
+    .avatar {
-  :deep(.ql-editor) {
+      width: 178px;
-    min-height: 200px;
+      height: 178px;
+      display: block;
+    }
+    .el-upload {
+      border: 1px dashed var(--el-border-color);
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      transition: var(--el-transition-duration-fast);
+    }
+    .el-upload:hover {
+      border-color: var(--el-color-primary);
+    }
+    .el-icon.avatar-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 178px;
+      height: 178px;
+      text-align: center;
+    }
   }
 }
 </style>

src/views/courseResources/index.vue

@@ -19,8 +19,8 @@ const total = ref(0)
 const pptresourceList = ref([])
 const loading = ref(false)
 const params = ref({
-  // pagesize: '10',
+  pagesize: '10',
-  // pagenum: '1',
+  pagenum: '1',
   type: '1', //设置默认显示ppt类型
 })
 
@@ -85,7 +85,7 @@ const param = ref({
   download: '0',
   content: '',
   address: '/portal',
-  type: '4',
+  type: '1',
 })
 //点击生成浏览记录
 const generateRecords = async (rescource) => {
@@ -95,20 +95,32 @@ const generateRecords = async (rescource) => {
   // console.log(param)
 }
 
-const resourceAddRef = ref()
+const rescourceRef = ref()
-//添加资源
+//添加
 const onAddResource = () => {
-  resourceAddRef.value.open({})
+  rescourceRef.value.open({})
 }
-//编辑资源
 const onEditResource = (row) => {
-  resourceAddRef.value.open(row)
+  rescourceRef.value.open(row)
+}
+//添加或者编辑的回调
+const onsuccess = (state) => {
+  if (state == 'add') {
+    // 添加  渲染最后一页
+    const lastPage = Math.ceil((total.value + 1) / params.value.pagesize)
+    //更新成最大页码数
+    params.value.pagenum = lastPage
+    getpptresourceList()
+  } else {
+    //编辑  渲染当前页面
+    getpptresourceList()
+  }
 }
 </script>
 <template>
   <div>
     <div class="top">
-      <el-button @click="onAddResource">添加资源</el-button>
+      <el-button @click="onAddResource()">添加资源</el-button>
     </div>
     <div class="body">
       <div class="nav">
@@ -184,7 +196,7 @@ const onEditResource = (row) => {
                 <el-icon @click="onDeleteResource(resource.id)">
                   <Delete />
                 </el-icon>
-                <el-icon @click="onEditResource(row)">
+                <el-icon @click="onEditResource(resource)">
                   <Edit />
                 </el-icon>
               </div>
@@ -219,11 +231,7 @@ const onEditResource = (row) => {
           />
         </div>
         <!-- 添加编辑的抽屉 -->
-        <resource-add
+        <resource-add ref="rescourceRef" @success="onsuccess"></resource-add>
-          :dafulIndex="params.type"
-          ref="resourceAddRef"
-          @getpptresourceList="getpptresourceList"
-        ></resource-add>
         <!--  -->
       </div>
     </div>