shuhi-ui/src/views/recycle/inventory/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:inventory:add'"
          @click="handleUpdate()"
        >
          新增图书商品
        </el-button>
        <el-button
          type="primary"
          plain
          v-permission="'recycle:inventory:import'"
          @click="handleImportExcel"
          :icon="UploadOutlined"
        >
          批量导入
        </el-button>
        <el-button
          type="success"
          plain
          v-permission="'recycle:inventory:checkNew'"
          @click="handleCheckNew"
          :icon="CloudUploadOutlined"
        >
          检测上新
        </el-button>
      </template>
      <template #cover="{ row }">
        <el-image
          style="width: 80px; height: 100px"
          fit="cover"
          :src="row?.bookInfo?.cover"
          :preview-src-list="[row?.bookInfo?.cover]"
          :initial-index="0"
          preview-teleported
        />
      </template>

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

      <template #stock="{ row }">
        <book-stock :row="row"></book-stock>
      </template>

      <template #action="{ row }">
        <div>
          <el-button
            type="success"
            link
            v-permission="'recycle:inventory:update'"
            @click="handleUpdate(row)"
          >
            [编辑]
          </el-button>
          <el-button
            type="danger"
            link
            v-permission="'recycle:inventory:recycleDetail'"
            @click="handleRecycleDetail(row)"
          >
            [回收明细]
          </el-button>
          <el-button
            type="warning"
            link
            v-permission="'recycle:inventory:saleDetail'"
            @click="handleSaleDetail(row)"
          >
            [销售明细]
          </el-button>
        </div>
      </template>
    </common-table>
    <books-edit ref="editRef" @success="reload()"></books-edit>
    <books-import
      ref="importRef"
      v-model="showImport"
      @done="reload()"
    ></books-import>
    <book-check-new ref="checkNewRef"></book-check-new>
    <recycle-detail ref="recycleDetailRef"></recycle-detail>
    <sale-detail ref="saleDetailRef"></sale-detail>
  </ele-page>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import {
    PlusOutlined,
    UploadOutlined,
    CloudUploadOutlined
  } from '@/components/icons';
  import { ElMessage } from 'element-plus';
  import pageSearch from './components/page-search.vue';
  import CommonTable from '@/components/CommonPage/CommonTable.vue';
  import booksEdit from '@/views/data/books/components/books-edit.vue';
  import booksImport from '@/views/data/books/components/books-import.vue';
  import bookBaseInfo from './components/book-base-info.vue';
  import bookCheckNew from './components/book-check-new.vue';
  import bookStock from './components/book-stock.vue';
  import recycleDetail from './components/recycle-detail.vue';
  import saleDetail from './components/sale-detail.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: 'goodsType',
      formatter: (row) => '图书商品',
      align: 'center'
    },
    {
      label: '售价',
      prop: 'salePrice',
      align: 'center',
      minWidth: 100,
      formatter: (row) => '￥' + (row?.salePrice ? row.salePrice : 0)
    },
    {
      label: '库存',
      prop: 'stock',
      align: 'center',
      minWidth: 100,
      slot: 'stock'
    },
    {
      label: '销量',
      prop: 'salesNum',
      align: 'center',
      minWidth: 100,
      formatter: (row) => row.salesNum || 0
    },
    {
      columnKey: 'action',
      label: '操作',
      width: 200,
      align: 'center',
      slot: 'action'
    }
  ]);

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

  const pageConfig = reactive({
    pageUrl: '/book/stock/pagelist',
    fileName: '库存数据',
    cacheKey: 'books-stock-data'
  });

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

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

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

  //检测上新
  const checkNewRef = ref(null);
  function handleCheckNew() {
    checkNewRef.value?.handleOpen();
  }

  //回收明细
  const recycleDetailRef = ref(null);
  function handleRecycleDetail(row) {
    recycleDetailRef.value?.handleOpen(row);
  }
  
  //销售明细
  const saleDetailRef = ref(null);
  function handleSaleDetail(row) {
    saleDetailRef.value?.handleOpen(row);
  }
</script>