添加投票修改

This commit is contained in:
zhangyc
2022-11-14 10:23:26 +08:00
parent 307e53dbf0
commit 1c30ec788c
5 changed files with 1018 additions and 3 deletions

View File

@@ -0,0 +1,506 @@
<template>
<a-drawer
:visible="addvoteVisible"
class="drawerStyle addvoteDrawer"
width="80%"
title="添加投票"
placement="right"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
<div class="header">
<div v-if="edit" class="headerTitle">编辑投票</div>
<div v-else class="headerTitle">添加投票</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: 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"
:style="{ display: creVote ? 'none' : 'block' }"
@click="showDrawerCreVote"
>
创建投票
</button>
<button
class="xkbtn"
:style="{ display: creVote ? 'block' : 'none' }"
@click="showDrawerCreVote"
>
编辑投票
</button>
<div :style="{ display: creVote ? 'block' : 'none' }">
<div class="fileTigan">
<span style="color: #388be1">{{voteStemName}}</span>
<div class="delBox" @click="dleVoteStem()"></div>
</div>
</div>
</div>
<!-- 创建投票侧弹窗 -->
<div>
<cre-vote
v-model:crevoteVisible="crevotevisible"
@getData="getStemId"
v-model:voteStemId="voteStemId"
/>
</div>
<!-- 创建投票侧弹窗 -->
</div>
<div class="main_item">
<div class="signbox">
<span style="margin-right: 3px">起止时间</span>
</div>
<div class="btnbox">
<a-range-picker
style="width: 424px"
:placeholder="[' 开始时间', ' 结束时间']"
/>
</div>
</div>
<div class="main_item">
<div class="signbox">
<span style="margin-right: 3px">基础投票数</span>
</div>
<div class="btnbox">
<button class="xkbtn">点击上传</button>
</div>
</div>
<div class="main_item" style="margin-top: -25px">
<div class="signbox"></div>
<div class="btnbox">
<span style="color: #999999">支持xls.xlsx</span>
</div>
</div>
<div class="main_item2">
<div class="signbox">
<span style="margin-right: 3px">投票说明</span>
</div>
<div class="textarea">
<a-textarea
v-model:value="textV1"
placeholder="请输入投票说明"
allow-clear
maxlength="150"
/>
</div>
</div>
</div>
</div>
<div class="main_btns">
<button class="btn1">取消</button>
<button class="btn2" @click="createVoteText()">确定</button>
</div>
</div>
</a-drawer>
</template>
<script>
import { reactive, toRefs, ref } from "vue";
import CreVote from "../../components/drawers/CreVote.vue";
import * as api from "../../api/indexVote";
import * as apitaskadd from "../../api/indexTaskadd";
import { message } from "ant-design-vue";
import { toDate } from "../../api/method";
import { RouterEditTask } from "@/api/indexTask";
const options1 = ref([
{
value: "value1",
label: "请选择状态",
},
]);
const rowSelection = ref({
checkStrictly: false,
onChange: (selectedRowKeys, selectedRows) => {
console.log(
`selectedRowKeys: ${selectedRowKeys}`,
"selectedRows: ",
selectedRows
);
},
onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows);
},
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(selected, selectedRows, changeRows);
},
});
export default {
name: "AddVote",
components: {
CreVote,
},
props: {
addvoteVisible: {
type: Boolean,
default: false,
},
edit: {
type: Boolean,
default: false,
},
learn: {
type: Number,
default: 0,
},
projectId: {
type: Number,
default: null,
},
chooseStageId: {
type: Number,
default: null,
},
},
setup(props, ctx) {
const state = reactive({
inputV1: "",
textV1: "",
creVote: false,
crevotevisible: false,
time: undefined,
basevote: "",
endTimes: "",
startTimes: "",
ascriptionId: "",
voteStemId: null,
voteId:"",
voteStemName:"",
});
const closeDrawer = () => {
ctx.emit("update:addvoteVisible", false);
ctx.emit("update:edit", false);
};
const afterVisibleChange = (bool) => {
console.log("state", bool);
};
const showDrawerCreVote = () => {
state.crevotevisible = true;
};
const getStemId = (data) => {
state.voteStemName = data.voteStemName;
state.voteStemId = Number(data.voteStemId);
state.creVote = data.creVote;
console.log('state.voteStemId', state.voteStemId);
console.log('state.voteStemId', state.creVote);
}
//暂时没用 之前给子用传参来着
const changeVData = (data) => {
console.log("111", data);
state.creVote = data.creVote;
state.ascriptionId = data.ascriptionId;
state.voteStemId = data.voteStemId;
state.voteStemName = data.voteStemName;
console.log("222", state.creVote);
console.log("333", state.ascriptionId);
};
const delBox = () => {
state.creVote = false;
};
const updateTableData = (data) => {
console.log(data, 'data');
}
//删除题干信息接口
const dleVoteStem = () => {
let objdelstem = {
voteStemId:state.voteStemId
}
api.deleteVoteStem(objdelstem)
.then((res) => {
console.log('删除题干信息成功', res)
message.success('删除题干信息成功')
delBox()
})
}
//创建投票信息
const createVoteText = () => {
if (!state.inputV1) {
message.destroy();
return message.info("请输入投票名称");
}
if (state.basevote == "") {
state.basevote = 1;
}
if (state.time != undefined) {
state.endTimes = toDate(
new Date(state.time[0].$d).getTime() / 1000,
"Y-M-D"
);
state.startTimes = toDate(
new Date(state.time[1].$d).getTime() / 1000,
"Y-M-D"
);
}
let obj = {
ascriptionId: state.ascriptionId,
baseVote: state.basevote,
createUser: 0,
updateUser: 0,
voteEndTime: state.endTimes,
voteExplain: state.textV1,
voteFlag: "",
voteName: state.inputV1,
voteStartTime: state.startTimes,
voteTag: "",
};
api
.createVote(obj)
.then((res) => {
console.log("创建成功123", res);
message.success("创建成功");
ctx.emit("getData", res.data.data.voteId);
closeDrawer();
if (props.learn == 0)
apitaskadd
.addTask({
courseId: 0,
duration: 0,
flag: true,
name: obj.voteName,
projectId: props.projectId,
projectTaskId: 0,
stageId: props.chooseStageId,
type: 12,
})
.then((res) => {
console.log("调用项目添加接口后", res.data);
//自定义事件给父组件传值
ctx.emit("changeData", false);
//重新获取任务列表
// apiTask.getTask({ projectId: 28 });
// router.push("/taskadd");
})
.catch((err) => {
console.log(err);
});
else {
let editObj1 = {
chapterId: 36,
courseId: 0,
duration: 0,
flag: true,
name: obj.voteName,
routerId: 92,
routerTaskId: 0,
type: 12,
};
RouterEditTask(editObj1);
}
})
.catch((err) => {
console.log("创建失败", err);
});
};
return {
...toRefs(state),
showDrawerCreVote,
afterVisibleChange,
closeDrawer,
getStemId,
changeVData,
rowSelection,
options1,
dleVoteStem,
createVoteText,
delBox,
updateTableData,
};
},
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
background-color: #fafafa !important;
}
.addvoteDrawer {
.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;
.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;
}
}
}
}
}
.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>

