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

面授连同周边修改

Browse Source
This commit is contained in:
zhangsir
2024-10-09 18:03:01 +08:00
parent e4145f08e0
commit 29876bd0f3
3 changed files with 420 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

342
src/components/TwoDimensionalCodeNew.vue Normal 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">
开课：{{ 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 === "签到二维码") {
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>

18
src/components/student/TableStudent.vue
View File

@@ -196,7 +196,7 @@
:data-source="tableData.list"
:pagination="stuPagination"
:loading="tableData.loading"
:scroll="{ x: 1500 }"
:scroll="{ x: 'max-content' }"
row-key="id"
:row-selection="stuRowSelection"
>
@@ -467,7 +467,7 @@ const tablecolumns = ref([
title: "姓名",
dataIndex: "studentName",
key: "studentName",
width: "10%",
width: "160px",
align: "left",
className: "h",
ellipsis: true,
@@ -496,7 +496,7 @@ const tablecolumns = ref([
title: "工号",
dataIndex: "studentUserNo",
key: "studentUserNo",
width: "20%",
width: "120px",
align: "center",
className: "h",
ellipsis: true,
@@ -505,12 +505,12 @@ const tablecolumns = ref([
title: "部门",
dataIndex: "studentDepartName",
key: "studentDepartName",
width: "15%",
width: "200px",
align: "center",
className: "h",
ellipsis: true,
customCell :() => {return {style: {maxWidth: '200px',overflow: 'hidden',whiteSpace: 'nowrap',textOverflow:'ellipsis',cursor:'pointer'}}},
customRender: ({ record: { studentOrgName, studentDepartName } }) =>
allDepartShow(studentOrgName),
<a-tooltip color="white" placement="topLeft" title={allDepartShow(studentOrgName)} >{allDepartShow(studentOrgName)}</a-tooltip>
},
{
title: "所属小组",
@@ -525,8 +525,9 @@ const tablecolumns = ref([
title: "加入方式",
dataIndex: "source",
key: "source",
width: "10%",
width: "120px",
align: "center",
ellipsis: true,
customRender: ({ record: { source } }) =>
// ({ 1: "快速添加", 2: "组织", 3: "受众", 4: "报名" }[source]),
({
@@ -544,7 +545,8 @@ const tablecolumns = ref([
title: "操作",
dataIndex: "operation",
key: "operation",
width: 260,
width: '260px',
fixed: "right",
align: "center",
slots: { customRender: "action" },
},

119
src/views/courselibrary/CoursewareManage.vue
View File

@@ -755,7 +755,7 @@
v-model:value="selectTime"
type="date"
style="width: 300px; margin-right: 14px"
:placeholder="[' 课程开始时间', ' 课程结束时间']"
:placeholder="[' 面授开始时间', ' 面授结束时间']"
:show-time="{
defaultValue: [
moment('00:00', 'HH:mm'),
@@ -819,7 +819,7 @@
<template #action="{ record, column }">
<div class="operation">
<div class="fb">
<div class="jc" @click="qrcodeVisible(record, 3)" v-if="checkPer(permissions,createId)">
<div class="jc" @click="qrcodeVisible(record, 3)" v-if="checkPer(permissions,createId)&&record.evalFlag">
评估码
</div>
<!--新加 签到 -->
@@ -879,7 +879,7 @@
<div class="fb" style="margin-left: -20px">
<div class="jc">
更多
<down-outlined />
<DownOutlined />
</div>
</div>
</a-dropdown>
@@ -1120,15 +1120,14 @@
</div>
</div>
<div class="cstm_items">
<div class="signbox" style="margin-left: 14px;">
<span style="margin-right: 3px">签到设置：</span>
<div class="signbox">
<span style="margin-right: 3px">签到设置</span>
</div>
<div style="display: flex; align-items: center">
<div style="margin-right: 10px">签到</div>
<div
style="display: flex; align-items: center; margin-right: 20px"
>
<span>开始前：</span>
<span style="color: #6d7584">开始前：</span>
<a-input-number
:min="0"
:max="999999"
@@ -1144,7 +1143,7 @@
<span style="color: #999999; margin-left: 8px">分钟</span>
</div>
<div style="display: flex; align-items: center">
<span>开始后：</span>
<span style="color: #6d7584">开始后：</span>
<a-input-number
:min="0"
:max="999999"
@@ -1167,16 +1166,16 @@
</div>
<div class="b_input">
<a-checkbox v-model:checked="xjkkradioVEnd" :disabled = "itemType!=3">
<span style="color: #6d7584">是否允许自动结业</span>
<span style="color: #6d7584;margin-right:16px;">是否允许自动结业</span>
</a-checkbox>
<span>面授时间结束后</span>
<a-input-number :precision="0" :min="0" v-model:value="xjkkradioVEndTime" style="
<span style="color: #6d7584" v-if="xjkkradioVEnd">面授时间结束后</span>
<a-input-number v-if="xjkkradioVEnd" :precision="0" :min="0" v-model:value="xjkkradioVEndTime" style="
width: 60px;
height: 32px;
border-radius: 8px;
margin: 0 10px;"
/>
天
<span v-if="xjkkradioVEnd" style="color: #6d7584">天</span>
</div>
</div>
@@ -1849,7 +1848,7 @@ import ProjectManager from "@/components/project/ProjectManagerNewTeacher";
import SeeModal from "./components/seeModal.vue";
import CourseModal from "./courseModal.vue";
import * as moment from "moment";
import TwoDimensionalCode from "../../components/TwoDimensionalCode.vue";
import TwoDimensionalCode from "../../components/TwoDimensionalCodeNew.vue";
import { codeUrl, toDate } from "@/api/method";
import { queryWorkDetailById } from "@/api/indexWork";
import { queryExaminationDetailById } from "@/api/indexExam";
@@ -1863,7 +1862,7 @@ import DropDown from "@/components/common/DropDown";
import { checkPer, checkOwner } from "@/utils/utils";
import dayjs from "dayjs";
import {duration} from "moment";
import { DeleteOutlined } from '@ant-design/icons-vue';
import { DeleteOutlined,DownOutlined } from '@ant-design/icons-vue';
//列表表格
const moreLine = (item) => {
@@ -2032,17 +2031,6 @@ const columns6 = [
ellipsis: true,
slots: { customRender: "teacherName" },
},
{
title: "时长",
dataIndex: "duration",
key: "duration",
width: "12%",
ellipsis: true,
align: "center",
customRender: ({ text }) => {
return text ? Math.floor(text / 60) : "-";
},
},
{
title: "面授时间",
dataIndex: "starttime",
@@ -2054,6 +2042,17 @@ const columns6 = [
return text.record.beginTime + ' ~ ' + text.record.endTime
},
},
{
title: "时长",
dataIndex: "duration",
key: "duration",
width: "12%",
ellipsis: true,
align: "center",
customRender: ({ text }) => {
return text ? text : "-";
},
},
{
title: "学员数",
dataIndex: "studentCnt",
@@ -2095,8 +2094,8 @@ const columns6 = [
width: "10%",
align: "center",
ellipsis: true,
customRender: ({ text }) => {
return text ? text : "-";
customRender: ( text ) => {
return <a-tooltip color="white" placement="bottom" title = {text.record.createName} >{text.record.createName ? text.record.createName : "-"}</a-tooltip>
},
},
{
@@ -2105,9 +2104,9 @@ const columns6 = [
key: "saddress",
width: "30%",
align: "center",
ellipsis: true,
customRender: ({ text }) => {
return text ? text : "-";
customCell:() => {return {style: {maxWidth: '200px',minWidth: '100px',overflow: 'hidden',whiteSpace: 'nowrap',textOverflow:'ellipsis',cursor:'pointer',padding:'0px 10px'}}},
customRender: ( {text} ) => {
return <a-tooltip color="white" placement="bottom" title = {text} >{text ? text : "-"}</a-tooltip>
},
},
{
@@ -2320,13 +2319,14 @@ export default defineComponent({
// },
addOnlineCourse,
TwoDimensionalCode,
DeleteOutlined
DeleteOutlined,
DownOutlined
},
setup() {
const CourseModalRef = ref(null);
const store = useStore();
const sysTypeOptions = computed(() => store.state.content_type);
const durationText = computed(() => state.xjkkinputV3?.length?dayjs(state.xjkkinputV3[1]).diff(dayjs(state.xjkkinputV3[0]),'minute'):'请输入持续时间');
const durationText = computed(() => state.xjkkinputV3?.length==2?dayjs(state.xjkkinputV3[1]).diff(dayjs(state.xjkkinputV3[0]),'minute')|| '请输入持续时间':'请输入持续时间');
const state = reactive({
tableCoursePlanLoading: false,
@@ -2981,6 +2981,10 @@ export default defineComponent({
watch(durationText,(val)=>{
nums.value++
if(nums.value>1){
if(val == '请输入持续时间'){
state.duration = null;
return
}
state.duration = val;
}
})
@@ -4043,6 +4047,9 @@ function onFocusEnd(){
message.error('请填写结业时间')
return
}
if(state.checked4 && !state.assessmentId){
return message.error('请选择评估');
}
console.log(postData,'传输的数据')
// if(!postData.duration){
// return message.error("请输入持续时间");
@@ -4133,7 +4140,7 @@ function onFocusEnd(){
state.stuColumns = [
{
title: "岗位",
width: "8%",
width: "160px",
dataIndex: "studentJobName",
key: "7",
align: "center",
@@ -4151,10 +4158,11 @@ function onFocusEnd(){
},
{
title: "Band",
width: "8%",
width: "120px",
dataIndex: "studentBandDesc",
key: "7",
align: "center",
ellipsis: true,
customRender: (text) => {
return (
<div class="racona">
@@ -4167,10 +4175,11 @@ function onFocusEnd(){
},
{
title: "报名状态",
width: "8%",
width: "120px",
dataIndex: "status",
key: "5",
align: "center",
ellipsis: true,
customRender: ({ record }) => {
switch (String(record.status)) {
case "0":
@@ -4185,28 +4194,31 @@ function onFocusEnd(){
{
title: "签到状态",
width: "8%",
width: "120px",
dataIndex: "signstatus",
key: "7",
align: "center",
ellipsis: true,
customRender: ({ record }) =>
record.signStatus ? "已签到" : "未签到",
},
{
title: "评估状态",
width: "8%",
width: "120px",
dataIndex: "evastatus",
key: "8",
align: "center",
ellipsis: true,
customRender: ({ record }) =>
record.assessmentStatus?"已评估" : "未评估",
},
{
title: "评分",
width: "8%",
width: "120px",
dataIndex: "studentScore",
key: "8",
align: "center",
ellipsis: true,
customRender: ({ record }) => {
return (
<div class="racona">
@@ -4270,36 +4282,39 @@ function onFocusEnd(){
// },
{
title: "作业状态",
width: "8%",
width: "120px",
dataIndex: "workStatus",
key: "5",
align: "center",
ellipsis: true,
customRender: ({ record }) => {
switch (String(record.workStatus)) {
case "null":
return "未完成";
return "未提交";
case "0":
return "未完成";
return "未提交";
case "1":
return "已完成";
return "已提交";
case "2":
return "未完成";
return "未提交";
}
},
},
{
title: "考试成绩",
width: "8%",
width: "120px",
dataIndex: "examinationScore",
key: "8",
align: "center",
ellipsis: true,
},
{
title: "结业状态",
width: "15%",
width: "120px",
dataIndex: "completionStatus",
key: "8",
align: "center",
ellipsis: true,
customRender: ({ record }) => {
return (
<div>
@@ -5222,11 +5237,11 @@ function onFocusEnd(){
const qrcodeVisible = (record, type) => {
// `${location.protocol}//${location.host}${import.meta.env.VUE_APP_BASE_API}/stu/project/redirectDetail?courseId=${record.id}`
state.codevisible = true;
let teacherNames = record.offteachers?.filter(teacher => teacher.teacherName !== null).map(teacher => teacher.teacherName);
let teacherNames = record.offteachers?.filter(teacher => teacher.name !== null).map(teacher => teacher.name);
state.codeInfo = {
title: type == 1 ? "【课程】二维码" : type == 2 ? "【签到】二维码" : "【评估】二维码",
name: record.name ? record.name + type == 2 ?'签到' : '评估' : "",
teacherName: teacherNames.length > 0 ? teacherNames.join(' ') : "",
name: record.name,
teacherName: teacherNames.length > 3 ? teacherNames.slice(0,3).join(',')+'...' : teacherNames.join(','),
url:
type == 1
? process.env.VUE_APP_BASE_API +
@@ -5236,7 +5251,8 @@ function onFocusEnd(){
record.id
}&taskType=${2}&type=${3}&openCourseId=${
record.id
}` : `${location.protocol}//${location.host}/student-h5/investigatpage?id=${record.id}&type=3&infoId=${record.id}&courseId=${record.assessmentId}&chapterOrStageId=0&level=${record.name}`
}` : `${location.protocol}//${location.host}/student-h5/investigatpage?id=${record.id}&type=3&infoId=${record.id}&courseId=${record.assessmentId}&chapterOrStageId=0&level=${record.name}`,
titleTeacherName: moreLine(record.offteachers),
};
console.log("codeInfo", state.codeInfo, record);
state.codeIndex = 0;
@@ -7585,8 +7601,9 @@ function onFocusEnd(){
}
.stmm_i5 {
display: flex;
justify-content: space-between;
// display: flex;
// justify-content: space-between;
margin-right: 20px;
}
.stmm_i6 {