Files
fe-manage/src/views/projectcenter/TaskAdd.vue
2022-11-08 09:06:46 +08:00

2850 lines
79 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="allCon">
<div class="left clearfix">
<div class="leftmain">
<div class="tit">
阶段<img
src="../../assets/images/projectadd/right.png"
style="margin-left: 10px; cursor: pointer"
@click="showCancel"
/>
</div>
<!-- @click="showModal" -->
<div class="btn btn3" @click="showConfirm" style="margin-left: 19px">
<div class="search"></div>
<div class="btnText">添加阶段</div>
</div>
<div class="maincon" style="background-color: #fff">
<draggable
v-model="level"
chosenClass="chosen"
ghostClass="ghost"
forceFallback="true"
group="stage"
animation="500"
@start="onStart"
@end="onEnd"
>
<template #item="{ element }">
<div
class="item"
:class="chooseStageId == element.id ? 'bgcactive' : ''"
@click="changebgc(element.id)"
>
<div class="itemle">
<div class="tit">{{ element.tit }}</div>
<div class="name">{{ element.name }}</div>
</div>
<div class="itemri">
<img src="../../assets/images/leveladd/z1.png" />
<img
style="margin-top: 40px"
src="../../assets/images/leveladd/z2.png"
/>
</div>
</div>
</template>
</draggable>
</div>
</div>
</div>
<div class="right">
<div class="addhead">
<div class="filt">
<div class="le">
<div class="leftimg">
<img
class="img"
src="../../assets/images/projectadd/picture.png"
/>
</div>
<div class="imgfor">
<div class="forz" style="font-weight: 700">管理者进阶-腾飞班</div>
</div>
</div>
<div class="rightt">
<div class="select">
<a-select
v-model:value="projectName"
style="width: 200px"
placeholder="自由学习模式"
:options="projectNameList"
@change="selectProjectName"
allowClear
showSearch
></a-select>
</div>
<div class="line"></div>
<img class="img2" src="../../assets/images/projectadd/keep.png" />
<div class="pub">保存</div>
<div class="line"></div>
<router-link to="/taskpage">
<div style="display: flex">
<img class="img2" src="../../assets/images/leveladd/back.png" />
<div class="return">返回</div>
</div>
</router-link>
</div>
</div>
</div>
<div class="mid">
<div class="item" @click="showDrawerOnline">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/zai.png" />
</div>
<div class="text">在线</div>
</div>
<!-- 添加在线侧弹窗 -->
<div>
<add-online v-model:addonlineVisible="addonlinevisible" />
</div>
<!-- 添加在线侧弹窗 -->
<div class="lin"></div>
</div>
<div class="item" @click="showDrawerFaceteach">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/mian.png" />
</div>
<div class="text">面授</div>
</div>
<!-- 添加面授侧弹窗 -->
<div>
<add-faceteach v-model:addfaceteachVisible="addfaceteachvisible" />
</div>
<!-- 添加面授侧弹窗 -->
<div class="lin"></div>
</div>
<div class="item" @click="showDrawerAddCase">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/an.png" />
</div>
<div class="text">案例</div>
</div>
<!-- 添加案例侧弹窗 -->
<div>
<add-case v-model:addcaseVisible="addcasevisible" />
</div>
<!-- 添加案例侧弹窗 -->
<div class="lin"></div>
</div>
<div class="item">
<div class="itcon">
<div class="img" @click="showDrawerAddHomework">
<img src="../../assets/images/leveladd/zuo.png" />
</div>
<div class="text">作业</div>
</div>
<!-- 添加作业侧弹窗 -->
<div>
<add-homework v-model:addhomeworkVisible="addhomeworkvisible" />
</div>
<!-- 添加作业侧弹窗 -->
<div class="lin"></div>
</div>
<div class="item" @click="showDrawerAddTest">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/kao.png" />
</div>
<div class="text">考试</div>
</div>
<!-- 添加考试侧弹窗 -->
<div>
<add-test v-model:addtestVisible="addtestvisible" />
</div>
<!-- 添加考试侧弹窗 -->
<div class="lin"></div>
</div>
<div class="item" @click="showDrawerAddLive">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/zhi.png" />
</div>
<div class="text">直播</div>
</div>
<!-- 添加直播侧弹窗 -->
<div>
<add-live
v-model:addliveVisible="addlivevisible"
@changeData="updateTableData"
v-model:projectId="projectId"
v-model:chooseStageId="chooseStageId"
v-model:isLiveEdit="isLiveEdit"
v-model:EditLiveId="EditLiveId"
/>
</div>
<!-- 添加直播侧弹窗 -->
<div class="lin"></div>
</div>
<div class="item" @click="showDrawerAddRef">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/wai.png" />
</div>
<div class="text">外链</div>
</div>
<!-- 添加外链侧弹窗 -->
<div>
<add-ref
v-model:addrefVisible="addrefvisible"
@changeData="updateTableData"
v-model:projectId="projectId"
v-model:chooseStageId="chooseStageId"
v-model:isRefEdit="isRefEdit"
v-model:EditRefId="EditRefId"
/>
</div>
<!-- 添加外链侧弹窗 -->
<div class="lin"></div>
</div>
<div class="item" @click="showDrawerAddDiscuss">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/tao.png" />
</div>
<div class="text">讨论</div>
</div>
<!-- 添加讨论侧弹窗 -->
<div>
<add-discuss
v-model:adddiscussVisible="adddiscussvisible"
v-model:edit="edit"
v-model:projectId="projectId"
v-model:chooseStageId="chooseStageId"
v-model:editDiscussId="editDiscussId"
@changeData="updateTableData"
/>
</div>
<!-- 添加讨论侧弹窗 -->
<div class="lin"></div>
</div>
<div class="item" @click="showDrawerAddActive">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/huo.png" />
</div>
<div class="text">活动</div>
</div>
<!-- 添加活动侧弹窗 -->
<div>
<add-active
v-model:addactiveVisible="addactivevisible"
v-model:projectId="projectId"
v-model:edit="edit"
v-model:chooseStageId="chooseStageId"
@changeData="updateTableData"
/>
</div>
<!-- 添加活动侧弹窗 -->
<div class="lin"></div>
</div>
<div class="item" @click="showDrawerAddEval">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/ce.png" />
</div>
<div class="text">测评</div>
</div>
<!-- 添加测评侧弹窗 -->
<div>
<add-eval
v-model:addevalVisible="addevalvisible"
@changeData="updateTableData"
v-model:edit="edit"
v-model:projectId="projectId"
v-model:chooseStageId="chooseStageId"
v-model:EditEvalId="EditEvalId"
/>
</div>
<!-- 添加测评侧弹窗 -->
<div class="lin"></div>
</div>
<div class="item" @click="showDrawerAddInvist">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/diao.png" />
</div>
<div class="text">评估</div>
</div>
<!-- 添加评估侧弹窗 -->
<div>
<add-invist
v-model:addinvistVisible="addinvistvisible"
@changeData="updateTableData"
v-model:edit="edit"
v-model:projectId="projectId"
v-model:chooseStageId="chooseStageId"
/>
</div>
<!-- 添加评估侧弹窗 -->
<div class="lin"></div>
</div>
<div class="item" @click="showDrawerAddVote">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/tou.png" />
</div>
<div class="text">投票</div>
<!-- 添加投票侧弹窗 -->
<div>
<add-vote
v-model:addvoteVisible="addvotevisible"
@changeData="updateTableData"
v-model:edit="edit"
v-model:projectId="projectId"
v-model:chooseStageId="chooseStageId"
/>
</div>
<!-- 添加投票侧弹窗 -->
</div>
</div>
</div>
<div class="boom">
<div class="boomcen">
<div class="onerow">
<div class="taskmain">任务列表</div>
<button class="btn" @click="moveTask">移动任务到阶段</button>
<div class="edit" @click="deleteTaskAll">
<img
class="editimg"
src="../../assets/images/projectadd/delete.png"
/>
<span class="editext">批量删除</span>
</div>
</div>
<!-- 无数据样式 -->
<div class="notable" style="display: none">
<div class="notablebox">
<div class="boxbody">
<div class="boximg"></div>
<div class="boxtitle">
<span style="color: #ffb64e; font-size: 20px">无课程</span>
</div>
<div class="boxtitle2">
<span style="color: #878b92">请点击新建开课创建课程</span>
</div>
</div>
<div class="smallleft"></div>
<div class="smallright"></div>
</div>
</div>
<div class="rwbox">
<!-- <div class="talk">
<img class="im" src="../../assets/images/leveladd/gan.png" />
<div class="xu">
<span class="yi">已选择</span>
<div style="width: 5px; display: inline-block"></div>
<span class="th">3</span>
<div style="width: 5px; display: inline-block"></div>
<span class="yi"></span>
<span class="zon">任务总数</span>
<span class="yi">5</span>
<span class="yi"></span>
</div>
</div> -->
<div class="tableBox" style="border: 1px solid #f2f6fc">
<div
style="
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #eff4fc;
font-size: 14px;
font-weight: 400;
color: #999ba3;
line-height: 36px;
border-bottom: 1px solid #f2f6fc;
"
>
<div
style="
width: 87px;
text-align: center;
display: flex;
margin-left: 46px;
"
>
<img
style="
width: 16px;
height: 16px;
cursor: pointer;
margin-top: 12px;
"
:src="
selectAll === 0
? require('../../assets/images/notSelect.png')
: selectAll === 1
? require('../../assets/images/selectAll.png')
: require('../../assets/images/select.png')
"
@click="selectRowAll"
/>
<!-- <a-checkbox
v-model:checked="selectAll"
@change="selectRowAll"
>
</a-checkbox> -->
<div style="margin-top: 2px; margin-left: 8px">类型</div>
</div>
<div style="width: 120px; text-align: center">任务名称</div>
<div style="width: 120px; text-align: center">必修/选修</div>
<div style="width: 87px; text-align: center">时长</div>
<div
style="width: 120px; text-align: center; margin-right: 20px"
>
操作
</div>
</div>
<draggable
v-model="tableData"
chosenClass="chosen"
ghostClass="ghost"
forceFallback="true"
group="task"
animation="500"
@start="onStart"
@end="onEnd"
>
<template #item="{ element }">
<div
style="
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f2f6fc;
font-size: 14px;
font-weight: 400;
color: #4f5156;
line-height: 36px;
"
class="tableRow"
>
<div
style="
width: 87px;
text-align: center;
margin-left: 46px;
position: relative;
"
>
<div class="racona">
<div
class="img"
style="
cursor: pointer;
margin-top: 2px;
margin-right: 9px;
position: absolute;
left: -25px;
"
></div>
<a-checkbox
:id="element.id"
v-model:checked="element.checked"
@change="changeRow"
>
</a-checkbox>
<div style="margin-top: 2px; margin-left: 8px">
{{ element.lei }}
</div>
</div>
</div>
<div style="width: 120px; text-align: center">
{{ element.creater }}
</div>
<div style="width: 120px; text-align: center">
<div class="opat">
<div class="opacationt clearfix">
<a-switch
style="margin-left: -50px; margin-top: 3px"
:checked="element.checked1"
size="small"
active-color="red"
@click="changeCourseType(element.id)"
/>
<div class="showt clearfix">
<div
class="bi"
:style="{
'z-index': element.checked1 ? 999 : 998,
}"
>
必修
</div>
<div class="xuan">选修</div>
</div>
</div>
</div>
</div>
<div style="width: 87px; text-align: center">
{{ element.cretime }}分钟
</div>
<div
style="
width: 120px;
text-align: center;
margin-right: 20px;
"
>
<div class="opa">
<div class="opacation">
<span
style="
color: #4ea6ff;
margin-right: 25px;
cursor: pointer;
"
@click="decideType(element.lei, element.courseId)"
>
编辑
</span>
<span
style="color: #4ea6ff; cursor: pointer"
@click="showDelete(element.id)"
>
删除
</span>
</div>
</div>
</div>
</div>
</template>
</draggable>
<!-- <a-table
style="border: 1px solid #f2f6fe"
:columns="tableDataFunc()"
:data-source="tableData"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
@expand="expandTable"
:pagination="false"
:row-selection="{
columnWidth: 30,
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
/> -->
<!-- <div class="pa">
<a-pagination
showSizeChanger="true"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize"
:current="currentPage"
:total="tableDataTotal"
class="pagination"
/>
</div> -->
</div>
</div>
<!-- 编辑在线侧弹窗 -->
<div>
<edit-online v-model:editonlineVisible="editonlinevisible" />
</div>
<!-- 编辑在线侧弹窗 -->
</div>
</div>
</div>
<div>
<a-modal
v-model:visible="stage"
:title="null"
@ok="closeModal"
:footer="null"
:closable="false"
wrapClassName="addstage"
width="624px"
height="388px"
centered="true"
>
<div
class="modalHeader"
style="
width: 100%;
height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
"
>
<div class="headerLeft" style="margin-left: 32px">
<span class="headerLeftText" style="font-size: 16px">添加阶段</span>
</div>
<div style="cursor: pointer; margin-right: 32px" @click="closeModal">
<img
style="width: 22px; height: 22px"
src="../../assets/images/basicinfo/close22.png"
/>
</div>
</div>
<div class="modalMain" style="width: 100%">
<div class="name">
<div class="namebox">
<div>
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<div class="inname">阶段名称</div>
</div>
<div class="in">
<a-input
v-model:value="valuesname"
show-count
:maxlength="20"
placeholder="请输入阶段名称"
/>
</div>
</div>
<div class="name" style="display: flex; align-items: flex-start">
<div class="namebox">
<div class="inname">阶段说明</div>
</div>
<div class="intext" style="margin-left: 14px">
<a-textarea
v-model:value="valuesnotice"
style="height: 88px"
show-count
:maxlength="100"
placeholder="请输入阶段说明"
/>
</div>
</div>
<div
style="
display: flex;
width: 100%;
justify-content: center;
margin-top: 40px;
"
>
<button
@click="closeModal"
style="
cursor: pointer;
height: 40px;
width: 100px;
border: 1px solid #409eff;
border-radius: 4px;
color: #409eff;
background-color: #ffffff;
"
>
取消
</button>
<button
@click="editStage"
style="
cursor: pointer;
margin-left: 16px;
margin-bottom: 40px;
height: 40px;
width: 100px;
border: 1px solid #409eff;
border-radius: 4px;
color: #ffffff;
background-color: #409eff;
"
>
确定
</button>
</div>
</div>
</a-modal>
</div>
<!-- 确认添加阶段弹窗 -->
<a-modal
v-model:visible="confirmModal"
:footer="null"
:closable="cC"
wrapClassName="ConfirmModal"
centered="true"
>
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="icon"></div>
<span>提示</span>
<div class="close_exit" @click="closeConfirm"></div>
</div>
<div class="body">
<span>您确定要添加阶段吗</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1">
<div class="btnText" @click="delete_exit">取消</div>
</div>
<div class="del_btn btn2">
<div class="btnText" @click="showModal">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
<!-- 确认取消阶段弹窗 -->
<a-modal
v-model:visible="cancelModal"
:footer="null"
:closable="cC"
wrapClassName="ConfirmModal"
centered="true"
>
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="icon"></div>
<span>提示</span>
<div class="close_exit" @click="closeCancel"></div>
</div>
<div class="body">
<span>您确定要取消阶段吗</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1">
<div class="btnText" @click="delete_exit">取消</div>
</div>
<div class="del_btn btn2">
<div class="btnText" @click="showModal">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
<!-- 确认删除任务弹窗 -->
<a-modal
v-model:visible="deleteModal"
:footer="null"
:closable="cC"
wrapClassName="ConfirmModal"
centered="true"
>
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="icon"></div>
<span>提示</span>
<div class="close_exit" @click="closeDelete"></div>
</div>
<div class="body">
<span>您确定要删除此任务吗</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1">
<div class="btnText" @click="delete_exit">取消</div>
</div>
<div class="del_btn btn2">
<div class="btnText" @click="showModal1">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
</div>
</template>
<script>
import { reactive, toRefs, onMounted, onUnmounted, onUpdated } from "vue";
import AddOnline from "../../components/drawers/AddOnline.vue";
import EditOnline from "../../components/drawers/EditOnline.vue";
import AddFaceteach from "../../components/drawers/AddFaceteach.vue";
import AddCase from "../../components/drawers/AddCase.vue";
import AddHomework from "../../components/drawers/AddHomework.vue";
import AddTest from "../../components/drawers/AddTest.vue";
import AddLive from "../../components/drawers/AddLive.vue";
import AddRef from "../../components/drawers/AddRef.vue";
import AddDiscuss from "../../components/drawers/AddDiscuss.vue";
import AddActive from "../../components/drawers/AddActive.vue";
import AddEval from "../../components/drawers/AddEval.vue";
import AddInvist from "../../components/drawers/AddInvist.vue";
import AddVote from "../../components/drawers/AddVote.vue";
import { message } from "ant-design-vue";
import * as api from "../../api/indexTaskadd";
import * as apilive from "../../api/indexLiveBroadcast";
import * as apiExternal from "../../api/indexExternalChain";
import * as apidiscuss from "../../api/indexDiscuss";
import * as apiactivity from "../../api/indexActivity";
import * as apieval from "../../api/indexEval";
import * as apiinvist from "../../api/indexInvist";
import * as apivote from "../../api/indexVote";
import * as apistage from "../../api/indexStage";
import * as apimove from "../../api/indexMovetask";
import draggable from "vuedraggable";
import { storage } from "../../api/storage";
import { updateExamination, deleteExaminationById } from "@/api/indexExam";
import { updateWorkTaskUsing, deleteWorkTask } from "@/api/indexWork";
const drawercolumns = [
{
title: "项目名称",
dataIndex: "projectName",
key: "projectName",
width: 200,
// align: "center",
ellipsis: true,
// scopedSlots: { customRender: "action" }, //引入的插槽
// customRender: (text, record) => {
// console.log(text, record);
// return <span>{text.text}</span>;
// },
},
{
title: "项目经理",
dataIndex: "manager",
key: "manager",
width: 100,
align: "center",
},
{
title: "创建人",
dataIndex: "creater",
// width: "30%",
key: "creater",
width: 100,
align: "center",
},
{
title: "创建时间",
dataIndex: "time",
key: "time",
width: 180,
align: "center",
},
];
export default {
name: "TaskAdd",
components: {
draggable,
AddOnline,
EditOnline,
AddFaceteach,
AddCase,
AddHomework,
AddTest,
AddLive,
AddRef,
AddDiscuss,
AddActive,
AddEval,
AddInvist,
AddVote,
},
setup() {
const state = reactive({
projectId: storage.get("projectId")
? JSON.parse(storage.get("projectId"))
: null,
chooseStageId: null,
edit: false,
isRefEdit: 1, //外链编辑
isLiveEdit: 1, //直播编辑
EditRefId: null, //要编辑的外链的id
EditEvalId:null,
projectNameList: [
{
id: 1,
value: "项目一",
label: "项目一",
},
{
id: 2,
value: "项目二",
label: "项目二",
},
{
id: 3,
value: "项目三",
label: "项目三",
},
{
id: 4,
value: "项目四",
label: "项目四",
},
],
projectNameList2: [
{
id: 1,
value: "删除任务",
label: "删除任务",
},
{
id: 2,
value: "移动任务到关卡",
label: "移动任务到关卡",
},
],
//阶段数据
level: [],
//任务数据
tableData: [],
drawertableData: [
{
key: 1,
projectName: "管理者进阶",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
children: [
{
key: "1-1",
projectName: "管理者进阶-腾飞班",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
children: [
{
key: "1-1-1",
projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
],
},
],
},
{
key: 2,
projectName: "管理者进阶",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
children: [
{
key: "2-1",
projectName: "管理者进阶-腾飞班",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
children: [
{
key: "2-1-1",
projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
],
},
],
},
{
key: 3,
projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 4,
projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 5,
projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: "1-1-1",
projectName: "管理者进阶-腾飞班K1",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
],
currentPage: 1,
tableDataTotal: 100,
pageSize: 10,
addonlinevisible: false,
addfaceteachvisible: false,
addcasevisible: false,
editonlinevisible: false,
addhomeworkvisible: false,
addtestvisible: false,
addlivevisible: false,
addrefvisible: false,
adddiscussvisible: false,
addactivevisible: false,
addevalvisible: false,
addinvistvisible: false,
addvotevisible: false,
stage: false,
selectedRowKeys: [],
valuesname: "",
valuesnotice: "",
confirmModal: false, //确认添加阶段弹窗
cC: false,
cancelModal: false, //确认取消阶段弹窗
deleteModal: false, //确认删除弹窗
isActive: false,
deleteLiveID: null, //删除直播id
deleteExternalID: null, //删除外链id
deleteEvalID: null, //测评
deleteInvistID: 4, //评估
deleteDiscussID: null, //删除讨论id
deleteActivityID: null, //删除活动id
deleteID: "",
selectRow: [], //选择行
selectAll: 0, //0未选择1全选2部分选择
});
console.log("projectId", state.projectId);
const selectProjectName = (value, index) => {
console.log("value", value, index);
};
const selectProjectName2 = (value, index) => {
console.log("value", value, index);
};
const afterVisibleChange = (bool) => {
console.log("visible", bool);
};
//添加阶段
const editStage = () => {
if (!state.valuesname) {
message.destroy();
return message.warning("请输入阶段名称");
}
let obj = {
name: state.valuesname,
projectId: state.projectId,
remark: state.valuesnotice,
};
apistage
.editStage(obj)
.then((res) => {
console.log("添加阶段成功", res);
(state.valuesname = ""),
(state.valuesnotice = ""),
(state.stage = false);
message.default();
message.success("添加阶段成功");
})
.catch((err) => {
console.log("添加阶段失败", err);
});
};
// 把数据放到state里
const getTableData = (tableData) => {
let data = tableData;
let array = [];
console.log("data", data);
data.map((value) => {
let obj = {
id: value.projectTaskId,
key: value.projectTaskId,
lei:
value.type == 1
? "在线"
: value.type == 2
? "面授"
: value.type == 3
? "案例"
: value.type == 4
? "作业"
: value.type == 5
? "考试"
: value.type == 6
? "直播"
: value.type == 7
? "外链"
: value.type == 8
? "讨论"
: value.type == 9
? "活动"
: value.type == 10
? "测评"
: value.type == 11
? "评估"
: value.type == 12
? "投票"
: "-",
creater: value.name,
cretime: value.duration ? value.duration : "-",
checked1: value.flag ? true : false,
checked: false, //是否选中类型
courseId: value.courseId,
};
array.push(obj);
});
state.tableData = array;
console.log("state.tableData", state.tableData);
};
//把阶段放到level里
const getStageData = (tableData) => {
let data = tableData;
let array = [];
data.map((value) => {
let obj = {
id: value.stageId,
tit: value.name,
name: value.remark,
taskList: value.taskList,
};
array.push(obj);
});
state.level = array;
};
const tableDataFunc = () => {
const columns = [
{
title: "类型",
dataIndex: "state",
// width: "30%",
key: "state",
width: 60,
align: "left",
className: "classify",
scopedSlots: { customRender: "action" },
customRender: (text) => {
// console.log(text.record.checked1);
return (
<div class="racona">
<div
class="img"
style={{ cursor: "pointer" }}
onClick={() => {
console.log("点击了");
}}
></div>
<span> {text.record.lei}</span>
{/**
<div class="img"></div>
<a-checkbox class="ch" checked={text.record.checkedd}>
{text.record.lei}
</a-checkbox>
*/}
</div>
);
},
},
{
title: "任务名称",
dataIndex: "creater",
// width: "30%",
key: "creater",
width: 200,
align: "center",
className: "h",
},
{
title: "必修/选修",
dataIndex: "pubtime",
key: "pubtime",
// width: 100,
align: "center",
className: "h",
scopedSlots: { customRender: "action" },
customRender: (text) => {
// console.log(text.record.checked1);
return (
<div class="opat">
<div class="opacationt clearfix">
<a-switch
style="margin-left:-50px;margin-top:3px"
checked={text.record.checked1}
size="small"
active-color="red"
onClick={() => {
console.log("点击了");
text.record.checked1 = !text.record.checked1;
}}
/>
<div class="showt clearfix">
<div
class="bi"
style={
text.record.checked1 ? "z-index:999" : "z-index:998"
}
>
必修
</div>
<div class="xuan">选修</div>
</div>
</div>
</div>
);
},
},
{
title: "时长",
dataIndex: "cretime",
key: "cretime",
// width: 100,
align: "center",
className: "h",
},
{
title: "操作",
className: "h",
dataIndex: "opacation",
key: "opacation",
// width: 100,
align: "center",
scopedSlots: { customRender: "action" },
customRender: (text) => {
return (
<div class="opa">
<div class="opacation">
<span
onClick={() => {
state.editonlinevisible = true;
console.log(text, "编辑text");
}}
style="color:#4EA6FF;margin-right:25px;cursor:pointer"
>
编辑
</span>
<span
style="color:#4EA6FF;cursor:pointer"
onClick={() => {
showDelete();
state.deleteID = text.record.id;
}}
>
删除
</span>
</div>
</div>
);
},
},
];
return columns;
};
//获取任务列表
const getTask = () => {
let obj = {
projectId: state.projectId,
// projectId: 28,
};
api
.getTask(obj)
.then((res) => {
if (res.status == 200) {
console.log("22222", res.data.data.stageList);
// console.log("22222", res.data.data.stageList);
let leng = res.data.data.stageList.length;
if (leng > 0) {
//获取任务列表
let arr = res.data.data.stageList[0].taskList;
getTableData(arr);
}
let stagearr = res.data.data.stageList;
console.log(stagearr, 111111);
if (stagearr.length > 0) {
getStageData(stagearr);
}
//给阶段id赋初始值
state.chooseStageId = leng > 0 ? stagearr[0].stageId : null;
console.log(state.chooseStageId, 1111);
}
})
.catch((err) => {
console.log("获取任务列表失败", err);
});
};
//获取阶段
// const getStage = () =>{
// let obj = {
// projectId:state.projectId
// }
// }
//数据变化
const updateTableData = (data) => {
console.log("添加数据", data);
getTask(data);
};
// 编辑考试
const updateTest = (id) => {
let obj = {
createTime: "",
createUser: 0,
examinationDuration: "",
examinationEndTime: "",
examinationExplain: "",
examinationFlag: "",
examinationId: id || 0,
examinationLimit: "",
examinationName: "",
examinationPaperId: 0,
examinationPaperName: "",
examinationStartTime: "",
examinationTag: "",
passLine: "",
questionArrangement: "",
scoringModel: "",
showAnalysis: "",
showAnswers: "",
updateTime: "",
updateUser: 0,
};
updateExamination(obj)
.then((res) => {
console.log(res);
message.error(`编辑成功`);
})
.catch(() => {
message.error(`编辑失败`);
});
};
// 删除考试
const deleteTest = () => {
let obj = {
examinationId: 0,
};
deleteExaminationById(obj)
.then((res) => {
console.log("删除成功", res);
message.success("删除成功");
//重新获取列表
getTask();
})
.catch((err) => {
console.log(err);
});
};
// 删除作业
const deleteWork = () => {
let obj = {
workId: 0,
};
deleteWorkTask(obj)
.then((res) => {
console.log("删除成功", res);
message.success("删除成功");
//重新获取列表
getTask();
})
.catch((err) => {
console.log(err);
});
};
// 编辑作业
const updateWork = () => {
let obj = {
createTime: "",
createUser: 0,
submitEndTime: "",
submitStartTime: "",
updateTime: "",
updateUser: 0,
workEnclosureAddress: "",
workFlag: "",
workId: 0,
workName: "",
workRequirement: "",
workTag: "",
};
updateWorkTaskUsing(obj)
.then((res) => {
console.log(res);
})
.catch((err) => {
message.error(`编辑失败${err}`);
});
};
//删除直播
const deleteLiveBroadcast = () => {
let obj = {
liveId: state.deleteLiveID,
};
apilive
.deleteLiveBroadcast(obj)
.then((res) => {
console.log("删除成功", res);
message.success("删除成功");
//重新获取列表
getTask();
})
.catch((err) => {
console.log(err);
});
};
//删除外链
const deleteExternalChain = () => {
let obj = {
linkId: state.deleteExternalID,
// linkId: 11,
};
apiExternal
.deleteLink(obj)
.then((res) => {
console.log(res);
//重新获取列表
getTask();
})
.catch((err) => {
console.log(err);
});
};
//删除讨论
const deleteDiscuss = () => {
let obj = {
discussId: state.deleteDiscussID,
};
apidiscuss
.deleteDiscuss(obj)
.then((res) => {
console.log("删除成功", res);
message.success("删除成功");
state.deleteModal = false;
//重新获取列表
getTask();
})
.catch((err) => {
console.log("删除失败", err);
});
};
//编辑讨论
const editDiscuss = () => {
let obj = {
createTime: "",
createUser: 0,
discussExplain: "",
discussFlag: "",
discussId: 0,
discussName: "",
discussSettings: "",
discussTag: "",
projectId: 0,
updateTime: "",
updateUser: 0,
};
apidiscuss
.updateDiscuss(obj)
.then((res) => {
console.log("更新成功", res);
message.success("更新成功");
})
.catch((err) => {
console.log("更新失败", err);
});
};
//删除活动
const deleteActivity = () => {
let obj = {
activityId: state.deleteActivityID,
};
apiactivity
.deleteActivity(obj)
.then((res) => {
console.log("删除成功", res);
message.success("删除成功");
state.deleteModal = false;
//重新获取列表
getTask();
})
.catch((err) => {
console.log("删除失败", err);
});
};
//编辑活动
const editActivity = () => {
let obj = {
activityAddress: "",
activityDuration: "",
activityEndTime: "",
activityExplain: "",
activityFlag: "",
activityId: 0,
activityName: "",
activityNotice: "",
activityStartTime: "",
activityTag: "",
afterSignIn: "",
beforeSignIn: "",
createTime: "",
createUser: 0,
signOutTime: "",
standardSettings: "",
updateTime: "",
updateUser: 0,
};
apiactivity
.updateActivity(obj)
.then((res) => {
console.log("更新成功", res);
message.success("更新成功");
})
.catch((err) => {
console.log("更新失败", err);
});
};
//删除测评测试
const deleteEvalText = () => {
let obj = {
evaluationId: "",
token: 123,
};
apieval
.deleteEvaluationById(obj)
.then((res) => {
console.log("删除成功", res);
message.success("删除成功");
//重新获取列表
getTask();
})
.catch((err) => {
console.log("删除失败", err);
});
};
//删除评估测试
const deleteInvistText = () => {
let obj = {
评估信息Id: "",
token: "",
};
apiinvist
.deleteAppraise(obj)
.then((res) => {
console.log("删除成功", res);
message.success("删除成功");
//重新获取列表
getTask();
})
.catch((err) => {
console.log("删除失败", err);
});
};
//编辑评估信息
const editInvistPath = () => {
let obj = {
appraiseEndTime: "",
appraiseExplain: "",
appraiseFlag: "",
appraiseId: 0,
appraiseName: "",
appraiseStartTime: "",
appraiseTag: "",
createTime: "",
createUser: 0,
researchId: 0,
researchName: "",
updateTime: "",
updateUser: 0,
};
apiinvist
.updateAppraiseMessage(obj)
.then((res) => {
setTimeout(() => {
console.log("修改成功", res);
message.success("修改成功");
}, 1000);
})
.catch((err) => {
console.log("修改失败", err);
// state.createLoading = false;
//重新获取列表
getTask();
});
};
//删除任务
const deleteTask = () => {
let obj = { projectTaskIds: state.deleteID };
api
.deleteTask(obj)
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
};
//删除投票信息
const deleteVoteText = () => {
let obj = {
voteId: "",
};
apivote
.deleteVoteMessage(obj)
.then((res) => {
console.log("删除成功", res);
message.success("删除成功");
//重新获取列表
getTask();
})
.catch((err) => {
console.log("删除失败", err);
});
};
//编辑投票信息
const editVotePath = () => {
let obj = {
baseVote: "",
createTime: "",
createUser: 0,
stem: "",
stemId: 0,
updateTime: "",
updateUser: 0,
voteEndTime: "",
voteExplain: "",
voteFlag: "",
voteId: 0,
voteName: "",
voteStartTime: "",
voteTag: "",
};
apivote
.editVote(obj)
.then((res) => {
setTimeout(() => {
console.log("修改成功", res);
message.success("修改成功");
}, 1000);
})
.catch((err) => {
console.log("修改失败", err);
// state.createLoading = false;
//重新获取列表
getTask();
});
};
//移动任务到阶段
const moveTask = () => {
let obj = {
stageId: state.chooseStageId,
projectTaskId: state.selectRow,
};
apimove
.moveTask(obj)
.then((res) => {
console.log("移动成功", res);
message.destroy();
message.success("移动成功");
getTask();
})
.catch((err) => {
console.log("移动失败", err);
});
};
//批量删除
const deleteTaskAll = () => {
let arr = state.selectRow;
console.log("选择的行信息", arr);
arr.map((value) => {
let obj = {
projectTaskIds: value,
};
api
.deleteTask(obj)
.then((res) => {
console.log(res);
message.destroy();
message.success("批量删除成功");
getTask();
})
.catch((err) => {
console.log(err);
});
});
};
const onSelectChange = (selectedRowKeys) => {
console.log("selectedRowKeys changed: ", selectedRowKeys);
state.selectedRowKeys = selectedRowKeys;
};
// const getClientHeight = () => {
// state.rightheight =
// document.getElementsByClassName("addhead")[0].offsetHeight +
// document.getElementsByClassName("mid")[0].offsetHeight +
// document.getElementsByClassName("boom")[0].offsetHeight +
// 40 +
// "px";
// };
//添加阶段详情
const showModal = () => {
state.stage = true;
//关闭确认框
closeConfirm();
};
const showModal1 = () => {
//关闭确认框
state.deleteModal = false;
deleteTask();
message.success("删除成功");
getTask();
};
const closeModal = () => {
state.stage = false;
};
onMounted(() => {
document.getElementsByTagName("main")[0].style.background =
"rgb(245, 247, 250,1)";
document.getElementsByTagName("main")[0].style.boxShadow = "none";
getTask();
});
onUpdated(() => {
// getTask();
// setTimeout(() => {
// getTask();
// }, 500);
});
onUnmounted(() => {
document.getElementsByTagName("main")[0].style.background = "#ffffff";
document.getElementsByTagName("main")[0].style.boxShadow =
"0px 1px 35px 0px rgba(118, 136, 166, 0.07)";
});
const showDrawerOnline = () => {
state.addonlinevisible = true;
};
const showDrawerFaceteach = () => {
state.addfaceteachvisible = true;
};
const showDrawerAddCase = () => {
state.addcasevisible = true;
};
const showDrawerAddHomework = () => {
state.addhomeworkvisible = true;
};
const showDrawerAddTest = () => {
state.addtestvisible = true;
};
const showDrawerAddLive = () => {
state.addlivevisible = true;
};
const showDrawerAddRef = () => {
state.addrefvisible = true;
};
const showDrawerAddDiscuss = () => {
state.adddiscussvisible = true;
};
const showDrawerAddActive = () => {
state.addactivevisible = true;
};
const showDrawerAddEval = () => {
state.addevalvisible = true;
};
const showDrawerAddInvist = () => {
state.addinvistvisible = true;
};
const showDrawerAddVote = () => {
state.addvotevisible = true;
};
const showConfirm = () => {
state.confirmModal = true;
};
const closeConfirm = () => {
state.confirmModal = false;
};
const showCancel = () => {
state.cancelModal = true;
};
const closeCancel = () => {
state.cancelModal = false;
};
const showDelete = (id) => {
state.deleteModal = true;
state.deleteID = id;
};
const closeDelete = () => {
state.deleteModal = false;
};
const changebgc = (id) => {
state.isActive = !state.isActive;
state.selectRow = []; //选择行
state.selectAll = 0; //0未选择1全选2部分选择
console.log("state.level", id, state.level);
state.chooseStageId = id;
let final = state.level.find((item) => item.id === id);
getTableData(final.taskList);
};
//选择单个任务
const changeRow = (e) => {
//selectRow:已经选择的任务的id数组
let arr = state.selectRow;
if (e.target.checked) {
arr.push(e.target.id);
} else {
arr.map((value, index) => {
if (value == e.target.id) {
arr.splice(index, 1);
}
});
}
state.selectRow = arr;
//判断是否是全部选择或者是全部未选择来修改selectAll框的样式
if (arr.length !== 0) {
if (arr.length === state.tableData.length) {
state.selectAll = 1;
} else {
state.selectAll = 2;
}
} else {
state.selectAll = 0;
}
console.log("state.selectRow", state.selectRow, state.selectAll);
};
//全选任务或全不选任务
const selectRowAll = () => {
let arr = state.tableData;
let array = [];
if (state.selectAll === 0 || state.selectAll === 2) {
arr.map((value) => {
// console.log("value", value, index);
value.checked = true;
array.push(value.id);
// if (value == e.target.id) {
// arr.splice(index, 1);
// }
state.selectAll = 1;
});
} else {
array = [];
arr.map((value) => {
// console.log("value", value, index);
value.checked = false;
state.selectAll = 0;
});
}
state.tableData = arr;
state.selectRow = array;
};
//修改任务的课程类型 id为任务id
const changeCourseType = (id) => {
console.log("任务id", id);
};
//打开编辑外链的弹窗
const showEditRefDrawer = (id) => {
state.addrefvisible = true;
state.isRefEdit = 2;
state.EditRefId = id;
};
//打开编辑直播的弹窗
const showEditLiveDrawer = (id) => {
state.addlivevisible = true;
state.isLiveEdit = 2;
state.EditLiveId = id;
};
//打开测评的弹窗
const showEditEvalDrawer = (id) => {
console.log('222222222222222222222',id);
state.addevalvisible = true;
state.EditRefId = id;
console.log(state.EditRefId);
};
//编辑的按钮
const decideType = (type, id) => {
state.edit = true;
console.log(type, id);
if (type == "外链") {
showEditRefDrawer(id);
}
else if (type == "直播") {
showEditLiveDrawer(id);
}
else if (type == "测评") {
showEditEvalDrawer(id)
}
else if (type == "评估") {
showDrawerAddInvist(id)
}
else if (type == "投票") {
showDrawerAddVote(id)
}
else if (type == "讨论") {
showDrawerAddDiscuss(id)
}
}
return {
...toRefs(state),
selectProjectName,
selectProjectName2,
tableDataFunc,
showModal,
closeModal,
// showDrawer,
afterVisibleChange,
drawercolumns,
onSelectChange,
showDrawerOnline,
showDrawerFaceteach,
showDrawerAddCase,
showDrawerAddHomework,
showDrawerAddTest,
showDrawerAddLive,
showDrawerAddRef,
showDrawerAddDiscuss,
showDrawerAddActive,
showDrawerAddEval,
showEditEvalDrawer,
showDrawerAddInvist,
showDrawerAddVote,
showConfirm,
closeConfirm,
showCancel,
showModal1,
closeCancel,
showDelete,
closeDelete,
changebgc,
getTask,
deleteLiveBroadcast,
deleteDiscuss,
editDiscuss,
deleteEvalText,
deleteExternalChain,
deleteActivity,
deleteVoteText,
editActivity,
deleteInvistText,
editInvistPath,
editVotePath,
getTableData,
deleteTask,
editStage,
updateTableData,
changeRow,
selectRowAll,
changeCourseType,
getStageData,
moveTask,
deleteTaskAll,
updateTest,
updateWork,
deleteTest,
deleteWork,
decideType,
showEditRefDrawer,
showEditLiveDrawer,
};
},
};
</script>
<style lang="scss">
// .ant-input {
// border-radius: 8px;
// // height: 120%;
// width: 384px;
// height: 88px;
// }
.ConfirmModal {
.ant-modal {
width: 424px !important;
height: 258px !important;
.ant-modal-content {
width: 424px !important;
height: 258px !important;
.ant-modal-body {
width: 424px !important;
height: 258px !important;
padding: 0 !important;
.delete {
z-index: 999;
width: 424px;
height: 258px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
border-radius: 4px;
// position: absolute;
// left: 50%;
// top: 10%;
// transform: translate(-50%, -50%);
.del_header {
position: absolute;
width: calc(100%);
height: 40px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.del_main {
width: 100%;
position: relative;
.header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
.icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/QR.png);
background-size: 100% 100%;
}
.close_exit {
position: absolute;
right: 42px;
cursor: pointer;
width: 20px;
height: 20px;
background-image: url(@/assets/images/coursewareManage/close.png);
background-size: 100% 100%;
}
}
.body {
width: 100%;
margin: 34px auto 56px auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
// background-color: red;
position: relative;
.back {
position: absolute;
top: 30px;
font-size: 12px;
font-weight: 400;
color: #666666;
}
}
.del_btnbox {
display: flex;
margin: 30px auto;
justify-content: center;
.del_btn {
width: 100px;
height: 40px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 40px;
}
}
.btn1 {
border: 1px solid rgba(64, 158, 255, 1);
color: #4ea6ff;
margin-right: 14px;
}
.btn2 {
background-color: #4ea6ff;
color: #ffffff;
}
}
}
}
}
}
}
}
.addstage {
.ant-modal {
.ant-modal-body {
padding: 0 !important;
.modalHeader {
background: linear-gradient(
0deg,
rgba(78, 166, 255, 0) 0%,
rgba(78, 166, 255, 0.2) 100%
);
}
.modalMain {
.ant-input-textarea-show-count {
position: relative;
height: 88px;
}
.ant-input-textarea-show-count::after {
position: absolute;
right: 10px;
bottom: 5px;
}
}
}
}
}
.info {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 30px;
// align-items: center;
// height: 40px;
// border: 1px solid black;
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 26px;
margin-top: 15px;
}
.in {
margin-left: 14px;
width: 81%;
position: relative;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 130px;
resize: none;
}
}
}
.name {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 20px;
align-items: center;
//height: 40px;
// border: 1px solid black;
.namebox {
width: 120px;
display: flex;
align-items: center;
justify-content: flex-end;
flex-shrink: 0;
.nameimg {
width: 10px;
height: 10px;
}
}
.d {
margin-top: 8px;
font-size: 25px;
color: #ff4e4e;
}
.box {
position: relative;
margin-left: 14px;
.box1 {
position: absolute;
left: 50%;
top: 50%;
width: 50px;
margin-left: -25px;
margin-top: -5px;
border-top: 2px solid rgba(78, 166, 255, 1);
}
.box2 {
position: absolute;
left: 50%;
top: 50%;
height: 50px;
//margin-left: -5px;
margin-top: -25px;
border-left: 2px solid rgba(78, 166, 255, 1);
}
}
.inname {
color: #000000;
font-size: 14px;
margin-left: 7px;
}
.in {
margin-left: 14px;
flex: 1;
// .ant-radio-wrapper {
// }
.ant-input-affix-wrapper {
width: 384px;
border-radius: 8px;
}
.ant-input {
border-radius: 8px;
// height: 120%;
//width: 384px;
height: 30px;
}
}
}
.drawerStyle {
.ant-drawer-content-wrapper {
// max-width: 1000px;
.ant-drawer-header {
display: none !important;
}
.ant-drawer-body {
padding: 0;
}
}
.drawerMain {
min-width: 600px;
margin: 0px 32px 0px 32px;
overflow-x: auto;
display: flex;
flex-direction: column;
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
// background-color: red;
margin-bottom: 20px;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
// margin-left: 24px;
}
}
.drawerbox {
margin: 20px 38px 30px;
th {
background-color: #eff4fc !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: #f6f9fd;
}
}
.btnn {
height: 72px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
.btn1 {
width: 100px;
height: 40px;
border: 1px solid #4ea6ff;
border-radius: 8px;
color: #4ea6ff;
background-color: #fff;
cursor: pointer;
}
.btn2 {
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
}
}
}
}
.allCon {
width: 100%;
display: flex;
min-width: 933px;
// min-width: 1200px;
// overflow-x: hidden;
// min-width: 1400px;
// overflow: scroll;
background-color: rgba(245, 247, 250, 1);
.left {
margin-right: 20px;
width: 208px;
// height: 100%;
// flex: 1;
// height: 100%;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
display: flex;
justify-content: center;
.leftmain {
// width: 86%;
margin-top: 20px;
.tit {
margin-left: 20px;
font-size: 18px;
color: #363636;
}
// flex-wrap: wrap;
.btn {
margin-top: 20px;
// padding: 0px 26px 0px 26px;
height: 38px;
background: #fff6e8;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
// margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #ffb64e;
// line-height: 38px;
margin-top: 4px;
margin-left: 5px;
}
}
.btn3 {
width: 171px;
margin-right: 0px;
.search {
width: 17px;
height: 18px;
background-image: url("../../assets/images/leveladd/add.png");
background-size: 100% 100%;
}
}
.maincon {
margin-top: 17px;
width: 208px;
display: flex;
flex-direction: column;
align-items: center; // background-color: #bfa;
.ghost {
// background-color: red;
opacity: 0 !important;
}
.item {
width: 171px;
height: 83px;
display: flex;
background: rgba(255, 182, 78, 0.1);
border: 1px solid #ffb64e;
opacity: 0.45;
border-radius: 8px;
margin-bottom: 17px;
align-items: center;
position: relative;
.itemle {
margin-left: 17px;
.tit {
color: black;
// color: red;
font-size: 14px;
margin-bottom: 8px;
font-weight: bold;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100px;
}
.name {
font-size: 14px;
color: #878b92;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100px;
}
}
.itemri {
display: flex;
flex-direction: column;
position: absolute;
right: 16px;
}
}
.bgcactive {
opacity: 1;
// transition: all 0.5s;
}
}
}
}
.right {
flex: 1;
// background-color: #fff;
display: flex;
flex-direction: column;
.addhead {
width: 100%;
// min-width: 500px;
// height: 130px;
// flex: 1;
background-color: #fff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
display: flex;
align-items: center;
position: relative;
.filt {
margin: 16px 30px 16px 22px;
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
flex-wrap: wrap;
.le {
display: flex;
align-items: center;
// margin-bottom: 10px;
.leftimg {
width: 151px;
height: 100px;
border: 10px solid #e7f2ff;
border-radius: 8px;
margin-left: 20px;
.img {
width: 100%;
height: 100%;
}
}
.imgfor {
margin-left: 32px;
.forz {
color: #363636;
font-size: 16px;
}
.fort {
color: #878b92;
font-size: 14px;
margin-top: 20px;
}
}
}
.rightt {
// width: 500px;
height: 100%;
// background-color: red;
// position: absolute;
// right: 0;
display: flex;
align-items: center;
.select {
margin-right: 50px;
// margin-bottom: 20px;
}
.line {
height: 60px;
width: 1px;
background-color: #e8effa;
margin-right: 18px;
}
.img2 {
width: 42px;
height: 42px;
margin-right: 18px;
}
.pub {
color: #57c887;
font-size: 14px;
margin-top: 5px;
margin-right: 30px;
cursor: pointer;
white-space: nowrap;
}
@media screen and (max-width: 1050px) {
.pub {
margin-right: 10px;
}
.line {
margin-right: 10px;
}
}
.return {
color: #4ea6ff;
font-size: 14px;
margin-top: 13px;
margin-right: 20px;
white-space: nowrap;
}
.role {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 400;
color: #333330;
line-height: 36px;
cursor: pointer;
position: relative;
margin-right: 20px;
.roleArrow {
width: 13px;
height: 7px;
margin-left: 8px;
background-image: url(../../assets/images/navtop/down.png);
background-size: 100%;
}
.roleItems {
width: 109px;
height: 90px;
padding-top: 10px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
position: absolute;
top: 35px;
right: 0px;
text-align: center;
display: none;
z-index: 100;
}
.roleItem {
font-size: 14px;
font-weight: 400;
color: rgba(79, 81, 86, 1);
line-height: 36px;
}
.roleItem:hover {
color: #4ea6ff;
}
}
.role:hover .roleItems {
display: block;
}
.role:hover .roleArrow {
background-image: url(../../assets/images/navtop/up.png);
}
}
}
}
.mid {
width: 100%;
// height: 130px;
margin-top: 20px;
margin-bottom: 20px;
background-color: #fff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
display: flex;
align-items: center;
flex-wrap: wrap;
.item {
height: 115px;
// width: 7.7%;
display: flex;
align-items: center;
.itcon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
margin-left: 38px;
margin-right: 38px;
.img {
cursor: pointer;
}
.text {
font-size: 16px;
color: #363636;
margin-top: 5px;
white-space: nowrap;
}
}
.lin {
width: 1px;
height: 60%;
background-color: #e8effa;
}
.no {
display: none;
}
}
}
.boom {
width: 100%;
flex: 1;
background-color: #fff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
display: flex;
justify-content: center;
.boomcen {
width: 95%;
// height: 100%;
// background-color: #bfa;
.onerow {
width: 100%;
display: flex;
height: 40px;
position: relative;
margin-top: 20px;
.taskmain {
font-size: 18px;
color: #000000;
margin-top: 10px;
}
.btn {
position: absolute;
top: 0;
right: 130px;
background-color: #409eff;
width: 130px;
height: 40px;
border-radius: 8px;
border: 1px solid #409eff;
color: #ffffff;
cursor: pointer;
}
.edit {
position: absolute;
right: 0;
top: 0;
color: #409eff;
width: 120px;
height: 40px;
border: 1px solid #409eff;
border-radius: 8px;
.editimg {
width: 15px;
height: 15px;
margin-top: -2px;
margin-left: 25px;
margin-right: 5px;
}
.editext {
line-height: 40px;
}
}
.edit:hover {
color: #ffffff;
background-color: #409eff;
cursor: pointer;
.editimg {
background-image: url("../../assets/images/projectadd/delete1.png");
}
}
}
.notable {
width: 100%;
display: flex;
justify-content: center;
.notablebox {
width: 412px;
height: 212px;
background: linear-gradient(180deg, #fef3dd 0%, #fffaf0 100%);
border-radius: 10px;
display: flex;
justify-content: center;
text-align: center;
margin-top: 77px;
margin-bottom: 109px;
cursor: pointer;
position: relative;
.smallleft {
position: absolute;
top: 18px;
left: 0px;
width: 8px;
height: 21px;
border-radius: 0px 4px 4px 0px;
background-color: #ffb64e;
}
.smallright {
position: absolute;
bottom: 18px;
right: 0px;
width: 8px;
height: 21px;
border-radius: 4px 0px 0px 4px;
background-color: #ffb64e;
}
.boxbody {
.boximg {
width: 72px;
height: 72px;
margin: 32px auto 20px auto;
background-image: url(@/assets/images/coursewareManage/nostate.png);
background-size: 100% 100%;
}
.boxtitle {
margin-bottom: 4px;
}
}
}
}
.rwbox {
position: relative;
.talk {
margin-top: 24px;
margin-bottom: 11px;
width: 100%;
height: 50px;
background: #f5faff;
border: 1px solid #4ea6ff;
// opacity: 0.22;
display: flex;
align-items: center;
.im {
width: 14px;
height: 15px;
margin-left: 27px;
}
.xu {
height: 100%;
line-height: 50px;
margin-left: 13px;
.yi {
color: #4f5156;
font-size: 14px;
}
.zon {
color: #999ba3;
font-size: 14px;
margin-left: 34px;
}
.th {
color: #4ea6ff;
}
}
}
.tableBox {
margin-bottom: 20px;
margin-top: 20px;
.chosen {
background-color: #f2f6fc;
opacity: 1;
}
.ghost {
// background-color: red;
opacity: 0;
}
.tableRow:hover {
background-color: #f2f6fc;
}
// .tableRow: {
// background-color: #f2f6fc;
// }
.classify {
margin-left: 10px !important;
padding-left: 9px !important;
}
.ant-checkbox-wrapper {
align-items: center;
margin-top: -2px;
}
.ant-table-selection-column {
padding: 0px !important;
padding-left: 60px !important;
}
.ant-table-thead > tr > th {
background-color: rgba(239, 244, 252, 1);
}
th.h {
background-color: #eff4fc !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: #f6f9fd;
}
.pa {
left: 0;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: center;
position: absolute;
bottom: 20px;
}
}
}
}
}
// .drawerbox {
// // margin: 20px 38px 30px;
// th.h {
// background-color: #eff4fc !important;
// }
// .ant-table-tbody
// > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
// > td {
// background: #f6f9fd;
// }
// }
}
.opat {
.opacationt {
display: flex;
align-items: center;
justify-content: center;
.ant-switch-checked {
background-color: #5dc988;
}
.showt {
// margin-top: 10px;
display: flex;
margin-left: 10px;
height: 23px;
position: relative;
.bi {
// margin-top: 10px;
width: 63px;
height: 23;
background-color: #5dc988;
line-height: 23px;
position: absolute;
z-index: 998;
color: #ffffff;
border-radius: 4px;
}
.xuan {
width: 63px;
height: 23px;
background-color: #f2f6fc;
line-height: 23px;
// display: none;
position: absolute;
z-index: 998;
color: #5dc988;
border-radius: 4px;
}
}
}
}
.racona {
display: flex;
align-items: center;
height: 100%;
.img {
width: 17px;
height: 14px;
background-image: url("../../assets/images/leveladd/z1.png");
// position: absolute;
// left: -40px;
}
.ch {
margin-left: 10px;
}
}
}
</style>