fetch(add): 账户管理

src/components/business/BatchOperationDialog.vue

@@ -42,112 +42,106 @@
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="handleCancel">取消</el-button>
-        <el-button
-          type="primary"
-          :loading="loading"
-          @click="handleConfirm"
-        >
-          确定
-        </el-button>
+        <el-button type="primary" :loading="loading" @click="handleConfirm"> 确定 </el-button>
       </div>
     </template>
   </el-dialog>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import type { FormInstance, FormRules } from 'element-plus'
-import { ElMessage } from 'element-plus'
+  import { ref, computed } from 'vue'
+  import type { FormInstance, FormRules } from 'element-plus'
+  import { ElMessage } from 'element-plus'
 
-interface Props {
-  modelValue: boolean
-  title: string
-  width?: string | number
-  selectedCount?: number
-  confirmMessage?: string
-  formRules?: FormRules
-}
-
-interface Emits {
-  (e: 'update:modelValue', value: boolean): void
-  (e: 'confirm', formData: Record<string, any>): void | Promise<void>
-  (e: 'cancel'): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  width: '600px',
-  selectedCount: 0
-})
-
-const emit = defineEmits<Emits>()
-
-const formRef = ref<FormInstance>()
-const formData = ref<Record<string, any>>({})
-const loading = ref(false)
-
-const visible = computed({
-  get: () => props.modelValue,
-  set: (val) => {
-    emit('update:modelValue', val)
+  interface Props {
+    modelValue: boolean
+    title: string
+    width?: string | number
+    selectedCount?: number
+    confirmMessage?: string
+    formRules?: FormRules
   }
-})
 
-const handleConfirm = async () => {
-  if (!formRef.value) return
+  interface Emits {
+    (e: 'update:modelValue', value: boolean): void
+    (e: 'confirm', formData: Record<string, any>): void | Promise<void>
+    (e: 'cancel'): void
+  }
 
-  try {
-    await formRef.value.validate()
+  const props = withDefaults(defineProps<Props>(), {
+    width: '600px',
+    selectedCount: 0
+  })
 
-    loading.value = true
-    try {
-      await emit('confirm', formData.value)
-      visible.value = false
-      ElMessage.success('操作成功')
-    } catch (error) {
-      console.error('批量操作失败:', error)
-      ElMessage.error('操作失败')
-    } finally {
-      loading.value = false
+  const emit = defineEmits<Emits>()
+
+  const formRef = ref<FormInstance>()
+  const formData = ref<Record<string, any>>({})
+  const loading = ref(false)
+
+  const visible = computed({
+    get: () => props.modelValue,
+    set: (val) => {
+      emit('update:modelValue', val)
+    }
+  })
+
+  const handleConfirm = async () => {
+    if (!formRef.value) return
+
+    try {
+      await formRef.value.validate()
+
+      loading.value = true
+      try {
+        await emit('confirm', formData.value)
+        visible.value = false
+        ElMessage.success('操作成功')
+      } catch (error) {
+        console.error('批量操作失败:', error)
+        ElMessage.error('操作失败')
+      } finally {
+        loading.value = false
+      }
+    } catch {
+      ElMessage.warning('请检查表单填写')
     }
-  } catch {
-    ElMessage.warning('请检查表单填写')
   }
-}
 
-const handleCancel = () => {
-  visible.value = false
-  emit('cancel')
-}
+  const handleCancel = () => {
+    visible.value = false
+    emit('cancel')
+  }
 
-const handleClosed = () => {
-  formRef.value?.resetFields()
-  formData.value = {}
-}
+  const handleClosed = () => {
+    formRef.value?.resetFields()
+    formData.value = {}
+  }
 
-// 暴露方法供父组件调用
-defineExpose({
-  formData
-})
+  // 暴露方法供父组件调用
+  defineExpose({
+    formData
+  })
 </script>
 
 <style scoped lang="scss">
-.batch-operation-content {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+  .batch-operation-content {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
 
-  .operation-form {
-    margin-top: 16px;
+    .operation-form {
+      margin-top: 16px;
+    }
+
+    .confirm-alert {
+      margin-top: 8px;
+    }
   }
 
-  .confirm-alert {
-    margin-top: 8px;
+  .dialog-footer {
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
   }
-}
-
-.dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-}
 </style>