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

2642 lines
72 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"
:list="level"
>
<template #item="{ element }">
<div
class="item"
:class="
isactive == index && isActive == true ? 'bgcactive' : ''
"
@click="changebgc(index)"
>
<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"
/>
</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"
/>
</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"
@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"
@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"
/>
</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"
/>
</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"
/>
</div>
<!-- 添加投票侧弹窗 -->
</div>
</div>
</div>
<div class="boom">
<div class="boomcen">
<div class="onerow">
<div class="taskmain">任务列表</div>
<button class="btn">移动任务到阶段</button>
<div class="edit">
<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;
"
>
<a-checkbox :checked="selectRow.length !== 0 ? true : false">
</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"
:list="tableData"
>
<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="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"
/>
<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;
"
>
编辑
</span>
<span style="color: #4ea6ff; cursor: pointer">
删除
</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 draggable from "vuedraggable";
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({
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: [
{
id: "1",
tit: "阶段1",
name: "腾飞班1基础",
},
{
id: "2",
tit: "阶段2",
name: "腾飞班基础",
},
{
id: "2",
tit: "阶段2",
name: "中级产品经理",
},
{
id: "2",
tit: "阶段2",
name: "中级产品经理",
},
{
id: "2",
tit: "阶段2",
name: "中级产品经理",
},
],
//任务数据
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: -1,
isActive: false,
deleteLiveID: null, //删除直播id
deleteExternalID: null, //删除外链id
deleteEvalID: null, //测评
deleteInvistID: 4, //评估
deleteDiscussID: null, //删除讨论id
deleteActivityID: null, //删除活动id
deleteID: "",
selectRow: [], //选择行
});
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: 28,
remark: state.valuesnotice,
};
apistage
.editStage(obj)
.then((res) => {
console.log("添加阶段成功", res);
message.default();
message.success("添加阶段成功");
})
.catch((err) => {
console.log("添加阶段失败", err);
});
};
// 把数据放到state里
const getTableData = (tableData) => {
let data = tableData;
let array = [];
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,
};
array.push(obj);
});
state.tableData = 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");
editInvistPath();
}}
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: 28,
};
api
.getTask(obj)
.then((res) => {
if (res.status == 200) {
console.log("22222", res.data.data.stageList);
let leng = res.data.data.stageList.length;
let arr = res.data.data.stageList[leng - 1].taskList;
getTableData(arr);
}
})
.catch((err) => {
console.log("获取任务列表失败", err);
});
};
//数据变化
const updateTableData = (data) => {
console.log("添加数据", data);
getTask(data);
};
//删除直播
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 editEvalPath = () => {
let obj = {
createTime: "",
createUser: 0,
evaluationEndTime: "",
evaluationFlag: "",
evaluationId: "",
evaluationName: "",
evaluationPictureAddress: "",
evaluationStartTime: "",
evaluationTag: "",
evaluationTypeId: 0,
evaluationTypeName: "",
updateTime: "",
updateUser: 0,
};
apieval
.updateEvaluation(obj)
.then((res) => {
setTimeout(() => {
console.log("修改成功", res);
message.success("修改成功");
}, 1000);
})
.catch((err) => {
console.log("修改失败", err);
// state.createLoading = false;
//重新获取列表
getTask();
});
};
//编辑直播信息
const editLiveBroadcast = () => {
let obj = {
afterSignIn: "",
beforeSignIn: "",
createTime: "",
createUser: 0,
liveCover: "",
liveDuration: 0,
liveEndTime: "",
liveExplain: "",
liveFlag: "",
liveId: 0,
liveLink: "",
liveName: "",
livePlayback: "",
livePlaybackLink: "",
liveStartTime: "",
liveTag: "",
liveTeacherId: 0,
otherSettings: "",
signOutTime: "",
standardSettings: "",
updateTime: "",
updateUser: 0,
};
apilive
.updateLiveBroadcastMessage(obj)
.then((res) => {
console.log(res);
message.success("修改成功");
})
.catch((err) => {
console.log(err);
message.warn("修改失败");
});
};
//编辑外链信息
const editExternal = () => {
let obj = {
createTime: "",
createUser: 0,
linkAddress: "",
linkDescription: "",
linkFlag: "",
linkId: 0,
linkName: "",
linkTag: "",
updateTime: "",
updateUser: 0,
};
apiExternal
.updateLinks(obj)
.then((res) => {
console.log(res);
message.success("修改成功");
})
.catch((err) => {
console.log(err);
message.warn("修改失败");
});
};
//删除评估测试
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 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 = () => {
state.deleteModal = true;
};
const closeDelete = () => {
state.deleteModal = false;
};
const changebgc = (index) => {
state.isactive = index;
state.isActive = !state.isActive;
};
//选择表格
const changeRow = (e) => {
console.log("选择行", e);
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;
console.log("state.selectRow", state.selectRow);
};
return {
...toRefs(state),
selectProjectName,
selectProjectName2,
tableDataFunc,
showModal,
closeModal,
// showDrawer,
afterVisibleChange,
drawercolumns,
onSelectChange,
showDrawerOnline,
showDrawerFaceteach,
showDrawerAddCase,
showDrawerAddHomework,
showDrawerAddTest,
showDrawerAddLive,
showDrawerAddRef,
showDrawerAddDiscuss,
showDrawerAddActive,
showDrawerAddEval,
showDrawerAddInvist,
showDrawerAddVote,
showConfirm,
closeConfirm,
showCancel,
showModal1,
closeCancel,
showDelete,
closeDelete,
changebgc,
getTask,
deleteLiveBroadcast,
deleteDiscuss,
editDiscuss,
deleteEvalText,
deleteExternalChain,
deleteActivity,
deleteVoteText,
editActivity,
editEvalPath,
deleteInvistText,
editLiveBroadcast,
editExternal,
editInvistPath,
editVotePath,
getTableData,
deleteTask,
editStage,
updateTableData,
changeRow,
};
},
};
</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;
.chosen {
// background-color: pink;
}
.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 {
padding-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;
.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>