index.vue 5.5 KB

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