simulation-front/src/views/personalInformation/personalInformation.vue

<!-- 个人信息 -->
<template>
    <div>
        <div class="block">
            <div class="titlePanel">
                <div class="titlePanelBor">个人信息</div>
            </div>
            <div class="flexBox">
                <div class="flexItem"><span class="label">用户名：</span>{{userInfo.username}}</div>
                <div class="flexItem"><span class="label">账户类型：</span>{{roleType}}</div>
                <div class="flexItem"><span class="label">独占类型：</span>{{userInfo.useTypeName}}</div>
                <div class="flexItem"><span class="label">所属公司：</span>{{userInfo.company}}</div>
                <div class="flexItem"><span class="label">联系人：</span>{{userInfo.nickname}}</div>
                <div class="flexItem"><span class="label">联系方式：</span>{{userInfo.phone}}<span class="textButton" @click="changePhone">修改联系方式</span></div>
                <div class="flexItem"><span class="label">密码：</span>{{"***********"}}<span class="textButton" @click="changePassword">修改密码</span></div>
            </div>
        </div>
        <div class="block">
            <div class="titlePanel">
                <div class="titlePanelBor">配置信息</div>
            </div>
            <div class="flexBox">
                <div class="flexItem"><span class="label2">可创建子账户数量：</span>{{configInfo.numCreateUser}}</div>
                <div class="flexItem"><span class="label2">可创建测试包数量：</span>{{configInfo.numCreateScenePackage}}</div>
                <div class="flexItem"><span class="label2">测试包最大场景数量：</span>{{configInfo.numScenePerPackage}}</div>
                <div class="flexItem"></div>
                <div class="flexItem"><span class="label2">仿真软件license：</span>{{clusterInfo.numSimulationLicense}}</div>
                <div class="flexItem"><span class="label2">到期时间：</span>{{clusterInfo.dateSimulationLicense}}</div>
                <div class="flexItem"><span class="label2">动力学软件license：</span>{{clusterInfo.numDynamicLicense}}</div>
                <div class="flexItem"><span class="label2">到期时间：</span>{{clusterInfo.dateDynamicLicense}}</div>
            </div>
        </div>
        <div class="block">
            <div class="titlePanel">
                <div class="titlePanelBor">场景资源</div>
                <tableList
                    ref="table"
                    style="min-width: 900px;margin: auto;"
                    :columns="columns"
                    :getDataWay="getDataWay"
                    index
                >   
                </tableList>
            </div>
        </div>

        <el-dialog
            title="修改联系方式"
            :visible.sync="phoneDialogVisible"
            width="690px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <el-form
                ref="phoneForm"
                :model="phoneForm"
                :rules="phoneRules"
                label-width="108px"
            >
                <el-form-item label="联系人:" prop="nickname">
                    <el-input
                        v-autoTrim="{
                            obj: phoneForm,
                            key: 'nickname',
                        }"
                        v-model="phoneForm.nickname"
                        placeholder="请输入"
                        maxlength="20"
                    ></el-input>
                </el-form-item>
                <el-form-item label="联系方式:" prop="phone">
                    <el-input
                        v-autoTrim="{
                            obj: phoneForm,
                            key: 'phone',
                        }"
                        v-model="phoneForm.phone"
                        placeholder="请输入"
                        maxlength="20"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button type="primary" @click="confirmChangePhone">确 定</el-button>
                <el-button @click="phoneDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>

        <el-dialog
            title="修改密码"
            :visible.sync="passwordDialogVisible"
            width="690px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <el-form
                ref="passwordForm"
                :model="passwordForm"
                :rules="passwordRules"
                label-width="108px"
            >
                <el-form-item label="原密码:" prop="oldPassword">
                    <el-input
                        type="password"
                        v-model="passwordForm.oldPassword"
                        placeholder="请输入"
                        maxlength="20"
                    ></el-input>
                </el-form-item>
                <el-form-item label="新密码:" prop="newPassword">
                    <el-input
                        type="password"
                        v-model="passwordForm.newPassword"
                        placeholder="请输入"
                        maxlength="20"
                    ></el-input>
                </el-form-item>
                <el-form-item label="确认密码:" prop="confirmPassword">
                    <el-input
                        type="password"
                        v-model="passwordForm.confirmPassword"
                        placeholder="请输入"
                        maxlength="20"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button type="primary" @click="confirmChangePassword">确 定</el-button>
                <el-button @click="passwordDialogVisible = false ">取 消</el-button>
            </span>
        </el-dialog>
    </div> 
</template>

