mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-14 05:16:45 +08:00
模板库列表
This commit is contained in:
zhangyc
443
src/components/drawers/AddProject.vue
Normal file
443
src/components/drawers/AddProject.vue
Normal file
@@ -0,0 +1,443 @@
|
||||
<template>
|
||||
|
||||
<div class="draw" style="position: relative">
|
||||
<a-drawer
|
||||
v-model:visible="addprojvisible"
|
||||
class="drawerStyle ProjectDrawer"
|
||||
title="关联项目"
|
||||
placement="right"
|
||||
width="80%"
|
||||
@after-visible-change="afterProjVisibleChange"
|
||||
>
|
||||
<div class="drawerMain">
|
||||
<div class="header">
|
||||
<div class="headerTitle">关联项目</div>
|
||||
<img
|
||||
style="width: 29px; height: 29px; cursor: pointer"
|
||||
src="../../assets/images/basicinfo/close.png"
|
||||
@click="leaveProjDrawer"
|
||||
/>
|
||||
</div>
|
||||
<div class="drawerbox">
|
||||
<a-table
|
||||
:columns="drawertableColumns()"
|
||||
:data-source="drawertableData"
|
||||
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
|
||||
:loading="tableDataTotal === -1 ? true : false"
|
||||
:scroll="{ x: 700 }"
|
||||
@expand="expandTable"
|
||||
:pagination="false"
|
||||
>
|
||||
</a-table>
|
||||
</div>
|
||||
<div class="btnn">
|
||||
<button @click="leaveProjDrawer" class="btn1">取消</button>
|
||||
<button @click="updateTask" class="btn2">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
import * as api from "../../api/indexDiscuss";
|
||||
import * as apiTask from "../../api/indexTaskadd";
|
||||
import { RouterEditTask } from "@/api/indexTask";
|
||||
import { message } from "ant-design-vue";
|
||||
import * as apiProj from "../../api/index.js";
|
||||
import dayjs from "dayjs";
|
||||
export default {
|
||||
name: "AddProject",
|
||||
props: {
|
||||
adddiscussVisible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
EditProjectId: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
edit: {
|
||||
// 是否为编辑
|
||||
type: Boolean,
|
||||
default: null,
|
||||
},
|
||||
projectId: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
chooseStageId: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
routerTaskId: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
isLevel: {
|
||||
// 是否是关卡页面触发
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
|
||||
projectTaskId: {
|
||||
// 要编辑的projectId
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
routerId: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
isactive: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
setup(props, ctx) {
|
||||
const state = reactive({
|
||||
inputV1: "",
|
||||
inputV2: "",
|
||||
textV1: "",
|
||||
checkedC1: false,
|
||||
discussSettings: "",
|
||||
addLoading: false,
|
||||
drawertableData: [
|
||||
{
|
||||
key: 1,
|
||||
parentId:1,
|
||||
name: '123',
|
||||
manager:'afssfa',
|
||||
children:[
|
||||
{
|
||||
key: 5,
|
||||
parentId:1,
|
||||
name: '123',
|
||||
manager:'afssfa',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
parentId:2,
|
||||
name: '123',
|
||||
manager:'afssfa',
|
||||
children:[
|
||||
{
|
||||
key: 7,
|
||||
parentId:1,
|
||||
name: '123',
|
||||
manager:'afssfa',
|
||||
children:[
|
||||
{
|
||||
key: 9,
|
||||
parentId:1,
|
||||
name: '123',
|
||||
manager:'afssfa',
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
parentId:3,
|
||||
name: '123',
|
||||
manager:'afssfa',
|
||||
},
|
||||
],
|
||||
selectedRowKeys: [],
|
||||
currentPage: 1,
|
||||
tableDataTotal: 0,
|
||||
pageSize: 10,
|
||||
});
|
||||
|
||||
|
||||
const start = () => {
|
||||
state.loading = true;
|
||||
// ajax request after empty completing
|
||||
setTimeout(() => {
|
||||
state.loading = false;
|
||||
state.selectedRowKeys = [];
|
||||
}, 1000);
|
||||
};
|
||||
const onSelectChange = selectedRowKeys => {
|
||||
console.log('selectedRowKeys changed: ', selectedRowKeys);
|
||||
state.selectedRowKeys = selectedRowKeys;
|
||||
};
|
||||
const closeDrawer = () => {
|
||||
ctx.emit("update:adddiscussVisible", false);
|
||||
ctx.emit("update:edit", false);
|
||||
state.inputV1 = "";
|
||||
state.textV1 = "";
|
||||
message.success(`${props.edit ? "编辑" : "新增"}关卡任务成功`);
|
||||
localStorage.setItem("stageId", props.chooseStageId);
|
||||
localStorage.setItem("chapterId", props.isactive);
|
||||
};
|
||||
//获取全部项目信息接口
|
||||
const getAllProjText = () => {
|
||||
apiProj
|
||||
.getProjectList({
|
||||
"beginTime": 0,
|
||||
"createName": "",
|
||||
"endTime": "",
|
||||
"manager": "",
|
||||
"name": "",
|
||||
"pageNo": 1,
|
||||
"pageSize": 10,
|
||||
"status": 0
|
||||
})
|
||||
.then((res) => {
|
||||
let arr = res.data.data.rows;
|
||||
if (res.status === 200) {
|
||||
state.drawertableData = getTableDate(arr);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
message.destroy()
|
||||
message.error("获取全部项目信息接口失败")
|
||||
});
|
||||
};
|
||||
const afterVisibleChange = (bool) => {
|
||||
if (bool) {
|
||||
getAllProjText();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const getTableDate = (data) => {
|
||||
let array = []
|
||||
data.map((value)=>{
|
||||
if(value.type == 3){
|
||||
let obj = {
|
||||
key: value.projectId,
|
||||
parentId:value.parentId,
|
||||
projectId:value.projectId,
|
||||
name: value.name,
|
||||
manager:value.manager,
|
||||
time: dayjs(value.createTime).format("YYYY-MM-DD"),
|
||||
}
|
||||
array.push(obj)
|
||||
}
|
||||
else {
|
||||
let obj = {
|
||||
key: value.projectId,
|
||||
parentId:value.parentId,
|
||||
name: value.name,
|
||||
manager:value.manager,
|
||||
time: dayjs(value.createTime).format("YYYY-MM-DD"),
|
||||
children: value.subList ? getTableDate(value.subList) : [] ,
|
||||
}
|
||||
array.push(obj)
|
||||
}
|
||||
})
|
||||
return array
|
||||
};
|
||||
//项目抽屉用的
|
||||
|
||||
const updateTask = (res) => {
|
||||
if (props.isLevel == 1) {
|
||||
RouterEditTask({
|
||||
chapterId: props.isactive,
|
||||
courseId: res.data.data.discussId,
|
||||
name: res.data.data.discussName,
|
||||
routerId: props.routerId,
|
||||
routerTaskId: props.routerTaskId || 0,
|
||||
type: 8,
|
||||
})
|
||||
.then(() => {
|
||||
message.success(`${props.edit ? "编辑" : "新增"}关卡任务成功`);
|
||||
})
|
||||
.catch(() => {
|
||||
message.error(`${props.edit ? "编辑" : "新增"}关卡任务失败`);
|
||||
});
|
||||
} 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,
|
||||
});
|
||||
} else if (props.isLevel == 3) {
|
||||
console.log("");
|
||||
}
|
||||
};
|
||||
const updateDiscussInfo = () => {
|
||||
if (!state.inputV1) {
|
||||
message.destroy();
|
||||
return message.warning("请输入讨论名称");
|
||||
}
|
||||
let obj = {
|
||||
discussName: state.inputV1, //讨论名称
|
||||
discussExplain: state.textV1, //讨论说明
|
||||
discussSettings: state.discussSettings, //讨论设置
|
||||
discussId: props.edit ? props.EditDiscussId : 0, //讨论Id
|
||||
projectId: 0, //项目id,接口多余字段，
|
||||
};
|
||||
if (props.edit) {
|
||||
api
|
||||
.updateDiscuss(obj)
|
||||
.then((res) => {
|
||||
updateTask(res);
|
||||
closeDrawer();
|
||||
ctx.emit("changeData", false);
|
||||
})
|
||||
.catch(() => {
|
||||
});
|
||||
} else {
|
||||
api
|
||||
.createDiscuss(obj)
|
||||
.then((res) => {
|
||||
updateTask(res);
|
||||
closeDrawer();
|
||||
ctx.emit("changeData", false);
|
||||
})
|
||||
.catch(() => {
|
||||
});
|
||||
}
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
afterVisibleChange,
|
||||
closeDrawer,
|
||||
updateDiscussInfo,
|
||||
getTableDate,
|
||||
start,
|
||||
getAllProjText,
|
||||
onSelectChange,
|
||||
|
||||
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.ant-table-striped :deep(.table-striped) td {
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
.addrefDrawer {
|
||||
.drawerMain {
|
||||
.header {
|
||||
height: 73px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
.headerTitle {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
line-height: 25px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
.contentMain {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.main_left {
|
||||
margin-top: 32px;
|
||||
padding-right: 30px;
|
||||
flex: 1;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
.main_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 32px;
|
||||
.signbox {
|
||||
width: 120px;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
.sign {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.btnbox {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
.ant-input {
|
||||
height: 100%;
|
||||
}
|
||||
.xkbtn {
|
||||
cursor: pointer;
|
||||
width: 130px;
|
||||
height: 40px;
|
||||
background: #388be1;
|
||||
border-radius: 8px;
|
||||
border: 0;
|
||||
margin-right: 8px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main_item2 {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 32px;
|
||||
.signbox {
|
||||
width: 120px;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
.sign {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.textarea {
|
||||
width: 423px;
|
||||
.ant-input {
|
||||
width: 100%;
|
||||
}
|
||||
.ant-input-textarea-show-count {
|
||||
position: relative;
|
||||
}
|
||||
.ant-input-textarea-show-count::after {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 0px;
|
||||
}
|
||||
.ant-input {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.main_btns {
|
||||
height: 72px;
|
||||
width: 100%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user