init: 橘视厅酒店版会员系统前端

src/views/modules/device/components/device-preset-dialog.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="批量预置"
+    width="900px"
+    destroy-on-close
+    :close-on-click-modal="false"
+    @update:model-value="emit('update:modelValue', $event)"
+    @closed="onClosed">
+    <device-import-form
+      ref="formRef"
+      :show-action-bar="false"
+      :preset-pre-bind-card-type="presetCardType"
+      :hide-pre-bind-card-type-selector="true" />
+
+    <template #footer>
+      <el-button @click="emit('update:modelValue', false)">取消</el-button>
+      <el-button
+        v-if="wizardStep < 2"
+        type="primary"
+        :loading="importLoading"
+        :disabled="!canSubmit"
+        @click="handleSubmit">
+        {{ primaryLabel }}
+      </el-button>
+      <el-button v-if="wizardStep === 2" type="primary" @click="closeAfterImport">关闭</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, unref } from 'vue'
+import DeviceImportForm from './device-import-form.vue'
+import type { DeviceImportFormInstance } from './device-preset-dialog.data'
+
+defineOptions({ name: 'DevicePresetDialog' })
+
+const props = withDefaults(defineProps<{ modelValue?: boolean; presetCardType?: string }>(), {
+  modelValue: false,
+  presetCardType: 'YEAR'
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: boolean): void
+  (e: 'success'): void
+}>()
+
+const formRef = ref<DeviceImportFormInstance | null>(null)
+const importLoading = computed(() => formRef.value?.importLoading?.value ?? false)
+const canSubmit = computed(() => formRef.value?.canSubmit?.value ?? false)
+const wizardStep = computed(() => (unref(formRef.value?.activeStep) ?? 0) as number)
+const primaryLabel = computed(() => (unref(formRef.value?.primaryFooterLabel) ?? '下一步') as string)
+
+function onClosed (): void {
+  // 表单会在组件销毁时自动重置
+}
+
+function closeAfterImport (): void {
+  emit('update:modelValue', false)
+  emit('success')
+}
+
+async function handleSubmit (): Promise<void> {
+  const form = formRef.value
+  if (!form || typeof form.submitImport !== 'function') return
+  await form.submitImport()
+}
+</script>
+