index.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <script lang="ts" setup>
  2. /**
  3. * @Name: index.vue
  4. * @Description: 商品列表
  5. * @Author: Cheney
  6. */
  7. import VerticalDivider from '/src/components/VerticalDivider/index.vue';
  8. import { RefreshRight, Search } from '@element-plus/icons-vue';
  9. import { useTableHeight } from '/@/utils/useTableHeight';
  10. import DataTable from './component/DataTable.vue';
  11. import { DictionaryStore } from '/@/stores/dictionary';
  12. import { useResponse } from '/@/utils/useResponse';
  13. import { useTemplateRef } from 'vue';
  14. import * as api from './api';
  15. const { data: staticData } = DictionaryStore();
  16. const titleContainer: Ref<HTMLElement | null> = useTemplateRef('titleContainer');
  17. const queryContainer: Ref<HTMLElement | null> = useTemplateRef('queryContainer');
  18. const { tableHeight } = useTableHeight(titleContainer, queryContainer);
  19. const tableRef: Ref<any> = useTemplateRef('table');
  20. const btnLoading = ref(false);
  21. const formInline = reactive<any>({
  22. country: '',
  23. brand: '',
  24. group: '',
  25. status: '',
  26. asin: '',
  27. sku: '',
  28. shop: ''
  29. });
  30. provide('query-parameter', formInline);
  31. const groupOptions = <any>ref([]);
  32. const brandsOptions = <any>ref([]);
  33. const shopOptions = <any>ref([]);
  34. provide('groupOptions', groupOptions);
  35. provide('brandsOptions', brandsOptions);
  36. provide('shopOptions', shopOptions);
  37. onBeforeMount(() => {
  38. fetchOptions();
  39. });
  40. async function fetchOptions() {
  41. groupOptions.value = (await useResponse(api.getGroupOptions)).data;
  42. brandsOptions.value = (await useResponse(api.getBrandsOptions)).data;
  43. shopOptions.value = (await useResponse(api.getShopOptions)).data;
  44. }
  45. async function handleQuery() {
  46. btnLoading.value = true;
  47. await tableRef.value?.fetchList();
  48. btnLoading.value = false;
  49. }
  50. function resetParameter() {
  51. for (const key in formInline) {
  52. formInline[key] = '';
  53. }
  54. }
  55. </script>
  56. <template>
  57. <div class="p-5">
  58. <el-card class="h-full" style="color: rgba(0, 0, 0, 0.88);">
  59. <div ref="titleContainer" class="text-xl font-semibold pb-5">商品列表</div>
  60. <!-- 查询条件 -->
  61. <div ref="queryContainer" class="flex justify-between">
  62. <div class="flex flex-1">
  63. <div class="w-full whitespace-nowrap">
  64. <el-row :gutter="20" style="margin-bottom: 16px;">
  65. <el-col :span="6">
  66. <div class="flex items-center">
  67. <span class="mr-2">国 家</span>
  68. <el-select v-model="formInline.country" clearable placeholder="请选择国家">
  69. <el-option v-for="item in staticData.country_code" :key="item.value" :label="item.label"
  70. :value="item.value" />
  71. </el-select>
  72. </div>
  73. </el-col>
  74. <el-col :span="6">
  75. <div class="flex items-center">
  76. <span class="mr-2">品 牌</span>
  77. <el-select v-model="formInline.brand" clearable placeholder="请选择品牌">
  78. <el-option v-for="item in brandsOptions" :label="item.brand" :value="item.brand" />
  79. </el-select>
  80. </div>
  81. </el-col>
  82. <el-col :span="6">
  83. <div class="flex items-center">
  84. <span class="mr-2">分 组</span>
  85. <el-select v-model="formInline.group" clearable placeholder="请选择分组">
  86. <el-option v-for="item in groupOptions" :label="item.tag" :value="item.tag" />
  87. </el-select>
  88. </div>
  89. </el-col>
  90. <el-col :span="6">
  91. <div class="flex items-center">
  92. <span class="mr-2">状 态</span>
  93. <el-select v-model="formInline.status" clearable placeholder="请选择状态">
  94. <el-option v-for="item in staticData.goods_status" :key="item.value" :label="item.label"
  95. :value="item.value" />
  96. </el-select>
  97. </div>
  98. </el-col>
  99. </el-row>
  100. <el-row :gutter="20">
  101. <el-col :span="6">
  102. <div class="flex items-center">
  103. <span class="mr-2">ASIN</span>
  104. <el-input v-model="formInline.asin" clearable placeholder="请输入ASIN"></el-input>
  105. </div>
  106. </el-col>
  107. <el-col :span="6">
  108. <div class="flex items-center">
  109. <span class="mr-2">SKU</span>
  110. <el-input v-model="formInline.sku" clearable placeholder="请输入SKU"></el-input>
  111. </div>
  112. </el-col>
  113. <el-col :span="6" class="flex">
  114. <div class="flex items-center">
  115. <span class="mr-2">店 铺</span>
  116. <el-input v-model="formInline.shop" clearable placeholder="请输入店铺"></el-input>
  117. </div>
  118. </el-col>
  119. </el-row>
  120. </div>
  121. </div>
  122. <VerticalDivider />
  123. <div class="flex flex-col gap-1.5 items-end">
  124. <el-button :icon="Search" :loading="btnLoading" class="mb-4" type="primary" @click="handleQuery">
  125. 查 询
  126. </el-button>
  127. <el-button :icon="RefreshRight" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;" @click="resetParameter">
  128. 重 置
  129. </el-button>
  130. </div>
  131. </div>
  132. <el-divider ref="dividerContainer" style="margin: 20px 0 12px 0;" />
  133. <div :style="{ height: tableHeight + 'px' }">
  134. <DataTable ref="table" />
  135. </div>
  136. </el-card>
  137. </div>
  138. </template>
  139. <style scoped>
  140. </style>