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

style:增加项目证书创建添加

Browse Source
This commit is contained in:
wyx
2023-01-29 18:28:56 +08:00
parent 8d85ff297e
commit 7c27be2bd7
4 changed files with 1348 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/nodata.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

756
src/components/drawers/project/AddCertificate.vue Normal file
View File

@@ -0,0 +1,756 @@
<template>
<a-drawer
:visible="ACertificate"
class="drawerStyle AddCertificate"
width="80%"
title="添加证书"
placement="right"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
<div class="header">
<div class="headerTitle">{{ edit ? "编辑" : "添加" }}证书</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../../assets/images/basicinfo/close.png"
@click="closeDrawer"
/>
</div>
<div class="contentMain">
<div class="main_left">
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">证书名称：</span>
</div>
<div class="btnbox">
<a-input
v-model:value="inputV1"
style="width: 400px; height: 40px; border-radius: 8px"
placeholder="请输入活动名称"
maxlength="20"
/>
</div>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">证书：</span>
</div>
<div class="btnbox">
<button class="xkbtn11" @click="CreateCertificate" style="margin-top: 0px;">
创建证书
</button>
</div>
</div>
<div class="main_item">
<div class="signbox">
<span style="margin-right: 3px;font-size: 16px;color: #333;">设置获得条件</span>
</div>
<div class="btnbox">
</div>
</div>
<div class="main_item">
<div class="signbox" style="width:30px;">
<span style="margin-right: 3px;font-size: 16px;color: #333;"></span>
</div>
<div class="btnbox">
<a-radio-group v-model:value="radioV1">
<a-radio v-model:checked="checked" :value="1" @click="cloradio1">
完成项目
</a-radio>
<br/>
<div style="height:60px;margin-left: 24px;display: flex;align-items: center;">
<a-radio-group v-model:value="large" size="small">
<a-radio-button value="1">全部任务</a-radio-button>
<a-radio-button value="2">完成必修任务</a-radio-button>
</a-radio-group>
</div>
<a-radio v-model:checked="checked" :value="2" @click="cloradio1">
完成阶段
</a-radio>
<br/>
<div style="height:60px;margin-left: 24px;display: flex;align-items: center;">
<a-select
ref="select"
size="small"
placeholder="请选择阶段"
v-model:value="value1"
style="width: 120px"
@focus="focus"
@change="handleChange"
>
<a-select-option value="jack">第一阶段</a-select-option>
<a-select-option value="lucy">第二阶段</a-select-option>
<a-select-option value="Yiminghe">第三阶段</a-select-option>
</a-select>
</div>
<a-radio v-model:checked="checked" :value="3" @click="cloradio1">
完成任务
</a-radio>
<br/>
<div style="height:60px;margin-left: 24px;display: flex;align-items: center;">
<a-select
ref="select"
size="small"
placeholder="请选择任务"
v-model:value="value1"
style="width: 120px"
@focus="focus"
@change="handleChange"
>
<a-select-option value="jack">任务一</a-select-option>
<a-select-option value="lucy">任务二</a-select-option>
<a-select-option value="Yiminghe">任务三</a-select-option>
</a-select>
</div>
<a-radio v-model:checked="checked" :value="4" @click="cloradio1">
考试合格
</a-radio>
<br/>
<div style="height:60px;margin-left: 24px;display: flex;align-items: center;">
<a-select
ref="select"
size="small"
placeholder="请选择考试"
v-model:value="value1"
style="width: 120px"
@focus="focus"
@change="handleChange"
>
<a-select-option value="jack">考试一</a-select-option>
<a-select-option value="lucy">考试二</a-select-option>
<a-select-option value="Yiminghe">考试三</a-select-option>
</a-select>
</div>
<a-radio v-model:checked="checked" :value="5" @click="cloradio1">
获得积分
</a-radio>
<br/>
<div style="height:60px;margin-left: 24px;display: flex;align-items: center;">
<a-button style="border:0px solid red;box-shadow: none;">高于</a-button>
<a-input-number id="inputNumber" v-model:value="value" :min="1" :max="100" style="width:70px;" />
<a-button style="border:0px solid red;box-shadow: none;">分可获得，当前项目积分为 10 分</a-button>
</div>
<a-radio v-model:checked="checked" :value="6" @click="cloradio1">
完成作业
</a-radio>
<br/>
<div style="height:60px;margin-left: 24px;display: flex;align-items: center;">
<a-button style="border:0px solid red;box-shadow: none;">高于</a-button>
<a-input-number id="inputNumber" v-model:value="value" :min="1" :max="100" style="width:70px;" />
<a-button style="border:0px solid red;box-shadow: none;">分可获得证书</a-button>
</div>
<a-radio v-model:checked="checked" :value="7" @click="cloradio1">
优秀小组长
</a-radio>
<br/>
<div style="height:60px;margin-left: 24px;display: flex;align-items: center;">
<a-button style="border:0px solid red;box-shadow: none;">小组积分高于</a-button>
<a-input-number id="inputNumber" v-model:value="value" :min="1" :max="100" style="width:70px;" />
<a-button style="border:0px solid red;box-shadow: none;">分小组长可获得证书</a-button>
</div>
<a-radio v-model:checked="checked" :value="8" @click="cloradio1">
考勤按时签到可获得证书
</a-radio>
<br/>
<div style="height:40px;"></div>
</a-radio-group>
</div>
</div>
<div class="main_item" style="height: 40px">
<div class="signbox">
<span style="margin-right: 3px"></span>
</div>
<div class="btnbox"></div>
</div>
</div>
</div>
<div class="main_btns">
<button class="btn1" @click="closeDrawer1">取消</button>
<button class="btn2" @click="updateActivityInfo">确定</button>
</div>
</div>
</a-drawer>
<!-- 创建证书抽屉 -->
<CreateCertificate
v-model:CCertificate="CCertificate"
/>
</template>
<script>
import { reactive, toRefs } from "vue";
import * as api from "../../../api/indexActivity";
import * as apiTask from "../../../api/indexTaskadd";
import { RouterEditTask } from "@/api/indexTask";
import { message } from "ant-design-vue";
import dayjs from "dayjs";
import CreateCertificate from "../../../components/drawers/project/CreateCertificate";
export default {
name: "AddActive",
components: {
CreateCertificate
},
props: {
ACertificate: {
type: Boolean,
default: false,
},
EditActiveId: {
type: Number,
default: null,
},
edit: {
// 是否为编辑
type: Boolean,
default: null,
},
projectId: {
type: Number,
default: null,
},
chooseStageId: {
type: Number,
default: null,
},
routerTaskId: {
type: Number,
default: 0,
},
isLevel: {
// 是否是关卡页面触发
type: Number,
default: null,
},
EditWorkId: {
// 要编辑的workId
type: Number,
default: null,
},
projectTaskId: {
// 要编辑的projectId
type: Number,
default: null,
},
routerId: {
type: Number,
default: null,
},
isactive: {
type: Number,
default: null,
},
projectTemplateId: {
type: Number,
default: null,
},
},
setup(props, ctx) {
const state = reactive({
inputV1: "",
inputV2: "",
inputV3: "",
inputV4: "",
inputV5: "",
inputV6: "",
textV1: "",
textV2: "",
radioV1: "",
time: "",
isClick: false,
CCertificate: false,
});
const closeDrawer = () => {
ctx.emit("update:ACertificate", false);
ctx.emit("update:edit", false);
state.radioV1 = "";
state.inputV1 = "";
state.inputV2 = "";
state.inputV3 = "";
state.inputV4 = "";
state.inputV5 = "";
state.inputV6 = "";
state.textV1 = "";
state.textV2 = "";
state.time = "";
localStorage.setItem("stageId", props.chooseStageId);
localStorage.setItem("chapterId", props.isactive);
};
const closeDrawer1 = () => {
ctx.emit("update:ACertificate", false);
ctx.emit("update:edit", false);
state.radioV1 = "";
state.inputV1 = "";
state.inputV2 = "";
state.inputV3 = "";
state.inputV4 = "";
state.inputV5 = "";
state.inputV6 = "";
state.textV1 = "";
state.textV2 = "";
state.time = "";
localStorage.setItem("stageId", props.chooseStageId);
localStorage.setItem("chapterId", props.isactive);
};
const queryActive = () => {
api
.getActivity(props.EditActiveId)
.then((res) => {
console.log("获取活动信息", res);
//获取活动信息
state.inputV1 = res.data.data.activityName;
state.textV1 = res.data.data.activityNotice;
state.textV2 = res.data.data.activityExplain;
state.inputV2 = res.data.data.activityDuration;
state.inputV3 = res.data.data.activityAddress;
state.inputV5 = res.data.data.afterSignIn;
state.inputV6 = res.data.data.signOutTime;
state.inputV4 = res.data.data.beforeSignIn;
state.radioV1 = Number(res.data.data.standardSettings);
state.time = [
dayjs(res.data.data.activityStartTime, "YYYY-MM-DD HH:mm"),
dayjs(res.data.data.activityEndTime, "YYYY-MM-DD HH:mm"),
];
})
.catch(() => {});
};
const afterVisibleChange = (bool) => {
if (bool && props.edit) {
queryActive();
}
};
const cloradio1 = (value) => {
if (value != "") {
state.radioV1 = "";
}
};
const updateTask = async (res) => {
if (props.isLevel == 1) {
if (!props.isactive) {
message.destroy();
return message.warning("请先选中关卡");
}
await RouterEditTask({
chapterId: props.isactive,
courseId: res.data.data.activityId,
duration: res.data.data.activityDuration,
name: res.data.data.activityName,
routerId: props.routerId,
routerTaskId: props.routerTaskId || 0,
type: 9,
})
.then(() => {
//message.success(`${props.edit ? "编辑" : "新增"}关卡任务成功`);
})
.catch(() => {
//message.error(`${props.edit ? "编辑" : "新增"}关卡任务失败`);
});
} else if (props.isLevel == 2) {
await apiTask
.addTask({
courseId: res.data.data.activityId,
duration: res.data.data.activityDuration,
name: res.data.data.activityName,
projectId: props.projectId,
projectTaskId: props.projectTaskId || 0,
stageId: props.chooseStageId || 0,
type: 9,
})
.then(() => {
//message.success(`${props.edit ? "编辑" : "新增"}阶段任务成功`);
})
.catch(() => {
//////message.error(`${props.edit ? "编辑" : "新增"}阶段任务失败`);
});
} else if (props.isLevel == 3) {
await apiTask
.addTempTask({
courseId: res.data.data.activityId,
duration: res.data.data.activityDuration,
name: res.data.data.activityName,
projectTemplateId: props.projectTemplateId,
projectTaskId: props.projectTaskId || 0,
stageId: props.chooseStageId || 0,
type: 9,
})
.then(() => {
ctx.emit("changeData", false);
//message.success(`${props.edit ? "编辑" : "新增"}阶段任务成功`);
})
.catch(() => {
//message.error(`${props.edit ? "编辑" : "新增"}阶段任务失败`);
});
}
};
//创建活动
const updateActivityInfo = () => {
let c = 1111;
if(c>0){
closeDrawer();
return
}
if (!state.inputV1) {
message.destroy();
return message.warning("请输入活动名称");
}
if (!state.textV1) {
message.destroy();
return message.warning("请输入活动公告");
}
if (!state.time) {
message.destroy();
return message.warning("请输入活动时间");
}
if (!state.inputV2) {
message.destroy();
return message.warning("请输入活动时长");
}
if (!state.inputV3) {
message.destroy();
return message.warning("请输入活动地址");
}
if (state.isClick) {
message.destroy();
message.error("请勿频繁点击");
return;
}
state.isClick = true;
let obj = {
activityAddress: state.inputV3, //活动地址
activityDuration: state.inputV2, //活动时长
activityExplain: state.textV2, //活动说明
activityEndTime: dayjs(state.time[1]).format("YYYY-MM-DD HH:mm"), //活动结束时间
activityId: props.edit ? props.EditActiveId : 0, //活动ID
activityName: state.inputV1, //活动名称
activityNotice: state.textV1, //活动公告
activityStartTime: dayjs(state.time[0]).format("YYYY-MM-DD HH:mm"), //活动开始时间
activityTag: "", //活动逻辑删除标识
afterSignIn: state.inputV5 ? state.inputV5 : 0, //活动开始后多少分钟签到
beforeSignIn: state.inputV4 ? state.inputV4 : 0, //活动开始前多少分钟签到
signOutTime: state.inputV6, //签退开始时间
standardSettings: state.radioV1, //标准设置
};
console.log("obj", obj);
if (props.edit) {
//更新编辑活动信息
api
.updateActivity(obj)
.then(async (res) => {
closeDrawer();
await updateTask(res);
ctx.emit("changeData", false);
message.destroy();
message.success("更新成功");
state.isClick = false;
})
.catch(() => {
message.destroy();
message.error("更新失败");
state.isClick = false;
});
} else {
//新建活动信息
api
.createActivity(obj)
.then(async (res) => {
message.destroy();
message.success("创建成功");
closeDrawer();
await updateTask(res);
ctx.emit("changeData", false);
state.isClick = false;
})
.catch(() => {
message.destroy();
message.error("创建失败");
state.isClick = false;
});
}
};
const range = (start, end) => {
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
};
const disabledDate = (current) => {
// Can not select days before today and today
console.log("1111", dayjs().endOf("day"));
return current && current < dayjs().startOf("day");
};
const disabledDateTime = () => {
return {
disabledHours: () => range(0, 24).splice(4, 20),
disabledMinutes: () => range(30, 60),
disabledSeconds: () => [55, 56],
};
};
// 创建证书
function CreateCertificate() {
state.CCertificate = true;
}
return {
...toRefs(state),
afterVisibleChange,
closeDrawer,
closeDrawer1,
cloradio1,
updateActivityInfo,
disabledDateTime,
disabledDate,
CreateCertificate
};
},
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
background-color: #fafafa !important;
}
.xkbtn11 {
cursor: pointer;
width: 130px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-right: 8px;
color: #fff;
margin-top: 0px;
}
.AddCertificate {
.drawerMain {
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
margin-left: 24px;
}
}
.contentMain {
display: flex;
justify-content: space-between;
.ant-input {
height: 88px;
width: 384px;
border-radius: 8px;
}
.ant-picker {
border-radius: 8px;
}
.main_left {
margin-top: 32px;
padding-right: 30px;
flex: 1;
border-right: 1px solid #e8e8e8;
.main_item {
display: flex;
align-items: center;
margin-top: 32px;
margin-bottom: 32px;
.signbox {
width: 120px;
display: flex;
justify-content: end;
align-items: center;
.sign {
margin-right: 5px;
}
}
.btnbox {
display: flex;
flex: 1;
align-items: center;
.xkbtn {
cursor: pointer;
width: 130px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-right: 8px;
color: #fff;
}
}
}
.main_item2 {
display: flex;
align-items: flex-start;
margin-bottom: 32px;
.textarea {
width: 400px;
.ant-input {
width: 100%;
}
.ant-input-textarea-show-count {
position: relative;
}
.ant-input-textarea-show-count::after {
position: absolute;
right: 10px;
bottom: 0px;
}
.ant-input {
border-radius: 8px;
}
}
.signbox {
width: 120px;
display: flex;
justify-content: end;
align-items: center;
.sign {
margin-right: 5px;
}
}
.kqszbox {
.qdqtbox {
margin-left: 5px;
cursor: pointer;
}
.qdbtn,
.qtbtn {
width: 75px;
height: 24px;
background: rgba(56, 139, 225, 0.16);
border-radius: 2px;
border: 1px solid #387df7;
display: flex;
align-items: center;
justify-content: center;
.btntext {
color: #387df7;
}
}
.setbox {
flex-wrap: wrap;
margin-top: 10px;
margin-bottom: 24px;
.timerbox {
margin-top: 22px;
margin-right: 32px;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
}
}
.btnbox2 {
display: flex;
flex-direction: column;
justify-content: flex-start;
.xkbtn {
cursor: pointer;
width: 130px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-right: 16px 8px 32px 0;
color: #fff;
margin-top: 16px;
margin-bottom: 60px;
}
}
}
}
}
.main_btns {
height: 72px;
width: 100%;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
.btn1 {
width: 100px;
height: 40px;
border: 1px solid #4ea6ff;
border-radius: 8px;
color: #4ea6ff;
background-color: #fff;
cursor: pointer;
}
.btn2 {
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
}
}
}
}
</style>

