fix:修改路径编辑回显

This commit is contained in:
lixg
2022-12-02 15:07:19 +08:00
parent be71d6b9fe
commit 90051c0e62
5 changed files with 161 additions and 119 deletions

View File

@@ -1,27 +1,27 @@
<template>
<div id="container" v-if="!isLogin">
<nav-top/>
<nav-top />
<div style="display: flex">
<nav-left/>
<nav-left />
<div style="flex: 1; display: flex; flex-direction: column; width: 0">
<open-pages/>
<bread-crumb/>
<open-pages />
<bread-crumb />
<main>
<a-config-provider :locale="zhCN">
<router-view/>
<router-view />
</a-config-provider>
</main>
</div>
</div>
</div>
<div id="container" v-if="isLogin">
<router-view/>
<router-view />
</div>
</template>
<script>
import {computed, defineComponent, ref, watch} from "vue";
import {useRouter, useRoute} from "vue-router";
import {useStore} from "vuex";
import { computed, defineComponent, ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import NavLeft from "@/components/NavLeft";
import NavTop from "@/components/NavTop";
import OpenPages from "@/components/OpenPages";
@@ -49,45 +49,48 @@ export default defineComponent({
});
watch(
() => route.path,
() => {
route.path === "/login" && (isLogin.value = true);
}
() => route.path,
() => {
route.path === "/login" && (isLogin.value = true);
}
);
const currentRouteName = computed(() => route.name);
function init() {
console.log(store)
initDict('faceclassPic')
initDict('faceclassClass')
initDict('faceclassScene')
initDict('projectLevel')
initDict('projectSys')
getOrgTree()
console.log(store);
initDict("faceclassPic");
initDict("faceclassClass");
initDict("faceclassScene");
initDict("projectLevel");
initDict("projectSys");
initDict("pathmapPic");
getOrgTree();
}
async function initDict(key) {
let list = localStorage.getItem(key)
let list = localStorage.getItem(key);
if (list) {
store.commit('SET_DICT', {key, data:JSON.parse(list)});
store.commit("SET_DICT", { key, data: JSON.parse(list) });
return;
}
list = await getDictList(key)
list = await getDictList(key);
localStorage.setItem(key, JSON.stringify(list));
store.commit('SET_DICT', {key, data:list});
store.commit("SET_DICT", { key, data: list });
}
const getDictList = (param) => api1.getDict({
pageNo: 1,
pageSize: 20,
setCode: param
}).then((res) => res.data.data.rows)
const getDictList = (param) =>
api1
.getDict({
pageNo: 1,
pageSize: 20,
setCode: param,
})
.then((res) => res.data.data.rows);
//获取组织树
const getOrgTree = () => {
const orgtreeList = localStorage.getItem("orgtreeList")
const orgtreeList = localStorage.getItem("orgtreeList");
if (orgtreeList) {
store.commit("getOrgtreeList", JSON.parse(orgtreeList));
return;
@@ -98,18 +101,19 @@ export default defineComponent({
pageNo: 1,
pageSize: 20,
};
api.getOrgInfo(obj)
.then((res) => {
console.log("组织树获取成功", res);
if (res.data.code === 200) {
// state.treeData = res.data.data;
localStorage.setItem("orgtreeList", JSON.stringify(res.data.data));
store.commit("getOrgtreeList", res.data.data);
}
})
.catch((err) => {
console.log("组织树获取失败", err);
});
api
.getOrgInfo(obj)
.then((res) => {
console.log("组织树获取成功", res);
if (res.data.code === 200) {
// state.treeData = res.data.data;
localStorage.setItem("orgtreeList", JSON.stringify(res.data.data));
store.commit("getOrgtreeList", res.data.data);
}
})
.catch((err) => {
console.log("组织树获取失败", err);
});
};
init();
@@ -128,7 +132,7 @@ export default defineComponent({
// font-family: MicrosoftYaHei, Microsoft YaHei, Avenir, Helvetica, Arial,
// sans-serif;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
Microsoft YaHei, Arial, sans-serif;
Microsoft YaHei, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;

View File

@@ -2,7 +2,7 @@
* @Author: lixg lixg@dongwu-inc.com
* @Date: 2022-11-09 09:26:26
* @LastEditors: lixg lixg@dongwu-inc.com
* @LastEditTime: 2022-11-26 20:20:03
* @LastEditTime: 2022-12-02 14:09:43
* @FilePath: /fe-manage/src/store/index.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@@ -29,6 +29,7 @@ export default createStore({
faceclassScene: [],
projectLevel: [],//项目级别
projectSys: [],//培训分类
pathmapPic: [],//学习路径背景图
},
getters: {},
mutations: {
@@ -50,7 +51,7 @@ export default createStore({
getOrgtreeList(state, data) {
state.orgtreeList = data
},
SET_DICT(state,{key,data}){
SET_DICT(state, { key, data }) {
state[key] = data
},
SET_projectTemplateId(state, projectTemplateId) {

View File

@@ -867,7 +867,7 @@ export default {
state.editPathId = null;
};
const chooseImg = (item) => {
// console.log(item);
console.log(item);
state.pathBgId = item.dictCode;
state.pathBg = item.dictValue;
};
@@ -1148,7 +1148,7 @@ export default {
onClick={() => {
// console.log("text.record", text.record);
getLearnPathInfo(text.record);
getLearnPathInfo(text.record.id);
}}
>
编辑
@@ -1409,8 +1409,8 @@ export default {
};
const selectorganization = (e, v) => {
console.log("eee", e, v);
state.organizationSelectName = e;
state.organizationSelectId = v.id;
state.organizationSelectName = v[0];
state.organizationSelectId = e;
};
//创建学习路径图
const createLearnPath = () => {
@@ -1429,37 +1429,42 @@ export default {
state.lpLoading = true;
let obj = {
name: state.pathName,
picUrl: "",
remark: state.pathIntro,
status: 0,
organizationId: state.organizationSelectId,
organizationName: state.organizationSelectName,
picUrl: state.pathBg,
};
api
.createLearnPath(obj)
.then((res) => {
let chapterObj = {
name: "关卡一",
remark: "",
routerId: res.data.data.routerId,
};
//创建关卡
api
.editChapter(chapterObj)
.then((chapterRes) => {
console.log("关卡创建成功", chapterRes);
setTimeout(() => {
console.log("创建成功", res);
message.destroy();
message.success("创建成功");
state.lpLoading = false;
state.currentPage = 1;
router.push("/leveladd");
storage.set("routerId", res.data.data.routerId);
// getLearnPath();
}, commonData.timeout);
})
.catch((chapterErr) => {
console.log("关卡创建失败", chapterErr);
});
console.log("创建学习路径成功", res);
if (res.data.code === 200) {
let chapterObj = {
name: "关卡一",
remark: "",
routerId: res.data.data.routerId,
};
//创建关卡
api
.editChapter(chapterObj)
.then((chapterRes) => {
console.log("关卡创建成功", chapterRes);
setTimeout(() => {
console.log("创建成功", res);
message.destroy();
message.success("创建成功");
state.lpLoading = false;
state.currentPage = 1;
router.push("/leveladd");
storage.set("routerId", res.data.data.routerId);
// getLearnPath();
}, commonData.timeout);
})
.catch((chapterErr) => {
console.log("关卡创建失败", chapterErr);
});
}
})
.catch((err) => {
console.log("创建失败", err);
@@ -1525,23 +1530,36 @@ export default {
};
//获取路径图详细信息
const getLearnPathInfo = (item) => {
console.log("item", item);
const getLearnPathInfo = (id) => {
// console.log("编辑学习路径图id", id);
//获取学习路径详情
api
.getRouterDetail(id)
.then((res) => {
if (res.data.code === 200) {
let detail = res.data.data.routerInfo;
// console.log("获取详情成功", detail);
state.pathName = detail.name;
state.pathBg = detail.picUrl;
state.pathBgId = "";
state.organizationSelectName = detail.organizationName;
state.organizationSelectId = detail.organizationId;
state.pathIntro = detail.remark;
state.editPathId = id;
// console.log("state.imgData", state.imgData);
let arr = state.imgData;
for (let i = 0; i < arr.length; i++) {
// console.log("arr[i].dictValue", arr[i].dictValue, state.pathBg);
if (arr[i].dictValue === state.pathBg) {
state.pathBgId = arr[i].dictCode;
}
}
}
})
.catch((err) => {
console.log("获取详情失败", err);
});
state.out1 = true;
state.pathName = item.manager;
state.pathBg = "";
state.pathBgId = "";
state.organizationSelectName = null;
state.organizationSelectId = null;
state.pathIntro = item.remark;
state.editPathId = item.id;
console.log("state.imgData", state.imgData);
let arr = state.imgData;
for (let i = 0; i < arr.length; i++) {
if (arr[i].dictCode === state.pathBgId) {
state.pathBgId = arr[i].dictValue;
}
}
};
//编辑学习路径图
const editLearnPath = () => {
@@ -1557,12 +1575,21 @@ export default {
message.destroy();
return message.warning("请选择背景图");
}
// state.pathName = detail.name;
// state.pathBg = detail.picUrl;
// state.pathBgId = "";
// state.organizationSelectName = detail.organizationName;
// state.organizationSelectId = detail.organizationId;
// state.pathIntro = detail.remark;
// state.editPathId = id;
// state.createLoading = true;
let obj = {
routerId: state.editPathId,
name: state.pathName,
picUrl: "",
picUrl: state.pathBg,
remark: state.pathIntro,
organizationName: state.organizationSelectName,
organizationId: state.organizationSelectId,
status: 0,
};
api
@@ -1642,30 +1669,30 @@ export default {
// }
// choiceEvaluation()
//字典获取路径图背景
const getDictList = (param) => {
let obj = {
pageNo: 1,
pageSize: 20,
setCode: param,
};
api
.getDict(obj)
.then((res) => {
console.log("获取字典成功", res);
if (res.status === 200) {
if (param === "pathmapPic") {
if (res.data.data.rows.length > 0) {
state.imgData = [res.data.data.rows[0]];
}
}
}
})
.catch((err) => {
console.log("获取字典失败", err);
});
};
getDictList("pathmapPic");
// //字典获取路径图背景
// const getDictList = (param) => {
// let obj = {
// pageNo: 1,
// pageSize: 20,
// setCode: param,
// };
// api
// .getDict(obj)
// .then((res) => {
// console.log("获取字典成功", res);
// if (res.status === 200) {
// if (param === "pathmapPic") {
// if (res.data.data.rows.length > 0) {
// state.imgData = [res.data.data.rows[0]];
// }
// }
// }
// })
// .catch((err) => {
// console.log("获取字典失败", err);
// });
// };
// getDictList("pathmapPic");
//显示更多路径背景弹窗
const showLearnBgMore = () => {
state.learnBgMore = true;
@@ -1677,6 +1704,10 @@ export default {
onMounted(() => {
// console.log("执行");
getLearnPath();
if (store.state.pathmapPic.length > 0) {
console.log("store.state.pathmapPic", store.state.pathmapPic);
state.imgData = [store.state.pathmapPic[0]];
}
});
//添加权限
watch(

View File

@@ -3,7 +3,7 @@
<div class="addhead">
<div class="leftimg">
<!-- <img class="img" :src="picUrl" /> -->
<img class="img" src="../../assets/images/leveladd/1.png" />
<img class="img" :src="picUrl" />
</div>
<div class="imgfor">
<div class="forz">{{ styTitle }}</div>
@@ -1855,6 +1855,7 @@ export default {
};
const reget = () => {
GetRouterDetail(state.routerId).then((res) => {
// console.log("获取路径图详情", res);
state.styTitle = res.data.data.routerInfo.name;
state.cretime = toDate(
res.data.data.routerInfo.createTime / 1000,

View File

@@ -174,7 +174,7 @@
<div class="filt">
<div class="le">
<div class="leftimg">
<img class="img" src="../../assets/images/leveladd/1.png" />
<img class="img" :src="picUrl" />
</div>
<div class="imgfor">
<div class="forz">{{ styTitle }}</div>
@@ -964,7 +964,7 @@
<div class="header">
<div class="inhe">
<div class="mod"></div>
<div class="tz">选择任务移动到阶段</div>
<div class="tz">选择任务移动到关卡</div>
</div>
</div>
<div class="mid">
@@ -1201,6 +1201,8 @@ export default {
unlockModeVisible: false, //切换模式抽屉
chooseProjectList: null, //选择的阶段下的任务列表
curLevel: null, //选择移动到的关卡名称
});
const showModal = (element) => {
@@ -1755,6 +1757,7 @@ export default {
console.log("移动失败", err);
});
state.visiblene = false;
state.curLevel = null;
}
};
//编辑的按钮
@@ -1825,10 +1828,12 @@ export default {
};
const closeChangeModal = () => {
state.visiblene = false;
state.curLevel = null;
};
const handleChangeStage = (value, option) => {
console.log("阶段改变", value, option);
state.removeStageId = option.chapterId;
state.curLevel = option.name;
};
//显示切换模式抽屉