From c5ea811d69bc0d77c2c4c56ac29a14bbca8dc015 Mon Sep 17 00:00:00 2001
From: zhangsir <z1823137@163.com>
Date: Sun, 1 Dec 2024 16:52:48 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=B2=E5=B8=88=E7=AE=A1=E7=90=86bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/project/UploadDragger.vue | 251 +++++++++++++++++++++++
 src/views/lecturer/InsideLecturer.vue    | 105 +++++++---
 2 files changed, 322 insertions(+), 34 deletions(-)
 create mode 100644 src/components/project/UploadDragger.vue

diff --git a/src/components/project/UploadDragger.vue b/src/components/project/UploadDragger.vue
new file mode 100644
index 00000000..4d6d866d
--- /dev/null
+++ b/src/components/project/UploadDragger.vue
@@ -0,0 +1,251 @@
+<template>
+    <a-upload-dragger :data="{ ...params }" :multiple="false" :accept="accept" :action="uploadUrl" :maxCount="maxCount"
+        @change="handleUploadChange" v-model:file-list="fileList" style="width:50%;">
+        <p class="ant-upload-drag-icon">
+            <UploadOutlined />
+        </p>
+        <p class="ant-upload-text">将文件拖到此处，或点击上传</p>
+        <template #itemRender="{ file }">
+            <div class="loadstate">
+                <div class="loadborder">
+                    <div class="content">
+                        <div class="timebox">
+                            <div class="timetop">
+                                <div class="tit">{{ file.name }}</div>
+                                <div class="stateloading">{{
+                                    {
+                                        done: "上传成功",
+                                        uploading: "正在上传",
+                                        error: "上传失败",
+                                        removed: "正在上传",
+                                    }[file.status]
+                                }}
+                                </div>
+                            </div>
+                            <a-progress :percent="file.percent" />
+                        </div>
+                        <div class="curloading">
+                            <!-- <div class="cur">100%</div> -->
+                            <div class="cancel" style="margin-left: 20px; cursor: pointer" @click="removeUpload">
+                                删除
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </a-upload-dragger>
+</template>
+<script setup>
+import { UploadOutlined } from '@ant-design/icons-vue'
+import { defineProps, ref, defineExpose,watch,onMounted } from "vue";
+import { message } from "ant-design-vue";
+const props = defineProps({
+    uploadUrl: {
+        type: String,
+        default: ''
+    },
+    params: {
+        type: Object,
+        default: {}
+    },
+    maxCount: {
+        type: Number,
+        default: 1
+    },
+    accept: {
+        type: String,
+        default: ''
+    },
+    size: {
+        type: Number,
+        default: 0
+    },
+    loadTrue: {
+        type:String,
+        default: ''
+    },
+})
+onMounted(() => {
+    if(props.loadTrue){
+        fileList.value = [{
+            name:props.loadTrue,
+            status: 'done',
+            percent: 100,
+        }]
+    }
+});
+const emit = defineEmits(['update:value', 'change'])
+const fileList = ref([]);
+const handleUploadChange = ({ file, fileList }) => {
+    console.log(file, fileList, 'file');
+    var FileExt = file.name.replace(/.+\./, "");
+    if (props.accept && props.accept.split(',').indexOf('.' + FileExt.toLowerCase()) === -1) {
+        fileList.value = [];
+        return message.error("请上传正确的文件格式");
+    }
+    if(props.size && file.size > props.size){
+        removeUpload()
+        message.destroy();
+        message.error("文件大小超过5MB!");
+        return
+    }
+    emit('update:value', fileList)
+    emit('change', fileList)
+}
+const removeUpload = () => {
+    fileList.value = [];
+    emit('removeList', false)
+}
+
+defineExpose({
+    fileList,
+    removeUpload
+})
+</script>
+<style scoped lang="scss">
+.loadstate {
+    width: 500px;
+    margin-bottom: 26px;
+
+    .loadborder {
+        width: 396px;
+        height: 70px;
+        border-radius: 4px;
+        border: 1px dashed #eaeaea;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        position: relative;
+
+        .content {
+            display: flex;
+            margin-left: 20px;
+            position: relative;
+
+            .defeat {
+                width: 262px;
+                padding: 10px 20px;
+                position: absolute;
+                left: 46px;
+                top: 42px;
+                font-size: 14px;
+                font-weight: 500;
+                height: 32px;
+                border-radius: 2px;
+                border: 1px solid #387df7;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                cursor: pointer;
+
+                .detext {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #387df7;
+                }
+            }
+
+            .img {
+                width: 30px;
+                height: 34px;
+                // background-image: url(@/assets/images/basicinfo/exl.png);
+            }
+
+            .timebox {
+                margin-left: 15px;
+                margin-top: -5px;
+
+                .timetop {
+                    display: flex;
+                    width: 262px;
+                    justify-content: space-between;
+
+                    .tit {
+                        font-size: 14px;
+                        font-weight: 400;
+                        color: #333333;
+                        width: 200px;
+                        height: 21px;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                    }
+
+                    .stateloading {
+                        font-size: 14px;
+                        font-weight: 400;
+                        color: #4ea6ff;
+                    }
+
+                    .statedefeat {
+                        font-size: 14px;
+                        font-weight: 400;
+                        color: #ff7474;
+                    }
+
+                    .statesucce {
+                        font-size: 14px;
+                        font-weight: 400;
+                        color: #35ae69;
+                    }
+                }
+
+                .prog {
+                    width: 262px;
+                    height: 5px;
+                    background: #eaf1fe;
+                    border-radius: 4px;
+
+                    .inprogloading {
+                        width: 55%;
+                        height: 5px;
+                        border-radius: 4px;
+
+                        background: #4ea6ff;
+                    }
+
+                    //下载失败条
+                    .inprogdefeat {
+                        width: 55%;
+                        height: 5px;
+                        border-radius: 4px;
+
+                        background: #ff7474;
+                    }
+
+                    //下载成功条
+                    .inprogsucce {
+                        width: 100%;
+                        height: 5px;
+                        border-radius: 4px;
+
+                        background: #57c887;
+                    }
+                }
+            }
+
+            .curloading {
+                margin-left: 15px;
+                margin-top: 15px;
+                display: flex;
+
+                .cur {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #333333;
+                }
+
+                .cancel {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #387df7;
+                }
+            }
+        }
+    }
+
+}
+</style>
diff --git a/src/views/lecturer/InsideLecturer.vue b/src/views/lecturer/InsideLecturer.vue
index 844ff4c3..96b1cbe7 100644
--- a/src/views/lecturer/InsideLecturer.vue
+++ b/src/views/lecturer/InsideLecturer.vue
@@ -113,21 +113,21 @@
       </div>
     </div>
     <!-- 弹窗组件 -->
