opms_frontend/src/views/contract/detail.vue

<!--
 * @Author: liuzl 461480418@qq.com
 * @Date: 2023-01-05 16:29:01
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-01-11 16:10:19
 * @Description: file content
 * @FilePath: \订单全流程管理系统\src\views\contract\detail.vue
-->
<template>
  <div class="details">
    <div class="side-layout">
      <div class="info">
        <div class="title">
          <p>合同</p>
          <h3>
            {{ details.contractName }}
            <span>
              <el-button v-permissions="['contract:manage:transfer']" icon="el-icon-refresh" @click="handleTransfer">
                转移
              </el-button>
            </span>
          </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">
              {{ formatPrice(details.contractAmount) }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="合同时间" label-class-name="my-label">
              {{ parseTime(details.contractStartTime, '{y}-{m}-{d}') }}~{{
                parseTime(details.contractEndTime, '{y}-{m}-{d}')
              }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="回款金额（元）" label-class-name="my-label">
              {{ formatPrice(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-item content-class-name="my-content" label="回款比例" label-class-name="my-label">
              {{ scale(details.collectedAmount, details.contractAmount) }}
            </el-descriptions-item>
          </el-descriptions>
        </header>
        <el-tabs v-model="activeName">
          <el-tab-pane label="详细信息" name="details">
            <details-info :details="details" />
          </el-tab-pane>
          <el-tab-pane label="产品" name="product">
            <details-product :details="details" :product="product" @productUpdate="init" />
          </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">
            <details-invoice v-if="activeName == 'invoice'" :details="details" />
          </el-tab-pane>
          <el-tab-pane label="交付工单" name="deliver">
            <details-deliver v-if="activeName == 'deliver'" :details="details" />
          </el-tab-pane>
          <el-tab-pane label="附件" name="enclosure">
            <details-enclosure v-if="activeName == 'enclosure'" :details="details" />
          </el-tab-pane>
          <el-tab-pane label="分成信息" name="share">
            <details-share v-if="activeName == 'share'" :details="details" :shares="shares" />
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="info-side">
        <div class="buttons">
          <el-button v-permissions="['contract:manage:edit']" type="primary" @click="handleEdit">编辑</el-button>
          <el-button v-permissions="['contract:manage:delete']" @click="handleDelete">删除</el-button>
          <el-button @click="back">返回</el-button>
        </div>
        <details-records :dynamics-list="dynamicsList" />
      </div>
    </div>
    <!-- 新增编辑客户弹窗 -->
    <Edit ref="edit" @contractSave="init" />
    <!-- 转移合同 -->
    <Transfer ref="transfer" :contract-id="[id]" @transferSave="init" />
  </div>
</template>

<script>
  import to from 'await-to-js'
  import { mapGetters } from 'vuex'
  import contractApi from '@/api/contract'
  import DetailsInfo from './components/DetailsInfo'
  import DetailsProduct from './components/DetailsProduct'
  import DetailsCollection from './components/DetailsCollection'
  import DetailsRecords from './components/DetailsRecords'
  import DetailsInvoice from './components/DetailsInvoice'
  import DetailsEnclosure from './components/DetailsEnclosure'
  import DetailsDeliver from './components/DetailsDeliver'
  import DetailsShare from './components/DetailsShare'
  import Edit from './components/Edit'
  import Transfer from './components/Transfer'

  export default {
    name: 'ContractDetail',
    components: {
      DetailsInfo,
      DetailsProduct,
      DetailsCollection,
      DetailsRecords,
      DetailsInvoice,
      DetailsEnclosure,
      DetailsDeliver,
      DetailsShare,
      Edit,
      Transfer,
    },
    data() {
      return {
        id: 0,
        details: {},
        product: [],
        abstract: {},
        activeName: 'details',
        dynamicsList: [],
        shares: [],
      }
    },
    computed: {
      ...mapGetters({
        avatar: 'user/avatar',
        username: 'user/username',
      }),
    },
    mounted() {
      this.id = parseInt(this.$route.query.id) || null
      this.init()
      this.getShares()
      this.getRecord()
    },
    methods: {
      async init() {
        const [err, res] = await to(contractApi.getDetails({ id: this.id }))
        if (err) return
        if (res.data) {
          let { product, ...data } = res.data
          this.product = product
          this.details = data
        }
      },
      // 获取查询分成信息
      async getShares() {
        const [err, res] = await to(contractApi.getContractShareList({ contractId: this.id + '' }))
        if (err) return
        if (res.data) {
          let { list } = res.data
          this.shares = list
        }
      },
      scale(numer1, numer2) {
        if (numer2 == 0) {
          return '-'
        }
        return (Math.round((numer1 / numer2) * 10000) / 10000) * 100 + '%'
      },
      async getRecord() {
        const [err, res] = await to(contractApi.getDynamicsList({ contractId: this.id }))
        if (err) return
        if (res.data.list) {
          let obj = res.data.list
          const keys = Object.keys(obj).reverse()
          let records = {}
          for (const item of keys) {
            records[item] = obj[item]
          }

          this.dynamicsList = records
        }
      },
      async handleEdit() {
        this.$refs.edit.init(this.id)
      },
      // 合同删除
      handleDelete() {
        let ids = [this.id]
        if (!ids[0]) {
          return
        }
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            const [err, res] = await to(contractApi.delContract({ id: ids }))
            if (err) return
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!',
              })
              this.$router.push({
                path: '/contract/manage',
              })
            }
          })
          .catch(() => {})
      },
      // 转移合同
      handleTransfer() {
        this.$refs.transfer.open()
      },
      back() {
        this.$router.go(-1)
      },
    },
  }
</script>

<style lang="scss" scoped>
  $base: '.details';
  #{$base} {
    height: calc(100vh - 60px - 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;
    }
  }

  .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>