mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-11 03:46:45 +08:00
1339 lines
41 KiB
Vue
1339 lines
41 KiB
Vue
<!-- 确定新建面授课弹窗 -->
|
||
<template>
|
||
<a-modal
|
||
v-model:visible="ft_hs"
|
||
title="Title"
|
||
:footer="null"
|
||
:closable="false"
|
||
wrapClassName="modalStyle facteachModal"
|
||
width="80%"
|
||
@cancel="visibleClose"
|
||
@ok="handlePush"
|
||
>
|
||
<div class="modalHeader">
|
||
<div class="headerLeft">
|
||
<img
|
||
style="width: 17px; height: 18px; margin-right: 8px"
|
||
src="@/assets/images/basicinfo/add.png"
|
||
/>
|
||
<span v-if="ft_eidt" class="headerLeftText">编辑面授课</span>
|
||
<span v-else class="headerLeftText">新建面授课</span>
|
||
</div>
|
||
<div style="margin-right: 57px; cursor: pointer">
|
||
<img
|
||
@click="noEditClose"
|
||
style="width: 22px; height: 22px"
|
||
src="@/assets/images/basicinfo/close22.png"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="modalMain">
|
||
<!-- 审核理由 -->
|
||
<div v-if="statusJuJue" class="statusJuJue">
|
||
<span>审核意见：</span>
|
||
<span>{{ auditDescription }}</span>
|
||
</div>
|
||
<div class="faceteach" :style="{ display: ft_hs ? 'block' : 'none' }">
|
||
<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="asterisk"
|
||
/>
|
||
</div>
|
||
<span style="margin-right: 14px">课程名称</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="i1_input">
|
||
<NameInput placeholder="请输入课程名称" v-model:value="qdms_inputV1" v-model:validate="validate"
|
||
:maxlength="20" show-count :type="2" :id="offcourseId"></NameInput>
|
||
<!-- <a-input-->
|
||
<!-- 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">
|
||
<div style="width:440px;height:70px;display: flex;justify-content: flex-start;align-items: center;">
|
||
<img
|
||
v-for="(item, index) in optionsUrl"
|
||
:key="index"
|
||
class="choiceoptionurl"
|
||
:style="item.value==feng_mian_1?'border:3px solid rgb(78, 166, 255);':''"
|
||
:src="item.value"
|
||
:alt="item.label"
|
||
@click="choicePic(item.value)"
|
||
/>
|
||
</div>
|
||
<!-- <a-select
|
||
:getPopupContainer="
|
||
(triggerNode) => {
|
||
return triggerNode.parentNode || document.body;
|
||
}
|
||
"
|
||
v-model:value="feng_mian_1"
|
||
dropdownClassName="dropdown-style"
|
||
style="width: 440px"
|
||
placeholder="请选择"
|
||
:options="optionsUrl"
|
||
allowClear
|
||
showSearch
|
||
/> -->
|
||
<img
|
||
class="i_upload_img"
|
||
v-if="feng_mian_1"
|
||
:src="feng_mian_1"
|
||
style="width:220px;height:120px;border-radius: 8px;"
|
||
alt="avatar"
|
||
/>
|
||
<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">
|
||
<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 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-tree-select
|
||
style="width: 440px"
|
||
placeholder="请选择内容分类"
|
||
:treeDefaultExpandAll="true"
|
||
:getPopupContainer="
|
||
(triggerNode) => {
|
||
return triggerNode.parentNode || document.body;
|
||
}
|
||
"
|
||
v-model:value="fen_lei"
|
||
:tree-data="options2222"
|
||
>
|
||
</a-tree-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items">
|
||
<div class="item_nam" style="margin-bottom:110px;">
|
||
<span style="margin-right: 14px">课程价值</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="i1_input">
|
||
<a-textarea
|
||
v-model:value="qdms_inputV3"
|
||
maxlength="200"
|
||
style="width: 440px; height: 140px; border-radius: 8px"
|
||
placeholder="请输入课程价值"
|
||
/>
|
||
<div class="inp_num" style="top:110px;">
|
||
<span style="color: #c7cbd2;">
|
||
{{ qdms_inputV3.length }}/200
|
||
</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="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
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items">
|
||
<div class="item_nam">
|
||
<span style="margin-right: 14px">内容标签</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<a-input
|
||
v-model:value="tags_val_single"
|
||
style="width: 440px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入内容标签按回车键添加内容标签，可添加多个内容标签。"
|
||
@pressEnter="handleTagChange"
|
||
/>
|
||
<div class="tag-content">
|
||
<a-tag
|
||
v-for="(item, index) in tags_val"
|
||
:key="index"
|
||
closable
|
||
@close="handleTagClose(item)"
|
||
>
|
||
{{ item }}
|
||
</a-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mb_right">
|
||
<div class="mbl_items">
|
||
<div class="item_nam" style="margin-top:5px;">
|
||
<div class="asterisk_icon">
|
||
<img
|
||
src="@/assets/images/coursewareManage/asterisk.png"
|
||
alt="asterisk"
|
||
/>
|
||
</div>
|
||
<!-- 授课教师1 -->
|
||
<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"
|
||
/>
|
||
</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">
|
||
<FJUpload v-model:value="attach"/>
|
||
</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="noEditClose">
|
||
<div class="btnText">取消</div>
|
||
</div>
|
||
<div class="btn btn6" @click="handlePush">
|
||
<div class="btnText">保存</div>
|
||
</div>
|
||
<div class="btn btn6" v-if="statusTingQi == 1" @click="reviewClick">
|
||
<div class="btnText">提交审核</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
</template>
|
||
<script>
|
||
import {
|
||
reactive,
|
||
toRefs,
|
||
defineComponent,
|
||
ref,
|
||
shallowRef,
|
||
// onMounted,
|
||
onUnmounted,
|
||
} from "vue";
|
||
import {message} from "ant-design-vue";
|
||
import {edit, detail, handle} from "@/api/indexCourse";
|
||
import {fileUp} from "../../api/indexEval";
|
||
import * as api1 from "../../api/index1";
|
||
import "@wangeditor/editor/dist/css/style.css";
|
||
import {Editor, Toolbar} from "@wangeditor/editor-for-vue";
|
||
import ProjectManager from "@/components/project/ProjectManagerNew";
|
||
import NameInput from "@/components/project/NameInput";
|
||
import FJUpload from "@/components/common/FJUpload";
|
||
import * as moment from "moment";
|
||
import * as api2 from "../../api/indexAudit";
|
||
|
||
export default defineComponent({
|
||
components: {
|
||
Editor,
|
||
Toolbar,
|
||
FJUpload,
|
||
NameInput,
|
||
ProjectManager,
|
||
},
|
||
setup(props, {expose, emit}) {
|
||
const state = reactive({
|
||
hideshow: true,
|
||
ft_eidt: false,
|
||
attach: "",
|
||
validate: true,
|
||
ft_hs: false,
|
||
addLoading: false,
|
||
statusJuJue: 0,
|
||
statusTingQi: 1,
|
||
member: {name: "", value: ""},
|
||
|
||
offcourseId: null,
|
||
qdms_inputV1: "",
|
||
qdms_inputV2: "",
|
||
qdms_inputV3: "",
|
||
fen_lei: null,
|
||
feng_mian_1: null,
|
||
chang_jin: null,
|
||
tags_val_single: "",
|
||
tags_val: [],
|
||
qdms_inputV6: "",
|
||
imgList: [],
|
||
auditDescription: "",
|
||
contentClassify: [],
|
||
// 课程三级分类
|
||
options2222: [
|
||
{
|
||
title: '领导力',
|
||
value: '100',
|
||
selectable: false,
|
||
children: [
|
||
{
|
||
title: '领导业务',
|
||
value: '1001',
|
||
},
|
||
{
|
||
title: '领导团队',
|
||
value: '1002',
|
||
},
|
||
{
|
||
title: '领导自我',
|
||
value: '1003',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: '专业力',
|
||
value: '200',
|
||
selectable: false,
|
||
children: [
|
||
{
|
||
title: '研发',
|
||
value: '2001',
|
||
},
|
||
{
|
||
title: '产品和解决方案',
|
||
value: '2002',
|
||
},
|
||
{
|
||
title: '生产技术与制造',
|
||
value: '2003',
|
||
},
|
||
{
|
||
title: '供应链',
|
||
value: '2004',
|
||
},
|
||
{
|
||
title: '营销',
|
||
value: '2005',
|
||
},
|
||
{
|
||
title: '品质',
|
||
value: '2006',
|
||
},
|
||
{
|
||
title: '战略与企划',
|
||
value: '2007',
|
||
},
|
||
{
|
||
title: '流程管理',
|
||
value: '2008',
|
||
},
|
||
{
|
||
title: '业绩管理',
|
||
value: '2009',
|
||
},
|
||
{
|
||
title: '项目管理',
|
||
value: '20010',
|
||
},
|
||
{
|
||
title: '信息技术',
|
||
value: '20011',
|
||
},
|
||
{
|
||
title: '环境与安全',
|
||
value: '20012',
|
||
},
|
||
{
|
||
title: '人力资源',
|
||
value: '20013',
|
||
},
|
||
{
|
||
title: '企业文化',
|
||
value: '20014',
|
||
},
|
||
{
|
||
title: '品牌',
|
||
value: '20015',
|
||
},
|
||
{
|
||
title: '财务',
|
||
value: '20016',
|
||
},
|
||
{
|
||
title: '法务',
|
||
value: '20017',
|
||
},
|
||
{
|
||
title: '行政',
|
||
value: '20018',
|
||
},
|
||
{
|
||
title: '医工',
|
||
value: '20019',
|
||
}
|
||
],
|
||
},
|
||
{
|
||
title: '通用力',
|
||
value: '300',
|
||
selectable: false,
|
||
children: [
|
||
{
|
||
title: '职业操守与道德',
|
||
value: '3001',
|
||
},
|
||
{
|
||
title: '职业素养与技能',
|
||
value: '3002',
|
||
},
|
||
{
|
||
title: '规章制度',
|
||
value: '3003',
|
||
},
|
||
],
|
||
}
|
||
],
|
||
});
|
||
|
||
const visibleOpen = (offcourseId, name) => {
|
||
state.offcourseId = offcourseId;
|
||
|
||
if (state.offcourseId) {
|
||
state.ft_hs = true;
|
||
state.ft_eidt = true;
|
||
handleEditInfo(state.offcourseId);
|
||
} else {
|
||
state.ft_hs = true;
|
||
state.ft_eidt = false;
|
||
state.qdms_inputV1 = name;
|
||
}
|
||
};
|
||
const visibleClose = () => {
|
||
state.ft_hs = false;
|
||
ft_exit();
|
||
emit("visibleClose");
|
||
};
|
||
|
||
// 未编辑直接离开的 不予刷新
|
||
const noEditClose = () => {
|
||
state.ft_hs = false;
|
||
ft_exit();
|
||
emit("noEdit");
|
||
}
|
||
|
||
expose({
|
||
visibleOpen,
|
||
visibleClose,
|
||
});
|
||
|
||
const ft_exit = () => {
|
||
state.hideshow = true;
|
||
state.ft_hs = false;
|
||
state.addLoading = false;
|
||
state.statusJuJue = 0;
|
||
state.statusTingQi = 1;
|
||
state.member = {name: "", value: ""};
|
||
|
||
state.offcourseId = null;
|
||
state.qdms_inputV1 = "";
|
||
state.qdms_inputV2 = "";
|
||
state.qdms_inputV3 = "";
|
||
state.fen_lei = null;
|
||
state.feng_mian_1 = null;
|
||
state.chang_jin = null;
|
||
state.tags_val_single = "";
|
||
state.tags_val = [];
|
||
state.qdms_inputV6 = "";
|
||
state.imgList = [];
|
||
state.attach = "";
|
||
state.auditDescription = "";
|
||
|
||
// valueHtml.value = "";
|
||
};
|
||
|
||
// 富文本 sssssssssssssss
|
||
// 编辑器实例，必须用 shallowRef
|
||
const editorRef = shallowRef();
|
||
// 内容 HTML
|
||
const valueHtml = ref("");
|
||
// // 模拟 ajax 异步获取内容
|
||
// onMounted(() => {
|
||
// setTimeout(() => {
|
||
// // valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
|
||
// console.log(editorRef.value);
|
||
// // const toolbar = DomEditor.getToolbar(editorRef.value);
|
||
// // const menu = editorRef.value.getAllMenuKeys();
|
||
// // const bar = toolbar.getConfig().toolbarKeys;
|
||
// // console.log(menu);
|
||
// // console.log(bar);
|
||
// }, 3500);
|
||
// });
|
||
const toolbarConfig = {
|
||
excludeKeys: ["insertVideo", "insertImage"],
|
||
};
|
||
const editorConfig = {placeholder: "请输入内容...", MENU_CONF: {}};
|
||
editorConfig.MENU_CONF["uploadImage"] = {
|
||
// 自定义上传
|
||
async customUpload(file, insertFn) {
|
||
const formData = new FormData();
|
||
formData.append("file", file);
|
||
fileUp(formData).then((res) => {
|
||
if (res.data.code === 200) {
|
||
// 最后插入图片 url alt href
|
||
insertFn(res.data.data, file.name, res.data.data);
|
||
}
|
||
});
|
||
},
|
||
};
|
||
const handleCreated = (editor) => {
|
||
editorRef.value = editor; // 记录 editor 实例，重要！
|
||
};
|
||
// const handleDestory = () => {
|
||
// const editor = editorRef.value;
|
||
// if (editor == null) return;
|
||
// editor.destroy();
|
||
// };
|
||
// 组件销毁时，也及时销毁编辑器
|
||
onUnmounted(() => {
|
||
console.log("组件销毁时，也及时销毁编辑器");
|
||
// handleDestory();
|
||
});
|
||
// 富文本 eeeeeeeeeeeeee
|
||
|
||
// 点击图片选择图片
|
||
const choicePic = (value) => {
|
||
state.feng_mian_1 = value;
|
||
}
|
||
|
||
//获取分类、场景、封面图、-----------字典配置-------------------------------
|
||
const optionsUrl = ref([]);
|
||
const options2 = ref([]);
|
||
const options3 = ref([]);
|
||
const options4 = ref([]);
|
||
const getDictList = (param) => {
|
||
let obj = {
|
||
pageNo: 1,
|
||
pageSize: 10000,
|
||
setCode: param,
|
||
};
|
||
api1
|
||
.getDict(obj)
|
||
.then((res) => {
|
||
console.log("获取字典成功", res);
|
||
if (res.data.code === 200) {
|
||
if (param === "faceclassPic") {
|
||
let arr = res.data.data.rows;
|
||
let newArr = [];
|
||
arr.forEach((item) => {
|
||
newArr.push({
|
||
value: item.dictValue,
|
||
label: item.dictName,
|
||
});
|
||
});
|
||
optionsUrl.value = newArr;
|
||
}
|
||
if (param === "faceclassClass") {
|
||
let arr = res.data.data.rows;
|
||
let newArr = [];
|
||
arr.forEach((item) => {
|
||
newArr.push({
|
||
value: item.dictCode,
|
||
label: item.dictName,
|
||
});
|
||
});
|
||
options2.value = newArr;
|
||
}
|
||
if (param === "faceclassScene") {
|
||
let arr = res.data.data.rows;
|
||
let newArr = [];
|
||
arr.forEach((item) => {
|
||
newArr.push({
|
||
value: item.dictCode,
|
||
label: item.dictName,
|
||
});
|
||
});
|
||
options3.value = newArr;
|
||
}
|
||
if (param === "contentClassify") {
|
||
state.contentClassify = dealDickTree(res.data.data.rows) || []
|
||
}
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log("获取字典失败", err);
|
||
});
|
||
};
|
||
|
||
function dealDickTree(data, level = 1) {
|
||
return data?.filter(e => e.levelId == level).map(({dictName, dictCode}) => ({
|
||
title: dictName,
|
||
value: dictCode,
|
||
key: dictCode,
|
||
children: dealDickTree(data, dictCode)
|
||
}))
|
||
}
|
||
|
||
getDictList("faceclassClass");
|
||
getDictList("faceclassScene");
|
||
getDictList("faceclassPic");
|
||
getDictList("contentClassify");
|
||
//获取分类、场景、封面图、----------------字典配置---------------------------
|
||
|
||
const hideShow = () => {
|
||
if (state.hideshow == true) {
|
||
state.hideshow = false;
|
||
} else {
|
||
state.hideshow = true;
|
||
}
|
||
};
|
||
const checkVal = (checkList) => {
|
||
let count = 0;
|
||
for (const keyName of checkList) {
|
||
if (!keyName) {
|
||
count++;
|
||
}
|
||
}
|
||
return count ? false : true;
|
||
};
|
||
|
||
//保存面授课
|
||
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.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: state.attach,
|
||
outline: valueHtml.value,
|
||
};
|
||
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;
|
||
}
|
||
|
||
edit(postData).then((res) => {
|
||
if (res.data.code === 200) {
|
||
state.addLoading = false;
|
||
|
||
state.statusTingQi = 1;
|
||
if (param === "review") {
|
||
//新建时点击审核按钮
|
||
submitReview(res.data.data.offcourseId);
|
||
} else {
|
||
visibleClose();
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
//编辑面授课渲染绑定
|
||
const handleEditInfo = async (offcourseId) => {
|
||
const item = await detail({
|
||
offcourseId: Number(offcourseId),
|
||
}).then((res) => {
|
||
if (res.data.code === 200) return res.data.data;
|
||
});
|
||
|
||
state.statusJuJue = Number(item.auditStatus) === -1 ? 1 : 0;
|
||
|
||
if (Number(item.auditStatus) === 2 && Number(item.status) === 1) {
|
||
state.statusTingQi = 1;
|
||
}
|
||
if (Number(item.auditStatus) === 2 && Number(item.status) === 0) {
|
||
state.statusTingQi = 0;
|
||
}
|
||
if (Number(item.auditStatus) === -1) {
|
||
let obj = {
|
||
offcourseId: offcourseId,
|
||
type: 2,
|
||
pageNo: 1,
|
||
pageSize: 1,
|
||
};
|
||
const res = await api2.auditList(obj).then((res) => {
|
||
if (res.data.code === 200) return res.data.data;
|
||
});
|
||
if (res.rows && res.rows.length > 0) {
|
||
let i = res.rows.length;
|
||
state.auditDescription = res.rows[i - 1].description ? res.rows[i - 1].description : "-";
|
||
}
|
||
}
|
||
|
||
state.qdms_inputV1 = item.name;
|
||
state.feng_mian_1 = item.picUrl;
|
||
state.qdms_inputV2 = item.targetUser;
|
||
state.qdms_inputV3 = item.meaning;
|
||
state.fen_lei = String(item.categoryId);
|
||
state.chang_jin = String(item.sceneId);
|
||
state.tags_val = item.tips ? item.tips.split(",") : [];
|
||
state.qdms_inputV6 = item.intro;
|
||
state.member = {value: item.teacherId, name: item.teacher};
|
||
valueHtml.value = item.outline;
|
||
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;
|
||
};
|
||
|
||
const handleTagChange = () => {
|
||
if (state.tags_val_single) {
|
||
state.tags_val.push(state.tags_val_single);
|
||
}
|
||
state.tags_val_single = "";
|
||
};
|
||
const handleTagClose = (item) => {
|
||
const arr = state.tags_val.filter((itm) => itm !== item);
|
||
state.tags_val = arr;
|
||
};
|
||
|
||
//提交审核
|
||
const reviewClick = () => {
|
||
handlePush("review");
|
||
};
|
||
const submitReview = (id) => {
|
||
state.addLoading = true;
|
||
|
||
if (id === "") {
|
||
return message.error("请先完成保存");
|
||
}
|
||
let obj = {
|
||
offcourseId: id ? id : state.offcourseId,
|
||
type: 1,
|
||
};
|
||
console.log("提交审核参数", obj);
|
||
handle(obj).then((res) => {
|
||
console.log("提交审核成功", res.data);
|
||
if (res.data.code === 200) {
|
||
state.addLoading = false;
|
||
visibleClose();
|
||
}
|
||
});
|
||
};
|
||
|
||
return {
|
||
...toRefs(state),
|
||
moment,
|
||
options2,
|
||
options3,
|
||
options4,
|
||
optionsUrl,
|
||
hideShow,
|
||
visibleOpen,
|
||
visibleClose,
|
||
handleTagChange,
|
||
handleTagClose,
|
||
handlePush,
|
||
reviewClick,
|
||
noEditClose,
|
||
editorRef,
|
||
valueHtml,
|
||
mode: "simple", // 或 'simple'
|
||
toolbarConfig,
|
||
editorConfig,
|
||
handleCreated,
|
||
choicePic
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="scss">
|
||
.facteachModal {
|
||
.ant-modal {
|
||
.ant-modal-content {
|
||
.ant-modal-body {
|
||
.modalHeader {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.headerLeft {
|
||
margin-left: 27px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.headerLeftText {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
line-height: 36px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.modalMain {
|
||
.m_title {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.m_body {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.mb_left {
|
||
width: 50%;
|
||
|
||
.mbl_items {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
margin-bottom: 10px;
|
||
|
||
.item_nam {
|
||
width: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
white-space: nowrap;
|
||
|
||
.asterisk_icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-right: 5px;
|
||
margin-top: -15px;
|
||
}
|
||
}
|
||
|
||
.item_inp {
|
||
flex: 1;
|
||
position: relative;
|
||
|
||
.inp_num {
|
||
position: absolute;
|
||
left: 398px;
|
||
top: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mbl_items2 {
|
||
display: flex;
|
||
align-items: start;
|
||
margin-top: 10px;
|
||
margin-bottom: 10px;
|
||
|
||
.item_nam {
|
||
width: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
white-space: nowrap;
|
||
|
||
.asterisk_icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-right: 5px;
|
||
margin-top: -15px;
|
||
}
|
||
}
|
||
|
||
.item_inp {
|
||
flex: 1;
|
||
|
||
.i_upload_img {
|
||
margin-top: 10px;
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.i_upload {
|
||
width: 100px;
|
||
height: 100px;
|
||
border: 1px solid #4ea6ff;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
|
||
.addimg {
|
||
position: relative;
|
||
|
||
.heng {
|
||
position: absolute;
|
||
top: 50px;
|
||
left: 25px;
|
||
width: 50px;
|
||
border: 1px solid #4ea6ff;
|
||
}
|
||
|
||
.shu {
|
||
position: absolute;
|
||
top: 25px;
|
||
left: 50px;
|
||
height: 50px;
|
||
border: 1px solid #4ea6ff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.i2_cz {
|
||
width: 440px;
|
||
margin-left: 100px;
|
||
|
||
.i2_top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.i8_bottom {
|
||
display: flex;
|
||
width: 440px;
|
||
margin-left: 100px;
|
||
}
|
||
}
|
||
|
||
.mb_right {
|
||
width: 50%;
|
||
|
||
.mbl_items {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: flex-end;
|
||
margin-bottom: 10px;
|
||
|
||
.item_nam {
|
||
width: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
white-space: nowrap;
|
||
|
||
.asterisk_icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-top: -15px;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
|
||
.item_inp {
|
||
flex: 1;
|
||
}
|
||
|
||
.accessory {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.accessory_icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-top: -8px;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mbl_items2 {
|
||
display: flex;
|
||
align-items: start;
|
||
margin-bottom: 10px;
|
||
|
||
.item_nam {
|
||
width: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
white-space: nowrap;
|
||
|
||
.asterisk_icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-right: 5px;
|
||
margin-top: -15px;
|
||
}
|
||
}
|
||
|
||
.item_inp {
|
||
flex: 1;
|
||
position: relative;
|
||
|
||
.inp_num {
|
||
position: absolute;
|
||
left: 395px;
|
||
bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: #4ea6ff;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.updataxq {
|
||
position: absolute;
|
||
right: 2px;
|
||
top: -30px;
|
||
color: #57c887;
|
||
}
|
||
|
||
.updataxq2 {
|
||
position: absolute;
|
||
right: 2px;
|
||
top: -30px;
|
||
color: #ff7474;
|
||
}
|
||
|
||
.updataxq3 {
|
||
position: absolute;
|
||
right: 2px;
|
||
top: -30px;
|
||
color: #4ea6ff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.file_operation {
|
||
display: flex;
|
||
|
||
.fobox {
|
||
margin-right: 5px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.m_footer {
|
||
display: flex;
|
||
margin: 20px 0;
|
||
|
||
.fotnam {
|
||
width: 100px;
|
||
display: flex;
|
||
justify-content: end;
|
||
padding-right: 15px;
|
||
}
|
||
|
||
.fotarea {
|
||
width: calc(100% - 150px);
|
||
position: relative;
|
||
|
||
.fuwenben {
|
||
width: 90%;
|
||
height: 20px;
|
||
background-color: rgb(95, 95, 95);
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translate(-50%, 0);
|
||
top: 3px;
|
||
z-index: 9999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.m_btn {
|
||
width: 100%;
|
||
margin-top: 25px;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-content: center;
|
||
|
||
.btn {
|
||
width: 100px;
|
||
height: 40px;
|
||
background: rgba(64, 158, 255, 0);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 14px;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
|
||
.btnText {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
|
||
.btn5 {
|
||
border: 1px solid rgba(64, 158, 255, 1);
|
||
color: #4ea6ff;
|
||
}
|
||
|
||
.btn6 {
|
||
background-color: #4ea6ff;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.statusJuJue {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.choiceoptionurl {
|
||
width: 60px;
|
||
height: 60px;
|
||
margin-right: 10px;
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
</style>
|