47 lines
1.2 KiB
Vue
47 lines
1.2 KiB
Vue
<script setup lang="ts">
|
||
// 多列表单：columns 开启网格，FormItem 用 span 跨列、lineStart 强制换行
|
||
import { reactive } from 'vue'
|
||
import { G3Button, G3Form, G3FormItem, G3Input, G3Select } from '@g3soft/ui'
|
||
|
||
const model = reactive({
|
||
name: '',
|
||
code: '',
|
||
owner: undefined as number | undefined,
|
||
description: '',
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<G3Form
|
||
:model="model"
|
||
layout="vertical"
|
||
:columns="2"
|
||
:gap="{ row: 16, col: 16 }"
|
||
style="max-width: 640px"
|
||
@submit="() => {}"
|
||
>
|
||
<G3FormItem name="name" label="项目名称">
|
||
<G3Input v-model="model.name" />
|
||
</G3FormItem>
|
||
<G3FormItem name="code" label="项目标识">
|
||
<G3Input v-model="model.code" />
|
||
</G3FormItem>
|
||
<G3FormItem name="owner" label="负责人">
|
||
<G3Select
|
||
v-model="model.owner"
|
||
:options="[
|
||
{ label: '张三', value: 1 },
|
||
{ label: '李四', value: 2 },
|
||
]"
|
||
/>
|
||
</G3FormItem>
|
||
<!-- span 2：占满整行 -->
|
||
<G3FormItem name="description" label="项目描述" :span="2">
|
||
<G3Input v-model="model.description" type="textarea" :rows="3" />
|
||
</G3FormItem>
|
||
<G3FormItem :span="2">
|
||
<G3Button html-type="submit">保存</G3Button>
|
||
</G3FormItem>
|
||
</G3Form>
|
||
</template>
|