epmet-oper-gov-lingshan/src/views/modules/lingshan/aqsc/article/drafts.vue

<template>
	<div>
		<base-page
			ref="basePage"
			: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"
			:infoAuth="() => false"
			:formBtnFixed="true"
			idName="draftId"
		>
			<template v-slot:editOperateSup="{ id, formType, info }">
				<el-button
					v-if="formType != 'watch' && info.richTextFlag == '1'"
					type="warning"
					size="small"
					:disabled="draftBtnDisable"
					@click="handleClickDraft(info)"
					>存草稿</el-button
				>
			</template>
		</base-page>
	</div>
</template>

<script>
import basePage from "@/views/modules/cpts/base/index";
import { getItemByIdInCascader, collapse } from "@/utils/cascader";
import { requestPost } from "@/js/dai/request";
import dateFormat from "dai-js/tools/dateFormat.js";
import { parentCategoryId } from "./conf";

export default {
	props: {},

	data() {
		return {
			draftBtnDisable: false,

			searchParams: [
				{ field: "文章标题", keyName: "title", type: "input" },
				{
					field: "创建时间",
					keyName: "createdTime",
					type: "date-range",
					supKeys: ["startDate", "endDate"],
					supValues: ["", ""],
				},
			],

			tableParams: [
				{ field: "序号", keyName: "", type: "no" },
				{ field: "文章标题", keyName: "title", type: "text" },
				{ field: "创建时间", keyName: "createdTime", type: "text" },
			],
			tableUrl: "/gov/voice/draft/draftListV2",
			mubanUrl: "",
			importUrl: "",
			exportUrl: "",

			addUrl: "",
			editUrl: "/gov/voice/article/addOrSaveDraft",
			infoUrl: "/gov/voice/draft/detailV2",
			delUrl: "/gov/voice/draft/deletedraft",
			editAuth(item) {
				return true;
			},
			delAuth(item) {
				return true;
			},

			editParams: [
				{
					field: "所属栏目",
					keyName: "tagIds",
					type: "select",
					value: parentCategoryId,
					multiple: true,
					optionUrl: `/gov/voice/categoryDict/subCategories?parentCategoryId=${parentCategoryId}`,
					optionUrlParams: {},
					optionList: [],
					optionCook(list) {
						list = list || [];
						return [
							...list.map((item) => ({
								label: item.categoryName,
								value: item.id,
							})),
						];
					},
					rules: [
						// {
						// 	required: true,
						// 	message: "所属栏目不能为空",
						// 	trigger: "blur",
						// },
					],
				},
				{
					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) {
						list = 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: "fileList2",
					type: "upload",
					limit: 3,
					listType: "file",
					editDisabled: true,
					rules: [],
					value: () => [],
					uploadUrl:
						window.SITE_CONFIG["apiURL"] +
						"/oss/file/article/upload",
					supKeys: ["fileListArr2", "fileListItem2"],
					supValues: [() => [], ""],
					beforeImgUpload(file, item, that) {
						console.log(file);
						const isLt1M = file.size / 1024 / 1024 < 10;
						const srcType = file.type.toLowerCase();

						if (!isLt1M) {
							that.$message.error("上传文件大小不能超过 10MB!");
							return false;
						}
						if (srcType.indexOf("pdf") == -1) {
							that.$message.error("仅限pdf格式");
							return false;
						}
						return true;
					},
				},
				{
					field: "置顶",
					keyName: "isTop",
					type: "switch",
					activeValue: "1",
					inactiveValue: "0",
				},
			],
			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 =
							Array.isArray(data.contentList) &&
							data.contentList.length > 0
								? data.contentList[0].content
								: "";
					}
					if (data.imgUrl) {
						data.imgArr = [
							{
								name: "封面",
								url: data.imgUrl,
							},
						];
						data.imgUrlArr = [data.imgUrl];
					}
					data.fileList2 = (data.fileList || []).map((item) => ({
						url: item.content,
						name: item.fileName,
						size: 0,
						type: item.content.split(".").pop(),
						format: item.content.split(".").pop(),
					}));

					return data;
				},

				beforeSubmit(formType, fmData, that) {
					if (fmData.isTop == "1" && !fmData.imgUrl) {
						that.$message.error("请上传封面图片");
						return false;
					}
					fmData.fileList = (fmData.fileList2 || []).map((item) => ({
						content: item.url,
						fileName: item.name,
						contentType: "file",
					}));
					return true;
				},
			},
		};
	},
	components: { basePage },
	computed: {},
	watch: {},

	async mounted() {},

	methods: {
		async handleClickDraft(fmData) {
			let url = "/gov/voice/article/addOrSaveDraft";

			fmData.fileList = (fmData.fileList2 || []).map((item) => ({
				content: item.url,
				fileName: item.name,
				contentType: "file",
			}));

			let params = {
				...fmData,
				type: "draft",
			};

			params =
				this.$refs.basePage.$refs.editForm.cookBeforeSubmit(params);
			if (!params.title && !params.content) {
				return this.$message.error("标题或内容不能为空");
			}

			const { data, code, msg } = await requestPost(url, params);

			if (code === 0) {
				this.$message({
					type: "success",
					message: "保存成功",
				});
				this.$refs.basePage.handleClose();
			} else {
				this.$message.error(msg);
			}
		},
	},
};
</script>

<style lang="scss" scoped></style>