Files
fe-manage/src/views/projectcenter/ProjectManage.vue
2022-12-19 19:56:27 +08:00

2797 lines
78 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="projectManage">
<!-- 搜索框及按钮 -->
<div class="filter">
<div class="filterItems">
<div class="select">
<a-input
v-model:value="searchParam.name"
style="width: 270px; height: 40px; border-radius: 8px"
placeholder="请输入项目名称"
allowClear
showSearch
>
</a-input>
</div>
<div class="select">
<a-input
v-model:value="searchParam.manager"
style="width: 270px; height: 40px; border-radius: 8px"
placeholder="请输入项目经理"
allowClear
showSearch
>
</a-input>
</div>
<div class="select">
<a-input
v-model:value="searchParam.createName"
style="width: 270px; height: 40px; border-radius: 8px"
placeholder="请输入项目创建人"
allowClear
showSearch
>
</a-input>
</div>
<div class="select">
<a-select
v-model:value="searchParam.status"
style="width: 270px"
placeholder="请选择状态"
:options="sProjectStateList"
allowClear
></a-select>
</div>
<div class="select addTimeBox">
<div class="addTime">创建时间</div>
<a-range-picker
show-time
v-model:value="searchParam.valueDate"
format="YYYY-MM-DD"
style="border-radius: 8px; height: 40px; margin-left: 5px"
:placeholder="[' 开始时间', ' 结束时间']"
/>
</div>
<div style="display: flex; margin-bottom: 20px">
<div class="btnn btn1" @click="searchSubmit">
<div class="search"></div>
<div class="btnText">搜索</div>
</div>
<div class="btn btn2" @click="searchReset">
<div class="search"></div>
<div class="btnText">重置</div>
</div>
</div>
</div>
<div class="btns">
<div class="btn btn3" @click="showModal1">
<div class="search"></div>
<div class="btnText">创建项目</div>
</div>
</div>
</div>
<!-- 搜索框及按钮 -->
<!-- 表格 -->
<div class="tableBox">
<a-table
:columns="columns"
:data-source="tableData"
:loading="tableDataTotal === -1 ? true : false"
:scroll="{ x: 700 }"
@expand="expandTable"
:pagination="false"
>
</a-table>
<div class="tableBox">
<div class="pa">
<a-pagination
v-if="tableDataTotal > 10"
:showSizeChanger="false"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize"
v-model:current="searchParam.pageNo"
:total="tableDataTotal"
class="pagination"
@change="changePagination"
/>
</div>
</div>
</div>
<!-- 表格 -->
<!-- 无项目 -->
<div class="tableBox" style="display: none">
<div
class="taskbox"
@click="showModal1"
style="background: linear-gradient(180deg, #ddeaff, #f0f8fe)"
>
<div class="leftt">
<img src="../../assets/images/taskpage/left2.png" />
</div>
<div class="photo">
<img src="../../assets/images/projectadd/nopro.png" />
</div>
<div class="rightt">
<img src="../../assets/images/taskpage/right2.png" />
</div>
<div class="centerbox" style="color: rgba(78, 166, 255, 1)">
创建项目
</div>
<div class="centermain">点击创建项目任务</div>
</div>
</div>
<!-- 创建多层项目弹窗 -->
<div>
<a-modal
v-model:visible="doublepro"
:title="null"
@ok="closeModal2"
:footer="null"
:closable="false"
wrapClassName="doublepro"
width="624px"
height="476px"
>
<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"
>{{ projectInfo.projectId ? "编辑" : "创建" }}多层项目</span
>
</div>
<div style="cursor: pointer; margin-right: 32px" @click="closeModal2">
<img
style="width: 22px; height: 22px"
src="../../assets/images/basicinfo/close22.png"
/>
</div>
</div>
<div class="modalMain">
<div
style="margin-left: 40px; margin-top: 40px; width: 78%"
v-if="projectInfo.parentName"
>
<span style="color: #000000; font-size: 14px">项目归属</span>
<span style="color: #999999; font-size: 14px; margin-left: 10px">{{
projectInfo.parentName
}}</span>
</div>
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">项目名称:</div>
<div class="in pro">
<NameInput
placeholder="请输入项目名称"
v-model:value="projectInfo.name"
v-model:validate="projectInfo.validate"
:maxlength="30"
show-count
:id="projectInfo.projectId"
></NameInput>
</div>
</div>
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">培训分类:</div>
<div class="in select">
<TrainClass v-model:value="projectInfo.systemId"></TrainClass>
</div>
</div>
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">项目经理:</div>
<div class="in">
<ProjectManager
v-model:value="projectInfo.managerId"
v-model:name="projectInfo.manager"
@onChange="managerChange"
mode="multiple"
></ProjectManager>
</div>
</div>
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">资源归属:</div>
<div class="in select">
<OrgClass
v-model:value="projectInfo.sourceBelongId"
v-model:name="projectInfo.sourceBelongName"
></OrgClass>
</div>
</div>
<div class="pubtn">
<a-button class="pubtn1" @click="closeModal2">取消</a-button>
<a-button class="pubtn2" @click="createStoreyProject"
>确定
</a-button>
</div>
</div>
</a-modal>
</div>
<!-- 创建多层项目弹窗 -->
<div>
<a-modal
v-model:visible="sonproject"
:title="null"
@ok="closeModal"
:footer="null"
:closable="false"
wrapClassName="sonproject"
width="764px"
height="356px"
>
<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"
>请选择项目类别1</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">
<div
@click="createChildProject"
class="taskbox"
style="
margin-right: 24px;
background: linear-gradient(180deg, #ddeaff 0%, #f0f8fe 100%);
"
>
<div class="leftt">
<img src="../../assets/images/taskpage/left2.png" />
</div>
<div class="photo">
<img src="../../assets/images/taskpage/picture4.png" />
</div>
<div class="rightt">
<img src="../../assets/images/taskpage/right2.png" />
</div>
<div class="centerbox" style="color: rgba(78, 166, 255, 1)">
单层子项目
</div>
</div>
<div
class="taskbox"
@click="showModal3"
style="
background: linear-gradient(180deg, #fef3dd 0%, #fffaf0 100%);
"
>
<div class="leftt">
<img src="../../assets/images/taskpage/left1.png" />
</div>
<div class="photo">
<img src="../../assets/images/taskpage/picture5.png" />
</div>
<div class="rightt">
<img src="../../assets/images/taskpage/right1.png" />
</div>
<div class="centerbox" style="color: rgba(255, 182, 78, 1)">
多层子项目
</div>
</div>
</div>
</a-modal>
</div>
<!-- 创建子项目弹窗 -->
<!-- 创建项目弹窗 -->
<div>
<div>
<a-modal
v-model:visible="estabish"
:title="null"
@ok="closeModal1"
:footer="null"
:closable="false"
wrapClassName="estabish"
width="638px"
height="468px"
>
<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="closeModal1"
>
<img
style="width: 22px; height: 22px"
src="../../assets/images/basicinfo/close22.png"
/>
</div>
</div>
<div class="modalMain">
<router-link
:to="`/projectadd?parentId=${
projectInfo.parentId || ''
}&parentName=${projectInfo.parentName || ''}`"
>
<div
class="taskbox"
style="
background: linear-gradient(180deg, #ddeaff 0%, #f0f8fe 100%);
"
>
<div class="leftt">
<img src="../../assets/images/taskpage/left2.png" />
</div>
<div class="photo">
<img src="../../assets/images/taskpage/picture6.png" />
</div>
<div class="rightt">
<img src="../../assets/images/taskpage/right2.png" />
</div>
<div class="centerbox" style="color: rgba(78, 166, 255, 1)">
单层{{ projectInfo.parentId ? "子" : "" }}项目
</div>
<div class="centermain">
不包含子项目直接填写项目基础信息后创建任务
</div>
</div>
</router-link>
<div
class="taskbox"
@click="showModal2"
style="
margin-bottom: 40px;
background: linear-gradient(180deg, #e5f6ec 0%, #eef9f3 100%);
"
>
<div class="leftt">
<img src="../../assets/images/taskpage/left3.png" />
</div>
<div class="photo">
<img src="../../assets/images/taskpage/picture7.png" />
</div>
<div class="rightt">
<img src="../../assets/images/taskpage/right3.png" />
</div>
<div class="centerbox1" style="color: rgba(93, 201, 136, 1)">
多层{{ projectInfo.parentId ? "子" : "" }}项目
</div>
<div class="centermain1">
{{
projectInfo.parentId
? "可创建班级,通过班级填写基础信息并创建任务"
: "包含子项目,分为多层子项目和单层子项目,多层子项目可创建班级,通过班级填写基础信息并创建任务"
}}
</div>
</div>
</div>
</a-modal>
</div>
</div>
<!-- 创建项目弹窗 -->
<!-- 编辑多层项目弹窗 - end -->
<!-- 复制路径弹窗 -->
<a-modal
v-model:visible="copyModal"
:footer="null"
:closable="closeCopy"
wrapClassName="CopyModal"
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="closeCopyModal"></div>
</div>
<div class="body">
<span>您确定要复制此项目吗</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1" @click="closeCopyModal">
<div class="btnText">取消</div>
</div>
<div class="del_btn btn2" @click="copyProject">
<div class="btnText">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
<!-- 结束项目弹窗 -->
<a-modal
v-model:visible="stopModal"
:footer="null"
:closable="closeStop"
wrapClassName="CopyModal"
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="closeStopModal"></div>
</div>
<div class="body">
<span>是否结束项目</span>
<div class="back">
项目结束后学员将无法继续学习此操作不可逆
</div>
</div>
<div class="del_btnbox">
<div class="del_btn btn1" @click="closeStopModal">
<div class="btnText">取消</div>
</div>
<div class="del_btn btn2" @click="finishProject">
<div class="btnText">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
<!-- 删除项目弹窗 -->
<a-modal
v-model:visible="deleteModal"
:footer="null"
:closable="closeDelete"
wrapClassName="CopyModal"
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="closeDeleteModal"></div>
</div>
<div class="body">
<span>您确定要删除此项目吗</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1" @click="closeDeleteModal">
<div class="btnText">取消</div>
</div>
<div class="del_btn btn2" @click="deleteProject">
<div class="btnText">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
<!-- 存为模版弹窗 -->
<a-modal
v-model:visible="startModal"
:footer="null"
:closable="closeStart"
wrapClassName="CopyModal"
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="closeStartModal"></div>
</div>
<div class="body">
<span>您确定要存为模版吗</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1" @click="closeStartModal">
<div class="btnText">取消</div>
</div>
<div class="del_btn btn2" @click="templateProject">
<div class="btnText">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
<!-- 发布弹窗 -->
<a-modal
v-model:visible="projectPub"
:title="null"
:footer="null"
:closable="false"
wrapClassName="projectPub"
width="679px"
height="437px"
>
<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 style="width: 15px; height: 15px"
><img src="../../assets/images/taskpage/pub.png"
/></span>
<span
class="headerLeftText"
style="font-size: 16px; margin-left: 10px"
>项目发布</span
>
</div>
<div
style="cursor: pointer; margin-right: 32px"
@click="closeProjectPub"
>
<img
style="width: 22px; height: 22px"
src="../../assets/images/basicinfo/close22.png"
/>
</div>
</div>
<div class="modalMain">
<div class="projectname">{{ releaseProjectName }}</div>
<div class="projecttime" v-if="releaseProjectTime">
<span class="timeti">项目时间</span
><span class="timeme">{{ releaseProjectTime }}</span>
</div>
<div class="projectbox">
<div class="promessage">
<div class="messageme">项目信息</div>
<div class="messagege">
当前项目共{{ projectStages }}个阶段{{ projectTasks }}个任务
</div>
</div>
<div class="stumessage">
<div class="messageme1">学员信息</div>
<div class="messagege1">项目共{{ projectStudentsNum }}名学员</div>
</div>
</div>
<!-- <div class="send">
<a-switch v-model:checked="checked" size="small" />
<span class="sendtext">发送路径通知</span>
</div>
<div class="ckb">
<a-checkbox v-model:checked="checkedTeacher"
><span class="sendpeo">发给老师</span></a-checkbox
>
<a-checkbox v-model:checked="checkStu"
><span class="sendpeo">发给学员</span></a-checkbox
>
</div> -->
<div class="pubtn">
<a-button class="pubtn1" @click="closeProjectPub">取消</a-button>
<a-button class="pubtn2" @click="releaseProject">发布</a-button>
</div>
</div>
<!-- 加载动画 -->
<div
class="aeLoading"
:style="{ display: projectPubLoading ? 'flex' : 'none' }"
>
<a-spin :spinning="projectPubLoading" />
</div>
</a-modal>
<!-- 撤回路径弹窗 -->
<a-modal
v-model:visible="backModal"
:footer="null"
:closable="closeBack"
wrapClassName="CopyModal"
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="closeBackModal"></div>
</div>
<div class="body">
<span>是否撤回项目</span>
<div class="back">项目撤回后学员进度保留发布后可继续学习</div>
</div>
<div class="del_btnbox">
<div class="del_btn btn1" @click="closeBackModal">
<div class="btnText">取消</div>
</div>
<div class="del_btn btn2" @click="recallProject">
<div class="btnText">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
<!-- 撤回结束弹窗-->
<a-modal
v-model:visible="backFinashModal"
:footer="null"
:closable="closeBack"
wrapClassName="CopyModal"
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="closeBackFinashModal"></div>
</div>
<div class="body">
<span>是否撤回结束</span>
<div class="back">项目撤回结束后学员可继续学习</div>
</div>
<div class="del_btnbox">
<div class="del_btn btn1" @click="closeBackFinashModal">
<div class="btnText">取消</div>
</div>
<div class="del_btn btn2" @click="reFinashedProject">
<div class="btnText">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
<!-- 创建项目提示框 -->
<!-- <a-modal-->
<!-- v-model:visible="reminderModal"-->
<!-- :footer="null"-->
<!-- :closable="closeBack"-->
<!-- wrapClassName="CopyModal"-->
<!-- 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="closeReminderModal"></div>-->
<!-- </div>-->
<!-- <div class="body">-->
<!-- <div style="margin-left: 60px; margin-right: 60px">-->
<!-- 请您根据自身需求选择对应项目类别多层项目与单层项目操作不同层级不同-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="del_btnbox">-->
<!-- <div class="del_btn btn2" @click="okReminderModal">-->
<!-- <div class="btnText">好的</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </a-modal>-->
<!-- 项目提交审核弹窗 -->
<a-modal
v-model:visible="reviewModal"
:footer="null"
:closable="false"
wrapClassName="CopyModal"
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="closeReviewModal"></div>
</div>
<div class="body">
<span>您确定要提交审核吗</span>
<div class="back"></div>
</div>
<div class="del_btnbox">
<div class="del_btn btn1" @click="closeReviewModal">
<div class="btnText">取消</div>
</div>
<div class="del_btn btn2" @click="reviewProject">
<div class="btnText">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
<!-- 项目撤回审核弹窗 -->
<a-modal
v-model:visible="recallReviewModal"
:footer="null"
:closable="false"
wrapClassName="CopyModal"
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="closeRecallReviewModal"></div>
</div>
<div class="body">
<span>您确定要撤回审核吗</span>
<div class="back"></div>
</div>
<div class="del_btnbox">
<div class="del_btn btn1" @click="closeRecallReviewModal">
<div class="btnText">取消</div>
</div>
<div class="del_btn btn2" @click="recallReviewProject">
<div class="btnText">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
<!-- 授权名单抽屉 -->
<proj-power-list
v-model:ProjPvisible="ProjPvisible"
:selectProjectId="selectProjectId"
classify="project"
/>
<!-- 归属权抽屉 -->
<proj-owner-ship
v-model:ProjOwnervisible="ProjOwnervisible"
:selectProjectId="selectProjectId"
classify="project"
/>
<!-- 查看权抽屉 -->
<proj-check-ship
v-model:ProjCheckvisible="ProjCheckvisible"
:selectProjectId="selectProjectId"
v-model:addAuthList="addAuthList"
:authClassify="authClassify"
classify="project"
/>
<!-- 管理权抽屉 -->
<proj-check-ship
v-model:ProjCheckvisible="ProjCheckvisible"
:selectProjectId="selectProjectId"
v-model:addAuthList="addAuthList"
:authClassify="authClassify"
classify="project"
/>
</div>
</template>
<script>
import { reactive, toRefs, ref, watch } from "vue";
import { message, Modal } from "ant-design-vue";
import { useRouter } from "vue-router";
import ProjOwnerShip from "../../components/drawers/ProjectOwn";
import ProjPowerList from "../../components/drawers/ProjPowerList";
import ProjCheckShip from "../../components/drawers/ProjCheckPower";
import * as api from "../../api/index";
import * as api1 from "../../api/index1";
import { storage } from "../../api/storage";
import ProjectManager from "@/components/project/ProjectManagerNew";
// import ProjectClass from "@/components/project/ProjectClass";
import TrainClass from "@/components/project/TrainClass";
import OrgClass from "@/components/project/OrgClass";
import dayjs from "dayjs";
import * as moment from "moment";
import { changeOwnership } from "@/api/method";
import NameInput from "@/components/project/NameInput";
import { validateName } from "@/api/index1";
//import { toDate } from "../../api/method";
export default {
name: "projectManage",
components: {
ProjOwnerShip,
ProjPowerList,
ProjCheckShip,
NameInput,
ProjectManager,
// ProjectClass,
OrgClass,
TrainClass,
// ProjManageShip
},
setup() {
const state = reactive({
projectName: null,
selectTime: null,
sonproject: false,
estabish: false,
doublepro: false,
eddoublepro: false,
eddoublesonpro: false,
doublesonpro: false,
copyModal: false, //复制弹窗
closeCopy: false, //复制弹窗关闭图标
stopModal: false, //停用弹窗
closeStop: false, //停用弹窗关闭图标
deleteModal: false, //删除弹窗
closeDelete: false, //删除弹窗关闭图标
startModal: false, //启用弹窗
closeStart: false, //启用弹窗关闭图标
projectPub: false, //发布弹窗
projectPubLoading: false, //发布loading
backModal: false, //撤回弹窗
closeBack: false, //撤回弹窗关闭图标
reminderModal: false, //温馨提示弹窗
reviewModal: false, //提交审核
recallReviewModal: false, //撤回审核
ProjOwnervisible: false,
ProjPvisible: false,
ProjCheckvisible: false,
ProjManagevisible: false,
currentProjectId: "",
currentProjectName: "",
currentEdProjectName: "",
currentEditChildrensProjectId: "",
dcProjectID: "",
currentPage: 1, //当前页
tableDataTotal: -1, //学习路径列表总数
pageSize: 10, //每页10条数据
projectStudentsNum: 0, //发布弹窗-学员人
projectStages: 0,
projectTasks: 0,
releaseProjectId: null, //发布的项目id
releaseProjectName: null, //发布的项目名称
releaseProjectTime: null, //发布的项目时间
recallProjectId: null, //撤回的项目id
finishProjectId: null, //结束的项目id
deleteProjectId: null, //删除的项目id
templateProjectId: null, //存为模版的项目id
copyProjectId: null, //复制项目id
reviewId: null, //提交审核id
recallReviewId: null, //撤回审核id
selectProjectId: null, //选择的授权id
addAuthList: null, //确定授权列表
authClassify: null, //显示的是管理权还是查看权
currentPage1: 1, //项目经理分页
pageSize1: 10,
projectInfo: {},
projectClass: [],
managerList: [],
managerLoading: false,
backFinashModal: false,
memberParam: {
pageNo: 1,
pageSize: 10,
keyWord: "",
},
searchParam: {
pageNo: 1,
pageSize: 10,
},
valueDate: [],
});
// 数据接入 - start -
const router = useRouter();
const sProjectStateList = ref([
{ value: 0, label: "草稿" },
{ value: 1, label: "审核中" },
{ value: 2, label: "审核通过" },
{ value: 3, label: "已发布" },
{ value: -5, label: "未通过" },
{ value: -1, label: "已结束" },
]);
const searchReset = () => {
state.searchParam = { pageNo: 1, pageSize: 10 };
getTableDate();
};
const searchSubmit = () => {
state.searchParam.pageNo = 1;
getTableDate();
};
function timeChange(e) {
console.log(e);
if (e && e.length === 2) {
state.searchParam.beginTime = e[0];
state.searchParam.endTime = e[1];
} else {
state.searchParam.beginTime = "";
state.searchParam.endTime = "";
}
}
function validate(obj, errorMsgs) {
for (let i in errorMsgs) {
if (!obj[i]) {
message.destroy();
message.warning(errorMsgs[i]);
return false;
}
}
return true;
}
// 创建多层项目
const createStoreyProject = async () => {
// 接口需要传递的参数信息
const errorMsgs = {
name: "请输入项目名称",
systemId: "请选择培训分类",
manager: "请选择项目经理",
sourceBelongId: "请选择资源归属",
};
if (!validate(state.projectInfo, errorMsgs)) {
return;
}
/**
if (!state.projectInfo.validate) {
message.destroy();
message.warning("项目名称重复,请修改名称!");
return;
} */
const offName = await validateName({
name: state.projectInfo.name,
type: 1,
id: state.projectInfo.projectId,
}).then((res) => {
return res.data.data == 1;
});
if (offName) {
message.destroy();
return message.warning("项目名称重复,请重新填写");
}
api.createProject(state.projectInfo).then((res) => {
state.doublepro = false;
message.destroy();
message.success("创建成功");
state.currentPage = 1;
state.projectInfo.projectId ||
changeOwnership("project", res.data.data.projectId, [
{ id: res.data.data.createId, name: res.data.data.createName },
]);
getTableDate();
});
};
// 取消按钮 清空输入的数据
const closeModal2 = () => {
state.projectInfo = {};
// value1.value = "";
// type = "";
// manager = "";
// managerId = "";
// sourceBelongId = "";
// value2.value = [];
// value3.value = [];
// value4.value = "";
// value5.value = "";
state.doublepro = false;
};
// 编辑多层项目
const closeeditModal2 = () => {
state.eddoublepro = false;
};
// 创建单层子项目 (需要传入多层项目的ProjectID)
const createChildProject = () => {
console.log(state.currentProjectId);
router.push({
path: "/sonproject",
query: {
projectId: state.currentProjectId,
name: state.currentProjectName,
},
});
};
// 取消按钮 清空数据
const closeModal3 = () => {
state.doublesonpro = false;
};
const closeeditModal3 = () => {
state.eddoublesonpro = false;
};
//打开发布弹窗
const showProjectPub = (object) => {
state.projectPub = true;
state.projectPubLoading = true;
state.releaseProjectId = object.projectId;
state.releaseProjectName = object.name;
state.releaseProjectTime = object.time;
console.log("object", object);
api.getProjectCount(object.projectId).then((res) => {
console.log("获取关卡、任务、学员统计数据", res.data);
// state.projectStudentsNum = res.data.students;
state.projectStages = res.data.data.stages;
state.projectTasks = res.data.data.tasks;
});
//获取学员总数
let obj = {
pageNo: 0,
pageSize: 0,
projectId: object.projectId,
};
api
.projectStudent(obj)
.then((res) => {
if (res.data.code === 200) {
// console.log("res", res.data);
state.projectStudentsNum = res.data.data.total
? res.data.data.total
: 0;
state.projectPubLoading = false;
}
})
.catch((err) => {
console.log("获取学员人数失败", err);
});
//获取阶段及任务总数
};
//确认发布项目
const releaseProject = () => {
console.log("点击发布");
let obj = {
projectId: state.releaseProjectId,
type: 4,
};
api.handleProject(obj).then((res) => {
console.log("发布成功", res);
message.destroy();
message.success("发布成功");
state.projectPub = false;
getTableDate();
});
};
//关闭发布弹窗
const closeProjectPub = () => {
state.projectPub = false;
state.projectStages = null;
state.projectTasks = null;
state.projectStudentsNum = null;
state.projectPubLoading = false;
state.releaseProjectId = null;
};
//打开撤回发布弹窗
const showBackModal = (projectId) => {
state.backModal = true;
state.recallProjectId = projectId;
};
//打开撤回结束弹窗
const showBackFinashModal = (projectId) => {
state.backFinashModal = true;
state.recallProjectId = projectId;
};
//确认撤回发布
const recallProject = () => {
let obj = {
projectId: state.recallProjectId,
type: -4,
};
api
.handleProject(obj)
.then((res) => {
console.log("撤回成功", res);
message.destroy();
message.success("撤回成功");
state.backModal = false;
getTableDate();
})
.catch((err) => {
console.log("撤回失败", err);
});
};
//确认撤回结束
const reFinashedProject = () => {
let obj = {
projectId: state.recallProjectId,
type: -6,
};
api
.handleProject(obj)
.then((res) => {
console.log("撤回成功", res);
message.destroy();
message.success("撤回成功");
state.backFinashModal = false;
getTableDate();
})
.catch((err) => {
console.log("撤回失败", err);
});
};
//关闭撤回弹窗
const closeBackModal = () => {
state.backModal = false;
};
const closeBackFinashModal = () => {
state.backFinashModal = false;
};
//打开结束弹窗
const showStopModal = (projectId) => {
state.stopModal = true;
state.finishProjectId = projectId;
};
//确认结束
const finishProject = () => {
let obj = {
projectId: state.finishProjectId,
type: -1,
};
api
.handleProject(obj)
.then((res) => {
console.log("结束成功", res);
message.destroy();
message.success("已结束");
state.stopModal = false;
getTableDate();
})
.catch((err) => {
console.log("结束失败", err);
});
};
//关闭结束弹窗
const closeStopModal = () => {
state.stopModal = false;
};
//打开删除弹窗
const showDeleteModal = (projectId) => {
state.deleteModal = true;
state.deleteProjectId = projectId;
};
//确认删除
const deleteProject = () => {
let obj = {
projectId: state.deleteProjectId,
type: -2,
};
api
.handleProject(obj)
.then((res) => {
console.log("删除成功", res);
message.destroy();
message.success("删除成功");
state.deleteModal = false;
getTableDate();
})
.catch((err) => {
console.log("删除失败", err);
});
};
//关闭删除弹窗
const closeDeleteModal = () => {
state.deleteModal = false;
};
//打开存为模版弹窗
const showStartModal = (projectId) => {
state.startModal = true;
state.templateProjectId = projectId;
};
//确认存为模版
const templateProject = () => {
let obj = {
projectId: state.templateProjectId,
type: 1,
};
api.handleProject(obj).then((res) => {
state.startModal = false;
if (res.data.code === 200) {
message.destroy();
message.success("模版保存成功");
return;
}
Modal.error({ title: res.data.msg });
});
};
//关闭存为模版弹窗
const closeStartModal = () => {
state.startModal = false;
};
//打开确认复制弹窗
const showCopyModal = (projectId) => {
state.copyModal = true;
state.copyProjectId = projectId;
};
//关闭确认复制弹窗
const closeCopyModal = () => {
state.copyModal = false;
};
//确认复制
const copyProject = () => {
let obj = {
projectId: state.copyProjectId,
type: 2,
};
api
.handleProject(obj)
.then((res) => {
console.log("复制成功", res);
message.destroy();
message.success("复制成功");
state.copyModal = false;
getTableDate();
})
.catch((err) => {
console.log("复制失败", err);
});
};
//打开提交审核弹窗
const showReviewModal = (projectId) => {
state.reviewModal = true;
state.reviewId = projectId;
};
//确认提交审核
const reviewProject = () => {
let obj = {
projectId: state.reviewId,
type: 3,
};
console.log("提交审核obj", obj);
api
.handleProject(obj)
.then((res) => {
console.log("提交成功", res);
message.destroy();
message.success("提交成功");
state.reviewModal = false;
getTableDate();
})
.catch((err) => {
console.log("提交失败", err);
});
};
//关闭提交审核弹窗
const closeReviewModal = () => {
state.reviewModal = false;
};
//打开撤回审核弹窗
const showRecallReviewModal = (projectId) => {
state.recallReviewModal = true;
state.recallReviewId = projectId;
};
//确认撤回审核
const recallReviewProject = () => {
let obj = {
projectId: state.recallReviewId,
type: -3,
};
console.log("撤回成功obj", obj);
api
.handleProject(obj)
.then((res) => {
console.log("撤回成功", res);
message.destroy();
message.success("撤回成功");
state.recallReviewModal = false;
getTableDate();
})
.catch((err) => {
console.log("撤回成功", err);
});
};
//关闭提交审核弹窗
const closeRecallReviewModal = () => {
state.recallReviewModal = false;
};
const expandTable = (e, a) => {
// console.log("惦记了");
console.log("e", e, a);
};
// 获取项目列表信息
let tableData = ref([]);
const columns = ref([
{
title: "项目名称",
dataIndex: "name",
key: "name",
width: 380,
// align: "center",
ellipsis: true,
// scopedSlots: { customRender: "action" }, //引入的插槽
// customRender: (text, record) => {
// console.log(text, record);
// return <span>{text.text}</span>;
// },
},
{
title: "项目经理",
dataIndex: "manager",
ellipsis: true,
key: "manager",
width: 300,
align: "center",
},
{
title: "状态",
dataIndex: "status",
// width: "30%",
key: "status",
width: 100,
align: "center",
customRender: (value) => {
return (
<div>
{value.record.type === 3
? {
0: () => "草稿",
1: () => "草稿",
2: () => "草稿",
3: () =>
dayjs().isBefore(value.record.beginTime)
? "未开始"
: "进行中",
4: () =>
dayjs().isBefore(value.record.end) ? "进行中" : "已结束",
"-1": () => "已结束",
"-5": () => "草稿",
}[value.record.status + ""]() || ""
: "-"}
</div>
);
},
},
{
title: "创建人",
dataIndex: "createName",
// width: "30%",
key: "createName",
width: 100,
align: "center",
},
{
title: "是否审核",
dataIndex: "status",
// width: "30%",
key: "status",
width: 100,
align: "center",
customRender: (value) => {
return (
<div>
{value.record.type === 3
? {
0: "未审核",
1: "审核中",
2: "已审核",
3: "已审核",
4: "已审核",
"-1": "已审核",
"-5": "拒绝",
}[value.record.status + ""] || ""
: "-"}
</div>
);
},
},
{
title: "创建时间",
dataIndex: "createTime",
key: "createTime",
width: 180,
align: "center",
},
{
title: "操作",
dataIndex: "operation",
key: "operation",
width: 300,
align: "center",
// fixed: "right",
customRender: (value) => {
// console.log("value", value.record.type, value.record.status);
return (
<div className="operation">
{value.record.status === 0 || value.record.status === -5 ? (
<span
onClick={() => {
if (value.record.type === 1 || value.record.type === 2) {
state.doublepro = true;
state.projectInfo = value.record;
} else {
console.log(value.record);
router.push({
path: "/projectadd",
query: {
projectId: value.record.projectId,
parentId: value.record.parentId,
parentName: value.record.parentName,
},
});
}
}}
style="cursor:pointer;"
className="operation1"
>
编辑
</span>
) : (
""
)}
{value.record.status === 0 && value.record.type === 3 ? (
<span
onClick={() => {
showReviewModal(value.record.projectId);
}}
style="cursor:pointer"
class="operation3"
>
提交审核
</span>
) : (
""
)}
{value.record.status === 1 && value.record.type === 3 ? (
<span
onClick={() => {
showRecallReviewModal(value.record.projectId);
}}
style="cursor:pointer"
class="operation3"
>
撤回审核
</span>
) : (
""
)}
{value.record.status === 2 && value.record.type === 3 ? (
<span
onClick={() => {
let time =
value.record.beginTime + "-" + value.record.endTime;
let obj = {
projectId: value.record.projectId,
name: value.record.name,
time: time,
};
showProjectPub(obj);
}}
style="cursor:pointer"
class="operation3"
>
发布
</span>
) : (
""
)}
{value.record.status === 3 && value.record.type === 3 ? (
<span
onClick={() => {
showBackModal(value.record.projectId);
}}
style="cursor:pointer"
class="operation3"
>
撤回发布
</span>
) : (
""
)}
{/**
//<!-- 2022-12-10注释 后面放开 -->
<div className="tableSelect">
<a-select
style="width: 50px"
value="授权"
// options={state.projectNameList}
dropdownClassName="tabledropdown"
>
<a-select-option value="权限名单" label="权限名单">
<div
onClick={() => {
showProjPrower(value.record.projectId);
}}
>
权限名单
</div>
</a-select-option>
<a-select-option value="归属权" label="归属权">
<div
onClick={() => {
console.log("点击了111");
showProjOwner(value.record.projectId);
}}
>
归属权
</div>
</a-select-option>
<a-select-option value="查看权" label="查看权">
<div
onClick={() => {
console.log("点击了111");
showProjCheck(value.record.projectId);
}}
>
查看权
</div>
</a-select-option>
<a-select-option value="管理权" label="管理权">
<div
onClick={() => {
showProjManage(value.record.projectId);
}}
>
管理权
</div>
</a-select-option>
</a-select>
</div>
*/}
{value.record.type === 1 ? (
<span
className="operation3"
style="cursor: pointer"
onClick={() => {
state.projectInfo = {
parentName: value.record.name,
parentId: value.record.projectId,
name: value.record.name,
sourceBelongId: value.record.sourceBelongId,
sourceBelongName: value.record.sourceBelongName,
manager: value.record.manager,
managerId: value.record.managerId,
systemId: value.record.systemId,
type: 2,
};
state.estabish = true;
}}
>
创建子项目
</span>
) : (
""
)}
{value.record.type === 2 ? (
<span
className="operation3"
style="cursor: pointer"
onClick={() => {
router.push({
path: "/projectadd",
query: {
parentId: value.record.projectId,
parentName:
value.record.parentName + "——" + value.record.name,
ptojectType: 3,
},
});
}}
>
创建班级
</span>
) : (
""
)}
<div className="tableSelect">
<a-select
style="width: 50px"
value="更多"
// options={state.projectNameList}
dropdownClassName="tabledropdown"
>
<a-select-option value="复制" label="复制">
<div
onClick={() => {
showCopyModal(value.record.projectId);
}}
>
复制
</div>
</a-select-option>
<a-select-option value="删除" label="删除">
<div
onClick={() => {
showDeleteModal(value.record.projectId);
}}
>
删除
</div>
</a-select-option>
{value.record.type === 3 ? (
<a-select-option value="存为模版" label="存为模版">
<div
onClick={() => {
showStartModal(value.record.projectId);
}}
>
存为模版
</div>
</a-select-option>
) : (
""
)}
{value.record.status === 3 && value.record.type === 3 ? (
<a-select-option value="结束" label="结束">
<div
onClick={() => {
showStopModal(value.record.projectId);
}}
>
结束
</div>
</a-select-option>
) : (
""
)}
{value.record.status === -1 && value.record.type === 3 ? (
<a-select-option value="撤回" label="撤回">
<div
onClick={() => {
showBackFinashModal(value.record.projectId);
}}
>
撤回
</div>
</a-select-option>
) : (
""
)}
{value.record.type === 3 ? (
<a-select-option value="基础信息" label="基础信息">
<div
onClick={() => {
router.push({
path: "/taskpage",
query: { projectId: value.record.projectId },
});
storage.set("projectId", value.record.projectId);
}}
>
基础信息
</div>
</a-select-option>
) : (
""
)}
</a-select>
</div>
</div>
);
},
},
]);
const getTableDate = () =>
api
.getProjectList({
...state.searchParam,
beginTime:
state.searchParam.valueDate &&
state.searchParam.valueDate.length === 2
? dayjs(state.searchParam.valueDate[0]).format("YYYY-MM-DD")
: "",
endTime:
state.searchParam.valueDate &&
state.searchParam.valueDate.length === 2
? dayjs(state.searchParam.valueDate[1]).format("YYYY-MM-DD")
: "",
})
.then((res) => {
// console.log("搜索", res, state.searchParam);
state.tableDataTotal = Number(res.data.data.total);
const data = res.data.data.rows;
initDataSublist("", data);
console.log(data);
tableData.value = data;
console.log("tableData", tableData);
});
function initDataSublist(parentName, data) {
if (data && data.length) {
data.forEach((e) => {
e.parentName = parentName;
e.key = e.projectId;
initDataSublist(
(parentName ? parentName + "——" : "") + e.name,
e.subList
);
e.subList && e.subList.length && (e.children = e.subList);
});
}
}
getTableDate();
// 翻页
const changePagination = (page) => {
state.searchParam.pageNo = page;
getTableDate();
};
const showModal = () => {
state.sonproject = true;
};
const closeModal = () => {
state.sonproject = false;
};
const showModal1 = () => {
state.projectInfo = {};
state.estabish = true;
};
const closeModal1 = () => {
state.estabish = false;
};
const showModal2 = () => {
state.doublepro = true;
state.estabish = false;
};
const showModal3 = () => {
state.doublesonpro = true;
state.sonproject = false;
};
const showProjOwner = (id) => {
state.ProjOwnervisible = true;
state.selectProjectId = id;
};
const showProjPrower = (id) => {
state.selectProjectId = id;
state.ProjPvisible = true;
};
const showProjCheck = (id) => {
state.authClassify = 1;
state.selectProjectId = id;
state.ProjCheckvisible = true;
};
const showProjManage = (id) => {
state.authClassify = 2;
state.selectProjectId = id;
// state.ProjManagevisible = true;
state.ProjCheckvisible = true;
};
const closeReminderModal = () => {
state.reminderModal = false;
};
const okReminderModal = () => {
state.reminderModal = false;
state.estabish = true;
};
//添加权限
watch(
() => state.addAuthList,
(res) => {
console.log("res", res, state.addAuthList);
let obj = {
type: 2,
tag:
state.authClassify === 1 ? 3 : state.authClassify === 2 ? 4 : null,
opt: 3,
deptList: res[1],
groupList: res[2],
refId: state.selectProjectId,
pageNo: 20,
pageSize: 1,
studentList: res[0],
keyWord: "",
};
console.log("obj", obj);
api1
.optionAuthPerm(obj)
.then((res) => {
console.log("添加授权成功", res);
message.success("添加授权成功");
})
.catch((err) => {
console.log("添加授权失败", err);
});
}
);
function managerChange(e, l, d, t) {
!state.projectInfo.sourceBelongId &&
(state.projectInfo.sourceBelongId = d);
!state.projectInfo.sourceBelongName &&
(state.projectInfo.sourceBelongName = t);
}
return {
...toRefs(state),
dayjs,
moment,
managerChange,
reFinashedProject,
showBackFinashModal,
timeChange,
expandTable,
showModal,
closeModal,
showModal1,
closeModal1,
showModal2,
closeModal2,
showModal3,
closeModal3,
showCopyModal,
closeCopyModal,
showStopModal,
closeStopModal,
showDeleteModal,
closeDeleteModal,
showStartModal,
closeStartModal,
showBackModal,
closeBackModal,
closeBackFinashModal,
getTableDate,
showProjOwner,
showProjPrower,
showProjCheck,
showProjManage,
closeProjectPub,
showReviewModal,
reviewProject,
closeReviewModal,
showRecallReviewModal,
recallReviewProject,
closeRecallReviewModal,
tableData,
columns,
createStoreyProject,
changePagination,
sProjectStateList,
searchReset,
searchSubmit,
createChildProject,
closeeditModal2,
closeeditModal3,
releaseProject,
showProjectPub,
recallProject,
finishProject,
deleteProject,
templateProject,
copyProject,
closeReminderModal,
okReminderModal,
};
},
};
</script>
<style lang="scss">
.projectManage {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.filter {
margin-left: 38px;
margin-right: 38px;
margin-top: 30px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.filterItems {
display: flex;
flex-wrap: wrap;
.select {
margin-right: 20px;
margin-bottom: 20px;
}
.addTimeBox {
position: relative;
display: flex;
align-items: center;
.addTime {
position: absolute;
z-index: 10;
margin-left: 10px;
color: rgba(0, 0, 0, 0.4);
}
.ant-picker {
padding-left: 85px;
}
.ant-picker-range .ant-picker-active-bar {
margin-left: 85px;
}
}
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
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: rgba(64, 158, 255, 1);
line-height: 36px;
margin-left: 5px;
}
}
.btnn {
padding: 0px 26px 0px 26px;
height: 38px;
background: #4ea6ff;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
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: #ffffff;
line-height: 36px;
margin-left: 5px;
}
}
.btn1 {
.search {
width: 15px;
height: 17px;
background-image: url("../../assets/images/courseManage/search0.png");
}
}
.btn2 {
.search {
width: 16px;
height: 18px;
background-image: url("../../assets/images/courseManage/reset1.png");
}
}
.btn1:hover {
background: rgba(64, 158, 255, 0.76);
.search {
background-image: url("../../assets/images/courseManage/search0.png");
}
.btnText {
color: #ffffff;
}
}
.btn1:active {
background: #0982ff;
}
.btn2:hover {
background: rgba(64, 158, 255, 0.1);
}
.btn2:active {
background: rgba(64, 158, 255, 0.2);
}
}
.btns {
display: flex;
// flex-wrap: wrap;
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
background: #4ea6ff;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
cursor: pointer;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 36px;
margin-left: 5px;
}
}
.btn3 {
margin-right: 0px;
.search {
width: 17px;
height: 18px;
background-image: url("../../assets/images/courseManage/add0.png");
}
}
.btn3:hover {
background: rgba(64, 158, 255, 0.76);
}
.btn3:active {
background: #0982ff;
}
}
}
.tableBox {
margin: 20px 38px 30px;
.ant-table-thead > tr > th {
background-color: #eff4fc;
}
}
.tableBox {
padding-bottom: 20px;
.pa {
// position: absolute;
// bottom: 20px;
// left: 0;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: center;
// margin-bottom: 10px;
// position: absolute;
// bottom: -40px;
}
}
.operation {
font-size: 14px;
font-weight: 400;
color: #4ea6ff;
margin-right: -45px;
display: flex;
justify-content: right;
margin-right: 18px;
// line-height: 36px;
.operation1 {
margin-left: 21px;
width: 28px;
display: inline-block;
}
.operation3 {
margin-left: 21px;
width: 70px;
display: inline-block;
text-align: center;
}
.more {
width: 50px;
display: inline-block;
margin-left: 21px;
position: relative;
text-align: left;
// z-index: 99999;
.moreArrow {
width: 13px;
height: 7px;
display: inline-block;
background-image: url("../../assets/images/navtop/down.png");
background-size: 100%;
margin: 2px;
margin-left: 7px;
}
.moreItems {
width: 80px;
padding: 5px;
display: none;
background: #ffffff;
box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
border-radius: 3px;
border: 0px solid #dcdcdc;
position: absolute;
left: 0px;
top: 28px;
z-index: 100;
text-align: center;
}
}
.more:hover .moreArrow {
background-image: url("../../assets/images/navtop/up.png");
}
.more:hover .moreItems {
display: block;
}
}
}
.doublesonpro {
.ant-modal {
.ant-modal-body {
.modalHeader {
background: linear-gradient(
0deg,
rgba(78, 166, 255, 0) 0%,
rgba(78, 166, 255, 0.2) 100%
);
}
padding: 0;
.modalMain {
display: flex;
flex-direction: column;
//align-items: center;
margin-left: 60px;
.name {
//width: 90%;
// background-color: lightcoral;
display: flex;
justify-content: right;
margin-top: 32px;
align-items: center;
height: 40px;
// border: 1px solid black;
.inname {
color: #000000;
font-size: 14px;
margin-left: 7px;
}
.in {
margin-left: 14px;
width: 80%;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 80%;
height: 30px;
}
.ant-select {
border-radius: 5px;
// height: 120%;
width: 80%;
height: 40px;
.ant-select-selector {
border-radius: 8px;
// height: 120%;
width: 100%;
height: 40px;
}
}
}
}
.pubtn {
display: flex;
justify-content: center;
margin-top: 25px;
//margin-bottom: 29px;
.pubtn1 {
width: 100px;
height: 40px;
margin-right: 16px;
margin-bottom: 29px;
border: 1px solid #4ea6ff;
border-radius: 4px;
color: rgba(78, 166, 255, 1);
font-size: 14px;
//line-height: 36px;
align-items: center;
background: rgba(255, 255, 255, 1);
}
.pubtn2 {
width: 100px;
height: 40px;
margin-bottom: 29px;
border: 1px solid #4ea6ff;
border-radius: 4px;
color: #ffffff;
font-size: 14px;
align-items: center;
//line-height: 36px;
background: #4ea6ff;
}
}
}
}
}
}
.doublepro {
.ant-modal {
.ant-modal-body {
.modalHeader {
background: linear-gradient(
0deg,
rgba(78, 166, 255, 0) 0%,
rgba(78, 166, 255, 0.2) 100%
);
}
padding: 0;
.modalMain {
display: flex;
flex-direction: column;
align-items: center;
.name {
width: 78%;
// background-color: lightcoral;
display: flex;
justify-content: right;
margin-top: 32px;
align-items: center;
height: 40px;
// border: 1px solid black;
.inname {
color: #000000;
font-size: 14px;
margin-left: 7px;
}
.in {
margin-left: 14px;
width: 81%;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 30px;
}
.ant-select {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
.ant-select-selector {
border-radius: 8px;
// height: 120%;
width: 100%;
height: 40px;
}
}
}
}
.pubtn {
display: flex;
justify-content: center;
margin-top: 25px;
//margin-bottom: 29px;
.pubtn1 {
width: 100px;
height: 40px;
margin-right: 16px;
margin-bottom: 29px;
border: 1px solid #4ea6ff;
border-radius: 4px;
color: rgba(78, 166, 255, 1);
font-size: 14px;
//line-height: 36px;
align-items: center;
background: rgba(255, 255, 255, 1);
}
.pubtn2 {
width: 100px;
height: 40px;
margin-bottom: 29px;
border: 1px solid #4ea6ff;
border-radius: 4px;
color: #ffffff;
font-size: 14px;
align-items: center;
//line-height: 36px;
background: #4ea6ff;
}
}
}
}
}
}
.sonproject {
.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 {
display: flex;
justify-content: center;
margin-top: 48px;
//margin-bottom: 40px;
.taskbox {
width: 310px;
height: 160px;
border-radius: 10px;
position: relative;
margin-bottom: 80px;
cursor: pointer;
.leftt {
position: absolute;
top: 18px;
left: 0;
}
.photo {
position: absolute;
top: 44px;
left: 40px;
}
.rightt {
position: absolute;
top: 69px;
right: 26px;
}
.centerbox {
position: absolute;
top: 66px;
left: 136px;
font-size: 20px;
font-weight: 700;
//line-height: 36px;
}
.centermain {
color: rgba(135, 139, 146, 1);
font-size: 14px;
position: absolute;
left: 144px;
bottom: 49px;
}
}
}
}
}
}
.estabish {
.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 {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 48px;
//margin-bottom: 40px;
.taskbox {
width: 438px;
height: 160px;
border-radius: 10px;
position: relative;
margin-bottom: 24px;
cursor: pointer;
.leftt {
position: absolute;
top: 18px;
left: 0;
}
.photo {
position: absolute;
top: 44px;
left: 40px;
}
.rightt {
position: absolute;
top: 69px;
right: 26px;
}
.centerbox {
position: absolute;
top: 42px;
left: 120px;
font-size: 20px;
font-weight: 500;
//line-height: 36px;
}
.centerbox1 {
position: absolute;
top: 32px;
left: 120px;
font-size: 20px;
font-weight: 500;
//line-height: 36px;
}
.centermain {
color: rgba(135, 139, 146, 1);
font-size: 14px;
line-height: 20px;
position: absolute;
width: 252px;
left: 120px;
top: 78px;
}
.centermain1 {
color: rgba(135, 139, 146, 1);
font-size: 14px;
line-height: 20px;
position: absolute;
width: 252px;
left: 120px;
top: 68px;
}
}
}
}
}
}
.CopyModal {
.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: 68px;
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;
}
}
}
}
}
}
}
}
.projectPub {
.ant-modal {
.ant-modal-body {
padding: 0;
.modalHeader {
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.modalMain {
.projectname {
color: rgba(79, 81, 86, 1);
font-size: 14px;
line-height: 36px;
// margin-left: 62px;
font-weight: 500;
text-align: center;
}
.projecttime {
margin-left: 221px;
.timeti {
color: rgba(153, 155, 163, 1);
font-size: 14px;
line-height: 36px;
}
.timeme {
color: rgba(79, 81, 86, 1);
font-size: 14px;
line-height: 36px;
}
}
.projectbox {
margin-top: 26px;
display: flex;
justify-content: center;
.promessage {
width: 280px;
height: 110px;
background: linear-gradient(
180deg,
rgba(254, 243, 221, 1),
rgba(255, 250, 240, 1)
);
border-radius: 10px;
margin-right: 7px;
.messageme {
color: rgba(255, 182, 78, 1);
font-size: 14px;
line-height: 36px;
margin-top: 17px;
margin-left: 30px;
}
.messagege {
color: rgba(153, 155, 163, 1);
font-size: 14px;
margin-left: 30px;
}
}
.stumessage {
width: 280px;
height: 110px;
background: linear-gradient(
180deg,
rgba(221, 234, 255, 1),
rgba(240, 248, 254, 1)
);
border-radius: 10px;
.messageme1 {
color: rgba(78, 166, 255, 1);
font-size: 14px;
line-height: 36px;
margin-top: 17px;
margin-left: 30px;
}
.messagege1 {
color: rgba(153, 155, 163, 1);
font-size: 14px;
margin-left: 30px;
}
}
}
.send {
margin-top: 30px;
margin-left: 61px;
.sendtext {
margin-left: 11px;
color: rgba(109, 117, 132, 1);
font-size: 14px;
}
}
.ckb {
margin-top: 20px;
margin-left: 62px;
.sendpeo {
color: rgba(109, 117, 132, 1);
font-size: 14px;
}
.ant-checkbox-inner {
border-radius: 4px;
}
}
.pubtn {
display: flex;
justify-content: center;
margin-top: 25px;
//margin-bottom: 29px;
.pubtn1 {
width: 100px;
height: 40px;
margin-right: 16px;
margin-bottom: 29px;
border: 1px solid #4ea6ff;
border-radius: 4px;
color: rgba(78, 166, 255, 1);
font-size: 14px;
//line-height: 36px;
align-items: center;
background: rgba(255, 255, 255, 1);
}
.pubtn2 {
width: 100px;
height: 40px;
margin-bottom: 29px;
border: 1px solid #4ea6ff;
border-radius: 4px;
color: #ffffff;
font-size: 14px;
align-items: center;
//line-height: 36px;
background: #4ea6ff;
}
}
}
}
}
}
</style>