15 changed files with 654 additions and 32 deletions
|
After Width: | Height: | Size: 92 KiB |
@ -0,0 +1,453 @@ |
|||
<template> |
|||
<div> |
|||
<base-page ref="basePage" :tableData="tableData" :searchParams="searchParams" :tableParams="tableParams" :tableUrl="tableUrl" |
|||
:addUrl="addUrl" :editUrl="editUrl" :delUrl="delUrl" :editAuth="editAuth" :delAuth="delAuth" :infoUrl="infoUrl" |
|||
:exportUrl="exportUrl" :importUrl="importUrl" :mubanUrl="mubanUrl" :editParams="editParams" |
|||
:editFixedParams="editFixedParams" :editElseRules="editElseRules" :editConfig="editConfig" :editParamsDiv="5" |
|||
:editBtnName="(item) => '修改'" :formBtnFixed="true" idName="articleId"> |
|||
<template v-slot:editOperateSup="{ id, formType, info }"> |
|||
<el-button v-if="formType == 'add'" type="warning" size="small" :disabled="draftBtnDisable" |
|||
@click="handleClickDraft(info)">存草稿</el-button> |
|||
</template> |
|||
|
|||
<template v-slot:listBtnSup="{ item }"> |
|||
<el-button v-if="item.statusFlag == 'published' && |
|||
item.agencyId == $store.state.user.agencyId |
|||
" @click="handleOfflineShow(item)" type="text" size="small" style="color: #666">下线</el-button> |
|||
</template> |
|||
|
|||
<template v-slot:listBtnbefore="{ item }"> |
|||
<el-button v-if="item.isTop == '1'" v-show="item.statusFlag == 'published'" |
|||
@click="handleCancleTopArticle(item, 'cancel_top')" type="text" size="small" |
|||
style="color: #fe6252">取消置顶</el-button> |
|||
<el-button v-show="item.statusFlag == 'published'" v-else @click="handleTopArticle(item, 'top')" type="text" |
|||
size="small" style="color: #22c1c3">置顶</el-button> |
|||
</template> |
|||
</base-page> |
|||
</div> |
|||
|
|||
</template> |
|||
<script> |
|||
import basePage from "@/views/modules/cpts/base/index"; |
|||
import { getItemByIdInCascader, collapse } from "@/utils/cascader"; |
|||
|
|||
import dateFormat from "dai-js/tools/dateFormat.js"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
offlineShowed: false, |
|||
|
|||
draftBtnDisable: false, |
|||
searchParams: [ |
|||
{ field: "文章标题", keyName: "title", type: "input" }, |
|||
{ |
|||
field: "标签", |
|||
keyName: "tagIds", |
|||
type: "select", |
|||
multiple: true, |
|||
optionUrl: "/gov/voice/tag/taglist", |
|||
optionUrlParams: {}, |
|||
optionList: [], |
|||
optionCook(list) { |
|||
return list.map((item) => ({ |
|||
label: item.tagName, |
|||
value: item.tagId, |
|||
})); |
|||
}, |
|||
}, |
|||
{ |
|||
field: "状态", |
|||
keyName: "statusFlag", |
|||
value: "", |
|||
type: "select", |
|||
optionUrl: "", |
|||
optionUrlParams: {}, |
|||
optionList: [ |
|||
{ |
|||
label: "已发布", |
|||
value: "published", |
|||
}, |
|||
{ |
|||
label: "已下线", |
|||
value: "offline", |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
field: "发布范围", |
|||
keyName: "publishRangeIds", |
|||
type: "cascader", |
|||
optionUrl: "/gov/org/customeragency/agencygridtree", |
|||
optionUrlParams: { |
|||
agencyId: this.$store.state.user.agencyId, |
|||
}, |
|||
optionList: [], |
|||
optionProps: { |
|||
multiple: false, |
|||
value: "agencyId", |
|||
label: "agencyName", |
|||
children: "subAgencyList", |
|||
checkStrictly: true, |
|||
}, |
|||
optionCook(obj) { |
|||
return [obj]; |
|||
}, |
|||
supKeys: ["publishRangeId", "publishRangeType"], |
|||
supValues: ["", ""], |
|||
handleChangeFn(vals, item) { |
|||
const { optionList } = item; |
|||
if (vals.length > 0) { |
|||
item["supValues"][0] = vals[vals.length - 1]; |
|||
item["supValues"][1] = getItemByIdInCascader( |
|||
optionList, |
|||
vals, |
|||
"agencyId", |
|||
"subAgencyList" |
|||
)[vals.length - 1]["level"]; |
|||
item["supValues"][1] = |
|||
item["supValues"][1] == "grid" ? "grid" : "agency"; |
|||
} else { |
|||
item["supValues"][0] = ""; |
|||
item["supValues"][1] = ""; |
|||
} |
|||
}, |
|||
}, |
|||
{ |
|||
field: "发布时间", |
|||
keyName: "publishTime", |
|||
type: "date-range", |
|||
supKeys: ["startDate", "endDate"], |
|||
supValues: ["", ""], |
|||
|
|||
}, |
|||
], |
|||
tableParams: [ |
|||
{ field: "序号", keyName: "", type: "no" }, |
|||
{ field: "文章标题", keyName: "title", type: "text" }, |
|||
{ |
|||
field: "标签", |
|||
keyName: "tagNameList", |
|||
type: "array", |
|||
arrayDiv: "、", |
|||
}, |
|||
{ field: "状态", keyName: "statusFlagName", type: "text" }, |
|||
{ field: "发布单位", keyName: "publisherName", type: "text" }, |
|||
{ field: "发布时间", keyName: "publishDate", type: "text" }, |
|||
{ |
|||
field: "发布范围", |
|||
keyName: "publishRangeDesc", |
|||
type: "text", |
|||
}, |
|||
{ field: "置顶", keyName: "isTopName", type: "text" }, |
|||
{ field: "点赞数", keyName: "likeCount", type: "text" }, |
|||
{ field: "转发量", keyName: "forwardCount", type: "text" }, |
|||
], |
|||
tableUrl: "/gov/voice/article/articleListV2", |
|||
mubanUrl: "", |
|||
importUrl: "", |
|||
exportUrl: "", |
|||
|
|||
addUrl: "/gov/voice/article/addOrSaveDraft", |
|||
editUrl: "/gov/voice/article/updateArticle", |
|||
infoUrl: "/gov/voice/article/detailV2", |
|||
delUrl: "/gov/voice/article/delete批量", |
|||
editAuth(item) { |
|||
return item.statusFlagName == "已发布"; |
|||
}, |
|||
delAuth(item) { |
|||
return item.statusFlagName == "已下线"; |
|||
}, |
|||
|
|||
editParams: [ |
|||
{ |
|||
field: "文章标题", |
|||
keyName: "title", |
|||
type: "input", |
|||
maxlength: 50, |
|||
editDisabled: true, |
|||
rules: [ |
|||
{ |
|||
required: true, |
|||
message: "文章标题不能为空", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
field: "封面图片", |
|||
keyName: "imgArr", |
|||
type: "upload", |
|||
limit: 1, |
|||
listType: "picture-card", |
|||
editDisabled: true, |
|||
rules: [], |
|||
value: () => [], |
|||
uploadUrl: window.SITE_CONFIG["apiURL"] + "/oss/file/article/upload", |
|||
supKeys: ["imgUrlArr", "imgUrl"], |
|||
supValues: [() => [], ""], |
|||
beforeImgUpload(file, item, that) { |
|||
console.log(file); |
|||
const isLt1M = file.size / 1024 / 1024 < 10; |
|||
const srcType = file.type; |
|||
|
|||
if (!isLt1M) { |
|||
that.$message.error("上传文件大小不能超过 10MB!"); |
|||
return false; |
|||
} |
|||
if (srcType.indexOf("image") == -1) { |
|||
that.$message.error("仅限图片格式"); |
|||
return false; |
|||
} |
|||
return true; |
|||
}, |
|||
}, |
|||
{ |
|||
field: "发布范围", |
|||
keyName: "gridIdList", |
|||
type: "cascader", |
|||
value: () => [], |
|||
supKeys: ["publishRangeDesc"], |
|||
supValues: [""], |
|||
optionUrl: "/gov/org/customeragency/agencygridtree", |
|||
optionUrlParams: { |
|||
agencyId: this.$store.state.user.agencyId, |
|||
}, |
|||
optionList: [], |
|||
optionProps: { |
|||
multiple: true, |
|||
value: "agencyId", |
|||
label: "agencyName", |
|||
children: "subAgencyList", |
|||
checkStrictly: false, |
|||
emitPath: false, |
|||
}, |
|||
optionCook(obj) { |
|||
return [obj]; |
|||
}, |
|||
handleChangeFn(vals, item, that) { |
|||
console.log("handleChangeFn", vals); |
|||
const { optionList } = item; |
|||
const optionPlaneList = collapse(optionList, "subAgencyList"); |
|||
if (vals.length > 0) { |
|||
let selectedList = vals.map( |
|||
(v) => |
|||
getItemByIdInCascader( |
|||
optionPlaneList, |
|||
[v], |
|||
"agencyId", |
|||
"subAgencyList" |
|||
)[0] |
|||
); |
|||
console.log("handleChangeFn", selectedList); |
|||
let selectedFilterList = selectedList.filter( |
|||
(a) => a.level == "grid" |
|||
); |
|||
that.fmData[item["keyName"]] = selectedFilterList.map( |
|||
(a) => a.agencyId |
|||
); |
|||
that.fmData[item["supKeys"][0]] = selectedFilterList |
|||
.map((a) => a.agencyName) |
|||
.join("、"); |
|||
} else { |
|||
} |
|||
}, |
|||
rules: [ |
|||
{ |
|||
required: true, |
|||
message: "发布范围不能为空", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
field: "发布时间", |
|||
keyName: "publishDate", |
|||
type: "date", |
|||
value: dateFormat(new Date(), "yyyy-MM-dd"), |
|||
pickerOptions: { |
|||
disabledDate(time) { |
|||
return time.getTime() > Date.now(); |
|||
}, |
|||
}, |
|||
rules: [ |
|||
{ |
|||
required: true, |
|||
message: "发布时间不能为空", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
field: "发布单位", |
|||
keyName: "publisher", |
|||
type: "select", |
|||
optionUrl: "/gov/voice/article/publishagencylist", |
|||
optionList: [], |
|||
optionType: "group", |
|||
supKeys: ["publisherName", "publisherType"], |
|||
supValues: ["", ""], |
|||
optionCook(data) { |
|||
let ret = []; |
|||
const { agencyDeptList, agencyGridList, agencyId, agencyName } = |
|||
data; |
|||
if (agencyId) { |
|||
ret.push({ |
|||
label: "以组织名义", |
|||
optionList: [ |
|||
{ |
|||
label: agencyName, |
|||
value: agencyId, |
|||
type: "agency", |
|||
}, |
|||
], |
|||
}); |
|||
} |
|||
if (Array.isArray(agencyDeptList) && agencyDeptList.length > 0) { |
|||
ret.push({ |
|||
label: "以部门名义", |
|||
optionList: [ |
|||
...agencyDeptList.map((d) => ({ |
|||
label: d.agencyDeptName, |
|||
value: d.departmentId, |
|||
type: "department", |
|||
})), |
|||
], |
|||
}); |
|||
} |
|||
if (Array.isArray(agencyGridList) && agencyGridList.length > 0) { |
|||
ret.push({ |
|||
label: "以网格名义", |
|||
optionList: [ |
|||
...agencyGridList.map((d) => ({ |
|||
label: d.agencyGridName, |
|||
value: d.gridId, |
|||
type: "grid", |
|||
})), |
|||
], |
|||
}); |
|||
} |
|||
return ret; |
|||
}, |
|||
handleChangeFn(vals, item, that) { |
|||
const { optionList } = item; |
|||
let opts = []; |
|||
optionList.forEach((g) => { |
|||
opts = [...opts, ...g.optionList]; |
|||
}); |
|||
let publisher = opts.find((p) => vals == p.value); |
|||
that.fmData[item["supKeys"][0]] = publisher.label; |
|||
that.fmData[item["supKeys"][1]] = publisher.type; |
|||
}, |
|||
rules: [ |
|||
{ |
|||
required: true, |
|||
message: "发布单位不能为空", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
field: "文章标签", |
|||
keyName: "tagNameList", |
|||
type: "select", |
|||
multiple: true, |
|||
filterable: true, |
|||
allowCreate: true, |
|||
optionUrl: "/gov/voice/tag/taglist", |
|||
optionUrlParams: {}, |
|||
optionList: [], |
|||
optionCook(list) { |
|||
return list.map((item) => ({ |
|||
label: item.tagName, |
|||
value: item.tagName, |
|||
})); |
|||
}, |
|||
}, |
|||
{ |
|||
field: "内容", |
|||
keyName: "content", |
|||
type: "rich-text", |
|||
rules: [ |
|||
{ |
|||
required: true, |
|||
message: "内容不能为空", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
field: "置顶", |
|||
keyName: "isTop", |
|||
type: "switch", |
|||
activeValue: "1", |
|||
inactiveValue: "0", |
|||
}, |
|||
{ |
|||
field: "消息推送", |
|||
keyName: "isPush", |
|||
type: "checkbox", |
|||
optionList:"是否通过公众号推送给社区居民" |
|||
}, |
|||
], |
|||
editFixedParams: { |
|||
type: "article", |
|||
}, |
|||
editElseRules: {}, |
|||
editConfig: { |
|||
confirmBtnName: "发布", |
|||
cookInfoFn(data) { |
|||
if (data.richTextFlag == "0") { |
|||
data.content = data.contentList |
|||
.map((item) => { |
|||
if (item.contentType == "text") { |
|||
return `<p>${item.content}</p>`; |
|||
} else if (item.contentType == "img") { |
|||
return `<img src="${item.content}" style="max-width:100%"></img>`; |
|||
} else if (item.contentType == "video") { |
|||
return `<video src="${item.content}" style="max-width:100%" controls></video>`; |
|||
} else if (item.contentType == "file") { |
|||
return `<a src="${item.content}" target="_blank">附件：${item.fileName}</a>`; |
|||
} |
|||
}) |
|||
.join(" "); |
|||
} else { |
|||
data.content = data.contentList[0].content; |
|||
} |
|||
if (data.imgUrl) { |
|||
data.imgArr = [ |
|||
{ |
|||
name: "封面", |
|||
url: data.imgUrl, |
|||
}, |
|||
]; |
|||
data.imgUrlArr = [data.imgUrl]; |
|||
} |
|||
|
|||
return data; |
|||
}, |
|||
|
|||
beforeSubmit(formType, fmData, that) { |
|||
if (fmData.isTop == "1" && !fmData.imgUrl) { |
|||
that.$message.error("请上传封面图片"); |
|||
return false; |
|||
} |
|||
return true; |
|||
}, |
|||
}, |
|||
|
|||
formData: {}, |
|||
showAddImage: false, |
|||
uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadvariedfile", |
|||
replayImgList: [], |
|||
hideUploadBtn: false, |
|||
selType: "top", |
|||
selArticleId: "", |
|||
selImgUrl: "", |
|||
}; |
|||
}, |
|||
components: { basePage } |
|||
|
|||
} |
|||
</script> |
|||
<style lang="scss"></style> |
|||
Loading…
Reference in new issue