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

添加案例推荐页面

Browse Source
This commit is contained in:
NiSen
2023-06-14 19:31:18 +08:00
parent fc0aa8223a
commit dbfb7a0c30
1 changed files with 713 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

713
src/views/case/CaseRecommended.vue Normal file
View File

@@ -0,0 +1,713 @@
<!-- 案例推荐页面 -->
<template>
<div class="researchmanage">
<!-- 搜索框及按钮 -->
<div class="filter">
<div class="filterItems">
<div class="select">
<a-input v-model:value="searchData.assessmentName" style="width: 270px; height: 40px; border-radius: 8px"
placeholder="请输入姓名" />
</div>
<div class="select">
<div class="select addTimeBox">
<div class="addTime">创建时间：</div>
<a-range-picker v-model:value="dateTime" style="width: 420px" @change="timeChange" format="YYYY-MM-DD"
valueFormat="YYYY-MM-DD" separator="至" :placeholder="[' 开始时间', ' 结束时间']" />
</div>
</div>
<div style="display: flex; margin-bottom: 20px">
<div class="btn btn1" @click="handleSearch">
<div class="search"></div>
<div class="btnText">搜索</div>
</div>
<div class="btnn btn2" @click="handleRest" style="width: 105px">
<div class="search"></div>
<div class="btnText">重置</div>
</div>
</div>
</div>
<div class="btns">
<div class="btn btn3" @click="handleNew">
<div class="search"></div>
<div class="btnText">发起推荐</div>
</div>
</div>
</div>
<!-- 搜索框及按钮 -->
<!-- 表格 -->
<div class="tableBox">
就哈哈哈哈
</div>
</div>
</template>
<script setup lang="jsx">
import { ref, onMounted } from "vue";
import {
createResearch,
deleteResearch,
editReleaseStatus,
} from "@/api/indexResearch";
import { Form, message } from "ant-design-vue";
import { useRowsPage } from "@/api/request";
import { ASSESSMENT_PAGE } from "@/api/apis";
import { useRouter } from "vue-router";
import dialog from "@/utils/dialog";
const router = useRouter();
const searchData = ref({
pageNo: 1,
pageSize: 10,
releaseStatus: null,
assessmentName: "",
searchEndTime: "",
searchStartTime: "",
});
const formData = ref({
assessmentName: "",
id: "",
validated: 0,
});
onMounted(() => {
// 是否需要触发新建弹框
let str = location.href;
let isOpen = str.includes("openCreate=true");
if (isOpen) {
newNext.value = true;
}
});
const newNext = ref(false);
const dateTime = ref([]);
const nameRef = ref();
const rulesRef = ref({
assessmentName: [
{
required: true,
message: "请输入评估名称",
},
],
});
const { resetFields } = Form.useForm(searchData, {});
const { resetFields: resetFormFields, validate } = Form.useForm(
formData,
rulesRef
);
const { data, total, loading, fetch } = useRowsPage(
ASSESSMENT_PAGE,
searchData.value
);
const handle = (record) => ({
push: () => {
message.info("发布成功！");
record.releaseStatus = "2";
editReleaseStatus({ assessmentId: record.id, releaseStatus: 2 });
},
withdraw: () => {
message.info("撤回成功！");
record.releaseStatus = "1";
editReleaseStatus({ assessmentId: record.id, releaseStatus: 1 });
},
end: () => {
message.info("结束成功！");
record.releaseStatus = "3";
editReleaseStatus({ assessmentId: record.id, releaseStatus: 3 });
},
del: async () => {
loading.value = true;
await deleteResearch({ assessmentId: record.id }).then(() => {
message.info("删除成功！");
fetch();
}).catch(() => loading.value = false)
},
copy: async () => {
loading.value = true;
message.info("复制成功！");
record.id = null;
if (record.essayQuestionVoList) {
record.essayQuestionVoList.forEach((item) => {
item.id = null;
});
}
//多选题
let assessmentMultipleChoiceDtoList = [];
if (record.multipleStemVoList) {
record.multipleStemVoList.forEach((item) => {
item.multipleChoiceVoList.forEach((a) => {
a.id = null;
assessmentMultipleChoiceDtoList.push(a);
});
});
}
if (record.scoringQuestionVoList) {
record.scoringQuestionVoList.forEach((item) => {
item.id = null;
});
}
//单选题
let assessmentSingleChoiceDtoList = [];
if (record.singleStemVoList) {
record.singleStemVoList.forEach((item) => {
item.assessmentSingleChoiceVoList.forEach((a) => {
a.id = null;
assessmentSingleChoiceDtoList.push(a);
});
});
}
console.log("record", record);
console.log("复制传参", {
...record,
assessmentName: record.assessmentName + "(1)",
});
let newObj = {
assessmentEssayQuestionDtoList: record.essayQuestionVoList,
assessmentMultipleChoiceDtoList: assessmentMultipleChoiceDtoList,
assessmentScoringQuestionDtoList: record.scoringQuestionVoList,
assessmentSingleChoiceDtoList: assessmentSingleChoiceDtoList,
assessmentMark: record.assessmentMark,
};
console.log("newObj", newObj);
await createResearch({
...newObj,
assessmentName: record.assessmentName + "(1)",
});
fetch();
},
});
const handleMsg = {
push: "您确定要发布此评估吗",
withdraw: "您确定要撤回此评估吗",
end: "您确定要结束此评估吗",
del: "您确定要删除此评估吗",
copy: "您确定要复制此评估吗",
};
function timeChange(time, timeStr) {
searchData.value.searchStartTime = timeStr[0];
searchData.value.searchEndTime = timeStr[1];
}
const handleSearch = () => {
fetch();
};
const handleRest = () => {
dateTime.value = [];
resetFields();
fetch();
};
const handleNew = () => {
newNext.value = true;
};
</script>
<style lang="scss">
.clearfix:before,
.clearfix:after {
content: " ";
display: block;
clear: both;
}
.addTimeBox {
position: relative;
display: flex;
align-items: center;
.addTime {
position: absolute;
z-index: 10;
margin-left: 10px;
color: rgba(0, 0, 0, 0.4);
}
.ant-picker {
padding-left: 85px;
}
.ant-picker-range .ant-picker-active-bar {
margin-left: 85px;
}
}
.out {
//display: flex;
display: block;
position: absolute;
width: 680px;
// height: 525px;
background-color: #fff;
box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.top {
width: 100%;
height: 68px;
background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%);
display: flex;
align-items: center;
.topimg {
width: 18px;
height: 18px;
margin-left: 27px;
}
.topc {
color: #000000;
font-size: 16px;
margin-left: 8px;
}
}
.mid {
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
.d {
// margin-top: 8px;
// color: #ff4e4e;
margin-left: -5px;
}
.name {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 20px;
align-items: center;
height: 40px;
// border: 1px solid black;
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
}
.in {
margin-left: 14px;
width: 81%;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 30px;
}
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
}
}
}
.btn {
width: 33%;
margin-top: 30px;
display: flex;
justify-content: space-between;
margin-bottom: 30px;
.samtn {
width: 100px;
height: 40px;
font-size: 14px;
border: 1px solid #4ea6ff;
border-radius: 8px;
cursor: pointer;
}
.btn1 {
background-color: #fff;
color: #4ea6ff;
}
.btn2 {
margin-left: 10px;
background-color: #4ea6ff;
color: #fff;
}
}
}
}
.researchmanage {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
.filter {
margin-left: 38px;
margin-right: 38px;
margin-top: 30px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.filterItems {
display: flex;
flex-wrap: wrap;
.select {
margin-right: 20px;
margin-bottom: 20px;
}
.btn {
padding: 0 26px 0 26px;
height: 38px;
background: #4ea6ff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 36px;
margin-left: 5px;
}
}
.btnn {
padding: 0 26px 0 26px;
height: 38px;
background: #4ea6ff;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #fff;
line-height: 36px;
margin-left: 5px;
}
}
.btn1 {
.search {
width: 15px;
height: 17px;
background-image: url("../../assets/images/courseManage/search0.png");
}
}
.btn2 {
.search {
width: 16px;
height: 18px;
background-image: url("../../assets/images/courseManage/reset0.png");
}
}
// .btn1:hover {
// background: rgba(64, 158, 255, 0.76);
// .search {
// background-image: url("../../assets/images/courseManage/search0.png");
// }
// .btnText {
// color: #ffffff;
// }
// }
.btn1:active {
background: #0982ff;
}
// .btn2:hover {
// background: rgba(64, 158, 255, 0.1);
// }
.btn2:active {
background: rgba(64, 158, 255, 0.2);
}
}
.btns {
display: flex;
.btn {
padding: 0 26px;
height: 38px;
background: #4ea6ff;
border-radius: 8px;
//border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 36px;
margin-left: 5px;
}
}
.btn3 {
margin-right: 0;
.search {
width: 17px;
height: 18px;
background-image: url("../../assets/images/courseManage/add0.png");
}
}
// .btn3:hover {
// background: rgba(64, 158, 255, 0.76);
// .search {
// background-image: url("../../assets/images/courseManage/add0.png");
// }
// .btnText {
// color: #ffffff;
// }
// }
.btn3:active {
background: #0982ff;
}
}
}
.tableBox {
margin: 20px 38px 30px;
display: flex;
flex: 1;
flex-direction: column;
th.ant-table-cell {
background-color: #eff4fc !important;
text-align: center;
color: #999ba3;
}
td.ant-table-cell {
text-align: center;
}
}
.pa {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 20px;
.pagination {
margin-bottom: 20px;
}
.ant-pagination-item-link,
.ant-pagination-item,
.ant-select-selector,
.ant-pagination-options-quick-jumper input {
border-radius: 8px;
}
}
.unout {
display: none;
}
.operation {
display: flex;
justify-content: right;
.fb {
display: flex;
margin-right: 20px;
.jc {
color: #4ea6ff;
font-size: 14px;
margin-left: 20px;
white-space: nowrap;
cursor: pointer;
}
}
}
}
.DelModal {
.ant-modal {
.ant-modal-content {
width: 424px !important;
.ant-modal-body {
.delete {
z-index: 9999;
width: 424px;
background: #ffffff;
box-shadow: 0 1px 35px 0 rgba(118, 136, 166, 0.21);
border-radius: 4px;
position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%, -50%);
.del_header {
position: absolute;
width: calc(100%);
height: 40px;
background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%);
}
.del_main {
width: 100%;
position: relative;
.header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
.del-icon {
width: 16px;
height: 16px;
position: relative;
margin-right: 10px;
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-size: 100% 100%;
}
}
.icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/QR.png);
background-size: 100% 100%;
}
.close_exit {
position: absolute;
right: 42px;
cursor: pointer;
width: 20px;
height: 20px;
background-image: url(@/assets/images/coursewareManage/close.png);
background-size: 100% 100%;
}
}
.body {
width: 100%;
margin: 34px auto 56px auto;
display: flex;
justify-content: center;
align-items: center;
}
.del_btnbox {
display: flex;
margin: 30px auto;
justify-content: center;
.del_btn {
width: 100px;
height: 40px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 40px;
}
}
.btn1 {
border: 1px solid rgba(64, 158, 255, 1);
color: #4ea6ff;
}
.btn2 {
background-color: #4ea6ff;
color: #ffffff;
}
}
}
}
}
}
}
}
</style>