<template>
|
<div class="status_add">
|
<v-header :title="add ? '新增' : '编辑'"></v-header>
|
<div class="fm">
|
<section class="sec">
|
<p class="label">标题：</p>
|
<article>
|
<el-input
|
placeholder="请输入"
|
size="small"
|
v-model="os.title"
|
maxlength="50"
|
></el-input>
|
</article>
|
</section>
|
<section v-show="categoryId != 2" class="sec" v-if="categoryId != 4">
|
<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="isJCAccount">
|
<p class="label">社区选择：</p>
|
<el-cascader
|
style="width: 250px"
|
v-model="streetId"
|
:props="areaProps"
|
:options="areaList"
|
collapse-tags
|
size="small"
|
@change="areaChange"
|
></el-cascader>
|
</section>
|
|
<section class="sec" v-if="categoryId == 2">
|
<p class="label">分类：</p>
|
<article
|
class="article-maxwidth"
|
style="display: flex; align-items: center"
|
>
|
<el-radio-group v-model="os.type">
|
<el-radio
|
:label="text.name"
|
v-for="(text, index) in dynamiclist"
|
:key="index"
|
>{{ text.name }}</el-radio
|
>
|
<!-- <el-radio :label="2">社区动态</el-radio> -->
|
</el-radio-group>
|
</article>
|
</section>
|
|
<!---->
|
<section class="sec" v-if="categoryId != 2">
|
<p class="label">分类：</p>
|
<article
|
class="article-maxwidth"
|
style="display: flex; align-items: center"
|
>
|
<el-radio-group v-model="os.type">
|
<el-radio
|
:label="text.id"
|
v-for="(text, index) in queryDynamiclist"
|
:key="index"
|
>{{ text.name }}</el-radio
|
>
|
<!-- <el-radio :label="2">社区动态</el-radio> -->
|
</el-radio-group>
|
</article>
|
</section>
|
|
<section v-show="categoryId != 2" class="sec">
|
<p class="label">广告设置：</p>
|
<article>
|
<div
|
class="image-box"
|
v-if="os.imageUrl != null && os.imageUrl != ''"
|
>
|
<img class="image" :src="os.imageUrl" alt />
|
<img
|
@click="imgclear2"
|
class="clear-icon"
|
src="static/image/clear.png"
|
alt
|
/>
|
</div>
|
<div class="avatar" v-else>
|
<v-u
|
:boxWidth="800"
|
:boxHeight="400"
|
:width="categoryId == 4 ? 670 : 650"
|
:height="categoryId == 4 ? 348 : 285"
|
@path="onPath2"
|
></v-u>
|
</div>
|
</article>
|
</section>
|
<section v-show="categoryId != 2" class="sec fl-al">
|
<p class="label">首页顶部：</p>
|
<el-checkbox
|
:true-label="1"
|
:false-label="0"
|
v-model="os.onTop"
|
></el-checkbox>
|
</section>
|
<!---->
|
<section v-show="categoryId != 2" 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-u
|
:boxWidth="800"
|
:boxHeight="400"
|
:width="categoryId == 4 ? 670 : 650"
|
:height="categoryId == 4 ? 348 : 285"
|
@path="onPath"
|
></v-u>
|
</div>
|
</article>
|
</section>
|
<div v-if="categoryId != 4">
|
<template v-if="os.cover != null && os.cover != ''">
|
<section class="sec">
|
<p class="label"></p>
|
<article
|
style="
|
display: flex;
|
align-items: center;
|
max-width: 700px !important;
|
"
|
>
|
<el-radio-group v-model="os.coverMode">
|
<el-radio :label="2">大图展示</el-radio>
|
</el-radio-group>
|
<div class="radio-text">
|
（若选择大图展示，小程序查看时则在标题下方展示封面大图）
|
</div>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label"></p>
|
<article
|
style="
|
display: flex;
|
align-items: center;
|
max-width: 700px !important;
|
"
|
>
|
<el-radio-group v-model="os.coverMode">
|
<el-radio :label="1">小图展示</el-radio>
|
</el-radio-group>
|
<div class="radio-text">
|
（若选择小图展示，小程序查看时则在标题右侧展示封面小图）
|
</div>
|
</article>
|
</section>
|
</template>
|
</div>
|
|
<!---->
|
<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> -->
|
<!-- <editor-bar1></editor-bar1> -->
|
<quill-editor
|
@editorContext="change"
|
:contentText="content"
|
></quill-editor>
|
</div>
|
<div class="zd">
|
<el-checkbox v-model="checked">设为置顶</el-checkbox>
|
</div>
|
<section class="sec" v-if="categoryId == 4">
|
<p class="label">发布时间：</p>
|
<article>
|
<el-date-picker
|
:picker-options="expireTimeOption2"
|
type="date"
|
size="small"
|
placeholder="选择日期"
|
v-model="os.releaseTime"
|
value-format="yyyy-MM-dd"
|
format="yyyy-MM-dd"
|
></el-date-picker>
|
</article>
|
</section>
|
<section class="sec" v-if="checked1">
|
<p class="label">发布时间：</p>
|
<article>
|
<el-date-picker
|
:picker-options="expireTimeOption"
|
type="datetime"
|
size="small"
|
placeholder="选择日期时间"
|
v-model="os.publishAt"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
></el-date-picker>
|
</article>
|
</section>
|
<div class="btn">
|
<el-button type="primary" size="small" @click="sub">
|
{{ checked1 ? "定时发布" : "立即发布" }}
|
</el-button>
|
<el-checkbox v-if="categoryId != 4" v-model="checked1"
|
>定时发布</el-checkbox
|
>
|
<el-button size="small" @click="$router.go(-1)">取消</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// import EditorBar from "com/wangEnduit/index"; //富文本组件
|
// import EditorBar1 from "com/editor/editor"; //富文本组件
|
import QuillEditor from "com/editor/quilleditor"; //富文本组件
|
import $var from "../../../assets/js/const";
|
|
import vU from "com/upload/upload";
|
export default {
|
props: {
|
add: { type: Boolean, default: false },
|
aid: { type: [String, Number], default: "" },
|
categoryIdEdit: { type: [String, Number], default: "" }
|
},
|
components: { vU, QuillEditor },
|
data() {
|
return {
|
checked: false,
|
checked1: false, //定时
|
isClear: false,
|
detail: "",
|
categoryId: "",
|
os: {
|
coverMode: "",
|
type: "",
|
title: "",
|
publishAt: "",
|
content: "",
|
isTopping: "",
|
cover: "",
|
jumpUrl: "",
|
imageUrl: "",
|
jumpType: 2,
|
releaseTime: "",
|
onTop: 0
|
},
|
areaList: [],
|
streetId: "",
|
areaProps: {
|
children: "children",
|
label: "name",
|
value: "streetId",
|
multiple: true
|
},
|
allAreaList: [], //所有的区域数据
|
isJCAccount: false, //是否是基层公开账号
|
levelArr: [],
|
content: "",
|
queryDynamiclist: {},
|
dynamiclist: [
|
{
|
name: "党务公开"
|
},
|
{
|
name: "服务公开"
|
},
|
{
|
name: "财务公开"
|
},
|
{
|
name: "资金公开"
|
},
|
{
|
name: "资产公开"
|
},
|
{
|
name: "资源公开"
|
},
|
{
|
name: "村集体经济组织项目"
|
},
|
{
|
name: "项目公开"
|
}
|
],
|
expireTimeOption: {
|
disabledDate(time) {
|
let nowData = new Date();
|
nowData = new Date(nowData.setDate(nowData.getDate() - 1));
|
return time < nowData;
|
}
|
},
|
expireTimeOption2: {
|
disabledDate(time) {
|
let nowData = new Date();
|
nowData = new Date(nowData.setDate(nowData.getDate()));
|
return time > nowData;
|
}
|
}
|
};
|
},
|
watch: {
|
aid() {
|
this.getDetail();
|
},
|
categoryIdEdit(val) {
|
this.categoryId = val;
|
}
|
},
|
methods: {
|
imgclear() {
|
//删除图片
|
this.os.cover = "";
|
},
|
imgclear2() {
|
//删除图片
|
this.os.imageUrl = "";
|
},
|
onPath(v) {
|
this.os.cover = v;
|
},
|
onPath2(v) {
|
this.os.imageUrl = v;
|
},
|
sub() {
|
let o = demo.copy(this.os);
|
if (!o.title) {
|
demo.toast("请输入标题");
|
return 0;
|
}
|
if (!o.publishAt && this.checked1) {
|
demo.toast("请选择时间");
|
return 0;
|
}
|
// if (this.os.cover === "" && this.os.coverMode !== "") {
|
// demo.toast("请上传封面图");
|
// return 0;
|
// }
|
if (!o.content && o.jumpType == 2) {
|
demo.toast("请输入内容");
|
return 0;
|
}
|
if (!o.releaseTime && this.categoryId == 4) {
|
demo.toast("请选择发布时间");
|
return 0;
|
}
|
if (!o.jumpUrl && o.jumpType == 1) {
|
demo.toast("请输入链接");
|
return 0;
|
}
|
// if (this.add && new Date(o.publishAt).getTime() < Date.now()) {
|
// demo.toast("发布时间不能小于当前时间");
|
// return 0;
|
// }
|
o.isTopping = this.checked * 1;
|
// o.createAt = demo.timeout("", "alls", "/");
|
let method = "post";
|
if (!this.add) {
|
o.id = this.aid;
|
method = "put";
|
}
|
o.status = this.checked1 ? 0 : 1;
|
o.category = this.categoryId;
|
if (this.isJCAccount && !this.streetId) {
|
demo.toast("请选择社区");
|
return;
|
}
|
if (this.streetId.length) {
|
let arr = this.streetId.map(item => {
|
return item[item.length - 1];
|
});
|
console.log(arr);
|
|
o.communityList = arr;
|
}
|
|
if (!this.isJCAccount) {
|
let user = demo.$session.get("user") || {};
|
o.communityList = [user.communityId];
|
}
|
this.$api[method]("communityactivity/dynamic", o, e => {
|
demo.toast((this.add ? "发布" : "编辑") + "成功");
|
this.reset();
|
this.$router.go(-1);
|
});
|
},
|
reset() {
|
for (let k in this.os) {
|
this.os[k] = "";
|
}
|
this.content = "";
|
this.checked = false;
|
},
|
//编辑富文本
|
change(e) {
|
this.os.content = e;
|
},
|
getDetail() {
|
if (this.aid) {
|
this.$api.get(
|
"communityactivity/detaildynamic",
|
{ id: this.aid },
|
e => {
|
this.os.title = e.title;
|
this.os.coverMode = e.coverMode;
|
this.os.type = e.type;
|
this.os.isTopping = e.isTopping;
|
this.checked = !!e.isTopping;
|
this.os.publishAt = e.publishAt;
|
this.content = this.os.content = e.content;
|
this.os.cover = e.cover;
|
this.os.jumpUrl = e.jumpUrl;
|
this.os.jumpType = e.jumpType;
|
this.checked1 = e.status == 1 ? false : true;
|
// this.checked1 =
|
// Date.now() < (e.publishAt ? new Date(e.publishAt).getTime() : 0);
|
// this.checked1 =
|
}
|
);
|
}
|
},
|
//分类动态列表
|
queryDynamic() {
|
let param = { category: this.categoryId };
|
if (this.categoryId == "2") {
|
param["area"] = 2;
|
}
|
this.$api.post("dyn/type/list", param, data => {
|
this.queryDynamiclist = data;
|
console.log(this.queryDynamiclist);
|
});
|
},
|
//查找出区域
|
addIds(arr, word) {
|
arr.map(item => {
|
//查找区域中和关键词相同的区域
|
if (item.name == word) {
|
//如果查找到的区域有chirld那么就返回如果没有说明没有下级或者是最底层社区
|
if (item.children) {
|
this.levelArr = item.children;
|
return;
|
} else {
|
if (item.streetId) {
|
}
|
}
|
} else if (item.children && item.children.length) {
|
this.addIds(item.children, word);
|
}
|
});
|
},
|
queryArea() {
|
this.$api.get(
|
"common/data/getCityTreeByCode?provinceAdcode=510000",
|
{},
|
data => {
|
this.deleteChild(data);
|
this.allAreaList = data;
|
this.dealData();
|
}
|
);
|
},
|
dealData() {
|
//获取当前账号的name比如“福田镇”，来和区域对比获取相应的chirldren区县
|
let word = demo.$session.get("user").name;
|
let account = demo.$session.get("user").account;
|
//筛选出福田镇下面的社区
|
this.addIds(this.allAreaList, word);
|
//纪委账号需要获取所有社区的id（别问为什么，接口要求的）
|
//判断有没有子社区
|
if (this.levelArr.length) {
|
//更新区域的数据
|
this.areaList = [...this.levelArr];
|
}
|
//纪委账号可以查看所有区域的数据
|
else if (
|
account == "szgkjw" ||
|
account == "szgkybx" ||
|
account == "pzhmzjsz" ||
|
account == "pzhnyncj"
|
) {
|
this.areaList = [...this.allAreaList];
|
}
|
this.levelArr = [];
|
},
|
//循环删除chirdren没有数据的子节点
|
deleteChild(arr) {
|
arr.map(item => {
|
if (!item.children.length && item.streetId) {
|
delete item.children;
|
} else if (item.children.length) {
|
this.deleteChild(item.children);
|
}
|
});
|
},
|
areaChange(e) {
|
console.log(e);
|
console.log(this.streetId);
|
|
// if (this.streetId.length) {
|
// let communityId = this.streetId[this.streetId.length - 1];
|
// let param = { category: this.categoryId };
|
// if (this.categoryId == "2") {
|
// param["area"] = 2;
|
// }
|
// param["communityId"] = communityId;
|
// this.$api.post("dyn/type/list", param, data => {
|
// this.queryDynamiclist = data;
|
// console.log(this.queryDynamiclist);
|
// });
|
// }
|
}
|
},
|
mounted() {
|
this.categoryId = this.$route.query.id;
|
|
let roleId = demo.$session.get("user").roleId;
|
console.log($var.JCROLEID);
|
this.isJCAccount = roleId == $var.JCROLEID;
|
|
this.getDetail();
|
if (this.isJCAccount) {
|
this.queryArea();
|
} else {
|
this.queryDynamic();
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.image-box {
|
position: relative;
|
/*overflow: hidden;*/
|
max-width: 300px;
|
}
|
.image-box2 {
|
position: relative;
|
/*overflow: hidden;*/
|
width: 300px;
|
}
|
.clear-icon {
|
cursor: pointer;
|
position: absolute;
|
top: -10px;
|
right: -10px;
|
width: 30px;
|
height: 30px;
|
}
|
.image {
|
width: 100%;
|
object-fit: cover;
|
/*width: 300px;*/
|
}
|
.status_add {
|
overflow-y: auto;
|
.edit,
|
.zd,
|
.btn {
|
margin-bottom: 10px;
|
padding: 0 40px;
|
}
|
.sec:last-child {
|
margin-bottom: 0;
|
}
|
article {
|
max-width: 300px;
|
}
|
.article-maxwidth {
|
.el-radio {
|
margin-bottom: 10px;
|
}
|
}
|
}
|
.radio-text {
|
width: 100%;
|
font-size: 10px;
|
color: #7f7f7f;
|
}
|
</style>
|
