<template>
|
<div class="policy_add">
|
<v-header :title="(add ? '添加' : '编辑') + title"></v-header>
|
<div class="fm">
|
<section class="sec">
|
<p class="label">封面：</p>
|
<article>
|
<div
|
class="image-box"
|
v-if="os.itemCover != null && os.itemCover != ''"
|
>
|
<img class="image" :src="os.itemCover" 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"
|
></v-upload>
|
<!-- :pic="os.cover"-->
|
</div>
|
</article>
|
</section>
|
|
<section class="sec">
|
<p class="label">项目标题：</p>
|
<article>
|
<el-input
|
size="small"
|
v-model="os.itemTitle"
|
maxlength="50"
|
placeholder="请输入标题"
|
></el-input>
|
</article>
|
<p class="label">项目开始时间：</p>
|
<article>
|
<el-date-picker
|
type="datetime"
|
size="small"
|
placeholder="选择日期时间"
|
v-model="os.startTime"
|
@change="changeTime2"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
></el-date-picker>
|
</article>
|
</section>
|
|
<section class="sec">
|
<p class="label">协议标题：</p>
|
<article>
|
<el-input
|
size="small"
|
v-model="os.agreementTitle"
|
maxlength="50"
|
placeholder="请输入标题"
|
></el-input>
|
</article>
|
<p class="label">协议制定时间：</p>
|
<article>
|
<el-date-picker
|
type="datetime"
|
size="small"
|
placeholder="选择日期时间"
|
v-model="os.agreementCustomizationTime"
|
@change="changeTime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
></el-date-picker>
|
</article>
|
</section>
|
|
<!---->
|
<section class="sec">
|
<p class="label">协议详情：</p>
|
<article>
|
<el-input
|
class="textarea-width"
|
placeholder="请输入"
|
size="small"
|
type="textarea"
|
resize="none"
|
:rows="4"
|
v-model="os.agreementContent"
|
maxlength="300"
|
></el-input>
|
</article>
|
</section>
|
|
<section class="sec">
|
<p class="label">选择社区：</p>
|
<article>
|
<el-cascader
|
v-model="communityListValue"
|
:options="cityChooseList"
|
:props="propsCityTourst"
|
filterable
|
class="iw-220"
|
@change="communityChange"
|
placeholder="请选择社区"
|
/>
|
</article>
|
</section>
|
|
<div class="dot" v-for="(item, index) in steps" :key="index">
|
<section class="sec">
|
<p class="label">协议规划：</p>
|
<article>
|
<p class="label">{{ item.agreementPlan }}</p>
|
</article>
|
<p class="label">完工节点：</p>
|
<article>
|
<el-date-picker
|
type="datetime"
|
size="small"
|
placeholder="选择日期时间"
|
v-model="item.completionTime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
></el-date-picker>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label">规划内容：</p>
|
<article>
|
<el-input
|
class="textarea-width"
|
placeholder="请输入"
|
size="small"
|
type="textarea"
|
resize="none"
|
:rows="4"
|
v-model="item.planContent"
|
maxlength="300"
|
></el-input>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label"></p>
|
<article>
|
<el-button
|
v-if="steps.length === 1 || index === steps.length - 1"
|
size="small"
|
type="primary"
|
@click="addProject(index)"
|
>
|
添加阶段
|
</el-button>
|
<el-button
|
v-else
|
size="small"
|
type="primary"
|
@click="deletePro(index)"
|
>
|
删除阶段
|
</el-button>
|
</article>
|
</section>
|
</div>
|
</div>
|
|
<section class="sec">
|
<p class="label">预计结束时间：</p>
|
<article style="width: 300px;">
|
<el-date-picker
|
type="datetime"
|
size="small"
|
placeholder="选择日期时间"
|
v-model="os.estimatedTime"
|
@change="changeTime1"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
></el-date-picker>
|
</article>
|
</section>
|
|
<!-- 按钮 -->
|
<div class="btns">
|
<!-- <el-button
|
size="small"
|
type="primary"
|
@click="send(2)"
|
>保存并发布</el-button>-->
|
<el-button size="small" type="primary" @click="send(1)">
|
立即发布
|
</el-button>
|
<el-button size="small" @click="close(true)">取消</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// import vE from "com/editor/editor";
|
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: { vUpload },
|
data() {
|
return {
|
checked1: false,
|
os: {
|
constructionCommunityId: 0,
|
itemTitle: "",
|
itemCover: "",
|
agreementTitle: "", //协议标题
|
agreementContent: "", //协议内容
|
agreementCustomizationTime: "",
|
estimatedTime: "",
|
startTime: "",
|
list: []
|
},
|
time: "",
|
content: "",
|
upload: null,
|
isClear: false,
|
detail: "",
|
cityChooseList: [],
|
propsCityTourst: {
|
label: "value",
|
value: "communityId"
|
},
|
communityListValue: [],
|
steps: [
|
{
|
agreementPlan: "第1阶段规划",
|
completionTime: "",
|
planContent: ""
|
}
|
]
|
};
|
},
|
watch: {
|
aid(n) {
|
if (+n > 0 && !this.add) {
|
this.getDetail(n);
|
this.getPlanList(n);
|
}
|
}
|
},
|
methods: {
|
//编辑富文本
|
change(val) {
|
this.os.content = val;
|
},
|
|
imgclear() {
|
//删除图片
|
this.os.itemCover = null;
|
},
|
addProject(index) {
|
this.steps.push({
|
agreementPlan: "第" + (index * 1 + 2) + "阶段规划",
|
completionTime: "",
|
planContent: ""
|
});
|
},
|
deletePro(index) {
|
this.steps.splice(index, 1);
|
this.steps.map((item, index) => {
|
item.agreementPlan = "第" + (index * 1 + 1) + "阶段规划";
|
});
|
},
|
// 获取区域列表
|
getAreaRequestList() {
|
this.$api.get("comAreaTownCommunity/areaTownCommunityNew", {}, res => {
|
this.cityChooseList = res;
|
});
|
},
|
communityChange(arr) {
|
console.log(arr);
|
console.log(this.communityListValue);
|
arr.map(item => {
|
if (item) {
|
this.os.constructionCommunityId = item;
|
}
|
});
|
},
|
// 获取详情
|
getDetail(id) {
|
this.$api.get("StriveFor/getNewFightCommunityDetails", { id }, e => {
|
let item = demo.copy(e);
|
|
this.os.itemTitle = item.itemTitle;
|
this.os.itemCover = item.itemCover;
|
this.os.agreementTitle = item.agreementTitle;
|
this.os.agreementContent = item.agreementContent;
|
this.os.agreementCustomizationTime = item.agreementCustomizationTime;
|
this.os.estimatedTime = item.estimatedTime;
|
this.os.constructionCommunityId = item.constructionCommunityId;
|
this.os.startTime = item.startTime;
|
this.communityListValue = [null, null, item.constructionCommunityId];
|
});
|
},
|
getPlanList(id) {
|
this.$api.get(
|
"StriveFor/getProjectPlanList",
|
{ projectId: id, pageNum: 1, pageSize: 100 },
|
res => {
|
this.steps = res.records;
|
}
|
);
|
},
|
// 选择时间
|
changeTime(v) {
|
this.os.agreementCustomizationTime = v;
|
},
|
changeTime1(v) {
|
this.os.estimatedTime = v;
|
},
|
changeTime2(v) {
|
this.os.startTime = v;
|
},
|
// 上传封面
|
onPath(v) {
|
this.os.itemCover = v;
|
},
|
// 重置/取消
|
close(f) {
|
for (let i in this.os) {
|
this.os[i] = "";
|
}
|
if (f) {
|
this.$router.go(-1);
|
}
|
},
|
// 提交
|
send(v) {
|
// status 1 待发布 2 已发布
|
if (!this.os.itemCover) {
|
demo.toast("请上传封面");
|
return 0;
|
}
|
if (!this.os.itemTitle) {
|
demo.toast("请输入标题");
|
return 0;
|
}
|
if (!this.os.agreementTitle) {
|
demo.toast("请输入协议标题");
|
return 0;
|
}
|
if (!this.os.agreementCustomizationTime) {
|
demo.toast("请输入协议时间");
|
return 0;
|
}
|
if (!this.os.agreementContent) {
|
demo.toast("请输入协议详情");
|
return 0;
|
}
|
if (!this.communityListValue.length) {
|
demo.toast("请选择社区");
|
return 0;
|
}
|
|
let flag = false;
|
this.steps.map(item => {
|
if (!item.completionTime) {
|
flag = true;
|
return;
|
}
|
if (!item.planContent) {
|
flag = true;
|
return;
|
}
|
});
|
if (flag) {
|
demo.toast("请完善规划内容");
|
return;
|
}
|
|
this.os.list = this.steps;
|
if (!this.os.estimatedTime) {
|
demo.toast("请输入结束时间");
|
return;
|
}
|
|
let vr = demo.copy(this.os);
|
let url = this.add
|
? "StriveFor/addNewFightCommunityData"
|
: "StriveFor/editNewFightCommunityData"; // 编辑
|
if (!this.add) {
|
vr.id = this.aid;
|
}
|
let method = this.add ? "post" : "post";
|
this.$api[method](url, vr, e => {
|
demo.toast((this.add ? "添加" : "编辑") + "成功");
|
this.close();
|
this.$nextTick(() => {
|
this.$router.go(-1);
|
});
|
});
|
},
|
// 编辑器文本
|
onMessage(v) {
|
// this.os.content = v.html;
|
// console.log(this.os.content)
|
}
|
},
|
mounted() {
|
this.getAreaRequestList();
|
}
|
};
|
</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;
|
}
|
.btns {
|
margin-top: 20px;
|
}
|
.dot {
|
padding: 10px 0;
|
margin: 10px 0;
|
border: 1px dotted #eee;
|
}
|
</style>
|
