<template> <div> <el-row :gutter="20"> <el-col :span="24"> <el-card shadow="hover" class="mgb20"> <div class="flex-between"> <div class="per_title" @click="goback()"> <i class="el-icon-arrow-left"></i> <span class="per_back">返回</span> <span class="per_school">查看用户信息</span> </div> </div> </el-card> <!-- 用户信息 --> <el-card shadow="hover" class="mgb20"> <div> <div class="flex-between mgb20 user_header"> <div class="flex-center mgb20 user_header"> <p class="addhr_tag"></p> <span>用户信息</span> </div> </div> <div> <div> <p class="font_same">个人信息</p> <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="isDetail" > <el-col :span="6" :offset="5"> <el-form-item prop="userName" label="用户姓名"> <el-input v-model="form.userName" placeholder="请输入"></el-input> </el-form-item> <el-form-item label="证件类型" prop="documentType"> <el-select v-model="form.documentType" clearable placeholder="请选择证件类型" > <el-option v-for="(item,index) in documentTypeList" :key="index" :label="item.name" :value="item.value" ></el-option> </el-select> </el-form-item> <el-form-item label="国家"> <el-select v-model="form.countries" clearable placeholder="请选择国家" > <el-option v-for="(item,index) in countryList" :key="index" :label="item.name" :value="item.value" ></el-option> </el-select> </el-form-item> <el-form-item label="城市"> <el-select v-model="form.cityId" clearable placeholder="请选择城市" :disabled="form.provinceId ? false : true" > <el-option v-for="(item,index) in cityList" :key="index" :label="item.cityName" :value="item.cityId" ></el-option> </el-select> </el-form-item> <el-form-item label="教育程度"> <el-select v-model="form.educationDegree" clearable placeholder="请选择教育程度" > <el-option v-for="(item,index) in educationDegreeList" :key="index" :label="item.name" :value="item.value" ></el-option> </el-select> </el-form-item> <el-form-item prop="schoolId" label="当前院校"> <el-select v-model="form.schoolId" filterable clearable placeholder="请选择学校"> <el-option v-for="(item,index) in schoolList" :key="index" :label="item.schoolName" :value="item.schoolId"></el-option> </el-select> </el-form-item> </el-col> <el-col :span="6" :offset="2"> <el-form-item label="唯一识别码"> <el-input v-model="form.uniqueIdentification" placeholder="请输入" :disabled="true" ></el-input> </el-form-item> <el-form-item prop="IDNumber" label="证件号码"> <el-input v-model="form.IDNumber" placeholder="请输入证件号码" maxlength="18" ></el-input> </el-form-item> <el-form-item label="省份"> <el-select v-model="form.provinceId" clearable placeholder="请选择省份" @change="getCity" > <el-option v-for="(item,index) in provinceList" :key="index" :label="item.provinceName" :value="item.provinceId" ></el-option> </el-select> </el-form-item> <el-form-item label="出生日期"> <el-date-picker type="date" placeholder="选择出生日期" v-model="form.dateBirth" style="width: 100%;" value-format="yyyy-MM-dd" ></el-date-picker> </el-form-item> <el-form-item label="性别"> <el-select clearable v-model="form.sex" :disabled="IDdisabled" placeholder="请选择性别" > <el-option v-for="(item,index) in sexList" :key="index" :label="item.name" :value="item.value" ></el-option> </el-select> </el-form-item> </el-col> </el-form> </div> <div class="mgb20_top"> <p class="font_same">账号信息</p> <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="isDetail" > <el-col :span="24"> <el-col :span="6" :offset="5"> <el-form-item prop="phone" label="个人手机"> <el-input v-model="form.phone" placeholder="请输入手机号" maxlength="11" ></el-input> </el-form-item> </el-col> <el-col :span="6" :offset="2"> <el-form-item label="微信号"> <el-input v-model="form.WeChatID" placeholder="请输入微信号"></el-input> </el-form-item> </el-col> </el-col> </el-form> </div> </div> </div> </el-card> <!-- 个人档案 --> <el-card shadow="hover" class="mgb20"> <div> <div class="flex-between mgb20 user_header"> <div class="flex-center"> <p class="addhr_tag"></p> <span>个人档案</span> </div> </div> <div> <div class="flex-center" v-for="(item,index) in archivesList" :key="index"> <el-col :span="16" :offset="4"> <el-card shadow="hover" class="from_card"> <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="isDetail"> <div> <el-col :span="10"> <el-form-item label="职业"> <el-select v-model="item.personalCareerId" placeholder="请选择职业" > <el-option v-for="item1 in occupationList" :key="item1.value" :label="item1.label" :value="item1.value" ></el-option> </el-select> </el-form-item> <el-form-item label="院校"> <el-select v-model="item.schoolId" filterable clearable placeholder="请选择院校" @change="schoolitemChange"> <el-option v-for="(item,index) in schoolList" :key="index" :label="item.schoolName" :value="item.schoolId"></el-option> </el-select> </el-form-item> <el-form-item label="专业类"> <el-select v-model="item.professionalClassId" :disabled="item.disciplineId ? false : true" clearable placeholder="请选择专业类" @change="id => getItemProfessional(id,index)" @clear="() => clearItemProfess(index)" > <el-option v-for="(item2,index) in item.ProfessionalClassList" :key="index" :label="item2.professionalClassName" :value="item2.professionalClassId" ></el-option> </el-select> </el-form-item> </el-col> </div> <div> <el-col :span="10" :offset="3"> <el-form-item> <br /> </el-form-item> <el-form-item label="专业学科"> <el-select v-model="item.disciplineId" clearable placeholder="请选择专业学科" @change="id => getItemProfessionalClass(id,index)" @clear="() => clearItemClass(index)" > <el-option v-for="(item3,index) in item.subjectList" :key="index" :label="item3.disciplineName" :value="item3.disciplineId" ></el-option> </el-select> </el-form-item> <el-form-item label="专业"> <el-select v-model="item.professionalId" :disabled="item.professionalClassId ? false : true" clearable placeholder="请选择专业" @change="getItemStuGrade" > <el-option v-for="(item4,index) in item.ProfessionalList" :key="index" :label="item4.professionalName" :value="item4.professionalId" ></el-option> </el-select> </el-form-item> </el-col> </div> </el-form> </el-card> </el-col> </div> </div> </div> </el-card> <!-- 已绑定系统 --> <el-card shadow="hover" class="mgb20"> <div class="flex-between mgb20"> <div class="flex-center"> <p class="addhr_tag"></p> <span>已绑定系统</span> </div> <div> <el-dialog title="查看系统" :visible.sync="dialogFormVisible" :center="!isIE()" :close-on-click-modal="false"> <el-form :class="{region: !isIE()}" ref="chooseList" :rules="rules" :disabled="isDetail"> <el-form-item label="系统选择" label-width="100px"> <el-select v-model="region" placeholder="请选择系统" > <el-option v-for="(item,index) in regionOption" :key="index" :label="item.regionName" :value="item.regionId" ></el-option> </el-select> </el-form-item> </el-form> <div style="margin-bottom: 20px;"> <span class="radio">组织关系</span> <el-radio v-model="radio" label="1">绑定组织关系</el-radio> <el-radio v-model="radio" label="2" disabled>不绑定组织关系</el-radio> </div> <div> <el-card shadow="hover" v-for="(item,index) in chooseList" :key="index" class="school-item"> <p class="school-name">{{index}}</p> <div class="card" :class="{isie: isIE()}"> <div class="port" v-for="(item1,index1) in item" :key="index1"> <p class="port-name">{{typeList.find(n => n.id == item1.type).label}}</p> <el-card shadow="hover"> <ul class="fields"> <div class="line"> <li> <span class="name">工号:</span> <p class="val">{{item1.workNumber}}</p> </li> <li> <span class="name">账号:</span> <p class="val">{{item1.account}}</p> </li> <li> <el-switch v-model="item1.disableAccount" :active-value="0" :inactive-value="1" :active-text="item1.disableAccount ? '禁用' : '启用'" @change="switchOff($event,item1)"></el-switch> </li> </div> <div class="line"> <li> <span class="name">该工号所绑定角色:</span> <p class="val">管理员</p> </li> </div> </ul> </el-card> </div> </div> </el-card> </div> </el-dialog> </div> </div> <el-table :data="platformList" class="table" stripe header-align="center" row-key="platformId" > <el-table-column type="index" width="100" label="序号" align="center"></el-table-column> <el-table-column prop="platformName" label="系统名称" align="center"></el-table-column> <el-table-column prop="domainName" label="域名" align="center"></el-table-column> <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column> <el-table-column label="操作" align="center"> <template slot-scope="scope"> <el-button type="text" @click="show(scope.row)">查看</el-button> </template> </el-table-column> </el-table> </el-card> </el-col> </el-row> </div> </template> <script> export default { name: 'baseform', data() { return { isDetail: true, typeList: [ { id: 0, label: '教师端' },{ id: 1, label: '学生端' } ], region: '', // 系统选择 checkList: [{ label: '管理员', id: 13 }, { label: '教师', id: 14 }, { label: '学生', id: 4 }], //角色选择 radio: '1', //组织关系 innerVisible: false, dialogFormVisible: false, form: { //个人信息 userId: this.$store.state.userId, userName: '', //用户姓名 uniqueIdentification: '', //唯一识别码 documentType: 1, //证件类型 IDNumber: '', //证件号码 cityId: '', //省份 countries: '中国', //国家 provinceId: '', //城市 dateBirth: '', //出生日期 educationDegree: '', //教育程度 sex: '', //性别 schoolId: '', //学校 //账号信息 phone: '', //手机号码 WeChatID: '', //微信 email: '', //邮箱 }, occupationList: [{ value: 1, label: '学生' }, { value: 2, label: '老师' }], roleIds: [], archivesForm: { //个人档案 personalCareerId: '', //职业 schoolId: '', //院校 schoolName: '', //院校名称 professionalClassId: '', //专业类 professionalClassName: '', //专业类名称 disciplineId: '', //专业学科 disciplineName: '', //专业学科名称 professionalId: '', //专业 professionalName: '', //专业名称 userId: this.$store.state.userId }, archivesList: [], rules: { userName: [{ required: true, message: '请输入用户姓名', trigger: 'blur' }], schoolId: [{ required: true, message: '请选择当前院校', trigger: 'change' }], phone: [ { required: true, message: '请输入手机号', trigger: 'blur' }, { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' } ], IDNumber: [ // { required: true, message: '请输入证件号码', trigger: 'blur' }, { pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/, message: '请输入正确的证件号码', trigger: 'blur' } ], email: [ // { required: true, message: '请输入邮箱', trigger: 'blur' }, { pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, message: '请输入正确的邮箱', trigger: 'blur' } ] }, sexList: [ { name: '男', value: 1 }, { name: '女', value: 2 } ], documentTypeList: [ { name: '居民身份证', value: 1 } ], // 教育程度 educationDegreeList: [ { name: '专科', value: 1 }, { name: '本科', value: 2 }, { name: '硕士', value: 3 }, { name: '博士', value: 4 }, { name: '其他', value: 5 } ], subjectList: [], //专业学科 ProfessionalClassList: [], //专业类 ProfessionalList: [], //专业 //国家 countryList: [ { name: '中国' } ], schoolList: [], cityList: [], //城市 provinceList: this.$store.state.provinceList, //省份 userId: this.$store.state.userId, IDdisabled: false, regionOption: [{ regionName: '职站', regionId: 1 }, { regionName: '数据平台', regionId: 2 }], //系统选择 secondaryDepartmentsList: [], //二级部门 secondaryDepartmentsList_T: [], //二级部门 majorList: [], //学生—专业 yearList: [], //学生—年级 classList: [], //学生—班级 multipleSelection: [], customerList: [], //客户列表 cusSearch: '', chooseCusList: [], choosecusArr: '', chooseList: [], NoAdd: true, AccountNoAdd: true, NumberNoAdd: true, teaNumberNoAdd: true, stuNumberNoAdd: true, platformList: [], //平台系统列表 saveList: [], roldform: { }, clickFlag: true, searchTimer: null }; }, mounted() { this.getSchoolData() if(this.userId){ this.$get(this.api.queryUserInfoDetails,{ userId: this.userId }).then(res => { let userInfo = res.result.hrUserInfo let personalFileList = res.result.personalFileList let platformList = res.result.platformList let userAccount = res.result.userAccountList this.form.userName = userInfo.userName this.form.uniqueIdentification = userInfo.uniqueIdentification this.form.IDNumber = userInfo.iDNumber this.form.cityId = userInfo.cityId this.form.provinceId = userInfo.provinceId this.form.dateBirth = userInfo.dateBirth this.form.educationDegree = userInfo.educationDegree this.form.sex = userInfo.sex this.form.schoolId = userInfo.schoolId this.form.phone = userInfo.phone this.form.WeChatID = userAccount[0].wechatId if(userInfo.provinceId){ this.getCityData() } // 个人档案 if(personalFileList.length != 0){ personalFileList.map(e =>{ this.$set(e, 'subjectList', this.subjectList); if(e.disciplineId){ this.$get(this.api.queryCourseProfessionalClass,{ disciplineId: e.disciplineId }).then(res => { this.$set(e, 'ProfessionalClassList', res.message); }).catch(res => {}); } if(e.professionalClassId){ this.$get(this.api.queryCourseProfessional,{ professionalClassId: e.professionalClassId }).then(res => { this.$set(e, 'ProfessionalList', res.message); }).catch(res => {}); } }) } this.archivesList = personalFileList // 平台系统 platformList.map(e =>{ this.regionOption.map((r,index) =>{ if(r.regionId == e.platformId){ this.regionOption.splice(index,1) } }) }) this.platformList = platformList }).catch((res) => {}) } }, methods: { async getInfo(item ,index){ let res = await this.$get(this.api.queryUserOR, { userId: this.userId, platformId: item.platformId}) return (res.message) }, // 获取城市 getCity(){ if(this.form.provinceId){ this.getCityData() } }, getCityData(){ this.$get(this.api.queryCity,{provinceId: this.form.provinceId}).then(res => { this.cityList = res.message }).catch(res => {}); }, // 获取列表学校名称 schoolitemChange(item){ if(item){ this.archivesList.map(e =>{ if(e.schoolId == item){ let obj = {}; obj = this.schoolList.find(r =>{ return r.schoolId === item; }); e.schoolName = obj.schoolName } }) } }, // 获取学校名称 getSchoolData(){ this.$get(this.api.querySchoolData,{ schoolName: '', provinceId: '', cityId: '' }).then(res => { this.schoolList = res.message }).catch(res => {}); }, goback(){ this.$router.back() }, // 获取学科类别 getSubject(){ this.$get(this.api.queryCourseDiscipline).then(res => { this.subjectList = res.message }).catch(res => {}); }, // 清除学科类别 clearClass(){ this.archivesForm.professionalClassId = '', this.archivesForm.professionalId = '' }, // 获取专业类 getProfessionalClass(val){ this.clearClass() if(val){ let obj = {}; obj = this.subjectList.find((item)=>{ return item.disciplineId === val; }); this.archivesForm.disciplineName = obj.disciplineName this.getProfessionalClassData(val) } }, clearItemClass(index){ this.archivesList[index].professionalClassId = '' this.archivesList[index].professionalClassName = '' this.archivesList[index].professionalId = '' this.archivesList[index].professionalName = '' // this.archivesList.map(e =>{ // if(e.disciplineId == item){ // e.professionalClassId = '', // e.professionalClassName = '', // e.professionalId = '', // e.professionalName = '' // } // }) }, getItemProfessionalClass(item,index){ this.clearItemClass(index) if(item){ let obj = {}; obj = this.subjectList.find(r =>{ return r.disciplineId === item; }); this.$get(this.api.queryCourseProfessionalClass,{ disciplineId: item }).then(res => { this.archivesList.map(e =>{ if(e.disciplineId == item){ e.ProfessionalClassList = res.message e.disciplineName = obj.disciplineName } }) }).catch(res => {}); } }, getProfessionalClassData(value){ this.$get(this.api.queryCourseProfessionalClass,{ disciplineId: value }).then(res => { this.ProfessionalClassList = res.message }).catch(res => {}); }, // 清除专业类 clearProfess(){ this.archivesForm.professionalId = '' }, // 获取专业 getProfessional(val){ this.clearProfess() if(val){ let obj = {}; obj = this.ProfessionalClassList.find((item)=>{ return item.professionalClassId === val; }); this.archivesForm.professionalClassName = obj.professionalClassName this.getProfessionalData(val) } }, clearItemProfess(index){ this.archivesList[index].professionalId = '' this.archivesList[index].professionalName = '' // this.archivesList.map(e =>{ // if(e.professionalClassId == item){ // e.professionalId = '', // e.professionalName = '' // } // }) }, getItemProfessional(item,index){ this.clearItemProfess(index) if(item){ this.$get(this.api.queryCourseProfessional,{ professionalClassId: item }).then(res => { this.archivesList.map(e =>{ if(e.professionalClassId == item){ let obj = {}; obj = e.ProfessionalClassList.find(r =>{ return r.professionalClassId === item; }); e.ProfessionalList = res.message e.professionalClassName = obj.professionalClassName } }) }).catch(res => {}); } }, getProfessionalData(value){ this.$get(this.api.queryCourseProfessional,{professionalClassId: value}).then(res => { this.ProfessionalList = res.message }).catch(res => {}); }, // 获取专业名称 getStuGrade(val){ if(val){ let obj = {}; obj = this.ProfessionalList.find(r =>{ return r.professionalId === val; }); this.archivesForm.professionalName = obj.professionalName } }, getItemStuGrade(item){ if(item){ this.archivesList.map(e =>{ if(e.professionalId == item){ let obj = {}; obj = e.ProfessionalList.find(r =>{ return r.professionalId === item; }); e.professionalName = obj.professionalName } }) } }, show(row){ let obj = {} Object.assign(obj,{ regionName: row.platformName, regionId: row.platformId, }) this.regionOption = [obj, ...[]] this.region = row.platformId this.dialogFormVisible = true this.choosecusArr = '' this.chooseCusList = [] this.chooseList = [] this.$get(this.api.selectUserSysBind, { userId: this.userId, platformId: row.platformId}).then(res => { let list = res.result.map for(let i in list){ for(let n in list[i]){ console.log(11,list[i][n]) list[i] = list[i][n] } } this.chooseList = list console.log(11,list) }).catch(res => {}) }, switchOff(val,item){ console.log(val,item) } } }; </script> <style lang="scss" scoped> // 新增系统 .card ::v-deep .el-card { border-radius: 15px; } .card_m { margin: 10px 0 20px 0; } ::v-deep .el-dialog__title { font-weight: 600; } .region ::v-deep .el-form-item__label { font-weight: 600; } .region ::v-deep .el-input { width: 30%; } .numberInput{ display: inline-flex; align-items: center; span{ white-space: nowrap; } } .numberInput ::v-deep .el-input { width: 80%; } .stu_input ::v-deep .el-input { width: 80%; } .radio { margin: 0 15px 0 30px; font-weight: 600; } .jobNumber { margin: 10px 0; } .jobNumber ::v-deep .el-input { margin-left: 20px; } .icon_btn { margin: 5px 5px 15px 0; } .flex_start { display: flex; justify-content: flex-start; align-items: center; } .flex_end { display: flex; justify-content: flex-end; align-items: center; } .flex { display: flex; align-items: center; } .from_card { margin-bottom: 20px; } .mgb20_top { margin-top: 400px; } .mag { margin-right: 20px; } .magr50 { margin-left: 50px; } .font_same { margin-left: 40px; color: rgb(155, 179, 245); font-size: 14px; } .school-item{ margin-bottom: 20px; .school-name{ font-size: 16px; font-weight: bold; } .port{ .port-name{ margin: 10px 0; font-size: 15px; color: #9076FF; } .fields{ .line{ display: flex; margin-bottom: 10px; li{ display: flex; align-items: center; margin-right: 80px; .name{ font-size: 14px; } .val{ font-size: 14px; font-weight: bold; } } } } } } // 滚动条的宽度 .scrollbar ::-webkit-scrollbar { width: 2px; // 横向滚动条 height: 6px; // 纵向滚动条 必写 } // 滚动条的滑块 .scrollbar ::-webkit-scrollbar-thumb { background-color: #9278ff; border-radius: 3px; box-shadow: inset 0 0 5px #dddddd; } .scrollbar ::-webkit-scrollbar-track { /*滚动条里面轨道*/ box-shadow: inset 0 0 5px #dddddd; border-radius: 0; background: #dddddd; } /deep/.el-input__inner{ height: 40px !important; } </style>