<script>
    import tableList from "@/components/grid/TableList";

    export default {
        components: {tableList},
        data(){
            return {
                userInfo: {
                    id: "",
                    username: "",
                    nickname: "",
                    password: "",
                    phone: "",
                    photo: "",
                    company: "",
                    roleCode: "",
                    useType: "",
                    visible: "",
                    createTime: "",
                    createUserName: "",
                },
                configInfo: {
                    numCreateScenePackage: "",
                    numCreateUser: "",
                    numScenePerPackage: "",
                },
                clusterInfo: {
                    numSimulationLicense: '',
                    dateSimulationLicense: '',
                    numDynamicLicense: '',
                    dateDynamicLicense: ''
                },
                roleCodeList:[],
                getDataWay: {
                    dataType: "url",
                    type: "post",
                    data: this.$api.userInfo.getSceneResource,
                    param: {
                        //userId: this.$route.query.userId
                    },
                },
                columns: [
                    {
                        label: "场景包名称",
                        prop: "packageName",
                    },
                    {
                        label: "自然驾驶仿真场景",
                        prop: "zrCount",
                    },
                    {
                        label: "交通事故仿真场景",
                        prop: "jtCount",
                    },
                    {
                        label: "标准法规仿真场景",
                        prop: "bzCount",
                    },
                    {
                        label: "泛化场景",
                        prop: "fhCount"
                    },
                    {
                        label: "合计",
                        prop: "totalCount"
                    }
                ],
                phoneDialogVisible: false,
                passwordDialogVisible: false,
                phoneForm: {
                    nickname: '',
                    phone: ''
                },
                phoneRules: {
                    nickname: [
                         { required: true, message: "请输入", trigger: "blur" },
                    ],
                    phone: [
                         { required: true, message: "请输入", trigger: "blur" },
                         {
                            validator: (rule, value, callback) => {
                                if(this.$validatePhone(value)){
                                    callback()
                                }else{
                                    callback(new Error('格式错误'))
                                }
                            },
                            trigger: "blur"
                        }
                    ]
                },
                passwordForm: {
                    oldPassword: '',
                    newPassword: '',
                    confirmPassword: '',
                },
                passwordRules: {
                    oldPassword: [{ required: true, message: "请输入", trigger: "blur" },],
                    newPassword: [{ required: true, message: "请输入", trigger: "blur" },],
                    confirmPassword: [{ required: true, message: "请输入", trigger: "blur" },]
                }
            }
        },
        async mounted(){
            await this.$dicsListsInit({
                roleCodeList: "roleCode"
            });
            this.getUserInfo()
            this.getParameter()
            this.getCluster()
        },
        computed: {
            roleType(){
                let label = ''
                this.roleCodeList.map(item => {
                    if(item.code == this.userInfo.roleCode){
                        label = item.caption
                    }
                })
                return label
            }
        },
        methods: {
            getUserInfo(){
                this.$axios({
                    method: "POST",
                    url: this.$api.userInfo.getCurrentUserInfo,
                    data: {}
                }).then(res => {
                    if (res.code == 200 && res.info) {
                        this.userInfo = res.info
                    }else{
                        this.$message.error(res.message || '获取用户信息失败')
                    }
                })
            },
            getParameter(){
                this.$axios({
                    method: "POST",
                    url: this.$api.userInfo.getParameterByUserId,
                    data: {}
                }).then(res => {
                    if (res.code == 200) {
                        if(res.info){
                            this.configInfo = res.info
                        }
                    }else{
                        this.$message.error(res.message || '获取配置信息失败')
                    }
                })
            },
            getCluster(){
                this.$axios({
                    method: "POST",
                    url: this.$api.userInfo.getClusterByUserId,
                    data: {}
                }).then(res => {
                    if (res.code == 200) {
                        if(res.info){
                            this.clusterInfo = res.info
                        }
                    }else{
                        this.$message.error(res.message || '获取配置信息失败')
                    }
                })
            },
            changePhone(){
                this.phoneForm = {
                    nickname: this.userInfo.nickname,
                    phone: this.userInfo.phone
                }
                this.phoneDialogVisible = true
            },
            changePassword(){
                this.passwordForm = {
                    oldPassword: '',
                    newPassword: '',
                    confirmPassword: ''
                }
                this.passwordDialogVisible = true
            },
            confirmChangePhone(){
                this.$refs.phoneForm.validate(valid => {
                    if(valid){
                        this.$axios({
                            method: 'POST',
                            url: this.$api.userInfo.savePhone,
                            data: {
                                id: this.userInfo.id,
                                nickname: this.phoneForm.nickname,
                                phone: this.phoneForm.phone
                            }
                        }).then(res => {
                            if (res.code == 200) {
                                this.$message.success('修改联系方式成功')
                                this.getUserInfo()
                                this.phoneDialogVisible = false
                            }else{
                                this.$message.error(res.message || '修改联系方式失败')
                            }
                        })
                    }
                })
                
            },
            confirmChangePassword(){
                if(this.passwordForm.newPassword !== this.passwordForm.confirmPassword){
                    this.$message.warning('新密码与确认密码必须保持一致')
                    return
                }
                if(this.passwordForm.newPassword == this.passwordForm.oldPassword){
                    this.$message.warning('新密码不能与旧密码相同')
                    return
                }
                this.$refs.passwordForm.validate(valid => {
                    if(valid){
                        this.$axios({
                            method: 'POST',
                            url: this.$api.userInfo.savePassword,
                            data: {
                                id: this.userInfo.id,
                                password: this.passwordForm.oldPassword,
                                newPassword: this.passwordForm.newPassword
                            }
                        }).then(res => {
                            if (res.code == 200) {
                                this.$message.success('修改密码成功')
                                this.getUserInfo()
                                this.passwordDialogVisible = false
                            }else{
                                this.$message.error(res.message || '修改密码失败')
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less"> 
.block{
    width: 88%;
    margin: 24px auto 0;
}
.titlePanel {
    padding: 22px 0;
}
.flexItem{
    width: 40%;
    margin-bottom: 10px;
    .label{
        display: inline-block;
        width: 140px;
        text-align: right;
    }
    .label2{
        display: inline-block;
        width: 140px;
        text-align: right;
    }
}
.textButton{
    padding-left: 5px;
    color: @themeColor;
    cursor: pointer;
}
</style>