From 0a386f277e88b4a583ecb9de4039cbf373d7c1e9 Mon Sep 17 00:00:00 2001
From: lyc <ly_cheng2023@163.com>
Date: Fri, 12 Jul 2024 14:40:56 +0800
Subject: [PATCH 1/2] edit

---
 .../src/components/upload-dialog/index.vue    | 58 +++++++++++++++++++
 .../views/resource/container/resoure-list.vue |  4 +-
 .../resource/container/resoure-search.vue     | 23 ++++++--
 3 files changed, 77 insertions(+), 8 deletions(-)

diff --git a/src/renderer/src/components/upload-dialog/index.vue b/src/renderer/src/components/upload-dialog/index.vue
index e69de29..89c66f9 100644
--- a/src/renderer/src/components/upload-dialog/index.vue
+++ b/src/renderer/src/components/upload-dialog/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <el-dialog v-model="dialogValue" width="500">
+    <div class="create-main">
+      <el-form>
+        <el-form-item label="目录">
+          <div class="create-item">第二章 地球上的大气 / 大气的组成和垂直分层</div>
+        </el-form-item>
+        <el-form-item label="文件">
+          <div class="create-item file-item flex">
+            <!-- <FileUpload /> -->
+            <!-- <el-button round size="small" color="#eeeeee" class="add-btn">
+            <i class="iconfont icon-jiahao"></i>
+            添加文件
+          </el-button> -->
+            <span class="upload-desc">说明：一次最多上传5个文件，单个文件大小不能大于100M</span>
+          </div>
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closeDialog">Cancel</el-button>
+        <el-button type="primary">
+          Confirm
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, watch } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+})
+
+// 定义要发送的emit事件
+const emit = defineEmits(['update:modelValue'])
+const dialogValue = ref(false)
+
+watch(() => props.modelValue, (newVal) => {
+  dialogValue.value = newVal
+})
+
+
+const closeDialog = () => {
+  emit('update:modelValue', false)
+}
+
+
+
+</script>
+
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/renderer/src/views/resource/container/resoure-list.vue b/src/renderer/src/views/resource/container/resoure-list.vue
index 85607cd..33e440a 100644
--- a/src/renderer/src/views/resource/container/resoure-list.vue
+++ b/src/renderer/src/views/resource/container/resoure-list.vue
@@ -51,9 +51,7 @@ const pageSize = ref(100)
 const handleSizeChange = () => { }
 const handleCurrentChange = () => { }
 
-const openDrawer = ()=>{
-  drawer.value = true
-}
+
 </script>
 
 <style lang="scss">
diff --git a/src/renderer/src/views/resource/container/resoure-search.vue b/src/renderer/src/views/resource/container/resoure-search.vue
index 42b7d29..b8cf9a2 100644
--- a/src/renderer/src/views/resource/container/resoure-search.vue
+++ b/src/renderer/src/views/resource/container/resoure-search.vue
@@ -12,7 +12,8 @@
     </el-row>
     <el-row class="resoure-btns">
       <el-col :span="24" class="query-row flex">
-        <div class="flex"> <el-select v-model="sourceStore.curFormat" placeholder="Select" size="small" style="width: 100px">
+        <div class="flex"> <el-select v-model="sourceStore.curFormat" placeholder="Select" size="small"
+            style="width: 100px">
             <el-option v-for="item in sourceStore.formatList" :key="item.value" :label="item.label"
               :value="item.value" />
           </el-select>
@@ -22,21 +23,30 @@
               item.text }}</el-button>
         </div>
         <div>
-          <el-button type="primary" round size="small" @click="sourceStore.isCreate = true">
+
+          <el-button type="primary" round size="small" @click="openDialog">
             <i class="iconfont icon-jiahao"></i>
             新建资源</el-button>
         </div>
       </el-col>
     </el-row>
+    <uploadDialog v-model="isDialogOpen"/>
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import useResoureStore from '../store'
+import uploadDialog from '@/components/upload-dialog/index.vue'
 
 const sourceStore = useResoureStore()
+const isDialogOpen = ref(false)
+
+const openDialog = ()=>{
+  isDialogOpen.value = true
+}
+
 </script>
