vue学习9

1.文章分类页面-element-plus表格

1. 基本架子-PageContainer封装
   按需引入的彩蛋，components里面的内容都会自动注册
   用el-card组件，里面使用插槽或具名插槽
   
2. 文章分类渲染 & loading处理
   序号：

<el-table-column type="index" width="50" />

const getChannelList = async () => {
	loading.value = true
	const res = await artGetChannelsService()
	channelList.value = res.data.data
	loading.value = false
}

空内容：

<template #empty>
	<el-empty description="没有数据" />
</template>

3. 文章分类添加编辑【element-plus弹层】
   

<el-form  
:model="formModel" 
:rules="rules" 
label-width="100px" 
style="padding-right: 30px"
>
	<el-form-item label="分类名称" prop="cata_name">
		<el-input 
		v-model="formModel.cata_name"
		placeholder="请输入分类名称"
		>
	</el-form-item>
	<el-form-item label="分类别名" prop="cata_alias">
		<el-input 
		v-model="formModel.cata_alias"
		placeholder="请输入分类别名"
		>
	</el-form-item>
</el-form>

export const artAddChannelService = (data) => request.post(`/my/cata/add`, data)

编辑文档：

export const artEditChannelService = (data) => request.put(`/my/cata/info`, data)

请求参数：query
删除文章分类

export const artDelChannelService = (id) => request.delete(`/my/cata/del`, {
	params: {id}
})

2.文章管理页面-element-plus 进阶

1. 文章列表渲染（带搜索&带分页）
   label是给用户看的，value是收集给后台的
   在form里面配置inline属性，搜索框就能在一行显示了
   

export const artGetListService = (params) =>
	request.get('/my/artticle/list', {
		params
	})

必须是大写字母，且字母不能改，必须是YYYY年MM月DD日

export const formatTime = (time) => dayjs(time).format('YYYY年MM月DD日')

最后再导入使用：

分页渲染

//处理分页逻辑
const onSize = (size) => {
	//只要是每页条数变化了那么原本正在访问的当页意义不大了
	//重新从 第一页渲染
	params.value.pagenum = 1
	params.value.pagesize = size
	getArticleList()
}

loading效果

:v-loading="loading"

2. 添加文章（抽屉&文件上传&富文本）
   抽屉：

<el-drawer
v-model="visibleDrawer"
title="大标题"
direction="rt1"
size="50%"
>
</el-drawer>

(1)open{ {}},添加操作，添加表单初始化无数据
(2)open{ { id:xx,…}},编辑操作，编辑表单初始化需回显
准备数据，方法，form表单结构，重置添加，下拉菜单
on-change 钩子 ：添加文件，上传成功和失败都会调用
富文本编辑器

<quill-editor theme="anow" v-model:content="formModel.content"></quill-editor>

添加和编辑是不一样的
父组件监听事件，重新渲染

//添加修改成功
const onSuccess = (type) => {
	if(type ==='add') {
		//如果是添加，需要跳转渲染最后一页，编辑直接渲染当前页
		const lastPage = Math.ceil((total.value + 1)/params.value.pagesize)
		params.value.pagenum = lastPage
	}
}

添加完成后的内容重置
3. 编辑文章（共用抽屉）
编辑文章的回显

imgUrl.value = baseURL + formModel.value.cover_img
//提交到后台，需要的是filez格式，将网络图片，转成format格式
//网络图片转成File对象，要转换
formModel.value.cover_img = await imageUrlToFile(imgUrl.value,formModel.value)else{
	console.log(''添加功能")
}

封装接口，用id获取数据详情->页面中调用渲染
4. 删除文章