Files
fe-manage/src/views/projectcenter/ProjectAdd.vue
2022-11-30 21:48:40 +08:00

1536 lines
45 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="projectAdd">
<div class="header">
<span class="title">创建/编辑单层项目</span>
<div
@click="backPage"
style="cursor: pointer"
to="/projectmanage"
class="goback"
>
<span class="return"></span><span class="returntext">返回</span>
</div>
</div>
<div class="content">
<div class="main">
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">项目名称</div>
</div>
<div class="in">
<a-input
v-model:value="projectName"
placeholder="请输入项目名称"
show-count
:maxlength="30"
:disabled="viewDetail ? true : false"
/>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">分类</div>
</div>
<div class="in select">
<a-select
:getPopupContainer="
(triggerNode) => {
return triggerNode.parentNode || document.body;
}
"
v-model:value="classifySelect"
placeholder="请选择分类"
style="width: 100%"
:options="classifyList"
@change="classificationChange"
allowClear
showSearch
:disabled="viewDetail ? true : false"
:fieldNames="{
label: 'dictName',
value: 'dictCode',
}"
>
</a-select>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">封面图</div>
</div>
<div
class="box"
style="
width: 100px;
height: 100px;
border: 1px solid rgba(78, 166, 255, 1);
border-radius: 5px;
cursor: pointer;
position: relative;
overflow: hidden;
"
>
<img
style="
width: 100px;
height: 100px;
margin-bottom: 4px;
margin-right: 4px;
"
v-if="imageUrl"
:src="imageUrl"
alt="avatar"
/>
<!-- <a-upload
v-model:file-list="fileList"
name="file"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
action="/api/file/upload"
:before-upload="beforeUpload"
@change="handleChange"
:disabled="viewDetail ? true : false"
>
<img
style="
width: 100px;
height: 100px;
margin-bottom: 4px;
margin-right: 4px;
"
v-if="imageUrl"
:src="imageUrl"
alt="avatar"
/>
<div v-else>
<div class="box1"></div>
<div class="box2"></div>
</div>
</a-upload> -->
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">项目时间</div>
</div>
<div class="in">
<a-range-picker
separator="至"
:placeholder="[' 开始时间', ' 结束时间']"
v-model:value="rangevalue"
style="width: 100%; height: 40px; border-radius: 5px"
@change="onRangeChange"
:disabled="viewDetail ? true : false"
/>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">项目经理</div>
</div>
<div class="in">
<a-select
:getPopupContainer="
(triggerNode) => {
return triggerNode.parentNode || document.body;
}
"
:value="classifySelect1"
mode="multiple"
placeholder="请选择项目经理"
style="width: 100%"
:options="classifyList1"
@change="classificationChange1"
allowClear
showSearch
:disabled="viewDetail ? true : false"
@popupScroll="memberScroll"
>
</a-select>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">资源归属</div>
</div>
<div class="in select">
<a-tree-select
:getPopupContainer="
(triggerNode) => {
return triggerNode.parentNode || document.body;
}
"
v-model:value="classifySelect2"
style="width: 100%"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
placeholder="自动带出 可修改"
allow-clear
:tree-data="classifyList2"
:fieldNames="{
children: 'treeChildList',
label: 'name',
value: 'id',
}"
:disabled="viewDetail ? true : false"
@change="classificationChange2"
dropdownClassName="treeDropdown"
>
<!-- <template #title="{ value: val, title }">
<b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
<template v-else>{{ title }}</template>
</template> -->
</a-tree-select>
<!-- <a-select
:getPopupContainer="
(triggerNode) => {
return triggerNode.parentNode || document.body;
}
"
v-model:value="classifySelect2"
placeholder="自动带出 可修改"
:options="classifyList2"
@change="classificationChange2"
:field-names="{ label: 'name', value: 'id', options: 'children' }"
:disabled="viewDetail ? true : false"
/> -->
</div>
</div>
<div class="name name2">
<div class="namebox">
<div class="inname" style="margin-top: 13px">项目说明</div>
</div>
<div class="in">
<a-textarea
v-model:value="remark"
style="height: 80px"
placeholder="请输入说明"
show-count
:maxlength="200"
:disabled="viewDetail ? true : false"
/>
</div>
</div>
<div class="name name2">
<div class="namebox">
<div class="inname">同步学习记录</div>
</div>
<div class="in">
<a-radio
@click="changeChecked"
v-model:checked="checked"
:disabled="viewDetail ? true : false"
><span
style="
width: 100%;
color: rgba(109, 117, 132, 1);
font-size: 14px;
"
>同步课程学习记录如学员在课程库中拥有课程的学习记录自动免修该课程</span
></a-radio
>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">项目级别</div>
</div>
<div class="in select">
<a-select
:getPopupContainer="
(triggerNode) => {
return triggerNode.parentNode || document.body;
}
"
v-model:value="classifySelect3"
:options="classifyList3"
style="width: 100%"
@change="classificationChange3"
placeholder="请选择项目级别"
:disabled="viewDetail ? true : false"
:fieldNames="{
label: 'dictName',
value: 'dictCode',
}"
/>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">培训分类</div>
</div>
<div class="in select">
<a-select
:getPopupContainer="
(triggerNode) => {
return triggerNode.parentNode || document.body;
}
"
v-model:value="classifySelect4"
:options="classifyList4"
style="width: 100%"
@change="classificationChange4"
placeholder="请选择培训分类"
:disabled="viewDetail ? true : false"
:fieldNames="{
label: 'dictName',
value: 'dictCode',
}"
/>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="inname">是否BOEU实施</div>
</div>
<div class="in">
<a-radio
@click="changeChecked1"
v-model:checked="checked1"
:disabled="viewDetail ? true : false"
><span
style="
width: 100%;
color: rgba(109, 117, 132, 1);
font-size: 14px;
"
>BOEU实施</span
></a-radio
>
</div>
</div>
<!-- <div class="name name2">
<div class="namebox" style="margin-top: 8px">
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
<div class="inname">附件</div>
</div>
<div class="filebox">
<div>
<img v-if="fileList1.length < 6" class="fileimg" src="../../assets/images/projectadd/enclosure.png" />
<a-upload :disabled="fileList1.length > 5" :before-upload="beforeUpload1" v-model:file-list="fileList1"
@remove="removeFile" name="file" action="/api/file/upload" :headers="headers" @change="handleChange1">
<span v-if="fileList1.length > 5" class="filetext">上传数量已经达到最大值</span>
<span v-else class="filetext">上传附件</span>
</a-upload>
</div>
<div class="support">
支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip
</div>
</div>
</div> -->
</div>
<!-- 2022-11-30注释 后面放开 -->
<!-- <div class="template">
<div class="name">
<div class="inname" style="width: 50px">模版</div>
<div class="in select" style="margin-left: 2px">
<a-select
v-if="isEdit"
disabled="true"
:getPopupContainer="
(triggerNode) => {
return triggerNode.parentNode || document.body;
}
"
v-model:value="classifySelect5"
placeholder="请选择模版"
:size="size"
style="width: 100%"
:options="classifyList5"
@change="classificationChange5"
>
</a-select>
<a-select
v-else
:getPopupContainer="
(triggerNode) => {
return triggerNode.parentNode || document.body;
}
"
v-model:value="classifySelect5"
placeholder="请选择模版"
:size="size"
style="width: 100%"
:options="classifyList5"
@change="classificationChange5"
@popupScroll="templateScroll"
>
</a-select>
</div>
</div>
</div> -->
</div>
<div class="footer">
<div class="btn">
<a-button v-on:click="createProject" type="primary" class="btn1"
>确定</a-button
>
<a-button @click="backPage" class="btn2">取消</a-button>
</div>
</div>
</div>
</template>
<script>
import { reactive, toRefs, ref, onUnmounted, computed } from "vue";
import { message } from "ant-design-vue";
import { useRouter, useRoute } from "vue-router";
import dayjs from "dayjs";
import * as api from "../../api/index";
import * as api1 from "../../api/index1";
import { storage } from "../../api/storage";
import { toDate, scrollLoad } from "../../api/method";
import { useStore } from "vuex";
export default {
name: "projectAdd",
setup() {
const store = useStore();
// 编辑页面跳转过来时候,自动填充表格
const routers = useRoute();
const router = useRouter();
const state = reactive({
classifySelect: null, //分类选择信息
projectType: null, //分类选择的id
checked: false, //同步学习记录
checked1: false, //BOEU实施
classifySelect1: [], //选中项目经理名称数组
classifySelect2: null, //选中的资源归属信息
classifySelect3: null, //选中的项目级别信息
classifySelect4: null, //选中的培训分类信息
rangevalue: [], //项目时间
currentPage: 1, //当前页
tableDataTotal: -1, //模版列表总数
pageSize: 10, //每页10条数据
totalPages: 0, //总页数
viewDetail: routers.query.viewDetail ? routers.query.viewDetail : null,
currentPage1: 1, //项目经理
pageSize1: 10, //项目经理
});
//分类列表
const classifyList = ref([]);
//项目封面
const imageUrl = ref("");
// 项目级别
const classifyList3 = ref([
// { value: 1, label: "集团级" },
]);
// 培训分类
const classifyList4 = ref([
// { value: 1, label: "集团级" },
]);
//获取分类、封面图、项目级别、培训分类-----------字典配置-------------------------------
const getDictList = (param) => {
let obj = {
pageNo: 1,
pageSize: 20,
setCode: param,
};
api1
.getDict(obj)
.then((res) => {
console.log("获取字典成功", res);
if (res.status === 200) {
if (param === "projectClass") {
classifyList.value = res.data.data.rows;
}
if (param === "projectPic") {
if (res.data.data.rows.length > 0) {
imageUrl.value = res.data.data.rows[0].dictValue;
picUrl = res.data.data.rows[0].dictValue;
}
}
if (param === "projectLevel") {
classifyList3.value = res.data.data.rows;
}
if (param === "projectSys") {
classifyList4.value = res.data.data.rows;
}
if (
classifyList.value &&
imageUrl.value &&
classifyList3.value &&
classifyList4.value
) {
getDictInfo();
}
}
})
.catch((err) => {
console.log("获取字典失败", err);
});
};
getDictList("projectClass");
getDictList("projectPic");
getDictList("projectLevel");
getDictList("projectSys");
//获取分类、封面图、项目级别、培训分类---------------字典配置---------------------------
//分类、封面图、项目级别、培训分类回显
const getDictInfo = () => {
if (routers.query.projectId) {
// console.log("classifyList", classifyList.value, state.projectType);
// //分类
// let arr=classifyList.value
// for(let i=0;i<arr.length;i++){
// if(arr[i].){
// }
// }
// state.classifySelect: null, //分类选择信息
// state.projectType: null, //分类选择的id
//imageUrl.value //封面图
//levels.value //项目级别
//state.classifySelect3 //项目级别
//state.classifySelect4 //培训分类
//systemid.value //培训分类id
}
};
//分类、封面图、项目级别、培训分类回显
const isEdit = ref(false);
let peojectID = ""; //项目id
console.log("store.state.orgtreeList", store.state.orgtreeList);
const editProject = () => {
if (routers.query.projectId) {
storage.set("projectAddId", routers.query.projectId);
isEdit.value = true;
peojectID = routers.query.projectId;
// 需要编辑
api
.getProjectDetail({ projectId: routers.query.projectId })
.then((res) => {
if (res.status == 200 && res.data.code == 200) {
let info = res.data.data.projectInfo;
console.log(
"classifyList.value.find(item=>item.dictCode===info.category)",
classifyList.value.find((item) => {
if (item.dictCode == 11) {
return item.dictName;
}
// return item.dictName;
}),
classifyList.value,
info.category
);
console.log(info);
// projectName classifySelect imageUrl * classifySelect1 * remark checked classifySelect3 classifySelect4 changeChecked1 *
projectName.value = info.name; //项目名称
// state.classifySelect =classifyList.value.find(item=>item.dictCode===info.category) ; // info.category 项目分类
state.projectType = 1; //分类选择的id
imageUrl.value = info.picUrl; //封面图
let start = toDate(info.beginTime / 1000, "YYYY/MM/DD"); //开始时间
let end = toDate(info.endTime / 1000, "YYYY/MM/DD"); //结束时间
state.rangevalue = [
dayjs(start, "YYYY/MM/DD"),
dayjs(end, "YYYY/MM/DD"),
];
let manageName = info.manager.split(","); //项目经理
let manageValue = info.managerId.split(","); //项目经理id数组
let optionsManage = [];
for (let i = 0; i < manageName.length; i++) {
let obj = {
label: manageName[i],
value: manageValue[i],
};
optionsManage.push(obj);
}
console.log(optionsManage);
state.classifySelect1 = optionsManage;
state.classifySelect2 =
classifyList2.value[info.sourceBelongId - 1];
remark.value = info.remark;
state.checked = info.boeFlag ? info.boeFlag : false;
state.classifySelect3 = classifyList3.value[info.level];
state.classifySelect4 = classifyList4.value[info.systemId - 1];
state.checked1 = info.boeFlag ? info.boeFlag : false;
// fileList1.value = info.attach.split(",");
picUrl = info.picUrl;
beginTime = Number(info.beginTime / 1000);
endTime = Number(info.endTime / 1000);
manager = info.manager;
managerId = info.managerId;
sourceBelongIdC = Number(info.sourceBelongId);
courseSyncFlag = info.courseSyncFlag;
levels = info.level;
systemid = info.systemId;
boeFlag = info.boeFlag;
}
})
.catch((err) => {
console.log(err);
});
} else {
if (storage.get("projectAddId")) {
isEdit.value = true;
peojectID = storage.get("projectAddId");
// 需要编辑
api
.getProjectDetail({ projectId: storage.get("projectAddId") })
.then((res) => {
if (res.status == 200 && res.data.code == 200) {
let info = res.data.data.projectInfo;
console.log("我是从本地存储获取的id", info);
projectName.value = info.name;
state.classifySelect = classifyList.value[1]; // info.category 分类选择的信息
state.projectType = 1; //分类选择的id
imageUrl.value = info.picUrl;
let start = toDate(info.beginTime / 1000, "YYYY/MM/DD");
let end = toDate(info.endTime / 1000, "YYYY/MM/DD");
state.rangevalue = [
dayjs(start, "YYYY/MM/DD"),
dayjs(end, "YYYY/MM/DD"),
];
let manageName = info.manager.split(",");
let manageValue = info.managerId.split(",");
let optionsManage = [];
for (let i = 0; i < manageName.length; i++) {
let obj = {
label: manageName[i],
value: manageValue[i],
};
optionsManage.push(obj);
}
console.log(optionsManage);
state.classifySelect1 = optionsManage;
state.classifySelect2 =
classifyList2.value[info.sourceBelongId - 1];
remark.value = info.remark;
state.checked = info.boeFlag ? info.boeFlag : false;
state.classifySelect3 = classifyList3.value[info.level];
state.classifySelect4 = classifyList4.value[info.systemId - 1];
state.checked1 = info.boeFlag ? info.boeFlag : false;
picUrl = info.picUrl;
beginTime = Number(info.beginTime / 1000);
endTime = Number(info.endTime / 1000);
manager = info.manager;
managerId = info.managerId;
sourceBelongIdC = Number(info.sourceBelongId);
courseSyncFlag = info.courseSyncFlag;
levels = info.level;
systemid = info.systemId;
boeFlag = info.boeFlag;
}
})
.catch((err) => {
console.log(err);
});
}
}
};
editProject();
const backPage = () => {
storage.remove("projectAddId");
setTimeout(() => {
router.push({
path: "/projectmanage",
});
}, 400);
};
const projectName = ref(""); //项目名称
//选择分类
const classificationChange = (value) => {
console.log(`selected ${value}`);
state.projectType = value; //分类选择的id
};
function getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener("load", () => callback(reader.result));
reader.readAsDataURL(img);
}
const fileList = ref([]);
const fileList1 = ref([]);
const loading = ref(false);
let picUrl = ""; //项目封面
const handleChange = (info) => {
if (info.file.status === "uploading") {
loading.value = true;
return;
}
if (info.file.status === "done") {
console.log("上传图片返回的信息 %o", info);
picUrl = info.file.response.data;
// Get this url from response in real world.
getBase64(info.file.originFileObj, (base64Url) => {
imageUrl.value = base64Url;
loading.value = false;
});
}
if (info.file.status === "error") {
loading.value = false;
message.error("upload error");
}
};
let uplodaFileCount = false;
let attach = "";
let attachData = "";
const handleChange1 = (info) => {
if (info.file.status === "uploading") {
loading.value = true;
return;
}
if (info.file.status === "done") {
console.log(
"上传附件返回的信息 %o",
info,
info.fileList.length,
uplodaFileCount
);
let attachStr = "";
attachData = info.fileList;
for (let i = 0; i < attachData.length; i++) {
if (attachData.length - 1 == i) {
attachStr += attachData[i].response.data;
} else {
attachStr += attachData[i].response.data + ",";
}
}
console.log(attachStr);
attach = attachStr;
if (info.fileList.length > 5) {
uplodaFileCount = true;
} else {
uplodaFileCount = false;
}
}
if (info.file.status === "error") {
loading.value = false;
message.error("upload error");
}
};
const beforeUpload = (file) => {
const isJpgOrPng =
file.type === "image/jpeg" || file.type === "image/png";
if (!isJpgOrPng) {
message.error("You can only upload JPG file!");
}
const isLt2M = file.size / 1024 / 1024 < 1;
if (!isLt2M) {
message.error("Image must smaller than 1MB!");
}
return isJpgOrPng && isLt2M;
};
const beforeUpload1 = () => {
return new Promise((resovle, reject) => {
if (uplodaFileCount) {
message.info("上传文件数量已达最大数量");
return reject(false);
}
return resovle(true);
});
};
let beginTime = "";
let endTime = "";
const dateFormatList = ["YYYY/MM/DD"];
const onRangeChange = (value, dateString) => {
console.log("Selected Time: ", value);
// 项目时间选择函数
console.log("Formatted Selected Time: ", dateString);
console.log(
"Formatted Selected TimeStamp",
new Date(dateString[0]).getTime()
);
beginTime = new Date(dateString[0]).getTime() / 1000;
endTime = new Date(dateString[1]).getTime() / 1000;
};
// 项目经理 后续接口调用
const classifyList1 = ref([]);
//获取学员
const getMember = () => {
api1
.getMemberInfo({
pageNo: state.currentPage1,
pageSize: state.pageSize1,
keyWord: "",
})
.then((res) => {
if (res.data.code === 200) {
let arr = res.data.data.rows;
let array = classifyList1.value;
arr.map((value) => {
let obj = {
value: value.id,
label: value.realName,
};
array.push(obj);
});
classifyList1.value = array;
console.log("获取学员", res.data);
// classifyList1.value = res.data.data.rows;
// state.tableDataTotal = res.data.data.total;
// return res.data.data.rows;
}
});
};
getMember();
//学员滚动加载信息
const memberScroll = (e) => {
// console.log("滚动", e, b);
let num = scrollLoad(e);
if (num === 1) {
state.currentPage1 = 1;
} else if (num === 2) {
// 如果滑到底部,则加载下一页
state.currentPage1++;
getMember();
}
};
//选择处理项目经理
let manager = "";
let managerId = "";
const classificationChange1 = (key, options) => {
console.log(`selected ${key}`, options);
let mstr = "";
let midstr = "";
for (let i = 0; i < key.length; i++) {
if (key.length - 1 !== i) {
midstr += key[i] + ",";
mstr += classifyList1.value[i].label + ",";
} else {
midstr += key[i];
mstr += classifyList1.value[i].label;
}
}
console.log(mstr, midstr);
state.classifySelect1 = options;
let newoptions = [];
for (let i = 0; i < state.classifySelect1.length; i++) {
if (state.classifySelect1[i].value) {
newoptions.push(state.classifySelect1[i]);
}
}
state.classifySelect1 = newoptions;
manager = mstr;
managerId = midstr;
};
// 资源归属 sourceBelongId 后续给接口
const classifyList2 = computed(() => {
return store.state.orgtreeList ? store.state.orgtreeList : ref([]);
});
let sourceBelongIdC = "";
const classificationChange2 = (key) => {
console.log(`selected ${key}`, classifyList2);
sourceBelongIdC = key;
};
//选择项目级别
let levels = "";
const classificationChange3 = (key) => {
console.log(`selected ${key}`, classifyList3);
levels = key;
};
//选择培训分类
let systemid = "";
const classificationChange4 = (key) => {
console.log(`selected ${key}`, classifyList4);
systemid = key;
};
// 模版
const classifyList5 = ref([
// { value: 1, label: "模版一" },
// { value: 2, label: "模版二" },
// { value: 3, label: "模版三" },
// { value: 4, label: "模版四" },
]);
const classificationChange5 = (key) => {
console.log(`selected ${key}`, classifyList5.value);
//获取模版信息
let obj = {
projectTemplateId: Number(key),
};
api
.getTemplateDetail(obj)
.then((res) => {
console.log("获取模版详情", res);
if (res.status === 200) {
let info = res.data.data.projectTemplateInfo;
console.log(info);
// projectName classifySelect imageUrl * classifySelect1 * remark checked classifySelect3 classifySelect4 changeChecked1 *
projectName.value = info.name;
state.classifySelect = classifyList.value[1]; // info.category 分类选择的信息
state.projectType = 1; //分类选择的id
imageUrl.value = info.picUrl;
let start = toDate(info.beginTime / 1000, "YYYY/MM/DD");
let end = toDate(info.endTime / 1000, "YYYY/MM/DD");
state.rangevalue = [
dayjs(start, "YYYY/MM/DD"),
dayjs(end, "YYYY/MM/DD"),
];
let manageName = info.manager.split(",");
let manageValue = info.managerId.split(",");
let optionsManage = [];
for (let i = 0; i < manageName.length; i++) {
let obj = {
label: manageName[i],
value: manageValue[i],
};
optionsManage.push(obj);
}
console.log(optionsManage);
state.classifySelect1 = optionsManage;
state.classifySelect2 =
classifyList2.value[info.sourceBelongId - 1];
remark.value = info.remark;
state.checked = info.boeFlag ? info.boeFlag : false;
state.classifySelect3 = classifyList3.value[info.level];
state.classifySelect4 = classifyList4.value[info.systemId - 1];
state.checked1 = info.boeFlag ? info.boeFlag : false;
// fileList1.value = info.attach.split(",");
picUrl = info.picUrl;
beginTime = Number(info.beginTime / 1000);
endTime = Number(info.endTime / 1000);
manager = info.manager;
managerId = info.managerId;
sourceBelongIdC = Number(info.sourceBelongId);
courseSyncFlag = info.courseSyncFlag;
levels = info.level;
systemid = info.systemId;
boeFlag = info.boeFlag;
}
})
.catch((err) => {
console.log("获取详情失败", err);
});
};
//获取模版列表
const getTemplate = () => {
let obj = {
pageNo: state.currentPage,
pageSize: state.pageSize,
// projectId:id?id:''
};
api
.getTemplate(obj)
.then((res) => {
console.log("获取模版列表", res);
state.totalPages = Number(res.data.data.pages);
if (res.status === 200) {
let arr = res.data.data.rows;
let array = classifyList5.value;
arr.map((value) => {
let obj = {
value: value.projectTemplateId,
label: value.name,
};
array.push(obj);
});
classifyList5.value = array;
}
})
.catch((err) => {
console.log("获取模版列表失败", err);
});
};
getTemplate();
//模版滚动加载模板信息
const templateScroll = (e) => {
// console.log("滚动", e, b);
let num = scrollLoad(e);
if (num === 1) {
state.currentPage = 1;
} else if (num === 2) {
// 如果滑到底部,则加载下一页
state.currentPage++;
getTemplate();
}
};
// 项目说明
const remark = ref("");
//同步学习记录------------------------------------
let courseSyncFlag = 0;
const changeChecked = () => {
console.log(state.checked);
state.checked ? (state.checked = false) : (state.checked = true);
courseSyncFlag = state.checked ? 1 : 0;
};
//同步学习记录------------------------------------
//BOEU实施--------------------------------------
let boeFlag = 0;
const changeChecked1 = () => {
console.log(state.checked1);
state.checked1 ? (state.checked1 = false) : (state.checked1 = true);
boeFlag = state.checked1 ? 1 : 0;
};
//BOEU实施--------------------------------------
const removeFile = (file) => {
const index = fileList1.value.indexOf(file);
const newFileList = fileList1.value.slice();
newFileList.splice(index, 1);
fileList1.value = newFileList;
let attachStr = "";
if (newFileList.length == 0) {
attachStr = "";
}
for (let i = 0; i < fileList1["value"].length; i++) {
console.log(fileList1["value"][i].response.data);
if (fileList1["value"].length - 1 == i) {
attachStr += fileList1["value"][i].response.data;
} else {
attachStr += fileList1["value"][i].response.data + ",";
}
}
attach = attachStr;
};
const errorMsgs = {
name: "请输入项目名称",
category: "请选择项目分类",
picUrl: "请上传项目封面图",
beginTime: "请选择项目开始时间",
endTime: "请选择项目结束时间",
manager: "请选择项目经理",
managerId: "请选择项目经理",
sourceBelongId: "请选择资源归属",
level: "请填写项目级别",
systemId: "请填写项目培训体系",
boeFlag: "请选择是否BOE实施",
};
const createProject = () => {
console.log("我是否要编辑项目", isEdit.value);
if (isEdit.value) {
console.log("我要编辑项目", peojectID);
let obj = {
projectId: Number(peojectID),
name: projectName["value"],
category: state.projectType, //分类选择的id
picUrl: picUrl,
beginTime: beginTime,
endTime: endTime,
manager: manager,
managerId: managerId,
sourceBelongId: sourceBelongIdC,
remark: remark["value"],
courseSyncFlag: courseSyncFlag,
level: levels,
systemId: systemid,
boeFlag: boeFlag,
attach: attach,
type: 3,
templateId: 0,
parentId: 0,
notice: "",
noticeFlag: 0,
status: 0,
};
console.log(obj);
for (let i in errorMsgs) {
console.log(obj[i]);
if (obj[i] === "" || obj[i] === undefined) {
message.destroy();
message.warning(errorMsgs[i]);
return;
}
}
api
.createProject(obj)
.then((res) => {
console.log(res);
if (res.status == 200 && res.data.code == 200) {
message.destroy();
message.success("编辑成功");
setTimeout(() => {
router.push({
path: "/projectmanage",
});
}, 1000);
} else {
message.destroy();
message.error("编辑失败,请检查当前网络状态。");
}
})
.catch((err) => {
console.log(err);
message.destroy();
message.error("编辑失败,请检查当前网络状态。");
});
} else {
let obj = {
name: projectName["value"],
category: state.projectType, //分类选择的id
picUrl: picUrl,
beginTime: beginTime,
endTime: endTime,
manager: manager,
managerId: managerId,
sourceBelongId: sourceBelongIdC,
remark: remark["value"],
courseSyncFlag: courseSyncFlag,
level: levels,
systemId: systemid,
boeFlag: boeFlag,
attach: attach,
type: 3,
templateId: 10,
parentId: 0,
notice: "",
noticeFlag: 0,
status: 0,
};
console.log("提交的数据格式 %o", obj);
for (let i in errorMsgs) {
console.log(obj[i]);
if (obj[i] === "" || obj[i] === undefined) {
message.destroy();
message.warning(errorMsgs[i]);
return;
}
}
api
.createProject(obj)
.then((res) => {
console.log(res);
if (res.status == 200 && res.data.code == 200) {
message.destroy();
message.success("创建成功");
setTimeout(() => {
router.push({
path: "/taskpage",
query: { id: res.data.data.projectId },
});
}, 1000);
} else {
message.destroy();
message.error("创建失败,请检查当前网络状态。");
}
})
.catch((err) => {
console.log(err);
message.destroy();
message.error("创建失败,请检查当前网络状态。");
});
}
};
onUnmounted(() => {
storage.remove("projectAddId");
});
return {
...toRefs(state),
projectName,
classifyList,
classificationChange,
classificationChange1,
classificationChange2,
classificationChange3,
classificationChange4,
classificationChange5,
fileList,
fileList1,
loading,
imageUrl,
handleChange,
handleChange1,
beforeUpload,
beforeUpload1,
onRangeChange,
classifyList1,
classifyList2,
classifyList3,
classifyList4,
classifyList5,
remark,
changeChecked,
changeChecked1,
uplodaFileCount,
createProject,
removeFile,
isEdit,
backPage,
dateFormatList,
templateScroll,
memberScroll,
};
},
};
</script>
<style lang="scss">
.projectAdd {
width: 100%;
// height: inherit;
// flex: 1;
// flex-shrink: 0;
// overflow-y: auto;
.header {
width: 100%;
display: flex;
justify-content: space-between;
.title {
color: #000000;
font-size: 18px;
//line-height: 36px;
padding-top: 30px;
padding-left: 37px;
//font-weight: 500;
}
.goback {
padding-right: 70px;
//padding-top: 37px;
position: relative;
.return {
display: inline-block;
width: 42px;
height: 42px;
margin-top: 17px;
margin-right: 10px;
background-image: url("../../assets/images/projectadd/return.png");
}
.returntext {
display: inline-block;
position: absolute;
top: 27px;
color: #4ea6ff;
font-size: 14px;
}
}
}
// 修改 antd upload 样式
.ant-upload {
border-width: 0px;
}
.content {
display: flex;
.main {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
//justify-content: center;
float: left;
border-right: 1px solid rgba(153, 155, 163, 0.3);
.name {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 20px;
align-items: center;
//height: 40px;
// border: 1px solid black;
.namebox {
width: 120px;
display: flex;
align-items: center;
justify-content: flex-end;
flex-shrink: 0;
.nameimg {
width: 10px;
height: 10px;
}
}
.d {
margin-top: 8px;
font-size: 25px;
color: #ff4e4e;
}
.box {
position: relative;
margin-left: 14px;
.box1 {
position: absolute;
left: 50%;
top: 50%;
width: 50px;
margin-left: -25px;
margin-top: -5px;
border-top: 2px solid rgba(78, 166, 255, 1);
}
.box2 {
position: absolute;
left: 50%;
top: 50%;
height: 50px;
//margin-left: -5px;
margin-top: -25px;
border-left: 2px solid rgba(78, 166, 255, 1);
}
}
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
}
.in {
margin-left: 14px;
flex: 1;
// .ant-radio-wrapper {
// }
.ant-input-textarea-show-count {
position: relative;
height: 88px;
}
.ant-input-textarea-show-count::after {
position: absolute;
right: 10px;
bottom: 0px;
}
.ant-input {
border-radius: 8px;
// height: 120%;
width: 100%;
height: 40px;
}
.ant-input-affix-wrapper {
padding: 0 11px;
border-radius: 8px;
}
.ant-select-selector {
border-radius: 5px;
// height: 120%;
width: 100%;
// height: 40px;
}
}
.filebox {
margin-left: 14px;
flex: 1;
.fileimg {
width: 15px;
height: 15px;
margin-right: 6px;
}
.filetext {
font-size: 14px;
font-weight: 400;
color: #4ea6ff;
line-height: 36px;
}
.support {
font-size: 14px;
font-weight: 400;
color: #999ba3;
line-height: 36px;
margin-top: 8px;
word-break: break-all;
}
}
}
.name2 {
display: flex;
align-items: flex-start;
.ant-input-textarea {
.ant-input {
height: 88px;
}
}
}
}
.template {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
//justify-content: center;
float: right;
.name {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 20px;
align-items: center;
height: 40px;
// border: 1px solid black;
.d {
margin-top: 8px;
font-size: 25px;
color: #ff4e4e;
}
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
width: 65px;
}
.in {
margin-left: 14px;
width: 81%;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
}
.ant-select-selector {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
}
}
}
}
}
.footer {
width: 100%;
margin-top: 31px;
margin-bottom: 14px;
padding-bottom: 20px;
.btn {
display: flex;
justify-content: center;
.btn1 {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 40px;
border-radius: 8px;
background: #409eff;
color: #ffffff;
margin-right: 14px;
}
.btn2 {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 40px;
border-radius: 8px;
border: 1px solid #409eff;
background: #ffffff;
color: #409eff;
}
}
.text {
color: rgba(153, 155, 163, 1);
font-size: 14px;
margin-left: 223px;
}
}
}
.treeDropdown {
// width: 240px !important;
// border-radius: 5px;
// min-height: 600px !important;
.ant-select-tree-list-scrollbar {
width: 5px !important;
.ant-select-tree-list-scrollbar-thumb {
background-color: #4ea6ff !important;
}
}
.ant-select-tree-indent-unit {
width: 7px !important;
}
}
</style>