Investment-data-system/src/views/message/add.vue

<template>
	<div class="g_flex_row_center">
		<div class="m-job-detail g_pt_24" style="width: 880px">
			<a-form :model="currentInfo" class="main_container" @finish="submitInfo" :labelCol="{ span: 3 }" :wrapperCol="{ span: 20 }">
				<a-form-item class="g_mb_12" label="标题" name="title" :rules="[{ required: true, message: '请输入标题' }]">
					<a-input v-model:value="currentInfo.title" placeholder="请输入标题"></a-input>
				</a-form-item>
				<a-form-item class="g_mb_12" label="发布时间" name="publishTimeStr" :rules="[{ required: false, message: '请选择发布时间' }]">
					<a-date-picker v-model:value="currentInfo.publishTimeStr" placeholder="请选择发布时间" :minuteStep="30" format="YYYY-MM-DD HH:mm" :show-time="{ defaultValue: dayjs(currentTime, 'HH:mm:ss') }" style="width: 100%" />
				</a-form-item>
				<a-form-item class="g_mb_12" label="内容" :rules="[{ required: true, message: '请输入内容' }]" name="content">
					<iframe src="../../../public/static/editor.html" class="g_border_d" width="100%" height="500px" frameborder="0" ref="iframeDom" style="border-radius: 6px"></iframe>
				</a-form-item>

				<!-- <div class="g_flex_row_center">
					<div class="g_fs_14">内容：</div>
					<div class="g_mt_0 g_br_6 g_flex_1" style="border: 1px solid #d9d9d9"></div>
				</div> -->
				<a-form-item class="g_mb_12">
					<div class="g_flex_row_start g_mt_24 g_ml_110">
						<a-button class="g_mr_16" @click="cancel">取消</a-button>
						<a-button class="g_mr_16" @click="subType = 0" html-type="submit">存草稿</a-button>
						<a-button type="primary" @click="subType = 1" html-type="submit">发布</a-button>
					</div>
				</a-form-item>
			</a-form>
			<!-- <div class="g_flex_row_center">
				<div class="g_fs_14">内容：</div>
				<div class="g_mt_0 g_br_6 g_flex_1" style="border: 1px solid #d9d9d9">
					<iframe src="../../../public/static/editor.html" width="100%" height="500px" frameborder="0" ref="iframeDom" style="border-top-left-radius: 6px"></iframe>
				</div>
			</div> -->
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, onBeforeUnmount } from "vue";
const commonJS = getCurrentInstance().appContext.app.config.globalProperties.G;
import { useRouter, useRoute } from "vue-router";
const router = useRouter(); // 应用路由
const route = useRoute();
import dayjs from "dayjs";

import { saveMessageApi,getMessageDetailApi } from "../../api/messageConfig/message";
import { message } from "ant-design-vue";
import { useStore } from "@/stores/counter";
// 设置当前时间作为发布时间的默认选项
const currentTime = ref(dayjs().format("HH") + ":00" + ":00");
// console.log('currentTime.value',currentTime.value);
const storeJS = useStore();
let currentInfo = ref({});
onMounted(() => {
	console.log(route);
	let newList = [{}, {}, {}];

	newList.forEach((item, index) => {
		item.rank = index + 1;
		item.title = "常用发票主体信息" + index;
		item.content = "默认主体：郑州伯才科技有限公司 单位名称：郑州伯才科技有限公司 纳税人识别号：91410100MA9L4HDT0L 地址：河南自贸试验区郑州" + index;
		item.time = "2024-03-11 13:04:24";
	});
	if (route.query.id) {
		currentInfo.value = newList[Number(route.query.id)];
	}
  // getMessageDetailApi(route.query.id).then((res) => {
  //   console.log(res);
  // })
	initData();
});
const iframeDom = ref();
window.addEventListener("message", (val) => {
	// console.log(val.data);
	if (val.data.lake) {
		currentInfo.value.contentYuque = val.data.lake;
		currentInfo.value.content = val.data.html;
		currentInfo.value.remake = val.data.remake;
		console.log(currentInfo.value);
	}
});
const initData = () => {
	// iframeDom.value.contentWindow.postMessage("");

	iframeDom.value.onload = function () {
		console.log(route);
		if (route.name == "messageEdit") {
			iframeDom.value.contentWindow.postMessage(currentInfo.value.content);
		} else {
			iframeDom.value.contentWindow.postMessage("");
		}
	};
};
const cancel = () => {
	router.back();
};
const subType = ref(0);
const submitInfo = () => {
	console.log(subType.value);
	console.log(currentInfo.value);
	// console.log(dayjs(currentInfo.value.publishTimeStr).format("YYYY-MM-DD HH:mm"));

	let obj = {
		title: currentInfo.value.title,
		content: currentInfo.value.content,
		remake: currentInfo.value.remake,
		contentYuque: currentInfo.value.contentYuque,
		publishTimeStr: dayjs(currentInfo.value.publishTimeStr).format("YYYY-MM-DD HH:mm") + ":00",
		status: subType.value,
	};
	saveMessageApi(obj).then((res) => {
		router.back();
	});
};
</script>

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