ams_web/src/views/shop-information/components/DataTable.vue

<script lang="ts" setup>
/**
 * @Name: DataTable.vue
 * @Description:
 * @Author: Cheney
 */

import { usePagination } from '/@/utils/usePagination';
import { shopInfoColumns } from '/@/views/shop-information/useColumns';
import * as api from '../api';
import { useTableData } from '/@/utils/useTableData';
import { useResponse } from '/@/utils/useResponse';
import { Link } from '@element-plus/icons-vue';
import router from '/@/router';


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

const gridRef = ref();
const gridOptions: any = reactive({
  // size: 'small',
  border: false,
  round: true,
  stripe: true,
  currentRowHighLight: true,
  height: 1000,
  toolbarConfig: {
    size: 'large',
    custom: true,
    slots: {
      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 platformNumber = ref('');
const platform = ref('');
const operatorName = ref('');
const country = ref('');
const company = ref('');

const splitOperator = ref('');
const splitCountry = ref('');

const tempOperator = ref('');
const tempCountry = ref('');

const countryOption = ref([]);
const platformOption = ref([]);
const operatorOption = ref([]);

onBeforeMount(() => {
  gridOptions.pagerConfig.limit = 20;
  fetchFilterOptions();
});

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

async function fetchFilterOptions() {
  const res = await useResponse({}, api.getFilterOptions);
  countryOption.value = res.data.country;
  platformOption.value = res.data.platform;
  operatorOption.value = res.data.operatorName;
}

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

  const query = {
    platformNumber: platformNumber.value,
    platform: platform.value,
    operatorName: splitOperator.value,
    country: splitCountry.value,
    company: company.value
  };

  tempOperator.value = query.operatorName;
  tempCountry.value = query.country;

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

async function processParameter() {
  if (operatorName.value) {
    splitOperator.value = operatorName.value ? operatorName.value + ',' : '';
    splitOperator.value = splitOperator.value.slice(0, -1);
  }
  if (country.value) {
    splitCountry.value = country.value ? country.value + ',' : '';
    splitCountry.value = splitCountry.value.slice(0, -1);
  }
}

function parameterChange() {
  if (operatorName.value.toString() != tempOperator.value || country.value.toString() != tempCountry.value) {
    gridOptions.pagerConfig.page = 1;
    fetchList();
  }
}

function handleInputQuery() {
  gridOptions.pagerConfig.page = 1;
  fetchList()
}

function handleNavigate(item: any) {
  router.push({
    path: '/shop/detail',
    query: { platformNumber: item.platformNumber }
  });
}
</script>

<template>
  <vxe-grid ref="gridRef" v-bind="gridOptions">
    <template #toolbar_buttons>
      <el-row :gutter="20" class="w-full whitespace-nowrap">
        <el-col :span="4">
          <div class="flex items-center gap-1.5">
            <span class="font-medium">运 营</span>
            <el-select v-model="operatorName" clearable collapse-tags collapse-tags-tooltip filterable multiple
                       @blur="parameterChange"
                       @change="processParameter">
              <el-option v-for="item in operatorOption" :label="item" :value="item" />
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="flex items-center gap-1.5">
            <span class="font-medium">国 家</span>
            <el-select v-model="country" clearable collapse-tags collapse-tags-tooltip multiple
                       @blur="parameterChange"
                       @change="processParameter">
              <el-option v-for="item in countryOption" :label="item" :value="item" />
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="flex items-center gap-1.5">
            <span class="font-medium">平 台</span>
            <el-select v-model="platform" clearable @change="handleInputQuery">
              <el-option v-for="item in platformOption" :label="item" :value="item" />
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="flex items-center gap-1.5">
            <span class="font-medium">店铺编号</span>
            <el-input v-model="platformNumber" clearable placeholder="请输入店铺编号" @change="handleInputQuery" />
          </div>
        </el-col>
        <el-col :span="5">
          <div class="flex items-center gap-1.5">
            <span class="font-medium">公 司</span>
            <el-input v-model="company" clearable placeholder="请输入公司名称" @change="handleInputQuery" />
          </div>
        </el-col>
      </el-row>
    </template>
    <template #platformNumber="{ row }">
      <el-button link style="font-weight: 700" type="primary" @click="handleNavigate(row)">
        <el-icon>
          <Link />
        </el-icon>
        {{ row.platformNumber ? row.platformNumber : '--' }}
      </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>
  </vxe-grid>
</template>

<style scoped>

</style>