<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>