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

feat:增加项目的存为模版,删除等

Browse Source
This commit is contained in:
lixg
2022-11-09 09:36:45 +08:00
parent a1af3b83db
commit 3ec7c07e57
6 changed files with 411 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
package-lock.json generated
View File

@@ -13,7 +13,9 @@
"axios": "^1.1.3",
"core-js": "^3.8.3",
"element-plus": "^2.2.17",
"html2canvas": "^1.4.1",
"jquery": "^3.6.1",
"qrcode.vue": "^3.3.3",
"qs": "^6.11.0",
"sortablejs": "^1.15.0",
"vue": "^3.2.13",
@@ -3514,6 +3516,14 @@
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"dev": true
},
"node_modules/base64-arraybuffer": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
"integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
"engines": {
"node": ">= 0.6.0"
}
},
"node_modules/base64-js": {
"version": "1.5.1",
"resolved": "https://registry.npmmirror.com/base64-js/-/base64-js-1.5.1.tgz",
@@ -4279,6 +4289,14 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/css-line-break": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
"integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
"dependencies": {
"utrie": "^1.0.2"
}
},
"node_modules/css-loader": {
"version": "6.7.1",
"resolved": "https://registry.npmmirror.com/css-loader/-/css-loader-6.7.1.tgz",
@@ -6332,6 +6350,18 @@
"node": ">=10.13.0"
}
},
"node_modules/html2canvas": {
"version": "1.4.1",
"resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
"integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
"dependencies": {
"css-line-break": "^2.1.0",
"text-segmentation": "^1.0.3"
},
"engines": {
"node": ">=8.0.0"
}
},
"node_modules/htmlparser2": {
"version": "6.1.0",
"resolved": "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -8757,6 +8787,14 @@
"node": ">=6"
}
},
"node_modules/qrcode.vue": {
"version": "3.3.3",
"resolved": "https://registry.npmmirror.com/qrcode.vue/-/qrcode.vue-3.3.3.tgz",
"integrity": "sha512-OsD4tQjIbxg/K6D5ZkWjBdYI9eg9K2i8qeYILdEAX5mdAydSAxV7xKmmZSP/hA12olLqEMZ9ryqDQrwa9jEMgw==",
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/qs": {
"version": "6.11.0",
"resolved": "https://registry.npmmirror.com/qs/-/qs-6.11.0.tgz",
@@ -9911,6 +9949,14 @@
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
"dev": true
},
"node_modules/text-segmentation": {
"version": "1.0.3",
"resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
"integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
"dependencies": {
"utrie": "^1.0.2"
}
},
"node_modules/text-table": {
"version": "0.2.0",
"resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
@@ -10186,6 +10232,14 @@
"node": ">= 0.4.0"
}
},
"node_modules/utrie": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
"integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
"dependencies": {
"base64-arraybuffer": "^1.0.2"
}
},
"node_modules/uuid": {
"version": "8.3.2",
"resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz",
@@ -14091,6 +14145,11 @@
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"dev": true
},
"base64-arraybuffer": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
"integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
},
"base64-js": {
"version": "1.5.1",
"resolved": "https://registry.npmmirror.com/base64-js/-/base64-js-1.5.1.tgz",
@@ -14733,6 +14792,14 @@
"integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==",
"dev": true
},
"css-line-break": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
"integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
"requires": {
"utrie": "^1.0.2"
}
},
"css-loader": {
"version": "6.7.1",
"resolved": "https://registry.npmmirror.com/css-loader/-/css-loader-6.7.1.tgz",
@@ -16424,6 +16491,15 @@
"tapable": "^2.0.0"
}
},
"html2canvas": {
"version": "1.4.1",
"resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
"integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
"requires": {
"css-line-break": "^2.1.0",
"text-segmentation": "^1.0.3"
}
},
"htmlparser2": {
"version": "6.1.0",
"resolved": "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -18387,6 +18463,12 @@
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
"dev": true
},
"qrcode.vue": {
"version": "3.3.3",
"resolved": "https://registry.npmmirror.com/qrcode.vue/-/qrcode.vue-3.3.3.tgz",
"integrity": "sha512-OsD4tQjIbxg/K6D5ZkWjBdYI9eg9K2i8qeYILdEAX5mdAydSAxV7xKmmZSP/hA12olLqEMZ9ryqDQrwa9jEMgw==",
"requires": {}
},
"qs": {
"version": "6.11.0",
"resolved": "https://registry.npmmirror.com/qs/-/qs-6.11.0.tgz",
@@ -19358,6 +19440,14 @@
}
}
},
"text-segmentation": {
"version": "1.0.3",
"resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
"integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
"requires": {
"utrie": "^1.0.2"
}
},
"text-table": {
"version": "0.2.0",
"resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
@@ -19578,6 +19668,14 @@
"integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
"dev": true
},
"utrie": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
"integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
"requires": {
"base64-arraybuffer": "^1.0.2"
}
},
"uuid": {
"version": "8.3.2",
"resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz",

2
package.json
View File

@@ -13,7 +13,9 @@
"axios": "^1.1.3",
"core-js": "^3.8.3",
"element-plus": "^2.2.17",
"html2canvas": "^1.4.1",
"jquery": "^3.6.1",
"qrcode.vue": "^3.3.3",
"qs": "^6.11.0",
"sortablejs": "^1.15.0",
"vue": "^3.2.13",

12
src/api/index.js
View File

@@ -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-07 20:11:23
* @LastEditTime: 2022-11-09 09:32:35
* @FilePath: /fe-manage/src/api/index.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@@ -56,4 +56,12 @@ export const getProjectDetail = (obj) => http.get('/admin/project/detail', { par
//发布项目
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)
//获取讨论信息
export const getDiscussDetail=(obj)=>http.post('/discuss/getDiscussDetail',obj)

2
src/api/index1.js
View File

@@ -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-06 16:48:50
* @LastEditTime: 2022-11-09 09:32:52
* @FilePath: /fe-manage/src/api/index1.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/

300
src/views/projectcenter/ProjectManage.vue
View File

@@ -58,13 +58,13 @@
/>
</div>
<div style="display: flex; margin-bottom: 20px">
<div class="btnn btn1">
<div class="btnn btn1" @click="searchSubmit">
<div class="search"></div>
<div class="btnText" v-on:click="searchSubmit">搜索</div>
<div class="btnText" >搜索</div>
</div>
<div class="btn btn2">
<div class="btn btn2" @click="searchReset">
<div class="search"></div>
<div class="btnText" v-on:click="searchReset">重置</div>
<div class="btnText" >重置</div>
</div>
</div>
</div>
@@ -849,11 +849,11 @@
</div>
</div>
<div class="del_btnbox">
<div class="del_btn btn1">
<div class="btnText" @click="delete_exit">取消</div>
<div class="del_btn btn1" @click="closeStopModal">
<div class="btnText" >取消</div>
</div>
<div class="del_btn btn2">
<div class="btnText" @click="delete_exit">确定</div>
<div class="del_btn btn2" @click="finishProject">
<div class="btnText" >确定</div>
</div>
</div>
</div>
@@ -879,11 +879,11 @@
<span>您确定要删除此项目吗</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1">
<div class="btnText" @click="delete_exit">取消</div>
<div class="del_btn btn1" @click="closeDeleteModal">
<div class="btnText" >取消</div>
</div>
<div class="del_btn btn2">
<div class="btnText" @click="delete_exit">确定</div>
<div class="del_btn btn2" @click="deleteProject">
<div class="btnText" >确定</div>
</div>
</div>
</div>
@@ -910,10 +910,10 @@
</div>
<div class="del_btnbox">
<div class="del_btn btn1">
<div class="btnText" @click="delete_exit">取消</div>
<div class="btnText" @click="closeStartModal">取消</div>
</div>
<div class="del_btn btn2">
<div class="btnText" @click="delete_exit">确定</div>
<div class="btnText" @click="templateProject">确定</div>
</div>
</div>
</div>
@@ -1014,11 +1014,11 @@
<div class="back">（项目撤回后学员进度保留，发布后可继续学习）</div>
</div>
<div class="del_btnbox">
<div class="del_btn btn1">
<div class="btnText" @click="delete_exit">取消</div>
<div class="del_btn btn1" @click="closeBackModal">
<div class="btnText" >取消</div>
</div>
<div class="del_btn btn2">
<div class="btnText" @click="delete_exit">确定</div>
<div class="del_btn btn2" @click="recallProject">
<div class="btnText" >确定</div>
</div>
</div>
</div>
@@ -1080,8 +1080,17 @@ export default {
currentEditChildrensProjectId: "",
dcProjectID: "",
currentPage: 1, //当前页
tableDataTotal: -1, //学习路径列表总数
pageSize: 10, //每页10条数据
projectStudentsNum:0,//发布弹窗-学员人数
releaseProjectId: null, //发布的项目id
recallProjectId:null,//撤回的项目id
finishProjectId:null,//结束的项目id
deleteProjectId:null,//删除的项目id
templateProjectId:null,//存为模版的项目id
});
// 数据接入 - start -
const router = useRouter();
@@ -1146,13 +1155,16 @@ export default {
endTime = "";
status = null;
managerid = "";
state.currentPage=1
getTableDate();
};
const searchSubmit = () => {
console.log('点击了搜索')
state.currentPage=1
const obj = {
pageNo: 1,
pageSize: 10,
pageNo: state.currentPage,
pageSize: state.pageSize,
beginTime: beginTime,
endTime: endTime,
status: status,
@@ -1354,6 +1366,7 @@ export default {
state.doublepro = false;
message.destroy();
message.success("创建成功");
state.currentPage=1
getTableDate();
}
})
@@ -1598,6 +1611,7 @@ export default {
state.doublesonpro = false;
message.destroy();
message.success("创建成功");
state.currentPage=1
getTableDate();
}
})
@@ -1608,6 +1622,9 @@ export default {
});
};
// 编辑多层子项目
const edvalue6 = ref("");
const edvalue7 = ref([]);
@@ -1743,26 +1760,8 @@ export default {
state.eddoublesonpro = false;
};
//确认发布项目
const releaseProject = () => {
console.log('点击发布')
let obj = {
projectId: state.releaseProjectId,
};
api
.releaseProject(obj)
.then((res) => {
console.log("发布成功", res);
message.destroy();
message.success("发布成功");
state.projectPub = false
getTableDate()
})
.catch((err) => {
console.log("发布失败", err);
});
};
//发布弹窗
//打开发布弹窗
const showProjectPub = (projectId) => {
state.projectPub = true;
state.releaseProjectId = projectId;
@@ -1783,9 +1782,142 @@ console.log('获取学员人数失败',err)
})
//获取阶段及任务总数
};
//撤回
//确认发布项目
const releaseProject = () => {
console.log('点击发布')
let obj = {
projectId: state.releaseProjectId,
};
api
.releaseProject(obj)
.then((res) => {
console.log("发布成功", res);
message.destroy();
message.success("发布成功");
state.projectPub = false
getTableDate()
})
.catch((err) => {
console.log("发布失败", err);
});
};
//关闭发布弹窗
const closeProjectPub = () => {
state.projectPub = false;
};
//打开撤回弹窗
const showBackModal = (projectId) => {
state.backModal = true;
state.recallProjectId = projectId;
};
//确认撤回发布
const recallProject = () => {
let obj = {
projectId: state.recallProjectId,
type: 0,
};
api
.handleProject(obj)
.then((res) => {
console.log("撤回成功", res);
message.destroy();
message.success("撤回成功");
state.backModal = false;
getTableDate();
})
.catch((err) => {
console.log("撤回失败", err);
});
};
//关闭撤回弹窗
const closeBackModal = () => {
state.backModal = false;
};
//打开结束弹窗
const showStopModal = (projectId) => {
state.stopModal = true;
state.finishProjectId=projectId
};
//确认结束
const finishProject=()=>{
let obj = {
projectId: state.finishProjectId,
type: -1,
};
api
.handleProject(obj)
.then((res) => {
console.log("结束成功", res);
message.destroy();
message.success("已结束");
state.stopModal = false;
getTableDate();
})
.catch((err) => {
console.log("结束失败", err);
});
}
//关闭结束弹窗
const closeStopModal = () => {
state.stopModal = false;
};
//打开删除弹窗
const showDeleteModal = (projectId) => {
state.deleteModal = true;
state.deleteProjectId=projectId
};
//确认删除
const deleteProject=()=>{
let obj = {
projectId: state.deleteProjectId,
type: -2,
};
api
.handleProject(obj)
.then((res) => {
console.log("删除成功", res);
message.destroy();
message.success("删除成功");
state.deleteModal = false;
getTableDate();
})
.catch((err) => {
console.log("删除失败", err);
});
}
//关闭删除弹窗
const closeDeleteModal = () => {
state.deleteModal = false;
};
//打开存为模版弹窗
const showStartModal = (projectId) => {
state.startModal = true;
state.templateProjectId=projectId
};
//确认存为模版
const templateProject=()=>{
let obj = {
projectId: state.templateProjectId,
type: 1,
};
api
.handleProject(obj)
.then((res) => {
console.log("模版保存成功", res);
message.destroy();
message.success("模版保存成功");
state.startModal = false;
getTableDate();
})
.catch((err) => {
console.log("模版保存失败", err);
});
}
//关闭存为模版弹窗
const closeStartModal = () => {
state.startModal = false;
};
// 数据接入 - end -
@@ -1802,9 +1934,7 @@ console.log('获取学员人数失败',err)
// 获取项目列表信息
let tableData = ref([]);
let currentPage = ref(1);
let tableDataTotal = ref("");
let pageSize = ref(10);
const columns = ref([
{
@@ -1995,7 +2125,7 @@ console.log('获取学员人数失败',err)
<a-select-option value="删除" label="删除">
<div
onClick={() => {
showDeleteModal();
showDeleteModal(value.record.projectId);
}}
>
删除
@@ -2181,7 +2311,7 @@ console.log('获取学员人数失败',err)
<a-select-option value="删除" label="删除">
<div
onClick={() => {
showDeleteModal();
showDeleteModal(value.record.projectId);
}}
>
删除
@@ -2296,7 +2426,7 @@ console.log('获取学员人数失败',err)
<a-select-option value="删除" label="删除">
<div
onClick={() => {
showDeleteModal();
showDeleteModal(value.record.projectId);
}}
>
删除
@@ -2448,7 +2578,7 @@ console.log('获取学员人数失败',err)
<a-select-option value="删除" label="删除">
<div
onClick={() => {
showDeleteModal();
showDeleteModal(value.record.projectId);
}}
>
删除
@@ -2589,7 +2719,7 @@ console.log('获取学员人数失败',err)
<a-select-option value="删除" label="删除">
<div
onClick={() => {
showDeleteModal();
showDeleteModal(value.record.projectId);
}}
>
删除
@@ -2598,7 +2728,7 @@ console.log('获取学员人数失败',err)
<a-select-option value="存为模版" label="存为模版">
<div
onClick={() => {
showStartModal();
showStartModal(value.record.projectId);
}}
>
存为模版
@@ -2639,7 +2769,7 @@ console.log('获取学员人数失败',err)
</a-select-option>
<div
onClick={() => {
showStartModal();
showStartModal(value.record.projectId);
}}
>
存为模版
@@ -2648,7 +2778,7 @@ console.log('获取学员人数失败',err)
<a-select-option value="结束" label="结束">
<div
onClick={() => {
showStopModal();
showStopModal(value.record.projectId);
}}
>
结束
@@ -2657,7 +2787,7 @@ console.log('获取学员人数失败',err)
<a-select-option value="撤回" label="撤回">
<div
onClick={() => {
showBackModal();
showBackModal(value.record.projectId);
}}
>
撤回
@@ -2686,7 +2816,7 @@ console.log('获取学员人数失败',err)
<a-select-option value="存为模版" label="存为模版">
<div
onClick={() => {
showStartModal();
showStartModal(value.record.projectId);
}}
>
存为模版
@@ -2704,7 +2834,7 @@ console.log('获取学员人数失败',err)
<a-select-option value="删除" label="删除">
<div
onClick={() => {
showDeleteModal();
showDeleteModal(value.record.projectId);
}}
>
删除
@@ -2738,17 +2868,25 @@ console.log('获取学员人数失败',err)
const getTableDate = (pagedata) => {
let obj = {
pageNo: 1,
pageSize: 10,
pageNo: state.currentPage,
pageSize: state.pageSize,
};
api
.getProjectList(pagedata ? pagedata : obj)
.then((res) => {
console.log(res);
if (res.status == 200 && res.data.code == 200) {
tableDataTotal.value = Number(res.data.data.total);
state.tableDataTotal = Number(res.data.data.total);
let data = res.data.data.rows;
// let data = state.tableData;
if (
data.length === 0 &&
res.data.data.total > 0 &&
state.currentPage > 1
) {
state.currentPage = state.currentPage - 1;
getTableDate();
}
console.log("1266", data);
data.map((value) => {
console.log("value %o", value);
@@ -2788,10 +2926,10 @@ console.log('获取学员人数失败',err)
// 翻页
const changePagination = (page) => {
console.log(page);
currentPage.value = page;
state.currentPage = page;
let pagedata = {
pageNo: page,
pageSize: 10,
pageSize: state.pageSize,
};
getTableDate(pagedata);
// getLearnPath();
@@ -2826,30 +2964,9 @@ console.log('获取学员人数失败',err)
const closeCopyModal = () => {
state.copyModal = false;
};
const showStopModal = () => {
state.stopModal = true;
};
const closeStopModal = () => {
state.stopModal = false;
};
const showDeleteModal = () => {
state.deleteModal = true;
};
const closeDeleteModal = () => {
state.deleteModal = false;
};
const showStartModal = () => {
state.startModal = true;
};
const closeStartModal = () => {
state.startModal = false;
};
const showBackModal = () => {
state.backModal = true;
};
const closeBackModal = () => {
state.backModal = false;
};
const showProjOwner = () => {
state.ProjOwnervisible = true;
};
@@ -2862,9 +2979,7 @@ console.log('获取学员人数失败',err)
const showProjManage = () => {
state.ProjManagevisible = true;
};
const closeProjectPub = () => {
state.projectPub = false;
};
return {
...toRefs(state),
selectProjectName,
@@ -2895,9 +3010,6 @@ console.log('获取学员人数失败',err)
closeProjectPub,
tableData,
currentPage,
tableDataTotal,
pageSize,
columns,
createStoreyProject,
classifyList,
@@ -2964,6 +3076,10 @@ console.log('获取学员人数失败',err)
closeeditModal3,
releaseProject,
showProjectPub,
recallProject,
finishProject,
deleteProject,
templateProject,
};
},
};

93
src/views/system/SystemManage.vue
View File

@@ -70,7 +70,6 @@
animation="1000"
@start="onStart"
@end="onEnd"
:list="draggableList"
>
<template #item="{ element }">
<div class="item" :key="element.id">
@@ -78,6 +77,17 @@
</div>
</template>
</draggable>
<div id="qrcode" style="display:flex;flex-direction: column;">
<div>下载二维码</div>
<qrcode-vue
:value="qrcodeUrl"
:size="qrcodeSize"
style="width: 200px;height: 200px"
></qrcode-vue>
</div>
<div @click="downloadQr(200)">下载200</div>
<div @click="downloadQr(400)">下载400</div>
<div @click="downloadQr(800)">下载800</div>
</div>
</template>
<script>
@@ -93,6 +103,8 @@ import * as api from "../../api/index1";
// }
import { useRouter } from "vue-router";
import draggable from "vuedraggable";
import QrcodeVue from "qrcode.vue";
import html2canvas from "html2canvas";
export default {
name: "SystemManage",
components: {
@@ -100,6 +112,7 @@ export default {
// LoadingOutlined,
// PlusOutlined,
draggable,
QrcodeVue,
},
setup() {
const state = reactive({
@@ -135,6 +148,8 @@ export default {
name: "拖拽六",
},
],
qrcodeUrl: "https://www.baidu.com/",
qrcodeSize:800,
});
const showDrawer = () => {
@@ -214,6 +229,80 @@ export default {
const golearningpath = () => {
router.push({ path: "/learningpath", params: { id: 1 } });
};
//下载二维码图片
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")
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";
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();
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);
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();
});
};
return {
...toRefs(state),
showDrawer,
@@ -221,6 +310,7 @@ export default {
handleChange,
beforeUpload,
golearningpath,
downloadQr,
};
},
};
@@ -228,6 +318,7 @@ export default {
<style lang="scss">
.systemManage {
width: 100%;
.ant-input-textarea-show-count {
position: relative;
}