hlt_gis_admin/src/layouts/default/header/components/user-dropdown/PersonInfoModal.vue

<template>
    <a-modal :visible="true" :maskClosable="false" centered :destroyOnClose="true" :title="title"
        :wrapClassName="wrapClassName" :width="width" @cancel="onClose" @ok="onSubmit">
        <div class="content">
            <div class="display-info">
                <div class="left-list">
                    <div class="list-item">
                        <div class="item-title">用户名称：</div>
                        <div class="item-text">{{ baseForm.userName }}</div>
                    </div>
                    <div class="list-item">
                        <div class="item-title">登录名称：</div>
                        <div class="item-text">{{ baseForm.loginName }}</div>
                    </div>
                    <div class="list-item">
                        <div class="item-title">手机号码：</div>
                        <div class="item-text">{{ baseForm.mobile }}</div>
                    </div>
                    <div class="list-item">
                        <div class="item-title">用户角色：</div>
                        <div class="item-text">{{ baseForm.roles }}</div>
                    </div>
                </div>
                <div class="right-head">
                    <div class="img-box">
                        <img :src="headerImg" alt="">
                    </div>
                    <div class="label">默认头像</div>
                </div>
            </div>
            <div class="edit-info">
                <div class="title">基本信息修改</div>
                <a-form ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <!-- 名称 -->
                    <a-form-item label="用户名称" name="userName">
                        <a-input v-model:value="form.userName" style="width: 100%" placeholder="请输入" />
                    </a-form-item>
                    <!-- 登录名称 -->
                    <a-form-item label="登录名称" name="loginName">
                        <a-input v-model:value="form.loginName" style="width: 100%" placeholder="请输入" disabled/>
                    </a-form-item>
                    <!-- 职责 -->
                    <a-form-item label="手机号码" name="mobile">
                        <a-input v-model:value="form.mobile" style="width: 100%" placeholder="请输入" />
                    </a-form-item>
                    <!-- 排序 -->
                    <a-form-item label="用户密码" name="pwd">
                        <a-input v-model:value="form.pwd" type="password" style="width: 100%" placeholder="请输入" />
                    </a-form-item>
                </a-form>
            </div>
        </div>
        <template #footer>
            <div class="btns" style="display: flex;justify-content: center;">
                <a-button class="btn" @click="onClose"
                    style="width: 64px;height: 34px;margin-right: 25px;color: #333333;">取消</a-button>
                <a-button class="btn" @click="onSubmit"
                    style="width: 64px;height: 34px;background: #0671DD;color: #ffffff;">确定</a-button>
            </div>
        </template>
    </a-modal>
</template>
<script>
import { defineComponent, reactive, ref, onMounted, watch, toRefs } from 'vue';
import { message } from 'ant-design-vue';
import moment from 'moment';
import { v4 as uuidv4 } from 'uuid';
import { savePosition } from '/@/api/sys/position';
import headerImg from "/@/assets/images/header-icon.png";
// 正则表达式验证
import { ChineseRegexp, EmailRegexp, phoneRegexp } from '/@/utils/rules';
import { getUserInfoByLoginCode, SaveOrUpdateUserInfo } from '/@/api/system/system';
import { getUserIdInfo } from '/@/api/sys/user';
import md5 from 'js-md5';


