Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/americanCont...

gongjinbao

2025-01-08 497583fe37d894095ea03b2ee87d43468b8eed6c

 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">
                    <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">
                <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) {
        'show': {
            handler(val) {
            if (val) {
                console.log(this.$store.state.userInfo, '111');
                    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;
    }