From b4f3c4428801349aa2040ea77f9cffb725367a5a Mon Sep 17 00:00:00 2001
From: pyt <626651354@qq.com>
Date: 星期三, 15 一月 2025 16:38:47 +0800
Subject: [PATCH] fix
---
src/component/userInfo.vue | 586 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 292 insertions(+), 294 deletions(-)
diff --git a/src/component/userInfo.vue b/src/component/userInfo.vue
index f21a69f..41c9855 100644
--- a/src/component/userInfo.vue
+++ b/src/component/userInfo.vue
@@ -1,294 +1,292 @@
-<template>
- <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="120px" ref="form" :model="form" :rules="rules">
- <div class="title">个人信息</div>
- <div class="company">所属公司：{{ userInfo.companyName }}</div>
- <el-row :gutter="90" class="companyForm">
- <el-col :span="6.5">
- <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="手机号:" 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="邮箱:" 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 @click="addEmail" class="btn"><img src="@/assets/add.png" alt="">新增邮箱</div>
- </div>
- <el-row :gutter="90" class="companyForm">
- <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 @click="delEmail(item, index)"
- 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" @click="addContact"><img src="@/assets/add.png" alt="">新增收件人</div>
- </div>
- <el-row :gutter="90" class="companyForm" v-for="(item, index) in form.contactInfoList" :key="item">
- <el-col :span="6.5">
- <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="收件人手机号:"
- :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="item.remark"></el-input>
- <img @click="delContact(item, index)"
- style="width: 19px;height: 21px;cursor: pointer;position: absolute;right: -175px;"
- src="@/assets/delete.png" alt="">
- </div>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <div class="btns">
- <el-button @click="$emit('close')">关闭</el-button>
- <el-button type="primary" @click="submit">保存</el-button>
- </div>
- </div>
- </el-dialog>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import { saveUserInfo, getUserInfo } from '@/view/service'
-export default {
- props: ['show'],
- data() {
- return {
- form: {},
- rules: {
- 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': {
- handler(val) {
- if (val) {
- this.open()
- }
- },
- immediate: true
- }
- },
- methods: {
- // 提交
- submit() {
- this.$refs.form.validate((valid) => {
- if (valid) {
- let params = {
- extra: localStorage.getItem('extra'),
- info: {
- name: this.form.userName,
- phone: this.form.phone,
- mail: this.form.userEmail,
- },
- emails: this.form.otherEmails,
- addressInfos: this.form.contactInfoList
- }
- saveUserInfo(params).then(res => {
- if (res.status == 0) {
- this.$message.success('保存成功')
- this.$store.commit('SET_USERNAME', this.form.userName)
- }
- })
- }
- })
- },
- // 打开
- open() {
- getUserInfo({ extra: localStorage.getItem('extra') }).then(res => {
- if (res.data.emails) {
- res.data.emails.map(item => {
- item.mail = item.email
- })
- }
- if (res.data.addressInfo) {
- res.data.addressInfo.map(item => {
- item.remark = item.mark
- })
- }
- this.form = {
- userName: res.data.name,
- phone: res.data.phone,
- userEmail: res.data.email,
- otherEmails: res.data.emails || [],
- contactInfoList: res.data.addressInfo || [],
- }
- })
- },
- // 删除其他邮箱
- delEmail(item, index) {
- this.form.otherEmails.splice(index, 1)
- },
- // 新增其他邮箱
- addEmail() {
- this.form.otherEmails.push({
- mail: '',
- mark: ''
- })
- },
- // 删除收件人
- delContact(item, index) {
- this.form.contactInfoList.splice(index, 1)
- },
- // 新增收件人
- addContact() {
- this.form.contactInfoList.push({
- name: '',
- phone: '',
- email: '',
- address: '',
- mark: ''
- })
- }
- }
-};
-</script>
-
-<style lang="less" scoped>
-.content {
- .title {
- padding: 31px 0;
- text-align: center;
- font-size: 18px;
- font-weight: bold;
- color: #3B3F56;
- line-height: 27px;
- }
-
- .company {
- font-weight: bold;
- font-size: 16px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- color: #3B3F56;
- line-height: 24px;
- margin-left: 38px;
- padding-right: 50px;
-
- .btn {
- width: 151px;
- height: 50px;
- border-radius: 4px;
- background: #014099;
- font-size: 16px;
- color: #fff;
- display: flex;
- align-items: center;
- justify-content: center;
- font-weight: 500;
- cursor: pointer;
-
- img {
- width: 20px;
- height: 20px;
- margin-right: 13px;
- }
- }
- }
-
- .companyForm {
- margin-top: 32px;
- border-bottom: 1px solid rgba(151, 151, 151, 0.12);
- padding-left: 38px;
- }
-
- .btns {
- display: flex;
- justify-content: center;
- margin-top: 32px;
- padding-bottom: 33px;
-
- .el-button {
- width: 190px;
- height: 50px;
- font-size: 20px;
-
- }
-
- .el-button--primary {
- background-color: #014099;
- border-color: #014099;
- }
- }
-}
-
-/deep/ .el-dialog {
- border-radius: 8px;
-
- .el-dialog__header {
- display: none !important;
- }
-
- .el-dialog__body {
- padding: 0 !important;
-
- }
-}
-
-/deep/ .el-form {
- .el-form-item__label {
- font-size: 15px;
- color: #3B3F56;
- font-weight: 500;
- }
-}
-</style>
+<template>
+ <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="120px" ref="form" :model="form" :rules="rules">
+ <div class="title">个人信息</div>
+ <div class="company">所属公司：{{ userInfo.companyName }}</div>
+ <el-row :gutter="90" class="companyForm">
+ <el-col :span="6.5">
+ <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="手机号:" 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="邮箱:" 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 @click="addEmail" class="btn"><img src="@/assets/add.png" alt="">新增邮箱</div>
+ </div>
+ <el-row :gutter="90" class="companyForm">
+ <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 @click="delEmail(item, index)"
+ 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" @click="addContact"><img src="@/assets/add.png" alt="">新增收件人</div>
+ </div>
+ <el-row :gutter="90" class="companyForm" v-for="(item, index) in form.contactInfoList" :key="item">
+ <el-col :span="6.5">
+ <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="收件人手机号:"
+ :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="item.remark"></el-input>
+ <img @click="delContact(item, index)"
+ style="width: 19px;height: 21px;cursor: pointer;position: absolute;right: -175px;"
+ src="@/assets/delete.png" alt="">
+ </div>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <div class="btns">
+ <el-button @click="$emit('close')">关闭</el-button>
+ <el-button type="primary" @click="submit">保存</el-button>
+ </div>
+ </div>
+ </el-dialog>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { saveUserInfo, getUserInfo } from '@/view/service'
+export default {
+ props: ['show'],
+ data() {
+ return {
+ form: {},
+ rules: {
+ 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': {
+ handler(val) {
+ if (val) {
+ this.open()
+ }
+ },
+ immediate: true
+ }
+ },
+ methods: {
+ // 提交
+ submit() {
+ this.$refs.form.validate((valid) => {
+ if (valid) {
+ let params = {
+ extra: localStorage.getItem('extra'),
+ info: {
+ name: this.form.userName,
+ phone: this.form.phone,
+ mail: this.form.userEmail,
+ },
+ emails: this.form.otherEmails,
+ addressInfos: this.form.contactInfoList
+ }
+ saveUserInfo(params).then(res => {
+ this.$message.success('保存成功')
+ this.$store.commit('SET_USERNAME', this.form.userName)
+ })
+ }
+ })
+ },
+ // 打开
+ open() {
+ getUserInfo({ extra: localStorage.getItem('extra') }).then(res => {
+ if (res.data.emails) {
+ res.data.emails.map(item => {
+ item.mail = item.email
+ })
+ }
+ if (res.data.addressInfo) {
+ res.data.addressInfo.map(item => {
+ item.remark = item.mark
+ })
+ }
+ this.form = {
+ userName: res.data.name,
+ phone: res.data.phone,
+ userEmail: res.data.email,
+ otherEmails: res.data.emails || [],
+ contactInfoList: res.data.addressInfo || [],
+ }
+ })
+ },
+ // 删除其他邮箱
+ delEmail(item, index) {
+ this.form.otherEmails.splice(index, 1)
+ },
+ // 新增其他邮箱
+ addEmail() {
+ this.form.otherEmails.push({
+ mail: '',
+ mark: ''
+ })
+ },
+ // 删除收件人
+ delContact(item, index) {
+ this.form.contactInfoList.splice(index, 1)
+ },
+ // 新增收件人
+ addContact() {
+ this.form.contactInfoList.push({
+ name: '',
+ phone: '',
+ email: '',
+ address: '',
+ mark: ''
+ })
+ }
+ }
+};
+</script>
+
+<style lang="less" scoped>
+.content {
+ .title {
+ padding: 31px 0;
+ text-align: center;
+ font-size: 18px;
+ font-weight: bold;
+ color: #3B3F56;
+ line-height: 27px;
+ }
+
+ .company {
+ font-weight: bold;
+ font-size: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ color: #3B3F56;
+ line-height: 24px;
+ margin-left: 38px;
+ padding-right: 50px;
+
+ .btn {
+ width: 151px;
+ height: 50px;
+ border-radius: 4px;
+ background: #014099;
+ font-size: 16px;
+ color: #fff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 500;
+ cursor: pointer;
+
+ img {
+ width: 20px;
+ height: 20px;
+ margin-right: 13px;
+ }
+ }
+ }
+
+ .companyForm {
+ margin-top: 32px;
+ border-bottom: 1px solid rgba(151, 151, 151, 0.12);
+ padding-left: 38px;
+ }
+
+ .btns {
+ display: flex;
+ justify-content: center;
+ margin-top: 32px;
+ padding-bottom: 33px;
+
+ .el-button {
+ width: 190px;
+ height: 50px;
+ font-size: 20px;
+
+ }
+
+ .el-button--primary {
+ background-color: #014099;
+ border-color: #014099;
+ }
+ }
+}
+
+/deep/ .el-dialog {
+ border-radius: 8px;
+
+ .el-dialog__header {
+ display: none !important;
+ }
+
+ .el-dialog__body {
+ padding: 0 !important;
+
+ }
+}
+
+/deep/ .el-form {
+ .el-form-item__label {
+ font-size: 15px;
+ color: #3B3F56;
+ font-weight: 500;
+ }
+}
+</style>
--
Gitblit v1.7.1