opms_frontend/src/views/base/distributor/detail.vue

<template>
  <div class="detail">
    <el-row :gutter="30">
      <el-col :span="25">
        <div class="title">
          <p>经销商</p>
          <h3>
            {{ detail.distName }}
          </h3>
        </div>
        <header>
          <el-descriptions :colon="false" :column="10" direction="vertical" style="padding-top: 15px">
            <el-descriptions-item
              content-class-name="my-content"
              label="经销商编码"
              label-class-name="my-label"
              style="width: auto">
              {{ detail.distCode.substring(1, 7) }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="经销商名称" label-class-name="my-label">
              {{ detail.distName }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="助记名" label-class-name="my-label">
              {{ detail.abbrName }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="负责人" label-class-name="my-label">
              {{ detail.distBoss }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="负责人电话" label-class-name="my-label">
              {{ detail.distBossPhone }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="销售人" label-class-name="my-label">
              {{ detail.belongSale }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="归属省份" label-class-name="my-label">
              {{ detail.provinceDesc }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="业务范围" label-class-name="my-label">
              {{ detail.businessScope }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="创建人" label-class-name="my-label">
              {{ detail.createdName }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="创建时间" label-class-name="my-label">
              {{ detail.createdTime }}
            </el-descriptions-item>
          </el-descriptions>
        </header>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import api from '@/api/base/distr'
  export default {
    name: 'Detail',
    components: {},
    data() {
      return {
        id: '',
        privateCus: '',
        list: [],
        detail: {
          distCode: '', //经销商编码
          distName: '', //经销商名称
          abbrName: '', //助记名
          distBoss: '', //负责人
          distBossPhone: '', //负责人电话
          belongSale: '', //销售人
          provinceDesc: '', //归属省份
          businessScope: '', //业务范围
          createdName: '', //创建人名字
          createdTime: '', //创建时间
        },
      }
    },
    computed: {
      ...mapGetters({
        avatar: 'user/avatar',
        username: 'user/username',
      }),
    },
    mounted() {
      this.id = this.$route.query.id
      this.privateCus = this.$route.query.privateCus
      this.init()
      //this.getDynamics()
    },
    methods: {
      async init() {
        Promise.all([api.getEntity({ id: parseInt(this.id) })]).then(([detail]) => {
          console.log('detail', detail)
          this.detail = detail.data.list
        })
      },

      setSelectRows(val) {
        this.selectRows = val
      },
    },
  }
</script>

<style lang="scss" scoped>
  $base: '.detail';

  #{$base} {
    height: calc(100vh - 60px - 50px - 12px * 2 - 40px);
    display: flex;
    padding: 20px 40px;

    > .el-row {
      flex: 1;

      > .el-col {
        height: 100%;
      }
    }

    .title {
      p,
      h3 {
        margin: 0;
      }

      p {
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
      }

      h3 {
        font-size: 24px;
        font-weight: 500;
        line-height: 36px;
        color: #333;
        display: flex;
        justify-content: space-between;
      }
    }

    header {
      height: 74px;
      background: rgba(196, 196, 196, 0.5);
      border-radius: 4px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      margin-top: 16px;

      ::v-deep .el-descriptions__body {
        background: transparent;
      }

      ::v-deep .my-label {
        font-size: 14px;
        font-weight: 600;
        color: #1d66dc;
      }

      ::v-deep .my-content {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .el-tabs {
      height: calc(100% - 148px);
      display: flex;
      flex-direction: column;

      ::v-deep .el-tabs__content {
        flex: 1;

        .el-tab-pane {
          height: 100%;
        }
      }
    }

    .buttons {
      padding-top: 28px;
      text-align: right;
    }

    .records {
      margin: 0;
      padding: 10px 20px;
      list-style: none;
      height: calc(100% - 60px);
      overflow-y: auto;

      > li {
        display: flex;

        & + li {
          margin-top: 10px;
        }
      }

      .date {
        width: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;

        h2,
        h3 {
          margin: 0;
        }

        h2 {
          font-size: 26px;
          line-height: 32px;
        }
      }

      .content {
        flex: 1;
        list-style: none;

        li {
          display: flex;

          & + li {
            margin-top: 10px;
          }
        }

        .user-avatar {
          font-size: 40px;
        }

        .text {
          flex: 1;
          padding-left: 20px;

          p {
            font-weight: 500;
            margin: 0;
            line-height: 20px;

            span {
              color: #1d66dc;
            }
          }

          p:nth-child(2) {
            margin-bottom: 10px;
          }

          .action {
            font-weight: bold;
            color: #333;
          }
        }
      }
    }

    .follow {
      height: 100%;
      padding: 10px 20px;
      overflow: auto;

      > li {
        display: flex;

        + li {
          margin-top: 10px;
        }
      }

      .date {
        width: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;

        h2,
        h3 {
          margin: 0;
        }

        h2 {
          font-size: 26px;
          line-height: 32px;
        }
      }

      .content {
        flex: 1;
        list-style: none;

        > li {
          border: 1px solid rgb(215, 232, 244);
          background: rgb(247, 251, 254);
          border-radius: 4px;
          padding: 8px;
          overflow: hidden;

          .text-container {
            display: flex;
          }

          .comments {
            padding-left: 60px;
            margin-top: 10px;
            max-height: 200px;
            overflow: auto;

            li {
              display: flex;
              border-top: 1px solid #e3e5e7;

              .text {
                flex: 1;
                padding: 0 10px;

                p {
                  font-weight: 500;
                  margin: 0;
                  line-height: 32px;
                }

                p:first-child {
                  line-height: 30px;
                  font-weight: bold;
                }

                p:last-child {
                  font-size: 12px;
                  color: #9499a0;
                  text-align: right;
                }
              }
            }
          }

          + li {
            margin-top: 10px;
          }
        }

        .user-avatar {
          font-size: 40px;
        }

        .text {
          flex: 1;
          padding-left: 20px;
          padding-right: 10px;

          p {
            font-weight: 500;
            margin: 0;
            line-height: 32px;

            span {
              color: #1d66dc;
            }
          }

          .action {
            display: flex;
            justify-content: space-between;

            span:first-child {
              font-weight: bold;
              color: #333;
            }
          }

          .footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }
  }

  .height-enter-active,
  .height-leave-active {
    transition: all 0.5s;
  }

  .height-enter-to,
  .height-leave {
    height: 200px;
  }

  .height-enter,
.height-leave-to

  /* .fade-leave-active below version 2.1.8 */ {
    height: 0;
  }
</style>