You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
281 lines
7.6 KiB
281 lines
7.6 KiB
<template>
|
|
<div>
|
|
<a-drawer :title="title" :width="720" :visible="show" :body-style="{ paddingBottom: '80px' }" @close="addClose">
|
|
<div class="drawer-content">
|
|
<span style="font-weight: 600">投票信息</span>
|
|
<a-divider></a-divider>
|
|
<a-form-model ref="ruleForm" :model="form" :rules="rules">
|
|
<a-row>
|
|
<a-col :span="12">
|
|
<a-form-model-item label="投票标题" prop="title">
|
|
<a-input v-model="form.title" placeholder="请输入标题" style="width: 80%"></a-input>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-model-item label="投票时间" :rules="{required: true,message:'请选择日期',trigger:'change'}">
|
|
<a-range-picker v-model="selTime" @change="changeTime" value-format="YYYY-MM-DD HH:mm:ss" style="width: 80%"></a-range-picker>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-model-item label="公开人群" prop="type">
|
|
<a-select v-model="form.type" placeholder="请选择对象" style="width: 80%">
|
|
<a-select-option :value="1">全部</a-select-option>
|
|
<a-select-option :value="2">业主</a-select-option>
|
|
<a-select-option :value="3">业主亲属</a-select-option>
|
|
<a-select-option :value="4">租户</a-select-option>
|
|
<a-select-option :value="5">租户亲属</a-select-option>
|
|
</a-select>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-model-item label="是否发布" prop="isRelease">
|
|
<a-select v-model="form.isRelease" placeholder="请选择" style="width: 80%">
|
|
<a-select-option :value="1">发布</a-select-option>
|
|
<a-select-option :value="0">不发布</a-select-option>
|
|
</a-select>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
<a-col :span="24">
|
|
<a-form-model-item label="投票内容" prop="content">
|
|
<a-textarea v-model="form.content" placeholder="请输入内容" style="width: 90%"></a-textarea>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
<a-col :span="24">
|
|
<a-form-model-item label="图片上传">
|
|
<commonUpload :fileList="fileList" @handleChange="handleChange"></commonUpload>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
<a-col :span="24">
|
|
<a-form-model-item label="投票选项">
|
|
<a-button @click="addVoteItem">添加投票选项</a-button>
|
|
<div class="vote-item" v-for="(item,index) in form.voteUpdateCandidateDTOList" :key="index">
|
|
<div class="vote-item-title">
|
|
<span style="font-weight: 600">选项{{index+1}}</span>
|
|
<a @click="deleteVoteItem(item,index)" style="margin-left: 20px">删除</a>
|
|
</div>
|
|
<a-form-model layout="inline">
|
|
<a-form-model-item label="选项名称">
|
|
<a-input v-model="item.name"></a-input>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="手机号">
|
|
<a-input v-model="item.tel"></a-input>
|
|
</a-form-model-item>
|
|
<a-form-model-item>
|
|
<a-upload
|
|
:action="`${$upload}`"
|
|
:multiple="false"
|
|
accept=".jpg,.JPG,.png,.PNG,.jpeg,.JPEG"
|
|
:headers="uploadHeaders"
|
|
@change="voteImgChange"
|
|
:file-list="item.defaultFileList"
|
|
>
|
|
<a-button @click="uploadIndex(index)"> <a-icon type="upload" />点击上传</a-button>
|
|
</a-upload>
|
|
</a-form-model-item>
|
|
</a-form-model>
|
|
</div>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form-model>
|
|
</div>
|
|
<div class="drawer-footer">
|
|
<a-button :style="{ marginRight: '8px' }" @click="addClose">
|
|
关闭
|
|
</a-button>
|
|
<a-button type="primary" @click="submit"> 提交 </a-button>
|
|
</div>
|
|
</a-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import store from "@/store";
|
|
import { findVote, updateVote} from "@/api/operation/vote"
|
|
import { form,rules } from "./config.js";
|
|
export default {
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
editId: Number,
|
|
},
|
|
data() {
|
|
return {
|
|
title: "修改投票",
|
|
form: {
|
|
title: '',
|
|
content: '',
|
|
beginDate: '',
|
|
endDate: '',
|
|
type: 1,
|
|
isRelease: 0,
|
|
voteUpdateCandidateDTOList: [],
|
|
imgUrls: [],
|
|
},
|
|
rules: rules,
|
|
selTime: [],
|
|
fileList: [],
|
|
rule: [],
|
|
activeId: undefined,
|
|
deleteId: [], //删除的选项的Id
|
|
|
|
uploadHeaders: {
|
|
"manage-login-token": store.getters.getToken,
|
|
},
|
|
activeIndex: undefined,
|
|
};
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
addClose() {
|
|
this.fileList = [];
|
|
this.form = {
|
|
title: '',
|
|
content: '',
|
|
beginDate: '',
|
|
endDate: '',
|
|
type: 1,
|
|
isRelease: 0,
|
|
voteInsertCandidateDTOList: [],
|
|
imgUrls: [],
|
|
};
|
|
this.deleteId = [];
|
|
this.selTime = [];
|
|
this.$emit("addClose");
|
|
},
|
|
success() {
|
|
this.$emit("success");
|
|
this.addClose();
|
|
},
|
|
submit() {
|
|
this.$refs.ruleForm.validate(async (valid) => {
|
|
if (valid) {
|
|
let obj = Object.assign(this.form, {id: this.activeId,deleteVoteCandidateIds: this.deleteId})
|
|
updateVote(obj).then(res => {
|
|
if(res.code === 200){
|
|
this.$message.success(res.msg);
|
|
this.success();
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
}
|
|
});
|
|
},
|
|
//图片上传
|
|
handleChange(data) {
|
|
this.fileList = data;
|
|
this.form.imgUrls = [];
|
|
data.forEach(ele => {
|
|
if(ele.status == 'done') {
|
|
this.form.imgUrls.push(ele.response.data)
|
|
}
|
|
})
|
|
},
|
|
//投票选项图片上传
|
|
uploadIndex(index) {
|
|
this.activeIndex = index
|
|
},
|
|
voteImgChange(data) {
|
|
this.form.voteUpdateCandidateDTOList[this.activeIndex].imgUrls = []
|
|
if(data.file.status == 'done') {
|
|
this.form.voteUpdateCandidateDTOList[this.activeIndex].imgUrls.push(data.file.response.data)
|
|
}
|
|
},
|
|
//修改时间
|
|
changeTime(val) {
|
|
this.form.beginDate = val[0];
|
|
this.form.endDate = val[1];
|
|
},
|
|
//添加投票选项
|
|
addVoteItem() {
|
|
let obj = {
|
|
id: null,
|
|
name: '',
|
|
tel: '',
|
|
imgUrls: [],
|
|
};
|
|
this.form.voteUpdateCandidateDTOList.push(obj)
|
|
},
|
|
//删除投票选项
|
|
deleteVoteItem(item,index) {
|
|
this.deleteId.push(item.id);
|
|
this.form.voteUpdateCandidateDTOList.splice(index,1)
|
|
},
|
|
},
|
|
watch: {
|
|
editId: {
|
|
handler(val) {
|
|
if (val !== null) {
|
|
this.title = "修改投票";
|
|
this.activeId = val;
|
|
findVote({ voteId: val }).then((res) => {
|
|
let data = res.data;
|
|
//处理选项
|
|
let arr = []
|
|
data.voteFBICandidateVoList.forEach(ele => {
|
|
let obj = {
|
|
id: ele.id,
|
|
name: ele.name,
|
|
tel: ele.tel,
|
|
imgUrls: [],
|
|
}
|
|
if(ele.imgList.length > 0) {
|
|
obj.imgUrls.push(ele.imgList[0].url);
|
|
};
|
|
arr.push(obj);
|
|
})
|
|
////////
|
|
this.form = {
|
|
title: data.title,
|
|
content: data.content,
|
|
beginDate: data.beginDate,
|
|
endDate: data.endDate,
|
|
type: data.type,
|
|
isRelease: data.isRelease,
|
|
voteUpdateCandidateDTOList: arr,
|
|
imgUrls: [],
|
|
};
|
|
console.log(this.form)
|
|
this.selTime = [res.data.beginDate, res.data.endDate];
|
|
if (res.data.imgList.length > 0) {
|
|
const pic = [];
|
|
this.form.imgUrls.push(res.data.imgList[0].url);
|
|
for (let item of res.data.imgList) {
|
|
let obj = {
|
|
name: item.url.split("_")[0] + "." + item.url.split(".")[1],
|
|
url: this.$ImgUrl(item.url),
|
|
uid: item.url.split("_")[1],
|
|
status: "done",
|
|
thumbUrl: this.$ImgUrl(item.url),
|
|
};
|
|
pic.push(obj);
|
|
}
|
|
this.fileList = pic;
|
|
} else {
|
|
this.form.imgUrls = [];
|
|
}
|
|
});
|
|
} else {
|
|
this.title = "新增投票";
|
|
}
|
|
},
|
|
immediate: true,
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.vote-item {
|
|
width: 600px;
|
|
.vote-item-title {
|
|
display: flex;
|
|
}
|
|
}
|
|
</style>
|