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

feat:创建单层项目部分数据接入

Browse Source
This commit is contained in:
wuyx
2022-10-27 15:33:07 +08:00
parent f0c99d610f
commit e6459d826c
2 changed files with 669 additions and 549 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/api/index.js
View File

@@ -1,5 +1,5 @@
import http from "./config";
import qs from 'qs';
// import qs from 'qs';
/**
@@ -37,39 +37,27 @@ import qs from 'qs';
// 接口-请求
// 根据投票ID获取题干信息
export const getStemInfo = (stemId) => http.post('/vote/queryStemByStemId', qs.stringify({ stemId: stemId }));
// 测试方法
// import * as api from '../../api/index'
// api.getStemInfo(4).then(res => {
// console.log(res)
// }).catch(err => {
// console.log(err)
// })
// 获取字典列表
export const getList = (pageno, pagesize) => http.post('/dict/getList', {
"dictCode": "",
"pageNo": pageno,
"pageSize": pagesize
// 创建编辑单层项目
export const createProject = (obj) => http.post('/admin/project/edit', {
"attach": obj.attach,
"beginTime": obj.beginTime,
"boeFlag": obj.boeFlag,
"category": obj.category,
"courseSyncFlag": obj.courseSyncFlag,
"endTime": obj.endTime,
"level": obj.level,
"manager": obj.manager,
"managerId": obj.managerId,
"name": obj.name,
"notice": obj.notice,
"noticeFlag": obj.noticeFlag,
"parentId": obj.parentId,
"picUrl": obj.picUrl,
"projectId": obj.projectId,
"remark": obj.remark,
"sourceBelongId": obj.sourceBelongId,
"status": obj.status,
"systemId": obj.systemId,
"templateId": obj.templateId,
"type": obj.type
})
// 测试方法
// import * as api from '../../api/index'
// api.getList(0,0).then(res => {
// console.log(res)
// }).catch(err => {
// console.log(err)
// })
// 根据活动ID获取活动信息接口
export const getActivityList = (activityId) => http.get('/activity', { params: { "activityId": activityId } })
// 测试方法
// import * as api from '../../api/index'
// api.getActivityList(4).then(res => {
// console.log(res)
// }).catch(err => {
// console.log(err)
// })

424
src/views/projectcenter/ProjectAdd.vue
View File

@@ -4,109 +4,87 @@
<div class="header">
<span class="title">创建/编辑单层项目</span>
<router-link to="/projectmanage" class="goback">
<span class="return"></span
><span class="returntext">返回</span></router-link
>
<span class="return"></span><span class="returntext">返回</span>
</router-link>
</div>
<div class="content">
<div class="main">
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
<div class="inname">项目名称</div>
</div>
<div class="in">
<a-input v-model:value="valueE" placeholder="请输入项目名称" show-count
:maxlength="30"/>
<a-input v-model:value="projectName" placeholder="请输入项目名称" show-count :maxlength="30" />
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
<div class="inname">分类</div>
</div>
<div class="in select">
<a-select
:value="classifySelect"
placeholder="四个养成"
style="width: 100%"
:options="classifyList"
allowClear
showSearch
></a-select>
<a-select :getPopupContainer="triggerNode => {
return triggerNode.parentNode || document.body
}" v-model:value="classifySelect" placeholder="四个养成" style="width: 100%" :options="classifyList"
@change="classificationChange" allowClear showSearch>
</a-select>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
<div class="inname">封面图</div>
</div>
<div
class="box"
style="
<div class="box" style="
width: 100px;
height: 100px;
border: 1px solid rgba(78, 166, 255, 1);
border-radius: 5px;
cursor: pointer;
"
>
overflow: hidden;
">
<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">
<img style="width: 100px;height: 100px;margin-bottom: 4px;margin-right: 4px;" v-if="imageUrl"
:src="imageUrl" alt="avatar" />
<div v-else>
<!-- <loading-outlined v-if="loading"></loading-outlined> -->
<!-- <plus-outlined v-else></plus-outlined> -->
<div class="box1"></div>
<div class="box2"></div>
<!-- <div class="ant-upload-text"></div> -->
</div>
</a-upload>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
<div class="inname">项目时间</div>
</div>
<div class="in">
<a-range-picker
separator="至"
:placeholder="[' 开始时间', ' 结束时间']"
style="width: 100%; height: 40px; border-radius: 5px"
show-time
/>
<a-range-picker separator="至" :placeholder="[' 开始时间', ' 结束时间']"
style="width: 100%; height: 40px; border-radius: 5px" show-time @change="onRangeChange" />
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
<div class="inname">项目经理</div>
</div>
<div class="in select">
<a-select
:value="classifySelect"
placeholder="请选择项目经理"
style="width: 100%"
:options="classifyList"
allowClear
showSearch
></a-select>
<a-select :getPopupContainer="triggerNode => {
return triggerNode.parentNode || document.body
}" :value="classifySelect1" placeholder="请选择项目经理" style="width: 100%" :options="classifyList1" allowClear
showSearch>
</a-select>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
<div class="inname">资源归属</div>
</div>
@@ -119,12 +97,7 @@
<div class="inname" style="margin-top: 13px">项目说明</div>
</div>
<div class="in">
<a-textarea
v-model:value="valuei"
style="height: 80px"
placeholder="请输入说明"
show-count :maxlength="200"
/>
<a-textarea v-model:value="remark" style="height: 80px" placeholder="请输入说明" show-count :maxlength="200" />
</div>
</div>
<div class="name name2">
@@ -132,84 +105,59 @@
<div class="inname">同步学习记录</div>
</div>
<div class="in">
<a-radio v-model:checked="checked"
><span
style="
<a-radio @click="changeChecked" v-model:checked="checked"><span style="
width: 100%;
color: rgba(109, 117, 132, 1);
font-size: 14px;
"
>同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span
></a-radio
>
">同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span></a-radio>
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
<div class="inname">项目级别</div>
</div>
<div class="in">
<a-input
v-model:value="valueE"
placeholder="集团级/组织级/现地级/部门级"
/>
<a-input v-model:value="valueE" placeholder="集团级/组织级/现地级/部门级" />
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
<div class="inname">培训体系</div>
</div>
<div class="in">
<a-input
v-model:value="valueE"
placeholder="集团级/组织级/现地级/部门级"
/>
<a-input v-model:value="valueE" placeholder="集团级/组织级/现地级/部门级" />
</div>
</div>
<div class="name">
<div class="namebox">
<img
class="nameimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
<div class="inname">是否BOEU实施</div>
</div>
<div class="in">
<a-radio v-model:checked="checked"
><span
style="
<a-radio @click="changeChecked1" v-model:checked="checked1"><span style="
width: 100%;
color: rgba(109, 117, 132, 1);
font-size: 14px;
"
>BOEU实施</span
></a-radio
>
">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"
/>
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
<div class="inname">附件</div>
</div>
<div class="filebox">
<div>
<img
class="fileimg"
src="../../assets/images/projectadd/enclosure.png"
/>
<img class="fileimg" src="../../assets/images/projectadd/enclosure.png" />
<a-upload v-model:file-list="fileList1" name="file" action="/api/file/upload" :headers="headers"
@change="handleChange1">
<!-- <a-button> -->
<!-- <upload-outlined></upload-outlined> -->
<span class="filetext">上传附件</span>
<!-- </a-button> -->
</a-upload>
</div>
<div class="support">
支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip
@@ -221,67 +169,213 @@
<div class="name">
<div class="inname" style="width: 50px">模板</div>
<div class="in select" style="margin-left: 2px">
<a-select
v-model:value="value1"
placeholder="请选择模板"
:size="size"
style="width: 100%"
:options="options"
></a-select>
<a-select v-model:value="value1" placeholder="请选择模板" :size="size" style="width: 100%" :options="options">
</a-select>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="btn">
<router-link to="/taskpage"
type="primary"
class="btn1"
>确定</router-link
>
<a-button
class="btn2"
>取消</a-button
>
<a-button v-on:click="createProject" type="primary" class="btn1">确定</a-button>
<a-button class="btn2">取消</a-button>
</div>
</div>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { reactive, toRefs, ref } from "vue";
import { message } from 'ant-design-vue';
import * as api from "../../api/index";
export default {
name: "projectAdd",
setup() {
const state = reactive({
classifyList: [
{
id: 1,
name: "分类一",
label: "分类一",
},
{
id: 2,
name: "分类二",
label: "分类二",
},
{
id: 3,
name: "分类三",
label: "分类三",
},
{
id: 4,
name: "分类四",
label: "分类四",
},
],
classifySelect: null,
classifySelectId: null,
checked: false,
checked1: false
});
const projectName = ref('');
const classifyList = ref([
{ value: 1, label: '管理者' },
{ value: 2, label: '领军者' },
{ value: 3, label: '产业人' },
]);
let projectType = "";
const classificationChange = (value) => {
console.log(`selected ${value}`);
projectType = value;
};
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);
const imageUrl = ref('');
const handleChange = (info) => {
if (info.file.status === 'uploading') {
loading.value = true;
return;
}
if (info.file.status === 'done') {
console.log('上传图片返回的信息 %o', info)
// 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');
}
};
const handleChange1 = (info) => {
if (info.file.status === 'uploading') {
loading.value = true;
return;
}
if (info.file.status === 'done') {
console.log('上传附件返回的信息 %o', info)
}
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 onRangeChange = (value, dateString) => {
console.log('Selected Time: ', value);
// 项目时间选择函数
console.log('Formatted Selected Time: ', dateString);
};
// 项目经理 后续接口调用
const classifyList1 = ref([
{ value: 1, label: '李俊国' },
{ value: 2, label: '将小米' },
{ value: 3, label: '刘孟君' },
]);
// 资源归属 sourceBelongId 后续给接口
// 项目说明
const remark = ref('');
const changeChecked = () => {
console.log(state.checked)
state.checked ? state.checked = false : state.checked = true;
}
const changeChecked1 = () => {
console.log(state.checked1)
state.checked1 ? state.checked1 = false : state.checked1 = true;
}
const errorMsgs = {
"name": "请输入项目名称",
"type": "请选择项目分类",
"picUrl": "请上传项目封面图",
"beginTime": "请选择项目开始时间",
"endTime": "请选择项目结束时间",
"manager": "请选择项目经理",
"managerId": "请选择项目经理",
"sourceBelongId": "请选择资源归属",
"level": "请填写项目级别",
"systemId": "请填写项目培训体系",
"boeFlag": "请选择是否BOE实施",
"attach": "请上传附件"
}
const createProject = () => {
let obj = {
"attach": "1",
"beginTime": 0,
"boeFlag": 0,
"category": 0,
"courseSyncFlag": 0,
"endTime": 0,
"level": 0,
"manager": "",
"managerId": "",
"name": projectName["value"],
"notice": "",
"noticeFlag": 0,
"parentId": 0,
"picUrl": "",
"projectId": 0,
"remark": remark["value"],
"sourceBelongId": 0,
"status": 0,
"systemId": 0,
"templateId": 0,
"type": projectType
}
console.log('提交的数据格式 %o', obj)
for (let i in obj) {
console.log(obj[i])
if (obj[i] === "") {
message.destroy()
message.info(errorMsgs[i])
return
}
}
api.createProject(obj).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
};
return {
...toRefs(state),
projectName,
classifyList,
classificationChange,
fileList,
fileList1,
loading,
imageUrl,
handleChange,
handleChange1,
beforeUpload,
onRangeChange,
classifyList1,
remark,
changeChecked,
changeChecked1,
createProject
};
},
}
};
</script>
<style lang="scss">
@@ -296,6 +390,7 @@ export default {
width: 100%;
display: flex;
justify-content: space-between;
.title {
color: #000000;
font-size: 18px;
@@ -304,10 +399,12 @@ export default {
padding-left: 37px;
//font-weight: 500;
}
.goback {
padding-right: 70px;
//padding-top: 37px;
position: relative;
.return {
display: inline-block;
width: 42px;
@@ -316,6 +413,7 @@ export default {
margin-right: 10px;
background-image: url("../../assets/images/projectadd/return.png");
}
.returntext {
display: inline-block;
position: absolute;
@@ -325,8 +423,10 @@ export default {
}
}
}
.content {
display: flex;
.main {
width: 50%;
display: flex;
@@ -335,12 +435,14 @@ export default {
//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 {
@@ -349,19 +451,23 @@ export default {
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%;
@@ -371,6 +477,7 @@ export default {
margin-top: -5px;
border-top: 2px solid rgba(78, 166, 255, 1);
}
.box2 {
position: absolute;
left: 50%;
@@ -381,35 +488,42 @@ export default {
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%;
@@ -417,20 +531,24 @@ export default {
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;
@@ -441,9 +559,11 @@ export default {
}
}
}
.name2 {
display: flex;
align-items: flex-start;
.ant-input-textarea {
.ant-input {
height: 88px;
@@ -451,6 +571,7 @@ export default {
}
}
}
.template {
width: 50%;
display: flex;
@@ -458,6 +579,7 @@ export default {
align-items: center;
//justify-content: center;
float: right;
.name {
width: 78%;
// background-color: lightcoral;
@@ -465,27 +587,32 @@ export default {
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%;
@@ -496,14 +623,17 @@ export default {
}
}
}
.footer {
width: 100%;
margin-top: 31px;
margin-bottom: 14px;
padding-bottom: 20px;
.btn {
display: flex;
justify-content: center;
.btn1 {
display: flex;
justify-content: center;
@@ -512,9 +642,10 @@ export default {
height: 40px;
border-radius: 8px;
background: #409EFF;
color:#FFFFFF;
color: #FFFFFF;
margin-right: 14px;
}
.btn2 {
display: flex;
justify-content: center;
@@ -524,9 +655,10 @@ export default {
border-radius: 8px;
border: 1px solid #409EFF;
background: #FFFFFF;
color:#409EFF;
color: #409EFF;
}
}
.text {
color: rgba(153, 155, 163, 1);
font-size: 14px;