-ziy
 <style lang="scss" scoped>
 .resoure-search {
   padding: 20px;
@@ -55,16 +65,19 @@ ziy
   .resoure-btns {
     margin-top: 15px;
     justify-content: center;
-    .query-row{
+
+    .query-row {
       justify-content: space-between;
     }
+
     .line {
       width: 1px;
       height: 80%;
       background-color: #d9dce2;
       margin: 0 10px;
     }
-    .icon-jiahao{
+
+    .icon-jiahao {
       font-size: 12px;
       margin-right: 3px;
       font-weight: bold;

From 51ade77d9b2b0314973502130cc88e9c1f1df26e Mon Sep 17 00:00:00 2001
From: lyc <ly_cheng2023@163.com>
Date: Fri, 12 Jul 2024 17:56:27 +0800
Subject: [PATCH 2/2] edit

---
 .../src/components/upload-dialog/index.vue    | 165 ++++++++++++++++--
 1 file changed, 150 insertions(+), 15 deletions(-)

diff --git a/src/renderer/src/components/upload-dialog/index.vue b/src/renderer/src/components/upload-dialog/index.vue
index 89c66f9..2e9b3f4 100644
--- a/src/renderer/src/components/upload-dialog/index.vue
+++ b/src/renderer/src/components/upload-dialog/index.vue
@@ -1,27 +1,51 @@
 <template>
-  <el-dialog v-model="dialogValue" width="500">
-    <div class="create-main">
+  <el-dialog v-model="dialogValue" width="600" :before-close="beforeClose">
+    <div class="file-dialog">
       <el-form>
-        <el-form-item label="目录">
-          <div class="create-item">第二章 地球上的大气 / 大气的组成和垂直分层</div>
-        </el-form-item>
         <el-form-item label="文件">
           <div class="create-item file-item flex">
-            <!-- <FileUpload /> -->
-            <!-- <el-button round size="small" color="#eeeeee" class="add-btn">
-            <i class="iconfont icon-jiahao"></i>
-            添加文件
-          </el-button> -->
+            <el-upload action="" multiple :before-upload="hanleFileBefore" :auto-upload="true">
+              <el-button slot="trigger">选择文件</el-button>
+            </el-upload>
             <span class="upload-desc">说明：一次最多上传5个文件，单个文件大小不能大于100M</span>
           </div>
         </el-form-item>
+        <el-form-item>
+          <div class="file-list">
+            <div class="file-list-item flex" v-for="(item, index) in fileList" :key="item.uid">
+              <div class="file-name">
+                <span class="name">标题：</span>
+                <span>{{ item.name }}</span>
+              </div>
+              <div class="flex-type flex">
+                <span class="name">类别：</span>
+                <el-dropdown>
+                  <span class="el-dropdown-link">
+                    Dropdown List
+                    <!-- <el-icon class="el-icon--right">
+                  
+                    </el-icon> -->
+                  </span>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item v-for="item in resourceType" :key="item in value">Action 1</el-dropdown-item>
+                      <el-dropdown-item>Action 2</el-dropdown-item>
+                      <el-dropdown-item>Action 3</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </div>
+              <el-button type="primary" link @click="delFile(index)">删除</el-button>
+            </div>
+          </div>
+        </el-form-item>
       </el-form>
     </div>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="closeDialog">Cancel</el-button>
+        <el-button @click="closeDialog">关闭</el-button>
         <el-button type="primary">
-          Confirm
+          确定
         </el-button>
       </div>
     </template>
@@ -30,6 +54,7 @@
 
 <script setup>
 import { ref, defineProps, defineEmits, watch } from 'vue'
+import { ElMessage } from 'element-plus'
 
 const props = defineProps({
   modelValue: {
@@ -37,17 +62,78 @@ const props = defineProps({
     default: false
   },
 })
-
+const dialogValue = ref(false)
 // 定义要发送的emit事件
 const emit = defineEmits(['update:modelValue'])
-const dialogValue = ref(false)
+// 文件列表
+const fileList = ref([])
+// 资源类型
+const resourceType = ref([
+  {
+    label: '课件',
+    value: 1
+  },
+  {
+    label: '教案',
+    value: 2
+  },
+  {
+    label: '素材',
+    value: 3
+  }
+])
+
+
+
+const hanleFileBefore = (rawFile) => {
+
+  // 音频 类型
+  const audioTypes = ['audio/mpeg', 'audio/wav', 'audio/ogg', 'audio/aac']
+  // 视频 类型
+  const videoTypes = ['video/mp4', 'video/webm', 'video/ogg']
+  // word 类型
+  const wordTypes = ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']
+  // ppt 类型
+  const pptTypes = ['application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation']
+  // pdf 类型
+  const pdfTypes = ['application/pdf']
+
+  const fileType = rawFile.type
+  if (!(audioTypes.includes(fileType) || videoTypes.includes(fileType) || wordTypes.includes(fileType) || pptTypes.includes(fileType) || pdfTypes.includes(fileType))) {
+    ElMessage.error('文件格式错误! 请上传音频、视频、word、ppt、pdf文件!')
+    return false
+  }
+  // 验证文件大小
+  const fileSize = rawFile.size / 1024 / 1024 > 100
+  if (fileSize) {
+    ElMessage.error('文件大小错误! 请上传小于100M的文件!')
+    return false
+  }
+
+  console.log(rawFile)
+  fileList.value.push(rawFile)
+
+  return false
+}
+
+const delFile = (index) => {
+  fileList.value.splice(index, 1)
+}
+
+
 
 watch(() => props.modelValue, (newVal) => {
   dialogValue.value = newVal
 })
 
+const beforeClose = (done) => {
+  fileList.value = []
+  emit('update:modelValue', false)
+  done()
+}
 
 const closeDialog = () => {
+  fileList.value = []
   emit('update:modelValue', false)
 }
 
@@ -55,4 +141,53 @@ const closeDialog = () => {
 
 </script>
 
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.file-dialog {
+  padding: 10px;
+
+  .file-item {
+    flex-direction: column;
+    align-items: flex-start;
+
+    .upload-desc {
+      font-size: 12px;
+      color: #9e9e9e;
+    }
+
+  }
+
+  .file-list {
+    width: 100%;
+
+    .file-list-item {
+      width: 100%;
+      justify-content: space-between;
+      .file-name {
+        margin-right: 20px;
+        display: flex;
+      }
+
+      .flex-type {
+        align-items: center;
+        margin-right: 20px;
+
+      }
+    }
+
+
+    .name {
+
+      position: relative;
+
+      &::after {
+        content: '*';
+        position: absolute;
+        top: 0;
+        left: -8px;
+        color: red;
+        font-size: 18px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file