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

feat:合并

Browse Source
This commit is contained in:
lixg
2023-02-25 22:28:45 +08:00
parent 145c8e6acb
commit e3437adf0a
1 changed files with 106 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
src/views/projectcenter/templateAdd.vue
View File

@@ -4,10 +4,10 @@
<div class="header"> <div class="header">
<span class="title">创建/编辑单层模板</span> <span class="title">创建/编辑单层模板</span>
<div <div
@click="backPage" @click="backPage"
style="cursor: pointer" style="cursor: pointer"
to="/libraryAdd" to="/libraryAdd"
class="goback" class="goback"
> >
<span class="return"></span><span class="returntext">返回</span> <span class="return"></span><span class="returntext">返回</span>
</div> </div>
@@ -17,32 +17,32 @@
<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-input <a-input
v-model:value="projectInfo.name" v-model:value="projectInfo.name"
placeholder="请输入模板名称" placeholder="请输入模板名称"
show-count show-count
:maxlength="30" :maxlength="30"
/> />
</div> </div>
</div> </div>
<div class="name" style="align-items: flex-start"> <div class="name" style="align-items: flex-start">
<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">封面图</div> <div class="inname">封面图</div>
</div> </div>
<div class="in select" style="display: flex"> <div class="in select" style="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;
@@ -50,19 +50,19 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
" "
v-for="(src, index) in projectPic" v-for="(src, index) in projectPic"
: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>
@@ -70,64 +70,65 @@
<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
:show-time="{ format: 'HH:mm' }" :show-time="{ format: 'HH:mm' }"
:disabled-date="disabledDate" :disabled-time="disabledRangeTime" :disabled-date="disabledDate"
separator="至" :disabled-time="disabledRangeTime"
:placeholder="[' 开始时间', ' 结束时间']" separator="至"
v-model:value="projectInfo.rangeTime" :placeholder="[' 开始时间', ' 结束时间']"
style="width: 100%; height: 40px; border-radius: 5px" v-model:value="projectInfo.rangeTime"
valueFormat="YYYY-MM-DD HH:mm" style="width: 100%; height: 40px; border-radius: 5px"
@change="timeChange" valueFormat="YYYY-MM-DD HH:mm"
@change="timeChange"
/> />
</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>
@@ -138,8 +139,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>
@@ -150,8 +151,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">是否BOEU实施</div> <div class="inname">是否BOEU实施</div>
</div> </div>
@@ -168,32 +169,28 @@
</div> </div>
<div class="in ggysxz" v-if="courseSyncFlag"> <div class="in ggysxz" v-if="courseSyncFlag">
<!-- :disabled="viewDetail ? true : false" --> <!-- :disabled="viewDetail ? true : false" -->
<a-checkbox <a-checkbox disabled v-model:checked="courseSyncFlag"
disabled ><span
v-model:checked="courseSyncFlag"
><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;
" "
>同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span >同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span
></a-checkbox ></a-checkbox
> >
</div> </div>
<div class="in" v-else> <div class="in" v-else>
<!-- :disabled="viewDetail ? true : false" --> <!-- :disabled="viewDetail ? true : false" -->
<a-checkbox <a-checkbox disabled v-model:checked="courseSyncFlag"
disabled ><span
v-model:checked="courseSyncFlag"
><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;
" "
>同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span >同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span
></a-checkbox ></a-checkbox
> >
</div> </div>
</div> </div>
@@ -203,11 +200,11 @@
</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"
/> />
</div> </div>
</div> </div>
@@ -216,7 +213,7 @@
<div class="footer"> <div class="footer">
<div class="btn"> <div class="btn">
<a-button v-on:click="createProject" type="primary" class="btn1" <a-button v-on:click="createProject" type="primary" class="btn1"
>确定 >确定
</a-button> </a-button>
<a-button @click="backPage" class="btn2">取消</a-button> <a-button @click="backPage" class="btn2">取消</a-button>
</div> </div>
@@ -224,10 +221,10 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import {useStore} from "vuex"; import { useStore } from "vuex";
import {ref, onMounted, watch} from "vue"; import { ref, onMounted, watch } from "vue";
import {message} from "ant-design-vue"; import { message } from "ant-design-vue";
import {useRouter, useRoute} from "vue-router"; import { useRouter, useRoute } from "vue-router";
import * as api from "../../api/indexTemplate"; import * as api from "../../api/indexTemplate";
import TrainClass from "@/components/project/TrainClass"; import TrainClass from "@/components/project/TrainClass";
import OrgClass from "@/components/project/OrgClass"; import OrgClass from "@/components/project/OrgClass";
@@ -239,31 +236,33 @@ const router = useRouter();
const store = useStore(); const store = useStore();
const projectInfo = ref({}); const projectInfo = ref({});
const projectPic = ref([]); const projectPic = ref([]);
const courseSyncFlag = ref(true) const courseSyncFlag = ref(true);
onMounted(() => { onMounted(() => {
getDetail(); getDetail();
projectPic.value = store.state.projectPic.map((e) => ({ projectPic.value = store.state.project_pic.map((e) => ({
value: e.dictValue, value: e.dictValue,
label: e.dictName, label: e.dictName,
})); }));
}); });
watch( watch(
() => route.query.projectTemplateId, () => route.query.projectTemplateId,
() => { () => {
getDetail(); getDetail();
} }
); );
const getDetail = () => const getDetail = () =>
route.query.projectTemplateId && route.query.projectTemplateId &&
api.templateDetail(route.query.projectTemplateId).then((res) => { api.templateDetail(route.query.projectTemplateId).then((res) => {
projectInfo.value = res.data.data.projectTemplateInfo; projectInfo.value = res.data.data.projectTemplateInfo;
projectInfo.value.rangeTime = [dayjs(projectInfo.value.beginTime).format("YYYY-MM-DD HH:mm"), projectInfo.value.rangeTime = [
dayjs(projectInfo.value.endTime).format("YYYY-MM-DD HH:mm"), dayjs(projectInfo.value.beginTime).format("YYYY-MM-DD HH:mm"),
]; dayjs(projectInfo.value.endTime).format("YYYY-MM-DD HH:mm"),
projectInfo.value.courseSyncFlag = !!projectInfo.value.courseSyncFlag ];
}); projectInfo.value.courseSyncFlag = !!projectInfo.value.courseSyncFlag;
console.log("projectInfo", projectInfo);
});
const backPage = () => { const backPage = () => {
router.back(); router.back();
@@ -271,8 +270,8 @@ const backPage = () => {
function timeChange(e) { function timeChange(e) {
if (e && e.length === 2) { if (e && e.length === 2) {
projectInfo.value.beginTime = dayjs(e[0]).format("YYYY-MM-DD HH:mm"), (projectInfo.value.beginTime = dayjs(e[0]).format("YYYY-MM-DD HH:mm")),
projectInfo.value.endTime =dayjs(e[1]).format("YYYY-MM-DD HH:mm") (projectInfo.value.endTime = dayjs(e[1]).format("YYYY-MM-DD HH:mm"));
} }
} }
@@ -299,34 +298,38 @@ const createProject = () => {
} }
} }
projectInfo.value.courseSyncFlag = courseSyncFlag.value ? 1 : 0; projectInfo.value.courseSyncFlag = courseSyncFlag.value ? 1 : 0;
projectInfo.value.beginTime = dayjs(projectInfo.value.beginTime).format("YYYY-MM-DD HH:mm"), (projectInfo.value.beginTime = dayjs(projectInfo.value.beginTime).format(
projectInfo.value.endTime =dayjs(projectInfo.value.endTime).format("YYYY-MM-DD HH:mm") "YYYY-MM-DD HH:mm"
)),
(projectInfo.value.endTime = dayjs(projectInfo.value.endTime).format(
"YYYY-MM-DD HH:mm"
));
api api
.templateEdit({ .templateEdit({
...projectInfo.value, ...projectInfo.value,
courseSyncFlag: projectInfo.value.courseSyncFlag ? 1 : 0, courseSyncFlag: projectInfo.value.courseSyncFlag ? 1 : 0,
}) })
.then(() => { .then(() => {
message.destroy(); message.destroy();
message.success("编辑成功"); message.success("编辑成功");
router.back(); router.back();
}); });
}; };
function managerChange(e, l, d, t,orgName) { function managerChange(e, l, d, t, orgName) {
console.log(e, l) console.log(e, l);
projectInfo.value.sourceBelongId = d; projectInfo.value.sourceBelongId = d;
projectInfo.value.sourceBelongName = t; projectInfo.value.sourceBelongName = t;
projectInfo.value.sourceBelongFullName = orgName projectInfo.value.sourceBelongFullName = orgName;
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.ggysxz { .ggysxz {
.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after { .ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after {
border-color: #FFF !important; border-color: #fff !important;
} }
.ant-checkbox-disabled .ant-checkbox-inner { .ant-checkbox-disabled .ant-checkbox-inner {
background-color: #1890ff !important; background-color: #1890ff !important;
} }
} }