shuhi-ui/src/views/recycle/remindBooks/index.vue

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

    <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
      <template #toolbar>
        <el-button
          type="primary"
          plain
          :icon="PlusOutlined"
          v-permission="'recycle:remindArea:add'"
          @click="handleUpdate()"
        >
          新增
        </el-button>
        <el-button
          type="danger"
          plain
          :icon="DeleteOutlined"
          v-permission="'recycle:remindArea:batchDelete'"
          @click="handleBatchDelete()"
        >
          批量删除
        </el-button>
      </template>

      <template #action="{ row }">
        <el-button
          type="danger"
          link
          v-permission="'recycle:remindArea:delete'"
          @click="handleBatchDelete(row)"
        >
          删除
        </el-button>
      </template>
    </common-table>

    <page-edit ref="editRef" @success="reload()"></page-edit>
  </ele-page>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { ElMessageBox } from 'element-plus/es';
  import { EleMessage } from 'ele-admin-plus/es';
  import { PlusOutlined, DeleteOutlined } from '@/components/icons';
  import CommonTable from '@/components/CommonPage/CommonTable.vue';
  import pageSearch from './components/page-search.vue';
  import pageEdit from './components/page-edit.vue';
  import { useDictData } from '@/utils/use-dict-data';
  import { useRouter } from 'vue-router';
  import request from '@/utils/request';

  defineOptions({ name: 'remindBooks' });
  const [schoolLevelDicts] = useDictData(['school_level']);

  /** 表格列配置 */
  const columns = ref([
    { type: 'selection', columnKey: 'selection', width: 50, fixed: 'left' },
    { label: '图片', prop: 'picture', width: 140 },
    { label: 'isbn', prop: 'schoolName' },
    { label: '书名', prop: 'provinceName' },
    { label: '作者', prop: 'provinceName' },
    { label: '出版社', prop: 'provinceName' },
    { label: '出版时间', prop: 'provinceName' },
    { label: '定价', prop: 'provinceName' },
    { label: '需提醒仓库', prop: 'cityName' },
    { label: '添加时间', prop: 'createTime' },
    { columnKey: 'action', label: '操作', width: 120, slot: 'action' }
  ]);

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

  const pageConfig = reactive({
    pageUrl: '/baseinfo/schoolInfo/list',
    exportUrl: '/baseinfo/schoolInfo/export',
    fileName: '审核提醒书籍',
    cacheKey: 'remindBooksTable'
  });

  //刷新表格
  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(',');
    let url = `/baseinfo/schoolInfo/removeById/${ids}`;
    pageRef.value?.operatBatch({
      title: '确认删除？',
      method: 'post',
      url,
      row
    });
  }
</script>