Jelajahi Sumber

refactor(product-manage): 优化查询和重置功能

-将 RefreshRight 图标替换为 RefreshLeft
- 优化重置功能, 为重置按钮添加 loading 状态
WanGxC 6 bulan lalu
induk
melakukan
fba50ccbde

+ 7 - 4
src/views/product-manage/competitor-monitor/index.vue

@@ -5,7 +5,7 @@
  * @Author: Cheney
  */
 
-import { RefreshRight, Search } from '@element-plus/icons-vue';
+import { RefreshLeft, Search } from '@element-plus/icons-vue';
 import VerticalDivider from '/src/components/VerticalDivider/index.vue';
 import { useResponse } from '/@/utils/useResponse';
 import * as api from './api';
@@ -75,6 +75,7 @@ async function fetchOptions() {
 }
 
 const btnLoading = ref(false);
+const resetLoading = ref(false);
 
 async function handleQuery() {
   btnLoading.value = true;
@@ -82,11 +83,13 @@ async function handleQuery() {
   btnLoading.value = false;
 }
 
-function resetParameter() {
+async function resetParameter() {
   for (const key in formInline) {
     formInline[key] = '';
   }
-  handleQuery();
+  resetLoading.value = true;
+  await tableRef.value?.fetchList(true);
+  resetLoading.value = false;
 }
 </script>
 
@@ -176,7 +179,7 @@ function resetParameter() {
           <el-button :icon="Search" :loading="btnLoading" class="mb-4" type="primary" @click="handleQuery">
             查 询
           </el-button>
-          <el-button :icon="RefreshRight" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;"
+          <el-button :icon="RefreshLeft" :loading="resetLoading" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;"
                      @click="resetParameter">
             重 置
           </el-button>

+ 8 - 4
src/views/product-manage/product-list/index.vue

@@ -6,7 +6,7 @@
  */
 
 import VerticalDivider from '/src/components/VerticalDivider/index.vue';
-import { RefreshRight, Search } from '@element-plus/icons-vue';
+import { RefreshLeft, Search } from '@element-plus/icons-vue';
 import { DictionaryStore } from '/@/stores/dictionary';
 import { useResponse } from '/@/utils/useResponse';
 import { useTemplateRef } from 'vue';
@@ -34,6 +34,7 @@ const { tableHeight } = useCustomHeight(heightObj);
 const tableRef: Ref<any> = useTemplateRef('table');
 
 const btnLoading = ref(false);
+const resetLoading = ref(false);
 
 const formInline = reactive<any>({
   country: '',
@@ -72,11 +73,13 @@ async function handleQuery() {
   btnLoading.value = false;
 }
 
-function resetParameter() {
+async function resetParameter() {
   for (const key in formInline) {
     formInline[key] = '';
   }
-  handleQuery();
+  resetLoading.value = true;
+  await tableRef.value?.fetchList(true);
+  resetLoading.value = false;
 }
 </script>
 
@@ -166,7 +169,8 @@ function resetParameter() {
           <el-button :icon="Search" :loading="btnLoading" class="mb-4" type="primary" @click="handleQuery">
             查 询
           </el-button>
-          <el-button :icon="RefreshRight" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;" @click="resetParameter">
+          <el-button :icon="RefreshLeft" :loading="resetLoading" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;" 
+                     @click="resetParameter">
             重 置
           </el-button>
         </div>

+ 8 - 4
src/views/product-manage/product-monitor/index.vue

@@ -5,7 +5,7 @@
  * @Author: Cheney
  */
 
-import { RefreshRight, Search } from '@element-plus/icons-vue';
+import { RefreshLeft, Search } from '@element-plus/icons-vue';
 import VerticalDivider from '/src/components/VerticalDivider/index.vue';
 import { useResponse } from '/@/utils/useResponse';
 import * as api from './api';
@@ -77,6 +77,7 @@ async function fetchOptions() {
 }
 
 const btnLoading = ref(false);
+const resetLoading = ref(false);
 
 async function handleQuery() {
   btnLoading.value = true;
@@ -84,11 +85,13 @@ async function handleQuery() {
   btnLoading.value = false;
 }
 
-function resetParameter() {
+async function resetParameter() {
   for (const key in formInline) {
     formInline[key] = '';
   }
-  handleQuery();
+  resetLoading.value = true;
+  await tableRef.value?.fetchList(true);
+  resetLoading.value = false;
 }
 </script>
 
@@ -194,7 +197,8 @@ function resetParameter() {
           <el-button :icon="Search" :loading="btnLoading" class="mb-4" type="primary" @click="handleQuery">
             查 询
           </el-button>
-          <el-button :icon="RefreshRight" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;" @click="resetParameter">
+          <el-button :icon="RefreshLeft" :loading="resetLoading" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;" 
+                     @click="resetParameter">
             重 置
           </el-button>
         </div>

+ 8 - 4
src/views/sku-manage/company-sku/index.vue

@@ -4,7 +4,7 @@
  * @Description: 公司SKU
  * @Author: Cheney
  */
-import { RefreshRight, Search } from '@element-plus/icons-vue';
+import { RefreshLeft, Search } from '@element-plus/icons-vue';
 import DataTable from './component/DataTable.vue';
 import VerticalDivider from '/@/components/VerticalDivider/index.vue';
 import { useTableHeight } from '/@/utils/useTableHeight';
@@ -19,6 +19,7 @@ const { tableHeight } = useTableHeight(titleContainer, queryContainer);
 const tableRef: Ref<any> = useTemplateRef('table');
 
 const btnLoading = ref(false);
+const resetLoading = ref(false);
 
 const formInline = reactive<any>({
   brandName: '',
@@ -50,11 +51,13 @@ async function handleQuery() {
   btnLoading.value = false;
 }
 
-function resetParameter() {
+async function resetParameter() {
   for (const key in formInline) {
     formInline[key] = '';
   }
-  handleQuery();
+  resetLoading.value = true;
+  await tableRef.value?.fetchList(true);
+  resetLoading.value = false;
 }
 </script>
 
@@ -105,7 +108,8 @@ function resetParameter() {
           <el-button :icon="Search" :loading="btnLoading" type="primary" @click="handleQuery">
             查 询
           </el-button>
-          <el-button :icon="RefreshRight" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;" @click="resetParameter">
+          <el-button :icon="RefreshLeft" :loading="resetLoading" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;" 
+                     @click="resetParameter">
             重 置
           </el-button>
         </div>

+ 7 - 4
src/views/sku-manage/product-attribute/index.vue

@@ -5,7 +5,7 @@
  * @Author: Cheney
  */
 
-import { RefreshRight, Search } from '@element-plus/icons-vue';
+import { RefreshLeft, Search } from '@element-plus/icons-vue';
 import DataTable from './component/DataTable.vue';
 import VerticalDivider from '/@/components/VerticalDivider/index.vue';
 import { useTableHeight } from '/@/utils/useTableHeight';
@@ -18,6 +18,7 @@ const { tableHeight } = useTableHeight(titleContainer, queryContainer);
 const tableRef: Ref<any> = useTemplateRef('table');
 
 const btnLoading = ref(false);
+const resetLoading = ref(false);
 
 const formInline = reactive<any>({
   name: '',
@@ -31,11 +32,13 @@ async function handleQuery() {
   btnLoading.value = false;
 }
 
-function resetParameter() {
+async function resetParameter() {
   for (const key in formInline) {
     formInline[key] = '';
   }
-  handleQuery();
+  resetLoading.value = true;
+  await tableRef.value?.fetchList(true);
+  resetLoading.value = false;
 }
 </script>
 
@@ -68,7 +71,7 @@ function resetParameter() {
           <el-button :icon="Search" :loading="btnLoading" type="primary" @click="handleQuery">
             查 询
           </el-button>
-          <el-button :icon="RefreshRight" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;" @click="resetParameter">
+          <el-button :icon="RefreshLeft" :loading="resetLoading" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;" @click="resetParameter">
             重 置
           </el-button>
         </div>

+ 7 - 4
src/views/sku-manage/product-brand/index.vue

@@ -5,7 +5,7 @@
  * @Author: Cheney
  */
 
-import { RefreshRight, Search } from '@element-plus/icons-vue';
+import { RefreshLeft, Search } from '@element-plus/icons-vue';
 import DataTable from './component/DataTable.vue';
 import VerticalDivider from '/@/components/VerticalDivider/index.vue';
 import { useTableHeight } from '/@/utils/useTableHeight';
@@ -18,6 +18,7 @@ const { tableHeight } = useTableHeight(titleContainer, queryContainer);
 const tableRef: Ref<any> = useTemplateRef('table');
 
 const btnLoading = ref(false);
+const resetLoading = ref(false);
 
 const formInline = reactive<any>({
   name: '',
@@ -30,11 +31,13 @@ async function handleQuery() {
   btnLoading.value = false;
 }
 
-function resetParameter() {
+async function resetParameter() {
   for (const key in formInline) {
     formInline[key] = '';
   }
-  handleQuery();
+  resetLoading.value = true;
+  await tableRef.value?.fetchList(true);
+  resetLoading.value = false;
 }
 </script>
 
@@ -61,7 +64,7 @@ function resetParameter() {
           <el-button :icon="Search" :loading="btnLoading" type="primary" @click="handleQuery">
             查 询
           </el-button>
-          <el-button :icon="RefreshRight" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;" @click="resetParameter">
+          <el-button :icon="RefreshLeft" :loading="resetLoading" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;" @click="resetParameter">
             重 置
           </el-button>
         </div>

+ 7 - 4
src/views/sku-manage/product-category/index.vue

@@ -5,7 +5,7 @@
  * @Author: Cheney
  */
 
-import { RefreshRight, Search } from '@element-plus/icons-vue';
+import { RefreshLeft, Search } from '@element-plus/icons-vue';
 import DataTable from './component/DataTable.vue';
 import VerticalDivider from '/@/components/VerticalDivider/index.vue';
 import { useTableHeight } from '/@/utils/useTableHeight';
@@ -18,6 +18,7 @@ const { tableHeight } = useTableHeight(titleContainer, queryContainer);
 const tableRef: Ref<any> = useTemplateRef('table');
 
 const btnLoading = ref(false);
+const resetLoading = ref(false);
 
 const formInline = reactive<any>({
   name: '',
@@ -31,11 +32,13 @@ async function handleQuery() {
   btnLoading.value = false;
 }
 
-function resetParameter() {
+async function resetParameter() {
   for (const key in formInline) {
     formInline[key] = '';
   }
-  handleQuery();
+  resetLoading.value = true;
+  await tableRef.value?.fetchList(true);
+  resetLoading.value = false;
 }
 </script>
 
@@ -71,7 +74,7 @@ function resetParameter() {
           <el-button :icon="Search" :loading="btnLoading" type="primary" @click="handleQuery">
             查 询
           </el-button>
-          <el-button :icon="RefreshRight" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;" @click="resetParameter">
+          <el-button :icon="RefreshLeft" :loading="resetLoading" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;" @click="resetParameter">
             重 置
           </el-button>
         </div>

+ 7 - 4
src/views/store-manage/market-store/index.vue

@@ -6,7 +6,7 @@
  */
 
 import VerticalDivider from '/src/components/VerticalDivider/index.vue';
-import { RefreshRight, Search } from '@element-plus/icons-vue';
+import { RefreshLeft, Search } from '@element-plus/icons-vue';
 import { useTableHeight } from '/@/utils/useTableHeight';
 import DataTable from './component/DataTable.vue';
 import { DictionaryStore } from '/@/stores/dictionary';
@@ -24,6 +24,7 @@ const { tableHeight } = useTableHeight(titleContainer, queryContainer);
 const tableRef: Ref<any> = useTemplateRef('table');
 
 const btnLoading = ref(false);
+const resetLoading = ref(false);
 
 const formInline = reactive<any>({
   country: '',
@@ -38,11 +39,13 @@ async function handleQuery() {
   btnLoading.value = false;
 }
 
-function resetParameter() {
+async function resetParameter() {
   for (const key in formInline) {
     formInline[key] = '';
   }
-  handleQuery();
+  resetLoading.value = true;
+  await tableRef.value?.fetchList(true);
+  resetLoading.value = false;
 }
 </script>
 
@@ -86,7 +89,7 @@ function resetParameter() {
           <el-button :icon="Search" :loading="btnLoading" type="primary" @click="handleQuery">
             查 询
           </el-button>
-          <el-button :icon="RefreshRight" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;" @click="resetParameter">
+          <el-button :icon="RefreshLeft" :loading="resetLoading" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;" @click="resetParameter">
             重 置
           </el-button>
         </div>

+ 7 - 4
src/views/store-manage/online-merchandise/index.vue

@@ -6,7 +6,7 @@
  */
 
 import VerticalDivider from '/src/components/VerticalDivider/index.vue';
-import { RefreshRight, Search } from '@element-plus/icons-vue';
+import { RefreshLeft, Search } from '@element-plus/icons-vue';
 import { useTableHeight } from '/@/utils/useTableHeight';
 import DataTable from './component/DataTable.vue';
 import { DictionaryStore } from '/@/stores/dictionary';
@@ -26,6 +26,7 @@ const { tableHeight } = useTableHeight(titleContainer, queryContainer);
 const tableRef: Ref<any> = useTemplateRef('table');
 
 const btnLoading = ref(false);
+const resetLoading = ref(false);
 
 const formInline = reactive<any>({
   country: '',
@@ -55,11 +56,13 @@ async function handleQuery() {
   btnLoading.value = false;
 }
 
-function resetParameter() {
+async function resetParameter() {
   for (const key in formInline) {
     formInline[key] = '';
   }
-  handleQuery();
+  resetLoading.value = true;
+  await tableRef.value?.fetchList(true);
+  resetLoading.value = false;
 }
 </script>
 
@@ -139,7 +142,7 @@ function resetParameter() {
           <el-button :icon="Search" :loading="btnLoading" class="mb-4" type="primary" @click="handleQuery">
             查 询
           </el-button>
-          <el-button :icon="RefreshRight" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;"
+          <el-button :icon="RefreshLeft" :loading="resetLoading" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;"
                      @click="resetParameter">
             重 置
           </el-button>

+ 6 - 5
src/views/system/personal/index.vue

@@ -68,7 +68,7 @@
               基本信息
             </div>
             <div class="flex justify-end w-full">
-              <el-button :icon="Check" type="primary" plain @click="submitForm">
+              <el-button :icon="Select" type="primary" plain @click="submitForm">
                 更新个人信息
               </el-button>
             </div>
@@ -177,7 +177,7 @@
 </template>
 
 <script setup lang="ts" name="personal">
-import { reactive, computed, onMounted, ref, defineAsyncComponent } from 'vue';
+import { computed, defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { formatAxis } from '/@/utils/formatTime';
 import * as api from './api';
 import { ElMessage } from 'element-plus';
@@ -186,9 +186,10 @@ import { Session } from '/@/utils/storage';
 import { useRouter } from 'vue-router';
 import { useUserInfo } from '/@/stores/userInfo';
 import { successMessage } from '/@/utils/message';
-import {dictionary} from "/@/utils/dictionary";
-import {Md5} from "ts-md5";
-import { Check } from '@element-plus/icons-vue';
+import { dictionary } from '/@/utils/dictionary';
+import { Select } from '@element-plus/icons-vue';
+
+
 const router = useRouter();
 
 // 头像裁剪组件