fix

pyt

2025-01-08 7d61781ce8c825ae3127eda644c984a85f3c556f

fix

 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">
                    <div v-for="(item, index) in form.otherEmails" :key="item">
                    <el-col :span="6.5">
                        <el-form-item label="邮箱:" prop="email">
                            <el-input v-model="form.email"></el-input>
                            <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="form.region"></el-input>
                        <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>

                </el-row>
                <div class="company" style="margin-top: 6px;">常用收件信息
                    <div 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="收件人姓名:">
                            <el-input v-model="form.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="备注:">
                    </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="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;
    }

 src/store/index.js

@@ -4,7 +4,7 @@

const store = new Vuex.Store({
  state: {
    userInfo: {} || JSON.parse(sessionStorage.getItem('userInfo'))
    userInfo: JSON.parse(localStorage.getItem('userInfo')) || {}
  },
  mutations: {
    SET_USERINFO(state, userInfo) {