const props = {
    formData: {
        type: Object,
        default: {}
    }
}
export default defineComponent({
    name: 'modal',
    components: {},
    props,
    setup(props, { emit }) {
        const data = reactive({
            width: '380px',
            wrapClassName: 'modal-wrap',
        })
        const form = reactive({
            userid: "",
            userName: "",
            loginName: "",
            mobile: "",
            userid: '',
            pwd: ""
        });
        const baseForm = reactive({
            userName: "",
            loginName: "",
            mobile: "",
            roles: ""
        })
        const checkMobile = (rule, value, callback) => {
            if (!value) {
                return Promise.reject("请输入手机号")
            } else {
                //如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。
                if (!phoneRegexp.test(value)) {
                    return Promise.reject("手机号格式不正确")
                } else {
                    return Promise.resolve()
                }
            }
        };
        const rules = {
            userName: [{
                required: true,
                message: '请输入姓名',
                trigger: 'blur'
            }],
            loginName: [{
                required: true,
                message: '请输入登录名',
                trigger: 'blur'
            }],
            pwd: [
                // { required: false, message: '未填时使用默认密码' },
                { required: false, pattern: /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[~!#@$%^*&()_+{}\[\]|\\;:'",<.>\/?])[a-zA-Z\d~!#@$%^*&()_+{}\[\]|\\;:'",<.>\/?]{8,30}$/, message: '密码中必须包含大小写字母、数字、特殊字符，至少8个字符，最多30个字符' }
            ],
            mobile: [
                { validator: checkMobile, trigger: "change" },
            ],
        };
        const title = ref('个人信息')
        const formRef = ref()

        onMounted(() => {
            console.log(props.formData);
            //取LOGIN_NAM去查询用户的基础信息
            if (props.formData.LOGIN_NAME) {
                getUserBaseInfo(props.formData.LOGIN_NAME);
                baseForm.roles = props.formData.nameroles;
            }
        })
        const getUserBaseInfo = (loginName) => {
            getUserInfoByLoginCode(loginName).then(res => {
                if (res.user?.userid) {
                    getUserIdInfo(res.user.userid).then(roleRes => {
                        //组合信息传给修改弹窗
                        baseForm.userName = res.user.userName;
                        baseForm.loginName = res.user.loginName;
                        baseForm.mobile = res.user.mobile;
                        form.userid = res.user.userid;
                        form.sex = res.user.sex;
                        form.ssjg = res.department[0]?.departid || '';
                        form.sszw = res.zw[0]?.departid || '';
                        form.ssgw = res.gw[0]?.id || '';
                        form.userjs = roleRes.join(';');
                        form.userName = res.user.userName;
                        form.loginName = res.user.loginName;
                        form.mobile = res.user.mobile;
                        form.pwd = "";
                    })
                } else {
                    message.error('用户信息查询失败')
                }
            })
        }
        // 关闭请求弹窗
        const onClose = () => {
            emit('closeModal')
            resetForm()
        };
        const onSubmit = () => {
            formRef.value.validate().then((e) => {
                // if (e.pwd == "KJSJ@888!") {
                //     e.pwd = "";
                // } else {
                //     e.pwd = md5(e.pwd);
                // }
                e.pwd = e.pwd ? md5(e.pwd) : "";
                e.userid = form.userid;
                e.sex = form.sex;
                e.ssjg = form.ssjg;
                e.sszw = form.sszw;
                e.ssgw = form.ssgw;
                e.userjs = form.userjs;
                console.log("此处调用修改:", e)
                //此处调用修改
                SaveOrUpdateUserInfo(e).then(res => {
                    if (res) {
                        message.success('修改用户信息成功')
                    } else {
                        message.success('修改用户信息失败')
                    }
                    onClose()
                })
            }).catch((error) => {
                console.log('error', error);
            });
        };
        const resetForm = () => {
            formRef.value.resetFields();
        };
        return {
            headerImg,
            form,
            baseForm,
            rules,
            title,
            formRef,
            labelCol: { span: 6 },
            wrapperCol: { span: 16 },
            ...toRefs(data),
            //func
            onClose,
            onSubmit
        };
    },
});
</script>
<style lang="less" scoped>
.modal-wrap {
    .content {
        padding: 0px 20px 0px 20px;
        margin-top: 10px;

        .display-info {
            padding-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #DEDEDE;

            .left-list {
                .list-item {
                    margin: 5px 0;
                    display: flex;
                }
            }

            .right-head {
                margin-right: 33px;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .img-box {
                    width: 64px;
                    height: 64px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .label {
                    margin-top: 20px;
                    width: 64px;
                    text-align: center;
                }
            }
        }

        .edit-info {
            margin-top: 10px;

            .title {
                font-family: Source Han Sans CN;
                font-size: 14px;
                font-weight: 500;
                font-feature-settings: "kern" on;
                color: #333333;
                margin-bottom: 10px;
            }
        }
    }

    ::v-deep .ant-modal-footer {
        .btn {
            width: 64px;
            height: 34px;
            background-color: red;
        }
    }
}
</style>