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

style:投票页面修改

Browse Source
This commit is contained in:
zhangyc
2022-11-13 22:28:23 +08:00
parent e0d474ad85
commit 307e53dbf0
14 changed files with 2462 additions and 1361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

652
src/components/vote/CreateVote.vue Normal file
View File

@@ -0,0 +1,652 @@
<!-- 评估管理-创建评估页面 -->
<template>
<a-drawer
:visible="createVoteVisible"
class="drawerStyle createvoteDrawer"
width="80%"
placement="right"
@after-visible-change="afterVisibleChange"
>
<div class="researchadd">
<div class="header">
<div class="headerTitle">创建投票</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png"
@click="closeDrawer"
/>
</div>
<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="voteName"
style="width: 424px; height: 32px"
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>创建题干：</span>
</div>
<div class="btnbox">
<button
class="xkbtn"
@click="handleTypes"
>
创建题干
</button>
</div>
</div> <!-- 创建投票侧弹窗 -->
</div>
<div v-for="(item, index) in allFormsData" :key="index">
<VoteQuestion
:item="item"
:assessmentId="assessmentId"
@del="handleDel"
/>
</div>
<div class="footer">
<div class="btn">
<a-button
type="primary"
style="width: 100px;height: 40px;border-radius: 8px; background-color: #409eff;"
@click="handleSave"
>
保存
</a-button>
<a-button
type="primary"
ghost
style="width: 100px;height: 40px;margin-left: 14px;border-radius: 8px;"
@click="handleAllCancel"
>
取消
</a-button>
</div>
</div>
</div>
</a-drawer>
</template>
<script>
import { reactive,toRefs} from "vue";
// import { message } from "ant-design-vue";
// import { createResearch } from "../../api/indexResearch";
import VoteQuestion from "./VoteQuestion.vue";
import {
sortBy,
traverseArr,
filterCommon,
deepCloneFilterString,
} from "../../utils/utils";
import { useRouter } from "vue-router";
//import store from "@/store";
import {
queryResearchDetailById,
editResearchMessage,
createResearch,
} from "@/api/indexResearch";
import { message } from "ant-design-vue";
export default {
name: "CreateVote",
components: {
VoteQuestion,
},
props: {
createVoteVisible: {
type: Boolean,
default: false,
},
},
setup(props,ctx) {
const router = useRouter();
const state = reactive({
createVoteVisible:false,
allFormsData: [],
});
const afterVisibleChange = (bool) => {
console.log("state======进来creates", bool);
handleTypes();
};
const closeDrawer = () => {
ctx.emit("update:createVoteVisible", false);
console.log("======关闭");
}
// 详情
const getInfoDate = async () => {
let id = router.currentRoute.value.params.id;
if (id) {
state.assessmentId = id;
let res = await queryResearchDetailById({
assessmentId: state.assessmentId,
}).then((res) => {
if (res.data.code === 200) {
return res.data.data;
}
});
state.assessmentName = res.assessmentName;
state.valueMore = res.assessmentMark;
let renderArr = [
...res.singleStemVoList,
...res.multipleStemVoList,
...res.essayQuestionVoList,
...res.scoringQuestionVoList,
];
sortBy(renderArr, "orderNumber"); //序号
state.allFormsData = parseData(renderArr, "questionType"); //类型
// console.log("state.allFormsData");
// console.log(state.allFormsData);
}
};
getInfoDate();
// 转换成前端格式
const parseData = (arr, typeKey) => {
const resultArr = [];
arr.forEach((item) => {
let key = Number(item[typeKey]);
let obj = {};
if (key === 1) {
let restList = traverseArr(item.assessmentSingleChoiceVoList, {
inputVal: "singleOptionName",
imgVal: "singleOptionPictureAddress",
optionId: "singleOptionId",
}).map((itm, idx) => {
itm.id = idx + 1;
return itm;
});
obj = {
type: key,
valueSingle: item.singleStemName,
singleList: restList,
orderNumber: item.orderNumber,
};
resultArr.push(obj);
}
if (key === 2) {
let restList = traverseArr(item.multipleChoiceVoList, {
inputVal: "multipleOptionName",
imgVal: "multipleOptionPictureAddress",
optionId: "multipleOptionId",
}).map((itm, idx) => {
itm.id = idx + 1;
return itm;
});
obj = {
type: key,
valueMutil: item.multipleStemName,
mutilList: restList,
orderNumber: item.orderNumber,
};
resultArr.push(obj);
}
if (key === 3) {
obj = {
type: key,
valueAsk: item.assessmentQaTitle,
valueAskDesc: item.assessmentQaDescribe,
optionId: item.assessmentQaId,
};
resultArr.push(obj);
}
if (key === 4) {
obj = {
type: key,
valuePin: item.assessmentScTitle,
minScore: item.assessmentMinScore,
maxScore: item.assessmentMaxScore,
pinQuan: item.weightScale,
optionId: item.assessmentScId,
};
resultArr.push(obj);
}
});
resultArr.map((itm, idx) => {
itm.id = idx + 1;
return itm;
});
return resultArr;
};
// 转换成后端格式
const restData = (arr, typeKey) => {
const resultArr = [];
arr.forEach((item) => {
let obj = {};
if (item[typeKey] === 1) {
let restList = traverseArr(item.singleList, {
singleOptionName: "inputVal",
singleOptionPictureAddress: "imgVal",
singleOptionId: "optionId",
}).map((itm, idx) => {
itm.optionOrderNum = idx + 1;
return itm;
});
restList.forEach((item) => {
item.singleOptionId = item.singleOptionId
? item.singleOptionId
: "";
});
obj = {
questionType: item[typeKey],
singleStemName: item.valueSingle,
singleList: restList,
orderNumber: item.orderNumber,
};
resultArr.push(obj);
}
if (item[typeKey] === 2) {
let restList = traverseArr(item.mutilList, {
multipleOptionName: "inputVal",
multipleOptionPictureAddress: "imgVal",
multipleOptionId: "optionId",
}).map((itm, idx) => {
itm.optionOrderNum = idx + 1;
return itm;
});
restList.forEach((item) => {
item.multipleOptionId = item.multipleOptionId
? item.multipleOptionId
: "";
});
obj = {
questionType: item[typeKey],
multipleStemName: item.valueMutil,
mutilList: restList,
orderNumber: item.orderNumber,
};
resultArr.push(obj);
}
if (item[typeKey] === 3) {
obj = {
questionType: item[typeKey],
assessmentQaTitle: item.valueAsk,
assessmentQaDescribe: item.valueAskDesc,
assessmentQaId: item.optionId ? item.optionId : "",
};
resultArr.push(obj);
}
if (item[typeKey] === 4) {
obj = {
questionType: item[typeKey],
assessmentScTitle: item.valuePin,
assessmentMinScore: item.minScore,
assessmentMaxScore: item.maxScore,
weightScale: item.pinQuan,
assessmentScId: item.optionId ? item.optionId : "",
};
resultArr.push(obj);
}
});
resultArr.map((itm, idx) => {
itm.orderNumber = idx + 1;
return itm;
});
return resultArr;
};
// 解散传值
const parseItem = (arr) => {
const filterComObj = filterCommon(arr, "questionType");
let resultObj = {};
for (let key in filterComObj) {
if (key === "1") {
let arrSingle = filterComObj[key];
let arr = [];
arrSingle.forEach((item) => {
if (item.singleList.length) {
item.singleList.forEach((itm) => {
arr.push({
...itm,
singleStemName: item.singleStemName,
orderNumber: item.orderNumber,
questionType: item.questionType,
});
});
}
});
resultObj.assessmentSingleChoiceDtoList = arr;
}
if (key === "2") {
let arrMulti = filterComObj[key];
let arr = [];
arrMulti.forEach((item) => {
if (item.mutilList.length) {
item.mutilList.forEach((itm) => {
arr.push({
...itm,
multipleStemName: item.multipleStemName,
orderNumber: item.orderNumber,
questionType: item.questionType,
});
});
}
});
resultObj.assessmentMultipleChoiceDtoList = arr;
}
if (key === "3") {
resultObj.assessmentEssayQuestionDtoList = filterComObj[key];
}
if (key === "4") {
resultObj.assessmentScoringQuestionDtoList = filterComObj[key];
}
}
return resultObj;
};
const handleTypes = () => {
let obj = {
id: state.allFormsData.length,
valueSingle: "",
singleList: [
{
id: 1,
inputVal: "",
imgVal: "",
},
],
};
state.allFormsData.push(obj);
console.log("state.allFormsData=====",state.allFormsData,state.allFormsData.length);
};
const handleDel = ({ id ,curItem}) => {
state.allFormsData.forEach((item, index) => {
if (item.id === id) {
state.allFormsData.splice(index, 1);
}
});
state.allFormsData.map((item, index) => {
item.id = index + 1;
return item;
});
console.log("curItem.orderNumber",curItem.orderNumber);
// orderNumber: curItem.orderNumber,
};
const handleSave = () => {
let resultPost = {};
let filterData = parseItem(restData(state.allFormsData, "type"));
// 校验
if (!checkVal(filterData)) {
return false;
}
console.log(12121212);
console.log(filterData);
if (state.assessmentId) {
resultPost = {
assessmentId: state.assessmentId,
assessmentName: state.assessmentName,
assessmentMark: state.valueMore,
...filterData,
};
resultPost = deepCloneFilterString(resultPost, [
"assessmentMaxScore",
"assessmentMinScore",
]);
console.log(1212334);
console.log(resultPost);
editResearchMessage(resultPost).then((res) => {
if (res.data.code === 200) {
message.success("编辑成功");
router.push({
path: "/researchmanage",
});
}
});
} else {
resultPost = {
assessmentName: state.assessmentNameNew,
assessmentMark: state.valueMore,
...filterData,
};
resultPost = deepCloneFilterString(resultPost, [
"assessmentMaxScore",
"assessmentMinScore",
]);
createResearch(resultPost).then((res) => {
if (res.data.code === 200) {
message.success("创建成功");
router.push({
path: "/researchmanage",
});
}
});
}
};
const handleAllCancel = () => {
state.allFormsData = [];
router.push({
path: "/researchmanage",
});
};
const checkVal = (filterData) => {
// 问答
if (
filterData.assessmentEssayQuestionDtoList &&
filterData.assessmentEssayQuestionDtoList.length
) {
let arr = filterData.assessmentEssayQuestionDtoList;
for (let item of arr) {
if (!item.assessmentQaTitle) {
message.error("问答题干为必填 请确认");
return false;
}
}
}
// 多选
if (
filterData.assessmentMultipleChoiceDtoList &&
filterData.assessmentMultipleChoiceDtoList.length
) {
let arr = filterData.assessmentMultipleChoiceDtoList;
for (let item of arr) {
if (!item.multipleStemName) {
message.error("多选题干为必填 请确认");
return false;
}
}
}
// 评分
if (
filterData.assessmentScoringQuestionDtoList &&
filterData.assessmentScoringQuestionDtoList.length
) {
let CountNum = 0;
let CountArr = filterData.assessmentScoringQuestionDtoList;
for (let item of CountArr) {
if (!item.assessmentScTitle) {
message.error("评分题干为必填 请确认");
return false;
}
CountNum += Number(item["weightScale"]);
}
if (CountNum !== 100) {
message.error("当前权重设置是百分制 请重新配置");
return false;
}
}
// 单选
if (
filterData.assessmentSingleChoiceDtoList &&
filterData.assessmentSingleChoiceDtoList.length
) {
let arr = filterData.assessmentSingleChoiceDtoList;
for (let item of arr) {
if (!item.singleStemName) {
message.error("单选题干为必填 请确认");
return false;
}
}
}
return true;
};
return {
...toRefs(state),
handleTypes,
handleSave,
handleAllCancel,
handleDel,
afterVisibleChange,
closeDrawer,
};
},
};
</script>
<style lang="scss">
.researchadd {
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
margin-bottom: 25px;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
margin-left: 24px;
}
}
.main_left {
padding-right: 30px;
flex: 1;
border-right: 1px solid #e8e8e8;
.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: #388be1;
border-radius: 8px;
border: 0;
margin-right: 8px;
color: #fff;
margin-right: 10px;
}
.fileTigan {
display: flex;
align-items: center;
padding: 3px 5px;
background-color: rgba(42, 103, 209, 0.4);
span {
margin-right: 5px;
}
.delBox {
width: 13px;
height: 13px;
background-image: url(@/assets/images/basicinfo/ch.png);
background-size: 100% 100%;
border-radius: 50%;
}
}
}
}
.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: #388be1;
border-radius: 8px;
border: 0;
margin-right: 16px 8px 32px 0;
color: #fff;
margin-top: 16px;
margin-bottom: 60px;
}
}
}
}
}
</style>