mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-11 11:56:46 +08:00
feat:增加学习路径及项目发布的统计,增加组织树
This commit is contained in:
lixg
19
src/App.vue
19
src/App.vue
@@ -18,11 +18,13 @@
|
||||
<script>
|
||||
import { computed, defineComponent } 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";
|
||||
import BreadCrumb from "@/components/BreadCrumb";
|
||||
import zhCN from "ant-design-vue/es/locale/zh_CN";
|
||||
import * as api from "./api/index1";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
NavLeft,
|
||||
@@ -33,13 +35,28 @@ export default defineComponent({
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const store = useStore();
|
||||
// console.log("router", router.getRoutes(), route);
|
||||
const routes = computed(() => {
|
||||
return router.getRoutes().filter((e) => e.meta?.isLink);
|
||||
});
|
||||
|
||||
const currentRouteName = computed(() => route.name);
|
||||
|
||||
//获取组织树
|
||||
const orgTree = () => {
|
||||
api
|
||||
.orgtree()
|
||||
.then((res) => {
|
||||
console.log("获取集团组织成功", res);
|
||||
if (res.status === 200) {
|
||||
store.commit("getOrgtreeList", res.data.data);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("获取集团组织失败", err);
|
||||
});
|
||||
};
|
||||
orgTree();
|
||||
return {
|
||||
routes,
|
||||
name: currentRouteName,
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: lixg lixg@dongwu-inc.com
|
||||
* @Date: 2022-11-07 17:06:45
|
||||
* @LastEditors: lixg lixg@dongwu-inc.com
|
||||
* @LastEditTime: 2022-11-15 16:43:26
|
||||
* @LastEditTime: 2022-11-20 17:45:37
|
||||
* @FilePath: /fe-manage/src/api/index.js
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
@@ -54,9 +54,9 @@ export const getProjectList = (obj) => http.post('/admin/project/list', obj)
|
||||
// 获取项目详情信息（包含阶段及任务列表）
|
||||
export const getProjectDetail = (obj) => http.get('/admin/project/detail', { params: obj })
|
||||
//发布项目
|
||||
export const releaseProject=(obj)=>http.post('/admin/project/publish',obj)
|
||||
export const releaseProject = (obj) => http.post('/admin/project/publish', obj)
|
||||
//获取项目学员
|
||||
export const projectStudent=(obj)=>http.post('/admin/project/studentList',obj)
|
||||
export const projectStudent = (obj) => http.post('/admin/project/studentList', obj)
|
||||
//撤回发布、结束
|
||||
export const handleProject = (obj) => http.post('/admin/project/handle', obj)
|
||||
|
||||
@@ -65,7 +65,9 @@ export const taskStudentList = (obj) => http.post('/admin/project/taskStudentLis
|
||||
|
||||
|
||||
//获取讨论信息
|
||||
export const getDiscussDetail=(obj)=>http.post('/discuss/getDiscussDetail',obj)
|
||||
export const getDiscussDetail = (obj) => http.post('/discuss/getDiscussDetail', obj)
|
||||
|
||||
//获取模版列表
|
||||
export const getTemplate=(obj)=>http.post('/admin/project/template/list',obj)
|
||||
export const getTemplate = (obj) => http.post('/admin/project/template/list', obj)
|
||||
//获取项目统计
|
||||
export const getProjectCount = (projectId) => http.get('/admin/project/projectCount', { params: { projectId: projectId } })
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: lixg lixg@dongwu-inc.com
|
||||
* @Date: 2022-11-04 22:45:31
|
||||
* @LastEditors: lixg lixg@dongwu-inc.com
|
||||
* @LastEditTime: 2022-11-18 14:24:33
|
||||
* @LastEditTime: 2022-11-20 15:39:38
|
||||
* @FilePath: /fe-manage/src/api/index1.js
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
@@ -53,7 +53,8 @@ export const createLearnPath = (obj) => http.post('/admin/router/edit', obj);
|
||||
export const getLearnPath = (obj) => http.post('/admin/router/list', obj);
|
||||
//学习路径图的发布、停用、删除
|
||||
export const handleLearnPath = (obj) => http.post('/admin/router/handle', obj);
|
||||
|
||||
//获取路径图统计数据
|
||||
export const getLearnCount = (routerId) => http.get('/admin/router/getCount', { params: { routerId: routerId } })
|
||||
//获取关卡
|
||||
export const getChapter = (obj) => http.post('/admin/router/detail', { params: obj });
|
||||
|
||||
@@ -83,6 +84,12 @@ export const scoreRank = (obj) => http.post('/admin/project/scoreRank', obj);
|
||||
export const billboard = (obj) => http.post('/admin/project/billboard', obj);
|
||||
//项目基础信息-----------------------------------
|
||||
|
||||
|
||||
// 获取组织结构树
|
||||
export const orgtree = () => http.get('/org/tree');
|
||||
|
||||
|
||||
|
||||
// 测试方法
|
||||
// import * as api from '../../api/index'
|
||||
// api.getLearnPath({}).then(res => {
|
||||
|
||||
@@ -162,211 +162,13 @@ function autoComma(number) {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
const commonData={
|
||||
timeout:50
|
||||
const commonData = {
|
||||
timeout: 50
|
||||
}
|
||||
|
||||
|
||||
//组织树
|
||||
const organizationalTree= [
|
||||
{
|
||||
title: "京东方",
|
||||
value: "京东方",
|
||||
children: [
|
||||
{
|
||||
title: "产研部",
|
||||
value: "产研部",
|
||||
children: [
|
||||
{
|
||||
title: "产品部",
|
||||
value: "产品部",
|
||||
},
|
||||
{
|
||||
title: "研究部",
|
||||
value: "研究部",
|
||||
},
|
||||
{
|
||||
title: "研究部2",
|
||||
value: "研究部2",
|
||||
},
|
||||
{
|
||||
title: "研究3",
|
||||
value: "研究3",
|
||||
},
|
||||
{
|
||||
title: "研究4",
|
||||
value: "研究4",
|
||||
},
|
||||
{
|
||||
title: "研究部5",
|
||||
value: "研究部5",
|
||||
},
|
||||
{
|
||||
title: "研究部6",
|
||||
value: "研究部6",
|
||||
},
|
||||
{
|
||||
title: "研究部7",
|
||||
value: "研究部7",
|
||||
},
|
||||
{
|
||||
title: "研究部8",
|
||||
value: "研究部8",
|
||||
},
|
||||
{
|
||||
title: "研究部9",
|
||||
value: "研究部9",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "二级标题",
|
||||
value: "二级标题",
|
||||
children: [
|
||||
{
|
||||
title: "三级标题",
|
||||
value: "三级标题",
|
||||
children: [
|
||||
{
|
||||
title: "四级标题",
|
||||
value: "四级标题",
|
||||
children: [
|
||||
{
|
||||
title: "五级标题",
|
||||
value: "五级标题",
|
||||
children: [
|
||||
{
|
||||
title: "六级标题",
|
||||
value: "六级标题",
|
||||
children: [
|
||||
{
|
||||
title: "七级标题",
|
||||
value: "七级标题",
|
||||
children: [
|
||||
{
|
||||
title: "八级标题",
|
||||
value: "八级标题",
|
||||
children: [
|
||||
{
|
||||
title: "九级标题",
|
||||
value: "九级标题",
|
||||
children: [
|
||||
{
|
||||
title: "十级标题",
|
||||
value: "十级标题",
|
||||
children: [
|
||||
{
|
||||
title: "十一级标题",
|
||||
value: "十一级标题",
|
||||
children: [
|
||||
{
|
||||
title: "十二级标题",
|
||||
value: "十二级标题",
|
||||
children: [
|
||||
{
|
||||
title:
|
||||
"十三级标题十三级标题十三级标题十三级标题",
|
||||
value: "十三级标题",
|
||||
children: [
|
||||
{
|
||||
title:
|
||||
"十四级标题",
|
||||
value:
|
||||
"十四级标题",
|
||||
children: [
|
||||
{
|
||||
title:
|
||||
"十五级标题",
|
||||
value:
|
||||
"十五级标题",
|
||||
children: [
|
||||
{
|
||||
title:
|
||||
"十六级标题",
|
||||
value:
|
||||
"十六级标题",
|
||||
children:
|
||||
[
|
||||
{
|
||||
title:
|
||||
"十七级标题",
|
||||
value:
|
||||
"十七级标题",
|
||||
children:
|
||||
[
|
||||
{
|
||||
title:
|
||||
"十八级标题",
|
||||
value:
|
||||
"十八级标题",
|
||||
children:
|
||||
[
|
||||
{
|
||||
title:
|
||||
"十九级标题",
|
||||
value:
|
||||
"十九级标题",
|
||||
children:
|
||||
[
|
||||
{
|
||||
title:
|
||||
"二十级标题二十级标题",
|
||||
value:
|
||||
"二十级标题二十级标题",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "人力资源部",
|
||||
value: "人力资源部",
|
||||
children: [
|
||||
{
|
||||
title: "人事部",
|
||||
value: "人事部",
|
||||
},
|
||||
{
|
||||
title: "行政部",
|
||||
value: "行政部",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
const organizationalTree = []
|
||||
export {
|
||||
toDate,
|
||||
getWeek,
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<div class="main">
|
||||
<div class="classify">
|
||||
<div
|
||||
v-for="item, index in classify"
|
||||
v-for="(item, index) in classify"
|
||||
:key="index"
|
||||
class="classifyItem"
|
||||
@click="selectClassify(item)"
|
||||
@@ -35,28 +35,41 @@
|
||||
{{ item.text }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="selectClassifyType===1" class="type1">
|
||||
<span style="font-weight: 500">描述：</span><span>不设学习限制，学员可以在任何时间学习</span>
|
||||
</div>
|
||||
<div v-if="selectClassifyType===2" class="type1 type2">
|
||||
<div><span style="font-weight: 500">描述：</span><span>辩论、活动、测评、调研、投票按照设置时间</span></div>
|
||||
<div class="radio">
|
||||
<span>解锁单元：</span>
|
||||
<a-radio v-model:checked="checked">逐个任务解锁</a-radio>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="selectClassifyType===3" class="type1 type3">
|
||||
<div><span style="font-weight: 500">描述：</span><span>前一个阶段达成目标后解锁下一个阶段</span></div>
|
||||
<div class="radio" style="display:flex">
|
||||
<div style="margin-top:1px">解锁条件：</div>
|
||||
<a-radio-group v-model:value="radioSelect">
|
||||
<div><a-radio :value="1">逐个任务解锁，完成一个任务后解锁下一个</a-radio></div>
|
||||
<div style="margin-top:24px"> <a-radio :value="2">完成当前阶段所有必修任务解锁下一阶段</a-radio></div>
|
||||
|
||||
</a-radio-group>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="selectClassifyType === 1" class="type1">
|
||||
<span style="font-weight: 500">描述：</span
|
||||
><span>不设学习限制，学员可以在任何时间学习</span>
|
||||
</div>
|
||||
<div v-if="selectClassifyType === 2" class="type1 type2">
|
||||
<div>
|
||||
<span style="font-weight: 500">描述：</span
|
||||
><span>辩论、活动、测评、调研、投票按照设置时间</span>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<span>解锁单元：</span>
|
||||
<a-radio v-model:checked="checked">逐个任务解锁</a-radio>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="selectClassifyType === 3" class="type1 type3">
|
||||
<div>
|
||||
<span style="font-weight: 500">描述：</span
|
||||
><span>前一个阶段达成目标后解锁下一个阶段</span>
|
||||
</div>
|
||||
<div class="radio" style="display: flex">
|
||||
<div style="margin-top: 1px">解锁条件：</div>
|
||||
<a-radio-group v-model:value="radioSelect">
|
||||
<div>
|
||||
<a-radio :value="1"
|
||||
>逐个任务解锁，完成一个任务后解锁下一个</a-radio
|
||||
>
|
||||
</div>
|
||||
<div style="margin-top: 24px">
|
||||
<a-radio :value="2"
|
||||
>完成当前阶段所有必修任务解锁下一阶段</a-radio
|
||||
>
|
||||
</div>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btnn">
|
||||
<button class="btn1">取消</button>
|
||||
@@ -92,11 +105,14 @@ export default {
|
||||
text: "闯关模式",
|
||||
},
|
||||
],
|
||||
selectClassifyType: 3,
|
||||
checked:true,
|
||||
radioSelect:1,
|
||||
selectClassifyType: 1,
|
||||
checked: true,
|
||||
radioSelect: 1,
|
||||
});
|
||||
const closeDrawer = () => {
|
||||
state.selectClassifyType = 1;
|
||||
state.checked = true;
|
||||
state.radioSelect = 1;
|
||||
ctx.emit("update:unlockModeVisible", false);
|
||||
};
|
||||
|
||||
@@ -163,14 +179,14 @@ export default {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.type1{
|
||||
.type1 {
|
||||
margin-top: 50px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
line-height: 20px;
|
||||
}
|
||||
.radio{
|
||||
.radio {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
/*
|
||||
* @Author: lixg lixg@dongwu-inc.com
|
||||
* @Date: 2022-11-09 09:26:26
|
||||
* @LastEditors: lixg lixg@dongwu-inc.com
|
||||
* @LastEditTime: 2022-11-20 16:06:52
|
||||
* @FilePath: /fe-manage/src/store/index.js
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
import { createStore } from "vuex";
|
||||
|
||||
export default createStore({
|
||||
@@ -5,15 +13,17 @@ export default createStore({
|
||||
openpages: localStorage.getItem("openpages")
|
||||
? JSON.parse(localStorage.getItem("openpages"))
|
||||
: [
|
||||
{
|
||||
pagename: "学习路径",
|
||||
href: "/learningpath",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
{
|
||||
pagename: "学习路径",
|
||||
href: "/learningpath",
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
|
||||
assessmentName: "",
|
||||
routerId: null,
|
||||
|
||||
orgtreeList: [],
|
||||
},
|
||||
getters: {},
|
||||
mutations: {
|
||||
@@ -31,6 +41,9 @@ export default createStore({
|
||||
console.log("state.assessmentName");
|
||||
console.log(state.assessmentName);
|
||||
},
|
||||
getOrgtreeList(state, orgtreeList) {
|
||||
state.orgtreeList = orgtreeList;
|
||||
}
|
||||
},
|
||||
actions: {},
|
||||
modules: {},
|
||||
|
||||
@@ -118,7 +118,7 @@
|
||||
<a-modal
|
||||
:closable="sh"
|
||||
centered="true"
|
||||
v-model:visible="out"
|
||||
v-model:visible="out"
|
||||
:footer="null"
|
||||
wrapClassName="CreatePath"
|
||||
>
|
||||
@@ -194,7 +194,7 @@
|
||||
<img class="im" src="../../assets/px.jpg" /> -->
|
||||
<div
|
||||
@click="chooseImg(item)"
|
||||
v-for="item,index in imgData"
|
||||
v-for="(item, index) in imgData"
|
||||
:key="item.key"
|
||||
class="learnBgItem"
|
||||
:style="{
|
||||
@@ -203,10 +203,14 @@
|
||||
? '2px solid rgba(78, 166, 255, 1)'
|
||||
: '1px solid #C7CBD2',
|
||||
'background-image': 'url(' + item.source + ')',
|
||||
display:index>=5?'none':'flex'
|
||||
display: index >= 5 ? 'none' : 'flex',
|
||||
}"
|
||||
></div>
|
||||
<div @click="showLearnBgMore" v-if="imgData.length > 5" class="learnBgItem learnBgMore">
|
||||
<div
|
||||
@click="showLearnBgMore"
|
||||
v-if="imgData.length > 5"
|
||||
class="learnBgItem learnBgMore"
|
||||
>
|
||||
查看更多 <img src="../../assets/images/projectadd/go.png" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -313,7 +317,7 @@
|
||||
<img class="im" src="../../assets/px.jpg" /> -->
|
||||
<div
|
||||
@click="chooseImg2(item)"
|
||||
v-for="(item,index) in imgData"
|
||||
v-for="(item, index) in imgData"
|
||||
:key="item.key"
|
||||
class="learnBgItem"
|
||||
:style="{
|
||||
@@ -322,12 +326,16 @@
|
||||
? '2px solid rgba(78, 166, 255, 1)'
|
||||
: '1px solid #ccc',
|
||||
'background-image': 'url(' + item.source + ')',
|
||||
display:index>=5?'none':'flex'
|
||||
display: index >= 5 ? 'none' : 'flex',
|
||||
}"
|
||||
>
|
||||
<!-- <img class="im" :src="item.source" /> -->
|
||||
</div>
|
||||
<div @click="showLearnBgMore" v-if="imgData.length > 5" class="learnBgItem learnBgMore">
|
||||
<div
|
||||
@click="showLearnBgMore"
|
||||
v-if="imgData.length > 5"
|
||||
class="learnBgItem learnBgMore"
|
||||
>
|
||||
查看更多 <img src="../../assets/images/projectadd/go.png" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -392,7 +400,9 @@
|
||||
<div class="projectbox">
|
||||
<div class="promessage">
|
||||
<div class="messageme">路径信息</div>
|
||||
<div class="messagege">当前路径共0个关卡，0个任务</div>
|
||||
<div class="messagege">
|
||||
当前路径共{{ routeChapters }}个关卡，{{ routeTasks }}个任务
|
||||
</div>
|
||||
</div>
|
||||
<div class="stumessage">
|
||||
<div class="messageme1">学员信息</div>
|
||||
@@ -618,13 +628,11 @@
|
||||
>
|
||||
<!-- <img class="im" :src="item.source" /> -->
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button class="samtn btn1" @click="closeLearnBgMore">取消</button>
|
||||
<button class="samtn btn2" @click="closeLearnBgMore">确定</button>
|
||||
</div>
|
||||
<button class="samtn btn1" @click="closeLearnBgMore">取消</button>
|
||||
<button class="samtn btn2" @click="closeLearnBgMore">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
@@ -695,7 +703,8 @@ export default {
|
||||
{
|
||||
id: 7,
|
||||
source: require("../../assets/images/leveladd/2.png"),
|
||||
}, {
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
source: require("../../assets/images/leveladd/3.png"),
|
||||
},
|
||||
@@ -706,7 +715,8 @@ export default {
|
||||
{
|
||||
id: 7,
|
||||
source: require("../../assets/images/leveladd/2.png"),
|
||||
}, {
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
source: require("../../assets/images/leveladd/3.png"),
|
||||
},
|
||||
@@ -717,7 +727,8 @@ export default {
|
||||
{
|
||||
id: 7,
|
||||
source: require("../../assets/images/leveladd/2.png"),
|
||||
}, {
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
source: require("../../assets/images/leveladd/3.png"),
|
||||
},
|
||||
@@ -728,7 +739,8 @@ export default {
|
||||
{
|
||||
id: 7,
|
||||
source: require("../../assets/images/leveladd/2.png"),
|
||||
}, {
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
source: require("../../assets/images/leveladd/3.png"),
|
||||
},
|
||||
@@ -739,7 +751,8 @@ export default {
|
||||
{
|
||||
id: 7,
|
||||
source: require("../../assets/images/leveladd/2.png"),
|
||||
}, {
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
source: require("../../assets/images/leveladd/3.png"),
|
||||
},
|
||||
@@ -836,7 +849,9 @@ export default {
|
||||
endTime: null, //结束时间
|
||||
//发布---------------
|
||||
releasePathId: null, //发布路径id
|
||||
routeStudentsNum: 0,
|
||||
routeStudentsNum: 0, //学员总数
|
||||
routeChapters: 0, //关卡总数
|
||||
routeTasks: 0, //任务总数
|
||||
recallPathId: null, //撤回路径id
|
||||
stopPathId: null, //停用路径id
|
||||
copyPathId: null, //复制路径iid
|
||||
@@ -881,32 +896,19 @@ export default {
|
||||
const showPub = (routerId) => {
|
||||
state.pub = true;
|
||||
state.releasePathId = routerId;
|
||||
//获取学员总数
|
||||
let obj = {
|
||||
pageNo: 0,
|
||||
pageSize: 0,
|
||||
routerId: routerId,
|
||||
};
|
||||
api
|
||||
.getStudent(obj)
|
||||
.getLearnCount(routerId)
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
// console.log("res", res.data.data);
|
||||
state.routeStudentsNum = res.data.data.total;
|
||||
// console.log("获取关卡、任务、学员统计数据", res.data);
|
||||
state.routeStudentsNum = res.data.students;
|
||||
state.routeChapters = res.data.chapters;
|
||||
state.routeTasks = res.data.tasks;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("err", err);
|
||||
});
|
||||
//获取学习路径详细信息
|
||||
api
|
||||
.getRouterDetail(routerId)
|
||||
.then((res) => {
|
||||
console.log("学习路径详情", res);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("学习路径详情获取错误", err);
|
||||
});
|
||||
};
|
||||
//确定发布
|
||||
const releaseLearnPath = () => {
|
||||
@@ -1641,6 +1643,7 @@ export default {
|
||||
// console.log("执行");
|
||||
getLearnPath();
|
||||
});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
selectProjectName,
|
||||
@@ -1912,70 +1915,69 @@ export default {
|
||||
width: 680px !important;
|
||||
height: 528px !important;
|
||||
padding: 0 !important;
|
||||
.main{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.top {
|
||||
padding-left: 51px;
|
||||
padding-right: 51px;
|
||||
padding-top: 28px;
|
||||
.main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
.topc {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
.imagesBox{
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 51px;
|
||||
padding-right: 39px;
|
||||
margin-top: 20px;
|
||||
height: 350px;
|
||||
overflow-y: auto;
|
||||
.learnBgItem{
|
||||
border-radius: 8px;
|
||||
width: 136px;
|
||||
height: 106px;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
.btn {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom:30px ;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.samtn {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #4ea6ff;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn1 {
|
||||
background-color: #fff;
|
||||
color: #4ea6ff;
|
||||
}
|
||||
.btn2 {
|
||||
background-color: #4ea6ff;
|
||||
color: #fff;
|
||||
margin-left: 16px;
|
||||
}
|
||||
flex-direction: column;
|
||||
.top {
|
||||
padding-left: 51px;
|
||||
padding-right: 51px;
|
||||
padding-top: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
.topc {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.imagesBox {
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 51px;
|
||||
padding-right: 39px;
|
||||
margin-top: 20px;
|
||||
height: 350px;
|
||||
overflow-y: auto;
|
||||
.learnBgItem {
|
||||
border-radius: 8px;
|
||||
width: 136px;
|
||||
height: 106px;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.samtn {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #4ea6ff;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn1 {
|
||||
background-color: #fff;
|
||||
color: #4ea6ff;
|
||||
}
|
||||
.btn2 {
|
||||
background-color: #4ea6ff;
|
||||
color: #fff;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -169,7 +169,34 @@
|
||||
</div>
|
||||
|
||||
<div class="in select">
|
||||
<a-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-default-expand-all
|
||||
:tree-data="classifyList2"
|
||||
:fieldNames="{
|
||||
children: 'children',
|
||||
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;
|
||||
@@ -179,8 +206,9 @@
|
||||
placeholder="自动带出 可修改"
|
||||
:options="classifyList2"
|
||||
@change="classificationChange2"
|
||||
:field-names="{ label: 'name', value: 'id', options: 'children' }"
|
||||
:disabled="viewDetail ? true : false"
|
||||
/>
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="name name2">
|
||||
@@ -359,22 +387,24 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { reactive, toRefs, ref, onUnmounted } from "vue";
|
||||
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 } from "../../api/method";
|
||||
|
||||
import { useStore } from "vuex";
|
||||
export default {
|
||||
name: "projectAdd",
|
||||
setup() {
|
||||
const store = useStore();
|
||||
// 编辑页面跳转过来时候，自动填充表格
|
||||
const routers = useRoute();
|
||||
const isEdit = ref(false);
|
||||
let peojectID = "";
|
||||
|
||||
console.log("store.state.orgtreeList", store.state.orgtreeList);
|
||||
if (routers.query.projectId) {
|
||||
storage.set("projectAddId", routers.query.projectId);
|
||||
isEdit.value = true;
|
||||
@@ -515,7 +545,7 @@ export default {
|
||||
valueE1: null,
|
||||
valueE2: null,
|
||||
classifySelect1: [],
|
||||
classifySelect2: [],
|
||||
classifySelect2: null,
|
||||
classifySelect3: [],
|
||||
classifySelect4: [],
|
||||
rangevalue: [],
|
||||
@@ -690,11 +720,25 @@ export default {
|
||||
};
|
||||
|
||||
// 资源归属 sourceBelongId 后续给接口
|
||||
const classifyList2 = ref([
|
||||
{ value: 1, label: "项目一" },
|
||||
{ value: 2, label: "项目二" },
|
||||
{ value: 3, label: "项目三" },
|
||||
]);
|
||||
const classifyList2 = computed(() => {
|
||||
return store.state.orgtreeList ? store.state.orgtreeList : ref(null);
|
||||
});
|
||||
|
||||
// //获取资源归属
|
||||
// const orgTree = () => {
|
||||
// api1
|
||||
// .orgtree()
|
||||
// .then((res) => {
|
||||
// console.log("获取集团组织成功", res);
|
||||
// if (res.status === 200) {
|
||||
// classifyList2.value = res.data.data;
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// console.log("获取集团组织失败", err);
|
||||
// });
|
||||
// };
|
||||
// orgTree();
|
||||
|
||||
let sourceBelongIdC = "";
|
||||
const classificationChange2 = (key) => {
|
||||
@@ -1357,4 +1401,18 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.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>
|
||||
|
||||
@@ -968,7 +968,9 @@
|
||||
<div class="projectbox">
|
||||
<div class="promessage">
|
||||
<div class="messageme">项目信息</div>
|
||||
<div class="messagege">当前项目共0个阶段，0个任务</div>
|
||||
<div class="messagege">
|
||||
当前项目共{{ projectStages }}个阶段，{{ projectTasks }}个任务
|
||||
</div>
|
||||
</div>
|
||||
<div class="stumessage">
|
||||
<div class="messageme1">学员信息</div>
|
||||
@@ -1024,8 +1026,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
<!-- 创建项目提示框 -->
|
||||
<a-modal
|
||||
<!-- 创建项目提示框 -->
|
||||
<a-modal
|
||||
v-model:visible="reminderModal"
|
||||
:footer="null"
|
||||
:closable="closeBack"
|
||||
@@ -1041,7 +1043,9 @@
|
||||
<div class="close_exit" @click="closeReminderModal"></div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div style="margin-left:60px;margin-right:60px">请您根据自身需求选择对应项目类别，多层项目与单层项目操作不同，层级不同</div>
|
||||
<div style="margin-left: 60px; margin-right: 60px">
|
||||
请您根据自身需求选择对应项目类别，多层项目与单层项目操作不同，层级不同
|
||||
</div>
|
||||
</div>
|
||||
<div class="del_btnbox">
|
||||
<div class="del_btn btn2" @click="okReminderModal">
|
||||
@@ -1052,7 +1056,6 @@
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
|
||||
<!-- 归属权抽屉 -->
|
||||
<proj-owner-ship v-model:ProjOwnervisible="ProjOwnervisible" />
|
||||
<!-- 授权名单抽屉 -->
|
||||
@@ -1061,9 +1064,6 @@
|
||||
<proj-check-ship v-model:ProjCheckvisible="ProjCheckvisible" />
|
||||
<!-- 管理权抽屉 -->
|
||||
<proj-manage-ship v-model:ProjManagevisible="ProjManagevisible" />
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -1101,7 +1101,7 @@ export default {
|
||||
projectPub: false, //发布弹窗
|
||||
backModal: false, //撤回弹窗
|
||||
closeBack: false, //撤回弹窗关闭图标
|
||||
reminderModal:false,//温馨提示弹窗
|
||||
reminderModal: false, //温馨提示弹窗
|
||||
ProjOwnervisible: false,
|
||||
ProjPvisible: false,
|
||||
ProjCheckvisible: false,
|
||||
@@ -1118,7 +1118,9 @@ export default {
|
||||
tableDataTotal: -1, //学习路径列表总数
|
||||
pageSize: 10, //每页10条数据
|
||||
|
||||
projectStudentsNum: 0, //发布弹窗-学员人数
|
||||
projectStudentsNum: 0, //发布弹窗-学员人
|
||||
projectStages: 0,
|
||||
projectTasks: 0,
|
||||
releaseProjectId: null, //发布的项目id
|
||||
releaseProjectName: null, //发布的项目名称
|
||||
releaseProjectTime: null, //发布的项目时间
|
||||
@@ -1800,26 +1802,39 @@ export default {
|
||||
state.releaseProjectName = object.name;
|
||||
state.releaseProjectTime = object.time;
|
||||
console.log("object", object);
|
||||
//获取学员总数
|
||||
let obj = {
|
||||
pageNo: 0,
|
||||
pageSize: 0,
|
||||
projectId: object.projectId,
|
||||
};
|
||||
api
|
||||
.projectStudent(obj)
|
||||
.getProjectCount(object.projectId)
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
// console.log("res", res.data);
|
||||
state.projectStudentsNum = res.data.data.total
|
||||
? res.data.data.total
|
||||
: 0;
|
||||
console.log("获取关卡、任务、学员统计数据", res.data);
|
||||
state.projectStudentsNum = res.data.students;
|
||||
state.projectStages = res.data.stages;
|
||||
state.projectTasks = res.data.tasks;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("获取学员人数失败", err);
|
||||
console.log("err", err);
|
||||
});
|
||||
//获取阶段及任务总数
|
||||
// //获取学员总数
|
||||
// let obj = {
|
||||
// pageNo: 0,
|
||||
// pageSize: 0,
|
||||
// projectId: object.projectId,
|
||||
// };
|
||||
// api
|
||||
// .projectStudent(obj)
|
||||
// .then((res) => {
|
||||
// if (res.status === 200) {
|
||||
// // console.log("res", res.data);
|
||||
// state.projectStudentsNum = res.data.data.total
|
||||
// ? res.data.data.total
|
||||
// : 0;
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// console.log("获取学员人数失败", err);
|
||||
// });
|
||||
// //获取阶段及任务总数
|
||||
};
|
||||
//确认发布项目
|
||||
const releaseProject = () => {
|
||||
@@ -3071,8 +3086,7 @@ export default {
|
||||
};
|
||||
|
||||
const showModal1 = () => {
|
||||
|
||||
state.reminderModal=true
|
||||
state.reminderModal = true;
|
||||
};
|
||||
const closeModal1 = () => {
|
||||
state.estabish = false;
|
||||
@@ -3101,14 +3115,13 @@ export default {
|
||||
state.ProjManagevisible = true;
|
||||
};
|
||||
|
||||
const closeReminderModal=()=>{
|
||||
state.reminderModal=false
|
||||
|
||||
}
|
||||
const okReminderModal=()=>{
|
||||
state.reminderModal=false
|
||||
state.estabish = true;
|
||||
}
|
||||
const closeReminderModal = () => {
|
||||
state.reminderModal = false;
|
||||
};
|
||||
const okReminderModal = () => {
|
||||
state.reminderModal = false;
|
||||
state.estabish = true;
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
selectProjectName,
|
||||
|
||||
@@ -138,11 +138,11 @@
|
||||
<div class="inputbox">
|
||||
<input type="text" placeholder="按学习时间解锁" />
|
||||
<!-- v-model:unlockModeVisible="unlockModeVisible" -->
|
||||
<div class="bottonbox" @click="showModeVisible">
|
||||
<div class="bottonbox" @click="showModeVisible">
|
||||
<div class="btnText">切换模式</div>
|
||||
</div>
|
||||
<!-- 切换模式抽屉 -->
|
||||
<unlock-mode v-model:unlockModeVisible="unlockModeVisible" />
|
||||
<!-- 切换模式抽屉 -->
|
||||
<unlock-mode v-model:unlockModeVisible="unlockModeVisible" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
@@ -992,9 +992,8 @@
|
||||
</div></a-modal
|
||||
>
|
||||
|
||||
|
||||
<!-- 是否删除阶段弹窗 -->
|
||||
<a-modal
|
||||
<!-- 是否删除阶段弹窗 -->
|
||||
<a-modal
|
||||
v-model:visible="deleteStageModal"
|
||||
:footer="null"
|
||||
:closable="cC"
|
||||
@@ -1014,18 +1013,15 @@
|
||||
</div>
|
||||
<div class="del_btnbox">
|
||||
<div class="del_btn btn1" @click="closeDeleteStage">
|
||||
<div class="btnText" >取消</div>
|
||||
<div class="btnText">取消</div>
|
||||
</div>
|
||||
<div class="del_btn btn2" @click="deleteStage">
|
||||
<div class="btnText" >确定</div>
|
||||
<div class="btnText">确定</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1050,7 +1046,7 @@ import * as apistage from "../../api/indexStage";
|
||||
import * as apimove from "../../api/indexMovetask";
|
||||
import draggable from "vuedraggable";
|
||||
import { storage } from "../../api/storage";
|
||||
import UnlockMode from '../../components/drawers/UnlockMode.vue'
|
||||
import UnlockMode from "../../components/drawers/UnlockMode.vue";
|
||||
const drawercolumns = [
|
||||
{
|
||||
title: "项目名称",
|
||||
@@ -1296,10 +1292,10 @@ export default {
|
||||
selectAll: 0, //0：未选择，1：全选，2：部分选择
|
||||
|
||||
updateStageID: null, //编辑阶段id
|
||||
deleteStageId:null,//删除阶段的id
|
||||
deleteStageModal:false,//删除阶段弹窗
|
||||
deleteStageId: null, //删除阶段的id
|
||||
deleteStageModal: false, //删除阶段弹窗
|
||||
|
||||
unlockModeVisible:false,//切换模式抽屉
|
||||
unlockModeVisible: false, //切换模式抽屉
|
||||
});
|
||||
console.log("projectId", state.projectId);
|
||||
const selectProjectName = (value, index) => {
|
||||
@@ -1728,7 +1724,7 @@ unlockModeVisible:false,//切换模式抽屉
|
||||
console.log("修改阶段成功", res);
|
||||
state.valuesname = "";
|
||||
state.valuesnotice = "";
|
||||
closeModal()
|
||||
closeModal();
|
||||
state.updateStageID = null;
|
||||
message.destroy();
|
||||
message.success("修改阶段成功");
|
||||
@@ -1747,9 +1743,9 @@ unlockModeVisible:false,//切换模式抽屉
|
||||
.editStage(obj)
|
||||
.then((res) => {
|
||||
console.log("添加阶段成功", res);
|
||||
state.valuesname = ""
|
||||
state.valuesnotice = ""
|
||||
closeModal()
|
||||
state.valuesname = "";
|
||||
state.valuesnotice = "";
|
||||
closeModal();
|
||||
message.destroy();
|
||||
message.success("添加阶段成功");
|
||||
getTask();
|
||||
@@ -1760,19 +1756,17 @@ unlockModeVisible:false,//切换模式抽屉
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//打开删除阶段弹窗
|
||||
const showDeleteStage=(id)=>{
|
||||
|
||||
state.deleteStageId=id
|
||||
state.deleteStageModal=true
|
||||
}
|
||||
//关闭删除阶段弹窗
|
||||
const closeDeleteStage=()=>{
|
||||
state.deleteStageId=null
|
||||
state.deleteStageModal=false
|
||||
}
|
||||
//删除阶段
|
||||
//打开删除阶段弹窗
|
||||
const showDeleteStage = (id) => {
|
||||
state.deleteStageId = id;
|
||||
state.deleteStageModal = true;
|
||||
};
|
||||
//关闭删除阶段弹窗
|
||||
const closeDeleteStage = () => {
|
||||
state.deleteStageId = null;
|
||||
state.deleteStageModal = false;
|
||||
};
|
||||
//删除阶段
|
||||
const deleteStage = () => {
|
||||
console.log("chapterId", state.deleteStageId);
|
||||
let obj = {
|
||||
@@ -1782,8 +1776,8 @@ const closeDeleteStage=()=>{
|
||||
.deleteStage(obj)
|
||||
.then((res) => {
|
||||
console.log("删除阶段成功", res);
|
||||
message.success('删除阶段成功')
|
||||
closeDeleteStage()
|
||||
message.success("删除阶段成功");
|
||||
closeDeleteStage();
|
||||
getTask();
|
||||
})
|
||||
.catch((err) => {
|
||||
@@ -2032,9 +2026,9 @@ const closeDeleteStage=()=>{
|
||||
};
|
||||
|
||||
//显示切换模式抽屉
|
||||
const showModeVisible=()=>{
|
||||
state.unlockModeVisible=true
|
||||
}
|
||||
const showModeVisible = () => {
|
||||
state.unlockModeVisible = true;
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
selectProjectName,
|
||||
|
||||
@@ -77,12 +77,12 @@
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
<div id="qrcode" style="display:flex;flex-direction: column;">
|
||||
<div id="qrcode" style="display: flex; flex-direction: column">
|
||||
<div>下载二维码</div>
|
||||
<qrcode-vue
|
||||
:value="qrcodeUrl"
|
||||
:size="qrcodeSize"
|
||||
style="width: 200px;height: 200px"
|
||||
style="width: 200px; height: 200px"
|
||||
></qrcode-vue>
|
||||
</div>
|
||||
<div @click="downloadQr(200)">下载200</div>
|
||||
@@ -90,11 +90,30 @@
|
||||
<div @click="downloadQr(800)">下载800</div>
|
||||
</div>
|
||||
|
||||
<div @click="changeCodevisible">显示二维码弹窗</div>
|
||||
<two-dimensional-code v-model:codevisible="codevisible" :codeInfo="codeInfo" index="0" type="课程二维码"/>
|
||||
<div @click="changeCodevisible">显示二维码弹窗</div>
|
||||
<two-dimensional-code
|
||||
v-model:codevisible="codevisible"
|
||||
:codeInfo="codeInfo"
|
||||
index="0"
|
||||
type="课程二维码"
|
||||
/>
|
||||
|
||||
<div @click="changeCodevisible2">显示二维码弹窗22</div>
|
||||
<two-dimensional-code v-model:codevisible="codevisible2" :codeInfo="codeInfo2" index="1" type="签到二维码"/>
|
||||
<two-dimensional-code
|
||||
v-model:codevisible="codevisible2"
|
||||
:codeInfo="codeInfo2"
|
||||
index="1"
|
||||
type="签到二维码"
|
||||
/>
|
||||
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="data"
|
||||
:row-selection="{
|
||||
selectedRowKeys: selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
@@ -112,7 +131,7 @@ import draggable from "vuedraggable";
|
||||
import QrcodeVue from "qrcode.vue";
|
||||
import html2canvas from "html2canvas";
|
||||
|
||||
import TwoDimensionalCode from '../../components/TwoDimensionalCode.vue'
|
||||
import TwoDimensionalCode from "../../components/TwoDimensionalCode.vue";
|
||||
export default {
|
||||
name: "SystemManage",
|
||||
components: {
|
||||
@@ -121,8 +140,9 @@ export default {
|
||||
// PlusOutlined,
|
||||
draggable,
|
||||
QrcodeVue,
|
||||
TwoDimensionalCode
|
||||
TwoDimensionalCode,
|
||||
},
|
||||
|
||||
setup() {
|
||||
const state = reactive({
|
||||
visible: false,
|
||||
@@ -159,12 +179,77 @@ export default {
|
||||
],
|
||||
|
||||
qrcodeUrl: "https://www.baidu.com/",
|
||||
qrcodeSize:800,
|
||||
qrcodeSize: 800,
|
||||
|
||||
codevisible:false,
|
||||
codeInfo:{},
|
||||
codevisible2:false,
|
||||
codeInfo2:{}
|
||||
codevisible: false,
|
||||
codeInfo: {},
|
||||
codevisible2: false,
|
||||
codeInfo2: {},
|
||||
|
||||
columns: [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
},
|
||||
{
|
||||
title: "Age",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: "12%",
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
dataIndex: "address",
|
||||
width: "30%",
|
||||
key: "address",
|
||||
},
|
||||
],
|
||||
data: [
|
||||
{
|
||||
key: 1,
|
||||
name: "John Brown sr.",
|
||||
age: 60,
|
||||
address: "New York No. 1 Lake Park",
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
name: "Joe Black",
|
||||
age: 32,
|
||||
address: "Sidney No. 1 Lake Park",
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
name: "Joe Black",
|
||||
age: 32,
|
||||
address: "Sidney No. 1 Lake Park",
|
||||
},
|
||||
{
|
||||
key: 4,
|
||||
name: "Joe Black",
|
||||
age: 32,
|
||||
address: "Sidney No. 1 Lake Park",
|
||||
},
|
||||
{
|
||||
key: 5,
|
||||
name: "Joe Black",
|
||||
age: 32,
|
||||
address: "Sidney No. 1 Lake Park",
|
||||
},
|
||||
{
|
||||
key: 6,
|
||||
name: "Joe Black",
|
||||
age: 32,
|
||||
address: "Sidney No. 1 Lake Park",
|
||||
},
|
||||
{
|
||||
key: 7,
|
||||
name: "Joe Black",
|
||||
age: 32,
|
||||
address: "Sidney No. 1 Lake Park",
|
||||
},
|
||||
],
|
||||
selectedRowKeys: [],
|
||||
});
|
||||
|
||||
const showDrawer = () => {
|
||||
@@ -248,94 +333,101 @@ export default {
|
||||
//下载二维码图片
|
||||
const downloadQr = (num) => {
|
||||
console.log("num", num);
|
||||
state.qrcodeSize=num
|
||||
let filename = `${new Date().getTime()}.png`;
|
||||
let canvas=document.getElementsByTagName('canvas')[0]
|
||||
let imageUrl = canvas.toDataURL("image/png")
|
||||
state.qrcodeSize = num;
|
||||
let filename = `${new Date().getTime()}.png`;
|
||||
let canvas = document.getElementsByTagName("canvas")[0];
|
||||
let imageUrl = canvas.toDataURL("image/png");
|
||||
|
||||
let canvasBox = document.createElement('canvas');
|
||||
let ctx = canvasBox.getContext("2d");
|
||||
var img = new Image();
|
||||
// 需要添加文字的图片
|
||||
img.src = imageUrl;
|
||||
// 等待图片加载完成
|
||||
img.onload = function(){
|
||||
// 将图片添加到canvas
|
||||
ctx.drawImage(img, 0, 0, 1240, 2208)
|
||||
// 设置字体
|
||||
ctx.font = "73px 微软雅黑 bolder"
|
||||
// 设置字体颜色
|
||||
ctx.fillStyle = "#955f17"
|
||||
ctx.textAlign = "center"
|
||||
// 添加文字和位置
|
||||
ctx.fillText("微信名", 621, 1050);
|
||||
let canvasBox = document.createElement("canvas");
|
||||
let ctx = canvasBox.getContext("2d");
|
||||
var img = new Image();
|
||||
// 需要添加文字的图片
|
||||
img.src = imageUrl;
|
||||
// 等待图片加载完成
|
||||
img.onload = function () {
|
||||
// 将图片添加到canvas
|
||||
ctx.drawImage(img, 0, 0, 1240, 2208);
|
||||
// 设置字体
|
||||
ctx.font = "73px 微软雅黑 bolder";
|
||||
// 设置字体颜色
|
||||
ctx.fillStyle = "#955f17";
|
||||
ctx.textAlign = "center";
|
||||
// 添加文字和位置
|
||||
ctx.fillText("微信名", 621, 1050);
|
||||
|
||||
// 导出为图片
|
||||
let url = canvasBox.toDataURL("image/png")
|
||||
let a = document.createElement("a");
|
||||
a.style.display = "none";
|
||||
// 导出为图片
|
||||
let url = canvasBox.toDataURL("image/png");
|
||||
let a = document.createElement("a");
|
||||
a.style.display = "none";
|
||||
a.download = filename;
|
||||
a.href = url;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
}
|
||||
|
||||
|
||||
// let a = document.createElement("a");
|
||||
// a.style.display = "none";
|
||||
// a.download = filename;
|
||||
// a.href = imageUrl;
|
||||
// document.body.appendChild(a);
|
||||
// a.click();
|
||||
};
|
||||
|
||||
// let a = document.createElement("a");
|
||||
// a.style.display = "none";
|
||||
// a.download = filename;
|
||||
// a.href = imageUrl;
|
||||
// document.body.appendChild(a);
|
||||
// a.click();
|
||||
|
||||
html2canvas(document.querySelector("#qrcode"), {
|
||||
useCORS: true, //支持图片跨域
|
||||
}).then((canvas) => {
|
||||
// var extra_canvas = document.createElement("canvas");
|
||||
// extra_canvas.setAttribute('width',num);
|
||||
// extra_canvas.setAttribute('height',num);
|
||||
// var ctx = extra_canvas.getContext('2d');
|
||||
// ctx.drawImage(canvas,0,0,num,num);
|
||||
// let filename = `${new Date().getTime()}.png`;
|
||||
// var imageUrl = extra_canvas.toDataURL("image/png",1.0);
|
||||
// var extra_canvas = document.createElement("canvas");
|
||||
// extra_canvas.setAttribute('width',num);
|
||||
// extra_canvas.setAttribute('height',num);
|
||||
// var ctx = extra_canvas.getContext('2d');
|
||||
// ctx.drawImage(canvas,0,0,num,num);
|
||||
// let filename = `${new Date().getTime()}.png`;
|
||||
// var imageUrl = extra_canvas.toDataURL("image/png",1.0);
|
||||
|
||||
console.log('canvas',canvas, canvas.width,canvas.style.width)
|
||||
console.log("canvas", canvas, canvas.width, canvas.style.width);
|
||||
|
||||
// // let ctx = canvas.getContext('2d');
|
||||
// // ctx.drawImage(canvas,0,0,canvas.width, canvas.height);
|
||||
// // canvas.width=num
|
||||
// // canvas.height=num
|
||||
// // canvas.style.width=num+'px'
|
||||
// // canvas.style.height=num+'px'
|
||||
// let filename = `${new Date().getTime()}.png`;
|
||||
// let imageUrl = canvas.toDataURL("image/png");
|
||||
// let a = document.createElement("a");
|
||||
// a.style.display = "none";
|
||||
// a.download = filename;
|
||||
// a.href = imageUrl;
|
||||
// document.body.appendChild(a);
|
||||
// a.click();
|
||||
// // let ctx = canvas.getContext('2d');
|
||||
// // ctx.drawImage(canvas,0,0,canvas.width, canvas.height);
|
||||
// // canvas.width=num
|
||||
// // canvas.height=num
|
||||
// // canvas.style.width=num+'px'
|
||||
// // canvas.style.height=num+'px'
|
||||
// let filename = `${new Date().getTime()}.png`;
|
||||
// let imageUrl = canvas.toDataURL("image/png");
|
||||
// let a = document.createElement("a");
|
||||
// a.style.display = "none";
|
||||
// a.download = filename;
|
||||
// a.href = imageUrl;
|
||||
// document.body.appendChild(a);
|
||||
// a.click();
|
||||
});
|
||||
};
|
||||
|
||||
//显示二维码弹窗
|
||||
const changeCodevisible=()=>{
|
||||
state.codevisible=true
|
||||
state.codeInfo={
|
||||
title:"签到二维码",
|
||||
name:'管理者进阶面授课程',
|
||||
url:"https://www.baidu.com/",
|
||||
const changeCodevisible = () => {
|
||||
state.codevisible = true;
|
||||
state.codeInfo = {
|
||||
title: "签到二维码",
|
||||
name: "管理者进阶面授课程",
|
||||
url: "https://www.baidu.com/",
|
||||
};
|
||||
};
|
||||
const changeCodevisible2 = () => {
|
||||
state.codevisible2 = true;
|
||||
state.codeInfo2 = {
|
||||
title: "签到二维码2222",
|
||||
name: "管理者进阶面授课程2222",
|
||||
url: "https://blog.csdn.net/qq_44034384/article/details/93612152",
|
||||
};
|
||||
};
|
||||
|
||||
const onSelectChange = (selectedRowKeys) => {
|
||||
console.log("selectedRowKeys changed: ", selectedRowKeys);
|
||||
|
||||
if (selectedRowKeys.length > 2) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
const changeCodevisible2=()=>{
|
||||
state.codevisible2=true
|
||||
state.codeInfo2={
|
||||
title:"签到二维码2222",
|
||||
name:'管理者进阶面授课程2222',
|
||||
url:"https://blog.csdn.net/qq_44034384/article/details/93612152",
|
||||
}
|
||||
}
|
||||
state.selectedRowKeys = selectedRowKeys;
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
showDrawer,
|
||||
@@ -346,6 +438,8 @@ let canvasBox = document.createElement('canvas');
|
||||
downloadQr,
|
||||
changeCodevisible,
|
||||
changeCodevisible2,
|
||||
|
||||
onSelectChange,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user