lsq-book/packages/pc/src/views/Bookshelf/components/UploadList.vue

<template>
  <div class="bookshelf-list">
    <el-table v-loading="loading" :data="list">
      <el-table-column align="center" prop="name" label="书名" width="180" />
      <el-table-column align="center" label="封面" #default="scope">
        <el-link
          type="primary"
          @click="
            () => {
              previewList = [`${baseUrl}${scope.row.thumb}`];
              showPreview = true;
            }
          "
          >{{ scope.row.thumb }}</el-link
        >
      </el-table-column>
      <el-table-column align="center" prop="author" label="作者" />
      <el-table-column align="center" prop="press" label="出版社" />
      <el-table-column align="center" prop="year" label="出版年份" />
      <el-table-column align="center" prop="storageName" label="中图法分类" />
      <el-table-column align="center" prop="exhibitTypeName" label="展示分类" />
      <el-table-column align="center" prop="num" label="ISBN编号" />
      <el-table-column align="center" label="审核状态" #default="scope">
        <p :style="{ color: STATUS[scope.row.auditStatus].color }">
          {{ STATUS[scope.row.auditStatus].label }}
        </p>
      </el-table-column>
      <el-table-column align="center" #default="scope" label="提交时间">
        {{ formatDate(scope.row.createTime) }}
      </el-table-column>
      <el-table-column
        align="center"
        fixed="right"
        #default="scope"
        label="操作"
      >
        <el-link type="error" @click="handleDelete(scope.row.id)">删除</el-link>
      </el-table-column>
    </el-table>
  </div>

  <el-image-viewer
    v-if="showPreview"
    :url-list="previewList"
    @close="showPreview = false"
  />
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getUploadBookListApi, deleteBookApi } from "@/api";
import { formatDate } from "@dage/utils";
import { getBaseUrl } from "@/utils";

const STATUS = [
  {
    label: "待审核",
    color: "var(--el-color-info)",
  },
  {
    label: "审核通过",
    color: "var(--el-color-success)",
  },
  {
    label: "审核不通过",
    color: "var(--el-color-error)",
  },
];
const baseUrl = getBaseUrl();
const loading = ref(false);
const list = ref([]);
const showPreview = ref(false);
const previewList = ref([]);

const getUploadBookList = async () => {
  try {
    loading.value = true;
    const data = await getUploadBookListApi();
    list.value = data;
  } finally {
    loading.value = false;
  }
};

const handleDelete = (id) => {
  ElMessageBox.confirm("确认是否删除?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    beforeClose: async (action, instance, done) => {
      if (action === "confirm") {
        try {
          instance.confirmButtonLoading = true;
          await deleteBookApi(id);
          ElMessage.success("删除成功");
          done();

          getUploadBookList();
        } finally {
          instance.confirmButtonLoading = false;
        }
      } else {
        done();
      }
    },
  });
};

onMounted(() => {
  getUploadBookList();
});

defineExpose({
  getUploadBookList,
});
</script>

<style lang="scss" scoped>
.bookshelf-list {
  margin: 35px -67px 0;

  .el-table {
    --el-table-header-text-color: #464646;
    --el-table-header-bg-color: rgba(209, 187, 158, 0.2);
  }
}
</style>