opt_web/src/views/sku-manage/product-attribute/component/DataTable.vue

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

import { ElMessage } from 'element-plus';
import { Download, InfoFilled, Refresh, Plus } from '@element-plus/icons-vue';
import { usePagination } from '/@/utils/usePagination';
import { useTableData } from '/@/utils/useTableData';
import { useResponse } from '/@/utils/useResponse';
import { AttributeColumns } from '/@/views/sku-manage/Columns';
import PermissionButton from '/@/components/PermissionButton/index.vue';
import DataTableSlot from './DataTableSlot.vue';
import EditDrawer from './EditDrawer.vue';
import NoticeDialog from '/src/views/product-manage/product-list/component/NoticeDialog.vue';
import * as api from '../api';
import CreateDialog from '/src/views/sku-manage/product-attribute/component/CreateDialog.vue';


interface Parameter {
  country: string,
  shop: string,
  region: string,
  delivery: string,
  status: string,
  asin: string,
  sku: string
}

const queryParameter: Parameter | undefined = inject('query-parameter');
const { tableOptions, handlePageChange } = usePagination(fetchList);

const gridRef = ref();
const gridOptions: any = reactive({
  id: 'product-attribute-table',
  keepSource: true,
  size: 'small',
  border: false,
  round: true,
  stripe: true,
  currentRowHighLight: true,
  height: '100%',
  customConfig: {
    // mode: 'drawer',
    // immediate: true,
    storage: true,
  },
  toolbarConfig: {
    size: 'large',
    custom: true,
    slots: {
      tools: 'toolbar_tools',
      buttons: 'toolbar_buttons'
    }
  },
  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: '',
  data: ''
});

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

const dialogVisible = ref(false);

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

async function fetchList() {
  gridOptions.data = [];
  gridOptions.columns = [];

  const query = {
    asin: queryParameter?.asin,
    sku: queryParameter?.sku,
    country_code: queryParameter?.country,
    shop_id: queryParameter?.shop,
    region: queryParameter?.region,
    delivery: queryParameter?.delivery,
    status: queryParameter?.status
  };

  await useTableData(api.getTableData, query, gridOptions);
  await gridRef.value.loadColumn(AttributeColumns);
  gridOptions.showHeader = Boolean(gridOptions.data?.length);
}

function handleRefresh() {
  fetchList();
}

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

function handleCreate() {
	createOpen.value = true;
}

async function singleDelete(row: any) {
  const res = await useResponse(api.deleteRow, row);
  if (res.code === 2000) {
    ElMessage.success({ message: '删除成功', plain: true });
    handleRefresh();
  }
}

const gridEvents = {
  custom ({ type }: any) {
    // console.log(`点击 ${type}`)
    if (type == 'confirm') {
      fetchList();
    }
  }
}

defineExpose({ fetchList });
</script>

<template>
  <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents">
    <template #toolbar_buttons>
      <PermissionButton type="primary" :icon="Plus" plain round @click="handleCreate">新 增</PermissionButton>
    </template>
    <!-- 工具栏右侧 -->
    <template #toolbar_tools>
      <el-button circle class="toolbar-btn mr-3" @click="handleRefresh">
        <el-icon>
          <Refresh />
        </el-icon>
      </el-button>
    </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 v-for="col in AttributeColumns" #[`${col.field}`]="{ row }">
      <DataTableSlot :key="row.id" :field="col.field" :row="row" @edit-row="handleEdit" @handle-delete="singleDelete" />
    </template>
  </vxe-grid>
  <EditDrawer v-if="editOpen" v-model="editOpen" :row-data="rowData" @refresh="handleRefresh" />
  <NoticeDialog v-if="dialogVisible" v-model="dialogVisible" :row-data="rowData" />
	<CreateDialog v-if="createOpen" v-model="createOpen" @refresh="fetchList" />
</template>

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

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