上传附件统一样式

This commit is contained in:
zhangyc
2022-12-24 19:48:21 +08:00
parent 48206694f3
commit 1a64fc520d
9 changed files with 346 additions and 828 deletions

View File

@@ -308,487 +308,7 @@
v-model:xzinputV1="xzinputV1"
@visibleClose="closeOnlineCoursevisible"
/>
<!-- 查看面授课弹框 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="in i1_input">
<!-- <a-input-->
<!-- aria-readonly="true"-->
<!-- v-model:value="qdms_inputV1"-->
<!-- maxlength="90"-->
<!-- style="width: 440px; height: 40px; border-radius: 8px"-->
<!-- placeholder="请输入课程名称"-->
<!-- />-->
<NameInput
placeholder="请输入课程名称"
v-model:value="qdms_inputV1"
v-model:validate="validate"
:maxlength="20"
show-count
:type="2"
></NameInput>
<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> -->
<a-tree-select
:getPopupContainer="
(triggerNode) => {
return triggerNode.parentNode || document.body;
}
"
v-model:value="fen_lei"
show-search
style="width: 440px"
:dropdown-style="{
maxHeight: '400px',
overflow: 'auto',
}"
placeholder="请选择内容分类"
allow-clear
tree-default-expand-all
:tree-data="options2222"
>
<template #title="{ value: val, title }">
<b v-if="val === '11111'" style="color: #08c">sss</b>
<template v-else>{{ title }}</template>
</template>
</a-tree-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="select" style="width: 436px">
<ProjectManager
v-model:value="member.value"
v-model:name="member.name"
></ProjectManager>
</div>
</div>
</div>
<div class="mbl_items2">
<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="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">{{imgList}}
<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> -->
<div class="file_name">
<span
style="
color: #6f6f6f;
width: 140px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
"
>{{ item.slice(item.lastIndexOf("/") + 1) }}</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 -->
<!-- 确定新建面授课弹窗 -->
<!-- 表格 -->
@@ -2115,77 +1635,7 @@
</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;
width: 140px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
"
>
{{
item.indexOf("-") !== -1
? item.slice(
item.lastIndexOf("/") + 1,
item.lastIndexOf("-")
) + item.slice(item.lastIndexOf("."))
: item
}}
</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>
</div>
</div>
<div class="items_btn">
<div class="cstm_btn btn5" @click="handleCancelStu">
<div class="btnText">取消</div>
@@ -2833,7 +2283,7 @@ import dayjs from "dayjs";
import * as api1 from "../../api/index1";
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
//import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import ProjectManager from "@/components/project/ProjectManagerNew";
import SeeModal from "./components/seeModal.vue";
@@ -3352,8 +2802,7 @@ export default defineComponent({
components: {
// OwnPower,
// Corpowerlist,
Editor,
Toolbar,
SeeModal,
CourseModal,
FJUpload,
@@ -3664,7 +3113,7 @@ export default defineComponent({
imageUrl: "",
imgList: [],
validate: true,
attach:"",
pageSize2: 10,
currentPage2: 0,
tableDataTotal2: 0,
@@ -4736,69 +4185,7 @@ export default defineComponent({
state.lookMs = false;
};
//保存面授课
const handlePush = (param) => {
let files = "";
if (state.imgList.length) {
state.imgList.forEach((item) => {
files += item.img + ",";
});
}
files = files.slice(0, files.length - 1);
console.log("filesfiles", files);
const postData = {
offcourseId: state.offcourseId, //不传代表新增
name: state.qdms_inputV1,
// picUrl: state.imageUrl,
picUrl: state.feng_mian_1,
targetUser: state.qdms_inputV2,
meaning: state.qdms_inputV3,
categoryId: state.fen_lei,
sceneId: state.chang_jin,
tips: state.tags_val ? state.tags_val.join(",") : null,
teacherId: state.member.value,
teacher: state.member.name,
intro: state.qdms_inputV6,
attach: files,
outline: valueHtml.value,
//teacherId:state.teacherId ,
};
console.log("===", state.teacherId, "hha", state.qdms_inputV5);
console.log("postData");
console.log(postData);
const checkList = [
postData.name,
postData.targetUser,
postData.categoryId,
postData.teacherId,
];
if (!checkVal(checkList)) {
message.destroy();
return message.error("请输入必填项");
} else {
state.addLoading = true;
}
if (!state.validate) {
message.destroy();
return message.warning("面授课名称重复");
}
edit(postData).then((res) => {
if (res.data.code === 200) {
getTableDate();
ft_exit_0();
rest();
state.addLoading = false;
state.statusTingQi = 1;
// console.log("res.data", res.data);
if (param === "review") {
//新建时点击审核按钮
submitReview(res.data.data.offcourseId);
}
}
});
};
const om_exit = () => {
state.om_1 = false;
state.faceManageTab = "1";
@@ -4820,7 +4207,7 @@ export default defineComponent({
};
const handleCancelStu = () => {
state.cstm_hs = false;
state.filesList = [];
state.attach = "";
state.kk_eidt = false;
state.xjkkradioV1 = "";
@@ -4839,6 +4226,7 @@ export default defineComponent({
removePG();
};
//保存开课
const handleSureStu = () => {
let startTime,
@@ -4856,7 +4244,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,
@@ -4896,6 +4284,7 @@ export default defineComponent({
});
};
//编辑开课
const handelEditStu = async (itm) => {
console.log(itm);
@@ -4935,7 +4324,14 @@ export default defineComponent({
state.xjkkinputV2 = item.address;
state.checked1 = item.applyFlag === 1 ? true : false;
state.filesList = item.attach ? item.attach.split(",") : [];
let arrss = item.attach.split(',')
let str = ''
for (let i = 0; i < arrss.length; i++) {
i == arrss.length - 1 ? str += arrss[i].slice(arrss[i].lastIndexOf('/') + 1) : str += arrss[i].slice(arrss[i].lastIndexOf('/') + 1) + ','
}
console.log(str)
state.attach = str;
state.xjkkinputV3 = [
dayjs(item.beginTime, "YYYY-MM-DD HH:mm"),
dayjs(item.endTime, "YYYY-MM-DD HH:mm"),
@@ -5631,7 +5027,7 @@ export default defineComponent({
//提交审核
const reviewClick = () => {
console.log("ft_eidt", state.ft_eidt);
handlePush("review");
// handlePush("review");
/*
if (state.ft_eidt) {
//编辑面授课
@@ -5888,7 +5284,7 @@ export default defineComponent({
beforeUpload,
beforeUpload2,
handleDel,
handlePush,
handleSucessStu,
handleRejectStu,
handleDeleteStu,