eta_front/src/views/system_manage/components/addUserDialog.vue

<template>
    <el-dialog :visible.sync="isAddUserDialogShow" :close-on-click-modal="false" :modal-append-to-body='false' class="add-user-dialog-wrap"
        @close="$emit('close')" center width="986px" v-dialogDrag>
        <div slot="title" style="display:flex;alignItems:center;">
            <img :src="userForm.title==$t('SystemManage.DepartManage.user_add_btn')?$icons.add:$icons.edit"
                style="color:#fff;width:16px;height:16px;marginRight:5px;">
            <span style="fontSize:16px;">{{userForm.title}}</span>
        </div>
        <el-form @submit.native.prevent :model="userForm" :rules="userRule" ref="userForm" label-width="160px"
            class="demo-ruleForm" style="marginTop:15px;">
            <el-form-item :label="$t('SystemManage.DepartManage.user_login_accout')" prop="account">
                <el-input v-model="userForm.account" :placeholder="$t('SystemManage.DepartManage.user_add_placeholder01')" :disabled="userForm.disabledForm" clearable>
                </el-input>
            </el-form-item>
            <el-form-item :label="$t('SystemManage.DepartManage.user_login_pwd')" prop="pwd" v-if="userForm.title == $t('SystemManage.DepartManage.user_add_btn')">
                <el-input v-model.trim="userForm.pwd" :placeholder="$t('SystemManage.DepartManage.user_add_placeholder02')" 
                    :type="userForm.title == $t('SystemManage.DepartManage.user_add_btn') ? 'text' : 'password' " clearable></el-input>
            </el-form-item>
            <el-form-item :label="$t('SystemManage.DepartManage.user_table_name')" prop="name">
                <el-input v-model="userForm.name" :placeholder="$t('SystemManage.DepartManage.user_add_placeholder03')"  clearable>
                </el-input>
            </el-form-item>
            <el-form-item :label="$t('SystemManage.DepartManage.user_table_mobile')" prop="mobile" class="mobile-input-item">
                <el-input v-model.trim="userForm.mobile" :placeholder="$t('SystemManage.DepartManage.user_add_placeholder04')" clearable class="mobile-input">
                </el-input>
                <el-select v-model="userForm.areacode" class="mobile-select" placeholder="请选择">
                    <el-option v-for="item in areaCode" :key="item.Value"
                        :label="item.Name" :value="item.Value" />
                </el-select>
            </el-form-item>
            <el-form-item label="用户类型" prop="IsLdap">
                <el-select v-model="userForm.IsLdap" placeholder="请选择用户类型">
                    <el-option label="系统用户" :value="0"></el-option>
                    <el-option label="域用户" :value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('SystemManage.DepartManage.user_depart')" prop="depart" v-if="userForm.title == $t('SystemManage.DepartManage.user_add_btn')">
                <el-cascader :options="departArr" v-model="userForm.depart" :props="form_departProp"
                    :placeholder="$t('SystemManage.DepartManage.user_add_placeholder05')" :disabled="userForm.disabledForm" clearable>
                </el-cascader>
            </el-form-item>
            <el-form-item :label="$t('SystemManage.DepartManage.user_email')" prop="email">
                <el-input v-model="userForm.email" :placeholder="$t('SystemManage.DepartManage.user_add_placeholder06')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('SystemManage.DepartManage.user_table_employee_id')" prop="employeeNumber">
                <el-input :disabled="hasEmployeeNo" v-model="userForm.employeeNumber" :placeholder="$t('SystemManage.DepartManage.user_add_placeholder07')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('SystemManage.DepartManage.user_role')" prop="role">
                <el-select v-model="userForm.role" :placeholder="$t('SystemManage.DepartManage.user_role')" :disabled="userForm.disabledForm" @change="roleChange">
                    <el-option v-for="item in roleArr" :key="item.RoleId" :label="item.RoleName" :value="item.RoleId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('SystemManage.DepartManage.user_table_direct')" prop="direct" v-permission="permissionBtn.sysDepartPermission.sysDepart_saveUser_researchGroup">
                <el-cascader collapse-tags :show-all-levels="false" :options="researchGroup" v-model="userForm.direct"
                    :props="form_directProp" :placeholder="$t('SystemManage.DepartManage.user_add_placeholder08')" clearable></el-cascader>
            </el-form-item>
            <el-form-item :label="$t('SystemManage.DepartManage.user_table_position')" prop="post">
                <el-input v-model="userForm.post" :placeholder="$t('SystemManage.DepartManage.user_add_placeholder09')" clearable>
                </el-input>
            </el-form-item>
            <el-form-item :label="$t('SystemManage.DepartManage.user_table_address')" prop="city"
                :rules="[2,6,18].includes(userForm.role)?{ required: true, message: '工作地点不能为空', trigger: 'change' }:{}">
                    <search-dist-picker 
                        :provinceInfo="userForm.province"
                        :cityInfo="userForm.city"
                        @selected="selectRegion"/>
            </el-form-item>
            <el-form-item :label="$t('SystemManage.DepartManage.user_table_status')" prop="status">
                <el-radio-group v-model="userForm.status" :disabled="userForm.disabledStatus">
                    <el-radio :label="1">{{$t('SystemManage.DepartManage.user_table_status_open')}}</el-radio>
                    <el-radio :label="0">{{$t('SystemManage.DepartManage.user_table_status_ban')}}</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div style="display:flex;justify-content:center;margin:0 0 26px;">
            <el-button type="primary" style="width:80px;marginRight:24px;" @click="$emit('save')">{{$t('Dialog.confirm_save_btn')}}</el-button>
            <el-button style="width:80px;" @click="$emit('close')">{{$t('Dialog.cancel_btn')}}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import searchDistPicker from '@/components/searchDistPicker.vue';