481
src/components/drawers/project/CreateCertificate.vue Normal file
View File

@@ -0,0 +1,481 @@
<template>
<a-drawer
:visible="CCertificate"
class="drawerStyle CreateCertificate"
width="35%"
placement="right"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
<div class="header">
<div class="headerTitle">{{ edit ? "编辑" : "创建" }}证书</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../../assets/images/basicinfo/close.png"
@click="closeDrawer"
/>
</div>
<a-form
ref="formRef"
name="custom-validation"
:model="state"
:rules="rules"
v-bind="layout"
@finish="handleFinish"
@validate="handleValidate"
@finishFailed="handleFinishFailed"
>
<div class="contentMain">
<div class="main_left">
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">证书名称：</span>
</div>
<div class="btnbox">
<a-input
v-model:value="inputV1"
style="width: 400px; height: 40px; border-radius: 8px;"
placeholder="请输入证书名称"
show-count :maxlength="20"
/>
</div>
</div>
<div class="main_item" style="align-items:flex-start;">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">证书封面：</span>
</div>
<div class="btnbox" style="flex-direction:column;align-items:flex-start;">
<a-upload
v-model:file-list="fileList"
name="avatar"
style="width:200px;"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:before-upload="beforeUpload"
@change="handleChange"
>
<img v-if="imageUrl" :src="imageUrl" alt="avatar" />
<div v-else>
<loading-outlined v-if="loading"></loading-outlined>
<plus-outlined v-else></plus-outlined>
<div class="ant-upload-text">+</div>
</div>
</a-upload>
<div style="font-size:14px;color:#666;">建议尺寸：750*348 格式支持jpg、gif、png、jpeg、svg、bmp</div>
</div>
</div>
<div class="main_item2">
<div class="signbox">
<span style="margin-right: 3px">证书说明：</span>
</div>
<div class="textarea" style="width:400px;">
<a-textarea
v-model:value="textV1"
placeholder="请输入证书说明"
allow-clear
:rows="6"
show-count :maxlength="200"
/>
</div>
</div>
</div>
</div>
</a-form>
<div class="main_btns">
<button class="btn1" @click="closeDrawer">取消</button>
<button class="btn2" @click="updateRef">确定</button>
</div>
</div>
</a-drawer>
</template>
<script>
import { reactive, toRefs } from "vue";
import * as api from "../../../api/indexExternalChain";
import * as apiTask from "../../../api/indexTaskadd";
import { message } from "ant-design-vue";
import { RouterEditTask } from "@/api/indexTask";
import { addTempTask } from "../../../api/indexTaskadd";
export default {
name: "AddRef",
props: {
CCertificate: {
type: Boolean,
default: false,
},
EditRefId: {
type: Number,
default: null,
},
edit: {
// 是否为编辑
type: Boolean,
default: null,
},
projectId: {
type: Number,
default: null,
},
chooseStageId: {
type: Number,
default: null,
},
routerTaskId: {
type: Number,
default: 0,
},
isLevel: {
// 是否是关卡页面触发
type: Number,
default: null,
},
projectTaskId: {
// 要编辑的projectId
type: Number,
default: null,
},
routerId: {
type: Number,
default: null,
},
isactive: {
type: Number,
default: null,
},
projectTemplateId:{
type: Number,
default: null,
},
},
setup(props, ctx) {
const state = reactive({
inputV1: "",
inputV2: "",
textV1: "",
title: null,
isClick: false
});
const closeDrawer = () => {
ctx.emit("update:CCertificate", false);
ctx.emit("update:edit", false);
state.inputV2 = "";
state.inputV1 = "";
state.textV1 = "";
// ctx.emit("changeData", false);
localStorage.setItem("stageId", props.chooseStageId);
localStorage.setItem("chapterId", props.isactive);
};
const afterVisibleChange = () => {
if (props.edit) {
queryRef();
}
};
const handleFinish = (values) => {
console.log(values);
//updateRef(props.EditRefId)
};
const handleFinishFailed = (errors) => {
console.log(errors);
// message.error("handleFinishFailed");
};
const updateTask = async (res) => {
if (props.isLevel == 1) {
if(!props.isactive){
message.destroy();
return message.warning("请先选中关卡");
}
RouterEditTask({
chapterId: props.isactive,
courseId: res.data.data.linkId,
name: res.data.data.linkName,
routerId: props.routerId,
routerTaskId: props.routerTaskId || 0,
type: 7,
})
.then(async () => {
// message.success(`${props.edit ? "编辑" : "新增"}关卡任务成功`);
await ctx.emit("changeData", false);
closeDrawer();
state.addLoading = false;
})
.catch(() => {
// message.error(`${props.edit ? "编辑" : "新增"}关卡任务失败`);
});
} else if (props.isLevel == 2) {
apiTask
.addTask({
courseId: res.data.data.linkId,
name: res.data.data.linkName,
projectId: props.projectId,
projectTaskId: props.projectTaskId || 0,
stageId: props.chooseStageId || 0,
type: 7,
})
.then(() => {
// message.success(`${props.EditTestId ? "编辑" : "新增"}阶段任务成功`);
ctx.emit("changeData", false);
closeDrawer();
})
.catch(() => {
//message.error(`${props.EditTestId ? "编辑" : "新增"}阶段任务失败`);
});
} else if (props.isLevel == 3) {
addTempTask({
courseId: res.data.data.linkId,
name: res.data.data.linkName,
projectTemplateId:props.projectTemplateId,
projectTaskId: props.projectTaskId || 0,
stageId: props.chooseStageId || 0,
type: 7,
})
.then(() => {
//message.success( `${props.EditTestId ? "编辑" : "新增"}阶段任务成功`);
ctx.emit("changeData", false);
closeDrawer();
})
.catch(() => {
//message.error(`${props.EditTestId ? "编辑" : "新增"}阶段任务失败`);
});
}
};
//创建外链
const updateRef = () => {
let c = 1111;
if(c>0){
closeDrawer();
return
}
if (!state.inputV1) return message.warning("请输入外链名称");
if (!state.inputV2) {
return message.warning("请输入链接");
} else {
const reg =
/(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/;
if (!reg.test(state.inputV2) && state.inputV2 != "") {
return message.warning("请输入合法的链接地址");
}
}
if(state.isClick){
message.destroy();
message.error('请勿频繁点击')
return
}
state.isClick = true;
let obj = {
linkAddress: state.inputV2,
linkDescription: state.textV1,
linkId: props.edit ? props.EditRefId : 0,
linkName: state.inputV1,
};
if (props.edit) {
api
.updateLinks(obj)
.then(async (res) => {
message.success("编辑成功");
await updateTask(res);
ctx.emit("changeData", false);
state.isClick = false;
})
.catch(() => {
state.isClick = false;
});
} else {
api
.createExternalChain(obj)
.then(async (res) => {
message.success("提交成功");
await updateTask(res);
ctx.emit("changeData", false);
state.isClick = false;
})
.catch(() => {
state.isClick = false;
});
}
};
// 查询任务
const queryRef = () => {
let d = props.EditRefId;
api
.getLink({ linkId: d })
.then((res) => {
state.inputV1 = res.data.data.linkName;
state.inputV2 = res.data.data.linkAddress;
state.textV1 = res.data.data.linkDescription;
})
.catch(() => {
//message.error(`查询失败`);
});
};
return {
...toRefs(state),
afterVisibleChange,
closeDrawer,
handleFinish,
handleFinishFailed,
updateRef,
};
},
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
background-color: #fafafa !important;
}
.CreateCertificate {
.drawerMain {
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
margin-left: 24px;
}
}
.contentMain {
display: flex;
justify-content: space-between;
.main_left {
padding-right: 30px;
flex: 1;
border-right: 1px solid #e8e8e8;
margin-top: 32px;
.main_item {
display: flex;
align-items: center;
margin-bottom: 32px;
.signbox {
width: 120px;
display: flex;
justify-content: end;
align-items: center;
.sign {
margin-right: 5px;
}
}
.btnbox {
display: flex;
flex: 1;
align-items: center;
.xkbtn {
cursor: pointer;
width: 130px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-right: 8px;
color: #fff;
}
}
}
.main_item2 {
display: flex;
align-items: flex-start;
margin-bottom: 32px;
.signbox {
width: 120px;
display: flex;
justify-content: end;
align-items: center;
.sign {
margin-right: 5px;
}
}
.kqszbox {
.qdqtbox {
margin-left: 56px;
}
.setbox {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
margin-bottom: 24px;
.timerbox {
margin-top: 6px;
margin-right: 32px;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
}
}
.btnbox2 {
display: flex;
flex-direction: column;
justify-content: flex-start;
.xkbtn {
cursor: pointer;
width: 130px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-right: 16px 8px 32px 0;
color: #fff;
margin-top: 16px;
margin-bottom: 60px;
}
}
}
}
}
.main_btns {
height: 72px;
width: 100%;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
.btn1 {
width: 100px;
height: 40px;
border: 1px solid #4ea6ff;
border-radius: 8px;
color: #4ea6ff;
background-color: #fff;
cursor: pointer;
}
.btn2 {
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
}
}
}
}
</style>

