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.
358 lines
11 KiB
358 lines
11 KiB
<template>
|
|
<div>
|
|
|
|
<div class="dialog-h-content scroll-h">
|
|
<el-form ref="ref_form" :inline="true" :model="formData" :rules="dataRule" class="form">
|
|
<el-form-item label="活动总结" prop="sumUp" label-width="150px" style="display: block">
|
|
<div class="item_width_1">
|
|
<el-input type="textarea" autosize placeholder="请输入内容" v-model.trim="formData.sumUp">
|
|
</el-input>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="活动照片" label-width="140px" prop="activityImgs">
|
|
<div>
|
|
<el-upload :headers="$getElUploadHeaders()" class="avatar-uploader" :action="uploadUrl"
|
|
:data="{ customerId: customerId }" :show-file-list="true" :file-list="formData.activityImgs"
|
|
:on-preview="handleImgPreview" :on-success="handleImgSuccess" :on-remove="handleImgRemove"
|
|
:on-exceed="handleImgExceed" :before-upload="beforeImgUpload" list-type="picture-card"
|
|
:limit="3">
|
|
<i class="el-icon-plus avatar-uploader-icon"></i> 最多三张图片 </el-upload>
|
|
</div>
|
|
<div>
|
|
<div v-if="formData.activityImgs && formData.activityImgs.length > 0">
|
|
<img v-for="(img, index) in formData.activityImgs" :key="index" :src="img" alt="照片"
|
|
style="width: 150px; margin-right: 10px;">
|
|
</div>
|
|
<div v-else>
|
|
暂无照片
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<div class="div_btn">
|
|
<el-button size="small" @click="handleCancle">取 消</el-button>
|
|
<el-button size="small" type="primary" :disabled="btnDisable" @click="handleComfirm">确
|
|
定</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import { Loading } from 'element-ui' // 引入Loading服务
|
|
import { requestPost } from '@/js/dai/request'
|
|
import Tinymce from '@c/tinymce2/index.vue'
|
|
import daiMap from "@/utils/dai-map";
|
|
import util from '@js/util.js';
|
|
// import UploadImage from './upload-image.vue'
|
|
import UploadImage from '@/views/modules/plugins/rent/upload-image.vue'
|
|
|
|
var map
|
|
var search
|
|
var markers
|
|
var infoWindowList
|
|
var geocoder // 新建一个正逆地址解析类
|
|
|
|
let loading // 加载动画
|
|
export default {
|
|
data() {
|
|
let initFormData = () => {
|
|
let _form = {
|
|
id: "",
|
|
// typeId: "",
|
|
// activityName: "",//活动名称
|
|
// status: 0,//状态
|
|
// assistingParty: "",//协办方
|
|
// startTime: "",//开始时间
|
|
// endTime: "",//结束时间
|
|
// coverPic: "",//封面图片地址
|
|
// content: "",//活动内容
|
|
// address: "",//地址
|
|
// online: 0,//开关
|
|
// cutOffTime: "",//截止时间
|
|
// points: 0,//积分
|
|
// participants: 1,//活动人数
|
|
// sendMessage: 0,//推送数
|
|
sumUp: "",//活动总结
|
|
activityImgs: [],//图片列表
|
|
// longitude: this.$store.state.user.longitude, //经度
|
|
// latitude: this.$store.state.user.latitude,//纬度
|
|
}
|
|
|
|
return _form
|
|
}
|
|
return {
|
|
activityImgs:[],//活动照片
|
|
records:false,
|
|
searchOptions: [],
|
|
searchValue: '',
|
|
resultList: [],
|
|
num: 0,
|
|
loading: false,
|
|
timeRange: [],
|
|
online: false,
|
|
|
|
btnDisable: false,
|
|
|
|
keyWords: '',
|
|
activityId: '',
|
|
formData: initFormData(),
|
|
serviceList: [],
|
|
// gridList: [],
|
|
agencyId: '',
|
|
|
|
demandOptions: [],
|
|
// typeList: [],
|
|
// corganizerList: [],
|
|
uploadUrl: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2',
|
|
customerId: localStorage.getItem('customerId'),
|
|
|
|
}
|
|
},
|
|
components: { Tinymce, UploadImage },
|
|
mounted() {
|
|
},
|
|
|
|
methods: {
|
|
// 上传成功
|
|
handleImgSuccess(res, file, fileList) {
|
|
if (res.code === 0 && res.msg === 'success') {
|
|
let format = file.name.split('.').pop();
|
|
let srcType = file.raw.type;
|
|
let type = 'file';
|
|
if (srcType.indexOf('image') != -1) {
|
|
type = 'image';
|
|
} else if (srcType.indexOf('video') != -1) {
|
|
type = 'video';
|
|
}
|
|
this.formData.activityImgs.push(res.data.url);
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
},
|
|
// 删除图片
|
|
handleImgRemove(file) {
|
|
console.log('handleImgRemove', file);
|
|
if (file.response) {
|
|
let index = this.formData.activityImgs.findIndex(item => item.url == file.response.data.url);
|
|
this.formData.activityImgs.splice(index, 1);
|
|
} else if (file.url) {
|
|
let index = this.formData.activityImgs.findIndex(item => item.url == file.url);
|
|
this.formData.activityImgs.splice(index, 1);
|
|
}
|
|
},
|
|
// 图片预览
|
|
handleImgPreview(file) {
|
|
console.log(file);
|
|
window.open(file.url || file.response.data.url);
|
|
},
|
|
// 文件数量超过限制
|
|
handleImgExceed() {
|
|
this.$message({
|
|
type: 'warning',
|
|
message: '文件数量最多不超过三个'
|
|
});
|
|
},
|
|
// 上传前的验证
|
|
beforeImgUpload(file) {
|
|
const isLt1M = file.size / 1024 / 1024 < 10;
|
|
const srcType = file.type;
|
|
const format = file.name.split('.').pop();
|
|
if (!isLt1M) {
|
|
this.$message.error('上传文件大小不能超过 10MB!');
|
|
return false;
|
|
}
|
|
if (srcType.indexOf('image') == -1) {
|
|
this.$message.error('仅限图片格式');
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
|
|
onChangeImgs(e, rowIndex = 0) {
|
|
console.log('onChangeFileList', e)
|
|
if (e.length > 0) {
|
|
this.activityImgs = []
|
|
e.forEach(item => {
|
|
let ob = {
|
|
fileType: '0',
|
|
fileUrl: item.response.data.url
|
|
}
|
|
this.activityImgs.push(ob)
|
|
})
|
|
}
|
|
},
|
|
|
|
handleChange(value) {
|
|
console.log(value);
|
|
},
|
|
|
|
async initForm(type, activityId) {
|
|
this.startLoading()
|
|
// console.log("啊实打实的", type, activityId)
|
|
this.formData.id = type
|
|
this.endLoading()
|
|
|
|
},
|
|
|
|
async loadGrid() {
|
|
const url = "/gov/org/customergrid/gridoption"
|
|
|
|
let params = {
|
|
agencyId: this.agencyId
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
this.gridList = data
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
|
|
},
|
|
|
|
async handleComfirm() {
|
|
this.btnDisable = true
|
|
setTimeout(() => {
|
|
this.btnDisable = false
|
|
}, 10000)
|
|
// console.log("data/actual/base/communityActivity/save",this.formData)
|
|
this.$refs['ref_form'].validate((valid, messageObj) => {
|
|
if (!valid) {
|
|
app.util.validateRule(messageObj)
|
|
this.btnDisable = false
|
|
} else{
|
|
this.addActivity()
|
|
}
|
|
})
|
|
},
|
|
async addActivity() {
|
|
console.log(this.formData);
|
|
let url = '/actual/base/communityActivity/save'
|
|
const { data, code, msg } = await requestPost(url, this.formData)
|
|
if (code === 0) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '操作成功'
|
|
})
|
|
this.resetData()
|
|
this.$emit('dialogOk')
|
|
this.btnDisable = false
|
|
} else {
|
|
this.btnDisable = false
|
|
this.$message.error(msg)
|
|
}
|
|
|
|
|
|
},
|
|
|
|
handleCancle() {
|
|
console.log("点击取消了点击取消了点击取消了")
|
|
this.resetData()
|
|
this.$emit('summDetailClose')
|
|
this.$emit("diaDetailClose");
|
|
|
|
},
|
|
|
|
resetData() {
|
|
this.formData = {
|
|
sumUp: "",//活动总结
|
|
activityImgs: [],//图片列表
|
|
}
|
|
|
|
},
|
|
// 开启加载动画
|
|
startLoading() {
|
|
loading = Loading.service({
|
|
lock: true, // 是否锁定
|
|
text: '正在加载……', // 加载中需要显示的文字
|
|
background: 'rgba(0,0,0,.7)' // 背景颜色
|
|
})
|
|
},
|
|
// 结束加载动画
|
|
endLoading() {
|
|
// clearTimeout(timer);
|
|
if (loading) {
|
|
loading.close()
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
dataRule() {
|
|
return {
|
|
sumUp: [
|
|
{ required: true, message: '请输入活动总结', trigger: 'blur' }
|
|
],
|
|
activityImgs: [
|
|
{ required: true, message: '请选择活动照片', trigger: 'blur' }
|
|
]
|
|
}
|
|
},
|
|
|
|
},
|
|
props: {
|
|
|
|
// unitList: {
|
|
// type: Array,
|
|
// default: []
|
|
// },
|
|
gridList: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/scss/modules/visual/communityManageForm.scss";
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.item_width_1 {
|
|
width: 560px;
|
|
|
|
/deep/.tox .tox-dialog {
|
|
z-index: 20000;
|
|
}
|
|
}
|
|
|
|
.tinymce_view {
|
|
::v-deep .tox .tox-dialog {
|
|
z-index: 2000000000;
|
|
}
|
|
}
|
|
|
|
.div_map {
|
|
position: relative;
|
|
}
|
|
|
|
.div_searchmap {
|
|
z-index: 5000;
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 5px;
|
|
}
|
|
|
|
.tinymce_view {
|
|
height: 400px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.text_p {
|
|
margin: 0;
|
|
padding: 0 10px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 5px;
|
|
|
|
>p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
</style>
|