userControlInfo.vue 10.2 KB
<template>
    <div>
        <el-dialog :visible.sync="visible" class="dialog-scene dialog-height625" :close-on-click-modal="false" @close="$emit('update:show', false)">
             <div class="message-box">
                <div class="message-box-header">
                    <div class="message-box-title">
                        <span>{{row.userName}}</span>
                    </div>
                    <i class="icon icon-close" @click="handleClose"></i>
                </div>
                 <div class="message-box-content">
                    <p class="requiredtype">带“<span>*</span>”为必填项</p>
                    <el-form ref="form" :model="form" label-width="150px" :rules="formRules">
                        <el-form-item label="用户名" prop='accName'>
                            <el-input v-model="form.accName" :disabled="accName"></el-input>
                        </el-form-item>
                        <el-form-item v-show="!accName" label="密码" prop='password'>
                            <el-input v-model="form.password" type='password' :disabled="accName"></el-input>
                        </el-form-item>
                        <el-form-item label="AD账号" prop='userID'>
                            <el-input v-model="form.userID"  :disabled="accName"></el-input>
                        </el-form-item>
                        <el-form-item label="用户类型" prop='accType'>
                            <el-radio-group v-model="form.accType">
                                <el-radio label="1">超级管理员</el-radio>
                                <el-radio label="2">企业管理员</el-radio>
                                <el-radio label="3">普通用户</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="姓名" prop='userName'>
                            <el-input v-model="form.userName" :disabled="accName"></el-input>
                        </el-form-item>
                        <el-form-item label="企业" prop='accAttr'>
                            <!-- <el-select v-model="form.etpName" :disabled="accName" placeholder="请选择活动区域"> -->
                                <!-- <el-option label="陕西石油" value="201704200000028"></el-option>
                                <el-option label="天津石油" value="201804180000001"></el-option> -->
                                <!-- <el-option label="陕西石油" value="陕西石油"></el-option>
                                <el-option label="天津石油" value="天津石油"></el-option> -->
                            <!-- </el-select> -->
                            <el-select v-model="form.accAttr" :disabled="accName" placeholder="请选择活动区域" @change="etpNameFun($event)">
                                <el-option
                                v-for="(item,index) in options"
                                :key="index"
                                :label="item.etpName"
                                :value="item.etpCode">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="部门" prop='userDP'>
                            <el-input v-model="form.userDP" :disabled="accName"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" prop='userMail'>
                            <el-input v-model="form.userMail" :disabled="accName"></el-input>
                        </el-form-item>
                        <el-form-item label="手机" prop='userPhone'>
                            <el-input v-model="form.userPhone" :disabled="accName"></el-input>
                        </el-form-item>
                        <el-form-item label="电话" prop='userTel'>
                            <el-input v-model="form.userTel" :disabled="accName"></el-input>
                        </el-form-item>
                    </el-form>

                 </div>
                <div class="message-box-footer" slot="footer">
                    <div class="message-box-btn btn-group">
                        <button class="vpnButton primary" @click="handleSure">确定</button>
                        <button class="vpnButton cancel" @click="handleClose">取消</button>
                    </div>
                </div>
             </div>
        </el-dialog>
    </div>
</template>
<script>
    import userControlService from '../../services/userControl.service'
    import ValidatorEvent from '../../utils/validator'
    let userControlServiceHttps = new userControlService()
    export default {
        name: "deviceInfo",
        data() {
            return {
                visible: this.show,
                accName:'',
                acctypes:'',
                options:[],
                row:{
                    userName:''
                },
                form:{
                    accName:'',
                    userID:'',
                    accType:'',
                    accAttr:'',
                    userName:'',
                    etpName:'',
                    userDP:'',
                    userMail:'',
                    userPhone:'',
                    userTel:'',
                },
                formRules:{
                    accName:[{required: true, message: '请输入用户名', trigger: 'blur' },
                    {validator:ValidatorEvent.vChinaUserName,}],
                    password:[{required: true, message: '请输入密码', trigger: 'blur' },
                    {validator:ValidatorEvent.vUserName,message: '请输入正确的密码(英文数字下划线)',}],
                    userID:[{required: true, message: '请输入AD账号', trigger: 'blur' },
                    {validator:ValidatorEvent.vUserName,}],
                    accType:[{required: true, message: '请选择用户类型', trigger: 'change' }],
                    userName:[{required: true, message: '请输入姓名', trigger: 'blur' },
                    {validator:ValidatorEvent.vChinaUserName,}],
                    accAttr:[{required: true, message: '请输入企业', trigger: 'change' }],
                    userDP:[{required: true, message: '请输入部门', trigger: 'blur' },
                    {validator:ValidatorEvent.vChinaUserName,}],
                    userMail:[{required: true, message: '请输入邮箱', trigger: 'blur' },
                    {validator:ValidatorEvent.vEmail,}],
                    userPhone:[{required: true, message: '请输入手机号', trigger: 'blur' },
                    {validator:ValidatorEvent.vMobile,}],
                    userTel:[{required: true, message: '请输入电话', trigger: 'blur' },
                    {validator:ValidatorEvent.vTel,}],

                }
            }
        },
        props: {
            show: {
                type: Boolean,
                default: false
            }
        },
        mounted(){

        },
        methods:{
            handleClose(){
                this.$emit('update:show', false)
                this.$refs['form'].resetFields();
            },
            init(name,type){
                type==1?this.row.userName=name.accName:type==2?this.row.userName='查看':this.row.userName='新增';
                let data={}
                userControlServiceHttps.getbusinesslist(data).then((res)=>{
                    if(res.code===0){
                        console.log(res)
                        this.options = res.data.list;
                    }else {
                        _toast(res.msg)
                    }
                }).catch((err=>{
                    console.log(err)
                }))
                this.accName = false;
                if(name){
                    this.accName = true;
                    let requestObj={}
                    requestObj.accName=name
                    userControlServiceHttps.getuserinfo(requestObj).then((res)=>{
                        if(res.code===0){
                            // console.log(res)
                            this.acctypes = res.data[0].accType
                            for(let key in this.form){
                                this.form[key] = res.data[0][key]
                            }
                            // _toast(res.msg)
                        }else {
                            _toast(res.msg)
                        }
                    }).catch((err=>{
                        console.log(err)
                    }))

                }

            },
            handleSure(){
                var type=''
                if(this.accName){
                    type='update'
                    if(this.form.accType == this.acctypes){
                        this.handleClose()
                    }else{
                        this.upsaveFun(type)
                    }
                }else{
                    type='save'
                    this.$refs['form'].validate((valid) => {
                        if (valid) {
                            this.upsaveFun(type)
                        }
                    })
                }
            },
            upsaveFun(type){
                let requestObj={}
                requestObj=this.form;
                userControlServiceHttps.getusersave(type,requestObj).then((res)=>{
                    if(res.code===0){
                        this.handleClose()
                        this.$emit('call-back')
                        _toast(res.msg)
                    }else {
                        _toast(res.msg)
                    }
                }).catch((err=>{
                    console.log(err)
                }))

            },
            etpNameFun(val){
                this.options.find((item)=>{
                    if(item.etpCode == val){
                        this.form.etpName = item.etpName
                    }
              });
            }

        },
        watch: {
            show () {
                this.visible = this.show;
            }
        },
    }
</script>

<style style  lang="scss" scoped>
.dialog-scene{
    .message-box-content{
        height: calc(100% - 90px) !important;

    }

    .el-input {
        width: 100%;
        border: none !important;
        border: 1px solid #d2d2d2;
    }
}

</style>