116
src/views/projectcenter/TaskPage.vue
View File

@@ -1,6 +1,6 @@
<!-- eslint-disable vue/valid-v-model -->
<!-- eslint-disable vue/no-parsing-error -->
<!-- 任务页面 -->img
<!-- 任务页面 -->
<template>
<div class="taskpage">
<div class="addhead" style="flex-shrink: 0">
@@ -867,7 +867,48 @@
</div>
</div>
</a-tab-pane>
<a-tab-pane key="7" tab="设置">
<a-tab-pane key="7" tab="证书">
<div class="split"></div>
<!-- 没有证书显示的页面 -->
<div v-if="3>7" style="display:flex; justify-content:center; align-items:center;height: 600px;flex-direction:column;">
<img
src="@/assets/images/nodata.png"
style=" width: 212px; height: 212px;"
alt=""
/>
<button class="xkbtn11" @click="addCertificate">
添加证书
</button>
</div>
<!-- 有证书显示的页面 -->
<div v-else style="padding: 36px; display: flex;min-height: 400px;">
<div style="width:170px;height:200px;border:1px solid #b1b3b8;display: flex;justify-content: center;align-items: center;color: #4ea6ff;cursor: pointer;" @click="addCertificate">
<div class="ant-upload-text">+添加证书</div>
</div>
<div style="width:170px;height:200px;border:1px solid #b1b3b8;margin-left: 32px;display: flex;justify-content: center;align-items: center;flex-direction:column;">
<img
@click="previewPic"
style="cursor:pointer"
width="140"
height="160"
src="https://picb6.photophoto.cn/32/552/32552236_1.jpg" alt="" srcset="">
<div style="display:flex;height: 26px;justify-content: space-around;align-items: center;">
<div style="font-size:14px; width: 85px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">培训认证证书</div>
<div style="font-size:12px;color:#999;width:50px;margin-left: 6px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">完成项目</div>
<div style="cursor:pointer;position: relative;">
...
<div style="position:absolute;width: 45px;height: 60px;background: #fff;display: flex;flex-direction: column;justify-content: center;align-items: center;border: 1px solid #b1b3b8;">
<div style="font-size:12px;color:#999">查看</div>
<div style="font-size:12px;color:#999">编辑</div>
<div style="font-size:12px;color:#999">删除</div>
</div>
</div>
</div>
</div>
</div>
</a-tab-pane>
<a-tab-pane key="8" tab="设置">
<div class="split"></div>
<a-tabs v-model:activeKey="activeSetKey">
@@ -1148,6 +1189,30 @@
:itemsType="evaltype"
:datasource="evalData"
/>
<!-- 添加证书抽屉 -->
<AddCertificate
v-model:ACertificate="ACertificate"
/>
<!-- 创建证书抽屉 -->
<CreateCertificate
v-model:CCertificate="CCertificate"
/>
<!-- 预览 -->
<a-modal
:title="null"
width="60%"
:footer="null"
v-model:visible="modal1Visible"
style="display:flex; justify-content:center; align-items:center;"
@ok="setModal1Visible(false)"
>
<img
:width="screenWidth*0.55"
src="https://picb6.photophoto.cn/32/552/32552236_1.jpg" alt="" srcset="">
</a-modal>
<!-- 学员（小组管理）创建小组抽屉 -->
<subset-manage v-model:Svisible="subsetVisivle" />
@@ -1753,7 +1818,11 @@ import ProjectFaceTaskManage from "../../components/drawers/project/ProjectFaceT
import ProjectOnlineManage from "../../components/drawers/project/ProjectOnlineManage";
import ProjectHomeWorkManage from "../../components/drawers/project/ProjectHomeWorkManage";
import ProjectExamManage from "../../components/drawers/project/ProjectExamManage";
import ProjectEvalManage from "../../components/drawers/project/ProjectEvalManage";
import ProjectEvalManage from "../../components/drawers/project/ProjectEvalManage";
import AddCertificate from "../../components/drawers/project/AddCertificate";
import CreateCertificate from "../../components/drawers/project/CreateCertificate";
import SubsetManage from "../../components/drawers/SubsetManage";
import MemberList from "../../components/drawers/MemberList";
import ActiveAttendance from "../../components/drawers/ActiveAttendance";
@@ -1786,6 +1855,7 @@ import { toDate, codeUrl } from "../../api/method";
import projSet from "../../components/Modals/projSet";
import { overview } from "../../api/indexProjStu";
import TwoDimensionalCode from "../../components/TwoDimensionalCode.vue";
import ProjectScore from "../../components/drawers/ProjectScore";
import { useStore } from "vuex";
import ProjectLevel from "@/components/project/ProjectLevel";
import TrainClass from "@/components/project/TrainClass";
@@ -1813,18 +1883,22 @@ export default {
SeeStu,
ChangeGroup,
NoticePub,
// ProjectScore,
ProjectScore,
TaskImpStu,
projSet,
NoticeHis,
TwoDimensionalCode,
ProjectManager,
TableStudent,
AddCertificate,
CreateCertificate
},
setup() {
const store = useStore();
const route = useRoute();
const state = reactive({
screenHeight: document.body.clientHeight,
screenWidth: document.body.clientWidth,
editRecord: {},
choosedStageIndex:0,
hasTask:false,
@@ -1964,6 +2038,8 @@ export default {
Wvisible: false, //作业管理
TMvisible: false, //考试管理
Evalvisible: false, //测评管理
ACertificate: false, //证书添加
CCertificate: false, //证书创建
Stuvisible: false, //添加学员
Importvisible: false, //导入学员
Seevisible: false, //查看学员
@@ -2502,7 +2578,9 @@ export default {
commonLevelName: "",
evaltype: "",
evalData: "",
facestudent: ""
facestudent: "",
modal1Visible: false, // 证书预览
});
const levelList = reactive({
@@ -4173,6 +4251,15 @@ export default {
state.choosedStageIndex = index;
}
{/* 证书 */}
function addCertificate(){
state.ACertificate = true;
}
function previewPic() {
state.modal1Visible = true;
}
return {
...toRefs(state),
...toRefs(levelList),
@@ -4281,6 +4368,8 @@ export default {
showCodeModel2,
checkType,
downloadFile,
addCertificate,
previewPic
};
},
};
@@ -4293,6 +4382,11 @@ export default {
clear: both;
}
.ant-upload.ant-upload-select-picture-card {
width: 170px;
height: 200px;
}
.pubproject {
.ant-modal {
.ant-modal-body {
@@ -4458,6 +4552,18 @@ export default {
}
}
.xkbtn11 {
cursor: pointer;
width: 130px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-right: 8px;
color: #fff;
margin-top: 24px;
}
.canclestu {
.ant-modal {
width: 424px !important;