70 lines
2.1 KiB
Vue
70 lines
2.1 KiB
Vue
|
<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>
|
||
|
|
|