feat: 模板列表获取,查看撤回操作,模板详情

This commit is contained in:
王熙东
2022-11-21 15:53:17 +08:00
parent 170c1a6d00
commit e60e62f1e1
4 changed files with 463 additions and 530 deletions

View File

@@ -5,11 +5,11 @@
<img class="img" src="../../assets/images/projectadd/picture.png" />
</div>
<div class="imgfor">
<div class="forz">管理者进阶-腾飞班1备份</div>
<div class="forz">{{projectInfo.name || '-'}}</div>
<div class="fort">
<div class="fort1">项目经理黄华刘俊备份</div>
<div class="fort1">项目经理{{projectInfo.manager || '-'}}</div>
<div class="fort2">
起止时间2022-09-21 00:00 2022-10-21 00:00
起止时间{{projectInfo.beginTime || '-'}} {{projectInfo.endTime || '-'}}
</div>
</div>
</div>
@@ -200,7 +200,7 @@
: 'none',
}"
>
<!-- 考勤 -->
<!-- 考勤 -->
</div>
<div
class="operation"
@@ -278,7 +278,7 @@
<hr color="#E8E8E8" />
<div class="ntc_body">
<div class="ntc_switch">
<a-switch v-model:checked="checked" @click="changeopclo" />
<a-switch v-model:checked="checked" @click="changeopclo" />
<div
class="opclo"
:style="{ display: hideshow ? 'block' : 'none' }"
@@ -385,217 +385,165 @@
<div class="split"></div>
<a-tabs>
<a-tab-pane key="1" tab="编辑">
<div class="setting">
<div class="set_tit">
<span>基本信息</span>
<span class="editBtn" @click="toEdit">编辑</span>
</div>
<hr color="#E8E8E8" />
<div class="set_body">
<div class="set_content">
<div class="setc_name"><span>模板名称</span></div>
<div class="setc_main">
<a-input
v-model:value="formData.name"
:bordered="isEdit"
:disabled="!isEdit"
style="width: 300px"
></a-input>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>封面图</span></div>
<div class="setc_main">
<a-upload
v-model:file-list="fileList"
name="file"
action="/api/file/upload"
@change="handleChange"
:disabled="!isEdit"
>
<img
src="@/assets/images/projectadd/picture.png"
alt=""
/>
</a-upload>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>模板时间</span></div>
<div class="setc_main">
<a-range-picker
v-model:value="formData.time"
:bordered="isEdit"
:disabled="!isEdit"
/>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>项目经理</span></div>
<div class="setc_main">
<a-select
v-model:value="formData.manager"
mode="multiple"
placeholder="请选择项目经理"
:size="large"
:bordered="isEdit"
:disabled="!isEdit"
style="width: 200px; color: #999999"
:options="managerOptions"
></a-select>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>资源归属</span></div>
<div class="setc_main">
<a-select
v-model:value="formData.sourceBelongId"
placeholder="请选择资源归属"
:size="large"
:bordered="isEdit"
:disabled="!isEdit"
style="width: 200px; color: #999999"
:options="sourceBelongOptions"
></a-select>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>模板说明</span></div>
<div class="setc_main">
<a-input
v-model:value="formData.remark"
style="width: 300px"
:bordered="isEdit"
:disabled="!isEdit"
></a-input>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>同步学习记录</span></div>
<div class="setc_main" @click="changecheck2">
<a-radio
v-model:checked="formData.courseSyncFlag"
:bordered="isEdit"
:disabled="!isEdit"
><span style="color: #333333"
>同步课程学习记录如学员在课程库中拥有课程的学习记录自动免修该课程</span
></a-radio
>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>项目级别</span></div>
<div class="setc_main">
<a-select
v-model:value="formData.level"
placeholder="请选择项目级别"
:size="large"
:bordered="isEdit"
:disabled="!isEdit"
style="width: 200px; color: #999999"
:options="levelOptions"
></a-select>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>培训分类</span></div>
<div class="setc_main">
<a-select
v-model:value="formData.systemId"
placeholder="请选择培训分类"
:size="large"
:bordered="isEdit"
:disabled="!isEdit"
style="width: 200px; color: #999999"
:options="systemOptions"
></a-select>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>是否BOEU实施</span></div>
<div class="setc_main" @click="changecheck3">
<a-radio
v-model:checked="formData.boeFlag"
:bordered="isEdit"
:disabled="!isEdit"
><span style="color: #333333">BOEU实施</span></a-radio
>
</div>
</div>
<div v-if="isEdit" style="transform: translateX(50%)">
<a-button
@click="cancelEdit"
style="background-color: #f9f9f9"
>取消</a-button
>
<a-button
@click="confirmEdit"
style="background-color: #f5faff"
>保存</a-button
>
</div>
<div class="setting">
<div class="set_tit">
<span>基本信息</span>
<span class="editBtn" @click="toEdit">编辑</span>
</div>
<hr color="#E8E8E8" />
<div class="set_body">
<div class="set_content">
<div class="setc_name"><span>模板名称</span></div>
<div class="setc_main">
<a-input v-model:value="formData.name"
:bordered="isEdit" :disabled="!isEdit"
style="width:300px;"
></a-input>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>封面图</span></div>
<div class="setc_main">
<a-upload
v-model:file-list="fileList"
name="file"
action="/api/file/upload"
@change="handleChange"
:disabled="!isEdit"
>
<img src="@/assets/images/projectadd/picture.png" alt="" />
</a-upload>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>模板时间</span></div>
<div class="setc_main">
<a-range-picker v-model:value="formData.time"
:bordered="isEdit" :disabled="!isEdit" />
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>项目经理</span></div>
<div class="setc_main">
<a-select
v-model:value="formData.manager" mode="multiple"
placeholder="请选择项目经理"
:size="large" :bordered="isEdit" :disabled="!isEdit"
style="width: 200px;color: #999999;" :options="managerOptions"
></a-select>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>资源归属</span></div>
<div class="setc_main">
<a-select
v-model:value="formData.sourceBelongId"
placeholder="请选择资源归属"
:size="large" :bordered="isEdit" :disabled="!isEdit"
style="width: 200px;color: #999999;" :options="sourceBelongOptions"
></a-select>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>模板说明</span></div>
<div class="setc_main">
<a-input v-model:value="formData.remark"
style="width:300px;"
:bordered="isEdit" :disabled="!isEdit"
></a-input>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>同步学习记录</span></div>
<div class="setc_main" @click="changecheck2">
<a-radio v-model:checked="formData.courseSyncFlag"
:bordered="isEdit" :disabled="!isEdit"
><span style="color: #333333"
>同步课程学习记录如学员在课程库中拥有课程的学习记录自动免修该课程</span
></a-radio
>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>项目级别</span></div>
<div class="setc_main">
<a-select
v-model:value="formData.level"
placeholder="请选择项目级别"
:size="large" :bordered="isEdit" :disabled="!isEdit"
style="width: 200px;color: #999999;" :options="levelOptions"
></a-select>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>培训分类</span></div>
<div class="setc_main">
<a-select
v-model:value="formData.systemId"
placeholder="请选择培训分类"
:size="large" :bordered="isEdit" :disabled="!isEdit"
style="width: 200px;color: #999999;" :options="systemOptions"
></a-select>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>是否BOEU实施</span></div>
<div class="setc_main" @click="changecheck3">
<a-radio v-model:checked="formData.boeFlag"
:bordered="isEdit" :disabled="!isEdit"
><span style="color: #333333">BOEU实施</span></a-radio
>
</div>
</div>
<div v-if="isEdit" style="transform: translateX(50%)">
<a-button @click="cancelEdit" style="background-color: #f9f9f9">取消</a-button>
<a-button @click="confirmEdit" style="background-color: #f5faff">保存</a-button>
</div>
</div>
</div>
</a-tab-pane>
<a-tab-pane key="2" tab="共享文档">
<div class="sametab">
<div class="Gcon">
<div class="pad"></div>
<div class="Gin">
<div class="headone" style="transform: translateX(30px)">
<div class="box"></div>
<div class="onetitle">上传共享文档</div>
<div class="oneedi">
<a-switch v-model:checked="docChecked"></a-switch>
</div>
</div>
<div class="btnbox" style="margin: 20px">
<a-upload
v-model:file-list="fileList"
name="file"
action="/api/file/upload"
@change="handleChange"
>
<span
class="xkbtn"
style="cursor: pointer; font-size: 17px"
>上传</span
>
<img
src="@/assets/images/basicinfo/cloud.png"
style="cursor: pointer; width: 34px; height: 34px"
alt=""
/>
</a-upload>
<div class="btnbox" style="margin: 20px">
<span style="color: #999999">
支持pdf.ppt.pptx.doc.docx.xls.xlsx.jpeg.png.gif.zip
</span>
</div>
<div
v-for="item in docList"
:key="item.src"
class="docListStyle"
>
<img
src="@/assets/images/basicinfo/download.png"
style="
cursor: pointer;
width: 40px;
height: 40px;
margin-right: 40px;
"
alt=""
/>
<span style="font: oblique 16px Sans-serif">{{
item.name
}}</span>
<span style="color: #4ea6ff; float: right">删除</span>
</div>
<div class="Gcon">
<div class="pad"></div>
<div class="Gin">
<div class="headone" style="transform: translateX(30px)">
<div class="box"></div>
<div class="onetitle">上传共享文档</div>
<div class="oneedi">
<a-switch v-model:checked="docChecked" ></a-switch>
</div>
</div>
<div class="btnbox" style="margin:20px;">
<a-upload
v-model:file-list="fileList"
name="file"
action="/api/file/upload"
@change="handleChange"
>
<span class="xkbtn" style="cursor: pointer; font-size: 17px" >上传</span>
<img src="@/assets/images/basicinfo/cloud.png" style="cursor: pointer;
width:34px;height:34px;
" alt="">
</a-upload>
<div class="btnbox" style="margin:20px;">
<span style="color: #999999">
支持pdf.ppt.pptx.doc.docx.xls.xlsx.jpeg.png.gif.zip
</span>
</div>
<div v-for="item in docList" :key="item.src" class="docListStyle">
<img src="@/assets/images/basicinfo/download.png" style="cursor: pointer;
width:40px;height:40px;margin-right:40px;
" alt="">
<span style="font: oblique 16px Sans-serif">{{item.name}}</span>
<span style="color: #4ea6ff;float:right;">删除</span>
</div>
</div>
</div>
</div>
</div>
</a-tab-pane>
</a-tabs>
</a-tab-pane>
@@ -642,9 +590,9 @@
</template>
<script>
import { ref, reactive, defineComponent, toRefs, onMounted } from "vue";
import { ref, reactive, defineComponent, toRefs, onMounted} from "vue";
import { message } from "ant-design-vue";
import * as api from "@/api/indexTemplate";
import * as api from "@/api/indexTemplate"
import { useRouter } from "vue-router";
export default defineComponent({
name: "LibraryAdd",
@@ -772,27 +720,27 @@ export default defineComponent({
},
],
// 模板编辑列表
managerOptions: [
{ value: "李俊国" },
{ value: "将小米" },
{ value: "刘孟君" },
managerOptions:[
{ value: "李俊国"},
{ value: "将小米"},
{ value: "刘孟君"},
],
sourceBelongOptions: [
{ value: "项目一" },
{ value: "项目二" },
{ value: "项目三" },
sourceBelongOptions:[
{ value: "项目一"},
{ value: "项目二"},
{ value: "项目三"},
],
levelOptions: [
{ value: "集团级" },
{ value: "组织级" },
{ value: "现地级" },
{ value: "部门级" },
levelOptions:[
{ value: "集团级"},
{ value: "组织级"},
{ value: "现地级"},
{ value: "部门级"},
],
systemOptions: [
{ value: "集团级" },
{ value: "组织级" },
{ value: "现地级" },
{ value: "部门级" },
systemOptions:[
{ value: "集团级"},
{ value: "组织级"},
{ value: "现地级"},
{ value: "部门级"},
],
taskSyllabusActive: 0,
//在线管理等页面传递参数
@@ -804,7 +752,7 @@ export default defineComponent({
checked: true,
checked2: false,
checked3: false,
docChecked: true,
docChecked:true,
value3: false,
value4: false,
hideshow: true,
@@ -812,22 +760,22 @@ export default defineComponent({
score2: 5,
edit: true,
// 共享文档列表
docList: [
docList:[
{
name: "测试文档1.doc",
src: "",
name:'测试文档1.doc',
src:"",
},
{
name: "测试文档2.doc",
src: "",
name:'测试文档2.doc',
src:"",
},
{
name: "测试文档3.doc",
src: "",
},
name:'测试文档3.doc',
src:"",
}
],
// 基本信息
formData: {
formData:{
name: "123",
time: "",
manager: "建国",
@@ -838,7 +786,13 @@ export default defineComponent({
systemId: null,
boeFlag: false,
},
isEdit: false, // 是否处于编辑状态
isEdit:false, // 是否处于编辑状态
projectInfo:{
beginTime:null,
endTime:null,
name: null,
manager: null,
}
});
const value = ref("");
const value2 = ref("");
@@ -859,182 +813,153 @@ export default defineComponent({
};
const confirmEdit = () => {
state.isEdit = false;
editTemplate();
editTemplate()
getDetail();
};
onMounted(() => {
getDetail();
});
onMounted(() => {getDetail()});
// 获取详情
const getDetail = () => {
api
.templateDetail(0)
.then((res) => {
console.log(res);
state.formData.name = res.data.data.projectInfo.name;
state.formData.time =
res.data.data.projectInfo.startTime +
res.data.data.projectInfo.endTime;
state.formData.manager = res.data.data.projectInfo.manager;
state.formData.sourceBelongId =
res.data.data.projectInfo.sourceBelongId;
state.formData.remark = res.data.data.stageList.remark;
state.formData.courseSyncFlag =
res.data.data.projectInfo.courseSyncFlag;
state.formData.level = res.data.data.projectInfo.level;
state.formData.systemId = res.data.data.projectInfo.systemId;
state.formData.boeFlag = res.data.data.projectInfo.boeFlag;
state.value2 = res.data.data.projectInfo.notice;
})
.catch((err) => {
message.error("操作失败" + err);
console.log(err);
});
};
api.templateDetail(1).then(res => {
console.log(res)
state.formData.name = res.data.data.projectInfo.name
state.formData.time = res.data.data.projectInfo.startTime+res.data.data.projectInfo.endTime;
state.formData.manager = res.data.data.projectInfo.manager
state.formData.sourceBelongId = res.data.data.projectInfo.sourceBelongId
state.formData.remark = res.data.data.stageList.remark
state.formData.courseSyncFlag = res.data.data.projectInfo.courseSyncFlag
state.formData.level = res.data.data.projectInfo.level
state.formData.systemId = res.data.data.projectInfo.systemId
state.formData.boeFlag = res.data.data.projectInfo.boeFlag
state.value2 = res.data.data.projectInfo.notice
}).catch(err => {
message.error("操作失败"+err)
console.log(err)
})
}
// 编辑项目模板
const editTemplate = () => {
let obj = {
beginTime: state.formData.time,
boeFlag: state.formData.boeFlag,
category: 0,
courseSyncFlag: state.formData.courseSyncFlag,
endTime: state.formData.time,
level: state.formData.level,
manager: state.formData.manager,
managerId: "",
name: state.formData.name,
notice: "",
noticeFlag: 0,
picUrl: "",
projectTemplateId: 0,
remark: state.formData.remark,
sourceBelongId: state.formData.sourceBelongId,
status: 0,
systemId: state.formData.systemId,
"beginTime": state.formData.time,
"boeFlag": state.formData.boeFlag,
"category": 0,
"courseSyncFlag": state.formData.courseSyncFlag,
"endTime": state.formData.time,
"level": state.formData.level,
"manager": state.formData.manager,
"managerId": "",
"name": state.formData.name,
"notice": "",
"noticeFlag": 0,
"picUrl": "",
"projectTemplateId": 0,
"remark": state.formData.remark,
"sourceBelongId": state.formData.sourceBelongId,
"status": 0,
"systemId": state.formData.systemId
};
api
.templateEdit(obj)
.methods(obj)
.then((res) => {
message.success("编辑成功");
console.log(res);
})
.catch((err) => {
message.error("编辑失败" + err);
console.log(err);
});
};
api.templateEdit(obj).methods(obj).then(res => {
message.success("编辑成功")
console.log(res)
}).catch(err => {
message.error("编辑失败"+err)
console.log(err)
})
}
// 发布公告
const addNotice = () => {
let obj = {
beginTime: 0,
boeFlag: 0,
category: 0,
courseSyncFlag: 0,
endTime: 0,
level: 0,
manager: "",
managerId: "",
name: "",
notice: state.value2,
noticeFlag: 0,
picUrl: "",
projectTemplateId: 0,
remark: "",
sourceBelongId: 0,
status: 0,
systemId: 0,
"beginTime": 0,
"boeFlag": 0,
"category": 0,
"courseSyncFlag": 0,
"endTime": 0,
"level": 0,
"manager": "",
"managerId": "",
"name": "",
"notice": state.value2,
"noticeFlag": 0,
"picUrl": "",
"projectTemplateId": 0,
"remark": "",
"sourceBelongId": 0,
"status": 0,
"systemId": 0
};
api
.templateEdit(obj)
.methods(obj)
.then((res) => {
message.success("公告发布成功");
console.log(res);
})
.catch((err) => {
message.error("公告发布失败" + err);
console.log(err);
});
};
api.templateEdit(obj).methods(obj).then(res => {
message.success("公告发布成功")
console.log(res)
}).catch(err => {
message.error("公告发布失败"+err)
console.log(err)
})
}
// 删除阶段
const stateDel = (id) => {
api
.deleteStage(id)
.then((res) => {
message.success("删除阶段成功");
console.log(res);
})
.catch((err) => {
message.error("删除阶段失败" + err);
console.log(err);
});
};
api.deleteStage(id).then(res => {
message.success("删除阶段成功")
console.log(res)
}).catch(err => {
message.error("删除阶段失败"+err)
console.log(err)
})
}
// 删除任务
const taskDel = (id) => {
api
.deleteTask(id)
.then((res) => {
message.success("删除任务成功");
console.log(res);
})
.catch((err) => {
message.error("删除任务失败" + err);
console.log(err);
});
};
api.deleteTask(id).then(res => {
message.success("删除任务成功")
console.log(res)
}).catch(err => {
message.error("删除任务失败"+err)
console.log(err)
})
}
const toEdit = () => {
routered.push({
path: "/manage/templateAdd",
query: {
projectId: state.projectId,
name: state.name,
},
});
};
// 新建或编辑阶段
const stateEdit = () => {
let obj = {
name: "",
projectTemplateId: 0,
remark: "",
stageId: 0,
};
api
.editStagek(obj)
.then((res) => {
message.success("编辑阶段成功");
console.log(res);
})
.catch((err) => {
message.error("编辑阶段失败" + err);
console.log(err);
path: "/templateAdd",
query: {
projectId: state.projectId,
name: state.name,
},
});
};
}
// 新建或编辑阶段
const stateEdit = () => {
let obj={
"name": "",
"projectTemplateId": 0,
"remark": "",
"stageId": 0
}
api.editStagek(obj).then(res => {
message.success("编辑阶段成功")
console.log(res)
}).catch(err => {
message.error("编辑阶段失败"+err)
console.log(err)
})
}
//新建或编辑阶段任务
const taskEdit = () => {
let obj = {
courseId: 0,
duration: 0,
flag: true,
name: "",
projectTaskId: 0,
projectTemplateId: 0,
stageId: 0,
type: 0,
};
api
.editTask(obj)
.then((res) => {
message.success("编辑任务成功");
console.log(res);
})
.catch((err) => {
message.error("编辑任务失败" + err);
console.log(err);
});
};
"courseId": 0,
"duration": 0,
"flag": true,
"name": "",
"projectTaskId": 0,
"projectTemplateId": 0,
"stageId": 0,
"type": 0
}
api.editTask(obj).then(res => {
message.success("编辑任务成功")
console.log(res)
}).catch(err => {
message.error("编辑任务失败"+err)
console.log(err)
})
}
return {
...toRefs(state),
value,
@@ -1063,11 +988,11 @@ export default defineComponent({
</script>
<style lang="scss">
.editBtn {
float: right;
margin-right: 150px;
color: #4ea6ff;
cursor: pointer;
}
float:right;
margin-right: 150px;
color:#4ea6ff;
cursor: pointer;
}
.clearfix:before,
.clearfix:after {
content: " ";
@@ -1110,7 +1035,7 @@ export default defineComponent({
margin-top: 20px;
}
}
@media screen and (max-width: 1030px) {
.imgfor {
margin-left: 20px;
@@ -1237,15 +1162,15 @@ export default defineComponent({
}
.split {
width: 100%;
height: 20px;
background-color: #edf0f5;
}
.docListStyle {
display: flex;
width: 300px !important;
justify-content: space-around;
}
width: 100%;
height: 20px;
background-color: #edf0f5;
}
.docListStyle {
display: flex;
width: 300px !important;
justify-content: space-around;
}
.taskBox {
.onerow {
//width: 100%;
@@ -1474,12 +1399,14 @@ export default defineComponent({
}
.notice {
.ntc_tit {
padding-top: 22px;
padding-top:22px;
margin-left: 34px;
font-size: 18px;
font-weight: 500;
color: #232425;
}
.ntc_body {
margin-left: 34px;
@@ -1501,6 +1428,7 @@ export default defineComponent({
.btnarea {
display: flex;
justify-content: flex-end;
}
.area_btn {
width: 100px;
@@ -1535,7 +1463,7 @@ export default defineComponent({
}
.projectscore {
padding-top: 22px;
padding-top:22px;
.pjc_tit {
margin-left: 34px;
font-size: 18px;
@@ -1614,7 +1542,7 @@ export default defineComponent({
}
.setting {
padding-top: 22px;
padding-top:22px;
.set_tit {
margin-left: 34px;
font-size: 18px;