mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-15 13:56:45 +08:00
1161 lines
31 KiB
Vue
1161 lines
31 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 ref="inputRef" 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" style="margin-top: 8px;">
|
||
<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.name" @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-tree-select style="width: 440px" placeholder="请选择内容分类" :treeDefaultExpandAll="true"
|
||
:getPopupContainer="triggerNode => triggerNode.parentNode || document.body"
|
||
v-model:value="fen_lei"
|
||
:tree-data="sysTypeOptions"
|
||
:fieldNames="{
|
||
children: 'children',
|
||
label: 'name',
|
||
value: 'code',
|
||
}">
|
||
</a-tree-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="fen_lei" class="mbl_items">
|
||
<div class="item_nam">
|
||
<div class="asterisk_icon">
|
||
</div>
|
||
<span style="margin-right: 14px"> </span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="select i6_input">
|
||
<div style="width:440px;height:26px;font-size: 14px;color: rgb(153, 155, 163);">
|
||
所属层级：{{ fen_lei1 }}
|
||
</div>
|
||
</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="i1_input">
|
||
<a-input v-model:value="chang_jin" maxlength="50"
|
||
style="width: 440px; height: 40px; border-radius: 8px" placeholder="请输入场景" />
|
||
<div class="inp_num">
|
||
<span style="color: #c7cbd2">
|
||
{{ chang_jin.length }}/50
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
|
||
<span style="margin-right: 14px">授课教师</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="select" style="width:88%;">
|
||
<ProjectManager v-model:value="member.value" v-model:name="member.name" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
-->
|
||
|
||
<div class="mbl_items2">
|
||
<div class="item_nam" style="margin-top: 8px;">
|
||
<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" style="margin-top: 8px;">
|
||
<span style="margin-right: 10px">附件</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<FJUpload v-model:value="attach" @changevalue="changevalue" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="m_footer">
|
||
<div class="fotnam">
|
||
<span>课程大纲</span>
|
||
</div>
|
||
<div v-if="ft_hs" 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>
|
||
<div class="aeLoading" :style="{ display: addLoading ? 'flex' : 'none' }">
|
||
<a-spin :spinning="addLoading" tip="" />
|
||
</div>
|
||
</a-modal>
|
||
</template>
|
||
<script>
|
||
import {
|
||
reactive,
|
||
toRefs,
|
||
defineComponent,
|
||
ref,
|
||
shallowRef,
|
||
onUnmounted,
|
||
computed,
|
||
watch,
|
||
} from "vue";
|
||
import { validateName } from "@/api/index1";
|
||
import { message } from "ant-design-vue";
|
||
import { edit, detail, handle } from "@/api/indexCourse";
|
||
import { fileUp } from "../../api/indexEval";
|
||
import "@wangeditor/editor/dist/css/style.css";
|
||
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
|
||
import NameInput from "@/components/project/NameInput";
|
||
import FJUpload from "@/components/common/FJUpload";
|
||
import * as moment from "moment";
|
||
import * as api2 from "../../api/indexAudit";
|
||
import { useStore } from "vuex";
|
||
|
||
export default defineComponent({
|
||
components: {
|
||
Editor,
|
||
Toolbar,
|
||
FJUpload,
|
||
NameInput,
|
||
},
|
||
props: {
|
||
xzinputV1: {
|
||
type: String,
|
||
default: null,
|
||
},
|
||
},
|
||
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,
|
||
fen_lei1: null,
|
||
feng_mian_1: null,
|
||
chang_jin: "",
|
||
tags_val_single: "",
|
||
tags_val: [],
|
||
qdms_inputV6: "",
|
||
imgList: [],
|
||
auditDescription: "",
|
||
contentClassify: [],
|
||
// 课程三级分类
|
||
});
|
||
const store = useStore();
|
||
console.log(store,666);
|
||
const sysTypeOptions = computed(() => store.state.content_type);
|
||
const optionsUrl = computed(() => store.state.course_pic);
|
||
|
||
watch(()=>state.fen_lei,()=>{
|
||
state.fen_lei1 = findClassFullName(sysTypeOptions.value)
|
||
})
|
||
|
||
function findClassFullName(list,name=''){
|
||
|
||
return list && list.length > 0 && list.map(e=>{
|
||
return state.fen_lei === e.code ? name?name+'-'+e.name:e.name : findClassFullName(e.children,name?name+'-'+e.name:e.name)
|
||
}).filter(name=>name).join('')
|
||
}
|
||
|
||
// 删除文件返回参数
|
||
const changevalue = (e) => {
|
||
let arr = state.attach.split(',')
|
||
let newarr = []
|
||
for (let i = 0; i < arr.length; i++) {
|
||
if (i !== e) {
|
||
newarr.push(arr[i])
|
||
}
|
||
}
|
||
if (newarr.length == 0) {
|
||
state.attach = "";
|
||
} else {
|
||
state.attach = newarr.toString()
|
||
}
|
||
console.log('changevalue', e, newarr, state.attach)
|
||
}
|
||
|
||
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;
|
||
console.log(" state.qdms_inputV1 ", state.qdms_inputV1);
|
||
}
|
||
};
|
||
const visibleClose = () => {
|
||
state.ft_hs = false;
|
||
valueHtml.value = "";
|
||
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.fen_lei1 = null;
|
||
state.feng_mian_1 = null;
|
||
state.chang_jin = "";
|
||
state.tags_val_single = "";
|
||
state.tags_val = [];
|
||
state.qdms_inputV6 = "";
|
||
state.imgList = [];
|
||
state.attach = "";
|
||
state.auditDescription = "";
|
||
|
||
valueHtml.value = "";
|
||
|
||
// 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) => {
|
||
console.log(111111112);
|
||
state.feng_mian_1 = value;
|
||
}
|
||
|
||
//获取分类、场景、封面图、-----------字典配置-------------------------------
|
||
const options2 = ref([]);
|
||
const options3 = ref([]);
|
||
const options4 = ref([]);
|
||
|
||
//获取分类、场景、封面图、----------------字典配置---------------------------
|
||
|
||
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++;
|
||
console.log("keyname", keyName);
|
||
}
|
||
}
|
||
|
||
return !count;
|
||
};
|
||
|
||
//保存面授课
|
||
const handlePush = async (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 offName = await validateName({ name: state.qdms_inputV1, type: 2, id: state.offcourseId }).then(res => {
|
||
|
||
return res.data.data === 1;
|
||
});
|
||
console.log('校验重复',offName)
|
||
if (offName) {
|
||
message.destroy();
|
||
return message.warning("课程名称重复，请重新填写");
|
||
}
|
||
|
||
const postData = {
|
||
id: state.offcourseId, //不传代表新增
|
||
name: state.qdms_inputV1,
|
||
picUrl: state.feng_mian_1,
|
||
targetUser: state.qdms_inputV2,
|
||
meaning: state.qdms_inputV3,
|
||
// categoryId: state.fen_lei,
|
||
sysTypeId: state.fen_lei,
|
||
sceneContent: 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.sysTypeId,
|
||
// postData.teacherId,
|
||
postData.picUrl,
|
||
postData.intro,
|
||
];
|
||
console.log("checkList", checkList);
|
||
if (!checkVal(checkList)) {
|
||
message.destroy();
|
||
return message.error("请输入必填项");
|
||
} else {
|
||
state.addLoading = true;
|
||
}
|
||
|
||
edit(postData).then((res) => {
|
||
state.addLoading = false;
|
||
if (res.data.code === 200) {
|
||
state.statusTingQi = 1;
|
||
if (param === "review") {
|
||
//新建时点击审核按钮
|
||
submitReview(res.data.data.id);
|
||
} else {
|
||
message.destroy();
|
||
message.success("保存成功");
|
||
visibleClose();
|
||
}
|
||
} else if (res.data.code === -1) {
|
||
message.destroy();
|
||
message.success("无此操作权限");
|
||
visibleClose();
|
||
}
|
||
});
|
||
};
|
||
|
||
//编辑面授课渲染绑定
|
||
const handleEditInfo = async (offcourseId) => {
|
||
console.log("jjjaj");
|
||
state.validate = true;
|
||
state.qdms_inputV1 = "";
|
||
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 = item.categoryId;
|
||
state.fen_lei = item.sysTypeId;
|
||
state.chang_jin = String(item.sceneContent ? item.sceneContent : '');
|
||
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 = () => {
|
||
if(state.offcourseId){
|
||
submitReview(state.offcourseId)
|
||
}else{
|
||
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) {
|
||
message.destroy();
|
||
message.success("已提交审核");
|
||
state.addLoading = false;
|
||
visibleClose();
|
||
} else if (res.data.code === -1) {
|
||
message.destroy();
|
||
message.success("无此操作权限");
|
||
}
|
||
});
|
||
};
|
||
|
||
return {
|
||
...toRefs(state),
|
||
sysTypeOptions,
|
||
moment,
|
||
options2,
|
||
options3,
|
||
options4,
|
||
optionsUrl,
|
||
hideShow,
|
||
visibleOpen,
|
||
visibleClose,
|
||
handleTagChange,
|
||
handleTagClose,
|
||
handlePush,
|
||
reviewClick,
|
||
noEditClose,
|
||
editorRef,
|
||
valueHtml,
|
||
mode: "simple", // 或 'simple'
|
||
toolbarConfig,
|
||
editorConfig,
|
||
handleCreated,
|
||
choicePic,
|
||
changevalue,
|
||
};
|
||
},
|
||
});
|
||
</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;
|
||
}
|
||
}
|
||
}
|
||
.fujian{
|
||
display: none;
|
||
}
|
||
.mbl_items12 {
|
||
width: 440px;
|
||
margin-right:56px;
|
||
|
||
.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;
|
||
}
|
||
|
||
.aeLoading {
|
||
z-index: 10000;
|
||
}
|
||
}
|
||
</style>
|