shuhi-ui/src/views/data/books/index.vue

<template>
  <ele-page flex-table>
    <books-search @search="reload"></books-search>

    <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
      <template #toolbar>
        <el-button
          type="primary"
          plain
          :icon="PlusOutlined"
          v-permission="'data:books:add'"
          @click="handleUpdate()"
        >
          新增图书
        </el-button>
        <el-button
          type="danger"
          plain
          :icon="DeleteOutlined"
          v-permission="'data:books:batchDelete'"
          @click="handleBatchDelete()"
        >
          批量删除
        </el-button>
        <el-button
          type="primary"
          plain
          v-permission="'data:books:import'"
          @click="handleImportExcel"
          :icon="UploadOutlined"
        >
          导入EXCEL
        </el-button>
        <el-button
          type="success"
          plain
          v-permission="'data:books:export'"
          @click="handleExportExcel"
          :icon="DownloadOutlined"
        >
          查询结果导出
        </el-button>
        <el-button
          type="primary"
          plain
          v-permission="'data:books:uploadImage'"
          @click="handleUploadImage"
          :icon="CloudUploadOutlined"
        >
          上传图片
        </el-button>
        <el-button
          type="info"
          plain
          v-permission="'data:books:importLog'"
          @click="handleImportLog"
          :icon="LogOutlined"
        >
          导入记录
        </el-button>
        <el-button
          type="info"
          plain
          v-permission="'data:books:exportLog'"
          @click="handleExportLog"
          :icon="LogOutlined"
        >
          导出记录
        </el-button>
      </template>
      <template #cover="{ row }">
        <el-image
          style="width: 80px; height: 100px"
          fit="cover"
          :src="row.cover"
        />
      </template>

      <template #baseInfo="{ row }">
        <book-base-info :row="row" @click="handleUpdate"></book-base-info>
      </template>

      <template #action="{ row }">
        <div>
          <el-button
            type="warning"
            link
            v-permission="'data:books:changeLogs'"
            @click="handleChangeLogs(row)"
          >
            [变动记录]
          </el-button>
          <el-button
            type="success"
            link
            v-permission="'data:books:update'"
            @click="handleUpdate(row)"
          >
            [编辑]
          </el-button>
        </div>
      </template>
    </common-table>
    <books-edit ref="editRef" @success="reload()"></books-edit>
    <books-import ref="importRef" v-model="showImport"></books-import>
    <books-change-log ref="changeLogRef"></books-change-log>
    <upload-image ref="uploadImageRef"></upload-image>
  </ele-page>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import {
    PlusOutlined,
    DeleteOutlined,
    DownloadOutlined,
    UploadOutlined,
    LogOutlined,
    CloudUploadOutlined
  } from '@/components/icons';
  import { dayjs } from 'element-plus';
  import CommonTable from '@/components/CommonPage/CommonTable.vue';
  import booksEdit from '@/views/data/books/components/books-edit.vue';
  import booksSearch from '@/views/data/books/components/books-search.vue';
  import booksImport from '@/views/data/books/components/books-import.vue';
  import booksChangeLog from '@/views/data/books/components/books-change-log.vue';
  import bookBaseInfo from '@/views/data/books/components/book-base-info.vue';
  import uploadImage from '@/views/data/books/components/upload-image.vue';
  import { useDictData } from '@/utils/use-dict-data';

  defineOptions({ name: 'recycleOrderCancelled' });

  const [perCheckDicts] = useDictData(['is_common_yes']);

  /** 表格列配置 */
  const columns = ref([
    {
      type: 'selection',
      columnKey: 'selection',
      width: 50,
      align: 'center',
      fixed: 'left'
    },
    {
      label: '图片',
      prop: 'cover',
      slot: 'cover',
      align: 'center'
    },
    {
      label: '基础信息',
      prop: 'baseInfo',
      slot: 'baseInfo',
      align: 'center',
      minWidth: 320
    },
    {
      label: '人工核实',
      prop: 'perCheck',
      formatter: (row) =>
        perCheckDicts.value.find((d) => d.dictValue == row.perCheck)?.dictLabel,
      align: 'center'
    },
    {
      columnKey: 'action',
      label: '操作',
      width: 200,
      align: 'center',
      slot: 'action'
    }
  ]);

  /** 页面组件实例 */
  const pageRef = ref(null);

  const pageConfig = reactive({
    pageUrl: '/book/bookInfo/list',
    exportUrl: '/book/bookInfo/export',
    fileName: '图书基础数据',
    cacheKey: 'books-base-data'
  });

  //导出excel
  function handleExportExcel() {
    pageRef.value?.exportData('图书基础数据');
  }

  //导入
  const showImport = ref(false);
  function handleImportExcel() {
    showImport.value = true;
  }

  //刷新表格
  function reload(where) {
    pageRef.value?.reload(where);
  }

  //批量删除
  function handleBatchDelete(row) {
    let selections = row ? [row] : pageRef.value?.getSelections();
    let ids = selections.map((item) => item.id).join(',');
    console.log(ids, selections);
    let url = `/book/bookInfo/removeById/${ids}`;
    pageRef.value?.operatBatch({
      title: '确认删除？',
      method: 'post',
      url,
      row
    });
  }

  //新增编辑图书
  const editRef = ref(null);
  function handleUpdate(row) {
    editRef.value?.handleOpen(row);
  }

  //变动记录
  const changeLogRef = ref(null);
  function handleChangeLogs(row) {
    changeLogRef.value?.handleOpen(row);
  }

  //上传图片
  const uploadImageRef = ref(null);
  function handleUploadImage() {
    uploadImageRef.value?.handleOpen();
  }

  //导出记录
  function handleExportLog() {}
  //导入记录
  function handleImportLog() {}

</script>