import {patternEmail,isMobileNo,checkPassWord} from '@/utils/commonOptions';
    export default {
        props: {
            isAddUserDialogShow: {
                type: Boolean,
                default: false,
            },
            userForm: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            roleArr:{
                type:Array,
                default:()=>{return []}
            },
            departArr:{
                type:Array,
                default:()=>{return []}
            },
            hasEmployeeNo:{
                type:Boolean,
                default:false
            },
            researchGroup:{
                type:Array,
                default:()=>{return []}
            },
            areaCode:{
                type:Array,
                default:()=>{return []}
            }
        },
        components:{searchDistPicker},
        computed:{
            userRule() {
                return {
                account:[{required: true, message: this.$t('SystemManage.DepartManage.use_add_valid_msg01'), trigger: 'blur'}],
                pwd:[
                    {
                        validator:(rule,value,callback)=>{
                            if(this.userForm.IsLdap==1){
                                callback()
                                return
                            }else{
                                if(value===''){
                                    callback(new Error(this.$t('SystemManage.DepartManage.use_add_valid_msg02')))
                                }
                                if(!checkPassWord(value)){
                                    callback(new Error('密码要求8位及以上，包含数字、大写字母、小写字母、特殊字符中的三个类型'))
                                }else{
                                    callback()
                                }
                            }
                            
                        }
                    }
                ],
                name:[{ required: true, message: this.$t('SystemManage.DepartManage.use_add_valid_msg04'), trigger: 'blur' }],
                    mobile:[{ validator: (rule, value, callback) => {
                        if (value === ''&&!this.userForm.email) {
                            callback(new Error(this.$t('SystemManage.DepartManage.use_add_valid_msg05')));
                        }else if(value&&this.userForm.areacode==='86'&&!isMobileNo(value)) {
                            callback(new Error(this.$t('SystemManage.DepartManage.use_add_valid_msg06')));
                        } else if(this.userForm.areacode!=='86'&&isNaN(value.trim())){
                            callback(new Error(this.$t('SystemManage.DepartManage.use_add_valid_msg06')));
                        }else {
                            callback();
                        }
                    }, trigger: 'blur'}],
                    email:[{ validator: (rule, value, callback) => {
                        if (value === ''&&!this.userForm.mobile) {
                            callback(new Error(this.$t('SystemManage.DepartManage.use_add_valid_msg05')));
                        }else if(value&&!patternEmail.test(value)) {
                            callback(new Error(this.$t('SystemManage.DepartManage.use_add_valid_msg07')));
                        } else {
                            callback();
                        }
                    }, trigger: 'blur'}],
                    depart:[{ required: true, message: this.$t('SystemManage.DepartManage.use_add_valid_msg08'), trigger: 'change' }],
                    // employeeNumber:[{validator:(rule,value,callback)=>{
                    //     if(!value){
                    //         callback()
                    //         return 
                    //     }
                    //     // 取消空格
                    //     let tempValue = parseInt(value.replaceAll(' ',''))
                    //     if(!tempValue || value.replaceAll(' ','').length!=4){
                    //         callback(new Error(this.$t('SystemManage.DepartManage.use_add_valid_msg09')))
                    //     }else{
                    //         callback()
                    //     }
                    // },trigger:'blur'}],
                    role:[{ required: true, message: this.$t('SystemManage.DepartManage.use_add_valid_msg10'), trigger: 'change' }],
                }
                },
        },
        data() {
            return {
                // userRule: {
                //     account:[{required: true, message: '登录账号不能为空', trigger: 'blur'}],
                //     pwd:[{validator:(rule,value,callback)=>{
                //         if(value===''){
                //             callback(new Error('请输入新密码'))
                //         }
                //         if(!checkPassWord(value)){
                //             callback(new Error('密码要求8位及以上，包含数字、大写字母、小写字母、特殊字符中的三个类型'))
                //         }else{
                //             callback()
                //         }
                //     }}],
                //     name:[{ required: true, message: '姓名不能为空', trigger: 'blur' }],
                //     mobile:[{ validator: (rule, value, callback) => {
                //         if (value === ''&&!this.userForm.email) {
                //             callback(new Error('手机号码和邮箱至少填一个'));
                //         }else if(value&&this.userForm.areacode==='86'&&!isMobileNo(value)) {
                //             callback(new Error('请输入正确的手机号格式'));
                //         } else if(this.userForm.areacode!=='86'&&isNaN(value.trim())){
                //             callback(new Error('请输入正确的手机号格式'));
                //         }else {
                //             callback();
                //         }
                //     }, trigger: 'blur'}],
                //     email:[{ validator: (rule, value, callback) => {
                //         if (value === ''&&!this.userForm.mobile) {
                //             callback(new Error('手机号码和邮箱至少填一个'));
                //         }else if(value&&!patternEmail.test(value)) {
                //             callback(new Error('请输入正确的邮箱格式'));
                //         } else {
                //             callback();
                //         }
                //     }, trigger: 'blur'}],
                //     depart:[{ required: true, message: '部门分组不能为空', trigger: 'change' }],
                //     employeeNumber:[{validator:(rule,value,callback)=>{
                //         if(!value){
                //             callback()
                //             return 
                //         }
                //         // 取消空格
                //         let tempValue = parseInt(value.replaceAll(' ',''))
                //         if(!tempValue || value.replaceAll(' ','').length!=4){
                //             callback(new Error('请输入四位数字'))
                //         }else{
                //             callback()
                //         }
                //     },trigger:'blur'}],
                //     role:[{ required: true, message: '角色不能为空', trigger: 'change' }],
                // },
                form_departProp:{
                    value:'DepartmentId',
                    label:'DepartmentName',
                    children:'Child',
                    checkStrictly:true
                },//部门分组选择配置
                form_directProp: {
                    value:'tag_id',
                    label:'tag_name',
                    children:'tags',
                    multiple: true
                }, //研究方向选择配置
            };
        },
        methods: {
            selectRegion(data){
                this.$emit('selectRegion',data)
            },
            roleChange(value){
                if([2,6,18].includes(value)) return 
                this.$refs.userForm && this.$refs.userForm.clearValidate(['city'])
            },
        },
    };
</script>

<style lang="scss">
.add-user-dialog-wrap{
    .select-dist-picker{
        .el-select{
            width:145px;
        }
    }
    .mobile-input-item{
        position:relative;
        .mobile-select{
            position:absolute;
            top:0;
            left:0;
            width:115px !important;
        }
        .mobile-input{
            .el-input__inner{
                padding-left: 125px !important;
            }
        }
    }
}
</style>
<style scoped lang="scss">
.add-user-dialog-wrap{
    .demo-ruleForm{
        display: flex;
        flex-wrap: wrap;
        gap:0 10px;
        .el-form-item{
            .el-input,.el-cascader,.el-select{
                width:300px;
            }
        }
    }
}
</style>