李素
1 year ago
6 changed files with 516 additions and 105 deletions
@ -0,0 +1,360 @@ |
|||
<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() { |
|||
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> |
|||
Loading…
Reference in new issue