fix: 修复列表内状态修改组件

src/components/common/status-switch.vue

@@ -1,39 +1,49 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
 defineOptions({
   name: 'StatusSwitch'
 });
 
+interface Props {
+  value: Api.Common.EnableStatusNumber;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: 0
+});
+
 interface Emits {
-  (e: 'update:value', value: Api.Common.EnableStatusNumber): void;
+  (e: 'fetch', value: Api.Common.EnableStatusNumber): void;
 }
 
 const emit = defineEmits<Emits>();
 
-const value = defineModel<Api.Common.EnableStatusNumber>('value', {
-  required: true
-});
-
+const active = ref(props.value);
 const loading = ref(false);
 
-const setLoading = (val: boolean) => {
-  loading.value = val;
-};
+watch(
+  () => props.value,
+  value => {
+    active.value = value;
+  }
+);
 
-defineExpose({
-  setLoading
-});
+const handleUpdateValue = (value: Api.Common.EnableStatusNumber) => {
+  loading.value = true;
+  emit('fetch', value);
+  loading.value = false;
+};
 </script>
 
 <template>
   <NSwitch
-    v-model:value="value"
+    :value="active"
     :loading="loading"
     :checked-value="1"
     :unchecked-value="0"
-    @update:value="emit('update:value', value)"
-  ></NSwitch>
+    @update:value="handleUpdateValue"
+  />
 </template>
 
 <style scoped></style>

src/views/job/task/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="tsx">
-import { ref } from 'vue';
 import { NButton, NPopconfirm, NTag } from 'naive-ui';
 import { fetchGetJobPage, fetchUpdateJobStatus } from '@/service/api';
 import { $t } from '@/locales';
@@ -57,29 +56,18 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
       align: 'center',
       minWidth: 120,
       render: row => {
-        const switchRef = ref<InstanceType<typeof StatusSwitch>>();
-
-        const handleUpdateValue = async (id: string, jobStatus: Api.Common.EnableStatusNumber) => {
-          switchRef.value?.setLoading(true);
-          try {
-            await fetchUpdateJobStatus({ id, jobStatus });
+        const fetchFn = async (jobStatus: Api.Common.EnableStatusNumber) => {
+          const { error } = await fetchUpdateJobStatus({ id: row.id!, jobStatus });
+          if (!error) {
+            row.jobStatus = jobStatus;
             window.$message?.success($t('common.updateSuccess'));
-          } catch {
-            window.$message?.error($t('common.updateFailed'));
-          } finally {
-            switchRef.value?.setLoading(false);
-            await getData();
           }
         };
 
         return (
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          /* @ts-expect-error */
-          <StatusSwitch
-            v-model:value={row.jobStatus}
-            ref={switchRef}
-            on-update:value={(status: Api.Common.EnableStatusNumber) => handleUpdateValue(row.id!, status)}
-          ></StatusSwitch>
+          <>
+            <StatusSwitch v-model:value={row.jobStatus} onFetch={fetchFn} />
+          </>
         );
       }
     },