job-master/src/views/information/article/add/add.vue

<template>
	<a-modal v-model:visible="openAddModel" :title="title" ok-text="提交" cancel-text="取消" @ok="sumbitForm"
		@cancel="cancelModal" width="50%">
		<a-form :model="createForm" layout="vertical">
			<a-row gutter="20">
				<a-col span="24">
					<a-form-item required label="文章标题" name="title">
						<a-input v-model:value="createForm.title" placeholder="请输入文章标题" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="封面图">
						<upload-one upload_txt="上传封面图" @uploadSuccess="uploadSuccess" :success_image="success_img"
							images_length="1"></upload-one>
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item  label="上传文件">
						<a-switch v-model:checked="showUplaod"> </a-switch>
						<div v-if="showUplaod" style="margin-top: 10px;">
							<upload-file @uploadSuccess="uploadDocSuccess"></upload-file>
							 <a-typography-paragraph v-if="createForm.doc_url" :copyable="{ text: imageprefix+createForm.doc_url}">
							   {{imageprefix+createForm.doc_url}}
							  </a-typography-paragraph>
						</div>
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="上级栏目" name="parent_id">
						<search-select placeholder="请选择上级栏目" :list="section_list" :select_value="addOtherForm.name"
							@searchData="sectionSearch" @getSelectValue="getSectionValue"
							:select_disabled="false"></search-select>
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="文章内容" name="content">
						<QuillEditor theme="snow" :options="options" toolbar="full"
							v-model:content="addOtherForm.content" @update:content="onEditorUpdate($event)"
							contentType="html" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="是否置顶" name="stick_top">
						<a-radio-group v-model:value="createForm.stick_top" button-style="solid">
							<a-radio-button :value="1">否</a-radio-button>
							<a-radio-button :value="2">是</a-radio-button>
						</a-radio-group>
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item label="成为热门" name="hot">
						<a-radio-group v-model:value="createForm.hot" button-style="solid">
							<a-radio-button :value="1">普通</a-radio-button>
							<a-radio-button :value="2">热门推荐</a-radio-button>
						</a-radio-group>
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item label="作者" name="author">
						<a-input v-model:value="createForm.author" placeholder="请输入作者" />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</a-modal>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, defineProps, watch, defineEmits } from 'vue';
	import { addArticle, updateArticle, listSection } from '@/apis/models';
	import he from 'he';
	import { dataForm, otherDataForm, reset } from '@/views/information/section/add/data.ts';
	import { useCommon } from '@/hooks/useCommon';
	let { store, openAddModel, hideModal, message, richOption, imageprefix } = useCommon();
	const emit = defineEmits();
	let props = defineProps(['edit_record']);
	let title = ref<String>('新增文章');
	let selectDisabled = ref<Boolean>(false)
	let success_img = ref<String>('')
	const options = ref(richOption)
	let showUplaod = ref<Boolean>(false)

	let createForm = ref<InformationArticleType.addFormType>(dataForm)
	let addOtherForm = ref<InformationArticleType.addOtherFormType>(otherDataForm)


	onMounted(() => {
		sectionSearch({ page: 1, pagesize: 100 })
	})

	// 上传图片
	const uploadSuccess = (data : Object) => {
		success_img.value = imageprefix + data
		createForm.value.cover_img = data
	}
	
	// 上传文件
	const uploadDocSuccess = (data : Object) => {
		createForm.value.doc_url = data
	}

	// 选择栏目/频道
	let section_list = ref<Object[]>([])
	const sectionSearch = (val : Object) => {
		listSection(val).then((res : object) => {
			const data = res.data.sections.map((item : object) => ({
				label: item.name,
				value: item.id,
			}));
			section_list.value = data;
		})
	}
	const getSectionValue = (val : Object) => {
		createForm.value.parent_id = val.key;
	}

	// 富文本
	const onEditorUpdate = (data) => {
		createForm.value.content = data
	}


	const sumbitForm = () => {
		if (createForm.value.title && createForm.value.cover_img && createForm.value.section_id && createForm.value.content) {
			if (!createForm.value.id) {
				addArticle(createForm.value).then(res => {
					message.success('新增文章成功');
					hideModal();
					resetForm();
					emit('successAdd');
				}).catch(err => {
				})
			} else {
				updateArticle(createForm.value).then(res => {
					message.success('修改文章成功');
					hideModal();
					resetForm();
					emit('successAdd');
				}).catch(err => {
				})
			}

		} else {
			message.warning('请补充完整信息');
		}
	}

	const resetForm = () => {
		addOtherForm.value = reset().otherDataForm;
		createForm.value = reset().dataForm;
	}
	const cancelModal = () => {
		emit('closeAdd');
		resetForm();
		hideModal();
	}


	openAddModel = computed(() => {
		return store.state.openAddModel;
	})

	watch(() => props.edit_record, (newVal) => {
		if (newVal) {
			title.value = '编辑文章';
			addOtherForm.value = {
				name: newVal.section_id,
				content: he.decode(newVal.content)
			}
			success_img.value = imageprefix + newVal.cover_img;
			
			createForm.value = {
				id: newVal.id,
				title: newVal.title,
				cover_img: newVal.cover_img,
				section_id: newVal.section_id,
				content: newVal.content,
				author: newVal.author,
				stick_top:newVal.stick_top,
				hot: newVal.hot,
			}
		} else {
			title.value = '新增文章';
		}
	})
</script>

<style>

</style>