李素
1 year ago
6 changed files with 671 additions and 138 deletions
@ -1,80 +1,375 @@ |
|||
<template> |
|||
<el-form :model="formData" @submit.native.prevent="handleSubmit"> |
|||
<el-form-item label="文章标题：" :label-width="formLabelWidth"> |
|||
<el-input v-model="formData.title" maxlength="50" required></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="封面图片：" :label-width="formLabelWidth"> |
|||
<el-upload |
|||
action="#" |
|||
list-type="picture" |
|||
:on-change="handleFileUpload" |
|||
:file-list="fileList" |
|||
> |
|||
<el-button size="small" type="primary">点击上传</el-button> |
|||
</el-upload> |
|||
</el-form-item> |
|||
<el-form-item label="发布时间：" :label-width="formLabelWidth"> |
|||
<el-date-picker v-model="formData.publishDate" type="date" placeholder="选择日期"></el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label="文章标签：" :label-width="formLabelWidth"> |
|||
<el-select v-model="formData.tags" placeholder="请选择"> |
|||
<el-option |
|||
v-for="tag in availableTags" |
|||
:key="tag" |
|||
:label="tag" |
|||
:value="tag" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="内容：" :label-width="formLabelWidth"> |
|||
<el-input type="textarea" v-model="formData.content" rows="10" required></el-input> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-checkbox v-model="formData.homepageTop">首页置顶</el-checkbox> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-checkbox v-model="formData.notification">消息推送</el-checkbox> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="handleSubmit">发布</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div> |
|||
|
|||
<div class="dialog-h-content scroll-h"> |
|||
<el-form ref="ref_form" :inline="true" :model="formData" :rules="dataRule" :disabled="formType === 'detail'" |
|||
class="form"> |
|||
<el-form-item label="文章标题" prop="title" label-width="150px"> |
|||
<el-input v-model.trim="formData.title" size="small" clearable placeholder="请输入活动名称" |
|||
class="u-item-width-normal"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="发布时间" label-width="140px" prop="releaseTime"> |
|||
<el-date-picker v-model.trim="formData.releaseTime" type="date" value-format="yyyy-MM-dd" |
|||
format="yyyy-MM-dd" placeholder="选择发布时间" style="width:280px"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="文章标签" prop="tagId" label-width="150px"> |
|||
<el-select class="u-item-width-normal" v-model.trim="formData.tagId" placeholder="请选择" clearable> |
|||
<el-option v-for="item in adverTagList" :key="item.id" :label="item.tagName" :value="item.id" |
|||
class="u-item-width-normal"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="封面图片" label-width="140px" prop="coverPic"> |
|||
<template> |
|||
<upload-image :defaultFileList="fileList" :limit="1" @change="onChangeFileList"></upload-image> |
|||
</template> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="内容" prop="content" label-width="150px" style="display: block"> |
|||
<div class="item_width_1"> |
|||
<Tinymce class="tinymce_view " v-if="formType != 'detail'" v-model.trim="formData.content" |
|||
:height="250" placeholder="在这里输入文字" /> |
|||
</div> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="首页置顶" style="display: block" prop="peopleCount" label-width="150px"> |
|||
<el-switch v-model="top" @change="handleOnlineRegistration"></el-switch> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="消息推送" label-width="140px"> |
|||
<el-checkbox-group v-model="formData.sendMsg"> |
|||
<el-checkbox true-label="1" false-label="0" label="是否通过公众号推送给社区居民"></el-checkbox> |
|||
</el-checkbox-group> |
|||
</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() { |
|||
return { |
|||
formData: { |
|||
title: '', |
|||
coverImage: null, |
|||
publishDate: '', |
|||
tags: '', |
|||
content: '', |
|||
homepageTop: false, |
|||
notification: false |
|||
}, |
|||
availableTags: ['标签1', '标签2', '标签3'], |
|||
fileList: [], |
|||
formLabelWidth: '100px' |
|||
}; |
|||
let initFormData = () => { |
|||
let _form = { |
|||
title: "",//标题 |
|||
content: "",//内容 |
|||
tagId: "",//标签id |
|||
coverPic: "",//封面图 |
|||
releaseTime: "",//发布时间 |
|||
sendMsg: 0,//是否推送 |
|||
top: 0,//是否置顶 |
|||
status: 0 //状态 |
|||
} |
|||
|
|||
return _form |
|||
} |
|||
return { |
|||
adverTagList:[], |
|||
|
|||
|
|||
|
|||
////// |
|||
top:false, |
|||
fileList: [],//封面图片 |
|||
activityImgs:[],//活动照片 |
|||
formType: 'add', //表单操作类型 add新增，edit编辑,records记录 |
|||
// records:false, |
|||
searchOptions: [], |
|||
searchValue: '', |
|||
resultList: [], |
|||
num: 0, |
|||
loading: false, |
|||
timeRange: [], |
|||
online: false, |
|||
|
|||
btnDisable: false, |
|||
|
|||
keyWords: '', |
|||
activityId: '', |
|||
formData: initFormData(), |
|||
serviceList: [], |
|||
// gridList: [], |
|||
agencyId: '', |
|||
|
|||
demandOptions: [], |
|||
uploadUrl: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2', |
|||
customerId: localStorage.getItem('customerId'), |
|||
|
|||
} |
|||
}, |
|||
components: { Tinymce, UploadImage }, |
|||
mounted() { |
|||
this.advertisingTag() |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
handleFileUpload(file, fileList) { |
|||
this.fileList = fileList; |
|||
this.formData.coverImage = file.raw; |
|||
}, |
|||
handleSubmit() { |
|||
console.log(this.formData); |
|||
this.$message.success('表单已提交'); |
|||
} |
|||
async advertisingTag () { |
|||
const url = "/actual/base/advertisingTag/page" |
|||
let params = { |
|||
pageSize: this.pageSize, |
|||
pageNo: this.pageNo, |
|||
tagName: "", |
|||
status: "" |
|||
} |
|||
const { data, code, msg,internalMsg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.adverTagList = data.list |
|||
} else if(internalMsg !== ''){ |
|||
this.$message.error(internalMsg) |
|||
}else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
///// |
|||
|
|||
handleOnlineRegistration(value) { |
|||
// console.log(value) |
|||
if (value) { |
|||
this.formData.top = 1; |
|||
} else { |
|||
this.formData.top = 0; |
|||
} |
|||
}, |
|||
|
|||
onChangeFileList(e) { |
|||
if (e.length > 0) { |
|||
let item = e[0]; |
|||
let ob = { |
|||
fileType: '0', |
|||
fileUrl: item.response.data.url |
|||
}; |
|||
this.fileList = [ob]; |
|||
this.formData.coverPic = ob.fileUrl; |
|||
} |
|||
}, |
|||
|
|||
async initForm(type, activityId) { |
|||
this.startLoading() |
|||
this.formType = type |
|||
// console.log("阿斯顿撒打算",type, activityId) |
|||
if (type === 'edit') { |
|||
this.formData = activityId |
|||
if (activityId.coverPic) { |
|||
let ob = { |
|||
fileType: '0', |
|||
fileUrl: activityId.coverPic |
|||
}; |
|||
this.fileList = [ob]; |
|||
this.formData.coverPic = ob.fileUrl; |
|||
if(this.formData.top == 1){ |
|||
this.top = true |
|||
} |
|||
} |
|||
// console.log("this.fileList",this.fileList) |
|||
}else if (type === 'records') { |
|||
this.records = true |
|||
} |
|||
|
|||
this.endLoading() |
|||
|
|||
}, |
|||
|
|||
async handleComfirm() { |
|||
this.btnDisable = true |
|||
setTimeout(() => { |
|||
this.btnDisable = false |
|||
}, 10000) |
|||
|
|||
this.$refs['ref_form'].validate((valid, messageObj) => { |
|||
console.log("this.formData看看里面村的什么",this.formData) |
|||
if (!valid) { |
|||
app.util.validateRule(messageObj) |
|||
this.btnDisable = false |
|||
} else { |
|||
this.addActivity() |
|||
} |
|||
}) |
|||
}, |
|||
async addActivity() { |
|||
if (this.formType === 'edit') { |
|||
|
|||
let url = '/actual/base/communityPublicity/update' |
|||
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) |
|||
} |
|||
}else{ |
|||
console.log("this.formData",this.formData) |
|||
let url = '/actual/base/communityPublicity/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() { |
|||
|
|||
this.resetData() |
|||
this.$emit('dialogCancle') |
|||
|
|||
}, |
|||
|
|||
resetData() { |
|||
this.fileList = [] |
|||
this.top = false |
|||
this.formType = '' |
|||
this.formData = { |
|||
|
|||
} |
|||
|
|||
}, |
|||
// 开启加载动画 |
|||
startLoading() { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading() { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule() { |
|||
return { |
|||
title: [ |
|||
{ required: true, message: '文章标题不能为空', trigger: 'blur' } |
|||
], |
|||
coverPic:[ |
|||
{ required: true, message: '请选择封面图', trigger: 'blur' } |
|||
], |
|||
content: [ |
|||
{ required: true, message: '内容不能为空', trigger: 'blur' } |
|||
], |
|||
releaseTime: [ |
|||
{ required: true, message: '请选择发布时间', trigger: 'blur' } |
|||
], |
|||
tagId: [ |
|||
{ required: true, message: '请选择文章标签', trigger: 'blur' } |
|||
] |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
props: { |
|||
// unitList: { |
|||
// type: Array, |
|||
// default: [] |
|||
// }, |
|||
// gridList: { |
|||
// type: Array, |
|||
// default: [] |
|||
// }, |
|||
} |
|||
}; |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.el-form { |
|||
max-width: 600px; |
|||
margin: auto; |
|||
|
|||
<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> |
|||
@ -0,0 +1,166 @@ |
|||
<template> |
|||
<div> |
|||
<div class="dialog-h-content scroll-h"> |
|||
<div v-if="initLoading" class="m-detail-main"> |
|||
<div class="m-info"> |
|||
|
|||
<div style="display: flex;"> |
|||
<div class="m-info-prop" style="flex: 0 0 50%;"> |
|||
<span class="u-info-title-2">文章标题: </span> |
|||
<span style="margin-right: 10px;"> </span> |
|||
<span>{{ formData.title || "--" }}</span> |
|||
</div> |
|||
<div class="m-info-prop" style="flex: 0 0 50%;"> |
|||
<span class="u-info-title-2">标签: </span> |
|||
<span style="margin-right: 10px;"> </span> |
|||
<span>{{ formData.tagId || "--" }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div style="display: flex;"> |
|||
<div class="m-info-prop" style="flex: 0 0 50%;"> |
|||
<span class="u-info-title-2">发布时间: </span> |
|||
<span style="margin-right: 10px;"> </span> |
|||
<span>{{ formData.releaseTime || "--" }}至<span>{{ formData.endTime || "--" }}</span></span> |
|||
</div> |
|||
<div class="m-info-prop" style="flex: 0 0 50%;"> |
|||
<span class="u-info-title-2">状态: </span> |
|||
<span style="margin-right: 10px;"> </span> |
|||
<span>{{ formData.status === 1 ? '已下线' : '已发布' || "--" }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="m-info-prop"> |
|||
<span class="u-info-title-2" style="display: inline-block;white-space: nowrap;">活动内容: </span> |
|||
<span style="margin-right: 10px;"> </span> |
|||
<!-- <span>{{ formData.content || "--" }}</span> --> |
|||
<p class="text_p" v-html="formData.content"></p> |
|||
</div> |
|||
|
|||
<div class="m-info-prop"> |
|||
<span class="u-info-title-2">是否置顶: </span> |
|||
<span style="margin-right: 10px;"> </span> |
|||
<el-switch :value="formData.top === 1 ? true : false" :disabled="true"></el-switch> |
|||
|
|||
</div> |
|||
<div class="m-info-prop"> |
|||
<span class="u-info-title-2"></span> |
|||
<div class="div_map"> |
|||
<div id="app_detail_unit"></div> |
|||
</div> |
|||
</div> |
|||
<div class="m-info-prop"> |
|||
<span class="u-info-title-2">点赞数: </span> |
|||
<span style="margin-right: 10px;"> </span> |
|||
<span>{{ formData.address || "--" }}</span> |
|||
</div> |
|||
|
|||
<div style="display: flex;"> |
|||
<div class="m-info-prop" style="flex: 0 0 50%;"> |
|||
<span class="u-info-title-2">转发数</span> |
|||
<span style="margin-right: 10px;"> </span> |
|||
<span>{{ formData.cutOffTime || "--" }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="m-detail-btn"> |
|||
<el-button size="small" @click="handleCancle">关 闭</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { Loading } from "element-ui"; // 引入Loading服务 |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import daiMap from "@/utils/dai-map"; |
|||
|
|||
var map; |
|||
var search; |
|||
var markers; |
|||
var infoWindowList; |
|||
var geocoder; // 新建一个正逆地址解析类 |
|||
|
|||
let loading; // 加载动画 |
|||
export default { |
|||
data() { |
|||
return { |
|||
formData: {}, |
|||
initLoading: false, |
|||
}; |
|||
}, |
|||
components: {}, |
|||
created() { }, |
|||
|
|||
mounted () { |
|||
}, |
|||
|
|||
methods: { |
|||
async activityType () { |
|||
const url = "/actual/base/activityType/page" |
|||
let params = { |
|||
// agencyId: this.agencyId |
|||
pageSize: 20, |
|||
pageNo: 1, |
|||
typeName: "", |
|||
enabled: 0 |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.typeList = data.list |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
handleCancle() { |
|||
// this.diaDestroy(); |
|||
this.$emit("dialogCancle"); |
|||
}, |
|||
|
|||
diaDestroy() { |
|||
if (map) { |
|||
// map.destroy() |
|||
} |
|||
}, |
|||
|
|||
async initForm(row) { |
|||
this.startLoading(); |
|||
this.formData = JSON.parse(JSON.stringify(row)); |
|||
this.initLoading = true; |
|||
|
|||
this.endLoading(); |
|||
}, |
|||
|
|||
// 开启加载动画 |
|||
startLoading() { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: "正在加载……", // 加载中需要显示的文字 |
|||
background: "rgba(0,0,0,.7)", // 背景颜色 |
|||
}); |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading() { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close(); |
|||
} |
|||
}, |
|||
}, |
|||
computed: {}, |
|||
props: {}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/management/detail-main.scss"; |
|||
|
|||
// span { |
|||
// display: inline-block; |
|||
// white-space: nowrap; /* 避免换行 */ |
|||
// } |
|||
|
|||
</style> |
|||
<style scoped></style> |
|||
Loading…
Reference in new issue