mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-22 17:26:46 +08:00
部分修改
This commit is contained in:
kclf
626
src/components/vote/CreateVote copy.vue
Normal file
626
src/components/vote/CreateVote copy.vue
Normal file
@@ -0,0 +1,626 @@
|
||||
<!-- 评估管理-创建评估页面 -->
|
||||
<template>
|
||||
<a-drawer
|
||||
:visible="createVoteVisible"
|
||||
class="drawerStyle createvoteDrawer"
|
||||
width="100%"
|
||||
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="ballotName"
|
||||
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
|
||||
v-model:info="information"
|
||||
:item="item"
|
||||
:optionId="optionId"
|
||||
@delOption="delOption"
|
||||
@del="handleDel"
|
||||
@edits="edits"
|
||||
@addOption="addOption"
|
||||
/>
|
||||
</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 store from "@/store";
|
||||
import * as api from "@/api/indexVote";
|
||||
//import { useRouter } from "vue-router";
|
||||
import {} from "@/api/indexResearch";
|
||||
|
||||
//import { message } from "ant-design-vue";
|
||||
|
||||
export default {
|
||||
name: "CreateVote",
|
||||
components: {
|
||||
VoteQuestion,
|
||||
},
|
||||
props: {
|
||||
createVoteVisible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
ballotId: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
editChild: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup(props, ctx) {
|
||||
const state = reactive({
|
||||
ballotId: "",
|
||||
ballotName: "",
|
||||
allFormsData: [],
|
||||
allFormsData1: [],
|
||||
});
|
||||
// const router = useRouter();
|
||||
const afterVisibleChange = () => {
|
||||
if (props.ballotId) {
|
||||
getInfoDate();
|
||||
} else {
|
||||
handleTypes();
|
||||
}
|
||||
};
|
||||
const closeDrawer = () => {
|
||||
ctx.emit("update:createVoteVisible", false);
|
||||
ctx.emit("update:ballotId", state.ballotId);
|
||||
handleAllCancel();
|
||||
};
|
||||
// 详情
|
||||
const getInfoDate = async () => {
|
||||
console.log("props.editChild=====", props.editChild);
|
||||
if (props.ballotId) {
|
||||
console.log("props.editChild2=====", props.editChild);
|
||||
let res = await api.queryStemByStemId(props.ballotId).then((res) => {
|
||||
if (res.data.code === 200) {
|
||||
return res.data.data;
|
||||
}
|
||||
});
|
||||
console.log("res====", res);
|
||||
state.ballotName = res.ballotId;
|
||||
// let renderArr = [...res];
|
||||
// sortBy(renderArr, "orderNumber"); //序号
|
||||
state.allFormsData = parseData(res); //类型
|
||||
state.allFormsData1 = parseData(res); //类型
|
||||
|
||||
console.log(state.allFormsData);
|
||||
}
|
||||
};
|
||||
|
||||
// 转换成前端格式
|
||||
const parseData = (arr) => {
|
||||
const resultArr = [];
|
||||
state.ballotId = arr.ballotId;
|
||||
state.ballotName = arr.ballotName;
|
||||
|
||||
console.log("arr.voteStemVoList=====", arr.voteStemVoList);
|
||||
arr.voteStemVoList.forEach((item) => {
|
||||
let obj = {};
|
||||
let restList = traverseArr(item.optionDetailList, {
|
||||
inputVal: "optionName",
|
||||
imgVal: "optionPictureAddress",
|
||||
optionId: "optionId",
|
||||
voteStemId: "voteStemId",
|
||||
stem: "stem",
|
||||
}).map((itm, idx) => {
|
||||
itm.id = idx + 1;
|
||||
return itm;
|
||||
});
|
||||
|
||||
obj = {
|
||||
voteStemId: item.voteStemId,
|
||||
valueSingle: item.voteStemName,
|
||||
singleList: restList,
|
||||
};
|
||||
resultArr.push(obj);
|
||||
});
|
||||
resultArr.map((itm, idx) => {
|
||||
itm.id = idx + 1;
|
||||
return itm;
|
||||
});
|
||||
return resultArr;
|
||||
};
|
||||
|
||||
// 转换成后端格式
|
||||
const restData = (arr) => {
|
||||
const resultArr = [];
|
||||
arr.forEach((item) => {
|
||||
let obj = {};
|
||||
console.log("item=======", item);
|
||||
// if (item[typeKey] === 1) {
|
||||
let restList = traverseArr(item.singleList, {
|
||||
optionName: "inputVal",
|
||||
optionPictureAddress: "imgVal",
|
||||
optionId: "optionId",
|
||||
voteStemId: "voteStemId",
|
||||
stem: "stem",
|
||||
}).map((itm, idx) => {
|
||||
itm.optionOrderNum = idx + 1;
|
||||
return itm;
|
||||
});
|
||||
restList.forEach((item) => {
|
||||
item.optionId = item.optionId ? item.optionId : "";
|
||||
});
|
||||
|
||||
obj = {
|
||||
voteStemName: item.valueSingle,
|
||||
optionDetailList: restList,
|
||||
voteStemId: item.voteStemId,
|
||||
};
|
||||
resultArr.push(obj);
|
||||
// }
|
||||
console.log("resultArr=======", resultArr);
|
||||
});
|
||||
resultArr.map((itm, idx) => {
|
||||
itm.orderNumber = idx + 1;
|
||||
return itm;
|
||||
});
|
||||
return resultArr;
|
||||
};
|
||||
|
||||
// 解散传值
|
||||
const parseItem = (arrr) => {
|
||||
// const filterComObj = filterCommon(arr, "questionType");
|
||||
let resultObj = {};
|
||||
// for (let key in filterComObj) {
|
||||
// if (key === "1") {
|
||||
// let arrSingle = arrr
|
||||
//filterComObj[key];
|
||||
console.log("arrr======", arrr);
|
||||
/*
|
||||
let arr = [];
|
||||
arrSingle.forEach((item) => {
|
||||
console.log("item======",item);
|
||||
if (item.singleList.length) {
|
||||
item.singleList.forEach((itm) => {
|
||||
arr.push({
|
||||
...itm,
|
||||
optionName: item.optionName,
|
||||
optionOrderNum: item.optionOrderNum,
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
});*/
|
||||
resultObj.voteStemDtoList = arrr;
|
||||
// }
|
||||
console.log("resultObj======", resultObj);
|
||||
// }
|
||||
return resultObj;
|
||||
};
|
||||
|
||||
const handleTypes = () => {
|
||||
let obj = {
|
||||
id: state.allFormsData.length,
|
||||
valueSingle: "",
|
||||
singleList: [
|
||||
{
|
||||
id: 1,
|
||||
inputVal: "",
|
||||
imgVal: "",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
inputVal: "",
|
||||
imgVal: "",
|
||||
},
|
||||
],
|
||||
};
|
||||
state.allFormsData.push(obj);
|
||||
state.allFormsData1.push(obj);
|
||||
};
|
||||
|
||||
const handleDel = ({ id }) => {
|
||||
console.log("1234523432434234234", id, state.allFormsData);
|
||||
|
||||
state.allFormsData.forEach((item, index) => {
|
||||
if (item.id === id) {
|
||||
console.log("oooooo", item);
|
||||
state.allFormsData.splice(index, 1);
|
||||
}
|
||||
});
|
||||
|
||||
// state.allFormsData.map((item, index) => {
|
||||
// item.id = index + 1;
|
||||
// return item;
|
||||
// });
|
||||
|
||||
// orderNumber: curItem.orderNumber,
|
||||
};
|
||||
|
||||
const delOption = (data) => {
|
||||
console.log("datadatadatadatadata", data, state.allFormsData);
|
||||
state.allFormsData.forEach((item, index) => {
|
||||
if (item.voteStemId === data.value.voteStemId) {
|
||||
state.allFormsData[index].singleList.forEach((ii, nn) => {
|
||||
if (ii.id == data.value.id) {
|
||||
console.log(
|
||||
1212121212,
|
||||
state.allFormsData[index].singleList[nn],
|
||||
nn
|
||||
);
|
||||
state.allFormsData[index].singleList.splice(nn, 1);
|
||||
console.log("12", state.allFormsData);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
state.allFormsData1.forEach((item, index) => {
|
||||
if (item.voteStemId === data.value.voteStemId) {
|
||||
state.allFormsData1[index].singleList.forEach((ii, nn) => {
|
||||
if (ii.id == data.value.id) {
|
||||
console.log(
|
||||
1212121212,
|
||||
state.allFormsData1[index].singleList[nn],
|
||||
nn
|
||||
);
|
||||
state.allFormsData1[index].singleList.splice(nn, 1);
|
||||
console.log("33", state.allFormsData1);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const edits = (data) => {
|
||||
console.log(
|
||||
"我传递过来了吗---111",
|
||||
data,
|
||||
data.value.id,
|
||||
state.allFormsData1
|
||||
);
|
||||
|
||||
state.allFormsData1.forEach((item, index) => {
|
||||
if (item.voteStemId === data.value.voteStemId) {
|
||||
item.singleList.forEach((ii, nn) => {
|
||||
if (ii.id === data.value.id) {
|
||||
// ii.optionName = data.value.inputVal
|
||||
state.allFormsData1[index].singleList[nn].inputVal =
|
||||
data.value.inputVal;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
console.log("123-456-789", state.allFormsData1);
|
||||
};
|
||||
|
||||
// 增加选项
|
||||
const addOption = (data) => {
|
||||
console.log(data);
|
||||
state.allFormsData1.forEach((item, index) => {
|
||||
if (item.voteStemId === data.value.voteStemId) {
|
||||
state.allFormsData1[index].singleList = data.value.singleList;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
let resultPost = {};
|
||||
|
||||
let filterData = parseItem(restData(state.allFormsData1, "type"));
|
||||
|
||||
console.log("filterData==111", filterData);
|
||||
|
||||
if (!state.ballotName) {
|
||||
return message.warning("请输入投票名称");
|
||||
}
|
||||
// 校验s
|
||||
|
||||
// 校验
|
||||
if (!checkVal(filterData)) {
|
||||
return false;
|
||||
}
|
||||
// checkVal(filterData);
|
||||
console.log(12121212);
|
||||
console.log(filterData);
|
||||
console.log("111111222223333----0000", state.ballotId);
|
||||
if (state.ballotId) {
|
||||
resultPost = {
|
||||
ballotId: state.ballotId,
|
||||
ballotName: state.ballotName,
|
||||
...filterData,
|
||||
};
|
||||
/*
|
||||
resultPost = deepCloneFilterString(resultPost, [
|
||||
"assessmentMaxScore",
|
||||
"assessmentMinScore",
|
||||
]);*/
|
||||
console.log(1212334);
|
||||
console.log(resultPost);
|
||||
api.updateStemMessage(resultPost).then((res) => {
|
||||
if (res.data.code === 200) {
|
||||
state.ballotId = res.data.data.ballotId;
|
||||
console.log("res.data.data==============", res.data.data);
|
||||
console.log("res.state.ballotId==============", state.ballotId);
|
||||
message.success("编辑成功");
|
||||
closeDrawer();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
resultPost = {
|
||||
ballotName: state.ballotName,
|
||||
...filterData,
|
||||
};
|
||||
/*
|
||||
resultPost = deepCloneFilterString(resultPost, [
|
||||
"assessmentMaxScore",
|
||||
"assessmentMinScore",
|
||||
]);*/
|
||||
|
||||
console.log("=========", resultPost);
|
||||
api.createStemMessage(resultPost).then((res) => {
|
||||
if (res.data.code === 200) {
|
||||
state.ballotId = res.data.data.ballotId;
|
||||
console.log("res.data.data2==============", res.data.data);
|
||||
console.log("res.state.ballotId=2s=============", state.ballotId);
|
||||
message.success("创建成功");
|
||||
closeDrawer();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
const handleAllCancel = () => {
|
||||
state.allFormsData = [];
|
||||
};
|
||||
|
||||
const checkVal = (filterData) => {
|
||||
console.log("filterData.====", filterData);
|
||||
console.log("filterData.voteStemVoList====", filterData.voteStemDtoList);
|
||||
|
||||
if (!filterData.voteStemDtoList) {
|
||||
message.error("请添加题干");
|
||||
return false;
|
||||
}
|
||||
let arr = filterData.voteStemDtoList;
|
||||
arr.forEach((item) => {
|
||||
console.log("item===", item);
|
||||
console.log("!item.voteStemName===", !item.voteStemName);
|
||||
if (!item.voteStemName) {
|
||||
console.log("item.voteStemName===", item.voteStemName);
|
||||
message.error("题干为必填 请确认", item.voteStemName);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return true;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
handleTypes,
|
||||
handleSave,
|
||||
handleAllCancel,
|
||||
handleDel,
|
||||
afterVisibleChange,
|
||||
closeDrawer,
|
||||
edits,
|
||||
delOption,
|
||||
addOption,
|
||||
};
|
||||
},
|
||||
};
|
||||
</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 {
|
||||
margin-left: 50px;
|
||||
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>
|
||||
Reference in New Issue
Block a user