-    <a-drawer v-model:visible="teacherdialog" placement="right" :closable="false" :maskClosable="false"
+    <a-drawer  v-model:visible="teacherdialog" placement="right" :closable="false" :maskClosable="false"
       width="800" :title="false">
       <div class="headers" style="margin-top:-24px;">
-        <div class="headerTitle" style="margin-left: 30px;">{{ teacherdialogtitle }}</div>
+        <div class="headerTitle" style="margin-left: 14px;">{{ teacherdialogtitle }}</div>
         <img
           style="width: 29px; height: 29px; cursor: pointer"
           src="@/assets/images/basicinfo/close.png"
           @click="cancelTeacherDialog"
         />
       </div>
-      <div style="padding-left: 40px;padding-right: 158px;">
+      <div ref="drawerContent" id="drawerScorll" style="padding-left: 40px;padding-right: 158px;">
         <a-form :model="formParam" :rules="rules" layout="vertical" ref="formRef">
           <a-row>
             <a-col :span="24">
-              <span class="line"></span><span>基本信息</span>
+              <span class="line"></span><span style="color:#333333;font-weight: 600;">基本信息</span>
             </a-col>
           </a-row>
           <a-row :gutter="16">
@@ -222,7 +222,7 @@
           </a-row>
           <a-row>
             <a-col :span="24">
-              <span class="line" style="margin-bottom:10px;"></span><span>其他信息</span>
+              <span class="line" style="margin-bottom:10px;"></span><span style="color:#333333;font-weight: 600;">其他信息</span>
             </a-col>
           </a-row>
           <a-row :gutter="16">
@@ -252,11 +252,16 @@
               <a-tag color="blue" style="line-height: 40px; ">管理业务</a-tag>
             </a-col> -->
             <a-col :span="20">
-              <div class="add_content" @click="addContentData">+</div>
+              <!-- <div class="add_content" @click="addContentData">
+                <div class="text">+</div>
+              </div> -->
               <div class="add_list">
                 <div :title="item.name" class="add_item" v-for="(item,index) in formParam.orgLists">
                   {{item.name}}
                 </div>
+                <div class="add_content" @click="addContentData">
+                  <div class="text">+</div>
+                </div>
               </div>
             </a-col>
           </a-row>
@@ -269,6 +274,7 @@
             style="margin-top: 400px"
             @cancel="cancelupdialog"
             :maskClosable="false"
+            :destroyOnClose="true"
           >
             <div class="selectonlineface" style="width: 660px;" :style="{ display: updialog ? 'block' : 'none' }">
               <div class="bg_headers"></div>
@@ -281,8 +287,8 @@
                   <a-form style="margin-top:30px ;">
                     <a-form-item style="color: #999999;">注意 :文件支持PDF、PNG、JPG ,文件大小不可超过5MB</a-form-item>
                     <a-form-item label="上传文件">
-                      <UploadDragger :size="5000000" ref="uploadRef" style="width:80%;" @change="changeUpload" :accept="accept"
-                            :uploadUrl="uploadUrl" :params="folderId" />
+                      <UploadDragger :size="5000000" ref="uploadRef" style="width:86%;height:148px;" @change="changeUpload" :accept="accept"
+                          @removeList="removeList"  :uploadUrl="uploadUrl" :params="folderId" :loadTrue="formParam.certificationName" />
                     </a-form-item>
                   </a-form>
                   <div class="bg_footer" style="margin-left: 160px;margin-top: 30px">
