opms_frontend/src/views/contract/detail.vue

<!--
 * @Author: liuzl liuzl0802
 * @Date: 2023-01-05 16:29:01
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-01-09 14:43:21
 * @Description: file content
 * @FilePath: \订单全流程管理系统\src\views\contract\detail.vue
-->
<template>
  <div class="details">
    <el-row :gutter="10">
      <el-col :span="16">
        <div class="title">
          <p>合同</p>
          <h3>
            {{ details.contractName }}
          </h3>
        </div>
        <header>
          <el-descriptions :colon="false" :column="6" direction="vertical">
            <el-descriptions-item content-class-name="my-content" label="客户名称" label-class-name="my-label">
              {{ details.custName }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="合同金额（元）" label-class-name="my-label">
              {{ details.contractAmount }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="下单时间" label-class-name="my-label">
              {{ details.createdTime }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="回款金额（元）" label-class-name="my-label">
              {{ details.collectedAmount }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="负责人" label-class-name="my-label">
              {{ details.inchargeName }}
            </el-descriptions-item>
          </el-descriptions>
        </header>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="详细信息" name="details">
            <details-info :details="details" />
          </el-tab-pane>
          <el-tab-pane label="产品" name="product">
            <details-product :product="product" />
          </el-tab-pane>
          <el-tab-pane label="回款" name="collection">
            <details-collection v-if="activeName == 'collection'" :details="details" />
          </el-tab-pane>
          <el-tab-pane label="发票" name="invoice">发票</el-tab-pane>
          <el-tab-pane label="附件" name="enclosure">附件</el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import contractApi from '@/api/contract'
  import DetailsInfo from './components/DetailsInfo'
  import DetailsProduct from './components/DetailsProduct'
  import DetailsCollection from './components/DetailsCollection'

  export default {
    name: 'ContractDetail',
    components: { DetailsInfo, DetailsProduct, DetailsCollection },
    data() {
      return {
        id: '',
        details: {},
        product: [],
        abstract: {},
        activeName: 'details',
      }
    },
    computed: {
      ...mapGetters({
        avatar: 'user/avatar',
        username: 'user/username',
      }),
    },
    mounted() {
      this.id = this.$route.query.id
      this.init()
      this.handleClick({ name: 'details' })
    },
    methods: {
      init() {
        Promise.all([contractApi.getDetails({ id: parseInt(this.id) })]).then(([details]) => {
          if (details.data) {
            let { product, ...data } = details.data
            this.product = product
            this.details = data
          }
        })
      },
      async handleClick() {},
      back() {
        this.$router.go(-1)
      },
    },
  }
</script>

<style lang="scss" scoped>
  $base: '.details';
  #{$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;
      }
    }

    .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: 190px;
            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;
          }
        }
      }
    }

    .no-follow {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.65);
    }
  }

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

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

  .height-enter, .height-leave-to /* .fade-leave-active below version 2.1.8 */ {
    height: 0;
  }

  ::v-deep .el-descriptions__table tbody {
    td,
    th {
      width: 25%;
    }
  }
</style>