opt_web/src/views/product-list/component/DataTable.vue

<script lang="ts" setup>
/**
 * @Name: Table.vue
 * @Description: 商品列表表格
 * @Author: Cheney
 */

import { Download, Message, Money, Open, Operation, Refresh } from '@element-plus/icons-vue';
import * as api from '/@/views/product-list/api';
import PermissionButton from '/@/components/PermissionButton/index.vue';
import EditDrawer from '/@/views/product-list/component/EditDrawer.vue';
import NoticeDialog from '/@/views/product-list/component/NoticeDialog.vue';
import ImportButton from '/@/components/ImportButton/index.vue';
import VerticalDivider from '/@/components/VerticalDivider/index.vue';
import { productColumns } from '/@/views/product-list/ColumnsTsx';


const { tableOptions, handlePageChange } = usePagination(fetchList);

const gridRef = ref();
const gridOptions: any = reactive({
  border: false,
  round: true,
  stripe: true,
  currentRowHighLight: true,
  height: '100%',
  toolbarConfig: {
    custom: true,
    slots: {
      buttons: 'toolbar_buttons',
      tools: 'toolbar_tools'
    }
  },
  rowConfig: {
    isHover: true
  },
  columnConfig: {
    resizable: true
  },
  pagerConfig: {
    total: tableOptions.value.total,
    page: tableOptions.value.page,
    limit: tableOptions.value.limit
  },
  loading: false,
  loadingConfig: {
    icon: 'vxe-icon-indicator roll',
    text: '正在拼命加载中...'
  },
  columns: productColumns,
  data: ''
});

const checkedList = ref<Set<number>>(new Set());

const editOpen = ref(false);
const rowData = ref({});

const dialogVisible = ref(false);

const templateType = ref();

onBeforeMount(() => {
  fetchList();
});

async function fetchList() {
  const query = {
    page: gridOptions.pagerConfig.page,
    limit: gridOptions.pagerConfig.limit
  };
  await useTableData(api.getTableData, query, gridOptions);
}

function handleRefresh() {
  fetchList();
}

async function batchOpen() {
  const ids = Array.from(checkedList.value);
  await useResponse(api.updateShopDetail, { ids, status: 1 });
  checkedList.value.clear();
  await fetchList();
}

function selectChangeEvent({ checked, row }: any) {
  if (checked) {
    checkedList.value.add(row.id); // 获取单个数据
  } else {
    checkedList.value.delete(row.id);
  }
}

function selectAllChangeEvent({ checked }: any) {
  const $grid = gridRef.value;
  if ($grid) {
    const records = $grid.getData(); // 获取所有数据
    if (checked) {
      records.forEach((item: any) => {
        checkedList.value.add(item.id);
      });
    } else {
      checkedList.value.clear();
    }
  }
}

function handleEdit(row: any) {
  editOpen.value = true;
  rowData.value = row;
}

function handleNotice(row: any) {
  dialogVisible.value = true;
  rowData.value = row;
}

function downloadTemplate() {
  // console.log('111=> ');
}
</script>

<template>
  <vxe-grid ref="gridRef" v-bind="gridOptions"
            @checkbox-change="selectChangeEvent"
            @checkbox-all="selectAllChangeEvent">
    <template #toolbar_buttons>
      <div class="flex gap-2">
        <PermissionButton :disabled="!checkedList.size" :icon="Open" plain round type="primary" @click="batchOpen">
          批量开启
        </PermissionButton>
        <VerticalDivider class="px-1" style="margin-left: 7px;" />
        <div class="custom-el-input">
          <el-select v-model="templateType" placeholder="Select" style="width: 190px">
            <template #prefix>
              <div class="flex items-center">
                <el-button bg size="small" style="margin-left: -7px; font-size: 14px; border-radius: 29px;" text
                           type="success"
                           @click.stop="downloadTemplate">下载
                </el-button>
                <VerticalDivider style="margin-left: 7px" />
              </div>
            </template>
            <el-option label="商品通知模板" value="item1" />
            <el-option label="商品模板" value="item2" />
            <el-option label="指导价格模板" value="item3" />
          </el-select>
        </div>
        <ImportButton :icon="Message" bg text>变更通知导入</ImportButton>
        <ImportButton bg text>
          <i class="bi bi-box-seam mr-3"></i>
          商品导入
        </ImportButton>
        <ImportButton :icon="Money" bg text>指导价格导入</ImportButton>
      </div>
    </template>
    <template #toolbar_tools>
      <el-button circle class="toolbar-btn" @click="handleRefresh">
        <el-icon>
          <Refresh />
        </el-icon>
      </el-button>
      <el-button circle class="mr-3 toolbar-btn">
        <el-icon>
          <Download />
        </el-icon>
      </el-button>
    </template>
    <template #top>
      <div class="mb-2"></div>
    </template>
    <template #pager>
      <vxe-pager
          v-model:currentPage="gridOptions.pagerConfig.page"
          v-model:pageSize="gridOptions.pagerConfig.limit"
          :total="gridOptions.pagerConfig.total"
          class="mt-1.5"
          @page-change="handlePageChange"
      />
    </template>
    <template #operate="{ row }">
      <div class="flex justify-center gap-2">
        <PermissionButton circle plain type="warning" @click="handleEdit(row)">
          <el-icon>
            <Operation />
          </el-icon>
        </PermissionButton>
        <PermissionButton circle plain type="info" @click="handleNotice(row)">
          <el-icon>
            <Message />
          </el-icon>
        </PermissionButton>
      </div>
    </template>
  </vxe-grid>
  <EditDrawer v-if="editOpen" v-model="editOpen" :row-data="rowData" />
  <NoticeDialog v-if="dialogVisible" v-model="dialogVisible" :row-data="rowData" />
</template>

<style scoped>
.toolbar-btn {
  width: 34px;
  height: 34px;
  font-size: 18px
}

:deep(.custom-el-input .el-select__wrapper) {
  border-radius: 20px;
}
</style>