hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-16 06:16: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

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>