xps-web-v5/src/views/article/components/ArtList.vue

<route lang="yaml">
meta:
  enabled: false
</route>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { deleteArtById, getArtByPage } from '@/api/system/artApi'
import useSettingsStore from '@/store/modules/settings'
const settingsStore = useSettingsStore()
const router = useRouter()
const tabbar = useTabbar()

const state = reactive({
  loading: false,
  dataList: [],
  search: {
    artCatId: -1,
    keywords: '',
  },
})

// 获取数据
const getData = async () => {
  if (state.search.artCatId > 0) {
    state.loading = true
    const { data } = await getArtByPage(state.search)
    state.loading = false
    state.dataList = data
    state.loading = false
  }
}

const artTableRef = ref()

// 查询
const onSearch = () => {
  getData()
}

// 新增
const onArtAdd = () => {
  if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.mergeTabsBy !== 'activeMenu') {
    tabbar.open({
      name: 'article_add',
      params: {
        artCatId: state.search.artCatId,
      },
    })
  }
  else {
    router.push({
      name: 'article_add',
      params: {
        artCatId: state.search.artCatId,
      },
    })
  }
}

// 编辑对象
const onArtEdit = (row: { artId: number }) => {
  if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.mergeTabsBy !== 'activeMenu') {
    tabbar.open({
      name: 'article_edit',
      params: {
        artId: row.artId,
      },
    })
  }
  else {
    router.push({
      name: 'article_edit',
      params: {
        artId: row.artId,
      },
    })
  }
}

const onArtView = (row: { art: number }) => {}

// 删除
const onArtDelete = (row: any) => {
  const { artId, artTitle } = row
  ElMessageBox.confirm(`确认删除「${artTitle}」吗？`, '确认信息').then(async () => {
    const { msg } = await deleteArtById(artId)
    ElMessage.success(msg)
    await getData()
  })
}

defineExpose({
  loadData(artCatId: number) {
    state.search.artCatId = artCatId
    getData()
  },
})
</script>

<template>
  <div class="container">
    <tool-bar>
      <template #left>
        <span />
      </template>

      <template #right>
        <el-input v-model="state.search.keywords" placeholder="请输入名称，支持模糊查询" style="padding-right: 10px;" clearable />
        <el-button type="primary" @click="onSearch">
          <template #icon>
            <el-icon>
              <svg-icon name="i-ep:search" />
            </el-icon>
          </template>
        </el-button>

        <el-button type="primary" @click="onArtAdd">
          <template #icon>
            <el-icon>
              <svg-icon name="i-ep:plus" />
            </el-icon>
          </template>
          发布文章
        </el-button>
      </template>
    </tool-bar>

    <el-table ref="artTableRef" v-loading="state.loading" class="list-table" size="small" :data="state.dataList" border stripe highlight-current-row>
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column type="index" align="center" label="序号" width="70" />

      <el-table-column prop="artTitle" width="250px" label="标题" align="center" header-align="center">
        <template #default="scope">
          <span>{{ scope.row.artTitle }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="artCatTitle" width="150px" label="分类" align="center" header-align="center">
        <template #default="scope">
          <span>{{ scope.row.artCatTitle }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="editorName" width="150px" label="发布人" align="center" header-align="center">
        <template #default="scope">
          <span>{{ scope.row.editorName }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="issuedAt" label="发布时间" align="left" header-align="center">
        <template #default="scope">
          <span>{{ scope.row.issuedAt }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200" align="center" fixed="right">
        <template #default="scope">
          <div>
            <el-button type="primary" size="small" plain @click="onArtView(scope.row)">
              查看
            </el-button>
            <el-button type="primary" size="small" plain @click="onArtEdit(scope.row)">
              编辑
            </el-button>
            <el-button v-if="!scope.row.isFixed" type="danger" size="small" plain @click="onArtDelete(scope.row)">
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>