FE_preschoolEdu_server/src/pages/user/detail/index.vue

<template>
  <div>
    <p class="page-name mb">用户信息</p>
    <div class="page m-b-20">
      <p class="l-title">账号信息</p>
      <el-form v-for="(item, i) in userAccountList"
               :key="i"
               ref="form"
               class="input-form bb"
               label-width="120px"
               :disabled="isDetail">
        <div class="item-line">
          <el-form-item label="用户端">
            <el-input v-model="item.platformName"
                      disabled></el-input>
          </el-form-item>
          <el-form-item label="个人手机">
            <el-input v-model="item.phone"
                      placeholder="请输入手机号"
                      maxlength="11"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="用户名称">
          <el-input v-model="item.account"
                    placeholder="请输入用户名称"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="page m-b-20">
      <p class="l-title">实名认证信息（{{ form.authentication }}）</p>
      <el-form ref="form"
               class="input-form"
               :model="form"
               :rules="rules"
               label-width="120px"
               :disabled="isDetail">
        <div class="item-line">
          <el-form-item prop="userName"
                        label="用户姓名">
            <el-input v-model="form.userName"
                      placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item prop="phone"
                        label="手机号">
            <el-input v-model="form.phone"
                      placeholder="请输入手机号"
                      maxlength="11"></el-input>
          </el-form-item>
        </div>

        <div class="item-line">
          <el-form-item label="证件类型"
                        prop="documentType">
            <el-select value="1"
                       clearable
                       placeholder="请选择证件类型">
              <el-option label="身份证"
                         value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="idNumber"
                        label="证件号码">
            <el-input v-model="form.idNumber"
                      placeholder="请输入证件号码"
                      maxlength="18"></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="page">
      <p class="l-title">已绑定的平台和用户信息</p>
      <el-table :data="platformList"
                class="table"
                stripe
                header-align="center"
                row-key="accountId">
        <el-table-column type="index"
                         width="100"
                         label="序号"
                         align="center"></el-table-column>
        <el-table-column prop="organizationName"
                         label="组织名称"
                         align="center"></el-table-column>
        <el-table-column prop="companyName"
                         label="类型"
                         align="center">
          <template slot-scope="scope">
            {{ platformSource.find(e => e.id == scope.row.platformId).name }}
          </template>
        </el-table-column>
        <el-table-column prop="creditCode"
                         label="统一社会信用代码"
                         align="center"></el-table-column>
        <el-table-column prop="authentication"
                         label="组织认证状态"
                         align="center"></el-table-column>
        <el-table-column prop="roleName"
                         label="组织会员状态"
                         align="center"></el-table-column>
        <el-table-column label="操作"
                         width="180"
                         align="center">
          <template slot-scope="scope">
            <el-button type="text"
                       @click="show(scope.row)">查看</el-button>
            <el-button type="text"
                       @click="del(scope.row)">移除</el-button>
            <el-switch v-if="scope.row.openId!==1"
                       v-model="scope.row.isEnable"
                       :active-value="0"
                       :inactive-value="1"
                       style="margin: 0 10px 0 5px"
                       :active-text="scope.row.isEnable ? '禁用' : '启用'"
                       @change="switchUser($event,scope.row,scope.$index)"></el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import * as md5 from 'blueimp-md5'
import Const from '@/const/user'
export default {
  name: 'baseform',
  data () {
    return {
      openId: this.$route.query.openId,
      auditStatus: Const.auditStatus,
      platformSource: Const.platformSource,
      isDetail: this.$route.query.show === '1', // 是否是详情
      form: {
        //个人信息
        openId: '',
        userName: '', //用户姓名
        uniqueIdentification: '', //唯一识别码
        idNumber: '', //证件号码
        dateBirth: '', //出生日期
        phone: '', //手机号码
      },
      rules: {
        userName: [{ required: true, message: '请输入用户姓名', trigger: 'blur' }]
      },
      userAccountList: [],
      platformList: [], //平台系统列表
    };
  },
  mounted () {
    this.$store.commit('user/setCrumbs', [
      {
        name: '用户管理',
        route: '/user'
      },
      {
        name: '查看用户信息'
      },
    ])
    this.openId && this.getdata()
  },
  methods: {
    getdata () {
      this.$get(this.api.viewUserDetails, { openId: this.openId }).then(({ result }) => {
        const info = result.hrUserInfo
        // info.phone = result.userAccount.phone
        // 如果有手机号，则把唯一标识显示成MD5加密后的手机号，截取前13位数（唯一标识默认是13位数）
        // if (info.phone) info.uniqueIdentification = md5(info.phone).slice(0, 13)
        this.form = info
        if (result.userAccountList) {
          result.userAccountList.forEach(e => {
            e.platformName = this.platformSource.find(n => n.id == e.platformId).name
          })
          this.userAccountList = result.userAccountList
          console.log(333, this.userAccountList)
        }
        this.platformList = result.organizationInfoList
      }).catch((res) => { })
    },
    goback () {
      this.$router.back()
    },
    // 用户禁用启用
    switchUser (val, row) {
      this.$post(`${this.api.updateTeamStatus}?teamId=${row.teamId}&isEnable=${val}`).then(res => {
        this.$message.success(val ? '禁用成功' : '启用成功')
      }).catch(res => {
        row.isEnable = 0
      })
    },
    show (row) {
      this.$router.push(`/info?openId=${row.openId}&platformName=${row.platformName}`)
    },
    // 删除
    del (row) {
      this.$confirm('确定要移除吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.$post(this.api.delUserAccounts, [row.openId]).then(res => {
          this.$message.success('移除成功')
          this.getData()
        }).catch(res => { })
      }).catch(() => { })
    },
  }
};
</script>


<style lang="scss" scoped>
.bb:not(:last-child) {
    margin-bottom: 20px;
    border-bottom: 1px dashed #e3e3e3;
}
.l-title {
    margin-bottom: 15px;
    font-size: 15px;
    color: #000;
}

.arrowTransform {
    transition: 0.5s;
    transform-origin: center;
    transform: rotateZ(180deg);
}
.arrowTransformReturn {
    transition: 0.5s;
    transform-origin: center;
    transform: rotateZ(0deg);
}
// 新增系统
.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>