pbl-teacher-table/src/components/pages/testPerson/info/index.vue

<template>
  <div class="i_body">
    <div class="i_b_left">
      <img :src="info.headportrait ? info.headportrait : avator" alt="" />
      <div>
        <div>
          {{ info.username
          }}<span @click="openInfo()"
            ><svg
              width="20"
              height="20"
              viewBox="0 0 20 20"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M2.5 3.125C2.5 2.77982 2.77982 2.5 3.125 2.5H10.625C10.9702 2.5 11.25 2.77982 11.25 3.125C11.25 3.47018 10.9702 3.75 10.625 3.75H3.75V16.25H16.25V10.625C16.25 10.2798 16.5298 10 16.875 10C17.2202 10 17.5 10.2798 17.5 10.625V16.875C17.5 17.2202 17.2202 17.5 16.875 17.5H3.125C2.77982 17.5 2.5 17.2202 2.5 16.875V3.125Z"
                fill="black"
                fill-opacity="0.9"
              />
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M17.3169 2.68306C17.561 2.92714 17.561 3.32286 17.3169 3.56694L9.81694 11.0669C9.57286 11.311 9.17714 11.311 8.93306 11.0669C8.68898 10.8229 8.68898 10.4271 8.93306 10.1831L16.4331 2.68306C16.6771 2.43898 17.0729 2.43898 17.3169 2.68306Z"
                fill="black"
                fill-opacity="0.9"
              />
            </svg>
          </span>
        </div>
        <span>{{ info.intro ? info.intro : "暂无简介" }}</span>
      </div>
    </div>
    <div class="i_b_right">
      <!-- <div>
        <span>年级</span>
        <div>{{ info.grade ? info.grade : "暂无" }}</div>
      </div>

      <span></span>

      <div>
        <span>学科</span>
        <div>{{info.subject ? info.subject : '暂无'}}</div>
      </div>

      <span></span>

      <div>
        <span>职务</span>
        <div>{{info.job ? info.job : '暂无'}}</div>
      </div>

      <span></span>

      <div>
        <span>教研室</span>
        <div>{{ info.classname ? info.classname : "暂无" }}</div>
      </div>

      <span></span>

      <div>
        <span>学段</span>
        <div>{{ info.stage ? info.stage : "暂无" }}</div>
      </div> -->
			<div v-for="(item,index) in teaType" :key="item.id">
        <div>
          <span>{{ item.name }}</span>
          <div>
           {{ getTypeC(item.child, item.value) }}
          </div>
        </div>
				<span v-if="index!=teaType.length-1"></span>
			</div>
    </div>
    <!-- <div class="i_top">
      <div class="img">
        <img :src="info.headportrait ? info.headportrait : avator" alt="">
      </div>
      <div class="name">
        <span>{{info.username}}</span>
      </div>
      <div class="detail">
        <el-tooltip :content="info.intro ? info.intro : '暂无简介'" placement="top" effect="dark">
          <span>{{info.intro ? info.intro : '暂无简介'}}</span>
        </el-tooltip>
      </div>
    </div> -->
    <!-- <div class="i_bottom"> -->
    <!-- <div class="i_bottom_span">
          <span>教研室</span>
          <el-tooltip :content="info.classname ? info.classname : '暂无'" placement="top" effect="dark">
            <span>{{info.classname ? info.classname : '暂无'}}</span>
          </el-tooltip>
        </div> -->
    <!-- <div class="i_bottom_box">
          <div class="i_bottom_span" v-for="item in teaType" :key="item.id">
            <span>
              {{ item.name + "：" }}
            </span>
            <el-tooltip :content="getTypeC(item.child, item.value)" placement="top" effect="dark">
              <span>{{ getTypeC(item.child, item.value) }}</span>
            </el-tooltip>
          </div>
        </div> -->

    <!-- <div v-if="!oidArray.includes(oid)" class="i_bottom_span">
          <span>学科</span>
          <el-tooltip :content="info.subject ? info.subject : '暂无'" placement="top" effect="dark">
            <span>{{info.subject ? info.subject : '暂无'}}</span>
          </el-tooltip>
        </div>
        <div v-if="!oidArray.includes(oid)" class="i_bottom_span">
          <span>职务</span>
          <el-tooltip :content="info.job ? info.job : '暂无'" placement="top" effect="dark">
            <span>{{info.job ? info.job : '暂无'}}</span>
          </el-tooltip>
        </div> -->
    <!-- <div class="i_bottom_btn" @click="openInfo()">
          <span class="edit"></span>
          <span>编辑个人信息</span>
        </div> -->
    <!-- </div> -->
    <infoDialog
      :dialogVisibleInfo.sync="dialogVisibleInfo"
      :userid="userid"
      :oid="oid"
    ></infoDialog>
  </div>
</template>

