mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-18 07:16:46 +08:00
-- 附件
This commit is contained in:
yuping
85
src/components/common/BaseUpload.vue
Normal file
85
src/components/common/BaseUpload.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<a-upload
|
||||
:file-list="files"
|
||||
action="/manageApi/file/upload"
|
||||
:show-upload-list="showUploadList"
|
||||
:multiple="multiple"
|
||||
:before-upload="beforeUpload"
|
||||
@change="handleChange"
|
||||
ref="imageRef"
|
||||
>
|
||||
<template v-for="(_, key, index) in $slots" :key="index" v-slot:[key]>
|
||||
<slot :name="key"></slot>
|
||||
</template>
|
||||
</a-upload>
|
||||
</template>
|
||||
<script setup>
|
||||
import {defineProps, defineEmits, defineExpose, ref, watch} from "vue";
|
||||
import {message} from "ant-design-vue";
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showUploadList: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fileType: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits({})
|
||||
|
||||
const files = ref([])
|
||||
const imageRef = ref()
|
||||
|
||||
watch(props, () => {
|
||||
props.value.length !== files.value.length && (files.value = props.value)
|
||||
})
|
||||
|
||||
function handleChange({file, fileList}) {
|
||||
file.response && file.response.code === 200 && (file.url = file.response.data)
|
||||
files.value = fileList
|
||||
emit('update:value', fileList)
|
||||
}
|
||||
|
||||
function beforeUpload(file) {
|
||||
if (!props.fileType.includes(file.name.split(".").slice(-1).join(''))) {
|
||||
message.error(
|
||||
"不支持该格式"
|
||||
);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function remove(i) {
|
||||
files.value.splice(i, 1)
|
||||
emit('update:value', files.value)
|
||||
}
|
||||
|
||||
function reUpload(i) {
|
||||
if (files.value[i].status === 'ready' || files.value[i].status === 'uploading') {
|
||||
imageRef.value.abort(files.value[i].raw)
|
||||
files.value[i].status = 'abort';
|
||||
} else if (files.value[i].status === 'fail' || files.value[i].status === 'abort') {
|
||||
imageRef.value.handleStart(files.value[i].raw)
|
||||
imageRef.value.submit()
|
||||
}
|
||||
}
|
||||
|
||||
function abort(i) {
|
||||
imageRef.value.abort(files.value[i].raw)
|
||||
}
|
||||
|
||||
|
||||
defineExpose({reUpload, remove, abort})
|
||||
|
||||
</script>
|
||||
202
src/components/common/FJUpload.vue
Normal file
202
src/components/common/FJUpload.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<Upload v-model:value="files" ref="uploadRef" :file-type="fileType">
|
||||
<div class="accessory" style="cursor: pointer">
|
||||
<span class="accessory_icon">
|
||||
<img
|
||||
src="@/assets/images/coursewareManage/enclosure.png"
|
||||
alt="enclosure"
|
||||
/>
|
||||
</span>
|
||||
<span style="color: #4ea6ff;margin-left:10px">添加附件</span>
|
||||
</div>
|
||||
</Upload>
|
||||
<div>支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip</div>
|
||||
</div>
|
||||
<div class="mbl_items12" style="margin-left: 0">
|
||||
<div
|
||||
class="i12_box1"
|
||||
v-for="(item, index) in files"
|
||||
style="align-items: flex-end"
|
||||
:key="index"
|
||||
>
|
||||
<div class="file_img"></div>
|
||||
<div class="file_detail">
|
||||
<div class="file_name">
|
||||
<span style="color: #6f6f6f">{{ item.name }}</span>
|
||||
</div>
|
||||
<!-- <div class="file_size">-->
|
||||
<!-- <span style="color: #999ba3">{{ item.size }}</span>-->
|
||||
<!-- </div>-->
|
||||
<div class="file_updata">
|
||||
<div class="updatabox">
|
||||
<div
|
||||
:class="`${{uploading: 'updatacolor3', done: 'updatacolor' ,error: 'updatacolor2'}[item.status] || 'updatacolor'}`"
|
||||
:style="{width:`${item.status==='uploading'?parseInt(item.percent):100}%`}"></div>
|
||||
<div v-if="item.status"
|
||||
:class="`${{uploading: 'updataxq1', done: 'updataxq' ,error: 'updataxq2'}[item.status] || 'updataxq'}`">
|
||||
{{ {uploading: '正在上传', done: '上传完成', error: '上传失败'}[item.status] || '' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="upjd" v-if="item.percent">
|
||||
<span style="margin: auto 5px">{{ item.status === 'uploading' ? parseInt(item.percent) : 100 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file_operation" @click="del(index)" style="color: #4ea6ff">
|
||||
删除
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {defineEmits, defineProps, ref, watch, onMounted} from "vue";
|
||||
import Upload from "./BaseUpload.vue";
|
||||
|
||||
const emit = defineEmits({})
|
||||
const props = defineProps({
|
||||
value: String,
|
||||
})
|
||||
const files = ref([])
|
||||
const uploadRef = ref()
|
||||
|
||||
const fileType = ref([
|
||||
"jpg",
|
||||
"jpeg",
|
||||
"png",
|
||||
"gif",
|
||||
"pdf",
|
||||
"ppt",
|
||||
"pptx",
|
||||
"doc",
|
||||
"docx",
|
||||
"xls",
|
||||
"xlsx",
|
||||
"zip",
|
||||
])
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
watch(files, () => {
|
||||
files.value && files.value.length && emit('update:value', files.value.filter(e => e.url).map(e => e.url).join(','))
|
||||
})
|
||||
|
||||
watch(props, init)
|
||||
|
||||
function init() {
|
||||
if (props.value && props.value !== files.value.map(e => e.url).join(',')) {
|
||||
files.value = props.value.split(',').map(e => ({name: e, url: e}))
|
||||
}
|
||||
}
|
||||
|
||||
function del(i) {
|
||||
uploadRef.value.remove(i)
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.mbl_items12 {
|
||||
width: 440px;
|
||||
margin-left: 100px;
|
||||
|
||||
.i12_box1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 17px 0px 17px 21px;
|
||||
border: 1px solid #eff4fc;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.file_img {
|
||||
width: 27px;
|
||||
height: 32px;
|
||||
background-image: url(@/assets/images/coursewareManage/imgs.png);
|
||||
margin-right: 22px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.file_detail {
|
||||
width: 250px;
|
||||
margin-right: 21px;
|
||||
|
||||
.file_updata {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.updatabox {
|
||||
position: relative;
|
||||
width: 230px;
|
||||
height: 5px;
|
||||
background-color: rgba(192, 192, 192, 0.25);
|
||||
border-radius: 3px;
|
||||
|
||||
.updatacolor {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background-color: #57c887;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.updatacolor2 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 80%;
|
||||
height: 5px;
|
||||
background-color: #ff7474;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.updatacolor3 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 60%;
|
||||
height: 5px;
|
||||
background-color: #388be1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.updataxq {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: -30px;
|
||||
color: #57c887;
|
||||
}
|
||||
|
||||
.updataxq1 {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: -30px;
|
||||
color: #388be1;
|
||||
}
|
||||
|
||||
.updataxq2 {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: -30px;
|
||||
color: #ff7474;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file_operation {
|
||||
display: flex;
|
||||
|
||||
.fobox {
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<div>12312</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {reactive} from "vue";
|
||||
|
||||
const options = reactive([]);
|
||||
|
||||
</script>
|
||||
@@ -606,82 +606,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mbl_items">
|
||||
<div class="mbl_items2">
|
||||
<div class="item_nam">
|
||||
<span style="margin-right: 10px">附件</span>
|
||||
<span style="margin-right: 14px">附件</span>
|
||||
</div>
|
||||
<div class="item_inp">
|
||||
<a-upload
|
||||
multiple
|
||||
:show-upload-list="false"
|
||||
:before-upload="beforeUpload2"
|
||||
>
|
||||
<div class="accessory" style="cursor: pointer">
|
||||
<div class="accessory_icon">
|
||||
<img
|
||||
src="@/assets/images/coursewareManage/enclosure.png"
|
||||
alt="enclosure"
|
||||
/>
|
||||
</div>
|
||||
<span style="color: #4ea6ff">添加附件</span>
|
||||
</div>
|
||||
</a-upload>
|
||||
<span>
|
||||
支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mbl_items12">
|
||||
<div
|
||||
class="i12_box1"
|
||||
v-for="(item, index) in imgList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="file_img"></div>
|
||||
<div class="file_detail">
|
||||
<!-- <div class="file_name">
|
||||
<span style="color: #6f6f6f">{{ item.name }}</span>
|
||||
</div> -->
|
||||
<!-- 条件渲染 s -->
|
||||
<!-- <div class="file_size">
|
||||
<span style="color: #999ba3">{{ item.size }}</span>
|
||||
</div> -->
|
||||
<div class="file_updata">
|
||||
<div class="updatabox">
|
||||
<div class="updatacolor"></div>
|
||||
<div class="updataxq">上传完成</div>
|
||||
<!-- <div class="updatacolor2"></div>
|
||||
<div class="updataxq2">上传失败</div> -->
|
||||
<!-- <div class="updatacolor3"></div>
|
||||
<div class="updataxq3">正在上传</div> -->
|
||||
</div>
|
||||
<div class="upjd">
|
||||
<span style="margin: auto 5px">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 条件渲染 e -->
|
||||
</div>
|
||||
<div class="file_operation">
|
||||
<div class="fobox">
|
||||
<span style="color: #4ea6ff" @click="handleDel(index)">
|
||||
删除
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div class="fobox">
|
||||
<span style="color: #4ea6ff">重传</span>
|
||||
</div>
|
||||
<div class="fobox">
|
||||
<span style="color: #4ea6ff">取消</span>
|
||||
</div> -->
|
||||
<!-- <div class="fobox">
|
||||
<span style="color: #4ea6ff; margin-right: 5px">
|
||||
暂停
|
||||
</span>
|
||||
</div>
|
||||
<div class="fobox">
|
||||
<span style="color: #4ea6ff">取消</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<FJUpload v-model:value="attach"></FJUpload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -729,436 +659,6 @@
|
||||
</div>
|
||||
</a-modal>
|
||||
<!-- 查看面授课弹框 start -->
|
||||
<a-modal
|
||||
v-model:visible="lookMs"
|
||||
title="Title"
|
||||
@ok="handlelookMs"
|
||||
:footer="null"
|
||||
:closable="false"
|
||||
wrapClassName="modalStyle facteachModal"
|
||||
width="80%"
|
||||
@cancel="handlelookMs"
|
||||
>
|
||||
<div class="modalHeader">
|
||||
<div class="headerLeft">
|
||||
<img
|
||||
style="width: 17px; height: 18px; margin-right: 8px"
|
||||
src="../../assets/images/basicinfo/add.png"
|
||||
/>
|
||||
<span class="headerLeftText">查看面授课</span>
|
||||
</div>
|
||||
<div style="margin-right: 57px; cursor: pointer">
|
||||
<img
|
||||
@click="handlelookMs"
|
||||
style="width: 22px; height: 22px"
|
||||
src="../../assets/images/basicinfo/close22.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modalMain">
|
||||
<div class="faceteach">
|
||||
<div class="ft_main">
|
||||
<div class="m_title">课程信息</div>
|
||||
<div class="m_body">
|
||||
<div class="mb_left">
|
||||
<div class="mbl_items">
|
||||
<div class="item_nam">
|
||||
<div class="asterisk_icon">
|
||||
<img
|
||||
src="@/assets/images/coursewareManage/asterisk.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<span style="margin-right: 14px">课程名称</span>
|
||||
</div>
|
||||
<div class="item_inp">
|
||||
<div class="i1_input">
|
||||
<a-input
|
||||
aria-readonly="true"
|
||||
v-model:value="qdms_inputV1"
|
||||
maxlength="90"
|
||||
style="width: 440px; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入课程名称"
|
||||
/>
|
||||
<div class="inp_num">
|
||||
<span style="color: #c7cbd2">
|
||||
{{ qdms_inputV1.length }}/90
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="i2_cz">
|
||||
<div class="i2_top">
|
||||
<div class="i2_left">
|
||||
<span style="color: #999ba3">课程命名规则</span>
|
||||
</div>
|
||||
<div
|
||||
class="i2_right"
|
||||
@click="hideShow"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
<div
|
||||
class="b_zk"
|
||||
:style="{ display: hideshow ? 'block' : 'none' }"
|
||||
>
|
||||
<span style="color: #4ea6ff">收起</span>
|
||||
</div>
|
||||
<div
|
||||
class="b_sq"
|
||||
:style="{ display: hideshow ? 'none' : 'block' }"
|
||||
>
|
||||
<span style="color: #4ea6ff">展开</span>
|
||||
</div>
|
||||
<div class="b_icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="i2_detail"
|
||||
:style="{ display: hideshow ? 'block' : 'none' }"
|
||||
>
|
||||
<span style="color: #999ba3">
|
||||
1、课程名称统一不加书名号。<br />
|
||||
2、项目名称、属地等信息如需体现在课程名称中，请放在课程名称信息
|
||||
之后，如“时间管理（GROW180项目）”或“时间管理（B*）”确保首先
|
||||
看到的是课程内容主题。<br />
|
||||
3、同一课程如先后有多个版本，原则上仅开放最新版本，旧版本应停用
|
||||
版本如必须以年份标明，请以“沟通技巧（2022年）”的方式呈现。
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mbl_items2">
|
||||
<div class="item_nam">
|
||||
<div class="asterisk_icon">
|
||||
<img
|
||||
src="@/assets/images/coursewareManage/asterisk.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<span style="margin-right: 14px">封面图</span>
|
||||
</div>
|
||||
<div class="item_inp">
|
||||
<a-select
|
||||
:getPopupContainer="
|
||||
(triggerNode) => {
|
||||
return triggerNode.parentNode || document.body;
|
||||
}
|
||||
"
|
||||
v-model:value="feng_mian_2"
|
||||
dropdownClassName="dropdown-style"
|
||||
style="width: 440px"
|
||||
placeholder="请选择"
|
||||
:options="optionsUrl"
|
||||
allowClear
|
||||
showSearch
|
||||
></a-select>
|
||||
<img
|
||||
class="i_upload_img"
|
||||
v-if="feng_mian_2"
|
||||
:src="feng_mian_2"
|
||||
alt="avatar"
|
||||
/>
|
||||
<!-- <a-upload
|
||||
name="avatar"
|
||||
list-type="picture-card"
|
||||
class="avatar-uploader"
|
||||
:show-upload-list="false"
|
||||
:before-upload="beforeUpload"
|
||||
disabled
|
||||
>
|
||||
<img
|
||||
class="i_upload_img"
|
||||
v-if="imageUrl"
|
||||
:src="imageUrl"
|
||||
alt="avatar"
|
||||
/>
|
||||
<div class="i_upload" v-else>
|
||||
<div class="addimg">
|
||||
<div class="heng"></div>
|
||||
<div class="shu"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a-upload> -->
|
||||
<div class="i_bottom">
|
||||
<span style="color: #999ba3">
|
||||
高宽比为16:9 (如:800*450) png或jpg图片
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mbl_items">
|
||||
<div class="item_nam">
|
||||
<div class="asterisk_icon">
|
||||
<img
|
||||
style="width: 10px; height: 10px"
|
||||
src="@/assets/images/coursewareManage/asterisk.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<span style="margin-right: 14px">目标人群</span>
|
||||
</div>
|
||||
<div class="item_inp">
|
||||
<div class="i1_input">
|
||||
<a-input
|
||||
v-model:value="qdms_inputV2"
|
||||
maxlength="50"
|
||||
style="width: 440px; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入目标人群"
|
||||
/>
|
||||
<div class="inp_num">
|
||||
<span style="color: #c7cbd2">
|
||||
{{ qdms_inputV2.length }}/50
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mbl_items">
|
||||
<div class="item_nam">
|
||||
<span style="margin-right: 14px">课程价值</span>
|
||||
</div>
|
||||
<div class="item_inp">
|
||||
<div class="i1_input">
|
||||
<a-input
|
||||
v-model:value="qdms_inputV3"
|
||||
maxlength="200"
|
||||
style="width: 440px; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入课程价值"
|
||||
/>
|
||||
<div class="inp_num">
|
||||
<span style="color: #c7cbd2">
|
||||
{{ qdms_inputV3.length }}/200
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mbl_items">
|
||||
<div class="item_nam">
|
||||
<div class="asterisk_icon">
|
||||
<img
|
||||
src="@/assets/images/coursewareManage/asterisk.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<span style="margin-right: 14px">内容分类</span>
|
||||
</div>
|
||||
<div class="item_inp">
|
||||
<div class="select i6_input">
|
||||
<a-select
|
||||
:getPopupContainer="
|
||||
(triggerNode) => {
|
||||
return triggerNode.parentNode || document.body;
|
||||
}
|
||||
"
|
||||
v-model:value="fen_lei"
|
||||
dropdownClassName="dropdown-style"
|
||||
style="width: 440px"
|
||||
placeholder="请选择"
|
||||
:options="options2"
|
||||
allowClear
|
||||
showSearch
|
||||
></a-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mbl_items">
|
||||
<div class="item_nam">
|
||||
<span style="margin-right: 14px">场景</span>
|
||||
</div>
|
||||
<div class="item_inp">
|
||||
<div class="select i7_input">
|
||||
<a-select
|
||||
:getPopupContainer="
|
||||
(triggerNode) => {
|
||||
return triggerNode.parentNode || document.body;
|
||||
}
|
||||
"
|
||||
v-model:value="chang_jin"
|
||||
dropdownClassName="dropdown-style"
|
||||
style="width: 440px"
|
||||
placeholder="请选择"
|
||||
:options="options3"
|
||||
allowClear
|
||||
showSearch
|
||||
></a-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mbl_items">
|
||||
<div class="item_nam">
|
||||
<span style="margin-right: 14px">内容标签</span>
|
||||
</div>
|
||||
<div class="item_inp">
|
||||
<a-select
|
||||
:getPopupContainer="
|
||||
(triggerNode) => {
|
||||
return triggerNode.parentNode || document.body;
|
||||
}
|
||||
"
|
||||
v-model:value="tags_val"
|
||||
mode="tags"
|
||||
style="width: 440px; height: 40px"
|
||||
placeholder="请输入按回车键创建成功"
|
||||
:options="tagsOptions"
|
||||
></a-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb_right">
|
||||
<div class="mbl_items">
|
||||
<div class="item_nam">
|
||||
<div class="asterisk_icon">
|
||||
<img
|
||||
src="@/assets/images/coursewareManage/asterisk.png"
|
||||
alt="asterisk"
|
||||
/>
|
||||
</div>
|
||||
<span style="margin-right: 14px">授课教师</span>
|
||||
</div>
|
||||
<div class="item_inp">
|
||||
<div class="i1_input">
|
||||
<ProjectManager
|
||||
v-model:value="member.value"
|
||||
v-model:name="member.name"
|
||||
></ProjectManager>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mbl_items2">
|
||||
<div class="item_nam">
|
||||
<span style="margin-right: 14px">课程简介</span>
|
||||
</div>
|
||||
<div class="item_inp">
|
||||
<div class="i10_textarea">
|
||||
<a-textarea
|
||||
v-model:value="qdms_inputV6"
|
||||
maxlength="150"
|
||||
style="width: 440px; height: 100px; border-radius: 8px"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
<div class="inp_num">
|
||||
<span style="color: #c7cbd2">
|
||||
{{ qdms_inputV6.length }}/150
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mbl_items">
|
||||
<div class="item_nam">
|
||||
<span style="margin-right: 10px">附件</span>
|
||||
</div>
|
||||
<div class="item_inp">
|
||||
<a-upload
|
||||
multiple
|
||||
:show-upload-list="false"
|
||||
:before-upload="beforeUpload2"
|
||||
>
|
||||
<div class="accessory" style="cursor: pointer">
|
||||
<div class="accessory_icon">
|
||||
<img
|
||||
src="@/assets/images/coursewareManage/enclosure.png"
|
||||
alt="enclosure"
|
||||
/>
|
||||
</div>
|
||||
<span style="color: #4ea6ff">添加附件</span>
|
||||
</div>
|
||||
</a-upload>
|
||||
<span>
|
||||
支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mbl_items12">
|
||||
<div
|
||||
class="i12_box1"
|
||||
v-for="(item, index) in imgList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="file_img"></div>
|
||||
<div class="file_detail">
|
||||
<!-- <div class="file_name">
|
||||
<span style="color: #6f6f6f">{{ item.name }}</span>
|
||||
</div> -->
|
||||
<!-- 条件渲染 s -->
|
||||
<!-- <div class="file_size">
|
||||
<span style="color: #999ba3">{{ item.size }}</span>
|
||||
</div> -->
|
||||
<div class="file_updata">
|
||||
<div class="updatabox">
|
||||
<div class="updatacolor"></div>
|
||||
<div class="updataxq">上传完成</div>
|
||||
<!-- <div class="updatacolor2"></div>
|
||||
<div class="updataxq2">上传失败</div> -->
|
||||
<!-- <div class="updatacolor3"></div>
|
||||
<div class="updataxq3">正在上传</div> -->
|
||||
</div>
|
||||
<div class="upjd">
|
||||
<span style="margin: auto 5px">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 条件渲染 e -->
|
||||
</div>
|
||||
<div class="file_operation">
|
||||
<div class="fobox">
|
||||
<span style="color: #4ea6ff" @click="handleDel(index)">
|
||||
删除
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div class="fobox">
|
||||
<span style="color: #4ea6ff">重传</span>
|
||||
</div>
|
||||
<div class="fobox">
|
||||
<span style="color: #4ea6ff">取消</span>
|
||||
</div> -->
|
||||
<!-- <div class="fobox">
|
||||
<span style="color: #4ea6ff; margin-right: 5px">
|
||||
暂停
|
||||
</span>
|
||||
</div>
|
||||
<div class="fobox">
|
||||
<span style="color: #4ea6ff">取消</span>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m_footer">
|
||||
<div class="fotnam">
|
||||
<span>课程大纲</span>
|
||||
</div>
|
||||
<div class="fotarea">
|
||||
<div style="border: 1px solid #ccc">
|
||||
<Toolbar
|
||||
style="border-bottom: 1px solid #ccc"
|
||||
:editor="editorRef"
|
||||
:defaultConfig="toolbarConfig"
|
||||
:mode="mode"
|
||||
/>
|
||||
<Editor
|
||||
style="height: 250px; overflow-y: hidden"
|
||||
v-model="valueHtml"
|
||||
:defaultConfig="editorConfig"
|
||||
:mode="mode"
|
||||
@onCreated="handleCreated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m_btn">
|
||||
<!-- <div class="btn btn5" @click="handlelookMs">
|
||||
<div class="btnText">取消</div>
|
||||
</div>
|
||||
<div class="btn btn6" v-if="isEdit == 0" @click="handlelookMs">
|
||||
<div class="btnText">确定</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
<!-- 查看面授课弹框 end -->
|
||||
<!-- 确定新建面授课弹窗 -->
|
||||
<!-- 表格 -->
|
||||
@@ -2206,7 +1706,7 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cstm_items">
|
||||
<div class="cstm_items">f
|
||||
<div class="signbox">
|
||||
<div class="sign">
|
||||
<img
|
||||
@@ -2345,96 +1845,12 @@
|
||||
</a-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cstm_items items_fj">
|
||||
<div class="cstm_items items_fj" style="align-items: flex-start">
|
||||
<div class="signbox">
|
||||
<span style="margin-right: 3px">附件</span>
|
||||
</div>
|
||||
<div class="b_input">
|
||||
<a-upload
|
||||
name="file"
|
||||
:show-upload-list="false"
|
||||
:before-upload="beforeUpload3"
|
||||
>
|
||||
<div class="upload_box">
|
||||
<div class="upload_icon">
|
||||
<img
|
||||
src="@/assets/images/coursewareManage/enclosure.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<span style="color: #4ea6ff">上传附件</span>
|
||||
</div>
|
||||
<!-- <template #itemRender="{ file }">
|
||||
<a-space>
|
||||
<span :style="file.status === 'error' ? 'color: red' : ''">
|
||||
{{ file.name }}
|
||||
</span>
|
||||
</a-space>
|
||||
</template> -->
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cstm_items">
|
||||
<div class="signbox">
|
||||
<span style="margin-right: 3px"> </span>
|
||||
</div>
|
||||
<div class="b_input">
|
||||
<span style="color: #999ba3">
|
||||
支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mbl_items12">
|
||||
<div
|
||||
class="i12_box1"
|
||||
v-for="(item, index) in filesList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="file_img"></div>
|
||||
<div class="file_detail">
|
||||
<!-- <div class="file_name">
|
||||
<span style="color: #6f6f6f">{{ item.name }}</span>
|
||||
</div> -->
|
||||
<!-- 条件渲染 s -->
|
||||
<!-- <div class="file_size">
|
||||
<span style="color: #999ba3">{{ item.size }}</span>
|
||||
</div> -->
|
||||
<div class="file_updata">
|
||||
<div class="updatabox">
|
||||
<div class="updatacolor"></div>
|
||||
<div class="updataxq">上传完成</div>
|
||||
<!-- <div class="updatacolor2"></div>
|
||||
<div class="updataxq2">上传失败</div> -->
|
||||
<!-- <div class="updatacolor3"></div>
|
||||
<div class="updataxq3">正在上传</div> -->
|
||||
</div>
|
||||
<div class="upjd">
|
||||
<span style="margin: auto 5px">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 条件渲染 e -->
|
||||
</div>
|
||||
<div class="file_operation">
|
||||
<div class="fobox">
|
||||
<span style="color: #4ea6ff" @click="handleDel2(index)">
|
||||
删除
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div class="fobox">
|
||||
<span style="color: #4ea6ff">重传</span>
|
||||
</div>
|
||||
<div class="fobox">
|
||||
<span style="color: #4ea6ff">取消</span>
|
||||
</div> -->
|
||||
<!-- <div class="fobox">
|
||||
<span style="color: #4ea6ff; margin-right: 5px">
|
||||
暂停
|
||||
</span>
|
||||
</div>
|
||||
<div class="fobox">
|
||||
<span style="color: #4ea6ff">取消</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<FJUpload v-model:value="attach"></FJUpload>
|
||||
</div>
|
||||
</div>
|
||||
<div class="items_btn">
|
||||
@@ -3138,6 +2554,7 @@ import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
|
||||
import ProjectManager from "@/components/project/ProjectManagerNew";
|
||||
|
||||
import SeeModal from "./components/seeModal.vue";
|
||||
import FJUpload from "@/components/common/FJUpload.vue";
|
||||
import * as moment from "moment";
|
||||
|
||||
//列表表格
|
||||
@@ -3639,6 +3056,7 @@ const columns7 = [
|
||||
];
|
||||
export default defineComponent({
|
||||
components: {
|
||||
FJUpload,
|
||||
// OwnPower,
|
||||
// Corpowerlist,
|
||||
Editor,
|
||||
@@ -3657,11 +3075,13 @@ export default defineComponent({
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
attach: '',//附件
|
||||
shipType: 1,
|
||||
addLoading: false,
|
||||
currentPlanItem: {},
|
||||
teacherId: null,
|
||||
teacher: null,
|
||||
fileList: [],
|
||||
selectedRowKeys7: [],
|
||||
isEdit: 0,
|
||||
member: {name: "", value: ""},
|
||||
@@ -4041,8 +3461,6 @@ export default defineComponent({
|
||||
});
|
||||
};
|
||||
const beforeUpload2 = (file) => {
|
||||
console.log(6765555);
|
||||
console.log(file);
|
||||
const fileType = [
|
||||
"jpg",
|
||||
"jpeg",
|
||||
@@ -4057,7 +3475,8 @@ export default defineComponent({
|
||||
"xlsx",
|
||||
"zip",
|
||||
];
|
||||
if (!fileType.includes(file.name.split(".")[1])) {
|
||||
console.log(file.name.split(".").slice(-1))
|
||||
if (!fileType.includes(file.name.split(".").slice(-1).join(''))) {
|
||||
message.error(
|
||||
"仅支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip格式!"
|
||||
);
|
||||
@@ -4070,21 +3489,21 @@ export default defineComponent({
|
||||
// return false;
|
||||
// }
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
console.log(file);
|
||||
fileUp(formData).then((res) => {
|
||||
if (res.data.code === 200) {
|
||||
state.imgList.push({
|
||||
img: res.data.data,
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
});
|
||||
console.log(state.imgList);
|
||||
// state.hasImgName = res.data.data;
|
||||
}
|
||||
});
|
||||
return false;
|
||||
// const formData = new FormData();
|
||||
// formData.append("file", file);
|
||||
// console.log(file);
|
||||
// fileUp(formData).then((res) => {
|
||||
// if (res.data.code === 200) {
|
||||
// state.imgList.push({
|
||||
// img: res.data.data,
|
||||
// name: file.name,
|
||||
// size: file.size,
|
||||
// });
|
||||
// console.log(state.imgList);
|
||||
// // state.hasImgName = res.data.data;
|
||||
// }
|
||||
// });
|
||||
// return false;
|
||||
};
|
||||
const handleDel = (index) => {
|
||||
state.imgList.splice(index, 1);
|
||||
@@ -4716,7 +4135,7 @@ export default defineComponent({
|
||||
teacherId: state.member.value,
|
||||
teacher: state.member.name,
|
||||
intro: state.qdms_inputV6,
|
||||
attach: files,
|
||||
attach: state.attach,
|
||||
outline: valueHtml.value,
|
||||
//teacherId:state.teacherId ,
|
||||
};
|
||||
@@ -4804,7 +4223,7 @@ export default defineComponent({
|
||||
|
||||
address: state.xjkkinputV2,
|
||||
applyFlag: state.checked1 ? 1 : 0,
|
||||
attach: state.filesList.length ? state.filesList.join(",") : "",
|
||||
attach: state.attach,
|
||||
beginTime: startTime,
|
||||
completeType: type,
|
||||
endTime: endTime,
|
||||
@@ -4868,7 +4287,6 @@ export default defineComponent({
|
||||
|
||||
state.xjkkinputV2 = item.address;
|
||||
state.checked1 = item.applyFlag === 1 ? true : false;
|
||||
state.filesList = item.attach ? item.attach.split(",") : [];
|
||||
state.xjkkinputV3 = [
|
||||
dayjs(item.beginTime, "YYYY-MM-DD HH:mm:ss"),
|
||||
dayjs(item.endTime, "YYYY-MM-DD HH:mm:ss"),
|
||||
@@ -4896,6 +4314,7 @@ export default defineComponent({
|
||||
*/
|
||||
state.member = {value: item.teacherId, name: item.teacher};
|
||||
|
||||
state.attach = item.attach;
|
||||
state.cstm_hs = true;
|
||||
state.kk_eidt = true;
|
||||
};
|
||||
@@ -5310,24 +4729,10 @@ export default defineComponent({
|
||||
state.teacherId = item.teacherId;
|
||||
state.qdms_inputV6 = item.intro;
|
||||
state.member = {value: item.teacherId, name: item.teacher};
|
||||
if (item.attach == "") {
|
||||
state.imgList = [];
|
||||
} else {
|
||||
if (item.attach.indexOf(",")) {
|
||||
const arr = item.attach.split(",");
|
||||
arr.forEach((item) => {
|
||||
state.imgList.push({ img: item });
|
||||
});
|
||||
} else {
|
||||
state.imgList = [{ img: item.attach }];
|
||||
}
|
||||
}
|
||||
|
||||
state.attach = item.attach;
|
||||
valueHtml.value = item.outline;
|
||||
|
||||
state.ft_hs = true;
|
||||
state.ft_eidt = true;
|
||||
getTea();
|
||||
};
|
||||
|
||||
// handleTagChange
|
||||
@@ -5357,7 +4762,6 @@ export default defineComponent({
|
||||
if (res.data.code === 200) return res.data.data;
|
||||
});
|
||||
state.lookCourseModal = true;
|
||||
item.attach = item.attach == "" ? [] : item.attach.split(",");
|
||||
state.faceDetailObj = item;
|
||||
};
|
||||
// const handleTea = async () => {
|
||||
@@ -5494,28 +4898,28 @@ export default defineComponent({
|
||||
"xlsx",
|
||||
"zip",
|
||||
];
|
||||
if (!fileType.includes(file.name.split(".")[1])) {
|
||||
if (!fileType.includes(file.name.split(".").slice(-1).join(''))) {
|
||||
message.error(
|
||||
"仅支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip格式!"
|
||||
);
|
||||
return false;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
console.log(file);
|
||||
fileUp(formData).then((res) => {
|
||||
if (res.data.code === 200) {
|
||||
// state.filesList.push({
|
||||
// img: res.data.data,
|
||||
// name: file.name,
|
||||
// size: file.size,
|
||||
// const formData = new FormData();
|
||||
// formData.append("file", file);
|
||||
// console.log(file);
|
||||
// fileUp(formData).then((res) => {
|
||||
// if (res.data.code === 200) {
|
||||
// // state.filesList.push({
|
||||
// // img: res.data.data,
|
||||
// // name: file.name,
|
||||
// // size: file.size,
|
||||
// // });
|
||||
// // console.log(state.filesList);
|
||||
// state.filesList = [res.data.data];
|
||||
// // state.hasImgName = res.data.data;
|
||||
// }
|
||||
// });
|
||||
// console.log(state.filesList);
|
||||
state.filesList = [res.data.data];
|
||||
// state.hasImgName = res.data.data;
|
||||
}
|
||||
});
|
||||
return false;
|
||||
};
|
||||
|
||||
@@ -5686,8 +5090,15 @@ export default defineComponent({
|
||||
console.log("执行");
|
||||
getTableDate();
|
||||
};
|
||||
|
||||
function handleFileChange({file, fileList}) {
|
||||
file.response && file.response.code === 200 && (file.src = file.response.data)
|
||||
state.fileList = fileList
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
handleFileChange,
|
||||
getdateToDateFn,
|
||||
moment,
|
||||
getdateToTimeFn,
|
||||
|
||||
Reference in New Issue
Block a user