opt_web/src/views/product-list/index.vue

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

import VerticalDivider from '/@/components/VerticalDivider/index.vue';
import { RefreshRight, Search } from '@element-plus/icons-vue';
import { useTableHeight } from '/@/utils/useTableHeight';
import DataTable from '/@/views/product-list/component/DataTable.vue';


const titleContainer: Ref<HTMLElement | null> = useTemplateRef('titleContainer');
const queryContainer: Ref<HTMLElement | null> = useTemplateRef('queryContainer');
const { tableHeight } = useTableHeight(titleContainer, queryContainer);

const loading = ref(false);

const formInline = reactive({
  user: '',
  region: '',
  date: ''
});

function onClick() {
  loading.value = true;
  
}

</script>

<template>
  <div class="p-5 flex-grow">
    <el-card class="h-full" style="color: rgba(0, 0, 0, 0.88);">
      <div ref="titleContainer" class="text-xl font-semibold pb-7">商品列表</div>
      <!-- 查询条件 -->
      <div ref="queryContainer" class="flex justify-between">
        <div class="flex flex-1">
          <div class="w-full whitespace-nowrap">
            <el-row :gutter="20" style="margin-bottom: 16px;">
              <el-col :span="6">
                <div class="flex items-center">
                  <span class="mr-2">国 家</span>
                  <el-select v-model="formInline.date" clearable placeholder="请选择国家" />
                </div>
              </el-col>
              <el-col :span="6">
                <div class="flex items-center">
                  <span class="mr-2">品 牌</span>
                  <el-select v-model="formInline.date" clearable placeholder="请选择品牌" />
                </div>
              </el-col>
              <el-col :span="6">
                <div class="flex items-center">
                  <span class="mr-2">分 组</span>
                  <el-select v-model="formInline.date" clearable placeholder="请选择分组" />
                </div>
              </el-col>
              <el-col :span="6">
                <div class="flex items-center">
                  <span class="mr-2">状 态</span>
                  <el-select v-model="formInline.date" clearable placeholder="请选择状态" />
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="flex items-center">
                  <span class="mr-2">ASIN</span>
                  <el-input v-model="formInline.region" clearable placeholder="请输入ASIN"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="flex items-center">
                  <span class="mr-2">SKU</span>
                  <el-input v-model="formInline.region" clearable placeholder="请输入SKU"></el-input>
                </div>
              </el-col>
              <el-col :span="6" class="flex">
                <div class="flex items-center">
                  <span class="mr-2">店 铺</span>
                  <el-input v-model="formInline.region" clearable placeholder="请输入店铺"></el-input>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <VerticalDivider />
        <div class="flex flex-col gap-1.5 items-end">
          <el-button :icon="Search" :loading="loading" class="mb-4" type="primary" @click="onClick">
            查 询
          </el-button>
          <el-button :icon="RefreshRight" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;">
            重 置
          </el-button>
        </div>
      </div>
      <el-divider ref="dividerContainer" style="margin: 20px 0 12px 0;" />
      <div :style="{ height: tableHeight + 'px' }">
        <DataTable />
      </div>
    </el-card>
  </div>
</template>

<style scoped>

</style>