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

feat:修改项目封面图

Browse Source
This commit is contained in:
lixg
2023-02-23 11:41:18 +08:00
parent 255400dce2
commit a79efcec01
1 changed files with 162 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,15 +3,14 @@
<div class="projectAdd"> <div class="projectAdd">
<div class="header"> <div class="header">
<span class="title" <span class="title"
>{{ >{{ projectInfo.id ? "编辑" : "创建"
projectInfo.id ? "编辑" : "创建"
}}{{ ptojectType == "3" ? "班级" : "项目" }}</span }}{{ ptojectType == "3" ? "班级" : "项目" }}</span
> >
<div <div
@click="backPage" @click="backPage"
style="cursor: pointer" style="cursor: pointer"
to="/projectmanage" to="/projectmanage"
class="goback" class="goback"
> >
<span class="return"></span><span class="returntext">返回</span> <span class="return"></span><span class="returntext">返回</span>
</div> </div>
@@ -21,8 +20,8 @@
<div class="name" v-if="projectInfo.parentName"> <div class="name" v-if="projectInfo.parentName">
<div class="namebox"> <div class="namebox">
<img <img
class="nameimg" class="nameimg"
src="../../assets/images/basicinfo/asterisk.png" src="../../assets/images/basicinfo/asterisk.png"
/> />
<div class="inname">项目归属</div> <div class="inname">项目归属</div>
</div> </div>
@@ -35,8 +34,8 @@
<div class="name"> <div class="name">
<div class="namebox"> <div class="namebox">
<img <img
class="nameimg" class="nameimg"
src="../../assets/images/basicinfo/asterisk.png" src="../../assets/images/basicinfo/asterisk.png"
/> />
<div class="inname"> <div class="inname">
{{ ptojectType == 3 ? "班级名称" : "项目名称" }} {{ ptojectType == 3 ? "班级名称" : "项目名称" }}
@@ -44,27 +43,27 @@
</div> </div>
<div class="in"> <div class="in">
<NameInput <NameInput
placeholder="请输入项目名称" placeholder="请输入项目名称"
v-model:value="projectInfo.name" v-model:value="projectInfo.name"
v-model:validate="projectInfo.validate" v-model:validate="projectInfo.validate"
:maxlength="30" :maxlength="30"
show-count show-count
:id="projectInfo.id" :id="projectInfo.id"
></NameInput> ></NameInput>
</div> </div>
</div> </div>
<div class="name flex-top"> <div class="name flex-top">
<div class="namebox" style="margin-top: 10px"> <div class="namebox" style="margin-top: 10px">
<img <img
class="nameimg" class="nameimg"
src="../../assets/images/basicinfo/asterisk.png" src="../../assets/images/basicinfo/asterisk.png"
/> />
<div class="inname">封面图2</div> <div class="inname">封面图</div>
</div> </div>
<div class="in select" style="flex: 1; display: flex"> <div class="in select" style="flex: 1; display: flex">
<div <div
:class="`box ${projectInfo.picUrl === src.value ? 'active' : ''}`" :class="`box ${projectInfo.picUrl === src.value ? 'active' : ''}`"
style=" style="
width: 100px; width: 100px;
height: 100px; height: 100px;
border-radius: 5px; border-radius: 5px;
@@ -72,114 +71,115 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
" "
v-for="(src, index) in projectPic" v-for="(src, index) in projectPic"
:style="{ :style="{
display: index >= 3 ? 'none' : 'flex', display: index >= 3 ? 'none' : 'flex',
}" }"
:key="index" :key="index"
@click="() => (projectInfo.picUrl = src.value)" @click="() => (projectInfo.picUrl = src.value)"
> >
<img <img
style=" style="
width: 100px; width: 100px;
height: 100px; height: 100px;
margin-bottom: 4px; margin-bottom: 4px;
margin-right: 4px; margin-right: 4px;
" "
:src="src.value" :src="src.value"
alt="avatar" alt="avatar"
/> />
</div> </div>
<div <div
@click="showLearnBgMore" @click="showLearnBgMore"
v-if="projectPic.length > 3" v-if="projectPic.length > 3"
style=" style="
width: 100px; width: 100px;
height: 100px; height: 100px;
padding-left: 15px; padding-left: 15px;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid #c7cbd2; border: 1px solid #c7cbd2;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #4ea6ff; color: #4ea6ff;
line-height: 36px; line-height: 36px;
" "
> >
查看更多 <img src="../../assets/images/projectadd/go.png" alt=""/> 查看更多
<img src="../../assets/images/projectadd/go.png" alt="" />
</div> </div>
</div> </div>
</div> </div>
<div class="name"> <div class="name">
<div class="namebox"> <div class="namebox">
<img <img
class="nameimg" class="nameimg"
src="../../assets/images/basicinfo/asterisk.png" src="../../assets/images/basicinfo/asterisk.png"
/> />
<div class="inname">项目时间</div> <div class="inname">项目时间</div>
</div> </div>
<div class="in"> <div class="in">
<a-range-picker <a-range-picker
separator="至" separator="至"
:show-time="{ format: 'HH:mm' }" :show-time="{ format: 'HH:mm' }"
:placeholder="[' 开始时间', ' 结束时间']" :placeholder="[' 开始时间', ' 结束时间']"
:disabledDate="disabledDate" :disabledDate="disabledDate"
v-model:value="timeRange" v-model:value="timeRange"
@calendarChange="calendarChange" @calendarChange="calendarChange"
style="width: 100%; height: 40px; border-radius: 5px" style="width: 100%; height: 40px; border-radius: 5px"
:allowClear="false" :allowClear="false"
format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm"
valueFormat="YYYY-MM-DD HH:mm" valueFormat="YYYY-MM-DD HH:mm"
@change="timeChange" @change="timeChange"
:disabled="!!viewDetail" :disabled="!!viewDetail"
/> />
</div> </div>
</div> </div>
<div class="name"> <div class="name">
<div class="namebox"> <div class="namebox">
<img <img
class="nameimg" class="nameimg"
src="../../assets/images/basicinfo/asterisk.png" src="../../assets/images/basicinfo/asterisk.png"
/> />
<div class="inname">项目经理</div> <div class="inname">项目经理</div>
</div> </div>
<div class="in"> <div class="in">
<ProjectManager <ProjectManager
v-model:value="projectInfo.managerId" v-model:value="projectInfo.managerId"
v-model:name="projectInfo.manager" v-model:name="projectInfo.manager"
@onChange="managerChange" @onChange="managerChange"
mode="multiple" mode="multiple"
></ProjectManager> ></ProjectManager>
</div> </div>
</div> </div>
<div class="name"> <div class="name">
<div class="namebox"> <div class="namebox">
<img <img
class="nameimg" class="nameimg"
src="../../assets/images/basicinfo/asterisk.png" src="../../assets/images/basicinfo/asterisk.png"
/> />
<div class="inname">资源归属</div> <div class="inname">资源归属</div>
</div> </div>
<div class="in select"> <div class="in select">
<OrgClass <OrgClass
v-model:value="projectInfo.sourceBelongId" v-model:value="projectInfo.sourceBelongId"
v-model:name="projectInfo.sourceBelongName" v-model:name="projectInfo.sourceBelongName"
v-model:fullName="projectInfo.sourceBelongFullName" v-model:fullName="projectInfo.sourceBelongFullName"
></OrgClass> ></OrgClass>
</div> </div>
</div> </div>
<div class="name"> <div class="name">
<div class="namebox"> <div class="namebox">
<img <img
class="nameimg" class="nameimg"
src="../../assets/images/basicinfo/asterisk.png" src="../../assets/images/basicinfo/asterisk.png"
/> />
<div class="inname">项目级别</div> <div class="inname">项目级别</div>
</div> </div>
@@ -190,8 +190,8 @@
<div class="name"> <div class="name">
<div class="namebox"> <div class="namebox">
<img <img
class="nameimg" class="nameimg"
src="../../assets/images/basicinfo/asterisk.png" src="../../assets/images/basicinfo/asterisk.png"
/> />
<div class="inname">培训分类</div> <div class="inname">培训分类</div>
</div> </div>
@@ -202,15 +202,15 @@
<div class="name"> <div class="name">
<div class="namebox"> <div class="namebox">
<img <img
class="nameimg" class="nameimg"
src="../../assets/images/basicinfo/asterisk.png" src="../../assets/images/basicinfo/asterisk.png"
/> />
<div class="inname">是否BOEU实施</div> <div class="inname">是否BOEU实施</div>
</div> </div>
<div class="in"> <div class="in">
<a-radio-group <a-radio-group
v-model:value="projectInfo.boeFlag" v-model:value="projectInfo.boeFlag"
:disabled="viewDetail ? true : false" :disabled="viewDetail ? true : false"
> >
<a-radio :style="radioStyle" :value="1">是</a-radio> <a-radio :style="radioStyle" :value="1">是</a-radio>
<a-radio :style="radioStyle" :value="0">否</a-radio> <a-radio :style="radioStyle" :value="0">否</a-radio>
@@ -225,7 +225,7 @@
<!-- :disabled="viewDetail ? true : false" --> <!-- :disabled="viewDetail ? true : false" -->
<a-checkbox v-model:checked="courseSyncFlag" disabled> <a-checkbox v-model:checked="courseSyncFlag" disabled>
<span <span
style=" style="
width: 100%; width: 100%;
color: rgba(109, 117, 132, 1); color: rgba(109, 117, 132, 1);
font-size: 14px; font-size: 14px;
@@ -239,7 +239,7 @@
<!-- :disabled="viewDetail ? true : false" --> <!-- :disabled="viewDetail ? true : false" -->
<a-checkbox v-model:checked="courseSyncFlag" disabled> <a-checkbox v-model:checked="courseSyncFlag" disabled>
<span <span
style=" style="
width: 100%; width: 100%;
color: rgba(109, 117, 132, 1); color: rgba(109, 117, 132, 1);
font-size: 14px; font-size: 14px;
@@ -256,12 +256,12 @@
</div> </div>
<div class="in"> <div class="in">
<a-textarea <a-textarea
v-model:value="projectInfo.remark" v-model:value="projectInfo.remark"
style="height: 80px" style="height: 80px"
placeholder="请输入说明" placeholder="请输入说明"
show-count show-count
:maxlength="200" :maxlength="200"
:disabled="viewDetail ? true : false" :disabled="viewDetail ? true : false"
/> />
</div> </div>
</div> </div>
@@ -280,13 +280,15 @@
<div class="inname" style="width: 50px">模版</div> <div class="inname" style="width: 50px">模版</div>
<div class="in select" style="margin-left: 2px"> <div class="in select" style="margin-left: 2px">
<a-select <a-select
:getPopupContainer="triggerNode => (triggerNode.parentNode || document.body)" :getPopupContainer="
placeholder="请选择模版" (triggerNode) => triggerNode.parentNode || document.body
style="width: 100%" "
:options="classifyList5" placeholder="请选择模版"
@change="classificationChange5" style="width: 100%"
@popupScroll="templateScroll" :options="classifyList5"
:fieldNames="{ @change="classificationChange5"
@popupScroll="templateScroll"
:fieldNames="{
label: 'name', label: 'name',
value: 'id', value: 'id',
}" }"
@@ -300,24 +302,24 @@
<div class="btn"> <div class="btn">
<a-button @click="backPage" class="btn2">取消</a-button> <a-button @click="backPage" class="btn2">取消</a-button>
<a-button <a-button
:loading="loading" :loading="loading"
v-on:click="createProject" v-on:click="createProject"
type="primary" type="primary"
class="btn1" class="btn1"
style="margin-left: 20px" style="margin-left: 20px"
>确定 >确定
</a-button> </a-button>
</div> </div>
</div> </div>
<!-- 更多背景图 v-model:visible="learnBgMore" --> <!-- 更多背景图 v-model:visible="learnBgMore" -->
<a-modal <a-modal
:closable="sh" :closable="sh"
centered="true" centered="true"
v-model:visible="learnBgMore" v-model:visible="learnBgMore"
:footer="null" :footer="null"
:width="650" :width="650"
wrapClassName="learnBgMoreModal" wrapClassName="learnBgMoreModal"
:z-index="9999" :z-index="9999"
> >
<div class="main"> <div class="main">
<div class="top"> <div class="top">
@@ -331,18 +333,18 @@
class="learnBgItem" class="learnBgItem"
> --> > -->
<div <div
@click="chooseImg2(item)" @click="chooseImg2(item)"
v-for="item in projectPic" v-for="item in projectPic"
:key="item.code" :key="item.code"
class="learnBgItem" class="learnBgItem"
:style="{ :style="{
border: border:
pathBgId === item.code projectInfo.picUrl === item.value
? '2px solid rgba(78, 166, 255, 1)' ? '3px solid rgba(78, 166, 255, 1)'
: '1px solid #ccc', : '1px solid #ccc',
'background-image': 'url(' + item.value.split(',')[0] + ')', 'background-image': 'url(' + item.value.split(',')[0] + ')',
}" }"
> >
<!-- <img class="im" :src="item.source" /> --> <!-- <img class="im" :src="item.source" /> -->
</div> </div>
</div> </div>
@@ -355,20 +357,20 @@
</div> </div>
</template> </template>
<script> <script>
import {onMounted, reactive, toRefs, watch} from "vue"; import { onMounted, reactive, toRefs, watch } from "vue";
import {message} from "ant-design-vue"; import { message } from "ant-design-vue";
import {useRoute, useRouter} from "vue-router"; import { useRoute, useRouter } from "vue-router";
import * as api from "../../api/index"; import * as api from "../../api/index";
import {useStore} from "vuex"; import { useStore } from "vuex";
import TrainClass from "@/components/project/TrainClass"; import TrainClass from "@/components/project/TrainClass";
import OrgClass from "@/components/project/OrgClass"; import OrgClass from "@/components/project/OrgClass";
import ProjectManager from "@/components/project/ProjectManagerNew"; import ProjectManager from "@/components/project/ProjectManagerNew";
import NameInput from "@/components/project/NameInput"; import NameInput from "@/components/project/NameInput";
import ProjectLevel from "@/components/project/ProjectLevel"; import ProjectLevel from "@/components/project/ProjectLevel";
import * as api2 from "../../api/indexAudit"; import * as api2 from "../../api/indexAudit";
import {validateName} from "@/api/index1"; import { validateName } from "@/api/index1";
import dayjs from "dayjs"; import dayjs from "dayjs";
import {scrollLoad} from "@/api/method"; import { scrollLoad } from "@/api/method";
export default { export default {
name: "projectAdd", name: "projectAdd",
@@ -385,14 +387,14 @@ export default {
const routers = useRoute(); const routers = useRoute();
const router = useRouter(); const router = useRouter();
const state = reactive({ const state = reactive({
datePartial: 'start', datePartial: "start",
loading: false, loading: false,
currentPage: 1, //当前页 currentPage: 1, //当前页
tableDataTotal: -1, //模版列表总数 tableDataTotal: -1, //模版列表总数
pageSize: 10, //每页10条数据 pageSize: 10, //每页10条数据
totalPages: 0, //总页数 totalPages: 0, //总页数
viewDetail: null, viewDetail: null,
projectInfo: {id: ''}, projectInfo: { id: "" },
projectPic: [], projectPic: [],
memberParam: { memberParam: {
pageNo: 1, pageNo: 1,
@@ -406,7 +408,8 @@ export default {
changeCondition: false, changeCondition: false,
clickNum: 0, clickNum: 0,
timeRange: [], timeRange: [],
learnBgMore: false learnBgMore: false,
pathBgId: null,
}); });
// 封面图选择 // 封面图选择
@@ -416,6 +419,7 @@ export default {
}; };
onMounted(() => { onMounted(() => {
state.projectPic = store.state.project_pic.map((e) => ({ state.projectPic = store.state.project_pic.map((e) => ({
code: e.id,
value: e.value, value: e.value,
label: e.name, label: e.name,
})); }));
@@ -423,7 +427,7 @@ export default {
getProjectInfo(); getProjectInfo();
getTemplate(); getTemplate();
state.ptojectType = routers.query.ptojectType; state.ptojectType = routers.query.ptojectType;
// console.log("routers.query.ptojectType", routers.query.ptojectType); console.log("获取封面图", state.projectPic);
}); });
watch(routers.query, () => { watch(routers.query, () => {
@@ -437,10 +441,9 @@ export default {
state.projectInfo.parentId = routers.query.parentId; state.projectInfo.parentId = routers.query.parentId;
state.projectInfo.id = routers.query.projectId; state.projectInfo.id = routers.query.projectId;
(state.projectInfo.id || state.projectInfo.parentId) && (state.projectInfo.id || state.projectInfo.parentId) &&
api api
.getProjectDetail({ .getProjectDetail({
projectId: projectId: state.projectInfo.id || state.projectInfo.parentId,
state.projectInfo.id || state.projectInfo.parentId,
}) })
.then((res) => { .then((res) => {
state.projectInfo = { state.projectInfo = {
@@ -448,9 +451,12 @@ export default {
...state.projectInfo, ...state.projectInfo,
}; };
!routers.query.projectId && !routers.query.projectId &&
!!routers.query.parentId && !!routers.query.parentId &&
(state.projectInfo.name = ""); (state.projectInfo.name = "");
state.timeRange = [state.projectInfo.beginTime, state.projectInfo.endTime]; state.timeRange = [
state.projectInfo.beginTime,
state.projectInfo.endTime,
];
state.courseSyncFlag = !!state.projectInfo.courseSyncFlag; state.courseSyncFlag = !!state.projectInfo.courseSyncFlag;
if (Number(state.projectInfo.status) === -5) { if (Number(state.projectInfo.status) === -5) {
let obj = { let obj = {
@@ -465,8 +471,8 @@ export default {
if (res.rows && res.rows.length > 0) { if (res.rows && res.rows.length > 0) {
let i = res.rows.length; let i = res.rows.length;
state.auditDescription = res.rows[i - 1].description state.auditDescription = res.rows[i - 1].description
? res.rows[i - 1].description ? res.rows[i - 1].description
: "-"; : "-";
} }
} }
}); });
@@ -485,8 +491,8 @@ export default {
const classificationChange5 = (key, option) => { const classificationChange5 = (key, option) => {
state.projectInfo = option; state.projectInfo = option;
state.projectInfo.projectTemplateId = option.id state.projectInfo.projectTemplateId = option.id;
state.projectInfo.id = '' state.projectInfo.id = "";
state.projectInfo.type = 3; state.projectInfo.type = 3;
state.timeRange = [option.beginTime, option.endTime]; state.timeRange = [option.beginTime, option.endTime];
state.projectInfo.parentName = routers.query.parentName; state.projectInfo.parentName = routers.query.parentName;
@@ -581,7 +587,7 @@ export default {
message.success(state.projectInfo.id ? "编辑成功" : "创建成功"); message.success(state.projectInfo.id ? "编辑成功" : "创建成功");
router.push({ router.push({
path: "/taskpage", path: "/taskpage",
query: {projectId: res.data.data}, query: { projectId: res.data.data },
}); });
}); });
}; };
@@ -593,14 +599,16 @@ export default {
state.projectInfo.sourceBelongFullName = orgName; state.projectInfo.sourceBelongFullName = orgName;
} }
const disabledDate = (current) => { const disabledDate = (current) => {
//编辑的时候 开始实际只能选当前时间之前的时间 //编辑的时候 开始实际只能选当前时间之前的时间
if (state.projectInfo.id && state.datePartial === 'start') { if (state.projectInfo.id && state.datePartial === "start") {
return current && current > dayjs(state.timeRange[0]).endOf("YYYY-MM-DD HH:mm"); return (
current &&
current > dayjs(state.timeRange[0]).endOf("YYYY-MM-DD HH:mm")
);
} }
// return current && current < dayjs().endOf('day'); // return current && current < dayjs().endOf('day');
return current && current < dayjs().subtract(1, 'days').endOf('day') return current && current < dayjs().subtract(1, "days").endOf("day");
}; };
//显示更多路径背景弹窗 //显示更多路径背景弹窗
@@ -612,13 +620,14 @@ export default {
state.learnBgMore = false; state.learnBgMore = false;
}; };
function calendarChange(date, dateStr, partial) { function calendarChange(date, dateStr, partial) {
state.datePartial = partial state.datePartial = partial;
} }
const chooseImg2 = (item) => { const chooseImg2 = (item) => {
// console.log(item); // console.log(item);
state.projectInfo.picUrl = item.value;
state.pathBgId = item.code; state.pathBgId = item.code;
state.pathBg = item.value.split(',')[0]; state.pathBg = item.value.split(",")[0];
state.mobilePicUrl = item.value.split(',')[1]; state.mobilePicUrl = item.value.split(",")[1];
}; };
return { return {
@@ -635,7 +644,7 @@ export default {
handleChangeSelect, handleChangeSelect,
showLearnBgMore, showLearnBgMore,
closeLearnBgMore, closeLearnBgMore,
chooseImg2 chooseImg2,
}; };
}, },
}; };
@@ -706,7 +715,7 @@ export default {
} }
.active { .active {
border: 2px solid rgba(78, 166, 255, 1); border: 3px solid rgba(78, 166, 255, 1);
} }
.content { .content {