lckt-admin/src/view/goods/article/index.vue

<template>
  <div >
    <div class="searchForm">
      <searchForm
        :search="ARTICLE_SEARCH_CONFIG"
        @searchData="searchData"
        @resetData="resetData"
        class="search-box searchForm"
      />
    </div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-button  type="primary" icon="plus" @click="handleEdit()">新增</el-button>
      </div>
      <Content
        @changePage="changePage"
        :total="total"
        v-model:tabloading="tableLoading"
        v-model:currentPage="queryParams.page"
        v-model:pageSize="queryParams.pageSize"
        :data="tableData"
        :config="ARTICLE_TABLE_CONFIG"
      >
        <template #status="{ row }">
          <el-tag :type="tag(row.status).extend">{{ tag(row.status).label }}</el-tag>
        </template>
        <template #coverImg="{ row }">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.coverImg"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[row.coverImg]"
            show-progress
            :initial-index="4"
            fit="cover"
          />
        </template>
        <template #CreatedAt="{ row }">
          {{ formatDate(row.CreatedAt) }}
        </template>

        <template #UpdatedAt="{ row }">
          {{ formatDate(row.UpdatedAt) }}
        </template>
        <template #operate="{ row }">
          <el-button  type="primary" link class="table-button" @click="handleDetail(row)">
            <el-icon style="margin-right: 5px"><InfoFilled /></el-icon>查看
          </el-button>
          <el-button  type="primary" link icon="edit" class="table-button" @click="handleEdit(row)">编辑</el-button>
          <el-button type="primary" link icon="delete" @click="handleDelete(row)">删除</el-button>
        </template>
      </Content>
    </div>
    <!-- 在 template 的 Content 组件后添加 Dialog -->
    <el-dialog
      v-model="detailVisible"
      title="文章详情"
      width="60%"
      destroy-on-close
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="封面图">
          <el-image
            style="width: 100px; height: 100px"
            :src="detailData.coverImg"
            :preview-src-list="[detailData.coverImg]"
            fit="cover"
          />
        </el-descriptions-item>
        <el-descriptions-item label="商品名称">{{ detailData.title || EMPTY_STR }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ formatDate(detailData.CreatedAt) }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ formatDate(detailData.UpdatedAt) }}</el-descriptions-item>
        <el-descriptions-item label="商品描述" :span="2">
          <div v-html="detailData.content"></div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

  </div>
</template>
<script setup>
  import { ElMessage, ElMessageBox } from 'element-plus'
  import searchForm from '@/components/searchForm/index.vue'
  import Content from '@/components/content/index.vue'
  import { del, list } from '@/api/goods/index.js'
  import { ref, onMounted } from 'vue'
  import {formatDate} from '@/utils/format'
  import { ARTICLE_SEARCH_CONFIG, ARTICLE_TABLE_CONFIG } from '@/config'
  import { InfoFilled } from '@element-plus/icons-vue'
  import { useRouter, useRoute} from 'vue-router'
  const router = useRouter()
  const route = useRoute()
  const EMPTY_STR = '- -'
  // 在 script setup 中添加响应式数据
  const detailVisible = ref(false)
  const detailData = ref({})

  const tableLoading = ref(true),  tableData = ref([])
  const queryParams = ref({
    page: 1,
    pageSize: 10,
    orderId: '',
    startTime: '',
    endTime: ''
  }), total = ref(0)
  const searchData = (data) => {
    if (data.times) {
      data.startTime = data.times[0]
      data.endTime = data.times[1]
    }
    queryParams.value.page = 1
    queryParams.value = { ...queryParams.value, ...data }
    delete queryParams.value.times
    getList()
  }
  const resetData = () => {
    queryParams.value = {
      page: 1,
      pageSize: 10,
    }
    getList()
  }
  onMounted(() => {
    getList()
  })

  function handleDetail(row) {
    detailData.value = { ...row }
    detailVisible.value = true
  }
  async function getList() {
    const res = await list(queryParams.value)
    if(res.code === 0) {
      tableData.value = res.data.list
      total.value = res.data.total
    }
  }
  function handleEdit(row) {
      router.push({
        name: 'edit',
        query: {
          id: row?row.ID:''
        }
      })
  }
  async function handleDelete(row) {
    // 提醒
    // this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    //   confirmButtonText: '确定',
    //   cancelButtonText: '取消',
    //   type: 'warning'
    // }).then(() => {
    //   // 删除
    //   del(row.ID)
    // }).catch(() => {
    //   this.$message({
    //     type: 'info',
    //     message: '已取消删除'
    //   });
    // });
    try {
      await ElMessageBox.confirm('此操作将永久删除该商品，是否继续？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })

      const res = await del({
        ids: [row.ID]
      })
      if (res.code === 0) {
        ElMessage.success('删除成功')
        getList() // 刷新列表
      }
    } catch (error) {
      // 取消删除时不需要提示
      if (error !== 'cancel') {
        ElMessage.error(error.message || '删除失败')
      }
    }
  }
  function changePage(data) {
    queryParams.value.pageNum = data
    getList()
  }
</script>
<style lang="scss" scoped>
</style>