@@ -381,7 +387,7 @@
   </div>
 </template>
 <script lang="jsx">
-import { reactive, toRefs, ref, watch,computed,onMounted } from "vue";
+import { reactive, toRefs, ref, watch,computed,onMounted,nextTick  } from "vue";
 import { useStore } from "vuex";
 import {
   RightOutlined,
@@ -400,7 +406,7 @@ import { teacherUpload } from "../../api/Teaching";
 import { getCookieForName } from "@/api/method";
 // import {getProjSt} from "../../api/indexProjStu";
 import AddContent from "../../components/project/AddContent.vue"
-import UploadDragger from "@/components/Grateful/UploadDragger.vue"
+import UploadDragger from "@/components/project/UploadDragger.vue"
 import avatar from '@/assets/avatar.png'
 import LookInsideLecturer from "../../components/project/LookInsideLecturer.vue"
 export default {
@@ -564,8 +570,8 @@ export default {
     const changeUpload = (newValue) => {
       if (newValue[0].status == 'done' && newValue[0]?.response?.status == 200) {
           const { id, name, path } = newValue[0].response.result
-          state.formParam.certification = path
-          state.formParam.certificationName = name
+          state.formParam.certifications = path
+          state.formParam.certificationNames = name
       }
     }
 
@@ -599,13 +605,19 @@ export default {
       state.updialog = true
     }
     const cancelupdialog = () => {
-      state.formParam.certification = null
-      state.formParam.certificationName = null
-      uploadRef.value.removeUpload()
+      // state.formParam.certification = null
+      // state.formParam.certificationName = null
+      // uploadRef.value.removeUpload()
       state.updialog = false
     }
+    const removeList = (val) => {
+      state.formParam.certifications = null
+      state.formParam.certificationNames = null
+    }
     const createupdialog = () => {
-      uploadRef.value.removeUpload()
+      // uploadRef.value.removeUpload()
+      state.formParam.certification = state.formParam.certifications
+      state.formParam.certificationName = state.formParam.certificationNames
       state.updialog = false
     }
     const LecturerSystemList = ref([
@@ -635,12 +647,10 @@ export default {
       console.log(val, 'val')
 
     }
+    const drawerContent = ref(null);
     const addContentData = () => {
       state.showContent = true
     }
-    watch(()=>state.showContent, (newVal)=>{
-      console.log(state.formParam.orgLists,'xixixixixi')
-    })
     const AddContentList = (data) => {
       // console.log(data, 'treedatalist')
       // state.formParam.orgLists = data
@@ -1249,6 +1259,8 @@ export default {
             name: names[index],
             id: id
           }))||[]
+          state.formParam.certifications = state.formParam.certification
+          state.formParam.certificationNames = state.formParam.certificationName
         }
 
 
@@ -1341,6 +1353,7 @@ export default {
       infoteacherList,
       getinfoteacher,
       addContentData,
+      drawerContent,
       isupload,
       AddContentList,
       beforeUpload2,
@@ -1352,13 +1365,14 @@ export default {
       handleupdialog,
       cancelupdialog,
       createupdialog,
+      removeList,
     }
   },
 };
 </script>
 <style lang="scss" scoped>
 .headers {
-  height: 73px;
+  height: 56px;
   border-bottom: 1px solid #e8e8e8;
   display: flex;
   justify-content: space-between;
@@ -1731,15 +1745,19 @@ export default {
 }
 
 .add_content {
-  width: 40px;
-  height: 40px;
+  width: 20px;
+  height: 20px;
   cursor: pointer;
   border-radius: 50%;
   background-color: #4ea6ff;
-  text-align: center;
-  line-height: 40px;
-  color: #ffffff;
-  font-size: 26px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .text{
+    font-size: 20px;
+    color: #fff;
+    margin-top: -4px;
+  }
 }
 .add_list{
   width: 150%;
@@ -1747,18 +1765,37 @@ export default {
   flex-wrap: wrap;
   margin-top: 10px;
   // overflow: auto;
-  & div{
+  .add_item{
     padding: 0 10px;
-    background: aliceblue;
+    color: #096dd9;
+    background: #e6f7ff;
+    border: 1px solid #91d5ff;
     margin-left: 10px;
-    width: 140px;
-    height: 40px;
-    line-height: 40px;
+    width: 66px;
+    height: 22px;
+    line-height: 22px;
     text-align: center;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     margin-bottom: 20px;
+    font-size: 12px;
+  }
+  .add_content {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    border-radius: 50%;
+    background-color: #4ea6ff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 10px;
+    .text{
+      font-size: 20px;
+      color: #fff;
+      margin-top: -4px;
+    }
   }
 }
 //导出按钮icon
@@ -1978,10 +2015,10 @@ export default {
 .line {
   float: left;
   width: 3px;
-  height: 25px;
+  height: 17px;
   background: #4ea6ff;
-  border-radius: 30%;
-  margin-right: 5px;
+  margin-left: -14px;
+  margin-top: 3px;
 }
 
 //抽屉功能