提交20240824

This commit is contained in:
Mrking 2024-08-24 22:30:10 +08:00
parent 778968620e
commit 9f44be32b0
1 changed files with 295 additions and 0 deletions

View File

@ -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>