hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-13 04:46:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

添加项目 路径图上传样式

Browse Source
This commit is contained in:
宋文超
2022-11-24 18:15:35 +08:00
parent df731a58f0
commit 62c3b2dfa3
6 changed files with 621 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

610
src/components/drawers/AddProject.vue
View File

@@ -1,15 +1,14 @@
<template>
<a-drawer
<a-drawer
:visible="addprojvisible"
class="drawerStyle addonlineDrawer"
width="80%"
title="添加在线"
placement="right"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
<div class="header">
>
<div class="drawerMain">
<div class="header">
<div v-if="edit" class="headerTitle">编辑项目</div>
<div v-else class="headerTitle">添加项目</div>
<img
@@ -51,7 +50,6 @@
/>
</div>
</div>
</div>
<div class="mi_btns">
<div class="btn btn1">
@@ -64,33 +62,157 @@
</div>
</div>
</div>
<div class="">
<div class="drawerbox">
<a-table
:columns="tableDataFunc()"
:data-source="drawertableData"
:row-selection="rowSelection"
:loading="tableDataTotal === -1 ? true : false"
:scroll="{ x: 700 }"
@expand="expandTable"
:pagination="false"
>
</a-table>
<div class="main_notice" v-if="edit">
<div class="mntc_left">
<div class="notice_icon"></div>
<div v-if="selectedRows.length == 0">
<span class="title"
>已选择
<span class="data" style="color: #4ea6ff">{{ 0 }}</span>
条</span
>
</div>
<div v-else>
<div>
<span class="title"
>已选择
<span class="data" style="color: #4ea6ff">{{
selectedRows.length
}}</span>
条&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
>
<span class="title"
>名称：
<span
class="data"
style="color: #4ea6ff; margin-right: 15px"
>{{ selectedRows[0].name }}</span
>
</span>
<span class="title"
>项目经理：
<span
class="data"
style="color: #4ea6ff; margin-right: 15px"
>{{ selectedRows[0].manager }}</span
>
</span>
<span class="title"
>创建人：
<span
class="data"
style="color: #4ea6ff; margin-right: 15px"
>{{ selectedRows[0].creater }}</span
>
</span>
<span class="title"
>创建时间：
<span class="data" style="color: #4ea6ff">{{
selectedRows[0].time
}}</span>
</span>
</div>
<!-- <div v-else>
<span class="title"
>已选择 <span class="data">1</span> 条;</span
>
<span class="title"
>名称：
<span class="data">{{ assessment1.createName }}</span>
</span>
<span class="title"
>题数：
<span class="data">{{
assessment1.essayQuestionVoList.length
}}</span>
</span>
<span class="title"
>创建人：
<span class="data">{{ assessment1.createUser }}</span>
</span>
<span class="title"
>创建时间：
<span class="data">{{ assessment1.createTime }}</span>
</span>
</div> -->
</div>
</div>
</div>
<div class="">
<div class="drawerbox">
<!-- 添加的时候显示多选的表 -->
<a-table
v-if="!edit"
:columns="tableDataFunc()"
:data-source="drawertableData"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
:loading="tableDataTotal === -1 ? true : false"
:scroll="{ x: 700 }"
@expand="expandTable"
:pagination="false"
>
</a-table>
<!-- 编辑的时候显示单选的表 -->
<a-table
v-else
:columns="tableDataFunc()"
:data-source="drawertableData"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
type: 'radio',
}"
:loading="tableDataTotal === -1 ? true : false"
:scroll="{ x: 700 }"
@expand="expandTable"
:pagination="false"
>
</a-table>
</div>
</div>
</div>
<div class="main_btns">
<button @click="closeDrawer" class="btn1">取消</button>
<button @click="updateTaskList" class="btn2">确定</button>
<div class="main_btns">
<button @click="closeDrawer" class="btn1">取消</button>
<button @click="updateTaskList" class="btn2">确定</button>
</div>
</div>
</div>
</a-drawer>
<!-- 有重复添加的项目时的弹窗 -->
<a-modal
v-model:visible="sameModal"
:footer="null"
:closable="sameCopy"
wrapClassName="sameModal"
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="closeSameModal"></div>
</div>
<div class="body">
<span>项目已存在，是否重复添加？</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1" @click="closeSameModal">
<div class="btnText">取消</div>
</div>
<div class="del_btn btn2" @click="sureSameModal">
<div class="btnText">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
</a-drawer>
</template>
<script>
import { reactive, toRefs,ref } from "vue";
import { reactive, toRefs } from "vue";
import * as apiTask from "../../api/indexTaskadd";
import { RouterEditTask } from "@/api/indexTask";
@@ -130,7 +252,7 @@ export default {
type: Number,
default: null,
},
projectTaskId: {
// 要编辑的projectId
type: Number,
@@ -144,6 +266,11 @@ export default {
type: Number,
default: null,
},
// 路径图里选择的阶段下的任务列表
chooseProjectList: {
type: String,
default: null,
},
},
setup(props, ctx) {
const state = reactive({
@@ -151,56 +278,59 @@ export default {
inputV2: "",
inputV3: "",
textV1: "",
statu:0,
statu: 0,
checkedC1: false,
discussSettings: "",
addLoading: false,
sameModal: false,
sameCopy: false,
sameProj: null,
tableData: [
{
key: 1,
parentId:1,
name: '123',
manager:'afssfa',
children:[
parentId: 1,
name: "123",
manager: "afssfa",
children: [
{
key: 5,
parentId:1,
name: '123',
manager:'afssfa',
parentId: 1,
name: "123",
manager: "afssfa",
},
]
],
},
{
key: 2,
parentId:2,
name: '123',
manager:'afssfa',
children:[
parentId: 2,
name: "123",
manager: "afssfa",
children: [
{
key: 7,
parentId:1,
name: '123',
manager:'afssfa',
children:[
parentId: 1,
name: "123",
manager: "afssfa",
children: [
{
key: 9,
parentId:1,
name: '123',
manager:'afssfa',
parentId: 1,
name: "123",
manager: "afssfa",
},
]
],
},
]
],
},
{
key: 3,
parentId:3,
name: '123',
manager:'afssfa',
parentId: 3,
name: "123",
manager: "afssfa",
},
],
selectedRowKeys: [],
selectedRows:[],
selectedRows: [],
currentPage: 1,
tableDataTotal: 0,
pageSize: 10,
@@ -208,50 +338,49 @@ export default {
drawertableData: [
{
key: 1,
parentId:1,
name: '123',
manager:'afssfa',
children:[
parentId: 1,
name: "123",
manager: "afssfa",
children: [
{
key: 5,
parentId:1,
name: '123',
manager:'afssfa',
parentId: 1,
name: "123",
manager: "afssfa",
},
]
],
},
{
key: 2,
parentId:2,
name: '123',
manager:'afssfa',
children:[
parentId: 2,
name: "123",
manager: "afssfa",
children: [
{
key: 7,
parentId:1,
name: '123',
manager:'afssfa',
children:[
parentId: 1,
name: "123",
manager: "afssfa",
children: [
{
key: 9,
parentId:1,
name: '123',
manager:'afssfa',
parentId: 1,
name: "123",
manager: "afssfa",
},
]
],
},
]
],
},
{
key: 3,
parentId:3,
name: '123',
manager:'afssfa',
parentId: 3,
name: "123",
manager: "afssfa",
},
],
});
const tableDataFunc = () => {
const drawercolumns = [
{
@@ -270,7 +399,7 @@ export default {
},
{
title: "创建人",
dataIndex: "creator",
dataIndex: "creater",
key: "creater",
width: 100,
align: "center",
@@ -288,21 +417,22 @@ export default {
const closeDrawer = () => {
ctx.emit("update:addprojvisible", false);
ctx.emit("update:edit", false);
ctx.emit("changeData", false);
state.selectedRows = [];
state.selectedRowKeys = [];
};
const rowSelection =()=> ref({
checkStrictly: false,
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows);
},
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(selected, selectedRows, changeRows);
},
});
// const rowSelection =()=> ref({
// checkStrictly: false,
// onChange: (selectedRowKeys, selectedRows) => {
// console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
// },
// onSelect: (record, selected, selectedRows) => {
// console.log(record, selected, selectedRows);
// },
// onSelectAll: (selected, selectedRows, changeRows) => {
// console.log(selected, selectedRows, changeRows);
// },
// });
const start = () => {
state.loading = true;
// ajax request after empty completing
@@ -311,31 +441,31 @@ export default {
state.selectedRowKeys = [];
}, 1000);
};
const onSelectChange =(selectedRowKeys,selectedRows) => {
console.log('selectedRowKeys changed: ', selectedRowKeys);
state.selectedRowKeys = selectedRowKeys;
this.selectedRows=selectedRows;
// const onSelectChange = (selectedRowKeys, selectedRows) => {
// console.log("selectedRowKeys changed: ", selectedRowKeys);
// state.selectedRowKeys = selectedRowKeys;
// this.selectedRows = selectedRows;
// };
const searchProjectList = () => {
getAllProjText();
};
const searchProjectList=()=>{
const resetProjectList = () => {
state.inputV1 = "";
state.inputV2 = "";
state.inputV1 = "";
getAllProjText();
}
const resetProjectList=()=>{
state.inputV1="";
state.inputV2="";
state.inputV1="";
getAllProjText();
}
};
//获取全部项目信息接口
const getAllProjText = () => {
apiProj
.getProjectList({
"createName": state.inputV1,
"manager": state.inputV2,
"name":state.inputV3,
createName: state.inputV1,
manager: state.inputV2,
name: state.inputV3,
pageNo: state.currentPage,
pageSize: state.pageSize,
"status": state.status
status: state.status,
})
.then((res) => {
let arr = res.data.data.rows;
@@ -344,12 +474,12 @@ export default {
}
})
.catch(() => {
message.destroy()
message.error("获取全部项目信息接口失败")
message.destroy();
message.error("获取全部项目信息接口失败");
});
};
const afterVisibleChange = (bool) => {
console.log("哈哈，我进来了")
console.log("哈哈，我进来了");
if (bool) {
getAllProjText();
}
@@ -361,49 +491,70 @@ export default {
getAllProjText();
};
const getTableDate = (data) => {
let array = []
data.map((value)=>{
if(value.type == 3){
let array = [];
data.map((value) => {
if (value.type == 3) {
let obj = {
key: value.projectId,
parentId:value.parentId,
projectId:value.projectId,
parentId: value.parentId,
projectId: value.projectId,
name: value.name,
manager:value.manager,
manager: value.manager,
time: dayjs(value.createTime).format("YYYY-MM-DD"),
}
array.push(obj)
}
else {
creater: value.createName,
};
array.push(obj);
} else {
let obj = {
key: value.projectId,
parentId:value.parentId,
parentId: value.parentId,
name: value.name,
manager:value.manager,
manager: value.manager,
time: dayjs(value.createTime).format("YYYY-MM-DD"),
children: value.subList ? getTableDate(value.subList) : [] ,
}
array.push(obj)
children: value.subList ? getTableDate(value.subList) : [],
};
array.push(obj);
}
})
return array
});
return array;
};
//项目抽屉用的
const updateTaskList =()=>{
//项目抽屉用的
const updateTaskList = () => {
//const resultArr = [];
state.selectedRows.forEach((item) => {
updateTask(item);
let origin = JSON.parse(props.chooseProjectList);
console.log("ccxx", origin);
if (origin.length == 0) {
//可以直接添加到任务列表里
updateTask(item);
closeDrawer();
} else {
//需要先判断是否含有之前的
//根据courseId判断
let re = origin.filter((it) => {
return it.courseId == item.key;
});
console.log("re", re);
if (re.length == 0) {
updateTask(item);
} else {
state.sameProj = item;
//询问是否重复添加
showSameModal();
}
}
});
}
};
const updateTask = (res) => {
if (props.isLevel == 1) {
RouterEditTask({
chapterId: props.isactive,
courseId: 0,
name: res.data.data.discussName,
courseId: res.key,
name: res.name,
routerId: props.routerId,
routerTaskId: props.routerTaskId || 0,
type: 8,
type: 13,
})
.then(() => {
message.success(`${props.edit ? "编辑" : "新增"}关卡任务成功`);
@@ -413,19 +564,41 @@ export default {
});
} else if (props.isLevel == 2) {
apiTask.addTask({
courseId: res.data.data.discussId,
duration: res.data.data.discussExplain,
name: res.data.data.discussName,
projectId: props.projectId,
projectTaskId: props.projectTaskId || 0,
stageId: props.chooseStageId,
type: 8,
courseId: res.data.data.discussId,
duration: res.data.data.discussExplain,
name: res.data.data.discussName,
projectId: props.projectId,
projectTaskId: props.projectTaskId || 0,
stageId: props.chooseStageId,
type: 13,
});
} else if (props.isLevel == 3) {
console.log("");
}
};
const onSelectChange = (selectedRowKeys, selectRow) => {
console.log("selectedRowKeys changed: ", selectedRowKeys, selectRow);
state.selectedRowKeys = selectedRowKeys;
state.selectedRows = selectRow;
};
const showSameModal = () => {
state.sameModal = true;
};
const closeSameModal = () => {
state.sameProj = null;
state.sameModal = false;
};
const sureSameModal = () => {
// updateTask(state.sameProj);
state.selectedRows.forEach((item) => {
updateTask(item);
});
state.sameProj = null;
state.sameModal = false;
closeDrawer();
ctx.emit("changeData", false);
};
return {
...toRefs(state),
afterVisibleChange,
@@ -439,8 +612,10 @@ export default {
searchProjectList,
resetProjectList,
handelChangePage,
rowSelection,
showSameModal,
closeSameModal,
sureSameModal,
// rowSelection,
};
},
};
@@ -449,8 +624,149 @@ export default {
.ant-table-striped :deep(.table-striped) td {
background-color: #fafafa !important;
}
.sameModal {
.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/taskpage/gan.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;
}
}
}
}
}
}
}
}
.addrefDrawer {
.drawerMain {
// .main_notice {
// display: flex;
// justify-content: space-between;
// align-items: center;
// margin-bottom: 32px;
// height: 40px;
// background-color: #e9f6fe;
// .mntc_left {
// display: flex;
// align-items: center;
// .title {
// color: rgba(0, 0, 0, 0.65);
// margin-right: 17px;
// }
// .data {
// color: #388be1;
// }
// .notice_icon {
// width: 14px;
// height: 14px;
// margin-right: 9px;
// margin-left: 9px;
// background-image: url(@/assets/images/coursewareManage/gan.png);
// background-size: 100% 100%;
// }
// }
// .mntc_right {
// cursor: pointer;
// }
// }
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;