dy-admin-manager/src/views/resetTeaming/components/archicesComponents/baseInfo.vue

<template>
  <div>
    <el-alert :closable="false" class="alert" type="info">
      <template slot="title">
        <div class="shapeWrap">
          <span class="shape"></span>
          <p>基本信息</p>
        </div>
      </template>
    </el-alert>
    <descriptions :column="3" class="marginBtm22">
      <descriptions-item label="乐团编号：">
        <div v-if="baseInfo && baseInfo.id">
          <overflow-text :text="baseInfo.id || ''" width="100%"></overflow-text>
        </div>
      </descriptions-item>
      <descriptions-item label="申请时间：">
        {{ baseInfo.createTime | formatTimer }}</descriptions-item
      >
      <descriptions-item label="开团时间：">
        {{ baseInfo.billStartDate | formatTimer }}</descriptions-item
      >
      <descriptions-item label="收费模式：">
        {{ baseInfo.courseViewType | courseViewType }}</descriptions-item
      >
      <descriptions-item label="收费类型："
        >{{ baseInfo.chargeTypeName }}
      </descriptions-item>
      <descriptions-item label="合作单位：">
        {{ baseInfo.cooperationOrganName }}</descriptions-item
      >
      <descriptions-item label="教学点："
        >{{ baseInfo.schoolName }}
      </descriptions-item>
      <descriptions-item label="衔接老师：">
        <div>
          {{ baseInfo.transactionTeacherName }}
          <span
            v-if="
              baseInfo.transactionTeacherName &&
              baseInfo.transactionTeacherPhone
            "
            >/</span
          >
          {{ baseInfo.transactionTeacherPhone }}
        </div>
      </descriptions-item>
      <descriptions-item label="乐队指导："
        >{{ baseInfo.directorUserName }}
      </descriptions-item>
      <descriptions-item label="乐团主管：">
        {{ baseInfo.educationalTeacherName }}</descriptions-item
      >
    </descriptions>
    <el-alert :closable="false" class="alert" type="info">
      <div class="shapeWrap">
        <span class="shape"></span>
        联系人
      </div>
    </el-alert>

    <descriptions
      :column="3"
      v-if="baseInfo.cooperationOrganLinkmanList.length > 0"
    >
      <template v-for="(item, index) in baseInfo.cooperationOrganLinkmanList">
        <descriptions-item label="联系人：" :key="index">
          {{ item.linkman }}</descriptions-item
        >
        <descriptions-item label="职位：" :key="index">
          {{ item.job }}</descriptions-item
        >
        <descriptions-item label="手机号：" :key="index">
          {{ item.mobileNo }}</descriptions-item
        >
      </template>
    </descriptions>
    <div v-else>
      <empty desc="暂无联系人" />
    </div>
  </div>
</template>
<script>
import { getBasicInfo } from "./api";
export default {
  data() {
    return {
      baseInfo: {
        id: "",
        createTime: "",
        billStartDate: "",
        courseViewType: "",
        chargeTypeName: "",
        cooperationOrganName: "",
        transactionTeacherName: "",
        transactionTeacherPhone: "",
        directorUserName: "",
        educationalTeacherName: "",
        cooperationOrganLinkmanList: [],
      },
    };
  },
  async mounted() {
    try {
      const res = await getBasicInfo({ musicGroupId: this.$route.query.id });
      this.baseInfo = res.data;
    } catch (e) {
      console.log(e);
    }
  },
  methods: {},
};
</script>
<style lang="scss" scoped="scoped">
.marginBtm22 {
  margin-bottom: 22px;
}
.shapeWrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  .shape {
    position: relative;
    top: -1px;
    display: block;
    margin-right: 10px;
    height: 14px;
    width: 4px;
    background-color: var(--color-primary);
    z-index: 500;
  }
}
</style>