From 497583fe37d894095ea03b2ee87d43468b8eed6c Mon Sep 17 00:00:00 2001
From: gongjinbao <gongjinbao@163.com>
Date: 星期三, 08 一月 2025 18:20:37 +0800
Subject: [PATCH] Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/americanContainer
---
src/component/userInfo.vue | 170 +++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 119 insertions(+), 51 deletions(-)
diff --git a/src/component/userInfo.vue b/src/component/userInfo.vue
index e06ca59..6b43204 100644
--- a/src/component/userInfo.vue
+++ b/src/component/userInfo.vue
@@ -1,97 +1,165 @@
<template>
- <el-dialog :visible.sync="show" :show-close="false" width="80%" top="51px" :close-on-click-modal="false">
+ <el-dialog :visible.sync="show" :show-close="false" width="80%" top="51px" :close-on-click-modal="false"
+ append-to-body @open="open">
<div class="content">
- <el-form label-position="left" label-width="105px" :model="form" :rules="rules">
+ <el-form label-position="left" label-width="120px" ref="form" :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">
<el-button @click="$emit('close')">关闭</el-button>
- <el-button type="primary">保存</el-button>
+ <el-button type="primary" @click="submit">保存</el-button>
</div>
</div>
</el-dialog>
</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');
+ 'show': {
+ handler(val) {
+ if (val) {
+ this.open()
+ }
+ },
+ immediate: true
+ }
+ },
+ methods: {
+ // 提交
+ submit() {
+ this.$refs.form.validate((valid) => {
+ if (valid) {
+ console.log(this.form);
+ }
+ })
+ },
+ // 打开
+ open() {
+ let userInfo = JSON.parse(JSON.stringify(this.userInfo));
+ this.form = {
+ userName: userInfo.userName,
+ phone: userInfo.phone,
+ userEmail: userInfo.userEmail,
+ otherEmails: userInfo.otherEmails,
+ contactInfoList: userInfo.contactInfoList,
}
+ },
+ // 新增其他邮箱
+ addEmail() {
+ this.form.otherEmails.push({
+ email: '',
+ mark: ''
+ })
+ },
+ // 新增收件人
+ addContact() {
+ this.form.contactInfoList.push({
+ name: '',
+ phone: '',
+ email: '',
+ address: '',
+ mark: ''
+ })
}
}
};
@@ -181,7 +249,7 @@
/deep/ .el-form {
.el-form-item__label {
- font-size: 16px;
+ font-size: 15px;
color: #3B3F56;
font-weight: 500;
}
--
Gitblit v1.7.1