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

修改

Browse Source
This commit is contained in:
zhangsir
2023-09-27 11:37:32 +08:00
parent 0477eef3ce
commit a063c3e7ac
2 changed files with 1 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
src/components/drawers/RecommendedCourse.vue
View File

@@ -1,194 +0,0 @@
<template>
<!-- 推荐课程抽屉 -->
<a-drawer class="course-drawer" :visible="visible" width="80%" :title="title" @close="closeDrawer" :maskClosable="false">
<div class="inp">
<span class="red">* </span>
<span>推荐标题：</span>
<a-input v-model:value="value1" show-count :maxlength="20" />
</div>
<div class="inp">
<span class="red">* </span>
<span>推荐组织：</span>
<a-input v-model:value="value2"/>
</div>
<div class="inp inp2">
<span class="red">* </span>
<span>推荐标题：</span>
<a-input v-model:value="value3" show-count :maxlength="100" />
</div>
<div class="imgupload">
<span class="red">* </span>
<span>课程包封面图：</span>
<div>
<a-upload
v-model:file-list="fileList"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
list-type="picture-card"
@preview="handlePreview"
>
<div v-if="fileList.length < 1">
<plus-outlined />
<div style="margin-top: 8px">
<img src="../../assets/images/taskpage/upload.png" alt="">
<span>将文件拖到此处，或 点击上传
</span>
</div>
</div>
</a-upload>
<a-modal :visible="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
</div>
</div>
<div class="button1">
<button class="btn2" @click="closeDrawer">取消</button>
<a-button class="btn2" @click="handleNew">下一步</a-button>
</div>
<AddCourse v-model:visible="newNext" :title="添加在线课程"></AddCourse>
</a-drawer>
<!-- 下一步添加学员 -->
</template>
<script setup>
import { reactive, ref, computed, nextTick } from 'vue';
import { Form, message } from "ant-design-vue";
import { isTopList, downloadErrorRecords, UploadProps } from '@/api/case'
import AddCourse from "@/components/drawers/AddCourse";
import useDownload from '@/hooks/useDownload'
const newNext = ref(false);
const handleNew = () => {
newNext.value = true;
};
const emit = defineEmits(['update:visible'])
// 取消抽屉
const closeDrawer = async () => {
// state.selectedRowKeys = []
// state.selectedRow = []
// state.caseTitleList = []
// resetFields()
emit('update:visible', false)
// await nextTick()
// getTopList()
}
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
const previewVisible = ref(false);
const previewImage = ref('');
const previewTitle = ref('');
const fileList = ref([
]);
const handleCancel = () => {
previewVisible.value = false;
previewTitle.value = '';
};
const handlePreview = async (file) => {
if (!file.url && !file.preview) {
file.preview = (await getBase64(file.originFileObj));
}
previewImage.value = file.url || file.preview;
previewVisible.value = true;
previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
};
defineProps({
visible: {
type: Boolean,
default: false
},
title: {
type: String,
default: '推荐课程'
},
})
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
</script>
<style lang="scss" scoped>
.course-drawer{
margin-bottom: 80px;
.red{
color: #d9001b;
}
.inp{
display: flex;
margin-left: 134px;
margin-bottom: 55px;
.ant-input{
width: 510px;
height: 31px;
}
.ant-input-affix-wrapper{
width: 510px;
height: 31px;
}
}
.inp2 .ant-input-affix-wrapper{
height: 80px;
}
.imgupload{
margin-left: 134px;
margin-bottom: 55px;
:deep(.ant-upload.ant-upload-select-picture-card){
width: 413px;
height: 227px;
margin-left: 80px;
margin-top: 30px;
}
:deep(.ant-upload-list-picture-card .ant-upload-list-item){
width: 413px;
height: 227px;
margin-left: 80px;
margin-top: 30px;
}
}
.button1 {
height: 72px;
width: 100%;
position: absolute;
background-color: #fff;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
.btn2 {
width: 60px;
height: 30px;
padding: 2px 2px 2px 2px;
border-radius: 4px;
border: 1px solid #409eff;
background-color: #409eff;
color: #ffffff;
text-align: center;
margin-left: 23px;
&:hover{
background-color: #66b1ff;
box-sizing: border-box;
}
}
}
}
</style>

2
src/views/courselibrary/CourseRecommended.vue
View File

@@ -172,7 +172,7 @@ import {
rePushOrWithdraw, rePushOrWithdraw,
} from "@/api/case"; } from "@/api/case";
import dialog from "@/utils/dialog"; import dialog from "@/utils/dialog";
import RecommendedCourse from "@/components/drawers/RecommendedCourse.vue"; import RecommendedCourse from "@/components/courserecommended/RecommendedCourse.vue";
import { checkMenu } from "@/utils/utils"; import { checkMenu } from "@/utils/utils";
import SeeModal from "@/components/courserecommended/CourseRecommended.vue"; import SeeModal from "@/components/courserecommended/CourseRecommended.vue";
const column = [ const column = [