45 lines
1.3 KiB
Vue
45 lines
1.3 KiB
Vue
<script setup lang="ts">
|
||
// 表单弹窗：confirmLoading 阻止一切关闭，异步提交期间按钮显示加载
|
||
import { reactive, ref } from 'vue'
|
||
import { G3Button, G3Form, G3FormItem, G3Input, G3Message, G3Modal } from '@g3soft/ui'
|
||
|
||
const open = ref(false)
|
||
const saving = ref(false)
|
||
const model = reactive({ name: '', code: '' })
|
||
const rules = { name: [{ required: true }] }
|
||
|
||
async function handleConfirm() {
|
||
saving.value = true
|
||
try {
|
||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||
G3Message.success(`已保存 ${model.name}`)
|
||
open.value = false
|
||
} finally {
|
||
saving.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<G3Button @click="open = true">新建（表单弹窗）</G3Button>
|
||
|
||
<G3Modal
|
||
v-model:open="open"
|
||
title="新建项目"
|
||
:width="480"
|
||
:confirm-loading="saving"
|
||
@confirm="handleConfirm"
|
||
>
|
||
<G3Form :model="model" :rules="rules" :label-width="72" validate-trigger="blur" @submit="handleConfirm">
|
||
<G3FormItem name="name" label="名称">
|
||
<G3Input v-model="model.name" placeholder="必填" />
|
||
</G3FormItem>
|
||
<G3FormItem name="code" label="标识">
|
||
<G3Input v-model="model.code" placeholder="可选" />
|
||
</G3FormItem>
|
||
</G3Form>
|
||
</G3Modal>
|
||
</div>
|
||
</template>
|