fix

pyt

2025-01-15 b4f3c4428801349aa2040ea77f9cffb725367a5a

fix

 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>


 src/utils/request.js

@@ -1,100 +1,102 @@
import axios from 'axios'
import CryptoJS from 'crypto-js';
import apiConfig from '@/config/baseurl'
import store from '@/store'

import {
  Message
} from 'element-ui'


const service = axios.create({
  baseURL: apiConfig.baseURL,
  withCredentials: false, // 当跨域请求时发送cookie
  timeout: 30000, // request timeout
})

// 请求拦截
service.interceptors.request.use(
  config => {
    const env = process.env.NODE_ENV; //development  production
    let { url } = config;
    if (env === 'production') {
      url = url.replace(/.$/, '0');
      config.url = url;
    } else {
      url = url.replace(/.$/, '1');
      config.url = url;
    }

    const nowTime = Date.now()
    const sign = CryptoJS.HmacSHA1(nowTime, apiConfig.secretKEY).toString(CryptoJS.enc.Base64)

    config['headers']['timestamp'] = nowTime
    config['headers']['sign'] = sign
    if (config.method == 'get') {
      if (!config.params) config.params = {};
      config.params = {
        ...config.params,
      }
    }
    if (config.method == 'post') {
      if (!config.data) config.data = {};
      config.data = {
        ...config.data,
      }
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截
service.interceptors.response.use(
  response => {
    if (!response) {
      return
    }
    const res = response;
    if (res.data.status == 0) {
      if (res.data.data.result && res.data.data.result == -1) {
        Message({
          message: res.data.data.msg || '服务器错误',
          type: 'error',
          duration: 2000
        })
        return Promise.reject(res.data)
      }
      if (!res.data.data) {
        return Promise.resolve({})
      }
      return Promise.resolve(res.data)
    }
    // else {
    //   if (res.data.status == 103 || res.data.status == 401) {
    //     Message({
    //       message: res.data.data.msg || '登录已过期，请重新登录',
    //       type: 'warning',
    //       duration: 2000
    //     })
    //     store.commit('SET_USERINFO', {})
    //     store.commit('SET_USERNAME', '')
    //     localStorage.clear()
    //     window.location.replace('/');
    //     return Promise.reject(res.data)
    //   }
    //   Message({
    //     message: res.data.data.msg || '服务器错误',
    //     type: 'error',
    //     duration: 2000
    //   })
    //   return Promise.reject(res.data)
    // }
  },
  error => {
    return Promise.reject(error.message)
  }
)
export default service
import axios from 'axios'

import CryptoJS from 'crypto-js';

import apiConfig from '@/config/baseurl'

import store from '@/store'



import {

  Message

} from 'element-ui'





const service = axios.create({

  baseURL: apiConfig.baseURL,

  withCredentials: false, // 当跨域请求时发送cookie

  timeout: 30000, // request timeout

})



// 请求拦截

service.interceptors.request.use(

  config => {

    const env = process.env.NODE_ENV; //development  production

    let { url } = config;

    if (env === 'production') {

      url = url.replace(/.$/, '0');

      config.url = url;

    } else {

      url = url.replace(/.$/, '1');

      config.url = url;

    }



    const nowTime = Date.now()

    const sign = CryptoJS.HmacSHA1(nowTime, apiConfig.secretKEY).toString(CryptoJS.enc.Base64)



    config['headers']['timestamp'] = nowTime

    config['headers']['sign'] = sign

    if (config.method == 'get') {

      if (!config.params) config.params = {};

      config.params = {

        ...config.params,

      }

    }

    if (config.method == 'post') {

      if (!config.data) config.data = {};

      config.data = {

        ...config.data,

      }

    }

    return config

  },

  error => {

    return Promise.reject(error)

  }

)



// 响应拦截

service.interceptors.response.use(

  response => {

    if (!response) {

      return

    }

    const res = response;

    if (res.data.status == 0) {

      console.log(res, 'res');

      
      if (res.data.data && res.data.data.result && res.data.data.result == -1) {

        Message({

          message: res.data.data.msg || '服务器错误',

          type: 'error',

          duration: 2000

        })

        return Promise.reject(res.data)

      }

      if (!res.data.data) {

        return Promise.resolve({})

      }

      return Promise.resolve(res.data)

    }

    // else {

    //   if (res.data.status == 103 || res.data.status == 401) {

    //     Message({

    //       message: res.data.data.msg || '登录已过期，请重新登录',

    //       type: 'warning',

    //       duration: 2000

    //     })

    //     store.commit('SET_USERINFO', {})

    //     store.commit('SET_USERNAME', '')

    //     localStorage.clear()

    //     window.location.replace('/');

    //     return Promise.reject(res.data)

    //   }

    //   Message({

    //     message: res.data.data.msg || '服务器错误',

    //     type: 'error',

    //     duration: 2000

    //   })

    //   return Promise.reject(res.data)

    // }

  },

  error => {

    return Promise.reject(error.message)

  }

)

export default service