<template>
|
<div class="taln_add">
|
<div class="mr-b-10" style="padding-top: 20px">新增议事投票</div>
|
<section class="sec">
|
<p class="label" data-require>议事内容：</p>
|
<article class="up">
|
<el-radio v-model="contentType" label="1">社区议事</el-radio>
|
<el-radio v-model="contentType" label="2">院落议事</el-radio>
|
<el-radio v-model="contentType" label="3">党群议事</el-radio>
|
<el-radio v-model="contentType" label="4">居民议事</el-radio>
|
<el-radio v-model="contentType" label="5">其他</el-radio>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label" data-require>议事类型：</p>
|
<article class="up">
|
<el-radio v-model="radio" label="1">议事</el-radio>
|
<el-radio v-model="radio" label="2">投票</el-radio>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label" data-require>
|
<span v-if="radio === '1'">议事主题：</span>
|
<span v-else>投票主题：</span>
|
</p>
|
<article>
|
<el-input
|
style="width: 450px"
|
type="textarea"
|
:placeholder="radio === '1' ? '请输入议事内容' : '请输入投票活动内容'"
|
v-model="textarea"
|
maxlength="200"
|
:rows="5"
|
show-word-limit
|
>
|
</el-input>
|
</article>
|
</section>
|
<div v-if="radio === '2'">
|
<section class="sec">
|
<p class="label" data-require>投票时间：</p>
|
<article>
|
<el-date-picker
|
style="width: 300px"
|
v-model="chooseTime"
|
type="datetimerange"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
format="yyyy-MM-dd HH:mm:ss"
|
:picker-options="pickerOptions0"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
:default-time="['00:00:00', '23:59:59']"
|
>
|
</el-date-picker>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label" data-require>每人票数：</p>
|
<article>
|
<el-input-number
|
v-model="count"
|
:min="1"
|
label="描述文字"
|
></el-input-number>
|
</article>
|
</section>
|
<section class="sec m-bottom">
|
<p class="label" data-require>每天重复投：</p>
|
<article class="up">
|
<el-radio v-model="voteRadio" label="1">拒绝</el-radio>
|
<el-radio v-model="voteRadio" label="2">允许</el-radio>
|
</article>
|
</section>
|
<p class="alert">
|
解释说明：如果允许每天重复投，在投票活动期间则用户每天都有设置的固定票数可进行投票
|
</p>
|
</div>
|
<!-- 图片 -->
|
<div class="image" v-if="radio === '1'">
|
<section
|
class="sec"
|
data-error="提示：最多可上传9张图片"
|
data-gray="true"
|
>
|
<p class="label">议事附件：</p>
|
<article class="flex">
|
<div class="avatar" v-for="(i, j) in image" :key="j + '-ta-img'">
|
<span
|
class="close el-icon-close"
|
@click.stop="onCloseImage(i)"
|
></span>
|
<img :src="i" alt="" @click.stop="onScaleImage(i)" />
|
</div>
|
<div class="avatar" v-if="image.length < 9">
|
<v-upload @path="onPath" slots>
|
<div class="avatar"><i class="el-icon-plus"></i><b>上传</b></div>
|
</v-upload>
|
</div>
|
</article>
|
</section>
|
</div>
|
<!-- 投票 -->
|
<div class="progress" v-else>
|
<section class="sec">
|
<p class="label" data-require>投票范围：</p>
|
<article class="list fl-al">
|
<el-radio-group v-model="voteScope">
|
<el-radio :label="1">全部居民</el-radio>
|
<el-radio :label="2">志愿者</el-radio>
|
<el-radio :label="3">党员</el-radio>
|
</el-radio-group>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label" data-require>签字：</p>
|
<article class="list fl-al">
|
<el-radio-group v-model="needSign">
|
<el-radio :label="true">需要</el-radio>
|
<el-radio :label="false">不需要</el-radio>
|
</el-radio-group>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label" data-require>投票标题：</p>
|
<article class="list">
|
<el-input
|
placeholder="请输入投票主题"
|
size="small"
|
v-model="h2"
|
style="width: 300px"
|
maxlength="10"
|
show-word-limit
|
></el-input>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label"></p>
|
<article>
|
<ul class="list">
|
<li v-for="(x, u) in list" :key="u + '-c-lis'">
|
<el-input
|
maxlength="30"
|
style="width: 450px"
|
show-word-limit
|
:placeholder="'请输入投票选项'"
|
size="small"
|
v-model="x.v"
|
></el-input>
|
<div
|
class="circle el-icon-minus"
|
v-if="x.id >= 0"
|
@click="onDelList(x)"
|
></div>
|
<div class="but-box">
|
<div class="but" v-if="!x.url">
|
<v-upload slots @path="onPath1($event, x)">
|
<el-button
|
circle
|
type="primary"
|
class="el-icon-picture"
|
size="small"
|
></el-button>
|
</v-upload>
|
</div>
|
<div @click="clear(x)" v-else class="image">
|
<img class="clear" src="/static/image/clear.png" alt="" />
|
<img :src="x.url" alt="" />
|
</div>
|
<el-checkbox class="mr-l-10" v-model="x.needReason"
|
>填写原因</el-checkbox
|
>
|
</div>
|
</li>
|
<li class="add" v-if="list.length < 10">
|
<span class="col_primary" @click="onAddList">添加选项</span>
|
</li>
|
</ul>
|
</article>
|
</section>
|
<section class="sec" v-if="false">
|
<p class="label">投票设置：</p>
|
<article class="up">
|
<el-radio v-model="check" label="1">单选</el-radio>
|
<!-- <el-radio
|
v-model="check"
|
label="2"
|
>多选</el-radio> -->
|
</article>
|
</section>
|
</div>
|
<div class="fl-al mr-t-30 mr-l-30">
|
<el-button size="mini" @click="$router.back()">返回</el-button>
|
<el-button size="mini" type="primary" @click="sub">立即发布</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import vUpload from "com/upload/upload1";
|
export default {
|
props: {
|
item: {
|
type: Object,
|
default: () => {
|
return {};
|
},
|
},
|
door: {
|
type: Object,
|
default: () => {
|
return {};
|
},
|
},
|
},
|
components: { vUpload },
|
data() {
|
return {
|
image: [],
|
textarea: "",
|
h2: "",
|
// voteNumber:"",
|
radio: "1",
|
check: "1",
|
voteRadio: "1",
|
list: [],
|
chooseTime: "",
|
needSign: false,
|
voteScope: 1,
|
count: 1,
|
contentType: "1", //议事内容类型
|
pickerOptions0: {
|
disabledDate(time) {
|
return time.getTime() < Date.now() - 8.64e7;
|
},
|
},
|
};
|
},
|
watch: {
|
item: {
|
handler() {
|
this.setItem();
|
},
|
deep: true,
|
},
|
door: {
|
handler(n) {
|
if (n.r) {
|
this.sub(n.t);
|
}
|
},
|
deep: true,
|
},
|
},
|
methods: {
|
onCloseImage(i) {
|
this.image = this.image.filter((r) => {
|
return r !== i;
|
});
|
},
|
onScaleImage(v) {
|
this.$store.dispatch("setImage", {
|
time: Date.now(),
|
title: "[大图]",
|
foot: 1,
|
tool: 1,
|
pic: v,
|
list: this.image,
|
});
|
},
|
onAddList() {
|
this.list.push({ id: Date.now(), v: "", url: "", needReason: false });
|
},
|
onDelList(i) {
|
this.list = this.list.filter((k) => {
|
return i.id !== k.id;
|
});
|
},
|
clear(item) {
|
item.url = "";
|
},
|
onPath(v) {
|
this.image.push(v);
|
},
|
onPath1(v, item) {
|
//投票上传图片
|
item.url = v;
|
},
|
setItem() {
|
this.list = [
|
{ v: "", id: -2, url: "", needReason: false },
|
{ v: "", id: -1, url: "", needReason: false },
|
];
|
},
|
sub(type) {
|
let os = {
|
discussSubject: this.textarea,
|
type: this.radio,
|
isRepeat: this.voteRadio, //text 投票方式
|
count: this.count, // text 投票次数
|
startTime: this.chooseTime[0],
|
endTime: this.chooseTime[1],
|
contentType: this.contentType,
|
needSign: this.needSign,
|
voteScope: this.voteScope,
|
};
|
if (os.contentType === "") {
|
demo.toast("请选择议事内容");
|
return 0;
|
}
|
if (this.radio === "1") {
|
if (os.discussSubject === "") {
|
demo.toast("请输入议事主题");
|
return 0;
|
}
|
// 图
|
// if (!this.image.length) {
|
// demo.toast("请至少上传一张议事附件");
|
// return 0;
|
// }
|
os.photoPah = this.image.join(",");
|
} else {
|
if (os.discussSubject === "") {
|
demo.toast("请输入投票主题");
|
return 0;
|
}
|
if (this.chooseTime === "") {
|
demo.toast("请输入投票开始和结束时间");
|
return 0;
|
}
|
// 投票
|
if (this.h2 === "") {
|
demo.toast("请输入投票标题");
|
return 0;
|
}
|
let ls = this.list.filter((k) => {
|
return k.v.trim() === "";
|
});
|
if (this.list.length - ls.length < 2) {
|
demo.toast("投票选项至少为2个");
|
return 0;
|
}
|
if (ls.length) {
|
demo.toast("请完善投票选项");
|
return 0;
|
}
|
os.voteTitle = this.h2;
|
os.discussOptions = this.list.map((k) => {
|
return {
|
optionContent: k.v,
|
optionUrl: k.url,
|
needReason: k.needReason,
|
};
|
});
|
let lens = os.discussOptions.filter((r) => {
|
return !!r.optionUrl;
|
}).length;
|
if (os.discussOptions.length !== lens && lens !== 0) {
|
return demo.toast("请完善图片上传");
|
}
|
os.discussOption = this.check;
|
}
|
if (os.type == 1) {
|
os.isRepeat = "";
|
os.voteNumber = 0;
|
}
|
this.$api.post("discuss", os, (e) => {
|
demo.toast("添加成功");
|
this.$router.back();
|
});
|
},
|
},
|
mounted() {
|
this.setItem();
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.taln_add {
|
overflow: auto;
|
.up {
|
padding-top: 6px;
|
}
|
.m-bottom {
|
margin-bottom: 5px;
|
}
|
.alert {
|
font-size: 13px;
|
color: #606266;
|
padding-bottom: 20px;
|
width: 437px;
|
padding-left: 14px;
|
line-height: 20px;
|
}
|
.list {
|
.el-input {
|
width: 80%;
|
}
|
li {
|
display: flex;
|
align-items: center;
|
margin-bottom: 8px;
|
.but-box {
|
height: 50px;
|
flex: 1;
|
display: flex;
|
padding-left: 4px;
|
align-items: center;
|
.but {
|
font-size: 12px;
|
display: flex;
|
align-items: center;
|
}
|
.image {
|
position: relative;
|
cursor: pointer;
|
width: 50px;
|
height: 50px;
|
&:hover .clear {
|
display: block;
|
}
|
.clear {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
width: 25px;
|
height: 25px;
|
display: none;
|
}
|
img {
|
width: 50px;
|
height: 50px;
|
}
|
}
|
}
|
.circle {
|
display: block;
|
width: 30px;
|
height: 30px;
|
/*margin-left: 10px;*/
|
text-align: center;
|
font-size: 22px;
|
line-height: 30px;
|
border-radius: 10px;
|
border: 1px solid #999;
|
transform: scale(0.8);
|
cursor: pointer;
|
}
|
&.add {
|
text-align: center;
|
display: block;
|
width: 80%;
|
padding: 5px 0;
|
span {
|
height: 40px;
|
line-height: 40px;
|
cursor: pointer;
|
font-size: 14px;
|
letter-spacing: 2px;
|
font-weight: 450;
|
}
|
}
|
}
|
}
|
.flex {
|
display: flex;
|
flex-wrap: wrap;
|
.avatar {
|
margin: 0 10px 10px 0;
|
position: relative;
|
img {
|
display: block;
|
width: 100%;
|
height: 100%;
|
}
|
.close {
|
position: absolute;
|
right: -8px;
|
top: -8px;
|
width: 16px;
|
height: 16px;
|
border-radius: 50%;
|
background-color: tomato;
|
color: #fff;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
</style>
|
