<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">个人信息 | Personal Information</div>
|
<div class="company">
|
<div class="company-info">
|
<div class="company-cn">所属公司{{ userInfo.companyName }}</div>
|
<div class="company-en">Company</div>
|
</div>
|
</div>
|
<el-row :gutter="90" class="companyForm">
|
<el-col :span="6.5">
|
<el-form-item label="姓名:" prop="userName">
|
<template #label>
|
<div class="form-label">
|
<div>姓名</div>
|
<div class="label-en">Name</div>
|
</div>
|
</template>
|
<el-input v-model="form.userName" placeholder="请输入"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6.5">
|
<el-form-item prop="phone">
|
<template #label>
|
<div class="form-label">
|
<div>手机号</div>
|
<div class="label-en">Mobile Phone</div>
|
</div>
|
</template>
|
<el-input v-model="form.phone"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6.5">
|
<el-form-item prop="userEmail">
|
<template #label>
|
<div class="form-label">
|
<div>邮箱</div>
|
<div class="label-en">Email</div>
|
</div>
|
</template>
|
<el-input v-model="form.userEmail"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<div class="company" style="margin-top: 6px;">
|
<div class="company-info">
|
<div class="company-cn">其他邮箱</div>
|
<div class="company-en">Other email(s)</div>
|
</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 :prop="'otherEmails.' + index + '.mail'">
|
<template #label>
|
<div class="form-label">
|
<div>邮箱</div>
|
<div class="label-en">Email</div>
|
</div>
|
</template>
|
<el-input v-model="item.mail"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="16">
|
<el-form-item label="备注:" label-width="120px">
|
<template #label>
|
<div class="form-label">
|
<div>备注</div>
|
<div class="label-en">Remarks</div>
|
</div>
|
</template>
|
<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="company-info">
|
<div class="company-cn">常用收件信息</div>
|
<div class="company-en">Frequently Used Consignee Information</div>
|
</div>
|
<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'">
|
<template #label>
|
<div class="form-label">
|
<div>收件人姓名</div>
|
<div class="label-en">Name</div>
|
</div>
|
</template>
|
<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'">
|
<template #label>
|
<div class="form-label">
|
<div>收件人手机号</div>
|
<div class="label-en">Mobile Phone</div>
|
</div>
|
</template>
|
<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'">
|
<template #label>
|
<div class="form-label">
|
<div>收件人邮箱</div>
|
<div class="label-en">Email</div>
|
</div>
|
</template>
|
<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'">
|
<template #label>
|
<div class="form-label">
|
<div>收件人地址</div>
|
<div class="label-en">Consignee's Address</div>
|
</div>
|
</template>
|
<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="备注:">
|
<template #label>
|
<div class="form-label">
|
<div>备注</div>
|
<div class="label-en">Remarks</div>
|
</div>
|
</template>
|
<div style="display: flex;align-items: center;"><el-input type="textarea" :rows="3"
|
v-model="item.Remarks"></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')">关闭 | Close</el-button>
|
<el-button type="primary" @click="submit">保存 | Save</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.Remarks = 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;
|
|
.company-info {
|
line-height: 12px;
|
|
.company-cn {
|
color: #3B3F56;
|
}
|
|
.company-en {
|
font-size: 12px;
|
color: #999;
|
margin-top: 4px;
|
}
|
}
|
|
.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;
|
display: flex;
|
}
|
|
.form-label {
|
white-space: normal;
|
line-height: 1.2; // 从1.2调整到1
|
display: flex;
|
flex-direction: column;
|
|
.label-en {
|
font-size: 12px;
|
color: #999;
|
}
|
}
|
}
|
</style>
|
