hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-09 02:46:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

讲师管理bug

Browse Source
This commit is contained in:
zhangsir
2024-12-01 16:52:48 +08:00
parent 3c76e1b2d2
commit c5ea811d69
2 changed files with 322 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
src/components/project/UploadDragger.vue Normal file
View File

@@ -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>

105
src/views/lecturer/InsideLecturer.vue
View File

@@ -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;
}
//抽屉功能