lihaiMiddleOfficeAdminWeb/src/views/article/lists/edit2.vue

<template>
	<div class="article-edit">
		<el-card class="!border-none" shadow="never">
			<el-page-header :content="$route.meta.title" @back="$router.back()" />
		</el-card>
		<el-card class="mt-4 !border-none" shadow="never">
			<el-form ref="formRef" class="ls-form" :model="formData" label-width="85px" :rules="rules">
				<div class="xl:flex">
					<div>
						<el-form-item label="文章标题" prop="title">
							<div class="w-80">
								<el-input v-model="formData.title" placeholder="请输入文章标题" type="textarea"
									:autosize="{ minRows: 2, maxRows: 2 }" maxlength="64" show-word-limit clearable />
							</div>
						</el-form-item>
						<el-form-item label="文章栏目" prop="cid">
							<el-select class="w-80" v-model="formData.cid" placeholder="请选择文章栏目" clearable>
								<el-option v-for="item in optionsData.article_cate" :key="item.id" :label="item.name"
									:value="item.id" />
							</el-select>
						</el-form-item>
						<el-form-item label="文章简介" prop="desc">
							<div class="w-80">
								<el-input v-model="formData.desc" placeholder="请输入文章简介" type="textarea"
									:autosize="{ minRows: 2, maxRows: 5 }" :maxlength="200" show-word-limit clearable />
							</div>
						</el-form-item>
						<el-form-item label="摘要" prop="abstract">
							<div class="w-80">
								<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
									v-model="formData.abstract" maxlength="200" show-word-limit clearable />
							</div>
						</el-form-item>
						<el-form-item label="文章封面" prop="image">
							<div>
								<div>
									<material-picker v-model="formData.image" :limit="1" />
								</div>
								<div class="form-tips">建议尺寸：240*180px</div>
							</div>
						</el-form-item>
						<el-form-item label="作者" prop="author">
							<div class="w-80">
								<el-input v-model="formData.author" placeholder="请输入作者名称" />
							</div>
						</el-form-item>
						<el-form-item label="排序" prop="sort">
							<div>
								<el-input-number v-model="formData.sort" :min="0" :max="9999" />
								<div class="form-tips">默认为0， 数值越大越排前</div>
							</div>
						</el-form-item>
						<el-form-item label="初始浏览量" prop="click_virtual">
							<div>
								<el-input-number v-model="formData.click_virtual" :min="0" />
							</div>
						</el-form-item>
						<el-form-item label="文章状态" required prop="is_show">
							<el-radio-group v-model="formData.is_show">
								<el-radio :label="1">显示</el-radio>
								<el-radio :label="0">隐藏</el-radio>
							</el-radio-group>
						</el-form-item>
					</div>
					<div class="xl:ml-20">
						<el-form-item label="文章内容" prop="content">
							<editor v-model="formData.content" :height="300" :width="775" />
						</el-form-item>
					</div>
				</div>
			</el-form>
		</el-card>
		<footer-btns>
			<el-button type="primary" @click="handleSave">保存</el-button>
		</footer-btns>
	</div>
</template>

<script lang="ts" setup name="articleListsEdit">
	import type { FormInstance } from 'element-plus'
	import { useDictOptions } from '@/hooks/useDictOptions'
	import { articleDetail, articleEdit, articleAdd, articleCateAll } from '@/api/article'
	import useMultipleTabs from '@/hooks/useMultipleTabs'

	const route = useRoute()
	const router = useRouter()
	const formData = reactive({
		id: '',
		title: '',
		image: '',
		cid: '',
		desc: '',
		author: '',
		content: '',
		click_virtual: 0,
		sort: 0,
		is_show: 1,
		abstract: ''
	})

	const { removeTab } = useMultipleTabs()
	const formRef = shallowRef<FormInstance>()
	const rules = reactive({
		title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
		cid: [{ required: true, message: '请选择文章栏目', trigger: 'blur' }]
	})

	const getDetails = async () => {
		const data = await articleDetail({
			id: route.query.id
		})
		Object.keys(formData).forEach((key) => {
			//@ts-ignore
			formData[key] = data[key]
		})
	}

	const { optionsData } = useDictOptions<{
		article_cate : any[]
	}>({
		article_cate: {
			api: articleCateAll
		}
	})

	const handleSave = async () => {
		await formRef.value?.validate()
		if (route.query.id) {
			await articleEdit(formData)
		} else {
			await articleAdd(formData)
		}
		removeTab()
		router.back()
	}

	route.query.id && getDetails()
</script>