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

feat:投票新样式（图片上传功能没做，删除暂时有问题）

Browse Source
This commit is contained in:
dongwug
2022-11-09 12:00:40 +08:00
parent 1f71d92d8a
commit 2d2e974277
2 changed files with 156 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/drawers/AddVote.vue
View File

@@ -27,7 +27,7 @@
alt=""
/>
</div>
<span style="margin-right: 3px">投票名称：</span>
<span style="margin-right: 3px">任务名称：</span>
</div>
<div class="btnbox">
<a-input

219
src/components/drawers/CreVote.vue
View File

@@ -36,6 +36,10 @@
<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">
<img src="@/assets/images/projectadd/delete.png" alt="" />
<div class="btnText">删除题干</div>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
@@ -44,7 +48,9 @@
alt=""
/>
</div>
<span style="margin-right: 3px">题干</span>
<span style="margin-right: 3px"
>{{ q.stemTit }}{{ index + 1 }}</span
>
</div>
<div class="btnbox">
<a-input
@@ -55,7 +61,7 @@
</div>
</div>
<div class="option" v-for="(o, index) in q.options" :key="index">
<div class="main_item">
<div class="mainoptions">
<div class="signbox">
<div class="sign">
<img
@@ -63,24 +69,29 @@
alt=""
/>
</div>
<span style="margin-right: 3px">{{ o.title }}</span>
<span style="margin-right: 3px">{{ o.title }}{{index+1}}</span>
</div>
<div class="btnbox">
<a-input
v-model:value="o.opvalue"
style="width: 424px; height: 32px"
/>
<a-button v-if="o.opvalue == ''" type="link"
>+ 上传图片</a-button
>
<a-button v-else type="link">删除</a-button>
<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" :key="index" @click="delOpt(q.options)">
删除
</button>
</div>
<a-button v-if="o.opvalue == ''" 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" @click="addOpt(q.options)">
<div class="tjxxbtn"><div class="btntext">添加选项</div></div>
<div class="btnbox">
<div class="tjxxbtn" @click="addOpt(q.options)">
<div class="btntext">添加选项</div>
</div>
</div>
</div>
</div>
@@ -112,14 +123,15 @@ export default {
creVote: true,
questions: [
{
stemTit: "题干",
inputV: "",
options: [
{
title: "选项1",
title: "选项",
opvalue: "",
},
{
title: "选项2",
title: "选项",
opvalue: "",
},
],
@@ -129,14 +141,15 @@ export default {
const addQue = () => {
state.questions.push({
stemTit: "题干",
inputV: "",
options: [
{
title: "选项1",
title: "选项",
opvalue: "",
},
{
title: "选项2",
title: "选项",
opvalue: "",
},
],
@@ -145,10 +158,16 @@ export default {
const addOpt = (value) => {
console.log(value);
value.push({
title: "选项" + (value.length + 1 * 1),
// title: "选项" + (value.length + 1 * 1),
title: "选项",
opvalue: "",
});
};
const delOpt = (value) => {
console.log('gys', value);
// delete value[0]
value.pop()
}
const closeDrawer = () => {
ctx.emit("update:crevoteVisible", false);
@@ -171,7 +190,7 @@ export default {
// message.destroy();
// return message.info("请输入选项");
// }
console.log('111111',state.questions);
console.log("111111", state.questions);
// console.log('22222',state.questions.inputV);
// console.log('333333',state.questions.options);
let obj = [
@@ -207,11 +226,11 @@ export default {
// 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 = {
stemId: res.data.data[0].ascriptionId,
ascriptionId: res.data.data[0].voteStemId,
}
};
api
.queryStemByStemId(objstem)
.then((res) => {
@@ -240,6 +259,7 @@ export default {
closeDrawer,
addQue,
addOpt,
delOpt,
createQueTit,
};
},
@@ -291,6 +311,7 @@ export default {
display: flex;
justify-content: end;
align-items: center;
margin-right: 5px;
.sign {
margin-right: 5px;
}
@@ -299,24 +320,9 @@ export default {
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 {
.mainoptions {
display: flex;
align-items: flex-start;
margin-bottom: 32px;
@@ -325,43 +331,128 @@ export default {
display: flex;
justify-content: end;
align-items: center;
padding-top: 5px;
margin-right: 5px;
.sign {
margin-right: 5px;
}
}
.kqszbox {
.qdqtbox {
margin-left: 56px;
}
.setbox {
.optionbox {
.btnbox {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
margin-bottom: 24px;
.timerbox {
margin-top: 6px;
margin-right: 32px;
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;
flex-wrap: nowrap;
justify-content: center;
cursor: pointer;
width: 130px;
height: 40px;
background: #388be1;
border-radius: 8px;
border: 0;
margin-right: 8px;
.btntext {
color: #fff;
}
}
}
}
.btnbox2 {
.main_item2 {
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;
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;
}
}
}
}