erp系统知识库文章管理

<script setup>
import { ref } from 'vue'
import { selectAllArticles } from '../../api/people'
const article = ref([])

const getArticles = async () => {
  const res = await selectAllArticles()
  article.value = res.data.data
}
getArticles()
</script>

<template>
  <el-button type="primary">文章添加</el-button>
  <el-divider />
  <el-table :data="article" stripe style="width: 100%" height="360px">
    <el-table-column prop="articleId" label="文章标识符" />
    <el-table-column prop="title" label="标题" />
    <el-table-column prop="content" label="内容">
      <template v-slot="{ row }">
        {{
          row.content.length > 10
            ? row.content.slice(0, 10) + '...'
            : row.content
        }}
      </template>
    </el-table-column>
    <el-table-column prop="category" label="分类" />
    <el-table-column prop="authorName" label="作者姓名" />
    <el-table-column prop="createdAt" label="创建时间" />
    <el-table-column prop="updatedAt" label="最后更新时间" />
    <el-table-column fixed="right" label="操作" width="240">
      <template v-slot="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="seeRow(scope.row)"
          :icon="View"
          >查看文章</el-button
        >
        <el-popover
          :visible="scope.row.showDeleteConfirm"
          placement="top"
          :width="160"
        >
          <p>确定删除吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="small" text @click="cancelDelete(scope.row)"
              >取消</el-button
            >
            <el-button
              size="small"
              type="primary"
              @click="confirmDeleteRow(scope.row)"
              >确认</el-button
            >
          </div>
          <template #reference>
            <el-button
              link
              type="primary"
              size="small"
              :icon="Delete"
              @click="showDeleteConfirm(scope.row)"
              >删除</el-button
            >
          </template>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
</template>

<style></style>