View File

@@ -0,0 +1,509 @@
<template>
<a-drawer
:visible="crevoteVisible"
class="drawerStyle crevoteDrawer"
width="80%"
title="创建投票"
placement="right"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
<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="contentMain">
<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: 424px; height: 32px"
placeholder="请输入投票名称"
/>
</div>
</div>
<div class="box" @click="showDrawerCreVote">
<button class="cjtpbtn" @click="addQue()">创建题干</button>
</div>
<div class="queBox" v-for="(q, index) in questions" :key="index">
<div class="delBtn" v-if="questions.length > 1" @click="delQue(questions,index)">
<img src="@/assets/images/projectadd/delete.png" alt="" />
<div class="btnText">删除题干</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"
>{{ q.stemTit }}{{ index + 1 }}</span
>
</div>
<div class="btnbox">
<a-input
v-model:value="q.inputV"
style="width: 424px; height: 32px"
placeholder="请输入题干"
/>
</div>
</div>
<div class="option" v-for="(o, index) in q.options" :key="index">
<div class="mainoptions">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">{{ o.title }}{{index+1}}</span>
</div>
<div class="optionbox">
<div class="btnbox">
<a-input
v-model:value="o.opvalue"
style="width: 424px; height: 32px"
/>
<button v-if="q.options.length > 2" class="delbtn" @click="delOpt(q.options,index)">
删除
</button>
</div>
<!-- <a-upload
v-show="!item.imgVal"
class="in uploadBtn"
:show-upload-list="false"
:before-upload="beforeUpload"
>
<div class="addimg">+ 上传图片</div>
</a-upload> -->
<a-button type="link">+ 上传图片</a-button>
<!-- <input class="file-upload" type="file" accept="image/*" name="picture"/> -->
</div>
</div>
</div>
<div class="main_item">
<div class="signbox"></div>
<div class="btnbox">
<div class="tjxxbtn" @click="addOpt(q.options)">
<div class="btntext">添加选项</div>
</div>
</div>
</div>
</div>
</div>
<div class="main_btns">
<button class="btn1">取消</button>
<button class="btn2" @click="createQueTit">确定</button>
</div>
</div>
</a-drawer>
</template>
<script>
import { reactive, toRefs } from "vue";
import * as api from "../../api/indexVote";
import { message } from "ant-design-vue";
export default {
name: "CreVote",
props: {
crevoteVisible: {
type: Boolean,
default: false,
},
},
setup(props, ctx) {
const state = reactive({
inputV1: "",
creVote: true,
questions: [
{
stemTit: "题干",
inputV: "",
options: [
{
title: "选项",
opvalue: "",
},
{
title: "选项",
opvalue: "",
},
],
},
],
});
const addQue = () => {
state.questions.push({
stemTit: "题干",
inputV: "",
options: [
{
title: "选项",
opvalue: "",
},
{
title: "选项",
opvalue: "",
},
],
});
};
const delQue = (value,index)=>{
console.log('gyd',value,index);
value.splice(value[index],1)
}
const addOpt = (value) => {
console.log(value);
value.push({
// title: "选项" + (value.length + 1 * 1),
title: "选项",
opvalue: "",
});
};
const delOpt = (value,index) => {
console.log('gys', value,index);
// delete value
value.splice(value[index],1)
}
const closeDrawer = () => {
ctx.emit("update:crevoteVisible", false);
};
const afterVisibleChange = (bool) => {
console.log("state", bool);
};
//创建题干接口
const createQueTit = () => {
if (!state.inputV1) {
message.destroy();
return message.info("请输入投票名称");
}
for (let i = 0; i < state.questions.length; i++) {
if (!state.questions[i].inputV) {
message.destroy();
return message.info("请输入题干");
}
}
for (let i = 0; i < state.questions.length; i++) {
for (let k = 0; k < state.questions[i].options.length; k++) {
if (!state.questions[i].options[k].opvalue) {
message.destroy();
return message.info("请输入选项");
}
}
}
// for (let i = 0; i < state.questions.length; i++) {
// for (let k = 0; k < state.questions[i].options.length; k++) {
// // console.log('1111111111111111', state.questions);
// // console.log('2222222222222222', state.questions[i].options);
// }
// }
let obj = {
"ballotId": 0,
"ballotName": state.inputV1,
"createTime": "",
"createUser": 0,
"updateTime": "",
"updateUser": 0,
"voteStemDtoList": [
{
"ballotId": 0,
"createTime": "",
"createUser": 0,
"optionDetailList": [
{
"createTime": "",
"createUser": 0,
"optionFlag": "",
"optionId": 0,
// "optionName": state.questions[i].options[k].opvalue,
"optionName": "",
"optionOrderNum": "",
"optionPictureAddress": "",
"stem": "",
"updateTime": "",
"updateUser": 0,
"voteStemId": 0
}
],
"orderNumber": "",
"updateTime": "",
"updateUser": 0,
"voteStemFlag": "",
"voteStemId": 0,
// "voteStemName": state.questions[i].inputV,
"voteStemName": "",
}
]
}
api
.createOptionMessage(obj)
.then((res) => {
console.log("创建成功", res);
// console.log('res.data.data[0].ascriptionId',res.data.data[0].ascriptionId);
// console.log('res.data.data[0].voteStemId',res.data.data[0].voteStemId);
// console.log('state.questions[0].inputV',state.questions[0].inputV);
message.success("创建成功");
let objstem = {
voteStemName: state.questions[0].inputV,
voteStemId: res.data.data.voteStemVoList[0].voteStemId,
creVote: true,
};
ctx.emit("getData", objstem);
closeDrawer();
})
.catch((err) => {
console.log(err);
});
};
return {
...toRefs(state),
afterVisibleChange,
closeDrawer,
addQue,
delQue,
addOpt,
delOpt,
createQueTit,
};
},
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
background-color: #fafafa !important;
}
.crevoteDrawer {
.drawerMain {
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
margin-left: 24px;
}
}
.contentMain {
.box {
display: flex;
flex: 1;
align-items: center;
margin-bottom: 30px;
.cjtpbtn {
cursor: pointer;
width: 130px;
height: 40px;
background: #388be1;
border-radius: 8px;
border: 0;
margin-right: 8px;
color: #fff;
}
}
.main_item {
display: flex;
align-items: center;
margin-bottom: 32px;
.signbox {
width: 120px;
display: flex;
justify-content: end;
align-items: center;
margin-right: 5px;
.sign {
margin-right: 5px;
}
}
.btnbox {
display: flex;
flex: 1;
align-items: center;
}
}
.mainoptions {
display: flex;
align-items: flex-start;
margin-bottom: 32px;
.signbox {
width: 120px;
display: flex;
justify-content: end;
align-items: center;
padding-top: 5px;
margin-right: 5px;
.sign {
margin-right: 5px;
}
}
.optionbox {
.btnbox {
display: flex;
align-items: center;
}
.delbtn {
border: none;
color: #4ea6ff;
background-color: #fff;
cursor: pointer;
}
}
}
.queBox {
border: 1px solid #e8e8e8;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
padding-top: 30px;
margin-bottom: 30px;
.delBtn {
width: 130px;
height: 40px;
border: 1px solid #4ea6ff;
border-radius: 8px;
color: #4ea6ff;
background-color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin-left: 20px;
margin-bottom: 20px;
img {
margin-right: 10px;
}
}
.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;
.tjxxbtn {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
width: 130px;
height: 40px;
background: #388be1;
border-radius: 8px;
border: 0;
margin-right: 8px;
.btntext {
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: #388be1;
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>

View File

@@ -909,7 +909,7 @@ import AddDiscuss from "../../components/drawers/AddDiscuss.vue";
import AddActive from "../../components/drawers/AddActive.vue"; import AddActive from "../../components/drawers/AddActive.vue";
import AddEval from "../../components/drawers/AddEval.vue"; import AddEval from "../../components/drawers/AddEval.vue";
import AddInvist from "../../components/drawers/AddInvist.vue"; import AddInvist from "../../components/drawers/AddInvist.vue";
import AddVote from "../../components/vote/AddVote.vue"; import AddVote from "../../components/drawers/AddVote.vue";
import AddLive from "../../components/drawers/AddLive.vue"; import AddLive from "../../components/drawers/AddLive.vue";
import AddRef from "../../components/drawers/AddRef.vue"; import AddRef from "../../components/drawers/AddRef.vue";
import * as api from "../../api/indexLevel"; import * as api from "../../api/indexLevel";

View File

@@ -842,7 +842,7 @@ import AddDiscuss from "../../components/drawers/AddDiscuss.vue";
import AddActive from "../../components/drawers/AddActive.vue"; import AddActive from "../../components/drawers/AddActive.vue";
import AddEval from "../../components/drawers/AddEval.vue"; import AddEval from "../../components/drawers/AddEval.vue";
import AddInvist from "../../components/drawers/AddInvist.vue"; import AddInvist from "../../components/drawers/AddInvist.vue";
import AddVote from "../../components/vote/AddVote.vue"; import AddVote from "../../components/drawers/AddVote.vue";
import { message } from "ant-design-vue"; import { message } from "ant-design-vue";
import * as api from "../../api/indexTaskadd"; import * as api from "../../api/indexTaskadd";
import * as apistage from "../../api/indexStage"; import * as apistage from "../../api/indexStage";

View File

@@ -92,7 +92,7 @@
</template> </template>
<script> <script>
import { reactive, toRefs } from "vue"; import { reactive, toRefs } from "vue";
import AddVote from "../../components/vote/AddVote"; import AddVote from "../../components/drawers/AddVote";
// import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue"; // import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue"; import { message } from "ant-design-vue";
import * as api from "../../api/index1"; import * as api from "../../api/index1";