<template>
|
<div class="policy_add">
|
<v-header :title="(add ? '添加' : '编辑') + title"></v-header>
|
<div class="fm">
|
<section class="sec">
|
<p class="label">标题：</p>
|
<article>
|
<el-input
|
size="small"
|
v-model="os.title"
|
maxlength="50"
|
placeholder="请输入标题"
|
></el-input>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label">政策分类：</p>
|
<article>
|
<el-select v-model="os.policyType" placeholder="请选择">
|
<el-option
|
v-for="item in classList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label">地址类型：</p>
|
<article>
|
<el-radio v-model="os.jumpType" :label="1">跳转链接</el-radio>
|
<el-radio v-model="os.jumpType" :label="2">内容</el-radio>
|
</article>
|
</section>
|
<section class="sec" v-if="os.jumpType === 1">
|
<p class="label">跳转地址：</p>
|
<article>
|
<el-input
|
placeholder="请输入"
|
size="small"
|
v-model="os.jumpUrl"
|
></el-input>
|
</article>
|
</section>
|
<!---->
|
<section class="sec" v-if="checked1">
|
<p class="label">发布时间：</p>
|
<article>
|
<el-date-picker
|
type="datetime"
|
size="small"
|
placeholder="选择日期时间"
|
v-model="time"
|
@change="changeTime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
>
|
</el-date-picker>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label">封面：</p>
|
<article>
|
<div class="image-box" v-if="os.cover != null && os.cover != ''">
|
<img class="image" :src="os.cover" alt="" />
|
<img
|
@click="imgclear"
|
class="clear-icon"
|
src="static/image/clear.png"
|
alt=""
|
/>
|
</div>
|
<div class="avatar" v-else>
|
<v-upload
|
:boxWidth="800"
|
:boxHeight="400"
|
:width="650"
|
:height="285"
|
@path="onPath"
|
:pic="os.cover"
|
></v-upload>
|
</div>
|
</article>
|
</section>
|
<!---->
|
<!---->
|
<section class="sec" v-if="os.jumpType == 2">
|
<p class="label">内容：</p>
|
<article></article>
|
</section>
|
</div>
|
<!-- 富文本编辑 -->
|
<div class="edit" v-if="os.jumpType == 2">
|
<editor-bar
|
v-model="content"
|
:isClear="isClear"
|
@change="change"
|
></editor-bar>
|
</div>
|
<!-- 按钮 -->
|
<div class="btns">
|
<!-- <el-button
|
size="small"
|
type="primary"
|
@click="send(2)"
|
>保存并发布</el-button> -->
|
<el-button size="small" type="primary" @click="send(2)">{{
|
checked1 ? "定时发布" : "立即发布"
|
}}</el-button>
|
<el-checkbox v-model="checked1">定时发布</el-checkbox>
|
<el-button size="small" @click="close(true)">取消</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import EditorBar from "com/wangEnduit/index"; //富文本组件
|
import vUpload from "com/upload/upload";
|
export default {
|
props: {
|
type: { type: String, default: "2" }, // 1动态 2政策文件
|
add: { type: Boolean, default: false }, // 添加 编辑
|
title: { type: String, default: "活动" },
|
aid: { type: [Number, String], default: 0 },
|
},
|
components: { EditorBar, vUpload },
|
data() {
|
return {
|
checked1: false,
|
os: {
|
communityId: 0,
|
content: "",
|
cover: "",
|
createAt: "",
|
createBy: 0,
|
createByName: "",
|
id: 0,
|
pageNum: 0,
|
pageSize: 0,
|
publishAt: "",
|
publishAtBegin: "",
|
publishAtEnd: "",
|
readingVolume: 0,
|
status: 0,
|
title: "",
|
type: 0,
|
jumpUrl: "",
|
jumpType: 2,
|
policyType: 1,
|
},
|
time: "",
|
content: "",
|
upload: null,
|
isClear: false,
|
detail: "",
|
classList: [
|
{
|
label: "社工人才政策",
|
value: 1,
|
},
|
{
|
label: "社会组织培育政策",
|
value: 2,
|
},
|
{
|
label: "其他政策",
|
value: 3,
|
},
|
],
|
};
|
},
|
watch: {
|
aid(n) {
|
if (+n > 0 && !this.add) {
|
this.getDetail(n);
|
}
|
},
|
},
|
methods: {
|
imgclear() {
|
//删除图片
|
this.os.cover = null;
|
},
|
// 获取详情
|
getDetail(id) {
|
this.$api.get("communitypartybuilding/infodynamic", { id }, (e) => {
|
this.content = e.content;
|
this.time = e.publishAt;
|
this.os = demo.copy(e);
|
this.checked1 = e.status == 2 ? false : true;
|
});
|
},
|
// 选择时间
|
changeTime(v) {
|
this.os.publishAt = v;
|
},
|
// 初始化
|
setData() {
|
this.os.type = this.type;
|
},
|
// 上传封面
|
onPath(v) {
|
this.os.cover = v;
|
},
|
// 重置/取消
|
close(f) {
|
for (let i in this.os) {
|
this.os[i] = "";
|
}
|
this.content = "";
|
this.time = "";
|
this.setData();
|
if (f) {
|
this.$router.go(-1);
|
}
|
},
|
// 提交
|
send(v) {
|
// status 1 待发布 2 已发布
|
if (!this.os.title) {
|
demo.toast("请输入标题");
|
return 0;
|
}
|
if (!this.os.publishAt && this.checked1) {
|
demo.toast("请选择发布时间");
|
return 0;
|
}
|
// if (!this.os.cover && this.os.coverMode!=='') {
|
// demo.toast("请上传封面");
|
// return 0;
|
// }
|
if (!this.os.content && this.os.jumpType == 2) {
|
demo.toast("请输入内容");
|
return 0;
|
}
|
if (!this.os.jumpUrl && this.os.jumpType == 1) {
|
demo.toast("请输入链接");
|
return 0;
|
}
|
if (!this.checked1) {
|
this.os.publishAt = demo.timeout("", "alls", "-");
|
}
|
// if (new Date(this.os.publishAt).getTime() < Date.now()) {
|
// demo.toast("发布时间不能小于当前时间");
|
// return 0;
|
// }
|
this.os.status = this.checked1 ? 1 : 2;
|
this.os.content = this.os.content.replace(/"/g, "'");
|
let vr = demo.copy(this.os);
|
let url = this.add ? "adddynamic" : "updatedynamic"; // 编辑
|
let method = this.add ? "post" : "put";
|
this.$api[method]("communitypartybuilding/" + url, vr, (e) => {
|
demo.toast((this.add ? "添加" : "编辑") + "成功");
|
this.close();
|
this.$nextTick(() => {
|
this.$router.go(-1);
|
});
|
});
|
},
|
//编辑富文本
|
change(val) {
|
this.os.content = val;
|
},
|
},
|
mounted() {
|
this.setData();
|
},
|
};
|
</script>
|
<style lang="less">
|
.policy_add {
|
.el-date-editor.el-input,
|
.el-date-editor.el-input__inner {
|
width: 100% !important;
|
}
|
}
|
</style>
|
<style lang='less' scoped>
|
.image-box {
|
position: relative;
|
/*overflow: hidden;*/
|
max-width: 300px;
|
}
|
.clear-icon {
|
cursor: pointer;
|
position: absolute;
|
top: -10px;
|
right: -10px;
|
width: 30px;
|
height: 30px;
|
}
|
.image {
|
width: 100%;
|
object-fit: cover;
|
/*width: 300px;*/
|
}
|
.policy_add {
|
overflow-y: auto;
|
.fm {
|
.sec {
|
article {
|
max-width: 300px;
|
}
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
}
|
.edit {
|
margin-bottom: 10px;
|
padding: 0 40px;
|
}
|
.v {
|
width: 1px;
|
height: 1px;
|
position: absolute;
|
right: 0;
|
bottom: 0;
|
}
|
}
|
.radio-text {
|
width: 100%;
|
font-size: 10px;
|
color: #7f7f7f;
|
}
|
</style>
|
