提交20240824
This commit is contained in:
parent
778968620e
commit
9f44be32b0
|
|
@ -0,0 +1,295 @@
|
|||
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<el-row :gutter="10">
|
||||
<el-card header="基本信息" style="width: 100%; margin-top: 20px" shadow="never" class="box-card">
|
||||
<template #header>
|
||||
<CardTitle title="基本信息" />
|
||||
</template>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="150px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="订单号码" prop="name">
|
||||
<el-input v-model="formData.name" disabled="true" placeholder="*** New ***" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="订单状态" prop="email">
|
||||
<el-input v-model="formData.email" placeholder="请输入邮箱" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="用户名称" prop="contacts">
|
||||
<el-input v-model="formData.contacts" placeholder="请输入联系人" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="创建日期 (GMT+8)" prop="phone">
|
||||
<el-input v-model="formData.phone" placeholder="请输入联系人手机号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="数据状态" prop="status">
|
||||
<el-switch
|
||||
v-model="formData.status"
|
||||
:active-text="formData.status==1?'可用':'禁用'"
|
||||
active-value="1"
|
||||
inactive-value="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item label="备注" prop="remarks">
|
||||
<el-input v-model="formData.remarks" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card header="电子邮件通知" style="width: 100%; margin-top: 20px" shadow="never">
|
||||
<template #header>
|
||||
<CardTitle title="电子邮件通知" />
|
||||
</template>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="150px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="订单号码" prop="name">
|
||||
<el-input v-model="formData.name" disabled="true" placeholder="*** New ***" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="订单状态" prop="email">
|
||||
<el-input v-model="formData.email" placeholder="请输入邮箱" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="用户名称" prop="contacts">
|
||||
<el-input v-model="formData.contacts" placeholder="请输入联系人" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="创建日期 (GMT+8)" prop="phone">
|
||||
<el-input v-model="formData.phone" placeholder="请输入联系人手机号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="数据状态" prop="status">
|
||||
<el-switch
|
||||
v-model="formData.status"
|
||||
:active-text="formData.status==1?'可用':'禁用'"
|
||||
active-value="1"
|
||||
inactive-value="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item label="备注" prop="remarks">
|
||||
<el-input v-model="formData.remarks" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 右上角:账户信息 -->
|
||||
<el-col :span="12" class="detail-info-item" style="padding-left: 0px; margin-top: 20px">
|
||||
<el-card shadow="never" class="h-full">
|
||||
<template #header>
|
||||
<CardTitle title="发票信息" />
|
||||
</template>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="150px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="1655">
|
||||
<el-form-item label="订单号码" prop="name">
|
||||
<el-input v-model="formData.name" disabled="true" placeholder="*** New ***" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="订单状态" prop="email">
|
||||
<el-input v-model="formData.email" placeholder="请输入邮箱" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="用户名称" prop="contacts">
|
||||
<el-input v-model="formData.contacts" placeholder="请输入联系人" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="创建日期 (GMT+8)" prop="phone">
|
||||
<el-input v-model="formData.phone" placeholder="请输入联系人手机号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="数据状态" prop="status">
|
||||
<el-switch
|
||||
v-model="formData.status"
|
||||
:active-text="formData.status==1?'可用':'禁用'"
|
||||
active-value="1"
|
||||
inactive-value="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item label="备注" prop="remarks">
|
||||
<el-input v-model="formData.remarks" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- 右上角:账户信息 -->
|
||||
<el-col :span="12" class="detail-info-item" style="padding-right: 0px; margin-top: 20px">
|
||||
<el-card shadow="never" class="h-full">
|
||||
<template #header>
|
||||
<CardTitle title="账户信息" />
|
||||
</template>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="150px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="订单号码" prop="name">
|
||||
<el-input v-model="formData.name" disabled="true" placeholder="*** New ***" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="订单状态" prop="email">
|
||||
<el-input v-model="formData.email" placeholder="请输入邮箱" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="用户名称" prop="contacts">
|
||||
<el-input v-model="formData.contacts" placeholder="请输入联系人" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="创建日期 (GMT+8)" prop="phone">
|
||||
<el-input v-model="formData.phone" placeholder="请输入联系人手机号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="数据状态" prop="status">
|
||||
<el-switch
|
||||
v-model="formData.status"
|
||||
:active-text="formData.status==1?'可用':'禁用'"
|
||||
active-value="1"
|
||||
inactive-value="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item label="备注" prop="remarks">
|
||||
<el-input v-model="formData.remarks" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row style="margin-top: 20px;" justify="end">
|
||||
<el-col :span="2">
|
||||
<el-button type="primary" plain size="mini" @click="openForm(undefined)">下一步</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import {defaultProps} from "@/utils/tree";
|
||||
|
||||
const formData = ref({
|
||||
name: undefined,
|
||||
email: undefined,
|
||||
contacts: undefined,
|
||||
phone: undefined,
|
||||
areaId: undefined,
|
||||
status: undefined,
|
||||
type: undefined,
|
||||
remarks: undefined,
|
||||
})
|
||||
|
||||
const formRules = reactive({
|
||||
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
|
||||
contacts: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
|
||||
phone: [{ required: true, message: '联系人手机号不能为空', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
|
||||
message: '请输入正确的手机号码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
type: 'email',
|
||||
message: '请输入正确的邮箱地址',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue