Merge branch 'zcwy_0827_pingcode817' into dev_master

This commit is contained in:
nisen
2024-10-15 18:37:21 +08:00
4 changed files with 1054 additions and 557 deletions

View File

@@ -14,4 +14,5 @@ VUE_APP_ONLINE_CLASS_URL=//u-pre.boe.com/mobile/pages/study/courseStudy?id=
VITE_BOE_CASS_DETAIL_URL=//u-pre.boe.com/pc/case/detail?id= VITE_BOE_CASS_DETAIL_URL=//u-pre.boe.com/pc/case/detail?id=
VUE_APP_EXAM_DETAIL_URL=//u-pre.boe.com/mobile/pages/exam/exam?id= VUE_APP_EXAM_DETAIL_URL=//u-pre.boe.com/mobile/pages/exam/exam?id=
# 批量面授报名模板 # 批量面授报名模板
VUE_APP_FACE_STUDENT_TEMPLATE=coursefile/批量面授报名模版-1679595849719.xlsx VUE_APP_FACE_STUDENT_TEMPLATE=coursefile/批量面授报名模版-1679595849719.xlsx
VUE_APP_FILE_PATH=/upload/boe/file/

View File

@@ -0,0 +1,342 @@
<template>
<div class="twoDimensionalCode">
<!--二维码页面 -->
<a-modal
:visible="codevisible"
:footer="null"
:closable="closableQR"
wrapClassName="codeModal"
style="margin-top: 400px"
:zIndex="9999"
@cancel="qr_exit"
>
<div id="qrcode" class="QR">
<div class="qr_header"></div>
<div class="qr_main">
<div class="qrm_header">
<span style="title">{{
codeInfo.title ? codeInfo.title : ""
}}</span>
<div class="close_exit" @click="closeCodeModal"></div>
</div>
<div class="downloadCode" style="">
<div class="qrm_body">
<div :class="codeInfo.teacherName?'qrm_body_item':''">
<div v-if="codeInfo.name&&!codeInfo.teacherName" class="codename">
{{ codeInfo.name ? codeInfo.name : "" }}
</div>
<div v-if="codeInfo.name&&codeInfo.teacherName" class="codename" :title="codeInfo.name">
开课{{ codeInfo.name ? codeInfo.name : "" }}
</div>
<div v-if="codeInfo.teacherName" class="codename" :title="codeInfo.titleTeacherName">
讲师{{ codeInfo.teacherName ? codeInfo.teacherName : "" }}
</div>
</div>
<qrcode-vue
:value="codeInfo.url.startsWith('/')?(`${domain+codeInfo.url}&t=10`):`${codeInfo.url}&t=10`"
:size="qrcodeSize"
style="width: 200px; height: 200px"
></qrcode-vue>
</div>
</div>
<div class="codeUrl" :style="{ display: showUrl ? 'flex' : 'flex' }">
<div class="codeUrlLink">链接</div>
<a-input
:value="codeInfo.url.startsWith('/')?`${domain+codeInfo.url}&t=10`:`${codeInfo.url}&t=10`"
disabled
class="codeUrlInp"
/>
<a-input
:value="codeInfo.url.startsWith('/')?`${domain+codeInfo.url}&t=10`:`${codeInfo.url}&t=10`"
id="courseUrl"
class="codeUrlInp"
style="position: absolute; opacity: 0; z-index: -1"
/>
<div @click="copyUrl" class="codeUrlCopy">复制链接</div>
</div>
<div class="qrm_footer">
<span
style="color: #387df7; cursor: pointer"
@click="downloadQr(200)"
>下载二维码</span
>
<!-- <div class="qrmbtn" @click="downloadQr(200)">
<div class="btntext">200*200</div>
</div> -->
<!-- <div class="qrmbtn" @click="downloadQr(200)">
<div class="btntext">400*400</div>
</div>
<div class="qrmbtn" @click="downloadQr(200)">
<div class="btntext">800*800</div>
</div> -->
</div>
</div>
</div>
</a-modal>
<!--二维码页面 -->
</div>
</template>
<script>
import { reactive, toRefs, watch } from "vue";
import QrcodeVue from "qrcode.vue";
import html2canvas from "html2canvas";
import { message } from "ant-design-vue";
export default {
name: "TwoDimensionalCode",
components: {
QrcodeVue,
},
props: {
codevisible: {
type: Boolean,
default: false,
},
codeInfo: {
type: Object,
default: function () {
return {};
},
},
index: {
type: String,
default: "",
},
type: {
type: String,
default: "",
},
},
setup(props, ctx) {
const state = reactive({
qrcodeSize: 800,
codeInfo: {},
courseUrl: "https://www.baidu.com/",
showUrl: false,
domain: location.protocol+'//'+location.host
});
//下载二维码图片
const downloadQr = (num) => {
state.qrcodeSize = num;
html2canvas(
document.querySelectorAll(".downloadCode")[Number(props.index)],
{
useCORS: true, //支持图片跨域
}
).then((canvas) => {
// console.log("canvas", canvas, canvas.width, canvas.style.width);
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 canvas =document.getElementsByClassName('codeModal')[Number(props.index)].getElementsByTagName('canvas')[0];
// 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 copyUrl = () => {
// const range = document.createRange(); //创建range对象
// range.selectNode(document.getElementById('courseUrl')); //获取复制内容的 id 选择器
// const selection = window.getSelection(); //创建 selection对象
// if (selection.rangeCount > 0) selection.removeAllRanges(); //如果页面已经有选取了的话,会自动删除这个选区,没有选区的话,会把这个选取加入选区
// selection.addRange(range); //将range对象添加到selection选区当中会高亮文本块
// document.execCommand("Copy"); //复制选中的文字到剪贴板
// message.success('复制成功')
// selection.removeRange(range); // 移除选中的元素
var input = document.createElement("input"); // 创建input对象
input.value = state.codeInfo.url.startsWith('/')?(state.domain+state.codeInfo.url):state.codeInfo.url; // 设置复制内容
document.body.appendChild(input); // 添加临时实例
input.select(); // 选择实例内容
document.execCommand("Copy"); // 执行复制
document.body.removeChild(input); // 删除临时实例
message.success("复制成功!");
};
const closeCodeModal = () => {
ctx.emit("update:codevisible", false);
};
watch(() => {
let obj = {
title: "",
name: "",
url: "",
teacherName: "",
};
state.codeInfo = Object.assign(obj, props.codeInfo);
console.log("codeInfo22222", state.codeInfo, props.index, props.type);
if (props.type === "签到二维码"|| props.type === "评估二维码") {
state.showUrl = false;
console.log(" state.showUrl", state.showUrl);
} else if (props.type === "课程二维码") {
state.showUrl = true;
}
});
return {
...toRefs(state),
downloadQr,
closeCodeModal,
copyUrl,
};
},
};
</script>
<style scoped lang="scss">
.twoDimensionalCode {
}
.codeModal {
.ant-modal {
.ant-modal-content {
width: 479px !important;
.ant-modal-body {
.QR {
z-index: 9999;
width: 520px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%, -50%);
.qr_header {
position: absolute;
width: calc(100%);
height: 40px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.qr_main {
width: 100%;
position: relative;
.qrm_header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
.title {
font-size: 16px;
font-weight: 600;
color: #333333;
line-height: 22px;
}
.close_exit {
position: absolute;
right: 42px;
cursor: pointer;
width: 20px;
height: 20px;
background-image: url(@/assets/images/coursewareManage/close.png);
background-size: 100% 100%;
}
}
.qrm_body {
width: 100%;
padding-top: 22px;
padding-bottom: 32px;
display: flex;
flex-direction: column;
align-items: center;
.qrm_body_item{
width: 100%;
margin-left: 270px;
}
.codename {
font-size: 18px;
font-weight: 400;
color: #333333;
line-height: 25px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 300px;
}
}
.codeUrl {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
.codeUrlLink {
width: 72px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 400;
color: #c7cbd2;
line-height: 20px;
border: 1px solid #c7cbd2;
border-right: 0px solid #c7cbd2;
}
.codeUrlInp {
width: 305px;
height: 40px;
border: 1px solid #c7cbd2;
}
.ant-input-disabled {
background-color: rgba(0, 0, 0, 0) !important;
}
.ant-input[disabled] {
background-color: rgba(0, 0, 0, 0) !important;
}
.codeUrlCopy {
width: 96px;
height: 40px;
background-color: #4ea6ff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 20px;
cursor: pointer;
margin-left: 8px;
}
}
.qrm_footer {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 44px;
.qrmbtn {
width: 80px;
height: 32px;
display: flex;
line-height: 32px;
justify-content: center;
border-radius: 4px;
border: 1px solid #387df7;
// margin-left: 16px;
cursor: pointer;
.btntext {
color: #387df7;
}
}
}
}
}
}
}
}
}
</style>

View File

@@ -196,7 +196,7 @@
:data-source="tableData.list" :data-source="tableData.list"
:pagination="stuPagination" :pagination="stuPagination"
:loading="tableData.loading" :loading="tableData.loading"
:scroll="{ x: 1500 }" :scroll="{ x: 1350 }"
row-key="id" row-key="id"
:row-selection="stuRowSelection" :row-selection="stuRowSelection"
> >
@@ -467,7 +467,7 @@ const tablecolumns = ref([
title: "姓名", title: "姓名",
dataIndex: "studentName", dataIndex: "studentName",
key: "studentName", key: "studentName",
width: "10%", width: "80px",
align: "left", align: "left",
className: "h", className: "h",
ellipsis: true, ellipsis: true,
@@ -496,7 +496,7 @@ const tablecolumns = ref([
title: "工号", title: "工号",
dataIndex: "studentUserNo", dataIndex: "studentUserNo",
key: "studentUserNo", key: "studentUserNo",
width: "20%", width: "60px",
align: "center", align: "center",
className: "h", className: "h",
ellipsis: true, ellipsis: true,
@@ -505,12 +505,13 @@ const tablecolumns = ref([
title: "部门", title: "部门",
dataIndex: "studentDepartName", dataIndex: "studentDepartName",
key: "studentDepartName", key: "studentDepartName",
width: "15%", width: "120px",
align: "center", align: "center",
className: "h", className: "h",
ellipsis: true, customCell :() => {return {style: {maxWidth: '200px',overflow: 'hidden',whiteSpace: 'nowrap',textOverflow:'ellipsis',cursor:'pointer'}}},
customRender: ({ record: { studentOrgName, studentDepartName } }) => customRender: ({ record: { studentOrgName, studentDepartName } }) =>
allDepartShow(studentOrgName), // <a-tooltip color="white" placement="topLeft" title={allDepartShow(studentOrgName)} >{allDepartShow(studentOrgName)}</a-tooltip>
<a-tooltip color="white" placement="topLeft" title={studentOrgName} >{studentDepartName}</a-tooltip>
}, },
{ {
title: "所属小组", title: "所属小组",
@@ -522,10 +523,10 @@ const tablecolumns = ref([
ellipsis: true, ellipsis: true,
}, },
{ {
title: "加入方式", title: "报名方式",
dataIndex: "source", dataIndex: "source",
key: "source", key: "source",
width: "10%", width: "60px",
align: "center", align: "center",
customRender: ({ record: { source } }) => customRender: ({ record: { source } }) =>
// ({ 1: "快速添加", 2: "组织", 3: "受众", 4: "报名" }[source]), // ({ 1: "快速添加", 2: "组织", 3: "受众", 4: "报名" }[source]),
@@ -535,8 +536,9 @@ const tablecolumns = ref([
2: "手动加入", 2: "手动加入",
3: "手动加入", 3: "手动加入",
4: "导入", 4: "导入",
5: "报名", 5: "自主报名",
6: "导入", 6: "导入",
8: "扫码报名",
}[source]), }[source]),
}, },
...props.columns, ...props.columns,
@@ -544,7 +546,8 @@ const tablecolumns = ref([
title: "操作", title: "操作",
dataIndex: "operation", dataIndex: "operation",
key: "operation", key: "operation",
width: 260, width: '120px',
fixed: "right",
align: "center", align: "center",
slots: { customRender: "action" }, slots: { customRender: "action" },
}, },
@@ -559,7 +562,10 @@ function allDepartShow(a, b) {
: a; : a;
let depart = b == "" || b == null || b == undefined ? (b = "") : b; let depart = b == "" || b == null || b == undefined ? (b = "") : b;
let allname = org == "" && depart == "" ? "-" : org + depart; let allname = org == "" && depart == "" ? "-" : org + depart;
return allname; const parts = allname.split('/');
const reversedParts = parts.reverse();
const reversedStr = reversedParts.join('/');
return reversedStr;
} }
const tableParam = ref({ const tableParam = ref({
@@ -858,7 +864,9 @@ const exportHomeWorkShow = () => {
// message.success("导出作业成功"); // message.success("导出作业成功");
exportHomeWorkV.value = true; exportHomeWorkV.value = true;
downloadUrl.value = res.data.data; downloadUrl.value = res.data.data;
}); }).catch(err=>{
// message.error(err.data.msg)
})
}; };
// //导出作业 // //导出作业
// const exportHomeWork = () => { // const exportHomeWork = () => {

File diff suppressed because it is too large Load Diff