zhiqi/src/views/order/intention/Step1.vue

77 lines
2.0 KiB
Vue

<template>
<el-form
label-width="100px"
class="step-form"
style="max-width: 500px; margin: auto"
>
<el-form-item label="客户名称" required>
<el-select v-model="form.customerName" placeholder="请选择客户名称">
<el-option
v-for="option in customerOptions.customerName"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item label="客户地址" required>
<el-select v-model="form.customerAddress" placeholder="请选择客户地址">
<el-option
v-for="option in customerOptions.customerAddress"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item label="邮编">
<el-input v-model="form.zip" placeholder="请输入邮编" />
</el-form-item>
<el-form-item label="联系人">
<el-select v-model="form.linkman" placeholder="请选择联系人">
<el-option
v-for="option in customerOptions.linkman"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item label="联系方式">
<el-select v-model="form.linkway" placeholder="请选择联系方式">
<el-option
v-for="option in customerOptions.linkway"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</el-form-item>
<div class="btn-row">
<el-button type="primary" @click="$emit('next-step')">下一步</el-button>
</div>
</el-form>
</template>
<script setup>
import { customerOptions } from '@/data/stepMockData';
const props = defineProps({
form: {
type: Object,
required: true,
},
});
</script>
<style scoped>
.step-form {
margin-top: 45px !important;
}
.btn-row {
display: flex;
justify-content: flex-end;
gap: 16px;
margin-top: 20px;
}
</style>