From 7d61781ce8c825ae3127eda644c984a85f3c556f Mon Sep 17 00:00:00 2001
From: pyt <626651354@qq.com>
Date: 星期三, 08 一月 2025 17:27:59 +0800
Subject: [PATCH] fix
---
src/component/userInfo.vue | 145 ++++++++++++++++++++++++++++++++---------------
1 files changed, 98 insertions(+), 47 deletions(-)
diff --git a/src/component/userInfo.vue b/src/component/userInfo.vue
index e06ca59..d16059c 100644
--- a/src/component/userInfo.vue
+++ b/src/component/userInfo.vue
@@ -1,64 +1,84 @@
<template>
<el-dialog :visible.sync="show" :show-close="false" width="80%" top="51px" :close-on-click-modal="false">
<div class="content">
- <el-form label-position="left" label-width="105px" :model="form" :rules="rules">
+ <el-form label-position="left" label-width="120px" :model="form" :rules="rules">
<div class="title">个人信息</div>
- <div class="company">所属公司：成都喜望软件有限公司</div>
+ <div class="company">所属公司：{{ userInfo.companyName }}</div>
<el-row :gutter="90" class="companyForm">
<el-col :span="6.5">
- <el-form-item label="姓名:">
- <el-input v-model="form.name"></el-input>
+ <el-form-item label="姓名:" prop="userName">
+ <el-input v-model="form.userName" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
- <el-col :span="6.5"><el-form-item label="手机号:" label-width="120px">
- <el-input v-model="form.region"></el-input>
+ <el-col :span="6.5"><el-form-item label="手机号:" prop="phone" label-width="120px">
+ <el-input v-model="form.phone"></el-input>
</el-form-item></el-col>
- <el-col :span="6.5"><el-form-item label="邮箱:">
- <el-input v-model="form.type"></el-input>
+ <el-col :span="6.5"><el-form-item label="邮箱:" prop="userEmail">
+ <el-input v-model="form.userEmail"></el-input>
</el-form-item></el-col>
</el-row>
<div class="company" style="margin-top: 6px;">其他邮箱
- <div class="btn"><img src="@/assets/add.png" alt="">新增邮箱</div>
+ <div @click="addEmail" class="btn"><img src="@/assets/add.png" alt="">新增邮箱</div>
</div>
<el-row :gutter="90" class="companyForm">
- <el-col :span="6.5">
- <el-form-item label="邮箱:" prop="email">
- <el-input v-model="form.email"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="16"><el-form-item label="备注:" label-width="120px">
- <div style="display: flex;align-items: center;"><el-input v-model="form.region"></el-input>
- <img style="width: 19px;height: 21px;cursor: pointer;margin-left: 26px;"
- src="@/assets/delete.png" alt="">
- </div>
- </el-form-item></el-col>
-
+ <div v-for="(item, index) in form.otherEmails" :key="item">
+ <el-col :span="6.5">
+ <el-form-item label="邮箱:" :prop="'otherEmails.' + index + '.mail'" :rules="[{
+ required: true, message: '请输入邮箱', trigger: 'change'
+ }, { type: 'email', message: '请输入正确的邮箱地址', trigger: 'change' }]">
+ <el-input v-model="item.mail"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="16">
+ <el-form-item label="备注:" label-width="120px">
+ <div style="display: flex;align-items: center;"><el-input
+ v-model="item.mark"></el-input>
+ <img style="width: 19px;height: 21px;cursor: pointer;margin-left: 26px;"
+ src="@/assets/delete.png" alt="">
+ </div>
+ </el-form-item>
+ </el-col>
+ </div>
</el-row>
<div class="company" style="margin-top: 6px;">常用收件信息
- <div class="btn"><img src="@/assets/add.png" alt="">新增收件人</div>
+ <div class="btn" @click="addContact"><img src="@/assets/add.png" alt="">新增收件人</div>
</div>
- <el-row :gutter="90" class="companyForm">
+ <el-row :gutter="90" class="companyForm" v-for="(item, index) in form.contactInfoList" :key="item">
<el-col :span="6.5">
- <el-form-item label="收件人姓名:">
- <el-input v-model="form.name"></el-input>
+ <el-form-item label="收件人姓名:" :rules="[{ required: true, message: '请输入', trigger: 'change' }]"
+ :prop="'contactInfoList.' + index + '.name'">
+ <el-input v-model="item.name"></el-input>
</el-form-item>
</el-col>
- <el-col :span="6.5"><el-form-item label="收件人手机号:" label-width="120px">
- <el-input v-model="form.region"></el-input>
- </el-form-item></el-col>
- <el-col :span="6.5"><el-form-item label="收件人邮箱:">
- <el-input v-model="form.type"></el-input>
- </el-form-item></el-col>
- <el-col :span="20" style="padding-right: 73px;"><el-form-item label="收件人地址:">
- <el-input v-model="form.type"></el-input>
- </el-form-item></el-col>
- <el-col :span="20" style="padding-right: 73px;position: relative;"><el-form-item label="备注:">
+ <el-col :span="6.5">
+ <el-form-item label="收件人手机号:"
+ :rules="[{ required: true, message: '请输入', trigger: 'change' }, { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'change' }]"
+ :prop="'contactInfoList.' + index + '.phone'">
+ <el-input v-model="item.phone"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="6.5">
+ <el-form-item label="收件人邮箱:"
+ :rules="[{ required: true, message: '请输入', trigger: 'change' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: 'change' }]"
+ :prop="'contactInfoList.' + index + '.email'">
+ <el-input v-model="item.email"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="20" style="padding-right: 52px;">
+ <el-form-item label="收件人地址:" :rules="[{ required: true, message: '请输入', trigger: 'change' }]"
+ :prop="'contactInfoList.' + index + '.address'">
+ <el-input v-model="item.address"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="20" style="padding-right: 52px;position: relative;">
+ <el-form-item label="备注:">
<div style="display: flex;align-items: center;"><el-input type="textarea" :rows="3"
- v-model="form.region"></el-input>
+ v-model="item.mark"></el-input>
<img style="width: 19px;height: 21px;cursor: pointer;position: absolute;right: -175px;"
src="@/assets/delete.png" alt="">
</div>
- </el-form-item></el-col>
+ </el-form-item>
+ </el-col>
</el-row>
</el-form>
<div class="btns">
@@ -70,28 +90,59 @@
</template>
<script>
+import { mapState } from 'vuex'
export default {
props: ['show'],
data() {
return {
- form: {
- name: '',
- region: '',
- type: '',
- email: ''
- },
+ form: {},
rules: {
- email: [
- { required: true, message: '请选择活动区域', trigger: 'change' }
+ userName: [
+ { required: true, message: '请输入姓名', trigger: 'change' }
+ ],
+ phone: [
+ { required: true, message: '请输入手机号', trigger: 'change' },
+ { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'change' }
+ ],
+ userEmail: [
+ { required: true, message: '请输入邮箱', trigger: 'change' }
],
}
};
},
+ computed: {
+ ...mapState(['userInfo'])
+ },
watch: {
show(val) {
if (val) {
- console.log(this.$store.state.userInfo, '111');
+ this.form = {
+ userName: this.userInfo.userName,
+ phone: this.userInfo.phone,
+ userEmail: this.userInfo.userEmail,
+ otherEmails: this.userInfo.otherEmails,
+ contactInfoList: this.userInfo.contactInfoList,
+ }
}
+ }
+ },
+ methods: {
+ // 新增其他邮箱
+ addEmail() {
+ this.form.otherEmails.push({
+ email: '',
+ mark: ''
+ })
+ },
+ // 新增收件人
+ addContact() {
+ this.form.contactInfoList.push({
+ name: '',
+ phone: '',
+ email: '',
+ address: '',
+ mark: ''
+ })
}
}
};
@@ -181,7 +232,7 @@
/deep/ .el-form {
.el-form-item__label {
- font-size: 16px;
+ font-size: 15px;
color: #3B3F56;
font-weight: 500;
}
--
Gitblit v1.7.1