可选接口封装【vue3大事件文章管理接口获取】

1.封装接口类型

1.数据前面后有逗号表示可选传递

//更新文章列表数据类型
export type ArtGetListServiceParamsType = {
    pagenum: number
    pagesize: string
    cate_id?: string
    state?: string
}

2.封装接口

//更新文章管理列表
export const artGetListService = (params: ArtGetListServiceParamsType) => {
  const { pagenum, pagesize, cate_id, state } = params
  return request.get(`/my/article/list?pagenum=${pagenum}&pagesize=${pagesize}&cate_id=${cate_id}&state=${state}`)
}

3.下拉框赋值

先去定义一个变量调用接口去到值

//获取文章分类给文章分类下拉框赋值
const channelList = ref()
const getChannelList = async () => {
  const res = await artGetChannelsService()
  // console.log(res,'文章分类');
  channelList.value = res.data.data
  console.log(channelList,'文章管理文章分类');
}
getChannelList()

将取到的值用v-for进行遍历

<el-form-item label="文章分类：">
    <el-select
    v-model="selectValue"
  >
    <el-option
      v-for="channel in channelList"
      :key="channel.id"
      :label="channel.cate_name"
      :value="channel.id"
    ></el-option>

4.进入页面获取文章数据

//获取文章管理数据
const total = ref(0)
const articleList = ref([])
const getArticleList = async (params: ArtGetListServiceParamsType) => {
   const res = await artGetListService(params)
   console.log(res,'获取文章管理数据');
   articleList.value = res.data.data
   total.value = res.data.total
}
getArticleList({pagenum: 1, pagesize: '100', cate_id: '', state: ''})

5.点击搜索查询数据

//搜索
const search = async () => {
  // console.log(111);
  console.log(PublishDraft.value);
  await getArticleList({pagenum: 1, pagesize: '100', cate_id: selectValue.value, state: PublishDraft.value  })
} 

6.点击重置查询数据

//重置
const reset = async() => {
  await getArticleList({pagenum: 1, pagesize: '100', cate_id: '', state: ''})
  selectValue.value = ''
  PublishDraft.value = ''
}