78 lines
3.0 KiB
Vue
78 lines
3.0 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
const props = defineProps<{
|
||
|
|
env: ResourceTechnologyInfo['env']
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const schema = z.object({
|
||
|
|
yieldDistance: z.number(),
|
||
|
|
area: z.number(),
|
||
|
|
terrain: z.string().min(1),
|
||
|
|
supplyWater: z.string().min(1),
|
||
|
|
supplyElectricity: z.string().min(1),
|
||
|
|
dischargeWater: z.string().min(1),
|
||
|
|
temperature: z.number(),
|
||
|
|
airPressure: z.number(),
|
||
|
|
})
|
||
|
|
|
||
|
|
const edit = ref(false)
|
||
|
|
|
||
|
|
const open = ref(false)
|
||
|
|
|
||
|
|
async function onSubmit(values: ZodInfer<typeof schema>) {
|
||
|
|
open.value = false
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<Dialog v-model:open="open">
|
||
|
|
<DialogTrigger as-child>
|
||
|
|
<Button class="font-bold tracking-wide">
|
||
|
|
查看所需场地条件
|
||
|
|
</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<DialogScrollContent class="sm:max-w-[425px]">
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle>所需场地条件</DialogTitle>
|
||
|
|
<DialogDescription>
|
||
|
|
通过点击编辑按钮可以编辑所需场地条件
|
||
|
|
</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
<Form class="space-y-4" :schema="schema" :initial-values="env" @submit="onSubmit">
|
||
|
|
<FormFieldItem v-slot="{ componentField }" label="退让距离" name="yieldDistance" required>
|
||
|
|
<Input type="text" v-bind="componentField" placeholder="" :disabled="!edit" />
|
||
|
|
</FormFieldItem>
|
||
|
|
<FormFieldItem v-slot="{ componentField }" label="占地面积" name="area" required>
|
||
|
|
<Input type="text" v-bind="componentField" :disabled="!edit" />
|
||
|
|
</FormFieldItem>
|
||
|
|
<FormFieldItem v-slot="{ componentField }" label="地形" name="terrain" required>
|
||
|
|
<Input type="text" v-bind="componentField" :disabled="!edit" />
|
||
|
|
</FormFieldItem>
|
||
|
|
<FormFieldItem v-slot="{ componentField }" label="供水要求" name="supplyWater">
|
||
|
|
<Input type="text" v-bind="componentField" :disabled="!edit" />
|
||
|
|
</FormFieldItem>
|
||
|
|
<FormFieldItem v-slot="{ componentField }" label="排水要求" name="dischargeWater" required>
|
||
|
|
<Input type="text" v-bind="componentField" :disabled="!edit" />
|
||
|
|
</FormFieldItem>
|
||
|
|
<FormFieldItem v-slot="{ componentField }" label="供电要求" name="supplyElectricity" required>
|
||
|
|
<Input type="text" v-bind="componentField" :disabled="!edit" />
|
||
|
|
</FormFieldItem>
|
||
|
|
<FormFieldItem v-slot="{ componentField }" label="温度" name="temperature" required>
|
||
|
|
<Input type="text" v-bind="componentField" :disabled="!edit" />
|
||
|
|
</FormFieldItem>
|
||
|
|
<FormFieldItem v-slot="{ componentField }" label="气压" name="airPressure" required>
|
||
|
|
<Input type="text" v-bind="componentField" :disabled="!edit" />
|
||
|
|
</FormFieldItem>
|
||
|
|
|
||
|
|
<DialogFooter class="mt-4">
|
||
|
|
<Button type="button" class="font-bold tracking-wide" @click="edit = !edit">
|
||
|
|
{{ edit ? '取消编辑' : '编辑' }}
|
||
|
|
</Button>
|
||
|
|
<Button v-if="edit" type="submit" class="font-bold tracking-wide">
|
||
|
|
保存
|
||
|
|
</Button>
|
||
|
|
</DialogFooter>
|
||
|
|
</Form>
|
||
|
|
</DialogScrollContent>
|
||
|
|
</Dialog>
|
||
|
|
</template>
|