<script>
import avator from "../../../../assets/icon/test/teacher.jpg";
import infoDialog from "./infoDialognew/index.vue";
export default {
  components: {
    infoDialog
  },
  props: {
    userid: {
      type: String
    },
    oid: {
      type: String
    }
  },
  data() {
    return {
      avator: avator,
      info: {},
      dialogVisibleInfo: false,
      oidArray: ["d67940a5-510c-40ea-9c9a-2631ab03013a"],
      teaType: []
    };
  },
  watch: {
    dialogVisibleInfo(newValue, oldValue) {
      this.getData();
    }
  },
  computed: {
    getTypeC() {
      return function(array, value) {
        let name = [];
        for (var i = 0; i < array.length; i++) {
          if (value.indexOf(array[i].id) != -1) {
            name.push(array[i].name);
          }
        }
        return name.length ? name.join("/") : "暂无";
      };
    }
  },
  methods: {
    arrayToArray(arrayo, arrayt) {
      let array1 = arrayo;
      let array2 = arrayt;

      let commonElements = [];

      for (let i = 0; i < array1.length; i++) {
        for (let j = 0; j < array2.length; j++) {
          if (array1[i] === array2[j]) {
            commonElements.push(array1[i]);
          }
        }
      }
      return commonElements;
    },
    //获取分类类名
    getTypeInfo() {
      let params = {
        oid: this.oid
      };
      this.ajax
        .get(this.$store.state.api + "selectPerInfoAllTea", params)
        .then(res => {
					
					console.log(res.data)
          this.teaType = res.data[0];
          let typeInfo = res.data[1];

          this.teaType.forEach(e => {
            e.child = [];
            e.value = [];
            typeInfo.forEach(i => {
              if (e.id == i.parentid) {
                e.child.push({ id: i.id, name: i.name });
              }
            });
          });
          console.log(this.teaType, "teaType");
          // this.options = res.data[2];
          this.getData();
        })
        .catch(err => {
          console.error(err);
        });
    },
    getData() {
      let params = {
        uid: this.userid
      };
      this.ajax
        .get(this.$store.state.api + "selectTestUser", params)
        .then(res => {
          this.info = res.data[0][0];
          // 用于存储归类后的数据的对象
          this.teaType.forEach(e => {
            let array2 = [];
            for (var i = 0; i < e.child.length; i++) {
              array2.push(e.child[i].id);
            }
            e.value = this.arrayToArray(this.info.cclassid.split(","), array2);
          });
        })
        .catch(err => {
          console.error(err);
        });
    },
    openInfo() {
      this.dialogVisibleInfo = true;
    }
  },
  mounted() {
    this.getTypeInfo();
  }
};
</script>

<style scoped>
.i_body {
  width: 100%;
  height: 130px;
  min-height: 130px;
  background: #fff;
  border-bottom: 1px solid #e7e7e7;
  box-sizing: border-box;
  padding: 10px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* border-radius: 5px;
        margin-bottom: 10px;
        overflow: auto; */
}

.i_b_left {
  width: auto;
  height: 100%;
  max-width: 50%;
  overflow: auto;
  display: flex;
  align-items: center;
}

.i_b_left > img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.i_b_left > div {
  margin-left: 20px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.i_b_left > div > div {
  font-size: 34px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.i_b_left > div > div > span {
  width: 25px;
  height: 25px;
  cursor: pointer;
  margin-left: 20px;
}

.i_b_left > div > div > span > svg {
  width: 100%;
  height: 100%;
}

.i_b_left > div > span {
  font-size: 16px;
  color: #a1a1a1;
}

.i_b_right {
  width: auto;
  max-width: 50%;
  height: 100%;
  overflow: auto;
  display: flex;
  align-items: center;
}

.i_b_right>div{
	display: flex;
}


.i_b_right>div >div {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  height: 60px;
  justify-content: space-between;
  padding: 0px 20px;
  text-wrap: nowrap;
}

.i_b_right>div > div>div {
  font-size: 18px;
  font-weight: bold;
  text-wrap: nowrap;
}

.i_b_right>div  >div > span {
  font-size: 18px;
  color: #00000099;
  text-wrap: nowrap;
}

.i_b_right>div > span {
  width: 1px;
  height: 50px;
  margin: 0 20px;
  background: #e7e7e7;
}

/* .i_top{
      height: 55%;
      width: calc(100% - 20px);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      padding: 10px 0px 0px;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      border-bottom: 1px solid #efefef;
    }

    .i_top > .img{
      width: 80px;
      height: 80px;
      overflow: hidden;
      border-radius: 50%;
    }
    .i_top > .img > img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .i_top > .name{
      width: 100%;
      margin: 10px;
      text-align: center;
    }
    .i_top > .name > span{
      display: block;
      max-width: 100%;
      font-size: 22px;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .i_top > .detail{
      width: 100%;
      text-align: center;
    }

    .i_top > .detail > span{
      max-width: 90%;
      font-size: 12px;
      margin: 0 auto;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      color: #a1a1a1;
      line-height: 20px;
      overflow: hidden;
      word-break: break-all;
    }

    .i_bottom{
      height: 45%;
      width: calc(100% - 20px);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .i_bottom .i_bottom_span{
      width: 90%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      font-size: 15px;
    }

    .i_bottom .i_bottom_span + .i_bottom_span{
      margin-top: 10px;
    }

    .i_bottom .i_bottom_span > span:nth-child(1){
      width: 50px;
      min-width: 50px;
      text-align: right;
      color: #a1a1a1;
    }
    .i_bottom .i_bottom_span > span:nth-child(2){
      width: calc(100% - 30px);
      overflow: hidden;
      margin-left: 20px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .i_bottom_box {
      width: 100%;
      height: calc(100% - 55px);
      overflow: auto;
      padding-top: 10px;
      box-sizing: border-box;
    }

    .i_bottom > .i_bottom_btn{
      cursor: pointer;
      border-radius: 5px;
      border: 1px solid #dbdbdb;
      box-sizing: border-box;
      width: 90%;
      background: rgb(252, 252, 252);
      margin: auto auto 10px;
      height: 35px;
      font-weight: 600;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .i_bottom > .i_bottom_btn > .edit{ 
      display: block;
      width: 15px;
      height: 15px;
      background-size:100% 100%;
      background-image: url('../../../../assets/icon/test/edit-icon.png');
      margin-right: 10px;
    } */
</style>